diff --git a/.changeset/short-ants-fry.md b/.changeset/short-ants-fry.md new file mode 100644 index 00000000000..936836c3363 --- /dev/null +++ b/.changeset/short-ants-fry.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': minor +'@clerk/types': minor +--- + +Priotize terms, privacy policy and help URLs that are set in the dashboard. `termsPageUrl`, `privacyPageUrl` and `helpPageUrl` inside `appearance.layout` have been deprecated. diff --git a/packages/clerk-js/src/core/resources/DisplayConfig.ts b/packages/clerk-js/src/core/resources/DisplayConfig.ts index 222aad45fc6..60b843a0488 100644 --- a/packages/clerk-js/src/core/resources/DisplayConfig.ts +++ b/packages/clerk-js/src/core/resources/DisplayConfig.ts @@ -29,6 +29,9 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource signInUrl!: string; signUpUrl!: string; supportEmail!: string; + termsUrl!: string; + privacyPolicyUrl!: string; + helpUrl!: string; theme!: DisplayThemeJSON; userProfileUrl!: string; clerkJSVersion?: string; @@ -68,6 +71,9 @@ export class DisplayConfig extends BaseResource implements DisplayConfigResource this.captchaPublicKey = data.captcha_public_key; this.captchaWidgetType = data.captcha_widget_type; this.supportEmail = data.support_email || ''; + this.termsUrl = data.terms_url || ''; + this.privacyPolicyUrl = data.privacy_policy_url || ''; + this.helpUrl = data.help_url || ''; this.clerkJSVersion = data.clerk_js_version; this.organizationProfileUrl = data.organization_profile_url; this.createOrganizationUrl = data.create_organization_url; diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx index cc77ee82b94..95af117cecb 100644 --- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx +++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx @@ -80,8 +80,13 @@ const CardFooterLink = (props: PropsOfComponent): JSX.Element => { export const CardFooterLinks = React.memo((): JSX.Element | null => { const { helpPageUrl, privacyPageUrl, termsPageUrl } = useAppearance().parsedLayout; + const { termsUrl, privacyPolicyUrl, helpUrl } = useEnvironment().displayConfig; - if (!helpPageUrl && !privacyPageUrl && !termsPageUrl) return null; + const resolvedTermsUrl = termsUrl || termsPageUrl; + const resolvedPrivacyPolicyUrl = privacyPolicyUrl || privacyPageUrl; + const resolvedHelpUrl = helpUrl || helpPageUrl; + + if (!resolvedTermsUrl && !resolvedPrivacyPolicyUrl && !resolvedHelpUrl) return null; return ( { localizationKey={localizationKeys('footerPageLink__help')} elementId={descriptors.footerPagesLink.setId('help')} isExternal - href={helpPageUrl} + href={resolvedHelpUrl} /> )} {privacyPageUrl && ( @@ -107,7 +112,7 @@ export const CardFooterLinks = React.memo((): JSX.Element | null => { localizationKey={localizationKeys('footerPageLink__privacy')} elementId={descriptors.footerPagesLink.setId('privacy')} isExternal - href={privacyPageUrl} + href={resolvedPrivacyPolicyUrl} /> )} {termsPageUrl && ( @@ -115,7 +120,7 @@ export const CardFooterLinks = React.memo((): JSX.Element | null => { localizationKey={localizationKeys('footerPageLink__terms')} elementId={descriptors.footerPagesLink.setId('terms')} isExternal - href={termsPageUrl} + href={resolvedTermsUrl} /> )} diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx index 1ccdf83a74c..17cfd23aff8 100644 --- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx +++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx @@ -57,7 +57,13 @@ const PopoverCardFooter = (props: PropsOfComponent) => { const { sx, children, ...rest } = props; const { branded } = useEnvironment().displayConfig; const { privacyPageUrl, termsPageUrl, helpPageUrl } = useAppearance().parsedLayout; - const shouldShowTagOrLinks = branded || privacyPageUrl || termsPageUrl || helpPageUrl; + const { termsUrl, privacyPolicyUrl, helpUrl } = useEnvironment().displayConfig; + + const resolvedTermsUrl = termsUrl || termsPageUrl; + const resolvedPrivacyPolicyUrl = privacyPolicyUrl || privacyPageUrl; + const resolvedHelpUrl = helpUrl || helpPageUrl; + + const shouldShowTagOrLinks = branded || resolvedPrivacyPolicyUrl || resolvedTermsUrl || resolvedHelpUrl; return (