@ikas/code-components-mcp 0.105.0 → 0.107.0

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

@@ -0,0 +1,11 @@
+import type { IkasProduct } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  components?: any;
+  bottomComponents?: any;
+  homepageText?: string;
+}

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

@@ -0,0 +1,19 @@
+import {
+  IkasProductOption,
+  IkasProductOptionSelectValue,
+  getProductOptionFormattedPrice,
+} from "@ikas/bp-storefront";
+
+export function getSelectValuePrice(
+  parentOption: IkasProductOption,
+  val: IkasProductOptionSelectValue,
+): string {
+  if (val.price == null) return "";
+
+  return getProductOptionFormattedPrice({
+    ...parentOption,
+    price: val.price,
+    priceType: val.priceType,
+    otherPrices: val.otherPrices,
+  });
+}

package/data/section-templates/product-detail-section/utils/optionSet.ts

@@ -0,0 +1,17 @@
+import {
+  IkasProductOptionSet,
+  hasValidProductOptionSetValues,
+} from "@ikas/bp-storefront";
+import { showToast } from "./toast";
+
+export function validateOptionSet(
+  optionSet: IkasProductOptionSet | undefined | null,
+  errorMessage: string
+): boolean {
+  if (optionSet && !hasValidProductOptionSetValues(optionSet)) {
+    window.dispatchEvent(new CustomEvent("ikas:show-option-errors"));
+    showToast(errorMessage, "error");
+    return false;
+  }
+  return true;
+}

package/data/section-templates/product-detail-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/product-pricing/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Product Pricing Pattern",
+  "description": "Product price display with discount detection, formatted prices, campaign pricing, and currency handling. Shows getFormattedPrice, hasDiscount, getIkasProductPrices, and sellPrice/listPrice patterns."
+}

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

@@ -0,0 +1,66 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-prices",
+  "name": "ProductDetailPrices",
+  "type": "component",
+  "entry": "./src/components/ProductDetailPrices/index.tsx",
+  "styles": "./src/components/ProductDetailPrices/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "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"
+    }
+  ],
+  "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ı"
+    }
+  ]
+}

package/data/section-templates/product-pricing/index.tsx

@@ -0,0 +1,62 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  getProductVariantDiscountPercentage,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantFormattedSellPrice,
+  getSelectedProductVariant,
+  hasProductVariantDiscount,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import Tag from "../../sub-components/Tag";
+
+export function ProductDetailPrices({
+  product,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+}: Props) {
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const hasDiscount = hasProductVariantDiscount(selectedVariant);
+  const finalPrice = getProductVariantFormattedFinalPrice(selectedVariant);
+  const originalPrice = hasDiscount
+    ? getProductVariantFormattedSellPrice(selectedVariant)
+    : null;
+  const discountPercentage = hasDiscount
+    ? getProductVariantDiscountPercentage(selectedVariant)
+    : null;
+
+  return (
+    <div
+      className="kombos-pd-prices"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      <div className="kombos-pd-prices__prices">
+        <span className="kombos-pd-prices__final text-xl-medium md:display-xs-medium">
+          {finalPrice}
+        </span>
+        {originalPrice && (
+          <span className="kombos-pd-prices__original text-lg-medium-strike md:text-xl-medium-strike">
+            {originalPrice}
+          </span>
+        )}
+      </div>
+      {discountPercentage != null && Number(discountPercentage) > 0 && (
+        <Tag type="discounted" size="m">
+          %{Math.round(Number(discountPercentage))}
+        </Tag>
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailPrices;

package/data/section-templates/product-pricing/styles.css

@@ -0,0 +1,32 @@
+/* ===== ProductDetailPrices ===== */
+
+.kombos-pd-prices {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+.kombos-pd-prices__prices {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.kombos-pd-prices__final {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-pd-prices__original {
+  color: var(--kombos-gray-500);
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-prices {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

package/data/section-templates/product-pricing/sub-components/Tag/index.tsx

@@ -0,0 +1,21 @@
+import type { ComponentChildren } from "preact";
+
+interface Props {
+  type: "discounted" | "new" | "dark";
+  size?: "s" | "m";
+  children: ComponentChildren;
+}
+
+export default function Tag({ type, size = "s", children }: Props) {
+  const typoClass = size === "s" ? "text-xs-semibold" : "text-md-semibold";
+  const typeClass =
+    type === "discounted"
+      ? "kombos-tag--discounted"
+      : type === "dark"
+        ? "kombos-tag--dark"
+        : "kombos-tag--new";
+
+  return (
+    <span className={`kombos-tag ${typeClass} ${typoClass}`}>{children}</span>
+  );
+}

package/data/section-templates/product-pricing/sub-components/Tag/styles.css

@@ -0,0 +1,30 @@
+/* ===== Tag ===== */
+.kombos-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 6px;
+  white-space: nowrap;
+}
+
+/* Discounted */
+.kombos-tag--discounted {
+  background: var(--kombos-discount-bg);
+  color: var(--kombos-white);
+}
+
+/* New */
+.kombos-tag--new {
+  background: var(--kombos-white);
+  border: 1px solid var(--kombos-gray-200);
+  color: var(--kombos-gray-900);
+}
+
+/* Dark */
+.kombos-tag--dark {
+  padding: 0.125rem 0.5rem;
+  border-radius: 4px;
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}

package/data/section-templates/product-pricing/types.ts

@@ -0,0 +1,9 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+}

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

@@ -0,0 +1,4 @@
+{
+  "title": "Product Reviews Section",
+  "description": "Product review display and submission. Shows review summary with star distribution, individual review cards with ratings, and a review form for authenticated customers. Uses ReviewSummary, ReviewCard, and ReviewForm sub-components."
+}

package/data/section-templates/product-reviews-section/hooks/useScrollLock.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "preact/hooks";
+import { RefObject } from "preact";
+
+export function useScrollLock(
+  enabled: boolean = true,
+  skipCleanupRef?: RefObject<boolean>,
+) {
+  useEffect(() => {
+    if (!enabled) return;
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    return () => {
+      if (skipCleanupRef?.current) return;
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [enabled]);
+}

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

@@ -0,0 +1,136 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-reviews",
+  "name": "ProductDetailReviews",
+  "type": "section",
+  "entry": "./src/components/ProductDetailReviews/index.tsx",
+  "styles": "./src/components/ProductDetailReviews/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Product",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "reviewsPerPage",
+      "displayName": "Reviews Per Page",
+      "type": "NUMBER",
+      "required": false,
+      "defaultValue": 5,
+      "groupId": "settings"
+    },
+    {
+      "name": "sectionTitle",
+      "displayName": "Section Title",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Customer Reviews",
+      "groupId": "texts"
+    },
+    {
+      "name": "writeReviewButtonText",
+      "displayName": "Write Review Button",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Write a Review",
+      "groupId": "texts"
+    },
+    {
+      "name": "emptyStateText",
+      "displayName": "Empty State Text",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "No reviews yet. Be the first to review this product!",
+      "groupId": "texts"
+    },
+    {
+      "name": "reviewCountText",
+      "displayName": "Review Count Text",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Based on {count} reviews",
+      "groupId": "texts"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Submit Button",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Submit Review",
+      "groupId": "form"
+    },
+    {
+      "name": "submittingButtonText",
+      "displayName": "Submitting Button",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Submitting...",
+      "groupId": "form"
+    },
+    {
+      "name": "titlePlaceholder",
+      "displayName": "Title Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Review title",
+      "groupId": "form"
+    },
+    {
+      "name": "commentPlaceholder",
+      "displayName": "Comment Placeholder",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Write your review...",
+      "groupId": "form"
+    },
+    {
+      "name": "merchantReplyLabel",
+      "displayName": "Merchant Reply Label",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Store Reply",
+      "groupId": "texts"
+    },
+    {
+      "name": "starRequiredError",
+      "displayName": "Star Required Error",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Please select a rating",
+      "groupId": "form"
+    },
+    {
+      "name": "cancelButtonText",
+      "displayName": "Cancel Button",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Cancel",
+      "groupId": "form"
+    },
+    {
+      "name": "errorMessage",
+      "displayName": "Error Message",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Something went wrong. Please try again.",
+      "groupId": "form"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Bölüm başlığı, boş durum ve yorum sayısı metinleri"
+    },
+    {
+      "id": "form",
+      "name": "Form Metinleri",
+      "description": "Yorum yazma formundaki alan ve buton metinleri"
+    },
+    {
+      "id": "settings",
+      "name": "Ayarlar",
+      "description": "Sayfalama ve görüntüleme ayarları"
+    }
+  ]
+}