@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/bundle-products/types.ts

@@ -0,0 +1,17 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  isBundleFurniture?: boolean;
+  bundleProductWithoutLink?: boolean;
+  quantityLabel?: string;
+  outOfStockText?: string;
+  productContentTitle?: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}

package/data/section-templates/bundle-products/utils/bundle.ts

@@ -0,0 +1,70 @@
+import {
+  getSelectedProductVariant,
+  hasProductVariantStock,
+  setBundleProductQuantity,
+  IkasBundleProduct,
+  IkasBundleSettings,
+} from "@ikas/bp-storefront";
+
+export function adjustBundleProductQuantity(bp: IkasBundleProduct): void {
+  if (!bp.product) return;
+
+  const variant = getSelectedProductVariant(bp.product);
+
+  const stock = variant.stock ?? 0;
+  const inStock = hasProductVariantStock(variant);
+
+  if (bp.minQuantity === 0 && !inStock) {
+    setBundleProductQuantity(bp, 0);
+    return;
+  }
+
+  if (stock < 10 && bp.quantity > stock && !variant.sellIfOutOfStock) {
+    setBundleProductQuantity(bp, Math.max(stock, bp.minQuantity ?? 0));
+  }
+}
+
+export function isBundleOutOfStock(
+  bundleSettings: IkasBundleSettings,
+): boolean {
+  const { products, minBundleQuantity, maxBundleQuantity } = bundleSettings;
+
+  // Skip check while bundle product data is still loading
+  const loaded = products.some((bp) => !!bp.product);
+  if (!loaded) return false;
+
+  // A required bundle product (minQuantity !== 0) is out of stock
+  const hasRequiredOutOfStock = products.some((bp) => {
+    if (!bp.product) return false;
+
+    const variant = getSelectedProductVariant(bp.product);
+    const bpHasStock = variant ? hasProductVariantStock(variant) : false;
+
+    return !bpHasStock && bp.minQuantity !== 0;
+  });
+  if (hasRequiredOutOfStock) return true;
+
+  // All bundle products have zero quantity
+  const allZeroQuantity = products.every((p) => p.quantity === 0);
+  if (allZeroQuantity) return true;
+
+  // Total quantity violates bundle-level min/max constraints
+  const totalQuantity = products.reduce((sum, p) => sum + p.quantity, 0);
+  if (minBundleQuantity != null && totalQuantity < minBundleQuantity)
+    return true;
+  if (maxBundleQuantity != null && totalQuantity > maxBundleQuantity)
+    return true;
+
+  // Individual bundle product min/max quantity violations
+  const hasMinQuantityError = products.some(
+    (bp) => bp.minQuantity != null && bp.quantity < bp.minQuantity,
+  );
+  if (hasMinQuantityError) return true;
+
+  const hasMaxQuantityError = products.some(
+    (bp) => bp.maxQuantity != null && bp.quantity > bp.maxQuantity!,
+  );
+  if (hasMaxQuantityError) return true;
+
+  return false;
+}

package/data/section-templates/bundle-products/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/bundle-products/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/cart-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Cart Section",
+  "description": "Full shopping cart page with item list, quantity controls, item removal, coupon code input, order summary with adjustments, and checkout button. Uses cartStore for reactive cart state."
+}

package/data/section-templates/cart-section/components/CouponCode/index.tsx

@@ -0,0 +1,108 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  customerStore,
+  getCouponCodeForm,
+  initCouponCodeForm,
+  setCouponCodeFormCouponCode,
+  submitCouponCodeForm,
+  removeCouponCodeForm,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+
+interface Props {
+  appliedCoupon?: string | null;
+  toggleText: string;
+  placeholder: string;
+  applyText: string;
+  removeText: string;
+  applyingText: string;
+}
+
+const CouponCode = observer(function CouponCode({
+  appliedCoupon,
+  toggleText,
+  placeholder,
+  applyText,
+  removeText,
+  applyingText,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const couponForm = getCouponCodeForm(customerStore);
+
+  useEffect(() => {
+    initCouponCodeForm(couponForm);
+  }, [couponForm]);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    await submitCouponCodeForm(couponForm);
+  };
+
+  const handleRemove = async () => {
+    await removeCouponCodeForm(couponForm);
+    setIsOpen(false);
+  };
+
+  if (appliedCoupon) {
+    return (
+      <div className="coupon-code">
+        <div className="coupon-code__applied">
+          <span className="coupon-code__value text-sm-medium">
+            {appliedCoupon}
+          </span>
+          <button
+            type="button"
+            className="coupon-code__remove text-sm-medium"
+            onClick={handleRemove}
+          >
+            {removeText}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="coupon-code">
+      {!isOpen ? (
+        <button
+          type="button"
+          className="coupon-code__toggle text-sm-semibold"
+          onClick={() => setIsOpen(true)}
+        >
+          {toggleText}
+        </button>
+      ) : (
+        <form className="coupon-code__form" onSubmit={handleSubmit}>
+          <Input
+            placeholder={couponForm.couponCode?.placeholder ?? placeholder}
+            value={couponForm.couponCode?.value ?? ""}
+            onInput={(e: Event) =>
+              setCouponCodeFormCouponCode(
+                couponForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+            status={couponForm.isFailure ? "error" : undefined}
+          />
+          <Button
+            variant="secondary"
+            size="xs"
+            disabled={couponForm.isSubmitting}
+          >
+            {couponForm.isSubmitting ? applyingText : applyText}
+          </Button>
+        </form>
+      )}
+      {couponForm.isFailure && couponForm.responseMessage && (
+        <p className="coupon-code__error text-xs-regular">
+          {couponForm.responseMessage}
+        </p>
+      )}
+    </div>
+  );
+});
+
+export default CouponCode;

package/data/section-templates/cart-section/components/CouponCode/styles.css

@@ -0,0 +1,68 @@
+/* CouponCode */
+.coupon-code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.coupon-code__toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-900);
+  text-decoration: underline;
+  text-align: left;
+}
+
+.coupon-code__toggle:hover {
+  color: var(--kombos-gray-700);
+}
+
+.coupon-code__form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.coupon-code__form > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.coupon-code__form > :last-child {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.coupon-code__applied {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.875rem;
+  background-color: var(--kombos-gray-50);
+  border-radius: 6px;
+  min-height: 2.75rem;
+}
+
+.coupon-code__value {
+  color: var(--kombos-gray-900);
+}
+
+.coupon-code__remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-500);
+  text-decoration: underline;
+}
+
+.coupon-code__remove:hover {
+  color: var(--kombos-gray-700);
+}
+
+.coupon-code__error {
+  color: var(--kombos-error);
+  margin: 0;
+}

package/data/section-templates/cart-section/components/EmptyState/index.tsx

@@ -0,0 +1,31 @@
+import { Router } from "@ikas/bp-storefront";
+import { Handbag1SVG } from "../../../../sub-components/icons";
+import Button from "../../../../sub-components/Button";
+
+interface Props {
+  emptyCartText: string;
+  continueShoppingText: string;
+}
+
+export default function EmptyState({
+  emptyCartText,
+  continueShoppingText,
+}: Props) {
+  const handleContinueShopping = () => {
+    Router.navigate("/");
+  };
+
+  return (
+    <div className="cart-page__empty">
+      <span className="cart-page__empty-icon">
+        <Handbag1SVG />
+      </span>
+      <p className="cart-page__empty-text text-xl-semibold md:display-xs-semibold">
+        {emptyCartText}
+      </p>
+      <Button variant="primary" size="s" onClick={handleContinueShopping}>
+        {continueShoppingText}
+      </Button>
+    </div>
+  );
+}

package/data/section-templates/cart-section/components/EmptyState/styles.css

@@ -0,0 +1,18 @@
+/* EmptyState */
+.cart-page__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 5rem 0;
+}
+
+.cart-page__empty-icon {
+  font-size: 3rem;
+  color: var(--kombos-gray-300);
+}
+
+.cart-page__empty-text {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}

package/data/section-templates/cart-section/components/OrderSummary/index.tsx

@@ -0,0 +1,106 @@
+import {
+  cartStore,
+  IkasCart,
+  getIkasOrderFormattedTotalFinalPrice,
+  getIkasOrderFormattedTotalPrice,
+  getOrderAdjustmentDisplayName,
+  getOrderAdjustmentFormattedAmount,
+  getOrderAdjustmentIsDecrement,
+  getCheckoutUrlFromCartStore,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Button from "../../../../sub-components/Button";
+import CouponCode from "../CouponCode";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  cart: IkasCart;
+  title: string;
+  subtotalLabel: string;
+  totalLabel: string;
+  checkoutButtonText: string;
+  couponToggleText: string;
+  couponPlaceholder: string;
+  couponApplyText: string;
+  couponRemoveText: string;
+  couponApplyingText: string;
+}
+
+const OrderSummary = observer(function OrderSummary({
+  cart,
+  title,
+  subtotalLabel,
+  totalLabel,
+  checkoutButtonText,
+  couponToggleText,
+  couponPlaceholder,
+  couponApplyText,
+  couponRemoveText,
+  couponApplyingText,
+}: Props) {
+  const adjustments = cart.orderAdjustments ?? [];
+
+  return (
+    <div className="order-summary">
+      <h2 className="order-summary__title text-md-semibold md:text-lg-semibold">{title}</h2>
+
+      <div className="order-summary__rows">
+        <div className="order-summary__row">
+          <span className="text-md-regular">{subtotalLabel}</span>
+          <span className="text-md-semibold">
+            {getIkasOrderFormattedTotalPrice(cart)}
+          </span>
+        </div>
+
+        {adjustments.map((adj, i) => {
+          const isDecrement = !!getOrderAdjustmentIsDecrement(adj);
+
+          return (
+            <div key={i} className="order-summary__row">
+              <span className="text-sm-regular">
+                {getOrderAdjustmentDisplayName(adj)}
+              </span>
+              <span
+                className={cx(
+                  "order-summary__adjustment-amount text-sm-semibold",
+                  isDecrement && "order-summary__adjustment-amount--discount",
+                )}
+              >
+                {getOrderAdjustmentFormattedAmount(adj)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="order-summary__divider" />
+
+      <div className="order-summary__row order-summary__total">
+        <span className="text-md-semibold md:text-lg-semibold">{totalLabel}</span>
+        <span className="text-md-semibold md:text-lg-semibold">
+          {getIkasOrderFormattedTotalFinalPrice(cart)}
+        </span>
+      </div>
+
+      <CouponCode
+        appliedCoupon={cart.couponCode}
+        toggleText={couponToggleText}
+        placeholder={couponPlaceholder}
+        applyText={couponApplyText}
+        removeText={couponRemoveText}
+        applyingText={couponApplyingText}
+      />
+
+      <a
+        className="order-summary__checkout-link"
+        href={getCheckoutUrlFromCartStore(cartStore)}
+      >
+        <Button variant="primary" className="order-summary__checkout-btn">
+          {checkoutButtonText}
+        </Button>
+      </a>
+    </div>
+  );
+});
+
+export default OrderSummary;

package/data/section-templates/cart-section/components/OrderSummary/styles.css

@@ -0,0 +1,70 @@
+/* OrderSummary */
+.order-summary {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: var(--kombos-white);
+  min-width: 0;
+}
+
+@media (min-width: 768px) {
+  .order-summary {
+    padding: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .order-summary {
+    position: sticky;
+    top: 7rem;
+  }
+}
+
+.order-summary__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.order-summary__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.order-summary__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--kombos-gray-700);
+}
+
+.order-summary__adjustment-amount {
+  color: var(--kombos-gray-500);
+}
+
+.order-summary__adjustment-amount--discount {
+  color: var(--kombos-error);
+}
+
+.order-summary__divider {
+  height: 1px;
+  background-color: var(--kombos-gray-200);
+}
+
+.order-summary__total {
+  color: var(--kombos-gray-900);
+}
+
+/* Checkout */
+.order-summary__checkout-link {
+  display: block;
+  text-decoration: none;
+}
+
+.order-summary__checkout-btn {
+  display: flex;
+  width: 100%;
+}

package/data/section-templates/cart-section/global-types.ts

@@ -0,0 +1,13 @@
+// Auto-generated global type definitions for ikas code components.
+// This file is regenerated automatically — do not edit manually.
+
+/** Enum type: s3OODUmZpJ */
+export type AspectRatio = "Square" | "Portrait" | "Landscape" | "Video";
+/** Enum type: __breakpointsEnum__ */
+export type Breakpoints = "desktop";
+/** Enum type: Tkt3wfuJ5F */
+export type NumberOfColumns = "One" | "Two" | "Three" | "Four" | "Five";
+/** Enum type: GrylMqHxui */
+export type ObjectFit = "Fill" | "Cover" | "Contain";
+/** Enum type: 08UWYbbs0P */
+export type VerticalAlignment = "Top" | "Middle" | "Bottom";

package/data/section-templates/cart-section/ikas-config-snippet.json

@@ -0,0 +1,130 @@
+{
+  "id": "{{PROJECT_ID}}-cart-page",
+  "name": "CartPage",
+  "type": "section",
+  "entry": "./src/components/CartPage/index.tsx",
+  "styles": "./src/components/CartPage/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepet",
+      "groupId": "page"
+    },
+    {
+      "name": "emptyCartText",
+      "displayName": "Boş Sepet Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepetinizde Ürün Bulunmamaktadır",
+      "groupId": "page"
+    },
+    {
+      "name": "subtotalLabel",
+      "displayName": "Ara Toplam Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ara Toplam",
+      "groupId": "summary"
+    },
+    {
+      "name": "totalLabel",
+      "displayName": "Toplam Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Toplam",
+      "groupId": "summary"
+    },
+    {
+      "name": "checkoutButtonText",
+      "displayName": "Ödeme Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Siparişi Tamamla",
+      "groupId": "summary"
+    },
+    {
+      "name": "itemsText",
+      "displayName": "Ürün Sayısı Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "ürün",
+      "groupId": "page"
+    },
+    {
+      "name": "couponPlaceholder",
+      "displayName": "Kupon Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kupon kodu girin",
+      "groupId": "coupon"
+    },
+    {
+      "name": "couponApplyText",
+      "displayName": "Kupon Uygula Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Uygula",
+      "groupId": "coupon"
+    },
+    {
+      "name": "couponRemoveText",
+      "displayName": "Kupon Kaldır Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kaldır",
+      "groupId": "coupon"
+    },
+    {
+      "name": "couponApplyingText",
+      "displayName": "Kupon Uygulanıyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Uygulanıyor...",
+      "groupId": "coupon"
+    },
+    {
+      "name": "orderSummaryTitle",
+      "displayName": "Sipariş Özeti Başlığı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sipariş Özeti",
+      "groupId": "summary"
+    },
+    {
+      "name": "couponToggleText",
+      "displayName": "Kupon Aç/Kapa Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hediye Kodunu Kullan!",
+      "groupId": "coupon"
+    },
+    {
+      "name": "continueShoppingText",
+      "displayName": "Alışverişe Devam Butonu Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Alışverişe Başla",
+      "groupId": "page"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "page",
+      "name": "Sayfa",
+      "description": "Sayfa başlığı, yükleme ve boş sepet metinleri"
+    },
+    {
+      "id": "summary",
+      "name": "Sipariş Özeti",
+      "description": "Sipariş özeti başlığı, fiyat etiketleri ve ödeme butonu"
+    },
+    {
+      "id": "coupon",
+      "name": "Kupon Kodu",
+      "description": "Kupon kodu toggle, giriş alanı ve buton metinleri"
+    }
+  ]
+}