@cimplify/sdk 0.44.34 → 0.45.0

package/templates/storefront-grocery/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-grocery/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-grocery/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-grocery/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-grocery/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-grocery/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>
-  );
-}

package/templates/storefront-grocery/components/store-product-card.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import {
-  CardVariant,
-  FoodProductCard,
-  RetailProductCard,
-  WholesaleProductCard,
-  DigitalProductCard,
-  BundleProductCard,
-  CompositeProductCard,
-  StandardServiceCard,
-  CompactServiceCard,
-  ScheduleServiceCard,
-  RentalServiceCard,
-  AccommodationCard,
-  LeaseServiceCard,
-  SubscriptionCard,
-} from "@cimplify/sdk/react";
-import type { CardLayoutProps } from "@cimplify/sdk/react";
-import type { Product } from "@cimplify/sdk";
-import { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from "@cimplify/sdk";
-
-const RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
-const LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
-
-const VARIANT_CARDS: Record<CardVariant, React.ComponentType<CardLayoutProps>> = {
-  [CardVariant.Food]: FoodProductCard,
-  [CardVariant.Retail]: RetailProductCard,
-  [CardVariant.Wholesale]: WholesaleProductCard,
-  [CardVariant.Digital]: DigitalProductCard,
-  [CardVariant.Bundle]: BundleProductCard,
-  [CardVariant.Composite]: CompositeProductCard,
-  [CardVariant.Standard]: StandardServiceCard,
-  [CardVariant.Compact]: CompactServiceCard,
-  [CardVariant.Schedule]: ScheduleServiceCard,
-  [CardVariant.Rental]: RentalServiceCard,
-  [CardVariant.Accommodation]: AccommodationCard,
-  [CardVariant.Lease]: LeaseServiceCard,
-  [CardVariant.Subscription]: SubscriptionCard,
-};
-
-function resolveVariant(p: Product): CardVariant {
-  if (p.type === PRODUCT_TYPE.Bundle) return CardVariant.Bundle;
-  if (p.type === PRODUCT_TYPE.Composite) return CardVariant.Composite;
-  if (p.quantity_pricing && p.quantity_pricing.length > 1) return CardVariant.Wholesale;
-  if (p.type === PRODUCT_TYPE.Digital) return CardVariant.Digital;
-  if (p.type === PRODUCT_TYPE.Service) {
-    if (p.duration_unit && RENTAL_UNITS.has(p.duration_unit)) return CardVariant.Rental;
-    if (p.duration_unit === DURATION_UNIT.Nights) return CardVariant.Accommodation;
-    if (p.duration_unit && LEASE_UNITS.has(p.duration_unit)) return CardVariant.Lease;
-    if (p.billing_plans && p.billing_plans.length > 0 && !p.duration_minutes) return CardVariant.Subscription;
-    return CardVariant.Standard;
-  }
-  if (p.render_hint === RENDER_HINT.Food) return CardVariant.Food;
-  return CardVariant.Retail;
-}
-
-interface Props {
-  product: Product;
-  /** Override the auto-detected card variant. */
-  variant?: CardVariant;
-}
-
-/**
- * Variant-aware product card that opens the URL-driven product modal on
- * click. Uses `next/link` with `?product=<slug>` so the link is statically
- * pre-renderable — no `useSearchParams` dependency means cards don't
- * become dynamic islands. The modal (which already reads `useSearchParams`
- * inside a Suspense boundary in the root layout) handles the rest.
- */
-export function StoreProductCard({ product, variant }: Props) {
-  const slug = product.slug || product.id;
-  const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
-  const href = `?product=${encodeURIComponent(slug)}`;
-
-  return (
-    <Card
-      product={product}
-      renderLink={({ className, children }) => (
-        <Link href={href} scroll={false} prefetch={false} className={className}>
-          {children}
-        </Link>
-      )}
-    />
-  );
-}