From 2b72e1bd5c75f63e79c355c970c3045a5d41fc59 Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Fri, 22 Jul 2022 00:51:54 +0200
Subject: [PATCH 1/5] PROD-2450 #comment payment logic and activate challenge
 on successful payment #time 4h

---
 src-ts/lib/button/Button.tsx                  |   2 +-
 .../lib/payment-form/PaymentForm.module.scss  |   6 +
 src-ts/lib/payment-form/PaymentForm.tsx       |  13 ++
 src-ts/lib/styles/_buttons.scss               |  15 ++
 .../work-provider/work-functions/index.ts     |   2 +
 .../work-factory/work.factory.ts              |   2 +-
 .../work-store/challenge.model.ts             |   1 +
 .../work-functions/work-store/index.ts        |   2 +
 .../work-store/work-customer-payment.model.ts |   5 +
 .../work-store/work-url.config.ts             |   9 +
 .../work-functions/work-store/work.store.ts   |  11 +-
 .../work-functions/work.functions.ts          |  11 +
 .../bug-hunt/bug-hunt.form.config.tsx         |   2 +-
 .../intake-forms/review/Review.module.scss    |   4 +
 .../intake-forms/review/Review.tsx            | 208 ++++++++++++++++--
 15 files changed, 267 insertions(+), 26 deletions(-)
 create mode 100644 src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts

diff --git a/src-ts/lib/button/Button.tsx b/src-ts/lib/button/Button.tsx
index 35594f5dd..0c66d6958 100644
--- a/src-ts/lib/button/Button.tsx
+++ b/src-ts/lib/button/Button.tsx
@@ -6,7 +6,7 @@ import '../styles/index.scss'
 import { IconOutline } from '../svgs'
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ButtonStyle = 'icon' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonStyle = 'icon' | 'icon-bordered' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
 export type ButtonType = 'button' | 'submit'
 
 export interface ButtonProps {
diff --git a/src-ts/lib/payment-form/PaymentForm.module.scss b/src-ts/lib/payment-form/PaymentForm.module.scss
index bcaea22f9..0b3dcf4c4 100644
--- a/src-ts/lib/payment-form/PaymentForm.module.scss
+++ b/src-ts/lib/payment-form/PaymentForm.module.scss
@@ -60,4 +60,10 @@
     .pay-button {
         width: 100%;
     }
+
+    .error {
+        @extend .body-small;
+        color: $red-120;
+        margin-bottom: $pad-lg;
+    }
 }
\ No newline at end of file
diff --git a/src-ts/lib/payment-form/PaymentForm.tsx b/src-ts/lib/payment-form/PaymentForm.tsx
index 404c172fc..ca998724b 100644
--- a/src-ts/lib/payment-form/PaymentForm.tsx
+++ b/src-ts/lib/payment-form/PaymentForm.tsx
@@ -31,8 +31,10 @@ interface FieldDirtyState {
 }
 
 interface PaymentFormProps {
+    error: boolean
     formData: PaymentFormData
     isFormValid: boolean
+    onPay: () => void
     onUpdateField: (fieldName: string, value: string | boolean) => void
 }
 
@@ -84,6 +86,8 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
         })
     }
 
+    console.log(props.formData)
+
     return (
         <div className={styles['payment-form']}>
             <OrderContractModal
@@ -206,6 +210,14 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 A hold will be placed on your card for the full amount of the project. Once your work is live on the Topcoder platform, you will be charged.
             </div>
 
+            {
+                props.error && (
+                    <div className={styles['error']}>
+                        Your card was declined. Please try a different card.
+                    </div>
+                )
+            }
+
             <Button
                 className={styles['pay-button']}
                 size='lg'
@@ -214,6 +226,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 name='pay-button'
                 label={`Pay ${props.formData.price}`}
                 disable={!props.isFormValid}
+                onClick={props.onPay}
             />
         </div>
     )
diff --git a/src-ts/lib/styles/_buttons.scss b/src-ts/lib/styles/_buttons.scss
index 3eeb63daf..6ae657ae4 100644
--- a/src-ts/lib/styles/_buttons.scss
+++ b/src-ts/lib/styles/_buttons.scss
@@ -171,6 +171,7 @@
         font-size: 12px;
     }
 
+    &.icon-bordered,
     &.icon {
         margin: 0;
         padding: $pad-sm calc($pad-sm - $border-xs) $pad-xs $pad-sm;
@@ -191,4 +192,18 @@
             outline: none;
         }
     }
+
+    &.icon-bordered {
+        width: 60px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        display: flex;
+        height: 40px;
+        & {
+            border: 1px solid $turq-160;
+            padding: 16px;
+            border-radius: 50px;
+        }
+    }
 }
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
index a299782c4..9e1e09a1c 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/index.ts
@@ -23,6 +23,8 @@ export {
 export * from './work-by-status.model'
 export {
     createAsync as workCreateAsync,
+    createCustomerPayment as workCreateCustomerPayment,
+    confirmCustomerPayment as workConfirmCustomerPayment,
     createFromChallenge as workCreateFromChallenge,
     deleteAsync as workDeleteAsync,
     getAllAsync as workGetAllAsync,
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
index 2e299dfd7..0b28eed20 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-factory/work.factory.ts
@@ -25,7 +25,7 @@ import {
 
 import { ChallengeStatus } from './challenge-status.enum'
 
-interface FormDetail {
+export interface FormDetail {
     key: string,
     title: string,
     value: any
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
index 8a8d12ceb..b12d5a80a 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/challenge.model.ts
@@ -16,6 +16,7 @@ export interface Challenge {
     numOfSubmissions?: number
     phases: Array<ChallengePhase>
     prizeSets?: Array<WorkPrize>
+    projectId?: number
     status: string
     tags: Array<ChallengeTag>
     timelineTemplateId?: string
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
index 72c054c0b..5a49342ec 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
@@ -29,7 +29,9 @@ export * from './work-type.model'
 export * from './work-type-category.enum'
 export * from './work.model'
 export {
+    createCustomerPayment as workStoreCreateCustomerPaymentAsync,
     createAsync as workStoreCreateAsync,
+    confirmCustomerPayment as workStoreConfirmCustomerPaymentAsync,
     deleteAsync as workStoreDeleteAsync,
     getAsync as workStoreGetAsync,
     getChallengeByWorkId as workStoreGetChallengeByWorkId,
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
new file mode 100644
index 000000000..9d9c603db
--- /dev/null
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-customer-payment.model.ts
@@ -0,0 +1,5 @@
+export interface CustomerPayment {
+  clientSecret: string
+  id: string
+  status: string
+}
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
index 338d3e65e..fe2e43078 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work-url.config.ts
@@ -17,4 +17,13 @@ export function updateUrl(workId: string): string {
     return `${challengesPath}/${workId}`
 }
 
+export function updatePaymentUrl(id: string): string {
+    return `${customerPaymentPath}/${id}/confirm`
+}
+
+export function createPaymentUrl(): string {
+    return customerPaymentPath
+}
+
 const challengesPath: string = `${EnvironmentConfig.API.V5}/challenges`
+const customerPaymentPath: string = `${EnvironmentConfig.API.V5}/customer-payments`
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
index a93895efb..f58f18275 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/work.store.ts
@@ -1,9 +1,10 @@
 import { Page, xhrDeleteAsync, xhrGetAsync, xhrPatchAsync, xhrPostAsync } from '../../../../../../lib'
 
 import { Challenge, ChallengeCreateBody, ChallengeUpdateBody } from './challenge.model'
+import { CustomerPayment } from './work-customer-payment.model'
 import { WorkStatusFilter } from './work-status-filter.enum'
 import { WorkStatus } from './work-status.enum'
-import { createUrl, deleteUrl, getUrl, updateUrl } from './work-url.config'
+import { createPaymentUrl, createUrl, deleteUrl, getUrl, updatePaymentUrl, updateUrl } from './work-url.config'
 import { Work } from './work.model'
 
 export async function createAsync(body: ChallengeCreateBody): Promise<void> {
@@ -22,6 +23,14 @@ export async function getChallengeByWorkId(workId: string): Promise<Challenge> {
     return xhrGetAsync<Challenge>(updateUrl(workId))
 }
 
+export async function createCustomerPayment(payment: string): Promise<CustomerPayment> {
+    return xhrPostAsync(createPaymentUrl(), payment)
+}
+
+export async function confirmCustomerPayment(id: string): Promise<CustomerPayment> {
+    return xhrPatchAsync(updatePaymentUrl(id), JSON.stringify({}))
+}
+
 export function getFilteredByStatus(work: ReadonlyArray<Work>, workStatusFilter?: WorkStatusFilter): Array<Work> {
     // this is implemented in the work store
     // bc in the future we might actually want
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
index 501deabcf..4cd405257 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
@@ -12,7 +12,9 @@ import {
     WorkPricesType,
     WorkStatus,
     WorkStatusFilter,
+    workStoreConfirmCustomerPaymentAsync,
     workStoreCreateAsync,
+    workStoreCreateCustomerPaymentAsync,
     workStoreDeleteAsync,
     workStoreGetAsync,
     workStoreGetFilteredByStatus,
@@ -21,6 +23,7 @@ import {
     WorkTypeConfig,
     WorkTypeConfigs,
 } from './work-store'
+import { CustomerPayment } from './work-store/work-customer-payment.model'
 
 export async function createAsync(type: WorkType): Promise<void> {
     const workConfig: WorkTypeConfig = WorkTypeConfigs[type]
@@ -36,6 +39,14 @@ export async function deleteAsync(workId: string): Promise<void> {
     return workStoreDeleteAsync(workId)
 }
 
+export async function createCustomerPayment(body: string): Promise<CustomerPayment> {
+    return workStoreCreateCustomerPaymentAsync(body)
+}
+
+export async function confirmCustomerPayment(id: string): Promise<CustomerPayment> {
+    return workStoreCreateCustomerPaymentAsync(id)
+}
+
 export async function getAllAsync(profile: UserProfile): Promise<Array<Work>> {
 
     // TODO: actual pagination and sorting
diff --git a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
index 284bca9b0..678d454e7 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
+++ b/src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx
@@ -22,7 +22,7 @@ export const BugHuntFormConfig: FormDefinition = {
         ],
         secondaryGroup: [
             {
-                buttonStyle: 'icon',
+                buttonStyle: 'icon-bordered',
                 icon: BackIcon,
                 onClick: () => { },
                 type: 'button',
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss b/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
index 43ad9e3e1..10eb41e6e 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
@@ -45,4 +45,8 @@
             }
         }
     }
+
+    .button-wrapper {
+        margin: 0 32px 32px 32px;
+    }
 }
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 3a6912c2a..6d84c9eb3 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
@@ -1,19 +1,24 @@
-import { Elements } from '@stripe/react-stripe-js'
-import { loadStripe, Stripe } from '@stripe/stripe-js'
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { CardNumberElement, Elements, useElements, useStripe } from '@stripe/react-stripe-js'
+import { loadStripe, PaymentMethodResult, Stripe, StripeCardNumberElement, StripeElements } from '@stripe/stripe-js'
+import moment from 'moment'
+import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react'
+import { toastr } from 'react-redux-toastr'
+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 { PaymentForm } from '../../../../../lib'
+import { Button, IconOutline, LoadingSpinner, PageDivider, PaymentForm, profileContext, ProfileContextData } from '../../../../../lib'
 import { WorkDetailDetailsPane } from '../../../work-detail-details'
 import {
     Challenge,
     ChallengeMetadataName,
+    workBugHuntConfig,
     WorkType,
 } from '../../../work-lib'
-import { ChallengeMetadata, workStoreGetChallengeByWorkId } from '../../../work-lib/work-provider/work-functions/work-store'
+import { ChallengeMetadata, workStoreConfirmCustomerPaymentAsync, workStoreCreateCustomerPaymentAsync, workStoreGetChallengeByWorkId, workStoreUpdateAsync } from '../../../work-lib/work-provider/work-functions/work-store'
 import { WorkIntakeFormRoutes } from '../../../work-lib/work-provider/work-functions/work-store/work-intake-form-routes.config'
 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 styles from './Review.module.scss'
@@ -35,7 +40,25 @@ const Review: React.FC = () => {
     const redirectUrl: string = WorkIntakeFormRoutes[WorkType.bugHunt]['basicInfo']
 
     const [challenge, setChallenge]: [Challenge | undefined, Dispatch<SetStateAction<Challenge | undefined>>] = useState()
-    let formData: any = {}
+    const [formData, setFormData]: [any, Dispatch<any>] = useState<any>({})
+    const { profile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
+    const [formFieldValues, setFormValues]: [FormFieldValues, Dispatch<SetStateAction<FormFieldValues>>] = useState<FormFieldValues>({
+        cardComplete: false,
+        country: '',
+        cvvComplete: false,
+        email: '',
+        expiryComplete: false,
+        name: '',
+        orderContract: false,
+        price: '',
+        zipCode: '',
+    })
+    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 stripe: Stripe | null = useStripe()
+    const elements: StripeElements | null = useElements()
 
     function findMetadata(metadataName: ChallengeMetadataName): ChallengeMetadata | undefined {
         return challenge?.metadata?.find((item: ChallengeMetadata) => item.name === metadataName)
@@ -51,26 +74,27 @@ const Review: React.FC = () => {
         useEffectAsync()
     }, [workId])
 
+    useEffect(() => {
+        setFormValues({
+            ...formFieldValues,
+            email: profile?.email || '',
+            name: `${profile?.firstName} ${profile?.lastName}`,
+        })
+    }, [profile])
+
     useEffect(() => {
         if (challenge) {
             const intakeFormBH: any = findMetadata(ChallengeMetadataName.intakeForm)
-            formData = JSON.parse(intakeFormBH.value).form
+            const form: any = JSON.parse(intakeFormBH.value).form
+            setFormData(form)
+            setFormValues({
+                ...formFieldValues,
+                price: `$${getPrice(form.basicInfo.packageType)}`,
+            })
         }
 
     }, [challenge])
 
-    const [formFieldValues, setFormValues]: [FormFieldValues, Dispatch<SetStateAction<FormFieldValues>>] = useState<FormFieldValues>({
-        cardComplete: false,
-        country: '',
-        cvvComplete: false,
-        email: 'mail@gmail.com',
-        expiryComplete: false,
-        name: 'User name',
-        orderContract: false,
-        price: '$1,899',
-        zipCode: '',
-    })
-
     const onUpdateField: (fieldName: string, value: string | boolean) => void = (fieldName, value) => {
         setFormValues({
             ...formFieldValues,
@@ -78,21 +102,150 @@ const Review: React.FC = () => {
         })
     }
 
-    const isFormValid: boolean = formFieldValues.cardComplete
+    function getPrice(packageType: string): any {
+        return workBugHuntConfig.priceConfig.getPrice(workBugHuntConfig.priceConfig, packageType)
+    }
+
+    function renderWorkServicePrice(): JSX.Element {
+        return formData.basicInfo && (
+            <WorkServicePrice
+                duration={workBugHuntConfig.duration}
+                hideTitle
+                icon={<IconOutline.BadgeCheckIcon width={48} height={48} />}
+                price={getPrice(formData.basicInfo.packageType)}
+                serviceType={workBugHuntConfig.type}
+                showIcon
+            />
+        )
+    }
+
+    function isFormValid(): boolean {
+        return formFieldValues.cardComplete
         && formFieldValues.cvvComplete
         && formFieldValues.expiryComplete
         && formFieldValues.orderContract
         && !!formFieldValues.name
         && !!formFieldValues.email
         && !!formFieldValues.zipCode
+    }
+
+    function getStartDate(): string {
+        let daysToAdd: number = 1
+        switch (moment(new Date()).weekday()) {
+            case moment().day('Friday').weekday():
+                daysToAdd = 3
+                break
+            case moment().day('Saturday').weekday():
+                daysToAdd = 2
+                break
+            case moment().day('Sunday').weekday():
+                daysToAdd = 1
+                break
+            default:
+                daysToAdd = 1
+        }
+
+        return moment().add(daysToAdd, 'days').format()
+    }
+
+    function activateChallenge(): void {
+        if (!challenge) {
+            return
+        }
+
+        const newDiscussions: Array<{ [key: string]: string }> = [...(challenge.discussions || [])]
+
+        if (newDiscussions.length > 0) {
+          newDiscussions[0].name = challenge.name
+        } else {
+          newDiscussions.push({
+            name: challenge.name,
+            provider: 'vanilla',
+            type: 'challenge',
+          })
+        }
+
+        const body: any = {
+            discussions: [...newDiscussions],
+            id: challenge.id,
+            startDate: getStartDate(),
+            status: 'Draft',
+        }
+
+        workStoreUpdateAsync(body)
+        .then(() => {
+            navigate('/self-service/work/new/bug-hunt/thank-you')
+        })
+
+    }
+
+    async function onPay(): Promise<any> {
+        if (!stripe || !elements || !challenge) {
+            return
+        }
+
+        setLoading(true)
+        const description: string = `Work Item #${workId}\n${formData.basicInfo.projectTitle.slice(0, 355)}}\n${formData.workType.selectedWorkType}`
+
+        const payload: PaymentMethodResult = await stripe.createPaymentMethod({
+            card: elements.getElement(CardNumberElement) as StripeCardNumberElement,
+            type: 'card',
+        })
+
+        if (!payload) {
+            return
+        }
+
+        const body: string = JSON.stringify({
+            amount: workBugHuntConfig.priceConfig.getPrice(workBugHuntConfig.priceConfig, formData.basicInfo.packageType),
+            currency: 'USD',
+            description,
+            paymentMethodId: payload.paymentMethod && payload.paymentMethod.id,
+            receiptEmail: formFieldValues.email,
+            reference: 'project',
+            referenceId: challenge.projectId?.toString(),
+          })
+
+        workStoreCreateCustomerPaymentAsync(body)
+        .then(async (response) => {
+
+            if (response.status === 'requires_action') {
+                await stripe.handleCardAction(response.clientSecret)
+                return workStoreConfirmCustomerPaymentAsync(response.id)
+                .then(() => {
+                    activateChallenge()
+                })
+            } else {
+                activateChallenge()
+            }
+
+        })
+        .catch(() => {
+            setPaymentFailed(true)
+            toastr.error('Error', 'There was an error processing the payment')
+        })
+        .finally(() => {
+            setLoading(false)
+        })
+    }
+
+    function navigateToBasicInfo(): void {
+        navigate(redirectUrl)
+    }
 
     return (
         <div className={styles['review-container']}>
+            {
+                isLoading && <LoadingSpinner />
+            }
             <WorkTypeBanner
                 title={bugHuntConfig.review.title}
                 subTitle={bugHuntConfig.review.subtitle}
                 workType={bugHuntConfig.review.type}
             />
+
+            {renderWorkServicePrice()}
+
             <div className={styles['content']}>
                 <div className={styles['left']}>
                     <WorkDetailDetailsPane formData={formData} isReviewPage={true} redirectUrl={redirectUrl} collapsible={true} defaultOpen={true} />
@@ -103,10 +256,21 @@ const Review: React.FC = () => {
                             <h3 className={styles['price']}>{formFieldValues.price}</h3>
                             <div className={styles['label']}>Total Payment</div>
                         </div>
-                        <PaymentForm formData={formFieldValues} onUpdateField={onUpdateField} isFormValid={isFormValid} />
+                        <PaymentForm
+                            formData={formFieldValues}
+                            onUpdateField={onUpdateField}
+                            onPay={onPay}
+                            isFormValid={isFormValid()}
+                            error={isPaymentFailed}
+                        />
                     </div>
                 </div>
             </div>
+
+            <div className={styles['button-wrapper']}>
+                <PageDivider />
+                <Button type='button' buttonStyle='icon-bordered' icon={BackIcon} onClick={navigateToBasicInfo} />
+            </div>
         </div>
     )
 }

From 37b7d59b8b282496eff938cb1badba102a5dc1c6 Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Fri, 22 Jul 2022 01:09:44 +0200
Subject: [PATCH 2/5] PROD-2450 #comment style updates #time 15m

---
 src-ts/lib/styles/_buttons.scss                                 | 2 +-
 .../work-self-service/intake-forms/review/Review.module.scss    | 2 +-
 .../tools/work/work-self-service/intake-forms/review/Review.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-ts/lib/styles/_buttons.scss b/src-ts/lib/styles/_buttons.scss
index 6ae657ae4..c1222b4b1 100644
--- a/src-ts/lib/styles/_buttons.scss
+++ b/src-ts/lib/styles/_buttons.scss
@@ -202,7 +202,7 @@
         height: 40px;
         & {
             border: 1px solid $turq-160;
-            padding: 16px;
+            padding: $pad-lg;
             border-radius: 50px;
         }
     }
diff --git a/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss b/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
index 10eb41e6e..b822774c6 100644
--- a/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
+++ b/src-ts/tools/work/work-self-service/intake-forms/review/Review.module.scss
@@ -47,6 +47,6 @@
     }
 
     .button-wrapper {
-        margin: 0 32px 32px 32px;
+        margin: 0 $pad-xxxxl $pad-xxxxl $pad-xxxxl;
     }
 }
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 1f8f7d389..a5c5352e8 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
@@ -163,7 +163,7 @@ const Review: React.FC = () => {
 
         workStoreUpdateAsync(body)
         .then(() => {
-            navigate('/self-service/work/new/bug-hunt/thank-you')
+            navigate(WorkIntakeFormRoutes[WorkType.bugHunt].thankYou)
         })
 
     }

From 9f105c49fa5ed38af02d8504ca60c77b671b758a Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Fri, 22 Jul 2022 16:09:07 +0200
Subject: [PATCH 3/5] PROD-2450 #comment review comments

---
 .../work-lib/work-provider/work-functions/work-store/index.ts   | 1 +
 .../work-lib/work-provider/work-functions/work.functions.ts     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
index 5a49342ec..ee85fcf6a 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts
@@ -28,6 +28,7 @@ export * from './work-type.enum'
 export * from './work-type.model'
 export * from './work-type-category.enum'
 export * from './work.model'
+export * from './work-customer-payment.model'
 export {
     createCustomerPayment as workStoreCreateCustomerPaymentAsync,
     createAsync as workStoreCreateAsync,
diff --git a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts b/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
index 4cd405257..0a2023041 100644
--- a/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
+++ b/src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts
@@ -7,6 +7,7 @@ import {
     Challenge,
     ChallengeCreateBody,
     ChallengeUpdateBody,
+    CustomerPayment,
     Work,
     workGetPricesConfig,
     WorkPricesType,
@@ -23,7 +24,6 @@ import {
     WorkTypeConfig,
     WorkTypeConfigs,
 } from './work-store'
-import { CustomerPayment } from './work-store/work-customer-payment.model'
 
 export async function createAsync(type: WorkType): Promise<void> {
     const workConfig: WorkTypeConfig = WorkTypeConfigs[type]

From 2f5228aa1f3dd1a460836d2f64dae43904df7626 Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Fri, 22 Jul 2022 16:24:09 +0200
Subject: [PATCH 4/5] PROD-2450 #comment added TODO #time 10m

---
 .../tools/work/work-self-service/intake-forms/review/Review.tsx  | 1 +
 1 file changed, 1 insertion(+)

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 a5c5352e8..265bce1cf 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
@@ -42,6 +42,7 @@ const Review: React.FC = () => {
     const [challenge, setChallenge]: [Challenge | undefined, Dispatch<SetStateAction<Challenge | undefined>>] = useState()
     const [formData, setFormData]: [any, Dispatch<any>] = useState<any>({})
     const { profile }: ProfileContextData = useContext<ProfileContextData>(profileContext)
+    // TODO: Move the state into payment form and this would require the onPay handler also moved to payment form
     const [formFieldValues, setFormValues]: [FormFieldValues, Dispatch<SetStateAction<FormFieldValues>>] = useState<FormFieldValues>({
         cardComplete: false,
         country: '',

From dc68cc9416449cb278c050277f492a2f3c72ec4a Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Fri, 22 Jul 2022 16:26:31 +0200
Subject: [PATCH 5/5] PROD-2450 #comment changed country label

---
 src-ts/lib/payment-form/PaymentForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ts/lib/payment-form/PaymentForm.tsx b/src-ts/lib/payment-form/PaymentForm.tsx
index a5f69eee5..840852e59 100644
--- a/src-ts/lib/payment-form/PaymentForm.tsx
+++ b/src-ts/lib/payment-form/PaymentForm.tsx
@@ -177,7 +177,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 value={props.formData.name}
             />
 
-            <InputWrapper className={styles['input-wrapper']} label='Date' tabIndex={3} type='text' disabled={false}>
+            <InputWrapper className={styles['input-wrapper']} label='Country' tabIndex={3} type='text' disabled={false}>
                 <ReactSelect
                     value={props.formData.country}
                     onChange={(option) => props.onUpdateField('country', option)}