@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/src/components/ProductDetailNameFavorite/styles.css

@@ -1,45 +0,0 @@
-/* ===== ProductDetailNameFavorite ===== */
-
-.kombos-pd-name__row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-name__title {
-  flex: 1;
-  margin: 0;
-  color: var(--kombos-gray-900);
-}
-
-.kombos-pd-name__fav-btn {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 1.5rem;
-  color: var(--kombos-gray-700);
-  padding: 0;
-}
-
-.kombos-pd-name__fav-btn:hover {
-  color: var(--kombos-gray-900);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-name__row {
-    gap: 1.5rem;
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-
-}

package/templates/create-full/src/components/ProductDetailNameFavorite/types.ts

@@ -1,11 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  product?: IkasProduct | null;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  hideFavoriteButton?: boolean;
-}

package/templates/create-full/src/components/ProductDetailOffer/components/OfferCard/index.tsx

@@ -1,209 +0,0 @@
-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 = "Sold Out",
-  addedToCartBannerText = "Added to cart",
-  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/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;