@cimplify/sdk 0.40.1 → 0.42.0

package/templates/storefront-bakery/app/track-order/track-order-form.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+/**
+ * Guest order tracker. Routes /orders/<id> with the entered id; the
+ * post-checkout confirmation page already lives at /orders/[id] so this
+ * just sends the visitor there. Replace the redirect with a real lookup
+ * (e.g. Cimplify orders API + email-match guard) for production.
+ */
+export function TrackOrderForm() {
+  const router = useRouter();
+  const [orderId, setOrderId] = useState("");
+  const [email, setEmail] = useState("");
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (!orderId.trim()) return;
+        router.push(`/orders/${encodeURIComponent(orderId.trim())}`);
+      }}
+      className="space-y-4 rounded-2xl border border-border bg-card p-6"
+    >
+      <div>
+        <label
+          htmlFor="orderId"
+          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+        >
+          Order number
+        </label>
+        <input
+          id="orderId"
+          name="orderId"
+          required
+          value={orderId}
+          onChange={(e) => setOrderId(e.target.value)}
+          placeholder="ord_abc123…"
+          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        />
+      </div>
+      <div>
+        <label
+          htmlFor="email"
+          className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+        >
+          Order email
+        </label>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="you@email.com"
+          className="w-full px-4 py-3 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        />
+      </div>
+      <button
+        type="submit"
+        className="w-full inline-flex items-center justify-center px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+      >
+        Track order
+      </button>
+    </form>
+  );
+}

package/templates/storefront-bakery/components/account-iframe.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { CimplifyAccount } from "@cimplify/sdk/react";
+
+/**
+ * Cimplify Account portal — iframe-mounted UI hosted by Cimplify Link.
+ * Handles sign-in, sign-up, OTP, addresses, payment methods, sessions,
+ * and order history. The iframe owns auth state; we just choose which
+ * `section` to land on.
+ */
+export function AccountIframe({ section }: { section?: string }) {
+  return <CimplifyAccount section={section} />;
+}

package/templates/storefront-bakery/components/footer.tsx

@@ -1,127 +1,84 @@
 import Link from "next/link";
+import { brand } from "@/lib/brand";
 
-const SOCIALS: { label: string; href: string; svg: React.ReactNode }[] = [
-  {
-    label: "Instagram",
-    href: "https://instagram.com/akuasbakery",
-    svg: (
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
-        <rect x="3" y="3" width="18" height="18" rx="5" />
-        <circle cx="12" cy="12" r="4" />
-        <circle cx="17.5" cy="6.5" r="0.75" fill="currentColor" />
-      </svg>
-    ),
-  },
-  {
-    label: "TikTok",
-    href: "https://tiktok.com/@akuasbakery",
-    svg: (
-      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
-        <path d="M16 3v3.5a4.5 4.5 0 0 0 4.5 4.5V14a7.5 7.5 0 0 1-4.5-1.5V16a5 5 0 1 1-5-5v3a2 2 0 1 0 2 2V3z" />
-      </svg>
-    ),
-  },
-  {
-    label: "X",
-    href: "https://x.com/akuasbakery",
-    svg: (
-      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
-        <path d="M18 2h3l-7.5 8.6L22 22h-6.6l-5-6.5L4 22H1l8-9.2L1.4 2H8l4.6 6 5.4-6z" />
-      </svg>
-    ),
-  },
-  {
-    label: "Facebook",
-    href: "https://facebook.com/akuasbakery",
-    svg: (
-      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
-        <path d="M14 9V7a1 1 0 0 1 1-1h2V3h-3a4 4 0 0 0-4 4v2H8v3h2v9h3v-9h2.5l.5-3H13z" />
-      </svg>
-    ),
-  },
-  {
-    label: "WhatsApp",
-    href: "https://wa.me/233244000000",
-    svg: (
-      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
-        <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1.1.1-1.7-.1-.4-.1-.9-.3-1.5-.6a8.4 8.4 0 0 1-3.7-3.4c-.7-1-1-1.8-1-2.5 0-.7.4-1.1.6-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c.1.2 0 .3 0 .4l-.3.4-.3.3c-.1.1-.2.2-.1.4.2.4.7 1.1 1.4 1.8.9.8 1.7 1.1 1.9 1.2.2.1.3.1.5-.1l.6-.7c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.4.3.1.2.1.6 0 1z" />
-      </svg>
-    ),
-  },
-];
+const ICONS: Record<string, React.ReactNode> = {
+  instagram: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
+      <rect x="3" y="3" width="18" height="18" rx="5" />
+      <circle cx="12" cy="12" r="4" />
+      <circle cx="17.5" cy="6.5" r="0.75" fill="currentColor" />
+    </svg>
+  ),
+  x: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M18 2h3l-7.5 8.6L22 22h-6.6l-5-6.5L4 22H1l8-9.2L1.4 2H8l4.6 6 5.4-6z" />
+    </svg>
+  ),
+  tiktok: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M16 3v3.5a4.5 4.5 0 0 0 4.5 4.5V14a7.5 7.5 0 0 1-4.5-1.5V16a5 5 0 1 1-5-5v3a2 2 0 1 0 2 2V3z" />
+    </svg>
+  ),
+  facebook: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M14 9V7a1 1 0 0 1 1-1h2V3h-3a4 4 0 0 0-4 4v2H8v3h2v9h3v-9h2.5l.5-3H13z" />
+    </svg>
+  ),
+  youtube: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M22.5 6.5a2.6 2.6 0 0 0-1.8-1.8C19 4.2 12 4.2 12 4.2s-7 0-8.7.5A2.6 2.6 0 0 0 1.5 6.5C1 8.2 1 12 1 12s0 3.8.5 5.5a2.6 2.6 0 0 0 1.8 1.8C5 19.8 12 19.8 12 19.8s7 0 8.7-.5a2.6 2.6 0 0 0 1.8-1.8c.5-1.7.5-5.5.5-5.5s0-3.8-.5-5.5zM10 15.5v-7l6 3.5-6 3.5z" />
+    </svg>
+  ),
+  linkedin: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M4 4h4v16H4zM6 2.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM10 8h4v2.5h.1c.6-1.1 2-2.5 4-2.5 4 0 4.9 2.6 4.9 6V20h-4v-5c0-1.5-.5-3-2.3-3-1.7 0-2.5 1.3-2.5 3v5h-4z" />
+    </svg>
+  ),
+  whatsapp: (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className="w-5 h-5">
+      <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.2-1.4A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.2-1.7 1.2-.5.1-1.1.1-1.7-.1-.4-.1-.9-.3-1.5-.6a8.4 8.4 0 0 1-3.7-3.4c-.7-1-1-1.8-1-2.5 0-.7.4-1.1.6-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c.1.2 0 .3 0 .4l-.3.4-.3.3c-.1.1-.2.2-.1.4.2.4.7 1.1 1.4 1.8.9.8 1.7 1.1 1.9 1.2.2.1.3.1.5-.1l.6-.7c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.4.3.1.2.1.6 0 1z" />
+    </svg>
+  ),
+};
 
-const SITEMAP: { title: string; links: { label: string; href: string }[] }[] = [
-  {
-    title: "Shop",
-    links: [
-      { label: "All products", href: "/shop" },
-      { label: "Breads", href: "/categories/breads" },
-      { label: "Pastries", href: "/categories/pastries" },
-      { label: "Cakes", href: "/categories/cakes" },
-      { label: "Drinks", href: "/categories/drinks" },
-      { label: "Merch & More", href: "/categories/merch" },
-      { label: "Classes & Stays", href: "/categories/classes" },
-    ],
-  },
-  {
-    title: "Bakery",
-    links: [
-      { label: "Our story", href: "/about" },
-      { label: "FAQ", href: "/faq" },
-      { label: "Visit us", href: "/about#visit" },
-      { label: "Wholesale", href: "/categories/merch" },
-    ],
-  },
-  {
-    title: "Help",
-    links: [
-      { label: "Contact", href: "mailto:hello@akuasbakery.test" },
-      { label: "Custom cakes", href: "/faq#custom-cakes--celebrations" },
-      { label: "Allergens", href: "/faq#allergens--ingredients" },
-      { label: "Delivery", href: "/faq#ordering--delivery" },
-    ],
-  },
-  {
-    title: "Legal",
-    links: [
-      { label: "Terms of Service", href: "/terms" },
-      { label: "Privacy Policy", href: "/privacy" },
-    ],
-  },
-];
+const FALLBACK_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className="w-5 h-5">
+    <circle cx="12" cy="12" r="9" />
+  </svg>
+);
 
 export async function Footer() {
   "use cache";
   const year = new Date().getFullYear();
   return (
-    <footer className="mt-16 border-t border-border bg-card text-sm">
-      <div className="max-w-7xl mx-auto px-8 pt-12 pb-8">
+    <footer className="mt-12 px-8 py-10 text-xs text-muted-foreground border-t border-border bg-card">
+      <div className="max-w-7xl mx-auto">
         <div className="grid gap-10 md:grid-cols-[1.4fr_repeat(4,1fr)]">
           <div>
-            <p className="font-serif text-2xl text-foreground m-0 mb-2">Akua&apos;s Bakery</p>
-            <p className="text-muted-foreground leading-relaxed mb-4 max-w-sm">
-              Family-run bakery in East Legon. Sourdough, croissants, layered
-              cakes — handcrafted since 2018, delivered across Accra.
-            </p>
-            <address className="not-italic text-muted-foreground space-y-1">
-              <p className="m-0">12 Independence Ave, Accra</p>
+            <p className="font-serif text-2xl text-foreground m-0 mb-2">{brand.name}</p>
+            <p className="leading-relaxed mb-4 max-w-sm">{brand.footer.blurb}</p>
+            <address className="not-italic space-y-1">
+              <p className="m-0">{brand.contact.address}</p>
               <p className="m-0">
-                <a href="tel:+233244000000" className="hover:text-foreground transition-colors">
-                  +233 244 000 000
+                <a
+                  href={`tel:${brand.contact.phoneTel}`}
+                  className="hover:text-foreground transition-colors"
+                >
+                  {brand.contact.phone}
                 </a>
               </p>
               <p className="m-0">
                 <a
-                  href="mailto:hello@akuasbakery.test"
+                  href={`mailto:${brand.contact.email}`}
                   className="hover:text-foreground transition-colors"
                 >
-                  hello@akuasbakery.test
+                  {brand.contact.email}
                 </a>
               </p>
-              <p className="m-0 text-xs">Tue–Sun · 8am–8pm · closed Mondays</p>
+              <p className="m-0">{brand.contact.hours}</p>
             </address>
             <div className="flex items-center gap-3 mt-5">
-              {SOCIALS.map((s) => (
+              {brand.socials.map((s) => (
                 <a
                   key={s.label}
                   href={s.href}
@@ -130,12 +87,12 @@ export async function Footer() {
                   rel="noopener noreferrer"
                   className="inline-flex items-center justify-center w-9 h-9 rounded-full border border-border text-muted-foreground hover:text-foreground hover:border-foreground transition-colors"
                 >
-                  {s.svg}
+                  {(s.icon && ICONS[s.icon]) ?? FALLBACK_ICON}
                 </a>
               ))}
             </div>
           </div>
-          {SITEMAP.map((section) => (
+          {brand.footer.sitemap.map((section) => (
             <nav key={section.title} aria-labelledby={`footer-${section.title}`}>
               <p
                 id={`footer-${section.title}`}
@@ -148,7 +105,7 @@ export async function Footer() {
                   <li key={link.label}>
                     <Link
                       href={link.href}
-                      className="text-muted-foreground hover:text-foreground transition-colors"
+                      className="hover:text-foreground transition-colors"
                     >
                       {link.label}
                     </Link>
@@ -158,31 +115,32 @@ export async function Footer() {
             </nav>
           ))}
         </div>
-
-        <div className="mt-12 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-muted-foreground">
-          <p className="m-0">© {year} Akua&apos;s Bakery. All rights reserved.</p>
-          <p className="m-0 inline-flex items-center gap-1.5">
-            <span className="text-muted-foreground/80">Powered by</span>
-            <a
-              href="https://app.cimplify.io"
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="Cimplify"
-              className="inline-flex items-center gap-1 font-serif text-foreground hover:text-primary transition-colors"
-            >
-              <span className="font-semibold tracking-tight">Cimplify</span>
-              <svg
-                viewBox="0 0 12 12"
-                aria-hidden
-                className="w-3 h-3 opacity-70"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
+        <div className="mt-12 pt-6 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-3">
+          <p className="m-0">© {year} {brand.name}. All rights reserved.</p>
+          {brand.footer.poweredBy && (
+            <p className="m-0 inline-flex items-center gap-1.5">
+              <span className="text-muted-foreground/80">Powered by</span>
+              <a
+                href={brand.footer.poweredBy.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={brand.footer.poweredBy.label}
+                className="inline-flex items-center gap-1 font-serif text-foreground hover:text-primary transition-colors"
               >
-                <path d="M3 9L9 3M9 3H4M9 3v5" strokeLinecap="round" strokeLinejoin="round" />
-              </svg>
-            </a>
-          </p>
+                <span className="font-semibold tracking-tight">{brand.footer.poweredBy.label}</span>
+                <svg
+                  viewBox="0 0 12 12"
+                  aria-hidden
+                  className="w-3 h-3 opacity-70"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                >
+                  <path d="M3 9L9 3M9 3H4M9 3v5" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </a>
+            </p>
+          )}
         </div>
       </div>
     </footer>

package/templates/storefront-bakery/components/header.tsx

@@ -2,8 +2,7 @@ import Link from "next/link";
 import { Suspense } from "react";
 import { NavLink } from "./nav-link";
 import { CartPill, CartPillSkeleton } from "./cart-pill";
-
-const TAGLINE = "ACCRA · SINCE 2018";
+import { brand } from "@/lib/brand";
 
 /**
  * Server-rendered header chrome. Brand mark + nav layout streams from the
@@ -15,25 +14,18 @@ export function Header() {
     <header className="sticky top-0 z-30 flex items-center justify-between px-8 py-4 border-b border-border bg-background/90 backdrop-blur-md">
       <Link href="/" className="flex items-baseline gap-2">
         <span className="font-serif text-[22px] font-semibold -tracking-[0.02em]">
-          Akua&apos;s Bakery
+          {brand.shortName}
         </span>
         <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
-          {TAGLINE}
+          {brand.microTag}
         </span>
       </Link>
       <nav className="flex items-center gap-6">
-        <Suspense fallback={<NavLinkFallback>Home</NavLinkFallback>}>
-          <NavLink href="/">Home</NavLink>
-        </Suspense>
-        <Suspense fallback={<NavLinkFallback>Shop</NavLinkFallback>}>
-          <NavLink href="/shop">Shop</NavLink>
-        </Suspense>
-        <Suspense fallback={<NavLinkFallback>About</NavLinkFallback>}>
-          <NavLink href="/about">About</NavLink>
-        </Suspense>
-        <Suspense fallback={<NavLinkFallback>FAQ</NavLinkFallback>}>
-          <NavLink href="/faq">FAQ</NavLink>
-        </Suspense>
+        {brand.header.nav.map((link) => (
+          <Suspense key={link.href} fallback={<NavLinkFallback>{link.label}</NavLinkFallback>}>
+            <NavLink href={link.href}>{link.label}</NavLink>
+          </Suspense>
+        ))}
         <Suspense fallback={<CartPillSkeleton />}>
           <CartPill />
         </Suspense>

package/templates/storefront-bakery/components/policy-page.tsx

@@ -0,0 +1,49 @@
+import type { BrandPolicySection } from "@/lib/brand";
+
+interface PolicyShape {
+  eyebrow: string;
+  title: string;
+  lastUpdated?: string;
+  sections: BrandPolicySection[];
+}
+
+/**
+ * Shared layout for shipping / returns / accessibility / terms / privacy.
+ * Reads a `{ eyebrow, title, lastUpdated, sections[] }` block from brand.
+ */
+export function PolicyPage({ policy }: { policy: PolicyShape }) {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {policy.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {policy.title}
+      </h1>
+      {policy.lastUpdated && (
+        <p className="text-sm text-muted-foreground not-prose mb-10">
+          Last updated: {policy.lastUpdated}
+        </p>
+      )}
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {policy.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}