Interfaces
Interface: UseCart

﻿react-autonomy﻿.UseCart
UseCart contains the data and methods returned by the useCart﻿ hook.
Hierarchy
Omit<RootInitialState["cart"], "data">
↳ 
Properties
addCrossSell
• addCrossSell: (options: CrossSell﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
The addCrossSell function takes an array of line items post-checkout and
adds them to the order, charging the card again in the process.
﻿
JS
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>
}
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
﻿CrossSell﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:154﻿
﻿
addPromoCode
• addPromoCode: (options: AddPromoCode﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
The addPromoCode function applies a promo code to the current shopping
cart.
﻿
JS
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.')
    }
  }
}
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
﻿AddPromoCode﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:176﻿
﻿
addSubscription
• addSubscription: (subscription: AddSubscriptionItem﻿) => Promise<OrderBig﻿>
Type declaration
▸ (subscription): Promise<OrderBig﻿>
The addSubscription function adds a subscription item to the customer's
cart.
﻿
JS
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>
}
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
﻿AddSubscriptionItem﻿﻿
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:209﻿
﻿
addToCart
• addToCart: (items: AddToCartItem﻿ | AddToCartItem﻿[]) => Promise<OrderBig﻿>
Type declaration
▸ (items): Promise<OrderBig﻿>
The addToCart function adds a product variant to the current shopping cart
(creating a line item).
﻿
JS
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { addToCart } = useCart()
  const onSubmit = ({ sku, quantity }) => {
    addToCart({
      sku,
      quantity,
      metadata: {
        brand: 'the-plant-store',
      }
    })
  }
}
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
﻿AddToCartItem﻿ | AddToCartItem﻿[]
The items to add to the cart.
Returns
Promise<OrderBig﻿>
A Promise that resolves once the items are added to the cart.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:235﻿
﻿
cart
• cart: Partial<OrderBig﻿>
An object representing the current shopping cart.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:129﻿
﻿
checkRedemptionCodeValidity
• checkRedemptionCodeValidity: (code: string, email: string) => Promise<OrderBig﻿>
Type declaration
▸ (code, email): Promise<OrderBig﻿>
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.
﻿
JS
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} />
}
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
email
string
Returns
Promise<OrderBig﻿>
A Promise that resolves with the order the redemption code is valid for.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:268﻿
﻿
emptyCart
• emptyCart: () => Promise<OrderBig﻿>
Type declaration
▸ (): Promise<OrderBig﻿>
The emptyCart function clears the customer's cart contents (line items,
promo codes, metadata) while keeping the same order number.
Returns
Promise<OrderBig﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:276﻿
﻿
error
• error: Error
Inherited from
Omit.error
Defined in
﻿packages/react-autonomy/src/redux/store/initial-state.ts:59﻿
﻿
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
﻿packages/react-autonomy/src/hooks/use-cart.ts:280﻿
﻿
isFetching
• isFetching: boolean
Inherited from
Omit.isFetching
Defined in
﻿packages/react-autonomy/src/redux/store/initial-state.ts:57﻿
﻿
isLoaded
• isLoaded: boolean
Inherited from
Omit.isLoaded
Defined in
﻿packages/react-autonomy/src/redux/store/initial-state.ts:58﻿
﻿
loadCart
• loadCart: () => Promise<OrderBig﻿>
Type declaration
▸ (): Promise<OrderBig﻿>
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.
﻿
JS
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { cart, loadCart } = useCart()

  useEffect(() => {
    loadCart().catch(error => {
      console.error(error.message)
    })
  }, [loadCart])
}
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { cart, loadCart } = useCart()

  useEffect(() => {
    loadCart().catch(error => {
      console.error(error.message)
    })
  }, [loadCart])
}
﻿
Returns
Promise<OrderBig﻿>
A Promise that resolves when the cart object has been added to Redux.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:304﻿
﻿
modifyCart
• modifyCart: (options: ModifyCart﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
The modifyCart function modifies the current cart. It sends it's payload
to the Chord OMS update order endpoint.
Parameters
Name
Type
options
﻿ModifyCart﻿﻿
Returns
Promise<OrderBig﻿>
A Promise that resolves when the cart object has been updated in
Redux.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:312﻿
﻿
modifyGiftCards
• modifyGiftCards: (options: GiftCardsInput﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
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.
﻿
JS
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"
        }
      ]
    })
  }
}
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { modifyGiftCards } = useCart()
  const onSubmit = (event) => {
    modifyGiftCards({
      giftCardsDetails: [
        {
          recipientEmail: "test@chord.co",
          giftMessage: "Hi!",
          sendEmailAt: "2021-11-15",
          id: "49"
        },
        {
          recipientEmail: "admin@chord.co",
          giftMessage: "",
          sendEmailAt: "2021-11-16",
          id: "50"
        }
      ]
    })
  }
}
﻿
Parameters
Name
Type
options
﻿GiftCardsInput﻿﻿
Returns
Promise<OrderBig﻿>
A Promise that resolves when the cart object has been updated in
Redux.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:364﻿
﻿
modifyLineItem
• modifyLineItem: (options: ModifyLineItem﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
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
﻿ModifyLineItem﻿﻿
Returns
Promise<OrderBig﻿>
A promise that resolves when the cart has been updated in Redux.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:319﻿
﻿
promoCode
• promoCode: Object
Type declaration
Name
Type
isFetching
boolean
Inherited from
Omit.promoCode
Defined in
﻿packages/react-autonomy/src/redux/store/initial-state.ts:60﻿
﻿
purchasePrepaidSubscription
• purchasePrepaidSubscription: (input: PurchasePrepaidSubscription﻿) => Promise<OrderBig﻿>
Type declaration
▸ (input): Promise<OrderBig﻿>
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.
JS
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>
}
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: 'help@chord.co',
          },
          shipAddress: address,
        }
      }
    })
    stripe.redirectToCheckout({
      checkoutSessionId: order.checkoutSessionId,
    })
  }

  return <button onClick={onClick}>Buy Now!</button>
}
﻿
Parameters
Name
Type
input
﻿PurchasePrepaidSubscription﻿﻿
Returns
Promise<OrderBig﻿>
A promise containing a new order with just the subscription in it.
You should pass it's checkoutSessionId to your checkout provider.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:429﻿
﻿
redeemGiftCard
• redeemGiftCard: (code: string, email: string) => Promise<GiftCardRedemption﻿>
Type declaration
▸ (code, email): Promise<GiftCardRedemption﻿>
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.
﻿
JS
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>
  )
}
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
email
string
Returns
Promise<GiftCardRedemption﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:461﻿
﻿
redeemPrepaidSubscription
• redeemPrepaidSubscription: (payload: RedeemPrepaidSubscriptionInput﻿) => Promise<GiftCardRedemption﻿>
Type declaration
▸ (payload): Promise<GiftCardRedemption﻿>
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.
﻿
JS
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>
  )
}
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
﻿RedeemPrepaidSubscriptionInput﻿﻿
Returns
Promise<GiftCardRedemption﻿>
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:495﻿
﻿
removeFromCart
• removeFromCart: (options: RemoveFromCart﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
The removeFromCart function removes a line item from the cart.
Parameters
Name
Type
options
﻿RemoveFromCart﻿﻿
Returns
Promise<OrderBig﻿>
A Promise that resolves when the cart object has been updated in
Redux.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:504﻿
﻿
removePromoCode
• removePromoCode: (options: RemovePromoCode﻿) => Promise<OrderBig﻿>
Type declaration
▸ (options): Promise<OrderBig﻿>
The removePromoCode function removes an applied promo code from the cart.
Parameters
Name
Type
options
﻿RemovePromoCode﻿﻿
Returns
Promise<OrderBig﻿>
A Promise that resolves when the cart object has been updated in
Redux.
Defined in
﻿packages/react-autonomy/src/hooks/use-cart.ts:511﻿
Name	Type
options	CrossSell
Name	Type
options	AddPromoCode
Name	Type
subscription	AddSubscriptionItem
Name	Type	Description
items	AddToCartItem \| AddToCartItem[]	The items to add to the cart.
Name	Type
code	string
email	string
Name	Type
type	string
Name	Type
options	ModifyCart
Name	Type
options	GiftCardsInput
Name	Type
options	ModifyLineItem
Name	Type
isFetching	boolean
Name	Type
input	PurchasePrepaidSubscription
Name	Type
code	string
email	string
Name	Type
payload	RedeemPrepaidSubscriptionInput
Name	Type
options	RemoveFromCart
Name	Type
options	RemovePromoCode
Updated 25 Mar 2024
Interface: UseAuth<AuthClientType>
Interface: UseCheckout