@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/not-found-section/types.ts

@@ -0,0 +1,7 @@
+import type { IkasNavigationLink } from "@ikas/bp-storefront";
+
+export interface Props {
+  title?: string;
+  description?: string;
+  button?: IkasNavigationLink | null;
+}

package/data/section-templates/not-found-section/utils/cx.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cx(...classes: any[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/data/section-templates/product-detail-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Product Detail Section",
+  "description": "Complete product detail page with image gallery, breadcrumb navigation, and IkasComponentRenderer slots for child components (name/favorite, SKU, prices, variant selection, add-to-cart, description, features, bundle products, option sets, offers)."
+}

package/data/section-templates/product-detail-section/children/ProductDetailAddToCart/components/PayWithIkas/index.tsx

@@ -0,0 +1,34 @@
+import { IkasProduct } from "@ikas/bp-storefront";
+import { usePayWithIkas } from "../../../../hooks/usePayWithIkas";
+
+interface Props {
+  product: IkasProduct;
+  quantity: number;
+  isEnabled: boolean;
+  payWithIkasUrl: string;
+}
+
+export default function PayWithIkas({
+  product,
+  quantity,
+  isEnabled,
+  payWithIkasUrl,
+}: Props) {
+  const { iframeRef, iframeSrc, iframeHeight } = usePayWithIkas({
+    product,
+    quantity,
+    isEnabled,
+    payWithIkasUrl,
+  });
+
+  return (
+    <iframe
+      ref={iframeRef}
+      className="kombos-pd-atc__ikas-pay"
+      title="Pay with ikas"
+      src={iframeSrc}
+      width="100%"
+      height={iframeHeight}
+    />
+  );
+}

package/data/section-templates/product-detail-section/children/ProductDetailAddToCart/components/PayWithIkas/styles.css

@@ -0,0 +1,4 @@
+.kombos-pd-atc__ikas-pay {
+  display: block;
+  border: none;
+}

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

@@ -0,0 +1,139 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-add-to-cart",
+  "name": "ProductDetailAddToCart",
+  "type": "component",
+  "entry": "./src/components/ProductDetailAddToCart/index.tsx",
+  "styles": "./src/components/ProductDetailAddToCart/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "addToCartButtonText",
+      "displayName": "Sepete Ekle Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Ekle",
+      "groupId": "texts"
+    },
+    {
+      "name": "addingToCartText",
+      "displayName": "Sepete Ekleniyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ekleniyor...",
+      "groupId": "texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Tükendi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tükendi",
+      "groupId": "texts"
+    },
+    {
+      "name": "mobileMarginTop",
+      "displayName": "Üst Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "mobileMarginBottom",
+      "displayName": "Alt Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "desktopMarginTop",
+      "displayName": "Üst Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "desktopMarginBottom",
+      "displayName": "Alt Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "hideQuantityInput",
+      "displayName": "Adet Seçiciyi Gizle",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "settings"
+    },
+    {
+      "name": "errorMessage",
+      "displayName": "Hata Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ürün sepete eklenemedi",
+      "groupId": "texts"
+    },
+    {
+      "name": "optionSetErrorMessage",
+      "displayName": "Seçenek Seti Hata Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Lütfen gerekli seçenekleri doldurun",
+      "groupId": "texts"
+    },
+    {
+      "name": "updateCartButtonText",
+      "displayName": "Sepeti Güncelle Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Güncelle",
+      "groupId": "texts"
+    },
+    {
+      "name": "updatingCartText",
+      "displayName": "Sepet Güncelleniyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Güncelleniyor...",
+      "groupId": "texts"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "appearance",
+      "name": "Görünüm Ayarları",
+      "children": [
+        {
+          "id": "mobile",
+          "name": "Mobil Görünüm",
+          "description": "Mobil cihazlarda uygulanacak margin ayarları"
+        },
+        {
+          "id": "desktop",
+          "name": "Masaüstü Görünüm",
+          "description": "Masaüstü cihazlarda uygulanacak margin ayarları"
+        }
+      ],
+      "description": "Bileşenin mobil ve masaüstü görünüm ayarları"
+    },
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Buton ve durum metinleri"
+    },
+    {
+      "id": "settings",
+      "name": "Ayarlar",
+      "description": "Bileşen davranışını kontrol eden ayarlar"
+    }
+  ]
+}

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

@@ -0,0 +1,146 @@
+import {
+  addItemToCart,
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  getSelectedProductVariant,
+  hasProductStock,
+  hasProductVariantStock,
+  isAddToCartEnabled,
+  initProductOptionSetValues,
+  IkasBundleSettings,
+  IkasStorefrontConfig,
+} from "@ikas/bp-storefront";
+import { 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 { showToast } from "../../utils/toast";
+
+export function ProductDetailAddToCart({
+  product,
+  addToCartButtonText = "Sepete Ekle",
+  addingToCartText = "Ekleniyor...",
+  outOfStockText = "Tükendi",
+  errorMessage = "Ürün sepete eklenemedi",
+  optionSetErrorMessage = "Lütfen gerekli seçenekleri doldurun",
+  updateCartButtonText = "Güncelle",
+  updatingCartText = "Güncelleniyor...",
+  hideQuantityInput = false,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+}: Props) {
+  const [quantity, setQuantity] = useState(1);
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+
+  if (!product) return null;
+
+  const editLineID =
+    typeof window !== "undefined"
+      ? new URLSearchParams(window.location.search).get("editLineID")
+      : null;
+  const isEditMode = !!editLineID;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const bundleSettings = selectedVariant?.bundleSettings as
+    | IkasBundleSettings
+    | undefined;
+  const isBundle = !!bundleSettings;
+
+  const isEnabled = isAddToCartEnabled(product);
+
+  const isOutOfStock = isBundle
+    ? isBundleOutOfStock(bundleSettings) || !isEnabled
+    : !hasProductStock(product) || !hasProductVariantStock(selectedVariant);
+
+  const isDisabled = isOutOfStock || isAddingToCart;
+
+  const payWithIkasUrl = IkasStorefrontConfig.getPayWithIkasUrl();
+  const routing = IkasStorefrontConfig.getCurrentRouting();
+  const showPayWithIkas =
+    !isOutOfStock &&
+    !!payWithIkasUrl &&
+    routing?.locale === "tr" &&
+    routing?.currencyCode === "TRY";
+
+  const handleAddToCart = async () => {
+    if (isDisabled) return;
+
+    if (!validateOptionSet(product.productOptionSet, optionSetErrorMessage))
+      return;
+
+    if (!isAddToCartEnabled(product)) {
+      showToast(errorMessage, "error");
+      return;
+    }
+
+    setIsAddingToCart(true);
+    try {
+      const result = await addItemToCart(selectedVariant, product, quantity);
+
+      if (result.success) {
+        if (product.productOptionSet) {
+          initProductOptionSetValues(product.productOptionSet);
+        }
+        window.dispatchEvent(new CustomEvent("ikas:reset-option-state"));
+        window.dispatchEvent(new CustomEvent("ikas:open-cart-sidebar"));
+      } else {
+        showToast(errorMessage, "error");
+      }
+    } finally {
+      setIsAddingToCart(false);
+    }
+  };
+
+  const getButtonText = () => {
+    if (isEditMode) {
+      if (isAddingToCart) return updatingCartText;
+      if (isOutOfStock) return outOfStockText;
+      return updateCartButtonText;
+    }
+    if (isAddingToCart) return addingToCartText;
+    if (isOutOfStock) return outOfStockText;
+    return addToCartButtonText;
+  };
+
+  return (
+    <div
+      className="kombos-pd-atc"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      <div className="kombos-pd-atc__actions">
+        {!hideQuantityInput && !isOutOfStock && (
+          <QuantitySelector value={quantity} onChange={setQuantity} />
+        )}
+        <Button
+          variant="primary"
+          size="s"
+          className="kombos-pd-atc__btn"
+          disabled={isDisabled}
+          onClick={handleAddToCart}
+        >
+          {getButtonText()}
+        </Button>
+      </div>
+      {showPayWithIkas && (
+        <PayWithIkas
+          product={product}
+          quantity={quantity}
+          isEnabled={isEnabled}
+          payWithIkasUrl={payWithIkasUrl!}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailAddToCart;

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

@@ -0,0 +1,27 @@
+/* ===== ProductDetailAddToCart ===== */
+
+.kombos-pd-atc {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+.kombos-pd-atc__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.kombos-pd-atc__btn {
+  flex: 1;
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-atc {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

@@ -0,0 +1,17 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  addToCartButtonText?: string;
+  addingToCartText?: string;
+  outOfStockText?: string;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  hideQuantityInput?: boolean;
+  errorMessage?: string;
+  optionSetErrorMessage?: string;
+  updateCartButtonText?: string;
+  updatingCartText?: string;
+}

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/components/BundleFurnitureRow/index.tsx

@@ -0,0 +1,164 @@
+import {
+  IkasBundleProduct,
+  getSelectedProductVariant,
+  shouldDisplayBundleProductPrice,
+  getBundleProductFormattedFinalPrice,
+  getBundleProductFormattedFinalPriceWithQuantity,
+  getBundleProductFormattedSellPrice,
+  getBundleProductFormattedSellPriceWithQuantity,
+  getBundleProductFinalPrice,
+  getBundleProductSellPrice,
+  getBundleProductFinalPriceWithQuantity,
+  getBundleProductSellPriceWithQuantity,
+  hasProductVariantStock,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+import VariantBadge from "../../../../sub-components/VariantBadge";
+import BundleQuantityBox from "../../../../sub-components/BundleQuantityBox";
+import BundleMedia from "../../../../sub-components/BundleMedia";
+import { adjustBundleProductQuantity } from "../../../../utils/bundle";
+
+export interface BundleFurnitureRowTexts {
+  outOfStockText: string;
+}
+
+interface PriceCellProps {
+  formattedFinalPrice: string;
+  formattedSellPrice: string;
+  hasDiscount: boolean;
+  finalTypography: string;
+}
+
+function PriceCell({
+  formattedFinalPrice,
+  formattedSellPrice,
+  hasDiscount,
+  finalTypography,
+}: PriceCellProps) {
+  return (
+    <div className="kombos-bundle-furniture__price-col">
+      <span className={finalTypography}>{formattedFinalPrice}</span>
+      {hasDiscount && (
+        <span className="kombos-bundle-furniture__old-price text-sm-regular-strike">
+          {formattedSellPrice}
+        </span>
+      )}
+    </div>
+  );
+}
+
+interface Props {
+  bundleProduct: IkasBundleProduct;
+  texts: BundleFurnitureRowTexts;
+  showFeatures: boolean;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+const BundleFurnitureRow = observer(function BundleFurnitureRow({
+  bundleProduct,
+  texts,
+  showFeatures,
+  aspectRatio = "Square",
+  objectFit = "Cover",
+}: Props) {
+  const product = bundleProduct.product;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const hasStock = selectedVariant
+    ? hasProductVariantStock(selectedVariant)
+    : false;
+  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
+
+  const unitFinalPrice = getBundleProductFinalPrice(bundleProduct);
+  const unitSellPrice = getBundleProductSellPrice(bundleProduct);
+  const hasUnitDiscount = showPrice && unitFinalPrice !== unitSellPrice;
+
+  const totalFinalPrice = getBundleProductFinalPriceWithQuantity(bundleProduct);
+  const totalSellPrice = getBundleProductSellPriceWithQuantity(bundleProduct);
+  const hasTotalDiscount =
+    showPrice &&
+    totalFinalPrice !== totalSellPrice &&
+    bundleProduct.quantity > 0;
+
+  const showTotalPrice = showPrice && bundleProduct.quantity > 0;
+
+  return (
+    <tr className="kombos-bundle-furniture__row">
+      {/* Parts: image + name */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--parts">
+        <div className="kombos-bundle-furniture__part-info">
+          <BundleMedia
+            variant={selectedVariant}
+            alt=""
+            aspectRatio={aspectRatio}
+            objectFit={objectFit}
+            wrapperClassName="kombos-bundle-furniture__thumb"
+            mediaClassName="kombos-bundle-furniture__thumb-img"
+            placeholderClassName="kombos-bundle-furniture__thumb-placeholder"
+          />
+          <span className="kombos-bundle-furniture__part-name text-sm-medium">
+            {product.name}
+          </span>
+        </div>
+      </td>
+
+      {/* Unit Price */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--price">
+        {showPrice ? (
+          <PriceCell
+            formattedFinalPrice={getBundleProductFormattedFinalPrice(
+              bundleProduct,
+            )}
+            formattedSellPrice={getBundleProductFormattedSellPrice(
+              bundleProduct,
+            )}
+            hasDiscount={hasUnitDiscount}
+            finalTypography="text-sm-medium"
+          />
+        ) : (
+          <span className="text-sm-regular">-</span>
+        )}
+      </td>
+
+      {/* Quantity */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--qty">
+        <BundleQuantityBox bundleProduct={bundleProduct} />
+        {!hasStock && (
+          <span className="kombos-bundle-furniture__no-stock text-xs-medium">
+            {texts.outOfStockText}
+          </span>
+        )}
+      </td>
+
+      {/* Features (variants) */}
+      {showFeatures && (
+        <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--features">
+          <VariantBadge product={product} disableRoute size="xs" onSelect={() => adjustBundleProductQuantity(bundleProduct)} />
+        </td>
+      )}
+
+      {/* Total Price */}
+      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--total">
+        {showTotalPrice ? (
+          <PriceCell
+            formattedFinalPrice={getBundleProductFormattedFinalPriceWithQuantity(
+              bundleProduct,
+            )}
+            formattedSellPrice={getBundleProductFormattedSellPriceWithQuantity(
+              bundleProduct,
+            )}
+            hasDiscount={hasTotalDiscount}
+            finalTypography="text-sm-semibold"
+          />
+        ) : (
+          <span className="text-sm-regular">-</span>
+        )}
+      </td>
+    </tr>
+  );
+});
+
+export default BundleFurnitureRow;

package/data/section-templates/product-detail-section/children/ProductDetailBundleFurniture/components/BundleFurnitureSection/index.tsx

@@ -0,0 +1,134 @@
+import { useState } from "preact/hooks";
+import {
+  IkasBundleProduct,
+  IkasBundleSettings,
+  getDisplayedProductVariantTypes,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import type { AspectRatio, ObjectFit } from "../../../../global-types";
+import { cx } from "../../../../utils/cx";
+import BundleFurnitureRow from "../BundleFurnitureRow";
+
+interface Texts {
+  productContentTitle: string;
+  partsLabel: string;
+  unitPriceLabel: string;
+  quantityLabel: string;
+  featuresLabel: string;
+  totalPriceLabel: string;
+  outOfStockText: string;
+  addProductItemText: string;
+}
+
+interface Props {
+  bundleSettings: IkasBundleSettings;
+  isLoading: boolean;
+  texts: Texts;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}
+
+function hasAnyVariants(products: IkasBundleProduct[]): boolean {
+  return products.some((bp) => {
+    if (!bp.product) return false;
+    return getDisplayedProductVariantTypes(bp.product).length > 0;
+  });
+}
+
+const COLUMN_HEADER_CLASS = "kombos-bundle-furniture__th text-sm-semibold";
+
+const BundleFurnitureSection = observer(function BundleFurnitureSection({
+  bundleSettings,
+  isLoading,
+  texts,
+  aspectRatio,
+  objectFit,
+}: Props) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const sortedProducts = [...bundleSettings.products].sort(
+    (a, b) => a.order - b.order,
+  );
+  const showFeatures = hasAnyVariants(sortedProducts);
+
+  return (
+    <div className="kombos-bundle-furniture" id="bundle-furniture-section">
+      {/* Collapsible header */}
+      <button
+        type="button"
+        className="kombos-bundle-furniture__toggle"
+        onClick={() => setIsExpanded((prev) => !prev)}
+        aria-expanded={isExpanded}
+      >
+        <span className="kombos-bundle-furniture__toggle-text text-sm-semibold">
+          {texts.productContentTitle}
+        </span>
+        <span
+          className={cx(
+            "kombos-bundle-furniture__toggle-icon",
+            isExpanded && "kombos-bundle-furniture__toggle-icon--open",
+          )}
+        />
+      </button>
+
+      {/* Table content */}
+      {isExpanded && (
+        <div className="kombos-bundle-furniture__body">
+          {isLoading ? (
+            <div className="kombos-bundle-furniture__loading">
+              <div className="kombos-bundle-furniture__spinner" />
+            </div>
+          ) : (
+            <div className="kombos-bundle-furniture__table-wrap">
+              <table className="kombos-bundle-furniture__table">
+                <colgroup>
+                  <col style={{ width: showFeatures ? "33.33%" : "40%" }} />
+                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
+                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
+                  {showFeatures && <col style={{ width: "16.67%" }} />}
+                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
+                </colgroup>
+                <thead>
+                  <tr className="kombos-bundle-furniture__head-row">
+                    <th className={COLUMN_HEADER_CLASS}>{texts.partsLabel}</th>
+                    <th className={COLUMN_HEADER_CLASS}>
+                      {texts.unitPriceLabel}
+                    </th>
+                    <th className={COLUMN_HEADER_CLASS}>
+                      {texts.quantityLabel}
+                    </th>
+                    {showFeatures && (
+                      <th className={COLUMN_HEADER_CLASS}>
+                        {texts.featuresLabel}
+                      </th>
+                    )}
+                    <th
+                      className={COLUMN_HEADER_CLASS}
+                      style={{ textAlign: "right" }}
+                    >
+                      {texts.totalPriceLabel}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {sortedProducts.map((bp) => (
+                    <BundleFurnitureRow
+                      key={bp.id}
+                      bundleProduct={bp}
+                      texts={texts}
+                      showFeatures={showFeatures}
+                      aspectRatio={aspectRatio}
+                      objectFit={objectFit}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default BundleFurnitureSection;