@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,220 @@
+import { useEffect } from 'react';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import {
+  basketApi,
+  useApplyVoucherCodeMutation,
+  useRemoveVoucherCodeMutation
+} from '@akinon/next/data/client/basket';
+import { Basket, Error } from '@akinon/next/types';
+import { Price, Button, Input } from '@theme/components';
+import { pushBeginCheckout } from '@theme/utils/gtm';
+import { ROUTES } from '@theme/routes';
+import { useRouter, useLocalization } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import clsx from 'clsx';
+
+interface Props {
+  basket: Basket;
+}
+
+const voucherCodeFormSchema = (t) =>
+  yup.object().shape({
+    voucherCode: yup.string().required(t('basket.summary.form.error.required'))
+  });
+
+export const Summary = (props: Props) => {
+  const { t } = useLocalization();
+  const { basket } = props;
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    setError,
+    reset,
+    formState: { errors }
+  } = useForm<{ voucherCode: string }>({
+    resolver: yupResolver(voucherCodeFormSchema(t))
+  });
+  const dispatch = useAppDispatch();
+  const [applyVoucherCodeMutation] = useApplyVoucherCodeMutation();
+  const [removeVoucherCodeMutation] = useRemoveVoucherCodeMutation();
+
+  useEffect(() => {
+    if (basket.voucher_code) {
+      reset({ voucherCode: basket.voucher_code });
+    }
+  }, [basket, reset]);
+
+  const removeVoucherCode = () => {
+    removeVoucherCodeMutation()
+      .unwrap()
+      .then((basket) =>
+        dispatch(
+          basketApi.util.updateQueryData(
+            'getBasket',
+            undefined,
+            (draftBasket) => {
+              Object.assign(draftBasket, basket);
+            }
+          )
+        )
+      )
+      .catch((error: Error) => {
+        setError('voucherCode', { message: error.data.non_field_errors });
+      });
+  };
+
+  const onSubmit = (data) => {
+    applyVoucherCodeMutation({
+      voucher_code: data.voucherCode
+    })
+      .unwrap()
+      .then((basket) =>
+        dispatch(
+          basketApi.util.updateQueryData(
+            'getBasket',
+            undefined,
+            (draftBasket) => {
+              Object.assign(draftBasket, basket);
+            }
+          )
+        )
+      )
+      .catch((error: Error) => {
+        setError('voucherCode', { message: error.data.non_field_errors });
+      });
+  };
+
+  useEffect(() => {
+    const products = basket.basketitem_set.map((basketItem) => ({
+      ...basketItem.product
+    }));
+    pushBeginCheckout(products);
+  }, [basket]);
+
+  return (
+    <div className="w-full xl:w-[300px]">
+      <div className="py-3 border-b border-gray-200 flex justify-between items-end">
+        <h2 className="text-xl font-light">{t('basket.summary.title')}</h2>
+        <span className="text-xs" data-testid="basket-count">
+          {basket.basketitem_set.map((x) => x.quantity).reduce((a, b) => a + b)}{' '}
+          {t('basket.summary.items').toUpperCase()}
+        </span>
+      </div>
+      <div className="py-3 border-b border-gray-200 text-xs leading-6">
+        <div className="flex justify-between">
+          <p>
+            {t('basket.summary.subtotal')} (
+            {basket.basketitem_set
+              .map((x) => x.quantity)
+              .reduce((a, b) => a + b)}{' '}
+            {t('basket.summary.items')})
+          </p>
+          <p>
+            <Price value={basket.total_product_amount} />
+          </p>
+        </div>
+        {basket.discounts.length > 0 && (
+          <>
+            {basket.discounts.map((discount, index) => (
+              <div key={index} className="flex justify-between text-secondary">
+                <p data-testid="basket-voucher-code">{discount.description}</p>
+                <Price value={discount.discount} useNegative />
+              </div>
+            ))}
+            <div className="flex justify-between">
+              <p>{t('basket.summary.discounts_total')}</p>
+              <Price
+                value={basket.discounts.reduce(
+                  (acc, curr) => acc + Number(curr.discount),
+                  0
+                )}
+                useNegative
+              />
+            </div>
+          </>
+        )}
+      </div>
+      <div className="bg-gray-50 py-3 px-5 border-b border-gray-200 text-xs">
+        <p className="mb-3 text-lg font-light">
+          {t('basket.summary.form.title')}
+        </p>
+        <form onSubmit={handleSubmit(onSubmit)} className="flex w-full">
+          <div className="w-full md:w-1/2 lg:w-auto">
+            <Input
+              placeholder={t('basket.summary.form.placeholder')}
+              className="h-9 w-full lg:w-40"
+              data-testid="basket-voucher-input"
+              {...register('voucherCode')}
+              error={errors.voucherCode}
+              disabled={!!basket.voucher_code}
+            />
+          </div>
+          {basket.voucher_code ? (
+            <Button
+              className="h-9 w-20 px-0 border-gray-500 border-l-0"
+              appearance="outlined"
+              data-testid="basket-voucher-remove"
+              type="button"
+              onClick={removeVoucherCode}
+            >
+              {t('basket.summary.remove')}
+            </Button>
+          ) : (
+            <Button
+              className="h-9 w-20 px-0 border-gray-500 border-l-0"
+              appearance="outlined"
+              data-testid="basket-voucher-submit"
+            >
+              {t('basket.summary.submit')}
+            </Button>
+          )}
+        </form>
+      </div>
+      <div>
+        <div className="flex justify-between py-3 text-xl">
+          <h2 className="font-light">{t('basket.summary.total')}</h2>
+          <Price value={basket.total_amount} data-testid="basket-total" />
+        </div>
+        <Button
+          className="w-full"
+          onClick={() => {
+            router.push(ROUTES.CHECKOUT);
+          }}
+          data-testid="basket-checkout"
+        >
+          {t('basket.summary.proceed_to_checkout')}
+        </Button>
+
+        <PluginModule
+          component={Component.OneClickCheckoutButtons}
+          props={{
+            className: clsx([
+              'py-2.5',
+              'bg-black',
+              'relative',
+              'hover:bg-black',
+              'before:content-[""]',
+              'before:w-6',
+              'before:h-6',
+              'before:bg-white',
+              'before:absolute',
+              'before:rounded-r-[18px]',
+              'before:left-0',
+              'after:content-[""]',
+              'after:absolute',
+              'after:w-3',
+              'after:h-3',
+              'after:bg-[#d02c2f]',
+              'after:rounded-xl',
+              'after:left-1'
+            ])
+          }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,35 @@
+'use client';
+
+import { Fragment } from 'react';
+import { Icon, Link } from '@theme/components';
+import { ROUTES } from '@theme/routes';
+import { useLocalization } from '@akinon/next/hooks';
+import { BreadcrumbResultType } from '@akinon/next/types';
+
+export interface BreadcrumbProps {
+  breadcrumbList?: BreadcrumbResultType[];
+}
+
+export default function Breadcrumb(props: BreadcrumbProps) {
+  const { t } = useLocalization();
+  const { breadcrumbList = [] } = props;
+
+  const list = [
+    { url: ROUTES.HOME, text: t('common.breadcrumb.homepage') },
+    ...breadcrumbList.map((breadcrumb) => ({
+      url: breadcrumb.url,
+      text: breadcrumb.label
+    }))
+  ];
+
+  return (
+    <div className="flex items-center gap-3 text-xs leading-4 text-gray-950">
+      {list.map((item, index) => (
+        <Fragment key={index}>
+          <Link href={item.url}>{item.text}</Link>
+          {index !== list.length - 1 && <Icon name="chevron-end" size={8} />}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
+import React, { useEffect, useMemo } from 'react';
+import { toggleFacet } from '@theme/redux/reducers/category';
+import { useRouter } from '@akinon/next/hooks';
+import convertFacetSearchParams from '@theme/utils/convert-facet-search-params';
+import { usePathname } from 'next/navigation';
+import { WIDGET_TYPE } from '@theme/types';
+import { useSearchParams } from 'next/dist/client/components/navigation';
+
+const CategoryActiveFilters = () => {
+  const dispatch = useAppDispatch();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const { facets, selectedFacets } = useAppSelector((state) => state.category);
+
+  const handleRemoveFilter = ({ facet, choice }) => {
+    dispatch(toggleFacet({ facet, choice }));
+  };
+
+  const url = useMemo(() => {
+    const facetSearchParams =
+      convertFacetSearchParams(selectedFacets).toString();
+
+    const urlSearchParams = new URLSearchParams(facetSearchParams);
+
+    const searchText = searchParams.get('search_text');
+    const page = searchParams.get('page');
+    const limit = searchParams.get('limit');
+    const page_size = searchParams.get('page_size');
+    const sorter = searchParams.get('sorter');
+    const layout = searchParams.get('layout');
+
+    searchText && urlSearchParams.set('search_text', searchText);
+    page && urlSearchParams.set('page', page);
+    limit && urlSearchParams.set('limit', limit);
+    page_size && urlSearchParams.set('page_size', page_size);
+    sorter && urlSearchParams.set('sorter', sorter);
+    layout && urlSearchParams.set('layout', layout);
+
+    return pathname + '?' + urlSearchParams.toString();
+  }, [pathname, selectedFacets, searchParams]);
+
+  useEffect(() => {
+    router.push(url);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 mb-4">
+      {facets.map((facet) =>
+        facet.data.choices
+          .filter((choice) => choice.is_selected)
+          .map((choice) => (
+            <div
+              className="flex justify-between text-xs text-black-800 py-3.5 px-4 border border-gray-400 hover:bg-gray-300 cursor-default items-center"
+              key={`${facet.key}-${choice.label}`}
+            >
+              <div>
+                {facet.widget_type !== WIDGET_TYPE.category && (
+                  <span>{facet.name}: </span>
+                )}
+                <span>{choice.label}</span>
+              </div>
+              {facet.widget_type !== WIDGET_TYPE.category && (
+                <div
+                  className="cursor-pointer ml-4"
+                  onClick={() => handleRemoveFilter({ facet, choice })}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 13.5 13.5"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="m.75 12.75 12-12m-12 0 12 12"
+                      style={{
+                        fill: 'none',
+                        stroke: '#000',
+                        strokeLinecap: 'round',
+                        strokeLinejoin: 'round',
+                        strokeWidth: '1.5px'
+                      }}
+                    />
+                  </svg>
+                </div>
+              )}
+            </div>
+          ))
+      )}
+    </div>
+  );
+};
+
+export default CategoryActiveFilters;

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { Category } from '@akinon/next/types';
+import { Image } from '@akinon/next/components/image';
+
+export const CategoryBanner = (
+  props: Category['attributes']['category_banner']
+) => {
+  if (Object.keys(props).length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Image
+        src={props.kwargs.value.image_mobile.url}
+        alt="Category Banner"
+        aspectRatio={768 / 375}
+        sizes="768px"
+        fill
+        className="block md:hidden"
+      />
+
+      <Image
+        src={props.kwargs.value.image_desktop.url}
+        alt="Category Banner"
+        aspectRatio={1370 / 400}
+        sizes="1370px"
+        fill
+        className="hidden md:block"
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,143 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import clsx from 'clsx';
+
+import { Button, Icon, Select, Link } from '@theme/components';
+import { SortOption } from '@akinon/next/types';
+
+import { useRouter, useLocalization } from '@akinon/next/hooks';
+
+interface Props {
+  totalCount: number;
+  setMenuStatus: () => void;
+  sortOptions: SortOption[];
+}
+
+export const CategoryHeader = (props: Props) => {
+  const { t } = useLocalization();
+  const PAGE_SIZE = [
+    { label: t('category.filters.48_products'), value: 48 },
+    { label: t('category.filters.96_products'), value: 96 }
+  ];
+
+  const LAYOUTS = [
+    { icon: 'layout-2', value: 2 },
+    { icon: 'layout-3', value: 3 }
+  ];
+  const { totalCount, setMenuStatus, sortOptions } = props;
+  const router = useRouter();
+
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const pageSize = useMemo(
+    () => searchParams.get('page_size') ?? 48,
+    [searchParams]
+  );
+  const layoutSize = useMemo(
+    () => searchParams.get('layout') ?? 3,
+    [searchParams]
+  );
+
+  const handleSelectFilter = ({
+    key,
+    value
+  }: {
+    key: string;
+    value: string;
+  }) => {
+    const urlSearchParams = new URLSearchParams(searchParams.toString());
+
+    urlSearchParams.set(key, value);
+
+    router.push(pathname + '?' + urlSearchParams.toString());
+  };
+
+  return (
+    <div className="flex flex-col gap-4 mb-4 text-gray-950 text-sm">
+      <div className="flex items-center">
+        <span className="hidden lg:block">
+          <span data-testid="list-count">{totalCount}</span>{' '}
+          {t('category.header.results')}
+        </span>
+
+        <div className="hidden lg:flex gap-5 ml-auto mr-7 px-5 py-2 border border-gray-100">
+          <span> {t('category.header.view')}</span>
+          {PAGE_SIZE.map(({ label, value }) => (
+            <a
+              key={value}
+              onClick={() => {
+                handleSelectFilter({
+                  key: 'page_size',
+                  value: String(value)
+                });
+              }}
+              className={clsx('cursor-pointer', {
+                'text-black font-semibold': Number(pageSize) === value
+              })}
+            >
+              {label}
+            </a>
+          ))}
+          <div className="flex items-center gap-2 pl-5 border-l border-gray-400">
+            {LAYOUTS.map(({ icon, value }) => (
+              <a
+                key={value}
+                onClick={() => {
+                  handleSelectFilter({
+                    key: 'layout',
+                    value: String(value)
+                  });
+                }}
+                className={clsx(
+                  'cursor-pointer',
+                  Number(layoutSize) === value ? 'fill-black' : 'fill-gray-500'
+                )}
+              >
+                <Icon key={value} name={icon} size={16} />
+              </a>
+            ))}
+          </div>
+        </div>
+        <Button
+          className="relative border-gray-100 text-left mr-5 bg-white text-primary-100 w-40 lg:hidden lg:mr-0"
+          onClick={() => setMenuStatus()}
+          data-testid="list-filter"
+        >
+          {t('category.filters.title')}
+          <Icon
+            name="chevron-down"
+            size={10}
+            className="absolute right-1 top-1/2 transform -translate-y-1/2"
+          />
+        </Button>
+        <Select
+          options={sortOptions}
+          value={sortOptions.find(({ is_selected }) => is_selected).value}
+          data-testid="list-sorter"
+          onChange={(e) => {
+            handleSelectFilter({
+              key: 'sorter',
+              value: e.currentTarget.value
+            });
+          }}
+          borderless={false}
+        />
+      </div>
+      {totalCount === 0 && (
+        <div className="h-40 flex items-center justify-center  flex-col bg-gray-200 p-4">
+          <div className="text-center">
+            <span className="text-lg">{t('category.search.not_found')}</span>
+          </div>
+          <div className="mt-3 text-center">
+            <Link href="/" className="underline text-lg">
+              {t('category.search.link')}
+            </Link>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,123 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { useSearchParams } from 'next/navigation';
+import { CategoryHeader } from './category-header';
+import { Filters } from './filters';
+import { Pagination } from '@theme/components';
+import { ProductItem } from '@theme/views/product-item';
+import { GetCategoryResponse } from '@akinon/next/types';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { setFacets } from '@theme/redux/reducers/category';
+import CategoryActiveFilters from '@theme/views/category/category-active-filters';
+import { useLocalization } from '@akinon/next/hooks';
+import { Link, LoaderSpinner } from '@akinon/next/components';
+import { ROUTES } from '@theme/routes';
+import { useRouter } from '@akinon/next/hooks';
+
+interface ListPageProps {
+  data: GetCategoryResponse;
+}
+
+export default function ListPage(props: ListPageProps) {
+  const { data } = props;
+  const [isMenuOpen, setIsMenuOpen] = useState(false); // TODO: Move to redux
+
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const layoutSize = useMemo(
+    () => searchParams.get('layout') ?? 3,
+    [searchParams]
+  );
+
+  const page = useMemo(
+    () => Number(searchParams.get('page') ?? 1),
+    [searchParams]
+  );
+
+  useEffect(() => {
+    if (page > 1 && data.products?.length === 0) {
+      const newUrl = new URL(window.location.href);
+
+      newUrl.searchParams.delete('page');
+      router.push(newUrl.pathname + newUrl.search, undefined);
+    }
+  }, [searchParams, data.products, page]);
+
+  const dispatch = useAppDispatch();
+  const { t } = useLocalization();
+
+  useEffect(() => {
+    dispatch(setFacets(data.facets));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data.facets]);
+
+  return (
+    <>
+      <div className="container px-4 mx-auto lg:px-0 lg:my-4">
+        <div className="grid grid-cols-[19rem_1fr]">
+          <Filters isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
+          <div
+            onClick={() => setIsMenuOpen(false)}
+            className={clsx(
+              'transition-opacity duration-300 ease-linear lg:hidden',
+              isMenuOpen
+                ? 'fixed bg-black bg-opacity-60 inset-0 z-10 opacity-100'
+                : 'opacity-0'
+            )}
+          ></div>
+          <div className="flex flex-col items-center lg:items-stretch col-span-2 lg:col-span-1">
+            <CategoryHeader
+              totalCount={data.pagination.total_count}
+              setMenuStatus={() => setIsMenuOpen(true)}
+              sortOptions={data.sorters}
+            />
+            <div className="hidden lg:block">
+              <CategoryActiveFilters />
+            </div>
+
+            {data.products.length === 0 && page === 1 && (
+              <div className="text-center bg-gray-200 px-5 py-20">
+                <p className="pb-4">{t('category.search.not_found')}</p>
+                <Link className="underline" href={ROUTES.HOME}>
+                  {t('category.search.link')}
+                </Link>
+              </div>
+            )}
+
+            {data.products.length === 0 && page > 1 && <LoaderSpinner />}
+
+            <div
+              className={clsx('grid gap-x-4 gap-y-12 grid-cols-2', {
+                'md:grid-cols-3': Number(layoutSize) === 3,
+                'lg:grid-cols-2': Number(layoutSize) === 2,
+                'lg:grid-cols-3': Number(layoutSize) === 3
+              })}
+            >
+              {data.products.map((product, index) => (
+                <ProductItem
+                  key={product.pk}
+                  product={product}
+                  // TODO: Find a better way to handle layout size
+                  width={340}
+                  height={510}
+                  index={index}
+                />
+              ))}
+            </div>
+            {data.products.length > 0 && (
+              <Pagination
+                total={data.pagination.total_count}
+                limit={data.pagination.page_size}
+                currentPage={data.pagination.current_page}
+                numberOfPages={data.pagination.num_pages}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}