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.

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
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.
maxNoteLength	number	Optional	Maximum allowed character length for the gift note.
customUIRender	function	Optional	Function to override the default UI logic.
customGiftNoteFormUIRender	function	Optional	Function to override the default gift note form layout.

CustomUIRender Parameters

Parameter	Type	Description
hasGiftPack	boolean	Whether a gift pack is currently selected.
hasNote	{ state: boolean }	Whether a note is being written.
note	string	Current note value.
onAddGiftPack	() => void	Callback to add a gift pack.
onRemoveGiftPack	() => void	Callback to remove the gift pack.
onAddNote	() => void	Callback to show note entry UI.
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.
note	string	Current note value.
textAreaCount	number	Current character count.
onSubmit	(data: any) => void	Form submit handler.
removeNote	() => void	Callback to remove the note.
handleSubmit	any	React Hook Form submit handler.
translations	Record<string, string>	Translation object for form labels and messages.

Default 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'
}

Usage Examples

/src/views/checkout/checkout/summary.tsx

Default Usage

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'
  }}
 />

Custom UI Usage

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