@weareconceptstudio/cart 0.0.1

package/README.md

@@ -0,0 +1,350 @@
+# @weareconceptstudio/cart
+
+Simple and clean Zustand-based cart management for single and variant products.
+
+## Features
+
+✅ **Simple API** - Easy-to-use hooks for cart operations  
+✅ **Variant Support** - Handle products with variants (color, size, etc.)  
+✅ **Guest & Logged-in Users** - Cookie-based cart for guests, server-side for authenticated users  
+✅ **TypeScript** - Full type safety  
+✅ **Zustand** - Fast and minimal state management  
+✅ **Clean Code** - Easy to read and maintain  
+
+## Installation
+
+```bash
+npm install @weareconceptstudio/cart zustand
+```
+
+## Quick Start
+
+### 1. Initialize the cart store (in your app entry point)
+
+```typescript
+import { initCartStore } from '@weareconceptstudio/cart';
+
+// For simple products (no variants)
+initCartStore(
+  { hasVariants: false },
+  isLoggedIn,
+  selectedLang
+);
+
+// For products with variants (color, size, etc.)
+initCartStore(
+  { hasVariants: true },
+  isLoggedIn,
+  selectedLang
+);
+```
+
+### 2. Use cart in your components
+
+#### For Simple Products (No Variants)
+
+```typescript
+import { useSimpleCart } from '@weareconceptstudio/cart';
+
+function ProductCard({ productId }) {
+  const { addProduct, removeProduct, isInCart, getProductQty } = useSimpleCart();
+
+  return (
+    <div>
+      {isInCart(productId) ? (
+        <>
+          <span>Qty: {getProductQty(productId)}</span>
+          <button onClick={() => removeProduct(productId)}>Remove</button>
+        </>
+      ) : (
+        <button onClick={() => addProduct(productId, 1)}>Add to Cart</button>
+      )}
+    </div>
+  );
+}
+```
+
+#### For Products with Variants (Color, Size)
+
+```typescript
+import { useVariantCart } from '@weareconceptstudio/cart';
+
+function ProductWithVariants({ productId, variantId, optionId }) {
+  const { addVariantProduct, isVariantInCart, getVariantQty } = useVariantCart();
+
+  const inCart = isVariantInCart(productId, variantId, optionId);
+
+  return (
+    <div>
+      {inCart ? (
+        <span>Qty: {getVariantQty(productId, variantId, optionId)}</span>
+      ) : (
+        <button onClick={() => addVariantProduct(productId, variantId, optionId, 1)}>
+          Add to Cart
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+#### Cart Summary / Mini Cart
+
+```typescript
+import { useCart } from '@weareconceptstudio/cart';
+
+function MiniCart() {
+  const { items, itemsCount, total, currency, clearCart, loading } = useCart();
+
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <h3>Cart ({itemsCount} items)</h3>
+      
+      {items.map((item) => (
+        <div key={item.product.id}>
+          <span>{item.product.name}</span>
+          <span>Qty: {item.qty}</span>
+          <span>{item.product.price} {currency}</span>
+        </div>
+      ))}
+
+      <div>Total: {total} {currency}</div>
+      <button onClick={clearCart}>Clear Cart</button>
+    </div>
+  );
+}
+```
+
+#### Checkout
+
+```typescript
+import { useCheckout } from '@weareconceptstudio/cart';
+
+function Checkout() {
+  const {
+    checkout,
+    setAddress,
+    setPaymentMethod,
+    setNote,
+    isReadyForCheckout,
+    total,
+    itemsCount,
+  } = useCheckout();
+
+  const handleCheckout = async () => {
+    if (!isReadyForCheckout()) {
+      alert('Cart is not ready for checkout');
+      return;
+    }
+
+    try {
+      const result = await checkout();
+      
+      if (result.redirect_url) {
+        window.location.href = result.redirect_url;
+      }
+    } catch (error) {
+      console.error('Checkout error:', error);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Checkout</h2>
+      <p>Items: {itemsCount}</p>
+      <p>Total: {total}</p>
+
+      <button onClick={() => setAddress(123)}>Select Address</button>
+      <button onClick={() => setPaymentMethod('cash_on_delivery')}>
+        Cash on Delivery
+      </button>
+      <textarea onChange={(e) => setNote(e.target.value)} placeholder="Add note" />
+
+      <button onClick={handleCheckout} disabled={!isReadyForCheckout()}>
+        Complete Order
+      </button>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Hooks
+
+#### `useCart()`
+Main hook with full cart state and operations.
+
+**Returns:**
+- `items` - Array of cart items with product details
+- `itemsCount` - Total number of items
+- `subtotal` - Cart subtotal
+- `total` - Cart total
+- `currency` - Currency code
+- `loading` - Loading state
+- `addItem()` - Add item to cart
+- `removeItem()` - Remove item from cart
+- `updateItem()` - Update item quantity
+- `clearCart()` - Clear entire cart
+- `getCart()` - Refresh cart from server
+
+#### `useSimpleCart()`
+Simplified hook for products without variants.
+
+**Returns:**
+- `addProduct(productId, qty)` - Add simple product
+- `removeProduct(productId)` - Remove simple product
+- `updateProductQty(productId, qty)` - Update quantity
+- `isInCart(productId)` - Check if product is in cart
+- `getProductQty(productId)` - Get product quantity
+- `items`, `itemsCount`, `loading`
+
+#### `useVariantCart()`
+Hook for products with variants (color, size, etc.).
+
+**Returns:**
+- `addVariantProduct(productId, variantId, optionId, qty)` - Add variant product
+- `removeVariantProduct(productId, variantId, optionId)` - Remove variant product
+- `updateVariantProductQty(productId, variantId, optionId, qty)` - Update quantity
+- `isVariantInCart(productId, variantId, optionId)` - Check if variant is in cart
+- `getVariantQty(productId, variantId, optionId)` - Get variant quantity
+- `items`, `itemsCount`, `loading`
+
+#### `useCheckout()`
+Hook for checkout operations.
+
+**Returns:**
+- `checkout()` - Complete checkout
+- `setAddress(addressId)` - Set delivery address
+- `setPaymentMethod(paymentType, cardId?)` - Set payment method
+- `setNote(note)` - Add order note
+- `applyPromoCode(code)` - Apply promotion code
+- `isReadyForCheckout()` - Check if ready to checkout
+- `checkoutData`, `total`, `subtotal`, `itemsCount`, `loading`
+
+### Store
+
+#### `initCartStore(config, isLoggedIn, selectedLang)`
+Initialize the cart store (call once at app start).
+
+**Parameters:**
+- `config.hasVariants` - Whether products have variants
+- `isLoggedIn` - User authentication status
+- `selectedLang` - Current language (default: 'en')
+
+#### `useCartStore()`
+Direct access to Zustand store (advanced usage).
+
+## Types
+
+### CartItem
+```typescript
+// Simple product
+interface BaseCartItem {
+  productId: number;
+  qty: number;
+}
+
+// Product with variants
+interface VariantCartItem extends BaseCartItem {
+  variantId: number;
+  optionId: number;
+  itemId?: number;
+}
+```
+
+### CartConfig
+```typescript
+interface CartConfig {
+  hasVariants: boolean;
+}
+```
+
+## Migration from Context API
+
+If you're migrating from the old Context-based cart:
+
+### Before (Context API)
+```typescript
+const { toggleCartItem, items } = useCart();
+
+toggleCartItem({ productId: 123, qty: 1 });
+```
+
+### After (Zustand)
+```typescript
+import { useSimpleCart } from '@weareconceptstudio/cart';
+
+const { addProduct, items } = useSimpleCart();
+
+addProduct(123, 1);
+```
+
+## Examples
+
+### Counter Component
+```typescript
+import { useSimpleCart } from '@weareconceptstudio/cart';
+
+function Counter({ productId }) {
+  const { getProductQty, updateProductQty } = useSimpleCart();
+  const qty = getProductQty(productId);
+
+  return (
+    <div>
+      <button onClick={() => updateProductQty(productId, qty - 1)}>-</button>
+      <span>{qty}</span>
+      <button onClick={() => updateProductQty(productId, qty + 1)}>+</button>
+    </div>
+  );
+}
+```
+
+### Product with Variants
+```typescript
+import { useVariantCart } from '@weareconceptstudio/cart';
+
+function ProductPage({ product }) {
+  const { addVariantProduct } = useVariantCart();
+  const [selectedVariant, setSelectedVariant] = useState(product.variants[0]);
+  const [selectedOption, setSelectedOption] = useState(selectedVariant.options[0]);
+
+  const handleAddToCart = () => {
+    addVariantProduct(
+      product.id,
+      selectedVariant.id,
+      selectedOption.id,
+      1
+    );
+  };
+
+  return (
+    <div>
+      <h1>{product.name}</h1>
+      
+      {/* Color selection */}
+      {product.variants.map(variant => (
+        <button key={variant.id} onClick={() => setSelectedVariant(variant)}>
+          {variant.color.name}
+        </button>
+      ))}
+
+      {/* Size selection */}
+      {selectedVariant.options.map(option => (
+        <button key={option.id} onClick={() => setSelectedOption(option)}>
+          {option.size.name}
+        </button>
+      ))}
+
+      <button onClick={handleAddToCart}>Add to Cart</button>
+    </div>
+  );
+}
+```
+
+## License
+
+ISC © Concept Studio
+

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Cart Hooks
+ */
+export { useCart, useSimpleCart, useVariantCart, useCheckout } from './useCart';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,5 @@
+/**
+ * Cart Hooks
+ */
+export { useCart, useSimpleCart, useVariantCart, useCheckout } from './useCart';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/dist/hooks/useCart.d.ts

@@ -0,0 +1,131 @@
+/**
+ * useCart Hook
+ * Enhanced hook for cart operations with all features from old Context implementation
+ */
+import { AddToCartParams, RemoveFromCartParams, UpdateCartItemParams } from '../types';
+/**
+ * Main cart hook with backward compatibility
+ * Provides full API matching old Context-based cart
+ */
+export declare function useCart(): {
+    items: import("../types").CartItemWithProduct[];
+    itemsCount: number;
+    formatted_subtotal: string | number;
+    subtotal: number;
+    total: number;
+    formatted_total: string | number;
+    currency: string;
+    shippingCost: string | number;
+    formatted_shippingCost: string;
+    loading: boolean;
+    discount: number;
+    formatted_discount: string;
+    appliedPromotions: any[];
+    remaining: number;
+    formatted_remaining: string;
+    shippingCostValue: number;
+    formatted_shippingCostValue: string;
+    shippingCityName: string;
+    hasFreeGift: true;
+    giftThresholdRemaining: number;
+    formatted_giftThresholdRemaining: string;
+    useBalance: string | number;
+    formatted_useBalance: string;
+    promotion_code: string;
+    promotion_error: string;
+    utensils: any[];
+    checkoutData: import("../types").CheckoutData;
+    setCheckoutData: (data: Partial<import("../types").CheckoutData>) => void;
+    addItem: (params: AddToCartParams) => Promise<void>;
+    removeItem: (params: RemoveFromCartParams) => Promise<void>;
+    updateItem: (params: UpdateCartItemParams) => Promise<void>;
+    clearCart: () => Promise<void>;
+    getCart: (params?: Record<string, any>) => Promise<void>;
+    mergeCart: () => Promise<void>;
+    syncCart: () => Promise<void>;
+    toggleCartItem: (params: {
+        productId: number;
+        qty: number;
+        variantId?: number;
+        optionId?: number;
+        itemId?: number;
+        update?: boolean;
+    }) => Promise<void>;
+    deleteCartItem: (params: {
+        productId: number;
+        variantId?: number;
+        optionId?: number;
+    }) => Promise<void>;
+    editCartItem: (params: any) => Promise<void>;
+    setGifts: ({ promotionId, qty, productId }: {
+        promotionId: number;
+        qty: number;
+        productId: number;
+    }) => void;
+    togglePromotion: ({ promotionId }: {
+        promotionId: number;
+    }) => void;
+    fillCheckoutData: (keyOrObject: Partial<import("../types").CheckoutData> | keyof import("../types").CheckoutData, value?: any) => void;
+    fillCart: (key: string, value: any) => void;
+    setCartState: (data: any) => void;
+    resetCart: () => void;
+    reorder: (orderId: number) => Promise<void>;
+    updateCheckoutData: (data: Partial<import("../types").CheckoutData>) => void;
+    checkout: () => Promise<any>;
+    handleCheckout: () => Promise<any>;
+    idramFormData: any;
+    setIdramForm: (form: any) => void;
+    submitIdramPayment: () => void;
+    checkoutBtnDisabled: any;
+    isCheckoutPage: boolean;
+    isCartPage: boolean;
+    isLoggedIn: boolean;
+    config: import("../types").CartConfig;
+    user: any;
+    setUser: (user: any) => void;
+};
+/**
+ * Hook for simple add to cart (without variants)
+ */
+export declare function useSimpleCart(): {
+    addProduct: (productId: number, qty?: number) => Promise<void>;
+    removeProduct: (productId: number) => Promise<void>;
+    updateProductQty: (productId: number, qty: number) => Promise<void>;
+    isInCart: (productId: number) => boolean;
+    getProductQty: (productId: number) => number;
+    items: import("../types").CartItemWithProduct[];
+    itemsCount: number;
+    loading: boolean;
+};
+/**
+ * Hook for variant products (with color/size)
+ */
+export declare function useVariantCart(): {
+    addVariantProduct: (productId: number, variantId: number, optionId: number, qty?: number) => Promise<void>;
+    removeVariantProduct: (productId: number, variantId: number, optionId: number) => Promise<void>;
+    updateVariantProductQty: (productId: number, variantId: number, optionId: number, qty: number) => Promise<void>;
+    isVariantInCart: (productId: number, variantId: number, optionId: number) => boolean;
+    getVariantQty: (productId: number, variantId: number, optionId: number) => number;
+    items: import("../types").CartItemWithProduct[];
+    itemsCount: number;
+    loading: boolean;
+};
+/**
+ * Hook for checkout operations
+ */
+export declare function useCheckout(): {
+    checkoutData: import("../types").CheckoutData;
+    updateCheckoutData: (data: Partial<import("../types").CheckoutData>) => void;
+    checkout: () => Promise<any>;
+    setAddress: (addressId: number) => void;
+    setPaymentMethod: (paymentType: string, cardId?: number) => void;
+    setNote: (note: string) => void;
+    applyPromoCode: (code: string) => void;
+    isReadyForCheckout: () => boolean;
+    itemsCount: number;
+    total: number;
+    subtotal: number;
+    shippingCost: string | number;
+    loading: boolean;
+};
+//# sourceMappingURL=useCart.d.ts.map

package/dist/hooks/useCart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCart.d.ts","sourceRoot":"","sources":["../../src/hooks/useCart.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGvF;;;GAGG;AACH,wBAAgB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BAKgB;QACrC,SAAS,EAAE,MAAM,CAAC;QAClB,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KACjB;6BAqBqC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE;2BAY9D,GAAG;;;;;;;;;;;yBAiBX,GAAG;;;;;;;;;;;;;;;;EAmG/B;AAED;;GAEG;AACH,wBAAgB,aAAa;4BAMS,MAAM,QAAO,MAAM;+BAOhB,MAAM;kCAOH,MAAM,OAAO,MAAM;0BAOjC,MAAM,KAAG,OAAO;+BAOX,MAAM,KAAG,MAAM;;;;EAejD;AAED;;GAEG;AACH,wBAAgB,cAAc;mCAMe,MAAM,aAAa,MAAM,YAAY,MAAM,QAAO,MAAM;sCAOrD,MAAM,aAAa,MAAM,YAAY,MAAM;yCAOxC,MAAM,aAAa,MAAM,YAAY,MAAM,OAAO,MAAM;iCAOtE,MAAM,aAAa,MAAM,YAAY,MAAM,KAAG,OAAO;+BASvD,MAAM,aAAa,MAAM,YAAY,MAAM,KAAG,MAAM;;;;EAiBtF;AAED;;GAEG;AACH,wBAAgB,WAAW;;;;4BAOK,MAAM;oCAOE,MAAM,WAAW,MAAM;oBAOvC,MAAM;2BAOC,MAAM;8BAOL,OAAO;;;;;;EAmBtC"}