@ikas/component-cli 0.103.0 → 0.104.0

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

@@ -0,0 +1,30 @@
+import {
+  getSelectedProductVariant,
+  getProductVariantFormattedFinalPrice,
+  getProductVariantFormattedSellPrice,
+  hasProductVariantDiscount,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function CardProductPrice({ product }: Props) {
+  if (!product) return null;
+
+  const selectedVariant = getSelectedProductVariant(product);
+
+  const hasDiscount = hasProductVariantDiscount(selectedVariant);
+
+  return (
+    <div className="kombos-card-product-price">
+      <span className="kombos-card-product-price__current text-sm-medium sm:text-md-medium md:text-xl-medium">
+        {getProductVariantFormattedFinalPrice(selectedVariant)}
+      </span>
+      {hasDiscount && (
+        <span className="kombos-card-product-price__old text-xs-regular-strike sm:text-sm-regular-strike md:text-md-regular-strike">
+          {getProductVariantFormattedSellPrice(selectedVariant)}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default CardProductPrice;

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

@@ -0,0 +1,13 @@
+.kombos-card-product-price {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.kombos-card-product-price__current {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-card-product-price__old {
+  color: var(--kombos-gray-500);
+}

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

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

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

@@ -0,0 +1,10 @@
+import { Props } from "./types";
+import VariantBadge from "../../sub-components/VariantBadge";
+
+export function CardProductVariants({ product }: Props) {
+  if (!product) return null;
+
+  return <VariantBadge product={product} size="s" scrollable disableRoute />;
+}
+
+export default CardProductVariants;

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

@@ -0,0 +1 @@
+/* CardProductVariants — styles handled by VariantBadge sub-component */

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

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

package/templates/create-full/src/components/CartPage/components/CouponCode/index.tsx

@@ -0,0 +1,108 @@
+import { useState, useEffect } from "preact/hooks";
+import {
+  customerStore,
+  getCouponCodeForm,
+  initCouponCodeForm,
+  setCouponCodeFormCouponCode,
+  submitCouponCodeForm,
+  removeCouponCodeForm,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Button from "../../../../sub-components/Button";
+import Input from "../../../../sub-components/Input";
+
+interface Props {
+  appliedCoupon?: string | null;
+  toggleText: string;
+  placeholder: string;
+  applyText: string;
+  removeText: string;
+  applyingText: string;
+}
+
+const CouponCode = observer(function CouponCode({
+  appliedCoupon,
+  toggleText,
+  placeholder,
+  applyText,
+  removeText,
+  applyingText,
+}: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const couponForm = getCouponCodeForm(customerStore);
+
+  useEffect(() => {
+    initCouponCodeForm(couponForm);
+  }, [couponForm]);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    await submitCouponCodeForm(couponForm);
+  };
+
+  const handleRemove = async () => {
+    await removeCouponCodeForm(couponForm);
+    setIsOpen(false);
+  };
+
+  if (appliedCoupon) {
+    return (
+      <div className="coupon-code">
+        <div className="coupon-code__applied">
+          <span className="coupon-code__value text-sm-medium">
+            {appliedCoupon}
+          </span>
+          <button
+            type="button"
+            className="coupon-code__remove text-sm-medium"
+            onClick={handleRemove}
+          >
+            {removeText}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="coupon-code">
+      {!isOpen ? (
+        <button
+          type="button"
+          className="coupon-code__toggle text-sm-semibold"
+          onClick={() => setIsOpen(true)}
+        >
+          {toggleText}
+        </button>
+      ) : (
+        <form className="coupon-code__form" onSubmit={handleSubmit}>
+          <Input
+            placeholder={couponForm.couponCode?.placeholder ?? placeholder}
+            value={couponForm.couponCode?.value ?? ""}
+            onInput={(e: Event) =>
+              setCouponCodeFormCouponCode(
+                couponForm,
+                (e.target as HTMLInputElement).value,
+              )
+            }
+            status={couponForm.isFailure ? "error" : undefined}
+          />
+          <Button
+            variant="secondary"
+            size="xs"
+            disabled={couponForm.isSubmitting}
+          >
+            {couponForm.isSubmitting ? applyingText : applyText}
+          </Button>
+        </form>
+      )}
+      {couponForm.isFailure && couponForm.responseMessage && (
+        <p className="coupon-code__error text-xs-regular">
+          {couponForm.responseMessage}
+        </p>
+      )}
+    </div>
+  );
+});
+
+export default CouponCode;

package/templates/create-full/src/components/CartPage/components/CouponCode/styles.css

@@ -0,0 +1,68 @@
+/* CouponCode */
+.coupon-code {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.coupon-code__toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-900);
+  text-decoration: underline;
+  text-align: left;
+}
+
+.coupon-code__toggle:hover {
+  color: var(--kombos-gray-700);
+}
+
+.coupon-code__form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.coupon-code__form > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+.coupon-code__form > :last-child {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.coupon-code__applied {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.875rem;
+  background-color: var(--kombos-gray-50);
+  border-radius: 6px;
+  min-height: 2.75rem;
+}
+
+.coupon-code__value {
+  color: var(--kombos-gray-900);
+}
+
+.coupon-code__remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-500);
+  text-decoration: underline;
+}
+
+.coupon-code__remove:hover {
+  color: var(--kombos-gray-700);
+}
+
+.coupon-code__error {
+  color: var(--kombos-error);
+  margin: 0;
+}

package/templates/create-full/src/components/CartPage/components/EmptyState/index.tsx

@@ -0,0 +1,31 @@
+import { Router } from "@ikas/bp-storefront";
+import { Handbag1SVG } from "../../../../sub-components/icons";
+import Button from "../../../../sub-components/Button";
+
+interface Props {
+  emptyCartText: string;
+  continueShoppingText: string;
+}
+
+export default function EmptyState({
+  emptyCartText,
+  continueShoppingText,
+}: Props) {
+  const handleContinueShopping = () => {
+    Router.navigate("/");
+  };
+
+  return (
+    <div className="cart-page__empty">
+      <span className="cart-page__empty-icon">
+        <Handbag1SVG />
+      </span>
+      <p className="cart-page__empty-text text-xl-semibold md:display-xs-semibold">
+        {emptyCartText}
+      </p>
+      <Button variant="primary" size="s" onClick={handleContinueShopping}>
+        {continueShoppingText}
+      </Button>
+    </div>
+  );
+}

package/templates/create-full/src/components/CartPage/components/EmptyState/styles.css

@@ -0,0 +1,18 @@
+/* EmptyState */
+.cart-page__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 5rem 0;
+}
+
+.cart-page__empty-icon {
+  font-size: 3rem;
+  color: var(--kombos-gray-300);
+}
+
+.cart-page__empty-text {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}

package/templates/create-full/src/components/CartPage/components/OrderSummary/index.tsx

@@ -0,0 +1,106 @@
+import {
+  cartStore,
+  IkasCart,
+  getIkasOrderFormattedTotalFinalPrice,
+  getIkasOrderFormattedTotalPrice,
+  getOrderAdjustmentDisplayName,
+  getOrderAdjustmentFormattedAmount,
+  getOrderAdjustmentIsDecrement,
+  getCheckoutUrlFromCartStore,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Button from "../../../../sub-components/Button";
+import CouponCode from "../CouponCode";
+import { cx } from "../../../../utils/cx";
+
+interface Props {
+  cart: IkasCart;
+  title: string;
+  subtotalLabel: string;
+  totalLabel: string;
+  checkoutButtonText: string;
+  couponToggleText: string;
+  couponPlaceholder: string;
+  couponApplyText: string;
+  couponRemoveText: string;
+  couponApplyingText: string;
+}
+
+const OrderSummary = observer(function OrderSummary({
+  cart,
+  title,
+  subtotalLabel,
+  totalLabel,
+  checkoutButtonText,
+  couponToggleText,
+  couponPlaceholder,
+  couponApplyText,
+  couponRemoveText,
+  couponApplyingText,
+}: Props) {
+  const adjustments = cart.orderAdjustments ?? [];
+
+  return (
+    <div className="order-summary">
+      <h2 className="order-summary__title text-md-semibold md:text-lg-semibold">{title}</h2>
+
+      <div className="order-summary__rows">
+        <div className="order-summary__row">
+          <span className="text-md-regular">{subtotalLabel}</span>
+          <span className="text-md-semibold">
+            {getIkasOrderFormattedTotalPrice(cart)}
+          </span>
+        </div>
+
+        {adjustments.map((adj, i) => {
+          const isDecrement = !!getOrderAdjustmentIsDecrement(adj);
+
+          return (
+            <div key={i} className="order-summary__row">
+              <span className="text-sm-regular">
+                {getOrderAdjustmentDisplayName(adj)}
+              </span>
+              <span
+                className={cx(
+                  "order-summary__adjustment-amount text-sm-semibold",
+                  isDecrement && "order-summary__adjustment-amount--discount",
+                )}
+              >
+                {getOrderAdjustmentFormattedAmount(adj)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="order-summary__divider" />
+
+      <div className="order-summary__row order-summary__total">
+        <span className="text-md-semibold md:text-lg-semibold">{totalLabel}</span>
+        <span className="text-md-semibold md:text-lg-semibold">
+          {getIkasOrderFormattedTotalFinalPrice(cart)}
+        </span>
+      </div>
+
+      <CouponCode
+        appliedCoupon={cart.couponCode}
+        toggleText={couponToggleText}
+        placeholder={couponPlaceholder}
+        applyText={couponApplyText}
+        removeText={couponRemoveText}
+        applyingText={couponApplyingText}
+      />
+
+      <a
+        className="order-summary__checkout-link"
+        href={getCheckoutUrlFromCartStore(cartStore)}
+      >
+        <Button variant="primary" className="order-summary__checkout-btn">
+          {checkoutButtonText}
+        </Button>
+      </a>
+    </div>
+  );
+});
+
+export default OrderSummary;

package/templates/create-full/src/components/CartPage/components/OrderSummary/styles.css

@@ -0,0 +1,70 @@
+/* OrderSummary */
+.order-summary {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: var(--kombos-white);
+  min-width: 0;
+}
+
+@media (min-width: 768px) {
+  .order-summary {
+    padding: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .order-summary {
+    position: sticky;
+    top: 7rem;
+  }
+}
+
+.order-summary__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.order-summary__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.order-summary__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--kombos-gray-700);
+}
+
+.order-summary__adjustment-amount {
+  color: var(--kombos-gray-500);
+}
+
+.order-summary__adjustment-amount--discount {
+  color: var(--kombos-error);
+}
+
+.order-summary__divider {
+  height: 1px;
+  background-color: var(--kombos-gray-200);
+}
+
+.order-summary__total {
+  color: var(--kombos-gray-900);
+}
+
+/* Checkout */
+.order-summary__checkout-link {
+  display: block;
+  text-decoration: none;
+}
+
+.order-summary__checkout-btn {
+  display: flex;
+  width: 100%;
+}

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

@@ -0,0 +1,107 @@
+import {
+  cartStore,
+  hasCart,
+  removeItem,
+  getIkasOrderTotalItemCount,
+  IkasOrderLineItem,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import PageLoader from "../../sub-components/PageLoader";
+import CartItem from "../../sub-components/CartItem";
+import OrderSummary from "./components/OrderSummary";
+import EmptyState from "./components/EmptyState";
+
+export function CartPage({
+  title = "Sepet",
+  emptyCartText = "Sepetinizde Ürün Bulunmamaktadır",
+  subtotalLabel = "Ara Toplam",
+  totalLabel = "Toplam",
+  checkoutButtonText = "Siparişi Tamamla",
+  itemsText = "ürün",
+  couponToggleText = "Hediye Kodunu Kullan!",
+  couponPlaceholder = "Kupon kodu girin",
+  couponApplyText = "Uygula",
+  couponRemoveText = "Kaldır",
+  couponApplyingText = "Uygulanıyor...",
+  orderSummaryTitle = "Sipariş Özeti",
+  continueShoppingText = "Alışverişe Başla",
+}: Props) {
+  const cart = cartStore.cart;
+  const isLoading = cartStore.isCartLoading;
+  const cartHasItems = hasCart(cartStore);
+  const lineItems = (cart?.orderLineItems ?? []).filter(
+    (item) => !item?.deleted,
+  );
+  const totalItemCount = cart ? getIkasOrderTotalItemCount(cart) : 0;
+
+  const handleRemove = async (item: IkasOrderLineItem) => {
+    await removeItem(item);
+  };
+
+  if (isLoading) {
+    return <PageLoader />;
+  }
+
+  if (!cartHasItems) {
+    return (
+      <section className="cart-page">
+        <div className="kombos-container cart-page__container">
+          <header className="cart-page__header">
+            <h1 className="cart-page__title text-xl-semibold md:display-xs-semibold">{title}</h1>
+          </header>
+          <EmptyState
+            emptyCartText={emptyCartText}
+            continueShoppingText={continueShoppingText}
+          />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="cart-page">
+      <div className="kombos-container cart-page__container">
+        <header className="cart-page__header">
+          <h1 className="cart-page__title text-xl-semibold md:display-xs-semibold">
+            {title}{" "}
+            <span className="cart-page__count text-lg-regular">
+              ({totalItemCount} {itemsText})
+            </span>
+          </h1>
+        </header>
+
+        <div className="cart-page__layout">
+          <div className="cart-page__items-col">
+            <div className="cart-page__items">
+              {lineItems.map((item) => (
+                <CartItem
+                  key={item.id}
+                  item={item}
+                  onRemove={handleRemove}
+                  variant="page"
+                />
+              ))}
+            </div>
+          </div>
+
+          {cart && (
+            <OrderSummary
+              cart={cart}
+              title={orderSummaryTitle}
+              subtotalLabel={subtotalLabel}
+              totalLabel={totalLabel}
+              checkoutButtonText={checkoutButtonText}
+              couponToggleText={couponToggleText}
+              couponPlaceholder={couponPlaceholder}
+              couponApplyText={couponApplyText}
+              couponRemoveText={couponRemoveText}
+              couponApplyingText={couponApplyingText}
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CartPage;

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

@@ -0,0 +1,54 @@
+/* CartPage */
+.cart-page {
+  width: 100%;
+}
+
+.cart-page__container {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+/* Header */
+.cart-page__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+/* Title */
+.cart-page__title {
+  margin: 0;
+  color: var(--kombos-gray-900);
+}
+
+.cart-page__count {
+  color: var(--kombos-gray-500);
+}
+
+/* Two-column Layout */
+.cart-page__layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2rem;
+}
+
+@media (min-width: 1024px) {
+  .cart-page__layout {
+    grid-template-columns: minmax(0, 1fr) 22.5rem;
+    gap: 2.5rem;
+    align-items: start;
+  }
+}
+
+/* Cart Items Column */
+.cart-page__items-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.cart-page__items {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,16 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  emptyCartText?: string;
+  subtotalLabel?: string;
+  totalLabel?: string;
+  checkoutButtonText?: string;
+  itemsText?: string;
+  couponPlaceholder?: string;
+  couponApplyText?: string;
+  couponRemoveText?: string;
+  couponApplyingText?: string;
+  orderSummaryTitle?: string;
+  couponToggleText?: string;
+  continueShoppingText?: string;
+}