@akinon/pz-checkout-gift-pack 2.0.0-beta.2 → 2.0.0-beta.21

package/CHANGELOG.md

@@ -1,18 +1,134 @@
 # @akinon/pz-checkout-gift-pack
 
-## 2.0.0-beta.2
+## 2.0.0-beta.21
 
-## 2.0.0-beta.1
+## 2.0.0-beta.20
+
+## 1.126.0
+
+## 1.125.2
+
+## 1.125.1
+
+## 1.125.0
+
+## 1.124.0
+
+## 1.123.0
+
+## 1.122.0
+
+## 1.121.0
+
+## 1.120.0
+
+## 1.119.0
+
+## 1.118.0
+
+## 1.117.0
+
+## 1.116.0
+
+## 1.115.0
+
+## 1.114.0
+
+## 1.113.0
+
+## 1.112.0
+
+## 1.111.0
+
+## 1.110.0
+
+## 1.109.0
+
+## 1.108.0
+
+## 1.107.0
+
+## 1.106.0
+
+### Minor Changes
+
+- 8bc82f0: ZERO-3405: Update Readme
+
+## 1.105.0
+
+## 1.104.0
+
+## 1.103.0
+
+## 1.102.0
+
+## 1.101.0
+
+## 1.100.0
+
+## 1.99.0
+
+### Minor Changes
+
+- d58538b: ZERO-3638: Enhance RC pipeline: add fetch, merge, and pre-release setup with conditional commit
+
+## 1.98.0
+
+## 1.97.0
+
+## 1.96.0
+
+## 1.95.0
+
+## 1.94.0
+
+## 1.93.0
+
+## 1.92.0
+
+## 1.91.0
+
+## 1.90.0
 
 ### Minor Changes
 
-- ZERO-3091: Upgrade Next.js to v15 and React to v19
+- ec9ff89: ZERO-3368: Add customization to package
+
+## 1.89.0
+
+## 1.88.0
+
+### Minor Changes
+
+- ce64181: ZERO-3333: Add data-testid for checkout gift pack
+
+## 1.87.0
+
+## 1.86.0
+
+## 1.85.0
+
+## 1.84.0
+
+### Minor Changes
+
+- 624a4eb: ZERO-3276: Update installation instructions across multiple README files to standardize format and improve clarity
+
+## 1.83.0
+
+## 1.82.0
+
+## 1.81.0
+
+## 1.80.0
+
+## 1.79.0
 
-## 2.0.0-beta.0
+## 1.78.0
 
-### Major Changes
+## 1.77.0
 
-- be6c09d: ZERO-3114: Create beta version.
+## 1.76.0
 
 ## 1.75.0
 

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,124 @@ 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. |
+
+### Default Usage
+
+```js
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.CheckoutGiftPack}
+  props={{
+    className: 'flex flex-col w-full mb-4 border border-solid border-gray-400'
+  }}
+/>;
+```
+
+### Customized sample code
+
+```js
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<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>
+    )
+  }}
+/>;
+```

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@akinon/pz-checkout-gift-pack",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.21",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2"
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "typescript": "^4.7.4"
   }
 }

package/src/index.tsx

@@ -1,37 +1,76 @@
+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 DEFAULT_NOTE = 'NO-GIFT-MESSAGE';
+
+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,49 +79,32 @@ 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) {
-    console.warn(
-      'Gift box for checkout is disabled. Please enable it from Omnitron.'
-    );
-    return null;
-  }
-
   const [addGiftPack] = useAddGiftPackMutation();
   const [removeGiftPack] = useRemoveGiftPackMutation();
-  const DEFAULT_NOTE = 'NO-GIFT-MESSAGE';
 
   const {
     register,
@@ -92,89 +114,147 @@ export const CheckoutGiftPack = ({
     setValue,
     formState: { errors }
   } = useForm<GiftPackForm>({
-    resolver: yupResolver(giftPackFormSchema())
+    resolver: yupResolver(giftPackFormSchema()) as any
   });
 
-  const subscribeNote = watch('message');
-  const noteLength = subscribeNote?.length ?? 0;
-  const giftBox = preOrder?.gift_box;
+  useEffect(() => {
+    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);
+    }
+  }, [preOrder?.gift_box]);
+
+  useEffect(() => {
+    const subscription = watch(({ message }) => {
+      setNote(message);
+      setTextAreaCount(message?.length || 0);
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch]);
+
+  if (!hasGiftBox) {
+    console.warn(
+      'Gift box for checkout is disabled. Please enable it from Omnitron.'
+    );
+    return null;
+  }
 
   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]">
-          {errors.message.message}
+        <span
+          className="text-sm text-[#d72a04] text-[0.875rem]"
+          data-testid="error-message"
+        >
+          {String(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);
-    }
-  }, [giftBox]);
-
-  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 +266,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 +283,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 +321,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 +343,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();
 };