@ikas/component-cli 0.103.0 → 0.105.0

package/templates/create-full/src/components/AccountOrderDetail/components/ReturnView/index.tsx

@@ -0,0 +1,159 @@
+import { useState } from "preact/hooks";
+import {
+  IkasOrder,
+  IkasOrderLineItem,
+  customerStore,
+  refundOrder,
+  Router,
+  getIkasOrderRefundableItems,
+  setOrderLineItemRefundQuantity,
+  isIkasOrderRefundable,
+} from "@ikas/bp-storefront";
+import Breadcrumb from "../../../../sub-components/Breadcrumb";
+import Button from "../../../../sub-components/Button";
+import { showToast } from "../../../../utils/toast";
+import OrderHeader from "../OrderHeader";
+import ReturnItemRow from "../ReturnItemRow";
+
+interface Props {
+  order: IkasOrder;
+  breadcrumbOrdersLabel: string;
+  breadcrumbOrderLabel: string;
+  orderNoLabel: string;
+  orderStatusLabel: string;
+  orderDateLabel: string;
+  returnRequestTitle: string;
+  returnSubmitText: string;
+  returningButtonText: string;
+  returnSuccessText: string;
+  returnErrorText: string;
+  copiedText: string;
+  onBack: () => void;
+  onSuccess: () => void;
+}
+
+function ReturnView({
+  order,
+  breadcrumbOrdersLabel,
+  breadcrumbOrderLabel,
+  orderNoLabel,
+  orderStatusLabel,
+  orderDateLabel,
+  returnRequestTitle,
+  returnSubmitText,
+  returningButtonText,
+  returnSuccessText,
+  returnErrorText,
+  copiedText,
+  onBack,
+  onSuccess,
+}: Props) {
+  const [submitting, setSubmitting] = useState(false);
+  const [quantities, setQuantities] = useState<Record<string, number>>({});
+  const refundableItems = getIkasOrderRefundableItems(order);
+
+  const orderRefundable = isIkasOrderRefundable(order);
+
+  const disabled = !orderRefundable || submitting;
+
+  const updateQuantity = (item: IkasOrderLineItem, next: number) => {
+    const current = quantities[item.id] ?? 0;
+    if (next === current) return;
+    setOrderLineItemRefundQuantity(next || null, item);
+    if (next <= 0) {
+      const { [item.id]: _, ...rest } = quantities;
+      setQuantities(rest);
+    } else {
+      setQuantities({ ...quantities, [item.id]: next });
+    }
+  };
+
+  const handleToggle = (item: IkasOrderLineItem) => {
+    const current = quantities[item.id] ?? 0;
+    updateQuantity(item, current > 0 ? 0 : 1);
+  };
+
+  const handleDecrease = (item: IkasOrderLineItem) => {
+    const current = quantities[item.id] ?? 0;
+    updateQuantity(item, Math.max(0, current - 1));
+  };
+
+  const handleIncrease = (item: IkasOrderLineItem) => {
+    const current = quantities[item.id] ?? 0;
+    updateQuantity(item, Math.min(item.quantity, current + 1));
+  };
+
+  const handleSubmit = async () => {
+    if (disabled) return;
+    setSubmitting(true);
+    try {
+      const success = await refundOrder(customerStore, order);
+      if (success) {
+        showToast(returnSuccessText, "success");
+        onSuccess();
+      } else {
+        showToast(returnErrorText, "error");
+      }
+    } catch {
+      showToast(returnErrorText, "error");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="kombos-order-detail-return">
+      <Breadcrumb
+        items={[
+          {
+            label: breadcrumbOrdersLabel,
+            onClick: () => Router.navigateToPage("ORDERS"),
+          },
+          {
+            label: `${order.orderNumber} ${breadcrumbOrderLabel}`,
+            onClick: onBack,
+          },
+          { label: returnRequestTitle },
+        ]}
+      />
+
+      <div className="kombos-order-detail-return__content">
+        <OrderHeader
+          order={order}
+          orderNoLabel={orderNoLabel}
+          orderStatusLabel={orderStatusLabel}
+          orderDateLabel={orderDateLabel}
+          copiedText={copiedText}
+        />
+
+        <div className="kombos-order-detail-return__items">
+          {refundableItems.map((item) => (
+            <ReturnItemRow
+              key={item.id}
+              item={item}
+              refundQty={quantities[item.id] ?? 0}
+              onToggle={() => handleToggle(item)}
+              onDecrease={() => handleDecrease(item)}
+              onIncrease={() => handleIncrease(item)}
+            />
+          ))}
+        </div>
+
+        <div className="kombos-order-detail-return__footer">
+          <Button
+            variant="primary"
+            size="s"
+            onClick={handleSubmit}
+            loading={submitting}
+            disabled={disabled}
+            className="kombos-order-detail-return__submit-btn"
+          >
+            {submitting ? returningButtonText : returnSubmitText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ReturnView;

package/templates/create-full/src/components/AccountOrderDetail/components/ReturnView/styles.css

@@ -0,0 +1,29 @@
+.kombos-order-detail-return {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+
+.kombos-order-detail-return__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.kombos-order-detail-return__items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Footer */
+.kombos-order-detail-return__footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.kombos-order-detail-return__submit-btn {
+  width: 100%;
+}

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

@@ -0,0 +1,244 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  customerStore,
+  IkasOrder,
+  IkasProductFile,
+  IkasOrderTransaction,
+  getOrderDetailsOfPage,
+  getIkasOrderDisplayedPackages,
+  isIkasOrderRefundable,
+  getIkasOrderProductFiles,
+  getOrderProductFiles,
+  getOrderTransactions,
+  getDigitalProductFileDownloadUrl,
+  Router,
+  getIkasOrderRefundableItems,
+} from "@ikas/bp-storefront";
+import PageLoader from "../../sub-components/PageLoader";
+import Button from "../../sub-components/Button";
+import Breadcrumb from "../../sub-components/Breadcrumb";
+import { DownloadSVG } from "../../sub-components/icons";
+import OrderHeader from "./components/OrderHeader";
+import PackageGroup from "./components/PackageGroup";
+import OrderSidebar from "./components/OrderSidebar";
+import ReturnView from "./components/ReturnView";
+import { Props } from "./types";
+
+export function AccountOrderDetail({
+  breadcrumbOrdersLabel = "Siparişlerim",
+  breadcrumbOrderLabel = "Nolu Sipariş",
+  orderNoLabel = "Sipariş No:",
+  orderStatusLabel = "Sipariş Durumu:",
+  orderDateLabel = "Sipariş Tarihi:",
+  returnButtonText = "İade Et",
+  returningButtonText = "İade talebi gönderiliyor...",
+  returnRequestTitle = "İade Talebi",
+  returnSubmitText = "İade Et",
+  deliveryAddressLabel = "Teslimat Adresi",
+  billingAddressLabel = "Fatura Adresi",
+  paymentInfoLabel = "Ödeme Bilgileri",
+  summaryLabel = "Özet",
+  subtotalLabel = "Ara Toplam",
+  shippingLabel = "Kargo",
+  totalLabel = "Toplam",
+  taxIncludedText = "*vergiler dahil",
+  installmentText = "Taksit",
+  singlePaymentText = "Tek Çekim",
+  cargoCompanyLabel = "Kargo Şirketi:",
+  trackingNumberLabel = "Takip Numarası:",
+  quantityLabel = "adet",
+  errorText = "Sipariş bulunamadı.",
+  backToOrdersText = "Siparişlerime Dön",
+  returnSuccessText = "İade talebiniz başarıyla oluşturuldu.",
+  returnErrorText = "İade talebi oluşturulurken bir hata oluştu.",
+  copiedText = "Kopyalandı!",
+  downloadSectionTitle = "İndirilebilir Dosyalar",
+  downloadButtonText = "İndir",
+}: Props) {
+  const [order, setOrder] = useState<IkasOrder | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState<"detail" | "return">("detail");
+  const [files, setFiles] = useState<IkasProductFile[]>([]);
+  const [transactions, setTransactions] = useState<IkasOrderTransaction[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const result = await getOrderDetailsOfPage(customerStore);
+        if (!cancelled && result) {
+          setOrder(result);
+          const fileIds = getIkasOrderProductFiles(result);
+          if (fileIds.length > 0) {
+            const [productFiles, txns] = await Promise.all([
+              getOrderProductFiles(customerStore, fileIds),
+              getOrderTransactions(customerStore, { orderId: result.id }),
+            ]);
+            if (!cancelled) {
+              setFiles(productFiles);
+              setTransactions(txns);
+            }
+          }
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (loading) {
+    return <PageLoader />;
+  }
+
+  if (!order) {
+    return (
+      <div className="kombos-order-detail">
+        <div className="kombos-order-detail__empty">
+          <p className="kombos-order-detail__empty-text text-sm-regular">
+            {errorText}
+          </p>
+          <Button
+            variant="secondary"
+            size="s"
+            onClick={() => Router.navigateToPage("ORDERS")}
+          >
+            {backToOrdersText}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (view === "return") {
+    return (
+      <div className="kombos-order-detail">
+        <ReturnView
+          order={order}
+          breadcrumbOrdersLabel={breadcrumbOrdersLabel}
+          breadcrumbOrderLabel={breadcrumbOrderLabel}
+          orderNoLabel={orderNoLabel}
+          orderStatusLabel={orderStatusLabel}
+          orderDateLabel={orderDateLabel}
+          returnRequestTitle={returnRequestTitle}
+          returnSubmitText={returnSubmitText}
+          returningButtonText={returningButtonText}
+          returnSuccessText={returnSuccessText}
+          returnErrorText={returnErrorText}
+          copiedText={copiedText}
+          onBack={() => setView("detail")}
+          onSuccess={() => setView("detail")}
+        />
+      </div>
+    );
+  }
+
+  const packages = getIkasOrderDisplayedPackages(order);
+  const canRefund = getIkasOrderRefundableItems(order).length > 0;
+  // const canRefund = isIkasOrderRefundable(order);
+  const isDownloadable =
+    transactions.length > 0 &&
+    transactions.every((t) => t.status === "SUCCESS");
+
+  return (
+    <div className="kombos-order-detail">
+      <Breadcrumb
+        items={[
+          {
+            label: breadcrumbOrdersLabel,
+            onClick: () => Router.navigateToPage("ORDERS"),
+          },
+          { label: `${order.orderNumber} ${breadcrumbOrderLabel}` },
+        ]}
+      />
+
+      <div className="kombos-order-detail__content">
+        <div className="kombos-order-detail__header-row">
+          <OrderHeader
+            order={order}
+            orderNoLabel={orderNoLabel}
+            orderStatusLabel={orderStatusLabel}
+            orderDateLabel={orderDateLabel}
+            copiedText={copiedText}
+          />
+          {canRefund && (
+            <Button
+              variant="secondary"
+              size="s"
+              onClick={() => setView("return")}
+              className="kombos-order-detail__return-btn"
+            >
+              {returnButtonText}
+            </Button>
+          )}
+        </div>
+
+        <div className="kombos-order-detail__body">
+          <div className="kombos-order-detail__packages">
+            {files.length > 0 && (
+              <div className="kombos-order-detail__downloads">
+                <h3 className="kombos-order-detail__downloads-title text-md-semibold">
+                  {downloadSectionTitle}
+                </h3>
+                <div className="kombos-order-detail__downloads-list">
+                  {files.map((file) => (
+                    <div
+                      key={file.id}
+                      className="kombos-order-detail__download-item"
+                    >
+                      <span className="kombos-order-detail__download-name text-sm-regular">
+                        {file.name}
+                      </span>
+                      <Button
+                        variant="secondary"
+                        size="xs"
+                        icon={<DownloadSVG />}
+                        className="kombos-order-detail__download-btn"
+                        disabled={!isDownloadable}
+                        onClick={() =>
+                          getDigitalProductFileDownloadUrl(
+                            customerStore,
+                            order,
+                            file,
+                          )
+                        }
+                      >
+                        {downloadButtonText}
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            {packages.map((pkg) => (
+              <PackageGroup
+                key={pkg.id}
+                pkg={pkg}
+                quantityLabel={quantityLabel}
+                cargoCompanyLabel={cargoCompanyLabel}
+                trackingNumberLabel={trackingNumberLabel}
+              />
+            ))}
+          </div>
+
+          <OrderSidebar
+            order={order}
+            deliveryAddressLabel={deliveryAddressLabel}
+            billingAddressLabel={billingAddressLabel}
+            paymentInfoLabel={paymentInfoLabel}
+            summaryLabel={summaryLabel}
+            subtotalLabel={subtotalLabel}
+            shippingLabel={shippingLabel}
+            totalLabel={totalLabel}
+            taxIncludedText={taxIncludedText}
+            installmentText={installmentText}
+            singlePaymentText={singlePaymentText}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AccountOrderDetail;

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

@@ -0,0 +1,125 @@
+/* AccountOrderDetail — Root (component, not section) */
+.kombos-order-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+/* Empty / Error */
+.kombos-order-detail__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 4rem 0;
+}
+
+.kombos-order-detail__empty-text {
+  color: var(--kombos-gray-500);
+}
+
+/* Content */
+.kombos-order-detail__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* Header row (order info + return button) */
+.kombos-order-detail__header-row {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-order-detail__return-btn {
+  align-self: flex-start;
+}
+
+@media (min-width: 768px) {
+  .kombos-order-detail__header-row {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .kombos-order-detail__header-row .kombos-order-detail-header {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  .kombos-order-detail__return-btn {
+    align-self: auto;
+    flex-shrink: 0;
+  }
+}
+
+/* Body (packages + sidebar) */
+.kombos-order-detail__body {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+.kombos-order-detail__packages {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  flex: 1;
+}
+
+/* Digital Downloads */
+.kombos-order-detail__downloads {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+}
+
+.kombos-order-detail__downloads-title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail__downloads-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-order-detail__download-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-order-detail__download-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.kombos-order-detail__download-name {
+  color: var(--kombos-gray-700);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kombos-order-detail__download-btn {
+  flex-shrink: 0;
+}
+
+@media (min-width: 1024px) {
+  .kombos-order-detail__body {
+    flex-direction: row;
+    gap: 6rem;
+  }
+}

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

@@ -0,0 +1,32 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  breadcrumbOrdersLabel?: string;
+  breadcrumbOrderLabel?: string;
+  orderNoLabel?: string;
+  orderStatusLabel?: string;
+  orderDateLabel?: string;
+  returnButtonText?: string;
+  returningButtonText?: string;
+  returnRequestTitle?: string;
+  returnSubmitText?: string;
+  deliveryAddressLabel?: string;
+  billingAddressLabel?: string;
+  paymentInfoLabel?: string;
+  summaryLabel?: string;
+  subtotalLabel?: string;
+  shippingLabel?: string;
+  totalLabel?: string;
+  taxIncludedText?: string;
+  cargoCompanyLabel?: string;
+  trackingNumberLabel?: string;
+  quantityLabel?: string;
+  errorText?: string;
+  backToOrdersText?: string;
+  returnSuccessText?: string;
+  returnErrorText?: string;
+  copiedText?: string;
+  installmentText?: string;
+  singlePaymentText?: string;
+  downloadSectionTitle?: string;
+  downloadButtonText?: string;
+}