@ikas/component-cli 0.103.0 → 0.105.0

package/templates/create-full/src/components/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/templates/create-full/src/components/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/templates/create-full/src/components/ProductDetailOffer/index.tsx

@@ -0,0 +1,199 @@
+import {
+  getDefaultSrc,
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantMainImage,
+  getSelectedProductVariant,
+  acceptProductOffer,
+  rejectProductOffer,
+} from "@ikas/bp-storefront";
+import { useEffect } from "preact/hooks";
+import { cx } from "../../utils/cx";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import { Props } from "./types";
+import OfferCard from "./components/OfferCard";
+import OfferSummary from "./components/OfferSummary";
+import { NoProductSVG } from "../../sub-components/icons";
+
+export function ProductDetailOffer({
+  product,
+  compactView = false,
+  preselectOffers = false,
+  addToCartTogetherText = "Birlikte Sepete Ekle",
+  addingToCartText = "Ekleniyor...",
+  offerInfoText = "Seçtiğiniz ürünleri birlikte sepete ekleyerek indirimden yararlanın.",
+  totalText = "Toplam",
+  advantageousTotalText = "Avantajlı Toplam",
+  outOfStockText = "Tükendi",
+  imageAspectRatio,
+  imageObjectFit,
+  addedToCartBannerText = "Sepete eklenmiş",
+  errorMessage = "Ürün sepete eklenemedi",
+  optionSetErrorMessage = "Lütfen gerekli seçenekleri doldurun",
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+}: Props) {
+  useEffect(() => {
+    product?.offers?.forEach((offer) => {
+      if (preselectOffers) {
+        acceptProductOffer(offer);
+      } else {
+        rejectProductOffer(offer);
+      }
+    });
+  }, [preselectOffers]);
+
+  if (!product?.offers?.length) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const appliedCampaign = product.appliedCampaignOffer;
+
+  const mainImage = getProductVariantMainImage(selectedVariant);
+  const mainMedia = mainImage?.image;
+  const mainImageSrc = mainMedia ? getDefaultSrc(mainMedia) : undefined;
+  const mainPrice = getProductVariantFormattedFinalPrice(selectedVariant);
+
+  // Resolve image styles
+  const resolvedAspectRatio = resolveAspectRatio(imageAspectRatio);
+  const resolvedObjectFit = resolveObjectFit(imageObjectFit);
+
+  const isInline = compactView;
+
+  const mainImageStyle = {
+    aspectRatio: resolvedAspectRatio,
+    objectFit: resolvedObjectFit,
+  };
+
+  const summaryPanel = (
+    <OfferSummary
+      product={product}
+      offerInfoText={offerInfoText}
+      totalText={totalText}
+      advantageousTotalText={advantageousTotalText}
+      isInline={isInline}
+      addingToCartText={addingToCartText}
+      addToCartTogetherText={addToCartTogetherText}
+      errorMessage={errorMessage}
+      optionSetErrorMessage={optionSetErrorMessage}
+    />
+  );
+
+  return (
+    <div
+      className={cx("kombos-pd-offer", isInline && "kombos-pd-offer--inline")}
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      {/* Campaign header */}
+      {appliedCampaign &&
+        (appliedCampaign.title || appliedCampaign.description) && (
+          <div className="kombos-pd-offer__header">
+            {appliedCampaign.title && (
+              <span className="kombos-pd-offer__title text-md-semibold md:text-lg-semibold">
+                {appliedCampaign.title}
+              </span>
+            )}
+            {appliedCampaign.description && (
+              <span className="kombos-pd-offer__desc text-sm-regular">
+                {appliedCampaign.description}
+              </span>
+            )}
+          </div>
+        )}
+
+      {/* Grid wrapper for standalone mode */}
+      {!isInline ? (
+        <div className="kombos-pd-offer__grid">
+          {/* Cards area: main product + offers in 2-col grid */}
+          <div className="kombos-pd-offer__cards">
+            {/* Main product card */}
+            <div className="kombos-pd-offer__main-product">
+              <div className="kombos-pd-offer__main-content">
+                {mainMedia?.isVideo ? (
+                  <video
+                    src={mainImageSrc}
+                    className="kombos-pd-offer__main-image"
+                    style={mainImageStyle}
+                    muted
+                    loop
+                    autoPlay
+                    playsInline
+                  >
+                    <track kind="captions" />
+                  </video>
+                ) : mainImageSrc ? (
+                  <img
+                    className="kombos-pd-offer__main-image"
+                    src={mainImageSrc}
+                    alt={product.name}
+                    loading="lazy"
+                    style={mainImageStyle}
+                  />
+                ) : (
+                  <div
+                    className="kombos-pd-offer__main-image kombos-pd-offer__main-image--placeholder"
+                    style={mainImageStyle}
+                  >
+                    <NoProductSVG />
+                  </div>
+                )}
+                <div className="kombos-pd-offer__main-body">
+                  <span className="kombos-pd-offer__main-name text-sm-medium">
+                    {product.name}
+                  </span>
+                  <span className="kombos-pd-offer__main-price text-sm-semibold">
+                    {mainPrice}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Offer cards */}
+            {product.offers.map((offer) => (
+              <OfferCard
+                key={offer.campaignOfferProductId}
+                offer={offer}
+                outOfStockText={outOfStockText}
+                addedToCartBannerText={addedToCartBannerText}
+                imageAspectRatio={resolvedAspectRatio}
+                imageObjectFit={resolvedObjectFit}
+              />
+            ))}
+          </div>
+
+          {/* Summary panel */}
+          {summaryPanel}
+        </div>
+      ) : (
+        <>
+          {/* Inline mode: vertical stack, no main product, no button */}
+          <div className="kombos-pd-offer__list">
+            {product.offers.map((offer) => (
+              <OfferCard
+                key={offer.campaignOfferProductId}
+                offer={offer}
+                outOfStockText={outOfStockText}
+                addedToCartBannerText={addedToCartBannerText}
+                imageAspectRatio={resolvedAspectRatio}
+                imageObjectFit={resolvedObjectFit}
+              />
+            ))}
+          </div>
+
+          {/* Summary (no button in inline mode) */}
+          {summaryPanel}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailOffer;