From 2ba0976c9f50834a14e050c724d0fb4f15122f00 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:04:47 +0100
Subject: [PATCH 1/7] fix: update provider props

---
 packages/react-shopper-hooks/example/App.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-shopper-hooks/example/App.tsx b/packages/react-shopper-hooks/example/App.tsx
index e6ce02c8..6d80f9ad 100644
--- a/packages/react-shopper-hooks/example/App.tsx
+++ b/packages/react-shopper-hooks/example/App.tsx
@@ -17,11 +17,8 @@ function App() {
     <div className="App">
       <h1>React Shopper Hooks</h1>
       <div className="card">
-        <StoreProvider
-          client={client}
-          resolveCartId={() => client.Cart().cartId}
-        >
-          <CartProvider resolveCartId={() => client.Cart().cartId}>
+        <StoreProvider cartId={client.Cart().cartId}>
+          <CartProvider cartId={client.Cart().cartId}>
             <CartExample />
           </CartProvider>
         </StoreProvider>

From 8096afac91ff5de9519aa2de57b63e79420623f2 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:05:04 +0100
Subject: [PATCH 2/7] feat: make use products include dynamic

---
 .../src/product/hooks/use-products.ts                | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-shopper-hooks/src/product/hooks/use-products.ts b/packages/react-shopper-hooks/src/product/hooks/use-products.ts
index 0ce5b30e..643b411d 100644
--- a/packages/react-shopper-hooks/src/product/hooks/use-products.ts
+++ b/packages/react-shopper-hooks/src/product/hooks/use-products.ts
@@ -17,11 +17,17 @@ export type UseProductsParams = NonNullable<
   Parameters<Moltin["ShopperCatalog"]["Products"]["All"]>
 >[0]
 
+export type ShopperCatalogProductsInclude =
+  | "main_image"
+  | "files"
+  | "component_products"
+
 export function useProducts(
   params: UseProductsParams & {
     limit?: number
     offset?: number
     filter?: object
+    include?: ShopperCatalogProductsInclude | ShopperCatalogProductsInclude[]
   },
   options?: UseQueryOptionsWrapper<
     ShopperCatalogResourcePage<ProductResponse>,
@@ -31,17 +37,17 @@ export function useProducts(
 ): UseQueryResult<ShopperCatalogResourcePage<ProductResponse>, Error> {
   const { client } = useElasticPath()
 
-  const { limit = 25, offset = 0, filter = {} } = params
+  const { limit = 25, offset = 0, filter = {}, include = [] } = params
 
   return useQuery({
     queryKey: [
-      ...productsQueryKeys.list({ limit, offset, filter, ...options }),
+      ...productsQueryKeys.list({ limit, offset, filter, include, ...options }),
     ],
     queryFn: () =>
       client.ShopperCatalog.Products.Limit(limit)
         .Offset(offset)
         .Filter(filter)
-        .With(["main_image", "component_products", "files"])
+        .With(include)
         .All(),
     ...options,
   })

From f64aa5693263fbf5c207c045666ab51df9d7eef8 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:10:47 +0100
Subject: [PATCH 3/7] feat: make use products params optional

---
 .../react-shopper-hooks/src/product/hooks/use-products.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-shopper-hooks/src/product/hooks/use-products.ts b/packages/react-shopper-hooks/src/product/hooks/use-products.ts
index 643b411d..8dc218da 100644
--- a/packages/react-shopper-hooks/src/product/hooks/use-products.ts
+++ b/packages/react-shopper-hooks/src/product/hooks/use-products.ts
@@ -23,7 +23,7 @@ export type ShopperCatalogProductsInclude =
   | "component_products"
 
 export function useProducts(
-  params: UseProductsParams & {
+  params?: UseProductsParams & {
     limit?: number
     offset?: number
     filter?: object
@@ -37,7 +37,7 @@ export function useProducts(
 ): UseQueryResult<ShopperCatalogResourcePage<ProductResponse>, Error> {
   const { client } = useElasticPath()
 
-  const { limit = 25, offset = 0, filter = {}, include = [] } = params
+  const { limit = 25, offset = 0, filter = {}, include = [] } = params ?? {}
 
   return useQuery({
     queryKey: [

From 3039c1114f22dd22c1048a3dfa12932334dd1249 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:15:14 +0100
Subject: [PATCH 4/7] feat: allow select options

---
 packages/react-shopper-hooks/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-shopper-hooks/src/types.ts b/packages/react-shopper-hooks/src/types.ts
index 80e05c88..591a049c 100644
--- a/packages/react-shopper-hooks/src/types.ts
+++ b/packages/react-shopper-hooks/src/types.ts
@@ -9,7 +9,7 @@ export type UseQueryOptionsWrapper<
   TQueryKey extends QueryKey = QueryKey,
 > = Omit<
   UseQueryOptions<TQueryFn, E, TQueryFn, TQueryKey>,
-  "queryKey" | "queryFn" | "select" | "refetchInterval"
+  "queryKey" | "queryFn" | "refetchInterval"
 >
 
 export type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {

From db656969296001fdbcb54b446f1d93673f96498b Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:31:09 +0100
Subject: [PATCH 5/7] feat: remove params for use delete cart query

---
 .../src/cart/hooks/use-delete-cart-items.ts               | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/react-shopper-hooks/src/cart/hooks/use-delete-cart-items.ts b/packages/react-shopper-hooks/src/cart/hooks/use-delete-cart-items.ts
index d75db1f9..7b69007f 100644
--- a/packages/react-shopper-hooks/src/cart/hooks/use-delete-cart-items.ts
+++ b/packages/react-shopper-hooks/src/cart/hooks/use-delete-cart-items.ts
@@ -2,15 +2,9 @@ import { useMutation, UseMutationOptions } from "@tanstack/react-query"
 import { useElasticPath } from "../../elasticpath"
 import { CartItemsResponse } from "@moltin/sdk"
 
-type CartDeleteCartItemsReq = {}
-
 export const useDeleteCartItems = (
   cartId: string,
-  options?: UseMutationOptions<
-    CartItemsResponse,
-    Error,
-    CartDeleteCartItemsReq
-  >,
+  options?: UseMutationOptions<CartItemsResponse, Error>,
 ) => {
   const { client } = useElasticPath()
   return useMutation({

From a0b92866f237daa3f8318e6b2378c2e564a29419 Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:31:22 +0100
Subject: [PATCH 6/7] feat: add product list example

---
 packages/react-shopper-hooks/example/App.tsx  | 43 ++++++++++++++-----
 .../example/CartExample.tsx                   | 16 ++++---
 .../example/ProductListExample.tsx            | 17 ++++++++
 3 files changed, 58 insertions(+), 18 deletions(-)
 create mode 100644 packages/react-shopper-hooks/example/ProductListExample.tsx

diff --git a/packages/react-shopper-hooks/example/App.tsx b/packages/react-shopper-hooks/example/App.tsx
index 6d80f9ad..e181cb80 100644
--- a/packages/react-shopper-hooks/example/App.tsx
+++ b/packages/react-shopper-hooks/example/App.tsx
@@ -4,27 +4,48 @@ 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"
+
+const client = EPCCGateway({
+  name: "my_store",
+  client_id: import.meta.env.VITE_APP_EPCC_CLIENT_ID,
+  client_secret: import.meta.env.VITE_APP_EPCC_CLIENT_SECRET,
+  host: import.meta.env.VITE_APP_EPCC_HOST,
+})
+
+const queryClient = new QueryClient()
 
 function App() {
-  const client = EPCCGateway({
-    name: "my_store",
-    client_id: import.meta.env.VITE_APP_EPCC_CLIENT_ID,
-    client_secret: import.meta.env.VITE_APP_EPCC_CLIENT_SECRET,
-    host: import.meta.env.VITE_APP_EPCC_HOST,
-  })
+  const [activeItem, setActiveItem] = React.useState<"cart" | "products">(
+    "cart",
+  )
 
   return (
     <div className="App">
       <h1>React Shopper Hooks</h1>
+      <div>
+        <button onClick={() => setActiveItem("cart")}>Cart View</button>
+        <button onClick={() => setActiveItem("products")}>Products View</button>
+      </div>
       <div className="card">
-        <StoreProvider cartId={client.Cart().cartId}>
-          <CartProvider cartId={client.Cart().cartId}>
-            <CartExample />
-          </CartProvider>
-        </StoreProvider>
+        <ElasticPathProvider
+          client={client}
+          queryClientProviderProps={{ client: queryClient }}
+        >
+          <StoreProvider cartId={client.Cart().cartId}>
+            <CartProvider cartId={client.Cart().cartId}>
+              {activeItem === "cart" && <CartExample />}
+              {activeItem === "products" && <ProductListExample />}
+            </CartProvider>
+          </StoreProvider>
+        </ElasticPathProvider>
       </div>
     </div>
   )
 }
 
+function TanstackWrapper() {}
+
 export default App
diff --git a/packages/react-shopper-hooks/example/CartExample.tsx b/packages/react-shopper-hooks/example/CartExample.tsx
index b2a8e046..5b30d9cb 100644
--- a/packages/react-shopper-hooks/example/CartExample.tsx
+++ b/packages/react-shopper-hooks/example/CartExample.tsx
@@ -1,16 +1,19 @@
 import React from "react"
-import { useCart } from "../src/cart"
+import { useCart, useCartAddBundleItem, useCartClear } from "../src/cart"
 
 export default function CartExample(): JSX.Element {
-  const { state, addBundleProductToCart, emptyCart } = useCart()
+  const { state } = useCart()
+  const { mutate: addBundleProductToCart } = useCartAddBundleItem()
+  const { mutate: emptyCart } = useCartClear()
   return (
     <>
       <button onClick={() => emptyCart()}>Empty Cart</button>
       <button
         onClick={() =>
-          addBundleProductToCart(
-            "14edd744-c615-4a33-a2c2-df999bbb5103",
-            {
+          addBundleProductToCart({
+            productId: "14edd744-c615-4a33-a2c2-df999bbb5103",
+            quantity: 1,
+            selectedOptions: {
               plants: {
                 "a158ffa0-5d16-4325-8dcc-be8acd55eecf": 1,
               },
@@ -21,8 +24,7 @@ export default function CartExample(): JSX.Element {
                 "7ffe107d-c5bd-4de4-b8f0-a58d90cb3cd3": 1,
               },
             },
-            1,
-          )
+          })
         }
       >
         Add bundle to cart
diff --git a/packages/react-shopper-hooks/example/ProductListExample.tsx b/packages/react-shopper-hooks/example/ProductListExample.tsx
new file mode 100644
index 00000000..aeba61fe
--- /dev/null
+++ b/packages/react-shopper-hooks/example/ProductListExample.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import { useProducts } from "../src"
+
+export function ProductListExample() {
+  const { data: products } = useProducts()
+  return (
+    <div>
+      <h1>Product List</h1>
+      {products?.data.map((product) => (
+        <div key={product.id}>
+          <h2>{product.attributes.name}</h2>
+          <p>{product.id}</p>
+        </div>
+      ))}
+    </div>
+  )
+}

From 2e677fb4efb98af2d1931a6a35406d9f5756110e Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Wed, 1 May 2024 11:33:50 +0100
Subject: [PATCH 7/7] chore: added changeset

---
 .changeset/calm-hotels-move.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/calm-hotels-move.md

diff --git a/.changeset/calm-hotels-move.md b/.changeset/calm-hotels-move.md
new file mode 100644
index 00000000..4f1b9245
--- /dev/null
+++ b/.changeset/calm-hotels-move.md
@@ -0,0 +1,9 @@
+---
+"@elasticpath/react-shopper-hooks": minor
+---
+
+- add product list example
+- add product now takes optional params
+- remove params for use delete cart query
+- allow select query function
+- make add product include params dynamic