Interface: UseCart
react-autonomyreact-autonomy.UseCart
UseCart contains the data and methods returned by the useCartuseCart hook.
Hierarchy
- Omit<RootInitialState["cart"], "data">↳
Properties
addCrossSell
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The addCrossSell function takes an array of line items post-checkout and adds them to the order, charging the card again in the process.
import { useCart } from '@chordcommerce/react-autonomy'
const CrossSellCheckoutButton = ({ orderID, orderToken, lineItemsAttributes }) => {
const { addCrossSell } = useCart()
const purchaseCrossSells = async () => addCrossSell({
lineItemsAttributes,
cart: {
number: orderID,
token: orderToken,
},
})
return <button onClick={purchaseCrossSells}>Buy</button>
}Parameters
Name | Type |
|---|---|
options | CrossSellCrossSell |
Returns
Promise<OrderBigOrderBig>
Defined in
addPromoCode
• addPromoCode: (options: AddPromoCodeAddPromoCode) => Promise<OrderBigOrderBig>
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The addPromoCode function applies a promo code to the current shopping cart.
import { useCart } from '@chordcommerce/react-autonomy'
const PromoCodeForm = () => {
const { cart, addPromoCode } = useCart()
const onSubmit = async ({ promoCode }) => {
try {
await addPromoCode(promoCode)
} catch(error) {
console.error('Error applying promo code.')
}
}
}Parameters
Name | Type |
|---|---|
options | AddPromoCodeAddPromoCode |
Returns
Promise<OrderBigOrderBig>
Defined in
addSubscription
• addSubscription: (subscription: AddSubscriptionItemAddSubscriptionItem) => Promise<OrderBigOrderBig>
Type declaration
▸ (subscription): Promise<OrderBigOrderBig>
The addSubscription function adds a subscription item to the customer's cart.
import { useCart } from '@chordcommerce/react-autonomy'
const AddSubscriptionToCartButton = ({
sku,
quantity,
endDate,
intervalUnit,
intervalLength,
}) => {
const { addSubscription } = useCart()
const addToCart = async () => addSubscription({
sku,
quantity,
endDate,
interval: {
length: intervalLength,
unit: intervalUnit,
},
})
return <button onClick={addToCart}>Add To Cart</button>
}Parameters
Name | Type |
|---|---|
subscription | AddSubscriptionItemAddSubscriptionItem |
Returns
Promise<OrderBigOrderBig>
Defined in
addToCart
• addToCart: (items: AddToCartItemAddToCartItem | AddToCartItemAddToCartItem[]) => Promise<OrderBigOrderBig>
Type declaration
▸ (items): Promise<OrderBigOrderBig>
The addToCart function adds a product variant to the current shopping cart (creating a line item).
import { useCart } from '@chordcommerce/react-autonomy'
export default () => {
const { addToCart } = useCart()
const onSubmit = ({ sku, quantity }) => {
addToCart({
sku,
quantity,
metadata: {
brand: 'the-plant-store',
}
})
}
}Parameters
Name | Type | Description |
|---|---|---|
items | AddToCartItemAddToCartItem | AddToCartItemAddToCartItem[] | The items to add to the cart. |
Returns
Promise<OrderBigOrderBig>
A Promise that resolves once the items are added to the cart.
Defined in
cart
• cart: Partial<OrderBigOrderBig>
An object representing the current shopping cart.
Defined in
checkRedemptionCodeValidity
• checkRedemptionCodeValidity: (code: string, email: string) => Promise<OrderBigOrderBig>
Type declaration
▸ (code, email): Promise<OrderBigOrderBig>
The checkRedemptionCodeValidity function checks the validity of a gift card redemption code or prepaid subscription redemption code. It does not require the customer to be logged in. It will return the order the redemption code is valid for such that a redemption code form can be filled in or products can be displayed dynamically.
import { useCart } from '@chordcommerce/react-autonomy'
const RedemptionCodeForm = () => {
const { checkRedemptionCodeValidity } = useCart()
const params = new URLSearchParams(window.location.search)
const code = params.get('code')
const { data: order, error } = useAsyncEffect(() => {
return checkRedemptionCodeValidity(code)
}, [checkRedemptionCodeValidity, code])
if (error) {
return <p>Invalid redemption code.</p>
}
return <Items items={order.lineItems} />
}Parameters
Name | Type |
|---|---|
code | string |
string |
Returns
Promise<OrderBigOrderBig>
A Promise that resolves with the order the redemption code is valid for.
Defined in
emptyCart
• emptyCart: () => Promise<OrderBigOrderBig>
Type declaration
▸ (): Promise<OrderBigOrderBig>
The emptyCart function clears the customer's cart contents (line items, promo codes, metadata) while keeping the same order number.
Returns
Promise<OrderBigOrderBig>
Defined in
error
• error: Error
Inherited from
Omit.error
Defined in
forgetCart
• forgetCart: () => { type: string = FORGET_CART }
Type declaration
▸ (): Object
The forgetCart function clears the customer's cart.
Returns
Object
Name | Type |
|---|---|
type | string |
Defined in
isFetching
• isFetching: boolean
Inherited from
Omit.isFetching
Defined in
isLoaded
• isLoaded: boolean
Inherited from
Omit.isLoaded
Defined in
loadCart
• loadCart: () => Promise<OrderBigOrderBig>
Type declaration
▸ (): Promise<OrderBigOrderBig>
The loadCart function loads the current cart based on the current browser session and populates the cart in Redux. loadCart is automatically called on page load so this should not be called except in exceptional circumstances.
import { useCart } from '@chordcommerce/react-autonomy'
export default () => {
const { cart, loadCart } = useCart()
useEffect(() => {
loadCart().catch(error => {
console.error(error.message)
})
}, [loadCart])
}Returns
Promise<OrderBigOrderBig>
A Promise that resolves when the cart object has been added to Redux.
Defined in
modifyCart
• modifyCart: (options: ModifyCartModifyCart) => Promise<OrderBigOrderBig>
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The modifyCart function modifies the current cart. It sends it's payload to the Chord OMS update order endpoint.
Parameters
Name | Type |
|---|---|
options | ModifyCartModifyCart |
Returns
Promise<OrderBigOrderBig>
A Promise that resolves when the cart object has been updated in Redux.
Defined in
modifyGiftCards
• modifyGiftCards: (options: GiftCardsInputGiftCardsInput) => Promise<OrderBigOrderBig>
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The modifyGiftCards function applies or removes gift cards from the current cart.
The giftCardsDetails object is returned in the lineItem object if the lineItem is a gift card. Additionally, newly redeemed gift cards are available in the user object for indicating to the user that they have received a gift.
The gift cards can be updated by including the gift card id along with any of the following params: recipientName, recipientEmail, giftMessage, purchaserName, sendEmailAt.The recipient email is a required field as that will be the account used to redeem the gift cards.
import { useCart } from '@chordcommerce/react-autonomy'
export default () => {
const { modifyGiftCards } = useCart()
const onSubmit = (event) => {
modifyGiftCards({
giftCardsDetails: [
{
recipientEmail: "[email protected]",
giftMessage: "Hi!",
sendEmailAt: "2021-11-15",
id: "49"
},
{
recipientEmail: "[email protected]",
giftMessage: "",
sendEmailAt: "2021-11-16",
id: "50"
}
]
})
}
}Parameters
Name | Type |
|---|---|
options | GiftCardsInputGiftCardsInput |
Returns
Promise<OrderBigOrderBig>
A Promise that resolves when the cart object has been updated in Redux.
Defined in
modifyLineItem
• modifyLineItem: (options: ModifyLineItemModifyLineItem) => Promise<OrderBigOrderBig>
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The modifyLineItem function updates a line item in the customer's cart. It calls Chord OMS's update order line item endpoint.
Parameters
Name | Type |
|---|---|
options | ModifyLineItemModifyLineItem |
Returns
Promise<OrderBigOrderBig>
A promise that resolves when the cart has been updated in Redux.
Defined in
promoCode
• promoCode: Object
Type declaration
Name | Type |
|---|---|
isFetching | boolean |
Inherited from
Omit.promoCode
Defined in
purchasePrepaidSubscription
• purchasePrepaidSubscription: (input: PurchasePrepaidSubscriptionPurchasePrepaidSubscription) => Promise<OrderBigOrderBig>
Type declaration
▸ (input): Promise<OrderBigOrderBig>
The purchasePrepaidSubscription function allows the customer to purchase a prepaid/gift subscription. The process is the caller provides a input of SKUs, quantities, installments, delivery frequency and shipping address and is returned an order that is outside of react-autonomy's state management ready to direct the customer straight to checkout. You should pass order.checkoutSessionId to your checkout provider to direct the customer to the next step.
This example is using Stripe for the checkout. It will allow the user to purchase a yearlog gift subscription for someone else.
import { useCart } from '@chordcommerce/react-autonomy'
// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
const stripePromise = loadStripe(process.env.STRIPE_PK_KEY, {
stripeAccount: process.env.STRIPE_CONNECTED_ACCOUNT
})
const GiftSubscriptionButton = ({ address }) => {
const { purchasePrepaidSubscription } = useCart()
const onClick = () => {
const stripe = await stripePromise
const order = await purchasePrepaidSubscription({
sku: 'flower-club-subscription',
quantity: 1,
options: {
prepaidSubscription: {
installmentCount: 12,
interval: {
units: 'month',
length: 1,
},
lineItems: [{
sku: 'flower-club-subscription',
quantity: 1,
}],
autoRedeem: true,
actionableDate: new Date(),
gift: true,
recipient: {
name: address.name,
email: '[email protected]',
},
shipAddress: address,
}
}
})
stripe.redirectToCheckout({
checkoutSessionId: order.checkoutSessionId,
})
}
return <button onClick={onClick}>Buy Now!</button>
}Parameters
Name | Type |
|---|---|
input | PurchasePrepaidSubscriptionPurchasePrepaidSubscription |
Returns
Promise<OrderBigOrderBig>
A promise containing a new order with just the subscription in it. You should pass it's checkoutSessionId to your checkout provider.
Defined in
redeemGiftCard
• redeemGiftCard: (code: string, email: string) => Promise<GiftCardRedemptionGiftCardRedemption>
Type declaration
▸ (code, email): Promise<GiftCardRedemptionGiftCardRedemption>
The redeemGiftCard function redeems a gift card to the account matching the email provided during the initial purchase. It does not require the user to be logged in.
import { useCart } from '@chordcommerce/react-autonomy'
const RedemptionForm = () => {
const { redeemGiftCard } = useCart()
const submitHandler = async (e) => {
const code = event.target.code
await redeemGiftCard(code)
}
return (
<form onSubmit={submitHandler}>
<label>
<span>Enter redemption code</span>
<input type="text" name="code" />
</label>
</form>
)
}Parameters
Name | Type |
|---|---|
code | string |
string |
Returns
Promise<GiftCardRedemptionGiftCardRedemption>
Defined in
redeemPrepaidSubscription
• redeemPrepaidSubscription: (payload: RedeemPrepaidSubscriptionInputRedeemPrepaidSubscriptionInput) => Promise<GiftCardRedemptionGiftCardRedemption>
Type declaration
▸ (payload): Promise<GiftCardRedemptionGiftCardRedemption>
The redeemPrepaidSubscription function redeems a prepaid subscription to the account matching the email provided during the initial purchase. It does not require the user to be logged in.
import { useCart } from '@chordcommerce/react-autonomy'
const RedemptionForm = () => {
const { redeemPrepaidSubscription } = useCart()
const submitHandler = async (e) => {
const { redemptionCode ...shipAddress } = Object.fromEntries(new FormData(event.target))
await redeemGiftCard({
redemptionCode,
shipAddress,
})
}
return (
<form onSubmit={submitHandler}>
<label>
<span>Enter redemption code</span>
<input type="text" name="redemptionCode" />
</label>
<AddressInputs />
</form>
)
}Parameters
Name | Type |
|---|---|
payload | RedeemPrepaidSubscriptionInputRedeemPrepaidSubscriptionInput |
Returns
Promise<GiftCardRedemptionGiftCardRedemption>
Defined in
removeFromCart
• removeFromCart: (options: RemoveFromCartRemoveFromCart) => Promise<OrderBigOrderBig>
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The removeFromCart function removes a line item from the cart.
Parameters
Name | Type |
|---|---|
options | RemoveFromCartRemoveFromCart |
Returns
Promise<OrderBigOrderBig>
A Promise that resolves when the cart object has been updated in Redux.
Defined in
removePromoCode
• removePromoCode: (options: RemovePromoCodeRemovePromoCode) => Promise<OrderBigOrderBig>
Type declaration
▸ (options): Promise<OrderBigOrderBig>
The removePromoCode function removes an applied promo code from the cart.
Parameters
Name | Type |
|---|---|
options | RemovePromoCodeRemovePromoCode |
Returns
Promise<OrderBigOrderBig>
A Promise that resolves when the cart object has been updated in Redux.