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
.
Installation Method
You can use the following command to install the extension with the latest plugins:
npx @akinon/projectzero@latest --plugins
Props
basketItem
object
Yes
Product information to be gift packaged
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.
customUIRender
React.ReactNode
Optional
Function to customize the overall gift pack rendering
customGiftNoteFormUIRender
React.ReactNode
Optional
Function to customize the gift note form rendering.
CustomUIRender Parameters
hasGiftPack
boolean
Whether a gift pack is added.
hasNote
{ state: boolean, title: string }
Note state and label.
note
string
Current note text.
onAddGiftPack
() => void
Callback to add a gift pack.
onRemoveGiftPack
() => void
Callback to remove the gift pack.
onAddNote
() => void
Callback to show note entry UI.
onRemoveNote
() => void
Handler for removing the note
formContent
React.ReactNode
Rendered content of the gift note form.
translations
Record<string, string>
Translated texts for UI labels.
customGiftNoteFormUIRender Parameters
register
any
React Hook Form register method.
errors
any
Validation errors object.
note
string
Gift note text value.
textAreaCount
number
Current note character count.
onSubmit
(data: any) => void
Form submit handler.
removeNote
() => void
Callback to remove the note.
handleSubmit
any
React Hook Form submit handler.
Usage Example
Default Usage
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
<PluginModule
component={Component.BasketGiftPack}
props={{ basketItem }}
/>
Customizing Gift Pack
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>
</>
)
}}
/>;
Customizing Gift Note Form
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>
)
}}
/>;
Last updated
Was this helpful?