Merge pull request lfglabs-dev#1131 from wheval/domain-expiration

Marchand-Nicolas · web-flow · commit 8b1e0c109592 · 2025-03-18T16:59:55.000+01:00
fix domain expiration modal
diff --git a/components/UI/domainExpiredModal.tsx b/components/UI/domainExpiredModal.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+} from "@mui/material";
+import CloseIcon from "@/components/UI/iconsComponents/icons/closeIcon";
+
+interface DomainExpiredModalProps {
+  open: boolean;
+  onClose: () => void;
+  onRenew: () => void;
+}
+
+const DomainExpiredModal: React.FC<DomainExpiredModalProps> = ({
+  open,
+  onClose,
+  onRenew,
+}) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      fullWidth
+      PaperProps={{
+        style: {
+          borderRadius: "16px",
+          padding: "24px 48px",
+          maxWidth: "690px",
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          fontFamily: "QuickZap",
+          color: "#454545",
+          textAlign: "center",
+          fontSize: "24px",
+          fontWeight: "400",
+          position: "relative",
+          paddingBottom: "4px",
+        }}
+      >
+        Domain Expiration Notice
+      </DialogTitle>
+      <DialogContent>
+          <div className="px-2">
+              <p className="text-center font-normal text-[14px] leading-[24px] text-[#8C8989]">
+                Your domain has expired. Would you like to renew it now to keep your website active?
+              </p>
+          </div>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: "center", gap: 2, pb: 4 }}>
+        <Button
+            sx={{
+                fontFamily: "QuickZap",
+                textAlign: "center",
+                fontWeight: "400",
+                fontSize: "14px",
+                border: "2px solid #19AA6E",
+                borderRadius: "8px",
+                padding: "10px 16px",
+                backgroundColor: "#0C8654 !important",
+                color: "white",
+                }}
+          onClick={onRenew}
+          className=""
+        >
+          Renew Domain
+        </Button>
+      </DialogActions>
+      <div className="absolute cursor-pointer right-6 top-6" onClick={onClose}>
+          <CloseIcon />
+        </div>
+    </Dialog>
+  );
+};
+
+export default DomainExpiredModal; 
diff --git a/components/identities/availableIdentities.tsx b/components/identities/availableIdentities.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styles from "../../styles/components/identitiesV1.module.css";
 import { useRouter } from "next/router";
 import IdentityCard from "../../components/identities/identityCard";
@@ -18,8 +18,11 @@ import IdentityActionsSkeleton from "@/components/identities/skeletons/identityA
 import { hexToDecimal } from "@/utils/feltService";
 import WalletConnect from "@/components/UI/walletConnect";
 import { Connector } from "starknetkit";
-import { FaPlus } from "react-icons/fa";
+import { FaCircle, FaPlus } from "react-icons/fa";
 import IdentitiesSkeleton from "./skeletons/identitiesSkeleton";
+import { Tooltip } from "@mui/material";
+import { isIdentityExpired } from "../../utils/dateService";
+import DomainExpiredModal from "@/components/UI/domainExpiredModal";
 
 const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
   const router = useRouter();
@@ -43,6 +46,9 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
   const randomTokenId: number = Math.floor(Math.random() * 1000000000000);
   const [showWalletConnectModal, setShowWalletConnectModal] =
     useState<boolean>(false);
+  const [domainExpiredModalOpen, setDomainExpiredModalOpen] = useState(false);
+  const [selectedExpiredDomain, setSelectedExpiredDomain] = useState<FullId | null>(null);
+  const hasOpenedModal = useRef(false);
 
   const callData = useMemo(() => {
     return {
@@ -159,6 +165,26 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
     }
   }, [address, router.asPath]);
 
+  const isCurrentIdentityExpired = useMemo(() => {
+    if (!identity || !isIdentityADomain) return false;
+    return identity?.domainExpiry
+      ? new Date(identity.domainExpiry * 1000) < new Date()
+      : false;
+  }, [identity, isIdentityADomain]);
+
+  useEffect(() => {
+  if (isCurrentIdentityExpired && isOwner && !domainExpiredModalOpen && identity && !hasOpenedModal.current) {
+    setSelectedExpiredDomain({
+      id: tokenId,
+      domain: identity.domain,
+      domain_expiry: identity.domainExpiry
+    } as FullId);
+    setDomainExpiredModalOpen(true);
+    hasOpenedModal.current = true;
+  }
+}, [isCurrentIdentityExpired, isOwner, domainExpiredModalOpen, identity, tokenId, selectedExpiredDomain]);
+  
+
   const connectWallet = async (connector: Connector) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -178,26 +204,50 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
           <div
             className={`${styles.IDScreen} px-[16px] lg:px-0 overflow-x-hidden flex flex-col xl:flex-row justify-center items-center gap-[24px] `}
           >
-            <div className=" w-[100%] sm:w-[358px] xl:w-[220px]">
-              {ownedIdentities.length !== 1 && (
+              {/*          LEFT SIDE NAV            */}
+            <div className=" w-[100%] sm:w-[358px] xl:min-w-[220px] xl:w-fit xl:max-w-[310px]">
+              {ownedIdentities.length !== 0 && (
                 <div
                   className={`
                          ${styles.sideNav} border w-[100%] md:w-auto h-[319px] xl:h-auto relative flex flex-col items-center justify-between sm:px-[24px]  md:pt-[24px] m-auto shadow-sm rounded-2xl `}
                 >
                   <div className="h-full md:min-h-[80%] w-full overflow-y-auto hide-scrollbar flex flex-col gap-[2px] ">
                     {ownedIdentities.map((domain, index) => (
-                      <button
-                        className={`${
-                          domain.id === router.query.tokenId ||
-                          domain.id === tokenId
-                            ? "text-[#402D28]"
-                            : " text-[#CDCCCC] hover:text-[#402D28]"
-                        } font-medium text-lg sm:text-md lg:text-lg leading-5 cursor-pointer border-[#4545451A] border-b-[1px] md:border-none md:py-0 py-6 md:my-3 block w-full text-center xl:text-left`}
-                        key={index}
-                        onClick={() => router.push(`/identities/${domain.id}`)}
-                      >
-                        {domain.domain ? domain.domain : domain.id}
-                      </button>
+                      <div key={index} className="flex w-full items-center justify-start gap-1">
+                        <button
+                          className={`${
+                            domain.id === router.query.tokenId ||
+                            domain.id === tokenId
+                              ? "text-[#402D28]"
+                              : " text-[#CDCCCC] font-normal hover:text-[#402D28]"
+                          } font-bold text-lg sm:text-md lg:text-md leading-5 cursor-pointer transition-all duration-300 border-[#4545451A] border-b-[1px] md:border-none md:py-0 py-6 md:my-3 block w-fit text-center xl:text-left`}
+                          key={index}
+                          onClick={() => {
+                            router.push(`/identities/${domain.id}`);
+                            if (isIdentityExpired(domain)) {
+                              setSelectedExpiredDomain(domain);
+                              setDomainExpiredModalOpen(true);
+                            }}}
+                        >
+                          {domain.domain ? domain.domain : domain.id}
+                        </button>
+                        {isIdentityExpired(domain) && (
+                            <Tooltip
+                             title="Domain Expired"
+                             componentsProps={{
+                               tooltip: {
+                                 sx: {
+                                   bgcolor: "#402D28",
+                                 },
+                                },
+                              }}
+                           >
+                            <div className="flex w-[16px] h-[16px] items-center justify-center">
+                              <FaCircle className="text-red-500 text-[8px] ml-1" />
+                            </div>
+                          </Tooltip>
+                        )}
+                      </div>
                     ))}
                   </div>
                   <button
@@ -214,6 +264,7 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
                 </div>
               )}
             </div>
+            {/*           MAIN CARD            */}
             <div
               className={` flex justify-center items-center ${styles.CardContainer}`}
             >
@@ -225,6 +276,7 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
                 ppImageUrl={ppImageUrl}
               />
             </div>
+            {/*           RIGHT SIDE ACTIONS            */}
             <div className=" min-w-[280px]">
               {hideActions ? (
                 minting && <IdentityActionsSkeleton />
@@ -247,6 +299,16 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
           />
         )}
       </div>
+      <DomainExpiredModal
+        open={domainExpiredModalOpen}
+        onClose={() => {
+          setDomainExpiredModalOpen(false);
+        }}
+        onRenew={() => {
+          setDomainExpiredModalOpen(false);
+          router.push("/renewal");
+        }}
+      />
       <TxConfirmationModal
         txHash={ppTxHash}
         isTxModalOpen={isTxModalOpen}
diff --git a/package-lock.json b/package-lock.json
