fix: Migrate useCart composable to TypeScript

Replaces useCart.js with useCart.ts, adding type safety and improving error handling. Introduces shared types for cart items, product, and button statuses in shared/types/index.ts to support the new TypeScript implementation.

Author: zackha

app/composables/useCart.js

@@ -0,0 +1,92 @@
+import { push } from 'notivue';
+
+export const useCart = () => {
+  const cart = useState<CartItem[]>('cart', () => []);
+  const addToCartButtonStatus = ref<AddBtnStatus>('add');
+  const removeFromCartButtonStatus = ref<RemoveBtnStatus>('remove');
+
+  const findItem = (variationId: number) => cart.value.find(i => i.variation?.node?.databaseId === variationId);
+
+  const updateCart = (next: CartItem[]) => {
+    cart.value = next;
+    if (process.client) localStorage.setItem('cart', JSON.stringify(next));
+  };
+
+  const handleAddToCart = async (productId: number) => {
+    try {
+      addToCartButtonStatus.value = 'loading';
+      const res = await $fetch<AddToCartResponse>('/api/cart/add', { method: 'POST', body: { productId } });
+      const incoming = res.addToCart.cartItem;
+      const idx = cart.value.findIndex(i => i.key === incoming.key);
+
+      if (idx > -1) {
+        const merged = { ...cart.value[idx], ...incoming };
+        if (typeof incoming.variation?.node?.stockQuantity === 'number') {
+          merged.variation.node.stockQuantity = incoming.variation.node.stockQuantity;
+        }
+        updateCart([...cart.value.slice(0, idx), merged, ...cart.value.slice(idx + 1)]);
+      } else {
+        updateCart([...cart.value, incoming]);
+      }
+
+      addToCartButtonStatus.value = 'added';
+      setTimeout(() => (addToCartButtonStatus.value = 'add'), 2000);
+    } catch {
+      addToCartButtonStatus.value = 'add';
+      push.error('Insufficient stock');
+    }
+  };
+
+  const changeQty = (key: string, quantity: number) => {
+    try {
+      $fetch('/api/cart/update', { method: 'POST', body: { items: [{ key, quantity }] } });
+      if (quantity <= 0) updateCart(cart.value.filter(i => i.key !== key));
+      else updateCart(cart.value.map(i => (i.key === key ? { ...i, quantity } : i)));
+    } catch {
+      push.error('Unable to update quantity');
+    }
+  };
+
+  const handleRemoveFromCart = async (key: string) => {
+    try {
+      removeFromCartButtonStatus.value = 'loading';
+      changeQty(key, 0);
+    } finally {
+      removeFromCartButtonStatus.value = 'remove';
+    }
+  };
+
+  const increment = async (variationId: number) => {
+    const item = findItem(variationId);
+    if (!item) return handleAddToCart(variationId);
+    const max = item.variation?.node?.stockQuantity ?? Infinity;
+    if (item.quantity >= max) return push.error('Insufficient stock');
+    changeQty(item.key, item.quantity + 1);
+  };
+
+  const decrement = async (variationId: number) => {
+    const item = findItem(variationId);
+    if (item) changeQty(item.key, item.quantity - 1);
+  };
+
+  onMounted(() => {
+    if (!process.client) return;
+    const stored = localStorage.getItem('cart');
+    if (!stored) return;
+    try {
+      updateCart(JSON.parse(stored) as CartItem[]);
+    } catch {
+      updateCart([]);
+    }
+  });
+
+  return {
+    cart,
+    addToCartButtonStatus,
+    removeFromCartButtonStatus,
+    handleAddToCart,
+    handleRemoveFromCart,
+    increment,
+    decrement,
+  };
+};

app/composables/useCart.ts

@@ -0,0 +1,35 @@
+export type Money = string | number;
+
+export interface VariationNode {
+  databaseId: number;
+  salePrice: Money;
+  regularPrice: Money;
+  stockQuantity?: number;
+  image?: { sourceUrl: string };
+}
+
+export interface Variation {
+  node: VariationNode;
+  attributes: Array<{ value: string }>;
+}
+
+export interface ProductNode {
+  sku: string;
+  slug: string;
+  name: string;
+}
+
+export interface CartItem {
+  key: string;
+  quantity: number;
+  product: { node: ProductNode };
+  variation: Variation;
+}
+
+export interface AddToCartResponse {
+  addToCart: { cartItem: CartItem };
+}
+
+export type AddBtnStatus = 'add' | 'loading' | 'added';
+
+export type RemoveBtnStatus = 'remove' | 'loading';