fix: #2576 update direct debit flow on billing (#2608)

reapit · Sep 9, 2020 · 562fdd1 · 562fdd1
1 parent 956e1e3
commit 562fdd1
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 199 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
@@ -35,16 +35,10 @@ exports[`AccountStatusSection should match snapshot with hasReapitAccountsRef is
   className="pl-0"
 >
   <Component
-    className="is-italic"
+    className=""
   >
     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
-    closeButton={false}
-    variant="info"
-  >
-    Thank you for setting up a Direct Debit, please now click on ‘Submit to Accounts’ to continue
-  </Component>
   <Component
     id="status"
     name="status"

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
@@ -4,7 +4,6 @@ import AccountStatusSection, { capitalizeFirstLetter } from '../account-status-s
 
 const defaultProps = {
   initialStatus: 'pending',
-  isSubmittedDebit: true,
   hasReapitAccountsRef: 'yes',
 }
 describe('AccountStatusSection', () => {

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
@@ -34,7 +34,6 @@ describe('getInitHasReapitAccountsRef', () => {
 describe('onSubmit', () => {
   it('onSubmit should run correctly', () => {
     const dispatch = jest.fn()
-    const setIsSubmittedDebit = jest.fn()
     const values: AccountsInformationFormValues = {
       hasDirectDebit: 'yes',
       hasReapitAccountsRef: 'yes',
@@ -51,18 +50,16 @@ describe('onSubmit', () => {
       billingKeyContact: 'name',
       billingEmail: '[email protected]',
     }
-    onSubmit({ dispatch, setIsSubmittedDebit })(values)
+    onSubmit({ dispatch })(values)
     expect(dispatch).toHaveBeenCalledWith(updateDeveloperData(expectedData))
-    expect(setIsSubmittedDebit).toHaveBeenCalledWith(false)
   })
 
-  it('onSubmit should run correctly when hasReapitAccountsRef is no', () => {
+  it('onSubmit should run correctly when hasReapitAccountsRef is no & status=incomplete', () => {
     const dispatch = jest.fn()
-    const setIsSubmittedDebit = jest.fn()
     const values: AccountsInformationFormValues = {
       hasDirectDebit: 'yes',
       hasReapitAccountsRef: 'no',
-      status: 'pending',
+      status: 'incomplete',
       billingEmail: '[email protected]',
       reapitReference: 'aaa111',
       billingTelephone: '11111111',
@@ -75,7 +72,7 @@ describe('onSubmit', () => {
       billingKeyContact: 'name',
       billingEmail: '[email protected]',
     }
-    onSubmit({ dispatch, setIsSubmittedDebit })(values)
+    onSubmit({ dispatch })(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
@@ -1,20 +1,14 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import DirectDebitSection, { DirectDebitSectionProps, handleFinish, handleToggleModal } from '../direct-debit-section'
-import formFields from '../form-schema/form-fields'
-
-const { statusField, hasDirectDebitField } = formFields
+import DirectDebitSection, { DirectDebitSectionProps } from '../direct-debit-section'
 
 describe('DirectDebitSection', () => {
   const mockProps: DirectDebitSectionProps = {
-    setFieldValue: jest.fn(),
     values: {
       hasDirectDebit: 'yes',
       hasReapitAccountsRef: 'yes',
     },
-    setIsSubmittedDebit: jest.fn(),
     initialStatus: 'pending',
-    isSubmittedDebit: true,
   }
   it('should match snapshot', () => {
     const wrapper = shallow(<DirectDebitSection {...mockProps} />)
@@ -32,34 +26,3 @@ describe('DirectDebitSection', () => {
     expect(wrapper).toMatchSnapshot()
   })
 })
-
-describe('handleFinish', () => {
-  it('should run correctly', () => {
-    const setIsSubmittedDebit = jest.fn()
-    const setFieldValue = jest.fn()
-    const setIsOpenDirectDebitModal = jest.fn()
-
-    const fn = handleFinish({
-      setIsOpenDirectDebitModal,
-      setFieldValue,
-      setIsSubmittedDebit,
-    })
-
-    fn()
-    expect(setIsOpenDirectDebitModal).toHaveBeenCalledWith(false)
-    expect(setFieldValue).toHaveBeenCalledWith(statusField.name, 'pending')
-    expect(setFieldValue).toHaveBeenCalledWith(hasDirectDebitField.name, 'yes')
-    expect(setIsSubmittedDebit).toHaveBeenCalledWith(true)
-  })
-})
-
-describe('handleToggleModal', () => {
-  it('should run correctly', () => {
-    const setIsOpenDirectDebitModal = jest.fn()
-
-    const fn = handleToggleModal(setIsOpenDirectDebitModal, true)
-
-    fn()
-    expect(setIsOpenDirectDebitModal).toHaveBeenCalledWith(true)
-  })
-})
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
@@ -1,47 +1,35 @@
 import * as React from 'react'
-import { GridItem, Input, Content, Helper } from '@reapit/elements'
+import { GridItem, Input, Content } from '@reapit/elements'
 import formFields from './form-schema/form-fields'
 import { statusText } from './__styles__/account-status-section'
+import { cx } from 'linaria'
 
 const { statusField } = formFields
 
 type AccountStatusSectionProps = {
   initialStatus?: string
-  isSubmittedDebit: boolean
   hasReapitAccountsRef: string
 }
 
 export const capitalizeFirstLetter: (str: string) => string = str => {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-const AccountStatusSection: React.FC<AccountStatusSectionProps> = ({
-  initialStatus,
-  isSubmittedDebit,
-  hasReapitAccountsRef,
-}) => {
+const AccountStatusSection: React.FC<AccountStatusSectionProps> = ({ initialStatus, hasReapitAccountsRef }) => {
   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 className="pl-0">
       {shouldThankInGeneral && (
-        <Content className="is-italic">
+        <Content className={cx('is-italic', statusText)}>
           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>
       )}
-      {shouldThankSettingDebit && (
-        <Helper variant="info" closeButton={false}>
-          Thank you for setting up a Direct Debit, please now click on ‘Submit to Accounts’ to continue
-        </Helper>
-      )}
       {/* hidden input to store "initialStatus" field */}
       <Input type="hidden" id={statusField.name} name={statusField.name} />
       <Content className={statusText}>

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
@@ -67,17 +67,17 @@ export const generateInitialValues = ({
 }
 export const ACCOUNT_REF_MIN_LENGTH = 6
 
-export const onSubmit = ({
-  dispatch,
-  setIsSubmittedDebit,
-}: {
-  dispatch: Dispatch
-  setIsSubmittedDebit: React.Dispatch<React.SetStateAction<boolean>>
-}) => (values: AccountsInformationFormValues) => {
+export const onSubmit = ({ dispatch }: { dispatch: Dispatch }) => (values: AccountsInformationFormValues) => {
   const { status, billingEmail, reapitReference, billingTelephone, billingKeyContact, hasReapitAccountsRef } = values
+  const shouldOpenDebit = hasReapitAccountsRef === 'no' && status === 'incomplete'
+  if (shouldOpenDebit) {
+    window.open(
+      `https://reapit.na1.echosign.com/public/esignWidget?wid=${window.reapit.config.debitApiKey}*&hosted=false`,
+      '_blank',
+    )
+  }
 
-  // currently has to manually set the status value
-  const shouldSetStatusToPending = hasReapitAccountsRef === 'yes' && reapitReference
+  const shouldSetStatusToPending = status !== 'confirmed'
 
   const dataToSubmit: UpdateDeveloperModel = {
     status: shouldSetStatusToPending ? 'pending' : status,
@@ -87,7 +87,6 @@ export const onSubmit = ({
     billingKeyContact,
     billingTelephone,
   }
-  setIsSubmittedDebit(false)
   dispatch(updateDeveloperData(dataToSubmit))
 }
 
@@ -105,7 +104,6 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
   const dispatch = useDispatch()
 
   const isShowLoader = isLoading
-  const [isSubmittedDebit, setIsSubmittedDebit] = React.useState<boolean>(false)
 
   if (isShowLoader) {
     return <Loader />
@@ -114,12 +112,10 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
   const initialValues = generateInitialValues({ developerInfo, defaultInitialValues })
 
   return (
-    <Formik
-      validationSchema={validationSchema}
-      initialValues={initialValues}
-      onSubmit={onSubmit({ dispatch, setIsSubmittedDebit })}
-    >
+    <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={onSubmit({ dispatch })}>
       {({ setFieldValue, values }) => {
+        const { hasReapitAccountsRef, status } = values
+        const isSubmitDebitButton = hasReapitAccountsRef === 'no' && status === 'incomplete'
         return (
           <Form>
             <H3 isHeadingSection>Billing</H3>
@@ -147,16 +143,9 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
                     setFieldValue={setFieldValue}
                     values={values}
                   />
-                  <DirectDebitSection
-                    initialStatus={initialValues.status}
-                    isSubmittedDebit={isSubmittedDebit}
-                    setIsSubmittedDebit={setIsSubmittedDebit}
-                    setFieldValue={setFieldValue}
-                    values={values}
-                  />
+                  <DirectDebitSection initialStatus={initialValues.status} values={values} />
                   <AccountStatusSection
                     hasReapitAccountsRef={values.hasReapitAccountsRef}
-                    isSubmittedDebit={isSubmittedDebit}
                     initialStatus={initialValues.status}
                   />
                 </GridItem>
@@ -165,7 +154,7 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
                 <div>
                   <LevelRight>
                     <Button className="mb-3" loading={isLoading} dataTest="save-btn" type="submit">
-                      SUBMIT TO ACCOUNTS
+                      {isSubmitDebitButton ? 'SUBMIT TO ACCOUNTS & SETUP DIRECT DEBIT' : 'SUBMIT TO ACCOUNTS'}
                     </Button>
                   </LevelRight>
                 </div>