@ikas/code-components-mcp 1.4.0-beta.23 → 1.4.0-beta.230

package/data/section-templates/hero-slider-section/children/HeroSliderItem/ikas-config-snippet.json

@@ -25,6 +25,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "desktop",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -40,6 +41,7 @@
       "displayName": "Title Alignment",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Middle",
       "groupId": "desktop",
       "enumTypeId": "{{ENUM_ID:VerticalAlignment}}"
     },
@@ -48,6 +50,7 @@
       "displayName": "Text Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#FFFFFF",
       "groupId": "desktop"
     },
     {
@@ -55,6 +58,7 @@
       "displayName": "Overlay",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "desktop"
     },
     {
@@ -62,6 +66,7 @@
       "displayName": "Rounded Corners",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "desktop"
     },
     {
@@ -84,6 +89,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "mobile",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -99,6 +105,7 @@
       "displayName": "Title Alignment",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Top",
       "groupId": "mobile",
       "enumTypeId": "{{ENUM_ID:VerticalAlignment}}"
     },
@@ -107,6 +114,7 @@
       "displayName": "Text Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#FFFFFF",
       "groupId": "mobile"
     },
     {
@@ -114,6 +122,7 @@
       "displayName": "Overlay",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "mobile"
     },
     {
@@ -121,6 +130,7 @@
       "displayName": "Rounded Corners",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "mobile"
     },
     {
@@ -143,6 +153,7 @@
       "displayName": "Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#14141a",
       "groupId": "desktopButton"
     },
     {
@@ -150,6 +161,7 @@
       "displayName": "Background Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#ffffff",
       "groupId": "desktopButton"
     },
     {
@@ -157,6 +169,7 @@
       "displayName": "Color (Hover)",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#14141a",
       "groupId": "desktopButton"
     },
     {
@@ -164,6 +177,7 @@
       "displayName": "Background Color (Hover)",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#fafafa",
       "groupId": "desktopButton"
     },
     {
@@ -186,6 +200,7 @@
       "displayName": "Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#14141a",
       "groupId": "mobileButton"
     },
     {
@@ -193,6 +208,7 @@
       "displayName": "Background Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#ffffff",
       "groupId": "mobileButton"
     },
     {
@@ -200,6 +216,7 @@
       "displayName": "Color (Hover)",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#14141a",
       "groupId": "mobileButton"
     },
     {
@@ -207,6 +224,7 @@
       "displayName": "Background Color (Hover)",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#fafafa",
       "groupId": "mobileButton"
     }
   ],

package/data/section-templates/hero-slider-section/children/HeroSliderItem/index.tsx

@@ -4,6 +4,7 @@ import {
   createMediaSrcset,
   getFormattedFontSize,
   Router,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import { Props } from "./types";
 import {
@@ -113,15 +114,19 @@ export function HeroSliderItem({
     mobileRoundedCorners && "kombos-hero-slider-item--mobile-rounded",
   );
 
-  const handleDesktopClick = () => {
-    if (!link) return;
-    Router.navigate(link.href || "/", false, link.openInNewTab ?? false);
+  // `target.href` already carries the routing prefix — it comes from a LINK prop the storefront
+  // resolves per request. Only the fallback is a literal, so only it needs prefixing.
+  const navigateToLink = (target: typeof link) => {
+    if (!target) return;
+    Router.navigate(
+      target.href || withRoutePrefix("/"),
+      false,
+      target.openInNewTab ?? false,
+    );
   };
 
-  const handleMobileClick = () => {
-    if (!mobLink) return;
-    Router.navigate(mobLink.href || "/", false, mobLink.openInNewTab ?? false);
-  };
+  const handleDesktopClick = () => navigateToLink(link);
+  const handleMobileClick = () => navigateToLink(mobLink);
 
   const formattedDesktopFontSize = getFormattedFontSize(buttonFontSize);
   const formattedMobileFontSize = getFormattedFontSize(mobBtnFontSize);

package/data/section-templates/hero-slider-section/ikas-config-snippet.json

@@ -18,6 +18,7 @@
       "displayName": "Autoplay",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "settings"
     },
     {
@@ -33,6 +34,7 @@
       "displayName": "Full Width",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "settings"
     },
     {
@@ -40,6 +42,7 @@
       "displayName": "Show Arrows",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "settings"
     },
     {
@@ -47,6 +50,16 @@
       "displayName": "Slides",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-hero-slide"
+          },
+          {
+            "codeComponentId": "nb34u3yu-hero-slide"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-HeroSliderItem>"
       ]

package/data/section-templates/image-handling/ikas-config-snippet.json

@@ -16,6 +16,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -24,6 +25,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -32,6 +34,46 @@
       "displayName": "Info Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-name-favorite"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-sku"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-prices"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-product-group"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-bundle-product"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-variant"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-option-set"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-add-to-cart"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-back-in-stock"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-offer"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-features"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-description"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailNameFavorite>",
         "<id-of-ProductDetailSku>",
@@ -39,6 +81,7 @@
         "<id-of-ProductDetailProductGroup>",
         "<id-of-ProductDetailVariant>",
         "<id-of-ProductDetailAddToCart>",
+        "<id-of-ProductDetailBackInStock>",
         "<id-of-ProductDetailFeatures>",
         "<id-of-ProductDetailDescription>",
         "<id-of-ProductDetailBundleProduct>",
@@ -51,6 +94,16 @@
       "displayName": "Sub Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-bundle-furniture"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-offer"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailBundleFurniture>",
         "<id-of-ProductDetailOffer>"

package/data/section-templates/image-handling/index.tsx

@@ -6,6 +6,7 @@ import {
   IkasImage,
   isNotEmpty,
   IkasComponentRenderer,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import { Props } from "./types";
 import Breadcrumb from "../../sub-components/Breadcrumb";
@@ -42,7 +43,10 @@ export function ProductDetail(props: Props) {
       <div className="kombos-container kombos-pd__container">
         <Breadcrumb
           items={[
-            { label: homepageText, href: "/" } as BreadcrumbItem,
+            {
+              label: homepageText,
+              href: withRoutePrefix("/"),
+            } as BreadcrumbItem,
             ...(isNotEmpty(categoryPath)
               ? categoryPath.map(
                   (pathItem: any) =>

package/data/section-templates/login-section/ikas-config-snippet.json

@@ -90,6 +90,7 @@
       "displayName": "Google Login",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "google"
     },
     {
@@ -105,6 +106,7 @@
       "displayName": "Facebook Login",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "facebook"
     },
     {

package/data/section-templates/navigation/components/CartSidebar/index.tsx

@@ -19,6 +19,7 @@ import {
   getCheckoutUrlFromCartStore,
   IkasOrderLineItem,
   Router,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import type { AspectRatio, ObjectFit } from "../../../../global-types";
 import CartItem from "../../../../sub-components/CartItem";
@@ -164,7 +165,7 @@ const CartSidebar = observer(function CartSidebar({
             </div>
             <div className="kombos-cart-sidebar__footer-buttons">
               <a
-                href="/cart"
+                href={withRoutePrefix("/cart")}
                 className="kombos-cart-sidebar__view-cart-link"
                 onClick={(e: Event) => {
                   e.preventDefault();

package/data/section-templates/navigation/components/SearchModal/index.tsx

@@ -12,6 +12,7 @@ import {
   createMediaSrcset,
   getProductOptionSet,
   IkasComponentRenderer,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import type { IkasProduct } from "@ikas/bp-storefront";
 import { cx } from "../../../../utils/cx";
@@ -199,7 +200,7 @@ const SearchModal = observer(function SearchModal({
           <div className="kombos-search__logo-area">
             {logo && (
               <a
-                href="/"
+                href={withRoutePrefix("/")}
                 className="kombos-search__logo"
                 style={{
                   "--search-logo-h-desktop": logoSizeDesktop,

package/data/section-templates/navigation/ikas-config-snippet.json

@@ -17,6 +17,10 @@
       "displayName": "Desktop Logo Size",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 60,
+        "unit": "px"
+      },
       "groupId": "logo-settings",
       "typeId": "@ikas/bp-storefront-models-HeightStyleType"
     },
@@ -25,6 +29,10 @@
       "displayName": "Mobile Logo Size",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 48,
+        "unit": "px"
+      },
       "groupId": "logo-settings",
       "typeId": "@ikas/bp-storefront-models-HeightStyleType"
     },
@@ -40,6 +48,7 @@
       "displayName": "Link Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#2e2e33",
       "groupId": "navigation"
     },
     {
@@ -54,6 +63,7 @@
       "displayName": "Link Color",
       "type": "COLOR",
       "required": false,
+      "defaultValue": "#2e2e33",
       "groupId": "colored-links"
     },
     {
@@ -140,6 +150,7 @@
       "displayName": "Hide Add to Cart Button",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "search-card-settings"
     },
     {
@@ -219,6 +230,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_1772803767210_2",
@@ -236,6 +260,7 @@
       "displayName": "Image Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "search-image",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -244,6 +269,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "search-image",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -260,6 +286,7 @@
       "displayName": "Enable Sticky",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "description": "When enabled, the navbar stays fixed at the top of the page and remains visible while scrolling",
       "groupId": "settings"
     },

package/data/section-templates/navigation/index.tsx

@@ -8,6 +8,7 @@ import {
   getFormattedHeightSize,
   Router,
   createMediaSrcset,
+  withRoutePrefix,
 } from "@ikas/bp-storefront";
 import { Props } from "./types";
 import CartSidebar from "./components/CartSidebar";
@@ -104,10 +105,10 @@ export function Navbar(props: Props) {
         {logo && (
           <a
             className="kombos-navbar__logo"
-            href="/"
+            href={withRoutePrefix("/")}
             onClick={(e) => {
               e.preventDefault();
-              Router.navigate("/");
+              Router.navigateToPage("INDEX");
             }}
             style={{
               "--logo-h-desktop": logoSizeDesktop,
@@ -145,7 +146,7 @@ export function Navbar(props: Props) {
           {/* Search */}
           <a
             className="kombos-navbar__icon-btn"
-            href="/search"
+            href={withRoutePrefix("/search")}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -159,7 +160,7 @@ export function Navbar(props: Props) {
           {/* Account */}
           <a
             className="kombos-navbar__icon-btn"
-            href={isLoggedIn ? "/account" : "/login"}
+            href={withRoutePrefix(isLoggedIn ? "/account" : "/account/login")}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
@@ -173,7 +174,7 @@ export function Navbar(props: Props) {
           {/* Cart */}
           <a
             className="kombos-navbar__icon-btn kombos-navbar__cart-trigger"
-            href="/cart"
+            href={withRoutePrefix("/cart")}
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();

package/data/section-templates/navigation/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/navigation/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);
+}
+