feat: use product dynamic include

.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

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

@@ -4,30 +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
+        <ElasticPathProvider
           client={client}
-          resolveCartId={() => client.Cart().cartId}
+          queryClientProviderProps={{ client: queryClient }}
         >
-          <CartProvider resolveCartId={() => client.Cart().cartId}>
-            <CartExample />
-          </CartProvider>
-        </StoreProvider>
+          <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

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

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>
+  )
+}

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({

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 & {
+  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,
   })

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> = {