Skip to main content
Version: Next

AddressCreateContainer

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