feat: update promo/referral code doc

.gitignore

@@ -1,5 +1,6 @@
 .next
 .source
+next-env.d.ts
 
 # thesse will be automatically filled with the resources from the docs
 public/content

content/docs/using-referral-or-promo-codes-with-superwall.mdx

@@ -22,17 +22,18 @@ Given that information, here is how most referral flows can work:
 
 <Tabs>
   <Tab title="Mobile SDK">
-    ```mermaid
-flowchart TD
-    A([Paywall is shown]) --> B[Referral Code claim<br />button is tapped]
-    B --> C[Custom Action is fired<br />from button tap]
-    C --> D[Responding in your Superwall Delegate,<br />you present your own referral UI<br />over the existing paywall]
+    <Mermaid>
+  {`flowchart TD
+    A([Paywall is shown]) --> B[Referral Code claim\\nbutton is tapped]
+    B --> C[Custom Action is fired\\nfrom button tap]
+    C --> D[Responding in your Superwall Delegate,\\nyou present your own referral UI\\non top of the existing paywall]
 
     D --> E{Code is valid?}
-    E -- NO --> F[Dismiss referral UI,<br />existing paywall is still presented]
-    E -- YES --> G[Dismiss referral UI,<br />dismiss existing paywall.<br />Register placement for the referral code.]
-    G --> H[Present new paywall with<br />discounted product.<br />In Superwall, you can use campaign data to<br />attribute conversions, trials, etc.]
-```
+    E -- NO --> F[Dismiss referral UI,\\nexisting paywall is still presented]
+    E -- YES --> G[Dismiss referral UI,\\ndismiss existing paywall.\\nRegister placement for the referral code.]
+    G --> H[Present new paywall with discounted product.\\nIn Superwall, you can use campaign data\\nto attribute conversions, trials, etc.]
+  `}
+  </Mermaid>
 Now, let's go through each step in detail. We'll assume that you're triggering this flow from a paywall that's already presented, but if that's not the case — just skip to the step where you present your referral entry UI (step four):
 
     <Steps>
@@ -67,6 +68,11 @@ Now, let's go through each step in detail. We'll assume that you're triggering t
             ```
             Using the [`SuperwallDelegate`](/using-superwall-delegate), the app responds to the custom action. It presents a customized referral redemption interface _on top_ of the existing paywall. This is optional, but presenting over the paywall means that the user will be taken back to it if the redemption code entry fails:
 
+
+            <Note>
+                Presenting custom UI on top of an existing paywall is only supported in the native iOS and Android SDKs.
+            </Note>
+
             ```swift
             @Observable
             class SWDelegate: SuperwallDelegate {
@@ -160,4 +166,4 @@ Now, let's go through each step in detail. We'll assume that you're triggering t
     </Step>
     </Steps>
   </Tab>
-</Tabs>
+</Tabs>

package.json

@@ -39,6 +39,7 @@
     "fumadocs-mdx": "13.0.2",
     "fumadocs-ui": "16.0.5",
     "lucide-react": "^0.503.0",
+    "mermaid": "^10.9.1",
     "nanoid": "^5.1.6",
     "next": "16.0.7",
     "react": "^19.1.0",

src/app/global.css

@@ -60,3 +60,12 @@
 svg[data-icon="true"] {      /* ← arrow in current Fumadocs build */
   pointer-events: none;
 }
+
+.mermaid-diagram {
+  overflow-x: auto;
+}
+
+.mermaid-diagram svg {
+  max-width: 100%;
+  height: auto;
+}

src/components/Mermaid.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import mermaid from "mermaid"
+import React from "react"
+
+let mermaidInitialized = false
+
+type MermaidProps = {
+  code?: string
+  children?: React.ReactNode
+}
+
+const getDiagram = ({ code, children }: MermaidProps) => {
+  if (typeof code === "string") return code.trim()
+
+  if (typeof children === "string") {
+    return children.trim()
+  }
+
+  if (Array.isArray(children)) {
+    return children.join("").trim()
+  }
+
+  return ""
+}
+
+export function Mermaid(props: MermaidProps) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const id = React.useId().replace(/:/g, "")
+  const diagram = getDiagram(props)
+
+  React.useEffect(() => {
+    if (!ref.current || !diagram) return
+
+    if (!mermaidInitialized) {
+      const getCssVar = (name: string, fallback: string) => {
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue(name)
+          .trim()
+        return value || fallback
+      }
+
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: "base",
+        themeVariables: {
+          fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+          fontSize: "14px",
+          primaryColor: getCssVar("--color-fd-muted", "#1F2630"),
+          primaryTextColor: getCssVar("--color-fd-foreground", "#F6F8FA"),
+          primaryBorderColor: getCssVar("--color-fd-border", "#2A303C"),
+          lineColor: getCssVar("--color-fd-border", "#2A303C"),
+          secondaryColor: getCssVar("--color-fd-muted", "#1F2630"),
+          tertiaryColor: getCssVar("--color-fd-muted", "#1F2630"),
+        },
+        flowchart: {
+          htmlLabels: false,
+          curve: "linear",
+        },
+      })
+      mermaidInitialized = true
+    }
+
+    const container = ref.current
+    container.innerHTML = ""
+    let cancelled = false
+
+    void mermaid
+      .render(`mermaid-${id}`, diagram)
+      .then(({ svg }) => {
+        if (!cancelled) {
+          container.innerHTML = svg
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          container.textContent = diagram
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [diagram, id])
+
+  return <div ref={ref} className="mermaid-diagram not-prose" />
+}

src/mdx-components.tsx

@@ -13,6 +13,7 @@ import { SdkLatestVersion } from './components/SdkLatestVersion'
 import { GithubInfo as GithubInfoComponent } from 'fumadocs-ui/components/github-info';
 import { WhenLoggedIn, WhenLoggedOut, LoginStatusProvider, BasedOnAuth, LoggedIn, LoggedOut } from './components/LoginStatusContext';
 import { TypeTable } from './components/type-table';
+import { Mermaid } from "./components/Mermaid"
 
 // We'll add custom components here
 
@@ -278,6 +279,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     SdkLatestVersion,
     GithubInfo,
     TypeTable,
+    Mermaid,
     WhenLoggedIn,
     WhenLoggedOut,
     LoginStatusProvider,