@mframework/layer-commerce 0.0.5 → 0.0.8

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>

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="container">
+    
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

package/app/components/related/brandCard.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <section data-bs-version="5.1" data-sortbtn="btn-primary">
+            <div class="container">
+                <div class="row main justify-content-center">
+                    <div class="col-lg-12 p-4">
+                        <div class="image-element card-wrapper">
+                            <NuxtImg class="brandLogo" :src="`${$directus.url}assets/${brand.image?.filename_disk}`" :alt="brand.name" />
+                            <!--<div class="mbr-overlay card-overlay"></div>-->
+                            <div class="wrapper">
+                                <h5 class="card-title mbr-fonts-style align-left display-2">
+                                    {{ brand.name }}</h5>
+                                <div class="collapsed-content">
+                                    <div class="mbr-section-btn"><a class="btn btn-md btn-info display-4"
+                                            :href="`/commerce/brand/${brand.id}`">View Brand</a></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+    import {
+        ref,
+        onMounted
+    } from 'vue'
+
+    const props = defineProps({
+        brand: {
+            type: Object,
+            required: true,
+        },
+    });
+    const {
+        brand
+    } = props;
+</script>

package/app/components/related/incentiveCard.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <!--<profilebar />-->
+        <section data-bs-version="5.1" class="firmm4_features1 features1 cid-uhBuptnWmV" id="features1-9v"
+            data-sortbtn="btn-primary">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12 title_block">
+                        <h3 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
+                            <strong>Incentive: {{ incentive?.id }}</strong></h3>
+                    </div>
+                </div>
+                <div class="row justify-content-center">
+                    <div class="card col-12">
+                        <div class="card_wrapper">
+                            <div class="card-box">
+                                <div class="icon_block">
+                                    <div class="iconfont-wrapper">
+                                        <span class="mbr-iconfont mobi-mbri-cart-full mobi-mbri"></span>
+                                    </div>
+                                </div>
+                                <p class="card-text mbr-fonts-style display-4">Incentive: {{ incentive?.id }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Incentive Date: {{ new Date(incentive?.date_created).toLocaleDateString() }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Bill to Name: {{ incentive?.user_id?.first_name }} {{ incentive?.user_id?.last_name }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Status: {{ incentive?.status }}</p>
+                                <p class="card-text mbr-fonts-style display-4">Type: {{ incentive?.incentive_type }}</p>
+                                <p class="btn_link mbr-fonts-style display-4"><NuxtLink :to="`/incentive/${incentive?.id}`" class="text-secondary">View<span class="mobi-mbri mobi-mbri-right mbr-iconfont"></span></NuxtLink></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    incentive: {
+      type: Object,
+      required: true,
+    },
+  });
+</script>