feat(clerk-js,types): Default to terms_url, privacy_policy_url and he…

…lp_url from display config
clerk · Apr 15, 2024 · 68bfecc · 68bfecc
1 parent 22f19d3
commit 68bfecc
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/.changeset/short-ants-fry.md b/.changeset/short-ants-fry.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Default to terms, privacy policy and help URLs that are set in the dashboard. `termsPageUrl`, `privacyPageUrl` and `helpPageUrl` inside `appearance.layout` are still prioritized.
diff --git 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
@@ -80,8 +80,13 @@ const CardFooterLink = (props: PropsOfComponent<typeof Link>): 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 = termsPageUrl || termsUrl;
+  const resolvedPrivacyPolicyUrl = privacyPageUrl || privacyPolicyUrl;
+  const resolvedHelpUrl = helpPageUrl || helpUrl;
+
+  if (!resolvedTermsUrl && !resolvedPrivacyPolicyUrl && !resolvedHelpUrl) return null;
 
   return (
     <Flex
@@ -99,23 +104,23 @@ export const CardFooterLinks = React.memo((): JSX.Element | null => {
           localizationKey={localizationKeys('footerPageLink__help')}
           elementId={descriptors.footerPagesLink.setId('help')}
           isExternal
-          href={helpPageUrl}
+          href={resolvedHelpUrl}
         />
       )}
       {privacyPageUrl && (
         <CardFooterLink
           localizationKey={localizationKeys('footerPageLink__privacy')}
           elementId={descriptors.footerPagesLink.setId('privacy')}
           isExternal
-          href={privacyPageUrl}
+          href={resolvedPrivacyPolicyUrl}
         />
       )}
       {termsPageUrl && (
         <CardFooterLink
           localizationKey={localizationKeys('footerPageLink__terms')}
           elementId={descriptors.footerPagesLink.setId('terms')}
           isExternal
-          href={termsPageUrl}
+          href={resolvedTermsUrl}
         />
       )}
     </Flex>

diff --git 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<typeof Flex>) => {
   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 = termsPageUrl || termsUrl;
+  const resolvedPrivacyPolicyUrl = privacyPageUrl || privacyPolicyUrl;
+  const resolvedHelpUrl = helpPageUrl || helpUrl;
+
+  const shouldShowTagOrLinks = branded || resolvedPrivacyPolicyUrl || resolvedTermsUrl || resolvedHelpUrl;
 
   return (
     <Col

diff --git a/packages/types/src/displayConfig.ts b/packages/types/src/displayConfig.ts
@@ -23,7 +23,10 @@ export interface DisplayConfigJSON {
   preferred_sign_in_strategy: PreferredSignInStrategy;
   sign_in_url: string;
   sign_up_url: string;
-  support_email: string;
+  support_email: string | null;
+  terms_url: string | null;
+  privacy_policy_url: string | null;
+  help_url: string | null;
   theme: DisplayThemeJSON;
   user_profile_url: string;
   clerk_js_version?: string;
@@ -53,6 +56,9 @@ export interface DisplayConfigResource extends ClerkResource {
   signInUrl: string;
   signUpUrl: string;
   supportEmail: string;
+  termsUrl: string;
+  privacyPolicyUrl: string;
+  helpUrl: string;
   theme: DisplayThemeJSON;
   userProfileUrl: string;
   clerkJSVersion?: string;