@ikas/component-cli 0.102.0 → 0.103.0

package/templates/create-full/src/components/ProductDetailOffer/components/OfferCard/styles.css

@@ -1,146 +0,0 @@
-/* ===== 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

@@ -1,175 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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;