Skip to main content
Version: Next

GiftCreateContainer

Handles starting the subscription gifting flow. once the user submits the gift recipient's information successfully in this modal, the information is stored in usePelcro's giftRecipient field.

Usage#

import React from "react";
import {
GiftCreateContainer,
GiftCreateEmail,
GiftCreateFirstName,
GiftCreateLastName,
GiftCreateStartDate,
GiftCreateMessage,
GiftCreateSubmitButton,
Alert,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomGiftCreateView = () => {
return (
<GiftCreateContainer
onSuccess={(giftRecipient) => {
console.log(giftRecipient);
}}
onFailure={() => {
console.error("error");
}}
>
<Alert />
<GiftCreateEmail />
<GiftCreateFirstName label="First Name" />
<GiftCreateLastName label="Last Name" />
<GiftCreateStartDate label="Gift date" />
<GiftCreateMessage label="Gift Message" />
<GiftCreateSubmitButton />
</GiftCreateContainer>
);
};

Reference#

GiftCreateContainer#

Props#

onSuccess#

(giftrecipient) โ‡’ void

Callback function called when the gift recipient's information is submitted succesfully.

onFailure#

() โ‡’ void

Callback function called when submitting the gift recipient's information fails.

Children components#

Alert#

Displays the relevant errors or success messages.


GiftCreateFirstName#

Instance of Input

Input field component for the recipient's first name.


GiftCreateLastName#

Instance of Input

Input field component for the recipient's last name.


GiftCreateEmail Required#

Instance of Input

Input field component for the gift recipient's e-mail.


GiftCreateStartDate#

Instance of DatePicker

Date field component for the gift starting date.


GiftCreateMessage#

Instance of TextArea

Text area component for the gift message sent with the email.


GiftCreateSubmitButton Required#

Instance of Button

A button component that submits the address creation form.

Props#

name#

string?

The title displayed inside the button