Hides FREE promotion when payments enabled

Author: kkartunov

src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss

@@ -93,3 +93,12 @@
         }
     }
 }
+
+.aloneTeaseBanner {
+    margin-bottom: $space-mxx !important;
+    border-radius: 8px;
+
+    @include ltemd {
+        margin-bottom: $space-xxl !important;
+    }
+}

src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx

@@ -3,6 +3,7 @@ import { FC, ReactNode, useCallback, useMemo } from 'react'
 import classNames from 'classnames'
 
 import { TCACertification, TCACertificationProgress } from '../../learn-lib'
+import { EnvironmentConfig } from '../../../../config'
 
 import { TCCertCard } from './cert-card'
 import styles from './TCCertifications.module.scss'
@@ -35,6 +36,8 @@ const TCCertifications: FC<TCCertificationsProps> = (props: TCCertificationsProp
 
     const certificationsCount: number = props.certifications.length
 
+    const tcaCertMonetization: boolean = !!EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION
+
     return (
         <div className={styles.wrap}>
             <h2 className='details'>
@@ -43,18 +46,20 @@ const TCCertifications: FC<TCCertificationsProps> = (props: TCCertificationsProp
                     {certificationsCount}
                 </span>
             </h2>
-            <div className={styles.teaseBanner}>
+            <div className={classNames(styles.teaseBanner, tcaCertMonetization ? styles.aloneTeaseBanner : '')}>
                 <h2>Introducing Topcoder Certifications</h2>
                 <p>
                     We are happy to release Topcoder Certifications! Take advantage
                     of our pilot Certification program. Click on a certification below to learn more.
                 </p>
             </div>
-            <div className={styles.freeBanner}>
-                <strong className='body-large-bold'>FREE</strong>
-                &nbsp;
-                <span className='body-large'>enrollment ends on April 30th.</span>
-            </div>
+            {!tcaCertMonetization && (
+                <div className={styles.freeBanner}>
+                    <strong className='body-large-bold'>FREE</strong>
+                    &nbsp;
+                    <span className='body-large'>enrollment ends on April 30th.</span>
+                </div>
+            )}
 
             <div className={styles.certsList}>
                 {

src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx

@@ -1,7 +1,7 @@
 import { FC, memo, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import { Button, ButtonStyle, IconSolid, ProgressBar, useCheckIsMobile } from '../../../../../lib'
+import { Button, ButtonStyle, IconSolid, ProgressBar } from '../../../../../lib'
 import {
     CertificateBadgeIcon,
     CompletionTimeRange,
@@ -13,6 +13,7 @@ import {
     TCACertificationProviderBase,
 } from '../../../learn-lib'
 import { getTCACertificateUrl, getTCACertificationPath } from '../../../learn.routes'
+import { EnvironmentConfig } from '../../../../../config'
 
 import styles from './TCCertCard.module.scss'
 
@@ -29,7 +30,6 @@ const getCtaBtn: (style: ButtonStyle, label: string, route: string) => ReactNode
 const EXCERPT_TEXT_LEN: number = 165
 
 const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
-    const isMobile: boolean = useCheckIsMobile()
 
     const desc: string = props.certification.description.slice(0, EXCERPT_TEXT_LEN)
 
@@ -84,13 +84,6 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
                         <CompletionTimeRange range={props.certification.completionTimeRange} />
                     </span>
                 </div>
-                {/* TODO: Uncomment this when paid certs come to prod! */}
-                {/* <div className={styles.subTitleItem}>
-                    <IconSolid.CurrencyDollarIcon width={16} height={16} />
-                    <span className={classNames('body-small', styles.infoText)}>
-                        {' One time payment'}
-                    </span>
-                </div> */}
             </div>
         )
     }
@@ -123,7 +116,8 @@ const TCCertCard: FC<TCCertCardProps> = (props: TCCertCardProps) => {
 
                         <div className={styles.cardLabels}>
                             <div className={styles.newLabel}>NEW</div>
-                            <div className={styles.freeLabel}>FREE</div>
+                            {!EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION
+                                && <div className={styles.freeLabel}>FREE</div>}
                         </div>
                     </div>
                     {renderStats()}