@meeovi/layer-commerce 1.0.1 → 1.0.3

package/app/composables/utils/currency.js

@@ -0,0 +1,56 @@
+/**
+ * Format a price amount according to the given currency
+ * @param {number} amount - The price amount to format
+ * @param {string} currency - The currency code (e.g., 'USD', 'EUR')
+ * @param {Object} exchangeRates - Object containing exchange rates
+ * @returns {string} Formatted price string
+ */
+export const formatPrice = (amount, currency, exchangeRates) => {
+  if (!amount || !currency) return ''
+  
+  const rate = exchangeRates[currency] || 1
+  const convertedAmount = amount * rate
+
+  return new Intl.NumberFormat(undefined, {
+    style: 'currency',
+    currency: currency
+  }).format(convertedAmount)
+}
+
+/**
+ * Convert price from one currency to another
+ * @param {number} amount - The price amount to convert
+ * @param {string} fromCurrency - Source currency code
+ * @param {string} toCurrency - Target currency code
+ * @param {Object} exchangeRates - Object containing exchange rates
+ * @returns {number} Converted price amount
+ */
+export const convertPrice = (amount, fromCurrency, toCurrency, exchangeRates) => {
+  if (!amount || !fromCurrency || !toCurrency || !exchangeRates) return amount
+  
+  const fromRate = exchangeRates[fromCurrency] || 1
+  const toRate = exchangeRates[toCurrency] || 1
+  
+  return (amount * toRate) / fromRate
+}
+
+/**
+ * Get currency symbol for a currency code
+ * @param {string} code - Currency code
+ * @returns {string} Currency symbol
+ */
+export const getCurrencySymbol = (code) => {
+  const symbols = {
+    USD: '$',
+    EUR: '€',
+    GBP: '£',
+    JPY: '¥',
+    AUD: 'A$',
+    CAD: 'C$',
+    CHF: 'CHF',
+    CNY: '¥',
+    INR: '₹',
+    // Add more currency symbols as needed
+  }
+  return symbols[code] || code
+} 

package/app/composables/utils/stripe.ts

@@ -0,0 +1,16 @@
+// utils/stripe.ts
+import { loadStripe, type Stripe } from '@stripe/stripe-js';
+
+let stripePromise: Promise<Stripe | null> | null = null;
+
+/**
+ * Returns a Stripe instance (singleton per publishable key)
+ * @param {string} publishableKey - Your Stripe publishable key
+ * @returns {Promise<Stripe | null>}
+ */
+export function getStripe(publishableKey: string): Promise<Stripe | null> {
+  if (!stripePromise) {
+    stripePromise = loadStripe(publishableKey);
+  }
+  return stripePromise;
+}

package/app/composables/validationRules/index.ts

@@ -0,0 +1 @@
+export * from "./password";

package/app/composables/validationRules/password.feature

@@ -0,0 +1,67 @@
+Feature: Password validation rule
+
+  Scenario Outline: New password can't be too easy (<newPassword>)
+    Given the <newPassword> as password
+    When the method is called
+    Then a false should be returned
+
+    Examples:
+
+      | newPassword         |
+      | 12345               |
+      | password            |
+      | password1           |
+      | Password1           |
+      | Password@           |
+      | Password123567890   |
+
+  Scenario Outline: New password must be complex enough (<newPassword>)
+    Given the <newPassword> as password
+    When the method is called
+    Then a true should be returned
+
+    Examples:
+
+      | newPassword         |
+      | Password1!3         |
+      | L0ngEnough$         |
+      | L0ngEnough@         |
+      | L0ngEnough#         |
+      | L0ngEnough%         |
+      | L0ngEnough^         |
+      | L0ngEnough*         |
+      | L0ngEnough(         |
+      | L0ngEnough)         |
+      | L0ngEnough:         |
+      | L0ngEnough;         |
+      | L0ngEnough,         |
+      | L0ngEnough.         |
+
+  Scenario Outline: New password can't have some special signs (<newPassword>)
+    Given the <newPassword> as password
+    When the method is called
+    Then a false should be returned
+
+    Examples:
+
+      | newPassword         |
+      | L0ngEnough&         |
+      | L0ngEnough[         |
+      | L0ngEnough]         |
+      | L0ngEnough"         |
+      | L0ngEnough'         |
+      | L0ngEnough/         |
+      | L0ngEnough>         |
+      | L0ngEnough<         |
+
+  Scenario: New password match with confirmation
+    Given the password is "Password1!"
+    And the confirmation is "Password1!"
+    When the method is called
+    Then a true should be returned
+
+  Scenario: New password mismatch with confirmation
+    Given the password is "Password1!"
+    And the confirmation is "Password1"
+    When the method is called
+    Then a false should be returned

package/app/composables/validationRules/password.test.ts

@@ -0,0 +1,89 @@
+import { expect } from "vitest";
+import type { DefineStepFunction } from "jest-cucumber";
+import { defineFeature, loadFeature } from "jest-cucumber";
+import { validatePassword } from "./password";
+
+const feature = loadFeature("./password.feature", { loadRelativePath: true });
+
+defineFeature(feature, (test) => {
+  let password: string;
+  let confirmation: string;
+  let output: boolean;
+
+  function whenTheMethodIsCalled(when: DefineStepFunction) {
+    when("the method is called", () => {
+      output = validatePassword(password, confirmation);
+    });
+  }
+
+  test("New password can't be too easy (<newPassword>)", ({ given, when, then }) => {
+    given(/^the (.*) as password$/, (givenPassword) => {
+      password = givenPassword;
+      confirmation = givenPassword;
+    });
+
+    whenTheMethodIsCalled(when);
+
+    then("a false should be returned", () => {
+      expect(output).toBe(false);
+    });
+  });
+
+  test("New password must be complex enough (<newPassword>)", ({ given, when, then }) => {
+    given(/^the (.*) as password$/, (givenPassword) => {
+      password = givenPassword;
+      confirmation = givenPassword;
+    });
+
+    whenTheMethodIsCalled(when);
+
+    then("a true should be returned", () => {
+      expect(output).toBe(true);
+    });
+  });
+
+  test("New password can't have some special signs (<newPassword>)", ({ given, when, then }) => {
+    given(/^the (.*) as password$/, (givenPassword) => {
+      password = givenPassword;
+      confirmation = givenPassword;
+    });
+
+    whenTheMethodIsCalled(when);
+
+    then("a false should be returned", () => {
+      expect(output).toBe(false);
+    });
+  });
+
+  test("New password match with confirmation", ({ given, and, when, then }) => {
+    given(/^the password is (.*)$/, (givenPassword) => {
+      password = givenPassword;
+    });
+
+    and(/^the confirmation is (.*)$/, (givenConfirmation) => {
+      confirmation = givenConfirmation;
+    });
+
+    whenTheMethodIsCalled(when);
+
+    then("a true should be returned", () => {
+      expect(output).toBe(true);
+    });
+  });
+
+  test("New password mismatch with confirmation", ({ given, and, when, then }) => {
+    given(/^the password is (.*)$/, (givenPassword) => {
+      password = givenPassword;
+    });
+
+    and(/^the confirmation is (.*)$/, (givenConfirmation) => {
+      confirmation = givenConfirmation;
+    });
+
+    whenTheMethodIsCalled(when);
+
+    then("a false should be returned", () => {
+      expect(output).toBe(false);
+    });
+  });
+});

package/app/composables/validationRules/password.ts

@@ -0,0 +1,25 @@
+/* eslint-disable sonarjs/prefer-single-boolean-return */
+/* eslint-disable max-statements */
+export function validatePassword(firstInput: string, confirmationInput: string): boolean {
+  if (firstInput !== confirmationInput) {
+    return false;
+  }
+
+  if (firstInput.length < 8) {
+    return false;
+  }
+
+  if (/[A-Z]+/.test(firstInput) === false) {
+    return false;
+  }
+
+  if (/\d+/.test(firstInput) === false) {
+    return false;
+  }
+
+  if (/[!#$%()*,.:;@^]+/.test(firstInput) === false) {
+    return false;
+  }
+
+  return true;
+}

package/app/pages/brand/[...slug].vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="accountPage" v-if="brand">
+    <section data-bs-version="5.1" class="info3 cid-tuzqZ1PJf1" id="info3-39"
+      :style="`background-image: url(${$directus.url}/assets/${brand.image?.filename_disk});`">
+      <div class="mbr-overlay" style="opacity: 0.6; background-color: rgb(68, 121, 217);">
+      </div>
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="card col-12 col-lg-10">
+            <div class="card-wrapper">
+              <div class="card-box align-center">
+                <h4 class="card-title mbr-fonts-style align-center mb-4 display-1">
+                  <strong>{{ brand.name }}</strong>
+                </h4>
+                <p class="mbr-text mbr-fonts-style mb-4 display-7">{{ brand.code }}</p>
+                <p class="mbr-text mbr-fonts-style mb-4 display-7">{{ brand.description }}</p>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!--Brand Products-->
+    <v-row style="padding: 10px;">
+      <v-col cols="3" v-for="brand in brand?.shorts" :key="brand.id">
+        <shorts :short="brand?.shorts_id" />
+      </v-col>
+    </v-row>
+
+    <!--Brand Products-->
+    <v-row style="padding: 10px;">
+      <v-col cols="3" v-for="brand in brand?.products" :key="brand.id">
+        <productCard :product="brand?.products_id" />
+      </v-col>
+    </v-row>
+
+    <relatedbrands />
+  </div>
+  <div v-else>
+    Loading brand...
+  </div>
+</template>
+
+<script setup>
+  import shorts from '#social/app/components/features/vibeSections/shorts.vue'
+  import productCard from '@/components/catalog/product/productCard.vue'
+  import relatedbrands from '@/components/catalog/product/relatedbrands.vue'
+  import {
+    useRuntimeConfig
+  } from '#imports';
+
+  const route = useRoute();
+    const {
+        $directus,
+        $readItem,
+        $readItems
+    } = useNuxtApp()
+
+    const slug = computed(() => {
+        const s = route.params.slug
+        return Array.isArray(s) ? s[0] : s
+    })
+
+    const {
+        data: brandRaw
+    } = await useAsyncData('brand', () => {
+        return $directus.request(
+            $readItems('brands', {
+                fields: [
+                    '*',
+                    'products.products_id.*',
+                    'products.products_id.image.*',
+                    'shorts.shorts_id.*',
+                    'image.*'
+                ],
+                filter: {
+                    slug: {
+                        _eq: slug.value
+                    }
+                },
+                limit: 1
+            })
+        )
+    })
+
+    const brand = computed(() => brandRaw.value?.[0] || null)
+
+  useHead({
+    title: computed(() => brand.value?.name || 'Brand Page')
+  })
+</script>

package/app/pages/brands.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="contentPage">
+    <v-card elevation="0">
+      <v-toolbar :title="brandbar?.name" color="green"></v-toolbar>
+      <v-tabs v-model="tab" bg-color="green">
+        <div v-for="(menu, index) in brandbar?.menus" :key="index">
+        <v-tab :value="menu?.value">{{ menu?.name }}</v-tab>
+      </div>
+      </v-tabs>
+
+      <v-card-text>
+        <v-tabs-window v-model="tab">
+          <v-tabs-window-item value="one">
+            <v-row>
+              <v-col cols="4" v-for="brand in brands" :key="brand.brand_id">
+                <brand :brand="brand" />
+              </v-col>
+            </v-row>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item value="two">
+            <v-row>
+              <v-col cols="4" v-for="brand in meebrands" :key="brand.brand_id">
+                <brand :brand="brand" />
+              </v-col>
+            </v-row>
+          </v-tabs-window-item>
+
+          <v-tabs-window-item value="three">
+            <v-row>
+              <v-col cols="4" v-for="brand in brands" :key="brand.brand_id">
+                <brand :brand="brand" />
+              </v-col>
+            </v-row>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    onMounted
+  } from 'vue'
+  import brand from '~/app/components/catalog/product/brands.vue'
+
+  const tab = ref(null)
+  const {
+        $directus,
+        $readItems,
+        $readItem
+    } = useNuxtApp()
+
+    const {
+        data: brands
+    } = await useAsyncData('brands', () => {
+        return $directus.request($readItems('brands', {
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+        data: meebrands
+    } = await useAsyncData('meebrands', () => {
+        return $directus.request($readItems('brands', {
+            filter: {
+                code: {
+                    _eq: 'Mee'
+                }
+            },
+            fields: ['*', {
+                '*': ['*']
+            }]
+        }))
+    })
+
+    const {
+    data: brandbar
+  } = await useAsyncData('brandbar', () => {
+    return $directus.request($readItem('navigation', '40', {
+      fields: ['*', {
+        '*': ['*']
+      }]
+    }))
+  })
+</script>

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>
+