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

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

@@ -16,6 +16,8 @@ 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;
@@ -32,7 +34,7 @@ export default function ListPage(props: ListPageProps) {
   const router = useRouter();
 
   const layoutSize = useMemo(
-    () => Number(searchParams.get('layout') ?? 3),
+    () => searchParams.get('layout') ?? '4',
     [searchParams]
   );
 
@@ -43,9 +45,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 };
     }
@@ -58,7 +60,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();
 
@@ -67,32 +69,109 @@ 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 lg:my-4">
-        <div className="grid grid-cols-[19rem_1fr]">
-          <Filters
-            isMenuOpen={isMenuOpen}
-            setIsMenuOpen={(open) => dispatch(setMenuOpen(open))}
-          />
+      <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
-            onClick={() => dispatch(setMenuOpen(false))}
             className={clsx(
-              'transition-opacity duration-300 ease-linear lg:hidden',
-              isMenuOpen
-                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
-                : 'opacity-0'
+              'flex flex-col items-center lg:items-stretch',
+              layout !== 'sidebar' && 'col-span-2 lg:col-span-1'
             )}
-          ></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">
@@ -106,11 +185,25 @@ export default function ListPage(props: ListPageProps) {
             {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
             <div
-              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
+              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'
               })}
+              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
@@ -128,6 +221,62 @@ export default function ListPage(props: 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/filter-item.tsx

@@ -1,7 +1,14 @@
 import clsx from 'clsx';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { Facet, FacetChoice } from '@akinon/next/types';
-import { Accordion, Radio, Checkbox, LoaderSpinner } from '../../../components';
+import {
+  Accordion,
+  Radio,
+  Checkbox,
+  LoaderSpinner,
+  Button,
+  Icon
+} from '../../../components';
 import { WIDGET_TYPE } from '../../../types';
 import { SizeFilter } from './size-filter';
 import { toggleFacet } from '@theme/redux/reducers/category';
@@ -25,6 +32,16 @@ interface Props {
   startTransition: (callback: () => void) => void;
 }
 
+interface FilterItemProps {
+  facet: any;
+  isPending: boolean;
+  startTransition: (callback: () => void) => void;
+  isDropdown?: boolean;
+  itemPaddingY?: number;
+  itemPaddingX?: number;
+  itemMarginBottom?: number;
+}
+
 const sortByPredefinedOrder = (
   aLabel: string,
   bLabel: string,
@@ -82,12 +99,21 @@ const getComponentByWidgetType = (widgetType: string, facetKey: string) => {
   return COMPONENT_TYPES[widgetType] || COMPONENT_TYPES[WIDGET_TYPE.category];
 };
 
-export const FilterItem = ({ facet, isPending, startTransition }: Props) => {
+export const FilterItem = ({
+  facet,
+  isPending,
+  startTransition,
+  isDropdown = false,
+  itemPaddingY = 6,
+  itemPaddingX = 0,
+  itemMarginBottom = 0
+}: FilterItemProps) => {
   const dispatch = useAppDispatch();
   const router = useRouter();
   const pathname = usePathname();
 
   const [pendingChoice, setPendingChoice] = useState<string | null>(null);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const handleSelectFilter = ({
     facet,
@@ -96,6 +122,7 @@ export const FilterItem = ({ facet, isPending, startTransition }: Props) => {
     facet: Facet;
     choice: FacetChoice;
   }) => {
+    setIsDrawerOpen(false);
     setPendingChoice(choice.label);
     startTransition(() => {
       if (facet.key === 'category_ids') {
@@ -114,50 +141,119 @@ export const FilterItem = ({ facet, isPending, startTransition }: Props) => {
   const Component = getComponentByWidgetType(facet.widget_type, facet.key);
   const choices = sortChoices(facet?.key, [...(facet?.data?.choices || [])]);
 
-  return (
-    <Accordion
-      key={facet.key}
-      title={facet.name}
-      isCollapse={choices.some((choice) => choice.is_selected)}
-      dataTestId={`filter-${facet.name}`}
-    >
-      <div
-        className={clsx('flex gap-4', {
-          'flex-wrap flex-row': facet.key === sizeKey,
-          'flex-col': facet.key !== sizeKey
-        })}
+  const choiceItemStyles = {
+    paddingTop: `${itemPaddingY}px`,
+    paddingBottom: `${itemPaddingY}px`,
+    paddingLeft: `${itemPaddingX}px`,
+    paddingRight: `${itemPaddingX}px`,
+    marginBottom: `${itemMarginBottom}px`
+  };
+
+  const renderChoice = (choice: FacetChoice, index: number) => (
+    <div key={choice.label} className="relative" style={choiceItemStyles}>
+      <Component
+        data={choice}
+        name={facet.key}
+        onChange={() => handleSelectFilter({ facet, choice })}
+        onClick={() =>
+          facet.key === sizeKey && handleSelectFilter({ facet, choice })
+        }
+        checked={choice.is_selected}
+        data-testid={`${choice.label.trim()}`}
+        disabled={isPending}
       >
-        {choices.map((choice, index) => (
-          <div key={choice.label} className="relative">
-            <Component
-              key={choice.label}
-              data={choice}
-              name={facet.key}
-              onChange={() => handleSelectFilter({ facet, choice })}
-              onClick={() =>
-                facet.key === sizeKey && handleSelectFilter({ facet, choice })
-              }
-              checked={choice.is_selected}
-              data-testid={`${choice.label.trim()}`}
-              disabled={isPending}
+        {choice.label} (
+        <span data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}>
+          {choice.quantity}
+        </span>
+        )
+      </Component>
+
+      {isPending && pendingChoice === choice.label && (
+        <div className="absolute inset-0 flex items-center justify-center z-50">
+          <LoaderSpinner />
+        </div>
+      )}
+    </div>
+  );
+
+  const renderChoices = (className: string) => (
+    <div className={className}>
+      {choices.map((choice, index) => renderChoice(choice, index))}
+    </div>
+  );
+
+  const containerStyles = {
+    paddingTop: `${itemPaddingY}px`,
+    paddingBottom: `${itemPaddingY}px`,
+    paddingLeft: `${itemPaddingX}px`,
+    paddingRight: `${itemPaddingX}px`,
+    marginBottom: `${itemMarginBottom}px`
+  };
+
+  return (
+    <div style={containerStyles}>
+      {isDropdown ? (
+        renderChoices(
+          clsx({
+            'flex flex-wrap gap-4': facet.key === sizeKey,
+            'space-y-2': facet.key !== sizeKey
+          })
+        )
+      ) : (
+        <>
+          <div className="block lg:hidden">
+            <Button
+              className="w-full flex justify-between items-center text-base hover:bg-transparent hover:text-black-750 p-0"
+              appearance="ghost"
+              onClick={() => setIsDrawerOpen(true)}
             >
-              {choice.label} (
-              <span
-                data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
-              >
-                {choice.quantity}
-              </span>
-              )
-            </Component>
-
-            {isPending && pendingChoice === choice.label && (
-              <div className="absolute inset-0 flex items-center justify-center z-50">
-                <LoaderSpinner />
+              <span>{facet.name}</span>
+              <Icon name="arrow-right" size={20} />
+            </Button>
+
+            {isDrawerOpen && (
+              <div className="absolute w-full top-16 inset-x-0 bottom-0 z-50 bg-white">
+                <div className="flex items-center text-black-750 text-sm">
+                  <Button
+                    type="button"
+                    className="text-sm hover:bg-transparent hover:text-black-750"
+                    appearance="ghost"
+                    onClick={() => setIsDrawerOpen(false)}
+                  >
+                    <Icon name="arrow-left" size={16} />
+                  </Button>
+                  <span className="text-sm">{facet.name}</span>
+                </div>
+                <div className="p-4 overflow-y-auto h-full">
+                  {renderChoices(
+                    clsx('flex gap-4', {
+                      'flex-wrap flex-row': facet.key === sizeKey,
+                      'flex-col': facet.key !== sizeKey
+                    })
+                  )}
+                </div>
               </div>
             )}
           </div>
-        ))}
-      </div>
-    </Accordion>
+
+          <div className="hidden lg:block">
+            <Accordion
+              key={facet.key}
+              title={facet.name}
+              isCollapse={choices.some((choice) => choice.is_selected)}
+              dataTestId={`filter-${facet.name}`}
+            >
+              {renderChoices(
+                clsx('flex gap-4', {
+                  'flex-wrap flex-row': facet.key === sizeKey,
+                  'flex-col': facet.key !== sizeKey
+                })
+              )}
+            </Accordion>
+          </div>
+        </>
+      )}
+    </div>
   );
 };