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

package/app-template/src/app/[commerce]/[locale]/[currency]/auth/page.tsx

@@ -51,7 +51,7 @@ export default function Auth() {
           {t('auth.register.mobile_title')}
         </Button>
       </div>
-      <div className="w-full flex flex-wrap border md:border-0">
+      <div className="w-full flex flex-wrap border border-gray-200 md:border-0">
         <div
           className={twMerge(
             clsx('w-full md:block md:w-1/2', {

package/app-template/src/app/[commerce]/[locale]/[currency]/basket/page.tsx

@@ -25,7 +25,7 @@ export default function Page() {
   }, [basket, isSuccess]);
 
   return (
-    <div className="max-w-screen-xl p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
+    <div className="max-w-(--breakpoint-xl) p-4 flex flex-col text-primary-800 lg:p-8 xl:flex-row xl:mx-auto">
       {isLoading && (
         <div className="flex justify-center w-full">
           <LoaderSpinner />
@@ -62,7 +62,7 @@ export default function Page() {
             <Summary basket={basket} />
           </>
         ) : (
-          <div className="flex flex-col items-center container max-w-screen-sm py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-screen-xl">
+          <div className="flex flex-col items-center container max-w-(--breakpoint-sm) py-4 px-4 xs:py-6 xs:px-6 sm:py-8 sm:px-8 lg:max-w-(--breakpoint-xl)">
             <h1
               className="w-full text-xl font-light text-secondary text-center sm:text-2xl"
               data-testid="basket-empty"

package/app-template/src/app/[commerce]/[locale]/[currency]/error.tsx

@@ -1,20 +1,17 @@
 'use client';
 
-import { useLocalization } from '@akinon/next/hooks';
-import { Link } from '@theme/components';
-import { ROUTES } from '@theme/routes';
+import { useSentryUncaughtErrors } from '@akinon/next/hooks';
+import PzErrorPage from '@akinon/next/views/error-page';
 
-export default function Error() {
-  const { t } = useLocalization();
+export default function ErrorPage({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string; isServerError?: boolean };
+  reset: () => void;
+}) {
+  // DO NOT REMOVE THIS LINE TO REPORT UNCAUGHT ERRORS TO SENTRY
+  useSentryUncaughtErrors(error);
 
-  return (
-    <section className="text-center px-6 my-14 md:px-0 md:m-14">
-      <div className="text-7xl font-bold md:text-8xl">500</div>
-      <h1 className="text-lg md:text-xl"> {t('common.page_500.title')} </h1>
-      <p className="text-lg md:text-xl"> {t('common.page_500.description')} </p>
-      <Link href={ROUTES.HOME} className="text-lg underline">
-        {t('common.page_500.link_text')}
-      </Link>
-    </section>
-  );
+  return <PzErrorPage error={error} reset={reset} />;
 }

package/app-template/src/app/[commerce]/[locale]/[currency]/forms/[pk]/generate/page.tsx

@@ -21,7 +21,7 @@ export default async function Page(props) {
         schema={schema}
         allFieldClasses={{
           className:
-            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-none focus:border-black',
+            'border border-[#d4d4d4] text-[#4a4f54] mt-1.5 h-[38px] p-2.5 text-xs outline-hidden focus:border-black',
           labelClassName: 'text-[#4a4f54] text-xs',
           wrapperClassName: 'flex flex-col mb-6'
         }}

package/app-template/src/app/[commerce]/[locale]/[currency]/{pz-not-found/page.tsx → not-found.tsx}

@@ -8,10 +8,10 @@ const NotFound = () => {
   const { t } = useLocalization();
 
   return (
-    <div className="py-6 flex flex-col items-center justify-center">
+    <div className="py-10 lg:py-8 flex flex-col items-center justify-center px-4 lg:px-0">
       <div className="text-8xl font-bold">404</div>
       <h1 className="text-4xl font-bold mb-4">{t('not_found.title')}</h1>
-      <p className="text-lg mb-6">{t('not_found.sub_title')}</p>
+      <p className="text-lg mb-6 text-center">{t('not_found.sub_title')}</p>
       <Link href={'/'}>
         <Button className="h-auto mt-4 text-base py-3 px-6">
           {t('not_found.button')}

package/app-template/src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx

@@ -11,7 +11,7 @@ import {
 } from '@akinon/next/redux/reducers/checkout';
 import { RootState } from '@theme/redux/store';
 import { ROUTES } from '@theme/routes';
-import { useFetchCheckoutQuery } from '@akinon/next/data/client/checkout';
+import { useFetchCheckoutQuery, useResetCheckoutStateQuery } from '@akinon/next/data/client/checkout';
 import { Button, LoaderSpinner } from '@theme/components';
 import { pushAddPaymentInfo, pushAddShippingInfo } from '@theme/utils/gtm';
 import { CheckoutStep } from '@akinon/next/types';
@@ -25,6 +25,8 @@ const Checkout = () => {
     (state: RootState) => state.checkout
   );
 
+  const { data: indexData, isLoading: isResetStateLoading } = useResetCheckoutStateQuery(null);
+
   const {
     data: checkoutData,
     isFetching,
@@ -32,7 +34,8 @@ const Checkout = () => {
     isSuccess,
     refetch: refetchCheckout
   } = useFetchCheckoutQuery(null, {
-    refetchOnMountOrArgChange: true
+    refetchOnMountOrArgChange: true,
+    skip: isResetStateLoading || !indexData
   });
   const initialStepChanged = useRef<boolean>(false);
   const router = useRouter();
@@ -94,10 +97,10 @@ const Checkout = () => {
     );
   }
 
-  if (isFetching || isError) {
+  if (isResetStateLoading || isFetching || isError) {
     return (
       <div className="flex flex-col items-center justify-center h-80">
-        {isFetching ? (
+        {isResetStateLoading || isFetching ? (
           <LoaderSpinner />
         ) : (
           <>

package/app-template/src/app/[commerce]/[locale]/[currency]/xml-sitemap/[node]/route.ts

@@ -1,5 +1,18 @@
 import { urlLocaleMatcherRegex } from '@akinon/next/utils';
 
+/**
+ * XML Sitemap Route
+ *
+ * This route serves XML sitemaps from an S3 bucket.
+ *
+ * Required environment variables:
+ * - SITEMAP_S3_BUCKET_NAME: The name of the S3 bucket containing the sitemaps
+ *   Example: "0fb534"
+ *
+ * If the environment variable is not set, the route will return a 503 Service Unavailable
+ * response with a JSON error message.
+ */
+
 export const dynamic = 'force-dynamic';
 
 export async function GET(request: Request, context: { params }) {
@@ -7,9 +20,42 @@ export async function GET(request: Request, context: { params }) {
   const url = new URL(request.url);
   const matchedLocale = url.pathname.match(urlLocaleMatcherRegex);
 
+  const s3BucketName = process.env.SITEMAP_S3_BUCKET_NAME;
+
+  if (!s3BucketName) {
+    return new Response(
+      JSON.stringify({
+        error: 'Configuration error',
+        message: 'Please set the SITEMAP_S3_BUCKET_NAME environment variable'
+      }),
+      {
+        status: 503,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  }
+
   const sitemap = await fetch(
-    `https://s3.eu-central-1.amazonaws.com/0fb534/sitemaps/sitemaps/sitemap-${node}.xml.gz`
+    `https://s3.eu-central-1.amazonaws.com/${s3BucketName}/sitemaps/sitemaps/sitemap-${node}.xml.gz`
   );
+
+  if (!sitemap.ok) {
+    return new Response(
+      JSON.stringify({
+        error: 'Sitemap not found',
+        message: `Failed to fetch sitemap for node: ${node}`
+      }),
+      {
+        status: 503,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    );
+  }
+
   let sitemapContent = await sitemap.text();
 
   sitemapContent = sitemapContent.replace(

package/app-template/src/assets/globals.scss

@@ -2,48 +2,176 @@
 @use './fonts/index.scss' as fonts;
 @use './fonts/pz-icon.css' as icons;
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .header-grid-template-areas {
-    grid-template-areas:
-      'band-l band-m band-r'
-      'main-l main-m main-r'
-      'nav nav nav';
-  }
+@import 'tailwindcss';
 
-  .header-grid-area-band-l {
-    grid-area: band-l;
-  }
+@plugin '@tailwindcss/typography';
 
-  .header-grid-area-band-m {
-    grid-area: band-m;
-  }
+@config '../../tailwind.config.js';
 
-  .header-grid-area-band-r {
-    grid-area: band-r;
-  }
+@source '../app/**/*.{js,ts,jsx,tsx}';
+@source '../pages/**/*.{js,ts,jsx,tsx}';
+@source '../components/**/*.{js,ts,jsx,tsx}';
+@source '../views/**/*.{js,ts,jsx,tsx}';
+@source '../widgets/**/*.{js,ts,jsx,tsx}';
+@source '../hooks/**/*.{js,ts,jsx,tsx}';
+@source '../utils/**/*.{js,ts,jsx,tsx}';
 
-  .header-grid-area-main-l {
-    grid-area: main-l;
-  }
+@theme {
+  --font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-size-2xs: 0.5rem;
+  --outline-off: none;
 
-  .header-grid-area-main-m {
-    grid-area: main-m;
-  }
+  --width-1-10: 10%;
+  --width-2-10: 20%;
+  --width-3-10: 30%;
+  --width-4-10: 40%;
+  --width-5-10: 50%;
+  --width-6-10: 60%;
+  --width-7-10: 70%;
+  --width-8-10: 80%;
+  --width-9-10: 90%;
 
-  .header-grid-area-main-r {
-    grid-area: main-r;
-  }
+  --transition-property-max-width: max-width;
+
+  --background-image-skeleton-shimmer: linear-gradient(
+    90deg,
+    #d7d7d7 0%,
+    #ebebeb 40%,
+    #eeeeee 60%,
+    #d7d7d7
+  );
 
-  .header-grid-area-nav {
-    grid-area: nav;
+  --animate-skeleton-shimmer: skeleton-shimmer 2s linear infinite;
+
+  @keyframes skeleton-shimmer {
+    to {
+      transform: translateX(100%);
+    }
   }
 
-  .header-m-template-cols {
-    grid-template-columns: auto 1fr 1fr;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-primary: #000000;
+  --color-primary-hover: #181818;
+  --color-primary-foreground: #ffffff;
+  --color-primary-100: #525252;
+  --color-primary-200: #404040;
+  --color-primary-300: #3d3d3d;
+  --color-primary-400: #333333;
+  --color-primary-500: #2d2d2d;
+  --color-primary-600: #292929;
+  --color-primary-700: #2b2b2b;
+  --color-primary-800: #181818;
+  --color-primary-900: #000000;
+
+  --color-secondary: #e95151;
+  --color-secondary-hover: #d03838;
+  --color-secondary-foreground: #ffffff;
+  --color-secondary-100: #ffb7b7;
+  --color-secondary-200: #ff9e9e;
+  --color-secondary-300: #ff8484;
+  --color-secondary-400: #ff6b6b;
+  --color-secondary-500: #e95151;
+  --color-secondary-600: #d72b01;
+  --color-secondary-700: #b61e1e;
+  --color-secondary-800: #9d0505;
+  --color-secondary-900: #830000;
+
+  --color-black: #000000;
+  --color-black-100: #525252;
+  --color-black-200: #404040;
+  --color-black-300: #3d3d3d;
+  --color-black-400: #333333;
+  --color-black-500: #2d2d2d;
+  --color-black-600: #292929;
+  --color-black-700: #2b2b2b;
+  --color-black-800: #181818;
+  --color-black-900: #000000;
+
+  --color-gray: #ebebeb;
+  --color-gray-25: #fdfdfd;
+  --color-gray-50: #f7f7f7;
+  --color-gray-100: #f5f5f5;
+  --color-gray-150: #f4f4f4;
+  --color-gray-200: #eeeeee;
+  --color-gray-300: #ebebeb;
+  --color-gray-400: #d7d7d7;
+  --color-gray-450: #d4d4d4;
+  --color-gray-500: #c9c9c9;
+  --color-gray-600: #9d9d9d;
+  --color-gray-700: #686868;
+  --color-gray-800: #615f62;
+  --color-gray-850: #58585a;
+  --color-gray-900: #4a4f54;
+  --color-gray-950: #424242;
+
+  --color-error: #d72b01;
+  --color-error-100: #e20008;
+
+  --color-success: #7b9d76;
+  --color-success-100: #7b9d76;
+
+  --container-center: true;
+  --container-padding: 0rem;
+  --container-padding-sm: 2rem;
+  --container-padding-2xl: 0rem;
+
+  --breakpoint-xs: 575px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1170px;
+  --breakpoint-2xl: 1370px;
+}
+
+@utility header-grid-template-areas {
+  grid-template-areas:
+    'band-l band-m band-r'
+    'main-l main-m main-r'
+    'nav nav nav';
+}
+
+@utility header-grid-area-band-l {
+  grid-area: band-l;
+}
+
+@utility header-grid-area-band-m {
+  grid-area: band-m;
+}
+
+@utility header-grid-area-band-r {
+  grid-area: band-r;
+}
+
+@utility header-grid-area-main-l {
+  grid-area: main-l;
+}
+
+@utility header-grid-area-main-m {
+  grid-area: main-m;
+}
+
+@utility header-grid-area-main-r {
+  grid-area: main-r;
+}
+
+@utility header-grid-area-nav {
+  grid-area: nav;
+}
+
+@utility header-m-template-cols {
+  grid-template-columns: auto 1fr 1fr;
+}
+
+@utility container {
+  margin-inline: auto;
+}
+
+@layer base {
+  input::placeholder,
+  textarea::placeholder {
+    color: theme(--color-gray-400);
   }
 
   input {
@@ -51,7 +179,7 @@
     &:not(:placeholder-shown),
     &:autofill {
       & + label {
-        @apply top-1/3;
+        top: calc(1 / 3 * 100%);
       }
     }
   }

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 cursor-pointer',
+      '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 data-testid="button" {...rest} className={buttonClasses}>
+      {children}
     </button>
   );
 };

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

@@ -9,6 +9,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     <label className={twMerge('flex flex-col text-xs', props.className)}>
       <div className="flex items-center">
         <input
+          data-testid="checkbox"
           type="checkbox"
           {...rest}
           ref={ref}

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