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 && (
+
+
+
+ )
+ }