refactor!: components for product list/grid

packages/theme/composables/useCart/useCart.ts

@@ -42,8 +42,7 @@ type UseCartApplyCouponParams = ComposableFunctionArgs<{
 /**
  * Parameters accepted by the `isInCart` method in the {@link useCart} composable
  */
-type UseCartIsInCartParams<CART, PRODUCT> = {
-  currentCart: CART
+type UseCartIsInCartParams<PRODUCT> = {
   product: PRODUCT
 };
 
@@ -70,7 +69,7 @@ export interface UseCartInterface<CART, CART_ITEM, PRODUCT> {
   /** Removes applied coupon from the cart */
   removeCoupon(params: ComposableFunctionArgs<{}>): Promise<void>;
   /** Checks wheter a `product` is in the `cart` */
-  isInCart(params: UseCartIsInCartParams<CART, PRODUCT>): boolean;
+  isInCart(params: UseCartIsInCartParams<PRODUCT>): boolean;
   /** Sets the contents of the cart */
   setCart(newCart: CART): void;
   /** Returns the Items in the Cart as a `computed` property */

packages/theme/getters/productGetters.ts

@@ -21,7 +21,7 @@ export const getName = (product: ProductInterface): string => {
   return htmlDecode(product.name);
 };
 
-export const getSlug = (product: ProductInterface, category?: Category): string => {
+export const getSlug = (product: ProductInterface, category?: Category | CategoryInterface): string => {
   const rewrites = product?.url_rewrites;
   let url = product?.sku ? `/p/${product.sku}` : '';
   if (!rewrites || rewrites.length === 0) {

packages/theme/jest-setup.js

@@ -1,4 +1,35 @@
 import '@testing-library/jest-dom';
 import Vue from 'vue';
+import { config } from '@vue/test-utils';
+
+config.stubs = {
+  NuxtImg: { render(h) { return h('img'); } },
+};
+
+const $vsf = {
+  $magento: {
+    config: {
+      imageProvider: '',
+      magentoBaseUrl: '',
+      state: {},
+    },
+  },
+};
+
+// mocks object returned by useContext()
+Vue.prototype.$nuxt = {
+  context: {
+    $vsf,
+    app: {
+      // $vsf intentionally doubled in context top level AND in context.app - this is the way it's in the app
+      $vsf,
+      $fc: jest.fn((label) => label),
+      localePath: jest.fn((link) => link),
+    },
+    i18n: {
+      t: jest.fn((label) => label),
+    },
+  },
+};
 
 Vue.directive('e2e', {});

packages/theme/modules/catalog/category/components/views/CategoryProductGrid.vue

@@ -0,0 +1,108 @@
+<template>
+  <transition-group
+    appear
+    class="grid-layout"
+    name="slide"
+    tag="div"
+  >
+    <template v-if="loading">
+      <div
+        v-for="n in 4*3"
+        :key="n"
+        class="sf-product-card card"
+        data-testid="skeleton"
+      >
+        <SkeletonLoader :height="`${imageSize.height}px`" />
+        <SkeletonLoader />
+        <SkeletonLoader />
+      </div>
+    </template>
+    <template v-else>
+      <SfProductCard
+        v-for="product in productsWithCommonProductCardProps"
+        :key="product.uid"
+        v-bind="product.commonProps"
+        class="card"
+        data-testid="product-card"
+        :image-height="imageSize.height"
+        :image-width="imageSize.width"
+        show-add-to-cart-button
+        @click:wishlist="$emit('click:wishlist', product)"
+        @click:add-to-cart="$emit('click:add-to-cart', { product, quantity: 1 })"
+      >
+        <template #price>
+          <SfPrice
+            v-if="pricesLoaded || product.commonProps.regularPrice"
+            class="sf-product-card__price"
+            :regular="product.commonProps.regularPrice"
+            :special="product.commonProps.specialPrice"
+          />
+        </template>
+      </SfProductCard>
+    </template>
+  </transition-group>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, toRefs } from '@nuxtjs/composition-api';
+import { SfProductCard, SfPrice } from '@storefront-ui/vue';
+import { Product, useImage } from '~/composables';
+
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import { useProductsWithCommonProductCardProps } from './useProductsWithCommonCardProps';
+
+export default defineComponent({
+  components: {
+    SfProductCard,
+    SfPrice,
+    SkeletonLoader,
+  },
+  props: {
+    products: {
+      type: Array as PropType<Product[]>,
+      required: true,
+    },
+    pricesLoaded: Boolean,
+    loading: Boolean,
+  },
+  emits: ['click:wishlist', 'click:add-to-cart'],
+  setup(props) {
+    const { imageSizes: { productCard: imageSize } } = useImage();
+    const { products } = toRefs(props);
+    const { productsWithCommonProductCardProps } = useProductsWithCommonProductCardProps(products);
+
+    return {
+      imageSize,
+      productsWithCommonProductCardProps,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./transition.scss";
+.grid-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: center;
+
+  @include for-desktop {
+    justify-content: flex-start;
+    margin: var(--spacer-sm) 0 0 var(--spacer-sm);
+  }
+}
+.card {
+  --product-card-title-margin: var(--spacer-base) 0 0 0;
+  --product-card-title-font-weight: var(--font-weight--medium);
+  --product-card-title-margin: var(--spacer-xs) 0 0 0;
+  flex: 1 1 50%;
+
+  @include for-desktop {
+    flex: 1 1 25%;
+    --product-card-title-font-weight: var(--font-weight--normal);
+    --product-card-add-button-bottom: var(--spacer-base);
+    --product-card-title-margin: var(--spacer-sm) 0 0 0;
+  }
+}
+</style>

packages/theme/modules/catalog/category/components/views/CategoryProductList.vue

@@ -0,0 +1,158 @@
+<template>
+  <transition-group
+    appear
+    class="list-layout"
+    name="slide"
+    tag="div"
+  >
+    <template v-if="loading">
+      <div
+        v-for="n in 4*3"
+        :key="n"
+        class="sf-product-card-horizontal card skeleton-container"
+        data-testid="skeleton"
+      >
+        <SkeletonLoader
+          :height="`${imageSize.height}px`"
+        />
+      </div>
+    </template>
+    <template v-else>
+      <SfProductCardHorizontal
+        v-for="product in productsFormatted"
+        :key="product.uid"
+        v-bind="product.commonProps"
+        class="card"
+        data-testid="product-card"
+        :image-height="imageSize.height"
+        :image-width="imageSize.width"
+        :wishlist-icon="false"
+        @click:wishlist="$emit('click:wishlist', product)"
+        @click:add-to-cart="$emit('click:add-to-cart', { product, quantity: $event })"
+      >
+        <template #configuration>
+          <SfProperty
+            class="desktop-only card__property-size"
+            name="Size"
+            value="XS"
+          />
+          <SfProperty
+            class="desktop-only"
+            name="Color"
+            value="white"
+          />
+        </template>
+        <template #actions>
+          <SfButton
+            v-if="isAuthenticated"
+            class="sf-button--text card__add-to-wishlist"
+            data-testid="wishlist-button"
+            @click="$emit('click:wishlist', product)"
+          >
+            {{ product.wishlistMessage }}
+          </SfButton>
+        </template>
+      </SfProductCardHorizontal>
+    </template>
+  </transition-group>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, computed, useContext, PropType, toRefs,
+} from '@nuxtjs/composition-api';
+import { SfProductCardHorizontal, SfButton, SfProperty } from '@storefront-ui/vue';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+
+import { Product, useImage, useUser } from '~/composables';
+import { useProductsWithCommonProductCardProps } from './useProductsWithCommonCardProps';
+
+export default defineComponent({
+  components: {
+    SfProductCardHorizontal,
+    SfButton,
+    SfProperty,
+    SkeletonLoader,
+  },
+  props: {
+    products: {
+      type: Array as PropType<Product[]>,
+      required: true,
+    },
+    loading: Boolean,
+  },
+  emits: ['click:wishlist', 'click:add-to-cart'],
+  setup(props) {
+    const context = useContext();
+
+    const { products } = toRefs(props);
+
+    const { productsWithCommonProductCardProps } = useProductsWithCommonProductCardProps(products);
+
+    const productsFormatted = computed(() => productsWithCommonProductCardProps.value.map((product) => {
+      const label = product.commonProps.isInWishlist
+        ? 'Remove from Wishlist'
+        : 'Save for later';
+
+      return {
+        ...product,
+        wishlistMessage: context.i18n.t(label),
+      };
+    }));
+
+    const { imageSizes: { productCardHorizontal: imageSize } } = useImage();
+
+    const { isAuthenticated } = useUser();
+
+    return {
+      productsFormatted,
+      imageSize,
+      isAuthenticated,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+@import "./transition.scss";
+
+.list-layout {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  @include for-desktop {
+    margin: 0 0 0 var(--spacer-sm);
+  }
+}
+
+.skeleton-container > * {
+  width: 100%;
+}
+
+.card {
+  flex: 0 0 100%;
+
+  @include for-desktop {
+    margin: var(--spacer-lg) 0;
+  }
+
+  @include for-mobile {
+    ::v-deep .sf-image {
+      --image-width: 5.3125rem;
+      --image-height: 7.0625rem;
+    }
+  }
+
+  &__property-size {
+    margin-bottom: 1rem;
+  }
+
+  &__add-to-wishlist {
+    @include for-mobile {
+      margin: 1rem auto;
+    }
+
+    display: block;
+  }
+}
+</style>

packages/theme/modules/catalog/category/components/views/__tests__/CategoryProductGrid.spec.ts

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/vue';
+import { createTestingPinia } from '@pinia/testing';
+import { createLocalVue } from '@vue/test-utils';
+import { PiniaVuePlugin } from 'pinia';
+import CategoryProductGrid from '../CategoryProductGrid.vue';
+import { productsMock } from './productsMock';
+
+const localVue = createLocalVue();
+localVue.use(PiniaVuePlugin);
+
+describe('CategoryProductGrid', () => {
+  it('shows skeleton loader when loading', async () => {
+    const { findAllByTestId } = render(CategoryProductGrid, { props: { loading: true, products: [] }, localVue, pinia: createTestingPinia() });
+    const loadingSkeletons = await findAllByTestId('skeleton');
+    expect(loadingSkeletons).not.toHaveLength(0);
+  });
+
+  it('shows products when loaded', async () => {
+    const { findAllByTestId } = render(CategoryProductGrid, {
+      props: {
+        loading: false,
+        products: productsMock,
+      },
+      localVue,
+      pinia: createTestingPinia(),
+    });
+    const products = await findAllByTestId('product-card');
+    expect(products).toHaveLength(productsMock.length);
+  });
+});