@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,117 +0,0 @@
-'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

@@ -1,32 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,267 +0,0 @@
-'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

@@ -1,35 +0,0 @@
-'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

@@ -1,144 +0,0 @@
-'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>
-    </>
-  );
-}