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

package/app-template/src/components/__tests__/badge.test.tsx

@@ -5,7 +5,7 @@ describe('Badge Component', () => {
   let badge;
 
   beforeEach(() => {
-    render(<Badge className="text-md rounded-sm">%90 off</Badge>);
+    render(<Badge className="text-md rounded-xs">%90 off</Badge>);
 
     badge = screen.getByText('%90 off');
   });
@@ -15,6 +15,6 @@ describe('Badge Component', () => {
   });
 
   it('should be classname checked', () => {
-    expect(badge).toHaveClass('text-md rounded-sm');
+    expect(badge).toHaveClass('text-md rounded-xs');
   });
 });

package/app-template/src/components/accordion.tsx

@@ -34,7 +34,7 @@ export const Accordion = ({
   return (
     <div
       className={twMerge(
-        'flex flex-col justify-center border-b pb-4 mb-4 last:border-none',
+        'flex flex-col justify-center border-b border-gray-200 pb-4 mb-4 last:border-none',
         className
       )}
     >

package/app-template/src/components/button.tsx

@@ -1,46 +1,61 @@
 'use client';
 
+import { Link } from '@theme/components';
 import { ButtonProps } from '@theme/components/types';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export const Button = (props: ButtonProps) => {
-  return (
-    <button
-      {...props}
-      className={twMerge(
-        clsx(
-          [
-            'px-4',
-            'h-10',
-            'text-xs',
-            'bg-primary',
-            'text-primary-foreground',
-            'border',
-            'border-primary',
-            'transition-all',
-            'hover:bg-white',
-            'hover:border-primary',
-            'hover:text-primary'
-          ],
-          props.appearance === 'outlined' && [
-            'bg-transparent ',
-            'text-primary ',
-            'hover:bg-primary ',
-            'hover:text-primary-foreground'
-          ],
-          props.appearance === 'ghost' && [
-            'bg-transparent',
-            'border-transparent',
-            'text-primary',
-            'hover:bg-primary',
-            'hover:text-primary-foreground'
-          ]
-        ),
-        props.className
-      )}
+  const {
+    appearance = 'filled',
+    size = 'md',
+    href,
+    target,
+    children,
+    className,
+    ...rest
+  } = props;
+
+  const variants = {
+    filled:
+      'bg-primary text-primary-foreground border border-primary hover:bg-white hover:border-primary hover:text-primary',
+    outlined:
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    ghost:
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground',
+    link: 'px-0 h-auto underline underline-offset-2'
+  };
+
+  const sizes = {
+    sm: 'h-8',
+    md: 'h-10',
+    lg: 'h-12',
+    xl: 'h-14'
+  };
+
+  const buttonClasses = twMerge(
+    clsx(
+      'px-4 text-xs transition-all duration-200',
+      'inline-flex gap-2 justify-center items-center',
+      variants[appearance],
+      sizes[size],
+      className
+    ),
+    className
+  );
+
+  return props.href ? (
+    <Link
+      prefetch={false}
+      target={target}
+      href={href}
+      className={buttonClasses}
     >
-      {props.children}
+      {children}
+    </Link>
+  ) : (
+    <button {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

package/app-template/src/components/file-input.tsx

@@ -1,8 +1,50 @@
+import { useState } from 'react';
 import { forwardRef } from 'react';
 import { FileInputProps } from '@theme/components/types';
+import clsx from 'clsx';
+import { useLocalization } from '@akinon/next/hooks';
 
 export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  function fileInput(props, ref) {
-    return <input type="file" {...props} ref={ref} />;
+  function FileInput({ className, onChange, ...props }, ref) {
+    const { t } = useLocalization();
+    const [fileNames, setFileNames] = useState<string[]>([]);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      setFileNames(files.map((file) => file.name));
+
+      if (onChange) {
+        onChange(event);
+      }
+    };
+
+    return (
+      <div className="relative">
+        <input
+          type="file"
+          {...props}
+          ref={ref}
+          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          onChange={handleFileChange}
+        />
+        <button
+          type="button"
+          className={clsx('bg-primary text-white py-2 px-4 text-sm', className)}
+        >
+          {t('common.file_input.select_file')}
+        </button>
+        <div className="mt-1 text-gray-500">
+          {fileNames.length > 0 ? (
+            <ul className="list-disc pl-4 text-xs">
+              {fileNames.map((name, index) => (
+                <li key={index}>{name}</li>
+              ))}
+            </ul>
+          ) : (
+            <span className="text-xs">{t('common.file_input.no_file')}</span>
+          )}
+        </div>
+      </div>
+    );
   }
 );

package/app-template/src/components/input.tsx

@@ -39,8 +39,8 @@ export const Input = forwardRef<
   const hasFloatingLabel = label && labelStyle === 'floating';
   const inputClass = twMerge(
     clsx(
-      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer',
-      'focus-visible:outline-none', // disable outline on focus
+      'text-xs border px-2.5 h-10 placeholder:text-gray-600 peer disabled:bg-gray-50',
+      'focus-visible:outline-hidden', // disable outline on focus
       error
         ? 'border-error focus:border-error'
         : 'border-gray-500 hover:border-black focus:border-black'
@@ -68,7 +68,7 @@ export const Input = forwardRef<
         className={twMerge(
           'text-xs text-gray-800 transition-all',
           clsx({
-            'absolute left-2.5 pointer-events-none transform flex items-center h-full !top-0  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
+            'absolute left-2.5 pointer-events-none transform flex items-center h-full top-0!  peer-placeholder-shown:-translate-y-2 peer-placeholder-shown:bg-white peer-placeholder-shown:inline-flex peer-placeholder-shown:h-auto':
               hasFloatingLabel,
             'mb-2': !hasFloatingLabel,
             '-translate-y-2 bg-white inline-flex h-auto':

package/app-template/src/components/modal.tsx

@@ -38,7 +38,7 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <ReactPortal wrapperId={portalId}>
-      <div className="fixed top-0 left-0 w-screen h-screen bg-primary bg-opacity-60 z-50" />
+      <div className="fixed top-0 left-0 w-screen h-screen bg-primary/60 z-50" />
       <section
         className={twMerge(
           'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-white',

package/app-template/src/components/select.tsx

@@ -41,14 +41,14 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         ref={ref}
         className={twMerge(
           clsx(
-            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-none',
+            'cursor-pointer truncate h-10 w-40 px-2.5 shrink-0 outline-hidden',
             !borderless &&
               'border border-gray-200 transition-all duration-150 hover:border-primary'
           ),
           className
         )}
       >
-        {options.map((option) => (
+        {options?.map((option) => (
           <option
             key={option.value}
             value={option.value}

package/app-template/src/components/shimmer.tsx

@@ -12,7 +12,7 @@ export const Shimmer: React.FC<ShimmerProps> = ({ className }) => {
     >
       <div
         className={twMerge(
-          'w-full h-full bg-black bg-opacity-20 shadow-[0 0 30px 30px rgba(255,255,255,0.2)]',
+          'w-full h-full bg-black/20 shadow-[0 0 30px 30px rgba(255,255,255,0.2)]',
           className
         )}
       ></div>

package/app-template/src/components/tabs.tsx

@@ -39,7 +39,7 @@ export const Tabs = (props: Props) => {
             tabBarPosition === 'left' || tabBarPosition === 'right'
         })}
       >
-        {children.map((item, index) => (
+        {children?.map((item, index) => (
           <Tab
             key={item.props.title}
             title={item.props.title}
@@ -52,7 +52,7 @@ export const Tabs = (props: Props) => {
         ))}
       </ul>
 
-      <div className="w-full">{children[selectedTabIndex]}</div>
+      <div className="w-full">{children?.[selectedTabIndex]}</div>
     </div>
   );
 };

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/settings.js

@@ -61,6 +61,5 @@ module.exports = {
   ],
   redis: {
     defaultExpirationTime: 900 // 15 min
-  },
-  customNotFoundEnabled: false
+  }
 };

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

@@ -60,7 +60,7 @@ export const Order = (props) => {
           <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
             {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}

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

@@ -135,7 +135,7 @@ 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}

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/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
               }
             )}