add: extension invite code modal remaining time to close

AmbireTech · Aug 8, 2024 · e663287 · e663287
1 parent 8bf259a
commit e663287
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 19 deletions.
diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js
@@ -11,11 +11,12 @@ import { ReactComponent as ChromeWebStore } from 'resources/chrome-web-store.svg
 import { useToasts } from 'hooks/toasts'
 import styles from './ExtensionInviteCodeModal.module.scss'
 
-const CAN_CLOSE_AFTER_MS = 5000
+const CAN_CLOSE_AFTER_MS = 5400
 
 const ExtensionInviteCodeModal = ({ inviteCode, waitForClose = true }) => {
   const { onHideModal } = useModals()
   const { addToast } = useToasts()
+  const [remainingTime, setRemainingTime] = useState(CAN_CLOSE_AFTER_MS)
   const [canClose, setCanClose] = useState(!waitForClose)
 
   const handleCloseModal = useCallback(() => {
@@ -26,14 +27,19 @@ const ExtensionInviteCodeModal = ({ inviteCode, waitForClose = true }) => {
   useEffect(() => {
     const startingTime = Date.now()
 
-    const timeout = setTimeout(() => {
-      if (Date.now() - startingTime < CAN_CLOSE_AFTER_MS) return
+    const interval = setInterval(() => {
+      const elapsedTime = Date.now() - startingTime
+      const newRemainingTime = CAN_CLOSE_AFTER_MS - elapsedTime
+      setRemainingTime(newRemainingTime)
 
-      setCanClose(true)
-    }, CAN_CLOSE_AFTER_MS)
+      if (newRemainingTime <= 0) {
+        setCanClose(true)
+        clearInterval(interval)
+      }
+    }, 500)
 
     return () => {
-      clearTimeout(timeout)
+      clearInterval(interval)
     }
   }, [])
 
@@ -52,12 +58,19 @@ const ExtensionInviteCodeModal = ({ inviteCode, waitForClose = true }) => {
         <div className={styles.headerPrimaryGradient} />
         <div className={styles.headerSecondaryGradient} />
         <AmbireLogo className={styles.headerLogo} width={92} height={96} />
-        <CloseIcon
-          className={cn(styles.closeIcon, {
+        <div
+          className={cn(styles.closeWrapper, {
             [styles.closeIconEnabled]: canClose
           })}
-          onClick={handleCloseModal}
-        />
+        >
+          {!canClose ? (
+            <span className={styles.remainingTime}>
+              {remainingTime > 500 ? Math.round(remainingTime / 1000) : 1}
+            </span>
+          ) : (
+            <CloseIcon className={styles.closeIcon} onClick={handleCloseModal} />
+          )}
+        </div>
       </div>
       <div className={styles.content}>
         <div className={styles.textWrapper}>

diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
@@ -54,20 +54,35 @@ $min-modal-height: 34.375rem;
     filter: blur(6.25rem);
   }
 
-  .closeIcon {
+  .closeWrapper {
     position: absolute;
     right: 1rem;
     top: 1rem;
     z-index: 4;
-    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
 
-    :global(#background) {
-      display: none;
+    .remainingTime {
+      color: #fff;
+      font-size: 0.875rem;
+      opacity: 0.6;
+    }
+    .closeIcon {
+      cursor: pointer;
+
+      :global(#background) {
+        display: none;
+      }
     }
 
     &:not(.closeIconEnabled) {
-      opacity: 0.4;
-      cursor: not-allowed;
+      .closeIcon {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -238,9 +253,9 @@ $min-modal-height: 34.375rem;
       width: 4rem;
       height: auto;
     }
-    .closeIcon {
-      top: 0.5rem;
-      right: 0.5rem;
+    .closeWrapper {
+      top: 0.25rem;
+      right: 0.25rem;
     }
   }
 }