feat(clerk-js,types): Priotize terms, privacy and help URLs set in th…

…e dashboard
clerk · Apr 15, 2024 · 4a9a257 · 4a9a257
1 parent 22f19d3
commit 4a9a257
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 7 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
+---
+
+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
@@ -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 = termsUrl || termsPageUrl;
+  const resolvedPrivacyPolicyUrl = privacyPolicyUrl || privacyPageUrl;
+  const resolvedHelpUrl = helpUrl || helpPageUrl;
+
+  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 = termsUrl || termsPageUrl;
+  const resolvedPrivacyPolicyUrl = privacyPolicyUrl || privacyPageUrl;
+  const resolvedHelpUrl = helpUrl || helpPageUrl;
+
+  const shouldShowTagOrLinks = branded || resolvedPrivacyPolicyUrl || resolvedTermsUrl || resolvedHelpUrl;
 
   return (
     <Col

diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -579,16 +579,19 @@ export type Layout = {
   /**
    * This options enables the "Terms" link which is, by default, displayed on the bottom-right corner of the
    * prebuilt components. Clicking the link will open the passed URL in a new tab
+   * @deprecated Set your terms page URL in the dashboard instead
    */
   termsPageUrl?: string;
   /**
    * This options enables the "Help" link which is, by default, displayed on the bottom-right corner of the
    * prebuilt components. Clicking the link will open the passed URL in a new tab
+   * @deprecated Set your help page URL in the dashboard instead
    */
   helpPageUrl?: string;
   /**
    * This options enables the "Privacy" link which is, by default, displayed on the bottom-right corner of the
    * prebuilt components. Clicking the link will open the passed URL in a new tab
+   * @deprecated Set your privacy page URL in the dashboard instead
    */
   privacyPageUrl?: string;
   /**

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;
@@ -52,7 +55,10 @@ export interface DisplayConfigResource extends ClerkResource {
   preferredSignInStrategy: PreferredSignInStrategy;
   signInUrl: string;
   signUpUrl: string;
-  supportEmail: string;
+  supportEmail: string | null;
+  termsUrl: string | null;
+  privacyPolicyUrl: string | null;
+  helpUrl: string | null;
   theme: DisplayThemeJSON;
   userProfileUrl: string;
   clerkJSVersion?: string;