Display legal field only based on missing fields

Author: LauraBeatris

packages/clerk-js/src/test/fixture-helpers.ts

@@ -275,6 +275,7 @@ const createSignUpFixtureHelpers = (baseClient: ClientJSON) => {
       status: 'missing_requirements',
       legal_accepted_at: null,
       missing_fields: ['legal_accepted'],
+      unverified_fields: [],
     } as SignUpJSON;
   };
 

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

@@ -1,7 +1,7 @@
 import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
 import { useClerk } from '@clerk/shared/react';
 import type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/shared/types';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { isClerkAPIResponseError } from '@/index.headless';
 import { Card } from '@/ui/elements/Card';
@@ -130,6 +130,15 @@ function SignUpStartInternal(): JSX.Element {
   const isLegalConsentEnabled = userSettings.signUp.legal_consent_enabled;
   const oidcPrompt = ctx.oidcPrompt;
 
+  const onlyLegalAcceptedMissing = useMemo(
+    () =>
+      signUp.missingFields &&
+      signUp.missingFields.length === 1 &&
+      signUp.missingFields[0] === 'legal_accepted' &&
+      signUp.unverifiedFields &&
+      signUp.unverifiedFields.length === 0,
+    [signUp.missingFields, signUp.unverifiedFields],
+  );
   const fields = determineActiveFields({
     attributes,
     hasTicket: hasTicket || hasExistingSignUpWithTicket,
@@ -445,6 +454,7 @@ function SignUpStartInternal(): JSX.Element {
                     formState={formState}
                     canToggleEmailPhone={canToggleEmailPhone}
                     handleEmailPhoneToggle={handleChangeActive}
+                    onlyLegalAcceptedMissing={onlyLegalAcceptedMissing}
                   />
                 )}
               </SocialButtonsReversibleContainerWithDivider>

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

@@ -352,6 +352,24 @@ describe('SignUpStart', () => {
       screen.getByText('Terms of Service');
       screen.getByText('Privacy Policy');
     });
+
+    it('displays legal consent only if included in missing fields without unverified fields', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withEmailAddress({ required: true });
+        f.withPassword({ required: true });
+        f.startSignUpWithMissingLegalAccepted();
+        f.withLegalConsent();
+        f.withTermsPrivacyPolicyUrls({
+          privacyPolicy: 'https://clerk.dev/privacy',
+          termsOfService: 'https://clerk.dev/tos',
+        });
+      });
+      const { getByText, queryByText } = render(<SignUpStart />, { wrapper });
+      expect(getByText('Terms of Service')).toBeVisible();
+      expect(getByText('Privacy Policy')).toBeVisible();
+      expect(queryByText('Phone number')).not.toBeInTheDocument();
+      expect(queryByText('Password')).not.toBeInTheDocument();
+    });
   });
 
   describe('ticket flow', () => {