@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/src/components/ProductDetailAddToCart/components/PayWithIkas/index.tsx

@@ -1,34 +0,0 @@
-import { IkasProduct } from "@ikas/bp-storefront";
-import { usePayWithIkas } from "../../../../hooks/usePayWithIkas";
-
-interface Props {
-  product: IkasProduct;
-  quantity: number;
-  isEnabled: boolean;
-  payWithIkasUrl: string;
-}
-
-export default function PayWithIkas({
-  product,
-  quantity,
-  isEnabled,
-  payWithIkasUrl,
-}: Props) {
-  const { iframeRef, iframeSrc, iframeHeight } = usePayWithIkas({
-    product,
-    quantity,
-    isEnabled,
-    payWithIkasUrl,
-  });
-
-  return (
-    <iframe
-      ref={iframeRef}
-      className="kombos-pd-atc__ikas-pay"
-      title="Pay with ikas"
-      src={iframeSrc}
-      width="100%"
-      height={iframeHeight}
-    />
-  );
-}

package/templates/create-full/src/components/ProductDetailAddToCart/components/PayWithIkas/styles.css

@@ -1,4 +0,0 @@
-.kombos-pd-atc__ikas-pay {
-  display: block;
-  border: none;
-}

package/templates/create-full/src/components/ProductDetailAddToCart/index.tsx

@@ -1,146 +0,0 @@
-import {
-  addItemToCart,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  getSelectedProductVariant,
-  hasProductStock,
-  hasProductVariantStock,
-  isAddToCartEnabled,
-  initProductOptionSetValues,
-  IkasBundleSettings,
-  IkasStorefrontConfig,
-} from "@ikas/bp-storefront";
-import { useState } from "preact/hooks";
-import { Props } from "./types";
-import Button from "../../sub-components/Button";
-import QuantitySelector from "../../sub-components/QuantitySelector";
-import PayWithIkas from "./components/PayWithIkas";
-import { isBundleOutOfStock } from "../../utils/bundle";
-import { validateOptionSet } from "../../utils/optionSet";
-import { showToast } from "../../utils/toast";
-
-export function ProductDetailAddToCart({
-  product,
-  addToCartButtonText = "Add to Cart",
-  addingToCartText = "Adding...",
-  outOfStockText = "Sold Out",
-  errorMessage = "Failed to add product to cart",
-  optionSetErrorMessage = "Please fill in the required options",
-  updateCartButtonText = "Update",
-  updatingCartText = "Updating...",
-  hideQuantityInput = false,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  const [quantity, setQuantity] = useState(1);
-  const [isAddingToCart, setIsAddingToCart] = useState(false);
-
-  if (!product) return null;
-
-  const editLineID =
-    typeof window !== "undefined"
-      ? new URLSearchParams(window.location.search).get("editLineID")
-      : null;
-  const isEditMode = !!editLineID;
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const bundleSettings = selectedVariant?.bundleSettings as
-    | IkasBundleSettings
-    | undefined;
-  const isBundle = !!bundleSettings;
-
-  const isEnabled = isAddToCartEnabled(product);
-
-  const isOutOfStock = isBundle
-    ? isBundleOutOfStock(bundleSettings) || !isEnabled
-    : !hasProductStock(product) || !hasProductVariantStock(selectedVariant);
-
-  const isDisabled = isOutOfStock || isAddingToCart;
-
-  const payWithIkasUrl = IkasStorefrontConfig.getPayWithIkasUrl();
-  const routing = IkasStorefrontConfig.getCurrentRouting();
-  const showPayWithIkas =
-    !isOutOfStock &&
-    !!payWithIkasUrl &&
-    routing?.locale === "tr" &&
-    routing?.currencyCode === "TRY";
-
-  const handleAddToCart = async () => {
-    if (isDisabled) return;
-
-    if (!validateOptionSet(product.productOptionSet, optionSetErrorMessage))
-      return;
-
-    if (!isAddToCartEnabled(product)) {
-      showToast(errorMessage, "error");
-      return;
-    }
-
-    setIsAddingToCart(true);
-    try {
-      const result = await addItemToCart(selectedVariant, product, quantity);
-
-      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 {
-      setIsAddingToCart(false);
-    }
-  };
-
-  const getButtonText = () => {
-    if (isEditMode) {
-      if (isAddingToCart) return updatingCartText;
-      if (isOutOfStock) return outOfStockText;
-      return updateCartButtonText;
-    }
-    if (isAddingToCart) return addingToCartText;
-    if (isOutOfStock) return outOfStockText;
-    return addToCartButtonText;
-  };
-
-  return (
-    <div
-      className="kombos-pd-atc"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <div className="kombos-pd-atc__actions">
-        {!hideQuantityInput && !isOutOfStock && (
-          <QuantitySelector value={quantity} onChange={setQuantity} />
-        )}
-        <Button
-          variant="primary"
-          size="s"
-          className="kombos-pd-atc__btn"
-          disabled={isDisabled}
-          onClick={handleAddToCart}
-        >
-          {getButtonText()}
-        </Button>
-      </div>
-      {showPayWithIkas && (
-        <PayWithIkas
-          product={product}
-          quantity={quantity}
-          isEnabled={isEnabled}
-          payWithIkasUrl={payWithIkasUrl!}
-        />
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailAddToCart;

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

@@ -1,27 +0,0 @@
-/* ===== ProductDetailAddToCart ===== */
-
-.kombos-pd-atc {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-atc__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.kombos-pd-atc__btn {
-  flex: 1;
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-atc {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

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

@@ -1,18 +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;
-  addToCartButtonText?: string;
-  addingToCartText?: string;
-  outOfStockText?: string;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  hideQuantityInput?: boolean;
-  errorMessage?: string;
-  optionSetErrorMessage?: string;
-  updateCartButtonText?: string;
-  updatingCartText?: string;
-}

package/templates/create-full/src/components/ProductDetailBundleFurniture/components/BundleFurnitureRow/index.tsx

@@ -1,164 +0,0 @@
-import {
-  IkasBundleProduct,
-  getSelectedProductVariant,
-  shouldDisplayBundleProductPrice,
-  getBundleProductFormattedFinalPrice,
-  getBundleProductFormattedFinalPriceWithQuantity,
-  getBundleProductFormattedSellPrice,
-  getBundleProductFormattedSellPriceWithQuantity,
-  getBundleProductFinalPrice,
-  getBundleProductSellPrice,
-  getBundleProductFinalPriceWithQuantity,
-  getBundleProductSellPriceWithQuantity,
-  hasProductVariantStock,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import type { AspectRatio, ObjectFit } from "../../../../global-types";
-import VariantBadge from "../../../../sub-components/VariantBadge";
-import BundleQuantityBox from "../../../../sub-components/BundleQuantityBox";
-import BundleMedia from "../../../../sub-components/BundleMedia";
-import { adjustBundleProductQuantity } from "../../../../utils/bundle";
-
-export interface BundleFurnitureRowTexts {
-  outOfStockText: string;
-}
-
-interface PriceCellProps {
-  formattedFinalPrice: string;
-  formattedSellPrice: string;
-  hasDiscount: boolean;
-  finalTypography: string;
-}
-
-function PriceCell({
-  formattedFinalPrice,
-  formattedSellPrice,
-  hasDiscount,
-  finalTypography,
-}: PriceCellProps) {
-  return (
-    <div className="kombos-bundle-furniture__price-col">
-      <span className={finalTypography}>{formattedFinalPrice}</span>
-      {hasDiscount && (
-        <span className="kombos-bundle-furniture__old-price text-sm-regular-strike">
-          {formattedSellPrice}
-        </span>
-      )}
-    </div>
-  );
-}
-
-interface Props {
-  bundleProduct: IkasBundleProduct;
-  texts: BundleFurnitureRowTexts;
-  showFeatures: boolean;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}
-
-const BundleFurnitureRow = observer(function BundleFurnitureRow({
-  bundleProduct,
-  texts,
-  showFeatures,
-  aspectRatio = "Square",
-  objectFit = "Cover",
-}: Props) {
-  const product = bundleProduct.product;
-  if (!product) return null;
-
-  const selectedVariant = getSelectedProductVariant(product);
-  const hasStock = selectedVariant
-    ? hasProductVariantStock(selectedVariant)
-    : false;
-  const showPrice = shouldDisplayBundleProductPrice(bundleProduct);
-
-  const unitFinalPrice = getBundleProductFinalPrice(bundleProduct);
-  const unitSellPrice = getBundleProductSellPrice(bundleProduct);
-  const hasUnitDiscount = showPrice && unitFinalPrice !== unitSellPrice;
-
-  const totalFinalPrice = getBundleProductFinalPriceWithQuantity(bundleProduct);
-  const totalSellPrice = getBundleProductSellPriceWithQuantity(bundleProduct);
-  const hasTotalDiscount =
-    showPrice &&
-    totalFinalPrice !== totalSellPrice &&
-    bundleProduct.quantity > 0;
-
-  const showTotalPrice = showPrice && bundleProduct.quantity > 0;
-
-  return (
-    <tr className="kombos-bundle-furniture__row">
-      {/* Parts: image + name */}
-      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--parts">
-        <div className="kombos-bundle-furniture__part-info">
-          <BundleMedia
-            variant={selectedVariant}
-            alt=""
-            aspectRatio={aspectRatio}
-            objectFit={objectFit}
-            wrapperClassName="kombos-bundle-furniture__thumb"
-            mediaClassName="kombos-bundle-furniture__thumb-img"
-            placeholderClassName="kombos-bundle-furniture__thumb-placeholder"
-          />
-          <span className="kombos-bundle-furniture__part-name text-sm-medium">
-            {product.name}
-          </span>
-        </div>
-      </td>
-
-      {/* Unit Price */}
-      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--price">
-        {showPrice ? (
-          <PriceCell
-            formattedFinalPrice={getBundleProductFormattedFinalPrice(
-              bundleProduct,
-            )}
-            formattedSellPrice={getBundleProductFormattedSellPrice(
-              bundleProduct,
-            )}
-            hasDiscount={hasUnitDiscount}
-            finalTypography="text-sm-medium"
-          />
-        ) : (
-          <span className="text-sm-regular">-</span>
-        )}
-      </td>
-
-      {/* Quantity */}
-      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--qty">
-        <BundleQuantityBox bundleProduct={bundleProduct} />
-        {!hasStock && (
-          <span className="kombos-bundle-furniture__no-stock text-xs-medium">
-            {texts.outOfStockText}
-          </span>
-        )}
-      </td>
-
-      {/* Features (variants) */}
-      {showFeatures && (
-        <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--features">
-          <VariantBadge product={product} disableRoute size="xs" onSelect={() => adjustBundleProductQuantity(bundleProduct)} />
-        </td>
-      )}
-
-      {/* Total Price */}
-      <td className="kombos-bundle-furniture__cell kombos-bundle-furniture__cell--total">
-        {showTotalPrice ? (
-          <PriceCell
-            formattedFinalPrice={getBundleProductFormattedFinalPriceWithQuantity(
-              bundleProduct,
-            )}
-            formattedSellPrice={getBundleProductFormattedSellPriceWithQuantity(
-              bundleProduct,
-            )}
-            hasDiscount={hasTotalDiscount}
-            finalTypography="text-sm-semibold"
-          />
-        ) : (
-          <span className="text-sm-regular">-</span>
-        )}
-      </td>
-    </tr>
-  );
-});
-
-export default BundleFurnitureRow;

package/templates/create-full/src/components/ProductDetailBundleFurniture/components/BundleFurnitureSection/index.tsx

@@ -1,134 +0,0 @@
-import { useState } from "preact/hooks";
-import {
-  IkasBundleProduct,
-  IkasBundleSettings,
-  getDisplayedProductVariantTypes,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import type { AspectRatio, ObjectFit } from "../../../../global-types";
-import { cx } from "../../../../utils/cx";
-import BundleFurnitureRow from "../BundleFurnitureRow";
-
-interface Texts {
-  productContentTitle: string;
-  partsLabel: string;
-  unitPriceLabel: string;
-  quantityLabel: string;
-  featuresLabel: string;
-  totalPriceLabel: string;
-  outOfStockText: string;
-  addProductItemText: string;
-}
-
-interface Props {
-  bundleSettings: IkasBundleSettings;
-  isLoading: boolean;
-  texts: Texts;
-  aspectRatio?: AspectRatio;
-  objectFit?: ObjectFit;
-}
-
-function hasAnyVariants(products: IkasBundleProduct[]): boolean {
-  return products.some((bp) => {
-    if (!bp.product) return false;
-    return getDisplayedProductVariantTypes(bp.product).length > 0;
-  });
-}
-
-const COLUMN_HEADER_CLASS = "kombos-bundle-furniture__th text-sm-semibold";
-
-const BundleFurnitureSection = observer(function BundleFurnitureSection({
-  bundleSettings,
-  isLoading,
-  texts,
-  aspectRatio,
-  objectFit,
-}: Props) {
-  const [isExpanded, setIsExpanded] = useState(true);
-
-  const sortedProducts = [...bundleSettings.products].sort(
-    (a, b) => a.order - b.order,
-  );
-  const showFeatures = hasAnyVariants(sortedProducts);
-
-  return (
-    <div className="kombos-bundle-furniture" id="bundle-furniture-section">
-      {/* Collapsible header */}
-      <button
-        type="button"
-        className="kombos-bundle-furniture__toggle"
-        onClick={() => setIsExpanded((prev) => !prev)}
-        aria-expanded={isExpanded}
-      >
-        <span className="kombos-bundle-furniture__toggle-text text-sm-semibold">
-          {texts.productContentTitle}
-        </span>
-        <span
-          className={cx(
-            "kombos-bundle-furniture__toggle-icon",
-            isExpanded && "kombos-bundle-furniture__toggle-icon--open",
-          )}
-        />
-      </button>
-
-      {/* Table content */}
-      {isExpanded && (
-        <div className="kombos-bundle-furniture__body">
-          {isLoading ? (
-            <div className="kombos-bundle-furniture__loading">
-              <div className="kombos-bundle-furniture__spinner" />
-            </div>
-          ) : (
-            <div className="kombos-bundle-furniture__table-wrap">
-              <table className="kombos-bundle-furniture__table">
-                <colgroup>
-                  <col style={{ width: showFeatures ? "33.33%" : "40%" }} />
-                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
-                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
-                  {showFeatures && <col style={{ width: "16.67%" }} />}
-                  <col style={{ width: showFeatures ? "16.67%" : "20%" }} />
-                </colgroup>
-                <thead>
-                  <tr className="kombos-bundle-furniture__head-row">
-                    <th className={COLUMN_HEADER_CLASS}>{texts.partsLabel}</th>
-                    <th className={COLUMN_HEADER_CLASS}>
-                      {texts.unitPriceLabel}
-                    </th>
-                    <th className={COLUMN_HEADER_CLASS}>
-                      {texts.quantityLabel}
-                    </th>
-                    {showFeatures && (
-                      <th className={COLUMN_HEADER_CLASS}>
-                        {texts.featuresLabel}
-                      </th>
-                    )}
-                    <th
-                      className={COLUMN_HEADER_CLASS}
-                      style={{ textAlign: "right" }}
-                    >
-                      {texts.totalPriceLabel}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {sortedProducts.map((bp) => (
-                    <BundleFurnitureRow
-                      key={bp.id}
-                      bundleProduct={bp}
-                      texts={texts}
-                      showFeatures={showFeatures}
-                      aspectRatio={aspectRatio}
-                      objectFit={objectFit}
-                    />
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-});
-
-export default BundleFurnitureSection;