usePelcro

usePelcro

A react hook that exposes pelcro global store and actions.

Usage

import React from "react";

import { usePelcro } from "@pelcro/react-pelcro-js";

export const CartExample = () => {

const { cartItems, addToCart } = usePelcro();

return (

<div>

<div>

<button onClick={() => addToCart(34)}>Add to cart +</button>

<button onClick={() => removeFromCart(34)}> Remove from cart -</button>

</div>

<div>{cartItems.reduce((total, item) => total + item.quantity, 0)}</div>

</div>

);

};

Loading...

API

getStore

You can use usePelcro outside react components via the getStore() API.

const { view, product, plan, set } = usePelcro.getStore();

override

Lets you override internal implementations inside the pelcro global store.

// override switchView default implementation

usePelcro.override((set, get) => {

const currentView = get().view;

return {

switchView: (view) => {

set({ view: view });

console.log(`Switching from ${currentView} to ${view}`);

},

};

});

State

view

The currently open pelcro modal.

const { view } = usePelcro();

Can be set by switchView.

product

The currently selected product, contains the product details and all the plans configured on the platform.

const { product } = usePelcro();

Can be set by setProduct.

plan

The currently selected plan.

const { plan } = usePelcro();

Can be set by setPlan.

isGift

When true, the proceeding subscription will be a gifted one, and the GiftCreateModal will open up to gather the donee information.

const { isGift } = usePelcro();

giftCode

The string code of a gift, when set with a valid gift code, AddressCreateModal & AddressSelectModal redeems the subscription without going to the payment form.

const { giftCode } = usePelcro();

subscriptionIdToRenew

Used by the SubscriptionRenewModal to renew a specific subscription. When set with a valid renewable subscription ID, user is redirected to pay for the given subscription renewal.

const { subscriptionIdToRenew } = usePelcro();

selectedAddressId

When set with a valid address ID, it'll be preselected in the next payment for a plan/ecommerce where address is required.

const { selectedAddressId } = usePelcro();

selectedPaymentMethodId

When set with a valid user's stripe payment source ID, it'll be preselected as the payment method in the next payment for a plan/ecommerce.

const { selectedPaymentMethodId } = usePelcro();

cartItems

The ecommerce cart array. Contains the current user's cart items. Also Persisted in local storage.

const { cartItems } = usePelcro();

Add or remove cart items with addToCart & removeFromCart

order

The current ecommerce order items. this field is populated once the user starts the checkout flow, it can either be an array of items, which happens in the case of checking out using the cart view, or a single item object, which happens in the case of clicking the quick purchase button of an e-commerce item.

const { order } = usePelcro();

Functions

set

The global store setter. Takes a partial state and merges it with the current state

const { set } = usePelcro();

set({ subscriptionIdToRenew: 1234 });

const { set } = usePelcro();

set((currentState) => ({ subscriptionIdToRenew: 1234 }));

resetState

Resets all the state without closing the current modal.

const { resetState } = usePelcro();

resetState();

switchView

Called with a valid view ID to switch to the right modal.

const { switchView } = usePelcro();

switchView("login");

Valid view IDs

Modal	View ID
LoginModal	"login"
RegisterModal	"register"
Dashboard	"dashboard"
UserUpdateModal	"user-edit"
ProfilePicChangeModal	"profile-picture"
MeterModal	"meter"
NewsLetter	"newsletter"
SelectModal	"plan-select"
GiftCreateModal	"gift-create"
GiftRedeemModal	"gift-redeem"
SubscriptionCreateModal	"subscription-create"
SubscriptionRenewModal	"subscription-renew"
PaymentMethodUpdateModal	"payment-method-update"
PaymentSuccessModal	"subscription-success"
AddressCreateModal	"address-create"
AddressUpdateModal	"address-edit"
AddressSelectModal	"address-select"
PasswordChangeModal	"password-change"
PasswordForgotModal	"password-forgot"
PasswordResetModal	"password-reset"
OrderCreateModal	"order-create"
CartModal	"cart"
OrderConfirmModal	"order-confirm"

resetView

Resets the view state (closes the modal) & resets all the state.

const { resetView } = usePelcro();

resetView();

switchToPaymentView

When called, directs to the appropriate payment modal according to the current state. Resets the view otherwise.

const { switchToPaymentView } = usePelcro();

switchToPaymentView();

Conditions

Modal	Condition
SubscriptionCreateModal	When product is set
SubscriptionRenewModal	When both product and subscriptionIdToRenew are set
OrderCreateModal	When cartItems has at least one item

switchToAddressView

When called, directs to the appropriate address modal according to the current state.

const { switchToAddressView } = usePelcro();

switchToAddressView();

Conditions

Modal	Condition
AddressSelectModal	When the user has at least one shipping address.
AddressCreateModal	When user doesn't have any address yet.

setProduct

Sets the selected product state. Called with a valid product id

const { setProduct } = usePelcro();

setProduct(1234);

setPlan

Sets the selected plan state. Called with a valid plan id

const { setPlan } = usePelcro();

setPlan(5678);

addToCart

Adds a new item to the user's cart. If the item already exists, it adds to its quantity. Called with a valid SKU id

const { addToCart } = usePelcro();

addToCart(123);

removeFromCart

Removes an item from the user's cart. If the item's quantity is more than 1, it decrements the quantity. Called with a valid SKU id

const { removeFromCart } = usePelcro();

removeFromCart(123);

purchaseItem

Instantly starts the checkout flow for a single ecommerce item. Called with a valid SKU id

const { purchaseItem } = usePelcro();

purchaseItem(123);

isAuthenticated

Returns true when user is authenticated, false otherwise.

const { isAuthenticated } = usePelcro();

const loggedIn = isAuthenticated();

logout

Logs the current user out & switches to LoginModal, if authenticated.

const { logout } = usePelcro();

logout();

Events Callbacks

whenSiteReady

Takes a callback function and executes it immediately if your Pelcro site is already loaded, or when it finally loads.

const { whenSiteReady } = usePelcro();

whenSiteReady((siteObject) => {

console.log(siteObject);

});

whenUserReady

Takes a callback function and executes it immediately if the user object is loaded, or when it finally loads.

const { whenUserReady } = usePelcro();

whenUserReady((userObject) => {

console.log(userObject);

});

whenEcommerceLoaded

Takes a callback function and executes it immediately if the ecommerce products are loaded, or when they finally load.

const { whenEcommerceLoaded } = usePelcro();

whenEcommerceLoaded((ecommerceProductsArray) => {

console.log(ecommerceProductsArray);

});