feat: #2011 modal for debit setup

reapit · Jul 15, 2020 · a58e64f · a58e64f
1 parent 1b80f58
commit a58e64f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/...ents/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-modal.tsx b/...ents/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-modal.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { ModalV2, ModalPropsV2, H4, H6, Button, FlexContainerResponsive } from '@reapit/elements'
+
+type DirectDebitModalProps = Pick<ModalPropsV2, 'onClose' | 'visible'> & {}
+
+export const DirectDebitModal: React.FC<DirectDebitModalProps> = ({ onClose, visible }) => {
+  return (
+    <ModalV2
+      title={<H4>Foundations Direct Debit</H4>}
+      visible={visible}
+      onClose={onClose}
+      footer={
+        <FlexContainerResponsive centerContent isFullHeight={false}>
+          <H6 className="mb-0 mr-4">Once you have completed this form, please click here to continue</H6>
+          <Button>Finish</Button>
+        </FlexContainerResponsive>
+      }
+    >
+      Direct Debit Form
+    </ModalV2>
+  )
+}
+
+export default DirectDebitModal
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
@@ -1,13 +1,16 @@
 import * as React from 'react'
 import { GridItem, FormHeading, FormSubHeading, Button } from '@reapit/elements'
 import { AccountsInformationFormValues, ACCOUNT_REF_MIN_LENGTH } from './accounts-information-form'
+import { DirectDebitModal } from './direct-debit-modal'
 
 export type DirectDebitSectionProps = {
   setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void
   values: AccountsInformationFormValues
 }
 
 const DirectDebitSection: React.FC<DirectDebitSectionProps> = ({ values }) => {
+  const [isOpenDirectDebitModal, setIsOpenDirectDebitModal] = React.useState<boolean>(false)
+
   const { hasReapitAccountsRef, reapitReference } = values
 
   const isShowDirectDebitWithRef =
@@ -28,15 +31,18 @@ const DirectDebitSection: React.FC<DirectDebitSectionProps> = ({ values }) => {
 
   if (isShowDirectDebitWithoutRef)
     return (
-      <GridItem>
-        <FormHeading>Direct Debit</FormHeading>
-        <FormSubHeading>
-          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.
-        </FormSubHeading>
-        <Button>Setup Direct Debit</Button>
-      </GridItem>
+      <>
+        <GridItem>
+          <FormHeading>Direct Debit</FormHeading>
+          <FormSubHeading>
+            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.
+          </FormSubHeading>
+          <Button onClick={() => setIsOpenDirectDebitModal(true)}>Setup Direct Debit</Button>
+        </GridItem>
+        <DirectDebitModal visible={isOpenDirectDebitModal} onClose={() => setIsOpenDirectDebitModal(false)} />
+      </>
     )
 
   return null