@meeovi/layer-commerce 1.0.10 → 1.0.13

package/app/components/partials/ShoppingCart.vue

@@ -0,0 +1,128 @@
+<template>
+  <v-sheet class="pa-4" elevation="2">
+    <div class="flex items-center justify-between mb-4">
+      <h3 class="text-lg font-semibold">Your Cart ({{ cartStore.itemCount }})</h3>
+      <v-btn color="primary" variant="tonal" @click="proceedToCheckout" :disabled="cartStore.isEmpty || cartStore.loading">
+        Proceed to Checkout
+      </v-btn>
+    </div>
+
+    <v-divider />
+
+    <div v-if="cartStore.loading" class="py-6 text-center">Loading cart…</div>
+
+    <div v-else>
+      <v-list two-line>
+        <v-list-item v-for="item in cartItems" :key="item.id" class="py-4">
+          <PartialsCartItem :item="item" @cart-changed="initialize" />
+        </v-list-item>
+      </v-list>
+
+      <v-divider class="my-4" />
+
+      <div class="flex flex-col gap-2">
+        <div class="flex justify-between">
+          <span>Subtotal</span>
+          <span>{{ formatPrice(cartStore.subtotal) }}</span>
+        </div>
+        <div class="flex justify-between">
+          <span>Tax</span>
+          <span>{{ formatPrice(cartStore.taxAmount) }}</span>
+        </div>
+        <div class="flex justify-between font-semibold text-lg">
+          <span>Total</span>
+          <span>{{ formatPrice(cartStore.total) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="cartStore.error" class="mt-4 text-sm text-error">{{ cartStore.error }}</div>
+  </v-sheet>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import { useCartStore } from '~/stores/cart'
+import { useRouter } from 'vue-router'
+
+const cartStore = useCartStore()
+const router = useRouter()
+
+const placeholder = '/_assets/placeholder.png'
+
+const quantities = ref({})
+
+const cartItems = computed(() => (cartStore.cart?.items || []))
+
+const initialize = async () => {
+  await cartStore.initializeCart()
+  // initialize local quantity map
+  cartItems.value.forEach((it) => {
+    quantities.value[it.id] = it.quantity
+  })
+}
+
+onMounted(() => {
+  initialize()
+})
+
+watch(cartItems, (newItems) => {
+  // keep local quantities in sync when items change
+  newItems.forEach((it) => {
+    if (!quantities.value[it.id]) quantities.value[it.id] = it.quantity
+  })
+})
+
+const getImageUrl = (item) => {
+  const file = item.product?.images?.[0]
+  const config = useRuntimeConfig()
+  if (file && file.id) return `${config.public.directus.url}/assets/${file.id}`
+  return placeholder
+}
+
+const formatPrice = (value) => {
+  const amount = typeof value === 'number' ? value : Number(value || 0)
+  return new Intl.NumberFormat(undefined, { style: 'currency', currency: cartStore.cart?.currency || 'USD' }).format(amount)
+}
+
+const removeItem = async (item) => {
+  await cartStore.removeProductFromCart(item.id)
+}
+
+const updateQty = async (itemId, qty) => {
+  qty = Number(qty)
+  if (isNaN(qty) || qty < 1) return
+  await cartStore.updateProductQuantity(itemId, qty)
+}
+
+const onQtyChange = async (item) => {
+  const newQty = quantities.value[item.id]
+  await updateQty(item.id, newQty)
+}
+
+const increaseQty = async (item) => {
+  quantities.value[item.id] = (quantities.value[item.id] || item.quantity) + 1
+  await updateQty(item.id, quantities.value[item.id])
+}
+
+const decreaseQty = async (item) => {
+  const newVal = (quantities.value[item.id] || item.quantity) - 1
+  if (newVal <= 0) {
+    // remove item
+    await removeItem(item)
+    return
+  }
+  quantities.value[item.id] = newVal
+  await updateQty(item.id, newVal)
+}
+
+const proceedToCheckout = () => {
+  // navigate to a checkout route; adjust if project uses a different path
+  router.push('/checkout')
+}
+</script>
+
+<style scoped>
+.v-list-item { align-items: flex-start; }
+.w-24 { width: 6rem; }
+</style>

package/app/components/partials/StripePayment.vue

@@ -0,0 +1,149 @@
+<!-- components/StripePayment.vue -->
+<template>
+    <div class="stripe-payment-container">
+        <div v-if="error" class="error-message">
+            {{ error }}
+        </div>
+
+        <div v-if="stripe && clientSecret" class="payment-form">
+            <form @submit.prevent="handleSubmit">
+                <div ref="paymentElement"></div>
+
+                <button type="submit" class="payment-button" :disabled="!stripe || loading">
+                    <span v-if="loading">Processing...</span>
+                    <span v-else>Pay Now</span>
+                </button>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    ref,
+    onMounted
+} from 'vue'
+import type {
+    Stripe,
+    StripeElements
+} from '@stripe/stripe-js'
+import {
+    loadStripe
+} from '@stripe/stripe-js'
+
+const props = defineProps < {
+    orderCode: string,
+    clientSecret: string
+} > ()
+
+const stripe = ref < Stripe | null > (null)
+const elements = ref < StripeElements | null > (null)
+const error = ref < string | null > (null)
+const loading = ref(false)
+const paymentElement = ref < HTMLDivElement | null > (null)
+const clientSecret = ref < string > (props.clientSecret)
+
+onMounted(async () => {
+    try {
+        stripe.value = await loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY)
+        if (stripe.value && clientSecret.value) {
+            elements.value = stripe.value.elements({
+                clientSecret: clientSecret.value,
+                appearance: {
+                    theme: 'stripe',
+                    variables: {
+                        colorPrimary: '#0570de',
+                        colorBackground: '#ffffff',
+                        colorText: '#30313d'
+                    }
+                }
+            })
+
+            // Create and mount payment element
+            if (elements.value && paymentElement.value) {
+                const element = elements.value.create('payment')
+                element.mount(paymentElement.value as HTMLDivElement)
+            }
+        }
+    } catch (err) {
+        error.value = 'Failed to initialize Stripe'
+        console.error('Stripe initialization error:', err)
+    }
+})
+
+const handleSubmit = async () => {
+    if (!stripe.value || !elements.value) {
+        return
+    }
+
+    try {
+        loading.value = true
+        error.value = null
+
+        const {
+            error: stripeError
+        } = await stripe.value.confirmPayment({
+            elements: elements.value,
+            confirmParams: {
+                return_url: `${window.location.origin}/checkout/confirmation/${props.orderCode}`,
+            },
+        })
+
+        if (stripeError) {
+            error.value = stripeError.message || 'Payment failed'
+        }
+    } catch (err) {
+        error.value = 'An unexpected error occurred'
+        console.error('Payment error:', err)
+    } finally {
+        loading.value = false
+    }
+}
+</script>
+
+<style scoped>
+    .stripe-payment-container {
+        max-width: 500px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .error-message {
+        color: #df1b41;
+        background-color: #fff0f0;
+        padding: 12px;
+        border-radius: 4px;
+        margin-bottom: 16px;
+    }
+
+    .payment-form {
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 4px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .payment-button {
+        background: #5469d4;
+        color: #ffffff;
+        border: none;
+        border-radius: 4px;
+        padding: 12px 16px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        display: block;
+        width: 100%;
+        margin-top: 24px;
+        transition: all 0.2s ease;
+    }
+
+    .payment-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .payment-button:hover:not(:disabled) {
+        filter: brightness(1.1);
+    }
+</style>

package/app/components/partials/addToCartBtn.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <v-btn size="lg" class="w-full xs:ml-4" :disabled="loading || hasItemInCart" @click="addToCart">
+      <template #prefix>
+        <SfIconShoppingCart size="sm" />
+      </template>
+      Add to Cart
+    </v-btn>
+    <compareBtn />
+  </div>
+</template>
+
+<script setup>
+import { SfIconShoppingCart } from "@storefront-ui/vue";
+import compareBtn from './compareBtn.vue';
+import { useCartStore } from '~/stores/cart'
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+});
+
+const cart = useCartStore()
+
+const addToCart = async (product) => {
+  try {
+    await cart.addItem({
+      sku: product.sku,
+      name: product.name,
+      price: product.price,
+      qty: 1
+    })
+  } catch (error) {
+    // Handle error (show notification, etc.)
+    console.error('Failed to add item to cart:', error)
+  }
+}
+</script>

package/app/components/partials/cartItem.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="flex items-center py-4 border-b border-gray-200">
+    <div class="shrink-0 w-24 h-24">
+      <productCard :product="productForCard" />
+    </div>
+    <div class="ml-4 flex-1">
+      <h3 class="text-lg font-medium text-gray-900">{{ item.productVariant?.name }}</h3>
+      <p class="mt-1 text-sm text-gray-500">SKU: {{ item.productVariant?.sku }}</p>
+      <div class="mt-2 flex items-center">
+        <div class="flex items-center border border-gray-300 rounded">
+          <button
+            class="px-2 py-1 text-gray-600 hover:bg-gray-100"
+            @click="updateQuantity(item.id, item.quantity - 1)"
+            :disabled="item.quantity <= 1"
+          >
+            -
+          </button>
+          <span class="px-4 py-1">{{ item.quantity }}</span>
+          <button
+            class="px-2 py-1 text-gray-600 hover:bg-gray-100"
+            @click="updateQuantity(item.id, item.quantity + 1)"
+          >
+            +
+          </button>
+        </div>
+        <button
+          class="ml-4 text-sm text-red-600 hover:text-red-800"
+          @click="removeItem(item.id)"
+        >
+          Remove
+        </button>
+      </div>
+    </div>
+    <div class="ml-4 text-right">
+      <p class="text-lg font-medium text-gray-900">
+        {{ formatPrice(item.unitPriceWithTax || productForCardPrice) }}
+      </p>
+      <p v-if="item.listPriceWithTax && item.listPriceWithTax !== item.unitPriceWithTax" class="mt-1 text-sm text-gray-500 line-through">
+        {{ formatPrice(item.listPriceWithTax) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import productCard from '../catalog/product/productCard.vue';
+import { computed } from 'vue';
+
+const props = defineProps<{ item: Record<string, any> }>();
+const emit = defineEmits(['cart-changed'])
+const nuxtApp = useNuxtApp()
+
+// Prepare a product object compatible with productCard.vue
+const productForCard = computed(() => {
+  const pv = props.item?.productVariant || {};
+  return {
+    id: pv?.product?.id || pv?.id || props.item?.id,
+    name: pv?.name || pv?.product?.name,
+    image: pv?.featuredAsset ? { filename_disk: pv.featuredAsset?.id } : (pv?.product?.image || {}),
+    brands: pv?.product?.brands || [],
+    currency: pv?.product?.currency || [],
+    price: (props.item?.unitPriceWithTax && props.item.unitPriceWithTax / 100) || pv?.price || 0,
+    rating: pv?.product?.rating || 0,
+  };
+});
+
+const productForCardPrice = computed(() => productForCard.value?.price || 0);
+
+async function removeItem(orderLineId: string) {
+  try {
+    // Try to delete using Directus client
+    try {
+      if (nuxtApp.$directus && nuxtApp.$directus.items) {
+        await nuxtApp.$directus.items('order_lines').delete(orderLineId);
+      } else if (nuxtApp.$deleteItem) {
+        await nuxtApp.$deleteItem('order_lines', orderLineId);
+      }
+    } catch (e) {
+      console.warn('Directus delete failed, falling back to plugin helper or ignoring', e);
+    }
+
+    emit('cart-changed');
+  } catch (error) {
+    console.error('Failed to remove item:', error);
+  }
+}
+
+async function updateQuantity(orderLineId: string, newQuantity: number) {
+  if (newQuantity < 1) return;
+  try {
+    // Try to update via Directus SDK
+    try {
+      if (nuxtApp.$directus && nuxtApp.$directus.items) {
+        await nuxtApp.$directus.items('order_lines').update(orderLineId, { quantity: newQuantity });
+      } else if (nuxtApp.$createItem) {
+        // Fallback: read existing, delete and recreate with new quantity
+        const existing = await nuxtApp.$readItem('order_lines', orderLineId).catch(() => null);
+        if (existing) {
+          await nuxtApp.$deleteItem('order_lines', orderLineId).catch(() => null);
+          const payload = { ...existing, quantity: newQuantity };
+          delete payload.id;
+          await nuxtApp.$createItem('order_lines', payload).catch(() => null);
+        }
+      }
+    } catch (e) {
+      console.warn('Directus update fallback failed', e);
+    }
+
+    emit('cart-changed');
+  } catch (error) {
+    console.error('Failed to update quantity:', error);
+  }
+}
+
+function formatPrice(price: number) {
+  const p = price ?? 0;
+  // If price seems to be in cents (large integer), convert
+  const normalized = p > 1000 ? p / 100 : p;
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(normalized);
+}
+</script>

package/app/components/partials/checkoutButton.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+      <v-btn color="primary" @click="redirectToCheckout">
+        Proceed to Payment
+      </v-btn>
+    </div>
+  </template>
+  
+  <script setup>
+  import getActiveOrderQuery from '#graphql/app/commerce/queries/activeOrder.gql';
+
+  const nuxtApp = useNuxtApp();
+
+  const redirectToCheckout = async () => {
+    try {
+      // Fetch the active order to get the order code or id
+      const orderRes = await nuxtApp.$graphql.request(getActiveOrderQuery);
+      const order = orderRes?.activeOrder;
+      if (!order) return;
+
+      // Attempt to create a checkout session in Directus
+      try {
+        const payload = {
+          orderCode: order.code,
+          items: (order.lines || []).map((l) => ({ sku: l?.productVariant?.sku, quantity: l.quantity }))
+        };
+        const created = await nuxtApp.$createItem('checkout_sessions', payload);
+        // support common response shapes
+        const redirectUrl = created?.redirect_url || created?.data?.redirect_url || created?.url || created?.data?.url;
+        if (redirectUrl) {
+          window.location.href = redirectUrl;
+          return;
+        }
+      } catch (e) {
+        console.warn('Directus checkout session creation failed, falling back:', e);
+      }
+
+      // Fallback: redirect to local confirmation route
+      window.location.href = `/checkout/confirmation/${order.code}`;
+    } catch (error) {
+      console.error('Checkout redirect failed:', error);
+    }
+  };
+  </script>

package/app/components/partials/compareBtn.vue

@@ -0,0 +1,68 @@
+<template>
+  <SfButton size="sm" variant="tertiary" @click="handleCompare" :disabled="isInCompare">
+    <template #prefix>
+      <SfIconCompareArrows size="sm" />
+    </template>
+    {{ buttonText }}
+  </SfButton>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useCompareStore } from '../../stores/compare';
+  import { useNuxtApp } from '#imports';
+  import type { Product } from '../../types/product';
+
+  // Define props
+  const props = defineProps<{ product: Product }>();
+
+  const compareStore = useCompareStore();
+  const { $directus } = useNuxtApp() as any;
+
+  // Check if the product is already in compare list
+  const isInCompare = computed(() => {
+    return compareStore.getComparedProducts.some((product: { sku: string; }) => product.sku === props.product?.sku) || compareStore.getComparedProductSkus.includes(props.product?.sku);
+  });
+
+  // Dynamically update button text
+  const buttonText = computed(() => (isInCompare.value ? 'In Compare List' : 'Add to Compare'));
+
+  // Handle Add/Remove from Compare list using Directus where possible
+  const handleCompare = async () => {
+    try {
+      if (!props.product || !props.product.sku) {
+        throw new Error('Product data is required');
+      }
+
+      const sku = props.product.sku;
+
+      if (isInCompare.value) {
+        // Remove from Directus compare_items collection if exists
+        try {
+          const itemsRes = await $directus.$readItems('compare_items', { filter: { sku: { _eq: sku } } });
+          const items = itemsRes?.data || itemsRes || [];
+          for (const it of items) {
+            const id = it.id || it._id || it.ID;
+            if (id) await $directus.$deleteItem('compare_items', id);
+          }
+        } catch (e) {
+          // ignore Directus errors, still update local store
+          console.warn('Directus remove compare item failed:', e);
+        }
+
+        compareStore.removeComparedProduct(sku);
+      } else {
+        // Add to Directus compare_items collection
+        try {
+          await $directus.$createItem('compare_items', { sku });
+        } catch (e) {
+          console.warn('Directus create compare item failed:', e);
+        }
+
+        compareStore.addComparedProductSku(sku);
+      }
+    } catch (error) {
+      console.error('Error handling compare:', error);
+    }
+  };
+</script>

package/app/components/partials/ratings.vue

@@ -0,0 +1,13 @@
+<template>
+    <v-rating size="lg" :half-increment="true" :model-value="(rating?.rating)" :max="5" />
+</template>
+
+<script setup>
+
+    const props = defineProps({
+        rating: {
+            type: Number,
+            default: 5
+        },
+    });
+</script>

package/app/components/partials/store/CurrencySelector.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="currency-selector">
+    <select v-model="selectedCurrency" @change="handleCurrencyChange" class="currency-select">
+      <option v-for="currency in availableCurrencies" :key="currency.code" :value="currency.code">
+        {{ currency.symbol }} {{ currency.code }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    onMounted,
+    watch
+  } from 'vue'
+  import {
+    useCurrencyStore
+  } from '~/stores/currency'
+  import {
+    useQuery,
+    useMutation
+  } from '@vue/apollo-composable'
+  import {
+    CURRENCY_QUERY
+  } from '#graphql/commerce/queries/currency.gql'
+  import {
+    UPDATE_USER_CURRENCY
+  } from '#graphql/commerce/mutations/updateUserCurrency.gql'
+  import {
+    getCurrencySymbol
+  } from '~/utils/currency'
+  import {
+    useCurrency
+  } from '~/app/composables/useCurrency'
+
+  const store = useCurrencyStore()
+  const selectedCurrency = ref('')
+  const availableCurrencies = ref([])
+
+  const {
+    currentCurrency,
+    setCurrency
+  } = useCurrency()
+
+  // Fetch currency data from Magento
+  const {
+    result: currencyResult
+  } = useQuery(CURRENCY_QUERY)
+
+  // Mutation for updating user currency preference
+  const {
+    mutate: updateUserCurrency
+  } = useMutation(UPDATE_USER_CURRENCY)
+
+  // Watch for currency data changes
+  watch(currencyResult, (newResult) => {
+    if (newResult?.currency) {
+      const {
+        available_currency_codes,
+        exchange_rates,
+        default_display_currency_code
+      } = newResult.currency
+
+      // Map available currencies with their symbols
+      availableCurrencies.value = available_currency_codes.map(code => ({
+        code,
+        symbol: getCurrencySymbol(code),
+        rate: exchange_rates.find(rate => rate.currency_to === code)?.rate || 1
+      }))
+
+      // Set initial currency from user preference or default
+      const userCurrency = store.getCurrentCurrency
+      selectedCurrency.value = userCurrency || default_display_currency_code
+
+      // Update exchange rates in store
+      const ratesObj = {}
+      exchange_rates.forEach(({
+        currency_to,
+        rate
+      }) => {
+        ratesObj[currency_to] = rate
+      })
+      store.setExchangeRates(ratesObj)
+    }
+  })
+
+  // Handle currency change
+  const handleCurrencyChange = async () => {
+    await setCurrency(selectedCurrency.value)
+
+    // If user is logged in, save preference
+    if (store.user) {
+      try {
+        await updateUserCurrency({
+          variables: {
+            currency: selectedCurrency.value
+          }
+        })
+      } catch (error) {
+        console.error('Failed to update user currency preference:', error)
+      }
+    }
+  }
+
+  onMounted(() => {
+    // Initialize with store currency if available
+    if (currentCurrency.value) {
+      selectedCurrency.value = currentCurrency.value
+    }
+  })
+</script>
+
+<style scoped>
+  .currency-selector {
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  .currency-select {
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: white;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .currency-select:focus {
+    outline: none;
+    border-color: #007bff;
+  }
+</style>