@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/product-detail-section/children/ProductDetailOffer/index.tsx

@@ -0,0 +1,199 @@
+import {
+  getDefaultSrc,
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantMainImage,
+  getSelectedProductVariant,
+  acceptProductOffer,
+  rejectProductOffer,
+} from "@ikas/bp-storefront";
+import { useEffect } from "preact/hooks";
+import { cx } from "../../utils/cx";
+import { resolveAspectRatio, resolveObjectFit } from "../../utils/media";
+import { Props } from "./types";
+import OfferCard from "./components/OfferCard";
+import OfferSummary from "./components/OfferSummary";
+import { NoProductSVG } from "../../sub-components/icons";
+
+export function ProductDetailOffer({
+  product,
+  compactView = false,
+  preselectOffers = false,
+  addToCartTogetherText = "Birlikte Sepete Ekle",
+  addingToCartText = "Ekleniyor...",
+  offerInfoText = "Seçtiğiniz ürünleri birlikte sepete ekleyerek indirimden yararlanın.",
+  totalText = "Toplam",
+  advantageousTotalText = "Avantajlı Toplam",
+  outOfStockText = "Tükendi",
+  imageAspectRatio,
+  imageObjectFit,
+  addedToCartBannerText = "Sepete eklenmiş",
+  errorMessage = "Ürün sepete eklenemedi",
+  optionSetErrorMessage = "Lütfen gerekli seçenekleri doldurun",
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+}: Props) {
+  useEffect(() => {
+    product?.offers?.forEach((offer) => {
+      if (preselectOffers) {
+        acceptProductOffer(offer);
+      } else {
+        rejectProductOffer(offer);
+      }
+    });
+  }, [preselectOffers]);
+
+  if (!product?.offers?.length) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const appliedCampaign = product.appliedCampaignOffer;
+
+  const mainImage = getProductVariantMainImage(selectedVariant);
+  const mainMedia = mainImage?.image;
+  const mainImageSrc = mainMedia ? getDefaultSrc(mainMedia) : undefined;
+  const mainPrice = getProductVariantFormattedFinalPrice(selectedVariant);
+
+  // Resolve image styles
+  const resolvedAspectRatio = resolveAspectRatio(imageAspectRatio);
+  const resolvedObjectFit = resolveObjectFit(imageObjectFit);
+
+  const isInline = compactView;
+
+  const mainImageStyle = {
+    aspectRatio: resolvedAspectRatio,
+    objectFit: resolvedObjectFit,
+  };
+
+  const summaryPanel = (
+    <OfferSummary
+      product={product}
+      offerInfoText={offerInfoText}
+      totalText={totalText}
+      advantageousTotalText={advantageousTotalText}
+      isInline={isInline}
+      addingToCartText={addingToCartText}
+      addToCartTogetherText={addToCartTogetherText}
+      errorMessage={errorMessage}
+      optionSetErrorMessage={optionSetErrorMessage}
+    />
+  );
+
+  return (
+    <div
+      className={cx("kombos-pd-offer", isInline && "kombos-pd-offer--inline")}
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      {/* Campaign header */}
+      {appliedCampaign &&
+        (appliedCampaign.title || appliedCampaign.description) && (
+          <div className="kombos-pd-offer__header">
+            {appliedCampaign.title && (
+              <span className="kombos-pd-offer__title text-md-semibold md:text-lg-semibold">
+                {appliedCampaign.title}
+              </span>
+            )}
+            {appliedCampaign.description && (
+              <span className="kombos-pd-offer__desc text-sm-regular">
+                {appliedCampaign.description}
+              </span>
+            )}
+          </div>
+        )}
+
+      {/* Grid wrapper for standalone mode */}
+      {!isInline ? (
+        <div className="kombos-pd-offer__grid">
+          {/* Cards area: main product + offers in 2-col grid */}
+          <div className="kombos-pd-offer__cards">
+            {/* Main product card */}
+            <div className="kombos-pd-offer__main-product">
+              <div className="kombos-pd-offer__main-content">
+                {mainMedia?.isVideo ? (
+                  <video
+                    src={mainImageSrc}
+                    className="kombos-pd-offer__main-image"
+                    style={mainImageStyle}
+                    muted
+                    loop
+                    autoPlay
+                    playsInline
+                  >
+                    <track kind="captions" />
+                  </video>
+                ) : mainImageSrc ? (
+                  <img
+                    className="kombos-pd-offer__main-image"
+                    src={mainImageSrc}
+                    alt={product.name}
+                    loading="lazy"
+                    style={mainImageStyle}
+                  />
+                ) : (
+                  <div
+                    className="kombos-pd-offer__main-image kombos-pd-offer__main-image--placeholder"
+                    style={mainImageStyle}
+                  >
+                    <NoProductSVG />
+                  </div>
+                )}
+                <div className="kombos-pd-offer__main-body">
+                  <span className="kombos-pd-offer__main-name text-sm-medium">
+                    {product.name}
+                  </span>
+                  <span className="kombos-pd-offer__main-price text-sm-semibold">
+                    {mainPrice}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Offer cards */}
+            {product.offers.map((offer) => (
+              <OfferCard
+                key={offer.campaignOfferProductId}
+                offer={offer}
+                outOfStockText={outOfStockText}
+                addedToCartBannerText={addedToCartBannerText}
+                imageAspectRatio={resolvedAspectRatio}
+                imageObjectFit={resolvedObjectFit}
+              />
+            ))}
+          </div>
+
+          {/* Summary panel */}
+          {summaryPanel}
+        </div>
+      ) : (
+        <>
+          {/* Inline mode: vertical stack, no main product, no button */}
+          <div className="kombos-pd-offer__list">
+            {product.offers.map((offer) => (
+              <OfferCard
+                key={offer.campaignOfferProductId}
+                offer={offer}
+                outOfStockText={outOfStockText}
+                addedToCartBannerText={addedToCartBannerText}
+                imageAspectRatio={resolvedAspectRatio}
+                imageObjectFit={resolvedObjectFit}
+              />
+            ))}
+          </div>
+
+          {/* Summary (no button in inline mode) */}
+          {summaryPanel}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default ProductDetailOffer;

package/data/section-templates/product-detail-section/children/ProductDetailOffer/styles.css

@@ -0,0 +1,211 @@
+/* ===== Product Detail Offer ===== */
+
+.kombos-pd-offer {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+/* Inline mode (compactView) */
+.kombos-pd-offer--inline {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+/* Header */
+.kombos-pd-offer__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-block: 0.75rem;
+  border-radius: 6px;
+}
+
+.kombos-pd-offer__title {
+  color: inherit;
+}
+
+.kombos-pd-offer__desc {
+  color: inherit;
+  opacity: 0.8;
+}
+
+/* Grid layout (standalone mode): cards + summary side by side */
+.kombos-pd-offer__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Cards area: 2-col grid with main product + offer cards */
+.kombos-pd-offer__cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+}
+
+.kombos-pd-offer--inline .kombos-pd-offer__header {
+  padding: 0;
+}
+
+.kombos-pd-offer--inline .kombos-pd-offer__summary {
+  width: 100%;
+  max-width: none;
+}
+
+/* Offer list (inline mode) */
+.kombos-pd-offer__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Main product card (standalone mode) — same style as OfferCard */
+.kombos-pd-offer__main-product {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-pd-offer__main-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.kombos-pd-offer__main-image {
+  width: 4rem;
+  flex-shrink: 0;
+  border-radius: 4px;
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
+  background: var(--kombos-gray-100);
+}
+
+.kombos-pd-offer__main-image--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-300);
+  font-size: 1.5rem;
+}
+
+.kombos-pd-offer__main-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-pd-offer__main-name {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-pd-offer__main-price {
+  color: var(--kombos-gray-900);
+}
+
+/* Summary panel */
+.kombos-pd-offer__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-gray-50);
+}
+
+.kombos-pd-offer__summary-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  color: var(--kombos-gray-600);
+}
+
+.kombos-pd-offer__summary-info-icon {
+  flex-shrink: 0;
+  font-size: 1rem;
+  margin-top: 0.0625rem;
+}
+
+.kombos-pd-offer__total-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.kombos-pd-offer__total-label {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-pd-offer__total-price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-pd-offer__total-price--strike {
+  color: var(--kombos-gray-500);
+  text-decoration: line-through;
+}
+
+.kombos-pd-offer__discount-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.kombos-pd-offer__discount-values {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-pd-offer__btn {
+  width: 100%;
+  margin-top: auto;
+}
+
+@media (min-width: 768px) {
+  .kombos-pd-offer__header {
+    padding-block: 1rem;
+  }
+
+  .kombos-pd-offer__cards {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .kombos-pd-offer__main-content {
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .kombos-pd-offer__main-image {
+    width: 5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-pd-offer {
+    margin-top: var(--desktop-mt);
+    margin-bottom: var(--desktop-mb);
+  }
+
+  .kombos-pd-offer__grid {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .kombos-pd-offer__summary {
+    min-width: 16rem;
+    max-width: 20rem;
+    justify-content: space-between;
+    align-self: stretch;
+  }
+}

package/data/section-templates/product-detail-section/children/ProductDetailOffer/types.ts

@@ -0,0 +1,23 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  preselectOffers?: boolean;
+  addToCartTogetherText?: string;
+  addingToCartText?: string;
+  offerInfoText?: string;
+  totalText?: string;
+  advantageousTotalText?: string;
+  outOfStockText?: string;
+  imageAspectRatio?: AspectRatio;
+  imageObjectFit?: ObjectFit;
+  addedToCartBannerText?: string;
+  compactView?: boolean;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  errorMessage?: string;
+  optionSetErrorMessage?: string;
+}

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionCheckbox/index.tsx

@@ -0,0 +1,52 @@
+import {
+  IkasProductOption,
+  isChecked as isOptionChecked,
+  setCheckboxValue,
+  hasError as hasOptionError,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Checkbox from "../../../../sub-components/Checkbox";
+import FormItem from "../../../../sub-components/FormItem";
+
+interface Props {
+  option: IkasProductOption;
+  showError: boolean;
+  requiredErrorText: string;
+}
+
+const OptionCheckbox = observer(function OptionCheckbox({
+  option,
+  showError,
+  requiredErrorText,
+}: Props) {
+  const checked = isOptionChecked(option);
+  const errored = showError && hasOptionError(option);
+  const label = getProductOptionFormattedLabel(option);
+
+  return (
+    <FormItem
+      status={errored ? "error" : "default"}
+      helper={errored ? requiredErrorText : undefined}
+    >
+      <div className="kombos-option-checkbox__row">
+        <Checkbox
+          checked={checked}
+          onChange={(val) => setCheckboxValue(option, val)}
+        />
+        <div className="kombos-option-checkbox__text">
+          <span className="kombos-option-checkbox__label text-sm-medium">
+            {label}
+          </span>
+          {option.optionalText && (
+            <span className="kombos-option-checkbox__desc text-xs-regular">
+              {option.optionalText}
+            </span>
+          )}
+        </div>
+      </div>
+    </FormItem>
+  );
+});
+
+export default OptionCheckbox;

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionCheckbox/styles.css

@@ -0,0 +1,19 @@
+.kombos-option-checkbox__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-option-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.kombos-option-checkbox__label {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-option-checkbox__desc {
+  color: var(--kombos-gray-500);
+}

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/index.tsx

@@ -0,0 +1,60 @@
+import {
+  IkasProductOption,
+  selectValue,
+  isProductOptionSelectValueSelected,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../../../utils/cx";
+import FormItem from "../../../../../../sub-components/FormItem";
+import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
+
+interface Props {
+  option: IkasProductOption;
+  errored: boolean;
+  requiredErrorText: string;
+  constraintText?: string;
+}
+
+const ChoiceBox = observer(function ChoiceBox({
+  option,
+  errored,
+  requiredErrorText,
+  constraintText,
+}: Props) {
+  const settings = option.selectSettings!;
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={errored ? requiredErrorText : constraintText}
+    >
+      <div className="kombos-option-choice__grid">
+        {settings.values.map((val) => {
+          const isSelected = isProductOptionSelectValueSelected(option, val);
+          const price = getSelectValuePrice(option, val);
+
+          return (
+            <button
+              key={val.id}
+              type="button"
+              className={cx("kombos-option-choice__box", "text-sm-medium", isSelected && "kombos-option-choice__box--selected")}
+              onClick={() => selectValue(option, val)}
+            >
+              <span>{val.value}</span>
+              {price && (
+                <span className="kombos-option-choice__box-price text-xs-regular">
+                  {price}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </FormItem>
+  );
+});
+
+export default ChoiceBox;

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/components/ChoiceBox/styles.css

@@ -0,0 +1,38 @@
+/* Box grid */
+.kombos-option-choice__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-option-choice__box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.kombos-option-choice__box:hover {
+  border-color: var(--kombos-gray-400);
+}
+
+.kombos-option-choice__box--selected {
+  border-color: var(--kombos-gray-900);
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-option-choice__box-price {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-option-choice__box--selected .kombos-option-choice__box-price {
+  color: var(--kombos-white);
+}

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/index.tsx

@@ -0,0 +1,102 @@
+import {
+  IkasProductOption,
+  selectValue,
+  clearValues,
+  isProductOptionSelectValueSelected,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../../../utils/cx";
+import Select from "../../../../../../sub-components/Select";
+import FormItem from "../../../../../../sub-components/FormItem";
+import Checkbox from "../../../../../../sub-components/Checkbox";
+import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
+
+interface Props {
+  option: IkasProductOption;
+  errored: boolean;
+  requiredErrorText: string;
+  placeholderText: string;
+  constraintText?: string;
+}
+
+const ChoiceSelect = observer(function ChoiceSelect({
+  option,
+  errored,
+  requiredErrorText,
+  placeholderText,
+  constraintText,
+}: Props) {
+  const settings = option.selectSettings!;
+  const selectedId = option.values?.[0] ?? "";
+  const selectOptions = settings.values.map((v) => ({
+    label: `${v.value} (${getSelectValuePrice(option, v)})`,
+    value: v.id,
+  }));
+
+  const isMulti = (settings.maxSelect ?? 0) > 1;
+  const selectId = !isMulti ? `option-choice-${option.id}` : undefined;
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      htmlFor={selectId}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={errored ? requiredErrorText : constraintText}
+    >
+      {isMulti ? (
+        <div
+          className={cx(
+            "kombos-option-choice__checklist",
+            errored && "kombos-option-choice__checklist--error",
+          )}
+        >
+          {settings.values.map((val) => {
+            const isSelected = isProductOptionSelectValueSelected(option, val);
+            const price = getSelectValuePrice(option, val);
+
+            return (
+              <div
+                key={val.id}
+                className="kombos-option-choice__checklist-row"
+                onClick={() => selectValue(option, val)}
+              >
+                <Checkbox
+                  checked={isSelected}
+                  onChange={() => selectValue(option, val)}
+                />
+                <span className="text-sm-medium">{val.value}</span>
+                {price && (
+                  <span className="kombos-option-choice__checklist-price text-xs-regular">
+                    {price}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <Select
+          id={selectId}
+          allowClear
+          options={[{ label: placeholderText, value: "" }, ...selectOptions]}
+          value={selectedId}
+          onChange={(e: Event) => {
+            const id = (e.target as HTMLSelectElement).value;
+            if (!id) {
+              clearValues(option, true);
+              return;
+            }
+            const val = settings.values.find((v) => v.id === id);
+            if (val) selectValue(option, val);
+          }}
+          onClear={() => clearValues(option, true)}
+          size="xs"
+        />
+      )}
+    </FormItem>
+  );
+});
+
+export default ChoiceSelect;