The entry point for users' transactions and information.

Loading...

Open the dashboard from a button

The user dashboard can be opened from anywhere on your site if the user is authenticated, by adding pelcro-login-button class to any button.
Read more about Pelcro HTML buttons

Dashboard sections

Section	Description
My profile	There are 2 buttons in this section: Edit profile opens UserUpdateModal Change password opens PasswordChangeModal
Payment cards	Shows the current payment method and allow updating it.
Addresses	Shows all of the user's addresses, each address type, the default address, and allow updating them.
Subscriptions	Shows all of the user's subscriptions, and allow renewing, reactivating, canceling, adding, suspending, and redeeming subscriptions.
Memberships	Shows all of the user's memberships and allow editing address tied to membership.
Donations	Shows all of the user's donations.
Invoices	Shows all of the user's invoices.
Gifts	Shows all of the user's gifted subscriptions, and allow gifting a new subscription.
Orders	Shows the user's ecommerce orders list.
Saved and followed	Shows the user's saved items. Learn more about how to allow users to save items

Usage

import React from "react";

import {

Dashboard,

PelcroModalController,

usePelcro,

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

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

export const DashboardExample = () => {

const { switchView } = usePelcro();

return (

<>

<button onClick={() => switchView("dashboard")}>

Click open dashboard

</button>

<PelcroModalController>

<Dashboard />

</PelcroModalController>

</>

);

};

Reference

Props

onDisplay

() ⇒ void

Callback function called when the dashboard is displayed.

onClose

() ⇒ void

Callback function called when the dashboard is closed.