From 2a2b479f4797c0caa773e15b31ecf57dd980165c Mon Sep 17 00:00:00 2001
From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com>
Date: Wed, 30 Oct 2024 09:40:08 +0100
Subject: [PATCH 1/5] fix: add simple prompt on kyc modal making sure it
 doesn't close inadvertently

---
 src/components/Global/IframeWrapper/index.tsx | 49 +++++++++++++------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/Global/IframeWrapper/index.tsx b/src/components/Global/IframeWrapper/index.tsx
index 5a3734dab..fec68c57b 100644
--- a/src/components/Global/IframeWrapper/index.tsx
+++ b/src/components/Global/IframeWrapper/index.tsx
@@ -1,17 +1,20 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import Modal from '../Modal'
 
+type IframeWrapperProps = {
+    src: string
+    style?: React.CSSProperties
+    visible: boolean
+    onClose: () => void
+}
+
 const IframeWrapper = ({
     src,
     style,
     visible,
     onClose,
-}: {
-    src: string
-    style?: React.CSSProperties
-    visible: boolean
-    onClose: () => void
-}) => {
+}: IframeWrapperProps) => {
+    const [areYouSure, setAreYouSure] = useState(false)
     useEffect(() => {
         const handleMessage = (event: MessageEvent) => {
             const expectedOrigin = window.location.origin
@@ -28,10 +31,24 @@ const IframeWrapper = ({
         }
     }, [onClose])
 
+    const areYouSurePromptRow = (
+        <div className='flex flex-col text-center sm:text-left sm:flex-row justify-between sm:items-center gap-4 p-2 sm:p-0 w-full'>
+            <p className="text-sm">Are you sure ? your KYC progress will be lost.</p>
+            <div className="flex flex-row items-center gap-2">
+                <button className='btn-stroke w-full' onClick={() => {
+                    setAreYouSure(false)
+                }}>Cancel</button>
+                <button className='btn-purple w-full' onClick={onClose}>Close</button>
+            </div>
+        </div>
+    )
+
     return (
         <Modal
             visible={visible}
-            onClose={onClose}
+            onClose={() => {
+                setAreYouSure(true)
+            }}
             classWrap="w-full max-w-2xl border-none sm:border"
             classOverlay="bg-black bg-opacity-50"
             video={false}
@@ -42,11 +59,13 @@ const IframeWrapper = ({
             className="z-[1000001]"
             classButtonClose="hidden"
         >
-            <div className="flex flex-col gap-2 p-0 sm:p-5">
+            <div className="flex flex-col gap-2 p-0 sm:p-2">
                 <div className="w-full sm:hidden">
-                    <button className="btn-purple w-full rounded-none" onClick={onClose}>
+                    {areYouSure ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
+                        setAreYouSure(true)
+                    }}>
                         CLOSE
-                    </button>
+                    </button>}
                 </div>
                 <div className="h-[550px] overflow-hidden rounded-sm sm:h-[500px] sm:border sm:border-black">
                     <iframe
@@ -57,10 +76,12 @@ const IframeWrapper = ({
                         sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-top-navigation-by-user-activation"
                     />
                 </div>
-                <div className="hidden w-full sm:flex">
-                    <button className="btn-purple w-full" onClick={onClose}>
+                <div className="hidden sm:flex flex-row w-full items-center">
+                    {areYouSure ? areYouSurePromptRow : <button className="btn-purple w-full" onClick={() => {
+                        setAreYouSure(true)
+                    }}>
                         Close
-                    </button>
+                    </button>}
                 </div>
             </div>
         </Modal>

From 1674a18e7be8e40338531ef5827675d8685cd6ef Mon Sep 17 00:00:00 2001
From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:44:32 +0100
Subject: [PATCH 2/5] fix: increase iframe size

---
 src/components/Global/IframeWrapper/index.tsx | 17 +++++++++--------
 src/components/Global/KYCComponent/index.tsx  |  1 -
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Global/IframeWrapper/index.tsx b/src/components/Global/IframeWrapper/index.tsx
index fec68c57b..789c74430 100644
--- a/src/components/Global/IframeWrapper/index.tsx
+++ b/src/components/Global/IframeWrapper/index.tsx
@@ -3,14 +3,12 @@ import Modal from '../Modal'
 
 type IframeWrapperProps = {
     src: string
-    style?: React.CSSProperties
     visible: boolean
     onClose: () => void
 }
 
 const IframeWrapper = ({
     src,
-    style,
     visible,
     onClose,
 }: IframeWrapperProps) => {
@@ -33,12 +31,15 @@ const IframeWrapper = ({
 
     const areYouSurePromptRow = (
         <div className='flex flex-col text-center sm:text-left sm:flex-row justify-between sm:items-center gap-4 p-2 sm:p-0 w-full'>
-            <p className="text-sm">Are you sure ? your KYC progress will be lost.</p>
+            <p className="text-sm ml-1">Are you sure ? your KYC progress will be lost.</p>
             <div className="flex flex-row items-center gap-2">
                 <button className='btn-stroke w-full' onClick={() => {
                     setAreYouSure(false)
                 }}>Cancel</button>
-                <button className='btn-purple w-full' onClick={onClose}>Close</button>
+                <button className='btn-purple w-full' onClick={() => {
+                    onClose()
+                    setAreYouSure(false)
+                }}>Close</button>
             </div>
         </div>
     )
@@ -49,7 +50,7 @@ const IframeWrapper = ({
             onClose={() => {
                 setAreYouSure(true)
             }}
-            classWrap="w-full max-w-2xl border-none sm:border"
+            classWrap="h-full w-full sm:min-w-[600px] border-none"
             classOverlay="bg-black bg-opacity-50"
             video={false}
             /**
@@ -59,7 +60,7 @@ const IframeWrapper = ({
             className="z-[1000001]"
             classButtonClose="hidden"
         >
-            <div className="flex flex-col gap-2 p-0 sm:p-2">
+            <div className="flex flex-col h-full gap-2 p-0 sm:p-2">
                 <div className="w-full sm:hidden">
                     {areYouSure ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
                         setAreYouSure(true)
@@ -67,11 +68,11 @@ const IframeWrapper = ({
                         CLOSE
                     </button>}
                 </div>
-                <div className="h-[550px] overflow-hidden rounded-sm sm:h-[500px] sm:border sm:border-black">
+                <div className="overflow-hidden h-full">
                     <iframe
                         src={src}
                         allow="camera;"
-                        style={{ ...style, width: '100%', height: '100%', border: 'none' }}
+                        style={{ width: '100%', height: '100%', border: 'none' }}
                         className="rounded-md"
                         sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-top-navigation-by-user-activation"
                     />
diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx
index 1e60955d1..d6396c128 100644
--- a/src/components/Global/KYCComponent/index.tsx
+++ b/src/components/Global/KYCComponent/index.tsx
@@ -405,7 +405,6 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                     src={iframeOptions.src}
                     visible={iframeOptions.visible}
                     onClose={iframeOptions.onClose}
-                    style={{ width: '100%', height: '500px', border: 'none' }}
                 />
             </div>
         </div>

From e3485dc30cf33ae4d477f243fee4d2b5485c713e Mon Sep 17 00:00:00 2001
From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:49:47 +0100
Subject: [PATCH 3/5] fix: naming & confirm message prop for IFrameWrapper

---
 src/components/Global/IframeWrapper/index.tsx | 24 ++++++++++---------
 src/components/Global/KYCComponent/index.tsx  | 17 +++++--------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/Global/IframeWrapper/index.tsx b/src/components/Global/IframeWrapper/index.tsx
index 789c74430..09ba93e0e 100644
--- a/src/components/Global/IframeWrapper/index.tsx
+++ b/src/components/Global/IframeWrapper/index.tsx
@@ -1,18 +1,20 @@
 import { useEffect, useState } from 'react'
 import Modal from '../Modal'
 
-type IframeWrapperProps = {
+export type IFrameWrapperProps = {
     src: string
     visible: boolean
     onClose: () => void
+    closeConfirmMessage?: string
 }
 
 const IframeWrapper = ({
     src,
     visible,
     onClose,
-}: IframeWrapperProps) => {
-    const [areYouSure, setAreYouSure] = useState(false)
+    closeConfirmMessage
+}: IFrameWrapperProps) => {
+    const [showCloseConfirmMessage, setShowCloseConfirmMessage] = useState(false)
     useEffect(() => {
         const handleMessage = (event: MessageEvent) => {
             const expectedOrigin = window.location.origin
@@ -31,14 +33,14 @@ const IframeWrapper = ({
 
     const areYouSurePromptRow = (
         <div className='flex flex-col text-center sm:text-left sm:flex-row justify-between sm:items-center gap-4 p-2 sm:p-0 w-full'>
-            <p className="text-sm ml-1">Are you sure ? your KYC progress will be lost.</p>
+            <p className="text-sm ml-1">{closeConfirmMessage}</p>
             <div className="flex flex-row items-center gap-2">
                 <button className='btn-stroke w-full' onClick={() => {
-                    setAreYouSure(false)
+                    setShowCloseConfirmMessage(false)
                 }}>Cancel</button>
                 <button className='btn-purple w-full' onClick={() => {
                     onClose()
-                    setAreYouSure(false)
+                    setShowCloseConfirmMessage(false)
                 }}>Close</button>
             </div>
         </div>
@@ -48,7 +50,7 @@ const IframeWrapper = ({
         <Modal
             visible={visible}
             onClose={() => {
-                setAreYouSure(true)
+                setShowCloseConfirmMessage(true)
             }}
             classWrap="h-full w-full sm:min-w-[600px] border-none"
             classOverlay="bg-black bg-opacity-50"
@@ -62,8 +64,8 @@ const IframeWrapper = ({
         >
             <div className="flex flex-col h-full gap-2 p-0 sm:p-2">
                 <div className="w-full sm:hidden">
-                    {areYouSure ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
-                        setAreYouSure(true)
+                    {showCloseConfirmMessage ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
+                        setShowCloseConfirmMessage(true)
                     }}>
                         CLOSE
                     </button>}
@@ -78,8 +80,8 @@ const IframeWrapper = ({
                     />
                 </div>
                 <div className="hidden sm:flex flex-row w-full items-center">
-                    {areYouSure ? areYouSurePromptRow : <button className="btn-purple w-full" onClick={() => {
-                        setAreYouSure(true)
+                    {showCloseConfirmMessage ? areYouSurePromptRow : <button className="btn-purple w-full" onClick={() => {
+                        setShowCloseConfirmMessage(true)
                     }}>
                         Close
                     </button>}
diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx
index d6396c128..d6c595aed 100644
--- a/src/components/Global/KYCComponent/index.tsx
+++ b/src/components/Global/KYCComponent/index.tsx
@@ -6,7 +6,7 @@ import { Step, Steps, useSteps } from 'chakra-ui-steps'
 import * as utils from '@/utils'
 import * as interfaces from '@/interfaces'
 import * as consts from '@/constants'
-import IframeWrapper from '../IframeWrapper'
+import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper'
 import { useForm } from 'react-hook-form'
 import { useAuth } from '@/context/authContext'
 import Loading from '../Loading'
@@ -33,16 +33,13 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
         showError: boolean
         errorMessage: string
     }>({ showError: false, errorMessage: '' })
-    const [iframeOptions, setIframeOptions] = useState<{
-        src: string
-        visible: boolean
-        onClose: () => void
-    }>({
+    const [iframeOptions, setIframeOptions] = useState<IFrameWrapperProps>({
         src: '',
         visible: false,
         onClose: () => {
             setIframeOptions({ ...iframeOptions, visible: false })
         },
+        closeConfirmMessage: 'Are you sure ?',
     })
     const [customerObject, setCustomerObject] = useState<interfaces.KYCData | null>(null)
     const [tosLinkOpened, setTosLinkOpened] = useState<boolean>(false)
@@ -141,7 +138,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                 setLoadingState('Awaiting TOS confirmation')
 
                 console.log('Awaiting TOS confirmation...')
-                setIframeOptions({ ...iframeOptions, src: tos_link, visible: true })
+                setIframeOptions({ ...iframeOptions, src: tos_link, visible: true, closeConfirmMessage: 'Are you sure ? your TOS progress will be lost.' })
                 await utils.awaitStatusCompletion(
                     id,
                     'tos',
@@ -195,7 +192,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                 setLoadingState('Awaiting KYC confirmation')
                 console.log('Awaiting KYC confirmation...')
                 const kyclink = utils.convertPersonaUrl(kyc_link)
-                setIframeOptions({ ...iframeOptions, src: kyclink, visible: true })
+                setIframeOptions({ ...iframeOptions, src: kyclink, visible: true, closeConfirmMessage: 'Are you sure ? your KYC progress will be lost.' })
                 await utils.awaitStatusCompletion(
                     id,
                     'kyc',
@@ -402,9 +399,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                     )}
                 </div>
                 <IframeWrapper
-                    src={iframeOptions.src}
-                    visible={iframeOptions.visible}
-                    onClose={iframeOptions.onClose}
+                    {...iframeOptions}
                 />
             </div>
         </div>

From e90adcf725f8f09709f3a32b09009b2b5aad42e1 Mon Sep 17 00:00:00 2001
From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com>
Date: Wed, 30 Oct 2024 14:51:11 +0100
Subject: [PATCH 4/5] fix: IframeWrapper modal height 75%

---
 src/components/Global/IframeWrapper/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Global/IframeWrapper/index.tsx b/src/components/Global/IframeWrapper/index.tsx
index 09ba93e0e..a28aa84f7 100644
--- a/src/components/Global/IframeWrapper/index.tsx
+++ b/src/components/Global/IframeWrapper/index.tsx
@@ -52,7 +52,7 @@ const IframeWrapper = ({
             onClose={() => {
                 setShowCloseConfirmMessage(true)
             }}
-            classWrap="h-full w-full sm:min-w-[600px] border-none"
+            classWrap="h-[75%] sm:h-full w-full sm:min-w-[600px] border-none"
             classOverlay="bg-black bg-opacity-50"
             video={false}
             /**

From ee82201eff3bf7c5f33b2f8855387d5fdbe2330f Mon Sep 17 00:00:00 2001
From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com>
Date: Thu, 31 Oct 2024 08:31:52 +0100
Subject: [PATCH 5/5] fix: disable close prompt is message isn't being give

---
 src/components/Global/IframeWrapper/index.tsx | 26 ++++++++++++++-----
 src/components/Global/KYCComponent/index.tsx  |  3 +--
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Global/IframeWrapper/index.tsx b/src/components/Global/IframeWrapper/index.tsx
index a28aa84f7..f6e24dfea 100644
--- a/src/components/Global/IframeWrapper/index.tsx
+++ b/src/components/Global/IframeWrapper/index.tsx
@@ -14,6 +14,7 @@ const IframeWrapper = ({
     onClose,
     closeConfirmMessage
 }: IFrameWrapperProps) => {
+    const enableConfirmationPrompt = closeConfirmMessage !== undefined
     const [showCloseConfirmMessage, setShowCloseConfirmMessage] = useState(false)
     useEffect(() => {
         const handleMessage = (event: MessageEvent) => {
@@ -31,7 +32,7 @@ const IframeWrapper = ({
         }
     }, [onClose])
 
-    const areYouSurePromptRow = (
+    const areYouSurePromptRow = showCloseConfirmMessage ? (
         <div className='flex flex-col text-center sm:text-left sm:flex-row justify-between sm:items-center gap-4 p-2 sm:p-0 w-full'>
             <p className="text-sm ml-1">{closeConfirmMessage}</p>
             <div className="flex flex-row items-center gap-2">
@@ -44,12 +45,23 @@ const IframeWrapper = ({
                 }}>Close</button>
             </div>
         </div>
-    )
+    ) : <button className="btn-purple w-full rounded-none" onClick={() => {
+        setShowCloseConfirmMessage(true)
+    }}>
+        CLOSE
+    </button>
 
     return (
         <Modal
             visible={visible}
             onClose={() => {
+                /**
+                 * If the confirmation prompt is disabled, close the modal directly
+                 */
+                if (!enableConfirmationPrompt) {
+                    onClose()
+                    return
+                }
                 setShowCloseConfirmMessage(true)
             }}
             classWrap="h-[75%] sm:h-full w-full sm:min-w-[600px] border-none"
@@ -64,8 +76,8 @@ const IframeWrapper = ({
         >
             <div className="flex flex-col h-full gap-2 p-0 sm:p-2">
                 <div className="w-full sm:hidden">
-                    {showCloseConfirmMessage ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
-                        setShowCloseConfirmMessage(true)
+                    {enableConfirmationPrompt ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
+                        onClose()
                     }}>
                         CLOSE
                     </button>}
@@ -80,10 +92,10 @@ const IframeWrapper = ({
                     />
                 </div>
                 <div className="hidden sm:flex flex-row w-full items-center">
-                    {showCloseConfirmMessage ? areYouSurePromptRow : <button className="btn-purple w-full" onClick={() => {
-                        setShowCloseConfirmMessage(true)
+                    {enableConfirmationPrompt ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
+                        onClose()
                     }}>
-                        Close
+                        CLOSE
                     </button>}
                 </div>
             </div>
diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx
index d6c595aed..a81213d00 100644
--- a/src/components/Global/KYCComponent/index.tsx
+++ b/src/components/Global/KYCComponent/index.tsx
@@ -39,7 +39,6 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
         onClose: () => {
             setIframeOptions({ ...iframeOptions, visible: false })
         },
-        closeConfirmMessage: 'Are you sure ?',
     })
     const [customerObject, setCustomerObject] = useState<interfaces.KYCData | null>(null)
     const [tosLinkOpened, setTosLinkOpened] = useState<boolean>(false)
@@ -138,7 +137,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
                 setLoadingState('Awaiting TOS confirmation')
 
                 console.log('Awaiting TOS confirmation...')
-                setIframeOptions({ ...iframeOptions, src: tos_link, visible: true, closeConfirmMessage: 'Are you sure ? your TOS progress will be lost.' })
+                setIframeOptions({ ...iframeOptions, src: tos_link, visible: true })
                 await utils.awaitStatusCompletion(
                     id,
                     'tos',