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