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

---