@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,186 +0,0 @@
-'use client';
-
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { openSearch, setOpenedMenu } from '@akinon/next/redux/reducers/header';
-import clsx from 'clsx';
-import { MenuItemType } from '@akinon/next/types';
-
-import { Icon, Link } from '@theme/components';
-import Search from './search';
-import { useLocalization } from '@akinon/next/hooks';
-import { Image } from '@akinon/next/components/image';
-
-interface NavbarProps {
-  menu: MenuItemType[];
-}
-
-export default function Navbar(props: NavbarProps) {
-  const { menu } = props;
-  const dispatch = useAppDispatch();
-  const { isSearchOpen, openedMenu } = useAppSelector((state) => state.header);
-
-  const { t } = useLocalization();
-
-  return (
-    <>
-      <nav className="relative flex-wrap items-center justify-center hidden header-grid-area-nav sm:flex justify-items-center">
-        <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 mt-8 justify-items-center">
-          {menu.map(
-            (item, index) =>
-              item.label != null && (
-                <li
-                  key={index}
-                  className="flex items-center h-full group"
-                  onMouseEnter={() => {
-                    dispatch(setOpenedMenu(item.pk));
-                  }}
-                  onMouseLeave={() => {
-                    dispatch(setOpenedMenu(null));
-                  }}
-                >
-                  <Link
-                    href={item.url}
-                    className="flex items-center p-2.5 text-sm uppercase transition hover:text-secondary"
-                    data-testid="navbar-category"
-                  >
-                    {item.label}
-                  </Link>
-
-                  {/*
-                     Performance Note:
-                    The submenu content in this Navbar component is rendered based on hover-triggered state changes.
-                    This approach is adopted for performance optimization reasons. It ensures that:
-                    1. Submenu data is only loaded and rendered when necessary, reducing initial load times and resource usage.
-                    2. Unnecessary renders are avoided, enhancing the responsiveness and efficiency of the navigation bar.
-                    Please be cautious about altering this logic, as changes could negatively impact the performance and user experience of the Navbar.
-                  */}
-
-                  {openedMenu === item.pk && item.children.length > 0 && (
-                    <div
-                      className={clsx(
-                        [
-                          'container',
-                          'absolute',
-                          'bottom-0',
-                          'left-0',
-                          'z-30',
-                          'flex',
-                          'justify-between',
-                          'invisible',
-                          'opacity-0',
-                          'bg-gray',
-                          'border-x-2',
-                          'border-gray',
-                          'pt-20',
-                          'pb-16',
-                          'transform',
-                          'translate-y-full',
-                          'transition'
-                        ],
-                        [
-                          'before:left-0',
-                          'before:-translate-x-full',
-                          'before:content-[""]',
-                          'before:w-1/2',
-                          'before:h-full',
-                          'before:block',
-                          'before:absolute',
-                          'before:top-0',
-                          'before:transform',
-                          'before:bg-gray'
-                        ],
-                        [
-                          'after:right-0',
-                          'after:translate-x-full',
-                          'after:content-[""]',
-                          'after:w-1/2',
-                          'after:h-full',
-                          'after:block',
-                          'after:absolute',
-                          'after:top-0',
-                          'after:transform',
-                          'after:bg-gray'
-                        ],
-                        {
-                          '!visible !opacity-100 delay-500':
-                            openedMenu === item.pk
-                        }
-                      )}
-                    >
-                      <div className="flex space-x-8 lg:space-x-0">
-                        {item.children.map((child, index) => (
-                          <div key={index}>
-                            <Link
-                              onClick={() => {
-                                dispatch(setOpenedMenu(null));
-                              }}
-                              href={child.url}
-                              className="block mb-4 text-sm transition-colors w-max lg:w-44 hover:text-secondary"
-                            >
-                              {child.label}
-                            </Link>
-                            {child.children && (
-                              <ul>
-                                {child.children.map((grandChild, index) => (
-                                  <li key={index}>
-                                    <Link
-                                      onClick={() => {
-                                        dispatch(setOpenedMenu(null));
-                                      }}
-                                      href={grandChild.url}
-                                      className="block mb-4 text-sm transition-colors w-max lg:w-44 hover:text-secondary"
-                                    >
-                                      {grandChild.label}
-                                    </Link>
-                                  </li>
-                                ))}
-                              </ul>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                      {item.extra_context.attributes.images && (
-                        <div className="flex">
-                          {item.extra_context.attributes.images.map(
-                            (image, index) =>
-                              image.kwargs.value.image && (
-                                <Link href={image.value.url} key={index}>
-                                  {/* TODO: There is no image. It should be checked. May need fix. */}
-                                  <Image
-                                    src={image.kwargs.value.image?.url}
-                                    alt={image.value.title}
-                                    title={image.value.title}
-                                    width={265}
-                                    height={323}
-                                  />
-                                  <span className="block mt-4">
-                                    {image.value.title}
-                                  </span>
-                                  <span className="inline-block mt-2 text-xs uppercase border-b border-gray-500">
-                                    {image.value.link_text}
-                                  </span>
-                                </Link>
-                              )
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </li>
-              )
-          )}
-          <li>
-            <button
-              onClick={() => dispatch(openSearch())}
-              className="flex items-center gap-2 p-2 text-sm uppercase transition hover:text-secondary cursor-pointer"
-              data-testid="header-nav-search"
-            >
-              <Icon name="search" size={24} /> {t('common.navbar.search')}
-            </button>
-          </li>
-        </ul>
-      </nav>
-      {isSearchOpen && <Search />}
-    </>
-  );
-}

package/app-template/src/views/header/pwa-back-button.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from '@akinon/next/hooks';
-
-export const PwaBackButton = () => {
-  const [isPwa, setIsPWa] = useState(false);
-
-  const router = useRouter();
-
-  const handler = () => {
-    const list = window.matchMedia('(display-mode: standalone)');
-    setIsPWa(list.matches);
-  };
-
-  useEffect(() => {
-    handler();
-
-    window.addEventListener('resize', handler);
-
-    return () => {
-      window.removeEventListener('resize', handler);
-    };
-  }, []);
-
-  if (
-    !isPwa ||
-    typeof window === 'undefined' ||
-    window.history.state.idx === 0
-  ) {
-    return null;
-  }
-
-  return (
-    <div className="relative z-10 md:top-0 md:left-0 md:fixed">
-      <button
-        className="bg-secondary-600 text-white flex items-center justify-center flex-shrink-0 w-12 h-12 md:w-10 md:h-9 active:bg-secondary-700"
-        onClick={() => router.back()}
-      >
-        <svg
-          preserveAspectRatio="xMidYMid meet"
-          height="1.6em"
-          width="1.6em"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          stroke="currentColor"
-        >
-          <g>
-            <line x1="19" y1="12" x2="5" y2="12"></line>
-            <polyline points="12 19 5 12 12 5"></polyline>
-          </g>
-        </svg>
-      </button>
-    </div>
-  );
-};

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

@@ -1,82 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { closeSearch } from '@akinon/next/redux/reducers/header';
-import clsx from 'clsx';
-
-import { Icon } from '@theme/components';
-import Results from './results';
-import { ROUTES } from '@theme/routes';
-import { useLocalization, useRouter } from '@akinon/next/hooks';
-
-export default function Search() {
-  const { t } = useLocalization();
-  const router = useRouter();
-  const dispatch = useAppDispatch();
-  const isSearchOpen = useAppSelector((state) => state.header.isSearchOpen);
-  const [searchText, setSearchText] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isSearchOpen) {
-      inputRef.current?.focus();
-      document.body.style.overflow = 'hidden';
-    }
-
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, [isSearchOpen]);
-
-  return (
-    <>
-      <div
-        className={clsx(
-          // 177px is the height of the header
-          'absolute bg-black opacity-75 w-screen h-screen transition duration-500 left-0 bottom-0 translate-y-full z-30',
-          isSearchOpen && searchText
-            ? 'visible opacity-100'
-            : 'invisible opacity-0'
-        )}
-        role="button"
-        onClick={() => dispatch(closeSearch())}
-      />
-      <div
-        className={clsx(
-          'absolute overflow-auto max-h-screen md:max-h-[calc(100vh-177px)] bg-white p-6 left-0 lg:bottom-0 lg:translate-y-full z-40 w-screen transition duration-500',
-          isSearchOpen ? 'visible opacity-100' : 'invisible opacity-0'
-        )}
-      >
-        <div className="max-w-screen-2xl mx-auto flex flex-col gap-12">
-          <div className="border-b border-gray-400 flex flex-col py-1.5 gap-2 self-center items-center md:flex-row">
-            <span className="text-xl lg:text-2xl">
-              {t('common.search.results_for')}
-            </span>
-            <div className="flex items-center">
-              <input
-                value={searchText}
-                onChange={(e) => setSearchText(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && searchText.trim() !== '') {
-                    router.push(`${ROUTES.LIST}/?search_text=${searchText}`);
-                  }
-                }}
-                className="border-0 text-2xl outline-none text-secondary placeholder:text-xl placeholder:lg:text-2xl"
-                placeholder={t('common.search.placeholder')}
-                ref={inputRef}
-              />
-              <Icon
-                name="close"
-                size={14}
-                onClick={() => dispatch(closeSearch())}
-                className="cursor-pointer"
-              />
-            </div>
-          </div>
-          <Results searchText={searchText} />
-        </div>
-      </div>
-    </>
-  );
-}

package/app-template/src/views/header/search/results.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import { useAutocompleteQuery } from '@akinon/next/data/client/misc';
-import { ROUTES } from '@theme/routes';
-
-import { LoaderSpinner, Price, Link } from '@theme/components';
-import { useDebounce, useLocalization } from '@akinon/next/hooks';
-import { Image } from '@akinon/next/components/image';
-interface ResultsProps {
-  searchText: string;
-}
-
-const MINIMUM_SEARCH_LENGTH = 3;
-
-export default function Results(props: ResultsProps) {
-  const { searchText } = props;
-  const { t } = useLocalization();
-  const debouncedSearchText = useDebounce(searchText, 400);
-  const { currentData, isFetching, isLoading } = useAutocompleteQuery(
-    debouncedSearchText,
-    {
-      refetchOnMountOrArgChange: true,
-      skip: debouncedSearchText.length < MINIMUM_SEARCH_LENGTH
-    }
-  );
-
-  const categories = useMemo(
-    () =>
-      currentData?.groups.find((group) => group.suggestion_type === 'Category')
-        ?.entries ?? [],
-    [currentData]
-  );
-
-  const products = useMemo(
-    () =>
-      currentData?.groups.find((group) => group.suggestion_type === 'Product')
-        ?.entries ?? [],
-    [currentData]
-  );
-
-  if (
-    debouncedSearchText.length < MINIMUM_SEARCH_LENGTH ||
-    searchText !== debouncedSearchText
-  ) {
-    return null;
-  }
-
-  if (isLoading || isFetching) {
-    return <LoaderSpinner />;
-  }
-
-  if (categories.length === 0 && products.length === 0) {
-    return <p className="text-center">{t('common.search.not_found')}</p>;
-  }
-
-  return (
-    <div className="w-full flex flex-wrap gap-4 md:gap-0">
-      {categories.length > 0 && (
-        <div className="flex flex-col w-44">
-          <h6 className="mb-6 font-semibold">
-            {t('common.search.categories')}
-          </h6>
-          <ul className="flex flex-col gap-3">
-            {categories.map((category, index) => (
-              <li key={index} className="text-sm">
-                <Link href={category.url}>{category.label}</Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <div className="flex-1 flex flex-col gap-6">
-        <h6 className="font-semibold">
-          {t('common.search.products_for')}{' '}
-          <span className="text-secondary uppercase">
-            {debouncedSearchText}
-          </span>
-        </h6>
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-8">
-          {products.map((product, index) => (
-            <Link href={product?.url} key={index} className="flex flex-col">
-              <div className="relative aspect-[315/448]">
-                {product.extra.image ? (
-                  <Image
-                    src={product.extra.image}
-                    alt={product?.label}
-                    aspectRatio={274.5 / 390.39}
-                    fill
-                    sizes="(min-width: 320px) 164px,
-                     (min-width: 640px) 50vw,
-                     (min-width: 1160px) 315px"
-                  />
-                ) : (
-                  <Image
-                    className="h-full object-cover"
-                    src="/noimage.jpg"
-                    alt={product?.label}
-                    aspectRatio={274.5 / 390.39}
-                    fill
-                    sizes="100vw"
-                  />
-                )}
-              </div>
-              <span className="text-sm mt-2">{product?.label}</span>
-              <Price
-                value={product?.extra?.price}
-                className="font-semibold text-sm"
-              />
-            </Link>
-          ))}
-        </div>
-        <Link
-          href={`${ROUTES.LIST}/?search_text=${debouncedSearchText}`}
-          data-testid="search-view-all"
-          className="w-80 py-3 px-10 border border-primary text-center text-xs font-semibold hover:bg-primary hover:text-white transition-all"
-        >
-          {t('common.search.view_all')} {debouncedSearchText.toUpperCase()}
-        </Link>
-      </div>
-    </div>
-  );
-}

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

@@ -1,72 +0,0 @@
-'use client';
-
-import { Link, Icon } from '@theme/components';
-import { useSession } from 'next-auth/react';
-import { ROUTES } from '@theme/routes';
-import clsx from 'clsx';
-
-import { closeMobileMenu } from '@akinon/next/redux/reducers/header';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface UserMenuProps {
-  isMobile: boolean;
-}
-
-export const UserMenu = (props: UserMenuProps) => {
-  const { isMobile } = props;
-  const { data: session, status } = useSession();
-  const { t } = useLocalization();
-  const dispatch = useAppDispatch();
-
-  const MenuItems = [
-    {
-      url: ROUTES.AUTH,
-      label: t('common.header.login'),
-      dataTestId: `header-login${isMobile ? '-mobile' : ''}`
-    },
-    {
-      url: ROUTES.AUTH,
-      label: t('common.header.signup'),
-      dataTestId: `header-signup${isMobile ? '-mobile' : ''}`
-    }
-  ];
-
-  return (
-    <ul
-      className={clsx(
-        'items-center divide-x divide-black',
-        isMobile ? 'flex pt-2 text-sm pb-6 border-b mx-8' : 'hidden sm:flex'
-      )}
-      id="user-menu"
-    >
-      {status === 'authenticated' ? (
-        <li>
-          <Link
-            href={ROUTES.ACCOUNT}
-            data-testid={`header-user${isMobile ? '-mobile' : ''}`}
-            className="flex items-center space-x-2.5"
-            onClick={() => dispatch(closeMobileMenu())}
-          >
-            <Icon name="user" size={24} />
-            <span className="uppercase">{`${session.user.firstName} ${session.user.lastName}`}</span>
-          </Link>
-        </li>
-      ) : (
-        MenuItems.map((link, index) => (
-          <li
-            key={index}
-            className={clsx(
-              'flex items-center uppercase',
-              isMobile ? 'first:pr-2 last:pl-2' : 'px-2'
-            )}
-          >
-            <Link href={link.url} passHref={true} data-testid={link.dataTestId}>
-              {link.label}
-            </Link>
-          </li>
-        ))
-      )}
-    </ul>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from './footer';
-export * from './header';

package/app-template/src/views/installment-options/index.tsx

@@ -1,127 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { Price, LoaderSpinner } from '@theme/components';
-import { Image } from '@akinon/next/components/image';
-
-export type InstallmentProps = {
-  productPk: number;
-};
-
-import { useGetInstallmentsQuery } from '@akinon/next/data/client/product';
-import { useLocalization } from '@akinon/next/hooks';
-
-const InstallmentOptions = (props: InstallmentProps) => {
-  const { t } = useLocalization();
-  const { productPk } = props;
-
-  const { data, isLoading, isSuccess } = useGetInstallmentsQuery(productPk);
-
-  const [activeCardSlug, setActiveCardSlug] = useState(null);
-
-  useEffect(() => {
-    if (isSuccess && data) {
-      setActiveCardSlug(data.results[0].slug);
-    }
-  }, [isSuccess, data]);
-
-  return (
-    <>
-      {isLoading ? (
-        <LoaderSpinner />
-      ) : (
-        isSuccess && (
-          <>
-            {data && data.results.length === 0 && (
-              <span className="text-xs">
-                {t('product.installment_not_available')}
-              </span>
-            )}
-            <div className="grid gap-1 grid-cols-3">
-              {data.results.map((card) => (
-                <div
-                  key={card.pk.toString()}
-                  data-card-slug={card.slug}
-                  onClick={() => setActiveCardSlug(card.slug)}
-                  className={clsx(
-                    'border border-gray-200 p-1 flex justify-center items-center transition-all cursor-pointer',
-                    activeCardSlug === card.slug
-                      ? 'bg-gray-50 border-gray-400'
-                      : 'bg-white'
-                  )}
-                >
-                  {/* TODO: There is no image. It should be checked. May need fix. */}
-                  <Image
-                    src={card.card_type.logo}
-                    alt={card.name}
-                    width={60}
-                    height={25}
-                    imageClassName={clsx(
-                      'object-contain',
-                      activeCardSlug === card.slug ? 'grayscale-0' : 'grayscale'
-                    )}
-                  />
-                </div>
-              ))}
-            </div>
-            <div className="mt-4">
-              <table className="w-full">
-                <thead>
-                  <tr className="text-xs">
-                    <th className="text-left">
-                      {t('product.number_of_installments')}
-                    </th>
-                    <th className="text-right">
-                      {t('product.monthly_amount')}
-                    </th>
-                    <th className="text-right">{t('product.total_amount')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.results.map((value) => {
-                    if (activeCardSlug === value.slug)
-                      return value.installments.map((installment, index) => {
-                        return (
-                          <tr
-                            key={index.toString()}
-                            className={clsx(
-                              'odd:bg-gray-50 even:bg-gray-25',
-                              index === 0 && 'font-bold text-success'
-                            )}
-                          >
-                            <td className="text-xs p-1.5">
-                              <span>
-                                {installment.installment_count === 1
-                                  ? ''
-                                  : installment.installment_count}{' '}
-                              </span>
-                              <span>
-                                {installment.installment_count === 1
-                                  ? t('product.cash')
-                                  : t('product.installment')}
-                              </span>
-                            </td>
-                            <td className="text-xs p-1.5 text-right">
-                              <Price
-                                value={installment.single_installment_amount}
-                              />
-                            </td>
-                            <td className="text-xs p-1.5 text-right">
-                              <Price value={installment.total_amount} />
-                            </td>
-                          </tr>
-                        );
-                      });
-                  })}
-                </tbody>
-              </table>
-            </div>
-          </>
-        )
-      )}
-    </>
-  );
-};
-
-export default InstallmentOptions;