From e3d9561eb4e1c21b1cc2573f3106e347be7fdf7a Mon Sep 17 00:00:00 2001
From: JP <jp@k-f.co>
Date: Tue, 30 May 2023 14:57:54 -0500
Subject: [PATCH] fix: improve shuftipro iframe (#1429)

* fix: improve shuftipro iframe

* simplify step logic
---
 .../ManualBusinessVerification.tsx            | 30 ++++-----
 .../Onboarding/KnowYourBusiness/index.tsx     | 32 ++++++----
 .../KnowYourCustomer/IdentityVerification.tsx | 30 ++++-----
 .../Onboarding/KnowYourCustomer/index.tsx     | 62 ++++++++++---------
 4 files changed, 79 insertions(+), 75 deletions(-)

diff --git a/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/ManualBusinessVerification.tsx b/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/ManualBusinessVerification.tsx
index 26370e458a..e10540ae64 100644
--- a/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/ManualBusinessVerification.tsx
+++ b/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/ManualBusinessVerification.tsx
@@ -1,25 +1,21 @@
-import { Box } from '@centrifuge/fabric'
-
 type Props = {
   verificationURL: string
 }
 
 export const ManualBusinessVerification = ({ verificationURL }: Props) => {
   return (
-    <Box height="100%">
-      <iframe
-        dataset-removable="true"
-        name="shuftipro-iframe"
-        id="shuftipro-iframe"
-        src={verificationURL}
-        title="shufti-pro-identity-verification"
-        allow="camera"
-        width="100%"
-        height="100%"
-        style={{
-          border: 'none',
-        }}
-      />
-    </Box>
+    <iframe
+      dataset-removable="true"
+      name="shuftipro-iframe"
+      id="shuftipro-iframe"
+      src={verificationURL}
+      title="shufti-pro-identity-verification"
+      allow="camera"
+      width="100%"
+      height="100%"
+      style={{
+        border: 'none',
+      }}
+    />
   )
 }
diff --git a/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/index.tsx b/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/index.tsx
index 72c94c64f8..4c623c83f6 100644
--- a/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/index.tsx
+++ b/centrifuge-app/src/pages/Onboarding/KnowYourBusiness/index.tsx
@@ -1,3 +1,4 @@
+import { Box, Dialog } from '@centrifuge/fabric'
 import { useFormik } from 'formik'
 import * as React from 'react'
 import { object, string } from 'yup'
@@ -21,9 +22,7 @@ export const validationSchema = object({
 })
 
 export function KnowYourBusiness() {
-  const [activeKnowYourBusinessStep, setActiveKnowYourBusinessStep] = React.useState<number>(0)
-
-  const nextKnowYourBusinessStep = () => setActiveKnowYourBusinessStep((current) => current + 1)
+  const [isKnowYourBusinessDialogOpen, setIsKnowYourBusinessDialogOpen] = React.useState(false)
 
   const { onboardingUser, nextStep } = useOnboarding<EntityUser>()
 
@@ -75,17 +74,24 @@ export function KnowYourBusiness() {
 
   React.useEffect(() => {
     if (verifyBusinessData?.verification_url) {
-      nextKnowYourBusinessStep()
+      setIsKnowYourBusinessDialogOpen(true)
     }
   }, [verifyBusinessData])
 
-  if (activeKnowYourBusinessStep === 0) {
-    return <BusinessInformation formik={formik} isLoading={isVerifyBusinessLoading} isError={isError} />
-  }
-
-  if (activeKnowYourBusinessStep === 1) {
-    return <ManualBusinessVerification verificationURL={verifyBusinessData?.verification_url} />
-  }
-
-  return null
+  return (
+    <>
+      <BusinessInformation formik={formik} isLoading={isVerifyBusinessLoading} isError={isError} />
+      {verifyBusinessData?.verification_url && (
+        <Dialog
+          isOpen={isKnowYourBusinessDialogOpen}
+          onClose={() => setIsKnowYourBusinessDialogOpen(false)}
+          width="850px"
+        >
+          <Box height="500px">
+            <ManualBusinessVerification verificationURL={verifyBusinessData.verification_url} />
+          </Box>
+        </Dialog>
+      )}
+    </>
+  )
 }
diff --git a/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/IdentityVerification.tsx b/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/IdentityVerification.tsx
index 66a73de9b2..90b5fe8040 100644
--- a/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/IdentityVerification.tsx
+++ b/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/IdentityVerification.tsx
@@ -1,23 +1,19 @@
-import { Box } from '@centrifuge/fabric'
-
 type Props = {
   verificationURL: string
 }
 
 export const IdentityVerification = ({ verificationURL }: Props) => (
-  <Box height="100%">
-    <iframe
-      dataset-removable="true"
-      name="shuftipro-iframe"
-      id="shuftipro-iframe"
-      src={verificationURL}
-      title="shufti-pro-identity-verification"
-      allow="camera"
-      width="100%"
-      height="100%"
-      style={{
-        border: 'none',
-      }}
-    />
-  </Box>
+  <iframe
+    dataset-removable="true"
+    name="shuftipro-iframe"
+    id="shuftipro-iframe"
+    src={verificationURL}
+    title="shufti-pro-identity-verification"
+    allow="camera"
+    width="100%"
+    height="100%"
+    style={{
+      border: 'none',
+    }}
+  />
 )
diff --git a/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/index.tsx b/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/index.tsx
index d7515c1e63..e73c54a4ea 100644
--- a/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/index.tsx
+++ b/centrifuge-app/src/pages/Onboarding/KnowYourCustomer/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Stack } from '@centrifuge/fabric'
+import { Box, Button, Dialog, Flex, Stack } from '@centrifuge/fabric'
 import { useFormik } from 'formik'
 import * as React from 'react'
 import { boolean, date, object, string } from 'yup'
@@ -24,7 +24,8 @@ const getValidationSchema = (investorType: 'individual' | 'entity') =>
   })
 
 export const KnowYourCustomer = () => {
-  const [activeKnowYourCustomerStep, setActiveKnowYourCustomerStep] = React.useState<number>(0)
+  const [isKnowYourCustomerDialogOpen, setIsKnowYourCustomerDialogOpen] = React.useState(false)
+
   const [verificationDeclined, setVerificationDeclined] = React.useState(false)
 
   const { onboardingUser } = useOnboarding()
@@ -76,34 +77,39 @@ export const KnowYourCustomer = () => {
 
   React.useEffect(() => {
     if (startKYCData?.verification_url) {
-      setActiveKnowYourCustomerStep(1)
+      setIsKnowYourCustomerDialogOpen(true)
     }
   }, [startKYCData])
 
-  if (activeKnowYourCustomerStep === 0) {
-    return <SignerVerification formik={formik} isLoading={isStartKYCLoading} isCompleted={isCompleted} />
-  }
-
-  if (activeKnowYourCustomerStep === 1) {
-    return (
-      <>
-        <IdentityVerification verificationURL={startKYCData.verification_url} />
-        {verificationDeclined && (
-          <Stack>
-            <Button
-              variant="primary"
-              onClick={() => {
-                setVerificationDeclined(false)
-                setActiveKnowYourCustomerStep(0)
-              }}
-            >
-              Restart verification
-            </Button>
+  return (
+    <>
+      <SignerVerification formik={formik} isLoading={isStartKYCLoading} isCompleted={isCompleted} />
+      {startKYCData?.verification_url && (
+        <Dialog
+          isOpen={isKnowYourCustomerDialogOpen}
+          onClose={() => setIsKnowYourCustomerDialogOpen(false)}
+          width="850px"
+        >
+          <Stack justifyContent="space-between">
+            <Box height="500px">
+              <IdentityVerification verificationURL={startKYCData.verification_url} />
+            </Box>
+            {verificationDeclined && (
+              <Flex justifyContent="flex-end">
+                <Button
+                  variant="primary"
+                  onClick={() => {
+                    setVerificationDeclined(false)
+                    setIsKnowYourCustomerDialogOpen(false)
+                  }}
+                >
+                  Restart verification
+                </Button>
+              </Flex>
+            )}
           </Stack>
-        )}
-      </>
-    )
-  }
-
-  return null
+        </Dialog>
+      )}
+    </>
+  )
 }