Fix: Redesign of the payment page in the final step of registration

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>
   );
 };
 

components/domains/steps/checkoutCard.tsx

@@ -237,17 +237,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 +249,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 +281,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,24 +297,34 @@ 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
-                }
-              >
-                {getButtonText()}
-              </Button>
+            <div className={styles.checkoutButton}>
+              <div className="flex gap-4">
+                <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>

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>

components/domains/steps/upsellCard.tsx

@@ -1,6 +1,6 @@
 import styles from "../../../styles/components/upsellCard.module.css";
 import React, { FunctionComponent, useEffect } from "react";
-import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import { Divider, FormControlLabel, Radio, RadioGroup } from "@mui/material";
 import textFieldStyles from "../../../styles/components/textField.module.css";
 type UpsellCardProps = {
   upsellData: Upsell;
@@ -43,37 +43,34 @@ const UpsellCard: FunctionComponent<UpsellCardProps> = ({
   };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <div className="flex flex-col items-start gap-1 self-stretch">
-          <p className={styles.title}>{upsellData.title.desc}</p>
-          <h3 className={styles.catch}>{upsellData.title.catch}</h3>
-          <p className={styles.desc}>{upsellData.desc}</p>
-        </div>
-        <RadioGroup
-          aria-labelledby="demo-controlled-radio-buttons-group"
-          name="controlled-radio-buttons-group"
-          value={enabled}
-          onChange={handleUpsellChoice}
-          className={styles.radioGroupContainer}
-        >
-          <div className={styles.radioGroup}>
-            <FormControlLabel
-              control={<Radio />}
-              value={true}
-              label={
-                <p className={textFieldStyles.legend}>Yes, count me in!</p>
-              }
-            />
-            <FormControlLabel
-              control={<Radio />}
-              value={false}
-              label={<p className={textFieldStyles.legend}>No, thanks!</p>}
-            />
-          </div>
-        </RadioGroup>
+    <div className={styles.card}>
+      <div className="flex flex-col items-start gap-1 self-stretch">
+        <h3 className={styles.catch}>{upsellData.title.catch}</h3>
+        <p className={styles.desc}>{upsellData.desc}</p>
       </div>
-      <img className={styles.image} src={upsellData.imageUrl} />
+      <RadioGroup
+        aria-labelledby="demo-controlled-radio-buttons-group"
+        name="controlled-radio-buttons-group"
+        value={enabled}
+        onChange={handleUpsellChoice}
+        className={styles.radioGroupContainer}
+      >
+        <div className={styles.radioGroup}>
+          <FormControlLabel
+            control={<Radio />}
+            value={true}
+            label={
+              <p className={textFieldStyles.legend}>Yes, count on me!</p>
+            }
+          />
+          <FormControlLabel
+            control={<Radio />}
+            value={false}
+            label={<p className={textFieldStyles.legend}>No, thanks!</p>}
+          />
+        </div>
+      </RadioGroup>
+      <Divider className={styles.divider} />
     </div>
   );
 };

styles/components/button.module.css

@@ -13,7 +13,7 @@
   letter-spacing: 0.094em;
   border: none;
   padding: 0 2rem;
-  border-radius: 500px;
+  border-radius: 8px;
   min-width: 5rem;
   width: 100%;
   margin: 0.25rem;
@@ -98,7 +98,7 @@
   right: -5px;
   bottom: -5px;
   border: 2px solid var(--tertiary); /* Based on Nimiq Light Blue */
-  border-radius: 500px;
+  border-radius: 8px;
   opacity: 0;
   pointer-events: none;
 }