@akinon/projectzero 1.32.0 → 1.33.0

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

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

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

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

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

@@ -0,0 +1,244 @@
+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 [isRemoveAddressModalOpen, setRemoveAddressModalOpen] = 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, { isLoading: removeAddressLoading }] =
+    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);
+    setRemoveAddressModalOpen(false);
+    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={() => setRemoveAddressModalOpen(true)}
+          data-testid="checkout-address-remove"
+        >
+          {t('checkout.address.box.remove')}
+        </Button>
+      </div>
+      <Modal
+        portalId="remove-address-item"
+        className="w-4/5 sm:w-96 max-h-[90vh] overflow-y-auto"
+        open={isRemoveAddressModalOpen}
+        setOpen={setRemoveAddressModalOpen}
+        showCloseButton={false}
+      >
+        <div className="text-center px-6 py-10">
+          <p className="mb-4">
+            {t('account.address_book.modal.delete_description')}
+          </p>
+          <div className="space-x-3 flex justify-center">
+            <Button
+              appearance="outlined"
+              onClick={() => {
+                setRemoveAddressModalOpen(false);
+              }}
+              data-testid="remove-address-modal-cancel"
+            >
+              {t('account.address_book.modal.close')}
+            </Button>
+            <Button
+              appearance="filled"
+              disabled={removeAddressLoading}
+              onClick={() => {
+                handleRemoveAddress(address.pk);
+              }}
+              className={
+                removeAddressLoading && 'opacity-50 cursor-not-allowed'
+              }
+              data-testid="remove-address-modal-delete"
+            >
+              {t('account.address_book.modal.delete_address')}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default AddressBox;

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

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

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