feat: wip react query cart mutations

packages/react-shopper-hooks/src/context/cart.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react"
+import { useCreateCart, useUpdateCart } from "../hooks/cart"
+import { Cart } from "../types"
+
+interface CartState {
+  cart?: Cart
+}
+
+interface CartContext extends CartState {
+  setCart: (cart: Cart) => void
+  pay: ReturnType<typeof useSetPaymentSession>
+  createCart: ReturnType<typeof useCreateCart>
+  startCheckout: ReturnType<typeof useCreatePaymentSession>
+  completeCheckout: ReturnType<typeof useCompleteCart>
+  updateCart: ReturnType<typeof useUpdateCart>
+  addShippingMethod: ReturnType<typeof useAddShippingMethodToCart>
+  totalItems: number
+}
+
+const CartContext = React.createContext<CartContext | null>(null)
+
+export const useCart = () => {
+  const context = React.useContext(CartContext)
+  if (!context) {
+    throw new Error("useCart must be used within a CartProvider")
+  }
+  return context
+}
+
+interface CartProps {
+  children: React.ReactNode
+  initialState?: Cart
+}
+
+const defaultInitialState = {
+  id: "",
+  items: [] as any,
+} as Cart
+
+export const CartProvider = ({
+  children,
+  initialState = defaultInitialState,
+}: CartProps) => {
+  const [cart, setCart] = useState<Cart>(initialState)
+
+  const createCart = useCreateCart({
+    onSuccess: (response) => setCart(cart),
+  })
+
+  const updateCart = useUpdateCart(cart?.id, {
+    onSuccess: ({ cart }) => setCart(cart),
+  })
+
+  const addShippingMethod = useAddShippingMethodToCart(cart?.id, {
+    onSuccess: ({ cart }) => setCart(cart),
+  })
+
+  const startCheckout = useCreatePaymentSession(cart?.id, {
+    onSuccess: ({ cart }) => setCart(cart),
+  })
+
+  const pay = useSetPaymentSession(cart?.id, {
+    onSuccess: ({ cart }) => {
+      setCart(cart)
+    },
+  })
+
+  const completeCheckout = useCompleteCart(cart?.id)
+
+  const totalItems = cart?.items
+    .map((i) => i.quantity)
+    .reduce((acc, curr) => acc + curr, 0)
+
+  return (
+    <CartContext.Provider
+      value={{
+        cart,
+        setCart,
+        createCart,
+        pay,
+        startCheckout,
+        completeCheckout,
+        updateCart,
+        addShippingMethod,
+        totalItems: totalItems || 0,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  )
+}

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

@@ -1 +1,2 @@
 export * from "./queries"
+export * from "./mutations"

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

@@ -0,0 +1,97 @@
+import {
+  Address,
+  Cart,
+  CartAdditionalHeaders,
+  CartItemsResponse,
+  CheckoutCustomer,
+  CheckoutCustomerObject,
+  CreateCartObject,
+  Moltin as ElasticPath,
+  Order,
+  Resource,
+} from "@moltin/sdk"
+import { useMutation, UseMutationOptions } from "@tanstack/react-query"
+import { useElasticPath } from "../../context"
+
+type CartFnReturn = ReturnType<ElasticPath["Cart"]>
+
+export const useCreateCart = (
+  options?: UseMutationOptions<
+    Resource<Cart>,
+    Error,
+    {
+      data: CreateCartObject
+      token?: string
+    }
+  >,
+) => {
+  const { client } = useElasticPath()
+  return useMutation({
+    mutationFn: ({ data, token }: { data: CreateCartObject; token?: string }) =>
+      client.Cart().CreateCart(data, token),
+    ...options,
+  })
+}
+
+export const useUpdateCart = (
+  cartId: string,
+  options?: UseMutationOptions<
+    CartItemsResponse,
+    Error,
+    {
+      data: CreateCartObject
+      token?: string
+    }
+  >,
+) => {
+  const { client } = useElasticPath()
+  return useMutation({
+    mutationFn: ({ data, token }: { data: CreateCartObject; token?: string }) =>
+      client.Cart(cartId).UpdateCart(data, token),
+    ...options,
+  })
+}
+
+export const useCheckoutCart = (
+  cartId: string,
+  options?: UseMutationOptions<
+    Resource<Order>,
+    Error,
+    {
+      customer: string | CheckoutCustomer | CheckoutCustomerObject
+      billingAddress: Partial<Address>
+      shippingAddress?: Partial<Address>
+      additionalHeaders?: CartAdditionalHeaders
+    }
+  >,
+) => {
+  const { client } = useElasticPath()
+  return useMutation({
+    mutationFn: ({
+      customer,
+      billingAddress,
+      shippingAddress,
+      additionalHeaders,
+    }: {
+      customer: string | CheckoutCustomer | CheckoutCustomerObject
+      billingAddress: Partial<Address>
+      shippingAddress?: Partial<Address>
+      additionalHeaders?: CartAdditionalHeaders
+    }) =>
+      client
+        .Cart(cartId)
+        .Checkout(customer, billingAddress, shippingAddress, additionalHeaders),
+    ...options,
+  })
+}
+
+export const useRemoveAllItems = (
+  cartId: string,
+  options?: UseMutationOptions<CartItemsResponse, Error>,
+) => {
+  const { client } = useElasticPath()
+  return useMutation({
+    mutationFn: () => client.Cart(cartId).RemoveAllItems(),
+    ...options,
+  })
+}