@meeovi/layer-commerce 1.0.10 → 1.0.13

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/placeholders/Comments.vue

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

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

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

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

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

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

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

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

package/app/components/related/invoiceCard.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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