@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/account-info-section/sub-components/ProductCard/index.tsx

@@ -0,0 +1,276 @@
+import { useState, useRef, useEffect } from "preact/hooks";
+import {
+  getSelectedProductVariant,
+  getProductVariantMainImage,
+  getProductVariantDiscountPercentage,
+  hasProductVariantDiscount,
+  hasProductVariantStock,
+  addSelectedtedVariantToCart,
+  getProductHref,
+  getDefaultSrc,
+  IkasProduct,
+  isAddToCartEnabled,
+  isFavoriteIkasProduct,
+  addIkasProductToFavorites,
+  removeIkasProductFromFavorites,
+  customerStore,
+  hasCustomer,
+  Router,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { NoProductSVG, Heart2SVG, HeartFilledSVG } from "../icons";
+import Button from "../Button";
+import SpinnerIcon from "../SpinnerIcon";
+import Tag from "../Tag";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import { showToast } from "../../utils/toast";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+interface Props {
+  product: IkasProduct;
+  addToCartText: string;
+  addedToCartText?: string;
+  outOfStockText?: string;
+  goToProductText?: string;
+  showFavorite?: boolean;
+  hideAddToCartButton?: boolean;
+  badgeText?: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  dataPage?: number;
+  sizes?: string;
+  openCartOnAdd?: boolean;
+  errorMessage?: string;
+  onFavoriteRemove?: () => void;
+  priority?: boolean;
+}
+
+const ProductCard = observer(function ProductCard({
+  product,
+  addToCartText,
+  addedToCartText = "Sepete Eklendi",
+  outOfStockText = "Tükendi",
+  goToProductText = "Ürüne Git",
+  showFavorite = true,
+  hideAddToCartButton = false,
+  badgeText,
+  aspectRatio,
+  objectFit,
+  dataPage,
+  sizes = "(max-width: 767px) calc(50vw - 24px), (max-width: 1023px) calc(50vw - 44px), 300px",
+  openCartOnAdd = true,
+  errorMessage = "Ürün sepete eklenemedi",
+  onFavoriteRemove,
+  priority = false,
+}: Props) {
+  const [cartState, setCartState] = useState<"idle" | "loading" | "added">(
+    "idle",
+  );
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const productImage = selectedVariant
+    ? getProductVariantMainImage(selectedVariant)
+    : null;
+  const image = productImage?.image;
+
+  const sortedImages = selectedVariant?.images
+    ? [...selectedVariant.images].sort((a, b) => a.order - b.order)
+    : [];
+  const secondImage = sortedImages.length > 1 ? sortedImages[1]?.image : null;
+  const hasDiscount = selectedVariant
+    ? hasProductVariantDiscount(selectedVariant)
+    : false;
+  const inStock = selectedVariant
+    ? hasProductVariantStock(selectedVariant)
+    : false;
+  const discountPercentage =
+    hasDiscount && selectedVariant
+      ? getProductVariantDiscountPercentage(selectedVariant)
+      : null;
+
+  const productHref = getProductHref(product);
+  const isBundleProduct = !!selectedVariant?.bundleSettings;
+  const hasOptionSet = !!product.productOptionSet;
+  const isFavorite = isFavoriteIkasProduct(product);
+
+  const mediaStyle: Record<string, string> = {};
+  const resolvedAR = resolveAspectRatio(aspectRatio);
+  const resolvedOF = resolveObjectFit(objectFit);
+  if (resolvedAR) mediaStyle.aspectRatio = resolvedAR;
+  if (resolvedOF) mediaStyle.objectFit = resolvedOF;
+
+  const handleAddToCart = async () => {
+    if (cartState === "loading") return;
+
+    if (!isAddToCartEnabled(product) || isBundleProduct || hasOptionSet) {
+      Router.navigate(productHref);
+      return;
+    }
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCartState("loading");
+    try {
+      const result = await addSelectedtedVariantToCart(product, 1);
+
+      if (result.success) {
+        if (openCartOnAdd) {
+          window.dispatchEvent(new CustomEvent("ikas:open-cart-sidebar"));
+        }
+        setCartState("added");
+      } else {
+        showToast(errorMessage, "error");
+      }
+
+      timerRef.current = setTimeout(() => setCartState("idle"), 2000);
+    } catch {
+      setCartState("idle");
+      showToast(errorMessage, "error");
+    }
+  };
+
+  const handleFavoriteToggle = async () => {
+    const isLoggedIn = hasCustomer(customerStore);
+    if (!isLoggedIn) {
+      Router.navigateToPage("LOGIN");
+      return;
+    }
+
+    if (isFavorite) {
+      await removeIkasProductFromFavorites(product);
+      onFavoriteRemove?.();
+    } else {
+      await addIkasProductToFavorites(product);
+    }
+  };
+
+  return (
+    <div className="kombos-product-card" data-page={dataPage}>
+      {/* Image container */}
+      <div className="kombos-product-card__image-wrapper">
+        <a href={productHref} className="kombos-product-card__media-link" aria-label={product.name || "Product"}>
+          {image?.isVideo ? (
+            <video
+              src={getDefaultSrc(image)}
+              className="kombos-product-card__media"
+              style={mediaStyle}
+              muted
+              loop
+              autoPlay
+              playsInline
+              aria-label={product.name}
+            >
+              <track kind="captions" />
+            </video>
+          ) : image ? (
+            <>
+              <img
+                src={getDefaultSrc(image)}
+                srcSet={createMediaSrcset(image)}
+                sizes={sizes}
+                alt={product.name}
+                className="kombos-product-card__media kombos-product-card__media--primary"
+                style={mediaStyle}
+                loading={priority ? "eager" : "lazy"}
+                decoding={priority ? "sync" : "async"}
+                fetchpriority={priority ? "high" : undefined}
+              />
+              {secondImage && !secondImage.isVideo && (
+                <img
+                  src={getDefaultSrc(secondImage)}
+                  srcSet={createMediaSrcset(secondImage)}
+                  sizes={sizes}
+                  alt=""
+                  className="kombos-product-card__media kombos-product-card__media--hover"
+                  style={mediaStyle}
+                  loading="lazy"
+                  decoding="async"
+                />
+              )}
+            </>
+          ) : (
+            <div
+              className="kombos-product-card__media kombos-product-card__media--placeholder"
+              style={mediaStyle}
+            >
+              <NoProductSVG />
+            </div>
+          )}
+        </a>
+
+        {/* Out of stock overlay — must render before badges/heart so they appear on top */}
+        {!inStock && <div className="kombos-product-card__overlay" />}
+
+        {/* Badges */}
+        {(hasDiscount || badgeText) && (
+          <div className="kombos-product-card__badges">
+            {hasDiscount && discountPercentage && (
+              <Tag type="discounted" size="s">
+                %{discountPercentage}
+              </Tag>
+            )}
+            {badgeText && (
+              <Tag type="new" size="s">
+                {badgeText}
+              </Tag>
+            )}
+          </div>
+        )}
+
+        {/* Favorite button */}
+        {showFavorite && (
+          <button
+            type="button"
+            className="kombos-product-card__favorite"
+            onClick={handleFavoriteToggle}
+            aria-label="Favorite"
+          >
+            {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}
+          </button>
+        )}
+      </div>
+
+      {/* Add to Cart / Go to Product */}
+      {!hideAddToCartButton && (
+        <>
+          {isBundleProduct || (hasOptionSet && inStock) ? (
+            <Button
+              variant="primary"
+              size="xs"
+              className="kombos-product-card__add-btn"
+              onClick={() => Router.navigate(productHref)}
+            >
+              {goToProductText}
+            </Button>
+          ) : (
+            <Button
+              variant={cartState === "added" ? "secondary" : "primary"}
+              size="xs"
+              className="kombos-product-card__add-btn"
+              onClick={inStock ? handleAddToCart : undefined}
+              disabled={!inStock || cartState === "loading"}
+              icon={
+                inStock && cartState === "loading" ? <SpinnerIcon /> : undefined
+              }
+            >
+              {!inStock && outOfStockText}
+              {inStock && cartState === "added" && addedToCartText}
+              {inStock &&
+                (cartState === "idle" || cartState === "loading") &&
+                addToCartText}
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
+
+export default ProductCard;

package/data/section-templates/account-info-section/sub-components/ProductCard/styles.css

@@ -0,0 +1,99 @@
+/* ===== Product Card ===== */
+.kombos-product-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+/* Image wrapper */
+.kombos-product-card__image-wrapper {
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-product-card__media-link {
+  display: block;
+}
+
+.kombos-product-card__media {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: var(--kombos-gray-100);
+}
+
+.kombos-product-card__media--primary {
+  transition: opacity 0.3s ease;
+}
+
+.kombos-product-card__media--hover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.kombos-product-card__image-wrapper:hover .kombos-product-card__media--primary {
+  opacity: 0;
+}
+
+.kombos-product-card__image-wrapper:hover .kombos-product-card__media--hover {
+  opacity: 1;
+}
+
+.kombos-product-card__media--placeholder {
+  border: 1px solid var(--kombos-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--kombos-gray-300);
+  font-size: 4rem;
+}
+
+/* Badges */
+.kombos-product-card__badges {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Favorite */
+.kombos-product-card__favorite {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-size: 1.5rem;
+  color: var(--kombos-gray-900);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Out of stock overlay */
+.kombos-product-card__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.32);
+  pointer-events: none;
+}
+
+
+/* Add to Cart Button */
+.kombos-product-card__add-btn {
+  width: 100%;
+}

package/data/section-templates/account-info-section/sub-components/Select/index.tsx

@@ -0,0 +1,86 @@
+import { CSSProperties } from "preact";
+import { cx } from "../../utils/cx";
+import { CaretDownSVG, XCircleSVG } from "../icons";
+
+type Size = "xs" | "s" | "m";
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  options: Option[];
+  size?: Size;
+  status?: "default" | "error" | "success";
+  value?: string;
+  onChange?: (e: Event) => void;
+  onClear?: () => void;
+  allowClear?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  disabled?: boolean;
+  id?: string;
+  "aria-label"?: string;
+}
+
+const typographyClass: Record<Size, string> = {
+  xs: "text-sm-semibold",
+  s: "text-md-semibold",
+  m: "text-lg-semibold",
+};
+
+export default function Select({
+  options,
+  size = "s",
+  status = "default",
+  value,
+  onChange,
+  onClear,
+  allowClear,
+  className,
+  disabled,
+  id,
+  style,
+  "aria-label": ariaLabel,
+}: Props) {
+  const showClear = allowClear && !!value && !disabled;
+
+  const cls = cx(
+    "kombos-select",
+    `kombos-select--${size}`,
+    showClear && "kombos-select--clearable",
+    typographyClass[size],
+    className,
+  );
+
+  return (
+    <div className="kombos-select-wrap" style={style} data-state={status !== "default" ? status : undefined}>
+      <select
+        id={id}
+        className={cls}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      >
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      <CaretDownSVG className="kombos-select__icon" />
+      {showClear && (
+        <button
+          type="button"
+          className="kombos-select__clear"
+          onClick={onClear}
+          aria-label="Clear selection"
+        >
+          <XCircleSVG />
+        </button>
+      )}
+    </div>
+  );
+}

package/data/section-templates/account-info-section/sub-components/Select/styles.css

@@ -0,0 +1,110 @@
+/* ===== Select ===== */
+.kombos-select-wrap {
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.kombos-select {
+  appearance: none;
+  width: 100%;
+  background: var(--kombos-white);
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  color: var(--kombos-gray-900);
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.kombos-select:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+/* Sizes — match Button padding + extra right space for icon */
+.kombos-select--xs {
+  padding: 0.4375rem 2rem 0.4375rem 0.9375rem;
+  min-height: 2.25rem;
+}
+
+.kombos-select--s {
+  padding: 0.5625rem 2.25rem 0.5625rem 1.1875rem;
+  min-height: 2.75rem;
+}
+
+.kombos-select--m {
+  padding: 0.6875rem 2.5rem 0.6875rem 1.4375rem;
+  min-height: 3.375rem;
+}
+
+/* Caret icon */
+.kombos-select__icon {
+  position: absolute;
+  right: 0.75rem;
+  pointer-events: none;
+  color: var(--kombos-gray-900);
+  font-size: 1rem;
+  transition: opacity 0.15s ease;
+}
+
+/* Clear button */
+.kombos-select__clear {
+  position: absolute;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  color: var(--kombos-gray-700);
+  background-color: var(--kombos-white);
+  font-size: 1rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+/* On hover: show clear button, hide caret */
+.kombos-select-wrap:hover .kombos-select__clear {
+  opacity: 1;
+}
+
+.kombos-select-wrap:hover .kombos-select--clearable ~ .kombos-select__icon {
+  opacity: 0;
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+[data-state="error"] .kombos-select {
+  border-color: var(--kombos-error);
+}
+
+[data-state="error"] .kombos-select:hover {
+  border-color: var(--kombos-error);
+}
+
+[data-state="success"] .kombos-select {
+  border-color: var(--kombos-success);
+}
+
+[data-state="success"] .kombos-select:hover {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-select:disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-select:disabled:hover {
+  border-color: var(--kombos-gray-200);
+}
+
+.kombos-select:disabled ~ .kombos-select__icon {
+  color: var(--kombos-gray-300);
+}

package/data/section-templates/account-info-section/sub-components/SkeletonField/index.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  labelWidth?: string;
+}
+
+export default function SkeletonField({ labelWidth = "40%" }: Props) {
+  return (
+    <div className="kombos-skeleton-field">
+      <div className="kombos-skeleton-field__label" style={{ width: labelWidth }} />
+      <div className="kombos-skeleton-field__input" />
+    </div>
+  );
+}

package/data/section-templates/account-info-section/sub-components/SkeletonField/styles.css

@@ -0,0 +1,29 @@
+/* ── Skeleton Field ── */
+.kombos-skeleton-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.kombos-skeleton-field__label {
+  height: 1.125rem;
+  border-radius: 4px;
+}
+
+.kombos-skeleton-field__input {
+  width: 100%;
+  height: 2.75rem;
+  border-radius: 6px;
+}
+
+.kombos-skeleton-field__label,
+.kombos-skeleton-field__input {
+  background: linear-gradient(
+    90deg,
+    var(--kombos-gray-100) 25%,
+    var(--kombos-gray-50) 50%,
+    var(--kombos-gray-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: kombos-shimmer 1.5s ease-in-out infinite;
+}

package/data/section-templates/account-info-section/sub-components/SpinnerIcon/index.tsx

@@ -0,0 +1,10 @@
+import { cx } from "../../utils/cx";
+import { SpinnerSVG } from "../icons";
+
+interface Props {
+  className?: string;
+}
+
+export default function SpinnerIcon({ className }: Props) {
+  return <SpinnerSVG className={cx("kombos-spinner", className)} />;
+}

package/data/section-templates/account-info-section/sub-components/SpinnerIcon/styles.css

@@ -0,0 +1,8 @@
+.kombos-spinner {
+  animation: kombos-spin 1s linear infinite;
+}
+
+@keyframes kombos-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

package/data/section-templates/account-info-section/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/account-info-section/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);
+}