feat(container): fixed agreements and kyc india modals workflows

ref: MANAGER-14722 Signed-off-by: Jacques Larique <[email protected]>
ovh · Nov 27, 2024 · 18c993f · 18c993f
1 parent b08f3d3
commit 18c993f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 26 deletions.
diff --git a/...r/apps/container/src/components/AgreementsUpdateModal/AgreementsUpdateModal.component.tsx b/...r/apps/container/src/components/AgreementsUpdateModal/AgreementsUpdateModal.component.tsx
@@ -11,6 +11,7 @@ import useAccountUrn from '@/hooks/accountUrn/useAccountUrn';
 import { ModalTypes } from '@/context/modals/modals.context';
 import { useModals } from '@/context/modals';
 import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
+import { requiredStatusKey } from '@/identity-documents-modal/constants';
 
 export default function AgreementsUpdateModal () {
   const { shell } = useContext(ApplicationContext);
@@ -36,22 +37,27 @@ export default function AgreementsUpdateModal () {
   };
 
   useEffect(() => {
+    const shouldManageModal = region !== 'US' && current === ModalTypes.agreements && window.location.href !== myContractsLink;
     // We consider we have loaded all information if conditions are not respected to try to display the modal
-    const hasFullyLoaded = !shouldTryToDisplay
+    const hasFullyLoaded = !shouldManageModal
       // Or authorization are loaded but user does have right to accept contract or has no contract to accept
       || !isAuthorizationLoading && (!canUserAcceptAgreements || !areAgreementsLoading);
-    // If current modal to be displayed is the agreements one and everything has loaded we can handle the display
-    if (shouldTryToDisplay && hasFullyLoaded) {
-      // If no contract are to be accepted we go to the next modal (if it exists)
-      if (!agreements?.length) {
-        shell.getPlugin('ux').notifyModalActionDone();
-      }
-      // Otherwise we display the modal
-      else {
-        setShowModal(true);
+    // We handle the modal display only when the Agreements modal is the current one, contract management is available
+    // (region is not US) and we are not on the page where the user can do the related action (accepts his contract)
+    if (shouldManageModal) {
+      // We will wait for all data to be retrieved before handling the modal lifecycle
+      if (hasFullyLoaded) {
+        // If no contract are to be accepted we go to the next modal (if it exists)
+        if (!agreements?.length) {
+          shell.getPlugin('ux').notifyModalActionDone();
+        }
+        // Otherwise we display the modal
+        else {
+          setShowModal(true);
+        }
       }
     }
-  }, [shouldTryToDisplay, canUserAcceptAgreements, agreements, current]);
+  }, [canUserAcceptAgreements, isAuthorizationLoading, canUserAcceptAgreements, areAgreementsLoading, agreements, current]);
 
   return showModal ? (
     <>

diff --git a/packages/manager/apps/container/src/identity-documents-modal/IdentityDocumentsModal.tsx b/packages/manager/apps/container/src/identity-documents-modal/IdentityDocumentsModal.tsx
@@ -68,23 +68,31 @@ export const IdentityDocumentsModal: FunctionComponent = () => {
   };
 
   useEffect(() => {
-    const shouldTryToDisplay = isKycAvailable && current === ModalTypes.kyc && window.location.href !== kycURL;
-    // We consider we have loaded all information if conditions are not respected to try to display the modal
-    const hasFullyLoaded = !shouldTryToDisplay
-      // Or procedure status is loaded
-      || !isProcedureStatusLoading;
-    // If current modal to be displayed is the kyc one and everything has loaded we can handle the display
-    if (shouldTryToDisplay && hasFullyLoaded) {
-      // If procedure's status is required we display the modal
-      if (statusDataResponse?.data?.status === requiredStatusKey) {
-        setShowModal(true);
-      }
-      // Otherwise we go to the next modal (if it exists)
-      else {
-        shell.getPlugin('ux').notifyModalActionDone();
+    const shouldManageModal = current === ModalTypes.kyc && window.location.href !== kycURL;
+    // We handle the modal display only when the KYC modal is the current one, and we are not on the page
+    // where the user can do the related action (upload his documents)
+    if (shouldManageModal) {
+      // We will wait for feature availability response before handling the modal lifecycle
+      if (!isFeatureAvailabilityLoading && availability) {
+        // If the KYC feature is not available we can safely switch to the next modal
+        if (!isKycAvailable) {
+          shell.getPlugin('ux').notifyModalActionDone();
+        }
+        // Otherwise we will wait for the KYC procedure status to decide either we display th modal or switch to the
+        // next one
+        else if (!isProcedureStatusLoading && statusDataResponse) {
+          // If the procedure's status is 'required' we display the modal
+          if (statusDataResponse?.data?.status === requiredStatusKey) {
+            setShowModal(true);
+          }
+          // Otherwise we go to the next modal (if it exists)
+          else if (shouldManageModal) {
+            shell.getPlugin('ux').notifyModalActionDone();
+          }
+        }
       }
     }
-  }, [isKycAvailable, current, isProcedureStatusLoading, statusDataResponse]);
+  }, [current, isFeatureAvailabilityLoading, availability, isKycAvailable, isProcedureStatusLoading, statusDataResponse]);
 
   useEffect(() => {
     if (showModal) {