@ikas/code-components-mcp 1.4.0-beta.21 → 1.4.0-beta.212

package/data/section-templates/navigation/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/navigation/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/navigation/utils/cartLineLimits.ts

@@ -0,0 +1,100 @@
+import { useEffect, useState } from "preact/hooks";
+import { baseStore, bs_searchProductsById } from "@ikas/bp-storefront";
+import { CartQuantityLimits, getProductCartLimits } from "./cartLimits";
+
+/**
+ * Per-cart quantity limits for cart lines.
+ *
+ * A cart line's `IkasOrderLineVariant` carries no `salesChannels`, so the
+ * min/max per-cart limits can only be read from the full `IkasProduct`. This
+ * store batch-fetches the line products with `bs_searchProductsById` (lines
+ * register their productId one by one; the ids are flushed as ONE request on
+ * the next tick) and maps the resolved limits by product id for the cart
+ * steppers to read. Each product is fetched at most once; results stay cached
+ * for the session.
+ */
+
+const limitsByProductId = new Map<string, CartQuantityLimits>();
+const requestedProductIds = new Set<string>();
+const listeners = new Set<() => void>();
+
+let pendingProductIds: string[] = [];
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+async function flush() {
+  flushTimer = null;
+  const batch = pendingProductIds;
+  pendingProductIds = [];
+
+  // bs_searchProductsById never throws — API/network failures resolve with
+  // isSuccess: false — so the retry unmark must live on the result check.
+  const result = await bs_searchProductsById(baseStore, { productIds: batch }).catch(
+    () => null,
+  );
+  if (!result?.isSuccess || !result.products) {
+    // Limits stay unenforced for now; unmark the batch so a later
+    // ensureCartLineLimits call (e.g. the next cart open) can retry.
+    for (const id of batch) requestedProductIds.delete(id);
+    return;
+  }
+
+  for (const product of result.products) {
+    limitsByProductId.set(product.id, getProductCartLimits(product));
+  }
+  emit();
+}
+
+/**
+ * Register a cart line's productId for limit resolution. Ids already requested
+ * are skipped; new ids are collected and fetched in a single batched request
+ * on the next tick, so per-line calls do not fan out into per-line requests.
+ */
+export function ensureCartLineLimits(productId: string) {
+  if (requestedProductIds.has(productId)) return;
+  requestedProductIds.add(productId);
+  pendingProductIds.push(productId);
+  if (!flushTimer) flushTimer = setTimeout(flush, 0);
+}
+
+/** Resolved limits for a product — undefined until the batch fetch lands. */
+export function getCartLineLimits(
+  productId: string | null | undefined,
+): CartQuantityLimits | undefined {
+  return productId ? limitsByProductId.get(productId) : undefined;
+}
+
+/** Subscribe to limit resolutions; returns the unsubscribe function. */
+export function subscribeCartLineLimits(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/**
+ * Hook: resolved limits for one cart line's product — undefined until the
+ * batched fetch lands. Encapsulates the subscription protocol so components
+ * cannot get the ordering wrong.
+ */
+export function useCartLineLimits(
+  productId: string | null | undefined,
+): CartQuantityLimits | undefined {
+  const [, setVersion] = useState(0);
+  const limits = getCartLineLimits(productId);
+  useEffect(() => {
+    if (!productId) return;
+    // Subscribe BEFORE registering the id: a batch already in flight can
+    // resolve between render and this effect, and its emit must not be missed.
+    const unsubscribe = subscribeCartLineLimits(() => setVersion((v) => v + 1));
+    ensureCartLineLimits(productId);
+    // Re-check once for a result that landed before the subscription armed —
+    // skipped when the arming render already saw it (no redundant re-render).
+    if (!limits && getCartLineLimits(productId)) setVersion((v) => v + 1);
+    return unsubscribe;
+  }, [productId]);
+  return limits;
+}

package/data/section-templates/product-detail-section/children/ProductDetailAddToCart/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/product-detail-section/children/ProductDetailAddToCart/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/product-detail-section/children/ProductDetailBackInStock/components/BackInStockForm/index.tsx

@@ -0,0 +1,92 @@
+import {
+  IkasProductVariant,
+  getProductVariantBackInStockForm,
+  initBackInStockNotificationForm,
+  setBackInStockNotificationFormEmail,
+  submitBackInStockNotificationForm,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { useEffect } from "preact/hooks";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+import FormItem from "../../../../sub-components/FormItem";
+
+interface Props {
+  variant: IkasProductVariant;
+  description: string;
+  emailLabel: string;
+  submitButtonText: string;
+  submittingText: string;
+  errorMessage: string;
+  onSaved: () => void;
+}
+
+// observer() because it reads the MobX-backed notification form and must
+// re-render as the customer types and as the submit status flags change.
+const BackInStockForm = observer(function BackInStockForm({
+  variant,
+  description,
+  emailLabel,
+  submitButtonText,
+  submittingText,
+  errorMessage,
+  onSaved,
+}: Props) {
+  const form = getProductVariantBackInStockForm(variant);
+
+  // Initialize once per variant (resets fields + validation flags).
+  useEffect(() => {
+    initBackInStockNotificationForm(form, variant);
+  }, [form, variant]);
+
+  const emailHasError = !!form.email?.hasError;
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    if (await submitBackInStockNotificationForm(form)) onSaved();
+  };
+
+  const handleEmailInput = (e: Event) =>
+    setBackInStockNotificationFormEmail(
+      form,
+      (e.target as HTMLInputElement).value,
+    );
+
+  return (
+    <form className="kombos-pd-bis__form" onSubmit={handleSubmit}>
+      {description && <p className="kombos-pd-bis__desc">{description}</p>}
+      <FormItem
+        label={emailLabel}
+        htmlFor="back-in-stock-email"
+        status={emailHasError ? "error" : "default"}
+        helper={emailHasError ? form.email?.message : undefined}
+      >
+        <Input
+          id="back-in-stock-email"
+          type="email"
+          value={form.email?.value ?? ""}
+          placeholder={form.email?.placeholder}
+          status={emailHasError ? "error" : "default"}
+          onInput={handleEmailInput}
+        />
+      </FormItem>
+      {form.isFailure && (
+        <p className="kombos-pd-bis__error">
+          {form.responseMessage || errorMessage}
+        </p>
+      )}
+      <Button
+        variant="primary"
+        size="s"
+        type="submit"
+        className="kombos-pd-bis__submit"
+        loading={form.isSubmitting}
+        disabled={form.isSubmitting}
+      >
+        {form.isSubmitting ? submittingText : submitButtonText}
+      </Button>
+    </form>
+  );
+});
+
+export default BackInStockForm;

package/data/section-templates/product-detail-section/children/ProductDetailBackInStock/ikas-config-snippet.json

@@ -0,0 +1,175 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-back-in-stock",
+  "name": "ProductDetailBackInStock",
+  "type": "component",
+  "entry": "./src/components/ProductDetailBackInStock/index.tsx",
+  "styles": "./src/components/ProductDetailBackInStock/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Product",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "notifyButtonText",
+      "displayName": "Notify Button Text",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Notify Me When Available",
+      "groupId": "texts"
+    },
+    {
+      "name": "reminderSavedText",
+      "displayName": "Reminder Saved Text",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "We'll notify you",
+      "groupId": "texts"
+    },
+    {
+      "name": "alreadySavedMessage",
+      "displayName": "Already Saved Message",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "You're already on the list — we'll email you when it's back.",
+      "groupId": "texts"
+    },
+    {
+      "name": "savedMessage",
+      "displayName": "Saved Success Message",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Great! We'll email you when this product is back in stock.",
+      "groupId": "texts"
+    },
+    {
+      "name": "loginRequiredMessage",
+      "displayName": "Login Required Message",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Please sign in so we can notify you.",
+      "groupId": "texts"
+    },
+    {
+      "name": "errorMessage",
+      "displayName": "Error Message",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Something went wrong. Please try again.",
+      "groupId": "texts"
+    },
+    {
+      "name": "modalTitle",
+      "displayName": "Email Modal Title",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Notify me when available",
+      "groupId": "texts"
+    },
+    {
+      "name": "modalDescription",
+      "displayName": "Email Modal Description",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Enter your email and we'll let you know the moment this product is back in stock.",
+      "groupId": "texts"
+    },
+    {
+      "name": "emailLabel",
+      "displayName": "Email Field Label",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Email",
+      "groupId": "texts"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Submit Button Text",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Notify Me",
+      "groupId": "texts"
+    },
+    {
+      "name": "submittingText",
+      "displayName": "Submitting Text",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Saving...",
+      "groupId": "texts"
+    },
+    {
+      "name": "mobileMarginTop",
+      "displayName": "Top Spacing",
+      "type": "TYPE",
+      "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "mobileMarginBottom",
+      "displayName": "Bottom Spacing",
+      "type": "TYPE",
+      "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "desktopMarginTop",
+      "displayName": "Top Spacing",
+      "type": "TYPE",
+      "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "desktopMarginBottom",
+      "displayName": "Bottom Spacing",
+      "type": "TYPE",
+      "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "appearance",
+      "name": "Appearance Settings",
+      "children": [
+        {
+          "id": "mobile",
+          "name": "Mobile View",
+          "description": "Margin settings for mobile devices"
+        },
+        {
+          "id": "desktop",
+          "name": "Desktop View",
+          "description": "Margin settings for desktop devices"
+        }
+      ],
+      "description": "Component mobile and desktop view settings"
+    },
+    {
+      "id": "texts",
+      "name": "Texts",
+      "description": "Button, status and modal texts"
+    }
+  ]
+}

package/data/section-templates/product-detail-section/children/ProductDetailBackInStock/index.tsx

@@ -0,0 +1,141 @@
+import {
+  getSelectedProductVariant,
+  hasProductStock,
+  hasProductVariantStock,
+  getProductVariantIsBackInStockEnabled,
+  getProductVariantIsBackInStockCustomerLoginRequired,
+  saveProductVariantBackInStockReminder,
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  customerStore,
+  Router,
+} from "@ikas/bp-storefront";
+import { useEffect, useState } from "preact/hooks";
+import { Props } from "./types";
+import Button from "../../sub-components/Button";
+import Modal from "../../sub-components/Modal";
+import { showToast } from "../../utils/toast";
+import BackInStockForm from "./components/BackInStockForm";
+
+export function ProductDetailBackInStock({
+  product,
+  notifyButtonText = "Notify Me When Available",
+  reminderSavedText = "We'll notify you",
+  alreadySavedMessage = "You're already on the list — we'll email you when it's back.",
+  savedMessage = "Great! We'll email you when this product is back in stock.",
+  loginRequiredMessage = "Please sign in so we can notify you.",
+  errorMessage = "Something went wrong. Please try again.",
+  modalTitle = "Notify me when available",
+  modalDescription = "Enter your email and we'll let you know the moment this product is back in stock.",
+  emailLabel = "Email",
+  submitButtonText = "Notify Me",
+  submittingText = "Saving...",
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+}: Props) {
+  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
+  const [reminderSaved, setReminderSaved] = useState(false);
+
+  const selectedVariant = product
+    ? getSelectedProductVariant(product)
+    : undefined;
+
+  // Reset local UI state when the selected variant changes, seeding "saved"
+  // from the variant's own persisted reminder state.
+  useEffect(() => {
+    setReminderSaved(!!selectedVariant?.isBackInStockReminderSaved);
+    setIsEmailModalOpen(false);
+  }, [selectedVariant?.id]);
+
+  if (!product || !selectedVariant) return null;
+
+  // This component owns the notify-me flow only. Stay out of the way unless the
+  // variant is out of stock AND back-in-stock reminders are enabled for it.
+  const isOutOfStock =
+    !hasProductStock(product) || !hasProductVariantStock(selectedVariant);
+  if (!isOutOfStock || !getProductVariantIsBackInStockEnabled(selectedVariant)) {
+    return null;
+  }
+
+  // Login-required branch: register a logged-in customer immediately, otherwise
+  // send an anonymous visitor to login first.
+  const registerWithCustomerEmail = async () => {
+    const email = customerStore.customer?.email;
+    if (!email) {
+      showToast(loginRequiredMessage, "error");
+      Router.navigateToPage("LOGIN");
+      return;
+    }
+    const ok = await saveProductVariantBackInStockReminder(selectedVariant, email);
+    setReminderSaved(ok);
+    showToast(ok ? savedMessage : errorMessage, ok ? "success" : "error");
+  };
+
+  const handleNotifyClick = () => {
+    if (reminderSaved) {
+      showToast(alreadySavedMessage, "success");
+      return;
+    }
+    if (getProductVariantIsBackInStockCustomerLoginRequired(selectedVariant)) {
+      void registerWithCustomerEmail();
+      return;
+    }
+    // No login required: collect the email through the form.
+    setIsEmailModalOpen(true);
+  };
+
+  const handleFormSaved = () => {
+    setReminderSaved(true);
+    setIsEmailModalOpen(false);
+    showToast(savedMessage, "success");
+  };
+
+  return (
+    <div
+      className="kombos-pd-bis"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      {reminderSaved ? (
+        <div className="kombos-pd-bis__saved" aria-live="polite">
+          {reminderSavedText}
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="s"
+          className="kombos-pd-bis__btn"
+          onClick={handleNotifyClick}
+        >
+          {notifyButtonText}
+        </Button>
+      )}
+
+      {isEmailModalOpen && (
+        <Modal
+          title={modalTitle}
+          onClose={() => setIsEmailModalOpen(false)}
+          footer={null}
+        >
+          <BackInStockForm
+            variant={selectedVariant}
+            description={modalDescription}
+            emailLabel={emailLabel}
+            submitButtonText={submitButtonText}
+            submittingText={submittingText}
+            errorMessage={errorMessage}
+            onSaved={handleFormSaved}
+          />
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailBackInStock;