@meeovi/layer-commerce 1.0.6 → 1.0.7

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

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

package/app/components/placeholders/Comments.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="comments-placeholder">
-    <p v-if="productName"><strong>Comments for:</strong> {{ productName }}</p>
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  productName: { type: String, required: false },
-  productImage: { type: String, required: false },
-  productSku: { type: [String, Number], required: false },
-  comments: { type: Array, required: false }
-})
-</script>

package/app/components/placeholders/CreateListBtn.vue

@@ -1,7 +0,0 @@
-<template>
-  <button class="create-list-btn" @click="$emit('create', lists)">Create List</button>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ lists: { type: [String, Number, Object], required: false } })
-</script>

package/app/components/placeholders/Event.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="event-placeholder">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ space: { type: Object, required: false } })
-</script>

package/app/components/placeholders/ListShowcases.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="list-showcases-placeholder">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ list: { type: Object, required: false } })
-</script>

package/app/components/placeholders/Short.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="short-placeholder">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ short: { type: Object, required: false } })
-</script>

package/app/components/placeholders/Space.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="space-placeholder">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ space: { type: Object, required: false } })
-</script>

package/app/components/placeholders/Tag.vue

@@ -1,7 +0,0 @@
-<template>
-  <span class="tag-placeholder">{{ tag?.name || tag }}</span>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({ tag: { type: Object, required: false } })
-</script>

package/app/components/related/brandCard.vue

@@ -1,41 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-<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>

package/app/components/related/invoiceCard.vue

@@ -1,43 +0,0 @@
-<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>Invoice: {{ invoice?.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">Invoice: {{ invoice?.id }}</p>
-                                <p class="card-text mbr-fonts-style display-4">Invoice Date: {{ new Date(invoice?.created_at).toLocaleDateString() }}</p>
-                                <p class="card-text mbr-fonts-style display-4">Bill to Name: {{ invoice?.user?.first_name }} {{ invoice?.user?.last_name }}</p>
-                                <p class="card-text mbr-fonts-style display-4">Status: {{ invoice?.state }}</p>
-                                <p class="btn_link mbr-fonts-style display-4"><NuxtLink :to="`/invoice/${invoice?.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({
-    invoice: {
-      type: Object,
-      required: true,
-    },
-  });
-</script>

package/app/components/related/orderCard.vue

@@ -1,43 +0,0 @@
-<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>Order: {{ order?.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">Order: {{ order?.id }}</p>
-                                <p class="card-text mbr-fonts-style display-4">Order Date: {{ new Date(order?.created_at).toLocaleDateString() }}</p>
-                                <p class="card-text mbr-fonts-style display-4">Bill to Name: {{ order?.user_id?.first_name }} {{ order?.user_id?.last_name }}</p>
-                                <p class="card-text mbr-fonts-style display-4">Payment Status: {{ order?.status }}</p>
-                                <p class="btn_link mbr-fonts-style display-4"><NuxtLink :to="`/order/${order?.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({
-    order: {
-      type: Object,
-      required: true,
-    },
-  });
-</script>

package/app/components/related/relatedproducts.vue

@@ -1,17 +0,0 @@
-<template>
-    <div>
-
-    </div>
-</template>
-
-<script>
-export default {
-    
-}
-</script>
-
-<script setup>
-    useHead({
-        title: '',
-    })
-</script>

package/app/components/sales/CartPageContent/CartPageContent.vue

@@ -1,37 +0,0 @@
-<template>
-  <div v-if="cart?.lineItems.length" class="md:grid md:grid-cols-12 md:gap-x-6" data-testid="cart-page-content">
-    <div class="col-span-7 mb-10 md:mb-0">
-      <div v-for="{ id, attributes, image, name, totalPrice, unitPrice, quantity, slug } in cart.lineItems" :key="id">
-        <UiCartProductCard
-          :attributes="attributes"
-          :image-url="image?.url"
-          :image-alt="image?.alt"
-          :name="name ?? ''"
-          :price="totalPrice?.amount || 0"
-          :special-price="unitPrice?.value?.amount || 0"
-          :max-value="10"
-          :min-value="1"
-          :value="quantity"
-          :slug="slug"
-        />
-      </div>
-    </div>
-    <OrderSummary :cart="cart" class="col-span-5 md:sticky md:top-20 h-fit">
-      <SfButton :tag="NuxtLink" :to="paths.checkout" size="lg" class="w-full mb-4 md:mb-0">
-        {{ $t('goToCheckout') }}
-      </SfButton>
-    </OrderSummary>
-  </div>
-  <div v-else class="flex items-center justify-center flex-col pt-24 pb-32" data-testid="cart-page-content">
-    <NuxtImg src="/images/empty-cart.svg" :alt="$t('emptyCartImgAlt')" width="192" height="192" />
-    <h2 class="mt-8">{{ $t('emptyCart') }}</h2>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SfButton } from '@storefront-ui/vue';
-
-const { data: cart } = useCart();
-
-const NuxtLink = resolveComponent('NuxtLink');
-</script>

package/app/components/sales/CheckoutAddress/CheckoutAddress.vue

@@ -1,50 +0,0 @@
-<template>
-  <div data-testid="checkout-address" class="md:px-4 py-6">
-    <div class="flex justify-between items-center">
-      <h2 class="text-neutral-900 text-lg font-bold mb-4">{{ heading }}</h2>
-      <SfButton v-if="savedAddress" size="sm" variant="tertiary" @click="open">
-        {{ $t('contactInfo.edit') }}
-      </SfButton>
-    </div>
-
-    <div v-if="savedAddress" class="mt-2 md:w-[520px]">
-      <p>{{ `${savedAddress.firstName} ${savedAddress.lastName}` }}</p>
-      <p>{{ savedAddress.phoneNumber }}</p>
-      <p>{{ `${savedAddress.address1} ${savedAddress.address2}` }}</p>
-      <p>{{ `${savedAddress.state}, ${savedAddress.postalCode}` }}</p>
-    </div>
-
-    <div v-else class="w-full md:max-w-[520px]">
-      <p>{{ description }}</p>
-      <SfButton class="mt-4 w-full md:w-auto" variant="secondary" @click="open">
-        {{ buttonText }}
-      </SfButton>
-    </div>
-
-    <UiModal
-      v-model="isOpen"
-      tag="section"
-      role="dialog"
-      class="h-full w-full overflow-auto md:w-[600px] md:h-fit"
-      aria-labelledby="address-modal-title"
-    >
-      <header>
-        <SfButton square variant="tertiary" class="absolute right-2 top-2" @click="close">
-          <SfIconClose />
-        </SfButton>
-        <h3 id="address-modal-title" class="text-neutral-900 text-lg md:text-2xl font-bold mb-4">
-          {{ heading }}
-        </h3>
-      </header>
-      <AddressForm :saved-address="savedAddress" :type="type" @on-save="close" @on-close="close" />
-    </UiModal>
-  </div>
-</template>
-<script setup lang="ts">
-import { SfButton, SfIconClose, useDisclosure } from '@storefront-ui/vue';
-import type { CheckoutAddressProps } from '~/components/CheckoutAddress/types';
-
-defineProps<CheckoutAddressProps>();
-
-const { isOpen, open, close } = useDisclosure();
-</script>

package/app/components/sales/CheckoutAddress/__tests__/CheckoutAddress.spec.ts

@@ -1,16 +0,0 @@
-import { mount } from '@vue/test-utils';
-import CheckoutAddress from '~/components/CheckoutAddress/CheckoutAddress.vue';
-
-describe('<CheckoutAddress />', () => {
-  it('should render component', () => {
-    const { getByTestId } = mount(CheckoutAddress, {
-      props: {
-        type: 'billingAddress',
-        heading: '',
-        description: '',
-        buttonText: '',
-      },
-    });
-    expect(getByTestId('checkout-address'));
-  });
-});

package/app/components/sales/CheckoutAddress/types.ts

@@ -1,16 +0,0 @@
-import type { Maybe } from '../../../composables/_types'
-
-export interface Address {
-  streetNumber?: Maybe<string>
-  phone?: Maybe<string>
-  streetName?: Maybe<string>
-  [key: string]: any
-}
-
-export type CheckoutAddressProps = {
-  type: 'billingAddress' | 'shippingAddress'
-  heading: string
-  description: string
-  buttonText: string
-  savedAddress?: Maybe<Address>
-}

package/app/components/sales/CheckoutPayment/CheckoutPayment.vue

@@ -1,68 +0,0 @@
-<template>
-  <div data-testid="checkout-payment" class="md:px-4 py-6">
-    <fieldset>
-      <legend class="text-neutral-900 text-lg font-bold mb-4">{{ $t('checkoutPayment.heading') }}</legend>
-      <div class="grid gap-4 grid-cols-2">
-        <label v-for="{ value, disabled, imgSrc, imgAlt } in paymentMethods" :key="value" class="relative">
-          <input
-            type="radio"
-            name="payment_method"
-            class="peer sr-only"
-            :value="value"
-            :checked="value === activePayment"
-            :disabled="disabled"
-            @change="$emit('update:activePayment', value)"
-          />
-          <span
-            class="h-20 flex flex-col items-center justify-center py-4 px-4 cursor-pointer rounded-md border border-neutral-200 -outline-offset-2 hover:border-primary-200 hover:bg-primary-100 peer-focus:border-primary-200 peer-focus:bg-primary-100 active:border-primary-300 active:bg-primary-200 peer-checked:outline peer-checked:outline-2 peer-checked:outline-primary-700 peer-disabled:opacity-50 peer-disabled:bg-neutral-100 peer-disabled:border-neutral-200 peer-disabled:cursor-not-allowed peer-disabled:[&_img]:grayscale"
-          >
-            <span v-if="value === PaymentMethod.CreditCard">
-              <SfIconCreditCard class="mr-2" />
-              <span class="font-medium">{{ $t('checkoutPayment.creditCard') }}</span>
-            </span>
-            <NuxtImg v-else :src="imgSrc" :alt="imgAlt" width="104" height="32" />
-            <span v-if="disabled" class="text-xs text-neutral-500">{{ $t('checkoutPayment.comingSoon') }}</span>
-          </span>
-        </label>
-      </div>
-    </fieldset>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SfIconCreditCard } from '@storefront-ui/vue';
-import {
-  type CheckoutPaymentEmits,
-  type CheckoutPaymentProps,
-  PaymentMethod,
-} from '~/components/CheckoutPayment/types';
-
-defineProps<CheckoutPaymentProps>();
-defineEmits<CheckoutPaymentEmits>();
-
-const { t } = useI18n();
-
-const paymentMethods = [
-  {
-    value: PaymentMethod.CreditCard,
-  },
-  {
-    value: PaymentMethod.PayPal,
-    imgSrc: '/images/paypal.svg',
-    imgAlt: t('checkoutPayment.paypalIconAlt'),
-    disabled: true,
-  },
-  {
-    value: PaymentMethod.ApplePay,
-    imgSrc: '/images/apple-pay.svg',
-    imgAlt: t('checkoutPayment.applePayIconAlt'),
-    disabled: true,
-  },
-  {
-    value: PaymentMethod.GooglePay,
-    imgSrc: '/images/google-pay.svg',
-    imgAlt: t('checkoutPayment.googlePayIconAlt'),
-    disabled: true,
-  },
-];
-</script>

package/app/components/sales/CheckoutPayment/__tests__/CheckoutPayment.spec.ts

@@ -1,14 +0,0 @@
-import { mount } from '@vue/test-utils';
-import CheckoutPayment from '~/components/CheckoutPayment/CheckoutPayment.vue';
-
-describe('<CheckoutPayment />', () => {
-  it('should render component', () => {
-    const { getByTestId } = mount(CheckoutPayment, {
-      props: {
-        activePayment: 'credit-card',
-      },
-    });
-
-    expect(getByTestId('checkout-payment'));
-  });
-});

package/app/components/sales/CheckoutPayment/types.ts

@@ -1,12 +0,0 @@
-export enum PaymentMethod {
-  CreditCard = 'credit-card',
-  PayPal = 'pay-pal',
-  ApplePay = 'apple-pay',
-  GooglePay = 'google-pay',
-}
-
-export type CheckoutPaymentProps = {
-  activePayment: string;
-};
-
-export type CheckoutPaymentEmits = (event: 'update:activePayment', parameter: PaymentMethod) => void;

package/app/components/sales/OrderSummary/OrderSummary.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="shadow-lg md:rounded-md md:border md:border-neutral-100" data-testid="order-summary">
-    <div class="flex justify-between items-end py-2 px-4 md:px-6 md:pt-6 md:pb-4">
-      <p class="typography-headline-4 font-bold md:typography-headline-3">{{ $t('orderSummary') }}</p>
-      <p class="typography-text-base font-medium" data-testid="total-in-cart">
-        {{ $t('itemsInCart', cart.lineItems.length) }}
-      </p>
-    </div>
-    <div class="px-4 pb-4 mt-3 md:px-6 md:pb-6 md:mt-0">
-      <div class="flex justify-between typography-text-base pb-4">
-        <div class="flex flex-col grow pr-2">
-          <p>{{ $t('itemsSubtotal') }}</p>
-          <p class="typography-text-xs text-neutral-500">{{ $t('originalPrice') }}</p>
-          <p class="typography-text-xs text-secondary-700">{{ $t('savings') }}</p>
-          <p class="my-2">{{ $t('delivery') }}</p>
-          <p>{{ $t('estimatedTax') }}</p>
-        </div>
-        <div class="flex flex-col text-right">
-          <p data-testid="special-price">${{ cart.totalPrice.amount }}</p>
-          <p class="typography-text-xs text-neutral-500">${{ cart.subtotalRegularPrice.amount }}</p>
-          <p class="typography-text-xs text-secondary-700">${{ cart.totalCouponDiscounts.amount }}</p>
-          <p v-if="!!cart.shippingMethod" class="my-2">${{ cart.shippingMethod.price.amount }}</p>
-          <p>${{ cart.totalTax.amount }}</p>
-        </div>
-      </div>
-      <div v-if="!!cart.totalCouponDiscounts.amount" class="flex items-center py-4 border-t border-neutral-200">
-        <p>{{ $t('promoCode') }}</p>
-        <SfButton size="sm" variant="tertiary" class="ml-auto mr-2">
-          {{ $t('remove') }}
-        </SfButton>
-        <p>${{ cart.totalCouponDiscounts.amount }}</p>
-      </div>
-      <div class="flex gap-x-2 py-4 border-y border-neutral-200 mb-4">
-        <SfInput wrapper-class="grow" :placeholder="$t('promoCodePlaceholder')" />
-        <SfButton variant="secondary">{{ $t('apply') }}</SfButton>
-      </div>
-      <div class="px-3 py-1.5 bg-secondary-100 text-secondary-700 typography-text-sm rounded-md text-center mb-4">
-        <UiAlert class="w-full" variant="secondary">
-          {{ $t('savingsTag', { amount: `$${cart.totalCouponDiscounts.amount}` }) }}
-        </UiAlert>
-      </div>
-      <div class="flex justify-between typography-headline-4 md:typography-headline-3 font-bold pb-4 mb-4">
-        <p>{{ $t('total') }}</p>
-        <p data-testid="total">${{ cart.totalPrice.amount }}</p>
-      </div>
-      <UiDivider class="my-4 w-auto" />
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { SfButton, SfInput } from '@storefront-ui/vue';
-import type { OrderSummaryPropsType } from '~/components/OrderSummary/types';
-
-defineProps<OrderSummaryPropsType>();
-</script>

package/app/components/sales/OrderSummary/__tests__/ContactInformation.spec.ts

@@ -1,52 +0,0 @@
-import { mount } from '@vue/test-utils';
-import OrderSummary from '~/components/OrderSummary/OrderSummary.vue';
-import type { SfCart } from '@vue-storefront/unified-data-model';
-
-const cart: SfCart = {
-  appliedCoupons: [],
-  billingAddress: null,
-  customerEmail: null,
-  id: 'test',
-  lineItems: [],
-  shippingAddress: null,
-  shippingMethod: null,
-  subtotalDiscountedPrice: {
-    amount: 0,
-    currency: 'USD',
-    precisionAmount: '2',
-  },
-  subtotalRegularPrice: {
-    amount: 99.99,
-    currency: 'USD',
-    precisionAmount: '2',
-  },
-  totalCouponDiscounts: {
-    amount: 0.0,
-    currency: 'USD',
-    precisionAmount: '2',
-  },
-  totalItems: 0,
-  totalPrice: {
-    amount: 99.99,
-    currency: 'USD',
-    precisionAmount: '2',
-  },
-  totalShippingPrice: null,
-  totalTax: {
-    amount: 0,
-    currency: 'USD',
-    precisionAmount: '2',
-  },
-};
-
-describe('<OrderSummary />', () => {
-  it('should render component', () => {
-    const wrapper = mount(OrderSummary, {
-      props: {
-        cart,
-      }
-    });
-
-    expect(wrapper.getByTestId('order-summary'));
-  });
-});

package/app/components/sales/OrderSummary/types.ts

@@ -1,5 +0,0 @@
-import type { Cart } from '../../../composables/_types'
-
-export type OrderSummaryPropsType = {
-  cart: Cart
-}