@akinon/projectzero 2.0.0-beta.1 → 2.0.0-beta.11

package/app-template/src/components/types/index.ts

@@ -4,7 +4,10 @@ import { UsePaginationType } from '@akinon/next/hooks/use-pagination';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export interface PaginationProps {

package/app-template/src/middleware.ts

@@ -9,6 +9,7 @@ import { NextMiddleware, NextResponse } from 'next/server';
  */
 
 export const config = {
+  // For .xml.gz type sitemap urls, update '/(.*sitemap\\.xml)' with this regex '/(.*sitemap\\.xml|sitemap/.*.xml(?:.gz)?)/',
   matcher: [
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',

package/app-template/src/plugins.js

@@ -13,5 +13,6 @@ module.exports = [
   'pz-b2b',
   'pz-akifast',
   'pz-saved-card',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-tamara-extension'
 ];

package/app-template/src/redux/middlewares/category.ts

@@ -4,7 +4,7 @@ import { setSelectedFacets } from '@theme/redux/reducers/category';
 
 const getSelectedFacets = (facets: Array<Facet>) => {
   return facets
-    .map((facet) => {
+    ?.map((facet) => {
       return {
         ...facet,
         data: {

package/app-template/src/redux/reducers/category.ts

@@ -32,7 +32,7 @@ const categorySlice = createSlice({
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
-      state.selectedFacets = facets.map((facet) => {
+      state.selectedFacets = facets?.map((facet) => {
         if (facet.key === action.payload.facet.key) {
           facet.data.choices = facet.data.choices
             .map((choice) => {

package/app-template/src/redux/store.ts

@@ -6,6 +6,7 @@ import {
   Action,
   AnyAction,
   configureStore,
+  Middleware,
   Store,
   ThunkAction,
   ThunkDispatch
@@ -13,20 +14,20 @@ import {
 import categoryReducer from '@theme/redux/reducers/category';
 import categoryMiddleware from '@theme/redux/middlewares/category';
 
+const _middlewares: Middleware[] = [...middlewares, categoryMiddleware];
+
 const _reducers = {
   ...reducers,
   category: categoryReducer
 };
 
-const _middlewares = [...middlewares, categoryMiddleware];
-
 export const makeStore = (): Store<{
   [key in keyof typeof _reducers]: ReturnType<typeof _reducers[key]>;
 }> =>
   configureStore({
     reducer: _reducers,
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat([..._middlewares])
+      getDefaultMiddleware().concat(_middlewares)
   });
 
 export type AppStore = ReturnType<typeof makeStore>;

package/app-template/src/utils/convert-facet-search-params.ts

@@ -1,7 +1,7 @@
 import { Facet } from '@akinon/next/types';
 
 const convertFacetSearchParams = (facets: Facet[]) => {
-  const _facets: string[][] = facets.flatMap((facet) => {
+  const _facets: string[][] = facets?.flatMap((facet) => {
     return [
       ...facet.data.choices.map((choice) => {
         return [facet.search_key, choice.value as string];

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

@@ -242,7 +242,7 @@ const ContactForm = () => {
               <span className="text-secondary">*</span>
             </label>
             <textarea
-              className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-none focus:border-black hover:border-black"
+              className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-hidden focus:border-black hover:border-black"
               rows={7}
               name="message"
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -255,13 +255,8 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput
-              name="file"
-              title="file"
-              className="w-full mb-5"
-              {...register('file')}
-            />
-            <Button type="submit" className="w-full font-medium">
+            <FileInput name="file" title="file" {...register('file')} />
+            <Button type="submit" className="w-full font-medium mt-4">
               {t('account.contact.form.submit_button')}
             </Button>
           </form>

package/app-template/src/views/account/content-header.tsx

@@ -31,15 +31,14 @@ export const ContentHeader = (props: Props) => {
       </h3>
       <Select
         onChange={handleChange}
-        className="w-full mb-4 md:mb-0 md:w-56 md:mr-4 text-xs"
+        className="w-full mb-4 bg-white md:mb-0 md:w-56 md:mr-4 text-xs"
         options={orders}
         data-testid="account-orders-header-select"
       ></Select>
       <Button
         className={clsx(
           'w-full md:w-56',
-          isButtonDisabled &&
-            'hover:bg-black hover:text-white disabled:opacity-75'
+          isButtonDisabled && 'hover:bg-black/75 hover:text-white'
         )}
         onClick={handleClick}
         data-testid="account-orders-header-button"

package/app-template/src/views/account/order.tsx

@@ -13,7 +13,7 @@ export const Order = (props) => {
     .reverse()
     .join(' ');
 
-  const orderStatus = getOrderStatus(props.status.value.toString(), t);
+  const orderStatus = getOrderStatus(props?.status?.value?.toString(), t);
 
   return (
     <div className="border border-gray px-5 py-4 text-sm mb-4 last:mb-0">
@@ -58,30 +58,32 @@ export const Order = (props) => {
 
         <div className="w-full flex flex-col justify-between mt-6 mb-2 order-3 md:items-center md:flex-row md:order-none md:gap-20 lg:gap-40">
           <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
-            {props.orderitem_set.slice(0, 3).map((item, index) => (
+            {props?.orderitem_set?.slice(0, 3).map((item, index) => (
               // TODO: Static image will change (TR)
-              <li className="flex-shrink-0" key={index}>
+              <li className="shrink-0" key={index}>
                 <Image
-                  src={item.product.image ? item.product.image : '/noimage.jpg'}
-                  alt={item.product.name}
+                  src={
+                    item?.product?.image ? item.product.image : '/noimage.jpg'
+                  }
+                  alt={item?.product?.name}
                   width={64}
                   height={96}
                 />
               </li>
             ))}
-            {props.orderitem_set.length > 3 && (
-              <div>+ {props.orderitem_set.length - 3}</div>
+            {props?.orderitem_set?.length > 3 && (
+              <div>+ {props?.orderitem_set?.length - 3}</div>
             )}
           </ul>
 
-          <span className={orderStatus.className}>{orderStatus.label}</span>
+          <span className={orderStatus?.className}>{orderStatus?.label}</span>
         </div>
 
         <div
           className="order-2 flex items-end md:order-none"
           data-testid="account-orders-count"
         >
-          {props.orderitem_set.length} {t('account.my_orders.order.items')}
+          {props?.orderitem_set?.length} {t('account.my_orders.order.items')}
         </div>
       </div>
     </div>

package/app-template/src/views/account/orders/order-cancellation-item.tsx

@@ -8,7 +8,8 @@ export const OrderCancellationItem = ({
   item,
   value,
   onChange,
-  selectOption
+  selectOption,
+  fileInput
 }) => {
   const { t } = useLocalization();
   const checkboxStatus =
@@ -38,14 +39,13 @@ export const OrderCancellationItem = ({
     <div className="flex flex-wrap justify-between border-gray border-b mb-4 pb-3">
       <div className="flex gap-3 mb-5 lg:mb-0">
         {checkboxStatus && (
-          // TODO: Static image will change (TR)
           <Checkbox
             className="m-auto"
             data-testid="account-orders-return-checkbox"
             onClick={handleClick}
           />
         )}
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Link href={item.product.absolute_url}>
             <Image
               src={item.product.image ? item.product.image : '/noimage.jpg'}
@@ -80,7 +80,7 @@ export const OrderCancellationItem = ({
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-auto">
+      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-80 gap-4">
         <div className="w-full flex flex-col lg:items-center lg:flex-row">
           {item.active_cancellation_request?.easy_return?.code && (
             <div className="flex items-center">
@@ -93,6 +93,7 @@ export const OrderCancellationItem = ({
 
           {selectOption}
         </div>
+        <div>{fileInput}</div>
       </div>
     </div>
   );

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="flex-shrink-0">
+                            <div className="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

@@ -87,6 +87,7 @@ export const BasketItem = (props: Props) => {
       <li
         key={basketItem.id}
         className="flex border-b border-gray-200 py-3 relative"
+        data-testid="basket-item"
       >
         <div className="w-20 lg:w-[105px] mr-4 shrink-0">
           <Link href={basketItem.product.absolute_url} passHref>

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

@@ -69,7 +69,7 @@ const CategoryActiveFilters = () => {
 
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
-      {facets.map((facet) =>
+      {facets?.map((facet) =>
         facet?.data?.choices
           ?.filter((choice) => choice.is_selected)
           ?.map(

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

@@ -91,12 +91,18 @@ export const CategoryHeader = (props: Props) => {
                     value: String(value)
                   });
                 }}
-                className={clsx(
-                  'cursor-pointer',
-                  Number(layoutSize) === value ? 'fill-black' : 'fill-gray-500'
-                )}
+                className="cursor-pointer"
               >
-                <Icon key={value} name={icon} size={16} />
+                <Icon
+                  key={value}
+                  name={icon}
+                  size={16}
+                  className={
+                    Number(layoutSize) === value
+                      ? 'text-black'
+                      : 'text-gray-500'
+                  }
+                />
               </a>
             ))}
           </div>
@@ -115,7 +121,7 @@ export const CategoryHeader = (props: Props) => {
         </Button>
         <Select
           options={sortOptions}
-          value={sortOptions.find(({ is_selected }) => is_selected).value}
+          value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
           data-testid="list-sorter"
           onChange={(e) => {
             handleSelectFilter({

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

@@ -79,7 +79,7 @@ export default function ListPage(props: ListPageProps) {
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
-                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
+                ? 'fixed bg-black/60 inset-0 z-10 opacity-100'
                 : 'opacity-0'
             )}
           ></div>
@@ -102,7 +102,7 @@ export default function ListPage(props: ListPageProps) {
               </div>
             )}
 
-            {data.products.length === 0 && page > 1 && <LoaderSpinner />}
+            {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
             <div
               className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
@@ -111,7 +111,7 @@ export default function ListPage(props: ListPageProps) {
                 'lg:grid-cols-3': layoutSize === 3
               })}
             >
-              {data.products.map((product, index) => (
+              {data?.products?.map((product, index) => (
                 <ProductItem
                   key={product.pk}
                   product={product}
@@ -121,7 +121,7 @@ export default function ListPage(props: ListPageProps) {
                 />
               ))}
             </div>
-            {data.products.length > 0 && (
+            {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}
                 limit={data.pagination.page_size}

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

@@ -23,7 +23,7 @@ export const Filters = (props: Props) => {
   const [isPending, startTransition] = useTransition();
 
   const haveFilter = useMemo(() => {
-    return facets.some((facet) =>
+    return facets?.some((facet) =>
       facet?.data?.choices?.some((choice) => choice.is_selected)
     );
   }, [facets]);
@@ -50,7 +50,7 @@ export const Filters = (props: Props) => {
         <span>{t('category.filters.ready_to_wear')}</span>
       </div>
 
-      {facets.map((facet) => {
+      {facets?.map((facet) => {
         return (
           <FilterItem
             key={facet.key}

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

@@ -24,7 +24,7 @@ const CheckoutAuth = () => {
 
   return (
     <div className="flex flex-col w-full my-5 lg:flex-row">
-      <div className="flex-1 flex-shrink-0">
+      <div className="flex-1 shrink-0">
         <Login />
         <div className="text-center text-sm text-gray-600 uppercase mt-5">
           <span>

package/app-template/src/views/checkout/layout/header.tsx

@@ -6,7 +6,7 @@ import { Image } from '@akinon/next/components/image';
 
 const CheckoutHeader = () => {
   return (
-    <div className="relative border-b border-gray-100 shadow">
+    <div className="relative border-b border-gray-100 shadow-sm">
       <header
         className={clsx(['py-8', 'px-4', 'mx-auto', 'container', 'md:px-0'])}
       >

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

@@ -18,7 +18,7 @@ const PaymentStep = () => {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
     >
-      <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">
+      <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">

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

@@ -319,7 +319,7 @@ const CheckoutCreditCard = () => {
                         size={16}
                         className="leading-none ml-2"
                       />
-                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
+                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2 border-gray-200">
                         {/* TODO: Fix this */}
                         <Image
                           src="/cvv.jpg"

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

@@ -65,6 +65,7 @@ export default function RedirectionPayment() {
 
         <Checkbox
           className="px-4 md:px-0"
+          data-testid="checkout-agreement"
           {...register('agreement')}
           error={errors.agreement}
         >
@@ -88,7 +89,10 @@ export default function RedirectionPayment() {
           </div>
         )}
 
-        <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
+        <Button
+          data-testid="checkout-submit-button"
+          className={twMerge('w-full md:w-36 px-4 md:px-0')}
+        >
           {payment_option.name}
         </Button>
       </form>

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

@@ -44,7 +44,7 @@ const PaymentOptionButtons = () => {
         {displayedPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
-            className="border px-4 py-3 mt-3 flex h-12"
+            className="border border-gray-200 px-4 py-3 mt-3 flex h-12"
             onClick={scrollToTop}
           >
             <Radio
@@ -69,10 +69,10 @@ const PaymentOptionButtons = () => {
             onClick={() => onClickHandler(option)}
             className={clsx(
               'flex items-center justify-center border-r border-b border-solid',
-              'border-gray-400 text-xs uppercase text-black-800 font-medium',
-              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
+              'border-gray-400 text-xs uppercase text-black-800/60 font-medium',
+              'bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
               {
-                'text-opacity-100 border-b-transparent':
+                'text-black-800/100 border-b-transparent':
                   preOrder?.payment_option?.pk === option.pk
               }
             )}