@akinon/projectzero 2.0.0-beta.9 → 2.0.1

package/app-template/src/utils/__tests__/theme-page-context.test.ts

@@ -0,0 +1,145 @@
+import {
+  buildAccountPageContext,
+  buildBasketPageContext,
+  buildCustomPageContext,
+  buildHomepagePageContext,
+  buildListingPageContext,
+  buildProductPageContext
+} from '../theme-page-context';
+
+describe('theme-page-context utils', () => {
+  it('builds homepage and custom page contexts', () => {
+    const homepage = buildHomepagePageContext();
+    const customPage = buildCustomPageContext('summer-campaign');
+
+    expect(homepage.homepage.slug).toBe('homepage');
+    expect(customPage.customPage.slug).toBe('summer-campaign');
+    expect(customPage.customPage.title).toBe('Summer Campaign');
+  });
+
+  it('builds product page context with normalized product aliases', () => {
+    const productPageContext = buildProductPageContext({
+      product: {
+        pk: 1,
+        name: 'Spring Sneaker',
+        absolute_url: '/products/spring-sneaker',
+        productimage_set: [{ image: 'https://cdn.example.com/image.jpg' }],
+        price: '199.90',
+        retail_price: '249.90',
+        currency_type: 'TRY',
+        attributes_kwargs: {}
+      },
+      selected_variant: null,
+      variants: []
+    } as never);
+
+    expect(productPageContext.product.title).toBe('Spring Sneaker');
+    expect(productPageContext.product.url).toBe('/products/spring-sneaker');
+    expect(productPageContext.product.images[0].url).toBe(
+      'https://cdn.example.com/image.jpg'
+    );
+  });
+
+  it('builds listing context aliases for category/search/plp style pages', () => {
+    const listingContext = buildListingPageContext({
+      data: {
+        category: {
+          name: 'Sneakers',
+          absolute_url: '/category/sneakers',
+          attributes: {
+            category_seo_title: {
+              value: {
+                text: 'Sneaker landing'
+              }
+            }
+          }
+        },
+        products: [
+          {
+            pk: 1,
+            name: 'Spring Sneaker',
+            absolute_url: '/products/spring-sneaker',
+            productimage_set: [{ image: 'https://cdn.example.com/image.jpg' }],
+            price: '199.90',
+            retail_price: '249.90',
+            currency_type: 'TRY',
+            attributes_kwargs: {}
+          }
+        ],
+        facets: [{ key: 'color', name: 'Color' }],
+        pagination: { count: 12 },
+        sorters: [{ label: 'Newest', value: 'newest' }],
+        search_text: 'sneaker'
+      } as never,
+      breadcrumbData: [{ label: 'Sneakers', path: '/category/sneakers' }] as never,
+      pageType: 'search',
+      path: '/list'
+    });
+
+    expect(listingContext.page.type).toBe('search');
+    expect(listingContext.category.name).toBe('Sneakers');
+    expect(listingContext.search.query).toBe('sneaker');
+    expect(listingContext.plp.products).toHaveLength(1);
+    expect(listingContext.listing.totalProducts).toBe(12);
+  });
+
+  it('builds basket and account contexts from live data', () => {
+    const basketContext = buildBasketPageContext({
+      basket: {
+        pk: 10,
+        total_quantity: 3,
+        total_amount: '799.90',
+        total_product_amount: '899.90',
+        total_discount_amount: '100.00',
+        voucher_code: 'SPRING',
+        discounts: [],
+        basketitem_set: [
+          {
+            id: 1,
+            quantity: 2,
+            price: '399.95',
+            retail_price: '449.95',
+            total_amount: '799.90',
+            unit_price: '399.95',
+            currency_type: 'TRY',
+            image: 'https://cdn.example.com/image.jpg',
+            attributes_kwargs: {
+              color: { label: 'Color', value: 'Black' }
+            },
+            product: {
+              pk: 1,
+              name: 'Spring Sneaker',
+              absolute_url: '/products/spring-sneaker',
+              productimage_set: [
+                { image: 'https://cdn.example.com/image.jpg' }
+              ],
+              price: '399.95',
+              retail_price: '449.95',
+              currency_type: 'TRY',
+              attributes_kwargs: {}
+            }
+          }
+        ]
+      } as never,
+      path: '/baskets/basket'
+    });
+
+    const accountContext = buildAccountPageContext({
+      path: '/account/profile',
+      profileInfo: {
+        first_name: 'Ada',
+        last_name: 'Lovelace',
+        email: 'ada@example.com'
+      },
+      sessionUser: {
+        name: 'Ada Lovelace',
+        email: 'ada@example.com'
+      }
+    });
+
+    expect(basketContext.basket.totalQuantity).toBe(3);
+    expect(basketContext.basket.items[0].title).toBe('Spring Sneaker');
+    expect(accountContext.account.user.fullName).toBe('Ada Lovelace');
+    expect(accountContext.account.route).toBe('/account/profile');
+  });
+});

package/app-template/src/utils/formatDate.ts

@@ -0,0 +1,48 @@
+type Locale = 'en' | 'tr';
+
+const monthNamesByLocale: Record<Locale, string[]> = {
+  en: [
+    'JANUARY',
+    'FEBRUARY',
+    'MARCH',
+    'APRIL',
+    'MAY',
+    'JUNE',
+    'JULY',
+    'AUGUST',
+    'SEPTEMBER',
+    'OCTOBER',
+    'NOVEMBER',
+    'DECEMBER'
+  ],
+  tr: [
+    'OCAK',
+    'ŞUBAT',
+    'MART',
+    'NİSAN',
+    'MAYIS',
+    'HAZİRAN',
+    'TEMMUZ',
+    'AĞUSTOS',
+    'EYLÜL',
+    'EKİM',
+    'KASIM',
+    'ARALIK'
+  ]
+};
+
+export const formatDateToMonthYear = (
+  dateString: string,
+  locale: Locale = 'en'
+): string => {
+  try {
+    const date = new Date(dateString);
+    const monthNames = monthNamesByLocale[locale];
+    const month = monthNames[date.getUTCMonth()];
+    const year = date.getUTCFullYear();
+
+    return `${month} ${year}`;
+  } catch {
+    return dateString;
+  }
+};

package/app-template/src/utils/styles.ts

@@ -0,0 +1,71 @@
+export type ResponsiveSize = 'mobile' | 'tablet' | 'desktop';
+
+const breakpointOrder: ResponsiveSize[] = ['mobile', 'tablet', 'desktop'];
+
+export function getResponsiveStyle(
+  style: Record<string, Record<string, string>> = {},
+  currentBreakpoint: ResponsiveSize,
+  context?: 'slider-item'
+): Record<string, string> {
+  let result = style.default ? { ...style.default } : {};
+  let largestDefinedBreakpoint: ResponsiveSize | undefined;
+
+  for (let i = 0; i < breakpointOrder.length; i++) {
+    const breakpoint = breakpointOrder[i];
+
+    if (breakpoint === currentBreakpoint) break;
+    if (style[breakpoint] && Object.keys(style[breakpoint]).length > 0) {
+      largestDefinedBreakpoint = breakpoint;
+      break;
+    }
+  }
+
+  if (largestDefinedBreakpoint) {
+    const styles = Object.entries(style[largestDefinedBreakpoint]).reduce(
+      (acc, [key, value]) => {
+        if (
+          context === 'slider-item' &&
+          key === 'display' &&
+          value === 'none'
+        ) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    result = {
+      ...result,
+      ...styles
+    };
+  }
+
+  if (
+    style[currentBreakpoint] &&
+    Object.keys(style[currentBreakpoint]).length > 0
+  ) {
+    const styles = Object.entries(style[currentBreakpoint]).reduce(
+      (acc, [key, value]) => {
+        if (
+          context === 'slider-item' &&
+          key === 'display' &&
+          value === 'none'
+        ) {
+          return acc;
+        }
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    result = {
+      ...result,
+      ...styles
+    };
+  }
+
+  return result;
+}

package/app-template/src/utils/theme-page-context.ts

@@ -0,0 +1,309 @@
+import { ROUTES } from '@theme/routes';
+import type {
+  Basket,
+  BreadcrumbResultType,
+  GetCategoryResponse,
+  Product,
+  ProductResult
+} from '@akinon/next/types';
+
+type UnknownRecord = Record<string, unknown>;
+
+const toRecord = (value: unknown): UnknownRecord =>
+  value && typeof value === 'object' ? (value as UnknownRecord) : {};
+
+const toStringValue = (value: unknown, fallback = ''): string =>
+  typeof value === 'string' ? value : fallback;
+
+const humanizeSlug = (value: string) =>
+  value
+    .split('-')
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+
+const normalizeProductImages = (
+  product?: Product | null
+): Array<Record<string, unknown>> =>
+  (product?.productimage_set || []).map((item, index) => ({
+    ...item,
+    url: item.image,
+    alt: `${product?.name || 'Product'} ${index + 1}`
+  }));
+
+const normalizeAttributeEntries = (
+  attributes: unknown
+): Array<Record<string, string>> => {
+  const record = toRecord(attributes);
+
+  return Object.values(record)
+    .map(entry => {
+      const typedEntry = toRecord(entry);
+      const label = toStringValue(typedEntry.label);
+      const value = toStringValue(typedEntry.value);
+
+      if (!label && !value) {
+        return null;
+      }
+
+      return { label, value };
+    })
+    .filter((entry): entry is { label: string; value: string } => entry !== null);
+};
+
+export const normalizeProductEntry = (
+  product?: Product | null
+): Record<string, unknown> | null => {
+  if (!product) {
+    return null;
+  }
+
+  const activePrice = toRecord((product as Product & UnknownRecord).active_price);
+  const images = normalizeProductImages(product);
+
+  return {
+    ...product,
+    title: product.name,
+    name: product.name,
+    url: product.absolute_url,
+    image: product.image || images[0]?.url || '',
+    images,
+    price: activePrice.price ?? product.price,
+    retailPrice: activePrice.retail_price ?? product.retail_price,
+    currency: activePrice.currency_type ?? product.currency_type ?? '',
+    description: product.description || '',
+    attributes: normalizeAttributeEntries(product.attributes_kwargs)
+  };
+};
+
+export const buildProductPageContext = (data: ProductResult) => {
+  const normalizedProduct = normalizeProductEntry(data.product);
+  const normalizedSelectedVariant = normalizeProductEntry(data.selected_variant);
+
+  return {
+    page: {
+      type: 'product',
+      title: normalizedProduct?.title || 'Product',
+      path: normalizedProduct?.url || ''
+    },
+    product: {
+      ...normalizedProduct,
+      selectedVariant: normalizedSelectedVariant,
+      selected_variant: normalizedSelectedVariant,
+      variants: data.variants || []
+    }
+  };
+};
+
+export const buildHomepagePageContext = () => ({
+  page: {
+    type: 'homepage',
+    title: 'Homepage',
+    slug: 'homepage',
+    path: ROUTES.HOME
+  },
+  homepage: {
+    title: 'Homepage',
+    slug: 'homepage',
+    path: ROUTES.HOME
+  }
+});
+
+export const buildCustomPageContext = (slug: string) => {
+  const title = humanizeSlug(slug) || 'Custom Page';
+  const path = `/pages/${slug}`;
+
+  return {
+    page: {
+      type: 'custom-page',
+      title,
+      slug,
+      path
+    },
+    customPage: {
+      title,
+      slug,
+      path
+    }
+  };
+};
+
+export const buildListingPageContext = ({
+  data,
+  breadcrumbData,
+  pageType,
+  path
+}: {
+  data: GetCategoryResponse;
+  breadcrumbData?: BreadcrumbResultType[];
+  pageType: 'category' | 'search' | 'plp';
+  path?: string;
+}) => {
+  const normalizedProducts = (data.products || [])
+    .map(product => normalizeProductEntry(product))
+    .filter((product): product is Record<string, unknown> => product !== null);
+  const categorySeoTitle = toStringValue(
+    data.category?.attributes?.category_seo_title?.value?.text
+  );
+  const effectivePath = path || data.category?.absolute_url || ROUTES.HOME;
+  const totalProducts =
+    Number(toRecord(data.pagination).count) || normalizedProducts.length;
+  const title =
+    pageType === 'search'
+      ? data.search_text
+        ? `Search results for ${data.search_text}`
+        : 'Search Results'
+      : data.category?.name || 'Product Listing';
+
+  const category = {
+    ...(data.category || {}),
+    title: data.category?.name || '',
+    name: data.category?.name || '',
+    url: data.category?.absolute_url || '',
+    description: categorySeoTitle,
+    seoTitle: categorySeoTitle,
+    facets: data.facets || [],
+    products: normalizedProducts
+  };
+
+  const listingBase = {
+    title,
+    path: effectivePath,
+    query: data.search_text || '',
+    products: normalizedProducts,
+    totalProducts,
+    resultCount: totalProducts,
+    facets: data.facets || [],
+    sorters: data.sorters || [],
+    pagination: data.pagination || {},
+    category
+  };
+
+  return {
+    page: {
+      type: pageType,
+      title,
+      path: effectivePath
+    },
+    category,
+    listing: {
+      ...listingBase,
+      breadcrumbs: breadcrumbData || []
+    },
+    search: {
+      ...listingBase,
+      title: data.search_text
+        ? `Search results for ${data.search_text}`
+        : 'Search Results'
+    },
+    plp: {
+      ...listingBase,
+      title: data.category?.name || 'Product Listing'
+    },
+    breadcrumbs: breadcrumbData || []
+  };
+};
+
+export const buildBasketPageContext = ({
+  basket,
+  path
+}: {
+  basket?: Basket | null;
+  path?: string;
+}) => {
+  const normalizedItems = (basket?.basketitem_set || []).map(item => {
+    const normalizedProduct = normalizeProductEntry(item.product);
+
+    return {
+      ...item,
+      title: normalizedProduct?.title || item.product?.name || '',
+      name: normalizedProduct?.name || item.product?.name || '',
+      url: normalizedProduct?.url || item.product?.absolute_url || '',
+      image:
+        item.image ||
+        (typeof normalizedProduct?.image === 'string'
+          ? normalizedProduct.image
+          : ''),
+      price: item.price || normalizedProduct?.price || '',
+      retailPrice: item.retail_price || normalizedProduct?.retailPrice || '',
+      totalAmount: item.total_amount || '',
+      unitPrice: item.unit_price || '',
+      currency: item.currency_type || normalizedProduct?.currency || '',
+      quantity: item.quantity,
+      attributes: normalizeAttributeEntries(
+        item.attributes_kwargs || item.product?.attributes_kwargs
+      ),
+      product: normalizedProduct
+    };
+  });
+
+  return {
+    page: {
+      type: 'basket',
+      title: 'Basket',
+      path: path || ROUTES.BASKET
+    },
+    basket: {
+      id: basket?.pk || null,
+      path: path || ROUTES.BASKET,
+      checkoutUrl: ROUTES.CHECKOUT,
+      continueShoppingUrl: ROUTES.HOME,
+      isEmpty: normalizedItems.length === 0,
+      itemCount: normalizedItems.length,
+      totalQuantity: basket?.total_quantity || 0,
+      totalAmount: basket?.total_amount || '',
+      totalProductAmount: basket?.total_product_amount || '',
+      totalDiscountAmount: basket?.total_discount_amount || '',
+      voucherCode: basket?.voucher_code || '',
+      discounts: basket?.discounts || [],
+      items: normalizedItems
+    }
+  };
+};
+
+export const buildAccountPageContext = ({
+  path,
+  profileInfo,
+  sessionUser
+}: {
+  path?: string;
+  profileInfo?: UnknownRecord | null;
+  sessionUser?: UnknownRecord | null;
+}) => {
+  const normalizedPath = path || ROUTES.ACCOUNT;
+  const firstName =
+    toStringValue(profileInfo?.first_name) ||
+    toStringValue(sessionUser?.firstName) ||
+    toStringValue(sessionUser?.name).split(' ')[0] ||
+    '';
+  const lastName =
+    toStringValue(profileInfo?.last_name) ||
+    toStringValue(sessionUser?.lastName) ||
+    toStringValue(sessionUser?.name).split(' ').slice(1).join(' ') ||
+    '';
+  const email =
+    toStringValue(profileInfo?.email) || toStringValue(sessionUser?.email);
+  const fullName =
+    [firstName, lastName].filter(Boolean).join(' ') ||
+    toStringValue(sessionUser?.name);
+
+  return {
+    page: {
+      type: 'account',
+      title: 'Account',
+      path: normalizedPath
+    },
+    account: {
+      path: normalizedPath,
+      route: normalizedPath,
+      user: {
+        firstName,
+        lastName,
+        fullName,
+        email,
+        phone: toStringValue(profileInfo?.phone),
+        gender: toStringValue(profileInfo?.gender)
+      }
+    }
+  };
+};

package/app-template/src/utils/variant-validation.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Trans } from '@akinon/next/components/trans';
+import { VariantType } from '@akinon/next/types';
+
+export const isVariantSelectionComplete = (variants: VariantType[]): boolean => {
+  return variants?.every((variant) =>
+    variant?.options.some((opt) => opt.is_selected)
+  );
+};
+
+export const getUnselectedVariant = (variants: VariantType[]): VariantType | undefined => {
+  return variants.find((variant) =>
+    variant.options.every((opt) => !opt.is_selected)
+  );
+};
+
+export const createVariantErrorMessage = (unselectedVariant: VariantType) => {
+  const TransComponent = Trans as any;
+  return React.createElement(
+    TransComponent,
+    {
+      i18nKey: "product.please_select_variant",
+      components: {
+        VariantName: React.createElement('span', {}, unselectedVariant.attribute_name)
+      }
+    }
+  );
+};
+
+export const validateVariantSelection = (variants: VariantType[]) => {
+  const unselectedVariant = getUnselectedVariant(variants);
+  
+  if (unselectedVariant) {
+    return {
+      isValid: false,
+      errorMessage: createVariantErrorMessage(unselectedVariant)
+    };
+  }
+
+  return { isValid: true, errorMessage: null };
+};

package/app-template/src/views/account/address-form.tsx

@@ -259,23 +259,25 @@ export const AddressForm = (props: Props) => {
       {/* TODO: Fix select and textarea components */}
 
       <Select
-        className="w-full border-gray-500 text-sm mt-2"
+        className="w-full border-gray-500 text-sm"
         options={countryOptions}
         {...register('country')}
         error={errors.country}
         data-testid="address-form-country"
         label={t('account.address_book.form.country.title')}
+        labelClassName="mb-3"
         required
       />
 
       {city && (
         <Select
-          className="w-full border-gray-500 text-sm mt-2"
+          className="w-full border-gray-500 text-sm"
           options={cityOptions}
           {...register('city')}
           error={errors.city}
           data-testid="address-form-city"
           label={t('account.address_book.form.province.title')}
+          labelClassName="mb-3"
           required
         />
       )}
@@ -283,24 +285,26 @@ export const AddressForm = (props: Props) => {
         <div className="flex gap-4">
           <div className="flex-1">
             <Select
-              className="w-full border-gray-500 text-sm mt-2"
+              className="w-full border-gray-500 text-sm"
               options={townshipOptions}
               {...register('township')}
               error={errors.township}
               data-testid="address-form-township"
               label={t('account.address_book.form.township.title')}
+              labelClassName="mb-3"
               required
             />
           </div>
           {district && (
             <div className="flex-1">
               <Select
-                className="w-full border-gray-500 text-sm mt-2"
+                className="w-full border-gray-500 text-sm"
                 options={districtOptions}
                 {...register('district')}
                 error={errors.district}
                 data-testid="address-form-district"
                 label={t('account.address_book.form.district.title')}
+                labelClassName="mb-3"
                 required
               />
             </div>