@akinon/pz-pay-on-delivery 1.30.2

package/.gitattributes

@@ -0,0 +1,15 @@
+*.js    text eol=lf
+*.jsx   text eol=lf
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+
+.eslintignore text eol=lf
+.eslintrc text eol=lf
+.gitignore text eol=lf
+.prettierrc text eol=lf
+.yarnrc text eol=lf
+
+* text=auto
+

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "proseWrap": "never",
+  "trailingComma": "none"
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @akinon/pz-pay-on-delivery
+
+## 1.30.2
+
+### Patch Changes
+
+- 4aa5a13: ZERO-2600: Publish pz-pay-on-delivery plugin

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@akinon/pz-pay-on-delivery",
+  "version": "1.30.2",
+  "license": "MIT",
+  "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.7.4",
+    "react-hook-form": "7.31.3",
+    "@hookform/resolvers": "2.9.0"
+  }
+}

package/src/endpoints.ts

@@ -0,0 +1,69 @@
+import { setPaymentStepBusy } from '@akinon/next/redux/reducers/checkout';
+import { CheckoutContext, PreOrder } from '@akinon/next/types';
+import { api } from '@akinon/next/data/client/api';
+import { checkout } from '@akinon/next/data/urls';
+import { buildClientRequestUrl } from '@akinon/next/utils';
+
+interface CheckoutResponse {
+  pre_order?: PreOrder;
+  errors: {
+    non_field_errors: string;
+  };
+  context_list?: CheckoutContext[];
+  template_name?: string;
+  redirect_url?: string;
+}
+
+export interface PayOnDeliveryParams {
+  agreement: string;
+  paymentType: string;
+}
+
+export const checkoutApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    setCompletePayOnDelivery: build.mutation<
+      CheckoutResponse,
+      PayOnDeliveryParams
+    >({
+      query: ({ paymentType }) => ({
+        url: buildClientRequestUrl(
+          `${checkout.fetchCheckout}?page=PayOnDeliveryPage`,
+          { useFormData: true }
+        ),
+        method: 'POST',
+        body: {
+          agreement: '1',
+          paymentType
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    }),
+    setPayOnDeliveryChoice: build.mutation<CheckoutResponse, string>({
+      query: (body) => ({
+        url: buildClientRequestUrl(
+          `${checkout.fetchCheckout}?page=PayOnDeliveryPaymentChoicePage`,
+          { useFormData: true }
+        ),
+        method: 'POST',
+        body: {
+          payment_choice: body
+        }
+      }),
+      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        await queryFulfilled;
+        dispatch(setPaymentStepBusy(false));
+      }
+    })
+  }),
+  overrideExisting: false
+});
+
+export const {
+  useSetCompletePayOnDeliveryMutation,
+  useSetPayOnDeliveryChoiceMutation
+} = checkoutApi;

package/src/index.tsx

@@ -0,0 +1,193 @@
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, Icon, Price, Radio } from '@akinon/next/components';
+import React, { useEffect, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { RootState } from 'redux/store';
+import * as yup from 'yup';
+import {
+  useSetCompletePayOnDeliveryMutation,
+  useSetPayOnDeliveryChoiceMutation
+} from './endpoints';
+
+interface PayOnDeliveryTranslationsProps {
+  paymentInformationTitle: string;
+  paymentInformationSubtitle: string;
+  totalAmountText: string;
+  serviceFeeText: string;
+  returnInfoText: string;
+  refundInfoText: string;
+  faqInfoText: string;
+  placeOrderText: string;
+  errorMessageText: string;
+  requiredFieldMessage: string;
+}
+
+const defaultTranslations = {
+  paymentInformationTitle: 'Payment information on delivery',
+  paymentInformationSubtitle: 'Payment Information at the Door',
+  totalAmountText:
+    'The amount you have to pay, including the Payment at the Door service fee, is',
+  serviceFeeText: 'The payment service fee at the door is',
+  returnInfoText:
+    'If you want to return the products you have received, you must fill in the fee return form link.',
+  refundInfoText:
+    'The amount to be refunded will be sent to your account via EFT.',
+  faqInfoText:
+    'For all your questions about Pay at the Door, you can visit our Frequently Asked Questions page.',
+  placeOrderText: 'Place Order',
+  errorMessageText: 'Error Message',
+  requiredFieldMessage: 'This field is required'
+};
+
+interface PayOnDeliveryProps {
+  translations: Record<string, PayOnDeliveryTranslationsProps>;
+  agreementCheckbox?: React.ReactElement;
+}
+
+export const PayOnDelivery = ({
+  translations,
+  agreementCheckbox
+}: PayOnDeliveryProps) => {
+  const _translations = {
+    ...defaultTranslations,
+    ...translations
+  };
+
+  const createPayOnDeliveryFormSchema = (
+    _translations: PayOnDeliveryTranslationsProps
+  ) => {
+    return yup.object().shape({
+      agreement: yup
+        .boolean()
+        .oneOf([true], _translations.requiredFieldMessage),
+      paymentType: yup.string()
+    });
+  };
+
+  const payOnDeliveryFormSchema = createPayOnDeliveryFormSchema(_translations);
+
+  const {
+    handleSubmit,
+    control,
+    register,
+    formState: { errors },
+    setValue
+  } = useForm({
+    resolver: yupResolver(payOnDeliveryFormSchema)
+  });
+
+  const [setCompletePayOnDelivery] = useSetCompletePayOnDeliveryMutation();
+
+  const [setPayOnDeliveryPaymentChoice, { isLoading }] =
+    useSetPayOnDeliveryChoiceMutation();
+  const [formError, setFormError] = useState(null);
+
+  const { preOrder, paymentChoices } = useAppSelector(
+    (state: RootState) => state.checkout
+  );
+
+  const onSubmit: SubmitHandler<null> = async (data) => {
+    const response = await setCompletePayOnDelivery(data).unwrap();
+
+    setFormError(response?.errors?.non_field_errors);
+  };
+
+  const setPayOnDeliveryChoice = async (value: string) => {
+    if (isLoading) return;
+
+    const response = await setPayOnDeliveryPaymentChoice(value).unwrap();
+    setFormError(response?.errors?.non_field_errors);
+  };
+
+  useEffect(() => {
+    if (!preOrder?.payment_choice && paymentChoices.length) {
+      setPayOnDeliveryChoice(paymentChoices[0].value);
+    } else {
+      setValue('paymentType', preOrder?.payment_choice?.value);
+    }
+  }, [paymentChoices, preOrder?.payment_choice]);
+
+  return (
+    <form
+      id="pay_on_delivery"
+      className="flex flex-col w-full"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <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">
+          {_translations.paymentInformationTitle}
+        </span>
+      </div>
+
+      <div className="w-full bg-white">
+        <div className="text-xs text-black-800 p-4 sm:p-6">
+          <div className="mb-2">{_translations.paymentInformationSubtitle}</div>
+          <div className="inline-flex gap-4 mb-4">
+            {paymentChoices?.map((paymentChoice, index) => (
+              <label
+                className="w-full flex items-center justify-start min-w-max"
+                key={index}
+              >
+                <Radio
+                  name="payment_choices"
+                  type="radio"
+                  value={paymentChoice.value}
+                  data-testid={`checkout-bank-account-${paymentChoice.label}`}
+                  {...register('paymentType')}
+                  onChange={() => setPayOnDeliveryChoice(paymentChoice.value)}
+                ></Radio>
+
+                <span className="flex items-start justify-start flex-col pl-1 sm:flex-row sm:items-center">
+                  {paymentChoice.label}
+                </span>
+              </label>
+            ))}
+          </div>
+          <ul className="space-y-1">
+            <li>
+              {_translations.totalAmountText}{' '}
+              <Price value={preOrder?.total_amount} />.
+            </li>
+            <li>
+              {_translations.serviceFeeText}{' '}
+              <Price value={preOrder?.payment_choice?.price} />.
+            </li>
+            <li>{_translations.returnInfoText}</li>
+            <li>{_translations.refundInfoText}</li>
+            <li>{_translations.faqInfoText}</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="px-4 sm:px-6">
+        <div className="flex items-start flex-col border-solid border-gray-400 py-4 space-y-4">
+          {agreementCheckbox &&
+            React.cloneElement(agreementCheckbox, {
+              control,
+              error: errors.agreement,
+              fieldId: 'agreement'
+            })}
+
+          {formError && (
+            <div className="w-full text-xs text-start px-1 mt-3 text-error">
+              {_translations.errorMessageText}
+            </div>
+          )}
+          <Button
+            className="group uppercase mt-4 inline-flex items-center justify-center w-full"
+            type="submit"
+            data-testid="checkout-bank-account-place-order"
+          >
+            <span>{_translations.placeOrderText}</span>
+            <Icon
+              size={12}
+              name="chevron-end"
+              className="fill-primary-foreground ml-2 h-3 group-hover:fill-primary"
+            />
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};