The address update modal is used to update an existing address for the user.

Loading...

info

AddressUpdateModal requires the addressIdToEdit to be set.
If you're using our default flow, the user selects this already.
But if you have your own custom flow, you can use the usePelcro hook to set it before switching to the address update view like in the following example.

Usage

import React, { useEffect } from "react";

import {

AddressUpdateModal,

PelcroModalController,

usePelcro,

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

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

export const AddressUpdateExample = () => {

const { switchView, set } = usePelcro();

useEffect(() => {

set({ addressIdToEdit: 1234 });

}, []);

return (

<>

<button onClick={() => switchView("address-edit")}>

Update your address

</button>

<PelcroModalController>

<AddressUpdateModal />

</PelcroModalController>

</>

);

};

Reference

Props

onDisplay

() ⇒ void

Callback function called when the modal is first displayed.

onClose

() ⇒ void

Callback function called when the modal is closed.

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".