@ikas/component-cli 0.92.0 → 0.94.0

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

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  customerStore,
+  getAccountInfoForm,
+  initAccountInfoForm,
+  setAccountInfoFormFirstName,
+  setAccountInfoFormLastName,
+  setAccountInfoFormPhone,
+  submitAccountInfoForm,
+} from "@ikas/bp-storefront";
+import FormItem from "../../sub-components/FormItem";
+import Input from "../../sub-components/Input";
+import Button from "../../sub-components/Button";
+import SkeletonField from "../../sub-components/SkeletonField";
+import { Props } from "./types";
+
+export function AccountInfoContent({
+  title = "Hesap Bilgilerim",
+  successMessage = "Bilgileriniz guncellendi.",
+  submitButtonText = "Kaydet",
+  submittingButtonText = "Kaydediliyor...",
+  emailLabel = "E-posta",
+}: Props) {
+  const accountForm = getAccountInfoForm(customerStore);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    initAccountInfoForm(accountForm).finally(() => setIsLoading(false));
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    await submitAccountInfoForm(accountForm);
+  };
+
+  function renderFormField(
+    field: typeof accountForm.firstName,
+    id: string,
+    setter: (form: typeof accountForm, value: string) => void,
+    inputProps?: Record<string, unknown>,
+  ) {
+    if (!field) return null;
+    const status = field.hasError ? "error" : "default";
+    return (
+      <FormItem
+        label={field.label}
+        htmlFor={id}
+        status={status}
+        helper={field.hasError ? field.message : undefined}
+      >
+        <Input
+          id={id}
+          value={field.value ?? ""}
+          onInput={(e: Event) =>
+            setter(accountForm, (e.target as HTMLInputElement).value)
+          }
+          {...inputProps}
+        />
+      </FormItem>
+    );
+  }
+
+  return (
+    <div className="kombos-account-info-content">
+      <h1 className="kombos-account-info-content__title text-md-medium">{title}</h1>
+
+      {accountForm.isSuccess && (
+        <div className="kombos-account-info-content__alert kombos-account-info-content__alert--success text-sm-regular">
+          {successMessage}
+        </div>
+      )}
+      {accountForm.isFailure && accountForm.responseMessage && (
+        <div className="kombos-account-info-content__alert kombos-account-info-content__alert--error text-sm-regular">
+          {accountForm.responseMessage}
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="kombos-account-info-content__form">
+          <div className="kombos-account-info-content__row">
+            <SkeletonField />
+            <SkeletonField />
+          </div>
+          <div className="kombos-account-info-content__row">
+            <SkeletonField />
+            <SkeletonField />
+          </div>
+        </div>
+      ) : (
+        <form className="kombos-account-info-content__form" onSubmit={handleSubmit}>
+          <div className="kombos-account-info-content__row">
+            {renderFormField(
+              accountForm.firstName,
+              "account-first-name",
+              setAccountInfoFormFirstName,
+            )}
+            {renderFormField(
+              accountForm.lastName,
+              "account-last-name",
+              setAccountInfoFormLastName,
+            )}
+          </div>
+
+          <div className="kombos-account-info-content__row">
+            <FormItem label={emailLabel} htmlFor="account-email">
+              <Input
+                id="account-email"
+                value={customerStore.customer?.email ?? ""}
+                disabled
+              />
+            </FormItem>
+
+            {renderFormField(
+              accountForm.phone,
+              "account-phone",
+              setAccountInfoFormPhone,
+              { type: "tel" },
+            )}
+          </div>
+
+          <Button
+            variant="primary"
+            loading={accountForm.isSubmitting}
+            className="kombos-account-info-content__submit"
+          >
+            {accountForm.isSubmitting ? submittingButtonText : submitButtonText}
+          </Button>
+        </form>
+      )}
+    </div>
+  );
+}
+
+export default AccountInfoContent;

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

@@ -0,0 +1,57 @@
+/* ── Account Info Content ── */
+.kombos-account-info-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-info-content__title {
+  color: var(--kombos-gray-900);
+}
+
+/* ── Alerts ── */
+.kombos-account-info-content__alert {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+}
+
+.kombos-account-info-content__alert--success {
+  background: rgba(18, 183, 106, 0.08);
+  color: var(--kombos-success);
+}
+
+.kombos-account-info-content__alert--error {
+  background: rgba(255, 60, 72, 0.08);
+  color: var(--kombos-error);
+}
+
+/* ── Form ── */
+.kombos-account-info-content__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-info-content__row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+.kombos-account-info-content__submit {
+  width: fit-content;
+  min-width: 12.5rem;
+  margin-left: auto;
+}
+
+/* ── Tablet (768px+) ── */
+@media (min-width: 768px) {
+  .kombos-account-info-content__row {
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+}
+

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

@@ -0,0 +1,8 @@
+// This file is auto-generated — do not edit manually.
+export interface Props {
+  title?: string;
+  successMessage?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  emailLabel?: string;
+}

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

@@ -0,0 +1,78 @@
+import {
+  IkasOrder,
+  getIkasOrderFormattedOrderedAt,
+  getIkasOrderPackageStatusTranslation,
+} from "@ikas/bp-storefront";
+import { CopySVG } from "../../../../sub-components/icons";
+import { getStatusColor } from "../../../../utils/orderStatus";
+import { showToast } from "../../../../utils/toast";
+
+interface Props {
+  order: IkasOrder;
+  orderNoLabel: string;
+  orderStatusLabel: string;
+  orderDateLabel: string;
+  copiedText: string;
+}
+
+export default function OrderHeader({
+  order,
+  orderNoLabel,
+  orderStatusLabel,
+  orderDateLabel,
+  copiedText,
+}: Props) {
+  const statusLabel = getIkasOrderPackageStatusTranslation(order);
+  const statusColor = getStatusColor(order);
+  const date = getIkasOrderFormattedOrderedAt(order);
+
+  const handleCopy = async () => {
+    if (order.orderNumber) {
+      try {
+        await navigator.clipboard.writeText(order.orderNumber);
+        showToast(copiedText, "success");
+      } catch {
+        // Clipboard API may fail on non-HTTPS or without permissions
+      }
+    }
+  };
+
+  return (
+    <div className="kombos-order-detail-header">
+      <div className="kombos-order-detail-header__info">
+        {order.orderNumber && (
+          <div className="kombos-order-detail-header__row">
+            <span className="text-sm-regular kombos-order-detail-header__label">
+              {orderNoLabel}{" "}
+              <span className="text-sm-medium">{order.orderNumber}</span>
+            </span>
+            <button
+              type="button"
+              className="kombos-order-detail-header__copy"
+              onClick={handleCopy}
+              aria-label="Copy order number"
+            >
+              <CopySVG />
+            </button>
+          </div>
+        )}
+        {statusLabel && (
+          <p className="text-sm-regular kombos-order-detail-header__label">
+            {orderStatusLabel}{" "}
+            <span
+              className="text-sm-medium"
+              style={statusColor ? { color: statusColor } : undefined}
+            >
+              {statusLabel}
+            </span>
+          </p>
+        )}
+        {date && (
+          <p className="text-sm-regular kombos-order-detail-header__label">
+            {orderDateLabel} {date}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+.kombos-order-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--kombos-gray-100);
+  width: 100%;
+}
+
+.kombos-order-detail-header__info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kombos-order-detail-header__row {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-header__label {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-header__copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-500);
+  font-size: 1rem;
+  transition: color 0.15s ease;
+}
+
+.kombos-order-detail-header__copy:hover {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-order-detail-header__copy:focus-visible {
+  outline: 2px solid var(--kombos-gray-900);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,20 @@
+import { IkasOrderLineItem } from "@ikas/bp-storefront";
+import OrderLineItemDisplay from "../OrderLineItemDisplay";
+
+interface Props {
+  item: IkasOrderLineItem;
+  quantityLabel: string;
+}
+
+export default function OrderItemRow({ item, quantityLabel }: Props) {
+  return (
+    <div className="kombos-order-detail-item">
+      <div className="kombos-order-detail-item__row">
+        <OrderLineItemDisplay item={item} />
+        <span className="kombos-order-detail-item__qty text-sm-regular">
+          {item.quantity} {quantityLabel}
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+.kombos-order-detail-item {
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-order-detail-item__row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.kombos-order-detail-item__qty {
+  color: var(--kombos-gray-900);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,112 @@
+import {
+  IkasOrderLineItem,
+  getIkasOrderLineVariantMainImage,
+  getIkasOrderLineVariantHref,
+  getThumbnailSrc,
+  getDefaultSrc,
+  getOrderLineItemFormattedFinalPriceWithQuantity,
+  getOrderLineItemFormattedPriceWithQuantity,
+  hasOrderLineItemDiscount,
+} from "@ikas/bp-storefront";
+import { NoProductSVG } from "../../../../sub-components/icons";
+
+interface Props {
+  item: IkasOrderLineItem;
+}
+
+export default function OrderLineItemDisplay({ item }: Props) {
+  const image = item.variant
+    ? getIkasOrderLineVariantMainImage(item.variant)
+    : null;
+  const imgSrc = image && !image.isVideo ? getThumbnailSrc(image) : null;
+  const videoSrc = image?.isVideo ? getDefaultSrc(image) : null;
+  const hasDiscount = hasOrderLineItemDiscount(item);
+  const finalPrice = getOrderLineItemFormattedFinalPriceWithQuantity(item);
+  const originalPrice = hasDiscount
+    ? getOrderLineItemFormattedPriceWithQuantity(item)
+    : null;
+
+  const variantValues = item.variant?.variantValues ?? [];
+  const href = item.variant
+    ? getIkasOrderLineVariantHref(item.variant)
+    : undefined;
+
+  const ImageWrap = (
+    <div className="kombos-order-detail-line__img-wrap">
+      {videoSrc ? (
+        <video
+          src={videoSrc}
+          className="kombos-order-detail-line__video"
+          muted
+          loop
+          autoPlay
+          playsInline
+        >
+          <track kind="captions" />
+        </video>
+      ) : imgSrc ? (
+        <img
+          src={imgSrc}
+          alt={item.variant?.name ?? ""}
+          loading="lazy"
+          className="kombos-order-detail-line__img"
+        />
+      ) : (
+        <div className="kombos-order-detail-line__placeholder">
+          <NoProductSVG />
+        </div>
+      )}
+    </div>
+  );
+
+  const Name = (
+    <p className="kombos-order-detail-line__name text-sm-medium">
+      {item.variant?.name}
+    </p>
+  );
+
+  return (
+    <>
+      {href ? (
+        <a href={href} className="kombos-order-detail-line__img-link">
+          {ImageWrap}
+        </a>
+      ) : (
+        ImageWrap
+      )}
+      <div className="kombos-order-detail-line__details">
+        {href ? (
+          <a href={href} className="kombos-order-detail-line__name-link">
+            {Name}
+          </a>
+        ) : (
+          Name
+        )}
+        {variantValues.length > 0 &&
+          variantValues.map((v) => (
+            <div
+              key={v.variantTypeId}
+              className="kombos-order-detail-line__variant"
+            >
+              <span className="kombos-order-detail-line__variant-label text-sm-regular">
+                {v.variantTypeName}:
+              </span>
+              <span className="kombos-order-detail-line__variant-value text-sm-regular">
+                {v.variantValueName}
+              </span>
+            </div>
+          ))}
+        <div className="kombos-order-detail-line__prices">
+          <span className="kombos-order-detail-line__price text-sm-medium">
+            {finalPrice}
+          </span>
+          {originalPrice && (
+            <span className="kombos-order-detail-line__price-old text-sm-regular-strike">
+              {originalPrice}
+            </span>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,86 @@
+.kombos-order-detail-line__img-wrap {
+  width: 4.25rem;
+  height: 4.25rem;
+  min-width: 4.25rem;
+  border-radius: 6px;
+  border: 1px solid var(--kombos-gray-100);
+  overflow: hidden;
+}
+
+.kombos-order-detail-line__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.kombos-order-detail-line__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.kombos-order-detail-line__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: 2rem;
+}
+
+.kombos-order-detail-line__details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.kombos-order-detail-line__img-link {
+  display: contents;
+}
+
+.kombos-order-detail-line__name-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.kombos-order-detail-line__name-link:hover .kombos-order-detail-line__name {
+  text-decoration: underline;
+}
+
+.kombos-order-detail-line__name {
+  color: var(--kombos-gray-900);
+  width: fit-content;
+}
+
+.kombos-order-detail-line__variant {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-line__variant-label {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-order-detail-line__variant-value {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-line__prices {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.kombos-order-detail-line__price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-order-detail-line__price-old {
+  color: var(--kombos-gray-500);
+  text-decoration: line-through;
+}