@ikas/code-components-mcp 1.4.0-beta.139 → 1.4.0-beta.140

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

@@ -1,141 +0,0 @@
-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;

package/data/section-templates/product-detail-section/children/ProductDetailBackInStock/styles.css

@@ -1,47 +0,0 @@
-/* ===== ProductDetailBackInStock ===== */
-
-.kombos-pd-bis {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-bis__btn {
-  width: 100%;
-}
-
-.kombos-pd-bis__saved {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--color-border, #e5e5e5);
-  border-radius: 0.5rem;
-  text-align: center;
-}
-
-.kombos-pd-bis__form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.kombos-pd-bis__desc {
-  margin: 0;
-}
-
-.kombos-pd-bis__error {
-  margin: 0;
-  color: var(--color-danger, #d92d20);
-}
-
-.kombos-pd-bis__submit {
-  width: 100%;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-bis {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,25 +0,0 @@
-// 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/sub-components/Modal/index.tsx

@@ -1,120 +0,0 @@
-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

@@ -1,70 +0,0 @@
-/* ── 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/utils/cartLimits.ts

@@ -1,23 +0,0 @@
-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,
-  };
-}