@akinon/pz-basket-gift-pack 1.103.0 → 1.104.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @akinon/pz-basket-gift-pack
 
+## 1.104.0
+
+### Minor Changes
+
+- 2ba89b3: ZERO-3361: Refactor basket gift pack component
+
 ## 1.103.0
 
 ## 1.102.0

package/README.md

@@ -19,3 +19,143 @@ npx @akinon/projectzero@latest --plugins
 | 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. |
+| customUIRender | `React.ReactNode` | Optional function to fully customize the gift pack rendering. Receives hasGiftPack, hasNote, note, textAreaCount, onAddGiftPack, onRemoveGiftPack, onAddNote, onRemoveNote, formContent and translations props. |
+| customGiftNoteFormUIRender | `React.ReactNode` | Optional function to fully customize the form rendering. Receives register, errors, note, textAreaCount, onSubmit, removeNote and handleSubmit props. |
+
+### Customizing Gift Pack
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.BasketGiftPack}
+  props={{
+    basketItem,
+    customUIRender: ({
+      hasGiftPack,
+      hasNote,
+      onAddGiftPack,
+      onRemoveGiftPack,
+      onAddNote,
+      formContent,
+      translations
+    }) => (
+      <>
+        <div className="flex gap-4">
+          <div className="flex items-center gap-2">
+            <Icon
+              name="giftbox"
+              size={15}
+              className={clsx(
+                hasGiftPack ? 'text-[#e85150]' : 'text-[#000000]'
+              )}
+            />
+            {hasGiftPack ? (
+              <span className="text-[0.75rem]">
+                {translations.giftPackAdded}
+              </span>
+            ) : (
+              <Button
+                appearance="ghost"
+                className="text-[#000000] cursor-pointer underline border-0 px-0 py-0 text-[0.75rem] h-auto hover:bg-transparent hover:text-[#000000]"
+                onClick={onAddGiftPack}
+                data-testid="add-basket-gift-pack"
+              >
+                {translations.addGiftPack}
+              </Button>
+            )}
+          </div>
+
+          {hasGiftPack && (
+            <>
+              <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={onAddNote}
+                data-testid="add-basket-gift-pack-note"
+              >
+                {hasNote.title}
+              </Button>
+              <Button
+                appearance="ghost"
+                className={clsx(
+                  'text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] underline h-auto hover:bg-transparent hover:text-[#000000]',
+                  {
+                    hidden: !hasGiftPack
+                  }
+                )}
+                onClick={onRemoveGiftPack}
+                data-testid="remove-basket-gift-pack"
+              >
+                {translations.removeGiftPack}
+              </Button>
+            </>
+          )}
+        </div>
+
+        <div className="w-full">
+          {hasNote.state ? <div className="mt-4">{formContent}</div> : null}
+        </div>
+      </>
+    )
+  }}
+/>;
+```
+
+### Customizing Gift Note Form
+
+```javascript
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+<PluginModule
+  component={Component.BasketGiftPack}
+  props={{
+    basketItem,
+    customGiftNoteFormUIRender: ({
+      register,
+      errors,
+      note,
+      textAreaCount,
+      onSubmit,
+      removeNote,
+      handleSubmit
+    }) => (
+      <div className="bg-gray-100 p-4 rounded-md shadow-lg">
+        <h4 className="text-lg font-semibold mb-2">🎁 Add Your Note</h4>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <textarea
+            className="w-full border border-gray-300 p-2"
+            {...register('message')}
+            placeholder="Mesajını yaz..."
+            rows={5}
+            value={note}
+          />
+          {errors.message && (
+            <p className="text-red-500 text-sm">{errors.message.message}</p>
+          )}
+          <div className="flex justify-between items-center mt-2">
+            <span className="text-sm text-gray-500">
+              {textAreaCount}/ 160 characters
+            </span>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={removeNote}
+                className="text-sm underline"
+              >
+                Delete Note
+              </button>
+              <button
+                type="submit"
+                className="bg-black text-white px-3 py-1 text-sm rounded"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    )
+  }}
+/>;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-basket-gift-pack",
-  "version": "1.103.0",
+  "version": "1.104.0",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -4,38 +4,68 @@ import {
 } from './endpoints';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { useForm, SubmitHandler } from 'react-hook-form';
+import {
+  useForm,
+  SubmitHandler,
+  UseFormRegister,
+  FieldErrors,
+  UseFormHandleSubmit
+} from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as yup from 'yup';
 import { useEffect, useState } from 'react';
 import { Button, Icon, Modal } from '@akinon/next/components';
 import { BasketItem as BasketItemType } from '@akinon/next/types';
 
+const defaultTranslations = {
+  placeholderInput:
+    'You can leave this area empty. However it will be a gift package without note.',
+  warningMessage: 'Ensure this field has no more than 160 characters.',
+  addNote: 'Add Note',
+  addGiftNote: 'Add Gift Note',
+  changeNote: 'Change Note',
+  giftPackAdded: 'Gift Pack Added',
+  addGiftPack: 'Add Gift Pack',
+  removeGiftPack: 'Remove Gift Pack',
+  charactersLength: 'characters left',
+  removeNote: 'Remove Note',
+  save: 'SAVE',
+  close: 'Close'
+};
+
 interface GiftPackForm {
   message: string;
 }
-
+interface CustomRenderParams {
+  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 Props {
   basketItem: BasketItemType;
   useModal?: boolean;
   modalTitle?: string;
   modalClassName?: string;
   modalContentClassName?: string;
-  translations?: {
-    placeholderInput?: string;
-    warningMessage?: string;
-    addNote?: string;
-    addGiftNote?: string;
-    changeNote?: string;
-    giftPackAdded?: string;
-    addGiftPack?: string;
-    removeGiftPack?: string;
-    charactersLength?: string;
-    removeNote?: string;
-    save?: string;
-    close?: string;
-  };
+  translations?: Partial<typeof defaultTranslations>;
   className?: string;
+  customUIRender?: (params: CustomRenderParams) => React.ReactNode;
+  customGiftNoteFormUIRender?: (params: {
+    register: UseFormRegister<GiftPackForm>;
+    errors: FieldErrors<GiftPackForm>;
+    note: string;
+    textAreaCount: number;
+    onSubmit: () => void;
+    removeNote: () => void;
+    handleSubmit: UseFormHandleSubmit<GiftPackForm>;
+  }) => React.ReactNode;
 }
 
 export const BasketGiftPack = ({
@@ -45,29 +75,11 @@ export const BasketGiftPack = ({
   useModal = false,
   modalTitle = 'Gift Note',
   modalClassName,
-  modalContentClassName
+  modalContentClassName,
+  customUIRender,
+  customGiftNoteFormUIRender
 }: Props) => {
-  const defaultTranslations = {
-    placeholderInput:
-      'You can leave this area empty. However it will be a gift package without note.',
-    warningMessage: 'Ensure this field has no more than 160 characters.',
-    addNote: 'Add Note',
-    addGiftNote: 'Add Gift Note',
-    changeNote: 'Change Note',
-    giftPackAdded: 'Gift Pack Added',
-    addGiftPack: 'Add Gift Pack',
-    removeGiftPack: 'Remove Gift Pack',
-    charactersLength: 'characters left',
-    removeNote: 'Remove Note',
-    save: 'SAVE',
-    close: 'Close'
-  };
-
-  const _translations = {
-    ...defaultTranslations,
-    ...translations
-  };
-
+  const _translations = { ...defaultTranslations, ...translations };
   const [addGiftPackage] = useAddGiftPackageMutation();
   const [removeGiftPackage] = useRemoveGiftPackageMutation();
   const [hasGiftPack, setHasGiftPack] = useState(false);
@@ -79,10 +91,9 @@ export const BasketGiftPack = ({
   const [note, setNote] = useState('');
   const defaultMessage = 'NO-GIFT-NOTE';
 
-  const giftPackFormSchema = () =>
-    yup.object().shape({
-      message: yup.string().max(160, _translations.warningMessage)
-    });
+  const schema = yup.object().shape({
+    message: yup.string().max(160, _translations.warningMessage)
+  });
 
   const {
     register,
@@ -90,54 +101,83 @@ export const BasketGiftPack = ({
     handleSubmit,
     formState: { errors }
   } = useForm<GiftPackForm>({
-    resolver: yupResolver(giftPackFormSchema())
+    resolver: yupResolver(schema)
   });
 
   const onSubmit: SubmitHandler<GiftPackForm> = async (data) => {
-    addGiftPackage({ id: basketItem.id, message: data.message })
-      .unwrap()
-      .then(() => {
-        setHasNote((prevstate) => ({ ...prevstate, state: false }));
-        changeNoteTitle(data.message);
-      });
+    await addGiftPackage({ id: basketItem.id, message: data.message }).unwrap();
+    setHasNote({ ...hasNote, state: false });
+    changeNoteTitle(data.message);
   };
 
-  const addGiftPack = () => {
-    addGiftPackage({ id: basketItem.id, message: defaultMessage })
-      .unwrap()
-      .then(() => {
-        setHasGiftPack(true);
-        setHasNote((prevstate) => ({ ...prevstate, state: false }));
-      });
+  const addGiftPack = async () => {
+    await addGiftPackage({
+      id: basketItem.id,
+      message: defaultMessage
+    }).unwrap();
+    setHasGiftPack(true);
+    setHasNote({ ...hasNote, state: false });
   };
 
   const removeGiftPack = () => {
     removeGiftPackage({ id: basketItem.id });
     setHasGiftPack(false);
-    setHasNote((prevstate) => ({ ...prevstate, state: false }));
+    setHasNote({ ...hasNote, state: false });
   };
 
   const removeNote = () => {
     addGiftPackage({ id: basketItem.id, message: defaultMessage });
-    setHasNote((prevstate) => ({ ...prevstate, state: false }));
+    setHasNote({ ...hasNote, state: false });
     changeNoteTitle(defaultMessage);
   };
 
-  const changeNoteTitle = (value) => {
-    if (value !== defaultMessage) {
-      setHasNote((prevstate) => ({
-        ...prevstate,
-        title: _translations.changeNote
-      }));
-    } else {
-      setHasNote((prevstate) => ({
-        ...prevstate,
-        title: _translations.addNote
-      }));
-    }
+  const changeNoteTitle = (value: string) => {
+    const title =
+      value !== defaultMessage
+        ? _translations.changeNote
+        : _translations.addNote;
+    setHasNote((prev) => ({ ...prev, title }));
   };
 
-  const formContent = (
+  useEffect(() => {
+    for (const [key, value] of Object.entries(basketItem.attributes)) {
+      if (value === '') {
+        setHasGiftPack(false);
+        setHasNote({ ...hasNote, state: false });
+        setNote('');
+        setTextAreaCount(0);
+        return;
+      }
+
+      if (key) {
+        changeNoteTitle(value);
+        setNote(value);
+        setHasGiftPack(true);
+        setTextAreaCount(value === defaultMessage ? 0 : value.length);
+      }
+    }
+  }, [basketItem.attributes]);
+
+  useEffect(() => {
+    const subscription = watch(({ message }) => {
+      setNote(message);
+      setTextAreaCount(message.length);
+    });
+
+    return () => subscription.unsubscribe();
+  }, [watch]);
+
+  const formContent = customGiftNoteFormUIRender ? (
+    customGiftNoteFormUIRender({
+      register,
+      errors,
+      note,
+      textAreaCount,
+      onSubmit: () => handleSubmit(onSubmit)(),
+      removeNote,
+      handleSubmit
+    })
+  ) : (
     <form onSubmit={handleSubmit(onSubmit)}>
       {!useModal && (
         <div className="flex justify-between mb-3">
@@ -149,7 +189,7 @@ export const BasketGiftPack = ({
             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 }));
+              setHasNote({ ...hasNote, state: false });
             }}
           >
             {_translations.close}
@@ -157,27 +197,26 @@ export const BasketGiftPack = ({
         </div>
       )}
       <textarea
-        className="w-full border border-solid border-[#4a4f53] p-4 placeholder:text-[0.75rem] placeholder:text-[#c8c9c8] outline-none text-[0.75rem]"
+        className="w-full border border-[#4a4f53] p-4 text-[0.75rem] placeholder:text-[#c8c9c8]"
         rows={7}
-        name="message"
-        value={note !== defaultMessage ? note : ' '}
         placeholder={_translations.placeholderInput}
         {...register('message')}
+        value={note !== defaultMessage ? note : ''}
         data-testid="basket-gift-pack-note-input"
       />
       {errors.message && (
         <span className="text-sm text-[#d72a04]">{errors.message.message}</span>
       )}
-      <div className="flex justify-between items-center mt-2">
+      <div className="flex justify-between mt-2 items-center">
         <span
           className={clsx(
-            'text-[0.75rem] ',
+            'text-[0.75rem]',
             textAreaCount > 160 ? 'text-[#e85150]' : 'text-[#82a27c]'
           )}
         >
           {textAreaCount}/160 {_translations.charactersLength}
         </span>
-        <div className="flex items-center gap-3">
+        <div className="flex gap-3 items-center">
           <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]"
@@ -198,44 +237,10 @@ export const BasketGiftPack = ({
     </form>
   );
 
-  useEffect(() => {
-    for (const [key, value] of Object.entries(basketItem.attributes)) {
-      if (value === '') {
-        setHasGiftPack(false);
-        setHasNote((prevstate) => ({ ...prevstate, state: false }));
-        setNote('');
-        setTextAreaCount(0);
-        return;
-      }
-
-      if (key) {
-        changeNoteTitle(value);
-        setNote(value);
-        setHasGiftPack(true);
-        setTextAreaCount(value?.length);
-      }
-    }
-  }, [basketItem.attributes]);
-
-  useEffect(() => {
-    const subscription = watch(({ message }) => {
-      setNote(message);
-      setTextAreaCount(message.length);
-    });
-
-    return () => subscription.unsubscribe();
-  }, [watch]);
-
-  return (
+  const defaultRender = () => (
     <div
       className={twMerge(
-        clsx(
-          'mt-4 sm:mt-0',
-          {
-            'sm:mt-8': hasNote.state
-          },
-          className
-        )
+        clsx('mt-4 sm:mt-0', { 'sm:mt-8': hasNote.state }, className)
       )}
     >
       <div className="flex gap-4">
@@ -245,7 +250,6 @@ export const BasketGiftPack = ({
             size={15}
             className={clsx(hasGiftPack ? 'text-[#e85150]' : 'text-[#000000]')}
           />
-
           {hasGiftPack ? (
             <span className="text-[0.75rem]">
               {_translations.giftPackAdded}
@@ -261,36 +265,34 @@ export const BasketGiftPack = ({
             </Button>
           )}
         </div>
-        <Button
-          appearance="ghost"
-          className={clsx(
-            'text-[#000000] underline cursor-pointer border-0 px-0 py-0 text-[0.75rem] h-auto hover:bg-transparent hover:text-[#000000]',
-            {
-              hidden: !hasGiftPack
-            }
-          )}
-          onClick={() =>
-            setHasNote((prevstate) => ({ ...prevstate, state: true }))
-          }
-          data-testid="add-basket-gift-pack-note"
-        >
-          {hasNote.title}
-        </Button>
 
-        <Button
-          appearance="ghost"
-          className={clsx(
-            'text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] underline h-auto hover:bg-transparent hover:text-[#000000]',
-            {
-              hidden: !hasGiftPack
-            }
-          )}
-          onClick={removeGiftPack}
-          data-testid="remove-basket-gift-pack"
-        >
-          {_translations.removeGiftPack}
-        </Button>
+        {hasGiftPack && (
+          <>
+            <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={() => setHasNote({ ...hasNote, state: true })}
+              data-testid="add-basket-gift-pack-note"
+            >
+              {hasNote.title}
+            </Button>
+            <Button
+              appearance="ghost"
+              className={clsx(
+                'text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] underline h-auto hover:bg-transparent hover:text-[#000000]',
+                {
+                  hidden: !hasGiftPack
+                }
+              )}
+              onClick={removeGiftPack}
+              data-testid="remove-basket-gift-pack"
+            >
+              {_translations.removeGiftPack}
+            </Button>
+          </>
+        )}
       </div>
+
       {useModal ? (
         <Modal
           portalId="basket-gift-pack-modal"
@@ -300,23 +302,30 @@ export const BasketGiftPack = ({
             modalClassName
           )}
           open={hasNote.state}
-          setOpen={(state) =>
-            setHasNote((prevstate) => ({ ...prevstate, state }))
-          }
+          setOpen={(state) => setHasNote((prev) => ({ ...prev, state }))}
         >
           <div className={twMerge('px-6 py-4', modalContentClassName)}>
             {formContent}
           </div>
         </Modal>
-      ) : (
-        <div
-          className={clsx('mt-4', {
-            hidden: !hasNote.state
-          })}
-        >
-          {formContent}
-        </div>
-      )}
+      ) : hasNote.state ? (
+        <div className="mt-4">{formContent}</div>
+      ) : null}
     </div>
   );
+
+  return customUIRender
+    ? customUIRender({
+        hasGiftPack,
+        hasNote,
+        note,
+        textAreaCount,
+        onAddGiftPack: addGiftPack,
+        onRemoveGiftPack: removeGiftPack,
+        onAddNote: () => setHasNote({ ...hasNote, state: true }),
+        onRemoveNote: removeNote,
+        formContent,
+        translations: _translations
+      })
+    : defaultRender();
 };