Merge pull request #383 from topcoder-platform/PROD-2614_Self-service_payment

PROD-2799 PROD-2708 PROD-2707 PROD-2675 PROD-2672 PROD-2648 PROD-2641 PROD-2636 PROD-2622 PROD-2616 -> Fix issues in bug hunt self-service -> dev

Author: asadath1395

src-ts/index.ts

@@ -23,3 +23,4 @@ export {
 } from './lib'
 export * from './tools'
 export * from './utils'
+export * from './lib/svgs'

src-ts/lib/button/Button.tsx

@@ -16,6 +16,7 @@ export interface ButtonProps {
     readonly elementType?: keyof JSX.IntrinsicElements
     readonly hidden?: boolean
     readonly icon?: FC<SVGProps<SVGSVGElement>>
+    readonly id?: string
     readonly label?: string
     readonly name?: string
     readonly onClick?: (event?: any) => void
@@ -79,6 +80,8 @@ const Button: FC<ButtonProps> = (props: ButtonProps) => {
                 tabIndex={props.tabIndex}
                 title={props.title}
                 type={props.type || 'button'}
+                id={props.id}
+                value={props.id}
             >
                 {content}
             </button>

src-ts/lib/contact-support-form/ContactSupportForm.tsx

@@ -1,6 +1,7 @@
-import { FC, useContext } from 'react'
+import { Dispatch, FC, SetStateAction, useContext, useEffect, useState } from 'react'
 
 import { Form, FormDefinition, formGetInputModel, FormInputModel } from '../form'
+import { LoadingSpinner } from '../loading-spinner'
 import { profileContext, ProfileContextData } from '../profile-provider'
 
 import { ContactSupportFormField } from './contact-support-form.config'
@@ -18,6 +19,15 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
     const { profile }: ProfileContextData = useContext(profileContext)
 
+    const [loading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [saveOnSuccess, setSaveOnSuccess]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+
+    useEffect(() => {
+      if (!loading && saveOnSuccess) {
+        props.onSave()
+      }
+    }, [loading, saveOnSuccess])
+
     function generateRequest(inputs: ReadonlyArray<FormInputModel>): ContactSupportRequest {
         const firstName: string = formGetInputModel(inputs, ContactSupportFormField.first).value as string
         const lastName: string = formGetInputModel(inputs, ContactSupportFormField.last).value as string
@@ -34,10 +44,11 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
     }
 
     async function saveAsync(request: ContactSupportRequest): Promise<void> {
+        setLoading(true)
         return contactSupportSubmitRequestAsync(request)
             .then(() => {
-                props.onSave()
-            })
+              setSaveOnSuccess(true)
+            }).finally(() => setLoading(false))
     }
 
     const emailElement: JSX.Element | undefined = !!profile?.email
@@ -50,6 +61,7 @@ const ContactSupportForm: FC<ContactSupportFormProps> = (props: ContactSupportFo
 
     return (
         <>
+            <LoadingSpinner hide={!loading} type='Overlay' />
             <div className={styles['contact-support-intro']}>
                 <p>
                     Hi {profile?.firstName || 'there'}, we're here to help.

src-ts/lib/form/Form.tsx

@@ -38,6 +38,7 @@ interface FormProps<ValueType, RequestType> {
     readonly resetFormAfterSave?: boolean
     readonly resetFormOnUnmount?: boolean
     readonly save: (value: RequestType) => Promise<void>
+    readonly shouldDisableButton?: (isPrimaryGroup: boolean, index: number) => boolean
 }
 
 const Form: <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => JSX.Element
@@ -146,21 +147,29 @@ const Form: <ValueType extends any, RequestType extends any>(props: FormProps<Va
 
         formInitializeValues(inputs, props.formValues)
 
+        const setOnClickOnReset: (button: FormButton) => FormButton = (button) => {
+          // if this is a reset button, set its onclick to reset
+          if (!!button.isReset) {
+              button = {
+                  ...button,
+                  onClick: onReset,
+              }
+          }
+
+          return button
+        }
+
         const createButtonGroup: (groups: ReadonlyArray<FormButton>, isPrimaryGroup: boolean) => Array<JSX.Element> = (groups, isPrimaryGroup) => {
             return groups.map((button, index) => {
-                // if this is a reset button, set its onclick to reset
-                if (!!button.isReset) {
-                    button = {
-                        ...button,
-                        onClick: onReset,
-                    }
-                }
+                button = setOnClickOnReset(button)
+
+                const disabled: boolean = (button.isSubmit && isFormInvalid) || !!props.shouldDisableButton?.(isPrimaryGroup, index)
 
                 return (
                     <Button
                         {...button}
                         key={button.label || `button-${index}`}
-                        disable={button.isSubmit && isFormInvalid}
+                        disable={disabled}
                         tabIndex={button.notTabble ? -1 : index + (inputs ? inputs.length : 0) + (formDef.tabIndexStart || 0)}
                     />
                 )

src-ts/lib/form/form-button.model.ts

@@ -5,10 +5,10 @@ import { ButtonSize, ButtonStyle, ButtonType } from '../button'
 export interface FormButton {
     readonly buttonStyle?: ButtonStyle
     hidden?: boolean,
-    readonly icon?: FC<SVGProps<SVGSVGElement>>
+    icon?: FC<SVGProps<SVGSVGElement>>
     readonly isReset?: boolean
     readonly isSubmit?: boolean
-    readonly label?: string
+    label?: string
     readonly notTabble?: boolean
     onClick?: (event?: any) => void
     readonly route?: string

src-ts/lib/form/form-functions/form.functions.ts

@@ -79,6 +79,7 @@ export async function onSubmitAsync<T>(
 
     // get the dirty fields before we validate b/c validation marks them dirty on submit
     const dirty: FormInputModel | undefined = inputs?.find(fieldDef => !!fieldDef.dirty)
+
     // if there are any validation errors, display a message and stop submitting
     // NOTE: need to check this before we check if the form is dirty bc you
     // could have a form that's not dirty but has errors and you wouldn't

src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss

@@ -16,25 +16,36 @@
     .card {
         flex: 1 1 0;
         margin-right: $space-xl;
-        border: solid 1px $black-80;
         border-radius: $space-xs;
-        padding: $space-lg;
-        cursor: pointer;
+        padding: $space-lg 0;
+        background-color: $black-5;
+        position: relative;
 
-        &.selected {
-            background-color: $turq-160;
-            border: 1px solid $turq-160;
+        .popular-card {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: $space-sm;
+
+            width: 100%;
+            height: $space-xxxxl;
+            background: $tc-grad19;
+            border-radius: $space-sm $space-sm 0px 0px;
             color: $tc-white;
-            svg {
-                path {
-                    color: $tc-white;
-                }
-            }
+            position: absolute;
+            left: 0;
+            top: -$space-xxl;
+        }
+
+        &.mobile-popular {
+            margin-top: $space-xxxl;
         }
 
         @include ltemd {
             margin-right: 0;
             margin-bottom: $space-lg;
+            padding-top: $space-xxl;
             &:last-child {
                 margin-bottom: 0;
             }
@@ -45,22 +56,134 @@
 
         .card-header {
             text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            h3 {
+                margin: $space-lg;
+                font-weight: 500;
+                font-size: $space-mx;
+                line-height: $space-mx;
+                margin-top: $space-xxl;
+            }
+
+            &.feature {
+                visibility: hidden;
+
+                h3 {
+                    margin: $space-lg;
+                    margin-top: $space-xxl;
+                    font-size: $space-xxxxl;
+                }
+            }
+
+            &.mobile {
+                h3 {
+                    font-size: $space-xxxxl;
+                    line-height: $space-xxxxl;
+                    margin-top: $space-md;
+                    margin-bottom: $space-xxl;
+                }
+            }
+        }
+
+        .card-header-features {
+            visibility: hidden;
+
+            h3 {
+                margin: $space-lg;
+            }
         }
 
         .card-section {
             margin: $space-lg 0;
 
+            .row {
+                height: auto;
+            }
+
+            .row-divider {
+                height: $border-xs;
+                border-bottom: $border solid $black-10;
+                width: auto;
+                margin: 0;
+            }
+
             .card-row {
                 display: flex;
+                padding: $space-md;
+                align-items: center;
+                min-height: calc($space-lg + $space-mx);
+                position: relative;
 
                 .card-row-col {
                     align-content: center;
                     align-items: center;
-                    width: 50%;
                     flex-wrap: wrap;
                     flex-grow: 1;
+
+                    &.mobile {
+                        display: flex;
+                        justify-content: flex-start;
+                    }
+
+                    &.info-col {
+                      display: flex;
+                    }
+
+                    svg {
+                        display: inline;
+                        margin-left: $space-xs;
+                    }
+
+                    &.center {
+                        text-align: center;
+                    }
+
+                    .label {
+                        @include ltemd {
+                            font-size: 10px;
+                        }
+                    }
+
+                    .info-icon {
+                        margin-left: $space-sm;
+                        color: $turq-160;
+                        cursor: pointer;
+                        outline: none;
+                    }
                 }
             }
+            &.mobile {
+              .feature-name {
+                width: 100%;
+              }
+              .center {
+                width: 40%;
+              }
+            }
+            &.feature {
+                margin: calc($space-lg - 0.2px) 0;
+            }
+        }
+
+        &.feature {
+            background-color: $tc-white;
+            margin-right: 0;
+
+            .card-row-col:nth-child(2) {
+                display: none;
+            }
+
+            .row-divider {
+                width: 100%;
+                margin-left: 6%;
+            }
+
+            &.mobile {
+                display: none;
+            }
         }
     }