Discounts

This document explains the implementation and usage of the DiscountsContextProvider and useDiscounts. They provide a way to manage and utilize discount codes within the application.

DiscountsContextProvider

The DiscountsContextProvider is a context provider that manages the state of discounts.

How it works

Checking URL parameters

On component mount, the provider checks the URL for a discount code parameter - discount.

Fetching discount details

When a discount code is provided as a URL search parameter, it fetches the discount details using a GraphQL query - discountCode(code: String!).

Handling valid discounts

If the discount is valid, it adds the discount to the session storage and updates the context.

Avoiding duplicates

If the discount is already present in the session storage, it is moved to the end of the list for convenience.

Handling invalid discounts

If the discount is invalid or an error occurs, it keeps context values as they are and shows an appropriate snack notification.

Usage

To use the DiscountsContextProvider, wrap it around your component tree. This will allow any nested component to access the discounts context. Usually, in the NextJS application it can be done in the layout file.

import { DiscountsContextProvider } from "core/libs/discounts"
 
function Layout() {
  return (
    <DiscountsContextProvider>
      <App />
    </DiscountsContextProvider>
  )
}

Context Values

Usually, you don’t need to use these context values directly because the useDiscounts hook provides all the necessary functionality. However, if needed, you can also use the useDiscountsContext hook directly.

The context provides the following values:

• discounts: An array of discount codes currently in use.
• localStorageDiscounts: An array of discount codes stored in local storage.
• setDiscounts: A function to update the discounts state.
• setLocalStorageDiscounts: A function to update the localStorageDiscounts state.
• fetchDiscountDetails: A function to fetch the details of a discount code.

useDiscounts

The useDiscounts hook provides access to the discounts context and enhances the API data.

How it works

The useDiscounts hook transforms the structure of the API discounts data by adding formatted values and descriptive copies to each discount. Specifically, it extends each direct discount with:

• formattedValue: The discount value formatted as a currency or percentage.
• copy: A string that describes the discount.

Possible Copies

The copy string varies depending on the type (n_orders, nth_order, every_nth_order), number (N), and amount (X) associated with the discount.

• n_orders: For single order discounts, the copy will be “X off your next box”
• multiple n_orders: For multiple orders, the copy will be “X off your next N boxes”
• nth_order: For nth order discounts, the copy will be “X off your [ordinal number] box” where the ordinal number could be “1st,” “2nd,” “3rd,”, “Nth”.
• every_nth_order: For every nth order discounts, the copy will be:
  • If N === 1 - “X off your every box”
  • If N > 1 - “X off your every N boxes”

Usage

To use the useDiscounts hook, simply call it within a CSR component. It returns an object containing the discounts and related functions.

import { useDiscounts } from "core/libs/discounts"
 
function App() {
  const {
    discount,
    discounts,
    fetchDiscountDetails,
    loading,
    clearDiscount
  } = useDiscounts()
 
  return (
    ...
  )
}