Skip to content

Commit cc24c81

Browse files
octoperanagstef
octoper
and
anagstef
authored
feat(clerk-js,elements,types,localization): Make legal consent stable (#4487)
Co-authored-by: Stefanos Anagnostou <anagstef@users.noreply.github.com>
1 parent 0e443ad commit cc24c81

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+484
-490
lines changed

‎.changeset/twenty-rules-boil.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@clerk/localizations': minor
3+
'@clerk/clerk-js': minor
4+
'@clerk/elements': minor
5+
'@clerk/types': minor
6+
'@clerk/ui': patch
7+
---
8+
9+
The Legal consent feature is now stable.
10+
11+
Removed the `__experimental_` preffix.

‎integration/testUtils/commonPageObject.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const common = ({ page }: TestArgs) => {
4242
return page.locator('input[name=password]');
4343
},
4444
getLegalAccepted: () => {
45-
return page.locator('input[name=__experimental_legalAccepted]');
45+
return page.locator('input[name=legalAccepted]');
4646
},
4747
getFirstNameInput: () => {
4848
return page.locator('input[name=firstName]');

‎packages/clerk-js/src/core/clerk.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1480,7 +1480,7 @@ export class Clerk implements ClerkInterface {
14801480
return this.client?.signUp.create({
14811481
strategy: 'google_one_tap',
14821482
token: params.token,
1483-
__experimental_legalAccepted: params.__experimental_legalAccepted,
1483+
legalAccepted: params.legalAccepted,
14841484
});
14851485
}
14861486
throw err;
@@ -1501,7 +1501,7 @@ export class Clerk implements ClerkInterface {
15011501
customNavigate,
15021502
unsafeMetadata,
15031503
strategy,
1504-
__experimental_legalAccepted,
1504+
legalAccepted,
15051505
}: ClerkAuthenticateWithWeb3Params): Promise<void> => {
15061506
if (!this.client || !this.environment) {
15071507
return;
@@ -1524,7 +1524,7 @@ export class Clerk implements ClerkInterface {
15241524
generateSignature,
15251525
unsafeMetadata,
15261526
strategy,
1527-
__experimental_legalAccepted,
1527+
legalAccepted,
15281528
});
15291529

15301530
if (

‎packages/clerk-js/src/core/resources/SignUp.ts‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -112,12 +112,6 @@ export class SignUp extends BaseResource implements SignUpResource {
112112
paramsWithCaptcha.strategy = SignUp.clerk.client?.signIn.firstFactorVerification.strategy;
113113
}
114114

115-
// TODO(@vaggelis): Remove this once the legalAccepted is stable
116-
if (typeof params.__experimental_legalAccepted !== 'undefined') {
117-
paramsWithCaptcha.legalAccepted = params.__experimental_legalAccepted;
118-
paramsWithCaptcha.__experimental_legalAccepted = undefined;
119-
}
120-
121115
return this._basePost({
122116
path: this.pathRoot,
123117
body: normalizeUnsafeMetadata(paramsWithCaptcha),
@@ -199,15 +193,15 @@ export class SignUp extends BaseResource implements SignUpResource {
199193
public authenticateWithWeb3 = async (
200194
params: AuthenticateWithWeb3Params & {
201195
unsafeMetadata?: SignUpUnsafeMetadata;
202-
__experimental_legalAccepted?: boolean;
196+
legalAccepted?: boolean;
203197
},
204198
): Promise<SignUpResource> => {
205199
const {
206200
generateSignature,
207201
identifier,
208202
unsafeMetadata,
209203
strategy = 'web3_metamask_signature',
210-
__experimental_legalAccepted,
204+
legalAccepted,
211205
} = params || {};
212206
const provider = strategy.replace('web3_', '').replace('_signature', '') as Web3Provider;
213207

@@ -216,7 +210,7 @@ export class SignUp extends BaseResource implements SignUpResource {
216210
}
217211

218212
const web3Wallet = identifier || this.web3wallet!;
219-
await this.create({ web3Wallet, unsafeMetadata, __experimental_legalAccepted: __experimental_legalAccepted });
213+
await this.create({ web3Wallet, unsafeMetadata, legalAccepted });
220214
await this.prepareWeb3WalletVerification({ strategy });
221215

222216
const { message } = this.verifications.web3Wallet;
@@ -247,7 +241,7 @@ export class SignUp extends BaseResource implements SignUpResource {
247241

248242
public authenticateWithMetamask = async (
249243
params?: SignUpAuthenticateWithWeb3Params & {
250-
__experimental_legalAccepted?: boolean;
244+
legalAccepted?: boolean;
251245
},
252246
): Promise<SignUpResource> => {
253247
const identifier = await getMetamaskIdentifier();
@@ -256,13 +250,13 @@ export class SignUp extends BaseResource implements SignUpResource {
256250
generateSignature: generateSignatureWithMetamask,
257251
unsafeMetadata: params?.unsafeMetadata,
258252
strategy: 'web3_metamask_signature',
259-
__experimental_legalAccepted: params?.__experimental_legalAccepted,
253+
legalAccepted: params?.legalAccepted,
260254
});
261255
};
262256

263257
public authenticateWithCoinbaseWallet = async (
264258
params?: SignUpAuthenticateWithWeb3Params & {
265-
__experimental_legalAccepted?: boolean;
259+
legalAccepted?: boolean;
266260
},
267261
): Promise<SignUpResource> => {
268262
const identifier = await getCoinbaseWalletIdentifier();
@@ -271,7 +265,7 @@ export class SignUp extends BaseResource implements SignUpResource {
271265
generateSignature: generateSignatureWithCoinbaseWallet,
272266
unsafeMetadata: params?.unsafeMetadata,
273267
strategy: 'web3_coinbase_wallet_signature',
274-
__experimental_legalAccepted: params?.__experimental_legalAccepted,
268+
legalAccepted: params?.legalAccepted,
275269
});
276270
};
277271

@@ -282,7 +276,7 @@ export class SignUp extends BaseResource implements SignUpResource {
282276
continueSignUp = false,
283277
unsafeMetadata,
284278
emailAddress,
285-
__experimental_legalAccepted,
279+
legalAccepted,
286280
}: AuthenticateWithRedirectParams & {
287281
unsafeMetadata?: SignUpUnsafeMetadata;
288282
}): Promise<void> => {
@@ -293,7 +287,7 @@ export class SignUp extends BaseResource implements SignUpResource {
293287
actionCompleteRedirectUrl: redirectUrlComplete,
294288
unsafeMetadata,
295289
emailAddress,
296-
__experimental_legalAccepted,
290+
legalAccepted,
297291
};
298292
return continueSignUp && this.id ? this.update(params) : this.create(params);
299293
};
@@ -320,13 +314,6 @@ export class SignUp extends BaseResource implements SignUpResource {
320314
};
321315

322316
update = (params: SignUpUpdateParams): Promise<SignUpResource> => {
323-
// TODO(@vaggelis): Remove this once the legalAccepted is stable
324-
if (typeof params.__experimental_legalAccepted !== 'undefined') {
325-
// @ts-expect-error - We need to remove the __experimental_legalAccepted key from the params
326-
params.legalAccepted = params.__experimental_legalAccepted;
327-
params.__experimental_legalAccepted = undefined;
328-
}
329-
330317
return this._basePatch({
331318
body: normalizeUnsafeMetadata(params),
332319
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function _SignUpContinue() {
7171
placeholder: localizationKeys('formFieldInputPlaceholder__password'),
7272
validatePassword: true,
7373
}),
74-
__experimental_legalAccepted: useFormControl('__experimental_legalAccepted', '', {
74+
legalAccepted: useFormControl('legalAccepted', '', {
7575
type: 'checkbox',
7676
label: '',
7777
defaultChecked: false,
@@ -171,11 +171,11 @@ function _SignUpContinue() {
171171

172172
const headerTitle = !onlyLegalConsentMissing
173173
? localizationKeys('signUp.continue.title')
174-
: localizationKeys('signUp.__experimental_legalConsent.continue.title');
174+
: localizationKeys('signUp.legalConsent.continue.title');
175175

176176
const headerSubtitle = !onlyLegalConsentMissing
177177
? localizationKeys('signUp.continue.subtitle')
178-
: localizationKeys('signUp.__experimental_legalConsent.continue.subtitle');
178+
: localizationKeys('signUp.legalConsent.continue.subtitle');
179179

180180
return (
181181
<Flow.Part part='complete'>

‎packages/clerk-js/src/ui/components/SignUp/SignUpForm.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,11 @@ export const SignUpForm = (props: SignUpFormProps) => {
120120
width: '100%',
121121
}}
122122
>
123-
{shouldShow('__experimental_legalAccepted') && (
124-
<Form.ControlRow elementId='__experimental_legalAccepted'>
123+
{shouldShow('legalAccepted') && (
124+
<Form.ControlRow elementId='legalAccepted'>
125125
<LegalCheckbox
126-
{...formState.__experimental_legalAccepted.props}
127-
isRequired={fields.__experimental_legalAccepted?.required}
126+
{...formState.legalAccepted.props}
127+
isRequired={fields.legalAccepted?.required}
128128
/>
129129
</Form.ControlRow>
130130
)}

‎packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
3535
redirectUrlComplete,
3636
strategy,
3737
unsafeMetadata: ctx.unsafeMetadata,
38-
__experimental_legalAccepted: props.legalAccepted,
38+
legalAccepted: props.legalAccepted,
3939
})
4040
.catch(err => handleError(err, [], card.setError));
4141
}}
@@ -47,7 +47,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
4747
signUpContinueUrl: 'continue',
4848
unsafeMetadata: ctx.unsafeMetadata,
4949
strategy,
50-
__experimental_legalAccepted: props.legalAccepted,
50+
legalAccepted: props.legalAccepted,
5151
})
5252
.catch(err => handleError(err, [], card.setError));
5353
}}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function _SignUpStart(): JSX.Element {
8181
label: localizationKeys('formFieldLabel__phoneNumber'),
8282
placeholder: localizationKeys('formFieldInputPlaceholder__phoneNumber'),
8383
}),
84-
__experimental_legalAccepted: useFormControl('__experimental_legalAccepted', '', {
84+
legalAccepted: useFormControl('legalAccepted', '', {
8585
type: 'checkbox',
8686
label: '',
8787
defaultChecked: false,
@@ -281,7 +281,7 @@ function _SignUpStart(): JSX.Element {
281281
enableOAuthProviders={showOauthProviders}
282282
enableWeb3Providers={showWeb3Providers}
283283
continueSignUp={missingRequirementsWithTicket}
284-
legalAccepted={Boolean(formState.__experimental_legalAccepted.checked) || undefined}
284+
legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}
285285
/>
286286
)}
287287
{shouldShowForm && (
@@ -295,10 +295,10 @@ function _SignUpStart(): JSX.Element {
295295
)}
296296
</SocialButtonsReversibleContainerWithDivider>
297297
{!shouldShowForm && isLegalConsentEnabled && (
298-
<Form.ControlRow elementId='__experimental_legalAccepted'>
298+
<Form.ControlRow elementId='legalAccepted'>
299299
<LegalCheckbox
300-
{...formState.__experimental_legalAccepted.props}
301-
isRequired={fields.__experimental_legalAccepted?.required}
300+
{...formState.legalAccepted.props}
301+
isRequired={fields.legalAccepted?.required}
302302
/>
303303
</Form.ControlRow>
304304
)}

‎packages/clerk-js/src/ui/components/SignUp/signUpFormHelpers.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const FieldKeys = [
1616
'lastName',
1717
'password',
1818
'ticket',
19-
'__experimental_legalAccepted',
19+
'legalAccepted',
2020
] as const;
2121
export type FieldKey = (typeof FieldKeys)[number];
2222

@@ -91,7 +91,7 @@ export function minimizeFieldsForExistingSignup(fields: Fields, signUp: SignUpRe
9191
}
9292

9393
if (hasLegalAccepted) {
94-
delete fields.__experimental_legalAccepted;
94+
delete fields.legalAccepted;
9595
}
9696

9797
// Hide any non-required fields
@@ -148,7 +148,7 @@ function getField(fieldKey: FieldKey, fieldProps: FieldDeterminationProps): Fiel
148148
return getPasswordField(fieldProps.attributes);
149149
case 'ticket':
150150
return getTicketField(fieldProps.hasTicket);
151-
case '__experimental_legalAccepted':
151+
case 'legalAccepted':
152152
return getLegalAcceptedField(fieldProps.legalConsentRequired);
153153
case 'username':
154154
case 'firstName':

‎packages/clerk-js/src/ui/elements/LegalConsentCheckbox.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useEnvironment } from '../../ui/contexts';
2+
import { sanitizeInputProps, useFormField } from '../../ui/primitives/hooks';
23
import type { LocalizationKey } from '../customizables';
34
import {
45
descriptors,
@@ -16,40 +17,49 @@ import { LinkRenderer } from './LinkRenderer';
1617
const LegalCheckboxLabel = (props: { termsUrl?: string; privacyPolicyUrl?: string }) => {
1718
const { termsUrl, privacyPolicyUrl } = props;
1819
const { t } = useLocalizations();
20+
const formField = useFormField();
21+
const { placeholder, ...inputProps } = sanitizeInputProps(formField);
1922
let localizationKey: LocalizationKey | undefined;
2023

2124
if (termsUrl && privacyPolicyUrl) {
22-
localizationKey = localizationKeys(
23-
'signUp.__experimental_legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy',
24-
{
25-
termsOfServiceLink: props.termsUrl,
26-
privacyPolicyLink: props.privacyPolicyUrl,
27-
},
28-
);
25+
localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__termsOfServiceAndPrivacyPolicy', {
26+
termsOfServiceLink: props.termsUrl,
27+
privacyPolicyLink: props.privacyPolicyUrl,
28+
});
2929
} else if (termsUrl) {
30-
localizationKey = localizationKeys('signUp.__experimental_legalConsent.checkbox.label__onlyTermsOfService', {
30+
localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyTermsOfService', {
3131
termsOfServiceLink: props.termsUrl,
3232
});
3333
} else if (privacyPolicyUrl) {
34-
localizationKey = localizationKeys('signUp.__experimental_legalConsent.checkbox.label__onlyPrivacyPolicy', {
34+
localizationKey = localizationKeys('signUp.legalConsent.checkbox.label__onlyPrivacyPolicy', {
3535
privacyPolicyLink: props.privacyPolicyUrl,
3636
});
3737
}
3838

3939
return (
40-
<Text
41-
variant='body'
42-
as='span'
40+
<FormLabel
41+
elementDescriptor={descriptors.formFieldCheckboxLabel}
42+
htmlFor={inputProps.id}
43+
isDisabled={inputProps.isDisabled}
44+
sx={t => ({
45+
paddingLeft: t.space.$1x5,
46+
textAlign: 'left',
47+
})}
4348
>
44-
<LinkRenderer
45-
text={t(localizationKey)}
46-
isExternal
47-
sx={t => ({
48-
textDecoration: 'underline',
49-
textUnderlineOffset: t.space.$1,
50-
})}
51-
/>
52-
</Text>
49+
<Text
50+
variant='body'
51+
as='span'
52+
>
53+
<LinkRenderer
54+
text={t(localizationKey)}
55+
isExternal
56+
sx={t => ({
57+
textDecoration: 'underline',
58+
textUnderlineOffset: t.space.$1,
59+
})}
60+
/>
61+
</Text>
62+
</FormLabel>
5363
);
5464
};
5565

@@ -71,21 +81,12 @@ export const LegalCheckbox = (
7181
<Flex justify='center'>
7282
<Field.CheckboxIndicator
7383
elementDescriptor={descriptors.formFieldCheckboxInput}
74-
elementId={descriptors.formFieldInput.setId('__experimental_legalAccepted')}
84+
elementId={descriptors.formFieldInput.setId('legalAccepted')}
85+
/>
86+
<LegalCheckboxLabel
87+
termsUrl={termsLink}
88+
privacyPolicyUrl={privacyPolicy}
7589
/>
76-
<FormLabel
77-
elementDescriptor={descriptors.formFieldCheckboxLabel}
78-
htmlFor={props.itemID}
79-
sx={t => ({
80-
paddingLeft: t.space.$1x5,
81-
textAlign: 'left',
82-
})}
83-
>
84-
<LegalCheckboxLabel
85-
termsUrl={termsLink}
86-
privacyPolicyUrl={privacyPolicy}
87-
/>
88-
</FormLabel>
8990
</Flex>
9091
</Field.Root>
9192
);

0 commit comments

Comments
 (0)