@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,117 @@
+'use client';
+
+import { ReactNode, useMemo, useRef, useCallback } from 'react';
+import { useGetBasketQuery } from '@akinon/next/data/client/basket';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  closeMiniBasket,
+  toggleMiniBasket
+} from '@akinon/next/redux/reducers/root';
+import { openSearch } from '@akinon/next/redux/reducers/header';
+import clsx from 'clsx';
+import { ROUTES } from '@theme/routes';
+
+import MiniBasket from './mini-basket';
+import { Badge, Icon, Link } from '@theme/components';
+import { useOnClickOutside } from '@akinon/next/hooks';
+
+interface MenuItem {
+  label: string;
+  url?: string;
+  action?: () => void;
+  icon: string;
+  className?: string;
+  badge?: ReactNode;
+  miniBasket?: ReactNode;
+  dataTestId?: string;
+}
+
+export default function ActionMenu() {
+  const dispatch = useAppDispatch();
+
+  const { data } = useGetBasketQuery();
+  const totalQuantity = useMemo(() => data?.total_quantity ?? 0, [data]);
+
+  const { open: miniBasketOpen } = useAppSelector(
+    (state) => state.root.miniBasket
+  );
+  const miniBasketRef = useRef(null);
+  const closeMiniBasketCb = useCallback(() => {
+    if (miniBasketOpen) dispatch(closeMiniBasket());
+  }, [miniBasketOpen, dispatch]);
+  useOnClickOutside(miniBasketRef, closeMiniBasketCb);
+
+  const MenuItems: MenuItem[] = [
+    {
+      label: 'Search',
+      action: () => {
+        dispatch(openSearch());
+      },
+      icon: 'search',
+      className: 'sm:hidden',
+      dataTestId: 'header-search'
+    },
+    {
+      label: 'Favourite Products',
+      url: ROUTES.ACCOUNT_WISHLIST,
+      icon: 'heart-stroke',
+      dataTestId: 'header-favourite'
+    },
+    {
+      label: 'Basket',
+      action() {
+        dispatch(toggleMiniBasket());
+      },
+      icon: 'cart',
+      dataTestId: 'header-basket',
+      badge: (
+        <Badge
+          className={clsx(
+            'w-4',
+            totalQuantity === 0
+              ? 'bg-primary text-gray-500'
+              : 'bg-secondary-500 text-white'
+          )}
+        >
+          {totalQuantity}
+        </Badge>
+      ),
+      miniBasket: <MiniBasket />
+    }
+  ];
+
+  return (
+    <ul className="flex items-center space-x-3 lg:space-x-10">
+      {MenuItems.map((menu, index) => (
+        <li
+          key={index}
+          className={clsx('flex items-center relative', menu.className)}
+          ref={menu.miniBasket ? miniBasketRef : null}
+        >
+          {menu.action ? (
+            <button onClick={menu.action} data-testid={menu.dataTestId}>
+              <Icon name={menu.icon} size={24} />
+              {menu.badge}
+            </button>
+          ) : (
+            <Link
+              href={menu.url ?? '#'}
+              passHref={true}
+              onClick={(event) => {
+                if (menu.action) {
+                  event.preventDefault();
+                  menu.action();
+                }
+              }}
+              data-testid={menu.dataTestId}
+            >
+              <Icon name={menu.icon} size={24} />
+              {menu.badge}
+            </Link>
+          )}
+          {menu.miniBasket}
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -0,0 +1,32 @@
+import 'server-only';
+
+import { UserMenu } from './user-menu';
+import ActionMenu from './action-menu';
+
+import HeaderBandText from '@theme/widgets/header-band-text';
+import { LanguageSelect } from '@theme/components';
+import { CurrencySelect } from 'components/currency-select';
+
+export default function HeaderBand() {
+  return (
+    <div className="contents text-xs">
+      <div className="hidden justify-start sm:inline-flex sm:gap-x-5 sm:header-grid-area-band-l">
+        <LanguageSelect className="bg-transparent w-11 px-0 text-sm" />
+        <CurrencySelect className="bg-transparent w-12 px-0 text-sm" />
+      </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">
+          <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">
+          <UserMenu isMobile={false} />
+          <ActionMenu />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import 'server-only';
+
+import { Link } from '@theme/components';
+import clsx from 'clsx';
+import { ROUTES } from '@theme/routes';
+import { menuGenerator } from '@akinon/next/utils';
+
+import HeaderBand from './band';
+import MobileHamburgerButton from './mobile-hamburger-button';
+import MobileMenu from './mobile-menu';
+import Navbar from './navbar';
+import { getMenu } from '@akinon/next/data/server';
+import { Image } from '@akinon/next/components/image';
+
+export default async function Header() {
+  const response = await getMenu();
+  const menu = menuGenerator(response);
+
+  return (
+    <header className="relative">
+      <div
+        className={clsx([
+          'grid',
+          'mx-auto',
+          'header-m-template-cols',
+          'header-grid-template-areas',
+          'border-b',
+          'border-gray-100',
+          'before:hidden',
+          'before:absolute',
+          'before:top-0',
+          'before:left-0',
+          'before:w-full',
+          'before:bg-gray-100',
+          'before:h-9',
+          'before:z-[-1]',
+          'before:content-[""]',
+          'sm:grid-cols-3',
+          'sm:container',
+          'sm:before:block'
+        ])}
+      >
+        <HeaderBand />
+        <MobileHamburgerButton />
+        <Link
+          href={ROUTES.HOME}
+          passHref={true}
+          className="self-center block w-40 pl-3 header-grid-area-main-m sm:mt-9 sm:w-72 sm:justify-self-center sm:p-0"
+          aria-label="Homepage"
+        >
+          <Image
+            src="/logo.svg"
+            alt="Project Zero"
+            width={285}
+            height={27}
+            className="block w-full"
+            style={{ height: 'auto', width: '100%' }}
+            unoptimized
+          />
+        </Link>
+        <MobileMenu menu={menu} />
+        <Navbar menu={menu} />
+      </div>
+    </header>
+  );
+}

package/app-template/src/views/header/mini-basket.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+  basketApi,
+  useGetBasketQuery,
+  useUpdateQuantityMutation
+} from '@akinon/next/data/client/basket';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { closeMiniBasket } from '@akinon/next/redux/reducers/root';
+import { BasketItem } from '@akinon/next/types';
+import { Price, Button, Icon, LoaderSpinner, Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import {
+  useCommonProductAttributes,
+  useLocalization
+} from '@akinon/next/hooks';
+import { Image } from '@akinon/next/components/image';
+import { pushRemoveFromCart } from '@theme/utils/gtm';
+
+interface MiniBasketItemProps {
+  basketItem: BasketItem;
+  highlightedItem: number;
+  miniBasketListRef: MutableRefObject<HTMLUListElement>;
+}
+
+function MiniBasketItem(props: MiniBasketItemProps) {
+  const { basketItem, highlightedItem, miniBasketListRef } = props;
+  const dispatch = useAppDispatch();
+  const [updateQuantityMutation] = useUpdateQuantityMutation();
+  const commonProductAttributes = useCommonProductAttributes({
+    attributes: basketItem.product.attributes_kwargs
+  });
+  const { t } = useLocalization();
+
+  const isHighlighted = useMemo(() => {
+    return highlightedItem === basketItem.product.pk;
+  }, [highlightedItem, basketItem.product.pk]);
+
+  useEffect(() => {
+    const miniBasketList = miniBasketListRef.current;
+
+    if (highlightedItem === basketItem.product.pk) {
+      if (miniBasketList.scrollTop > 0) {
+        miniBasketList.scrollTop = 0;
+      }
+    }
+  }, [highlightedItem, basketItem.product.pk]);
+
+  const removeItem = () => {
+    updateQuantityMutation({
+      product: basketItem.product.pk,
+      quantity: 0,
+      attributes: {} // TODO: Handle attributes
+    })
+      .unwrap()
+      .then((data) => {
+        dispatch(
+          basketApi.util.updateQueryData(
+            'getBasket',
+            undefined,
+            (draftBasket) => {
+              Object.assign(draftBasket, data.basket);
+            }
+          )
+        );
+
+        pushRemoveFromCart(basketItem?.product);
+      });
+  };
+
+  return (
+    <li
+      style={{ order: isHighlighted ? '-1' : '0' }}
+      className={clsx('flex gap-3 py-4 border-b border-gray-500')}
+    >
+      <Link
+        href={basketItem.product.absolute_url}
+        className={clsx(
+          'block shrink-0 transition-all duration-300',
+          isHighlighted ? 'w-24 h-40' : 'w-12 h-20'
+        )}
+      >
+        <Image
+          src={basketItem.product.productimage_set?.[0]?.image ?? ''}
+          alt={basketItem.product.name}
+          width={isHighlighted ? 96 : 48}
+          height={isHighlighted ? 160 : 80}
+          className="transition-all duration-300"
+        />
+      </Link>
+      <div className="flex flex-col flex-1">
+        <div
+          className={clsx(
+            'flex items-center gap-1 transition-all duration-300',
+            isHighlighted
+              ? 'h-16 opacity-100 visible'
+              : 'h-0 opacity-0 invisible'
+          )}
+        >
+          <p className="text-[rgb(123,157,118)]">
+            {t('basket.mini_basket.in_the_bag')}
+          </p>
+          <Icon name="check" className="text-[rgb(123, 157, 118)]" size={14} />
+        </div>
+        <Link
+          href={basketItem.product.absolute_url}
+          className="block"
+          data-testid="mini-basket-item-name"
+        >
+          {basketItem.product.name}
+          {/* TODO: Get correct variants */}
+        </Link>
+        {commonProductAttributes.map((attribute, index) => (
+          <span
+            key={index}
+            data-testid={`mini-basket-item-${attribute.name.toLowerCase()}`}
+          >
+            {attribute.name}: {attribute.value}
+          </span>
+        ))}
+        <footer className="flex justify-between mt-3">
+          {parseFloat(basketItem.retail_price) >
+            parseFloat(basketItem.price) && (
+            <Price
+              value={parseFloat(basketItem.retail_price) * basketItem.quantity}
+              className="line-through"
+            />
+          )}
+          <Price value={basketItem.total_amount} />
+          <Button
+            appearance="ghost"
+            className={clsx(
+              'p-0 h-auto text-xs font-semibold underline transition-all duration-300',
+              isHighlighted ? 'invisible' : 'visible'
+            )}
+            onClick={removeItem}
+          >
+            {t('basket.mini_basket.remove')}
+          </Button>
+        </footer>
+      </div>
+    </li>
+  );
+}
+
+export default function MiniBasket() {
+  const { open: miniBasketOpen } = useAppSelector(
+    (state) => state.root.miniBasket
+  );
+  const dispatch = useAppDispatch();
+  const { data: basket, isLoading, isSuccess } = useGetBasketQuery();
+  const { t } = useLocalization();
+  const { highlightedItem } = useAppSelector((state) => state.root.miniBasket);
+  const [highlightedItemPk, setHighlightedItemPk] = useState(0);
+  const [sortedBasket, setSortedBasket] = useState([]);
+
+  const totalQuantity = useMemo(() => basket?.total_quantity ?? 0, [basket]);
+  const miniBasketList = useRef();
+
+  useEffect(() => {
+    if (highlightedItem > 0) {
+      setHighlightedItemPk(highlightedItem);
+    }
+  }, [highlightedItem]);
+
+  useEffect(() => {
+    if (isSuccess) {
+      if (highlightedItemPk > 0) {
+        setSortedBasket(
+          basket.basketitem_set.slice().sort((a, b) => {
+            if (a.product.pk === highlightedItemPk) {
+              return -1;
+            } else if (b.product.pk === highlightedItemPk) {
+              return 1;
+            } else {
+              return a.product.pk - b.product.pk;
+            }
+          })
+        );
+      } else {
+        setSortedBasket(basket.basketitem_set);
+      }
+    }
+  }, [isSuccess, highlightedItem, basket]);
+
+  return (
+    <>
+      <div
+        className={clsx(
+          miniBasketOpen
+            ? 'opacity-100 visible lg:invisible'
+            : 'opacity-0 invisible',
+          'fixed top-0 left-0 z-50 w-screen h-screen bg-black bg-opacity-80 transition-all duration-300'
+        )}
+        onClick={() => {
+          dispatch(closeMiniBasket());
+        }}
+      />
+      <div
+        className={clsx(
+          miniBasketOpen
+            ? 'flex flex-col opacity-100 visible lg:translate-y-[calc(100%)]'
+            : 'opacity-0 invisible translate-x-full lg:translate-x-0 lg:translate-y-[calc(100%+16px)]',
+          'fixed lg:absolute bottom-0 lg:-bottom-1 right-0 w-80 h-screen lg:h-auto bg-white lg:border-l lg:border-t lg:border-r-2 lg:border-b-2 lg:border-gray-500 p-5 z-50 transition-all duration-300'
+        )}
+      >
+        <header className="flex items-center gap-2 pb-3 border-b">
+          <h3 className="text-xl font-bold">
+            {t('basket.mini_basket.my_bag')}
+          </h3>
+          <span>
+            {totalQuantity}
+            {t('basket.mini_basket.items')}
+          </span>
+          <Icon
+            name="close"
+            size={16}
+            className="ml-auto fill-primary hover:cursor-pointer"
+            onClick={() => dispatch(closeMiniBasket())}
+          />
+        </header>
+        {isLoading && <LoaderSpinner />} {/* TODO: Fix spinner position */}
+        {isSuccess && (
+          <ul
+            ref={miniBasketList}
+            className="overflow-y-auto lg:max-h-64 flex flex-col"
+          >
+            {sortedBasket.map((basketItem) => (
+              <MiniBasketItem
+                key={basketItem.id}
+                basketItem={basketItem}
+                highlightedItem={highlightedItem}
+                miniBasketListRef={miniBasketList}
+              />
+            ))}
+          </ul>
+        )}
+        <footer className="flex flex-col gap-3 mt-auto lg:mt-3 lg:flex-1">
+          <div className="flex self-center gap-1 text-xs font-semibold">
+            <span>{t('basket.mini_basket.subtotal')}</span>
+            <Price value={basket?.total_amount} />
+          </div>
+          {/* TODO: Fix link styles */}
+          <Link
+            onClick={() => {
+              dispatch(closeMiniBasket());
+            }}
+            href={ROUTES.BASKET}
+            data-testid="mini-basket-view-bag"
+            className="w-full flex items-center justify-center bg-primary text-primary-foreground border border-primary h-8 font-semibold transition-all hover:bg-primary-foreground hover:text-primary"
+          >
+            {t('basket.mini_basket.view_bag')}
+          </Link>
+          <Link
+            href="/"
+            className="h-auto p-0 font-semibold underline self-center"
+            data-testid="mini-basket-continue-shopping"
+          >
+            {t('basket.mini_basket.continue_shopping')}
+          </Link>
+        </footer>
+      </div>
+    </>
+  );
+}

package/app-template/src/views/header/mobile-hamburger-button.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { toggleMobileMenu } from '@akinon/next/redux/reducers/header';
+import clsx from 'clsx';
+
+import { PwaBackButton } from './pwa-back-button';
+import { Button, Icon } from '@theme/components';
+
+export default function MobileHamburgerButton() {
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="flex row-start-2 sm:hidden ">
+      <PwaBackButton />
+      <Button
+        className={clsx([
+          'w-12',
+          'h-12',
+          'bg-secondary',
+          'text-white',
+          'flex',
+          'items-center',
+          'justify-center',
+          'px-0',
+          'border-none',
+          'hover:bg-secondary-hover'
+        ])}
+        onClick={() => dispatch(toggleMobileMenu())}
+      >
+        <Icon name="hamburger" size={18} className="fill-white" />
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState } from 'react';
+import { MenuItemType } from '@akinon/next/types';
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import { closeMobileMenu } from '@akinon/next/redux/reducers/header';
+import clsx from 'clsx';
+
+import { UserMenu } from './user-menu';
+import {
+  Button,
+  CurrencySelect,
+  Icon,
+  LanguageSelect,
+  Link
+} from '@theme/components';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface MobileMenuProps {
+  menu: MenuItemType[];
+}
+
+export default function MobileMenu(props: MobileMenuProps) {
+  const { menu } = props;
+  const dispatch = useAppDispatch();
+  const [selectedSubMenu, setSelectedSubMenu] = useState<MenuItemType | null>(
+    null
+  );
+  const { t } = useLocalization();
+
+  const isMobileMenuOpen = useAppSelector(
+    (state) => state.header.isMobileMenuOpen
+  );
+
+  return (
+    <>
+      {/* MENU OVERLAY */}
+      <div
+        className={clsx(
+          'fixed top-0 left-0 z-30 w-screen h-screen invisible opacity-0 bg-black bg-opacity-80 transition duration-500',
+          {
+            '!visible !opacity-100 scroll-lock': isMobileMenuOpen
+          }
+        )}
+        // TODO: Remove this after we have a better solution for clicking outside of the menu
+        onClick={() => {
+          dispatch(closeMobileMenu());
+          setSelectedSubMenu(null);
+        }}
+      />
+      {/* TODO: Add a way to close the menu when clicking outside of it */}
+      <div
+        className={clsx(
+          'fixed top-0 left-0 z-50 flex flex-col bg-white w-72 pt-4 h-screen invisible opacity-0 transition duration-500 transform -translate-x-72',
+          {
+            '!visible !opacity-100 translate-x-0': isMobileMenuOpen
+          }
+        )}
+      >
+        <UserMenu isMobile />
+        <div className="relative flex-1 overflow-x-hidden">
+          <ul
+            className={clsx('pt-4 transition duration-500 transform', {
+              '-translate-x-full': selectedSubMenu
+            })}
+          >
+            {menu.map(
+              (item, index) =>
+                item.label != null && (
+                  <li key={index} className="py-4 text-sm px-8">
+                    <Link
+                      href={item.url}
+                      onClick={(e) => {
+                        if (item.children.length > 0) {
+                          e.preventDefault();
+                          setSelectedSubMenu(item);
+                        }
+                      }}
+                      className="flex items-center justify-between"
+                    >
+                      <span>{item.label}</span>
+                      <Icon name="chevron-end" size={14} />
+                    </Link>
+                  </li>
+                )
+            )}
+          </ul>
+          <div
+            className={clsx(
+              'absolute top-0 left-0 right-0 px-8 bg-white invisible opacity-0 transition duration-500 transform translate-x-full',
+              {
+                '!visible !opacity-100 !translate-x-0': selectedSubMenu
+              }
+            )}
+          >
+            <header className="flex items-center justify-between border-b h-[61px] py-4 mb-4">
+              <Button
+                appearance="ghost"
+                onClick={() => setSelectedSubMenu(null)}
+                className="underline text-xs font-semibold flex items-center gap-2 !p-0"
+              >
+                <Icon name="chevron-start" size={12} className="shrink-0" />
+                {t('common.mobile_menu.back')}
+              </Button>
+              <span className="text-sm">{selectedSubMenu?.label}</span>
+            </header>
+            <div className="flex flex-col">
+              {selectedSubMenu?.children.map((child, index) => (
+                <div key={index} className="flex flex-col">
+                  <Link
+                    onClick={() => dispatch(closeMobileMenu())}
+                    href={child.url}
+                    className="text-xs font-bold py-4"
+                  >
+                    {child.label}
+                  </Link>
+
+                  <ul>
+                    {child.children.map((subChild, index) => (
+                      <li key={index} className="">
+                        <Link
+                          onClick={() => dispatch(closeMobileMenu())}
+                          href={subChild.url}
+                          className="text-sm flex items-center justify-between py-4"
+                        >
+                          <span>{subChild.label}</span>
+                          <Icon name="chevron-end" size={14} />
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-x-4 px-8 py-4">
+          <LanguageSelect className="bg-transparent w-11 px-0 text-sm" />
+          <CurrencySelect className="bg-transparent w-12 px-0 text-sm" />
+        </div>
+      </div>
+    </>
+  );
+}