chore: email is now required (#1803)

fixes PROD-344

Author: assimovt

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

@@ -28,7 +28,6 @@ export type Account = {
   email?: string;
   currentBillingPeriodStartsAt: string;
   currentBillingPeriodEndsAt: string;
-  onboardedAt?: string;
   emailConfirmedAt?: string;
   unconfirmedEmail?: string;
   stripePaymentActionUrl?: string;

components/onboarding/ConfirmEmail.tsx

@@ -95,7 +95,7 @@ export const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
   return (
     <>
       <OnboardingTitle
-        heading="Verify your email"
+        heading="You're almost done! Verify your email."
         description={
           <>
             We&apos;ve sent a 6 letter confirmation code to{" "}
@@ -156,7 +156,7 @@ export const OnboardingConfirmEmail: React.FC<OnboardingConfirmEmailProps> = ({
               onClick={onBack}
               isDisabled={saving}
             >
-              Change email
+              Update email
             </Button>
           </Flex>
         </Flex>

components/onboarding/General.tsx

@@ -5,31 +5,24 @@ import { OnboardingTitle } from "./Title";
 type OnboardingGeneralProps = {
   account: Account;
   onSave: (email: string) => void;
-  onCancel: () => void;
 };
 
 export const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
   account,
   onSave,
-  onCancel,
 }) => {
   return (
     <>
       <OnboardingTitle
-        heading={
-          <>
-            Welcome to <strong>thirdweb</strong>
-          </>
-        }
-        description="Enter a name and email to manage your billing info, and receive our latest product updates."
+        heading="Create your thirdweb account"
+        description="Start building web3 apps and games, faster."
       />
 
       <AccountForm
-        showCancelButton
         showSubscription
         optional
         account={account}
-        buttonText="Next"
+        buttonText="Get Started for Free"
         trackingCategory="onboarding"
         padded={false}
         buttonProps={{
@@ -39,7 +32,6 @@ export const OnboardingGeneral: React.FC<OnboardingGeneralProps> = ({
           variant: "inverted",
         }}
         onSave={onSave}
-        onCancel={onCancel}
       />
     </>
   );

components/onboarding/PaymentForm.tsx

@@ -119,7 +119,7 @@ export const OnboardingPaymentForm: React.FC<OnboardingPaymentForm> = ({
               isDisabled={saving}
               onClick={onCancel}
             >
-              Skip
+              I&apos;ll do this later
             </Button>
           </Flex>
         )}

components/onboarding/index.tsx

@@ -77,12 +77,11 @@ export const Onboarding: React.FC = () => {
       return;
     }
 
-    // user has never seen onboarding screen or
-    // has set email but hasn't confirmed it (pre-email confirmation users)
-    if (!account.onboardedAt || (account.email && !account.emailConfirmedAt)) {
+    // user hasn't confirmed email
+    if (!account.emailConfirmedAt) {
       setState("onboarding");
     }
-    // user has changed email (via account settings) and needs to confirm only
+    // user has changed email and needs to confirm
     else if (account.unconfirmedEmail) {
       setState("confirming");
     }
@@ -107,11 +106,7 @@ export const Onboarding: React.FC = () => {
   return (
     <OnboardingModal isOpen={!!state} onClose={() => setState("skipped")}>
       {state === "onboarding" && (
-        <OnboardingGeneral
-          account={account}
-          onSave={handleSave}
-          onCancel={() => setState("skipped")}
-        />
+        <OnboardingGeneral account={account} onSave={handleSave} />
       )}
       {state === "confirming" && (
         <OnboardingConfirmEmail

components/settings/Account/AccountForm.tsx

@@ -35,29 +35,25 @@ interface AccountFormProps {
   previewEnabled?: boolean;
   showBillingButton?: boolean;
   showSubscription?: boolean;
-  showCancelButton?: boolean;
   buttonProps?: ButtonProps;
   buttonText?: string;
   padded?: boolean;
   optional?: boolean;
   trackingCategory?: string;
   disableUnchanged?: boolean;
   onSave?: (email: string) => void;
-  onCancel?: () => void;
 }
 
 export const AccountForm: React.FC<AccountFormProps> = ({
   account,
   onSave,
-  onCancel,
   buttonProps,
   buttonText = "Save",
   horizontal = false,
   previewEnabled = false,
   showBillingButton = false,
   showSubscription = false,
   disableUnchanged = false,
-  showCancelButton = false,
   padded = true,
   optional = false,
 }) => {
@@ -87,11 +83,6 @@ export const AccountForm: React.FC<AccountFormProps> = ({
   );
 
   const handleSubmit = form.handleSubmit((values) => {
-    if (showCancelButton && !values.email) {
-      handleCancel();
-      return;
-    }
-
     if (onSave) {
       onSave(values.email);
     }
@@ -136,42 +127,6 @@ export const AccountForm: React.FC<AccountFormProps> = ({
     });
   });
 
-  const handleCancel = () => {
-    if (onCancel) {
-      onCancel();
-    }
-
-    trackEvent({
-      category: "account",
-      action: "onboardSkipped",
-      label: "attempt",
-    });
-
-    updateMutation.mutate(
-      {
-        onboardSkipped: true,
-      },
-      {
-        onSuccess: (data) => {
-          trackEvent({
-            category: "account",
-            action: "onboardSkipped",
-            label: "success",
-            data,
-          });
-        },
-        onError: (error) => {
-          trackEvent({
-            category: "account",
-            action: "onboardSkipped",
-            label: "error",
-            error,
-          });
-        },
-      },
-    );
-  };
-
   return (
     <form onSubmit={handleSubmit}>
       <VStack
@@ -191,12 +146,10 @@ export const AccountForm: React.FC<AccountFormProps> = ({
           w="full"
         >
           <FormControl
-            isRequired={!previewEnabled && !optional}
-            isInvalid={!!form.getFieldState("name", form.formState).error}
+            isRequired
+            isInvalid={!!form.getFieldState("email", form.formState).error}
           >
-            <FormLabel>
-              Name {optional && <Text as="span">(optional)</Text>}
-            </FormLabel>
+            <FormLabel>Email</FormLabel>
 
             {previewEnabled ? (
               <Flex
@@ -207,29 +160,29 @@ export const AccountForm: React.FC<AccountFormProps> = ({
                 px={3}
                 alignItems="center"
               >
-                <Heading size="subtitle.sm">{form.getValues("name")}</Heading>
+                <Heading size="subtitle.sm">{form.getValues("email")}</Heading>
               </Flex>
             ) : (
               <Input
-                placeholder="ACME Inc."
-                type="text"
-                {...form.register("name")}
+                placeholder="[email protected]"
+                type="email"
+                {...form.register("email")}
               />
             )}
 
-            {form.getFieldState("name", form.formState).error && (
+            {form.getFieldState("email", form.formState).error && (
               <FormErrorMessage size="body.sm">
-                {form.getFieldState("name", form.formState).error?.message}
+                {form.getFieldState("email", form.formState).error?.message}
               </FormErrorMessage>
             )}
           </FormControl>
 
           <FormControl
             isRequired={!previewEnabled && !optional}
-            isInvalid={!!form.getFieldState("email", form.formState).error}
+            isInvalid={!!form.getFieldState("name", form.formState).error}
           >
             <FormLabel>
-              Billing email {optional && <Text as="span">(optional)</Text>}
+              Name {optional && <Text as="span">(optional)</Text>}
             </FormLabel>
 
             {previewEnabled ? (
@@ -241,29 +194,25 @@ export const AccountForm: React.FC<AccountFormProps> = ({
                 px={3}
                 alignItems="center"
               >
-                <Heading size="subtitle.sm">{form.getValues("email")}</Heading>
+                <Heading size="subtitle.sm">{form.getValues("name")}</Heading>
               </Flex>
             ) : (
               <Input
-                placeholder="[email protected]"
-                type="email"
-                {...form.register("email")}
+                placeholder="Company Inc."
+                type="text"
+                {...form.register("name")}
               />
             )}
 
-            {form.getFieldState("email", form.formState).error && (
+            {form.getFieldState("name", form.formState).error && (
               <FormErrorMessage size="body.sm">
-                {form.getFieldState("email", form.formState).error?.message}
+                {form.getFieldState("name", form.formState).error?.message}
               </FormErrorMessage>
             )}
           </FormControl>
 
           {showSubscription && (
             <Checkbox
-              isDisabled={
-                !form.getValues("email").length ||
-                !!form.getFieldState("email", form.formState).error
-              }
               defaultChecked
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 setIsSubscribing(e.target.checked)
@@ -281,37 +230,19 @@ export const AccountForm: React.FC<AccountFormProps> = ({
           {showBillingButton && <ManageBillingButton account={account} />}
 
           {!previewEnabled && (
-            <Flex
-              flexDir="column"
-              gap={3}
-              w={showCancelButton ? "full" : "auto"}
+            <Button
+              {...buttonProps}
+              type="button"
+              onClick={handleSubmit}
+              colorScheme={buttonProps?.variant ? undefined : "blue"}
+              isDisabled={
+                updateMutation.isLoading ||
+                (disableUnchanged && !form.formState.isDirty)
+              }
+              isLoading={updateMutation.isLoading}
             >
-              <Button
-                {...buttonProps}
-                type="button"
-                onClick={handleSubmit}
-                colorScheme={buttonProps?.variant ? undefined : "blue"}
-                isDisabled={
-                  updateMutation.isLoading ||
-                  (disableUnchanged && !form.formState.isDirty)
-                }
-                isLoading={updateMutation.isLoading}
-              >
-                {buttonText}
-              </Button>
-
-              {showCancelButton && (
-                <Button
-                  w="full"
-                  size="lg"
-                  fontSize="md"
-                  variant="outline"
-                  onClick={handleCancel}
-                >
-                  Cancel
-                </Button>
-              )}
-            </Flex>
+              {buttonText}
+            </Button>
           )}
         </HStack>
       </VStack>

components/settings/Account/validations.ts

@@ -16,8 +16,8 @@ export const accountValidationSchema = z.object({
 });
 
 export const accountValidationOptionalSchema = z.object({
+  email: emailValidation,
   name: nameValidation.or(z.literal("")),
-  email: emailValidation.or(z.literal("")),
 });
 
 export const emailConfirmationValidationSchema = z.object({