Handles adding a new address for the user.

Usage

import React from "react";

import {

AddressCreateContainer,

AddressCreateFirstName,

AddressCreateLastName,

AddressCreateLine1,

AddressCreateCountrySelect,

AddressCreateStateSelect,

AddressCreatePostalCode,

AddressCreateCity,

AddressCreateSetDefault,

AddressCreateSubmit,

Alert,

} from "@pelcro/react-pelcro-js";

import "@pelcro/react-pelcro-js/dist/pelcro.css";

export const CustomAddressCreateView = () => {

return (

<AddressCreateContainer

onSuccess={(userObject) => {

console.log(userObject);

}}

onFailure={(err) => {

console.error(err.message);

}}

>

<Alert />

<div>

<AddressCreateFirstName label="First Name" />

<AddressCreateLastName label="Last Name" />

</div>

<div>

<AddressCreateLine1 label="Address line" />

</div>

<div>

<AddressCreatePostalCode label="Postal/Zip code" />

<AddressCreateCity label="City" />

</div>

<div>

<AddressCreateCountrySelect label="Country" />

<AddressCreateStateSelect label="State" />

</div>

<div>

<AddressCreateSetDefault label="Set as default" />

</div>

<AddressCreateSubmit />

</AddressCreateContainer>

);

};

Reference

AddressCreateContainer

Props

onSuccess

(userObject) ⇒ void

Callback function called when the address is created succesfully.

onGiftRedemptionSuccess

(userObject) ⇒ void

Callback function called when the user is redeeming a gift, and the gift is redeemed succesfully.

onFailure

(errorObject) ⇒ void

Callback function called when the address creation / gift redemption fails.

type

"shipping"|"billing"

Address type, default is "shipping".

Children components

Alert

Displays the relevant errors or success messages.

---

AddressCreateFirstName Required

Instance of Input

Input field component to receive the first name.

---

AddressCreateLastName Required

Instance of Input

Input field component to receive the last name.

---

AddressCreateLine1 Required

Instance of Input

Input field component to receive the address line.

---

AddressCreateCountrySelect Required

Instance of Select

Select input to choose the country.

---

AddressCreateStateSelect Required

Instance of Select

Select input to choose the state.

---

AddressCreatePostalCode Required

Instance of Input

Input field component to receive the postal/zip code.

---

AddressCreateCity Required

Instance of Input

Input field component to receive the city.

---

AddressCreateSetDefault

Instance of Checkbox

Check box to toggle if you want to set this address as the default.

---

AddressCreateSubmit Required

Instance of Button

A button component that submits the address creation form.

Props

name

string?

The title displayed inside the button

---