@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

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

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

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

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

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

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