@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/account-info-section/children/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/data/section-templates/account-info-section/children/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/data/section-templates/account-info-section/children/AccountOrderDetail/types.ts

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

package/data/section-templates/account-info-section/children/AccountOrders/components/OrderCard/index.tsx

@@ -0,0 +1,122 @@
+import {
+  IkasOrder,
+  getIkasOrderFormattedTotalFinalPrice,
+  getIkasOrderDistinctItemCount,
+  getIkasOrderFormattedOrderedAt,
+  getIkasOrderPackageStatusTranslation,
+  getIkasOrderHref,
+  getIkasOrderLineVariantMainImage,
+  getThumbnailSrc,
+  getDefaultSrc,
+} from "@ikas/bp-storefront";
+import Button from "../../../../sub-components/Button";
+import { NoProductSVG } from "../../../../sub-components/icons";
+import { getStatusColor } from "../../../../utils/orderStatus";
+
+const MAX_THUMBS = 4;
+
+interface Props {
+  order: IkasOrder;
+  detailButtonText: string;
+  orderNoText: string;
+  itemsText: string;
+}
+
+export default function OrderCard({
+  order,
+  detailButtonText,
+  orderNoText,
+  itemsText,
+}: Props) {
+  const date = getIkasOrderFormattedOrderedAt(order);
+  const statusLabel = getIkasOrderPackageStatusTranslation(order);
+  const statusColor = getStatusColor(order);
+  const itemCount = getIkasOrderDistinctItemCount(order);
+  const totalPrice = getIkasOrderFormattedTotalFinalPrice(order);
+  const href = getIkasOrderHref(order);
+
+  const thumbs = (order.orderLineItems ?? [])
+    .map((item) => {
+      const image = getIkasOrderLineVariantMainImage(item.variant);
+      return {
+        id: item.id,
+        src: image && !image.isVideo ? getThumbnailSrc(image) : null,
+        videoSrc: image?.isVideo ? getDefaultSrc(image) : null,
+        isVideo: image?.isVideo ?? false,
+        alt: item.variant?.name ?? "",
+      };
+    })
+    .slice(0, MAX_THUMBS);
+
+  return (
+    <div className="kombos-account-orders__card">
+      <div className="kombos-account-orders__card-info">
+        <div className="kombos-account-orders__card-meta">
+          {date && (
+            <span className="kombos-account-orders__card-date text-sm-regular">
+              {date}
+            </span>
+          )}
+          {statusLabel && (
+            <span
+              className="kombos-account-orders__card-status text-sm-medium"
+              style={statusColor ? { color: statusColor } : undefined}
+            >
+              {statusLabel}
+            </span>
+          )}
+          {order.orderNumber && (
+            <span className="kombos-account-orders__card-order-no text-sm-regular">
+              {orderNoText}{" "}
+              <span className="text-sm-medium">{order.orderNumber}</span>
+            </span>
+          )}
+          <span className="kombos-account-orders__card-summary text-sm-regular">
+            <span className="text-sm-medium">{itemCount}</span> {itemsText}
+            {" - "}
+            <span className="text-sm-medium">{totalPrice}</span>
+          </span>
+        </div>
+
+        {thumbs.length > 0 && (
+          <div className="kombos-account-orders__card-thumbs">
+            {thumbs.map((t) => (
+              <div key={t.id} className="kombos-account-orders__thumb">
+                {t.videoSrc ? (
+                  <video
+                    src={t.videoSrc}
+                    className="kombos-account-orders__thumb-video"
+                    muted
+                    loop
+                    autoPlay
+                    playsInline
+                  >
+                    <track kind="captions" />
+                  </video>
+                ) : t.src ? (
+                  <img src={t.src} alt={t.alt} loading="lazy" />
+                ) : (
+                  <div className="kombos-account-orders__thumb-placeholder">
+                    <NoProductSVG />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="kombos-account-orders__card-action">
+        <a
+          href={href}
+          className="kombos-account-orders__detail-link"
+          aria-label={`${detailButtonText} - ${orderNoText} ${order.orderNumber}`}
+        >
+          <Button variant="secondary" size="s" tabIndex={-1} aria-hidden="true">
+            {detailButtonText}
+          </Button>
+        </a>
+      </div>
+    </div>
+  );
+}

package/data/section-templates/account-info-section/children/AccountOrders/components/OrderCard/styles.css

@@ -0,0 +1,114 @@
+/* ── Order Card ── */
+
+.kombos-account-orders__card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-top: 1px solid var(--kombos-gray-200);
+  border-bottom: 1px solid var(--kombos-gray-200);
+  padding: 1.5rem 0;
+}
+
+.kombos-account-orders__card + .kombos-account-orders__card {
+  border-top: none;
+}
+
+.kombos-account-orders__card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-account-orders__card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-account-orders__card-date {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-orders__card-status {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-account-orders__card-order-no {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-orders__card-summary {
+  color: var(--kombos-gray-900);
+}
+
+/* ── Thumbnails ── */
+
+.kombos-account-orders__card-thumbs {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.kombos-account-orders__thumb {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.kombos-account-orders__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kombos-account-orders__thumb-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.kombos-account-orders__thumb-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--kombos-gray-100);
+  color: var(--kombos-gray-300);
+  font-size: 1.5rem;
+}
+
+/* ── Card Action ── */
+
+.kombos-account-orders__card-action {
+  flex-shrink: 0;
+}
+
+.kombos-account-orders__detail-link {
+  text-decoration: none;
+  display: block;
+}
+
+.kombos-account-orders__detail-link button {
+  width: 100%;
+}
+
+/* ── Responsive: Tablet+ ── */
+
+@media (min-width: 768px) {
+  .kombos-account-orders__card {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .kombos-account-orders__thumb {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+
+  .kombos-account-orders__detail-link button {
+    width: auto;
+  }
+}