@ikas/component-cli 0.133.0 → 1.2.0

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

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

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

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

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

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

@@ -1,57 +0,0 @@
-.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);
-}