@cimplify/sdk 0.40.0 → 0.41.0

package/templates/storefront-fashion/components/promo-banner.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+/**
+ * Full-width promo banner — reads brand.promo. Renders nothing if the
+ * brand doesn't define a promo, so this component is safe to drop in
+ * across templates that may or may not run a campaign.
+ */
+export function PromoBanner() {
+  const promo = brand.promo;
+  if (!promo) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-6">
+      <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary via-primary to-foreground text-primary-foreground p-8 sm:p-12 lg:p-16">
+        <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-background/10 blur-3xl pointer-events-none" />
+        <div className="absolute -bottom-32 -left-20 w-96 h-96 rounded-full bg-foreground/30 blur-3xl pointer-events-none" />
+        <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 items-center">
+          <div className="max-w-2xl">
+            <span className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-background/15 border border-background/25 text-[11px] font-mono uppercase tracking-[0.16em]">
+              <span className="w-1.5 h-1.5 rounded-full bg-background animate-pulse" />
+              {promo.badge}
+            </span>
+            <h2 className="text-[clamp(1.75rem,3.5vw,2.75rem)] font-bold m-0 mb-3 -tracking-[0.025em] leading-[1.1]">
+              {promo.title}
+            </h2>
+            <p className="text-base sm:text-lg opacity-90 leading-relaxed">{promo.body}</p>
+          </div>
+          <Link
+            href={promo.ctaHref}
+            className="inline-flex items-center gap-2 px-5 py-3 rounded-md bg-background text-foreground font-semibold text-sm hover:bg-background/90 transition-colors whitespace-nowrap"
+          >
+            {promo.ctaLabel}
+            <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+              <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { useMemo, type ReactNode } from "react";
+import { createCimplifyClient } from "@cimplify/sdk";
+import { CimplifyProvider } 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}>{children}</CimplifyProvider>;
+}

package/templates/storefront-fashion/components/section-heading.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+
+interface SectionHeadingProps {
+  eyebrow: string;
+  title: string;
+  description?: string;
+  link?: { label: string; href: string };
+}
+
+export function SectionHeading({ eyebrow, title, description, link }: SectionHeadingProps) {
+  return (
+    <div className="flex items-end justify-between gap-6 mb-8">
+      <div className="max-w-2xl">
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+          {eyebrow}
+        </p>
+        <h2 className="text-[clamp(1.75rem,3vw,2.25rem)] font-bold m-0 -tracking-[0.025em]">
+          {title}
+        </h2>
+        {description && (
+          <p className="mt-2 text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {link && (
+        <Link
+          href={link.href}
+          className="text-sm font-semibold text-primary hover:underline whitespace-nowrap hidden sm:inline-flex items-center gap-1"
+        >
+          {link.label}
+          <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+            <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </Link>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import {
+  CardVariant,
+  FoodProductCard,
+  RetailProductCard,
+  WholesaleProductCard,
+  DigitalProductCard,
+  BundleProductCard,
+  CompositeProductCard,
+  StandardServiceCard,
+  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.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 links to the dedicated product page at
+ * `/products/<slug>`. Statically pre-renderable (no `useSearchParams`),
+ * with `prefetch` enabled so hover → instant nav. Full product page
+ * (vs a modal) is the right pattern for retail: spec sheets, multi-image
+ * galleries, reviews, comparison rails all need vertical real estate.
+ */
+export function StoreProductCard({ product, variant }: Props) {
+  const slug = product.slug || product.id;
+  const Card = VARIANT_CARDS[variant ?? resolveVariant(product)];
+  const href = `/products/${encodeURIComponent(slug)}`;
+
+  return (
+    <Card
+      product={product}
+      renderLink={({ className, children }) => (
+        <Link href={href} className={className}>
+          {children}
+        </Link>
+      )}
+    />
+  );
+}

package/templates/storefront-fashion/components/trade-in-cta.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import { brand } from "@/lib/brand";
+
+export function TradeInCta() {
+  const t = brand.tradeIn;
+  if (!t) return null;
+  return (
+    <section className="max-w-7xl mx-auto px-6 sm:px-8 py-14 sm:py-20">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-foreground text-background rounded-3xl p-8 sm:p-12 lg:p-14 overflow-hidden relative">
+        <div className="absolute top-0 right-0 w-1/2 h-full opacity-[0.04] [background-image:linear-gradient(135deg,white_1px,transparent_1px)] [background-size:24px_24px] pointer-events-none" />
+        <div>
+          <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary-foreground/70 mb-3">
+            {t.eyebrow}
+          </p>
+          <h2 className="text-[clamp(1.75rem,3.5vw,2.5rem)] font-bold m-0 mb-4 -tracking-[0.025em] leading-[1.1]">
+            {t.title}
+          </h2>
+          <p className="text-background/75 leading-relaxed mb-6">{t.body}</p>
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              href={t.primaryCtaHref}
+              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"
+            >
+              {t.primaryCtaLabel}
+              <svg viewBox="0 0 12 12" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                <path d="M3 6h7m0 0L7 3m3 3L7 9" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            </Link>
+            <Link
+              href={t.secondaryCtaHref}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-background/25 hover:bg-background/10 transition-colors text-sm font-medium"
+            >
+              {t.secondaryCtaLabel}
+            </Link>
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-3">
+          {t.steps.map((s) => (
+            <div
+              key={s.step}
+              className="rounded-2xl p-4 sm:p-5 bg-background/5 border border-background/10"
+            >
+              <p className="text-[10px] font-mono text-primary tabular-nums mb-3">{s.step}</p>
+              <p className="text-[13px] sm:text-sm font-semibold mb-1.5 -tracking-[0.015em]">
+                {s.title}
+              </p>
+              <p className="text-[11px] sm:text-xs text-background/65 leading-snug">{s.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-fashion/components/trust-bar.tsx

@@ -0,0 +1,66 @@
+import { brand } from "@/lib/brand";
+
+const ICONS: Record<string, React.ReactNode> = {
+  delivery: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M3 7h12v8H3zM15 10h4l3 3v2h-7z" strokeLinejoin="round" />
+      <circle cx="7" cy="17" r="1.5" />
+      <circle cx="18" cy="17" r="1.5" />
+    </svg>
+  ),
+  warranty: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" strokeLinejoin="round" />
+      <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  payment: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <rect x="3" y="6" width="18" height="12" rx="2" />
+      <line x1="3" y1="10" x2="21" y2="10" />
+    </svg>
+  ),
+  verified: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M8 12l3 3 5-6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  support: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+      <path d="M18 18a8 8 0 1 0-12 0" />
+      <path d="M3 18h4v3H3zM17 18h4v3h-4z" strokeLinejoin="round" />
+    </svg>
+  ),
+};
+
+const FALLBACK_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden>
+    <circle cx="12" cy="12" r="9" />
+  </svg>
+);
+
+export function TrustBar() {
+  const items = brand.trustItems;
+  if (!items || items.length === 0) return null;
+  return (
+    <section className="border-y border-border bg-card">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 py-10 grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-8">
+        {items.map((it) => (
+          <div key={it.label} className="flex items-start gap-3">
+            <div className="grid place-items-center w-10 h-10 rounded-lg bg-primary/10 text-primary shrink-0">
+              {ICONS[it.iconKey] ?? FALLBACK_ICON}
+            </div>
+            <div className="min-w-0">
+              <p className="text-[10px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-0.5">
+                {it.label}
+              </p>
+              <p className="text-base font-semibold -tracking-[0.015em] mb-0.5">{it.value}</p>
+              <p className="text-xs text-muted-foreground leading-snug">{it.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}