@akinon/pz-basket-gift-pack 1.99.0-rc.70 → 1.99.0-snapshot-ZERO-3640-20250919140935

package/CHANGELOG.md

@@ -1,27 +1,6 @@
 # @akinon/pz-basket-gift-pack
 
-## 1.99.0-rc.70
-
-## 1.99.0-rc.69
-
-## 1.99.0-rc.68
-
-## 1.99.0-rc.67
-
-## 1.99.0-rc.66
-
-### Minor Changes
-
-- 72bfcbf2: ZERO-3347: Manage save button disable status
-- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 2ba89b3c: ZERO-3361: Refactor basket gift pack component
-- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
-- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
-- e974d8e8: ZERO-3406: Fix rc build
-- 7eb51ca9: ZERO-3424 :Update package versions
-- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
-- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
-- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+## 1.99.0-snapshot-ZERO-3640-20250919140935
 
 ## 1.98.0
 

package/README.md

@@ -19,143 +19,3 @@ 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.99.0-rc.70",
+  "version": "1.99.0-snapshot-ZERO-3640-20250919140935",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/index.tsx

@@ -4,69 +4,38 @@ import {
 } from './endpoints';
 import clsx from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import {
-  useForm,
-  SubmitHandler,
-  UseFormRegister,
-  FieldErrors,
-  UseFormHandleSubmit
-} from 'react-hook-form';
+import { useForm, SubmitHandler } 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',
-  saving: 'SAVING...',
-  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?: Partial<typeof defaultTranslations>;
+  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;
+  };
   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 = ({
@@ -76,13 +45,30 @@ export const BasketGiftPack = ({
   useModal = false,
   modalTitle = 'Gift Note',
   modalClassName,
-  modalContentClassName,
-  customUIRender,
-  customGiftNoteFormUIRender
+  modalContentClassName
 }: Props) => {
-  const _translations = { ...defaultTranslations, ...translations };
-  const [addGiftPackage, { isLoading: isAddingGiftPackage }] =
-    useAddGiftPackageMutation();
+  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 [addGiftPackage] = useAddGiftPackageMutation();
   const [removeGiftPackage] = useRemoveGiftPackageMutation();
   const [hasGiftPack, setHasGiftPack] = useState(false);
   const [hasNote, setHasNote] = useState({
@@ -93,9 +79,10 @@ export const BasketGiftPack = ({
   const [note, setNote] = useState('');
   const defaultMessage = 'NO-GIFT-NOTE';
 
-  const schema = yup.object().shape({
-    message: yup.string().max(160, _translations.warningMessage)
-  });
+  const giftPackFormSchema = () =>
+    yup.object().shape({
+      message: yup.string().max(160, _translations.warningMessage)
+    });
 
   const {
     register,
@@ -103,83 +90,54 @@ export const BasketGiftPack = ({
     handleSubmit,
     formState: { errors }
   } = useForm<GiftPackForm>({
-    resolver: yupResolver(schema)
+    resolver: yupResolver(giftPackFormSchema())
   });
 
   const onSubmit: SubmitHandler<GiftPackForm> = async (data) => {
-    await addGiftPackage({ id: basketItem.id, message: data.message }).unwrap();
-    setHasNote({ ...hasNote, state: false });
-    changeNoteTitle(data.message);
+    addGiftPackage({ id: basketItem.id, message: data.message })
+      .unwrap()
+      .then(() => {
+        setHasNote((prevstate) => ({ ...prevstate, state: false }));
+        changeNoteTitle(data.message);
+      });
   };
 
-  const addGiftPack = async () => {
-    await addGiftPackage({
-      id: basketItem.id,
-      message: defaultMessage
-    }).unwrap();
-    setHasGiftPack(true);
-    setHasNote({ ...hasNote, state: false });
+  const addGiftPack = () => {
+    addGiftPackage({ id: basketItem.id, message: defaultMessage })
+      .unwrap()
+      .then(() => {
+        setHasGiftPack(true);
+        setHasNote((prevstate) => ({ ...prevstate, state: false }));
+      });
   };
 
   const removeGiftPack = () => {
     removeGiftPackage({ id: basketItem.id });
     setHasGiftPack(false);
-    setHasNote({ ...hasNote, state: false });
+    setHasNote((prevstate) => ({ ...prevstate, state: false }));
   };
 
   const removeNote = () => {
     addGiftPackage({ id: basketItem.id, message: defaultMessage });
-    setHasNote({ ...hasNote, state: false });
+    setHasNote((prevstate) => ({ ...prevstate, state: false }));
     changeNoteTitle(defaultMessage);
   };
 
-  const changeNoteTitle = (value: string) => {
-    const title =
-      value !== defaultMessage
-        ? _translations.changeNote
-        : _translations.addNote;
-    setHasNote((prev) => ({ ...prev, title }));
-  };
-
-  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);
-      }
+  const changeNoteTitle = (value) => {
+    if (value !== defaultMessage) {
+      setHasNote((prevstate) => ({
+        ...prevstate,
+        title: _translations.changeNote
+      }));
+    } else {
+      setHasNote((prevstate) => ({
+        ...prevstate,
+        title: _translations.addNote
+      }));
     }
-  }, [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
-    })
-  ) : (
+  const formContent = (
     <form onSubmit={handleSubmit(onSubmit)}>
       {!useModal && (
         <div className="flex justify-between mb-3">
@@ -191,7 +149,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({ ...hasNote, state: false });
+              setHasNote((prevstate) => ({ ...prevstate, state: false }));
             }}
           >
             {_translations.close}
@@ -199,26 +157,27 @@ export const BasketGiftPack = ({
         </div>
       )}
       <textarea
-        className="w-full border border-[#4a4f53] p-4 text-[0.75rem] placeholder:text-[#c8c9c8]"
+        className="w-full border border-solid border-[#4a4f53] p-4 placeholder:text-[0.75rem] placeholder:text-[#c8c9c8] outline-none text-[0.75rem]"
         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 mt-2 items-center">
+      <div className="flex justify-between items-center mt-2">
         <span
           className={clsx(
-            'text-[0.75rem]',
+            'text-[0.75rem] ',
             textAreaCount > 160 ? 'text-[#e85150]' : 'text-[#82a27c]'
           )}
         >
           {textAreaCount}/160 {_translations.charactersLength}
         </span>
-        <div className="flex gap-3 items-center">
+        <div className="flex items-center gap-3">
           <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]"
@@ -231,24 +190,52 @@ export const BasketGiftPack = ({
             type="submit"
             className="w-28 h-7 font-medium uppercase"
             data-testid="basket-gift-pack-note-save-button"
-            disabled={
-              isAddingGiftPackage ||
-              textAreaCount === 0 ||
-              note.trim() === '' ||
-              note === defaultMessage
-            }
           >
-            {isAddingGiftPackage ? _translations.saving : _translations.save}
+            {_translations.save}
           </Button>
         </div>
       </div>
     </form>
   );
 
-  const defaultRender = () => (
+  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 (
     <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">
@@ -258,6 +245,7 @@ export const BasketGiftPack = ({
             size={15}
             className={clsx(hasGiftPack ? 'text-[#e85150]' : 'text-[#000000]')}
           />
+
           {hasGiftPack ? (
             <span className="text-[0.75rem]">
               {_translations.giftPackAdded}
@@ -273,34 +261,36 @@ 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>
 
-        {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>
-          </>
-        )}
+        <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"
@@ -310,30 +300,23 @@ export const BasketGiftPack = ({
             modalClassName
           )}
           open={hasNote.state}
-          setOpen={(state) => setHasNote((prev) => ({ ...prev, state }))}
+          setOpen={(state) =>
+            setHasNote((prevstate) => ({ ...prevstate, state }))
+          }
         >
           <div className={twMerge('px-6 py-4', modalContentClassName)}>
             {formContent}
           </div>
         </Modal>
-      ) : hasNote.state ? (
-        <div className="mt-4">{formContent}</div>
-      ) : null}
+      ) : (
+        <div
+          className={clsx('mt-4', {
+            hidden: !hasNote.state
+          })}
+        >
+          {formContent}
+        </div>
+      )}
     </div>
   );
-
-  return customUIRender
-    ? customUIRender({
-        hasGiftPack,
-        hasNote,
-        note,
-        textAreaCount,
-        onAddGiftPack: addGiftPack,
-        onRemoveGiftPack: removeGiftPack,
-        onAddNote: () => setHasNote({ ...hasNote, state: true }),
-        onRemoveNote: removeNote,
-        formContent,
-        translations: _translations
-      })
-    : defaultRender();
 };