feat: #2011 wip validation

packages/developer-portal/config.example.json

@@ -12,5 +12,6 @@
   "cognitoUserPoolId": "",
   "chatbotAppId": "",
   "marketplaceUrl": "",
-  "cypressBaseUrl": "http://localhost:8080"
+  "cypressBaseUrl": "http://localhost:8080",
+  "debitApiKey": ""
 }

packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/__tests__/__snapshots__/direct-debit-section.test.tsx.snap

@@ -3,15 +3,23 @@
 exports[`DirectDebitSection should match snapshot 1`] = `""`;
 
 exports[`DirectDebitSection should match snapshot 2`] = `
-<Component>
+<Fragment>
   <Component>
-    Direct Debit
+    <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>
-  <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>
-    Setup Direct Debit
-  </Component>
-</Component>
+  <Component
+    onClose={[Function]}
+    visible={false}
+  />
+</Fragment>
 `;

packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/account-status-section.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { GridItem, Input, Content } from '@reapit/elements'
+import formFields from './form-schema/form-fields'
+
+const { statusField } = formFields
+
+type AccountStatusSectionProps = {
+  isPending: boolean
+  status: string
+  hasReapitAccountsRef: string
+}
+
+const AccountStatusSection: React.FC<AccountStatusSectionProps> = ({ isPending, status, hasReapitAccountsRef }) => {
+  if (!isPending || hasReapitAccountsRef === 'yes') {
+    return null
+  }
+  return (
+    <GridItem>
+      <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} />
+      <Content>
+        <b>ACCOUNT STATUS:</b> <i>{status}</i>
+      </Content>
+    </GridItem>
+  )
+}
+
+export default AccountStatusSection

packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/accounts-information-form.tsx

@@ -1,12 +1,9 @@
 import * as React from 'react'
-import { selectSettingsPageIsLoading } from '@/selector/settings'
-import { selectMyIdentity } from '@/selector'
 import { Dispatch } from 'redux'
-import { fetchMyIdentity } from '@/actions/developer'
-import { Loader, Content } from '@reapit/elements'
+import { Loader, Content, Input } from '@reapit/elements'
 import { useDispatch, useSelector } from 'react-redux'
 import { updateDeveloperData } from '@/actions/settings'
-import { selectDeveloperLoading } from '@/selector'
+import { selectSettingsPageDeveloperInformation, selectSettingsPageIsLoading } from '@/selector/settings'
 import {
   FormSection,
   Form,
@@ -22,6 +19,7 @@ import {
 import ReapitReferenceSection from './reapit-reference-section'
 import DirectDebitSection from './direct-debit-section'
 import ContactInformationSection from './contact-information-section'
+import AccountStatusSection from './account-status-section'
 import { UpdateDeveloperModel } from '@reapit/foundations-ts-definitions'
 import { validationSchema } from './form-schema/validation-schema'
 
@@ -30,57 +28,81 @@ export type AccountsInformationFormProps = {}
 export type AccountsInformationFormValues = {
   hasReapitAccountsRef: string
   hasDirectDebit: string
-} & Pick<UpdateDeveloperModel, 'billingEmail' | 'billingKeyContact' | 'billingTelephone' | 'reapitReference'>
+} & Pick<UpdateDeveloperModel, 'billingEmail' | 'billingKeyContact' | 'billingTelephone' | 'reapitReference' | 'status'>
 
-export const getInitialValues = (initialValues: AccountsInformationFormValues) => ({
-  ...initialValues,
-  hasReapitAccountsRef: initialValues.reapitReference ? 'yes' : '',
-  hasDirectDebit: '',
-})
+export const defaultInitialValues: AccountsInformationFormValues = {
+  hasReapitAccountsRef: 'no',
+  hasDirectDebit: 'no',
+  status: 'incomplete',
+  billingEmail: '',
+  reapitReference: '',
+  billingTelephone: '',
+  billingKeyContact: '',
+}
+
+export const generateInitialValues = ({
+  defaultInitialValues,
+  developerInfo,
+}: {
+  defaultInitialValues: AccountsInformationFormValues
+  developerInfo: DeveloperModel | null
+}): AccountsInformationFormValues => {
+  if (!developerInfo) {
+    return defaultInitialValues
+  }
+  const { billingEmail, billingTelephone, billingKeyContact, reapitReference, status } = developerInfo
+  const hasReapitAccountsRef = reapitReference ? 'yes' : 'no'
+  // if a developer is in "pending" status and has no REAPIT ACCOUNTS REF, it means has direct debit
+  const hasDirectDebit = hasReapitAccountsRef === 'no' && status === 'pending' ? 'yes' : 'no'
 
+  return {
+    billingEmail,
+    billingTelephone,
+    billingKeyContact,
+    reapitReference,
+    status,
+    hasReapitAccountsRef,
+    hasDirectDebit,
+  }
+}
 export const ACCOUNT_REF_MIN_LENGTH = 6
 
 export const onSubmit = (dispatch: Dispatch) => (values: AccountsInformationFormValues) => {
-  dispatch(updateDeveloperData(values))
+  const { status, billingEmail, reapitReference, billingTelephone, billingKeyContact, hasReapitAccountsRef } = values
+  const dataToSubmit: UpdateDeveloperModel = {
+    status,
+    reapitReference: hasReapitAccountsRef === 'yes' ? reapitReference : '',
+    billingEmail,
+    billingKeyContact,
+    billingTelephone,
+  }
+  dispatch(updateDeveloperData(dataToSubmit))
 }
 
 export type HandleUseEffectParams = {
   dispatch: Dispatch
   isProd: boolean
 }
 
-export const handleUseEffect = ({ dispatch, isProd }: HandleUseEffectParams) => () => {
-  if (!isProd) {
-    dispatch(fetchMyIdentity())
-  }
-}
-
 const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
   const isProd = window.reapit.config.appEnv === 'production'
-  const isLoading = useSelector(selectDeveloperLoading)
-  const myIdentity = useSelector(selectMyIdentity)
-  const isSubmitting = useSelector(selectSettingsPageIsLoading)
-  const unfetched = !myIdentity || Object.keys(myIdentity).length === 0
-  const isPendingSubmission = myIdentity?.status === 'incomplete'
+  const developerInfo = useSelector(selectSettingsPageDeveloperInformation)
+  const isLoading = useSelector(selectSettingsPageIsLoading)
 
   const dispatch = useDispatch()
-  React.useEffect(handleUseEffect({ dispatch, isProd }), [])
 
-  const isShowLoader = (isLoading || unfetched) && !isProd
+  const isShowLoader = isLoading && !isProd
+
   if (isShowLoader) {
     return <Loader />
   }
 
+  const initialValues = generateInitialValues({ developerInfo, defaultInitialValues })
+
   return (
-    <Formik
-      validationSchema={validationSchema}
-      initialValues={getInitialValues(myIdentity as AccountsInformationFormValues)}
-      onSubmit={onSubmit(dispatch)}
-    >
-      {({ setFieldValue, values, isValid }) => {
-        const { hasReapitAccountsRef } = values
-        // no error and tick "YES" to DO YOU HAVE A REAPIT ACCOUNTS REF?
-        const isEnableSaveBtn = hasReapitAccountsRef === 'yes' && isValid && !isPendingSubmission
+    <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={onSubmit(dispatch)}>
+      {({ setFieldValue, values }) => {
+        const isPending = initialValues.status === 'pending'
 
         return (
           <Form>
@@ -97,26 +119,20 @@ const AccountsInformationForm: React.FC<AccountsInformationFormProps> = () => {
                 <GridItem>
                   <ReapitReferenceSection setFieldValue={setFieldValue} values={values} />
                   <DirectDebitSection setFieldValue={setFieldValue} values={values} />
+                  <AccountStatusSection
+                    hasReapitAccountsRef={values.hasReapitAccountsRef}
+                    isPending={isPending}
+                    status={initialValues.status}
+                  />
                 </GridItem>
               </Grid>
               <LevelRight>
                 <div>
                   <LevelRight>
-                    <Button
-                      className="mb-3"
-                      loading={isSubmitting}
-                      dataTest="save-btn"
-                      type="submit"
-                      disabled={!isEnableSaveBtn}
-                    >
+                    <Button className="mb-3" loading={isLoading} dataTest="save-btn" type="submit">
                       Save
                     </Button>
                   </LevelRight>
-                  {isPendingSubmission && (
-                    <Content>
-                      <b>ACCOUNT STATUS :</b> <i>Pending</i>
-                    </Content>
-                  )}
                 </div>
               </LevelRight>
             </FormSection>

packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/contact-information-section.tsx

@@ -4,37 +4,37 @@ import formFields from './form-schema/form-fields'
 
 export type ContactInformationSectionProps = {}
 
-const { emailField, phoneNumberField, contactField } = formFields
+const { billingEmailField, billingTelephoneField, billingKeyContactField } = formFields
 
 const ContactInformationSection: React.FC<ContactInformationSectionProps> = () => {
   return (
     <>
-      <FormHeading>{emailField.heading}</FormHeading>
-      <FormSubHeading>{emailField.subHeading}</FormSubHeading>
+      <FormHeading>{billingEmailField.heading}</FormHeading>
+      <FormSubHeading>{billingEmailField.subHeading}</FormSubHeading>
       <Input
         dataTest="email"
         type="email"
-        id={emailField.name}
-        name={emailField.name}
-        placeholder={emailField.placeHolder}
+        id={billingEmailField.name}
+        name={billingEmailField.name}
+        placeholder={billingEmailField.placeHolder}
       />
-      <FormHeading>{phoneNumberField.heading}</FormHeading>
-      <FormSubHeading>{phoneNumberField.subHeading}</FormSubHeading>
+      <FormHeading>{billingTelephoneField.heading}</FormHeading>
+      <FormSubHeading>{billingTelephoneField.subHeading}</FormSubHeading>
       <Input
         dataTest="phoneNumber"
         type="text"
-        id={phoneNumberField.name}
-        name={phoneNumberField.name}
-        placeholder={phoneNumberField.placeHolder}
+        id={billingTelephoneField.name}
+        name={billingTelephoneField.name}
+        placeholder={billingTelephoneField.placeHolder}
       />
-      <FormHeading>{contactField.heading}</FormHeading>
-      <FormSubHeading>{contactField.subHeading}</FormSubHeading>
+      <FormHeading>{billingKeyContactField.heading}</FormHeading>
+      <FormSubHeading>{billingKeyContactField.subHeading}</FormSubHeading>
       <Input
         dataTest="contact"
         type="text"
-        id={contactField.name}
-        name={contactField.name}
-        placeholder={contactField.placeHolder}
+        id={billingKeyContactField.name}
+        name={billingKeyContactField.name}
+        placeholder={billingKeyContactField.placeHolder}
       />
     </>
   )