@akinon/pz-checkout-gift-pack 2.0.0-beta.1 → 2.0.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @akinon/pz-checkout-gift-pack
 
+## 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/README.md

@@ -1,10 +1,13 @@
 # @akinon/pz-checkout-gift-package
 
-### Install the npm package
+## Installation
+
+You can use the following command to install the extension with the latest plugins:
 
 ```bash
-# For latest version
-yarn add @akinon/pz-checkout-gift-package
+
+npx @akinon/projectzero@latest --plugins
+
 ```
 
 ### Props
@@ -15,3 +18,250 @@ yarn add @akinon/pz-checkout-gift-package
 | modalClassName | `string` | This prop is used to customize the overall style of the modal. |
 | modalTitle | `string` | This prop sets the title of the modal. |
 | modalContentClassName | `string` | This prop is used to customize the style of the modal content. |
+| maxNoteLength? | `number` | Sets the maximum number of characters allowed for the gift note. If not provided, a default value is used. |
+| customUIRender | `(props: { hasGiftPack: boolean; hasNote: { state: boolean }; note: string; onAddGiftPack: () => void; onRemoveGiftPack: () => void; onAddNote: () => void; formContent: React.ReactNode; translations: Record<string, string> }) => React.ReactNode` | A custom render function to fully override the default gift pack UI. This gives complete control over the display and interactions. |
+| customGiftNoteFormUIRender | `(props: { register: any; errors: any; note: string; textAreaCount: number; onSubmit: (data: any) => void; removeNote: () => void; handleSubmit: any; translations: Record<string, string> }) => React.ReactNode` | A render function that replaces the default gift note form UI. Useful for providing a customized textarea, button layout, or validation display. |
+
+### Customized sample code
+
+```js
+  <PluginModule
+    component={Component.CheckoutGiftPack}
+    props={{
+      className:
+        'flex flex-col w-full mb-4 border border-solid border-gray-400',
+      translations: {
+        addGiftPackText: 'Add Gift Pack',
+        giftPackAdded: 'Gift Pack Added',
+        removeGiftPackText: 'Remove Gift Pack',
+        informationText: 'This order will be gift packaged*',
+        updateNote: 'Update Note',
+        removeGiftNoteText: 'Remove Gift Note',
+        charactersLength: 'characters left',
+        placeholderInput:
+          'You can leave empty this area. However it will be a gift package without note.',
+        accordionTitle: 'Gift Note',
+        warningMessage:
+          'Make sure that this field is not longer than the character limit.',
+        save: 'SAVE',
+        close: 'Close'
+      },
+      customUIRender: ({
+        hasGiftPack,
+        hasNote,
+        note,
+        onAddGiftPack,
+        onRemoveGiftPack,
+        onAddNote,
+        formContent,
+        translations
+      }) => (
+        <div className="custom-gift-pack">
+          {hasGiftPack ? (
+            <div className="gift-pack-added p-4 border border-gray-200">
+              <div className="flex justify-between items-center mb-4">
+                <span className="font-medium">
+                  {translations.giftPackAdded}
+                </span>
+                <button
+                  onClick={onRemoveGiftPack}
+                  className="text-red-500 hover:text-red-700"
+                >
+                  {translations.removeGiftPackText}
+                </button>
+              </div>
+
+              <div className="gift-note-info bg-gray-50 p-3 rounded">
+                <span className="text-sm text-gray-600">
+                  {translations.informationText}
+                </span>
+                {note && <p className="mt-2 text-sm">{note}</p>}
+                <button
+                  onClick={onAddNote}
+                  className="mt-2 text-blue-500 hover:text-blue-700"
+                >
+                  {translations.updateNote}
+                </button>
+              </div>
+
+              {hasNote.state && <div className="mt-4">{formContent}</div>}
+            </div>
+          ) : (
+            <button
+              onClick={onAddGiftPack}
+              className="w-full p-2 text-center border border-gray-200 hover:bg-gray-50"
+            >
+              {translations.addGiftPackText}
+            </button>
+          )}
+        </div>
+      ),
+      customGiftNoteFormUIRender: ({
+        register,
+        errors,
+        note,
+        textAreaCount,
+        onSubmit,
+        removeNote,
+        handleSubmit,
+        translations: formTranslations
+      }) => (
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <textarea
+            {...register('message')}
+            value={note}
+            placeholder={formTranslations.placeholderInput}
+          />
+          {errors.message && <span>{errors.message.message}</span>}
+          <div className="character-count">
+            {textAreaCount}/160 {formTranslations.charactersLength}
+          </div>
+          <div className="buttons">
+            <button type="button" onClick={removeNote}>
+              {formTranslations.removeGiftNoteText}
+            </button>
+            <button type="submit">{formTranslations.save}</button>
+          </div>
+        </form>
+      )
+    }}
+  />
+  <div className="flex flex-col w-full border border-solid border-gray-400">
+    <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
+      <span className="text-black-800 text-xl font-light sm:text-2xl">
+        {t('checkout.summary.title')}
+      </span>
+      <span className="text-gray-950 text-xs">
+        {preOrder.basket.basketitem_set.length}{' '}
+        {t('checkout.summary.items').toUpperCase()}
+      </span>
+    </div>
+    <div className="border-b border-solid border-gray-400 max-h-64 overflow-y-auto">
+      {preOrder.basket.basketitem_set.map((item, index) => (
+        <div
+          key={`summary-basketitem-${index}`}
+          className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
+        >
+          <Link
+            href={'#'}
+            className={twMerge(
+              'min-w-max flex items-center justify-center',
+              isMobileApp && 'pointer-events-none'
+            )}
+            passHref
+          >
+            <Image
+              src={item.product.productimage_set[0]?.image}
+              alt="Checkout Summary Image"
+              width={64}
+              height={96}
+            />
+          </Link>
+          <div className="w-full flex flex-wrap justify-between pl-4">
+            <div className="flex justify-center flex-col w-1/2">
+              <Link
+                href={item.product.absolute_url}
+                className={twMerge(
+                  'text-xs text-black-800 transition-all mb-1 hover:text-secondary',
+                  isMobileApp && 'pointer-events-none'
+                )}
+              >
+                {item.product.name}
+              </Link>
+              <div className="flex flex-col">
+                <div className="flex text-xs text-black-800">
+                  <span>{t('checkout.summary.quantity')}:</span>
+                  <span className="ml-1 min-w-max">{item.quantity}</span>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-end justify-center flex-col w-1/2">
+              {item.product.retail_price !== item.product.price && (
+                <div className="text-xs text-black-800 line-through min-w-max sm:text-sm">
+                  <Price value={item.product.retail_price} />
+                </div>
+              )}
+              <div className="text-xs text-secondary min-w-max sm:text-sm">
+                <Price value={item.product.price} />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+    <div className="pt-3">
+      <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+        <span>
+          {t('checkout.summary.subtotal')} (
+          {preOrder.basket.basketitem_set.length}{' '}
+          {t('checkout.summary.items')})
+        </span>
+        <span>
+          <Price value={preOrder?.basket?.total_amount} />
+        </span>
+      </div>
+      <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+        <span>{t('checkout.summary.shipping')}</span>
+        <span>
+          <Price value={preOrder?.shipping_amount} />
+        </span>
+      </div>
+      <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+        <span>{t('checkout.summary.discounts_total')}</span>
+        <span>
+          <Price
+            value={preOrder?.basket?.total_discount_amount}
+            useNegative
+          />
+        </span>
+      </div>
+      <div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
+        <span className="font-light">{t('checkout.summary.total')}</span>
+        <span className="min-w-max pl-4">
+          <Price value={preOrder?.unpaid_amount} />
+        </span>
+      </div>
+    </div>
+  </div>
+  {currentStep === CheckoutStep.Payment && (
+    <div className="flex flex-col w-full border border-solid border-gray-400 mt-4">
+      <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-3 sm:min-h-15">
+        <div className="text-black-800 text-xl font-light sm:text-2xl">
+          {t('checkout.summary.delivery_info')}
+        </div>
+        <div
+          className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
+          onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
+        >
+          {t('checkout.summary.change')}
+        </div>
+      </div>
+      <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
+        <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+          <Trans
+            i18nKey="checkout.summary.info"
+            components={{
+              ShippingAddress: (
+                <Text title={preOrder.shipping_address?.title} />
+              ),
+              ShippingOption: (
+                <Text title={preOrder.shipping_option?.name} />
+              )
+            }}
+          />
+        </div>
+        <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
+          {preOrder.shipping_address?.line}{' '}
+          {preOrder.shipping_address?.postcode}{' '}
+          {preOrder.shipping_address?.district && (
+            <>{preOrder.shipping_address?.district.name} / </>
+          )}
+          {preOrder.shipping_address?.township && (
+            <>{preOrder.shipping_address?.township.name} / </>
+          )}
+          {preOrder.shipping_address?.city?.name}
+        </div>
+      </div>
+    </div>
+  )}
+```

package/package.json

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

package/src/index.tsx

@@ -1,37 +1,74 @@
+import React from 'react';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { yupResolver } from '@hookform/resolvers/yup';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Accordion, Button, Icon, Modal } from '@akinon/next/components';
 import { useEffect, useState } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import {
+  SubmitHandler,
+  useForm,
+  UseFormRegister,
+  FieldErrors,
+  UseFormHandleSubmit
+} from 'react-hook-form';
 import { RootState } from 'redux/store';
 import * as yup from 'yup';
 import { useAddGiftPackMutation, useRemoveGiftPackMutation } from './endpoints';
 
+const defaultTranslations = {
+  addGiftPackText: 'Add Gift Pack',
+  giftPackAdded: 'Gift Pack Added',
+  removeGiftPackText: 'Remove Gift Pack',
+  informationText: 'This order will be gift packaged*',
+  updateNote: 'Update Note',
+  removeGiftNoteText: 'Remove Gift Note',
+  charactersLength: 'characters left',
+  placeholderInput:
+    'You can leave empty this area. However it will be a gift package without note.',
+  accordionTitle: 'Gift Note',
+  warningMessage:
+    'Make sure that this field is not longer than the character limit.',
+  save: 'SAVE',
+  close: 'Close'
+};
+
 interface GiftPackForm {
   message: string;
 }
 
+interface CustomUIRenderParams {
+  hasGiftPack: boolean;
+  hasNote: { title: string; state: boolean };
+  note: string;
+  textAreaCount: number;
+  onAddGiftPack: () => void;
+  onRemoveGiftPack: () => void;
+  onAddNote: () => void;
+  onRemoveNote: () => void;
+  formContent: React.ReactNode;
+  translations: typeof defaultTranslations;
+}
+
 interface CheckoutGiftPackProps {
   className?: string;
   useModal?: boolean;
   modalClassName?: string;
   modalTitle?: string;
+  maxNoteLength?: number;
   modalContentClassName?: string;
-  translations: {
-    addGiftPackText: string;
-    giftPackAdded: string;
-    removeGiftPackText: string;
-    informationText: string;
-    updateNote: string;
-    removeGiftNoteText: string;
-    charactersLength: string;
-    placeholderInput: string;
-    accordionTitle: string;
-    warningMessage: string;
-    save: string;
-  };
+  translations?: Partial<typeof defaultTranslations>;
+  customUIRender?: (params: CustomUIRenderParams) => React.ReactNode;
+  customGiftNoteFormUIRender?: (params: {
+    register: UseFormRegister<GiftPackForm>;
+    errors: FieldErrors<GiftPackForm>;
+    note: string;
+    textAreaCount: number;
+    onSubmit: () => void;
+    removeNote: () => void;
+    handleSubmit: UseFormHandleSubmit<GiftPackForm>;
+    translations: typeof defaultTranslations;
+  }) => React.ReactNode;
 }
 
 export const CheckoutGiftPack = ({
@@ -40,37 +77,28 @@ export const CheckoutGiftPack = ({
   modalClassName,
   modalContentClassName,
   modalTitle = 'Gift Note',
-  translations
+  maxNoteLength = 160,
+  translations,
+  customUIRender,
+  customGiftNoteFormUIRender
 }: CheckoutGiftPackProps) => {
   const [isNoteFormOpen, setIsNoteFormOpen] = useState(false);
+  const [hasNote, setHasNote] = useState({
+    title: translations?.updateNote || defaultTranslations.updateNote,
+    state: false
+  });
+  const [textAreaCount, setTextAreaCount] = useState(0);
+  const [note, setNote] = useState('');
 
   const { preOrder, hasGiftBox } = useAppSelector(
     (state: RootState) => state.checkout
   );
 
-  const defaultTranslations = {
-    addGiftPackText: 'Add Gift Pack',
-    giftPackAdded: 'Gift Pack Added',
-    removeGiftPackText: 'Remove Gift Pack',
-    informationText: 'This order will be gift packaged*',
-    updateNote: 'Update Note',
-    removeGiftNoteText: 'Remove Gift Note',
-    charactersLength: 'characters left',
-    placeholderInput:
-      'You can leave empty this area. However it will be a gift package without note.',
-    accordionTitle: 'Gift Note',
-    warningMessage: 'Ensure this field has no more than 160 characters.',
-    save: 'SAVE'
-  };
-
-  const _translations = {
-    ...defaultTranslations,
-    ...translations
-  };
+  const _translations = { ...defaultTranslations, ...translations };
 
   const giftPackFormSchema = () =>
     yup.object().shape({
-      message: yup.string().max(160, _translations.warningMessage)
+      message: yup.string().max(maxNoteLength, _translations.warningMessage)
     });
 
   if (!hasGiftBox) {
@@ -95,86 +123,137 @@ export const CheckoutGiftPack = ({
     resolver: yupResolver(giftPackFormSchema())
   });
 
-  const subscribeNote = watch('message');
-  const noteLength = subscribeNote?.length ?? 0;
-  const giftBox = preOrder?.gift_box;
-
   const onSubmit: SubmitHandler<GiftPackForm> = async (data) => {
     await addGiftPack({
-      note: noteLength > 0 ? data.message : DEFAULT_NOTE
+      note: textAreaCount > 0 ? data.message : DEFAULT_NOTE
     }).unwrap();
+
     setIsNoteFormOpen(false);
+    setHasNote((prevstate) => ({ ...prevstate, state: false }));
   };
 
   const removeGiftNote = async () => {
     await addGiftPack({ note: DEFAULT_NOTE }).unwrap();
     resetField('message');
+    setNote('');
+    setTextAreaCount(0);
   };
 
-  const formContent = (
-    <form
-      className={clsx({
-        hidden: !isNoteFormOpen
-      })}
-      onSubmit={handleSubmit(onSubmit)}
-    >
+  const formContent = customGiftNoteFormUIRender ? (
+    customGiftNoteFormUIRender({
+      register,
+      errors,
+      note,
+      textAreaCount,
+      onSubmit: () => handleSubmit(onSubmit)(),
+      removeNote: removeGiftNote,
+      handleSubmit,
+      translations: _translations
+    })
+  ) : (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {!useModal && (
+        <div className="flex justify-between mb-3">
+          <span className="text-[0.75rem] font-bold">
+            {_translations.accordionTitle}
+          </span>
+          <Button
+            appearance="ghost"
+            className="text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] select-none underline h-auto hover:bg-transparent hover:text-[#000000]"
+            onClick={(e) => {
+              e.preventDefault();
+              setHasNote((prevstate) => ({ ...prevstate, state: false }));
+            }}
+          >
+            {_translations.close}
+          </Button>
+        </div>
+      )}
       <textarea
         className={clsx(
           'w-full border border-solid p-4 placeholder:text-[0.75rem] placeholder:text-[#9c9d9d] outline-none text-[0.75rem]',
-          noteLength > 160 ? 'border-[#e85150]' : 'border-[#7b9d75]'
+          textAreaCount > maxNoteLength
+            ? 'border-[#e85150]'
+            : 'border-[#7b9d75]'
         )}
         rows={4}
+        value={note !== DEFAULT_NOTE ? note : ' '}
         placeholder={_translations.placeholderInput}
         {...register('message')}
+        data-testid="gift-note-input"
       />
       {errors.message && (
-        <span className="text-sm text-[#d72a04] text-[0.875rem]">
+        <span
+          className="text-sm text-[#d72a04] text-[0.875rem]"
+          data-testid="error-message"
+        >
           {errors.message.message}
         </span>
       )}
-      <div className="text-[0.75rem]">
-        {noteLength} / 160 {_translations.charactersLength}
-      </div>
-      <div className="flex justify-end items-end gap-2">
-        {giftBox?.note !== DEFAULT_NOTE && (
+      <div className="flex justify-between items-center mt-2">
+        <span
+          className={clsx(
+            'text-[0.75rem]',
+            textAreaCount > maxNoteLength ? 'text-[#e85150]' : 'text-[#82a27c]'
+          )}
+          data-testid="characters-length"
+        >
+          {textAreaCount}/{maxNoteLength} {_translations.charactersLength}
+        </span>
+        <div className="flex items-center gap-3">
+          {preOrder?.gift_box?.note !== DEFAULT_NOTE && (
+            <Button
+              appearance="ghost"
+              className="text-[0.75rem] underline cursor-pointer border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#e95151]"
+              onClick={removeGiftNote}
+              data-testid="remove-gift-note-button"
+            >
+              {_translations.removeGiftNoteText}
+            </Button>
+          )}
           <Button
-            appearance="ghost"
-            className="text-[0.75rem] underline cursor-pointer border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#e95151]"
-            onClick={removeGiftNote}
+            type="submit"
+            className="w-[7rem] h-[1.75rem] font-[0.75rem] uppercase"
+            data-testid="save-gift-pack-button"
           >
-            {_translations.removeGiftNoteText}
+            {_translations.save}
           </Button>
-        )}
-        <Button
-          type="submit"
-          className="w-[7rem] h-[1.75rem] font-[0.75rem] uppercase"
-          appearance="outlined"
-        >
-          {_translations.save}
-        </Button>
+        </div>
       </div>
     </form>
   );
 
   useEffect(() => {
-    if (giftBox?.note !== DEFAULT_NOTE) {
-      setValue('message', giftBox?.note);
+    if (preOrder?.gift_box?.note !== DEFAULT_NOTE) {
+      setValue('message', preOrder?.gift_box?.note);
+      setNote(preOrder?.gift_box?.note);
+      setTextAreaCount(preOrder?.gift_box?.note?.length || 0);
     }
-  }, [giftBox]);
+  }, [preOrder?.gift_box]);
+
+  useEffect(() => {
+    const subscription = watch(({ message }) => {
+      setNote(message);
+      setTextAreaCount(message?.length || 0);
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch]);
 
-  return (
+  const defaultRender = () => (
     <div className={className}>
       <div className="flex justify-between items-center py-2 px-5">
         <div className="flex gap-2 items-center">
           <Icon name="giftbox" size={16} className="fill-[#000000]" />
           <span className="text-[1rem] font-light">
-            {giftBox ? (
+            {preOrder?.gift_box ? (
               _translations.giftPackAdded
             ) : (
               <Button
                 appearance="ghost"
                 className="cursor-pointer border-0 px-0 py-0 text-[1rem] font-light h-auto hover:bg-transparent hover:text-[#000000]"
                 onClick={() => addGiftPack({ note: DEFAULT_NOTE })}
+                data-testid="add-gift-pack-button"
               >
                 {_translations.addGiftPackText}
               </Button>
@@ -186,13 +265,15 @@ export const CheckoutGiftPack = ({
           className={clsx(
             'text-[0.75rem] underline cursor-pointer border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#e95151]',
             {
-              hidden: !giftBox
+              hidden: !preOrder?.gift_box
             }
           )}
           onClick={async () => {
             await removeGiftPack().unwrap();
             setIsNoteFormOpen(false);
+            setHasNote((prevstate) => ({ ...prevstate, state: false }));
           }}
+          data-testid="remove-gift-pack-button"
         >
           {_translations.removeGiftPackText}
         </Button>
@@ -201,20 +282,30 @@ export const CheckoutGiftPack = ({
         className={clsx(
           'flex flex-col gap-2 bg-[#f7f7f7] text-[#58585a] text-[0.875rem] py-2 px-5',
           {
-            hidden: !giftBox
+            hidden: !preOrder?.gift_box
           }
         )}
       >
         <div className="flex justify-between items-center">
-          <span>{_translations.informationText}</span>
+          <span data-testid="information-text">
+            {_translations.informationText}
+          </span>
           <Icon name="giftbox" size={14} className="fill-[#58585a]" />
         </div>
         <div className="flex justify-between items-center gap-8">
-          <span>{giftBox?.note !== DEFAULT_NOTE ? giftBox?.note : ''}</span>
+          <span data-testid="saved-gift-note">
+            {preOrder?.gift_box?.note !== DEFAULT_NOTE
+              ? preOrder?.gift_box?.note
+              : ''}
+          </span>
           <Button
             appearance="ghost"
             className="underline cursor-pointer flex-shrink-0 border-0 px-0 py-0 h-auto hover:bg-transparent hover:text-[#000000]"
-            onClick={() => setIsNoteFormOpen(true)}
+            onClick={() => {
+              setIsNoteFormOpen(true);
+              setHasNote((prevstate) => ({ ...prevstate, state: true }));
+            }}
+            data-testid="update-gift-pack-button"
           >
             {_translations.updateNote}
           </Button>
@@ -229,15 +320,17 @@ export const CheckoutGiftPack = ({
             'w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto',
             modalClassName
           )}
-          open={isNoteFormOpen}
-          setOpen={setIsNoteFormOpen}
+          open={hasNote.state}
+          setOpen={(state) =>
+            setHasNote((prevstate) => ({ ...prevstate, state }))
+          }
         >
           <div className={twMerge('px-6 py-4', modalContentClassName)}>
             {formContent}
           </div>
         </Modal>
       ) : (
-        <div className={clsx('py-2 px-5', { hidden: !isNoteFormOpen })}>
+        <div className={clsx('py-2 px-5', { hidden: !hasNote.state })}>
           <Accordion
             title={_translations.accordionTitle}
             titleClassName="text-[0.75rem]"
@@ -249,4 +342,22 @@ export const CheckoutGiftPack = ({
       )}
     </div>
   );
+
+  return customUIRender
+    ? customUIRender({
+        hasGiftPack: !!preOrder?.gift_box,
+        hasNote,
+        note,
+        textAreaCount,
+        onAddGiftPack: () => addGiftPack({ note: DEFAULT_NOTE }),
+        onRemoveGiftPack: () => removeGiftPack().unwrap(),
+        onAddNote: () => {
+          setIsNoteFormOpen(true);
+          setHasNote((prevstate) => ({ ...prevstate, state: true }));
+        },
+        onRemoveNote: removeGiftNote,
+        formContent,
+        translations: _translations
+      })
+    : defaultRender();
 };