@ikas/component-cli 0.92.0 → 0.94.0

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

@@ -0,0 +1,195 @@
+import {
+  IkasOrder,
+  IkasOrderAddress,
+  getIkasOrderFormattedTotalFinalPrice,
+  getIkasOrderFormattedTotalPrice,
+  getIkasOrderFormattedShippingTotal,
+  getOrderTransactionFormattedAmount,
+  getOrderTransactionPaymentMethodTranslation,
+  getIkasOrderDisplayedAdjustments,
+  getOrderAdjustmentFormattedAmount,
+  getOrderAdjustmentDisplayName,
+  getOrderAddressText,
+} from "@ikas/bp-storefront";
+import { getFullName } from "../../../../utils/fullName";
+
+interface Props {
+  order: IkasOrder;
+  deliveryAddressLabel: string;
+  billingAddressLabel: string;
+  paymentInfoLabel: string;
+  summaryLabel: string;
+  subtotalLabel: string;
+  shippingLabel: string;
+  totalLabel: string;
+  taxIncludedText: string;
+  installmentText: string;
+  singlePaymentText: string;
+}
+
+function AddressBlock({
+  label,
+  address,
+}: {
+  label: string;
+  address: IkasOrderAddress | null;
+}) {
+  if (!address) return null;
+  const fullName = getFullName(address.firstName, address.lastName);
+  const addressText = getOrderAddressText(address);
+
+  return (
+    <div className="kombos-order-detail-sidebar__section">
+      <p className="kombos-order-detail-sidebar__section-title text-sm-medium">
+        {label}
+      </p>
+      <div className="kombos-order-detail-sidebar__address">
+        {fullName && (
+          <p className="kombos-order-detail-sidebar__address-line text-sm-regular">
+            {fullName}
+          </p>
+        )}
+        {addressText && (
+          <p className="kombos-order-detail-sidebar__address-line text-sm-regular">
+            {addressText}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function OrderSidebar({
+  order,
+  deliveryAddressLabel,
+  billingAddressLabel,
+  paymentInfoLabel,
+  summaryLabel,
+  subtotalLabel,
+  shippingLabel,
+  totalLabel,
+  taxIncludedText,
+  installmentText,
+  singlePaymentText,
+}: Props) {
+  const transactions = order.transactions ?? [];
+  const totalFinalPrice = getIkasOrderFormattedTotalFinalPrice(order);
+  const totalPrice = getIkasOrderFormattedTotalPrice(order);
+  const shippingTotal = getIkasOrderFormattedShippingTotal(order);
+  const adjustments = getIkasOrderDisplayedAdjustments(order);
+
+  return (
+    <div className="kombos-order-detail-sidebar">
+      <AddressBlock
+        label={deliveryAddressLabel}
+        address={order.shippingAddress}
+      />
+
+      <div className="kombos-order-detail-sidebar__divider" />
+
+      <AddressBlock
+        label={billingAddressLabel}
+        address={order.billingAddress}
+      />
+
+      <div className="kombos-order-detail-sidebar__divider" />
+
+      {transactions.length > 0 && (
+        <>
+          <div className="kombos-order-detail-sidebar__section">
+            <p className="kombos-order-detail-sidebar__section-title text-sm-medium">
+              {paymentInfoLabel}
+            </p>
+            <div className="kombos-order-detail-sidebar__payment">
+              {transactions.map((t) => {
+                const methodLabel =
+                  getOrderTransactionPaymentMethodTranslation(t);
+                const amount = getOrderTransactionFormattedAmount(t);
+                const detail = t.paymentMethodDetail;
+                const lastFour = detail?.lastFourDigits ?? "";
+                const cardInfo = detail
+                  ? `${detail.cardAssociation ?? ""} **** **** ****${lastFour}`.trim()
+                  : null;
+                const installmentInfo = detail?.installment?.installmentCount
+                  ? detail.installment.installmentCount > 1
+                    ? `${detail.installment.installmentCount} ${installmentText}`
+                    : singlePaymentText
+                  : null;
+
+                return (
+                  <div
+                    key={t.id}
+                    className="kombos-order-detail-sidebar__payment-block"
+                  >
+                    <div className="kombos-order-detail-sidebar__payment-row">
+                      <span className="text-sm-regular">{methodLabel}</span>
+                      <span className="text-sm-regular">{amount}</span>
+                    </div>
+                    {(installmentInfo || cardInfo) && (
+                      <div className="kombos-order-detail-sidebar__payment-row">
+                        {installmentInfo && (
+                          <span className="text-sm-regular">
+                            {installmentInfo}
+                          </span>
+                        )}
+                        {cardInfo && (
+                          <span className="text-sm-regular">{cardInfo}</span>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className="kombos-order-detail-sidebar__divider" />
+        </>
+      )}
+
+      <div className="kombos-order-detail-sidebar__section">
+        <p className="kombos-order-detail-sidebar__section-title text-sm-medium">
+          {summaryLabel}
+        </p>
+        <div className="kombos-order-detail-sidebar__summary">
+          <div className="kombos-order-detail-sidebar__summary-row">
+            <span className="kombos-order-detail-sidebar__summary-label text-sm-regular">
+              {subtotalLabel}
+            </span>
+            <span className="kombos-order-detail-sidebar__summary-value text-sm-regular">
+              {totalPrice}
+            </span>
+          </div>
+          <div className="kombos-order-detail-sidebar__summary-row">
+            <span className="kombos-order-detail-sidebar__summary-label text-sm-regular">
+              {shippingLabel}
+            </span>
+            <span className="kombos-order-detail-sidebar__summary-value text-sm-regular">
+              {shippingTotal}
+            </span>
+          </div>
+          {adjustments?.map((adj, idx) => (
+            <div key={idx} className="kombos-order-detail-sidebar__summary-row">
+              <span className="kombos-order-detail-sidebar__summary-label text-sm-regular">
+                {getOrderAdjustmentDisplayName(adj)}
+              </span>
+              <span className="kombos-order-detail-sidebar__summary-value text-sm-regular">
+                {getOrderAdjustmentFormattedAmount(adj)}
+              </span>
+            </div>
+          ))}
+          <div className="kombos-order-detail-sidebar__summary-row kombos-order-detail-sidebar__summary-row--total">
+            <div className="kombos-order-detail-sidebar__total-label">
+              <span className="text-sm-medium">{totalLabel}</span>
+              <span className="kombos-order-detail-sidebar__tax-note text-sm-medium">
+                {taxIncludedText}
+              </span>
+            </div>
+            <span className="kombos-order-detail-sidebar__summary-value text-sm-medium">
+              {totalFinalPrice}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+.kombos-order-detail-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .kombos-order-detail-sidebar {
+    width: 22.25rem;
+    min-width: 22.25rem;
+  }
+}
+
+.kombos-order-detail-sidebar__divider {
+  height: 1px;
+  background: var(--kombos-gray-100);
+  width: 100%;
+}
+
+.kombos-order-detail-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.kombos-order-detail-sidebar__section-title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-sidebar__address {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-sidebar__address-line {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-sidebar__payment {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-sidebar__payment-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-sidebar__payment-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-sidebar__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-sidebar__summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.kombos-order-detail-sidebar__summary-label {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-sidebar__summary-value {
+  color: var(--kombos-gray-900);
+  text-align: right;
+}
+
+.kombos-order-detail-sidebar__total-label {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-sidebar__total-label .text-sm-medium:first-child {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-sidebar__tax-note {
+  color: var(--kombos-gray-500);
+}

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

@@ -0,0 +1,156 @@
+import { useState, useMemo } from "preact/hooks";
+import { IkasDisplayedPackage, IkasOrderLineItem } from "@ikas/bp-storefront";
+import { CaretUpSVG, CaretDownSVG } from "../../../../sub-components/icons";
+import OrderItemRow from "../OrderItemRow";
+
+type GroupedEntry =
+  | {
+      isBundleOrder: true;
+      bundleLineId: string;
+      bundleName?: string | null;
+      items: IkasOrderLineItem[];
+    }
+  | { isBundleOrder: false; items: IkasOrderLineItem[] };
+
+function groupOrderLineItems(items: IkasOrderLineItem[]): GroupedEntry[] {
+  const groups: GroupedEntry[] = [];
+
+  items.forEach((item) => {
+    const settings = item.bundleProductSettings;
+
+    if (settings) {
+      const existing = groups.find(
+        (g): g is Extract<GroupedEntry, { isBundleOrder: true }> =>
+          g.isBundleOrder && g.bundleLineId === settings.bundleLineId,
+      );
+      if (existing) {
+        existing.items.push(item);
+      } else {
+        groups.push({
+          isBundleOrder: true,
+          bundleLineId: settings.bundleLineId,
+          bundleName: settings.name,
+          items: [item],
+        });
+      }
+    } else {
+      groups.push({ isBundleOrder: false, items: [item] });
+    }
+  });
+
+  return groups;
+}
+
+interface Props {
+  pkg: IkasDisplayedPackage;
+  quantityLabel: string;
+  cargoCompanyLabel: string;
+  trackingNumberLabel: string;
+}
+
+export default function PackageGroup({
+  pkg,
+  quantityLabel,
+  cargoCompanyLabel,
+  trackingNumberLabel,
+}: Props) {
+  const [open, setOpen] = useState(true);
+  const itemCount = pkg.orderLineItems?.length ?? 0;
+  const grouped = useMemo(
+    () => groupOrderLineItems(pkg.orderLineItems ?? []),
+    [pkg.orderLineItems],
+  );
+
+  return (
+    <div className="kombos-order-detail-pkg">
+      <button
+        type="button"
+        className="kombos-order-detail-pkg__header"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+      >
+        <div className="kombos-order-detail-pkg__header-left">
+          <span className="kombos-order-detail-pkg__status text-sm-medium">
+            {pkg.statusTranslation}
+          </span>
+          <span className="kombos-order-detail-pkg__count text-sm-medium">
+            ({itemCount})
+          </span>
+        </div>
+        <span className="kombos-order-detail-pkg__caret">
+          {open ? <CaretUpSVG /> : <CaretDownSVG />}
+        </span>
+      </button>
+
+      {open && (
+        <div className="kombos-order-detail-pkg__body">
+          <div className="kombos-order-detail-pkg__items">
+            {grouped.map((group, idx) =>
+              group.isBundleOrder ? (
+                <div
+                  key={group.bundleLineId}
+                  className="kombos-order-detail-pkg__bundle"
+                >
+                  {group.bundleName && (
+                    <span className="kombos-order-detail-pkg__bundle-name text-sm-medium">
+                      {group.bundleName}
+                    </span>
+                  )}
+                  <div className="kombos-order-detail-pkg__bundle-items">
+                    {group.items.map((item) => (
+                      <OrderItemRow
+                        key={item.id}
+                        item={item}
+                        quantityLabel={quantityLabel}
+                      />
+                    ))}
+                  </div>
+                </div>
+              ) : (
+                group.items.map((item) => (
+                  <OrderItemRow
+                    key={item.id}
+                    item={item}
+                    quantityLabel={quantityLabel}
+                  />
+                ))
+              ),
+            )}
+          </div>
+
+          {pkg.trackingInfo && (
+            <div className="kombos-order-detail-pkg__tracking">
+              {pkg.trackingInfo.cargoCompany && (
+                <p className="kombos-order-detail-pkg__tracking-line text-sm-regular">
+                  <span>{cargoCompanyLabel} </span>
+                  <span className="text-sm-medium">
+                    {pkg.trackingInfo.cargoCompany}
+                  </span>
+                </p>
+              )}
+              {pkg.trackingInfo.trackingNumber && (
+                <p className="kombos-order-detail-pkg__tracking-line text-sm-regular">
+                  <span>{trackingNumberLabel} </span>
+                  {pkg.trackingInfo.trackingLink ? (
+                    <a
+                      href={pkg.trackingInfo.trackingLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="kombos-order-detail-pkg__tracking-link text-sm-medium"
+                    >
+                      {pkg.trackingInfo.trackingNumber}
+                    </a>
+                  ) : (
+                    <span className="text-sm-medium">
+                      {pkg.trackingInfo.trackingNumber}
+                    </span>
+                  )}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+.kombos-order-detail-pkg {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.kombos-order-detail-pkg__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--kombos-gray-100);
+  border: none;
+  border-radius: 6px;
+  padding: 0.375rem 0.75rem;
+  cursor: pointer;
+  width: 100%;
+}
+
+.kombos-order-detail-pkg__header:focus-visible {
+  outline: 2px solid var(--kombos-gray-900);
+  outline-offset: 2px;
+}
+
+.kombos-order-detail-pkg__header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kombos-order-detail-pkg__status {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-pkg__count {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-pkg__caret {
+  display: flex;
+  align-items: center;
+  color: var(--kombos-gray-900);
+  font-size: 1rem;
+}
+
+.kombos-order-detail-pkg__body {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-order-detail-pkg__items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-order-detail-pkg__tracking {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-pkg__tracking-line {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-pkg__tracking-link {
+  color: var(--kombos-gray-900);
+  text-decoration: underline;
+}
+
+.kombos-order-detail-pkg__tracking-link:hover {
+  color: var(--kombos-gray-700);
+}
+
+/* Bundle group */
+.kombos-order-detail-pkg__bundle {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.kombos-order-detail-pkg__bundle-name {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-pkg__bundle-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-order-detail-pkg__bundle-items .kombos-order-detail-item:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}

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

@@ -0,0 +1,56 @@
+import { IkasOrderLineItem } from "@ikas/bp-storefront";
+import Checkbox from "../../../../sub-components/Checkbox";
+import { MinusSVG, PlusSVG } from "../../../../sub-components/icons";
+import OrderLineItemDisplay from "../OrderLineItemDisplay";
+
+interface Props {
+  item: IkasOrderLineItem;
+  refundQty: number;
+  onToggle: () => void;
+  onDecrease: () => void;
+  onIncrease: () => void;
+}
+
+export default function ReturnItemRow({
+  item,
+  refundQty,
+  onToggle,
+  onDecrease,
+  onIncrease,
+}: Props) {
+  const selected = refundQty > 0;
+
+  return (
+    <div className="kombos-order-detail-return__item">
+      <div className="kombos-order-detail-return__item-row">
+        <Checkbox checked={selected} onChange={onToggle} />
+        <OrderLineItemDisplay item={item} />
+        {selected && item.quantity > 1 && (
+          <div className="kombos-order-detail-return__qty">
+            <button
+              type="button"
+              className="kombos-order-detail-return__qty-btn"
+              onClick={onDecrease}
+              disabled={refundQty <= 1}
+              aria-label="Decrease refund quantity"
+            >
+              <MinusSVG />
+            </button>
+            <span className="kombos-order-detail-return__qty-value text-md-medium">
+              {refundQty}
+            </span>
+            <button
+              type="button"
+              className="kombos-order-detail-return__qty-btn kombos-order-detail-return__qty-btn--plus"
+              onClick={onIncrease}
+              disabled={refundQty >= item.quantity}
+              aria-label="Increase refund quantity"
+            >
+              <PlusSVG />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+.kombos-order-detail-return__item {
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-order-detail-return__item-row {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  flex: 1;
+}
+
+/* Quantity selector for return */
+.kombos-order-detail-return__qty {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-order-detail-return__qty-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  cursor: pointer;
+  color: var(--kombos-gray-900);
+  font-size: 1rem;
+  padding: 0;
+}
+
+.kombos-order-detail-return__qty-btn--plus {
+  background: var(--kombos-gray-50);
+}
+
+.kombos-order-detail-return__qty-btn:hover:not(:disabled) {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-order-detail-return__qty-btn:disabled {
+  color: var(--kombos-gray-300);
+  cursor: not-allowed;
+}
+
+.kombos-order-detail-return__qty-btn:focus-visible {
+  outline: 2px solid var(--kombos-gray-900);
+  outline-offset: 2px;
+}
+
+.kombos-order-detail-return__qty-value {
+  min-width: 2rem;
+  text-align: center;
+  color: var(--kombos-gray-900);
+}