@ikas/code-components-mcp 1.4.0-beta.2 → 1.4.0-beta.200

package/data/section-templates/account-info-section/children/AccountFavorites/ikas-config-snippet.json

@@ -34,6 +34,19 @@
       "displayName": "Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-card-product-name"
+          },
+          {
+            "codeComponentId": "nb34u3yu-card-product-variants"
+          },
+          {
+            "codeComponentId": "nb34u3yu-card-product-price"
+          }
+        ]
+      },
       "privateVarMap": {
         "product": {
           "id": "pvm_1772803530689_1",
@@ -41,9 +54,9 @@
         }
       },
       "filteredComponentIds": [
-        "{{PROJECT_ID}}-card-product-price",
-        "{{PROJECT_ID}}-card-product-variants",
-        "{{PROJECT_ID}}-card-product-name"
+        "<id-of-CardProductPrice>",
+        "<id-of-CardProductVariants>",
+        "<id-of-CardProductName>"
       ]
     }
   ],

package/data/section-templates/account-info-section/children/AccountOrders/index.tsx

@@ -80,7 +80,7 @@ export function AccountOrders({
           <Button
             variant="primary"
             size="s"
-            onClick={() => Router.navigate("/")}
+            onClick={() => Router.navigateToPage("INDEX")}
           >
             {shopButtonText}
           </Button>

package/data/section-templates/account-info-section/ikas-config-snippet.json

@@ -50,12 +50,31 @@
       "displayName": "Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-account-info-content"
+          },
+          {
+            "codeComponentId": "nb34u3yu-account-orders"
+          },
+          {
+            "codeComponentId": "nb34u3yu-account-addresses"
+          },
+          {
+            "codeComponentId": "nb34u3yu-account-favorites"
+          },
+          {
+            "codeComponentId": "nb34u3yu-account-order-detail"
+          }
+        ]
+      },
       "filteredComponentIds": [
-        "{{PROJECT_ID}}-account-info-content",
-        "{{PROJECT_ID}}-account-orders",
-        "{{PROJECT_ID}}-account-addresses",
-        "{{PROJECT_ID}}-account-favorites",
-        "{{PROJECT_ID}}-account-order-detail"
+        "<id-of-AccountInfoContent>",
+        "<id-of-AccountOrders>",
+        "<id-of-AccountAddresses>",
+        "<id-of-AccountFavorites>",
+        "<id-of-AccountOrderDetail>"
       ]
     },
     {

package/data/section-templates/add-to-cart/ikas-config-snippet.json

@@ -40,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -48,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -56,6 +64,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -64,6 +76,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -72,6 +88,7 @@
       "displayName": "Hide Quantity Selector",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "settings"
     },
     {

package/data/section-templates/add-to-cart/index.tsx

@@ -10,13 +10,14 @@ import {
   IkasBundleSettings,
   IkasStorefrontConfig,
 } from "@ikas/bp-storefront";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { Props } from "./types";
 import Button from "../../sub-components/Button";
 import QuantitySelector from "../../sub-components/QuantitySelector";
 import PayWithIkas from "./components/PayWithIkas";
 import { isBundleOutOfStock } from "../../utils/bundle";
 import { validateOptionSet } from "../../utils/optionSet";
+import { getProductCartLimits } from "../../utils/cartLimits";
 import { showToast } from "../../utils/toast";
 
 export function ProductDetailAddToCart({
@@ -37,6 +38,12 @@ export function ProductDetailAddToCart({
   const [quantity, setQuantity] = useState(1);
   const [isAddingToCart, setIsAddingToCart] = useState(false);
 
+  // Seed the quantity to the product's minimum-per-cart when the product changes.
+  useEffect(() => {
+    if (!product) return;
+    setQuantity(getProductCartLimits(product).min);
+  }, [product?.id]);
+
   if (!product) return null;
 
   const editLineID =
@@ -59,6 +66,8 @@ export function ProductDetailAddToCart({
 
   const isDisabled = isOutOfStock || isAddingToCart;
 
+  const { min: minQuantity, max: maxQuantity } = getProductCartLimits(product);
+
   const payWithIkasUrl = IkasStorefrontConfig.getPayWithIkasUrl();
   const routing = IkasStorefrontConfig.getCurrentRouting();
   const showPayWithIkas =
@@ -119,7 +128,12 @@ export function ProductDetailAddToCart({
     >
       <div className="kombos-pd-atc__actions">
         {!hideQuantityInput && !isOutOfStock && (
-          <QuantitySelector value={quantity} onChange={setQuantity} />
+          <QuantitySelector
+            value={quantity}
+            onChange={setQuantity}
+            min={minQuantity}
+            max={maxQuantity}
+          />
         )}
         <Button
           variant="primary"

package/data/section-templates/add-to-cart/sub-components/QuantitySelector/index.tsx

@@ -5,20 +5,27 @@ interface Props {
   value: number;
   onChange: (value: number) => void;
   size?: "default" | "sm";
+  min?: number;
+  max?: number;
 }
 
 export default function QuantitySelector({
   value,
   onChange,
   size = "default",
+  min = 1,
+  max,
 }: Props) {
+  const canDecrease = value > min;
+  const canIncrease = max == null || value < max;
+
   return (
     <div className={cx("kombos-pd__qty", size === "sm" && "kombos-pd__qty--sm")}>
       <button
         type="button"
         className="kombos-pd__qty-btn"
-        onClick={() => onChange(Math.max(1, value - 1))}
-        disabled={value <= 1}
+        onClick={() => onChange(Math.max(min, value - 1))}
+        disabled={!canDecrease}
         aria-label="Decrease quantity"
       >
         <MinusSVG />
@@ -31,7 +38,8 @@ export default function QuantitySelector({
       <button
         type="button"
         className="kombos-pd__qty-btn"
-        onClick={() => onChange(value + 1)}
+        onClick={() => onChange(max == null ? value + 1 : Math.min(max, value + 1))}
+        disabled={!canIncrease}
         aria-label="Increase quantity"
       >
         <PlusSVG />

package/data/section-templates/add-to-cart/utils/cartLimits.ts

@@ -0,0 +1,24 @@
+import { IkasProduct, IkasStorefrontConfig } from "@ikas/bp-storefront";
+
+export interface CartQuantityLimits {
+  min: number;
+  max?: number;
+}
+
+/**
+ * Resolve the per-cart quantity limits for a product from its active sales
+ * channel. Falls back to a minimum of 1 and no maximum when the channel or its
+ * limits are not set. `addItemToCart` clamps to the same limits internally only
+ * when it creates a NEW cart line — incrementing an existing line goes through
+ * `changeItemQuantity`, which never clamps — so enforcing these in the stepper
+ * is the only guard that covers both paths.
+ */
+export function getProductCartLimits(product: IkasProduct): CartQuantityLimits {
+  const channel = product.salesChannels?.find(
+    (sc) => sc.id === IkasStorefrontConfig.salesChannelId,
+  );
+  return {
+    min: channel?.minQuantityPerCart ?? 1,
+    max: channel?.maxQuantityPerCart ?? undefined,
+  };
+}

package/data/section-templates/blog-home-section/ikas-config-snippet.json

@@ -56,6 +56,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -64,6 +65,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },

package/data/section-templates/blog-home-section/index.tsx

@@ -6,6 +6,7 @@ import {
   hasBlogListPrevPage,
   hasBlogListNextPage,
   getIkasBlogCategoryHref,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import { observer } from "@ikas/component-utils";
 import { cx } from "../../utils/cx";
@@ -47,7 +48,7 @@ export function BlogHome({
         {categories.length > 0 && (
           <div className="kombos-blog-home__categories">
             <a
-              href="/blog"
+              href={withRoutePrefix("/blog")}
               className={cx(
                 "kombos-blog-home__cat-btn",
                 "text-sm-medium",

package/data/section-templates/blog-post-section/ikas-config-snippet.json

@@ -41,6 +41,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -49,6 +50,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },

package/data/section-templates/blog-post-section/index.tsx

@@ -2,6 +2,7 @@ import {
   getIkasBlogFormattedDate,
   getIkasBlogCategoryHref,
   getDefaultSrc,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 
 import { Props } from "./types";
@@ -31,8 +32,8 @@ export function BlogPost({
   const writerName = getFullName(blogPost.writer?.firstName, blogPost.writer?.lastName);
 
   const breadcrumbItems: BreadcrumbItem[] = [
-    { label: homeText, href: "/" },
-    { label: blogText, href: "/blog" },
+    { label: homeText, href: withRoutePrefix("/") },
+    { label: blogText, href: withRoutePrefix("/blog") },
   ];
   if (categoryName && categoryHref) {
     breadcrumbItems.push({ label: categoryName, href: categoryHref });

package/data/section-templates/bundle-products/hooks/useBundleProducts.ts

@@ -9,15 +9,16 @@ import {
   cartStore,
   waitForCartStoreInit,
 } from "@ikas/bp-storefront";
-import { runInAction } from "mobx";
 import { adjustBundleProductQuantity } from "../utils/bundle";
 
+// No mobx action wrapper needed: adjustments go through the public
+// setBundleProductQuantity API (plain mutation, same as the SDK's own usage
+// examples), and keeping the theme free of direct mobx imports lets the
+// scaffold install cleanly under pnpm's strict node_modules layout.
 function adjustBundleQuantities(products: IkasBundleProduct[]) {
-  runInAction(() => {
-    for (const bp of products) {
-      adjustBundleProductQuantity(bp);
-    }
-  });
+  for (const bp of products) {
+    adjustBundleProductQuantity(bp);
+  }
 }
 
 export function useBundleProducts(product: IkasProduct | null | undefined) {

package/data/section-templates/bundle-products/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -48,6 +64,7 @@
       "displayName": "Furniture Bundle Mode",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "settings"
     },
     {
@@ -55,6 +72,7 @@
       "displayName": "Disable Product Link",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "settings"
     },
     {
@@ -86,6 +104,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -94,6 +113,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "appearance",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     }

package/data/section-templates/cart-section/components/EmptyState/index.tsx

@@ -12,7 +12,7 @@ export default function EmptyState({
   continueShoppingText,
 }: Props) {
   const handleContinueShopping = () => {
-    Router.navigate("/");
+    Router.navigateToPage("INDEX");
   };
 
   return (

package/data/section-templates/cart-section/sub-components/CartItem/index.tsx

@@ -14,9 +14,12 @@ import {
   getOrderLineItemFormattedOverridenPriceWithQuantity,
   hasOrderLineItemDiscount,
   getOrderLineItemOverridenPriceWithQuantity,
+  cartStore,
+  isOrderLineItemAutoCreated,
 } from "@ikas/bp-storefront";
 import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
 import { cx } from "../../utils/cx";
+import { useCartLineLimits } from "../../utils/cartLineLimits";
 import type { AspectRatio, ObjectFit } from "../../global-types";
 
 interface CartItemProps {
@@ -25,6 +28,7 @@ interface CartItemProps {
   variant?: "sidebar" | "page";
   aspectRatio?: AspectRatio;
   objectFit?: ObjectFit;
+  giftLabel?: string;
 }
 
 const CartItem = observer(function CartItem({
@@ -33,9 +37,29 @@ const CartItem = observer(function CartItem({
   variant = "sidebar",
   aspectRatio,
   objectFit,
+  giftLabel = "Gift",
 }: CartItemProps) {
   const isPage = variant === "page";
 
+  // The line's IkasOrderLineVariant carries no salesChannels, so the per-cart
+  // quantity limits come from a batched product fetch shared across all lines.
+  const limits = useCartLineLimits(item.variant?.productId);
+
+  // Lines a campaign added automatically (e.g. a "buy 1 get 1" gift) cannot be
+  // edited or removed on their own, so render them read-only with a badge.
+  const isAutoCreated =
+    !!cartStore.cart && isOrderLineItemAutoCreated(cartStore.cart, item);
+  const giftBadge = isAutoCreated ? (
+    <span className="kombos-cart-item__gift-badge text-xs-medium">
+      {giftLabel}
+    </span>
+  ) : null;
+  const staticQuantity = (
+    <span className="kombos-cart-item__qty-static text-sm-medium">
+      ×{item.quantity}
+    </span>
+  );
+
   const mediaStyle: Record<string, string> = {
     aspectRatio: resolveAspectRatio(aspectRatio),
     objectFit: resolveObjectFit(objectFit),
@@ -103,6 +127,7 @@ const CartItem = observer(function CartItem({
               <a href={href} className={nameClass}>
                 {item.variant?.name}
               </a>
+              {giftBadge}
               {variantValues.length > 0 && (
                 <p className="kombos-cart-item__variant-text text-sm-regular">
                   {variantValues
@@ -113,19 +138,22 @@ const CartItem = observer(function CartItem({
                 </p>
               )}
             </div>
-            <button
-              className="kombos-cart-item__remove"
-              onClick={() => onRemove(item)}
-              aria-label="Remove"
-            >
-              <TrashSVG />
-            </button>
+            {!isAutoCreated && (
+              <button
+                className="kombos-cart-item__remove"
+                onClick={() => onRemove(item)}
+                aria-label="Remove"
+              >
+                <TrashSVG />
+              </button>
+            )}
           </div>
         ) : (
           <>
             <a href={href} className={nameClass}>
               {item.variant?.name}
             </a>
+            {giftBadge}
 
             {variantValues.length > 0 && (
               <div className="kombos-cart-item__variants">
@@ -151,11 +179,17 @@ const CartItem = observer(function CartItem({
 
         {isPage ? (
           <div className="kombos-cart-item__bottom">
-            <QuantitySelector
-              size="sm"
-              value={item.quantity}
-              onChange={(qty) => changeItemQuantity(item, qty)}
-            />
+            {isAutoCreated ? (
+              staticQuantity
+            ) : (
+              <QuantitySelector
+                size="sm"
+                value={item.quantity}
+                min={limits?.min ?? 1}
+                max={limits?.max}
+                onChange={(qty) => changeItemQuantity(item, qty)}
+              />
+            )}
             <div className="kombos-cart-item__prices">
               {hasDiscount && (
                 <span className="kombos-cart-item__original-price text-sm-regular-strike">
@@ -193,18 +227,26 @@ const CartItem = observer(function CartItem({
             </div>
 
             <div className="kombos-cart-item__actions">
-              <QuantitySelector
-                size="sm"
-                value={item.quantity}
-                onChange={(qty) => changeItemQuantity(item, qty)}
-              />
-              <button
-                className="kombos-cart-item__remove"
-                onClick={() => onRemove(item)}
-                aria-label="Remove"
-              >
-                <TrashSVG />
-              </button>
+              {isAutoCreated ? (
+                staticQuantity
+              ) : (
+                <>
+                  <QuantitySelector
+                    size="sm"
+                    value={item.quantity}
+                    min={limits?.min ?? 1}
+                    max={limits?.max}
+                    onChange={(qty) => changeItemQuantity(item, qty)}
+                  />
+                  <button
+                    className="kombos-cart-item__remove"
+                    onClick={() => onRemove(item)}
+                    aria-label="Remove"
+                  >
+                    <TrashSVG />
+                  </button>
+                </>
+              )}
             </div>
           </>
         )}

package/data/section-templates/cart-section/sub-components/CartItem/styles.css

@@ -168,3 +168,17 @@
   flex-shrink: 0;
 }
 
+/* Auto-created (campaign gift) line: badge + read-only quantity */
+.kombos-cart-item__gift-badge {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  background: var(--kombos-gray-100);
+  color: var(--kombos-gray-500);
+}
+
+.kombos-cart-item__qty-static {
+  color: var(--kombos-gray-500);
+}
+

package/data/section-templates/cart-section/sub-components/QuantitySelector/index.tsx

@@ -5,20 +5,27 @@ interface Props {
   value: number;
   onChange: (value: number) => void;
   size?: "default" | "sm";
+  min?: number;
+  max?: number;
 }
 
 export default function QuantitySelector({
   value,
   onChange,
   size = "default",
+  min = 1,
+  max,
 }: Props) {
+  const canDecrease = value > min;
+  const canIncrease = max == null || value < max;
+
   return (
     <div className={cx("kombos-pd__qty", size === "sm" && "kombos-pd__qty--sm")}>
       <button
         type="button"
         className="kombos-pd__qty-btn"
-        onClick={() => onChange(Math.max(1, value - 1))}
-        disabled={value <= 1}
+        onClick={() => onChange(Math.max(min, value - 1))}
+        disabled={!canDecrease}
         aria-label="Decrease quantity"
       >
         <MinusSVG />
@@ -31,7 +38,8 @@ export default function QuantitySelector({
       <button
         type="button"
         className="kombos-pd__qty-btn"
-        onClick={() => onChange(value + 1)}
+        onClick={() => onChange(max == null ? value + 1 : Math.min(max, value + 1))}
+        disabled={!canIncrease}
         aria-label="Increase quantity"
       >
         <PlusSVG />

package/data/section-templates/cart-section/utils/cartLimits.ts

@@ -0,0 +1,24 @@
+import { IkasProduct, IkasStorefrontConfig } from "@ikas/bp-storefront";
+
+export interface CartQuantityLimits {
+  min: number;
+  max?: number;
+}
+
+/**
+ * Resolve the per-cart quantity limits for a product from its active sales
+ * channel. Falls back to a minimum of 1 and no maximum when the channel or its
+ * limits are not set. `addItemToCart` clamps to the same limits internally only
+ * when it creates a NEW cart line — incrementing an existing line goes through
+ * `changeItemQuantity`, which never clamps — so enforcing these in the stepper
+ * is the only guard that covers both paths.
+ */
+export function getProductCartLimits(product: IkasProduct): CartQuantityLimits {
+  const channel = product.salesChannels?.find(
+    (sc) => sc.id === IkasStorefrontConfig.salesChannelId,
+  );
+  return {
+    min: channel?.minQuantityPerCart ?? 1,
+    max: channel?.maxQuantityPerCart ?? undefined,
+  };
+}