diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/account-status-section.test.tsx.snap b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/account-status-section.test.tsx.snap index 90724b7046..47142b3b06 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/account-status-section.test.tsx.snap +++ b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/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`] = ` + + 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. + + + Thank you for setting up a Direct Debit, to continue please click ‘Save’ below + + + + ACCOUNT STATUS: + + + + incomplete + + `; diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/accounts-information-form.test.tsx.snap b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/accounts-information-form.test.tsx.snap index c758c1ac70..8ebf028aad 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/accounts-information-form.test.tsx.snap +++ b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/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/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/direct-debit-section.test.tsx.snap b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/direct-debit-section.test.tsx.snap index 6dec18e67c..188d8f9674 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/direct-debit-section.test.tsx.snap +++ b/packages/developer-portal/src/components/pages/settings/settings-billing-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`] = ` - - - - Direct Debit - - - 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. - - - Setup Direct Debit - - - - - -`; +exports[`DirectDebitSection should match snapshot 2`] = `""`; diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/account-status-section.test.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/account-status-section.test.tsx index 8b64ed8636..a2d2df8948 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/account-status-section.test.tsx +++ b/packages/developer-portal/src/components/pages/settings/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() + const wrapper = shallow() expect(wrapper).toMatchSnapshot() }) it('should match snapshot with hasReapitAccountsRef is no', () => { - const wrapper = shallow() + const wrapper = shallow() expect(wrapper).toMatchSnapshot() }) }) diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/accounts-information-form.test.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/accounts-information-form.test.tsx index e0b0261d9d..6a8cd99499 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/accounts-information-form.test.tsx +++ b/packages/developer-portal/src/components/pages/settings/settings-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: 'a@gmail.com', } - 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: 'a@gmail.com', } - onSubmit(dispatch)(values) + onSubmit({ dispatch, setIsSubmittedDebit })(values) expect(dispatch).toHaveBeenCalledWith(updateDeveloperData(expectedData)) }) }) diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/direct-debit-section.test.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/direct-debit-section.test.tsx index e28091dc5f..f67819aa90 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/direct-debit-section.test.tsx +++ b/packages/developer-portal/src/components/pages/settings/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() diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx index 0a51b741e7..398c02c893 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx +++ b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx @@ -5,22 +5,27 @@ import formFields from './form-schema/form-fields' const { statusField } = formFields type AccountStatusSectionProps = { - status?: string + initialStatus?: string isSubmittedDebit: boolean hasReapitAccountsRef: string } const AccountStatusSection: React.FC = ({ - 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 ( - {shouldThank && ( + {shouldThankInGeneral && ( 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 @@ -28,14 +33,18 @@ const AccountStatusSection: React.FC = ({ )} - {/* hidden input to store "status" field */} - - - {shouldShowStatus && ( - - ACCOUNT STATUS: {status} + {shouldThankSettingDebit && ( + + Thank you for setting up a Direct Debit, to continue please click ‘Save’ below )} + + {/* hidden input to store "initialStatus" field */} + + + + ACCOUNT STATUS: {initialStatus} + ) } diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/accounts-information-form.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/accounts-information-form.tsx index 574cae36d3..2ffa197347 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/accounts-information-form.tsx +++ b/packages/developer-portal/src/components/pages/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> +}) => (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 = () => { const initialValues = generateInitialValues({ developerInfo, defaultInitialValues }) return ( - + {({ setFieldValue, values }) => { return (
@@ -119,6 +131,8 @@ const AccountsInformationForm: React.FC = () => { = () => { diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-section.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-section.tsx index 3cf33dadd3..fa7051a05c 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-section.tsx +++ b/packages/developer-portal/src/components/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> + initialStatus?: string + isSubmittedDebit: boolean } type DirectDebitModalProps = Pick & { @@ -70,15 +72,30 @@ export const DirectDebitModal: React.FC = ({ onClose, vis ) } -const DirectDebitSection: React.FC = ({ values, setFieldValue, setIsSubmittedDebit }) => { +const DirectDebitSection: React.FC = ({ + values, + setFieldValue, + setIsSubmittedDebit, + isSubmittedDebit, + initialStatus, +}) => { const [isOpenDirectDebitModal, setIsOpenDirectDebitModal] = React.useState(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 ( diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/form-schema/validation-schema.ts b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/form-schema/validation-schema.ts index e9eb674bd0..205f96907e 100644 --- a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/form-schema/validation-schema.ts +++ b/packages/developer-portal/src/components/pages/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 index f73a4f8afd..8f32ac0287 100644 --- a/packages/developer-portal/src/tests/badges/badge-branches.svg +++ b/packages/developer-portal/src/tests/badges/badge-branches.svg @@ -1 +1 @@ -Coverage:branches: 68.63%Coverage:branches68.63% +Coverage:branches: 68.63%Coverage:branches68.63% \ No newline at end of file diff --git a/packages/developer-portal/src/tests/badges/badge-functions.svg b/packages/developer-portal/src/tests/badges/badge-functions.svg index 380f8a5620..db004e98ed 100644 --- a/packages/developer-portal/src/tests/badges/badge-functions.svg +++ b/packages/developer-portal/src/tests/badges/badge-functions.svg @@ -1 +1 @@ -Coverage:functions: 80.86%Coverage:functions80.86% +Coverage:functions: 81.08%Coverage:functions81.08% \ No newline at end of file diff --git a/packages/developer-portal/src/tests/badges/badge-lines.svg b/packages/developer-portal/src/tests/badges/badge-lines.svg index d8fc83aebd..fb09838d48 100644 --- a/packages/developer-portal/src/tests/badges/badge-lines.svg +++ b/packages/developer-portal/src/tests/badges/badge-lines.svg @@ -1 +1 @@ -Coverage:lines: 89.93%Coverage:lines89.93% +Coverage:lines: 90%Coverage:lines90% \ No newline at end of file diff --git a/packages/developer-portal/src/tests/badges/badge-statements.svg b/packages/developer-portal/src/tests/badges/badge-statements.svg index 64ef968b6d..621caa9345 100644 --- a/packages/developer-portal/src/tests/badges/badge-statements.svg +++ b/packages/developer-portal/src/tests/badges/badge-statements.svg @@ -1 +1 @@ -Coverage:statements: 89.08%Coverage:statements89.08% +Coverage:statements: 89.14%Coverage:statements89.14% \ No newline at end of file