@meeovi/layer-commerce 1.0.10 → 1.0.13

package/app/pages/cart.vue

@@ -0,0 +1,142 @@
+<!-- pages/cart.vue -->
+<template>
+    <div class="cartPage">
+      <h2>Shopping Cart</h2>
+      
+      <div v-if="cart.items.length === 0" class="empty-cart">
+        Your cart is empty
+      </div>
+      
+      <div v-else>
+        <div v-for="item in cart.items" :key="item.id" class="cart-item">
+          <div class="item-details">
+            <h3>{{ item.name }}</h3>
+            <p>Price: ${{ item.price }}</p>
+            <p>Quantity: {{ item.quantity }}</p>
+          </div>
+          <v-btn @click="cart.removeItem(item.id)" color="error">
+            Remove
+          </v-btn>
+        </div>
+        
+        <div class="cart-total">
+          <h3>Total: ${{ cart.total }}</h3>
+        </div>
+
+        <!-- Shipping selection -->
+        <div class="cart-shipping my-4">
+          <ShippingOptions v-model="selectedShipping" />
+        </div>
+
+        <div class="cart-actions mt-4">
+          <v-btn
+            color="primary"
+            :disabled="cart.items.length === 0 || loading"
+            @click="startCheckout"
+          >
+            <span v-if="!loading">Checkout</span>
+            <span v-else>Preparing...</span>
+          </v-btn>
+
+          <PayPalButtons
+            @payment-success="handlePaymentSuccess"
+            @payment-error="handlePaymentError"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { useCartStore } from '~/stores/cart'
+  
+  import ShippingOptions from '../components/catalog/product/shippingOptions.vue'
+  import { ref, computed } from 'vue'
+
+  const cart = useCartStore()
+  const loading = ref(false)
+
+  const selectedShipping = computed({
+    get: () => cart.cart?.shipping_method_id ?? cart.cart?.shipping_method ?? null,
+    set: async (val) => {
+      try {
+        // Let the component/composable persist to the cart store; call store as a fallback
+        if (cart && cart.setShippingOption) {
+          await cart.setShippingOption({ id: val })
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to set shipping from cart page', e)
+      }
+    }
+  })
+
+  const handlePaymentSuccess = (order) => {
+    console.log('Payment successful:', order)
+  }
+
+  const handlePaymentError = (error) => {
+    console.error('Payment failed:', error)
+  }
+
+  const startCheckout = async () => {
+    if (!cart || !cart.createCheckoutSession) return
+    try {
+      loading.value = true
+      const data = await cart.createCheckoutSession(cart.cart?.id)
+      const url = data?.url || (data?.id ? `https://checkout.stripe.com/pay/${data.id}` : null)
+      if (url) {
+        window.location.href = url
+      } else if (data && data.id) {
+        // fallback: use injected Stripe instance from plugin if available
+        const nuxtApp = useNuxtApp()
+        const injectedStripe = nuxtApp?.$stripe || null
+        if (injectedStripe && typeof injectedStripe.redirectToCheckout === 'function') {
+          await injectedStripe.redirectToCheckout({ sessionId: data.id })
+        } else if (window && window.Stripe) {
+          // last-resort: use global Stripe if present
+          const publishable = (useRuntimeConfig() || {}).public?.stripe?.publishableKey || null
+          if (publishable) {
+            const stripe = window.Stripe(publishable)
+            await stripe.redirectToCheckout({ sessionId: data.id })
+          } else {
+            console.warn('No Stripe publishable key available for client-side redirect')
+          }
+        } else {
+          console.warn('No client Stripe instance available for redirect')
+        }
+      } else {
+        console.warn('No checkout url returned from server')
+      }
+    } catch (e) {
+      console.error('Failed to start checkout', e)
+    } finally {
+      loading.value = false
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .cartPage {
+    padding: 20px;
+  }
+  
+  .cart-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .cart-total {
+    margin-top: 20px;
+    text-align: right;
+  }
+  
+  .empty-cart {
+    text-align: center;
+    padding: 50px;
+  }
+  </style>
+  

package/app/pages/compare.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="compare-page">
+    <div class="container mx-auto px-4 py-8">
+      <h1 class="text-3xl font-bold mb-8">Compare Products</h1>
+      
+      <div v-if="loading" class="text-center">
+        <p>Loading products...</p>
+      </div>
+      
+      <div v-else-if="error" class="text-center text-red-500">
+        <p>Error loading products: {{ error.message }}</p>
+      </div>
+      
+      <div v-else-if="!products.length" class="text-center">
+        <p>No products selected for comparison. Add products to your compare list to see them here.</p>
+        <NuxtLink to="/" class="mt-4 inline-block text-blue-500 hover:text-blue-700">
+          Continue Shopping
+        </NuxtLink>
+      </div>
+      
+      <div v-else>
+        <productCompareTable 
+          :products="products" 
+          @remove-product="handleRemoveProduct"
+        />
+        
+        <div class="mt-8 flex justify-between">
+          <button 
+            @click="clearCompareList" 
+            class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            Clear Compare List
+          </button>
+          <NuxtLink 
+            to="/" 
+            class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Continue Shopping
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useQuery, useMutation } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+import productCompareTable from '~/components/catalog/product/productCompareTable.vue';
+
+// GraphQL query to get compared products
+const COMPARED_PRODUCTS_QUERY = gql`
+  query GetComparedProducts {
+    customer {
+      compare_list {
+        items {
+          product {
+            uid
+            sku
+            name
+            image {
+              url
+            }
+            price_range {
+              minimum_price {
+                regular_price {
+                  currency
+                  value
+                }
+              }
+            }
+            categories {
+              name
+            }
+            rating_summary
+            review_count
+            reviews_summary
+            price_history
+            custom_attributes
+            features
+          }
+        }
+      }
+    }
+  }
+`;
+
+// GraphQL mutation to clear compare list
+const CLEAR_COMPARE_LIST_MUTATION = gql`
+  mutation ClearCompareList {
+    clearCompareList {
+      compare_list {
+        items {
+          product {
+            uid
+          }
+        }
+      }
+    }
+  }
+`;
+
+// GraphQL mutation to remove a single product from compare list
+const REMOVE_PRODUCT_MUTATION = gql`
+  mutation RemoveFromCompareList($productId: ID!) {
+    removeProductsFromCompareList(input: { product_ids: [$productId] }) {
+      compare_list {
+        items {
+          product {
+            uid
+          }
+        }
+      }
+    }
+  }
+`;
+
+const { result, loading, error, refetch } = useQuery(COMPARED_PRODUCTS_QUERY);
+const { mutate: clearCompareListMutation } = useMutation(CLEAR_COMPARE_LIST_MUTATION);
+const { mutate: removeProductMutation } = useMutation(REMOVE_PRODUCT_MUTATION);
+
+const products = computed(() => {
+  return result.value?.customer?.compare_list?.items?.map(item => item.product) || [];
+});
+
+const clearCompareList = async () => {
+  try {
+    await clearCompareListMutation();
+    await refetch();
+  } catch (error) {
+    console.error('Failed to clear compare list:', error);
+  }
+};
+
+const handleRemoveProduct = async (productId) => {
+  try {
+    await removeProductMutation({
+      variables: {
+        productId
+      }
+    });
+    await refetch();
+  } catch (error) {
+    console.error('Failed to remove product from compare list:', error);
+  }
+};
+
+onMounted(async () => {
+  await refetch();
+});
+</script>
+
+<style scoped>
+.compare-page {
+  min-height: 100vh;
+  background-color: #f9fafb;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+</style>