From 68bfeccd2b2a506ff2e9b2c6043caced3152b76c Mon Sep 17 00:00:00 2001
From: George Desipris <george.desipris.56@gmail.com>
Date: Mon, 15 Apr 2024 23:39:15 +0300
Subject: [PATCH] feat(clerk-js,types): Default to terms_url,
 privacy_policy_url and help_url from display config

---
 .changeset/short-ants-fry.md                        |  6 ++++++
 .../clerk-js/src/core/resources/DisplayConfig.ts    |  6 ++++++
 .../clerk-js/src/ui/elements/Card/CardFooter.tsx    | 13 +++++++++----
 packages/clerk-js/src/ui/elements/PopoverCard.tsx   |  8 +++++++-
 packages/types/src/displayConfig.ts                 |  8 +++++++-
 5 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/short-ants-fry.md

diff --git a/.changeset/short-ants-fry.md b/.changeset/short-ants-fry.md
new file mode 100644
index 0000000000..ce8dd86e0e
--- /dev/null
+++ 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
index 222aad45fc..60b843a048 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 cc77ee82b9..9ac1d992ad 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<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,7 +104,7 @@ export const CardFooterLinks = React.memo((): JSX.Element | null => {
           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}
         />
       )}
     </Flex>
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 1ccdf83a74..10fd35033b 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<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
index c7039c82ef..cc8e7cfb6c 100644
--- 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;