@cimplify/sdk 0.44.34 → 0.45.0

package/templates/storefront-retail/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 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-retail/components/trade-in-cta.tsx

@@ -1,54 +0,0 @@
-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-retail/components/trust-bar.tsx

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