Merge pull request #990 from aidenwong812/fix-954

Fix: Redesign of the payment page in the final step of registration
lfglabs-dev · Jan 26, 2025 · 70e7911 · 70e7911
2 parents 9937c82 + 25e31c2
commit 70e7911
Show file tree

Hide file tree

Showing 17 changed files with 656 additions and 526 deletions.
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -85,6 +85,8 @@ const Navbar: FunctionComponent = () => {
 
   const connectWallet = async (connector: Connector) => {
     try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       await connectAsync({ connector });
       localStorage.setItem("SID-connectedWallet", connector.id);
       localStorage.setItem("SID-lastUsedConnector", connector.id);

diff --git a/components/domains/registerV3.tsx b/components/domains/registerV3.tsx
@@ -55,38 +55,38 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
     }
   };
 
-  return (
+  return currentStep === 1 ? (
     <>
-      {currentStep > 1 ? (
-        <RegisterSteps
-          currentStep={currentStep}
-          setStep={goToStep}
-          showPfp={userNfts && userNfts.length > 0}
-          isLoading={isLoadingNfts}
+      <div className="sm:w-2/5 w-4/5 mt-5 mb-5">
+        <SearchBar
+          onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
+          showHistory={false}
         />
-      ) : (
-        <div className="sm:w-2/5 w-4/5 mt-5 mb-5">
-          <SearchBar
-            onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
-            showHistory={false}
-          />
-        </div>
-      )}
-      {currentStep === 1 && (
-        <UserInfoForm
-          type={FormType.REGISTER}
-          goToNextStep={goToNextStep}
-          imageUrl="/visuals/register.webp"
-        />
-      )}
+      </div>
+      <UserInfoForm
+        type={FormType.REGISTER}
+        goToNextStep={goToNextStep}
+        imageUrl="/visuals/register.webp"
+      />
+    </>
+  ) : (
+    <div
+      className="w-full flex flex-col justify-center gap-4 px-8 py-4 lg:px-32 md:px-16 sm:py-12 sm:flex-row"
+    >
+      <RegisterSteps
+        currentStep={currentStep}
+        setStep={goToStep}
+        showPfp={userNfts && userNfts.length > 0}
+        isLoading={isLoadingNfts}
+      />
       {currentStep === 2 && <SelectPfp goToNextStep={goToNextStep} />}
       {currentStep === 3 && (
         <CheckoutCard
           type={FormType.REGISTER}
           discount={evergreenDiscounts.registration}
         />
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/components/domains/steps/checkoutCard.tsx b/components/domains/steps/checkoutCard.tsx
@@ -34,6 +34,7 @@ import { usePriceManagement } from "@/hooks/checkout/usePriceManagement";
 import { useCheckoutState } from "@/hooks/checkout/useCheckoutState";
 import { useRegisterTxPrep } from "@/hooks/checkout/useRegisterTxPrep";
 import { useRenewalTxPrep } from "@/hooks/checkout/useRenewalTxPrep";
+import CloseIcon from "@/components/UI/iconsComponents/icons/closeIcon";
 
 type CheckoutCardProps = {
   type: FormType;
@@ -237,17 +238,6 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
 
   return (
     <>
-      {formState.durationInYears === 1 ? (
-        <UpsellCard
-          upsellData={discount as Upsell}
-          enabled={formState.isUpselled}
-          onUpsellChoice={onUpsellChoice}
-          invalidBalance={invalidBalance}
-          hasUserSelectedOffer={hasUserSelectedOffer}
-          setHasUserSelectedOffer={setHasUserSelectedOffer}
-          loadingPrice={loadingPrice}
-        />
-      ) : null}
       {reducedDuration > 0 &&
         invalidBalance &&
         reducedDuration !== formState.durationInYears * 365 ? (
@@ -260,6 +250,17 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
       ) : null}
 
       <div className={styles.container}>
+        {formState.durationInYears === 1 ? (
+          <UpsellCard
+            upsellData={discount as Upsell}
+            enabled={formState.isUpselled}
+            onUpsellChoice={onUpsellChoice}
+            invalidBalance={invalidBalance}
+            hasUserSelectedOffer={hasUserSelectedOffer}
+            setHasUserSelectedOffer={setHasUserSelectedOffer}
+            loadingPrice={loadingPrice}
+          />
+        ) : null}
         <div className={styles.checkout}>
           <RegisterSummary
             priceInEth={
@@ -281,7 +282,7 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
             discountedPrice={discountedPrice}
             discountedPriceInEth={discountedPriceInEth}
           />
-          <Divider className="w-full" />
+          <Divider className={styles.divider} />
           <div className={styles.checkoutSummary}>
             <RegisterCheckboxes
               onChangeTermsBox={onChangeTermsBox}
@@ -297,27 +298,46 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
               displayedCurrency={displayedCurrency}
               maxPriceRange={maxPriceRange}
             />
-            <div>
-              <Button
-                onClick={() =>
-                  execute().then(() => {
-                    setDomainsMinting(formState.selectedDomains);
-                  })
-                }
-                disabled={
-                  domainsMinting === formState.selectedDomains ||
-                  !account ||
-                  !formState.durationInYears ||
-                  formState.durationInYears < 1 ||
-                  invalidBalance ||
-                  !termsBox
-                }
+            <div className={styles.checkoutButton}>
+              <div
+                className={(!termsBox || invalidBalance) ? "flex flex-col-reverse gap-4" : "flex gap-4"}
               >
-                {getButtonText()}
-              </Button>
+                <div className="flex sm:hidden">
+                  <Button
+                    variation="white"
+                    onClick={() => router.push("/")}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+                <Button
+                  onClick={() =>
+                    execute().then(() => {
+                      setDomainsMinting(formState.selectedDomains);
+                    })
+                  }
+                  disabled={
+                    domainsMinting === formState.selectedDomains ||
+                    !account ||
+                    !formState.durationInYears ||
+                    formState.durationInYears < 1 ||
+                    invalidBalance ||
+                    !termsBox
+                  }
+                >
+                  {getButtonText()}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
+        <div className="absolute right-0 top-0 w-5 h-5">
+          <button
+            onClick={() => router.push("/")}
+          >
+            <CloseIcon />
+          </button>
+        </div>
       </div>
       <Notification
         visible={currencyError}

diff --git a/components/domains/steps/registerSteps.tsx b/components/domains/steps/registerSteps.tsx
@@ -1,10 +1,12 @@
 import React, { FunctionComponent } from "react";
+import Image from "next/image";
 import styles from "../../../styles/components/registerV3.module.css";
 import ContactCardIcon from "@/components/UI/iconsComponents/icons/contactCardIcon";
 import PfpIcon from "@/components/UI/iconsComponents/icons/pfpIcon";
 import CartIcon from "@/components/UI/iconsComponents/icons/cartIcon";
 import theme from "@/styles/theme";
 import { Skeleton } from "@mui/material";
+import DoneFilledIcon from "@/components/UI/iconsComponents/icons/doneFilledIcon";
 
 type registerStepsProps = {
   currentStep: number;
@@ -31,28 +33,37 @@ const RegisterSteps: FunctionComponent<registerStepsProps> = ({
     </div>
   ) : (
     <div className={styles.stepsContainer}>
+      <div className={styles.stepsBackground}>
+        <Image
+          src="/register/grass.png"
+          alt="grass"
+          fill
+        />
+      </div>
       <div className={styles.progressSteps}>
         <div
           className={`${styles.progressStep} ${
             currentStep >= 1 ? styles.activeStep : ""
           }`}
           onClick={() => setStep(1)}
         >
-          <ContactCardIcon
-            width="30"
-            color={
-              currentStep >= 1
-                ? theme.palette.primary.main
-                : theme.palette.secondary.main
-            }
+          <div className={styles.progressStepName}>
+            <ContactCardIcon
+              width="30"
+              color={
+                currentStep >= 1
+                  ? theme.palette.primary.main
+                  : theme.palette.secondary.main
+              }
+            />
+            <p>Domain</p>
+          </div>
+          <DoneFilledIcon
+            width="12"
+            color={theme.palette.primary.light}
+            secondColor={theme.palette.primary.main}
           />
-          <p>Domain</p>
         </div>
-        <div
-          className={`${styles.progressLine} ${
-            currentStep >= 2 ? styles.primaryBg : ""
-          }`}
-        />
         {showPfp ? (
           <>
             <div
@@ -61,44 +72,55 @@ const RegisterSteps: FunctionComponent<registerStepsProps> = ({
               }`}
               onClick={() => setStep(2)}
             >
-              <PfpIcon
-                width="30"
-                secondColor={
-                  currentStep >= 2 ? "#FFF" : theme.palette.secondary.main
-                }
-                color={
-                  currentStep >= 2
-                    ? theme.palette.primary.main
-                    : theme.palette.secondary.light
-                }
+              <div className={styles.progressStepName}>
+                <PfpIcon
+                  width="30"
+                  secondColor={
+                    currentStep >= 2 ? "#FFF" : theme.palette.secondary.main
+                  }
+                  color={
+                    currentStep >= 2
+                      ? theme.palette.primary.main
+                      : theme.palette.secondary.light
+                  }
+                />
+                <p>PFP</p>
+              </div>
+              <DoneFilledIcon
+                width="12"
+                color={theme.palette.primary.main}
+                secondColor={theme.palette.primary.main}
               />
-              <p>PFP</p>
             </div>
-            <div
-              className={`${styles.progressLine} ${
-                currentStep >= 3 ? styles.primaryBg : ""
-              }`}
-            />
           </>
         ) : null}
         <div
           className={`${styles.progressStep} ${
-            currentStep >= 3 ? styles.activeStep : ""
+            currentStep > 3 ? styles.activeStep : ""
           }`}
           onClick={() => setStep(3)}
         >
-          <CartIcon
-            width="30"
-            secondColor={
-              currentStep >= 3 ? "#FFF" : theme.palette.secondary.main
-            }
-            color={
-              currentStep >= 3
-                ? theme.palette.primary.main
-                : theme.palette.secondary.light
-            }
-          />
-          <p>Checkout</p>
+          <div className={styles.progressStepName}>
+            <CartIcon
+              width="30"
+              secondColor={
+                currentStep > 3 ? "#FFF" : theme.palette.secondary.main
+              }
+              color={
+                currentStep > 3
+                  ? theme.palette.primary.main
+                  : theme.palette.secondary.light
+              }
+            />
+            <p>Checkout</p>
+          </div>
+          {currentStep > 3 && (
+            <DoneFilledIcon
+              width="12"
+              color={theme.palette.primary.main}
+              secondColor={theme.palette.primary.main}
+            />
+          )}
         </div>
       </div>
     </div>