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

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/pwa-tags.tsx

@@ -2,7 +2,6 @@ import { Metadata } from '@akinon/next/types';
 
 const pwaTags: Metadata = {
   manifest: '/manifest.json',
-  themeColor: '#FFFFFF',
   formatDetection: {
     telephone: false
   },

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

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

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

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

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

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

package/app-template/src/components/types/index.ts

@@ -4,7 +4,10 @@ import { UsePaginationType } from '@akinon/next/hooks/use-pagination';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  appearance?: 'filled' | 'outlined' | 'ghost';
+  appearance?: 'filled' | 'outlined' | 'ghost' | 'link' | string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
 }
 
 export interface PaginationProps {

package/app-template/src/middleware.ts

@@ -9,6 +9,7 @@ import { NextMiddleware, NextResponse } from 'next/server';
  */
 
 export const config = {
+  // For .xml.gz type sitemap urls, update '/(.*sitemap\\.xml)' with this regex '/(.*sitemap\\.xml|sitemap/.*.xml(?:.gz)?)/',
   matcher: [
     '/((?!api|_next|[\\w-\\/*]+\\.\\w+).*)',
     '/(.*sitemap\\.xml)',

package/app-template/src/plugins.js

@@ -13,5 +13,6 @@ module.exports = [
   'pz-b2b',
   'pz-akifast',
   'pz-saved-card',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-tamara-extension'
 ];

package/app-template/src/redux/middlewares/category.ts

@@ -4,7 +4,7 @@ import { setSelectedFacets } from '@theme/redux/reducers/category';
 
 const getSelectedFacets = (facets: Array<Facet>) => {
   return facets
-    .map((facet) => {
+    ?.map((facet) => {
       return {
         ...facet,
         data: {

package/app-template/src/redux/reducers/category.ts

@@ -32,7 +32,7 @@ const categorySlice = createSlice({
     toggleFacet(state, action) {
       const facets = JSON.parse(JSON.stringify(state.facets));
 
-      state.selectedFacets = facets.map((facet) => {
+      state.selectedFacets = facets?.map((facet) => {
         if (facet.key === action.payload.facet.key) {
           facet.data.choices = facet.data.choices
             .map((choice) => {

package/app-template/src/redux/store.ts

@@ -6,6 +6,7 @@ import {
   Action,
   AnyAction,
   configureStore,
+  Middleware,
   Store,
   ThunkAction,
   ThunkDispatch
@@ -13,20 +14,20 @@ import {
 import categoryReducer from '@theme/redux/reducers/category';
 import categoryMiddleware from '@theme/redux/middlewares/category';
 
+const _middlewares: Middleware[] = [...middlewares, categoryMiddleware];
+
 const _reducers = {
   ...reducers,
   category: categoryReducer
 };
 
-const _middlewares = [...middlewares, categoryMiddleware];
-
 export const makeStore = (): Store<{
   [key in keyof typeof _reducers]: ReturnType<typeof _reducers[key]>;
 }> =>
   configureStore({
     reducer: _reducers,
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat([..._middlewares])
+      getDefaultMiddleware().concat(_middlewares)
   });
 
 export type AppStore = ReturnType<typeof makeStore>;

package/app-template/src/settings.js

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

package/app-template/src/utils/convert-facet-search-params.ts

@@ -1,7 +1,7 @@
 import { Facet } from '@akinon/next/types';
 
 const convertFacetSearchParams = (facets: Facet[]) => {
-  const _facets: string[][] = facets.flatMap((facet) => {
+  const _facets: string[][] = facets?.flatMap((facet) => {
     return [
       ...facet.data.choices.map((choice) => {
         return [facet.search_key, choice.value as string];

package/app-template/src/views/account/address-form.tsx

@@ -247,7 +247,7 @@ export const AddressForm = (props: Props) => {
       />
       <Input
         label={t('account.address_book.form.phone.placeholder')}
-        format={config.user_phone_format.replaceAll(/\9/g, '#')}
+        format={config.user_phone_format.replaceAll(/9/g, '#')}
         mask="_"
         allowEmptyFormatting={true}
         control={control}
@@ -339,7 +339,7 @@ export const AddressForm = (props: Props) => {
         error={errors.postcode}
         data-testid="address-form-post-code"
         required
-        format={config.user_post_code_format.replaceAll(/\9/g, '#')}
+        format={config.user_post_code_format.replaceAll(/9/g, '#')}
         control={control}
         mask="_"
         allowEmptyFormatting

package/app-template/src/views/account/contact-form.tsx

@@ -192,7 +192,7 @@ const ContactForm = () => {
                 label={t('account.contact.form.phone.placeholder')}
                 type="tel"
                 className="mb-1"
-                format={user_phone_format.replace(/\9/g, '#')}
+                format={user_phone_format.replace(/9/g, '#')}
                 mask="_"
                 allowEmptyFormatting={true}
                 control={control}
@@ -242,7 +242,7 @@ const ContactForm = () => {
               <span className="text-secondary">*</span>
             </label>
             <textarea
-              className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-none focus:border-black hover:border-black"
+              className="border-gray-500 border w-full text-xs p-2.5 focus-visible:outline-hidden focus:border-black hover:border-black"
               rows={7}
               name="message"
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -255,13 +255,8 @@ const ContactForm = () => {
             <label className="text-xs text-gray-800 mb-2 block">
               {t('account.contact.form.file.title')}
             </label>
-            <FileInput
-              name="file"
-              title="file"
-              className="w-full mb-5"
-              {...register('file')}
-            />
-            <Button type="submit" className="w-full font-medium">
+            <FileInput name="file" title="file" {...register('file')} />
+            <Button type="submit" className="w-full font-medium mt-4">
               {t('account.contact.form.submit_button')}
             </Button>
           </form>

package/app-template/src/views/account/content-header.tsx

@@ -31,15 +31,14 @@ export const ContentHeader = (props: Props) => {
       </h3>
       <Select
         onChange={handleChange}
-        className="w-full mb-4 md:mb-0 md:w-56 md:mr-4 text-xs"
+        className="w-full mb-4 bg-white md:mb-0 md:w-56 md:mr-4 text-xs"
         options={orders}
         data-testid="account-orders-header-select"
       ></Select>
       <Button
         className={clsx(
           'w-full md:w-56',
-          isButtonDisabled &&
-            'hover:bg-black hover:text-white disabled:opacity-75'
+          isButtonDisabled && 'hover:bg-black/75 hover:text-white'
         )}
         onClick={handleClick}
         data-testid="account-orders-header-button"

package/app-template/src/views/account/order.tsx

@@ -60,7 +60,7 @@ export const Order = (props) => {
           <ul className="flex flex-wrap gap-3.5 mb-6 items-center md:mb-0">
             {props.orderitem_set.slice(0, 3).map((item, index) => (
               // TODO: Static image will change (TR)
-              <li className="flex-shrink-0" key={index}>
+              <li className="shrink-0" key={index}>
                 <Image
                   src={item.product.image ? item.product.image : '/noimage.jpg'}
                   alt={item.product.name}

package/app-template/src/views/account/orders/order-cancellation-item.tsx

@@ -8,7 +8,8 @@ export const OrderCancellationItem = ({
   item,
   value,
   onChange,
-  selectOption
+  selectOption,
+  fileInput
 }) => {
   const { t } = useLocalization();
   const checkboxStatus =
@@ -38,14 +39,13 @@ export const OrderCancellationItem = ({
     <div className="flex flex-wrap justify-between border-gray border-b mb-4 pb-3">
       <div className="flex gap-3 mb-5 lg:mb-0">
         {checkboxStatus && (
-          // TODO: Static image will change (TR)
           <Checkbox
             className="m-auto"
             data-testid="account-orders-return-checkbox"
             onClick={handleClick}
           />
         )}
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <Link href={item.product.absolute_url}>
             <Image
               src={item.product.image ? item.product.image : '/noimage.jpg'}
@@ -80,7 +80,7 @@ export const OrderCancellationItem = ({
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-auto">
+      <div className="flex flex-wrap justify-between w-full items-start lg:items-center lg:w-80 gap-4">
         <div className="w-full flex flex-col lg:items-center lg:flex-row">
           {item.active_cancellation_request?.easy_return?.code && (
             <div className="flex items-center">
@@ -93,6 +93,7 @@ export const OrderCancellationItem = ({
 
           {selectOption}
         </div>
+        <div>{fileInput}</div>
       </div>
     </div>
   );

package/app-template/src/views/anonymous-tracking/order-detail/index.tsx

@@ -135,7 +135,7 @@ export const AnonymousTrackingOrderDetail = ({ order }) => {
                           key={index}
                         >
                           <div className="flex gap-3 mb-5 lg:mb-0">
-                            <div className="flex-shrink-0">
+                            <div className="shrink-0">
                               <Link
                                 className="block"
                                 href={item.product.absolute_url}

package/app-template/src/views/basket/basket-item.tsx

@@ -87,6 +87,7 @@ export const BasketItem = (props: Props) => {
       <li
         key={basketItem.id}
         className="flex border-b border-gray-200 py-3 relative"
+        data-testid="basket-item"
       >
         <div className="w-20 lg:w-[105px] mr-4 shrink-0">
           <Link href={basketItem.product.absolute_url} passHref>

package/app-template/src/views/category/category-active-filters.tsx

@@ -69,7 +69,7 @@ const CategoryActiveFilters = () => {
 
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
-      {facets.map((facet) =>
+      {facets?.map((facet) =>
         facet?.data?.choices
           ?.filter((choice) => choice.is_selected)
           ?.map(

package/app-template/src/views/category/category-header.tsx

@@ -91,12 +91,18 @@ export const CategoryHeader = (props: Props) => {
                     value: String(value)
                   });
                 }}
-                className={clsx(
-                  'cursor-pointer',
-                  Number(layoutSize) === value ? 'fill-black' : 'fill-gray-500'
-                )}
+                className="cursor-pointer"
               >
-                <Icon key={value} name={icon} size={16} />
+                <Icon
+                  key={value}
+                  name={icon}
+                  size={16}
+                  className={
+                    Number(layoutSize) === value
+                      ? 'text-black'
+                      : 'text-gray-500'
+                  }
+                />
               </a>
             ))}
           </div>
@@ -115,7 +121,7 @@ export const CategoryHeader = (props: Props) => {
         </Button>
         <Select
           options={sortOptions}
-          value={sortOptions.find(({ is_selected }) => is_selected).value}
+          value={sortOptions?.find(({ is_selected }) => is_selected)?.value}
           data-testid="list-sorter"
           onChange={(e) => {
             handleSelectFilter({

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

@@ -79,7 +79,7 @@ export default function ListPage(props: ListPageProps) {
             className={clsx(
               'transition-opacity duration-300 ease-linear lg:hidden',
               isMenuOpen
-                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
+                ? 'fixed bg-black/60 inset-0 z-10 opacity-100'
                 : 'opacity-0'
             )}
           ></div>
@@ -102,7 +102,7 @@ export default function ListPage(props: ListPageProps) {
               </div>
             )}
 
-            {data.products.length === 0 && page > 1 && <LoaderSpinner />}
+            {data.products?.length === 0 && page > 1 && <LoaderSpinner />}
 
             <div
               className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
@@ -111,7 +111,7 @@ export default function ListPage(props: ListPageProps) {
                 'lg:grid-cols-3': layoutSize === 3
               })}
             >
-              {data.products.map((product, index) => (
+              {data?.products?.map((product, index) => (
                 <ProductItem
                   key={product.pk}
                   product={product}
@@ -121,7 +121,7 @@ export default function ListPage(props: ListPageProps) {
                 />
               ))}
             </div>
-            {data.products.length > 0 && (
+            {data?.products?.length > 0 && (
               <Pagination
                 total={data.pagination.total_count}
                 limit={data.pagination.page_size}

package/app-template/src/views/category/filters/index.tsx

@@ -23,7 +23,7 @@ export const Filters = (props: Props) => {
   const [isPending, startTransition] = useTransition();
 
   const haveFilter = useMemo(() => {
-    return facets.some((facet) =>
+    return facets?.some((facet) =>
       facet?.data?.choices?.some((choice) => choice.is_selected)
     );
   }, [facets]);
@@ -50,7 +50,7 @@ export const Filters = (props: Props) => {
         <span>{t('category.filters.ready_to_wear')}</span>
       </div>
 
-      {facets.map((facet) => {
+      {facets?.map((facet) => {
         return (
           <FilterItem
             key={facet.key}

package/app-template/src/views/checkout/auth.tsx

@@ -24,7 +24,7 @@ const CheckoutAuth = () => {
 
   return (
     <div className="flex flex-col w-full my-5 lg:flex-row">
-      <div className="flex-1 flex-shrink-0">
+      <div className="flex-1 shrink-0">
         <Login />
         <div className="text-center text-sm text-gray-600 uppercase mt-5">
           <span>

package/app-template/src/views/checkout/layout/header.tsx

@@ -6,7 +6,7 @@ import { Image } from '@akinon/next/components/image';
 
 const CheckoutHeader = () => {
   return (
-    <div className="relative border-b border-gray-100 shadow">
+    <div className="relative border-b border-gray-100 shadow-sm">
       <header
         className={clsx(['py-8', 'px-4', 'mx-auto', 'container', 'md:px-0'])}
       >

package/app-template/src/views/checkout/steps/payment/index.tsx

@@ -18,7 +18,7 @@ const PaymentStep = () => {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
     >
-      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none">
+      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto">
         <PaymentOptionButtons />
       </div>
       <div className="w-full border border-solid border-gray-400 bg-white">

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -319,7 +319,7 @@ const CheckoutCreditCard = () => {
                         size={16}
                         className="leading-none ml-2"
                       />
-                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
+                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2 border-gray-200">
                         {/* TODO: Fix this */}
                         <Image
                           src="/cvv.jpg"

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -44,7 +44,7 @@ const PaymentOptionButtons = () => {
         {displayedPaymentOptions.map((option) => (
           <label
             key={`payment-option-${option.pk}`}
-            className="border px-4 py-3 mt-3 flex h-12"
+            className="border border-gray-200 px-4 py-3 mt-3 flex h-12"
             onClick={scrollToTop}
           >
             <Radio
@@ -69,10 +69,10 @@ const PaymentOptionButtons = () => {
             onClick={() => onClickHandler(option)}
             className={clsx(
               'flex items-center justify-center border-r border-b border-solid',
-              'border-gray-400 text-xs uppercase text-black-800 font-medium',
-              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
+              'border-gray-400 text-xs uppercase text-black-800/60 font-medium',
+              'bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
               {
-                'text-opacity-100 border-b-transparent':
+                'text-black-800/100 border-b-transparent':
                   preOrder?.payment_option?.pk === option.pk
               }
             )}

package/app-template/src/views/checkout/steps/shipping/address-box.tsx

@@ -130,7 +130,7 @@ const AddressBox = ({
       onClick={() => handleAddressClick(addressType, address)}
       key={address.pk}
       className={clsx(
-        'cursor-pointer relative w-full border shadow p-4 min-h-[8rem]',
+        'cursor-pointer relative w-full border border-gray-200 shadow-sm p-4 min-h-[8rem]',
         "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
         'after:border-secondary-400 after:absolute after:inset-0 after:duration-150 after:-z-10',
         {
@@ -167,7 +167,7 @@ const AddressBox = ({
       <div className="text-xs flex justify-between">
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
+          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
           onClick={() => setIsEditAddressModalOpen(true)}
           data-testid="checkout-address-edit"
         >
@@ -193,7 +193,7 @@ const AddressBox = ({
         </Modal>
         <Button
           appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
+          className="italic underline hover:text-secondary-500 hover:bg-white! hover:border-white! p-0 h-auto"
           onClick={() => setRemoveAddressModalOpen(true)}
           data-testid="checkout-address-remove"
         >

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -153,7 +153,7 @@ const Addresses = () => {
                   role="button"
                   onClick={() => setIsModalOpen(true)}
                   className={clsx(
-                    'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
+                    'relative cursor-pointer w-full min-h-[8rem] border border-gray-200 shadow-sm p-4',
                     "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
                     'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
                     {

package/app-template/src/views/checkout/summary.tsx

@@ -149,7 +149,7 @@ export const Summary = () => {
             </div>
           </div>
           <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"
                 components={{
@@ -162,7 +162,7 @@ export const Summary = () => {
                 }}
               />
             </div>
-            <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+            <div className="w-full overflow-hidden text-ellipsis mb-1 last:mb-0">
               {preOrder.shipping_address?.line}{' '}
               {preOrder.shipping_address?.postcode}{' '}
               {preOrder.shipping_address?.district && (

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

@@ -83,7 +83,7 @@ const GuestLogin = () => {
           className="h-14"
           name="phone_number"
           type="tel"
-          format={user_phone_format.replace(/\9/g, '#')}
+          format={user_phone_format.replace(/9/g, '#')}
           mask="_"
           control={control}
           {...register('phone_number')}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode, useMemo, useRef, useCallback } from 'react';
-import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useGetMiniBasketQuery } from '@akinon/next/data/client/basket';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import {
   closeMiniBasket,
@@ -29,8 +29,11 @@ interface MenuItem {
 export default function ActionMenu() {
   const dispatch = useAppDispatch();
 
-  const { data } = useGetBasketQuery();
-  const totalQuantity = useMemo(() => data?.total_quantity ?? 0, [data]);
+  const { data: miniBasket } = useGetMiniBasketQuery();
+  const totalQuantity = useMemo(
+    () => miniBasket?.total_quantity ?? 0,
+    [miniBasket]
+  );
 
   const { open: miniBasketOpen } = useAppSelector(
     (state) => state.root.miniBasket

package/app-template/src/views/header/band.tsx

@@ -16,13 +16,13 @@ export default function HeaderBand() {
       </div>
 
       <div className="header-grid-area-nav bg-gray-100 h-auto p-3 sm:header-grid-area-band-m sm:h-9 sm:py-0">
-        <div className="text-center overflow-ellipsis line-clamp-2 h-full flex items-center justify-center">
+        <div className="text-center text-ellipsis line-clamp-2 h-full flex items-center justify-center">
           <HeaderBandText />
         </div>
       </div>
 
       <div className="header-grid-area-main-r h-full pr-4 sm:header-grid-area-band-r sm:pr-0">
-        <div className="flex items-center justify-end h-full">
+        <div className="flex items-center justify-end h-full gap-10">
           <UserMenu isMobile={false} />
           <ActionMenu />
         </div>