@akinon/pz-pay-on-delivery 2.0.0-beta.1 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @akinon/pz-pay-on-delivery
 
+## 2.0.0-beta.11
+
+### Minor Changes
+
+- ac783d6: ZERO-3482: Update tailwindcss to version 4.1.11 and enhance button cursor styles
+
+## 2.0.0-beta.10
+
+### Minor Changes
+
+- 2806320: ZERO-3390: Update version tailwindcss, autoprefixer, tailwind-merge, postcss
+
+## 2.0.0-beta.9
+
+### Minor Changes
+
+- 0fe7711: ZERO-3387: Upgrade nextjs, eslint-config-next
+
+## 2.0.0-beta.8
+
+## 2.0.0-beta.7
+
+## 2.0.0-beta.6
+
+### Minor Changes
+
+- 8f05f9b: ZERO-3250: Beta branch synchronized with Main branch
+
+## 2.0.0-beta.5
+
+## 2.0.0-beta.4
+
+## 2.0.0-beta.3
+
+## 2.0.0-beta.2
+
+### Minor Changes
+
+- a006015: ZERO-3116: Add not-found page and update default middleware.
+- 1eeb3d8: ZERO-3116: Add not found page
+
 ## 2.0.0-beta.1
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-pay-on-delivery",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/endpoints.ts

@@ -15,7 +15,6 @@ interface CheckoutResponse {
 }
 
 export interface PayOnDeliveryParams {
-  agreement: string;
   paymentType: string;
 }
 

package/src/index.tsx

@@ -2,7 +2,14 @@ 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 {
+  SubmitHandler,
+  useForm,
+  UseFormHandleSubmit,
+  UseFormRegister,
+  Control,
+  FieldErrors
+} from 'react-hook-form';
 import { RootState } from 'redux/store';
 import * as yup from 'yup';
 import {
@@ -10,6 +17,11 @@ import {
   useSetPayOnDeliveryChoiceMutation
 } from './endpoints';
 
+interface PayOnDeliveryForm {
+  agreement: boolean;
+  paymentType: string;
+}
+
 interface PayOnDeliveryTranslationsProps {
   paymentInformationTitle: string;
   paymentInformationSubtitle: string;
@@ -43,29 +55,34 @@ const defaultTranslations = {
 interface PayOnDeliveryProps {
   translations: Record<string, PayOnDeliveryTranslationsProps>;
   agreementCheckbox?: React.ReactElement;
+  customUIRender?: (props: {
+    handleSubmit: UseFormHandleSubmit<PayOnDeliveryForm>;
+    onSubmit: SubmitHandler<any>;
+    paymentChoices: any[];
+    preOrder: any;
+    formError: string | null;
+    isLoading: boolean;
+    register: UseFormRegister<PayOnDeliveryForm>;
+    control: Control<PayOnDeliveryForm>;
+    errors: FieldErrors<PayOnDeliveryForm>;
+    setPayOnDeliveryChoice: (value: string) => void;
+  }) => React.ReactNode;
 }
 
 export const PayOnDelivery = ({
   translations,
-  agreementCheckbox
+  agreementCheckbox,
+  customUIRender
 }: 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 payOnDeliveryFormSchema = yup.object().shape({
+    agreement: yup.boolean().oneOf([true], _translations.requiredFieldMessage),
+    paymentType: yup.string()
+  });
 
   const {
     handleSubmit,
@@ -73,12 +90,11 @@ export const PayOnDelivery = ({
     register,
     formState: { errors },
     setValue
-  } = useForm({
+  } = useForm<PayOnDeliveryForm>({
     resolver: yupResolver(payOnDeliveryFormSchema)
   });
 
   const [setCompletePayOnDelivery] = useSetCompletePayOnDeliveryMutation();
-
   const [setPayOnDeliveryPaymentChoice, { isLoading }] =
     useSetPayOnDeliveryChoiceMutation();
   const [formError, setFormError] = useState(null);
@@ -87,15 +103,13 @@ export const PayOnDelivery = ({
     (state: RootState) => state.checkout
   );
 
-  const onSubmit: SubmitHandler<null> = async (data) => {
+  const onSubmit: SubmitHandler<PayOnDeliveryForm> = 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);
   };
@@ -108,6 +122,21 @@ export const PayOnDelivery = ({
     }
   }, [paymentChoices, preOrder?.payment_choice]);
 
+  if (customUIRender) {
+    return customUIRender({
+      handleSubmit,
+      onSubmit,
+      register,
+      control,
+      errors,
+      paymentChoices,
+      preOrder,
+      formError,
+      isLoading,
+      setPayOnDeliveryChoice
+    });
+  }
+
   return (
     <form
       id="pay_on_delivery"