feat: resend email confirmation (#1805)

fixes FTD-2211

Author: assimovt

@3rdweb-sdk/react/hooks/useApi.ts

@@ -355,6 +355,43 @@ export function useConfirmEmail() {
   );
 }
 
+export function useResendEmailConfirmation() {
+  const { user } = useLoggedInUser();
+  const queryClient = useQueryClient();
+
+  return useMutationWithInvalidate(
+    async () => {
+      invariant(user?.address, "walletAddress is required");
+
+      const res = await fetch(
+        `${THIRDWEB_API_HOST}/v1/account/resendEmailConfirmation`,
+        {
+          method: "POST",
+          credentials: "include",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({}),
+        },
+      );
+      const json = await res.json();
+
+      if (json.error) {
+        throw new Error(json.message);
+      }
+
+      return json.data;
+    },
+    {
+      onSuccess: () => {
+        return queryClient.invalidateQueries(
+          accountKeys.me(user?.address as string),
+        );
+      },
+    },
+  );
+}
+
 export function useCreatePaymentMethod() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();

components/onboarding/Billing.tsx

@@ -71,7 +71,7 @@ export const OnboardingBilling: React.FC<OnboardingBillingProps> = ({
     <Flex flexDir="column" gap={8}>
       <OnboardingTitle
         heading="Add a payment method"
-        description="To continue using thirdweb without interruption after exceeding your Starter plan limits, please add a payment method. Your card will be used for verification, no charges will be made without notice."
+        description="thirdweb is free to get started with free monthly usage limits. We recommend that you add a payment method so that you can use thirdweb services without interruption after you exceed free usage limits."
       />
       <Flex flexDir="column" gap={8}>
         {stripePromise && (

components/onboarding/ConfirmEmail.tsx

@@ -1,5 +1,8 @@
-import { useConfirmEmail } from "@3rdweb-sdk/react/hooks/useApi";
-import { Button } from "tw-components";
+import {
+  useConfirmEmail,
+  useResendEmailConfirmation,
+} from "@3rdweb-sdk/react/hooks/useApi";
+import { Button, Text } from "tw-components";
 import OtpInput from "react-otp-input";
 import { useState, ClipboardEvent } from "react";
 import { Input, Flex } from "@chakra-ui/react";
@@ -12,6 +15,7 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useErrorHandler } from "contexts/error-handler";
 import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
 
 interface OnboardingConfirmEmailProps {
   email: string;
@@ -29,6 +33,12 @@ export const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
   const { onError } = useErrorHandler();
   const trackEvent = useTrack();
 
+  const { onSuccess: onResendSuccess, onError: onResendError } =
+    useTxNotifications(
+      "We've sent you a new email confirmation code.",
+      "Couldn't send email confirmation. Try later!",
+    );
+
   const form = useForm<EmailConfirmationValidationSchema>({
     resolver: zodResolver(emailConfirmationValidationSchema),
     values: {
@@ -37,6 +47,7 @@ export const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
   });
 
   const mutation = useConfirmEmail();
+  const resendMutation = useResendEmailConfirmation();
 
   const handleChange = (value: string) => {
     setToken(value.toUpperCase());
@@ -84,6 +95,42 @@ export const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
     });
   });
 
+  const handleResend = () => {
+    setSaving(true);
+
+    trackEvent({
+      category: "account",
+      action: "resendEmailConfirmation",
+      label: "attempt",
+    });
+
+    resendMutation.mutate(undefined, {
+      onSuccess: () => {
+        setSaving(false);
+        onResendSuccess();
+
+        trackEvent({
+          category: "account",
+          action: "resendEmailConfirmation",
+          label: "success",
+        });
+      },
+      onError: (error) => {
+        onResendError(error);
+        form.reset();
+        setToken("");
+        setSaving(false);
+
+        trackEvent({
+          category: "account",
+          action: "resendEmailConfirmation",
+          label: "error",
+          error,
+        });
+      },
+    });
+  };
+
   const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {
     const data = e.clipboardData.getData("text");
     if (data?.match(/^[A-Z]{6}$/)) {
@@ -106,34 +153,48 @@ export const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
 
       <form onSubmit={handleSubmit}>
         <Flex gap={8} flexDir="column" w="full">
-          <OtpInput
-            shouldAutoFocus
-            value={token}
-            onChange={handleChange}
-            onPaste={handlePaste}
-            skipDefaultStyles
-            numInputs={6}
-            containerStyle={{
-              display: "flex",
-              flexDirection: "row",
-              gap: "12px",
-            }}
-            renderInput={(props) => (
-              <Input
-                {...props}
-                w={20}
-                h={16}
-                rounded="md"
-                textAlign="center"
-                fontSize="larger"
-                borderColor={
-                  form.getFieldState("confirmationToken", form.formState).error
-                    ? "red.500"
-                    : "borderColor"
-                }
-              />
-            )}
-          />
+          <Flex gap={3} flexDir="column" w="full">
+            <OtpInput
+              shouldAutoFocus
+              value={token}
+              onChange={handleChange}
+              onPaste={handlePaste}
+              skipDefaultStyles
+              numInputs={6}
+              containerStyle={{
+                display: "flex",
+                flexDirection: "row",
+                gap: "12px",
+              }}
+              renderInput={(props) => (
+                <Input
+                  {...props}
+                  w={20}
+                  h={16}
+                  rounded="md"
+                  textAlign="center"
+                  fontSize="larger"
+                  borderColor={
+                    form.getFieldState("confirmationToken", form.formState)
+                      .error
+                      ? "red.500"
+                      : "borderColor"
+                  }
+                />
+              )}
+            />
+
+            <Button
+              size="lg"
+              fontSize="sm"
+              variant="link"
+              onClick={handleResend}
+              colorScheme="blue"
+              isDisabled={saving}
+            >
+              <Text color="blue.500">Resend code</Text>
+            </Button>
+          </Flex>
 
           <Flex flexDir="column" gap={3}>
             <Button

components/onboarding/PaymentForm.tsx

@@ -8,7 +8,7 @@ import {
 import { useErrorHandler } from "contexts/error-handler";
 import { useTrack } from "hooks/analytics/useTrack";
 import { FormEvent, useState } from "react";
-import { Button } from "tw-components";
+import { Button, Text } from "tw-components";
 
 interface OnboardingPaymentForm {
   onSave: () => void;
@@ -112,14 +112,14 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
               Add payment
             </Button>
             <Button
-              w="full"
               size="lg"
-              fontSize="md"
-              variant="outline"
-              isDisabled={saving}
+              fontSize="sm"
+              variant="link"
               onClick={onCancel}
+              isDisabled={saving}
+              colorScheme="blue"
             >
-              I&apos;ll do this later
+              <Text color="blue.500">I&apos;ll do this later</Text>
             </Button>
           </Flex>
         )}

components/onboarding/index.tsx

@@ -7,6 +7,7 @@ import { useRouter } from "next/router";
 import { OnboardingBilling } from "./Billing";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
+import { RE_INTERNAL_TEST_EMAIL } from "utils/regex";
 
 export const Onboarding: React.FC = () => {
   const meQuery = useAccount();
@@ -34,6 +35,11 @@ export const Onboarding: React.FC = () => {
     if (state === "onboarding") {
       if (email) {
         setUpdatedEmail(email);
+
+        if (email.match(RE_INTERNAL_TEST_EMAIL)) {
+          setState("skipped");
+          return;
+        }
       }
       setState("confirming");
 
@@ -45,11 +51,11 @@ export const Onboarding: React.FC = () => {
         },
       });
     } else if (state === "confirming") {
-      const newState = ["validPayment", "paymentVerification"].includes(
-        account.status,
-      )
-        ? "skipped"
-        : "billing";
+      const newState =
+        ["validPayment", "paymentVerification"].includes(account.status) ||
+        account.onboardSkipped
+          ? "skipped"
+          : "billing";
       setState(newState);
 
       trackEvent({
@@ -78,7 +84,7 @@ export const Onboarding: React.FC = () => {
     }
 
     // user hasn't confirmed email
-    if (!account.emailConfirmedAt) {
+    if (!account.emailConfirmedAt && !account.unconfirmedEmail) {
       setState("onboarding");
     }
     // user has changed email and needs to confirm

utils/regex.ts

@@ -7,3 +7,5 @@ export const RE_DOMAIN = new RegExp(
 );
 
 export const RE_BUNDLE_ID = new RegExp(/^[a-z0-9.-]{3,64}$/);
+
+export const RE_INTERNAL_TEST_EMAIL = new RegExp(/^\w+\+.+@thirdweb\.com$/);