@ikas/code-components-mcp 0.105.0 → 0.107.0

package/data/section-templates/product-detail-section/children/ProductDetailOffer/components/OfferCard/index.tsx

@@ -0,0 +1,209 @@
+import {
+  IkasProductOffer,
+  getSelectedProductVariant,
+  getProductVariantMainImage,
+  getDefaultSrc,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantFormattedSellPrice,
+  hasProductVariantDiscount,
+  hasProductVariantStock,
+  isAcceptedProductOffer,
+  acceptProductOffer,
+  rejectProductOffer,
+  getDisplayedProductVariantTypes,
+  selectVariantValue,
+  getProductHref,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../utils/cx";
+import Toggle from "../../../../sub-components/Toggle";
+import Select from "../../../../sub-components/Select";
+import { CheckCircleSVG, NoProductSVG } from "../../../../sub-components/icons";
+
+interface Props {
+  offer: IkasProductOffer;
+  outOfStockText?: string;
+  addedToCartBannerText?: string;
+  imageAspectRatio?: string;
+  imageObjectFit?: string;
+}
+
+const OfferCard = observer(function OfferCard({
+  offer,
+  outOfStockText = "Tükendi",
+  addedToCartBannerText = "Sepete eklenmiş",
+  imageAspectRatio,
+  imageObjectFit,
+}: Props) {
+  const product = offer.product;
+  if (!product) return null;
+
+  const variant = getSelectedProductVariant(product);
+  const isSelected = offer.isSelected;
+  const isAccepted = isAcceptedProductOffer(offer);
+  const inStock = variant ? hasProductVariantStock(variant) : false;
+
+  const productImage = variant
+    ? getProductVariantMainImage(variant)
+    : undefined;
+  const image = productImage?.image;
+  const imageSrc = image ? getDefaultSrc(image) : undefined;
+
+  const price = getProductVariantFormattedFinalPrice(variant);
+  const hasDiscount = hasProductVariantDiscount(variant);
+  const originalPrice = getProductVariantFormattedSellPrice(variant);
+  const variantTypes = getDisplayedProductVariantTypes(product);
+  const productHref = getProductHref(product);
+
+  function handleToggle(checked: boolean) {
+    if (isAccepted) return;
+
+    if (checked) {
+      acceptProductOffer(offer);
+    } else {
+      rejectProductOffer(offer);
+    }
+  }
+
+  const imageStyle =
+    imageAspectRatio || imageObjectFit
+      ? {
+          ...(imageAspectRatio && { aspectRatio: imageAspectRatio }),
+          ...(imageObjectFit && { objectFit: imageObjectFit }),
+        }
+      : undefined;
+
+  return (
+    <div
+      className={cx(
+        "kombos-offer-card",
+        isSelected && "kombos-offer-card--selected",
+        isAccepted && "kombos-offer-card--accepted",
+        !inStock && "kombos-offer-card--out-of-stock",
+      )}
+    >
+      <div className="kombos-offer-card__content">
+        <a href={productHref} className="kombos-offer-card__link">
+          {image?.isVideo ? (
+            <video
+              src={imageSrc}
+              className="kombos-offer-card__image"
+              style={imageStyle}
+              muted
+              loop
+              autoPlay
+              playsInline
+            >
+              <track kind="captions" />
+            </video>
+          ) : imageSrc ? (
+            <img
+              className="kombos-offer-card__image"
+              src={imageSrc}
+              alt={product.name}
+              loading="lazy"
+              style={imageStyle}
+            />
+          ) : (
+            <div
+              className="kombos-offer-card__image kombos-offer-card__image--placeholder"
+              style={imageStyle}
+            >
+              <NoProductSVG />
+            </div>
+          )}
+        </a>
+
+        <div className="kombos-offer-card__body">
+          <a
+            href={productHref}
+            className="kombos-offer-card__link kombos-offer-card__name text-sm-medium"
+          >
+            {product.name}
+          </a>
+
+          {variantTypes.length > 0 && (
+            <div className="kombos-offer-card__variants">
+              {variantTypes.map((dvt) => {
+                const selected = dvt.displayedVariantValues.find(
+                  (dvv) => dvv.isSelected,
+                );
+                const options = dvt.displayedVariantValues.map((dvv) => ({
+                  label: dvv.variantValue.name,
+                  value: dvv.variantValue.id,
+                }));
+
+                return (
+                  <div
+                    key={dvt.variantType.id}
+                    className="kombos-offer-card__variant-group"
+                  >
+                    <span className="kombos-offer-card__variant-label text-xs-medium">
+                      {dvt.variantType.name}
+                    </span>
+                    <Select
+                      disabled={isAccepted}
+                      size="xs"
+                      options={options}
+                      value={selected?.variantValue.id}
+                      aria-label={dvt.variantType.name}
+                      onChange={(e) => {
+                        const val = (e.target as HTMLSelectElement).value;
+                        const dvv = dvt.displayedVariantValues.find(
+                          (d) => d.variantValue.id === val,
+                        );
+                        if (dvv) {
+                          selectVariantValue(product, dvv.variantValue, true);
+                        }
+                      }}
+                      style={{
+                        maxWidth: 180,
+                      }}
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {inStock ? (
+            <div className="kombos-offer-card__prices">
+              <span className="kombos-offer-card__price text-sm-semibold">
+                {price}
+              </span>
+
+              {hasDiscount && (
+                <span className="kombos-offer-card__original-price text-sm-regular-strike">
+                  {originalPrice}
+                </span>
+              )}
+            </div>
+          ) : (
+            <span className="kombos-offer-card__out-of-stock text-xs-medium">
+              {outOfStockText}
+            </span>
+          )}
+        </div>
+
+        <div className="kombos-offer-card__toggle">
+          <Toggle
+            checked={isSelected || isAccepted}
+            onChange={inStock ? handleToggle : undefined}
+            disabled={!inStock || isAccepted}
+          />
+        </div>
+      </div>
+
+      {isAccepted && (
+        <div className="kombos-offer-card__banner">
+          <span className="kombos-offer-card__banner-icon">
+            <CheckCircleSVG />
+          </span>
+          <span className="text-xs-medium">{addedToCartBannerText}</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default OfferCard;

package/data/section-templates/product-detail-section/children/ProductDetailOffer/components/OfferCard/styles.css

@@ -0,0 +1,146 @@
+/* ===== Offer Card ===== */
+
+.kombos-offer-card {
+  position: relative;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+}
+
+.kombos-offer-card--selected {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-offer-card--accepted {
+  padding-bottom: 0.75rem;
+}
+
+.kombos-offer-card--out-of-stock {
+  opacity: 0.5;
+}
+
+.kombos-offer-card__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.kombos-offer-card__image {
+  width: 4rem;
+  height: auto;
+  flex-shrink: 0;
+  border-radius: 4px;
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
+  background: var(--kombos-gray-100);
+}
+
+.kombos-offer-card__image--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-300);
+  font-size: 1.5rem;
+}
+
+.kombos-offer-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-offer-card__link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.kombos-offer-card__name {
+  display: block;
+  color: var(--kombos-gray-900);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.kombos-offer-card__name:hover {
+  text-decoration: underline;
+}
+
+.kombos-offer-card__variants {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.kombos-offer-card__variant-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.kombos-offer-card__variant-label {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-offer-card__prices {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.375rem;
+}
+
+.kombos-offer-card__original-price {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-offer-card__price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-offer-card__out-of-stock {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-offer-card__toggle {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+/* Added to cart banner */
+.kombos-offer-card__banner {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+  border-radius: 6px;
+  white-space: nowrap;
+  z-index: 1;
+}
+
+.kombos-offer-card__banner-icon {
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  display: flex;
+}
+
+@media (min-width: 768px) {
+  .kombos-offer-card__content {
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .kombos-offer-card__image {
+    width: 5rem;
+  }
+}

package/data/section-templates/product-detail-section/children/ProductDetailOffer/components/OfferSummary/index.tsx

@@ -0,0 +1,175 @@
+import {
+  IkasProduct,
+  isAcceptedProductOffer,
+  getSelectedProductVariant,
+  getProductVariantCampaignOffersDiscountPercentage,
+  getProductVariantFormattedFinalPriceWithCampaignOffers,
+  getProductVariantFormattedSellPriceWithCampaignOffers,
+  hasProductVariantStock,
+  isAddToCartEnabled,
+  cartStore,
+  findExistingCartItem,
+  changeItemQuantity,
+  addItemToCart,
+  initProductOptionSetValues,
+} from "@ikas/bp-storefront";
+import { validateOptionSet } from "../../../../utils/optionSet";
+import { showToast } from "../../../../utils/toast";
+import { observer } from "@ikas/component-utils";
+import Button from "../../../../sub-components/Button";
+import Tag from "../../../../sub-components/Tag";
+import { InfoCircleSVG } from "../../../../sub-components/icons";
+import { useState } from "preact/hooks";
+
+interface Props {
+  product: IkasProduct;
+  offerInfoText: string;
+  totalText: string;
+  advantageousTotalText: string;
+  isInline: boolean;
+  addingToCartText: string;
+  addToCartTogetherText: string;
+  errorMessage: string;
+  optionSetErrorMessage: string;
+}
+
+const OfferSummary = observer(function OfferSummary({
+  product,
+  offerInfoText,
+  totalText,
+  advantageousTotalText,
+  isInline,
+  addingToCartText,
+  addToCartTogetherText,
+  errorMessage,
+  optionSetErrorMessage,
+}: Props) {
+  const [isAdding, setIsAdding] = useState(false);
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const discountPercentage =
+    getProductVariantCampaignOffersDiscountPercentage(selectedVariant);
+  const finalPrice =
+    getProductVariantFormattedFinalPriceWithCampaignOffers(selectedVariant);
+  const sellPrice =
+    getProductVariantFormattedSellPriceWithCampaignOffers(selectedVariant);
+  const hasDiscount = discountPercentage > 0;
+  const mainInStock = selectedVariant
+    ? hasProductVariantStock(selectedVariant)
+    : false;
+
+  const acceptedCount =
+    product.offers
+      ?.filter((o) => !isAcceptedProductOffer(o))
+      .reduce((acc, offer) => acc + (offer.isSelected ? 1 : 0), 0) || 0;
+
+  async function handleAddToCartTogether() {
+    if (isAdding || !mainInStock) return;
+
+    if (!validateOptionSet(product.productOptionSet, optionSetErrorMessage))
+      return;
+
+    if (!isAddToCartEnabled(product!)) {
+      showToast(errorMessage, "error");
+      return;
+    }
+
+    setIsAdding(true);
+    try {
+      const cart = cartStore.cart;
+      if (cart) {
+        const existingItem = findExistingCartItem(
+          cart,
+          selectedVariant!,
+          product!,
+        );
+        if (existingItem) {
+          const result = await changeItemQuantity(
+            existingItem,
+            existingItem.quantity + 1,
+            product!.offers,
+            product!,
+          );
+          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");
+          }
+          return;
+        }
+      }
+
+      const result = await addItemToCart(selectedVariant!, product!, 1);
+      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 {
+      setIsAdding(false);
+    }
+  }
+
+  return (
+    <div className="kombos-pd-offer__summary">
+      <div className="kombos-pd-offer__summary-info">
+        <span className="kombos-pd-offer__summary-info-icon">
+          <InfoCircleSVG />
+        </span>
+        <span className="text-xs-regular">{offerInfoText}</span>
+      </div>
+
+      {hasDiscount && (
+        <div className="kombos-pd-offer__total-row">
+          <span className="kombos-pd-offer__total-label text-sm-regular">
+            {totalText}
+          </span>
+          <span className="kombos-pd-offer__total-price--strike text-sm-regular">
+            {sellPrice}
+          </span>
+        </div>
+      )}
+
+      <div className="kombos-pd-offer__discount-row">
+        <span className="kombos-pd-offer__total-label text-sm-medium">
+          {hasDiscount ? advantageousTotalText : totalText}
+        </span>
+        <div className="kombos-pd-offer__discount-values">
+          {hasDiscount && (
+            <Tag type="dark" size="s">
+              -{Math.round(discountPercentage)}%
+            </Tag>
+          )}
+          <span className="kombos-pd-offer__total-price text-md-semibold">
+            {finalPrice}
+          </span>
+        </div>
+      </div>
+
+      {!isInline && (
+        <Button
+          variant="primary"
+          size="s"
+          className="kombos-pd-offer__btn"
+          disabled={isAdding || !mainInStock}
+          onClick={handleAddToCartTogether}
+        >
+          {isAdding
+            ? addingToCartText
+            : `${addToCartTogetherText} (${acceptedCount + 1})`}
+        </Button>
+      )}
+    </div>
+  );
+});
+
+export default OfferSummary;

package/data/section-templates/product-detail-section/children/ProductDetailOffer/ikas-config-snippet.json

@@ -0,0 +1,183 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-offer",
+  "name": "ProductDetailOffer",
+  "type": "component",
+  "entry": "./src/components/ProductDetailOffer/index.tsx",
+  "styles": "./src/components/ProductDetailOffer/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "preselectOffers",
+      "displayName": "Teklifleri Otomatik Seç",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "layout"
+    },
+    {
+      "name": "addToCartTogetherText",
+      "displayName": "Birlikte Sepete Ekle Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Birlikte Sepete Ekle",
+      "groupId": "texts"
+    },
+    {
+      "name": "addingToCartText",
+      "displayName": "Ekleniyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Ekleniyor...",
+      "groupId": "texts"
+    },
+    {
+      "name": "offerInfoText",
+      "displayName": "Teklif Bilgi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Seçtiğiniz ürünleri birlikte sepete ekleyerek indirimden yararlanın.",
+      "groupId": "texts"
+    },
+    {
+      "name": "totalText",
+      "displayName": "Toplam Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Toplam",
+      "groupId": "texts"
+    },
+    {
+      "name": "advantageousTotalText",
+      "displayName": "Avantajlı Toplam Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Avantajlı Toplam",
+      "groupId": "texts"
+    },
+    {
+      "name": "outOfStockText",
+      "displayName": "Tükendi Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Tükendi",
+      "groupId": "texts"
+    },
+    {
+      "name": "imageAspectRatio",
+      "displayName": "Görsel En-Boy Oranı",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "image",
+      "enumTypeId": "s3OODUmZpJ"
+    },
+    {
+      "name": "imageObjectFit",
+      "displayName": "Görsel Sığdırma",
+      "type": "ENUM",
+      "required": false,
+      "groupId": "image",
+      "enumTypeId": "GrylMqHxui"
+    },
+    {
+      "name": "addedToCartBannerText",
+      "displayName": "Sepete Eklenmiş Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete eklenmiş",
+      "groupId": "texts"
+    },
+    {
+      "name": "compactView",
+      "displayName": "Kompakt Görünüm",
+      "type": "BOOLEAN",
+      "required": false,
+      "groupId": "layout"
+    },
+    {
+      "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": "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"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Kullanıcıya görünen tüm metin içerikleri"
+    },
+    {
+      "id": "layout",
+      "name": "Düzen",
+      "description": "Bileşen düzen ve davranış ayarları"
+    },
+    {
+      "id": "image",
+      "name": "Görsel",
+      "description": "Görsel boyut ve sığdırma ayarları"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm Ayarları",
+      "description": "Bileşenin mobil ve masaüstü 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ı"
+        }
+      ]
+    }
+  ]
+}