Merge pull request #579 from topcoder-platform/TCA-920

kkartunov · web-flow · commit c2fd187b249d · 2023-03-24T05:07:32.000+02:00
TCA-719 enroll payment form tweaks -&gt; dev
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx b/src-ts/tools/learn/certification-details/enrollment-page/EnrollmentPage.tsx
@@ -78,7 +78,7 @@ const EnrollmentPage: FC<{}> = () => {
     if (progressReady && !enrolledCheck.current) {
         enrolledCheck.current = true
         if (!!progress) {
-            navigate(getTCACertificationPath(certification.dashedName))
+            navigate(getTCACertificationPath(certification?.dashedName as string))
         }
     }
 
@@ -88,15 +88,17 @@ const EnrollmentPage: FC<{}> = () => {
                 return
             }
 
-            await enrollTCACertificationAsync(`${profile.userId}`, `${certification.id}`)
+            await enrollTCACertificationAsync(`${profile.userId}`, `${certification?.id}`)
                 .then(d => {
                     setIsEnrolledModalOpen(true)
                     setCertificateProgress(d)
                 })
         }, [certification?.id, profile, setCertificateProgress])
 
+    const tcaMonetizationEnabled: boolean = EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION || false
+
     function navToCertificationDetails(): void {
-        navigate(getTCACertificationPath(certification.dashedName))
+        navigate(getTCACertificationPath(certification?.dashedName as string))
     }
 
     function closeEnrolledModal(): void {
@@ -110,8 +112,8 @@ const EnrollmentPage: FC<{}> = () => {
                 <PerksSection
                     style='clear'
                     items={perks}
-                    title={EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION
-                        ? 'Enroll now with our introductory low pricing!'
+                    title={tcaMonetizationEnabled
+                        ? ''
                         : 'Enroll now for Free!'}
                 />
 
@@ -131,7 +133,7 @@ const EnrollmentPage: FC<{}> = () => {
 
     useLayoutEffect(() => {
         if (profileReady && !profile) {
-            navigate(getTCACertificationPath(certification.dashedName))
+            navigate(getTCACertificationPath(certification?.dashedName as string))
         }
     }, [profileReady, profile, navigate, certification?.dashedName])
 
@@ -141,6 +143,7 @@ const EnrollmentPage: FC<{}> = () => {
             mainContent={renderMainContent()}
             extraBreadCrumbs={enrollmentBreadcrumb}
             certification={certification}
+            hideWaveHeroText={tcaMonetizationEnabled}
         />
     )
 }
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/EnrollPaymentForm.module.scss b/src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/EnrollPaymentForm.module.scss
@@ -3,10 +3,15 @@
 @import '../../../../../lib/styles/inputs';
 
 .payment-form {
-    .label {
-        @extend .body-ultra-small;
-        @extend .ultra-small-bold;
-        margin-bottom: $space-xs;
+    padding: $space-xxl;
+
+    @include ltemd {
+        padding: $space-lg;
+    }
+
+    > h3 {
+        margin-bottom: $space-xxl;
+        font-family: $font-barlow;
     }
 
     .cardElement {
@@ -44,10 +49,31 @@
 
     .pay-button {
         width: 100%;
+
+        @include ltemd {
+            margin-top: $space-lg;
+        }
     }
 
     .error {
-        color: $red-100;
+        background-color: $red-25;
+        padding: $space-lg;
+        border: 1px solid $red-120;
+        border-radius: 4px;
+        color: $red-120;
         margin-bottom: $space-xl;
+        display: flex;
+        align-items: flex-start;
+
+        .errorIcon {
+            width: 20px;
+            min-width: 20px;
+            margin-right: $space-sm;
+        }
+
+        .errorMsg {
+            display: flex;
+            flex-direction: column;
+        }
     }
 }
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/EnrollPaymentForm.tsx b/src-ts/tools/learn/certification-details/enrollment-page/enroll-payment-form/EnrollPaymentForm.tsx
@@ -14,7 +14,7 @@ import {
     StripeCardNumberElementChangeEvent,
 } from '@stripe/stripe-js'
 
-import { Button, InputText, LoadingSpinner, OrderContractModal } from '../../../../../lib'
+import { Button, IconOutline, InputText, LoadingSpinner, OrderContractModal } from '../../../../../lib'
 import { InputWrapper } from '../../../../../lib/form/form-groups/form-input/input-wrapper'
 
 import styles from './EnrollPaymentForm.module.scss'
@@ -32,12 +32,13 @@ interface FieldDirtyState {
 }
 
 interface EnrollPaymentFormProps {
-    error: boolean
+    error: string
     formData: PermiumSubFormData
     isFormValid: boolean
     onPay: () => void
     onUpdateField: (fieldName: string, value: string | boolean) => void
     isPayProcessing: boolean
+    price: string
 }
 
 type CardChangeEvent
@@ -110,7 +111,19 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
                 onClose={() => setIsOrderContractModalOpen(false)}
             />
 
-            <div className={styles.label}>Card Information</div>
+            <h3>Enter your payment information</h3>
+
+            {
+                props.error && (
+                    <div className={styles.error}>
+                        <IconOutline.ExclamationCircleIcon className={styles.errorIcon} />
+                        <div className={styles.errorMsg}>
+                            <strong>Your payment has been declined</strong>
+                            <span>{props.error}</span>
+                        </div>
+                    </div>
+                )
+            }
 
             <div className={styles['input-wrap-wrapper']}>
                 <InputWrapper
@@ -166,7 +179,7 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
                             classes: {
                                 base: styles.cardElement,
                             },
-                            placeholder: 'CCV',
+                            placeholder: 'Enter CVC',
                         }}
                         onChange={(event: StripeCardCvcElementChangeEvent) => cardElementOnChange('cvvComplete', event, setCardCVVError)}
                     />
@@ -196,14 +209,6 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
                 onChange={event => props.onUpdateField('subsContract', event.target.checked)}
             />
 
-            {
-                props.error && (
-                    <div className={styles.error}>
-                        Your card was declined. Please try a different card.
-                    </div>
-                )
-            }
-
             {
                 props.isPayProcessing && (
                     <LoadingSpinner type='Overlay' />
@@ -216,7 +221,7 @@ const EnrollPaymentForm: React.FC<EnrollPaymentFormProps> = (props: EnrollPaymen
                 type='button'
                 buttonStyle='primary'
                 name='pay-button'
-                label='Complete Enrollment'
+                label={`Pay $${props.price} and enroll`}
                 disable={!props.isFormValid || props.isPayProcessing}
                 onClick={props.onPay}
             />
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss b/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.module.scss
@@ -1,9 +1,7 @@
 @import '../../../../../lib/styles/includes';
 
-.wrap {
-    hr {
-        margin: $space-xxl 0;
-    }
+.wrapPayment {
+    padding: 0;
 }
 
 .header {
@@ -29,15 +27,37 @@
     }
 }
 
-.priceLabel {
-    color: $blue-140;
-    font-family: $font-barlow-condensed;
-    font-weight: 500;
-    font-size: 44px;
-    line-height: 44px;
+.headerPayment {
+    background: $tc-grad20;
     text-align: center;
-    text-transform: uppercase;
-    margin-bottom: $space-xs;
+    padding: $space-xxxxl 0;
+    border-top-left-radius: $space-sm;
+    border-top-right-radius: $space-sm;
+
+    .priceLabel {
+        color: $tc-white;
+        font-family: $font-barlow-condensed;
+        font-weight: 500;
+        font-size: 44px;
+        line-height: 44px;
+        text-align: center;
+        text-transform: uppercase;
+    }
+
+    :global(.strike) {
+        text-decoration: line-through;
+        color: $black-20;
+        display: block;
+        font-size: 18px;
+        line-height: 22px;
+        font-family: $font-barlow;
+        font-weight: $font-weight-semibold;
+        margin-bottom: $space-sm;
+    }
+
+    :global(.body-small-bold) {
+        color: $tc-white;
+    }
 }
 
 .noPaymentBanner {
@@ -76,6 +96,27 @@
     }
 }
 
-.paymentSuccessIcon {
-    color: $green-100;
+
+.paymentSuccess {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    padding: $space-xxl;
+
+    .paymentSuccessInner {
+        background: $turq-15;
+        border: 1px solid $turq-160;
+        border-radius: 4px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: $space-xl $space-xl $space-mxx;
+        color: $turq-160;
+
+        .successIcon {
+            min-width: 40px;
+            width: 40px;
+            margin-bottom: $space-md;
+        }
+    }
 }
diff --git a/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx b/src-ts/tools/learn/certification-details/enrollment-page/enrollment-sidebar/EnrollmentSidebar.tsx
@@ -5,7 +5,7 @@ import { PaymentIntentResult, Stripe, StripeCardNumberElement, StripeElements }
 import { loadStripe } from '@stripe/stripe-js/pure'
 import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js'
 
-import { Button, IconSolid } from '../../../../../lib'
+import { Button, IconOutline } from '../../../../../lib'
 import { StickySidebar } from '../../../learn-lib'
 import { EnvironmentConfig } from '../../../../../config'
 import { EnrollPaymentForm } from '../enroll-payment-form'
@@ -42,11 +42,13 @@ const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarP
     const elements: StripeElements | null = useElements()
 
     const [paymentError, setPaymentError]: [string, Dispatch<SetStateAction<string>>] = useState<string>('')
-    const [paymentSuccess, setPaymentSuccess]: [any | undefined, Dispatch<SetStateAction<any | undefined>>]
-        = useState<any | undefined>()
+    const [paymentSuccess, setPaymentSuccess]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
 
     const [payProcessing, setPayProcessing]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    const tcaMonetizationEnabled: boolean = EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION || false
+
     function onUpdateField(fieldName: string, value: string | boolean): void {
         setFormValues({
             ...formFieldValues,
@@ -97,23 +99,25 @@ const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarP
                 }, 1000)
             } else {
                 // payment error!
+                // eslint-disable-next-line no-console
                 console.error('Enroll payment error', paymentResult.error)
                 setPaymentError(paymentResult.error.message as string)
                 setPayProcessing(false)
             }
         } catch (error: any) {
+            // eslint-disable-next-line no-console
             console.error('Enroll payment error', error)
             setPaymentError(error.message || error)
             setPayProcessing(false)
         }
     }
 
     return (
-        <StickySidebar className={styles.wrap}>
+        <StickySidebar className={tcaMonetizationEnabled ? styles.wrapPayment : styles.wrap}>
             {
-                EnvironmentConfig.REACT_APP_ENABLE_TCA_CERT_MONETIZATION ? (
+                tcaMonetizationEnabled ? (
                     <>
-                        <div className={styles.header}>
+                        <div className={styles.headerPayment}>
                             <div className={styles.priceLabel}>
                                 $
                                 {price}
@@ -124,19 +128,28 @@ const EnrollmentSidebar: FC<EnrollmentSidebarProps> = (props: EnrollmentSidebarP
                             </span>
                             <span className='body-small-bold'>TOTAL PAYMENT</span>
                         </div>
-                        <hr />
                         <div className={styles.form}>
                             {
                                 paymentSuccess ? (
-                                    <IconSolid.CheckCircleIcon className={styles.paymentSuccessIcon} />
+                                    <div className={styles.paymentSuccess}>
+                                        <div className={styles.paymentSuccessInner}>
+                                            <IconOutline.CheckCircleIcon className={styles.successIcon} />
+                                            <span className='body-medium-bold'>Your payment was successful</span>
+                                            <p>
+                                                You will be redirected to the certification details page
+                                                where you can begin your journey!
+                                            </p>
+                                        </div>
+                                    </div>
                                 ) : (
                                     <EnrollPaymentForm
                                         formData={formFieldValues}
                                         onUpdateField={onUpdateField}
                                         onPay={onPay}
                                         isFormValid={isFormValid()}
-                                        error={!!paymentError}
+                                        error={paymentError}
                                         isPayProcessing={payProcessing}
+                                        price={price}
                                     />
                                 )
                             }
diff --git a/src-ts/tools/learn/certification-details/page-layout/PageLayout.tsx b/src-ts/tools/learn/certification-details/page-layout/PageLayout.tsx
@@ -26,6 +26,7 @@ interface PageLayoutProps {
     heroCTA?: ReactNode
     sidebarContents: ReactNode
     children?: ReactNode
+    hideWaveHeroText?: boolean
 }
 
 const PageLayout: FC<PageLayoutProps> = (props: PageLayoutProps) => {
@@ -55,7 +56,7 @@ const PageLayout: FC<PageLayoutProps> = (props: PageLayoutProps) => {
                                 <HeroTitle certification={props.certification} certTitle={props.certification.title} />
                             )}
                             theme='grey'
-                            text={props.certification.introText}
+                            text={!props.hideWaveHeroText ? props.certification.introText : ''}
                         >
                             {props.heroCTA}
                         </WaveHero>
diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.module.scss b/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;
+    }
+}
diff --git a/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx b/src-ts/tools/learn/welcome/tc-certifications/TCCertifications.tsx
diff --git a/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx b/src-ts/tools/learn/welcome/tc-certifications/cert-card/TCCertCard.tsx

Original file line number	Diff line number	Diff line change
`@@ -93,3 +93,12 @@`
`93`	`93`	`}`
`94`	`94`	`}`
`95`	`95`	`}`
	`96`	`+`
	`97`	`+.aloneTeaseBanner {`
	`98`	`+ margin-bottom: $space-mxx !important;`
	`99`	`+ border-radius: 8px;`
	`100`	`+`
	`101`	`+ @include ltemd {`
	`102`	`+ margin-bottom: $space-xxl !important;`
	`103`	`+ }`
	`104`	`+}`