Merge pull request #204 from topcoder-platform/PROD-2450_pay-and-complete

PROD 2450 pay and redirect to thank you page -> Intake form

Author: hentrymartin

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 {

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;
+    }
 }

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
 }
 
@@ -175,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)}
@@ -206,6 +208,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 +224,7 @@ const PaymentForm: React.FC<PaymentFormProps> = (props: PaymentFormProps) => {
                 name='pay-button'
                 label={`Pay ${props.formData.price}`}
                 disable={!props.isFormValid}
+                onClick={props.onPay}
             />
         </div>
     )

src-ts/lib/styles/_buttons.scss

@@ -175,6 +175,7 @@
         font-size: 12px;
     }
 
+    &.icon-bordered,
     &.icon {
         margin: 0;
         padding: $pad-sm calc($pad-sm - $border-xs) $pad-xs $pad-sm;
@@ -195,4 +196,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: $pad-lg;
+            border-radius: 50px;
+        }
+    }
 }

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,

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

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

src-ts/tools/work/work-lib/work-provider/work-functions/work-store/index.ts

@@ -28,8 +28,11 @@ 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,
+    confirmCustomerPayment as workStoreConfirmCustomerPaymentAsync,
     deleteAsync as workStoreDeleteAsync,
     getAsync as workStoreGetAsync,
     getChallengeByWorkId as workStoreGetChallengeByWorkId,

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
+}

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`

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

src-ts/tools/work/work-lib/work-provider/work-functions/work.functions.ts

@@ -7,12 +7,15 @@ import {
     Challenge,
     ChallengeCreateBody,
     ChallengeUpdateBody,
+    CustomerPayment,
     Work,
     workGetPricesConfig,
     WorkPricesType,
     WorkStatus,
     WorkStatusFilter,
+    workStoreConfirmCustomerPaymentAsync,
     workStoreCreateAsync,
+    workStoreCreateCustomerPaymentAsync,
     workStoreDeleteAsync,
     workStoreGetAsync,
     workStoreGetFilteredByStatus,
@@ -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

src-ts/tools/work/work-self-service/intake-forms/bug-hunt/bug-hunt.form.config.tsx

@@ -23,7 +23,7 @@ export const BugHuntFormConfig: FormDefinition = {
         ],
         secondaryGroup: [
             {
-                buttonStyle: 'icon',
+                buttonStyle: 'icon-bordered',
                 icon: BackIcon,
                 onClick: () => { },
                 type: 'button',

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

@@ -45,4 +45,8 @@
             }
         }
     }
+
+    .button-wrapper {
+        margin: 0 $pad-xxxxl $pad-xxxxl $pad-xxxxl;
+    }
 }