fix: #2011 logic update when submit debit info (#2084)

reapit · Jul 17, 2020 · e673810 · e673810
1 parent c2556cf
commit e673810
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 79 deletions.
diff --git a/...ab/accounts-information-form/__tests__/__snapshots__/account-status-section.test.tsx.snap b/...ab/accounts-information-form/__tests__/__snapshots__/account-status-section.test.tsx.snap
@@ -21,6 +21,16 @@ exports[`AccountStatusSection should match snapshot 1`] = `
 
 exports[`AccountStatusSection should match snapshot with hasReapitAccountsRef is no 1`] = `
 <Component>
+  <Component
+    className="is-italic"
+  >
+    Thank you for submitting your Account Information and setting up a Direct Debit, we just need to validate your information with our Accounts Department. One this has been completed your account will be set to ‘Active’ and you can procced with any subscriptions.
+  </Component>
+  <Component
+    className="is-italic"
+  >
+    Thank you for setting up a Direct Debit, to continue please click ‘Save’ below
+  </Component>
   <Component
     id="status"
     name="status"
@@ -45,5 +55,14 @@ exports[`AccountStatusSection should match snapshot with status !== pending 1`]
     name="status"
     type="hidden"
   />
+  <Component>
+    <b>
+      ACCOUNT STATUS:
+    </b>
+     
+    <i>
+      incomplete
+    </i>
+  </Component>
 </Component>
 `;
diff --git a/...accounts-information-form/__tests__/__snapshots__/accounts-information-form.test.tsx.snap b/...accounts-information-form/__tests__/__snapshots__/accounts-information-form.test.tsx.snap
@@ -27,8 +27,8 @@ exports[`AccountsInformationForm should match snapshot 1`] = `
       "_exclusive": Object {},
       "_mutate": undefined,
       "_nodes": Array [
-        "hasReapitAccountsRef",
         "hasDirectDebit",
+        "hasReapitAccountsRef",
         "reapitReference",
         "status",
         "billingKeyContact",
@@ -153,25 +153,8 @@ exports[`AccountsInformationForm should match snapshot 1`] = `
             "list": Set {},
             "refs": Map {},
           },
-          "_conditions": Array [
-            Condition {
-              "fn": [Function],
-              "refs": Array [
-                Reference {
-                  "getter": [Function],
-                  "isContext": false,
-                  "isSibling": true,
-                  "isValue": false,
-                  "key": "hasReapitAccountsRef",
-                  "map": undefined,
-                  "path": "hasReapitAccountsRef",
-                },
-              ],
-            },
-          ],
-          "_deps": Array [
-            "hasReapitAccountsRef",
-          ],
+          "_conditions": Array [],
+          "_deps": Array [],
           "_exclusive": Object {},
           "_mutate": undefined,
           "_options": Object {

diff --git a/...-tab/accounts-information-form/__tests__/__snapshots__/direct-debit-section.test.tsx.snap b/...-tab/accounts-information-form/__tests__/__snapshots__/direct-debit-section.test.tsx.snap
@@ -2,30 +2,4 @@
 
 exports[`DirectDebitSection should match snapshot 1`] = `""`;
 
-exports[`DirectDebitSection should match snapshot 2`] = `
-<Fragment>
-  <Component>
-    <Component>
-      Direct Debit
-    </Component>
-    <Component>
-      You will need to setup a Direct Debit before you can make any subscriptions within the Developers Portal, this includes submitting an app for approval and listing an app within the Marketplace. Once completed your account will be verified by our Account Department.
-    </Component>
-    <Component
-      onClick={[Function]}
-    >
-      Setup Direct Debit
-    </Component>
-    <Component
-      id="hasDirectDebit"
-      name="hasDirectDebit"
-      type="hidden"
-    />
-  </Component>
-  <Component
-    onClose={[Function]}
-    onFinish={[Function]}
-    visible={false}
-  />
-</Fragment>
-`;
+exports[`DirectDebitSection should match snapshot 2`] = `""`;
diff --git a/.../settings-billing-tab/accounts-information-form/__tests__/account-status-section.test.tsx b/.../settings-billing-tab/accounts-information-form/__tests__/account-status-section.test.tsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'
 import AccountStatusSection from '../account-status-section'
 
 const defaultProps = {
-  status: 'pending',
+  initialStatus: 'pending',
   isSubmittedDebit: true,
   hasReapitAccountsRef: 'yes',
 }
@@ -14,12 +14,12 @@ describe('AccountStatusSection', () => {
   })
 
   it('should match snapshot with status !== pending', () => {
-    const wrapper = shallow(<AccountStatusSection {...defaultProps} status="incomplete" />)
+    const wrapper = shallow(<AccountStatusSection {...defaultProps} initialStatus="incomplete" />)
     expect(wrapper).toMatchSnapshot()
   })
 
   it('should match snapshot with hasReapitAccountsRef is no', () => {
-    const wrapper = shallow(<AccountStatusSection {...defaultProps} hasReapitAccountsRef="n" />)
+    const wrapper = shallow(<AccountStatusSection {...defaultProps} hasReapitAccountsRef="no" />)
     expect(wrapper).toMatchSnapshot()
   })
 })
diff --git a/...ttings-billing-tab/accounts-information-form/__tests__/accounts-information-form.test.tsx b/...ttings-billing-tab/accounts-information-form/__tests__/accounts-information-form.test.tsx
@@ -21,6 +21,7 @@ jest.mock('react-redux', () => ({
 describe('onSubmit', () => {
   it('onSubmit should run correctly', () => {
     const dispatch = jest.fn()
+    const setIsSubmittedDebit = jest.fn()
     const values: AccountsInformationFormValues = {
       hasDirectDebit: 'yes',
       hasReapitAccountsRef: 'yes',
@@ -37,12 +38,14 @@ describe('onSubmit', () => {
       billingKeyContact: 'name',
       billingEmail: '[email protected]',
     }
-    onSubmit(dispatch)(values)
+    onSubmit({ dispatch, setIsSubmittedDebit })(values)
     expect(dispatch).toHaveBeenCalledWith(updateDeveloperData(expectedData))
+    expect(setIsSubmittedDebit).toHaveBeenCalledWith(false)
   })
 
   it('onSubmit should run correctly when hasReapitAccountsRef is no', () => {
     const dispatch = jest.fn()
+    const setIsSubmittedDebit = jest.fn()
     const values: AccountsInformationFormValues = {
       hasDirectDebit: 'yes',
       hasReapitAccountsRef: 'no',
@@ -59,7 +62,7 @@ describe('onSubmit', () => {
       billingKeyContact: 'name',
       billingEmail: '[email protected]',
     }
-    onSubmit(dispatch)(values)
+    onSubmit({ dispatch, setIsSubmittedDebit })(values)
     expect(dispatch).toHaveBeenCalledWith(updateDeveloperData(expectedData))
   })
 })

diff --git a/...gs/settings-billing-tab/accounts-information-form/__tests__/direct-debit-section.test.tsx b/...gs/settings-billing-tab/accounts-information-form/__tests__/direct-debit-section.test.tsx
@@ -13,6 +13,8 @@ describe('DirectDebitSection', () => {
       hasReapitAccountsRef: 'yes',
     },
     setIsSubmittedDebit: jest.fn(),
+    initialStatus: 'pending',
+    isSubmittedDebit: true,
   }
   it('should match snapshot', () => {
     const wrapper = shallow(<DirectDebitSection {...mockProps} />)

diff --git a/.../pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx b/.../pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx
@@ -5,37 +5,46 @@ import formFields from './form-schema/form-fields'
 const { statusField } = formFields
 
 type AccountStatusSectionProps = {
-  status?: string
+  initialStatus?: string
   isSubmittedDebit: boolean
   hasReapitAccountsRef: string
 }
 
 const AccountStatusSection: React.FC<AccountStatusSectionProps> = ({
-  status,
+  initialStatus,
   isSubmittedDebit,
   hasReapitAccountsRef,
 }) => {
-  const shouldShowStatus = status === 'pending'
-  const shouldThank = hasReapitAccountsRef === 'no' && isSubmittedDebit
+  const isPending = initialStatus === 'pending'
+
+  // when get data from server, if status is pending and REAPIT ACCOUNTS REF is no, show general thank message
+  const shouldThankInGeneral = isPending && hasReapitAccountsRef === 'no'
+
+  // when user submit debit info in iframe -> show thank for setting up debit message
+  const shouldThankSettingDebit = hasReapitAccountsRef === 'no' && isSubmittedDebit
 
   return (
     <GridItem>
-      {shouldThank && (
+      {shouldThankInGeneral && (
         <Content className="is-italic">
           Thank you for submitting your Account Information and setting up a Direct Debit, we just need to validate your
           information with our Accounts Department. One this has been completed your account will be set to ‘Active’ and
           you can procced with any subscriptions.
         </Content>
       )}
 
-      {/* hidden input to store "status" field */}
-      <Input type="hidden" id={statusField.name} name={statusField.name} />
-
-      {shouldShowStatus && (
-        <Content>
-          <b>ACCOUNT STATUS:</b> <i>{status}</i>
+      {shouldThankSettingDebit && (
+        <Content className="is-italic">
+          Thank you for setting up a Direct Debit, to continue please click ‘Save’ below
         </Content>
       )}
+
+      {/* hidden input to store "initialStatus" field */}
+      <Input type="hidden" id={statusField.name} name={statusField.name} />
+
+      <Content>
+        <b>ACCOUNT STATUS:</b> <i>{initialStatus}</i>
+      </Content>
     </GridItem>
   )
 }

diff --git a/...ges/settings/settings-billing-tab/accounts-information-form/accounts-information-form.tsx b/...ges/settings/settings-billing-tab/accounts-information-form/accounts-information-form.tsx
@@ -52,6 +52,7 @@ export const generateInitialValues = ({
   }
   const { billingEmail, billingTelephone, billingKeyContact, reapitReference, status } = developerInfo
   const hasReapitAccountsRef = reapitReference ? 'yes' : 'no'
+  // currently the iframe form doesn't connect to the API, need to guess this based on another field
   // if a developer is in "pending" status and has no REAPIT ACCOUNTS REF, it means it has direct debit
   const hasDirectDebit = hasReapitAccountsRef === 'no' && status === 'pending' ? 'yes' : 'no'
 
@@ -67,7 +68,13 @@ export const generateInitialValues = ({
 }
 export const ACCOUNT_REF_MIN_LENGTH = 6
 
-export const onSubmit = (dispatch: Dispatch) => (values: AccountsInformationFormValues) => {
+export const onSubmit = ({
+  dispatch,
+  setIsSubmittedDebit,
+}: {
+  dispatch: Dispatch
+  setIsSubmittedDebit: React.Dispatch<React.SetStateAction<boolean>>
+}) => (values: AccountsInformationFormValues) => {
   const { status, billingEmail, reapitReference, billingTelephone, billingKeyContact, hasReapitAccountsRef } = values
   const dataToSubmit: UpdateDeveloperModel = {
     status,
@@ -77,6 +84,7 @@ export const onSubmit = (dispatch: Dispatch) => (values: AccountsInformationForm
     billingKeyContact,
     billingTelephone,
   }
+  setIsSubmittedDebit(false)
   dispatch(updateDeveloperData(dataToSubmit))
 }
 
@@ -102,7 +110,11 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
   const initialValues = generateInitialValues({ developerInfo, defaultInitialValues })
 
   return (
-    <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={onSubmit(dispatch)}>
+    <Formik
+      validationSchema={validationSchema}
+      initialValues={initialValues}
+      onSubmit={onSubmit({ dispatch, setIsSubmittedDebit })}
+    >
       {({ setFieldValue, values }) => {
         return (
           <Form>
@@ -119,14 +131,16 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
                 <GridItem>
                   <ReapitReferenceSection setFieldValue={setFieldValue} values={values} />
                   <DirectDebitSection
+                    initialStatus={initialValues.status}
+                    isSubmittedDebit={isSubmittedDebit}
                     setIsSubmittedDebit={setIsSubmittedDebit}
                     setFieldValue={setFieldValue}
                     values={values}
                   />
                   <AccountStatusSection
                     hasReapitAccountsRef={values.hasReapitAccountsRef}
                     isSubmittedDebit={isSubmittedDebit}
-                    status={initialValues.status}
+                    initialStatus={initialValues.status}
                   />
                 </GridItem>
               </Grid>

diff --git a/...ts/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-section.tsx b/...ts/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-section.tsx
@@ -20,6 +20,8 @@ export type DirectDebitSectionProps = {
   setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void
   values: AccountsInformationFormValues
   setIsSubmittedDebit: React.Dispatch<React.SetStateAction<boolean>>
+  initialStatus?: string
+  isSubmittedDebit: boolean
 }
 
 type DirectDebitModalProps = Pick<ModalPropsV2, 'onClose' | 'visible'> & {
@@ -70,15 +72,30 @@ export const DirectDebitModal: React.FC<DirectDebitModalProps> = ({ onClose, vis
   )
 }
 
-const DirectDebitSection: React.FC<DirectDebitSectionProps> = ({ values, setFieldValue, setIsSubmittedDebit }) => {
+const DirectDebitSection: React.FC<DirectDebitSectionProps> = ({
+  values,
+  setFieldValue,
+  setIsSubmittedDebit,
+  isSubmittedDebit,
+  initialStatus,
+}) => {
   const [isOpenDirectDebitModal, setIsOpenDirectDebitModal] = React.useState<boolean>(false)
 
   const { hasReapitAccountsRef, reapitReference } = values
 
+  // after submit debit, hide this section
+  // when status is pending and hasReapitAccountRef is no -> mean that user already set up debit -> hide this section
+  const shouldHideDebitSection = (initialStatus === 'pending' && hasReapitAccountsRef === 'no') || isSubmittedDebit
+
   const isShowDirectDebitWithRef =
     hasReapitAccountsRef === 'yes' && (reapitReference || '').length >= ACCOUNT_REF_MIN_LENGTH
+
   const isShowDirectDebitWithoutRef = hasReapitAccountsRef === 'no'
 
+  if (shouldHideDebitSection) {
+    return null
+  }
+
   if (isShowDirectDebitWithRef)
     return (
       <GridItem>

diff --git a/.../settings/settings-billing-tab/accounts-information-form/form-schema/validation-schema.ts b/.../settings/settings-billing-tab/accounts-information-form/form-schema/validation-schema.ts
@@ -61,12 +61,5 @@ export const validationSchema = Yup.object().shape({
     otherwise: Yup.string().notRequired(),
   }),
 
-  [hasDirectDebitField.name]: Yup.string().when(hasReapitAccountsRefField.name, {
-    is: 'no',
-    then: Yup.string()
-      .trim()
-      .required(FIELD_REQUIRED)
-      .oneOf(['yes'], hasDirectDebitField.errorMessage),
-    otherwise: Yup.string().notRequired(),
-  }),
+  [hasDirectDebitField.name]: Yup.string(),
 })
diff --git a/packages/developer-portal/src/tests/badges/badge-branches.svg b/packages/developer-portal/src/tests/badges/badge-branches.svg
diff --git a/packages/developer-portal/src/tests/badges/badge-functions.svg b/packages/developer-portal/src/tests/badges/badge-functions.svg
diff --git a/packages/developer-portal/src/tests/badges/badge-lines.svg b/packages/developer-portal/src/tests/badges/badge-lines.svg