@akinon/projectzero 2.0.0-beta.9 → 2.0.1

package/app-template/src/views/anonymous-tracking/order-detail/index.tsx

@@ -22,14 +22,15 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
   const groupedOrder = [];
 
   if (order) {
-    const groupedData = order.orderitem_set.reduce((groups, item) => {
-      const { tracking_number } = item;
-      if (!groups[tracking_number]) {
-        groups[tracking_number] = [];
-      }
-      groups[tracking_number].push(item);
-      return groups;
-    }, {});
+    const groupedData =
+      order?.orderitem_set?.reduce((groups, item) => {
+        const { tracking_number } = item;
+        if (!groups[tracking_number]) {
+          groups[tracking_number] = [];
+        }
+        groups[tracking_number].push(item);
+        return groups;
+      }, {}) || {};
 
     const result = Object.values(groupedData);
 
@@ -67,8 +68,8 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
 
             <div>
               <span className="text-base font-bold">
-                {order.orderitem_set.length}{' '}
-                {t('account.my_orders.detail.products')} {groupedOrder.length}{' '}
+                {order?.orderitem_set?.length}{' '}
+                {t('account.my_orders.detail.products')} {groupedOrder?.length}{' '}
                 {t('account.my_orders.detail.packages')}
               </span>
             </div>
@@ -78,17 +79,17 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
               className="break-words"
             >
               <span>{t('account.my_orders.detail.delivery_address')}</span>:{' '}
-              {order?.shipping_address.line}{' '}
-              {order?.shipping_address.district.name}{' '}
-              {order?.shipping_address.township.name}{' '}
-              {order?.shipping_address.city.name}
+              {order?.shipping_address?.line}{' '}
+              {order?.shipping_address?.district?.name}{' '}
+              {order?.shipping_address?.township?.name}{' '}
+              {order?.shipping_address?.city?.name}
             </div>
           </OrderDetailHeader>
 
           <div>
             {groupedOrder.map((group, i) => {
               const orderStatus = getOrderStatus(
-                group[0].status.value.toString(),
+                group[0]?.status?.value?.toString(),
                 t
               );
 
@@ -112,8 +113,8 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                     <div className="flex justify-between items-center lg:gap-x-12">
                       <div className="text-base">{orderStatus.label}</div>
 
-                      {group[0].tracking_number && group[0].tracking_url && (
-                        <Link href={group[0].tracking_url}>
+                      {group[0]?.tracking_number && group[0]?.tracking_url && (
+                        <Link href={group[0]?.tracking_url}>
                           <Button className="px-7" appearance="filled">
                             {t('account.my_orders.detail.track_shipment')}
                           </Button>
@@ -125,7 +126,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                   <div className="px-4 lg:px-7">
                     {group.map((item, index) => {
                       const itemStatus = getOrderStatus(
-                        item.status.value.toString(),
+                        item?.status?.value?.toString(),
                         t
                       );
 
@@ -135,18 +136,18 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                           key={index}
                         >
                           <div className="flex gap-3 mb-5 lg:mb-0">
-                            <div className="shrink-0">
+                            <div className="flex-shrink-0">
                               <Link
                                 className="block"
-                                href={item.product.absolute_url}
+                                href={item?.product?.absolute_url}
                               >
                                 <Image
                                   src={
-                                    item.product.image
+                                    item?.product?.image
                                       ? item.product.image
                                       : '/noimage.jpg'
                                   }
-                                  alt={item.product.name}
+                                  alt={item?.product?.name}
                                   width={112}
                                   height={150}
                                 />
@@ -155,27 +156,32 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
 
                             <div className="flex flex-col justify-between lg:max-w-48">
                               <div className="text-sm">
-                                <Link href={item.product.absolute_url}>
-                                  {item.product.name}
+                                <Link href={item?.product?.absolute_url}>
+                                  {item?.product?.name}
                                 </Link>
                               </div>
 
                               <div className="text-gray-900 text-xs">
-                                {item.product.attributes.filterable_color && (
+                                {item?.product?.attributes
+                                  ?.filterable_color && (
                                   <div>
                                     <span>
                                       {t('account.my_orders.detail.color')}
                                     </span>
-                                    : {item.product.attributes.filterable_color}
+                                    :{' '}
+                                    {
+                                      item?.product?.attributes
+                                        ?.filterable_color
+                                    }
                                   </div>
                                 )}
 
-                                {item.product.attributes.size && (
+                                {item?.product?.attributes?.size && (
                                   <div>
                                     <span>
                                       {t('account.my_orders.detail.size')}
                                     </span>
-                                    :{item.product.attributes.size}
+                                    :{item?.product?.attributes?.size}
                                   </div>
                                 )}
 
@@ -183,7 +189,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                                   <span>
                                     {t('account.my_orders.detail.code')}
                                   </span>
-                                  : {item.product.base_code}
+                                  : {item?.product?.base_code}
                                 </div>
                               </div>
                             </div>
@@ -202,7 +208,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
 
                               {(item.is_cancellable || item.is_refundable) &&
                                 order.is_cancellable &&
-                                item.status.value == '400' && (
+                                item?.status?.value == '400' && (
                                   <div className="lg:ml-24">
                                     <Link
                                       href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
@@ -256,29 +262,29 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
               <div className="flex justify-between text-sm text-black-700 mb-2">
                 <p>
                   <span>{t('account.my_orders.detail.subtotal')}</span> (
-                  {order?.orderitem_set.length}{' '}
+                  {order?.orderitem_set?.length}{' '}
                   <span>{t('account.my_orders.detail.items')}</span>)
                 </p>
 
                 <Price
                   className="font-normal min-w-max"
                   value={
-                    parseFloat(order.amount_without_discount) -
-                    parseFloat(order.shipping_amount)
+                    parseFloat(order?.amount_without_discount || '0') -
+                    parseFloat(order?.shipping_amount || '0')
                   }
                 />
               </div>
 
-              {order.discountitem_set &&
-                order.discountitem_set.map((item, index) => (
+              {order?.discountitem_set &&
+                order?.discountitem_set?.map((item, index) => (
                   <div
                     className="flex justify-between text-sm text-black-700 mb-2"
                     key={index}
                   >
-                    <p>{item.name}</p>
+                    <p>{item?.name}</p>
                     <Price
                       className="font-normal min-w-max"
-                      value={item.amount}
+                      value={item?.amount}
                       useNegative
                     />
                   </div>
@@ -291,7 +297,8 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                   className="font-normal min-w-max"
                   data-testid="account-orders-detail-total"
                   value={
-                    parseFloat(order.amount) - parseFloat(order.shipping_amount)
+                    parseFloat(order?.amount || '0') -
+                    parseFloat(order?.shipping_amount || '0')
                   }
                 />
               </div>

package/app-template/src/views/basket/basket-item.tsx

@@ -39,7 +39,12 @@ export const BasketItem = (props: Props) => {
     quantity: number,
     attributes: object = {}
   ) => {
-    const requestParams: any = {
+    const requestParams: {
+      product: number;
+      quantity: number;
+      attributes: object;
+      namespace?: string;
+    } = {
       product: productPk,
       quantity,
       attributes

package/app-template/src/views/basket/summary.tsx

@@ -223,6 +223,22 @@ export const Summary = (props: Props) => {
           component={Component.OneClickCheckoutButtons}
           props={checkoutProviderProps}
         />
+
+        <div className="mt-4">
+          <PluginModule
+            component={Component.BasketVirtualTryOn}
+            props={{
+              basketItems: basket.basketitem_set.map((item) => ({
+                pk: item.product.pk,
+                sku: item.product.sku,
+                name: item.product.name,
+                productimage_set: item.product.productimage_set,
+                attributes: item.product.attributes,
+                category: (item.product as any).category
+              }))
+            }}
+          />
+        </div>
       </div>
     </div>
   );

package/app-template/src/views/breadcrumb.tsx

@@ -12,7 +12,7 @@ export interface BreadcrumbProps {
 }
 
 export default function Breadcrumb(props: BreadcrumbProps) {
-  const { t } = useLocalization();
+  const { t, locale } = useLocalization();
   const { breadcrumbList = [] } = props;
 
   const list = [
@@ -28,7 +28,7 @@ export default function Breadcrumb(props: BreadcrumbProps) {
       {list.map((item, index) => (
         <Fragment key={index}>
           <Link href={item.url}>
-            {capitalize(item.text.toLocaleLowerCase())}
+            {capitalize(item.text.toLocaleLowerCase(locale))}
           </Link>
           {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
         </Fragment>

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

@@ -1,34 +1,15 @@
 'use client';
 
 import { Category } from '@akinon/next/types';
-import { Image } from '@akinon/next/components/image';
 
-export const CategoryBanner = (
-  props: Category['attributes']['category_banner']
-) => {
+export const CategoryBanner = (props: Category['attributes']['banner']) => {
   if (Object.keys(props).length === 0) {
     return null;
   }
 
   return (
-    <>
-      <Image
-        src={props.kwargs.value.image_mobile.url}
-        alt="Category Banner"
-        aspectRatio={768 / 375}
-        sizes="768px"
-        fill
-        className="block md:hidden"
-      />
-
-      <Image
-        src={props.kwargs.value.image_desktop.url}
-        alt="Category Banner"
-        aspectRatio={1370 / 400}
-        sizes="1370px"
-        fill
-        className="hidden md:block"
-      />
-    </>
+    <h1 className="text-3xl lg:text-[40px] mb-5 lg:mb-10">
+      {props.value.title}
+    </h1>
   );
 };

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

@@ -57,6 +57,7 @@ export default function ListPage(props: ListPageProps) {
       newUrl.searchParams.delete('page');
       router.push(newUrl.pathname + newUrl.search, undefined);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchParams, data.products, page]);
 
   const { t } = useLocalization();
@@ -79,7 +80,7 @@ export default function ListPage(props: ListPageProps) {
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
-                ? 'fixed bg-black/60 inset-0 z-10 opacity-100'
+                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
                 : 'opacity-0'
             )}
           ></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>
   );
 };

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

@@ -6,7 +6,7 @@ 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, useState, useTransition } from 'react';
+import { useMemo, useTransition } from 'react';
 import { FilterItem } from './filter-item';
 
 interface Props {

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

@@ -12,6 +12,7 @@ export default async function Layout({
   data: GetCategoryResponse;
   children?: React.ReactNode;
   breadcrumbData?: BreadcrumbResultType[];
+  pageContext?: Record<string, unknown>;
 }) {
   return (
     <>