@cimplify/sdk 0.40.1 → 0.42.0

package/templates/storefront-retail/app/about/page.tsx

@@ -1,70 +1,40 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "About — Currents Electronics",
-  description:
-    "Authorised dealer for Apple, Samsung, Sony, Bose. Serving Accra and West Africa with same-day delivery and a two-year warranty since 2017.",
+  title: `About — ${brand.name}`,
+  description: brand.description,
 };
 
 export default function AboutPage() {
+  const a = brand.about;
+  // Title supports a single \n for a hard line break.
+  const titleParts = a.title.split("\n");
   return (
     <article className="max-w-3xl mx-auto px-8 py-16">
       <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
-        About Currents
+        {a.eyebrow}
       </p>
       <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-6 -tracking-[0.025em] leading-tight">
-        Tech that lasts.<br />Service that doesn&apos;t flake.
+        {titleParts.map((line, i) => (
+          <span key={i}>
+            {line}
+            {i < titleParts.length - 1 && <br />}
+          </span>
+        ))}
       </h1>
       <div className="prose prose-lg max-w-none space-y-5 text-foreground/90 leading-relaxed">
-        <p>
-          We started Currents in 2017 because the best phones, laptops, and
-          headphones were either three months out of stock in Accra, or
-          obviously fake. Either way, you ended up calling someone&apos;s
-          cousin in London. That&apos;s a bad way to buy a thousand-dollar
-          device.
-        </p>
-        <p>
-          Today we&apos;re an authorised dealer for Apple, Samsung, Sony, Bose,
-          Logitech, and Anker. Every product is sourced direct from the
-          manufacturer or their certified distributor — no parallel imports,
-          no refurbished-as-new, no &quot;dual SIM Asia spec&quot; on a US iPhone.
-          What you order is what we open in front of you on delivery.
-        </p>
-        <p>
-          We back everything with a two-year warranty (one year manufacturer +
-          one year Currents), free same-day Accra delivery, and a 14-day
-          no-questions-asked return on anything sealed.
-        </p>
-
-        <h2 className="text-2xl font-semibold mt-10 mb-3 -tracking-[0.02em]">
-          Trade-in
-        </h2>
-        <p>
-          Got an iPhone, Galaxy, or MacBook you no longer use? Bring it in or
-          ship it to us — we&apos;ll quote you within 48 hours and credit the
-          value toward your next purchase. We work with refurbishers across the
-          continent so your old kit stays in service for years more.
-        </p>
-
-        <h2 className="text-2xl font-semibold mt-10 mb-3 -tracking-[0.02em]">
-          Business sales
-        </h2>
-        <p>
-          Equipping a team or kitting out a co-working space? We do volume
-          quotes, delivery scheduling, asset tagging, and on-site setup. Email{" "}
-          <a
-            href="mailto:business@currentselectronics.test"
-            className="text-primary font-semibold hover:underline"
-          >
-            business@currentselectronics.test
-          </a>
-          .
-        </p>
-
-        <h2 className="text-2xl font-semibold mt-10 mb-3 -tracking-[0.02em]">
-          Visit
-        </h2>
-        <p>Atomic Junction, East Legon, Accra · Mon–Sat, 9am–8pm.</p>
+        {a.paragraphs.map((p, i) => (
+          <p key={i}>{p}</p>
+        ))}
+        {a.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-10 mb-3 -tracking-[0.02em]">
+              {s.heading}
+            </h2>
+            <p>{s.body}</p>
+          </div>
+        ))}
       </div>
     </article>
   );

package/templates/storefront-retail/app/accessibility/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.accessibility.title} — ${brand.name}`,
+};
+
+export default function AccessibilityPage() {
+  return <PolicyPage policy={brand.accessibility} />;
+}

package/templates/storefront-retail/app/account/addresses/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Addresses — ${brand.name}`,
+};
+
+export default function AddressesPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your addresses
+      </h1>
+      <AccountIframe section="addresses" />
+    </article>
+  );
+}

package/templates/storefront-retail/app/account/orders/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Orders — ${brand.name}`,
+};
+
+export default function OrdersPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your orders
+      </h1>
+      <AccountIframe section="orders" />
+    </article>
+  );
+}

package/templates/storefront-retail/app/account/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+export default function AccountPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {brand.account.accountEyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        {brand.account.accountTitle}
+      </h1>
+      <AccountIframe />
+    </article>
+  );
+}

package/templates/storefront-retail/app/account/settings/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Settings — ${brand.name}`,
+};
+
+export default function SettingsPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Settings
+      </h1>
+      <AccountIframe section="settings" />
+    </article>
+  );
+}

package/templates/storefront-retail/app/categories/[slug]/page.tsx

@@ -10,6 +10,7 @@ import {
   type Product,
 } from "@cimplify/sdk/server";
 import { ListingClient } from "./listing-client";
+import { brand } from "@/lib/brand";
 
 interface CategoryData {
   category: Category;
@@ -42,7 +43,7 @@ export async function generateMetadata({
   const data = await getCategory(slug);
   if (!data) return {};
   return {
-    title: `${data.category.name} — Currents Electronics`,
+    title: `${data.category.name} — ${brand.name}`,
     description: data.category.description ?? undefined,
   };
 }

package/templates/storefront-retail/app/collections/[slug]/page.tsx

@@ -10,6 +10,7 @@ import {
   type Product,
 } from "@cimplify/sdk/server";
 import { ListingClient } from "./listing-client";
+import { brand } from "@/lib/brand";
 
 interface CollectionData {
   collection: Collection;
@@ -42,7 +43,7 @@ export async function generateMetadata({
   const data = await getCollection(slug);
   if (!data) return {};
   return {
-    title: `${data.collection.name} — Akua's Bakery`,
+    title: `${data.collection.name} — ${brand.name}`,
     description: data.collection.description ?? undefined,
   };
 }

package/templates/storefront-retail/app/contact/contact-form.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * Local-only contact form. On submit, fakes a successful response so the
+ * template ships a usable interaction. Wire to a real handler (Server
+ * Action posting to your CRM, support inbox, or Cimplify Support API)
+ * before going to production.
+ */
+export function ContactForm({ reasons }: { reasons: string[] }) {
+  const [submitted, setSubmitted] = useState(false);
+  const [reason, setReason] = useState(reasons[0] ?? "");
+
+  if (submitted) {
+    return (
+      <div className="rounded-2xl border border-border bg-card p-8">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+          ✓ Sent
+        </p>
+        <h2 className="font-serif text-2xl font-semibold mb-2">Thanks — we'll be in touch.</h2>
+        <p className="text-muted-foreground">
+          We respond within one business day. Check your spam folder if you don't see a
+          reply by tomorrow.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        setSubmitted(true);
+      }}
+      className="space-y-5"
+    >
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Field label="Your name" name="name" required />
+        <Field label="Email" name="email" type="email" required />
+      </div>
+      <div>
+        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
+          What's it about?
+        </label>
+        <select
+          name="reason"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+        >
+          {reasons.map((r) => (
+            <option key={r} value={r}>
+              {r}
+            </option>
+          ))}
+        </select>
+      </div>
+      <Field label="Order number (optional)" name="order" />
+      <div>
+        <label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5">
+          Message
+        </label>
+        <textarea
+          name="message"
+          required
+          rows={6}
+          className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm resize-y"
+        />
+      </div>
+      <button
+        type="submit"
+        className="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"
+      >
+        Send message
+      </button>
+    </form>
+  );
+}
+
+function Field({
+  label,
+  name,
+  type = "text",
+  required,
+}: {
+  label: string;
+  name: string;
+  type?: string;
+  required?: boolean;
+}) {
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-1.5"
+      >
+        {label}
+      </label>
+      <input
+        id={name}
+        name={name}
+        type={type}
+        required={required}
+        className="w-full px-4 py-2.5 rounded-md bg-background border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none text-sm"
+      />
+    </div>
+  );
+}

package/templates/storefront-retail/app/contact/page.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import { ContactForm } from "./contact-form";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Contact — ${brand.name}`,
+  description: brand.contactPage.body,
+};
+
+export default function ContactPage() {
+  const c = brand.contactPage;
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-16">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {c.eyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-4 -tracking-[0.02em]">
+        {c.title}
+      </h1>
+      <p className="text-lg text-muted-foreground max-w-2xl mb-12 leading-relaxed">{c.body}</p>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-10 items-start">
+        <ContactForm reasons={c.reasons} />
+        <aside className="space-y-5 lg:pl-10 lg:border-l border-border">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
+              Direct lines
+            </p>
+            <ul className="space-y-3 list-none p-0 m-0">
+              {c.directLines.map((line) => (
+                <li key={line.label}>
+                  <p className="text-xs text-muted-foreground m-0">{line.label}</p>
+                  <a
+                    href={line.href}
+                    className="text-foreground hover:text-primary transition-colors"
+                  >
+                    {line.value}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground mb-3">
+              Visit
+            </p>
+            <p className="text-foreground m-0">{brand.contact.address}</p>
+            <p className="text-xs text-muted-foreground mt-1">{brand.contact.hours}</p>
+          </div>
+        </aside>
+      </div>
+    </article>
+  );
+}

package/templates/storefront-retail/app/error.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+
+/**
+ * Root error boundary. Next.js calls this whenever a thrown error escapes
+ * a Server Component without being caught by a closer `error.tsx`.
+ *
+ * Wire `reportError` (Sentry, Datadog, etc.) here so production failures
+ * surface — silently recovering hides real bugs.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // TODO: replace with your error reporter
+    // eslint-disable-next-line no-console
+    console.error("Storefront error:", error);
+  }, [error]);
+
+  return (
+    <section className="max-w-2xl mx-auto px-6 sm:px-8 py-20 text-center">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-3">
+        Something broke
+      </p>
+      <h1 className="text-[clamp(2rem,4vw,3rem)] font-bold mb-4 -tracking-[0.025em]">
+        That wasn&apos;t supposed to happen.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-8">
+        We&apos;ve been notified. Refresh the page, or head back home — most
+        of the time the second try just works.
+      </p>
+      {error.digest && (
+        <p className="text-xs font-mono text-muted-foreground mb-6">
+          Reference:{" "}
+          <code className="text-foreground">{error.digest}</code>
+        </p>
+      )}
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors"
+        >
+          Try again
+        </button>
+        <Link
+          href="/"
+          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-border hover:bg-muted transition-colors text-sm font-medium"
+        >
+          Back home
+        </Link>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-retail/app/faq/page.tsx

@@ -1,106 +1,25 @@
 import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
 
 export const metadata: Metadata = {
-  title: "Support — Currents Electronics",
-  description:
-    "Shipping, warranty, repairs, returns, payment — answers to the questions we hear most often.",
+  title: `Support — ${brand.name}`,
+  description: "Shipping, warranty, repairs, returns, payment — answers to the questions we hear most often.",
 };
 
-interface QA {
-  q: string;
-  a: string;
-}
-
-const SECTIONS: { title: string; items: QA[] }[] = [
-  {
-    title: "Ordering & delivery",
-    items: [
-      {
-        q: "How fast is shipping?",
-        a: "Free same-day delivery within Greater Accra for orders placed before 4pm. Outside Accra, we use a partner courier — usually 1–3 business days, with tracking sent by SMS.",
-      },
-      {
-        q: "Can I pick up in store?",
-        a: "Yes. Choose 'Pickup' at checkout and we'll have your order boxed at our Atomic Junction store within 30 minutes. Bring a photo ID matching the order name.",
-      },
-      {
-        q: "Do you ship internationally?",
-        a: "We ship across West Africa via DHL — rates and ETAs are calculated at checkout once you enter your destination.",
-      },
-      {
-        q: "How do I track my order?",
-        a: "You'll get an SMS and email with a tracking link within 30 minutes of dispatch. Same-day Accra orders include the rider's phone number.",
-      },
-    ],
-  },
-  {
-    title: "Warranty & repairs",
-    items: [
-      {
-        q: "What does the two-year warranty cover?",
-        a: "Manufacturing defects, electrical failures, and battery degradation below 80% within the first 24 months. Accidental damage, water damage, and software issues caused by user installs are excluded.",
-      },
-      {
-        q: "Where do I send a faulty device?",
-        a: "Drop it at our Atomic Junction store, or request a free pickup from your address by emailing support@currentselectronics.test. Loaner devices are available for warranty claims while we diagnose.",
-      },
-      {
-        q: "Can you fix devices bought elsewhere?",
-        a: "We offer paid repairs on Apple and Samsung devices regardless of where they were purchased. Expect a quote within 48 hours of inspection.",
-      },
-    ],
-  },
-  {
-    title: "Trade-in & financing",
-    items: [
-      {
-        q: "How does trade-in work?",
-        a: "Tell us the model and condition of your device, get an instant estimate, and ship it free or drop it at our store. Once we verify, we credit your account or pay out via Mobile Money — your choice.",
-      },
-      {
-        q: "Do you offer instalment payments?",
-        a: "Yes. Pay in 3 (interest-free) or 6/12 monthly instalments via our partner Fidelity Bank. Available at checkout for orders over GH₵2,000.",
-      },
-      {
-        q: "Are there bulk discounts for businesses?",
-        a: "Yes. Email business@currentselectronics.test with your shopping list and team size — most orders over 5 units qualify for a discount, plus free on-site setup.",
-      },
-    ],
-  },
-  {
-    title: "Payment & returns",
-    items: [
-      {
-        q: "What payment methods do you accept?",
-        a: "Mobile Money (MTN, Telecel, AirtelTigo), Visa/Mastercard, instalments via Fidelity Bank, and cash on delivery for Accra orders.",
-      },
-      {
-        q: "What's your return policy?",
-        a: "14 days, no questions asked, on any sealed product. For opened items, returns are accepted within 7 days subject to a 10% restocking fee. We can't accept returns on activated SIM-bundled phones once the SIM is registered.",
-      },
-      {
-        q: "Are products genuine?",
-        a: "Yes. We're an authorised dealer for every brand we stock. Every product ships with the manufacturer's serial number registered to your name — verify it on the brand's official portal anytime.",
-      },
-    ],
-  },
-];
-
 export default function FaqPage() {
+  const f = brand.faq;
   return (
     <article className="max-w-3xl mx-auto px-8 py-16">
       <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
-        Support
+        {f.eyebrow}
       </p>
       <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-bold mb-10 -tracking-[0.025em]">
-        Questions, answered.
+        {f.title}
       </h1>
       <div className="space-y-12">
-        {SECTIONS.map((section) => (
+        {f.sections.map((section) => (
           <section key={section.title}>
-            <h2 className="text-2xl font-semibold mb-5 -tracking-[0.02em]">
-              {section.title}
-            </h2>
+            <h2 className="text-2xl font-semibold mb-5 -tracking-[0.02em]">{section.title}</h2>
             <dl className="space-y-6">
               {section.items.map((item) => (
                 <div key={item.q}>
@@ -113,12 +32,12 @@ export default function FaqPage() {
         ))}
       </div>
       <p className="mt-12 pt-8 border-t border-border text-sm text-muted-foreground">
-        Still stuck? Email{" "}
+        {f.contactPrompt}{" "}
         <a
-          href="mailto:support@currentselectronics.test"
+          href={`mailto:${f.contactEmail}`}
           className="text-primary font-semibold hover:underline"
         >
-          support@currentselectronics.test
+          {f.contactEmail}
         </a>{" "}
         and a real human will reply within 24 hours.
       </p>

package/templates/storefront-retail/app/layout.tsx

@@ -4,8 +4,7 @@ import "./globals.css";
 import { Providers } from "@/components/providers";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
-import { ProductModal } from "@/components/product-modal";
-import { Suspense } from "react";
+import { brand } from "@/lib/brand";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -19,10 +18,39 @@ const mono = JetBrains_Mono({
   display: "swap",
 });
 
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL?.trim() || "https://example.com";
+
 export const metadata: Metadata = {
-  title: "Currents Electronics",
-  description:
-    "The latest laptops, phones, audio, and accessories — curated, in-stock, shipped from Accra to Africa.",
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: brand.name,
+    template: `%s — ${brand.name}`,
+  },
+  description: brand.description,
+  openGraph: {
+    type: "website",
+    siteName: brand.name,
+    locale: brand.locale,
+  },
+  twitter: { card: "summary_large_image" },
+};
+
+const ORGANIZATION_LD = {
+  "@context": "https://schema.org",
+  "@type": brand.schemaType,
+  name: brand.name,
+  url: SITE_URL,
+  description: brand.description,
+  email: brand.contact.email,
+  telephone: brand.contact.phoneTel,
+  address: {
+    "@type": "PostalAddress",
+    streetAddress: brand.contact.streetAddress,
+    addressLocality: brand.contact.city,
+    addressCountry: brand.contact.countryCode,
+  },
+  sameAs: brand.socials.map((s) => s.href),
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
@@ -32,13 +60,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         suppressHydrationWarning
         className="min-h-screen flex flex-col bg-background text-foreground font-sans"
       >
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(ORGANIZATION_LD) }}
+        />
         <Providers>
           <Header />
           <main className="flex-1 pb-12 w-full">{children}</main>
           <Footer />
-          <Suspense fallback={null}>
-            <ProductModal />
-          </Suspense>
         </Providers>
       </body>
     </html>