@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.21

package/app-template/src/views/category/category-info.tsx

@@ -16,8 +16,6 @@ import { Link, LoaderSpinner } from '@akinon/next/components';
 import { ROUTES } from '@theme/routes';
 import { useRouter } from '@akinon/next/hooks';
 import { RootState } from '@theme/redux/store';
-import { NativeWidgetProvider, useNativeWidget } from './native-widget-context';
-import { useProductList } from './product-list-registrar';
 
 interface ListPageProps {
   data: GetCategoryResponse;
@@ -34,7 +32,7 @@ export default function ListPage(props: ListPageProps) {
   const router = useRouter();
 
   const layoutSize = useMemo(
-    () => searchParams.get('layout') ?? '4',
+    () => Number(searchParams.get('layout') ?? 3),
     [searchParams]
   );
 
@@ -45,9 +43,9 @@ export default function ListPage(props: ListPageProps) {
 
   const itemDimensions = useMemo(() => {
     switch (layoutSize) {
-      case '2':
+      case 2:
         return { width: 510, height: 765 };
-      case '3':
+      case 3:
       default:
         return { width: 340, height: 510 };
     }
@@ -60,7 +58,7 @@ export default function ListPage(props: ListPageProps) {
       router.push(newUrl.pathname + newUrl.search, undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, data?.products, page]);
+  }, [searchParams, data.products, page]);
 
   const { t } = useLocalization();
 
@@ -69,109 +67,32 @@ export default function ListPage(props: ListPageProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.facets]);
 
-  return (
-    <NativeWidgetProvider>
-      <ListPageContent data={data} />
-    </NativeWidgetProvider>
-  );
-}
-
-function ListPageContent({ data }: ListPageProps) {
-  const dispatch = useAppDispatch();
-  const isMenuOpen = useAppSelector(
-    (state: RootState) => state.category.isMenuOpen
-  );
-  const {
-    isDesigner,
-    filterProperties: registrarProps,
-    productsStyles: registrarProductsStyles,
-    paginationProperties: registrarPaginationProps,
-    paginationStyles: registrarPaginationStyles
-  } = useProductList();
-  const {
-    filterProperties: widgetProps,
-    productsStyles: widgetProductsStyles,
-    paginationProperties: widgetPaginationProps,
-    paginationStyles: widgetPaginationStyles
-  } = useNativeWidget();
-
-  // Use registrar properties in designer mode, widget properties otherwise
-  const filterProperties = isDesigner ? registrarProps : widgetProps;
-  const productsStyles = isDesigner
-    ? registrarProductsStyles
-    : widgetProductsStyles;
-  const paginationProperties = isDesigner
-    ? { ...widgetPaginationProps, ...registrarPaginationProps }
-    : widgetPaginationProps;
-  const paginationStyles = isDesigner
-    ? { ...widgetPaginationStyles, ...registrarPaginationStyles }
-    : widgetPaginationStyles;
-  const { t } = useLocalization();
-
-  const searchParams = useSearchParams();
-
-  const layoutSize = useMemo(
-    () => searchParams.get('layout') ?? '4',
-    [searchParams]
-  );
-
-  const page = useMemo(
-    () => Number(searchParams.get('page') ?? 1),
-    [searchParams]
-  );
-
-  const itemDimensions = useMemo(() => {
-    switch (layoutSize) {
-      case '2':
-        return { width: 510, height: 765 };
-      case '3':
-      default:
-        return { width: 340, height: 510 };
-    }
-  }, [layoutSize]);
-
-  // Get layout from widget properties
-  const layout = (filterProperties.layout as string) || 'top';
-
   return (
     <>
-      <div className="container px-4 mx-auto lg:px-0">
-        <div
-          className={clsx(
-            'grid',
-            layout === 'sidebar' && 'lg:grid-cols-[280px_1fr] lg:gap-8'
-          )}
-        >
-          {layout === 'sidebar' && (
-            <>
-              <Filters
-                isMenuOpen={isMenuOpen}
-                totalCount={data.pagination?.total_count}
-                setIsMenuOpen={(open) => dispatch(setMenuOpen(open))}
-                sortOptions={data.sorters}
-              />
-              <div
-                onClick={() => dispatch(setMenuOpen(false))}
-                className={clsx(
-                  'transition-opacity duration-300 ease-linear lg:hidden',
-                  isMenuOpen
-                    ? 'fixed bg-black bg-opacity-60 top-16 inset-x-0 bottom-0 z-10 opacity-100 pointer-events-auto'
-                    : 'opacity-0 pointer-events-none'
-                )}
-              ></div>
-            </>
-          )}
+      <div className="container px-4 mx-auto lg:px-0 lg:my-4">
+        <div className="grid grid-cols-[19rem_1fr]">
+          <Filters
+            isMenuOpen={isMenuOpen}
+            setIsMenuOpen={(open) => dispatch(setMenuOpen(open))}
+          />
           <div
+            onClick={() => dispatch(setMenuOpen(false))}
             className={clsx(
-              'flex flex-col items-center lg:items-stretch',
-              layout !== 'sidebar' && 'col-span-2 lg:col-span-1'
+              'transition-opacity duration-300 ease-linear lg:hidden',
+              isMenuOpen
+                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
+                : 'opacity-0'
             )}
-          >
+          ></div>
+          <div className="flex flex-col items-center lg:items-stretch col-span-2 lg:col-span-1">
             <CategoryHeader
               totalCount={data.pagination?.total_count}
               setMenuStatus={() => dispatch(setMenuOpen(true))}
               sortOptions={data.sorters}
             />
+            <div className="hidden lg:block">
+              <CategoryActiveFilters />
+            </div>
 
             {data.products?.length === 0 && page === 1 && (
               <div className="text-center bg-gray-200 px-5 py-20">
@@ -185,25 +106,11 @@ function ListPageContent({ data }: ListPageProps) {
             {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
             <div
-              className={clsx('grid grid-cols-2 md:grid-cols-3', {
-                'lg:grid-cols-2': layoutSize === '2',
-                'lg:grid-cols-3': layoutSize === '3',
-                'lg:grid-cols-4': layoutSize === '4',
-                'lg:grid-cols-6': layoutSize === '6'
+              className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
+                'md:grid-cols-3': layoutSize === 3,
+                'lg:grid-cols-2': layoutSize === 2,
+                'lg:grid-cols-3': layoutSize === 3
               })}
-              style={{
-                gap: `${(productsStyles['gap-y'] as string) || '48px'} ${
-                  (productsStyles['gap-x'] as string) || '16px'
-                }`,
-                paddingTop: (productsStyles['padding-top'] as string) || '0px',
-                paddingBottom:
-                  (productsStyles['padding-bottom'] as string) || '0px',
-                paddingLeft:
-                  (productsStyles['padding-left'] as string) || '0px',
-                paddingRight:
-                  (productsStyles['padding-right'] as string) || '0px'
-              }}
-              data-section-id="products-section"
             >
               {data?.products?.map((product, index) => (
                 <ProductItem
@@ -221,62 +128,6 @@ function ListPageContent({ data }: ListPageProps) {
                 limit={data.pagination.page_size}
                 currentPage={data.pagination.current_page}
                 numberOfPages={data.pagination.num_pages}
-                type={
-                  (paginationProperties.type as 'list' | 'more' | 'infinite') ||
-                  'list'
-                }
-                customStyles={{
-                  marginTop:
-                    (paginationStyles['margin-top'] as string) || '32px',
-                  marginBottom:
-                    (paginationStyles['margin-bottom'] as string) || '16px',
-                  pageFontSize:
-                    (paginationStyles['page-font-size'] as string) || '14px',
-                  pageColor:
-                    (paginationStyles['page-color'] as string) || '#9ca3af',
-                  pageActiveColor:
-                    (paginationStyles['page-active-color'] as string) ||
-                    '#1a1a1a',
-                  pageActiveFontWeight:
-                    (paginationStyles['page-active-font-weight'] as string) ||
-                    '600',
-                  pageGap: (paginationStyles['page-gap'] as string) || '8px',
-                  pageBgColor:
-                    (paginationStyles['page-bg-color'] as string) ||
-                    'transparent',
-                  pageActiveBgColor:
-                    (paginationStyles['page-active-bg-color'] as string) ||
-                    'transparent',
-                  pagePaddingX:
-                    (paginationStyles['page-padding-x'] as string) || '8px',
-                  pagePaddingY:
-                    (paginationStyles['page-padding-y'] as string) || '4px',
-                  pageBorderRadius:
-                    (paginationStyles['page-border-radius'] as string) || '0px',
-                  pageBorderWidth:
-                    (paginationStyles['page-border-width'] as string) || '0px',
-                  pageBorderColor:
-                    (paginationStyles['page-border-color'] as string) ||
-                    '#e5e7eb',
-                  pageActiveBorderColor:
-                    (paginationStyles['page-active-border-color'] as string) ||
-                    '#1a1a1a',
-                  arrowColor:
-                    (paginationStyles['arrow-color'] as string) || '#1a1a1a',
-                  buttonBgColor:
-                    (paginationStyles['button-bg-color'] as string) ||
-                    '#000000',
-                  buttonTextColor:
-                    (paginationStyles['button-text-color'] as string) ||
-                    '#ffffff',
-                  buttonBorderRadius:
-                    (paginationStyles['button-border-radius'] as string) ||
-                    '4px',
-                  buttonPaddingX:
-                    (paginationStyles['button-padding-x'] as string) || '20px',
-                  buttonPaddingY:
-                    (paginationStyles['button-padding-y'] as string) || '12px'
-                }}
               />
             )}
           </div>

package/app-template/src/views/category/filters/index.tsx

@@ -1,56 +1,27 @@
 'use client';
 
 import clsx from 'clsx';
-import { Button, Icon, Select } from '@theme/components';
-import { useRouter, useLocalization } from '@akinon/next/hooks';
+import { Button, Icon } from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { resetSelectedFacets } from '@theme/redux/reducers/category';
 import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useMemo, useTransition, useState, CSSProperties } from 'react';
+import { useMemo, useTransition } from 'react';
 import { FilterItem } from './filter-item';
-import { SortOption } from '@akinon/next/types';
-import { usePathname, useSearchParams } from 'next/navigation';
-import { useProductList } from '../product-list-registrar';
-import { useNativeWidget } from '../native-widget-context';
 
 interface Props {
   isMenuOpen: boolean;
   setIsMenuOpen: (isMenuOpen: boolean) => void;
-  totalCount?: number;
-  sortOptions: SortOption[];
 }
 
 export const Filters = (props: Props) => {
   const facets = useAppSelector((state) => state.category.facets);
   const dispatch = useAppDispatch();
   const { t } = useLocalization();
-  const { isMenuOpen, setIsMenuOpen, totalCount, sortOptions } = props;
-  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const { isMenuOpen, setIsMenuOpen } = props;
 
   const [isPending, startTransition] = useTransition();
 
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-
-  // Get styles and properties from both contexts
-  const {
-    isDesigner,
-    filterStyles: registrarStyles,
-    filterProperties: registrarProps
-  } = useProductList();
-  const { filterStyles: widgetStyles, filterProperties: widgetProps } =
-    useNativeWidget();
-
-  // Use registrar data in designer mode, widget data otherwise
-  const filterStyles = isDesigner ? registrarStyles : widgetStyles;
-
-  // Merge properties - registrar props override widget props for live updates
-  const filterProperties = {
-    ...widgetProps,
-    ...registrarProps
-  };
-
   const haveFilter = useMemo(() => {
     return facets?.some((facet) =>
       facet?.data?.choices?.some((choice) => choice.is_selected)
@@ -61,181 +32,50 @@ export const Filters = (props: Props) => {
     dispatch(resetSelectedFacets());
   };
 
-  const handleSelectFilter = ({
-    key,
-    value
-  }: {
-    key: string;
-    value: string;
-  }) => {
-    const urlSearchParams = new URLSearchParams(searchParams.toString());
-
-    urlSearchParams.set(key, value);
-
-    router.push(pathname + '?' + urlSearchParams.toString());
-  };
-
-  // Get layout from properties
-  const layout = (filterProperties.layout as string) || 'top';
-  const containerStyles = filterStyles as CSSProperties;
-
-  // Parse item properties (they come as strings like '14px' from Theme Editor)
-  const itemPaddingY =
-    typeof filterProperties['item-padding-y'] === 'number'
-      ? filterProperties['item-padding-y']
-      : typeof filterProperties['item-padding-y'] === 'string'
-      ? parseInt(filterProperties['item-padding-y'], 10)
-      : 6;
-  const itemPaddingX =
-    typeof filterProperties['item-padding-x'] === 'number'
-      ? filterProperties['item-padding-x']
-      : typeof filterProperties['item-padding-x'] === 'string'
-      ? parseInt(filterProperties['item-padding-x'], 10)
-      : 0;
-  const itemMarginBottom =
-    typeof filterProperties['item-margin-bottom'] === 'number'
-      ? filterProperties['item-margin-bottom']
-      : typeof filterProperties['item-margin-bottom'] === 'string'
-      ? parseInt(filterProperties['item-margin-bottom'], 10)
-      : 0;
-
-  // Sidebar layout (desktop + mobile)
-  if (layout === 'sidebar') {
-    return (
-      <>
-        {/* Mobile overlay backdrop */}
-        {isMenuOpen && (
-          <div
-            className="fixed inset-0 bg-black/80 z-40 lg:hidden transition-opacity duration-300"
-            onClick={() => setIsMenuOpen(false)}
+  return (
+    <div
+      className={clsx(
+        'w-9/10 fixed left-0 top-0 bottom-0 bg-white z-20 p-6 transition-all ease-in duration-300 lg:static lg:block lg:mr-16 lg:text-sm lg:p-0 lg:pt-4',
+        isMenuOpen
+          ? 'flex flex-col opacity-100 overflow-auto'
+          : 'opacity-0 invisible absolute -translate-x-full lg:opacity-100 lg:visible lg:translate-x-0'
+      )}
+    >
+      <div className="flex justify-between mb-6 lg:hidden">
+        <h3 className="text-2xl">{t('category.filters.title')}</h3>
+        <Icon name="close" size={22} onClick={() => setIsMenuOpen(false)} />
+      </div>
+      <div className="flex justify-between items-center mb-6 lg:hidden">
+        <span className="text-sm">1 {t('category.filters.results')}</span>
+        <span>{t('category.filters.ready_to_wear')}</span>
+      </div>
+
+      {facets?.map((facet) => {
+        return (
+          <FilterItem
+            key={facet.key}
+            facet={facet}
+            isPending={isPending}
+            startTransition={startTransition}
           />
-        )}
-
-        {/* Mobile slide-in menu */}
-        <div
-          className={clsx(
-            'w-11/12 fixed left-0 top-0 bottom-0 bg-white z-50 transition-all ease-in duration-300 lg:hidden',
-            isMenuOpen
-              ? 'flex flex-col opacity-100 overflow-auto'
-              : 'opacity-0 invisible absolute -translate-x-full'
-          )}
-          style={containerStyles}
-          data-section-id="filters-section"
-        >
-          <div className="relative flex items-center justify-center mb-6 border-b border-black-650 pt-2 pb-3">
-            <div className="flex flex-col items-center text-center gap-1 text-black-750">
-              <h3 className="text-sm">{t('category.filters.mobile_title')}</h3>
-              <span className="text-[10px]">
-                {totalCount} {t('category.header.results')}
-              </span>
-            </div>
-            <Button
-              type="button"
-              appearance="ghost"
-              aria-label="Close Filter Menu"
-              onClick={() => setIsMenuOpen(false)}
-              className="absolute right-4 p-0 text-black bg-transparent hover:bg-transparent hover:text-black"
-            >
-              <Icon name="close" size={16} />
-            </Button>
-          </div>
-
-          <div className="px-4">
-            {facets?.map((facet) => {
-              return (
-                <FilterItem
-                  key={facet.key}
-                  facet={facet}
-                  isPending={isPending}
-                  startTransition={startTransition}
-                  itemPaddingY={itemPaddingY}
-                  itemPaddingX={itemPaddingX}
-                  itemMarginBottom={itemMarginBottom}
-                />
-              );
-            })}
-          </div>
-
-          <div className="px-4 flex items-center justify-between text-black-750 text-sm">
-            {t('category.header.sort_by')}:
-            <Select
-              options={sortOptions}
-              value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
-              data-testid="list-sorter"
-              className="border-0 text-black-750 text-sm"
-              onChange={(e) => {
-                handleSelectFilter({
-                  key: 'sorter',
-                  value: e.currentTarget.value
-                });
-              }}
-              borderless={false}
-            />
-          </div>
-
-          <div className="p-8">
-            <CategoryActiveFilters />
-          </div>
-
-          {haveFilter && (
-            <div className="px-4">
-              <Button
-                onClick={handleResetFilter}
-                appearance="filled"
-                className="w-full mt-4"
-                data-section-id="filters-section"
-              >
-                {t('category.filters.clear_all')}
-              </Button>
-            </div>
-          )}
+        );
+      })}
+
+      <div className="lg:hidden">
+        <CategoryActiveFilters />
+      </div>
+
+      {haveFilter && (
+        <div className="lg:hidden">
+          <Button
+            onClick={handleResetFilter}
+            appearance="outlined"
+            className="w-full mt-4 lg:hidden"
+          >
+            {t('category.filters.clear_all')}
+          </Button>
         </div>
-
-        {/* Desktop sidebar */}
-        <aside
-          className="hidden lg:block lg:col-span-1"
-          style={containerStyles}
-          data-section-id="filters-section"
-        >
-          <div className="sticky top-24">
-            <h3 className="text-lg font-medium mb-4">
-              {t('category.filters.title')}
-            </h3>
-
-            <div>
-              {facets?.map((facet) => {
-                return (
-                  <FilterItem
-                    key={facet.key}
-                    facet={facet}
-                    isPending={isPending}
-                    startTransition={startTransition}
-                    itemPaddingY={itemPaddingY}
-                    itemPaddingX={itemPaddingX}
-                    itemMarginBottom={itemMarginBottom}
-                  />
-                );
-              })}
-            </div>
-
-            {haveFilter && (
-              <div className="mt-6">
-                <Button
-                  onClick={handleResetFilter}
-                  appearance="outlined"
-                  className="w-full"
-                  data-section-id="filters-section"
-                >
-                  {t('category.filters.clear_all')}
-                </Button>
-              </div>
-            )}
-          </div>
-        </aside>
-      </>
-    );
-  }
-
-  // Top layout - return null, handled in category-header
-  return null;
+      )}
+    </div>
+  );
 };

package/app-template/src/views/category/layout.tsx

@@ -1,10 +1,8 @@
 import clsx from 'clsx';
 import { BreadcrumbResultType, GetCategoryResponse } from '@akinon/next/types';
-import ThemePlaceholder from '@akinon/next/components/theme-editor/theme-placeholder';
 import Breadcrumb from '@theme/views/breadcrumb';
 import { CategoryBanner } from '@theme/views/category/category-banner';
 import ListPage from '@theme/views/category/category-info';
-import ProductListRegistrar from '@theme/views/category/product-list-registrar';
 
 export default async function Layout({
   data,
@@ -14,10 +12,10 @@ export default async function Layout({
   data: GetCategoryResponse;
   children?: React.ReactNode;
   breadcrumbData?: BreadcrumbResultType[];
+  pageContext?: Record<string, unknown>;
 }) {
   return (
-    <ProductListRegistrar>
-      <ThemePlaceholder slug="list-page-body-new" />
+    <>
       <div
         className={clsx(
           data?.category?.attributes?.category_banner
@@ -28,16 +26,16 @@ export default async function Layout({
         {children}
         <div
           className={clsx(
-            'my-10 lg:my-16',
+            'my-4 lg:mt-7',
             data?.category?.attributes?.category_banner &&
               'lg:absolute lg:inset-x-0 z-10 container lg:my-4 mx-auto'
           )}
         >
           <Breadcrumb breadcrumbList={breadcrumbData} />
         </div>
-        <CategoryBanner {...data?.category?.attributes?.banner} />
+        <CategoryBanner {...data?.category?.attributes?.category_banner} />
       </div>
       <ListPage data={data} />
-    </ProductListRegistrar>
+    </>
   );
 }

package/app-template/src/views/checkout/index.tsx

@@ -1,8 +1,3 @@
 export * from './step-button';
 export * from './step-list';
 export * from './summary';
-export * from './checkout-address-registrar';
-export * from './checkout-delivery-method-registrar';
-export * from './checkout-payment-options-registrar';
-export * from './checkout-summary-registrar';
-export * from './checkout-buttons-registrar';

package/app-template/src/views/checkout/steps/payment/index.tsx

@@ -4,7 +4,6 @@ import { CheckoutPaymentOption } from '@akinon/next/types';
 import clsx from 'clsx';
 import { RootState } from '@theme/redux/store';
 import PaymentOptionButtons from './payment-option-buttons';
-import { CheckoutPaymentOptionsRegistrar } from '@theme/views/checkout/checkout-payment-options-registrar';
 
 export const PaymentOptionViews: Array<CheckoutPaymentOption> = [];
 
@@ -19,10 +18,8 @@ const PaymentStep = () => {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
     >
-      <div className="w-full mt-4 md:border md:border-gray-400 md:-mb-px md:z-10 md:mt-0 md:border-b-0 order-2 md:order-none">
-        <CheckoutPaymentOptionsRegistrar>
-          <PaymentOptionButtons />
-        </CheckoutPaymentOptionsRegistrar>
+      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto">
+        <PaymentOptionButtons />
       </div>
       <div className="w-full border border-solid border-gray-400 bg-white">
         <SelectedPaymentOptionView />