@cimplify/sdk 0.40.0 → 0.41.0

package/templates/storefront-bakery/app/shop/page.tsx

@@ -2,10 +2,11 @@ import type { Metadata } from "next";
 import { cacheTag, cacheLife } from "next/cache";
 import { getServerClient, tags } from "@cimplify/sdk/server";
 import { ShopClient } from "./shop-client";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Shop — Akua's Bakery",
-  description: "Browse the full catalogue: breads, pastries, cakes, drinks, merch, and more.",
+  title: `Shop — ${brand.name}`,
+  description: brand.description,
 };
 
 async function getShopData() {

package/templates/storefront-bakery/app/sitemap.ts

@@ -0,0 +1,62 @@
+import type { MetadataRoute } from "next";
+import { getServerClient, type Product } from "@cimplify/sdk/server";
+
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
+const STATIC_ROUTES: { path: string; priority: number; changeFrequency: "daily" | "weekly" | "monthly" }[] = [
+  { path: "/", priority: 1.0, changeFrequency: "daily" },
+  { path: "/shop", priority: 0.9, changeFrequency: "daily" },
+  { path: "/about", priority: 0.5, changeFrequency: "monthly" },
+  { path: "/faq", priority: 0.4, changeFrequency: "monthly" },
+  { path: "/terms", priority: 0.2, changeFrequency: "monthly" },
+  { path: "/privacy", priority: 0.2, changeFrequency: "monthly" },
+];
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const now = new Date();
+  const client = getServerClient();
+
+  const [productsRes, categoriesRes, collectionsRes] = await Promise.all([
+    client.catalogue.getProducts({ limit: 500 }),
+    client.catalogue.getCategories(),
+    client.catalogue.getCollections(),
+  ]);
+
+  const products = productsRes.ok ? productsRes.value.items : [];
+  const categories = categoriesRes.ok ? categoriesRes.value : [];
+  const collections = collectionsRes.ok ? collectionsRes.value : [];
+
+  const staticEntries: MetadataRoute.Sitemap = STATIC_ROUTES.map((r) => ({
+    url: `${SITE_URL}${r.path}`,
+    lastModified: now,
+    changeFrequency: r.changeFrequency,
+    priority: r.priority,
+  }));
+
+  // Bakery uses a URL-driven product modal (`?product=<slug>` on the home or
+  // shop pages). Emit those as deep-linkable URLs so search engines and LLMs
+  // can index each product canonically.
+  const productEntries: MetadataRoute.Sitemap = products.map((p: Product) => ({
+    url: `${SITE_URL}/shop?product=${encodeURIComponent(p.slug ?? p.id)}`,
+    lastModified: p.updated_at ? new Date(p.updated_at) : now,
+    changeFrequency: "weekly",
+    priority: 0.7,
+  }));
+
+  const categoryEntries: MetadataRoute.Sitemap = categories.map((c) => ({
+    url: `${SITE_URL}/categories/${c.slug}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority: 0.6,
+  }));
+
+  const collectionEntries: MetadataRoute.Sitemap = collections.map((c) => ({
+    url: `${SITE_URL}/collections/${c.slug}`,
+    lastModified: now,
+    changeFrequency: "weekly",
+    priority: 0.6,
+  }));
+
+  return [...staticEntries, ...categoryEntries, ...collectionEntries, ...productEntries];
+}

package/templates/storefront-bakery/app/terms/page.tsx

@@ -1,101 +1,43 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Terms of Service — Akua's Bakery",
-  description: "The rules of the road for ordering from Akua's Bakery.",
+  title: `Terms of Service — ${brand.name}`,
+  description: `The rules of the road for ordering from ${brand.name}.`,
 };
 
 export default function TermsPage() {
+  const t = brand.terms;
   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">
-        Terms of service
+        {t.eyebrow}
       </p>
       <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
-        Terms of Service
+        {t.title}
       </h1>
       <p className="text-sm text-muted-foreground not-prose mb-10">
-        Last updated: 1 May 2026
+        Last updated: {t.lastUpdated}
       </p>
 
       <section className="space-y-5 leading-relaxed text-foreground/90">
-        <h2 className="font-serif text-2xl font-semibold mt-0">1. Who we are</h2>
-        <p>
-          Akua's Bakery (&quot;we&quot;, &quot;us&quot;) is a bakery and pâtisserie operating
-          at 12 Independence Avenue, Accra, Ghana. By placing an order through this
-          website, you (&quot;you&quot;, &quot;customer&quot;) agree to these terms.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">2. Orders and acceptance</h2>
-        <p>
-          Placing an order constitutes an offer to buy. We confirm acceptance by
-          sending an order confirmation email or SMS. Until acceptance, we may
-          decline an order — we'll refund any payment in full, immediately.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">3. Pricing and payment</h2>
-        <p>
-          Prices are in Ghana Cedis (GH₵) and include VAT where applicable.
-          Payment is due at checkout via Mobile Money, card, or cash on delivery.
-          We reserve the right to correct typographical pricing errors before
-          fulfilment.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">4. Delivery and pickup</h2>
-        <p>
-          Delivery times are estimates, not guarantees. We're not liable for
-          delays caused by weather, traffic, or events outside our control. If
-          a rider can't reach you within 30 minutes of arrival, the order may be
-          returned to the kitchen — please make sure your address and phone are
-          correct.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">5. Custom cakes</h2>
-        <p>
-          Custom cake orders require a 50% deposit at booking and the balance
-          before pickup or dispatch. Cancellations more than 72 hours before the
-          event date receive a full refund of the deposit; within 72 hours,
-          the deposit is non-refundable.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">6. Allergens</h2>
-        <p>
-          Our kitchen handles wheat, dairy, eggs, and tree nuts. We can't
-          guarantee freedom from cross-contamination. Customers with severe
-          allergies order at their own risk.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">7. Returns</h2>
-        <p>
-          Baked goods are non-returnable for food-safety reasons. If something
-          is wrong with your order, contact us within 24 hours of delivery and
-          we'll replace it, refund it, or credit your account — your choice.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">8. Liability</h2>
-        <p>
-          To the maximum extent permitted by Ghanaian law, our liability for any
-          claim arising from this website or your order is limited to the value
-          of the order. We're not liable for indirect or consequential losses.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">9. Governing law</h2>
-        <p>
-          These terms are governed by the laws of Ghana. Disputes will be
-          resolved in the courts of Greater Accra.
-        </p>
-
-        <h2 className="font-serif text-2xl font-semibold">10. Contact</h2>
-        <p>
-          Questions? Email{" "}
-          <a
-            href="mailto:hello@akuasbakery.test"
-            className="text-primary font-semibold hover:underline"
-          >
-            hello@akuasbakery.test
-          </a>
-          .
-        </p>
+        {t.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="font-serif 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>
   );

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>