From 049c03e89fa099806005f76b757fec1e1ba3dc55 Mon Sep 17 00:00:00 2001
From: Maxime Beauchamp <15185355+baktun14@users.noreply.github.com>
Date: Tue, 10 Dec 2024 15:10:29 -0500
Subject: [PATCH] fix(billing): properly handle user state for email
 verification

---
 .../get-started/GetStartedStepper.tsx         | 45 +++++++++++--------
 .../src/components/home/YourAccount.tsx       | 27 ++++++-----
 .../src/components/shared/VerifyEmail.tsx     | 20 +++++++++
 .../src/components/user/LoginRequiredLink.tsx | 10 ++++-
 .../components/wallet/ManagedWalletPopup.tsx  | 27 +++--------
 .../src/hooks/useHasCreditCardBanner.ts       |  4 +-
 .../src/hooks/useRequiredEmailVerified.ts     |  6 +++
 7 files changed, 88 insertions(+), 51 deletions(-)
 create mode 100644 apps/deploy-web/src/components/shared/VerifyEmail.tsx
 create mode 100644 apps/deploy-web/src/hooks/useRequiredEmailVerified.ts

diff --git a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
index 97a8f9899..9bfd31030 100644
--- a/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
+++ b/apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
@@ -18,6 +18,7 @@ import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useChainParam } from "@src/context/ChainParamProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useCustomUser } from "@src/hooks/useCustomUser";
+import { useIsEmailVerified } from "@src/hooks/useRequiredEmailVerified";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
 import walletStore from "@src/store/walletStore";
 import { RouteStep } from "@src/types/route-steps.type";
@@ -26,6 +27,7 @@ import { uaktToAKT } from "@src/utils/priceUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import LiquidityModal from "../liquidity-modal";
 import { ExternalLink } from "../shared/ExternalLink";
+import { VerifyEmail } from "../shared/VerifyEmail";
 import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
 import { QontoConnector, QontoStepIcon } from "./Stepper";
 
@@ -38,6 +40,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
   const usdcBalance = walletBalance ? udenomToDenom(walletBalance.balanceUUSDC) : 0;
   const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
   const { user } = useCustomUser();
+  const isEmailVerified = useIsEmailVerified();
 
   useEffect(() => {
     const getStartedStep = localStorage.getItem("getStartedStep");
@@ -104,27 +107,33 @@ export const GetStartedStepper: React.FunctionComponent = () => {
 
           <div className="my-4 flex items-center space-x-4">
             {isManagedWallet && (
-              <TopUpAmountPicker popoverClassName="absolute md:min-w-max" mdMode="hover">
-                <LoginRequiredLink
-                  className={cn("hover:no-underline", buttonVariants({ variant: "outline", className: "mr-2 border-primary" }))}
-                  href="/api/proxy/v1/checkout"
-                  message="Sign In or Sign Up to add funds to your balance"
-                >
-                  <HandCard className="text-xs text-accent-foreground" />
-                  <span className="m-2 whitespace-nowrap text-accent-foreground">Add Funds</span>
-                </LoginRequiredLink>
-              </TopUpAmountPicker>
-            )}
-            <Button variant="default" onClick={handleNext}>
-              Next
-            </Button>
-            {!isManagedWallet && (
-              <Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
-                Learn how
-              </Link>
+              <div className="flex flex-col items-start space-y-2">
+                <VerifyEmail />
+
+                <TopUpAmountPicker popoverClassName="absolute md:min-w-max" mdMode="hover">
+                  <LoginRequiredLink
+                    className={cn("hover:no-underline", buttonVariants({ variant: "outline", className: "mr-2 border-primary" }))}
+                    href="/api/proxy/v1/checkout"
+                    message="Sign In or Sign Up to add funds to your balance"
+                    disabled={!isEmailVerified}
+                  >
+                    <HandCard className="text-xs text-accent-foreground" />
+                    <span className="m-2 whitespace-nowrap text-accent-foreground">Add Funds</span>
+                  </LoginRequiredLink>
+                </TopUpAmountPicker>
+              </div>
             )}
           </div>
 
+          <Button variant="default" onClick={handleNext}>
+            Next
+          </Button>
+          {!isManagedWallet && (
+            <Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
+              Learn how
+            </Link>
+          )}
+
           {isWalletConnected && isTrialing && (
             <div className="my-4 flex items-center space-x-2">
               <Check className="text-green-600" />
diff --git a/apps/deploy-web/src/components/home/YourAccount.tsx b/apps/deploy-web/src/components/home/YourAccount.tsx
index f5fb9dd4f..0fd5ffc28 100644
--- a/apps/deploy-web/src/components/home/YourAccount.tsx
+++ b/apps/deploy-web/src/components/home/YourAccount.tsx
@@ -16,6 +16,7 @@ import { UAKT_DENOM } from "@src/config/denom.config";
 import { usePricing } from "@src/context/PricingProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useUsdcDenom } from "@src/hooks/useDenom";
+import { useIsEmailVerified } from "@src/hooks/useRequiredEmailVerified";
 import useTailwind from "@src/hooks/useTailwind";
 import { WalletBalance } from "@src/hooks/useWalletBalance";
 import sdlStore from "@src/store/sdlStore";
@@ -30,6 +31,7 @@ import { ConnectWallet } from "../shared/ConnectWallet";
 import { LeaseSpecDetail } from "../shared/LeaseSpecDetail";
 import { PriceValue } from "../shared/PriceValue";
 import { StatusPill } from "../shared/StatusPill";
+import { VerifyEmail } from "../shared/VerifyEmail";
 
 type Props = {
   isLoadingBalances: boolean;
@@ -56,6 +58,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ isLoadingBalances,
   const _storage = bytesToShrink(totalStorage);
   const [, setDeploySdl] = useAtom(sdlStore.deploySdl);
   const { price, isLoaded } = usePricing();
+  const isEmailVerified = useIsEmailVerified();
 
   const colors = {
     balance_akt: customColors.akashRed,
@@ -230,16 +233,20 @@ export const YourAccount: React.FunctionComponent<Props> = ({ isLoadingBalances,
                 </Link>
               )}
               {isManagedWallet && (
-                <TopUpAmountPicker className="mt-4 inline-flex flex-col" mdMode="hover">
-                  <LoginRequiredLink
-                    className={cn(buttonVariants({ variant: "default" }))}
-                    href="/api/proxy/v1/checkout"
-                    message="Sign In or Sign Up to add funds to your balance"
-                  >
-                    Add Funds
-                    <HandCard className="ml-4 rotate-45 text-sm" />
-                  </LoginRequiredLink>
-                </TopUpAmountPicker>
+                <>
+                  <VerifyEmail className="mt-4" />
+                  <TopUpAmountPicker className="mt-4 inline-flex flex-col" mdMode="hover">
+                    <LoginRequiredLink
+                      className={cn(buttonVariants({ variant: "default" }))}
+                      href="/api/proxy/v1/checkout"
+                      message="Sign In or Sign Up to add funds to your balance"
+                      disabled={!isEmailVerified}
+                    >
+                      Add Funds
+                      <HandCard className="ml-4 rotate-45 text-sm" />
+                    </LoginRequiredLink>
+                  </TopUpAmountPicker>
+                </>
               )}
             </div>
 
diff --git a/apps/deploy-web/src/components/shared/VerifyEmail.tsx b/apps/deploy-web/src/components/shared/VerifyEmail.tsx
new file mode 100644
index 000000000..884120d4b
--- /dev/null
+++ b/apps/deploy-web/src/components/shared/VerifyEmail.tsx
@@ -0,0 +1,20 @@
+import { Alert, AlertDescription } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
+import { WarningCircle } from "iconoir-react";
+
+import { useIsEmailVerified } from "@src/hooks/useRequiredEmailVerified";
+
+export const VerifyEmail = ({ className }: { className?: string }) => {
+  const isEmailVerified = useIsEmailVerified();
+
+  if (isEmailVerified) return null;
+
+  return (
+    <Alert variant="warning" className={className}>
+      <AlertDescription className="flex items-center space-x-2">
+        <WarningCircle className="text-lg" />
+        <span>Verify your email to add funds to your balance.</span>
+      </AlertDescription>
+    </Alert>
+  );
+};
diff --git a/apps/deploy-web/src/components/user/LoginRequiredLink.tsx b/apps/deploy-web/src/components/user/LoginRequiredLink.tsx
index 9cb4f1b07..6bb98e628 100644
--- a/apps/deploy-web/src/components/user/LoginRequiredLink.tsx
+++ b/apps/deploy-web/src/components/user/LoginRequiredLink.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "@akashnetwork/ui/components";
 import Link, { LinkProps } from "next/link";
 
 import { useLoginRequiredEventHandler } from "@src/hooks/useLoginRequiredEventHandler";
@@ -9,8 +10,15 @@ export const LoginRequiredLink: FCWithChildren<
     LinkProps & {
       children?: React.ReactNode;
       message: string;
+      disabled?: boolean;
     } & React.RefAttributes<HTMLAnchorElement>
 > = ({ message, ...props }) => {
   const whenLoggedIn = useLoginRequiredEventHandler();
-  return <Link {...props} onClick={whenLoggedIn(props.onClick || (() => {}), message)} />;
+  return props.disabled ? (
+    <Button className={props.className} disabled>
+      {props.children}
+    </Button>
+  ) : (
+    <Link {...props} onClick={whenLoggedIn(props.onClick || (() => {}), message)} />
+  );
 };
diff --git a/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx b/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
index 73d33e61c..9ede25f11 100644
--- a/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
+++ b/apps/deploy-web/src/components/wallet/ManagedWalletPopup.tsx
@@ -1,22 +1,23 @@
 import React from "react";
 import { FormattedNumber } from "react-intl";
-import { Alert, AlertDescription, Button, Separator } from "@akashnetwork/ui/components";
-import { CoinsSwap, HandCard, WarningCircle } from "iconoir-react";
+import { Button, Separator } from "@akashnetwork/ui/components";
+import { CoinsSwap, HandCard } from "iconoir-react";
 
 import { TopUpAmountPicker } from "@src/components/top-up-amount-picker/TopUpAmountPicker";
 import { useWallet } from "@src/context/WalletProvider";
 import { useLoginRequiredEventHandler } from "@src/hooks/useLoginRequiredEventHandler";
 import { useManagedEscrowFaqModal } from "@src/hooks/useManagedEscrowFaqModal";
+import { useIsEmailVerified } from "@src/hooks/useRequiredEmailVerified";
 import { WalletBalance } from "@src/hooks/useWalletBalance";
 import { LinkTo } from "../shared/LinkTo";
-import { useCustomUser } from "@src/hooks/useCustomUser";
+import { VerifyEmail } from "../shared/VerifyEmail";
 
 interface ManagedWalletPopupProps extends React.PropsWithChildren {
   walletBalance: WalletBalance;
 }
 
 export const ManagedWalletPopup: React.FC<ManagedWalletPopupProps> = ({ walletBalance }) => {
-  const { user } = useCustomUser();
+  const isEmailVerified = useIsEmailVerified();
   const { switchWalletType, isManaged, isTrialing } = useWallet();
   const whenLoggedIn = useLoginRequiredEventHandler();
   const { showManagedEscrowFaqModal } = useManagedEscrowFaqModal();
@@ -25,8 +26,6 @@ export const ManagedWalletPopup: React.FC<ManagedWalletPopupProps> = ({ walletBa
     window.location.href = "/api/proxy/v1/checkout";
   };
 
-  console.log(user);
-
   return (
     <div className="w-[300px] p-2">
       {isManaged && isTrialing && (
@@ -75,22 +74,10 @@ export const ManagedWalletPopup: React.FC<ManagedWalletPopupProps> = ({ walletBa
       )}
 
       <div className="flex flex-col items-center justify-end space-y-2 pt-2">
-        {!user?.emailVerified && (
-          <Alert variant="warning">
-            <AlertDescription className="flex items-center space-x-2">
-              <WarningCircle className="text-lg" />
-              <span>Verify your email to add funds to your balance.</span>
-            </AlertDescription>
-          </Alert>
-        )}
+        <VerifyEmail />
 
         <TopUpAmountPicker mdMode="click" className="w-full">
-          <Button
-            onClick={whenLoggedIn(goToCheckout, "Sign In or Sign Up to add funds")}
-            variant="outline"
-            className="w-full space-x-2"
-            disabled={!user?.emailVerified}
-          >
+          <Button onClick={whenLoggedIn(goToCheckout, "Sign In or Sign Up to add funds")} variant="outline" className="w-full space-x-2" disabled={!isEmailVerified}>
             <HandCard />
             <span>Add Funds</span>
           </Button>
diff --git a/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts b/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts
index 30e69871e..fcef529b7 100644
--- a/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts
+++ b/apps/deploy-web/src/hooks/useHasCreditCardBanner.ts
@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
+import { useAtom } from "jotai";
 
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
-import { useUser } from "./useUser";
-import { useAtom } from "jotai";
 import walletStore from "@src/store/walletStore";
+import { useUser } from "./useUser";
 
 const withBilling = browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED;
 
diff --git a/apps/deploy-web/src/hooks/useRequiredEmailVerified.ts b/apps/deploy-web/src/hooks/useRequiredEmailVerified.ts
new file mode 100644
index 000000000..141daf440
--- /dev/null
+++ b/apps/deploy-web/src/hooks/useRequiredEmailVerified.ts
@@ -0,0 +1,6 @@
+import { useCustomUser } from "./useCustomUser";
+
+export const useIsEmailVerified = () => {
+  const { user } = useCustomUser();
+  return !user || !!user?.emailVerified;
+};