feat: add discounts to enhanced cart data (#209)

* build: bumped tanstack and moved rxjs to optional peer deps

* feat: remove cart provider and added dev tools

* feat: renamed use cart hook

* feat: removed cart provider

* feat: add discounts to enhanced product

* chore: update examples to use promotions

* chore: changeset

.changeset/nasty-mirrors-melt.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/react-shopper-hooks": minor
+---
+
+add enhanced promotions details fns to cart object

packages/react-shopper-hooks/example/App.tsx

@@ -1,12 +1,12 @@
 import React from "react"
 import "./App.css"
 import CartExample from "./CartExample"
-import { CartProvider } from "../src/cart"
 import { gateway as EPCCGateway } from "@moltin/sdk"
 import { StoreProvider } from "../src/store"
 import { ElasticPathProvider } from "../src"
 import { QueryClient } from "@tanstack/react-query"
 import { ProductListExample } from "./ProductListExample"
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 
 const client = EPCCGateway({
   name: "my_store",
@@ -34,11 +34,10 @@ function App() {
           client={client}
           queryClientProviderProps={{ client: queryClient }}
         >
-          <StoreProvider cartId={client.Cart().cartId}>
-            <CartProvider cartId={client.Cart().cartId}>
-              {activeItem === "cart" && <CartExample />}
-              {activeItem === "products" && <ProductListExample />}
-            </CartProvider>
+          <ReactQueryDevtools initialIsOpen={false} />
+          <StoreProvider>
+            {activeItem === "cart" && <CartExample />}
+            {activeItem === "products" && <ProductListExample />}
           </StoreProvider>
         </ElasticPathProvider>
       </div>

packages/react-shopper-hooks/example/CartExample.tsx

@@ -1,13 +1,45 @@
 import React from "react"
-import { useCart, useCartAddBundleItem, useCartClear } from "../src/cart"
+import {
+  useCart,
+  useCartAddBundleItem,
+  useCartAddProduct,
+  useCartAddPromotion,
+  useCartClear,
+} from "../src/cart"
+import ReactJson from "react-json-view"
 
 export default function CartExample(): JSX.Element {
-  const { state } = useCart()
+  const { data, isLoading } = useCart()
   const { mutate: addBundleProductToCart } = useCartAddBundleItem()
+  const { mutate: addProduct } = useCartAddProduct()
   const { mutate: emptyCart } = useCartClear()
+  const { mutate: addPromotion } = useCartAddPromotion()
+
+  const itemDiscounts = data?.state.__extended.getItemDiscounts()
+  const allDiscounts = data?.state.__extended.getAllDiscounts()
+
   return (
     <>
       <button onClick={() => emptyCart()}>Empty Cart</button>
+      <button
+        onClick={() =>
+          addPromotion({
+            code: "ZOAGUO",
+          })
+        }
+      >
+        Add Promotion
+      </button>
+      <button
+        onClick={() =>
+          addProduct({
+            productId: "1cc7f871-1071-4908-a79d-633adc56044a",
+            quantity: 1,
+          })
+        }
+      >
+        Add Product
+      </button>
       <button
         onClick={() =>
           addBundleProductToCart({
@@ -29,7 +61,24 @@ export default function CartExample(): JSX.Element {
       >
         Add bundle to cart
       </button>
-      <pre>{JSON.stringify(state, null, 2)}</pre>
+      {data && (
+        <div style={{ textAlign: "left", width: "100%" }}>
+          <h3>Cart State</h3>
+          <ReactJson src={data.state} theme="apathy" />
+        </div>
+      )}
+      {itemDiscounts && (
+        <div style={{ textAlign: "left", width: "100%" }}>
+          <h3>Item Discounts</h3>
+          <ReactJson src={itemDiscounts} theme="apathy" />
+        </div>
+      )}
+      {allDiscounts && (
+        <div style={{ textAlign: "left", width: "100%" }}>
+          <h3>All discounts</h3>
+          <ReactJson src={allDiscounts} theme="apathy" />
+        </div>
+      )}
     </>
   )
 }

packages/react-shopper-hooks/package.json

@@ -40,6 +40,7 @@
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "@tanstack/react-query": "^5.17.15",
+    "@tanstack/react-query-devtools": "^5.32.1",
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
@@ -62,16 +63,21 @@
     "@moltin/sdk": "28.12.0",
     "@tanstack/react-query": "^5.8.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rxjs": "7.5.7"
+  },
+  "peerDependenciesMeta": {
+    "rxjs": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@elasticpath/shopper-common": "workspace:*",
     "js-cookie": "^3.0.5",
-    "jwt-decode": "^3.1.2",
-    "rxjs": "7.5.7"
+    "jwt-decode": "^3.1.2"
   },
   "msw": {
     "workerDirectory": "public"

packages/react-shopper-hooks/src/cart/hooks/index.ts

@@ -15,3 +15,4 @@ export * from "./use-cart-add-bundle-item"
 export * from "./use-cart-clear"
 export * from "./use-cart-remove-promotion"
 export * from "./use-cart-remove-item"
+export * from "./use-cart"

packages/react-shopper-hooks/src/cart/hooks/use-cart-add-bundle-item.tsx

@@ -1,11 +1,14 @@
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 import { useAddBundleProductToCart } from "./use-add-bundle-product-to-cart"
 
 export function useCartAddBundleItem() {
-  const { cartId } = useCart()
+  const { data } = useCart()
   const queryClient = useQueryClient()
+
+  const cartId = data?.cartId!
+
   return useAddBundleProductToCart(cartId, {
     onSuccess: (updatedData) => {
       // Updates the cart items in the query cache

packages/react-shopper-hooks/src/cart/hooks/use-cart-add-product.tsx

@@ -1,13 +1,16 @@
 import { useAddProductToCart } from "./use-add-product"
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 
 export function useCartAddProduct() {
-  const { cartId } = useCart()
+  const { data } = useCart()
   const queryClient = useQueryClient()
+
+  const cartId = data?.cartId!
+
   return useAddProductToCart(cartId, {
-    onSuccess: (updatedData) => {
+    onSuccess: (updatedData, req) => {
       // Updates the cart items in the query cache
       queryClient.setQueryData(
         cartQueryKeys.detail(cartId),

packages/react-shopper-hooks/src/cart/hooks/use-cart-add-promotion.tsx

@@ -1,11 +1,14 @@
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 import { useAddPromotionToCart } from "./use-add-promotion"
 
 export function useCartAddPromotion() {
-  const { cartId } = useCart()
+  const { data } = useCart()
   const queryClient = useQueryClient()
+
+  const cartId = data?.cartId!
+
   return useAddPromotionToCart(cartId, {
     onSuccess: (updatedData) => {
       // Updates the cart items in the query cache

packages/react-shopper-hooks/src/cart/hooks/use-cart-clear.tsx

@@ -1,11 +1,15 @@
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 import { useDeleteCartItems } from "./use-delete-cart-items"
 
 export function useCartClear() {
-  const { cartId } = useCart()
+  const { data } = useCart()
+
+  const cartId = data?.cartId!
+
   const queryClient = useQueryClient()
+
   return useDeleteCartItems(cartId, {
     onSuccess: (updatedData) => {
       // Updates the cart items in the query cache

packages/react-shopper-hooks/src/cart/hooks/use-cart-remove-item.tsx

@@ -1,11 +1,14 @@
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 import { useRemoveCartItem } from "./use-remove-cart-item"
 
 export function useCartRemoveItem() {
-  const { cartId } = useCart()
+  const { data } = useCart()
   const queryClient = useQueryClient()
+
+  const cartId = data?.cartId!
+
   return useRemoveCartItem(cartId, {
     onSuccess: (updatedData) => {
       // Updates the cart items in the query cache

packages/react-shopper-hooks/src/cart/hooks/use-cart-remove-promotion.tsx

@@ -1,11 +1,14 @@
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 import { useRemovePromotionCode } from "./use-remove-promotion"
 
 export function useCartRemovePromotion() {
-  const { cartId } = useCart()
+  const { data } = useCart()
   const queryClient = useQueryClient()
+
+  const cartId = data?.cartId!
+
   return useRemovePromotionCode(cartId, {
     onSuccess: (updatedData) => {
       // Updates the cart items in the query cache

packages/react-shopper-hooks/src/cart/hooks/use-cart-update-item.tsx

@@ -1,11 +1,14 @@
-import { createCartItemsUpdater, useCart } from "../cart-provider"
+import { createCartItemsUpdater, useCart } from "./use-cart"
 import { useQueryClient } from "@tanstack/react-query"
 import { cartQueryKeys } from "./use-get-cart"
 import { useUpdateCartItem } from "./use-update-cart-items"
 
 export function useCartUpdateItem() {
-  const { cartId } = useCart()
+  const { data } = useCart()
   const queryClient = useQueryClient()
+
+  const cartId = data?.cartId!
+
   return useUpdateCartItem(cartId, {
     onSuccess: (updatedData) => {
       // Updates the cart items in the query cache