@ikas/component-cli 0.93.0 → 0.94.0

package/templates/create-full/src/components/ProductDetail/components/ProductGallery/styles.css

@@ -0,0 +1,213 @@
+/* ---- Gallery ---- */
+.kombos-pd__gallery {
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-pd__thumbs {
+  display: none;
+}
+
+.kombos-pd__main-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-pd__main-image-wrap {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.kombos-pd__track {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  cursor: grab;
+  user-select: none;
+}
+
+.kombos-pd__track::-webkit-scrollbar {
+  display: none;
+}
+
+.kombos-pd__slide {
+  flex: 0 0 100%;
+  width: 100%;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.kombos-pd__main-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  -webkit-user-drag: none;
+  user-drag: none;
+  pointer-events: none;
+}
+
+.kombos-pd__main-video {
+  pointer-events: auto;
+  cursor: default;
+}
+
+.kombos-pd__thumb-video {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.kombos-pd__thumb-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: var(--kombos-white);
+  font-size: 0.75rem;
+}
+
+.kombos-pd__main-image--placeholder {
+  border: 1px solid var(--kombos-gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--kombos-gray-300);
+  font-size: 5rem;
+}
+
+/* Arrow buttons */
+.kombos-pd__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.kombos-pd__arrow--prev {
+  left: 1.25rem;
+}
+
+.kombos-pd__arrow--next {
+  right: 1.25rem;
+}
+
+/* Dots */
+.kombos-pd__dots {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+}
+
+.kombos-pd__dot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kombos-pd__dot::after {
+  content: "";
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 10px;
+  border: 1px solid var(--kombos-gray-100);
+  background: var(--kombos-white);
+  transition: all 0.15s;
+}
+
+.kombos-pd__dot--active::after {
+  width: 2rem;
+  background: var(--kombos-gray-900);
+  border-color: var(--kombos-gray-200);
+}
+
+/* ===== Tablet (>=768px) ===== */
+@media (min-width: 768px) {
+  .kombos-pd__gallery {
+    flex-direction: row;
+    gap: 1.25rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .kombos-pd__thumbs {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    flex-shrink: 0;
+    width: 7rem;
+    overflow-y: auto;
+    scrollbar-width: none;
+  }
+
+  .kombos-pd__thumbs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .kombos-pd__thumb {
+    width: 7rem;
+    flex-shrink: 0;
+    border-radius: 12px;
+    border: 1px solid var(--kombos-gray-200);
+    overflow: hidden;
+    cursor: pointer;
+    padding: 0.375rem;
+    background: var(--kombos-white);
+    transition: border-color 0.15s;
+  }
+
+  .kombos-pd__thumb:hover {
+    border-color: var(--kombos-gray-500);
+  }
+
+  .kombos-pd__thumb--active {
+    border-color: var(--kombos-gray-900);
+  }
+
+  .kombos-pd__thumb-img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    border-radius: 8px;
+  }
+
+  .kombos-pd__main-col {
+    align-self: flex-start;
+  }
+
+  .kombos-pd__main-image-wrap {
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .kombos-pd__main-image {
+    max-height: 45.75rem;
+    border-radius: 6px;
+  }
+
+}

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

@@ -0,0 +1,92 @@
+import {
+  getIkasCategoryPathItemHref,
+  getProductCategoryPath,
+  getProductVariantMainImage,
+  getSelectedProductVariant,
+  IkasImage,
+  isNotEmpty,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import Breadcrumb from "../../sub-components/Breadcrumb";
+import type { BreadcrumbItem } from "../../sub-components/Breadcrumb";
+import ProductGallery from "./components/ProductGallery";
+
+export function ProductDetail(props: Props) {
+  const {
+    product,
+    components,
+    aspectRatio,
+    objectFit,
+    bottomComponents,
+    homepageText = "Anasayfa",
+  } = props;
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const mainProductImage = getProductVariantMainImage(selectedVariant);
+  const mainImage = mainProductImage?.image;
+  const variantImages = selectedVariant?.images;
+  const images: IkasImage[] = variantImages?.length
+    ? variantImages
+        .map((pi: any) => pi.image)
+        .filter((img: any): img is IkasImage => img != null)
+    : mainImage
+      ? [mainImage]
+      : [];
+
+  const categoryPath = getProductCategoryPath(product);
+
+  return (
+    <section className="kombos-pd">
+      <div className="kombos-container kombos-pd__container">
+        <Breadcrumb
+          items={[
+            { label: homepageText, href: "/" } as BreadcrumbItem,
+            ...(isNotEmpty(categoryPath)
+              ? categoryPath.map(
+                  (pathItem: any) =>
+                    ({
+                      label: pathItem.name,
+                      href: getIkasCategoryPathItemHref(pathItem),
+                    }) as BreadcrumbItem,
+                )
+              : []),
+            { label: product.name } as BreadcrumbItem,
+          ]}
+          size="xs"
+          className="kombos-pd__breadcrumb"
+        />
+
+        <div className="kombos-pd__layout">
+          <ProductGallery
+            images={images}
+            productName={product.name}
+            aspectRatio={aspectRatio}
+            objectFit={objectFit}
+          />
+
+          <div className="kombos-pd__info">
+            <IkasComponentRenderer
+              id="product-detail-info"
+              components={components}
+              parentProps={props}
+            />
+          </div>
+        </div>
+
+        {bottomComponents && (
+          <div className="kombos-pd__bottom">
+            <IkasComponentRenderer
+              id="product-detail-bottom"
+              components={bottomComponents}
+              parentProps={props}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default ProductDetail;

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

@@ -0,0 +1,58 @@
+/* ===== Product Detail Section ===== */
+
+.kombos-pd {
+  width: 100%;
+}
+
+/* ---- Breadcrumb (mobile only, hidden on desktop) ---- */
+.kombos-pd__breadcrumb {
+  padding-top: 1rem;
+}
+
+/* ---- Layout ---- */
+.kombos-pd__layout {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+}
+
+/* ---- Product Info ---- */
+.kombos-pd__info {
+  display: flex;
+  flex-direction: column;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd__container {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .kombos-pd__breadcrumb {
+    padding-top: 0;
+    padding-bottom: 1.5rem;
+  }
+
+  .kombos-pd__layout {
+    display: grid;
+    grid-template-columns: 7fr 5fr;
+    gap: 2rem;
+    padding-top: 0;
+  }
+
+  /* Gallery — sticky on desktop */
+  .kombos-pd__gallery {
+    position: sticky;
+    top: 0.75rem;
+    align-self: start;
+  }
+
+  /* Info — right side */
+  .kombos-pd__info {
+    min-width: 0;
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,12 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProduct } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  components?: any;
+  bottomComponents?: any;
+  homepageText?: string;
+}

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

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

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

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

@@ -0,0 +1,146 @@
+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 = "Sepete Ekle",
+  addingToCartText = "Ekleniyor...",
+  outOfStockText = "Tükendi",
+  errorMessage = "Ürün sepete eklenemedi",
+  optionSetErrorMessage = "Lütfen gerekli seçenekleri doldurun",
+  updateCartButtonText = "Güncelle",
+  updatingCartText = "Güncelleniyor...",
+  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

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

@@ -0,0 +1,18 @@
+// 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;
+}