Handles updating an existing address for the user.

Usage

import React, { useEffect } from "react";

import {

usePelcro,

AddressUpdateContainer,

AddressUpdateFirstName,

AddressUpdateLastName,

AddressUpdateLine1,

AddressUpdateCountrySelect,

AddressUpdateStateSelect,

AddressUpdatePostalCode,

AddressUpdateCity,

AddressUpdateSetDefault,

AddressUpdateSubmit,

Alert,

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

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

export const CustomAddressUpdateView = () => {

const { set } = usePelcro();

useEffect(() => {

set({ addressIdToEdit: 1234 });

}, []);

return (

<AddressUpdateContainer

onSuccess={(userObject) => {

console.log(userObject);

}}

onFailure={(err) => {

console.error(err.message);

}}

>

<Alert />

<div>

<AddressUpdateFirstName label="First Name" />

<AddressUpdateLastName label="Last Name" />

</div>

<div>

<AddressUpdateLine1 label="Address line" />

</div>

<div>

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

<AddressUpdateCity label="City" />

</div>

<div>

<AddressUpdateCountrySelect label="Country" />

<AddressUpdateStateSelect label="State" />

</div>

<div>

<AddressUpdateSetDefault label="Set as default" />

</div>

<AddressUpdateSubmit />

</AddressUpdateContainer>

);

};

Reference

AddressUpdateContainer

Props

onSuccess

(userObject) ⇒ void

Callback function called when the address is updated succesfully.

onFailure

(errorObject) ⇒ void

Callback function called when the address update fails.

type

"shipping"|"billing"

Address type, default is "shipping".

Children components

Alert

Displays the relevant errors or success messages.

---

AddressUpdateFirstName Required

Instance of Input

Input field component to receive the first name.

---

AddressUpdateLastName Required

Instance of Input

Input field component to receive the last name.

---

AddressUpdateLine1 Required

Instance of Input

Input field component to receive the address line.

---

AddressUpdateCountrySelect Required

Instance of Select

Select input to choose the country.

---

AddressUpdateStateSelect Required

Instance of Select

Select input to choose the state.

---

AddressUpdatePostalCode Required

Instance of Input

Input field component to receive the postal/zip code.

---

AddressUpdateCity Required

Instance of Input

Input field component to receive the city.

---

AddressUpdateSetDefault

Instance of Checkbox

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

---

AddressUpdateSubmit Required

Instance of Button

A button component that submits the address creation form.

Props

name

string?

The title displayed inside the button

---