From 5ec36e591cbb76b1442f808365d3a757d2ed682d Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 29 Oct 2024 15:31:26 +0530
Subject: [PATCH 1/2] feat(web): email-updateable-at-info

---
 .../FormContactDetails/index.tsx              | 24 ++++++++++--
 .../Header/navbar/Menu/Settings/index.tsx     |  2 +-
 web/src/utils/atlas/fetchUser.ts              | 12 +++---
 web/src/utils/date.ts                         | 37 +++++++++++++++++++
 4 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
index 3f339fb78..032b6631d 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx
@@ -14,6 +14,9 @@ import { ISettings } from "../../../../index";
 
 import EmailVerificationInfo from "./EmailVerificationInfo";
 import FormContact from "./FormContact";
+import { isUndefined } from "src/utils";
+import InfoCard from "components/InfoCard";
+import { timeLeftUntil } from "utils/date";
 
 const FormContainer = styled.form`
   width: 100%;
@@ -33,7 +36,13 @@ const ButtonContainer = styled.div`
 const FormContactContainer = styled.div`
   display: flex;
   flex-direction: column;
+`;
+
+const StyledInfoCard = styled(InfoCard)`
+  width: fit-content;
+  font-size: 14px;
   margin-bottom: 8px;
+  word-wrap: break-word;
 `;
 
 const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
@@ -44,6 +53,10 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
 
   const isEditingEmail = user?.email !== emailInput;
 
+  const isEmailUpdateable = user?.email
+    ? !isUndefined(user?.emailUpdateableAt) && new Date(user.emailUpdateableAt).getTime() < new Date().getTime()
+    : true;
+
   useEffect(() => {
     if (!user || !userExists) return;
 
@@ -53,11 +66,12 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!address) {
-      throw new Error("Missing address");
+      return;
     }
 
     // if user exists then update email
     if (userExists) {
+      if (!isEmailUpdateable) return;
       const data = {
         newEmail: emailInput,
       };
@@ -108,11 +122,15 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
           isEditing={isEditingEmail}
         />
       </FormContactContainer>
-
+      {!isEmailUpdateable ? (
+        <StyledInfoCard msg={`You can update email again ${timeLeftUntil(user?.emailUpdateableAt!)}`} />
+      ) : null}
       <ButtonContainer>
         <Button
           text="Save"
-          disabled={!isEditingEmail || !emailIsValid || isAddingUser || isFetchingUser || isUpdatingUser}
+          disabled={
+            !isEditingEmail || !emailIsValid || isAddingUser || isFetchingUser || isUpdatingUser || !isEmailUpdateable
+          }
         />
       </ButtonContainer>
       <EmailVerificationInfo toggleIsSettingsOpen={toggleIsSettingsOpen} />
diff --git a/web/src/layout/Header/navbar/Menu/Settings/index.tsx b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
index aeb98797f..3e2588826 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/index.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/index.tsx
@@ -52,7 +52,7 @@ const StyledTabs = styled(Tabs)`
   padding: 0 ${responsiveSize(8, 32, 300)};
   width: 86vw;
   max-width: 660px;
-
+  align-self: center;
   ${landscapeStyle(
     () => css`
       width: ${responsiveSize(300, 424, 300)};
diff --git a/web/src/utils/atlas/fetchUser.ts b/web/src/utils/atlas/fetchUser.ts
index 19d679335..d1a941126 100644
--- a/web/src/utils/atlas/fetchUser.ts
+++ b/web/src/utils/atlas/fetchUser.ts
@@ -3,23 +3,21 @@ import { toast } from "react-toastify";
 
 import { OPTIONS } from "utils/wrapWithToast";
 
-type GetUserResponse = {
-  user: {
-    email: string;
-    isEmailVerified: string;
-  };
-};
-
 export type User = {
   email: string;
   isEmailVerified: string;
+  emailUpdateableAt: string | null;
 };
 
+type GetUserResponse = {
+  user: User;
+};
 const query = gql`
   query GetUser {
     user {
       email
       isEmailVerified
+      emailUpdateableAt
     }
   }
 `;
diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
index 7571fe8cc..1bd6485d4 100644
--- a/web/src/utils/date.ts
+++ b/web/src/utils/date.ts
@@ -35,3 +35,40 @@ export function formatDate(unixTimestamp: number, withTime = false): string {
     : { month: "long", day: "2-digit", year: "numeric" };
   return date.toLocaleDateString("en-US", options);
 }
+
+/**
+ * Calculates the time left until a specified date and formats it.
+ *
+ * @param {string} isoString - An ISO 8601 formatted date string (e.g., "2024-10-29T09:52:08.580Z").
+ * @returns {string} A human-readable string indicating the time left until the specified date.
+ * @example
+ * console.log(timeLeftUntil("2024-10-29T09:52:08.580Z"));
+ * // Outputs: "in x secs", "in x mins", "in x hrs", or "after October 29, 2024"
+ */
+export function timeLeftUntil(isoString: string): string {
+  const targetDate = new Date(isoString);
+  const now = new Date();
+  const timeDifference = targetDate.getTime() - now.getTime();
+
+  if (timeDifference <= 0) {
+    return "The date has already passed.";
+  }
+
+  const secondsLeft = Math.floor(timeDifference / 1000);
+  const minutesLeft = Math.floor(secondsLeft / 60);
+  const hoursLeft = Math.floor(minutesLeft / 60);
+  const daysLeft = Math.floor(hoursLeft / 24);
+
+  if (secondsLeft < 60) {
+    return `in ${secondsLeft} secs`;
+  } else if (minutesLeft < 60) {
+    return `in ${minutesLeft} mins`;
+  } else if (hoursLeft < 24) {
+    return `in ${hoursLeft} hrs`;
+  } else if (daysLeft < 2) {
+    return `in ${daysLeft} days`;
+  } else {
+    const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
+    return `after ${targetDate.toLocaleDateString("en-US", options)}`;
+  }
+}

From 074d7ca4c507a21aa33decd6db487de3ff100594 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 29 Oct 2024 15:38:40 +0530
Subject: [PATCH 2/2] refactor(web): update-time-left-until-function

---
 web/src/utils/date.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts
index 1bd6485d4..15a1c6c89 100644
--- a/web/src/utils/date.ts
+++ b/web/src/utils/date.ts
@@ -60,13 +60,13 @@ export function timeLeftUntil(isoString: string): string {
   const daysLeft = Math.floor(hoursLeft / 24);
 
   if (secondsLeft < 60) {
-    return `in ${secondsLeft} secs`;
+    return `in ${secondsLeft} sec${secondsLeft > 1 ? "s" : ""}`;
   } else if (minutesLeft < 60) {
-    return `in ${minutesLeft} mins`;
+    return `in ${minutesLeft} min${minutesLeft > 1 ? "s" : ""}`;
   } else if (hoursLeft < 24) {
-    return `in ${hoursLeft} hrs`;
+    return `in ${hoursLeft} hr${hoursLeft > 1 ? "s" : ""}`;
   } else if (daysLeft < 2) {
-    return `in ${daysLeft} days`;
+    return `in ${daysLeft} day${daysLeft > 1 ? "s" : ""}`;
   } else {
     const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
     return `after ${targetDate.toLocaleDateString("en-US", options)}`;