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