@mframework/layer-commerce 0.0.3

package/app/normalizers/Wishlist.query.ts

@@ -0,0 +1,202 @@
+/* eslint-disable spaced-comment */
+/**
+ * ScandiPWA - Progressive Web App for Magento
+ *
+ * Copyright © Scandiweb, Inc. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package scandipwa/scandipwa-theme
+ * @link https://github.com/scandipwa/scandipwa-theme
+ */
+
+import { Field, Mutation, Query } from '@tilework/opus';
+
+import ProductListQuery from './ProductList.query';
+import {
+    GQLShareWishlistInput,
+    GQLWishlistItemInput,
+    GQLWishlistItemUpdateInput,
+} from '../types/Graphql.type';
+import { isSignedIn } from '../utils/Auth/IsSignedIn';
+import { getCartId } from '../utils/Cart';
+
+import { Product as DomainProduct } from '../types/domain';
+import {
+    ItemOption,
+    Wishlist,
+    WishlistItem,
+    WishListUserInputError,
+} from './Wishlist.type';
+
+/** @namespace ../../normalizers/Wishlist/Query */
+export class WishlistQuery {
+    //#region MUTATION
+    addProductsToWishlist(
+        wishlistId: string,
+        wishlistItems: GQLWishlistItemInput[],
+    ): Mutation<'addProductsToWishlist', { user_errors: WishListUserInputError[] }> {
+        return new Mutation<'addProductsToWishlist', { user_errors: WishListUserInputError[] }>('addProductsToWishlist')
+            .addArgument('wishlistId', 'ID!', wishlistId)
+            .addArgument('wishlistItems', '[WishlistItemInput!]!', wishlistItems)
+            .addField(this._getWishlistErrorsField());
+    }
+
+    updateProductsInWishlist(
+        wishlistId: string,
+        wishlistItems: GQLWishlistItemUpdateInput[],
+    ): Mutation<'updateProductsInWishlist', { user_errors: WishListUserInputError[] }> {
+        return new Mutation<'updateProductsInWishlist', { user_errors: WishListUserInputError[] }>(
+            'updateProductsInWishlist',
+        )
+            .addArgument('wishlistId', 'ID!', wishlistId)
+            .addArgument('wishlistItems', '[WishlistItemUpdateInput!]!', wishlistItems)
+            .addField(this._getWishlistErrorsField());
+    }
+    //#endregion
+
+    //#region ERROR
+    _getWishlistErrorsFields(): Array<
+    Field<'message', string>
+    | Field<'code', string>
+    > {
+        return [
+            new Field<'message', string>('message'),
+            new Field<'code', string>('code'),
+        ];
+    }
+
+    _getWishlistErrorsField(): Field<'user_errors', WishListUserInputError, true> {
+        return new Field<'user_errors', WishListUserInputError, true>('user_errors', true)
+            .addFieldList(this._getWishlistErrorsFields());
+    }
+    //#endregion
+
+    getWishlistQuery(sharingCode = ''): Query<'wishlist', Wishlist> {
+        const field = new Query<'s_wishlist', Wishlist>('s_wishlist')
+            .setAlias('wishlist')
+            .addFieldList(this._getWishlistFields());
+
+        if (sharingCode) {
+            field.addArgument('sharing_code', 'ID', sharingCode);
+        }
+
+        return field;
+    }
+
+    getShareWishlistMutation(input: GQLShareWishlistInput): Mutation<'shareWishlist', boolean> {
+        return new Mutation<'s_shareWishlist', boolean>('s_shareWishlist')
+            .setAlias('shareWishlist')
+            .addArgument('input', 'ShareWishlistInput!', input);
+    }
+
+    getClearWishlist(): Mutation<'clearWishlist', boolean> {
+        return new Mutation<'s_clearWishlist', boolean>('s_clearWishlist')
+            .setAlias('clearWishlist');
+    }
+
+    getMoveWishlistToCart(sharingCode: string): Mutation<'moveWishlistToCart', boolean> {
+        const field = new Mutation<'s_moveWishlistToCart', boolean>('s_moveWishlistToCart')
+            .setAlias('moveWishlistToCart');
+
+        if (sharingCode) {
+            field.addArgument('sharingCode', 'ID', sharingCode);
+
+            if (!isSignedIn()) {
+                const cartId = getCartId();
+
+                field.addArgument('guestCartId', 'ID', cartId);
+            }
+        }
+
+        return field;
+    }
+
+    getRemoveProductFromWishlistMutation(item_id: string): Mutation<'removeProductFromWishlist', boolean> {
+        return new Mutation<'s_removeProductFromWishlist', boolean>('s_removeProductFromWishlist')
+            .setAlias('removeProductFromWishlist')
+            .addArgument('itemId', 'ID!', item_id);
+    }
+
+    _getWishlistFields(): Array<
+    Field<'id', number>
+    | Field<'updated_at', string>
+    | Field<'items_count', number>
+    | Field<'creators_name', string>
+    | Field<'items', WishlistItem, true>
+    > {
+        return [
+            new Field<'id', number>('id'),
+            new Field<'updated_at', string>('updated_at'),
+            new Field<'items_count', number>('items_count'),
+            new Field<'creators_name', string>('creators_name'),
+            this._getItemsField(),
+        ];
+    }
+
+    _getItemOptionsFields(): Array<
+    Field<'label', string>
+    | Field<'value', string>
+    > {
+        return [
+            new Field<'label', string>('label'),
+            new Field<'value', string>('value'),
+        ];
+    }
+
+    _getItemOptionsField(): Field<'options', ItemOption, true> {
+        return new Field<'options', ItemOption, true>('options')
+            .addFieldList(this._getItemOptionsFields());
+    }
+
+    _getWishlistItemsFields(): Array<
+    Field<'id', number>
+    | Field<'sku', string>
+    | Field<'qty', number>
+    | Field<'description', string>
+    | Field<'price', number>
+    | Field<'price_without_tax', number>
+    | Field<'buy_request', string>
+    | Field<'options', ItemOption, true>
+    > {
+        return [
+            new Field<'id', number>('id'),
+            new Field<'sku', string>('sku'),
+            new Field<'qty', number>('qty'),
+            new Field<'description', string>('description'),
+            new Field<'price', number>('price'),
+            new Field<'price_without_tax', number>('price_without_tax'),
+            new Field<'buy_request', string>('buy_request'),
+            this._getItemOptionsField(),
+        ];
+    }
+
+    _getItemsFields(): Array<
+    Field<'id', number>
+    | Field<'sku', string>
+    | Field<'qty', number>
+    | Field<'description', string>
+    | Field<'price', number>
+    | Field<'price_without_tax', number>
+    | Field<'buy_request', string>
+    | Field<'options', ItemOption, true>
+    | Field<'product', DomainProduct>
+    > {
+        return [
+            ...this._getWishlistItemsFields(),
+            this._getProductField(),
+        ];
+    }
+
+    _getProductField(): Field<'product', DomainProduct> {
+        return new Field<'product', DomainProduct>('product')
+            .addFieldList(ProductListQuery._getProductInterfaceFields(false, false, true));
+    }
+
+    _getItemsField(): Field<'items', WishlistItem, true> {
+        return new Field<'items', WishlistItem, true>('items')
+            .addFieldList(this._getItemsFields());
+    }
+}
+
+export default new WishlistQuery();

package/app/normalizers/Wishlist.type.ts

@@ -0,0 +1,42 @@
+/**
+ * ScandiPWA - Progressive Web App for Magento
+ *
+ * Copyright © Scandiweb, Inc. All rights reserved.
+ * See LICENSE for license details.
+ *
+ * @license OSL-3.0 (Open Software License ("OSL") v. 3.0)
+ * @package scandipwa/scandipwa-theme
+ * @link https://github.com/scandipwa/scandipwa
+ */
+
+import { Product as DomainProduct } from '../types/domain';
+
+export interface ItemOption {
+    label: string;
+    value: string;
+}
+
+export interface WishlistItem {
+    id: string;
+    sku: string;
+    qty: number;
+    description: string;
+    price: number;
+    price_without_tax: number;
+    buy_request: string;
+    options: ItemOption[];
+    product: DomainProduct;
+}
+
+export interface Wishlist {
+    id: number;
+    updated_at: string;
+    items_count: number;
+    creators_name: string;
+    items: WishlistItem[];
+}
+
+export interface WishListUserInputError {
+    message: string;
+    code: string;
+}

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="accountPage" v-if="brand">
+    <section data-bs-version="5.1" class="info3 cid-tuzqZ1PJf1" id="info3-39"
+      :style="`background-image: url(${getAssetUrl(brand?.image)});`">
+      <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 '~/types';
+
+  const route = useRoute();
+import useDirectusRequest from '#shared/app/composables/useDirectusRequest'
+const { readItems, readItem, getAssetUrl } = useDirectusRequest()
+
+    const slug = computed(() => {
+        const s = route.params.slug
+        return Array.isArray(s) ? s[0] : s
+    })
+
+    const { data: brandRaw } = await useAsyncData('brand', async () => {
+      const resp = await readItems('brands', {
+        fields: ['*', 'products.products_id.*', 'products.products_id.image.*', 'shorts.shorts_id.*', 'image.*'],
+        filter: { slug: { _eq: slug.value } },
+        limit: 1
+      })
+      return resp?.data || resp || []
+    })
+
+    const brand = computed(() => brandRaw.value?.[0] || null)
+
+  useHead({
+    title: computed(() => brand.value?.name || 'Brand Page')
+  })
+</script>

package/app/pages/brands.vue

@@ -0,0 +1,67 @@
+<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)
+  import useDirectusRequest from '#shared/app/composables/useDirectusRequest'
+  const { readItems, readItem, getAssetUrl } = useDirectusRequest()
+
+  const { data: brands } = await useAsyncData('brands', async () => {
+    const resp = await readItems('brands', { fields: ['*', { '*': ['*'] }] })
+    return resp?.data || resp || []
+  })
+
+  const { data: meebrands } = await useAsyncData('meebrands', async () => {
+    const resp = await readItems('brands', { filter: { code: { _eq: 'Mee' } }, fields: ['*', { '*': ['*'] }] })
+    return resp?.data || resp || []
+  })
+
+  const { data: brandbar } = await useAsyncData('brandbar', async () => {
+    const resp = await readItem('navigation', '40', { fields: ['*', { '*': ['*'] }] })
+    return resp?.data || resp || null
+  })
+</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>
+  

package/app/pages/compare.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="compare-page">
+    <div class="container mx-auto px-4 py-8">
+      <h1 class="text-3xl font-bold mb-8">Compare Products</h1>
+      
+      <div v-if="loading" class="text-center">
+        <p>Loading products...</p>
+      </div>
+      
+      <div v-else-if="error" class="text-center text-red-500">
+        <p>Error loading products: {{ error.message }}</p>
+      </div>
+      
+      <div v-else-if="!products.length" class="text-center">
+        <p>No products selected for comparison. Add products to your compare list to see them here.</p>
+        <NuxtLink to="/" class="mt-4 inline-block text-blue-500 hover:text-blue-700">
+          Continue Shopping
+        </NuxtLink>
+      </div>
+      
+      <div v-else>
+        <productCompareTable 
+          :products="products" 
+          @remove-product="handleRemoveProduct"
+        />
+        
+        <div class="mt-8 flex justify-between">
+          <button 
+            @click="clearCompareList" 
+            class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          >
+            Clear Compare List
+          </button>
+          <NuxtLink 
+            to="/" 
+            class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Continue Shopping
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useQuery, useMutation } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+import productCompareTable from '~/components/catalog/product/productCompareTable.vue';
+
+// GraphQL query to get compared products
+const COMPARED_PRODUCTS_QUERY = gql`
+  query GetComparedProducts {
+    customer {
+      compare_list {
+        items {
+          product {
+            uid
+            sku
+            name
+            image {
+              url
+            }
+            price_range {
+              minimum_price {
+                regular_price {
+                  currency
+                  value
+                }
+              }
+            }
+            categories {
+              name
+            }
+            rating_summary
+            review_count
+            reviews_summary
+            price_history
+            custom_attributes
+            features
+          }
+        }
+      }
+    }
+  }
+`;
+
+// GraphQL mutation to clear compare list
+const CLEAR_COMPARE_LIST_MUTATION = gql`
+  mutation ClearCompareList {
+    clearCompareList {
+      compare_list {
+        items {
+          product {
+            uid
+          }
+        }
+      }
+    }
+  }
+`;
+
+// GraphQL mutation to remove a single product from compare list
+const REMOVE_PRODUCT_MUTATION = gql`
+  mutation RemoveFromCompareList($productId: ID!) {
+    removeProductsFromCompareList(input: { product_ids: [$productId] }) {
+      compare_list {
+        items {
+          product {
+            uid
+          }
+        }
+      }
+    }
+  }
+`;
+
+const { result, loading, error, refetch } = useQuery(COMPARED_PRODUCTS_QUERY);
+const { mutate: clearCompareListMutation } = useMutation(CLEAR_COMPARE_LIST_MUTATION);
+const { mutate: removeProductMutation } = useMutation(REMOVE_PRODUCT_MUTATION);
+
+const products = computed(() => {
+  return result.value?.customer?.compare_list?.items?.map(item => item.product) || [];
+});
+
+const clearCompareList = async () => {
+  try {
+    await clearCompareListMutation();
+    await refetch();
+  } catch (error) {
+    console.error('Failed to clear compare list:', error);
+  }
+};
+
+const handleRemoveProduct = async (productId) => {
+  try {
+    await removeProductMutation({
+      variables: {
+        productId
+      }
+    });
+    await refetch();
+  } catch (error) {
+    console.error('Failed to remove product from compare list:', error);
+  }
+};
+
+onMounted(async () => {
+  await refetch();
+});
+</script>
+
+<style scoped>
+.compare-page {
+  min-height: 100vh;
+  background-color: #f9fafb;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+</style>