# 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`.

## <mark style="color:red;">Installation Method</mark>

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

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">Props</mark>

<table><thead><tr><th width="177.40625">Prop</th><th width="125.63671875">Type</th><th width="115.640625">Required</th><th>Description</th></tr></thead><tbody><tr><td>basketItem</td><td>object</td><td>Yes</td><td>Product information to be gift packaged</td></tr><tr><td>useModal</td><td>boolean</td><td>Optional</td><td>Determines if the gift form is shown in a modal.</td></tr><tr><td>modalClassName</td><td>string</td><td>Optional</td><td>Custom class for the modal container.</td></tr><tr><td>modalTitle</td><td>string</td><td>Optional</td><td>Title text for the modal.</td></tr><tr><td>modalContentClassName</td><td>string</td><td>Optional</td><td>Custom class for the modal's content area.</td></tr><tr><td>customUIRender</td><td>React.ReactNode</td><td>Optional</td><td>Function to customize the overall gift pack rendering</td></tr><tr><td>customGiftNoteFormUIRender</td><td>React.ReactNode</td><td>Optional</td><td>Function to customize the gift note form rendering.</td></tr></tbody></table>

### <mark style="color:red;">CustomUIRender Parameters</mark>

<table><thead><tr><th width="168.06640625">Parameter</th><th width="237.3828125">Type</th><th>Description</th></tr></thead><tbody><tr><td>hasGiftPack</td><td>boolean</td><td>Whether a gift pack is added.</td></tr><tr><td>hasNote</td><td>{ state: boolean, title: string }</td><td>Note state and label.</td></tr><tr><td>note</td><td>string</td><td>Current note text.</td></tr><tr><td>onAddGiftPack</td><td>() => void</td><td>Callback to add a gift pack.</td></tr><tr><td>onRemoveGiftPack</td><td>() => void</td><td>Callback to remove the gift pack.</td></tr><tr><td>onAddNote</td><td>() => void</td><td>Callback to show note entry UI.</td></tr><tr><td>onRemoveNote</td><td>() => void</td><td>Handler for removing the note</td></tr><tr><td>formContent</td><td>React.ReactNode</td><td>Rendered content of the gift note form.</td></tr><tr><td>translations</td><td>Record&#x3C;string, string></td><td>Translated texts for UI labels.</td></tr></tbody></table>

### <mark style="color:red;">customGiftNoteFormUIRender Parameters</mark>

<table><thead><tr><th width="151.71875">Parameter</th><th width="188.88671875">Type</th><th>Description</th></tr></thead><tbody><tr><td>register</td><td>any</td><td>React Hook Form register method.</td></tr><tr><td>errors</td><td>any</td><td>Validation errors object.</td></tr><tr><td>note</td><td>string</td><td>Gift note text value.</td></tr><tr><td>textAreaCount</td><td>number</td><td>Current note character count.</td></tr><tr><td>onSubmit</td><td>(data: any) => void</td><td>Form submit handler.</td></tr><tr><td>removeNote</td><td>() => void</td><td>Callback to remove the note.</td></tr><tr><td>handleSubmit</td><td>any</td><td>React Hook Form submit handler.</td></tr></tbody></table>

## <mark style="color:red;">Usage Example</mark>

### <mark style="color:red;">**Default Usage**</mark>

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

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

### <mark style="color:red;">**Customizing Gift Pack**</mark>

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

### <mark style="color:red;">**Customizing Gift Note Form**</mark>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/next.js/plugins/basket-gift-package.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.