TCA-1077 free promo

Author: kkartunov

src-ts/lib/styles/mixins/_layout.mixins.scss

@@ -43,6 +43,7 @@
 }
 
 @mixin scrollbar {
+
     // firefox's solution for "customizing" scrollbars
     & {
         scrollbar-width: thin;
@@ -67,3 +68,20 @@
         }
     }
 }
+
+@mixin freeLabel {
+    font-size: 24px;
+    line-height: 32px;
+    font-weight: $font-weight-bold;
+    font-style: normal;
+    background-color: $orange-100;
+    padding: 2px $space-sm;
+    border-radius: 4px;
+    color: $black-100;
+    display: inline-block;
+
+    @include ltesm {
+        font-size: 20px;
+        line-height: 28px;
+    }
+}

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.module.scss

@@ -55,6 +55,14 @@
                 text-decoration: line-through;
                 color: $black-40;
             }
+
+            :global(.body-main-bold) {
+                font-style: normal;
+            }
+        }
+
+        .freeLabel {
+            @include freeLabel;
         }
     }
 }

src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx

@@ -99,17 +99,9 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                             <IconSolid.CurrencyDollarIcon />
                         </span>
                         <span className='quote-main'>
-                            <strong>Free</strong>
-                            &nbsp;until April 30&nbsp;
+                            <strong className={styles.freeLabel}>FREE</strong>
+                            <span className='body-main-bold'>&nbsp;until April 30&nbsp;</span>
                             <span className='strike'>$20</span>
-                            <Tooltip
-                                content={renderTooltipContents(<IconSolid.CurrencyDollarIcon />, [
-                                    'Introductory low pricing',
-                                ])}
-                                place='bottom'
-                                trigger={<IconOutline.InformationCircleIcon />}
-                                triggerOn='hover'
-                            />
                         </span>
                     </li>
                 )}

src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss

@@ -9,8 +9,10 @@
 .header {
     text-align: center;
 
-    h3 {
-        color: $blue-140;
+    .freeLabel {
+        @include freeLabel;
+
+        margin-bottom: $space-sm;
     }
 
     :global(.strike) {

src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx

@@ -13,9 +13,8 @@ interface EnrollmentSidebarProps {
 const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarProps) => (
     <StickySidebar className={styles.wrap}>
         <div className={styles.header}>
-            <h3 className='marketing'>Free</h3>
+            <div className={styles.freeLabel}>FREE</div>
             <span className='strike'>$20</span>
-            <strong className='overline'>Total payment</strong>
         </div>
         <hr />
         <div className={styles.form}>

src-ts/tools/learn/learn-lib/data-providers/tca-certifications-provider/tca-certification-progress/tca-certification-progress.model.ts

@@ -14,6 +14,7 @@ export interface TCACertificationProgress extends LearnModelBase {
     completionUuid: string
     coursesCount: number
     topcoderCertification: TCACertification
+    topcoderCertificationId: number
     status: TCACertificationProgressStatus
     completedAt: null | Date
     certificationProgress: number

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

@@ -29,14 +29,15 @@
         flex-direction: column;
         position: relative;
         padding: $space-xxxxl;
-        margin: $space-mx 0;
+        margin: $space-mx 0 0;
         background-image: url("./assets/certs-banner-bg.png");
         background-size: cover;
-        border-radius: 8px;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
 
         @include ltemd {
             padding: 88px $space-lg $space-lg;
-            margin: $space-lg 0;
+            margin: $space-lg 0 0;
             background-image: url("./assets/certs-banner-bg-mobile.png");
         }
 
@@ -57,6 +58,28 @@
         }
     }
 
+    .freeBanner {
+        display: flex;
+        align-items: center;
+        padding: $space-lg $space-xxxxl;
+        margin: 0 0 $space-mx;
+        background-image: url("./assets/free-banner-bg.png");
+        background-size: cover;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+
+        @include ltemd {
+            padding: $space-lg $space-xxl;
+            margin-bottom: $space-xxl;
+            background-image: url("./assets/free-banner-bg-mobile.png");
+
+            >span {
+                font-size: 14px;
+                line-height: 20px;
+            }
+        }
+    }
+
     .certsList {
         display: grid;
         grid-template-columns: 1fr 1fr;

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

@@ -50,6 +50,11 @@ const TCCertifications: FC<TCCertificationsProps> = (props: TCCertificationsProp
                     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'>Certifications are free until April 30th.</span>
+            </div>
 
             <div className={styles.certsList}>
                 {