From a58e64ff3ad0ce8d55b83c3e0a313bee194c1fd4 Mon Sep 17 00:00:00 2001
From: Cuong Vu <cuongvh@reapit.com>
Date: Mon, 13 Jul 2020 18:10:59 +0700
Subject: [PATCH] feat: #2011 modal for debit setup

---
 .../direct-debit-modal.tsx                    | 24 +++++++++++++++++++
 .../direct-debit-section.tsx                  | 24 ++++++++++++-------
 2 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-modal.tsx

diff --git a/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-modal.tsx b/packages/developer-portal/src/components/pages/settings/settings-billing-tab/accounts-information-form/direct-debit-modal.tsx
new file mode 100644
index 0000000000..53b173b0bc
--- /dev/null
+++ b/packages/developer-portal/src/components/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/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 34a2d2e7e7..3edc4ba6fd 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
@@ -1,6 +1,7 @@
 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
@@ -8,6 +9,8 @@ export type DirectDebitSectionProps = {
 }
 
 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