@ikas/component-cli 0.93.0 → 0.95.0

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

@@ -0,0 +1,20 @@
+/* ===== ProductDetailBundleProduct ===== */
+.kombos-bundle {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+.kombos-bundle__list {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+  .kombos-bundle {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

@@ -0,0 +1,18 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  isBundleFurniture?: boolean;
+  bundleProductWithoutLink?: boolean;
+  quantityLabel?: string;
+  outOfStockText?: string;
+  productContentTitle?: string;
+  aspectRatio?: AspectRatio;
+  objectFit?: ObjectFit;
+}

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

@@ -0,0 +1,56 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import CollapsibleGroup from "../../sub-components/CollapsibleGroup";
+import { Props } from "./types";
+
+export function ProductDetailDescription(props: Props) {
+  const {
+    product,
+    title = "Ürün Özellikleri",
+    defaultOpen = false,
+    mobileMarginTop,
+    mobileMarginBottom,
+    desktopMarginTop,
+    desktopMarginBottom,
+    components,
+  } = props;
+  if (!product) return null;
+
+  const hasDescription = !!product?.description;
+  const hasComponents = Array.isArray(components) && components.length > 0;
+
+  if (!hasDescription && !hasComponents) return null;
+
+  return (
+    <div
+      className="kombos-pd-desc"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      {hasDescription && (
+        <CollapsibleGroup title={title} defaultOpen={defaultOpen}>
+          <div
+            className="kombos-pd-desc__body text-sm-regular kombos-richtext"
+            dangerouslySetInnerHTML={{ __html: product.description }}
+          />
+        </CollapsibleGroup>
+      )}
+      {hasComponents && (
+        <IkasComponentRenderer
+          id="product-detail-description"
+          components={components}
+          parentProps={props}
+        />
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailDescription;

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

@@ -0,0 +1,21 @@
+/* ===== ProductDetailDescription ===== */
+
+.kombos-pd-desc {
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+  border-top: 1px solid var(--kombos-gray-200);
+}
+
+.kombos-pd-desc__body {
+  color: var(--kombos-gray-700);
+  max-height: 500px;
+  overflow: auto;
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-desc {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

@@ -0,0 +1,13 @@
+// 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;
+  title?: string;
+  defaultOpen?: boolean;
+  components?: any;
+}

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

@@ -0,0 +1,28 @@
+import { getDefaultSrc } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function ProductDetailFeatureItem({ image, text }: Props) {
+  const imageSrc = image ? getDefaultSrc(image) : null;
+  if (!imageSrc && !text) return null;
+
+  return (
+    <div className="product-detail-feature-item">
+      {imageSrc && (
+        <img
+          className="product-detail-feature-item__icon"
+          src={imageSrc}
+          alt={image?.altText || ""}
+          width={32}
+          height={32}
+        />
+      )}
+      {text && (
+        <p className="product-detail-feature-item__text text-sm-medium">
+          {text}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailFeatureItem;

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

@@ -0,0 +1,22 @@
+/* ===== ProductDetailFeatureItem ===== */
+
+.product-detail-feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.product-detail-feature-item__icon {
+  width: 2rem;
+  height: auto;
+  object-fit: contain;
+}
+
+.product-detail-feature-item__text {
+  color: var(--kombos-gray-900);
+  text-align: center;
+  margin: 0;
+  text-wrap-style: pretty;
+}

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

@@ -0,0 +1,7 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasImage } from "@ikas/bp-storefront";
+
+export interface Props {
+  image?: IkasImage | null;
+  text?: string;
+}

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

@@ -0,0 +1,40 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function ProductDetailFeatures(props: Props) {
+  const {
+    mobileMarginTop,
+    mobileMarginBottom,
+    desktopMarginTop,
+    desktopMarginBottom,
+    components,
+  } = props;
+
+  const count = components?.length ?? 0;
+  if (count === 0) return null;
+
+  return (
+    <div
+      className="kombos-pd-features"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+        "--columns": count,
+      }}
+    >
+      <IkasComponentRenderer
+        id="product-detail-features"
+        components={components}
+        parentProps={props}
+      />
+    </div>
+  );
+}
+
+export default ProductDetailFeatures;

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

@@ -0,0 +1,17 @@
+/* ===== ProductDetailFeatures ===== */
+
+.kombos-pd-features {
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  gap: 1rem;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-features {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

@@ -0,0 +1,10 @@
+// This file is auto-generated — do not edit manually.
+import type { MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+
+export interface Props {
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  components?: any;
+}

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

@@ -0,0 +1,66 @@
+import {
+  addIkasProductToFavorites,
+  customerStore,
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  hasCustomer,
+  isFavoriteIkasProduct,
+  removeIkasProductFromFavorites,
+  Router,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import { Heart2SVG, HeartFilledSVG } from "../../sub-components/icons";
+
+export function ProductDetailNameFavorite({
+  product,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+  hideFavoriteButton,
+}: Props) {
+  if (!product) return null;
+
+  const isFavorite = isFavoriteIkasProduct(product);
+
+  const handleToggleFavorite = async () => {
+    const isLoggedIn = hasCustomer(customerStore);
+
+    if (!isLoggedIn) {
+      Router.navigateToPage("LOGIN");
+      return;
+    }
+
+    if (isFavorite) {
+      await removeIkasProductFromFavorites(product);
+    } else {
+      await addIkasProductToFavorites(product);
+    }
+  };
+
+  return (
+    <div
+      className="kombos-pd-name__row"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      <h1 className="kombos-pd-name__title text-xl-medium lg:display-xs-medium">{product.name}</h1>
+      {!hideFavoriteButton && (
+        <button
+          type="button"
+          className="kombos-pd-name__fav-btn"
+          onClick={handleToggleFavorite}
+          aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+        >
+          {isFavorite ? <HeartFilledSVG /> : <Heart2SVG />}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailNameFavorite;

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

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

@@ -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;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  hideFavoriteButton?: boolean;
+}

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

@@ -0,0 +1,209 @@
+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 = "Tükendi",
+  addedToCartBannerText = "Sepete eklenmiş",
+  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;