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

Last updated

Was this helpful?