@meeovi/layer-commerce 1.0.11 → 1.0.13

package/app/composables/useProducts/types.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'vue'
+import type { Product } from '../_types'
+import type { Maybe } from '../_types'
+
+export type GetProducts = {
+  items: Product[]
+  total?: number
+}
+
+export interface UseProductsState {
+  data: GetProducts | null
+  loading: boolean
+}
+
+export type FetchProducts = () => Promise<Ref<Maybe<GetProducts>>>
+export interface UseProducts {
+  data: Readonly<Ref<UseProductsState['data']>>
+  loading: Readonly<Ref<boolean>>
+  fetchProducts: FetchProducts
+}
+
+export type UseProductsReturn = () => UseProducts

package/app/composables/useProducts/useProducts.ts

@@ -0,0 +1,41 @@
+import { toRefs } from '@vueuse/shared';
+import { computed } from 'vue';
+import type { Ref } from 'vue';
+import { FetchProducts, UseProductsReturn, UseProductsState } from './types';
+import { getCommerceClient } from '../../utils/client';
+import { useAsyncData, useState } from 'nuxt/app';
+import { useHandleError } from '../useHandleError';
+import type { Maybe } from '../_types';
+
+/**
+ * @description Composable for managing products.
+ * @returns {@link UseProducts}
+ * @example
+ * const { data, loading, fetchProducts } = useProducts();
+ */
+export const useProducts: UseProductsReturn = () => {
+  const state = useState<UseProductsState>('products', () => ({
+    data: null,
+    loading: false,
+  }));
+
+  /**
+   * @description Function for fetching products.
+   * @example
+   * getProducts();
+   */
+  const fetchProducts: FetchProducts = async () => {
+    state.value.loading = true;
+    const client = getCommerceClient();
+    const { data, error } = await useAsyncData(() => client.listProducts?.());
+    useHandleError(error.value);
+    state.value.data = data.value as unknown as UseProductsState['data'];
+    state.value.loading = false;
+    return computed(() => state.value.data) as unknown as Ref<UseProductsState['data']>;
+  };
+
+  return {
+    fetchProducts,
+    ...toRefs(state.value),
+  };
+};

package/app/composables/utils/countryList.ts

@@ -0,0 +1,14 @@
+// ISO 3166-1 country codes and names (short sample, extend as needed)
+export default [
+  { code: 'US', name: 'United States' },
+  { code: 'CA', name: 'Canada' },
+  { code: 'GB', name: 'United Kingdom' },
+  { code: 'DE', name: 'Germany' },
+  { code: 'FR', name: 'France' },
+  { code: 'IT', name: 'Italy' },
+  { code: 'ES', name: 'Spain' },
+  { code: 'AU', name: 'Australia' },
+  { code: 'JP', name: 'Japan' },
+  { code: 'CN', name: 'China' },
+  // ...add more as needed
+];

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/modules/vue-head/composables/useHead.ts

@@ -0,0 +1,3 @@
+export default function useHead(_: any = {}) {
+  return {}
+}

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 '@/components/placeholder/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>