fix(clerk-js): Show unverified fields if any when ToS is enabled (#5404)

Co-authored-by: panteliselef <[email protected]>

Author: octoper

.changeset/all-buckets-admire.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix issue where unverified field weren't showing up when ToS was enabled

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "577.5kB" },
+    { "path": "./dist/clerk.js", "maxSize": "577.51kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "78.5kB" },
     { "path": "./dist/clerk.headless.js", "maxSize": "51KB" },
     { "path": "./dist/ui-common*.js", "maxSize": "94KB" },
@@ -12,7 +12,7 @@
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "12.4KB" },
-    { "path": "./dist/signup*.js", "maxSize": "6.55KB" },
+    { "path": "./dist/signup*.js", "maxSize": "6.57KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "15KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },

packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx

@@ -59,7 +59,7 @@ function SignUpContinueInternal() {
       label: localizationKeys('formFieldLabel__lastName'),
       placeholder: localizationKeys('formFieldInputPlaceholder__lastName'),
     }),
-    emailAddress: useFormControl('emailAddress', initialValues.emailAddress || '', {
+    emailAddress: useFormControl('emailAddress', initialValues.emailAddress || signUp.emailAddress || '', {
       type: 'email',
       label: localizationKeys('formFieldLabel__emailAddress'),
       placeholder: localizationKeys('formFieldInputPlaceholder__emailAddress'),
@@ -91,8 +91,13 @@ function SignUpContinueInternal() {
   } as const;
 
   const onlyLegalConsentMissing = useMemo(
-    () => signUp.missingFields && signUp.missingFields.length === 1 && signUp.missingFields[0] === 'legal_accepted',
-    [signUp.missingFields],
+    () =>
+      signUp.missingFields &&
+      signUp.missingFields.length === 1 &&
+      signUp.missingFields[0] === 'legal_accepted' &&
+      signUp.unverifiedFields &&
+      signUp.unverifiedFields.length === 0,
+    [signUp.missingFields, signUp.unverifiedFields],
   );
 
   useEffect(() => {

packages/clerk-js/src/ui/components/SignUp/__tests__/SignUpContinue.test.tsx

@@ -96,6 +96,23 @@ describe('SignUpContinue', () => {
     screen.getByText(/Privacy Policy/i);
   });
 
+  it('renders the component if there is a persisted sign up and legal accepted is missing and email address is unverified', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withEmailAddress({ required: true });
+      f.withPassword({ required: true });
+      f.startSignUpWithMissingLegalAcceptedAndUnverifiedFields();
+      f.withLegalConsent();
+      f.withTermsPrivacyPolicyUrls({
+        privacyPolicy: 'https://clerk.dev/privacy',
+        termsOfService: 'https://clerk.dev/tos',
+      });
+    });
+    const screen = render(<SignUpContinue />, { wrapper });
+    expect(screen.queryByText(/email address/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Privacy Policy/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Terms Of Service/i)).toBeInTheDocument();
+  });
+
   it.each(OAUTH_PROVIDERS)('shows the "Continue with $name" social OAuth button', async ({ provider, name }) => {
     const { wrapper } = await createFixtures(f => {
       f.withEmailAddress({ required: true });

packages/clerk-js/src/ui/utils/test/fixtureHelpers.ts

@@ -251,6 +251,7 @@ const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {
         },
       },
       missing_fields: [],
+      unverified_fields: emailVerificationStatus === 'unverified' ? ['email_address'] : [],
     } as SignUpJSON;
   };
 
@@ -272,7 +273,23 @@ const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {
     } as SignUpJSON;
   };
 
-  return { startSignUpWithEmailAddress, startSignUpWithPhoneNumber, startSignUpWithMissingLegalAccepted };
+  const startSignUpWithMissingLegalAcceptedAndUnverifiedFields = (emailAddress = '[email protected]') => {
+    baseClient.sign_up = {
+      id: 'sua_2HseAXFGN12eqlwARPMxyyUa9o9',
+      status: 'missing_requirements',
+      legal_accepted_at: null,
+      missing_fields: ['legal_accepted'],
+      email_address: emailAddress,
+      unverified_fields: ['email_address'],
+    } as SignUpJSON;
+  };
+
+  return {
+    startSignUpWithEmailAddress,
+    startSignUpWithPhoneNumber,
+    startSignUpWithMissingLegalAccepted,
+    startSignUpWithMissingLegalAcceptedAndUnverifiedFields,
+  };
 };
 
 const createAuthConfigFixtureHelpers = (environment: EnvironmentJSON) => {