Basket Gift Package

The BasketGiftPack component provides a customizable UI for adding a gift package and optional gift note for individual basket items in the shopping cart. It supports fully custom rendering via customUIRender and customGiftNoteFormUIRender.

Installation Method

You can use the following command to install the extension with the latest plugins:

npx @akinon/projectzero@latest --plugins

Props

Prop	Type	Required	Description
basketItem	object	Yes	Product information to be gift packaged
useModal	boolean	Optional	Determines if the gift form is shown in a modal.
modalClassName	string	Optional	Custom class for the modal container.
modalTitle	string	Optional	Title text for the modal.
modalContentClassName	string	Optional	Custom class for the modal's content area.
customUIRender	React.ReactNode	Optional	Function to customize the overall gift pack rendering
customGiftNoteFormUIRender	React.ReactNode	Optional	Function to customize the gift note form rendering.

CustomUIRender Parameters

Parameter	Type	Description
hasGiftPack	boolean	Whether a gift pack is added.
hasNote	{ state: boolean, title: string }	Note state and label.
note	string	Current note text.
onAddGiftPack	() => void	Callback to add a gift pack.
onRemoveGiftPack	() => void	Callback to remove the gift pack.
onAddNote	() => void	Callback to show note entry UI.
onRemoveNote	() => void	Handler for removing the note
formContent	React.ReactNode	Rendered content of the gift note form.
translations	Record<string, string>	Translated texts for UI labels.

customGiftNoteFormUIRender Parameters

Parameter	Type	Description
register	any	React Hook Form register method.
errors	any	Validation errors object.
note	string	Gift note text value.
textAreaCount	number	Current note character count.
onSubmit	(data: any) => void	Form submit handler.
removeNote	() => void	Callback to remove the note.
handleSubmit	any	React Hook Form submit handler.

Usage Example

Default Usage

import PluginModule, { Component } from '@akinon/next/components/plugin-module';

<PluginModule
   component={Component.BasketGiftPack}
   props={{ basketItem }}
/>

Customizing Gift Pack

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>}
        </div>
      </>
    )
  }}
/>;

Customizing Gift Note Form

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>
    )
  }}
/>;