@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/product-detail-section/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/product-detail-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-detail-section/ikas-config-snippet.json

@@ -0,0 +1,80 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail",
+  "name": "ProductDetail",
+  "type": "section",
+  "entry": "./src/components/ProductDetail/index.tsx",
+  "styles": "./src/components/ProductDetail/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "aspectRatio",
+      "displayName": "En Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "gorsel-ayarlari",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "objectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "gorsel-ayarlari",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "components",
+      "displayName": "Bilgi Bileşenleri",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-product-detail-name-favorite",
+        "{{PROJECT_ID}}-product-detail-sku",
+        "{{PROJECT_ID}}-product-detail-prices",
+        "{{PROJECT_ID}}-product-detail-product-group",
+        "{{PROJECT_ID}}-product-detail-variant",
+        "{{PROJECT_ID}}-product-detail-add-to-cart",
+        "{{PROJECT_ID}}-product-detail-features",
+        "{{PROJECT_ID}}-product-detail-description",
+        "{{PROJECT_ID}}-product-detail-bundle-product",
+        "{{PROJECT_ID}}-product-detail-option-set",
+        "{{PROJECT_ID}}-product-detail-offer"
+      ]
+    },
+    {
+      "name": "bottomComponents",
+      "displayName": "Alt Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-product-detail-bundle-furniture",
+        "{{PROJECT_ID}}-product-detail-offer"
+      ]
+    },
+    {
+      "name": "homepageText",
+      "displayName": "Anasayfa Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Anasayfa",
+      "groupId": "metinler"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "gorsel-ayarlari",
+      "name": "Görsel Ayarları",
+      "description": "Ürün görselinin en boy oranı ve sığdırma modu"
+    },
+    {
+      "id": "metinler",
+      "name": "Metinler",
+      "description": "Breadcrumb ve sayfa metinleri"
+    }
+  ]
+}

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

@@ -0,0 +1,92 @@
+import {
+  getIkasCategoryPathItemHref,
+  getProductCategoryPath,
+  getProductVariantMainImage,
+  getSelectedProductVariant,
+  IkasImage,
+  isNotEmpty,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import Breadcrumb from "../../sub-components/Breadcrumb";
+import type { BreadcrumbItem } from "../../sub-components/Breadcrumb";
+import ProductGallery from "./components/ProductGallery";
+
+export function ProductDetail(props: Props) {
+  const {
+    product,
+    components,
+    aspectRatio,
+    objectFit,
+    bottomComponents,
+    homepageText = "Anasayfa",
+  } = props;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const mainProductImage = getProductVariantMainImage(selectedVariant);
+  const mainImage = mainProductImage?.image;
+  const variantImages = selectedVariant?.images;
+  const images: IkasImage[] = variantImages?.length
+    ? variantImages
+        .map((pi: any) => pi.image)
+        .filter((img: any): img is IkasImage => img != null)
+    : mainImage
+      ? [mainImage]
+      : [];
+
+  const categoryPath = getProductCategoryPath(product);
+
+  return (
+    <section className="kombos-pd">
+      <div className="kombos-container kombos-pd__container">
+        <Breadcrumb
+          items={[
+            { label: homepageText, href: "/" } as BreadcrumbItem,
+            ...(isNotEmpty(categoryPath)
+              ? categoryPath.map(
+                  (pathItem: any) =>
+                    ({
+                      label: pathItem.name,
+                      href: getIkasCategoryPathItemHref(pathItem),
+                    }) as BreadcrumbItem,
+                )
+              : []),
+            { label: product.name } as BreadcrumbItem,
+          ]}
+          size="xs"
+          className="kombos-pd__breadcrumb"
+        />
+
+        <div className="kombos-pd__layout">
+          <ProductGallery
+            images={images}
+            productName={product.name}
+            aspectRatio={aspectRatio}
+            objectFit={objectFit}
+          />
+
+          <div className="kombos-pd__info">
+            <IkasComponentRenderer
+              id="product-detail-info"
+              components={components}
+              parentProps={props}
+            />
+          </div>
+        </div>
+
+        {bottomComponents && (
+          <div className="kombos-pd__bottom">
+            <IkasComponentRenderer
+              id="product-detail-bottom"
+              components={bottomComponents}
+              parentProps={props}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default ProductDetail;

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

@@ -0,0 +1,58 @@
+/* ===== Product Detail Section ===== */
+
+.kombos-pd {
+  width: 100%;
+}
+
+/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */
+.kombos-pd__breadcrumb {
+  padding-top: 1rem;
+}
+
+/* ---- Layout ---- */
+.kombos-pd__layout {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+}
+
+/* ---- Product Info ---- */
+.kombos-pd__info {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd__container {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .kombos-pd__breadcrumb {
+    padding-top: 0;
+    padding-bottom: 1.5rem;
+  }
+
+  .kombos-pd__layout {
+    display: grid;
+    grid-template-columns: 7fr 5fr;
+    gap: 2rem;
+    padding-top: 0;
+  }
+
+  /* Gallery — sticky on desktop */
+  .kombos-pd__gallery {
+    position: sticky;
+    top: 0.75rem;
+    align-self: start;
+  }
+
+  /* Info — right side */
+  .kombos-pd__info {
+    min-width: 0;
+    padding: 0;
+  }
+}

package/data/section-templates/product-detail-section/sub-components/Badge/index.tsx

@@ -0,0 +1,208 @@
+import { ComponentChildren } from "preact";
+import {
+  IkasImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+
+const TYPO_MAP = {
+  xs: "text-xs-medium",
+  s: "text-sm-medium",
+  m: "text-md-medium",
+  l: "text-md-medium",
+} as const;
+
+type Size = "xs" | "s" | "m" | "l";
+
+interface BaseProps {
+  size?: Size;
+  selected?: boolean;
+  outOfStock?: boolean;
+  href?: string;
+  onClick?: () => void;
+  title?: string;
+  "aria-label"?: string;
+}
+
+function StrikeLine() {
+  return <span className="kombos-badge__strike" />;
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeImage                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeImageProps extends BaseProps {
+  image: IkasImage;
+  alt: string;
+  sizes?: string;
+  variantImg?: boolean;
+}
+
+export function BadgeImage({
+  image,
+  alt,
+  sizes = "64px",
+  variantImg,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeImageProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--image",
+    variantImg && "kombos-badge--variant-img",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      <img
+        src={getDefaultSrc(image)}
+        srcSet={createMediaSrcset(image)}
+        sizes={sizes}
+        alt={alt}
+        className="kombos-badge__img"
+      />
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeColor                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeColorProps extends BaseProps {
+  colorCode: string;
+}
+
+export function BadgeColor({
+  colorCode,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeColorProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--color",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = outOfStock ? <StrikeLine /> : null;
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={className}
+        style={{ backgroundColor: colorCode }}
+        title={title}
+        aria-label={ariaLabel}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      style={{ backgroundColor: colorCode }}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeText                                                          */
+/* ------------------------------------------------------------------ */
+
+interface BadgeTextProps extends BaseProps {
+  children: ComponentChildren;
+}
+
+export function BadgeText({
+  children,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeTextProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--text",
+    `kombos-badge--${size}`,
+    TYPO_MAP[size],
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      {children}
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}

package/data/section-templates/product-detail-section/sub-components/Badge/styles.css

@@ -0,0 +1,129 @@
+/* ===== Badge Primitives ===== */
+
+/* ---- Base badge ---- */
+.kombos-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  min-width: 2.25rem;
+  cursor: pointer;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Reset for <button> */
+  padding: 0;
+  font: inherit;
+  /* Reset for <a> */
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease;
+}
+
+/* ---- Size: xs ---- */
+.kombos-badge--xs {
+  height: 1.75rem;
+  min-width: 1.75rem;
+}
+
+.kombos-badge--xs.kombos-badge--color,
+.kombos-badge--xs.kombos-badge--image {
+  width: 1.75rem;
+}
+
+.kombos-badge--image.kombos-badge--variant-img.kombos-badge--xs {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* ---- Type: text ---- */
+.kombos-badge--text {
+  color: var(--kombos-gray-700);
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.kombos-badge--xs.kombos-badge--text {
+  padding: 0 0.375rem;
+}
+
+.kombos-badge--s.kombos-badge--text {
+  padding: 0 0.5rem;
+}
+
+.kombos-badge--m.kombos-badge--text,
+.kombos-badge--l.kombos-badge--text {
+  padding: 0 0.75rem;
+}
+
+/* ---- Type: color ---- */
+.kombos-badge--color {
+  width: 2.25rem;
+  padding: 0;
+}
+
+/* ---- Type: image ---- */
+.kombos-badge--image {
+  width: 2.25rem;
+  padding: 0;
+}
+
+.kombos-badge__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 5px;
+}
+
+/* Variant product image (larger) */
+.kombos-badge--image.kombos-badge--variant-img {
+  width: 4rem;
+  height: 4rem;
+}
+
+/* ---- States ---- */
+
+/* Hover (skip disabled buttons and out-of-stock) */
+.kombos-badge:hover:not(:disabled):not(.kombos-badge--nonstock) {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-badge--text:hover:not(:disabled):not(.kombos-badge--nonstock) {
+  color: var(--kombos-gray-900);
+}
+
+/* Selected */
+.kombos-badge--selected {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-badge--selected.kombos-badge--text {
+  background: var(--kombos-gray-50);
+  color: var(--kombos-gray-900);
+}
+
+/* Out of stock */
+.kombos-badge--nonstock {
+  cursor: not-allowed;
+}
+
+.kombos-badge--nonstock.kombos-badge--text {
+  color: var(--kombos-gray-400);
+}
+
+/* Diagonal strike line */
+.kombos-badge__strike {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to top left,
+    transparent calc(50% - 0.5px),
+    var(--kombos-gray-500) calc(50% - 0.5px),
+    var(--kombos-gray-500) calc(50% + 0.5px),
+    transparent calc(50% + 0.5px)
+  );
+}