@akinon/projectzero 1.32.0 → 1.33.0

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

@@ -0,0 +1,163 @@
+'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 } 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 { 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 facets = useAppSelector((state) => state.category.facets);
+  const dispatch = useAppDispatch();
+  const { t } = useLocalization();
+  const { isMenuOpen, setIsMenuOpen } = props;
+
+  const handleSelectFilter = ({
+    facet,
+    choice
+  }: {
+    facet: Facet;
+    choice: FacetChoice;
+  }) => {
+    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());
+  };
+
+  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

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

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

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

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

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

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

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

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

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

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

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