@ikas/component-cli 0.133.0 → 1.2.0

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

@@ -1,159 +0,0 @@
-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

@@ -1,29 +0,0 @@
-.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

@@ -1,244 +0,0 @@
-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 = "My Orders",
-  breadcrumbOrderLabel = "Order",
-  orderNoLabel = "Order No:",
-  orderStatusLabel = "Order Status:",
-  orderDateLabel = "Order Date:",
-  returnButtonText = "Return",
-  returningButtonText = "Submitting return request...",
-  returnRequestTitle = "Return Request",
-  returnSubmitText = "Return",
-  deliveryAddressLabel = "Delivery Address",
-  billingAddressLabel = "Billing Address",
-  paymentInfoLabel = "Payment Information",
-  summaryLabel = "Summary",
-  subtotalLabel = "Subtotal",
-  shippingLabel = "Shipping",
-  totalLabel = "Total",
-  taxIncludedText = "*taxes included",
-  installmentText = "Installment",
-  singlePaymentText = "Single Payment",
-  cargoCompanyLabel = "Shipping Company:",
-  trackingNumberLabel = "Tracking Number:",
-  quantityLabel = "items",
-  errorText = "Order not found.",
-  backToOrdersText = "Back to Orders",
-  returnSuccessText = "Your return request has been successfully created.",
-  returnErrorText = "An error occurred while creating the return request.",
-  copiedText = "Copied!",
-  downloadSectionTitle = "Downloadable Files",
-  downloadButtonText = "Download",
-}: 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

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

@@ -1,32 +0,0 @@
-// 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;
-}