@cimplify/sdk 0.44.34 → 0.45.1

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

@@ -1,69 +0,0 @@
-"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-services/components/account-iframe.tsx

@@ -1,13 +0,0 @@
-"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-services/components/cart-drawer.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
-
-/**
- * Side-drawer cart. Auto-opens when an item is added (via
- * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
- * also calls `useCartDrawer().open()` to reveal it on click.
- */
-export function CartDrawer() {
-  const router = useRouter();
-  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
-}

package/templates/storefront-services/components/cart-pill.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { useCartDrawer } from "@cimplify/sdk/react";
-import { useCartCount } from "@/lib/cart";
-
-/**
- * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * opens the side cart drawer on click (instead of navigating to /cart).
- * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
- * header chrome streams without blocking on the cart fetch.
- */
-export function CartPill() {
-  const { count } = useCartCount();
-  const { open } = useCartDrawer();
-  return (
-    <button
-      type="button"
-      onClick={open}
-      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
-    >
-      Cart · {count}
-    </button>
-  );
-}
-
-export function CartPillSkeleton() {
-  return (
-    <span
-      aria-hidden
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground/80 text-background text-xs font-semibold tracking-wide"
-    >
-      Cart · …
-    </span>
-  );
-}

package/templates/storefront-services/components/category-grid.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { CategoryGrid as SdkCategoryGrid } from "@cimplify/sdk/react";
-import type { Category } from "@cimplify/sdk";
-
-/**
- * Homepage category tiles — defers to the SDK's <CategoryGrid/> for layout
- * and accessibility, and routes selections to /categories/:slug.
- */
-export function CategoryGrid({ categories }: { categories?: Category[] }) {
-  const router = useRouter();
-  return (
-    <section className="max-w-7xl mx-auto px-8 pt-14">
-      <h2 className="font-serif text-[28px] font-semibold m-0 mb-5">Browse the menu</h2>
-      <SdkCategoryGrid
-        categories={categories}
-        onSelect={(c) => router.push(`/categories/${c.slug}`)}
-        classNames={{
-          item: "flex flex-col gap-1 p-6 bg-card border border-border rounded-2xl cursor-pointer text-left transition-all hover:border-primary hover:-translate-y-0.5",
-          name: "font-serif text-lg font-semibold text-foreground",
-          description: "text-xs text-muted-foreground",
-          count: "text-xs text-muted-foreground mt-1",
-        }}
-      />
-    </section>
-  );
-}

package/templates/storefront-services/components/collection-strip.tsx

@@ -1,45 +0,0 @@
-import Link from "next/link";
-import type { Collection, Product } from "@cimplify/sdk";
-import { StoreProductCard } from "./store-product-card";
-
-interface CollectionStripProps {
-  collection: Collection;
-  products: Product[];
-  collectionHref?: string;
-}
-
-/**
- * Horizontal strip of products under a collection title. Cards come from the
- * SDK so every variant (Food, Bundle, Composite, Service, …) renders
- * correctly; clicks open the shared URL-driven product modal.
- */
-export function CollectionStrip({ collection, products, collectionHref }: CollectionStripProps) {
-  if (products.length === 0) return null;
-  return (
-    <section className="max-w-7xl mx-auto px-8 pt-12">
-      <header className="grid grid-cols-[1fr_auto] items-end gap-4 mb-5">
-        <h2 className="font-serif text-[28px] font-semibold m-0">{collection.name}</h2>
-        {collectionHref && (
-          <Link
-            href={collectionHref}
-            className="text-[13px] font-semibold text-primary hover:underline"
-          >
-            See all →
-          </Link>
-        )}
-        {collection.description && (
-          <p className="col-span-full m-0 mt-1 text-sm text-muted-foreground">
-            {collection.description}
-          </p>
-        )}
-      </header>
-      <div className="grid grid-flow-col auto-cols-[minmax(220px,1fr)] gap-4 overflow-x-auto snap-x snap-mandatory pb-2">
-        {products.slice(0, 8).map((p) => (
-          <div key={p.id} className="snap-start">
-            <StoreProductCard product={p} />
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

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

@@ -1,148 +0,0 @@
-import Link from "next/link";
-import { brand } from "@/lib/brand";
-
-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 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-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">{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:${brand.contact.phoneTel}`}
-                  className="hover:text-foreground transition-colors"
-                >
-                  {brand.contact.phone}
-                </a>
-              </p>
-              <p className="m-0">
-                <a
-                  href={`mailto:${brand.contact.email}`}
-                  className="hover:text-foreground transition-colors"
-                >
-                  {brand.contact.email}
-                </a>
-              </p>
-              <p className="m-0">{brand.contact.hours}</p>
-            </address>
-            <div className="flex items-center gap-3 mt-5">
-              {brand.socials.map((s) => (
-                <a
-                  key={s.label}
-                  href={s.href}
-                  aria-label={s.label}
-                  target="_blank"
-                  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.icon && ICONS[s.icon]) ?? FALLBACK_ICON}
-                </a>
-              ))}
-            </div>
-          </div>
-          {brand.footer.sitemap.map((section) => (
-            <nav key={section.title} aria-labelledby={`footer-${section.title}`}>
-              <p
-                id={`footer-${section.title}`}
-                className="font-semibold text-foreground mb-3 text-[13px] uppercase tracking-[0.08em]"
-              >
-                {section.title}
-              </p>
-              <ul className="space-y-2 m-0 p-0 list-none">
-                {section.links.map((link) => (
-                  <li key={link.label}>
-                    <Link
-                      href={link.href}
-                      className="hover:text-foreground transition-colors"
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ))}
-        </div>
-        <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"
-              >
-                <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-services/components/header.tsx

@@ -1,43 +0,0 @@
-import Link from "next/link";
-import { Suspense } from "react";
-import { NavLink } from "./nav-link";
-import { CartPill, CartPillSkeleton } from "./cart-pill";
-import { brand } from "@/lib/brand";
-
-/**
- * Server-rendered header chrome. Brand mark + nav layout streams from the
- * cache; the active-link styling and live cart count are dynamic islands
- * mounted in their own Suspense boundaries so the chrome never blocks.
- */
-export function Header() {
-  return (
-    <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]">
-          {brand.shortName}
-        </span>
-        <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
-          {brand.microTag}
-        </span>
-      </Link>
-      <nav className="flex items-center gap-6">
-        {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>
-      </nav>
-    </header>
-  );
-}
-
-function NavLinkFallback({ children }: { children: React.ReactNode }) {
-  return (
-    <span className="text-[13px] font-medium tracking-wide text-muted-foreground">
-      {children}
-    </span>
-  );
-}

package/templates/storefront-services/components/hero.tsx

@@ -1,25 +0,0 @@
-interface HeroProps {
-  badge?: string;
-  title: string;
-  subtitle?: string;
-}
-
-export function Hero({ badge, title, subtitle }: HeroProps) {
-  return (
-    <section className="px-8 py-16 text-center bg-gradient-to-b from-accent to-background">
-      {badge && (
-        <span className="inline-block mb-4 px-3.5 py-1.5 rounded-full bg-card border border-accent text-accent-foreground text-[11px] font-semibold uppercase tracking-[0.12em]">
-          {badge}
-        </span>
-      )}
-      <h1 className="font-serif text-[clamp(2.25rem,5vw,3.5rem)] font-semibold m-0 -tracking-[0.02em]">
-        {title}
-      </h1>
-      {subtitle && (
-        <p className="mx-auto mt-2 max-w-xl text-base text-muted-foreground">
-          {subtitle}
-        </p>
-      )}
-    </section>
-  );
-}

package/templates/storefront-services/components/nav-link.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
-  const pathname = usePathname();
-  const active = pathname === href;
-  return (
-    <Link
-      href={href}
-      className={[
-        "text-[13px] font-medium tracking-wide transition-colors",
-        active ? "text-primary" : "text-muted-foreground hover:text-foreground",
-      ].join(" ")}
-    >
-      {children}
-    </Link>
-  );
-}

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

@@ -1,49 +0,0 @@
-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>
-  );
-}

package/templates/storefront-services/components/product-modal.tsx

@@ -1,104 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import Image from "next/image";
-import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { ProductSheet, useProduct, useCart } from "@cimplify/sdk/react";
-
-/**
- * URL-driven product modal. Reads `?product=<slug>` and renders the SDK's
- * `<ProductSheet/>` — vertical layout with image-on-top, then header, then
- * the variant/add-on/composite/bundle customizer. Closing the modal clears
- * the search param. Deep-linkable and survives reloads.
- */
-export function ProductModal() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const slug = searchParams?.get("product") ?? null;
-
-  const { product } = useProduct(slug ?? "", { enabled: Boolean(slug) });
-  const { addItem } = useCart();
-
-  useEffect(() => {
-    if (!slug) return;
-    const original = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = original;
-    };
-  }, [slug]);
-
-  useEffect(() => {
-    if (!slug) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") close();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [slug]);
-
-  if (!slug) return null;
-
-  function close() {
-    const next = new URLSearchParams(searchParams?.toString() ?? "");
-    next.delete("product");
-    const qs = next.toString();
-    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
-  }
-
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      onClick={close}
-      className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center sm:p-6 bg-foreground/50 backdrop-blur-sm"
-    >
-      <div
-        onClick={(e) => e.stopPropagation()}
-        className="relative w-full sm:max-w-lg max-h-[92vh] overflow-auto bg-card sm:rounded-3xl rounded-t-3xl shadow-2xl"
-      >
-        <button
-          onClick={close}
-          aria-label="Close product details"
-          className="absolute top-4 right-4 z-10 w-9 h-9 rounded-full bg-card border border-border text-sm cursor-pointer transition-colors hover:bg-muted"
-        >
-          ✕
-        </button>
-        {product ? (
-          <ProductSheet
-            product={product}
-            onClose={close}
-            onAddToCart={async (p, qty, options) => {
-              await addItem(p, qty, options);
-              close();
-            }}
-            renderImage={({ src, alt, className }) => (
-              <Image
-                src={src}
-                alt={alt}
-                width={1200}
-                height={900}
-                className={className}
-                style={{ width: "100%", height: "auto", objectFit: "cover" }}
-                priority
-              />
-            )}
-            classNames={{
-              root: "p-6 sm:p-8 gap-4",
-              image: "rounded-2xl overflow-hidden -mx-6 sm:-mx-8 -mt-6 sm:-mt-8 mb-2",
-              header: "flex items-baseline justify-between gap-4",
-              name: "font-serif text-2xl font-semibold m-0",
-              price: "text-lg font-semibold text-primary",
-              description: "text-sm text-muted-foreground leading-relaxed",
-              customizer: "pt-2",
-            }}
-          />
-        ) : (
-          <div className="p-8 text-center text-muted-foreground">Loading…</div>
-        )}
-      </div>
-    </div>
-  );
-}

package/templates/storefront-services/components/providers.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import { useMemo, type ReactNode } from "react";
-import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
-
-/**
- * Boots the Cimplify SDK client once on the client-side and exposes it via
- * <CimplifyProvider/>.
- *
- * Base-URL resolution:
- *   1) If NEXT_PUBLIC_CIMPLIFY_API_URL is set, use it verbatim.
- *   2) Otherwise use the current origin so requests flow through the
- *      Next.js rewrite in `next.config.ts` to the mock at :8787 (no CORS).
- *   3) Fall back to 127.0.0.1:8787 only during SSR, when there's no window.
- */
-export function Providers({ children }: { children: ReactNode }) {
-  const client = useMemo(() => {
-    const baseUrl =
-      process.env.NEXT_PUBLIC_CIMPLIFY_API_URL?.trim() ||
-      (typeof window !== "undefined" ? window.location.origin : "http://127.0.0.1:8787");
-    const publicKey = process.env.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY ?? "mock-dev";
-    return createCimplifyClient({
-      baseUrl,
-      publicKey,
-      suppressPublicKeyWarning: true,
-    });
-  }, []);
-
-  return (
-    <CimplifyProvider client={client}>
-      <CartDrawerProvider>{children}</CartDrawerProvider>
-    </CimplifyProvider>
-  );
-}