# Checkout Gift Package

The `CheckoutGiftPack` component provides gift package functionality during the checkout process. It allows customers to mark their order as a gift and optionally include a gift note. The component supports both default and fully customized UI 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.4453125">Prop</th><th width="106.90625">Type</th><th width="106.3203125">Required</th><th>Description</th></tr></thead><tbody><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>maxNoteLength</td><td>number</td><td>Optional</td><td>Maximum allowed character length for the gift note.</td></tr><tr><td>customUIRender</td><td>function</td><td>Optional</td><td>Function to override the default UI logic.</td></tr><tr><td>customGiftNoteFormUIRender</td><td>function</td><td>Optional</td><td>Function to override the default gift note form layout.</td></tr></tbody></table>

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

<table><thead><tr><th width="169.97265625">Parameter</th><th width="186.8203125">Type</th><th>Description</th></tr></thead><tbody><tr><td>hasGiftPack</td><td>boolean</td><td>Whether a gift pack is currently selected.</td></tr><tr><td>hasNote</td><td>{ state: boolean }</td><td>Whether a note is being written.</td></tr><tr><td>note</td><td>string</td><td>Current note value.</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>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="139.63671875">Parameter</th><th width="187.28125">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.</td></tr><tr><td>note</td><td>string</td><td>Current note value.</td></tr><tr><td>textAreaCount</td><td>number</td><td>Current 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><tr><td>translations</td><td>Record&#x3C;string, string></td><td>Translation object for form labels and messages.</td></tr></tbody></table>

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

```javascript
{
  addGiftPackText: 'Add Gift Pack',
  giftPackAdded: 'Gift Pack Added',
  removeGiftPackText: 'Remove Gift Pack',
  informationText: 'This order will be gift packaged*',
  updateNote: 'Update Note',
  removeGiftNoteText: 'Remove Gift Note',
  charactersLength: 'characters left',
  placeholderInput: 'You can leave empty this area. However it will be a gift package without note.',
  accordionTitle: 'Gift Note',
  warningMessage: 'Make sure that this field is not longer than the character limit.',
  save: 'SAVE',
  close: 'Close'
}
```

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

```bash
/src/views/checkout/checkout/summary.tsx
```

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

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

<PluginModule
  component={Component.CheckoutGiftPack}
  props={{
    className: 'flex flex-col w-full mb-4 border border-solid border-gray-400'
  }}
 />
```

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

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

<PluginModule
  component={Component.CheckoutGiftPack}
  props={{
    className: 'flex flex-col w-full mb-4 border border-solid border-gray-400',
    translations: {
      addGiftPackText: 'Add Gift Pack',
      giftPackAdded: 'Gift Pack Added',
      removeGiftPackText: 'Remove Gift Pack',
      informationText: 'This order will be gift packaged*',
      updateNote: 'Update Note',
      removeGiftNoteText: 'Remove Gift Note',
      charactersLength: 'characters left',
      placeholderInput:
        'You can leave empty this area. However it will be a gift package without note.',
      accordionTitle: 'Gift Note',
      warningMessage:
        'Make sure that this field is not longer than the character limit.',
      save: 'SAVE',
      close: 'Close'
    },
    customUIRender: ({
      hasGiftPack,
      hasNote,
      note,
      onAddGiftPack,
      onRemoveGiftPack,
      onAddNote,
      formContent,
      translations
    }) => (
      <div className="custom-gift-pack">
        {hasGiftPack ? (
          <div className="gift-pack-added p-4 border border-gray-200">
            <div className="flex justify-between items-center mb-4">
              <span className="font-medium">{translations.giftPackAdded}</span>
              <button
                onClick={onRemoveGiftPack}
                className="text-red-500 hover:text-red-700"
              >
                {translations.removeGiftPackText}
              </button>
            </div>

            <div className="gift-note-info bg-gray-50 p-3 rounded">
              <span className="text-sm text-gray-600">
                {translations.informationText}
              </span>
              {note && <p className="mt-2 text-sm">{note}</p>}
              <button
                onClick={onAddNote}
                className="mt-2 text-blue-500 hover:text-blue-700"
              >
                {translations.updateNote}
              </button>
            </div>

            {hasNote.state && <div className="mt-4">{formContent}</div>}
          </div>
        ) : (
          <button
            onClick={onAddGiftPack}
            className="w-full p-2 text-center border border-gray-200 hover:bg-gray-50"
          >
            {translations.addGiftPackText}
          </button>
        )}
      </div>
    ),
    customGiftNoteFormUIRender: ({
      register,
      errors,
      note,
      textAreaCount,
      onSubmit,
      removeNote,
      handleSubmit,
      translations: formTranslations
    }) => (
      <form onSubmit={handleSubmit(onSubmit)}>
        <textarea
          {...register('message')}
          value={note}
          placeholder={formTranslations.placeholderInput}
        />
        {errors.message && <span>{errors.message.message}</span>}
        <div className="character-count">
          {textAreaCount}/160 {formTranslations.charactersLength}
        </div>
        <div className="buttons">
          <button type="button" onClick={removeNote}>
            {formTranslations.removeGiftNoteText}
          </button>
          <button type="submit">{formTranslations.save}</button>
        </div>
      </form>
    )
  }}
/>
```


---

# 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/checkout-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.