From fbd23ef022761205e4eb7942d5d996ff721a8e3a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 7 Oct 2025 18:11:29 -0700
Subject: [PATCH] chore: update the text below CNAME config errors

The old text either did not include anything about CAA records or it
wasn't clear enough that an "issue" policy for certainly.com is needed.
---
 src/lib/components/domains/cnameAlert.svelte  | 19 +++++++++++++++++
 src/lib/components/domains/cnameTable.svelte  | 21 +++----------------
 src/lib/components/domains/recordTable.svelte | 19 +++--------------
 .../domains/recordsCard.svelte                | 12 ++---------
 4 files changed, 27 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/components/domains/cnameAlert.svelte

diff --git a/src/lib/components/domains/cnameAlert.svelte b/src/lib/components/domains/cnameAlert.svelte
new file mode 100644
index 0000000000..723016b755
--- /dev/null
+++ b/src/lib/components/domains/cnameAlert.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Link } from '$lib/elements';
+    import { Alert, InlineCode } from '@appwrite.io/pink-svelte';
+</script>
+
+<Alert.Inline>
+    <p>
+        If your domain uses CAA records, ensure there is an <InlineCode code="issue" /> policy for <InlineCode
+            code="certainly.com" /> - otherwise, SSL setup may fail.
+    </p>
+    <br />
+    <p>
+        A list of all domain providers and their DNS setting is available <Link
+            variant="muted"
+            external
+            href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
+        >.
+    </p>
+</Alert.Inline>
diff --git a/src/lib/components/domains/cnameTable.svelte b/src/lib/components/domains/cnameTable.svelte
index b198524da2..417c4a79f9 100644
--- a/src/lib/components/domains/cnameTable.svelte
+++ b/src/lib/components/domains/cnameTable.svelte
@@ -1,15 +1,7 @@
 <script lang="ts">
-    import { Link } from '$lib/elements';
-    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import {
-        Badge,
-        Layout,
-        Typography,
-        Table,
-        Icon,
-        InteractiveText
-    } from '@appwrite.io/pink-svelte';
+    import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import CnameAlert from './cnameAlert.svelte';
 
     export let domain: string;
     export let verified = undefined;
@@ -53,13 +45,6 @@
         </Table.Row.Base>
     </Table.Root>
     <Layout.Stack gap="s" direction="row" alignItems="center">
-        <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
-        <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-            A list of all domain providers and their DNS setting is available <Link
-                variant="muted"
-                external
-                href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
-            >.
-        </Typography.Text>
+        <CnameAlert />
     </Layout.Stack>
 </Layout.Stack>
diff --git a/src/lib/components/domains/recordTable.svelte b/src/lib/components/domains/recordTable.svelte
index 14683b7218..40c5f9058a 100644
--- a/src/lib/components/domains/recordTable.svelte
+++ b/src/lib/components/domains/recordTable.svelte
@@ -1,14 +1,8 @@
 <script lang="ts">
     import { Link } from '$lib/elements';
-    import {
-        Badge,
-        Layout,
-        Typography,
-        Table,
-        InteractiveText,
-        Alert
-    } from '@appwrite.io/pink-svelte';
+    import { Badge, Layout, Typography, Table, InteractiveText } from '@appwrite.io/pink-svelte';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import CnameAlert from './cnameAlert.svelte';
 
     export let domain: string;
     export let verified = undefined;
@@ -65,14 +59,7 @@
     </Table.Root>
     <Layout.Stack gap="s" direction="row" alignItems="center">
         {#if variant === 'cname'}
-            <Alert.Inline>
-                If your domain uses CAA records, ensure certainly.com is authorized — otherwise, SSL
-                setup may fail. A list of all domain providers and their DNS setting is available <Link
-                    variant="muted"
-                    external
-                    href="https://appwrite.io/docs/advanced/platform/custom-domains">here</Link
-                >.
-            </Alert.Inline>
+            <CnameAlert />
         {:else}
             <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                 A list of all domain providers and their DNS setting is available <Link
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte
index 07a2da2c42..2d09c1b055 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/recordsCard.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
-    import { Link } from '$lib/elements';
-    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import {
         Badge,
         Layout,
         Typography,
         Table,
         Fieldset,
-        Icon,
         InteractiveText
     } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
     import { regionalConsoleVariables } from '$routes/(console)/project-[region]-[project]/store';
+    import CnameAlert from '$lib/components/domains/cnameAlert.svelte';
 
     export let proxyRule: Models.ProxyRule;
 </script>
@@ -48,13 +46,7 @@
                 </Table.Row.Base>
             </Table.Root>
             <Layout.Stack gap="s" direction="row" alignItems="center">
-                <Icon icon={IconInfo} size="s" color="--fgcolor-neutral-secondary" />
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                    A list of all domain providers and their DNS setting is available <Link
-                        variant="muted"
-                        href="#">here</Link
-                    >.
-                </Typography.Text>
+                <CnameAlert />
             </Layout.Stack>
         </Layout.Stack>
         <slot />