@crm-market/template-shared 1.0.0

package/components/Wishlist/ProductQuantity.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="product-quantity">
+    <div class="add-to-cart-counter">
+      <div @click="decrement">
+        <input type="button" class="minusBtn" value="-" />
+      </div>
+      <input type="text" size="25" v-model="internalValue" class="count" />
+      <div @click="increment">
+        <input type="button" class="plusBtn" value="+" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const internalValue = ref(0);
+
+const increment = () => {
+  internalValue.value++;
+};
+
+const decrement = () => {
+  if (internalValue.value > 0) {
+    internalValue.value--;
+  }
+};
+</script>

package/components/Wishlist/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="ptb-60">
+    <div class="container">
+      <div class="table-responsive cart-table">
+        <table class="table align-middle">
+          <thead>
+            <tr>
+              <th scope="col">Product</th>
+              <th scope="col">Name</th>
+              <th scope="col">Unit Price</th>
+              <th scope="col">Quantity</th>
+              <th scope="col">Subtotal</th>
+              <th scope="col">Add To Cart</th>
+              <th scope="col">Remove</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <NuxtLink to="/product-details">
+                  <img
+                    src="~/assets/images/product-6.png"
+                    class="cart-product"
+                    alt="product"
+                  />
+                </NuxtLink>
+              </td>
+              <td>
+                <NuxtLink to="/product-details" class="title">
+                  Multiplatform Wireless Noise-Cancelling Gaming Headset
+                </NuxtLink>
+              </td>
+              <td>
+                <span class="price">$79</span>
+              </td>
+              <td>
+                <WishlistProductQuantity />
+              </td>
+              <td>
+                <span class="price">$79</span>
+              </td>
+              <td>
+                <button class="btn btn-warning text-white">Add To Cart</button>
+              </td>
+              <td>
+                <button class="border-0 p-0 bg-transparent remove">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <NuxtLink to="/product-details">
+                  <img
+                    src="~/assets/images/product-7.png"
+                    class="cart-product"
+                    alt="product"
+                  />
+                </NuxtLink>
+              </td>
+              <td>
+                <NuxtLink to="/product-details" class="title">
+                  GPS Smartwatch with Bright Touchscreen Display
+                </NuxtLink>
+              </td>
+              <td>
+                <span class="price">$119</span>
+              </td>
+              <td>
+                <WishlistProductQuantity />
+              </td>
+              <td>
+                <span class="price">$119</span>
+              </td>
+              <td>
+                <button class="btn btn-warning text-white">Add To Cart</button>
+              </td>
+              <td>
+                <button class="border-0 p-0 bg-transparent remove">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <NuxtLink to="/product-details">
+                  <img
+                    src="~/assets/images/product-8.png"
+                    class="cart-product"
+                    alt="product"
+                  />
+                </NuxtLink>
+              </td>
+              <td>
+                <NuxtLink to="/product-details" class="title">
+                  SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
+                </NuxtLink>
+              </td>
+              <td>
+                <span class="price">$397</span>
+              </td>
+              <td>
+                <WishlistProductQuantity />
+              </td>
+              <td>
+                <span class="price">$397</span>
+              </td>
+              <td>
+                <button class="btn btn-warning text-white">Add To Cart</button>
+              </td>
+              <td>
+                <button class="border-0 p-0 bg-transparent remove">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Wishlist",
+};
+</script>

package/composables/useCart.ts

@@ -0,0 +1,149 @@
+import { ref, computed } from 'vue';
+
+interface CartItem {
+  productId: string;
+  name: string;
+  price: number;
+  discountPrice?: number;
+  quantity: number;
+  image?: string;
+}
+
+interface Cart {
+  items: CartItem[];
+  updatedAt: number;
+}
+
+const CART_STORAGE_KEY = 'shopping_cart';
+
+const cart = ref<Cart>({
+  items: [],
+  updatedAt: Date.now(),
+});
+
+export const useCart = () => {
+  // Load cart from localStorage
+  const loadCart = () => {
+    if (process.client) {
+      try {
+        const stored = localStorage.getItem(CART_STORAGE_KEY);
+        if (stored) {
+          cart.value = JSON.parse(stored);
+        }
+      } catch (e) {
+        console.error('Error loading cart:', e);
+      }
+    }
+  };
+
+  // Save cart to localStorage
+  const saveCart = () => {
+    if (process.client) {
+      try {
+        cart.value.updatedAt = Date.now();
+        localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart.value));
+      } catch (e) {
+        console.error('Error saving cart:', e);
+      }
+    }
+  };
+
+  // Add item to cart
+  const addToCart = (item: Omit<CartItem, 'quantity'>, quantity: number = 1) => {
+    const existingItem = cart.value.items.find(
+      i => i.productId === item.productId
+    );
+
+    if (existingItem) {
+      existingItem.quantity += quantity;
+    } else {
+      cart.value.items.push({
+        ...item,
+        quantity,
+      });
+    }
+
+    saveCart();
+  };
+
+  // Remove item from cart
+  const removeFromCart = (productId: string) => {
+    cart.value.items = cart.value.items.filter(
+      i => i.productId !== productId
+    );
+    saveCart();
+  };
+
+  // Update item quantity
+  const updateQuantity = (productId: string, quantity: number) => {
+    const item = cart.value.items.find(i => i.productId === productId);
+    if (item) {
+      if (quantity <= 0) {
+        removeFromCart(productId);
+      } else {
+        item.quantity = quantity;
+        saveCart();
+      }
+    }
+  };
+
+  // Clear cart
+  const clearCart = () => {
+    cart.value.items = [];
+    saveCart();
+  };
+
+  // Check if product is in cart
+  const isInCart = (productId: string) => {
+    return cart.value.items.some(i => i.productId === productId);
+  };
+
+  // Get item quantity
+  const getItemQuantity = (productId: string) => {
+    const item = cart.value.items.find(i => i.productId === productId);
+    return item?.quantity || 0;
+  };
+
+  // Computed properties
+  const itemCount = computed(() =>
+    cart.value.items.reduce((sum, item) => sum + item.quantity, 0)
+  );
+
+  const subtotal = computed(() =>
+    cart.value.items.reduce((sum, item) => {
+      const price = item.discountPrice || item.price;
+      return sum + (price * item.quantity);
+    }, 0)
+  );
+
+  const totalDiscount = computed(() =>
+    cart.value.items.reduce((sum, item) => {
+      if (item.discountPrice && item.discountPrice < item.price) {
+        return sum + ((item.price - item.discountPrice) * item.quantity);
+      }
+      return sum;
+    }, 0)
+  );
+
+  const isEmpty = computed(() => cart.value.items.length === 0);
+
+  // Initialize cart on first use
+  if (process.client && cart.value.items.length === 0) {
+    loadCart();
+  }
+
+  return {
+    cart,
+    addToCart,
+    removeFromCart,
+    updateQuantity,
+    clearCart,
+    isInCart,
+    getItemQuantity,
+    loadCart,
+    itemCount,
+    subtotal,
+    totalDiscount,
+    isEmpty,
+  };
+};

package/composables/useCategories.ts

@@ -0,0 +1,87 @@
+import { ref, computed } from 'vue';
+
+interface Category {
+  id: string;
+  name: string;
+  slug?: string;
+  description?: string;
+  image?: string;
+  parentId?: string;
+  organizationId: string;
+  isActive: boolean;
+  order?: number;
+}
+
+const categories = ref<Category[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+export const useCategories = () => {
+  const config = useRuntimeConfig();
+  const { publicApiToken } = useSiteConfig();
+
+  // Fetch all categories
+  const fetchCategories = async () => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const token = publicApiToken.value;
+      if (!token) {
+        throw new Error('Store token not available');
+      }
+
+      const response = await $fetch<{ categories: Category[] }>('/site-template/public/store/categories', {
+        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        params: { token },
+      });
+
+      categories.value = response.categories;
+      return response.categories;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to load categories';
+      console.error('Error loading categories:', e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Get category by ID
+  const getCategoryById = (categoryId: string) => {
+    return categories.value.find(c => c.id === categoryId);
+  };
+
+  // Get category by slug
+  const getCategoryBySlug = (slug: string) => {
+    return categories.value.find(c => c.slug === slug);
+  };
+
+  // Computed properties
+  const activeCategories = computed(() =>
+    categories.value.filter(c => c.isActive)
+  );
+
+  const topLevelCategories = computed(() =>
+    activeCategories.value.filter(c => !c.parentId)
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+  );
+
+  const getSubcategories = (parentId: string) => {
+    return activeCategories.value
+      .filter(c => c.parentId === parentId)
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+  };
+
+  return {
+    categories,
+    loading,
+    error,
+    fetchCategories,
+    getCategoryById,
+    getCategoryBySlug,
+    activeCategories,
+    topLevelCategories,
+    getSubcategories,
+  };
+};

package/composables/useCheckout.ts

@@ -0,0 +1,131 @@
+import { ref } from 'vue';
+
+interface ShippingAddress {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  postalCode: string;
+  country: string;
+  notes?: string;
+}
+
+interface OrderData {
+  items: Array<{
+    productId: string;
+    quantity: number;
+    price: number;
+  }>;
+  shippingAddress: ShippingAddress;
+  paymentMethod: string;
+  deliveryMethod?: string;
+  totalAmount: number;
+  organizationId: string;
+}
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const orderId = ref<string | null>(null);
+
+export const useCheckout = () => {
+  const config = useRuntimeConfig();
+  const { cart, clearCart } = useCart();
+  const { organizationId } = useSiteConfig();
+
+  // Submit order
+  const submitOrder = async (
+    shippingAddress: ShippingAddress,
+    paymentMethod: string,
+    deliveryMethod?: string
+  ) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const orderData: OrderData = {
+        items: cart.value.items.map(item => ({
+          productId: item.productId,
+          quantity: item.quantity,
+          price: item.discountPrice || item.price,
+        })),
+        shippingAddress,
+        paymentMethod,
+        deliveryMethod,
+        totalAmount: cart.value.items.reduce(
+          (sum, item) => sum + (item.discountPrice || item.price) * item.quantity,
+          0
+        ),
+        organizationId: organizationId.value!,
+      };
+
+      const response = await $fetch<{ id: string }>('/order', {
+        method: 'POST',
+        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        body: orderData,
+      });
+
+      orderId.value = response.id;
+      clearCart();
+      return response;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to submit order';
+      console.error('Error submitting order:', e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Get order by ID
+  const getOrder = async (id: string) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const response = await $fetch(`/order/${id}`, {
+        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+      });
+
+      return response;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to load order';
+      console.error('Error loading order:', e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Validate checkout data
+  const validateCheckout = (shippingAddress: ShippingAddress) => {
+    const errors: string[] = [];
+
+    if (!shippingAddress.firstName) errors.push('First name is required');
+    if (!shippingAddress.lastName) errors.push('Last name is required');
+    if (!shippingAddress.email) errors.push('Email is required');
+    if (!shippingAddress.phone) errors.push('Phone is required');
+    if (!shippingAddress.address) errors.push('Address is required');
+    if (!shippingAddress.city) errors.push('City is required');
+    if (!shippingAddress.postalCode) errors.push('Postal code is required');
+
+    if (cart.value.items.length === 0) {
+      errors.push('Cart is empty');
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors,
+    };
+  };
+
+  return {
+    loading,
+    error,
+    orderId,
+    submitOrder,
+    getOrder,
+    validateCheckout,
+  };
+};

package/composables/useProducts.ts

@@ -0,0 +1,162 @@
+import { ref, computed } from 'vue';
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
+  discountPrice?: number;
+  images: string[];
+  description?: string;
+  categoryId: string;
+  organizationId: string;
+  isActive: boolean;
+  stock?: number;
+  rating?: number;
+  reviews?: number;
+}
+
+interface ProductFilters {
+  categoryId?: string;
+  minPrice?: number;
+  maxPrice?: number;
+  search?: string;
+  sortBy?: 'price' | 'name' | 'rating' | 'newest';
+  sortOrder?: 'asc' | 'desc';
+}
+
+const products = ref<Product[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const currentProduct = ref<Product | null>(null);
+
+export const useProducts = () => {
+  const config = useRuntimeConfig();
+  const { publicApiToken } = useSiteConfig();
+
+  // Fetch all products with optional filters
+  const fetchProducts = async (filters?: ProductFilters) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const token = publicApiToken.value;
+      if (!token) {
+        throw new Error('Store token not available');
+      }
+
+      const params: any = {
+        token,
+        ...filters,
+      };
+
+      const response = await $fetch<{ products: Product[]; total: number }>('/site-template/public/store/products', {
+        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        params,
+      });
+
+      products.value = response.products;
+      return response.products;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to load products';
+      console.error('Error loading products:', e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Fetch single product by ID
+  const fetchProduct = async (productId: string) => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const token = publicApiToken.value;
+      if (!token) {
+        throw new Error('Store token not available');
+      }
+
+      const response = await $fetch<{ product: Product }>(`/site-template/public/store/products/${productId}`, {
+        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        params: { token },
+      });
+
+      currentProduct.value = response.product;
+      return response.product;
+    } catch (e: any) {
+      error.value = e.message || 'Failed to load product';
+      console.error('Error loading product:', e);
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Fetch products for a specific section without mutating global state
+  const fetchProductsForSection = async (filters?: ProductFilters & { limit?: number; offset?: number }): Promise<Product[]> => {
+    try {
+      const token = publicApiToken.value;
+      if (!token) return [];
+
+      const params: any = {
+        token,
+        ...filters,
+      };
+
+      const response = await $fetch<{ products: Product[]; total: number }>('/site-template/public/store/products', {
+        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        params,
+      });
+
+      return response.products;
+    } catch (e: any) {
+      console.error('Error loading products for section:', e);
+      return [];
+    }
+  };
+
+  // Get products by category
+  const getProductsByCategory = async (categoryId: string) => {
+    return fetchProducts({ categoryId });
+  };
+
+  // Search products
+  const searchProducts = async (query: string) => {
+    return fetchProducts({ search: query });
+  };
+
+  // Computed properties
+  const activeProducts = computed(() =>
+    products.value.filter(p => p.isActive)
+  );
+
+  const discountedProducts = computed(() =>
+    activeProducts.value.filter(p => p.discountPrice && p.discountPrice < p.price)
+  );
+
+  const bestRatedProducts = computed(() =>
+    [...activeProducts.value]
+      .sort((a, b) => (b.rating || 0) - (a.rating || 0))
+      .slice(0, 10)
+  );
+
+  const newestProducts = computed(() =>
+    [...activeProducts.value].slice(0, 10)
+  );
+
+  return {
+    products,
+    currentProduct,
+    loading,
+    error,
+    fetchProducts,
+    fetchProduct,
+    fetchProductsForSection,
+    getProductsByCategory,
+    searchProducts,
+    activeProducts,
+    discountedProducts,
+    bestRatedProducts,
+    newestProducts,
+  };
+};