diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts index af0da7dd1..9e7163239 100644 --- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.config.ts +++ b/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', diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.model.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.model.ts index 1128e25ca..2623abf26 100644 --- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-type.model.ts +++ b/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, diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/AboutYourProjectInfoCard.tsx new file mode 100644 index 000000000..e1b2071f8 --- /dev/null +++ b/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 ( + <> +
  • + + Your Dashboard is your go-to hub for managing your work. + +   From here you can view timelines, details, and other important + information tied to your work submissions. +
  • +
  • + + You can expect members of our community to ask you questions about + this work. + +   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! +
  • +
  • + + Topcoder experts will curate the best solutions for you. + +   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. +
  • + + ) +} + +export default AboutYourProjectInfoCard diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/index.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/index.tsx new file mode 100644 index 000000000..626fedf32 --- /dev/null +++ b/src-ts/tools/work/work-self-service/intake-forms/review/AboutYourProjectInfoCard/index.tsx @@ -0,0 +1 @@ +export { default as AboutYourProjectInfoCard } from './AboutYourProjectInfoCard' diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx b/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx index a0e02a8f4..e87e9e474 100644 --- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.tsx +++ b/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>] = useState(false) const [isPaymentFailed, setPaymentFailed]: [boolean, Dispatch>] = useState(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()} + +
    + { + !isMobile && ( + + + + ) + }
    @@ -262,6 +280,18 @@ const Review: React.FC = () => { error={isPaymentFailed} />
    + { + isMobile && ( + + + + ) + }