npm - @akinon/projectzero - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (121) hide show

package/app-template/src/app/[commerce]/[locale]/[currency]/layout.tsx CHANGED Viewed

@@ -48,11 +48,13 @@ async function RootLayout({
   translations,
   children
 }: RootLayoutProps) {
+  const layoutParams = await params;
   return (
     <html lang={locale.isoCode} {...(locale.rtl ? { dir: 'rtl' } : {})}>
       <head />
       <body className="overflow-x-hidden">
-        <PzRoot translations={translations} {...params}>
+        <PzRoot translations={translations} {...layoutParams}>
           <ClientRoot>
             <div className="overflow-x-hidden">
               <MobileAppToggler>

package/app-template/src/app/[commerce]/[locale]/[currency]/list/page.tsx CHANGED Viewed

@@ -3,7 +3,9 @@ import { withSegmentDefaults } from '@akinon/next/hocs/server';
 import { PageProps } from '@akinon/next/types';
 import CategoryLayout from '@theme/views/category/layout';
-async function Page({ searchParams }: PageProps) {
+async function Page(props: PageProps) {
+  const searchParams = await props.searchParams;
   const data = await getListData({ searchParams });
   return (

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

@@ -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 CHANGED Viewed

@@ -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]/orders/completed/[token]/page.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, use } from 'react';
 import { useAppDispatch } from '@akinon/next/redux/hooks';
 import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
 import { ROUTES } from '@theme/routes';
@@ -14,14 +14,10 @@ import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 import { pushPurchaseEvent } from '@theme/utils/gtm';
-const CheckoutCompleted = ({
-  params
-}: PageProps<{
-  token: string;
-}>) => {
+const CheckoutCompleted = (props) => {
   const { t } = useLocalization();
   const dispatch = useAppDispatch();
+  const params = use(props.params) as { token: string };
   const { data, isLoading } = useFetchCheckoutResultQuery(String(params.token));
   const carouselRef = useRef(null);

package/app-template/src/app/[commerce]/[locale]/[currency]/product/[pk]/page.tsx CHANGED Viewed

@@ -5,12 +5,12 @@ import { generateJsonLd } from '@theme/utils/generate-jsonld';
 import { AccordionWrapper, ProductInfo } from '@theme/views/product';
 import ProductLayout from '@theme/views/product/layout';
-export async function generateMetadata({
-  params,
-  searchParams
-}: PageProps<{ pk: number }>) {
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
   let result: Metadata = {};
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   try {
     const {
       data: { product }
@@ -40,7 +40,10 @@ export async function generateMetadata({
   return result;
 }
-async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
+async function Page(props: PageProps<{ pk: number }>) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   const [{ data, breadcrumbData }, deliveryReturn] = await Promise.all([
     getProductData({
       pk: params.pk,

package/app-template/src/app/[commerce]/[locale]/[currency]/special-page/[pk]/page.tsx CHANGED Viewed

@@ -5,7 +5,9 @@ import CategoryLayout from '@theme/views/category/layout';
 import SpecialPageBanner from '@theme/widgets/special-page-banner';
 import SpecialPageCarousel from '@theme/widgets/special-page-carousel';
-async function Page({ params, searchParams }: PageProps<{ pk: number }>) {
+async function Page(props: PageProps<{ pk: number }>) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
   const data = await getSpecialPageData({ pk: params.pk, searchParams });
   return (

package/app-template/src/app/[commerce]/[locale]/[currency]/users/email-set-primary/[[...id]]/page.tsx CHANGED Viewed

@@ -2,8 +2,11 @@
 import { Icon, Link, LoaderSpinner } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useChangeEmailVerificationQuery } from '@akinon/next/data/client/user';
+import { use } from 'react';
+export default function Page(props) {
+  const { id } = use(props.params) as { id: string[] };
-export default function Page({ params: { id } }) {
   const { t } = useLocalization();
   const { isSuccess, isLoading } = useChangeEmailVerificationQuery(
     id.join('/')

package/app-template/src/app/[commerce]/[locale]/[currency]/users/registration/account-confirm-email/[[...id]]/page.tsx CHANGED Viewed

@@ -2,8 +2,10 @@
 import { Icon, Link, LoaderSpinner } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import { useConfirmEmailVerificationQuery } from '@akinon/next/data/client/user';
+import { use } from 'react';
-export default function Page({ params: { id } }) {
+export default function Page(props) {
+  const { id } = use(props.params) as { id: string[] };
   const { t } = useLocalization();
   const { isSuccess, isLoading } = useConfirmEmailVerificationQuery(
     id.join('/')

package/app-template/src/app/[commerce]/[locale]/[currency]/users/reset/[[...id]]/page.tsx CHANGED Viewed

@@ -10,8 +10,10 @@ import {
 } from '@akinon/next/data/client/account';
 import { useLocalization } from '@akinon/next/hooks';
 import PasswordRulesFeedback from '@theme/components/password-rules-feedback';
+import { use } from 'react';
-export default function NewPassword({ params: { id } }) {
+export default function NewPassword(props) {
+  const { id } = use(props.params) as { id: string };
   const { t } = useLocalization();
   const [newPassword, { isSuccess: formSuccess }] = usePasswordResetMutation();
@@ -24,7 +26,10 @@ export default function NewPassword({ params: { id } }) {
           /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{6,}$/,
           t('forgot_password.create_new_password.form.error.password_rule')
         )
-        .max(50, t('forgot_password.create_new_password.form.error.password_max')),
+        .max(
+          50,
+          t('forgot_password.create_new_password.form.error.password_max')
+        ),
       repeatPassword: yup
         .string()
         .required(t('forgot_password.create_new_password.form.error.required'))
@@ -79,7 +84,10 @@ export default function NewPassword({ params: { id } }) {
                   required
                 />
-                <PasswordRulesFeedback password={passwordValue} isVisible={errors?.password ? true : false}/>
+                <PasswordRulesFeedback
+                  password={passwordValue}
+                  isVisible={errors?.password ? true : false}
+                />
               </div>
               <div className="mb-2 text-left">

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

@@ -1,15 +1,61 @@
 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 }) {
-  const node = context.params.node;
+  const node = (await context.params).node;
   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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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