@ikas/code-components-mcp 1.4.0-beta.15 → 1.4.0-beta.151

package/data/section-templates/product-detail-section/children/ProductDetailBackInStock/types.ts

@@ -0,0 +1,25 @@
+// This file is auto-generated — do not edit manually.
+import type {
+  IkasProduct,
+  MarginTopStyleType,
+  MarginBottomStyleType,
+} from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  notifyButtonText?: string;
+  reminderSavedText?: string;
+  alreadySavedMessage?: string;
+  savedMessage?: string;
+  loginRequiredMessage?: string;
+  errorMessage?: string;
+  modalTitle?: string;
+  modalDescription?: string;
+  emailLabel?: string;
+  submitButtonText?: string;
+  submittingText?: string;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+}

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

@@ -39,6 +39,7 @@
         "<id-of-ProductDetailProductGroup>",
         "<id-of-ProductDetailVariant>",
         "<id-of-ProductDetailAddToCart>",
+        "<id-of-ProductDetailBackInStock>",
         "<id-of-ProductDetailFeatures>",
         "<id-of-ProductDetailDescription>",
         "<id-of-ProductDetailBundleProduct>",

package/data/section-templates/product-detail-section/sub-components/Modal/index.tsx

@@ -0,0 +1,120 @@
+import { useState, useEffect, useRef, useId } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import type { ComponentChildren } from "preact";
+import { useScrollLock } from "../../hooks/useScrollLock";
+import { cx } from "../../utils/cx";
+import { XSVG } from "../icons";
+import Button, { type ButtonProps } from "../Button";
+
+interface Props {
+  onClose: () => void;
+  title: string;
+  maxWidth?: string;
+  children: ComponentChildren;
+  className?: string;
+  okText?: string;
+  cancelText?: string;
+  onOk?: (e: Event) => void;
+  okButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  footer?: ComponentChildren | null;
+}
+
+export default function Modal({
+  onClose,
+  title,
+  maxWidth = "37.5rem",
+  children,
+  className,
+  okText,
+  cancelText,
+  onOk,
+  okButtonProps,
+  cancelButtonProps,
+  footer,
+}: Props) {
+  const titleId = useId();
+  const [visible, setVisible] = useState(false);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const handleCloseRef = useRef(() => {});
+  handleCloseRef.current = () => {
+    setVisible(false);
+    setTimeout(() => onCloseRef.current(), 300);
+  };
+
+  useScrollLock();
+
+  useEffect(() => {
+    const rafId = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleCloseRef.current();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return createPortal(
+    <div
+      className={cx("kombos-modal", visible && "kombos-modal--open", className)}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className="kombos-modal__panel" style={{ maxWidth }}>
+        <div className="kombos-modal__header">
+          <h2 id={titleId} className="kombos-modal__title text-md-medium">
+            {title}
+          </h2>
+          <button
+            type="button"
+            className="kombos-modal__close"
+            onClick={() => handleCloseRef.current()}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        <div className="kombos-modal__body">{children}</div>
+
+        {footer !== null &&
+          (footer !== undefined ? (
+            <div className="kombos-modal__footer">{footer}</div>
+          ) : (
+            (cancelText || okText) && (
+              <div className="kombos-modal__footer">
+                {cancelText && (
+                  <Button
+                    variant="secondary"
+                    size="s"
+                    type="button"
+                    onClick={() => handleCloseRef.current()}
+                    {...cancelButtonProps}
+                  >
+                    {cancelText}
+                  </Button>
+                )}
+                {okText && (
+                  <Button
+                    variant="primary"
+                    size="s"
+                    onClick={onOk}
+                    {...okButtonProps}
+                  >
+                    {okText}
+                  </Button>
+                )}
+              </div>
+            )
+          ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/data/section-templates/product-detail-section/sub-components/Modal/styles.css

@@ -0,0 +1,70 @@
+/* ── Modal ── */
+.kombos-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kombos-z-overlay);
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s;
+  padding: 1rem;
+}
+
+.kombos-modal--open {
+  opacity: 1;
+}
+
+.kombos-modal__panel {
+  background: var(--kombos-white);
+  border-radius: 6px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(1rem);
+  transition: transform 0.3s;
+}
+
+.kombos-modal--open .kombos-modal__panel {
+  transform: translateY(0);
+}
+
+.kombos-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--kombos-white);
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--kombos-gray-200);
+  border-radius: 6px 6px 0 0;
+}
+
+.kombos-modal__title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-modal__close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-700);
+  font-size: 1.25rem;
+}
+
+.kombos-modal__body {
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.kombos-modal__footer {
+  background: var(--kombos-white);
+  padding: 1.5rem;
+  border-top: 1px solid var(--kombos-gray-200);
+  border-radius: 0 0 6px 6px;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}

package/data/section-templates/product-detail-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/product-detail-section/utils/cartLimits.ts

@@ -0,0 +1,23 @@
+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, so
+ * applying these in the stepper keeps the UI honest instead of letting the
+ * quantity snap silently.
+ */
+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,
+  };
+}