@akinon/projectzero 1.32.0-rc.2 → 1.32.0

package/app-template/src/views/checkout/steps/payment/options/pay-on-delivery.tsx

@@ -1,15 +0,0 @@
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import CheckoutAgreements from '../agreements';
-
-export default function PayOnDelivery() {
-  return (
-    <PluginModule
-      component={Component.PayOnDelivery}
-      props={{
-        agreementCheckbox: (
-          <CheckoutAgreements control={null} error={null} fieldId="agreement" />
-        )
-      }}
-    />
-  );
-}

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

@@ -1,94 +0,0 @@
-'use client';
-
-import { useCompleteRedirectionPaymentMutation } from '@akinon/next/data/client/checkout';
-import { useLocalization } from '@akinon/next/hooks';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { yupResolver } from '@hookform/resolvers/yup';
-import { Button, Checkbox } from '@theme/components';
-import { useForm } from 'react-hook-form';
-import { twMerge } from 'tailwind-merge';
-import * as yup from 'yup';
-import PaymentOptionButtons from '../payment-option-buttons';
-import { useEffect, useState } from 'react';
-import { getPosError } from '@akinon/next/utils';
-
-interface FormValues {
-  agreement: boolean;
-}
-
-const formSchema = (t) =>
-  yup.object().shape({
-    agreement: yup
-      .boolean()
-      .required('This field is required')
-      .oneOf([true], 'This field is required')
-  });
-
-export default function RedirectionPayment() {
-  const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
-  const [formError, setFormError] = useState(null);
-
-  const { t } = useLocalization();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = useForm<FormValues>({
-    resolver: yupResolver(formSchema(t))
-  });
-  const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
-
-  const onSubmit = async () => {
-    completeRedirectionPayment();
-  };
-
-  useEffect(() => {
-    const posErrors = getPosError();
-
-    if (posErrors) {
-      setFormError(posErrors);
-    }
-  }, []);
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="lg-5 space-y-5 lg:p-10">
-      <h1 className="text-2xl font-bold px-4 md:px-0">
-        Pay With {payment_option.name}
-      </h1>
-
-      <p className="px-4 md:px-0">
-        You can quickly and easily pay and complete your order with{' '}
-        {payment_option.name}.
-      </p>
-
-      <Checkbox
-        className="px-4 md:px-0"
-        {...register('agreement')}
-        error={errors.agreement}
-      >
-        Check here to indicate that you have read and agree to the all terms.
-      </Checkbox>
-
-      {formError?.non_field_errors && (
-        <div
-          className="w-full text-xs text-start px-1 mt-3 text-error"
-          data-testid="checkout-form-error"
-        >
-          {formError.non_field_errors}
-        </div>
-      )}
-      {formError?.status && (
-        <div
-          className="w-full text-xs text-start px-1 mt-3 text-error"
-          data-testid="checkout-form-error"
-        >
-          {formError.status}
-        </div>
-      )}
-
-      <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
-        {payment_option.name}
-      </Button>
-    </form>
-  );
-}

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

@@ -1,17 +0,0 @@
-import React from 'react';
-
-export type PaymentHeaderProps = {
-  title: string;
-};
-
-const PaymentHeader = ({ title }: PaymentHeaderProps) => {
-  return (
-    <div className="flex justify-start items-center border-solid border-gray-400 px-4 py-2 sm:px-6 sm:py-3 sm:min-h-15">
-      <span className="text-black-800 text-lg font-medium sm:text-2xl">
-        {title}
-      </span>
-    </div>
-  );
-};
-
-export default PaymentHeader;

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

@@ -1,73 +0,0 @@
-import clsx from 'clsx';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from '@theme/redux/store';
-import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
-import { CheckoutPaymentOption } from '@akinon/next/types';
-import { Radio } from '@theme/components';
-import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
-
-const PaymentOptionButtons = () => {
-  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
-  const [setPaymentOption] = useSetPaymentOptionMutation();
-  const { filteredPaymentOptions } = usePaymentOptions();
-
-  const onClickHandler = (option: CheckoutPaymentOption) => {
-    setPaymentOption(option.pk);
-  };
-
-  const scrollToTop = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
-
-  return (
-    <>
-      <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
-        {filteredPaymentOptions.map((option) => (
-          <label
-            key={`payment-option-${option.pk}`}
-            className="border px-4 py-3 mt-3 flex h-12"
-            onClick={scrollToTop}
-          >
-            <Radio
-              type="radio"
-              name="payment-option"
-              value={option.pk}
-              checked={preOrder?.payment_option?.pk === option.pk}
-              onChange={() => onClickHandler(option)}
-              className="mr-2 mt-1"
-            />
-            <span className="flex text-primary-800 font-light text-lg">
-              {option.name}
-            </span>
-          </label>
-        ))}
-      </div>
-
-      <div className="hidden md:flex">
-        {filteredPaymentOptions.map((option) => (
-          <button
-            key={`payment-option-${option.pk}`}
-            onClick={() => onClickHandler(option)}
-            className={clsx(
-              'flex items-center justify-center border-r border-b border-solid',
-              'border-gray-400 text-xs uppercase text-black-800 font-medium',
-              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
-              {
-                'text-opacity-100 border-b-transparent':
-                  preOrder?.payment_option?.pk === option.pk
-              }
-            )}
-            data-testid={`checkout-payment-tab-${option.pk}`}
-          >
-            {option.name}
-          </button>
-        ))}
-      </div>
-    </>
-  );
-};
-
-export default PaymentOptionButtons;

package/app-template/src/views/checkout/steps/shipping/address-box.tsx

@@ -1,204 +0,0 @@
-import clsx from 'clsx';
-import { useState } from 'react';
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from '@theme/redux/store';
-import {
-  useEditAddressMutation,
-  useRemoveAddressMutation
-} from '@akinon/next/data/client/address';
-import {
-  useSetAddressesMutation,
-  useSetRetailStoreMutation,
-  useSetShippingOptionMutation
-} from '@akinon/next/data/client/checkout';
-import { Address, CheckoutAddressType } from '@akinon/next/types';
-import { Button, Modal, Radio } from '@theme/components';
-import { resetCheckoutState } from '@akinon/next/redux/reducers/checkout';
-import { AddressForm } from '@theme/views/account/address-form';
-import { useLocalization } from '@akinon/next/hooks';
-
-interface AddressBoxProps {
-  addressType: CheckoutAddressType;
-  address: Address;
-  isBillingAddressSame: boolean;
-  disabled: boolean;
-}
-
-const AddressBox = ({
-  addressType,
-  address,
-  isBillingAddressSame,
-  disabled
-}: AddressBoxProps) => {
-  const { t } = useLocalization();
-  const [isEditAddressModalOpen, setIsEditAddressModalOpen] = useState(false);
-  const { shipping_address, billing_address, delivery_option, retail_store } =
-    useAppSelector((state: RootState) => state.checkout.preOrder) ?? {};
-  const addressList = useAppSelector(
-    (state: RootState) => state.checkout.addressList
-  );
-  const [setShippingOption] = useSetShippingOptionMutation();
-  const [setRetailStore] = useSetRetailStoreMutation();
-  const [setAddresses] = useSetAddressesMutation();
-  const [editAddress] = useEditAddressMutation();
-  const [removeAddress] = useRemoveAddressMutation();
-  const dispatch = useAppDispatch();
-
-  const handleAddressClick = (
-    addressType: CheckoutAddressType,
-    address: Address
-  ) => {
-    if (addressType.value === address.pk) {
-      return;
-    }
-
-    const addresses = {
-      shippingAddressPk: shipping_address?.pk,
-      billingAddressPk: billing_address?.pk
-    };
-
-    if (isBillingAddressSame) {
-      Object.keys(addresses).forEach((key) => {
-        addresses[key] = address.pk;
-      });
-    } else {
-      addresses[addressType.requestParam] = address.pk;
-    }
-
-    if (!delivery_option) {
-      console.warn(
-        'The delivery option was not found, please add one or more options from Omnitron.'
-      );
-    }
-
-    if (delivery_option?.delivery_option_type === 'retail_store') {
-      setShippingOption(delivery_option.pk).unwrap();
-      setRetailStore({
-        retailStorePk: retail_store.pk,
-        billingAddressPk: address.pk
-      });
-    } else {
-      setAddresses(addresses);
-    }
-  };
-
-  const onSubmit = (data) => {
-    editAddress(data)
-      .unwrap()
-      .then((editAddressResponse) => {
-        handleAddressClick(addressType, editAddressResponse);
-      })
-      .catch();
-
-    setIsEditAddressModalOpen(false);
-  };
-
-  const handleRemoveAddress = async (addressPk: number) => {
-    await removeAddress(addressPk);
-    dispatch(resetCheckoutState());
-
-    if (
-      addressPk === shipping_address?.pk ||
-      addressPk === billing_address?.pk
-    ) {
-      const newAddressList = addressList.filter((address) => {
-        if (address.pk !== addressPk) {
-          return address.pk;
-        }
-      });
-
-      const addresses = {
-        shippingAddressPk:
-          addressPk === shipping_address?.pk
-            ? newAddressList[0]?.pk
-            : shipping_address?.pk,
-        billingAddressPk:
-          addressPk === billing_address?.pk
-            ? newAddressList[0]?.pk
-            : billing_address?.pk
-      };
-
-      setAddresses(addresses);
-    }
-  };
-
-  return (
-    <div
-      onClick={() => handleAddressClick(addressType, address)}
-      key={address.pk}
-      className={clsx(
-        'cursor-pointer relative w-full border shadow p-4 min-h-[8rem]',
-        "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
-        'after:border-secondary-400 after:absolute after:inset-0 after:duration-150 after:-z-10',
-        {
-          'after:opacity-0': addressType.value !== address.pk
-        },
-        {
-          'after:border-4 after:opacity-100': addressType.value === address.pk
-        },
-        {
-          'opacity-30 select-none pointer-events-none': disabled
-        }
-      )}
-    >
-      <Radio
-        className="mb-2"
-        name={addressType.label}
-        checked={addressType.value === address.pk}
-        onChange={() => null}
-      >
-        <span className="text-xs font-normal italic">
-          {t('checkout.address.box.shipping_to')}:
-        </span>
-      </Radio>
-      <div className="text-xs mb-3 leading-4">
-        <p>{address.title}</p>
-        <p>{address.phone_number}</p>
-        <p className="overflow-hidden text-ellipsis whitespace-nowrap">
-          {address.line}
-        </p>
-        <p>
-          {address.township.name} / {address.city.name}
-        </p>
-      </div>
-      <div className="text-xs flex justify-between">
-        <Button
-          appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
-          onClick={() => setIsEditAddressModalOpen(true)}
-          data-testid="checkout-address-edit"
-        >
-          {t('checkout.address.box.edit')}
-        </Button>
-        <Modal
-          portalId={`checkout-shipping-edit-address-modal-${address.pk}`}
-          title={t('checkout.address.modal.edit_address')}
-          open={isEditAddressModalOpen}
-          setOpen={setIsEditAddressModalOpen}
-          className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
-        >
-          <AddressForm
-            data={{
-              ...address,
-              country: address.country?.pk,
-              city: address.city?.pk,
-              township: address.township?.pk,
-              district: address.district?.pk
-            }}
-            onSubmit={onSubmit}
-          />
-        </Modal>
-        <Button
-          appearance="ghost"
-          className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
-          onClick={() => handleRemoveAddress(address.pk)}
-          data-testid="checkout-address-remove"
-        >
-          {t('checkout.address.box.remove')}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default AddressBox;

package/app-template/src/views/checkout/steps/shipping/addresses.tsx

@@ -1,189 +0,0 @@
-import clsx from 'clsx';
-import { useEffect, useMemo, useState } from 'react';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from '@theme/redux/store';
-import { useSetAddressesMutation } from '@akinon/next/data/client/checkout';
-import { CheckoutAddressType } from '@akinon/next/types';
-import { Checkbox, Icon, Modal } from '@theme/components';
-import AddressBox from './address-box';
-import { useAddAddressMutation } from '@akinon/next/data/client/address';
-import { AddressForm } from '@theme/views/account/address-form';
-import { useLocalization } from '@akinon/next/hooks';
-import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { Trans } from '@akinon/next/components/trans';
-
-const Addresses = () => {
-  const { t } = useLocalization();
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const addressList = useAppSelector(
-    (state: RootState) => state.checkout.addressList
-  );
-  const {
-    shipping_address,
-    billing_address,
-    billing_and_shipping_same,
-    delivery_option
-  } = useAppSelector((state: RootState) => state.checkout.preOrder) ?? {};
-
-  const [isBillingAddressSame, setIsBillingAddressSame] = useState(
-    billing_and_shipping_same
-  );
-
-  const addressTypes: CheckoutAddressType[] = useMemo(
-    () => [
-      {
-        label: 'Delivery',
-        text: t('checkout.address.delivery'),
-        value: shipping_address?.pk,
-        requestParam: 'shippingAddressPk'
-      },
-      {
-        label: 'Billing',
-        text: t('checkout.address.billing'),
-        value: billing_address?.pk,
-        requestParam: 'billingAddressPk'
-      }
-    ],
-    [shipping_address?.pk, billing_address?.pk, t]
-  );
-  const [setAddresses] = useSetAddressesMutation();
-  const [addAddress] = useAddAddressMutation();
-
-  const handleSameBillingAddressChange = () => {
-    setIsBillingAddressSame((prevValue) => {
-      if (!prevValue) {
-        setAddresses({
-          shippingAddressPk: shipping_address?.pk,
-          billingAddressPk: shipping_address?.pk
-        });
-      }
-
-      return !prevValue;
-    });
-  };
-
-  const setSelectAddresses = (pk: number) => {
-    const addresses = {
-      shippingAddressPk: pk,
-      billingAddressPk: pk
-    };
-
-    setAddresses(addresses);
-  };
-
-  useEffect(() => {
-    setIsBillingAddressSame(billing_and_shipping_same);
-  }, [billing_and_shipping_same]);
-
-  const onSubmit = (data) => {
-    addAddress(data)
-      .unwrap()
-      .then((addAddressResponse) => {
-        if (addressList.length === 0) {
-          setSelectAddresses(addAddressResponse.pk);
-        }
-      })
-      .catch();
-
-    setIsModalOpen(false);
-  };
-
-  const AddressType = (props) => {
-    return props.title;
-  };
-
-  return (
-    <div className="w-full lg:w-3/5 lg:border-r lg:border-gray-400">
-      {addressTypes
-        .filter((addressType) =>
-          isBillingAddressSame ? addressType.label !== 'Billing' : true
-        )
-        .map((addressType) => (
-          <div key={addressType.label}>
-            <div className="flex items-center justify-between border-b border-gray-400 px-8 py-4">
-              <h2 className="text-2xl">
-                {addressType.text} {t('checkout.address.address')}
-              </h2>
-
-              {addressType.label === 'Delivery' &&
-                delivery_option?.delivery_option_type !== 'retail_store' && (
-                  <Checkbox
-                    checked={isBillingAddressSame}
-                    onChange={handleSameBillingAddressChange}
-                    data-testid="checkout-billing-checkbox"
-                  >
-                    {t('checkout.address.use_for_billing')}
-                  </Checkbox>
-                )}
-            </div>
-            <div className="px-8 py-4 border-gray-400">
-              <p className="text-xs mb-4">
-                <Trans
-                  i18nKey="checkout.address.content"
-                  components={{
-                    addressType: (
-                      <AddressType title={addressType.text.toLowerCase()} />
-                    )
-                  }}
-                />
-              </p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {addressList.map((address) => (
-                  <AddressBox
-                    key={address.pk}
-                    addressType={addressType}
-                    address={address}
-                    isBillingAddressSame={isBillingAddressSame}
-                    data-testid={`checkout-address-${address.pk}`}
-                    disabled={
-                      delivery_option?.delivery_option_type ===
-                        'retail_store' &&
-                      addressType.requestParam === 'shippingAddressPk'
-                    }
-                  />
-                ))}
-
-                <PluginModule
-                  component={Component.ClickCollect}
-                  props={{ addressTypeParam: addressType.requestParam }}
-                />
-
-                <div
-                  role="button"
-                  onClick={() => setIsModalOpen(true)}
-                  className={clsx(
-                    'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
-                    "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
-                    'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
-                    {
-                      'opacity-30 select-none pointer-events-none':
-                        delivery_option?.delivery_option_type === 'retail_store'
-                    }
-                  )}
-                >
-                  <div className="text-xs flex justify-center items-center h-full gap-x-2">
-                    <Icon name="plus" size={12} />
-                    <span data-testid="checkout-add-new-address">
-                      {t('checkout.address.add_new_address')}
-                    </span>
-                  </div>
-                </div>
-                <Modal
-                  portalId="orders-checkout-new-address-modal"
-                  title={t('checkout.address.add_new_address')}
-                  open={isModalOpen}
-                  setOpen={setIsModalOpen}
-                  className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
-                >
-                  <AddressForm onSubmit={onSubmit} />
-                </Modal>
-              </div>
-            </div>
-          </div>
-        ))}
-    </div>
-  );
-};
-
-export default Addresses;

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

@@ -1,27 +0,0 @@
-import clsx from 'clsx';
-import { useAppSelector } from '@akinon/next/redux/hooks';
-import { RootState } from '@theme/redux/store';
-import Addresses from './addresses';
-import ShippingOptions from './shipping-options';
-
-const ShippingStep = () => {
-  const isShippingStepBusy = useAppSelector(
-    (state: RootState) => state.checkout.steps.shipping.busy
-  );
-
-  return (
-    <div
-      className={clsx(
-        'flex flex-col border border-gray-400 w-full lg:flex-row',
-        {
-          'pointer-events-none opacity-30': isShippingStepBusy
-        }
-      )}
-    >
-      <Addresses />
-      <ShippingOptions />
-    </div>
-  );
-};
-
-export default ShippingStep;

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -1,72 +0,0 @@
-import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
-import { setCurrentStep } from '@akinon/next/redux/reducers/checkout';
-import { RootState } from '@theme/redux/store';
-import { useSetShippingOptionMutation } from '@akinon/next/data/client/checkout';
-import { Price, Button, Radio } from '@theme/components';
-import { CheckoutStep } from '@akinon/next/types';
-import { useLocalization } from '@akinon/next/hooks';
-
-const ShippingOptions = () => {
-  const { t } = useLocalization();
-  const { steps, shippingOptions, preOrder, addressList } = useAppSelector(
-    (state: RootState) => state.checkout
-  );
-  const { shipping_option, shipping_address } = preOrder ?? {};
-  const [setShippingOption] = useSetShippingOptionMutation();
-  const dispatch = useAppDispatch();
-
-  return (
-    <div className="w-full lg:w-2/5">
-      <div className="border-b border-gray-400 px-8 py-4">
-        <h2 className="text-2xl">{t('checkout.address.shipping.title')}</h2>
-      </div>
-      {addressList.length < 1 ? (
-        <div className="py-4 px-8">
-          <p className="text-xs">
-            {t('checkout.address.shipping.select_address_to_continue')}
-          </p>
-        </div>
-      ) : (
-        <div className="py-4 px-6">
-          <p className="text-xs border-gray-400 pb-4">
-            {t('checkout.address.shipping.chosen_address')}:{' '}
-            {shipping_address?.city.name}
-          </p>
-          {shippingOptions.map((option) => (
-            <div
-              key={option.pk}
-              className="py-4 border-t border-gray-400 flex justify-between"
-            >
-              <Radio
-                name="shipping"
-                checked={option.pk === shipping_option?.pk}
-                onChange={() => {
-                  setShippingOption(option.pk);
-                }}
-                onClick={() => {
-                  setShippingOption(option?.pk);
-                }}
-                data-testid={`checkout-shipping-option-${option.pk}`}
-              >
-                {option.name}
-              </Radio>
-              <span className="text-xs">
-                <Price value={option.shipping_amount} />
-              </span>
-            </div>
-          ))}
-          <Button
-            className="mt-2 w-full"
-            disabled={!steps.shipping.completed}
-            onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
-            data-testid="checkout-shipping-save"
-          >
-            {t('checkout.address.shipping.button')}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ShippingOptions;