@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/account-info-section/types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  accountInfoLabel?: string;
+  ordersLabel?: string;
+  addressesLabel?: string;
+  favoritesLabel?: string;
+  logoutLabel?: string;
+  components?: any;
+}

package/data/section-templates/account-info-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/account-info-section/utils/fullName.ts

@@ -0,0 +1,6 @@
+export function getFullName(
+  firstName?: string | null,
+  lastName?: string | null
+): string {
+  return [firstName, lastName].filter(Boolean).join(" ");
+}

package/data/section-templates/account-info-section/utils/media.ts

@@ -0,0 +1,36 @@
+import type { AspectRatio, ObjectFit, VerticalAlignment } from "../global-types";
+
+const DEFAULT_ASPECT_RATIO: AspectRatio = "Square";
+const DEFAULT_OBJECT_FIT: ObjectFit = "Cover";
+const DEFAULT_VERTICAL_ALIGNMENT: VerticalAlignment = "Middle";
+
+const ASPECT_RATIO_MAP: Record<AspectRatio, string> = {
+  Square: "1 / 1",
+  Portrait: "3 / 4",
+  Landscape: "4 / 3",
+  Video: "16 / 9",
+};
+
+const OBJECT_FIT_MAP: Record<ObjectFit, string> = {
+  Fill: "fill",
+  Cover: "cover",
+  Contain: "contain",
+};
+
+const ALIGNMENT_MAP: Record<VerticalAlignment, string> = {
+  Top: "flex-start",
+  Middle: "center",
+  Bottom: "flex-end",
+};
+
+export function resolveAspectRatio(value?: AspectRatio): string {
+  return ASPECT_RATIO_MAP[value ?? DEFAULT_ASPECT_RATIO];
+}
+
+export function resolveObjectFit(value?: ObjectFit): string {
+  return OBJECT_FIT_MAP[value ?? DEFAULT_OBJECT_FIT];
+}
+
+export function resolveVerticalAlignment(value?: VerticalAlignment): string {
+  return ALIGNMENT_MAP[value ?? DEFAULT_VERTICAL_ALIGNMENT];
+}

package/data/section-templates/account-info-section/utils/orderStatus.ts

@@ -0,0 +1,28 @@
+import { IkasOrder, IkasOrderPackageStatus } from "@ikas/bp-storefront";
+
+const STATUS_COLORS: Record<IkasOrderPackageStatus, string> = {
+  UNFULFILLED: "var(--kombos-warning)",
+  PARTIALLY_FULFILLED: "var(--kombos-warning)",
+  PARTIALLY_READY_FOR_SHIPMENT: "var(--kombos-warning)",
+  PARTIALLY_DELIVERED: "var(--kombos-warning)",
+  PARTIALLY_CANCELLED: "var(--kombos-warning)",
+  FULFILLED: "var(--kombos-success)",
+  DELIVERED: "var(--kombos-success)",
+  READY_FOR_PICK_UP: "var(--kombos-success)",
+  READY_FOR_SHIPMENT: "var(--kombos-success)",
+  CANCELLED: "var(--kombos-error)",
+  REFUNDED: "var(--kombos-error)",
+  UNABLE_TO_DELIVER: "var(--kombos-error)",
+  REFUND_REJECTED: "var(--kombos-error)",
+  CANCEL_REJECTED: "var(--kombos-error)",
+  CANCEL_REQUESTED: "var(--kombos-info)",
+  REFUND_REQUESTED: "var(--kombos-info)",
+  REFUND_REQUEST_ACCEPTED: "var(--kombos-info)",
+  PARTIALLY_REFUNDED: "var(--kombos-info)",
+};
+
+export function getStatusColor(order: IkasOrder): string | undefined {
+  const status = order.orderPackageStatus;
+  if (!status) return undefined;
+  return STATUS_COLORS[status] ?? undefined;
+}

package/data/section-templates/account-info-section/utils/toast.ts

@@ -0,0 +1,5 @@
+export function showToast(message: string, variant: "success" | "error") {
+  window.dispatchEvent(
+    new CustomEvent("ikas:show-toast", { detail: { message, variant } })
+  );
+}

package/data/section-templates/add-to-cart/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Add to Cart Pattern",
+  "description": "Complete add-to-cart implementation with stock validation, variant selection, option sets, bundle product support, and quantity controls. Shows addItemToCart with AddItemOptions, hasProductVariantStock, isAddToCartEnabled, hasBundleSettings, and toast notifications."
+}

package/data/section-templates/add-to-cart/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/add-to-cart/components/PayWithIkas/styles.css

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

package/data/section-templates/add-to-cart/hooks/usePayWithIkas.ts

@@ -0,0 +1,114 @@
+import {
+  cartStore,
+  createPayWithIkasSession,
+  IkasProduct,
+} from "@ikas/bp-storefront";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+
+interface UsePayWithIkasParams {
+  product: IkasProduct;
+  quantity: number;
+  isEnabled: boolean;
+  payWithIkasUrl: string;
+}
+
+export function usePayWithIkas({
+  product,
+  quantity,
+  isEnabled,
+  payWithIkasUrl,
+}: UsePayWithIkasParams) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const quantityRef = useRef(quantity);
+  quantityRef.current = quantity;
+
+  const iframeReady = useRef(false);
+  const isEnabledRef = useRef(isEnabled);
+  isEnabledRef.current = isEnabled;
+
+  const { iframeSrc, iframeHeight, targetOrigin } = useMemo(() => {
+    const url = new URL(payWithIkasUrl);
+    const height =
+      url.searchParams.get("subtextOption") === "true" ? "90px" : "56px";
+    url.searchParams.set("isAddToCartEnabled", isEnabled.toString());
+    return {
+      iframeSrc: url.toString(),
+      iframeHeight: height,
+      targetOrigin: url.origin,
+    };
+  }, [payWithIkasUrl, isEnabled]);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    let isProcessing = false;
+
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.data.type === "ikas-widget-ready") {
+        if (iframe.contentWindow !== event.source) return;
+
+        iframeReady.current = true;
+        iframe.contentWindow!.postMessage(
+          {
+            type: "ikas-buy-enabled-state-change",
+            isAddToCartEnabled: isEnabledRef.current,
+          },
+          targetOrigin,
+        );
+        return;
+      }
+
+      if (event.data.type === "ikas-buy-click") {
+        if (iframe.contentWindow !== event.source) return;
+        if (isProcessing) return;
+
+        isProcessing = true;
+        try {
+          const result = await createPayWithIkasSession(
+            cartStore,
+            product,
+            quantityRef.current,
+          );
+
+          iframe.contentWindow?.postMessage(
+            { type: "ikas-buy-loading-stop" },
+            targetOrigin,
+          );
+
+          if (!result.success || !result.payUrl) {
+            console.error("Pay with ikas error:", result.error);
+            return;
+          }
+
+          window.location.href = result.payUrl;
+        } catch (error) {
+          console.error("Pay with ikas error:", error);
+        } finally {
+          isProcessing = false;
+        }
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      iframeReady.current = false;
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [product, targetOrigin]);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframeReady.current || !iframe?.contentWindow) return;
+    iframe.contentWindow.postMessage(
+      {
+        type: "ikas-buy-enabled-state-change",
+        isAddToCartEnabled: isEnabled,
+      },
+      targetOrigin,
+    );
+  }, [isEnabled, targetOrigin]);
+
+  return { iframeRef, iframeSrc, iframeHeight };
+}

package/data/section-templates/add-to-cart/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/add-to-cart/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/add-to-cart/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/add-to-cart/sub-components/Button/index.tsx

@@ -0,0 +1,52 @@
+import type { ButtonHTMLAttributes, ComponentChildren } from "preact";
+import { SpinnerSVG } from "../icons";
+import { cx } from "../../utils/cx";
+
+type Variant = "primary" | "secondary" | "dangerous";
+type Size = "xs" | "s" | "m";
+
+export interface ButtonProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "size" | "icon" | "loading"
+> {
+  variant?: Variant;
+  size?: Size;
+  icon?: ComponentChildren;
+  loading?: boolean;
+}
+
+const TYPOGRAPHY: Record<Size, string> = {
+  xs: "text-sm-semibold",
+  s: "text-md-semibold",
+  m: "text-lg-semibold",
+};
+
+export default function Button({
+  variant = "primary",
+  size = "s",
+  icon,
+  loading,
+  className,
+  children,
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const cls = cx(
+    "kombos-btn",
+    `kombos-btn--${variant}`,
+    `kombos-btn--${size}`,
+    TYPOGRAPHY[size],
+    className,
+  );
+
+  return (
+    <button className={cls} disabled={loading || disabled} {...rest}>
+      {loading ? (
+        <SpinnerSVG className="kombos-btn__spinner" />
+      ) : (
+        icon && <span className="kombos-btn__icon">{icon}</span>
+      )}
+      {children}
+    </button>
+  );
+}