@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/account-info-section/children/AccountAddresses/styles.css

@@ -0,0 +1,41 @@
+/* ── Account Addresses ── */
+.kombos-account-addresses {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-addresses__title {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-addresses__add {
+  width: fit-content;
+  min-width: 12.5rem;
+}
+
+/* Cards grid: 1 col mobile, 2 col desktop */
+.kombos-account-addresses__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .kombos-account-addresses__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Empty state */
+.kombos-account-addresses__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 3rem 0;
+}
+
+.kombos-account-addresses__empty {
+  color: var(--kombos-gray-500);
+}

package/data/section-templates/account-info-section/children/AccountAddresses/types.ts

@@ -0,0 +1,14 @@
+export interface Props {
+  title?: string;
+  emptyMessage?: string;
+  addButtonText?: string;
+  editButtonText?: string;
+  modalTitleAdd?: string;
+  modalTitleEdit?: string;
+  saveButtonText?: string;
+  savingButtonText?: string;
+  cancelButtonText?: string;
+  deleteConfirmTitle?: string;
+  deleteConfirmMessage?: string;
+  deleteButtonText?: string;
+}

package/data/section-templates/account-info-section/children/AccountFavorites/ikas-config-snippet.json

@@ -0,0 +1,57 @@
+{
+  "id": "{{PROJECT_ID}}-account-favorites",
+  "name": "AccountFavorites",
+  "type": "component",
+  "entry": "./src/components/AccountFavorites/index.tsx",
+  "styles": "./src/components/AccountFavorites/styles.css",
+  "props": [
+    {
+      "name": "favoritesLabel",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Favorilerim",
+      "groupId": "texts"
+    },
+    {
+      "name": "emptyFavoritesText",
+      "displayName": "Boş Liste Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Henuz favori urun eklemediniz.",
+      "groupId": "texts"
+    },
+    {
+      "name": "addToCartText",
+      "displayName": "Sepete Ekle Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Sepete Ekle",
+      "groupId": "texts"
+    },
+    {
+      "name": "components",
+      "displayName": "Bileşenler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "privateVarMap": {
+        "product": {
+          "id": "pvm_1772803530689_1",
+          "typeId": "@ikas/bp-storefront-models-IkasProduct"
+        }
+      },
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-card-product-price",
+        "{{PROJECT_ID}}-card-product-variants",
+        "{{PROJECT_ID}}-card-product-name"
+      ]
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Bileşende görünen tüm metinler"
+    }
+  ]
+}

package/data/section-templates/account-info-section/children/AccountFavorites/index.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "preact/hooks";
+import {
+  customerStore,
+  getFavoriteProducts,
+  IkasProduct,
+  getProductOptionSet,
+  IkasComponentRenderer,
+} from "@ikas/bp-storefront";
+import ProductCard from "../../sub-components/ProductCard";
+import PageLoader from "../../sub-components/PageLoader";
+import { Props } from "./types";
+
+export function AccountFavorites(props: Props) {
+  const {
+    favoritesLabel = "Favorilerim",
+    emptyFavoritesText = "Henuz favori urun eklemediniz.",
+    addToCartText = "Sepete Ekle",
+    components,
+  } = props;
+  const [favorites, setFavorites] = useState<IkasProduct[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getFavoriteProducts(customerStore).then((products) => {
+      const items = products ?? [];
+      items.forEach((p) => getProductOptionSet(p));
+      setFavorites(items);
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <div className="kombos-account-favorites">
+      <h1 className="kombos-account-favorites__title text-md-medium">
+        {favoritesLabel}
+      </h1>
+
+      {loading ? (
+        <PageLoader />
+      ) : (
+        <>
+          {favorites.length === 0 && (
+            <p className="kombos-account-favorites__empty text-sm-regular">
+              {emptyFavoritesText}
+            </p>
+          )}
+
+          {favorites.length > 0 && (
+            <div className="kombos-account-favorites__grid">
+              {favorites.map((product) => (
+                <div
+                  key={product.id}
+                  className="kombos-account-favorites__card"
+                >
+                  <ProductCard
+                    product={product}
+                    addToCartText={addToCartText}
+                    sizes="(max-width: 767px) calc(50vw - 36px), (max-width: 1023px) calc(33.3vw - 32px), calc(33.3vw - 48px)"
+                    onFavoriteRemove={() =>
+                      setFavorites((prev) =>
+                        prev.filter((f) => f.id !== product.id),
+                      )
+                    }
+                  />
+                  <IkasComponentRenderer
+                    id={`account-favorites-product-${product.id}`}
+                    components={components}
+                    parentProps={props}
+                    map={{ product }}
+                    className="kombos-account-favorites__card-content"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default AccountFavorites;

package/data/section-templates/account-info-section/children/AccountFavorites/styles.css

@@ -0,0 +1,52 @@
+/* ── Account Favorites ── */
+.kombos-account-favorites {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.kombos-account-favorites__title {
+  display: block;
+  color: var(--kombos-gray-900);
+}
+
+.kombos-account-favorites__empty {
+  color: var(--kombos-gray-500);
+  padding: 3rem 0;
+  text-align: center;
+}
+
+.kombos-account-favorites__grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  gap: 1rem;
+}
+
+.kombos-account-favorites__card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kombos-account-favorites__card-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Tablet (768px+) ── */
+@media (min-width: 768px) {
+  .kombos-account-favorites__grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ── Desktop (1024px+) ── */
+@media (min-width: 1024px) {
+  .kombos-account-favorites__grid {
+    gap: 1.5rem;
+  }
+}

package/data/section-templates/account-info-section/children/AccountFavorites/types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+  favoritesLabel?: string;
+  emptyFavoritesText?: string;
+  addToCartText?: string;
+  components?: any;
+}

package/data/section-templates/account-info-section/children/AccountInfoContent/ikas-config-snippet.json

@@ -0,0 +1,66 @@
+{
+  "id": "{{PROJECT_ID}}-account-info-content",
+  "name": "AccountInfoContent",
+  "type": "component",
+  "entry": "./src/components/AccountInfoContent/index.tsx",
+  "styles": "./src/components/AccountInfoContent/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Hesap Bilgilerim",
+      "groupId": "texts"
+    },
+    {
+      "name": "successMessage",
+      "displayName": "Başarı Mesajı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Bilgileriniz guncellendi.",
+      "groupId": "messages"
+    },
+    {
+      "name": "submitButtonText",
+      "displayName": "Kaydet Butonu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kaydet",
+      "groupId": "buttons"
+    },
+    {
+      "name": "submittingButtonText",
+      "displayName": "Kaydediliyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Kaydediliyor...",
+      "groupId": "buttons"
+    },
+    {
+      "name": "emailLabel",
+      "displayName": "E-posta",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "E-posta",
+      "groupId": "texts"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Sayfa başlığı ve form etiketleri"
+    },
+    {
+      "id": "buttons",
+      "name": "Butonlar",
+      "description": "Kaydet butonu metinleri"
+    },
+    {
+      "id": "messages",
+      "name": "Mesajlar",
+      "description": "Başarı ve hata geri bildirim mesajları"
+    }
+  ]
+}

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

@@ -0,0 +1,7 @@
+export interface Props {
+  title?: string;
+  successMessage?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  emailLabel?: string;
+}

package/data/section-templates/account-info-section/children/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/data/section-templates/account-info-section/children/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/data/section-templates/account-info-section/children/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/data/section-templates/account-info-section/children/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;
+}