@akinon/projectzero 2.0.0-beta.4 → 2.0.0-beta.6

package/app-template/src/views/header/search/index.tsx

@@ -22,19 +22,31 @@ export default function Search() {
     if (isSearchOpen) {
       inputRef.current?.focus();
       document.body.style.overflow = 'hidden';
+
+      const handleEscKey = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          dispatch(closeSearch());
+        }
+      };
+
+      document.addEventListener('keydown', handleEscKey);
+      return () => {
+        document.removeEventListener('keydown', handleEscKey);
+        document.body.style.overflow = 'auto';
+      };
     }
 
     return () => {
       document.body.style.overflow = 'auto';
     };
-  }, [isSearchOpen]);
+  }, [isSearchOpen, dispatch]);
 
   return (
     <>
       <div
         className={clsx(
           // 177px is the height of the header
-          'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
+          'absolute bg-black/75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
           isSearchOpen && searchText
             ? 'visible opacity-100'
             : 'invisible opacity-0'
@@ -48,7 +60,7 @@ export default function Search() {
           isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
       >
-        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
+        <div className="max-w-(--breakpoint-2xl) mx-auto flex flex-col gap-12">
           <div className="border-b border-gray-400 flex flex-col py-1.5 gap-2 self-center items-center md:flex-row">
             <span className="text-xl lg:text-2xl">
               {t('common.search.results_for')}
@@ -62,7 +74,7 @@ export default function Search() {
                     router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
                   }
                 }}
-                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
+                className="border-0 text-2xl outline-hidden text-secondary placeholder:text-xl lg:placeholder:text-2xl"
                 placeholder={t('common.search.placeholder')}
                 ref={inputRef}
               />

package/app-template/src/views/header/search/results.tsx

@@ -80,7 +80,7 @@ export default function Results(props: ResultsProps) {
         <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
           {products.map((product, index) => (
             <Link href={product?.url} key={index} className="flex flex-col">
-              <div className="relative aspect-[315/448]">
+              <div className="relative aspect-315/448">
                 {product.extra.image ? (
                   <Image
                     src={product.extra.image}

package/app-template/src/views/header/user-menu.tsx

@@ -36,7 +36,9 @@ export const UserMenu = (props: UserMenuProps) => {
     <ul
       className={clsx(
         'items-center divide-x divide-black',
-        isMobile ? 'flex pt-2 text-sm pb-6 border-b mx-8' : 'hidden sm:flex'
+        isMobile
+          ? 'flex pt-2 text-sm pb-6 border-b border-gray-200 mx-8'
+          : 'hidden sm:flex'
       )}
       id="user-menu"
     >

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

@@ -103,10 +103,34 @@ export const Login = () => {
       )?.data as string[];
 
       fieldErrors?.forEach((item) => {
-        setError(item.name as keyof LoginFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
+        let parsedValue: Record<string, string[]> | string[] = [];
+
+        if (typeof item.value === 'string') {
+          try {
+            parsedValue = JSON.parse(item.value);
+          } catch {
+            parsedValue = [item.value]; 
+          }
+        } else {
+          parsedValue = item.value; 
+        }
+
+        if (Array.isArray(parsedValue)) {
+          setError(item.name as keyof LoginFormType, {
+            type: 'custom',
+            message: parsedValue.join(', '),
+          });
+        } else {
+          Object.keys(parsedValue).forEach((key) => {
+            const fieldName = key as keyof LoginFormType;
+            const errorMessages = parsedValue[key] as string[];
+    
+            setError(fieldName, {
+              type: 'custom',
+              message: errorMessages.join(', '),
+            });
+          });
+        }
       });
 
       if (nonFieldErrors?.length) {
@@ -195,7 +219,7 @@ export const Login = () => {
           {t('auth.login.form.submit')}
         </Button>
 
-        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600 before:bg-opacity-25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600 after:bg-opacity-25 after:top-1/2 after:right-0">
+        <p className="relative text-gray-600 text-center my-4 before:absolute before:h-[1px] before:w-5/12 before:bg-gray-600/25 before:top-1/2 before:left-0 after:absolute after:h-[1px] after:w-5/12 after:bg-gray-600/25 after:top-1/2 after:right-0">
           {t('auth.login.form.or')}
         </p>
 
@@ -224,7 +248,7 @@ export const Login = () => {
                 alt={provider.label}
                 width={provider.label === 'Facebook' ? 10 : 18}
                 height={18}
-                className="flex-shrink-0"
+                className="shrink-0"
               />
             )}
 

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

@@ -159,7 +159,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
     <>
       <div
         className={clsx(
-          'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
+          'fixed bottom-0 left-0 w-1/2 h-14 z-20 bg-white mt-0 border-t border-gray-500 items-center justify-center',
           'sm:relative sm:flex sm:items-center sm:mt-5 sm:border-none'
         )}
       >
@@ -188,7 +188,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
       <Button
         disabled={isAddToCartLoading || isAddToStockAlertLoading}
         className={clsx(
-          'fixed bottom-0 right-0 w-1/2 h-14 z-[20] flex items-center justify-center fill-primary-foreground',
+          'fixed bottom-0 right-0 w-1/2 h-14 z-20 flex items-center justify-center fill-primary-foreground',
           'hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold sm:h-12'
         )}
         onClick={() => {

package/app-template/src/views/product/slider.tsx

@@ -86,7 +86,7 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
       </div>
 
       <div className="relative lg:col-span-5">
-        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
+        <FavButton className="absolute right-8 top-6 z-20 sm:hidden" />
 
         <CarouselCore
           responsive={{

package/app-template/src/views/product-pointer-banner-item.tsx

@@ -109,7 +109,7 @@ const ProductPointerWidget = (props: ProductPointerWidgetProps) => {
             hidden: buttonStatus
           })}
         >
-          <div className="w-full h-full flex items-center gap-2 flex-shrink-0">
+          <div className="w-full h-full flex items-center gap-2 shrink-0">
             <Image
               src={productItem?.kwargs?.value?.card_image?.url}
               alt={productItem?.value?.alt}

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

@@ -143,6 +143,7 @@ export const Register = () => {
     if (registerResponse.error) {
       const errors: AuthError[] = JSON.parse(registerResponse.error);
 
+
       if (errors.find((error) => error.type === 'captcha')) {
         if (await validateCaptcha()) {
           onSubmit(data);
@@ -164,10 +165,34 @@ export const Register = () => {
       )?.data as string[];
 
       fieldErrors?.forEach((item) => {
-        setError(item.name as keyof RegisterFormType, {
-          type: 'custom',
-          message: item.value.join(', ')
-        });
+        let parsedValue: Record<string, string[]> | string[] = [];
+
+        if (typeof item.value === 'string') {
+          try {
+            parsedValue = JSON.parse(item.value);
+          } catch {
+            parsedValue = [item.value]; 
+          }
+        } else {
+          parsedValue = item.value; 
+        }
+
+        if (Array.isArray(parsedValue)) {
+          setError(item.name as keyof RegisterFormType, {
+            type: 'custom',
+            message: parsedValue.join(', '),
+          });
+        } else {
+          Object.keys(parsedValue).forEach((key) => {
+            const fieldName = key as keyof RegisterFormType;
+            const errorMessages = parsedValue[key] as string[];
+    
+            setError(fieldName, {
+              type: 'custom',
+              message: errorMessages.join(', '),
+            });
+          });
+        }
       });
 
       if (nonFieldErrors?.length) {

package/app-template/src/views/sales-contract-modal/index.tsx

@@ -169,19 +169,19 @@ export const SalesContractModal = ({ data }: Props) => {
               </div>
             </div>
 
-            <table className="w-full border">
+            <table className="w-full border border-gray-200">
               <thead className="text-sm">
                 <tr>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product')}
                   </th>
-                  <th className="border font-normal py-2 px-3">
+                  <th className="border border-gray-200 font-normal py-2 px-3">
                     {t('account.sales_contract.quantity')}
                   </th>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.product_price')}
                   </th>
-                  <th className="border font-normal text-left py-2 px-3">
+                  <th className="border border-gray-200 font-normal text-left py-2 px-3">
                     {t('account.sales_contract.total_price')}
                   </th>
                 </tr>
@@ -191,20 +191,20 @@ export const SalesContractModal = ({ data }: Props) => {
                 {data.orderitem_set.map((value, index) => {
                   return (
                     <tr key={index.toString()}>
-                      <td className="border font-light text-left py-2 px-3">
+                      <td className="border border-gray-200 font-light text-left py-2 px-3">
                         {value.product.name}
                       </td>
-                      <td className="border font-light text-center py-2 px-3">
+                      <td className="border border-gray-200 font-light text-center py-2 px-3">
                         {value.quantity ? value.quantity : '1'}
                       </td>
-                      <td className="border font-light text-center py-2 px-3">
+                      <td className="border border-gray-200 font-light text-center py-2 px-3">
                         <Price
                           value={
                             value.unit_price ? value.unit_price : value.price
                           }
                         />
                       </td>
-                      <td className="border font-light text-right py-2 px-3">
+                      <td className="border border-gray-200 font-light text-right py-2 px-3">
                         <Price
                           value={
                             value.total_amount
@@ -222,12 +222,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.products_total')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.discount_amount} />
@@ -237,12 +237,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.shipping_price')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.shipping_amount} />
@@ -252,12 +252,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.payment_type')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     {data.payment_option_slug}
@@ -267,12 +267,12 @@ export const SalesContractModal = ({ data }: Props) => {
                 <tr>
                   <th
                     colSpan={3}
-                    className="border text-left py-2 px-3 font-normal"
+                    className="border border-gray-200 text-left py-2 px-3 font-normal"
                   >
                     {t('account.sales_contract.order_total')}
                   </th>
                   <td
-                    className="border text-right py-2 px-3 font-light"
+                    className="border border-gray-200 text-right py-2 px-3 font-light"
                     colSpan={1}
                   >
                     <Price value={data.amount} />

package/app-template/src/widgets/footer-info.tsx

@@ -19,7 +19,7 @@ export default async function FooterInfo() {
   const data = await getWidgetData<FooterInfoType>({ slug: 'footer-info' });
 
   return (
-    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
+    <div className="flex flex-col w-full mb-4 pb-4 text-xs border-b border-gray-200 md:border-b-0 md:pb-0 md:mb-0 md:w-3/12 lg:w-1/6 md:pr-7">
       <div className="flex items-center mb-8">
         <div className="mr-3">
           <svg

package/app-template/src/widgets/footer-menu.tsx

@@ -50,7 +50,7 @@ export default async function FooterMenu() {
 
   return (
     <div className="flex-1">
-      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l">
+      <div className="hidden justify-between text-xs md:flex md:px-6 md:py-4 md:border-r md:border-l md:border-gray-200">
         <div>
           <div className="mb-4 font-medium" data-testid="footer-categories">
             {data?.attributes?.first_column_title?.value}

package/app-template/src/widgets/footer-subscription/index.tsx

@@ -19,7 +19,7 @@ export default async function FooterSubscription() {
   });
 
   return (
-    <div className="py-4 border-t md:border-t-0 lg:pl-7">
+    <div className="py-4 border-t border-gray-200 md:border-t-0 lg:pl-7">
       <h3 className="mb-1 text-xs font-medium">
         {data?.attributes?.title?.value}
       </h3>

package/app-template/src/widgets/home-stories-eng.tsx

@@ -82,7 +82,7 @@ export default async function HomeStoriesEng() {
         {data?.attributes?.stories?.map((story, index) => {
           return (
             <div
-              className="mr-4 flex-shrink-0 first:ms-4 w-32 md:w-32"
+              className="mr-4 shrink-0 first:ms-4 w-32 md:w-32"
               key={`story__${index}`}
             >
               <Link href={story?.value?.url} aria-label={story?.value?.alt}>

package/app-template/tailwind.config.js

@@ -1,5 +1,4 @@
 const deepMerge = require('@akinon/next/utils/deep-merge');
-const defaultTheme = require('tailwindcss/defaultTheme');
 const plugins = require('./src/plugins');
 const fs = require('fs');
 const path = require('path');
@@ -19,148 +18,13 @@ if (themeName !== 'default' && fs.existsSync(themeConfigPath)) {
 
 const defaultConfig = {
   content: [
-    './src/app/**/*.{js,ts,jsx,tsx}',
-    './src/pages/**/*.{js,ts,jsx,tsx}',
-    './src/components/**/*.{js,ts,jsx,tsx}',
-    './src/views/**/*.{js,ts,jsx,tsx}',
-    './src/widgets/**/*.{js,ts,jsx,tsx}',
-    './src/hooks/**/*.{js,ts,jsx,tsx}',
-    './src/utils/**/*.{js,ts,jsx,tsx}',
     ...plugins
       .map((plugin) => [
         `./node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`,
         `../../node_modules/@akinon/${plugin}/**/*.{js,ts,jsx,tsx}`
       ])
       .flat()
-  ],
-  theme: {
-    extend: {
-      fontSize: {
-        '2xs': '0.5rem'
-      },
-      outline: {
-        off: 'none'
-      },
-      width: {
-        '1/10': '10%',
-        '2/10': '20%',
-        '3/10': '30%',
-        '4/10': '40%',
-        '5/10': '50%',
-        '6/10': '60%',
-        '7/10': '70%',
-        '8/10': '80%',
-        '9/10': '90%'
-      },
-      transitionProperty: {
-        'max-width': 'max-width'
-      },
-      backgroundImage: {
-        'skeleton-shimmer':
-          'linear-gradient(90deg, #d7d7d7 0%, #ebebeb 40%, #eeeeee 60%, #d7d7d7)'
-      },
-      keyframes: {
-        'skeleton-shimmer': {
-          '100%': {
-            transform: 'translateX(100%)'
-          }
-        }
-      },
-      animation: {
-        'skeleton-shimmer': 'skeleton-shimmer 2s linear infinite'
-      }
-    },
-    colors: {
-      transparent: 'transparent',
-      white: '#ffffff',
-      primary: {
-        DEFAULT: '#000000',
-        hover: '#181818',
-        foreground: '#ffffff',
-        100: '#525252',
-        200: '#404040',
-        300: '#3d3d3d',
-        400: '#333333',
-        500: '#2d2d2d',
-        600: '#292929',
-        700: '#2b2b2b',
-        800: '#181818',
-        900: '#000000'
-      },
-      secondary: {
-        DEFAULT: '#e95151',
-        hover: '#d03838',
-        foreground: '#ffffff',
-        100: '#ffb7b7',
-        200: '#ff9e9e',
-        300: '#ff8484',
-        400: '#ff6b6b',
-        500: '#e95151',
-        600: '#d72b01',
-        700: '#b61e1e',
-        800: '#9d0505',
-        900: '#830000'
-      },
-      black: {
-        DEFAULT: '#000000',
-        100: '#525252',
-        200: '#404040',
-        300: '#3d3d3d',
-        400: '#333333',
-        500: '#2d2d2d',
-        600: '#292929',
-        700: '#2b2b2b',
-        800: '#181818',
-        900: '#000000'
-      },
-      gray: {
-        DEFAULT: '#ebebeb',
-        25: '#fdfdfd',
-        50: '#f7f7f7',
-        100: '#f5f5f5',
-        150: '#f4f4f4',
-        200: '#eeeeee',
-        300: '#ebebeb',
-        400: '#d7d7d7',
-        450: '#d4d4d4',
-        500: '#c9c9c9',
-        600: '#9d9d9d',
-        700: '#686868',
-        800: '#615f62',
-        850: '#58585a',
-        900: '#4a4f54',
-        950: '#424242'
-      },
-      error: {
-        DEFAULT: '#d72b01',
-        100: '#e20008'
-      },
-      success: {
-        DEFAULT: '#7b9d76',
-        100: '#7b9d76'
-      }
-    },
-    container: {
-      center: true,
-      padding: {
-        DEFAULT: '0rem',
-        sm: '2rem',
-        '2xl': '0rem'
-      }
-    },
-    fontFamily: {
-      sans: ['Jost'].concat(defaultTheme.fontFamily.sans)
-    },
-    screens: {
-      xs: '575px',
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1170px',
-      '2xl': '1370px'
-    }
-  },
-  plugins: [require('@tailwindcss/typography')]
+  ]
 };
 
 if (Object.keys(themeOverrides).length === 0) {

package/commands/plugins.ts

@@ -113,6 +113,10 @@ export default async () => {
     {
       name: 'Tabby Payment Extension',
       value: 'pz-tabby-extension'
+    },
+    {
+      name: 'Tamara Payment Extension',
+      value: 'pz-tamara-extension'
     }
   ];
 

package/dist/commands/plugins.js

@@ -137,6 +137,10 @@ exports.default = () => __awaiter(void 0, void 0, void 0, function* () {
         {
             name: 'Tabby Payment Extension',
             value: 'pz-tabby-extension'
+        },
+        {
+            name: 'Tamara Payment Extension',
+            value: 'pz-tamara-extension'
         }
     ];
     const prompt = new Prompt({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/projectzero",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "private": false,
   "description": "CLI tool to manage your Project Zero Next project",
   "bin": {

package/app-template/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-};