@cimplify/sdk 0.83.0 → 0.85.0

package/registry/default-product-layout.json

@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "layouts/default-product-layout.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { resolveGallery } from \"../../gallery\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { AvailabilityBadge } from \"@cimplify/sdk/react\";\nimport { SaleBadge } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage, getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function DefaultProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const [selectedVariantId, setSelectedVariantId] = React.useState<string | undefined>();\n  const images = resolveGallery(product, selectedVariantId);\n  const currency = getProductCurrency(product);\n  const hasRange = (product.quantity_pricing && product.quantity_pricing.length > 1)\n    || (product.variants && product.variants.length > 1);\n  const onSale = isOnSale(product);\n  const hasPhysicalDetails = product.sku || product.vendor || product.material;\n\n  return (\n    <div data-cimplify-product-layout=\"default\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Brand + Tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {product.vendor && (\n                <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-widest\">\n                  {product.vendor}\n                </span>\n              )}\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name */}\n            <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n              {product.name}\n            </h1>\n\n            {/* Price */}\n            <div className=\"flex items-baseline gap-3\">\n              {hasRange ? (\n                <PriceRange product={product} currency={currency} className=\"text-2xl font-extrabold\" />\n              ) : onSale ? (\n                <>\n                  <Price amount={product.default_price} currency={currency} className=\"text-2xl font-extrabold\" />\n                  <Price amount={getBasePrice(product)} currency={currency} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    Save {getDiscountPercentage(product)}%\n                  </span>\n                </>\n              ) : (\n                <Price amount={product.default_price} currency={currency} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Physical product details */}\n            {hasPhysicalDetails && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.sku && <p>SKU: <span className=\"font-mono text-foreground\">{product.sku}</span></p>}\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.material && <p>Material: <span className=\"text-foreground\">{product.material}</span></p>}\n                {product.vendor && <p>Brand: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {(product.length_mm || product.width_mm || product.height_mm) && (\n                  <p>Dimensions: <span className=\"text-foreground\">\n                    {[product.length_mm, product.width_mm, product.height_mm]\n                      .filter(Boolean)\n                      .map((d) => `${(d! / 10).toFixed(1)} cm`)\n                      .join(\" x \")}\n                  </span></p>\n                )}\n                {product.item_condition && product.item_condition !== \"new\" && (\n                  <p>Condition: <span className=\"text-foreground capitalize\">{product.item_condition}</span></p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              onVariantChange={(variantId) => setSelectedVariantId(variantId)}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n        />\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport {\n  TwoColumnGrid,\n  RelatedProductsSection,\n  CustomAttributesTable,\n  PropertiesTable,\n  TagPills,\n  InventoryBadge,\n} from \"@cimplify/sdk/react\";\nimport { ProductImageGallery } from \"@cimplify/sdk/react\";\nimport { ProductCustomizer } from \"@cimplify/sdk/react\";\nimport { resolveGallery } from \"../../gallery\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { PriceRange } from \"@cimplify/sdk/react\";\nimport { AvailabilityBadge } from \"@cimplify/sdk/react\";\nimport { SaleBadge } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage, getProductCurrency } from \"@cimplify/sdk\";\nimport { RichText } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function DefaultProductLayout({\n  product,\n  onAddToCart,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n}: ProductLayoutProps): React.ReactElement {\n  const [selectedVariantId, setSelectedVariantId] = React.useState<string | undefined>();\n  const images = resolveGallery(product, selectedVariantId);\n  const currency = getProductCurrency(product);\n  const hasRange = (product.quantity_pricing && product.quantity_pricing.length > 1)\n    || (product.variants && product.variants.length > 1);\n  const onSale = isOnSale(product);\n  const hasPhysicalDetails = product.sku || product.vendor || product.material;\n\n  return (\n    <div data-cimplify-product-layout=\"default\" className={cn(\"space-y-8\", className)}>\n      {renderBreadcrumb?.(product)}\n\n      <TwoColumnGrid\n        left={\n          <ProductImageGallery\n            images={images}\n            productName={product.name}\n          />\n        }\n        right={\n          <div className=\"space-y-6\">\n            {/* Brand + Tags */}\n            <div className=\"flex flex-wrap items-center gap-2\">\n              {product.vendor && (\n                <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-widest\">\n                  {product.vendor}\n                </span>\n              )}\n              <TagPills tags={product.tags || []} />\n            </div>\n\n            {/* Name */}\n            <h1 data-cimplify-product-layout-name className=\"text-3xl lg:text-4xl font-extrabold tracking-tight\">\n              {product.name}\n            </h1>\n\n            {/* Price */}\n            <div className=\"flex items-baseline gap-3\">\n              {hasRange ? (\n                <PriceRange product={product} currency={currency} className=\"text-2xl font-extrabold\" />\n              ) : product.sale ? (\n                <>\n                  <Price amount={product.sale.price} currency={currency} className=\"text-2xl font-extrabold\" />\n                  <Price amount={product.sale.original} currency={currency} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    {product.sale.badge_text ?? `${Math.round(parsePrice(product.sale.percent_off))}% OFF`}\n                  </span>\n                </>\n              ) : onSale ? (\n                <>\n                  <Price amount={product.default_price} currency={currency} className=\"text-2xl font-extrabold\" />\n                  <Price amount={getBasePrice(product)} currency={currency} className=\"text-lg text-muted-foreground line-through\" />\n                  <span className=\"text-sm font-bold text-destructive bg-destructive/10 px-2 py-0.5\">\n                    Save {getDiscountPercentage(product)}%\n                  </span>\n                </>\n              ) : (\n                <Price amount={product.default_price} currency={currency} className=\"text-2xl font-semibold\" />\n              )}\n            </div>\n\n            {/* Inventory */}\n            <InventoryBadge product={product} />\n\n            {/* Description */}\n            <RichText html={product.description} data-cimplify-product-layout-description />\n\n            {/* Physical product details */}\n            {hasPhysicalDetails && (\n              <div data-cimplify-product-layout-details className=\"space-y-1 text-sm text-muted-foreground\">\n                {product.sku && <p>SKU: <span className=\"font-mono text-foreground\">{product.sku}</span></p>}\n                {product.barcode && <p>Barcode: <span className=\"font-mono text-foreground\">{product.barcode}</span></p>}\n                {product.material && <p>Material: <span className=\"text-foreground\">{product.material}</span></p>}\n                {product.vendor && <p>Brand: <span className=\"text-foreground\">{product.vendor}</span></p>}\n                {(product.length_mm || product.width_mm || product.height_mm) && (\n                  <p>Dimensions: <span className=\"text-foreground\">\n                    {[product.length_mm, product.width_mm, product.height_mm]\n                      .filter(Boolean)\n                      .map((d) => `${(d! / 10).toFixed(1)} cm`)\n                      .join(\" x \")}\n                  </span></p>\n                )}\n                {product.item_condition && product.item_condition !== \"new\" && (\n                  <p>Condition: <span className=\"text-foreground capitalize\">{product.item_condition}</span></p>\n                )}\n              </div>\n            )}\n\n            {/* Custom Attributes */}\n            <CustomAttributesTable attributes={product.custom_attributes || []} />\n\n            {/* Properties */}\n            <PropertiesTable properties={product.properties || []} />\n\n            {/* Customizer */}\n            <ProductCustomizer\n              product={product}\n              onAddToCart={onAddToCart}\n              onVariantChange={(variantId) => setSelectedVariantId(variantId)}\n            />\n          </div>\n        }\n      />\n\n      {showRelated && relatedProducts && relatedProducts.length > 0 && (\n        <RelatedProductsSection\n          products={relatedProducts}\n        />\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/retail-product-card.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "cards/retail-product-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, WishlistButton, SoldOutOverlay, SaleBadge, LowStockBadge } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage, getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nfunction getColorSwatches(product: Product): string[] {\n  const variants = (product as ProductWithDetails).variants;\n  if (!variants || variants.length === 0) return [];\n\n  const seen = new Set<string>();\n  for (const v of variants) {\n    if (v.display_attributes) {\n      for (const attr of v.display_attributes) {\n        if (attr.axis_name.toLowerCase() === \"color\" && !seen.has(attr.value_name)) {\n          seen.add(attr.value_name);\n        }\n      }\n    }\n  }\n\n  return Array.from(seen).slice(0, 5);\n}\n\nexport function RetailProductCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const outOfStock = product.inventory_status?.in_stock === false;\n  const onSale = isOnSale(product);\n  const swatches = getColorSwatches(product);\n\n  return (\n    <CardShell product={product} renderLink={renderLink} disabled={outOfStock} className={className}>\n      {outOfStock && <SoldOutOverlay />}\n\n      <CardImage src={image} alt={product.name} aspectRatio=\"3/4\" renderImage={renderImage}>\n        {/* Sale badge */}\n        {onSale && (\n          <div className=\"absolute top-3 left-3\">\n            <SaleBadge product={product} />\n          </div>\n        )}\n\n        {/* Wishlist */}\n        <WishlistButton className=\"absolute top-3 right-3\" />\n\n        {/* Low stock */}\n        {product.inventory_status?.low_stock && product.inventory_status?.stock_level && (\n          <span className=\"absolute bottom-3 left-3 text-[11px] font-semibold bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md\">\n            Only {product.inventory_status.stock_level} left\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        {/* Brand */}\n        {product.vendor && (\n          <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest\">\n            {product.vendor}\n          </p>\n        )}\n\n        {/* Name */}\n        <h3 className=\"text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate\">\n          {product.name}\n        </h3>\n\n        {/* Price */}\n        <div className=\"flex items-center gap-2 mt-2\">\n          <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n          {onSale && (\n            <Price amount={getBasePrice(product)} currency={currency} className=\"text-xs text-muted-foreground line-through\" />\n          )}\n        </div>\n\n        {/* Color swatches */}\n        {swatches.length > 0 && (\n          <div className=\"flex gap-1.5 mt-2.5\">\n            {swatches.map((name) => (\n              <span\n                key={name}\n                title={name}\n                className=\"text-[9px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\"\n              >\n                {name}\n              </span>\n            ))}\n          </div>\n        )}\n      </div>\n    </CardShell>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { CardShell, CardImage, WishlistButton, SoldOutOverlay, SaleBadge, LowStockBadge } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice, isOnSale, getBasePrice, getDiscountPercentage, getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nfunction getColorSwatches(product: Product): string[] {\n  const variants = (product as ProductWithDetails).variants;\n  if (!variants || variants.length === 0) return [];\n\n  const seen = new Set<string>();\n  for (const v of variants) {\n    if (v.display_attributes) {\n      for (const attr of v.display_attributes) {\n        if (attr.axis_name.toLowerCase() === \"color\" && !seen.has(attr.value_name)) {\n          seen.add(attr.value_name);\n        }\n      }\n    }\n  }\n\n  return Array.from(seen).slice(0, 5);\n}\n\nexport function RetailProductCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: CardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const outOfStock = product.inventory_status?.in_stock === false;\n  const onSale = isOnSale(product);\n  const swatches = getColorSwatches(product);\n\n  return (\n    <CardShell product={product} renderLink={renderLink} disabled={outOfStock} className={className}>\n      {outOfStock && <SoldOutOverlay />}\n\n      <CardImage src={image} alt={product.name} aspectRatio=\"3/4\" renderImage={renderImage}>\n        {/* Sale badge */}\n        {onSale && (\n          <div className=\"absolute top-3 left-3\">\n            <SaleBadge product={product} />\n          </div>\n        )}\n\n        {/* Wishlist */}\n        <WishlistButton className=\"absolute top-3 right-3\" />\n\n        {/* Low stock */}\n        {product.inventory_status?.low_stock && product.inventory_status?.stock_level && (\n          <span className=\"absolute bottom-3 left-3 text-[11px] font-semibold bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md\">\n            Only {product.inventory_status.stock_level} left\n          </span>\n        )}\n      </CardImage>\n\n      <div className=\"p-3.5\">\n        {/* Brand */}\n        {product.vendor && (\n          <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest\">\n            {product.vendor}\n          </p>\n        )}\n\n        {/* Name */}\n        <h3 className=\"text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate\">\n          {product.name}\n        </h3>\n\n        {/* Price */}\n        <div className=\"flex items-center gap-2 mt-2\">\n          {product.sale ? (\n            <>\n              <Price amount={product.sale.price} currency={currency} className=\"text-sm font-bold\" />\n              <Price amount={product.sale.original} currency={currency} className=\"text-xs text-muted-foreground line-through\" />\n            </>\n          ) : (\n            <>\n              <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n              {onSale && (\n                <Price amount={getBasePrice(product)} currency={currency} className=\"text-xs text-muted-foreground line-through\" />\n              )}\n            </>\n          )}\n        </div>\n\n        {/* Color swatches */}\n        {swatches.length > 0 && (\n          <div className=\"flex gap-1.5 mt-2.5\">\n            {swatches.map((name) => (\n              <span\n                key={name}\n                title={name}\n                className=\"text-[9px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\"\n              >\n                {name}\n              </span>\n            ))}\n          </div>\n        )}\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }