@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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

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

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

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

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