@akinon/projectzero 2.0.0-beta.9 → 2.0.0

package/app-template/public/shop-pay.svg

@@ -0,0 +1,12 @@
+<svg width="38" height="24" viewBox="0 0 38 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#2mu4dnqfla)">
+        <path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000"/>
+        <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#5A31F4"/>
+        <path d="M21.382 9.713c0 1.668-1.177 2.858-2.82 2.858h-1.55a.132.132 0 0 0-.13.13v2.191a.13.13 0 0 1-.08.12.13.13 0 0 1-.05.01h-1.084a.13.13 0 0 1-.13-.13V6.985a.127.127 0 0 1 .08-.12.129.129 0 0 1 .05-.01h2.9c1.637 0 2.814 1.19 2.814 2.858zm-1.352 0c0-.958-.658-1.658-1.55-1.658h-1.468a.13.13 0 0 0-.12.08.13.13 0 0 0-.01.05v3.05a.127.127 0 0 0 .038.092.13.13 0 0 0 .092.038h1.468c.892.005 1.55-.695 1.55-1.652zm1.674 3.791a1.528 1.528 0 0 1 .647-1.317c.423-.316 1.084-.48 2.055-.514l1.033-.036v-.303c0-.607-.41-.863-1.068-.863-.658 0-1.075.231-1.17.61a.127.127 0 0 1-.125.09h-1.022a.13.13 0 0 1-.126-.092.125.125 0 0 1-.004-.055c.152-.898.904-1.58 2.494-1.58 1.692 0 2.303.783 2.303 2.276v3.172a.13.13 0 0 1-.132.13h-1.03a.13.13 0 0 1-.13-.13v-.237a.096.096 0 0 0-.118-.096.1.1 0 0 0-.05.027c-.31.334-.808.575-1.607.575-1.175 0-1.95-.607-1.95-1.657zm3.735-.687v-.246l-1.339.07c-.705.036-1.115.326-1.115.816 0 .444.376.69 1.034.69.893 0 1.42-.48 1.42-1.33zm2.316 4.6v-.919a.13.13 0 0 1 .1-.125.13.13 0 0 1 .057-.002c.158.03.318.044.48.044a1.23 1.23 0 0 0 1.244-.876l.067-.21a.133.133 0 0 0 0-.089L27.558 9.77a.13.13 0 0 1 .122-.18h1.04a.132.132 0 0 1 .123.085l1.456 3.86a.131.131 0 0 0 .125.087.133.133 0 0 0 .125-.088l1.265-3.848a.13.13 0 0 1 .126-.09h1.076a.134.134 0 0 1 .132.116.134.134 0 0 1-.008.063l-2.295 6.076c-.528 1.413-1.433 1.773-2.43 1.773a1.963 1.963 0 0 1-.56-.066.132.132 0 0 1-.1-.14zM8.57 6.4a5.363 5.363 0 0 0-3.683 1.427.231.231 0 0 0-.029.31l.618.84a.236.236 0 0 0 .362.027 3.823 3.823 0 0 1 2.738-1.11c2.12 0 3.227 1.584 3.227 3.15 0 1.7-1.163 2.898-2.835 2.921-1.292 0-2.266-.85-2.266-1.974a1.908 1.908 0 0 1 .713-1.48.231.231 0 0 0 .033-.324l-.65-.815a.236.236 0 0 0-.339-.034 3.43 3.43 0 0 0-.942 1.183 3.39 3.39 0 0 0-.337 1.47c0 1.935 1.655 3.452 3.775 3.464h.03c2.517-.032 4.337-1.884 4.337-4.415 0-2.247-1.667-4.64-4.752-4.64z" fill="#fff"/>
+    </g>
+    <defs>
+        <clipPath id="2mu4dnqfla">
+            <path fill="#fff" d="M0 0h38v24H0z"/>
+        </clipPath>
+    </defs>
+</svg>

package/app-template/public/visa.svg

@@ -0,0 +1,12 @@
+<svg width="38" height="24" viewBox="0 0 38 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#ezvyrlvp0a)">
+        <path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#000"/>
+        <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32z" fill="#fff"/>
+        <path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2l-1.7.1zM5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"/>
+    </g>
+    <defs>
+        <clipPath id="ezvyrlvp0a">
+            <path fill="#fff" d="M0 0h38v24H0z"/>
+        </clipPath>
+    </defs>
+</svg>

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

@@ -1,5 +1,5 @@
 import { URLS } from '@akinon/next/data/urls';
-import { Metadata, PageProps } from '@akinon/next/types';
+import { Metadata, AsyncPageProps } from '@akinon/next/types';
 import logger from '@akinon/next/utils/log';
 import { notFound } from 'next/navigation';
 
@@ -56,7 +56,7 @@ const resolvePrettyUrlHandler =
     return prettyUrlResult;
   };
 
-export async function generateMetadata(props: PageProps) {
+export async function generateMetadata(props: AsyncPageProps) {
   const params = await props.params;
   let result: Metadata = {};
   const { prettyurl } = params;
@@ -78,41 +78,41 @@ export async function generateMetadata(props: PageProps) {
   }
 
   const commonProps = {
-    params: {
+    params: Promise.resolve({
       ...params,
       pk: prettyUrlResult.pk
-    },
+    }),
     searchParams: Promise.resolve(searchParams)
   };
 
   try {
     if (prettyUrlResult.path.startsWith('/product/')) {
       await import('@product/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/group-product/')) {
       await import('@group-product/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/category/')) {
       await import('@category/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/special-page/')) {
       await import('@special-page/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
 
     if (prettyUrlResult.path.startsWith('/flat-page/')) {
       await import('@flat-page/[pk]/page').then(async (module) => {
-        result = await module['generateMetadata']?.(commonProps);
+        result = await module['generateMetadata']?.(commonProps as any);
       });
     }
     // eslint-disable-next-line no-empty
@@ -161,8 +161,8 @@ export default async function Page(props) {
       ...params,
       pk: result.pk
     },
-    searchParams: Promise.resolve(urlSearchParams)
-  };
+    searchParams: urlSearchParams
+  } as any;
 
   if (result.path.startsWith('/category/')) {
     const CategoryPage = (await import('@category/[pk]/page')).default;

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/account/layout.tsx

@@ -1,6 +1,7 @@
 import AccountBackButton from '@theme/views/account/back-button';
 import AccountMenu from '@theme/views/account/account-menu';
-import { getServerSession } from 'next-auth/next';
+import ThemePlaceholder from '@akinon/pz-theme/src/theme-placeholder';
+import { auth } from 'auth';
 import { ROUTES } from 'routes';
 import { redirect } from '@akinon/next/utils/redirect';
 
@@ -9,7 +10,7 @@ export default async function AccountLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const session = await getServerSession();
+  const session = await auth();
 
   if (!session?.user) {
     return redirect(ROUTES.AUTH);
@@ -20,7 +21,7 @@ export default async function AccountLayout({
       <AccountMenu />
       <div className="w-full flex-1">
         <AccountBackButton />
-
+        <ThemePlaceholder slug="account-page-body" />
         {children}
       </div>
     </div>

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/account/orders/[id]/cancellation/page.tsx

@@ -18,7 +18,8 @@ import {
   Link,
   FileInput
 } from '@theme/components';
-import { useState, use } from 'react';
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
 import { OrderCancellationItem } from '@theme/views/account/orders/order-cancellation-item';
 import { useLocalization } from '@akinon/next/hooks';
@@ -27,9 +28,8 @@ const accountOrderCancellationSchema = yup.object().shape({
   return_policy: yup.boolean().oneOf([true], 'This field is required.')
 });
 
-const AccountOrderCancellation = ({ params }) => {
-  const pageParams = use(params) as { id: string };
-
+const AccountOrderCancellation = () => {
+  const params = useParams<{ id: string }>();
   const { t } = useLocalization();
   const {
     register,
@@ -50,7 +50,7 @@ const AccountOrderCancellation = ({ params }) => {
     data: order,
     isLoading,
     isSuccess: orderSuccess
-  } = useGetOrderQuery(pageParams.id);
+  } = useGetOrderQuery(params.id);
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [responseMessage, setResponseMessage] = useState({
@@ -237,13 +237,13 @@ const AccountOrderCancellation = ({ params }) => {
           <div>
             <div className="pb-2 mb-3 text-lg border-gray border-b">
               <span data-testid="account-orders-return-order-count">
-                {order.orderitem_set.length}
+                {order?.orderitem_set?.length}
               </span>{' '}
               <span>{t('account.my_orders.detail.products')}</span>
             </div>
 
             <form onSubmit={handleSubmit(onSubmit)}>
-              {order.orderitem_set.map((item, index: number) => (
+              {order?.orderitem_set?.map((item, index: number) => (
                 <Controller
                   defaultValue={[]}
                   control={control}
@@ -254,7 +254,7 @@ const AccountOrderCancellation = ({ params }) => {
                       return cancelItem.order_item === item.id;
                     });
 
-                    const cancellationType = item.is_refundable
+                    const cancellationType = item?.is_refundable
                       ? 'refund'
                       : 'cancel';
 
@@ -270,7 +270,10 @@ const AccountOrderCancellation = ({ params }) => {
                         onChange={onChange}
                         value={value}
                         selectOption={selectOption}
-                        fileInput={fileInputCondition(item, item.product.name)}
+                        fileInput={fileInputCondition(
+                          item,
+                          item?.product?.name
+                        )}
                       />
                     );
                   }}
@@ -297,7 +300,7 @@ const AccountOrderCancellation = ({ params }) => {
                     </label>
                     {errors.return_policy && (
                       <div className="text-sm text-error">
-                        {errors.return_policy.message}
+                        {String(errors.return_policy.message)}
                       </div>
                     )}
                   </div>

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/account/orders/[id]/page.tsx

@@ -5,7 +5,8 @@ import { Image } from '@akinon/next/components/image';
 import clsx from 'clsx';
 import { SalesContractModal } from '@theme/views/sales-contract-modal';
 import { useGetOrderQuery } from '@akinon/next/data/client/account';
-import { useEffect, useState, use } from 'react';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
 
 import { OrderDetailHeader } from '@theme/views/account/orders/order-detail-header';
 import { ROUTES } from '@theme/routes';
@@ -13,9 +14,8 @@ import { useLocalization } from '@akinon/next/hooks';
 import settings from 'settings';
 import { getOrderStatus } from 'utils';
 
-const AccountOrderDetail = ({ params }) => {
-  const pageParams = use(params) as { id: string };
-
+const AccountOrderDetail = () => {
+  const { id } = useParams<{ id: string }>();
   const { locale, t } = useLocalization();
 
   const localeValue = settings.localization.locales.find(
@@ -27,20 +27,21 @@ const AccountOrderDetail = ({ params }) => {
     isLoading,
     isSuccess,
     isFetching
-  } = useGetOrderQuery(pageParams.id);
+  } = useGetOrderQuery(id);
   const [orderDate, setOrderDate] = useState('');
 
   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);
 
@@ -62,7 +63,26 @@ const AccountOrderDetail = ({ params }) => {
   }, [order, isSuccess, localeValue]);
 
   if (isLoading && isFetching) {
-    return <LoaderSpinner />;
+    return (
+      <div className="flex flex-col items-center justify-center h-96">
+        <LoaderSpinner />
+      </div>
+    );
+  }
+
+  if (!order) {
+    return (
+      <div className="flex flex-col items-center justify-center h-96">
+        <p className="mt-5 text-start text-lg mb-4">
+          {t('account.my_orders.detail.no_orders_found')}
+        </p>
+        <Link href={`/account/orders/`}>
+          <Button className="px-4" appearance="filled">
+            {t('account.my_orders.detail.back_to_orders')}
+          </Button>
+        </Link>
+      </div>
+    );
   }
 
   return (
@@ -77,8 +97,8 @@ const AccountOrderDetail = ({ params }) => {
 
         <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>
@@ -88,16 +108,17 @@ const AccountOrderDetail = ({ params }) => {
           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
           );
 
@@ -121,8 +142,8 @@ const AccountOrderDetail = ({ params }) => {
                 <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>
@@ -134,7 +155,7 @@ const AccountOrderDetail = ({ params }) => {
               <div className="px-4 lg:px-7">
                 {group.map((item, index) => {
                   const itemStatus = getOrderStatus(
-                    item.status.value.toString(),
+                    item?.status?.value?.toString(),
                     t
                   );
 
@@ -144,18 +165,18 @@ const AccountOrderDetail = ({ params }) => {
                       key={index}
                     >
                       <div className="flex gap-3 mb-5 lg:mb-0">
-                        <div className="shrink-0">
+                        <div className="flex-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}
                             />
@@ -164,33 +185,33 @@ const AccountOrderDetail = ({ params }) => {
 
                         <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>
                             )}
 
                             <div>
                               <span>{t('account.my_orders.detail.code')}</span>:{' '}
-                              {item.product.base_code}
+                              {item?.product?.base_code}
                             </div>
                           </div>
                         </div>
@@ -207,11 +228,11 @@ const AccountOrderDetail = ({ params }) => {
                             {itemStatus.label}
                           </div>
 
-                          {(item.is_cancellable || item.is_refundable) &&
-                            order.is_cancellable && (
+                          {(item?.is_cancellable || item?.is_refundable) &&
+                            order?.is_cancellable && (
                               <div className="lg:ml-24">
                                 <Link
-                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order.id}/cancellation`}
+                                  href={`${ROUTES.ACCOUNT_ORDERS}/${order?.id}/cancellation`}
                                 >
                                   <Button
                                     className="px-4 uppercase font-bold h-7"
@@ -227,21 +248,21 @@ const AccountOrderDetail = ({ params }) => {
                             )}
                         </div>
                         <div className="flex flex-col justify-center items-end lg:ml-6 lg:min-w-[7rem]">
-                          {parseFloat(item.retail_price) >
-                            parseFloat(item.price) && (
+                          {parseFloat(item?.retail_price || '0') >
+                            parseFloat(item?.price || '0') && (
                             <Price
                               className="font-normal line-through"
-                              value={item.retail_price}
+                              value={item?.retail_price}
                             />
                           )}
 
                           <Price
                             className={clsx('font-normal', {
                               'text-secondary-600':
-                                parseFloat(item.retail_price) >
-                                parseFloat(item.price)
+                                parseFloat(item?.retail_price || '0') >
+                                parseFloat(item?.price || '0')
                             })}
-                            value={item.price}
+                            value={item?.price}
                           />
                         </div>
                       </div>
@@ -325,29 +346,29 @@ const AccountOrderDetail = ({ params }) => {
           <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>
@@ -360,7 +381,8 @@ const AccountOrderDetail = ({ params }) => {
               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/app/{[commerce]/[locale]/[currency] → [pz]}/account/page.tsx

@@ -53,7 +53,7 @@ export default function Page() {
     <div className="hidden lg:block">
       <div className="bg-gray-150">
         {orderLoading && (
-          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center flex-row! xl:h-[5.5rem]">
+          <SkeletonWrapper className="w-full px-6 mb-12 h-28 items-center justify-center !flex-row xl:h-[5.5rem]">
             <Skeleton className="w-[11.375rem] h-16 mr-4 xl:w-[16rem] xl:h-10" />
             <Skeleton className="w-56 h-10 mr-4" />
             <Skeleton className="w-[12.75rem] h-10 xl:w-56" />

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

@@ -288,9 +288,9 @@ export default function Page() {
                 />
               </div>
             </div>
-            {errors && (
+            {errors?.birthdate?.message && (
               <div className="mt-1 text-sm text-error">
-                {errors.birthdate?.message}
+                {String(errors.birthdate.message)}
               </div>
             )}
           </div>

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

@@ -122,7 +122,7 @@ export default function Stores() {
 
       <div className="flex gap-6 mt-4 flex-col md:flex-row">
         {city && (
-          <div className="w-full shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
+          <div className="w-full flex-shrink-0 md:w-60 overflow-y-scroll max-h-[36rem]">
             {cityLoading && (
               <SkeletonWrapper>
                 <Skeleton className="w-full h-20" />
@@ -174,7 +174,7 @@ export default function Stores() {
                           title={store.name}
                           titleClassName="text-xs font-bold"
                           iconSize={12}
-                          className="relative py-3 border-b border-gray-200 justify-center mb-0"
+                          className="relative py-3 border-b justify-center mb-0"
                         >
                           <div className="text-xs">
                             {store.address && (

package/app-template/src/app/{[commerce]/[locale]/[currency] → [pz]}/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 border-gray-200 md:border-0">
+      <div className="w-full flex flex-wrap border md:border-0">
         <div
           className={twMerge(
             clsx('w-full md:block md:w-1/2', {

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

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