@mframework/layer-commerce 0.0.7 → 0.0.8

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,43 @@
+<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';
+import { resolveComponent } from 'vue';
+import { useCart } from '~/composables/useCart';
+
+const { data: cart } = useCart();
+
+const NuxtLink = resolveComponent('NuxtLink');
+
+const paths = {
+  checkout: '/checkout'
+};
+</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 { CheckoutAddressProps } from './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 { Maybe } from "@mframework/core";
+import { SfAddress } from "~/composables";
+
+export interface Address extends SfAddress {
+  streetNumber: Maybe<string>;
+  phone: Maybe<string>;
+  streetName: Maybe<string>;
+}
+
+export type CheckoutAddressProps = {
+  type: 'billingAddress' | 'shippingAddress';
+  heading: string;
+  description: string;
+  buttonText: string;
+  savedAddress?: Maybe<SfAddress>;
+};

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

@@ -0,0 +1,65 @@
+<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 { CheckoutPaymentProps, CheckoutPaymentEmits, PaymentMethod } from './types';
+import { useI18n } from 'vue-i18n';
+
+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 { OrderSummaryPropsType } from './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 { SfCart } from "~/composables";
+
+export type OrderSummaryPropsType = {
+  cart: SfCart;
+};