@akinon/projectzero 1.32.0-rc.2 → 1.32.0

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

@@ -1,177 +0,0 @@
-'use client';
-
-import { WIDGET_TYPE } from '@theme/types';
-import clsx from 'clsx';
-
-import { Accordion, Button, Checkbox, Icon, Radio } from '@theme/components';
-import { SizeFilter } from './size-filter';
-
-import { useLocalization, useRouter } from '@akinon/next/hooks';
-import { Facet, FacetChoice } from '@akinon/next/types';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import {
-  resetSelectedFacets,
-  toggleFacet
-} from '@theme/redux/reducers/category';
-import CategoryActiveFilters from '@theme/views/category/category-active-filters';
-import { useEffect, useMemo } from 'react';
-
-const COMPONENT_TYPES = {
-  [WIDGET_TYPE.category]: Radio,
-  [WIDGET_TYPE.multiselect]: Checkbox
-};
-
-interface Props {
-  isMenuOpen: boolean;
-  setIsMenuOpen: (isMenuOpen: boolean) => void;
-}
-
-export const Filters = (props: Props) => {
-  const router = useRouter();
-  const facets = useAppSelector((state) => state.category.facets);
-  const dispatch = useAppDispatch();
-  const { t } = useLocalization();
-  const { isMenuOpen, setIsMenuOpen } = props;
-
-  const handleSelectFilter = ({
-    facet,
-    choice
-  }: {
-    facet: Facet;
-    choice: FacetChoice;
-  }) => {
-    if (facet.key === 'category_ids') {
-      router.push(choice.url);
-    } else {
-      dispatch(
-        toggleFacet({
-          facet,
-          choice
-        })
-      );
-    }
-  };
-
-  const haveFilter = useMemo(() => {
-    return (
-      facets.filter(
-        (facet) =>
-          facet.data.choices.filter((choice) => choice.is_selected).length > 0
-      ).length > 0
-    );
-  }, [facets]);
-
-  const handleResetFilter = () => {
-    dispatch(resetSelectedFacets());
-  };
-
-  useEffect(() => {
-    const url = new URL(window.location.href);
-    if (url.searchParams.has('category_ids')) {
-      url.searchParams.delete('category_ids');
-      const newHref = url.pathname + url.search;
-      window.history.replaceState({}, '', newHref);
-    }
-  }, [router]);
-
-  return (
-    <div
-      className={clsx(
-        'w-9/10 fixed left-0 top-0 bottom-0 bg-white z-20 p-6 transition-all ease-in duration-300 lg:static lg:block lg:mr-16 lg:text-sm lg:p-0 lg:pt-4',
-        isMenuOpen
-          ? 'flex flex-col opacity-100 overflow-auto'
-          : 'opacity-0 invisible absolute -translate-x-full lg:opacity-100 lg:visible lg:translate-x-0'
-      )}
-    >
-      <div className="flex justify-between mb-6 lg:hidden">
-        <h3 className="text-2xl">{t('category.filters.title')}</h3>
-        <Icon name="close" size={22} onClick={() => setIsMenuOpen(false)} />
-      </div>
-      <div className="flex justify-between items-center mb-6 lg:hidden">
-        <span className="text-sm">1 {t('category.filters.results')}</span>
-        <span>{t('category.filters.ready_to_wear')}</span>
-      </div>
-      {facets.map((facet) => {
-        let Component = null;
-        const choices = [...facet.data.choices];
-
-        if (facet.key === 'integration_SizeId') {
-          // If it's a size facet, use the custom size filter component
-          Component = SizeFilter;
-
-          const order = ['xs', 's', 'm', 'l', 'xl'];
-          choices.sort((a, b) => {
-            return (
-              order.indexOf(a.label.toLowerCase()) -
-              order.indexOf(b.label.toLowerCase())
-            );
-          });
-        } else {
-          Component =
-            COMPONENT_TYPES[facet.widget_type] ||
-            COMPONENT_TYPES[WIDGET_TYPE.category];
-        }
-
-        return (
-          <Accordion
-            key={facet.key}
-            title={facet.name}
-            isCollapse={choices.some((choice) => choice.is_selected)}
-            dataTestId={`filter-${facet.name}`}
-          >
-            <div
-              className={clsx(
-                'flex gap-4',
-                facet.key === 'integration_SizeId' ? 'flex-row' : 'flex-col' // TODO: This condition must be refactor to a better way
-              )}
-            >
-              {choices.map((choice, index) => (
-                <Component // TODO: This dynamic component can be a hook or higher order component so it props can be standardized
-                  key={choice.label}
-                  data={choice}
-                  name={facet.key}
-                  onChange={() => {
-                    if (facet.key !== 'integration_SizeId') {
-                      // TODO: This condition must be refactor to a better way
-                      handleSelectFilter({ facet, choice });
-                    }
-                  }}
-                  onClick={() => {
-                    if (facet.key === 'integration_SizeId') {
-                      // TODO: This condition must be refactor to a better way
-                      handleSelectFilter({ facet, choice });
-                    }
-                  }}
-                  checked={choice.is_selected}
-                  data-testid={`${choice.label.trim()}`}
-                >
-                  {choice.label} (
-                  <span
-                    data-testid={`filter-count-${facet.name.toLowerCase()}-${index}`}
-                  >
-                    {choice.quantity}
-                  </span>
-                  )
-                </Component>
-              ))}
-            </div>
-          </Accordion>
-        );
-      })}
-      <div className="lg:hidden">
-        <CategoryActiveFilters />
-      </div>
-      {haveFilter && (
-        <div className="lg:hidden">
-          <Button
-            onClick={handleResetFilter}
-            appearance="outlined"
-            className="w-full mt-4 lg:hidden"
-          >
-            {t('category.filters.clear_all')}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};

package/app-template/src/views/category/filters/size-filter.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import React from 'react';
-import clsx from 'clsx';
-import { FacetChoice } from '@akinon/next/types';
-
-interface Props {
-  data: FacetChoice;
-}
-
-export const SizeFilter = (props: Props) => {
-  const { data, ...rest } = props;
-
-  return (
-    <button
-      className={clsx(
-        'text-xs w-10 h-10 flex items-center justify-center border-2',
-        data.is_selected
-          ? 'border-primary bg-gray-400 font-bold'
-          : 'border-transparent bg-gray-50'
-      )}
-      {...rest}
-    >
-      {data.label}
-    </button>
-  );
-};

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

@@ -1,38 +0,0 @@
-import clsx from 'clsx';
-import { GetCategoryResponse } from '@akinon/next/types';
-import Breadcrumb from '@theme/views/breadcrumb';
-import { CategoryBanner } from '@theme/views/category/category-banner';
-import ListPage from '@theme/views/category/category-info';
-
-export default async function Layout({
-  data,
-  children
-}: {
-  data: GetCategoryResponse;
-  children?: React.ReactNode;
-}) {
-  return (
-    <>
-      <div
-        className={clsx(
-          data.category?.attributes?.category_banner
-            ? 'relative w-full'
-            : 'container px-4 mx-auto lg:px-0 lg:my-4'
-        )}
-      >
-        {children}
-        <div
-          className={clsx(
-            'my-4 lg:mt-7',
-            data.category?.attributes?.category_banner &&
-              'lg:absolute lg:inset-x-0 z-10 container lg:my-4 mx-auto'
-          )}
-        >
-          <Breadcrumb />
-        </div>
-        <CategoryBanner {...data.category?.attributes?.category_banner} />
-      </div>
-      <ListPage data={data} />
-    </>
-  );
-}

package/app-template/src/views/checkout/auth.tsx

@@ -1,54 +0,0 @@
-import { useRouter, useLocalization } from '@akinon/next/hooks';
-import { Link } from '@theme/components';
-import GuestLogin from '@theme/views/guest-login';
-import { Login } from '@theme/views/login';
-import { useEffect } from 'react';
-import { ROUTES } from 'routes';
-import { useSession } from 'next-auth/react';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { api } from '@akinon/next/data/client/api';
-
-const CheckoutAuth = () => {
-  const { t } = useLocalization();
-  const router = useRouter();
-  const { status } = useSession();
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (status === 'authenticated') {
-      dispatch(api.util.invalidateTags(['Checkout']));
-    } else if (status === 'unauthenticated') {
-      router.replace(ROUTES.CHECKOUT + `?callbackUrl=${ROUTES.CHECKOUT}`);
-    }
-  }, [status]);
-
-  return (
-    <div className="flex flex-col w-full my-5 lg:flex-row">
-      <div className="flex-1 flex-shrink-0">
-        <Login />
-        <div className="text-center text-sm text-gray-600 uppercase mt-5">
-          <span>
-            {t('checkout.auth.title')}
-            <Link
-              href={ROUTES.AUTH + `?callbackUrl=${ROUTES.CHECKOUT}`}
-              className="ml-1 text-black underline"
-            >
-              {t('checkout.auth.signup')}
-            </Link>
-          </span>
-        </div>
-      </div>
-
-      <div className="flex-1 mt-5 lg:mt-0">
-        <div className="px-5 lg:px-16">
-          <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-            {t('checkout.auth.guest_checkout')}
-          </h2>
-          <GuestLogin />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CheckoutAuth;

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

@@ -1,3 +0,0 @@
-export * from './step-button';
-export * from './step-list';
-export * from './summary';

package/app-template/src/views/checkout/layout/footer.tsx

@@ -1,48 +0,0 @@
-import { Image } from '@akinon/next/components/image';
-
-const CheckoutFooter = () => {
-  const newDate = new Date();
-  const year = newDate.getFullYear();
-
-  return (
-    <div className="container mx-auto flex items-center justify-start flex-col py-6 lg:flex-row lg:gap-4">
-      <div className="flex gap-2">
-        <Image
-          src={'/visa.png'}
-          alt="Visa"
-          width={53}
-          height={16}
-        />
-        <Image
-          src={'/mastercard.png'}
-          alt="Mastercard"
-          width={27}
-          height={16}
-        />
-        <Image
-          src={'/vbv.png'}
-          alt="Verified by Visa"
-          width={37}
-          height={16}
-        />
-        <Image
-          src={'/mastersecure.png'}
-          alt="Mastercard Secure Code"
-          width={46}
-          height={16}
-        />
-        <Image
-          src={'/ssl-secure.png'}
-          alt="SSL Secure"
-          width={16}
-          height={16}
-        />
-      </div>
-      <div className="text-xs text-black-800 mt-2 xs:mt-3 lg:ms-3 lg:mt-0">
-        Copyright ® {year} Akinon. All Rights Reserved.
-      </div>
-    </div>
-  );
-};
-
-export default CheckoutFooter;

package/app-template/src/views/checkout/layout/header.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Link } from '@theme/components';
-import { ROUTES } from '@theme/routes';
-import { Image } from '@akinon/next/components/image';
-
-const CheckoutHeader = () => {
-  return (
-    <div className="relative border-b border-gray-100 shadow">
-      <header
-        className={clsx(['py-8', 'px-4', 'mx-auto', 'container', 'md:px-0'])}
-      >
-        <div className="flex justify-between items-center">
-          <Link
-            href={ROUTES.HOME}
-            passHref={true}
-            className="self-center block w-40 sm:w-72 sm:justify-self-center sm:p-0"
-            aria-label="Homepage"
-          >
-            <Image
-              src="/logo.svg"
-              alt="Project Zero"
-              aspectRatio={285 / 27}
-              sizes="285px"
-              fill
-            />
-          </Link>
-
-          <div className="text-sm text-black-800 transition-al hover:text-secondary md:text-base lg:text-lg">
-            <a href={'tel:08508500000'}>0 850 850 00 00</a>
-          </div>
-        </div>
-      </header>
-    </div>
-  );
-};
-
-export default CheckoutHeader;

package/app-template/src/views/checkout/step-button.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
-import { Icon } from '@theme/components';
-import clsx from 'clsx';
-import { CheckoutStep } from '@akinon/next/types';
-
-type Props = {
-  label: string;
-  tabKey?: CheckoutStep;
-  selected?: boolean;
-  completed?: boolean;
-  disabled?: boolean;
-  number: string;
-};
-
-export const CheckoutStepButton = ({
-  label,
-  number,
-  tabKey,
-  selected,
-  completed,
-  disabled
-}: Props) => {
-  const dispatch = useAppDispatch();
-
-  const handleClick = () => {
-    if (!tabKey || disabled) {
-      return;
-    }
-
-    dispatch(setCurrentStep(tabKey));
-  };
-
-  return (
-    <button
-      className={clsx(
-        'flex items-center justify-center transition-all',
-        { 'cursor-not-allowed': disabled },
-        { 'mr-6': completed }
-      )}
-      onClick={handleClick}
-    >
-      <span
-        className={clsx(
-          'relative w-min flex items-center justify-center flex-row flex-wrap text-xs',
-          'font-medium transition-all md:flex-nowrap pointer-events-none',
-          { 'text-[green]': completed },
-          { 'text-gray-600': !completed && !selected },
-          { 'text-black': selected }
-        )}
-      >
-        <span className="order-1 flex-1 md:mr-1 md:order-none md:flex-none">
-          {number} {number && `.`}
-        </span>
-        <span className="order-3 uppercase md:order-none">{label}</span>
-        <Icon
-          name="check"
-          size={12}
-          className={clsx(
-            'absolute -right-6 transition-all duration-300 fill-[green]',
-            { 'opacity-0 scale-x-0': !completed },
-            { 'opacity-100 scale-x-100': completed }
-          )}
-        />
-      </span>
-    </button>
-  );
-};

package/app-template/src/views/checkout/step-list.tsx

@@ -1,51 +0,0 @@
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from '@theme/redux/store';
-import { Icon } from '@theme/components';
-import { CheckoutStepButton } from './step-button';
-import { CheckoutStep } from '@akinon/next/types';
-import { useLocalization } from '@akinon/next/hooks';
-
-export const CheckoutStepList = () => {
-  const { t } = useLocalization();
-
-  const { steps } = useAppSelector((state: RootState) => state.checkout);
-
-  const separator = (
-    <Icon
-      name="chevron-end"
-      size={12}
-      className="mx-4 fill-gray-600 md:ml-5 pointer-events-none"
-    />
-  );
-
-  return (
-    <div className="w-full flex items-center justify-center py-5 md:pl-1 md:justify-start md:py-8 lg:py-11">
-      <CheckoutStepButton
-        number="1"
-        label={t('checkout.step.shipping')}
-        selected={steps.current === CheckoutStep.Shipping}
-        completed={steps.current !== CheckoutStep.Shipping}
-        disabled={steps.current === CheckoutStep.Confirmation}
-        tabKey={CheckoutStep.Shipping}
-      />
-      {separator}
-      <CheckoutStepButton
-        number="2"
-        label={t('checkout.step.payment')}
-        selected={steps.current === CheckoutStep.Payment}
-        completed={steps.current === CheckoutStep.Confirmation}
-        disabled={
-          !steps.shipping.completed ||
-          steps.current === CheckoutStep.Confirmation
-        }
-        tabKey={CheckoutStep.Payment}
-      />
-      {separator}
-      <CheckoutStepButton
-        number="3"
-        label={t('checkout.step.confirmation')}
-        disabled
-      />
-    </div>
-  );
-};

package/app-template/src/views/checkout/steps/payment/agreements.tsx

@@ -1,42 +0,0 @@
-import useContract from '../../../../hooks/use-contract';
-import { Controller } from 'react-hook-form';
-import { Checkbox } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
-import { Trans } from '@akinon/next/components/trans';
-
-const CheckoutAgreements = ({ control, fieldId, error }) => {
-  const { t } = useLocalization();
-  const {
-    ContractButton: InfoContractButton,
-    ContractModal: InfoContractModal
-  } = useContract('info', t('checkout.agreement.info_contract'));
-  const {
-    ContractButton: SalesContractButton,
-    ContractModal: SalesContractModal
-  } = useContract('sales', t('checkout.agreement.sales_contract'));
-
-  return (
-    <>
-      <Controller
-        name={fieldId}
-        control={control}
-        defaultValue={false}
-        render={({ field }) => (
-          <Checkbox {...field} error={error} data-testid="checkout-agreement">
-            <Trans
-              i18nKey="checkout.agreement.content"
-              components={{
-                InfoContract: <InfoContractButton />,
-                SalesContract: <SalesContractButton />
-              }}
-            />
-          </Checkbox>
-        )}
-      />
-      <InfoContractModal />
-      <SalesContractModal />
-    </>
-  );
-};
-
-export default CheckoutAgreements;

package/app-template/src/views/checkout/steps/payment/index.tsx

@@ -1,31 +0,0 @@
-import SelectedPaymentOptionView from '@akinon/next/components/selected-payment-option-view';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { CheckoutPaymentOption } from '@akinon/next/types';
-import clsx from 'clsx';
-import { RootState } from '@theme/redux/store';
-import PaymentOptionButtons from './payment-option-buttons';
-
-export const PaymentOptionViews: Array<CheckoutPaymentOption> = [];
-
-const PaymentStep = () => {
-  const isPaymentStepBusy = useAppSelector(
-    (state: RootState) => state.checkout.steps.payment.busy
-  );
-
-  return (
-    <div
-      className={clsx('flex flex-wrap w-full', {
-        'pointer-events-none opacity-30': isPaymentStepBusy
-      })}
-    >
-      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none">
-        <PaymentOptionButtons />
-      </div>
-      <div className="w-full border border-solid border-gray-400 bg-white">
-        <SelectedPaymentOptionView />
-      </div>
-    </div>
-  );
-};
-
-export default PaymentStep;