Merge pull request #207 from topcoder-platform/PROD-2580_info-cards-review-page

PROD-2580 info cards in review page -> Intake form

Author: hentrymartin

src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts

@@ -28,6 +28,7 @@ export const WorkTypeConfigs: { [workType: string]: WorkTypeConfig } = {
                 a detailed report of bugs which have steps to reproduce, screenshots / videos if applicable,
                 details of the bug, and severity of the issue.`,
                 review: {
+                        aboutYourProjectTitle: 'Important things to know about your project',
                         subtitle: 'Website Bug Hunt',
                         title: 'Review & Payment',
                         type: 'Review & Payment',

src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.model.ts

@@ -14,6 +14,7 @@ export interface WorkTypeConfig {
     priceConfig: WorkPrice
     results: string,
     review: {
+        aboutYourProjectTitle: string,
         subtitle: string,
         title: string,
         type: string,

src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+const AboutYourProjectInfoCard: React.FC = () => {
+    return (
+        <>
+            <li>
+                <strong>
+                    Your Dashboard is your go-to hub for managing your work.
+                </strong>
+                &nbsp; From here you can view timelines, details, and other important
+                information tied to your work submissions.
+            </li>
+            <li>
+                <strong>
+                    You can expect members of our community to ask you questions about
+                    this work.
+                </strong>
+                &nbsp; From your Work Summary page you’ll see if you have any
+                outstanding Messages, indicated by a red icon. Please answer questions
+                from our members in a timely and thorough manner. This will help them
+                deliver high quality results for you on time!
+            </li>
+            <li>
+                <strong>
+                    Topcoder experts will curate the best solutions for you.
+                </strong>
+                &nbsp; This saves you time and energy wading through submissions that
+                perhaps aren't of value to you. When your high-quality submissions are
+                ready, you'll be notified to download your assets, rate your Topcoder
+                experience, and officially close out this work.
+            </li>
+        </>
+   )
+}
+
+export default AboutYourProjectInfoCard

src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/index.tsx

@@ -0,0 +1 @@
+export { default as AboutYourProjectInfoCard } from './AboutYourProjectInfoCard'

src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx

@@ -7,7 +7,8 @@ import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
 
 import { ReactComponent as BackIcon } from '../../../../../../src/assets/images/icon-back-arrow.svg'
 import { EnvironmentConfig } from '../../../../../config'
-import { Button, IconOutline, LoadingSpinner, PageDivider, PaymentForm, profileContext, ProfileContextData } from '../../../../../lib'
+import { Button, IconOutline, InfoCard, LoadingSpinner, PageDivider, PaymentForm, profileContext, ProfileContextData } from '../../../../../lib'
+import { useCheckIsMobile } from '../../../../../lib/hooks/use-check-is-mobile.hook'
 import { WorkDetailDetailsPane } from '../../../work-detail-details'
 import {
     Challenge,
@@ -20,8 +21,10 @@ import { WorkIntakeFormRoutes } from '../../../work-lib/work-provider/work-funct
 import { bugHuntConfig } from '../../../work-lib/work-provider/work-functions/work-store/work-type.config'
 import { WorkServicePrice } from '../../../work-service-price'
 import { WorkTypeBanner } from '../../../work-type-banner'
+import { DeliverablesInfoCard } from '../bug-hunt/deliverables-info-card'
 import IntakeFormsBreadcrumb from '../intake-forms-breadcrumb/IntakeFormsBreadcrumb'
 
+import { AboutYourProjectInfoCard } from './AboutYourProjectInfoCard'
 import styles from './Review.module.scss'
 
 interface FormFieldValues {
@@ -58,6 +61,7 @@ const Review: React.FC = () => {
     const [isLoading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const [isPaymentFailed, setPaymentFailed]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const navigate: NavigateFunction = useNavigate()
+    const isMobile: boolean = useCheckIsMobile()
 
     const stripe: Stripe | null = useStripe()
     const elements: StripeElements | null = useElements()
@@ -244,9 +248,23 @@ const Review: React.FC = () => {
 
             {renderWorkServicePrice()}
 
+            <DeliverablesInfoCard isMobile={isMobile} />
+
             <div className={styles['content']}>
                 <div className={styles['left']}>
                     <WorkDetailDetailsPane formData={formData} isReviewPage={true} redirectUrl={redirectUrl} collapsible={true} defaultOpen={true} />
+                    {
+                        !isMobile && (
+                            <InfoCard
+                                color='success'
+                                defaultOpen={true}
+                                isCollapsible
+                                title={workBugHuntConfig.review.aboutYourProjectTitle}
+                            >
+                                <AboutYourProjectInfoCard />
+                            </InfoCard>
+                        )
+                    }
                 </div>
                 <div className={styles['right']}>
                     <div className={styles['payment-form-wrapper']}>
@@ -262,6 +280,18 @@ const Review: React.FC = () => {
                             error={isPaymentFailed}
                         />
                     </div>
+                    {
+                        isMobile && (
+                            <InfoCard
+                                color='success'
+                                defaultOpen={!isMobile}
+                                isCollapsible
+                                title={workBugHuntConfig.review.aboutYourProjectTitle}
+                            >
+                                <AboutYourProjectInfoCard />
+                            </InfoCard>
+                        )
+                    }
                 </div>
             </div>