@ikas/component-cli 0.92.0 → 0.94.0

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

@@ -0,0 +1,205 @@
+import { useState, useEffect, useRef } from "preact/hooks";
+import type { IkasCustomerReviewList } from "@ikas/bp-storefront";
+import {
+  customerStore,
+  getProductCustomerReviews,
+  getCustomerReviewListPageCount,
+  hasCustomerReviewListPrevPage,
+  hasCustomerReviewListNextPage,
+  getCustomerReviewListPage,
+  isCustomerReviewEnabled,
+  isCustomerReviewLoginRequired,
+  hasCustomer,
+  Router,
+  getIkasProductCustomerReviewForm,
+  clearIkasProductCustomerReviewForm,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import Pagination from "../../sub-components/Pagination";
+import Button from "../../sub-components/Button";
+import Modal from "../../sub-components/Modal";
+import ImagePreviewModal from "../../sub-components/ImagePreviewModal";
+import ReviewSummary from "../../sub-components/ReviewSummary";
+import ReviewCard from "../../sub-components/ReviewCard";
+import ReviewForm from "../../sub-components/ReviewForm";
+import PageLoader from "../../sub-components/PageLoader";
+
+export function ProductDetailReviews({
+  product,
+  reviewsPerPage = 5,
+  sectionTitle = "Customer Reviews",
+  writeReviewButtonText = "Write a Review",
+  emptyStateText = "No reviews yet. Be the first to review this product!",
+  reviewCountText = "Based on {count} reviews",
+  submitButtonText = "Submit Review",
+  submittingButtonText = "Submitting...",
+  titlePlaceholder = "Review title",
+  commentPlaceholder = "Write your review...",
+  merchantReplyLabel = "Store Reply",
+  starRequiredError = "Please select a rating",
+  cancelButtonText = "Cancel",
+  errorMessage = "Something went wrong. Please try again.",
+}: Props) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const [reviewList, setReviewList] = useState<IkasCustomerReviewList | null>(
+    null,
+  );
+  const [formVisible, setFormVisible] = useState(false);
+  const [previewImage, setPreviewImage] = useState<{
+    src: string;
+    alt: string;
+  } | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!product) return;
+
+    setIsLoading(true);
+
+    getProductCustomerReviews(product, reviewsPerPage)
+      .then((result) => {
+        setReviewList(result);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [product, reviewsPerPage]);
+
+  if (!product) return null;
+
+  const reviewsEnabled = isCustomerReviewEnabled(product);
+  const hasReviews = reviewList && reviewList.data.length > 0;
+  const hasSummary =
+    product.averageRating !== null && product.reviewCount !== null;
+
+  const handleWriteReview = () => {
+    if (isCustomerReviewLoginRequired(product) && !hasCustomer(customerStore)) {
+      Router.navigateToPage("LOGIN");
+      return;
+    }
+
+    setFormVisible(true);
+  };
+
+  const handlePageChange = async (page: number) => {
+    if (!reviewList) return;
+
+    await getCustomerReviewListPage(reviewList, page);
+    listRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  const reviewForm = getIkasProductCustomerReviewForm(product);
+
+  const handleCloseForm = () => {
+    clearIkasProductCustomerReviewForm(product);
+    setFormVisible(false);
+  };
+
+  const handleReviewSuccess = () => {
+    getProductCustomerReviews(product, reviewsPerPage).then(setReviewList);
+    handleCloseForm();
+  };
+
+  return (
+    <section className="product-detail-reviews">
+      <div className="kombos-container product-detail-reviews__inner">
+        <div className="product-detail-reviews__header">
+          <h2 className="product-detail-reviews__title display-xs-semibold">
+            {sectionTitle}
+          </h2>
+          {reviewsEnabled && !hasSummary && (
+            <Button variant="secondary" size="s" onClick={handleWriteReview}>
+              {writeReviewButtonText}
+            </Button>
+          )}
+        </div>
+
+        {hasSummary && (
+          <ReviewSummary
+            averageStar={product.averageRating!}
+            totalReview={product.reviewCount!}
+            stars={product.stars ?? []}
+            reviewCountText={reviewCountText}
+            action={
+              reviewsEnabled ? (
+                <Button
+                  variant="secondary"
+                  size="s"
+                  onClick={handleWriteReview}
+                >
+                  {writeReviewButtonText}
+                </Button>
+              ) : undefined
+            }
+          />
+        )}
+
+        {isLoading && <PageLoader />}
+
+        {!hasReviews && !isLoading && reviewList && (
+          <p className="product-detail-reviews__empty text-md-regular">
+            {emptyStateText}
+          </p>
+        )}
+
+        {hasReviews && !isLoading && (
+          <>
+            <div ref={listRef} className="product-detail-reviews__list">
+              {reviewList?.data.map((review) => (
+                <ReviewCard
+                  key={review.id}
+                  review={review}
+                  merchantReplyLabel={merchantReplyLabel}
+                  onImageClick={(src, alt) => setPreviewImage({ src, alt })}
+                />
+              ))}
+            </div>
+
+            <Pagination
+              currentPage={reviewList.page}
+              totalPages={getCustomerReviewListPageCount(reviewList!)}
+              hasPrev={hasCustomerReviewListPrevPage(reviewList!)}
+              hasNext={hasCustomerReviewListNextPage(reviewList!)}
+              onPageChange={handlePageChange}
+            />
+          </>
+        )}
+      </div>
+
+      {formVisible && (
+        <Modal
+          title={writeReviewButtonText}
+          onClose={handleCloseForm}
+          okText={
+            reviewForm.isSubmitting ? submittingButtonText : submitButtonText
+          }
+          cancelText={cancelButtonText}
+          okButtonProps={{
+            type: "submit",
+            form: "review-form",
+            disabled: reviewForm.isSubmitting,
+          }}
+        >
+          <ReviewForm
+            product={product}
+            onSuccess={handleReviewSuccess}
+            titlePlaceholder={titlePlaceholder}
+            commentPlaceholder={commentPlaceholder}
+            starRequiredError={starRequiredError}
+            errorMessage={errorMessage}
+          />
+        </Modal>
+      )}
+
+      {previewImage && (
+        <ImagePreviewModal
+          src={previewImage.src}
+          alt={previewImage.alt}
+          onClose={() => setPreviewImage(null)}
+        />
+      )}
+    </section>
+  );
+}
+
+export default ProductDetailReviews;

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

@@ -0,0 +1,43 @@
+.product-detail-reviews {
+  width: 100%;
+}
+
+.product-detail-reviews__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+@media (min-width: 768px) {
+  .product-detail-reviews__inner {
+    padding-top: 3.5rem;
+    padding-bottom: 3.5rem;
+  }
+}
+
+.product-detail-reviews__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.product-detail-reviews__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.product-detail-reviews__empty {
+  color: var(--kombos-gray-500);
+  text-align: center;
+  padding: 3rem 1rem;
+  margin: 0;
+}
+
+.product-detail-reviews__list {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,19 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProduct } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  reviewsPerPage?: number;
+  sectionTitle?: string;
+  writeReviewButtonText?: string;
+  emptyStateText?: string;
+  reviewCountText?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  titlePlaceholder?: string;
+  commentPlaceholder?: string;
+  merchantReplyLabel?: string;
+  starRequiredError?: string;
+  cancelButtonText?: string;
+  errorMessage?: string;
+}

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

@@ -0,0 +1,38 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  getSelectedProductVariant,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function ProductDetailSku({
+  product,
+  productCodeLabel = "Ürün Kodu:",
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+}: Props) {
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+  const sku = selectedVariant?.sku;
+
+  if (!sku) return null;
+
+  return (
+    <p
+      className="kombos-pd-sku__text text-sm-medium"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      {productCodeLabel} {sku}
+    </p>
+  );
+}
+
+export default ProductDetailSku;

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

@@ -0,0 +1,16 @@
+/* ===== ProductDetailSKU ===== */
+
+.kombos-pd-sku__text {
+  margin: 0;
+  color: var(--kombos-gray-600);
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-sku__text {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

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

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

@@ -0,0 +1,38 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import VariantBadge from "../../sub-components/VariantBadge";
+
+export function ProductDetailVariant({
+  product,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+  useVariantImages,
+}: Props) {
+  if (!product) return null;
+
+  return (
+    <div
+      className="kombos-pd-variant"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      <VariantBadge
+        product={product}
+        size="l"
+        showLabels
+        useVariantImages={useVariantImages}
+      />
+    </div>
+  );
+}
+
+export default ProductDetailVariant;

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

@@ -0,0 +1,14 @@
+/* ===== ProductDetailVariant ===== */
+
+.kombos-pd-variant {
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-variant {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

@@ -0,0 +1,12 @@
+// 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;
+  /** Renk varyantı için ürün görsellerini kullan. */
+  useVariantImages?: boolean;
+}

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

@@ -0,0 +1,151 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "preact/hooks";
+import {
+  getProductOptionSet,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import ProductCard from "../../sub-components/ProductCard";
+import SliderArrow from "../../sub-components/SliderArrow";
+import { Props } from "./types";
+
+const COLUMNS_MAP: Record<string, number> = {
+  One: 1,
+  Two: 2,
+  Three: 3,
+  Four: 4,
+  Five: 5,
+};
+
+export function ProductSlider(props: Props) {
+  const {
+    productList,
+    title,
+    addToCartText = "Sepete Ekle",
+    addedToCartText = "Sepete Eklendi",
+    outOfStockText = "Tükendi",
+    goToProductText = "Ürüne Git",
+    desktopColumns,
+    aspectRatio,
+    objectFit,
+    hideAddToCartButton,
+    components,
+  } = props;
+
+  const cols = COLUMNS_MAP[desktopColumns ?? ""] ?? 4;
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    setCanScrollLeft(track.scrollLeft > 1);
+    setCanScrollRight(
+      track.scrollLeft + track.clientWidth < track.scrollWidth - 1,
+    );
+  }, []);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    track.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState);
+    const ro = new ResizeObserver(updateScrollState);
+    ro.observe(track);
+    return () => {
+      track.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+      ro.disconnect();
+    };
+  }, [updateScrollState]);
+
+  const products = productList?.data ?? [];
+
+  useEffect(() => {
+    products.forEach((p) => {
+      if (!p.productOptionSet) getProductOptionSet(p);
+    });
+  }, [products.length]);
+
+  const productCardSizes = useMemo(() => {
+    const desktopGaps = (cols - 1) * 24;
+    return `(max-width: 767px) calc((100vw - 48px) / 2), (max-width: 1023px) calc((100vw - 80px) / 2), calc((100vw - ${144 + desktopGaps}px) / ${cols})`;
+  }, [cols]);
+
+  if (!productList) return null;
+
+  const scroll = (direction: "left" | "right") => {
+    const el = trackRef.current;
+    if (!el) return;
+    const amount = direction === "left" ? -el.clientWidth : el.clientWidth;
+    el.scrollBy({ left: amount, behavior: "smooth" });
+  };
+
+  return (
+    <section className="kombos-product-slider">
+      <div className="kombos-product-slider__wrapper kombos-container">
+        {title && (
+          <h2 className="kombos-product-slider__title display-xs-medium md:display-sm-medium">
+            {title}
+          </h2>
+        )}
+
+        <div className="kombos-product-slider__slider">
+          <SliderArrow
+            direction="left"
+            className="kombos-product-slider__arrow kombos-product-slider__arrow--left"
+            onClick={() => scroll("left")}
+            disabled={!canScrollLeft}
+          />
+
+          <div
+            className="kombos-product-slider__track"
+            ref={trackRef}
+            style={{ "--columns": cols }}
+          >
+            {products.map((product, index) => (
+              <div key={product.id} className="kombos-product-slider__card">
+                <ProductCard
+                  product={product}
+                  addToCartText={addToCartText}
+                  addedToCartText={addedToCartText}
+                  outOfStockText={outOfStockText}
+                  goToProductText={goToProductText}
+                  aspectRatio={aspectRatio}
+                  objectFit={objectFit}
+                  sizes={productCardSizes}
+                  hideAddToCartButton={hideAddToCartButton}
+                  priority={index < 4}
+                />
+                <IkasComponentRenderer
+                  id={`product-slider-product-${product.id}`}
+                  components={components}
+                  parentProps={props}
+                  map={{
+                    product,
+                  }}
+                  className="kombos-product-slider__card-content"
+                />
+              </div>
+            ))}
+          </div>
+
+          <SliderArrow
+            direction="right"
+            className="kombos-product-slider__arrow kombos-product-slider__arrow--right"
+            onClick={() => scroll("right")}
+            disabled={!canScrollRight}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ProductSlider;

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

@@ -0,0 +1,105 @@
+/* ===== Product Slider Section ===== */
+.kombos-product-slider {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kombos-product-slider__wrapper {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-product-slider__title {
+  color: var(--kombos-gray-900);
+}
+
+/* Slider wrapper */
+.kombos-product-slider__slider {
+  position: relative;
+  overflow: hidden;
+}
+
+/* Scrollable track */
+.kombos-product-slider__track {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.kombos-product-slider__track::-webkit-scrollbar {
+  display: none;
+}
+
+/* Card sizing — mobile: 2 columns, desktop: driven by --columns */
+.kombos-product-slider__card {
+  flex: 0 0 calc((100% - 1rem) / 2);
+  min-width: 0;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-product-slider__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Navigation arrows */
+.kombos-product-slider__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: var(--kombos-z-dropdown);
+}
+
+.kombos-product-slider__arrow--left {
+  left: 0.5rem;
+}
+
+.kombos-product-slider__arrow--right {
+  right: 0.5rem;
+}
+
+/* ===== Tablet (>=768px) ===== */
+@media (min-width: 768px) {
+  .kombos-product-slider__wrapper {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-product-slider__wrapper {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    gap: 2rem;
+  }
+
+  .kombos-product-slider__track {
+    gap: 1.5rem;
+  }
+
+  .kombos-product-slider__card {
+    flex: 0 0 calc((100% - (var(--columns) - 1) * 1.5rem) / var(--columns));
+  }
+
+  .kombos-product-slider__arrow--left {
+    left: 1rem;
+  }
+
+  .kombos-product-slider__arrow--right {
+    right: 1rem;
+  }
+}

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

@@ -0,0 +1,17 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProductList } from "@ikas/bp-storefront";
+import type { AspectRatio, NumberOfColumns, ObjectFit } from "../../global-types";
+
+export interface Props {
+  productList: IkasProductList;
+  title?: string;
+  addToCartText?: string;
+  addedToCartText?: string;
+  outOfStockText?: string;
+  goToProductText?: string;
+  desktopColumns?: NumberOfColumns;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+  hideAddToCartButton?: boolean;
+  components?: any;
+}