feat(purchase carts): remove started cart (#39)

app/components/purchase-cart-list/purchase-cart-list.tsx

@@ -4,7 +4,7 @@ import formatCurrency from '~/utils/format-currency'
 
 import type { PurchaseCartListProps } from './types'
 
-const PurchaseCartList = ({ cart, onClose }: PurchaseCartListProps) => {
+const PurchaseCartList = ({ cart, onClose, onCartRemoval }: PurchaseCartListProps) => {
   const { items, total_price } = cart
 
   return (
@@ -18,7 +18,11 @@ const PurchaseCartList = ({ cart, onClose }: PurchaseCartListProps) => {
           Cart ({items.length})
         </Text>
 
-        <button className="text-base text-black opacity-50 underline">
+        <button
+          className="text-base text-black opacity-50 underline"
+          type="button"
+          onClick={onCartRemoval}
+        >
           Remove all
         </button>
       </div>

app/components/purchase-cart-list/types.ts

@@ -3,4 +3,5 @@ import type { PurchaseCart } from '~/models/purchase-cart'
 export interface PurchaseCartListProps {
   cart: PurchaseCart
   onClose: () => void
+  onCartRemoval: () => void
 }

app/components/purchase-cart-modal/purchase-cart-modal.tsx

@@ -2,7 +2,7 @@ import { PurchaseCartList, EmptyPurchaseCartList } from '~/components'
 
 import type { PurchaseCartModalProps } from "./types"
 
-const PurchaseCartModal = ({ cart, onClose }: PurchaseCartModalProps) => {
+const PurchaseCartModal = ({ cart, onClose, onCartRemoval }: PurchaseCartModalProps) => {
   return (
     <div className="z-50 fixed top-0 left-0 right-0 bottom-0">
       <div className="relative h-full w-full p-6 sm:px-10">
@@ -12,6 +12,7 @@ const PurchaseCartModal = ({ cart, onClose }: PurchaseCartModalProps) => {
             <PurchaseCartList
               cart={cart}
               onClose={onClose}
+              onCartRemoval={onCartRemoval}
             />
           ) : (
             <EmptyPurchaseCartList onClose={onClose} />

app/components/purchase-cart-modal/types.ts

@@ -3,4 +3,5 @@ import type { PurchaseCart } from '~/models/purchase-cart'
 export interface PurchaseCartModalProps {
   cart: PurchaseCart | undefined
   onClose: () => void
+  onCartRemoval: () => void
 }

app/components/purchase-cart/purchase-cart.tsx

@@ -6,7 +6,7 @@ import { PurchaseCartContext } from '~/contexts/purchase-cart-context'
 import type { PurchaseCartProps } from "./types"
 
 const PurchaseCart = (_args: PurchaseCartProps) => {
-  const { cart, cartListOpen, openCartList, closeCartList } = useContext(PurchaseCartContext)
+  const { cart, cartListOpen, openCartList, closeCartList, removeCart } = useContext(PurchaseCartContext)
 
   return (
     <div className="relative">
@@ -18,6 +18,7 @@ const PurchaseCart = (_args: PurchaseCartProps) => {
         <PurchaseCartModal
           cart={cart}
           onClose={closeCartList}
+          onCartRemoval={removeCart}
         />
       )}
     </div>

app/contexts/purchase-cart-context/purchase-cart-context.tsx

@@ -1,4 +1,5 @@
 import { useState, createContext } from 'react';
+import invariant from 'tiny-invariant'
 import { PurchaseCartSchema } from '~/models/purchase-cart'
 
 import type { PurchaseCart } from '~/models/purchase-cart'
@@ -9,7 +10,8 @@ export const PurchaseCartContext = createContext<IPurchaseCartContext>({
   cartListOpen: false,
   openCartList: () => {},
   closeCartList: () => {},
-  createOrUpdateCart: (_item: PurchaseCartItemPayload) => {}
+  createOrUpdateCart: (_item: PurchaseCartItemPayload) => {},
+  removeCart: () => {},
 })
 
 export const PurchaseCartProvider = ({ children, activeCart }: PurchaseCartProviderProps) => {
@@ -42,12 +44,20 @@ export const PurchaseCartProvider = ({ children, activeCart }: PurchaseCartProvi
     setCart(PurchaseCartSchema.parse(data.cart))
   }
 
+  const removeCart = async () => {
+    invariant(cart, "cart must exist")
+
+    const response = await fetch(`/api/purchase-carts/${cart.uuid}`, { method: 'delete' })
+    if (response.ok) setCart(undefined)
+  }
+
   const contextVal: IPurchaseCartContext = {
     cart,
     cartListOpen,
     openCartList,
     closeCartList,
-    createOrUpdateCart
+    createOrUpdateCart,
+    removeCart
   };
 
   return (

app/contexts/purchase-cart-context/types.ts

@@ -8,6 +8,7 @@ export interface IPurchaseCartContext {
   openCartList: () => void
   closeCartList: () => void,
   createOrUpdateCart: (item: PurchaseCartItemPayload) => void
+  removeCart: () => void
 }
 
 export interface PurchaseCartProviderProps {

app/models/purchase-cart/purchase-cart.server.ts

@@ -49,3 +49,7 @@ export const createOrUpdateCart = async(sessionId: string, cartItem: PurchaseCar
     return createdCart
   }
 }
+
+export const removeCart = async (sessionId: string, cartUuid: string) => {
+  await AudiophileClient.sendRequest('delete', `purchase_carts/${cartUuid}`, { sessionToken: sessionId })
+}

app/routes/api/purchase-carts/$cartUuid.ts

@@ -0,0 +1,18 @@
+import invariant from 'tiny-invariant'
+import { removeCart } from '~/models/purchase-cart'
+import * as SessionStorage from '~/utils/session-storage'
+
+import type { ActionArgs } from '@remix-run/node'
+
+export const action = async ({ params, request }: ActionArgs) => {
+  if (request.method !== 'DELETE') return
+
+  const { sessionId } = await SessionStorage.getOrCreateSessionId(request)
+  invariant(sessionId, 'there must be an active user session')
+
+  const { cartUuid } = params
+  invariant(cartUuid, 'cartUuid must exist')
+
+  await removeCart(sessionId, cartUuid)
+  return new Response('ok', { status: 200 })
+}

app/utils/audiophile-client/audiophile-client.server.ts

@@ -40,7 +40,9 @@ export const sendRequest = async (method: RequestMethod, path: string, { authTok
   const url = buildUrl(path, apiVersion)
 
   const response = await fetch(url, request)
-  const result = await response.json();
+
+  let result
+  if(response.status !== 204) result = await response.json();
 
   if (!response.ok) throw new RequestError(response.status, result?.error);