feat: add quantity error message on the PDP when adding to the cart

packages/api-client/src/api/addProductsToCart/addProductsToCart.ts

@@ -185,6 +185,10 @@ export default gql`
           }
         }
       }
+      user_errors {
+        code
+        message
+      }
     }
   }
 `;

packages/api-client/src/types/API.ts

@@ -3,13 +3,9 @@ import { DocumentNode, ExecutionResult } from 'graphql';
 import { CustomQuery } from '@vue-storefront/core';
 import {
   AddConfigurableProductsToCartInput,
-  AddConfigurableProductsToCartMutation,
   AddSimpleProductsToCartInput,
-  AddSimpleProductsToCartMutation,
   AddDownloadableProductsToCartInput,
-  AddDownloadableProductsToCartMutation,
   AddVirtualProductsToCartInput,
-  AddVirtualProductsToCartMutation,
   AppliedCoupon,
   ApplyCouponToCartInput,
   ApplyCouponToCartMutation,
@@ -95,19 +91,22 @@ import {
   RemoveProductsFromWishlistMutationVariables,
   RemoveProductsFromWishlistMutation,
   GetCustomerAddressesQuery,
-  AddProductsToCartMutation,
   CmsBlockQuery,
   GroupedProduct,
   AddBundleProductsToCartInput,
-  AddBundleProductsToCartMutation,
   RequestPasswordResetEmailMutation,
   RequestPasswordResetEmailMutationVariables,
   ResetPasswordMutationVariables,
   ResetPasswordMutation,
   ChangeCustomerPasswordMutation,
   CreateCustomerAddressMutation,
   DownloadableProduct,
-  VirtualProduct, CustomerOrdersFilterInput, RoutableInterface,
+  VirtualProduct,
+  CustomerOrdersFilterInput,
+  RoutableInterface,
+  AddProductsToCartOutput,
+  AddConfigurableProductsToCartMutation,
+  AddBundleProductsToCartMutation, AddSimpleProductsToCartMutation, AddDownloadableProductsToCartMutation, AddVirtualProductsToCartMutation,
 } from './GraphQL';
 import { SetPaymentMethodOnCartInputs } from '../api/setPaymentMethodOnCart';
 import { CustomerProductReviewParams } from '../api/customerProductReview';
@@ -179,7 +178,7 @@ export interface MagentoApiMethods {
   addProductsToCart(
     input: AddProductsToCartInput,
     customQuery?: CustomQuery
-  ): Promise<FetchResult<AddProductsToCartMutation>>;
+  ): Promise<FetchResult<{ addProductsToCart: AddProductsToCartOutput }>>;
 
   addProductToWishList(
     input: AddProductsToWishlistMutationVariables,

packages/theme/modules/catalog/product/components/product-types/bundle/BundleProductSelector.vue

@@ -73,6 +73,12 @@
     >
       Add to Cart
     </SfButton>
+    <SfAlert
+      :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+      class="product__add-to-cart-error"
+      :message="addToCartError"
+      type="danger"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -82,6 +88,7 @@ import {
   SfQuantitySelector,
   SfRadio,
   SfButton,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   computed, defineComponent, PropType, ref, watch,
@@ -105,6 +112,7 @@ export default defineComponent({
     SfPrice,
     SfQuantitySelector,
     SfRadio,
+    SfAlert,
   },
   props: {
     canAddToCart: {
@@ -119,9 +127,10 @@ export default defineComponent({
   },
   emits: ['update-bundle', 'update-price'],
   setup(props, { emit }) {
-    const { loading, addItem } = useCart();
+    const { loading, addItem, error: cartError } = useCart();
     const bundleProduct = computed(() => getBundleProducts(props.product));
     const selectedOptions = ref({});
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
 
     selectedOptions.value = bundleProductInitialSelector(bundleProduct.value);
 
@@ -185,6 +194,7 @@ export default defineComponent({
       getProductName,
       getProductPrice,
       selectedOptions,
+      addToCartError,
     };
   },
 });

packages/theme/modules/catalog/product/components/product-types/configurable/ConfigurableProduct.vue

@@ -132,6 +132,12 @@
           class="product__add-to-cart"
           @click="addItem({ product, quantity: parseInt(qty) })"
         />
+        <SfAlert
+          :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+          class="product__add-to-cart-error"
+          :message="addToCartError"
+          type="danger"
+        />
         <div class="product__additional-actions">
           <AddToWishlist
             :is-in-wishlist="isInWishlist"
@@ -162,6 +168,7 @@ import {
   SfPrice,
   SfRating,
   SfSelect,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -210,6 +217,7 @@ export default defineComponent({
     SfPrice,
     SfRating,
     SfSelect,
+    SfAlert,
     AddToWishlist,
     SvgImage,
     ProductTabs,
@@ -230,7 +238,9 @@ export default defineComponent({
     const product = toRef(props, 'product');
     const route = useRoute();
     const router = useRouter();
-    const { addItem, loading: isCartLoading, canAddToCart } = useCart();
+    const {
+      addItem, error: cartError, loading: isCartLoading, canAddToCart,
+    } = useCart();
     const { productGallery, imageSizes } = useProductGallery(product);
     const { activeTab, setActiveTab, openNewReviewTab } = useProductTabs();
 
@@ -264,7 +274,7 @@ export default defineComponent({
 
     const totalReviews = computed(() => getTotalReviews(props.product));
     const averageRating = computed(() => getAverageRating(props.product));
-
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
     const updateProductConfiguration = (label: string, value: string) => {
       if (productConfiguration.value[label] === value) return;
 
@@ -304,6 +314,7 @@ export default defineComponent({
       openNewReviewTab,
       activeTab,
       TabsConfig,
+      addToCartError,
     };
   },
 });

packages/theme/modules/catalog/product/components/product-types/grouped/GroupedProductSelector.vue

@@ -42,6 +42,12 @@
     >
       Add to Cart
     </SfButton>
+    <SfAlert
+      :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+      class="product__add-to-cart-error"
+      :message="addToCartError"
+      type="danger"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -51,6 +57,7 @@ import {
   SfButton,
   SfQuantitySelector,
   SfImage,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   computed, watch, ref, defineComponent, PropType,
@@ -78,6 +85,7 @@ export default defineComponent({
     SfButton,
     SfQuantitySelector,
     SfImage,
+    SfAlert,
   },
   props: {
     canAddToCart: {
@@ -92,7 +100,7 @@ export default defineComponent({
   },
   emits: ['update-price'],
   setup(props, { emit }) {
-    const { addItem } = useCart();
+    const { addItem, error: cartError } = useCart();
     const loading = ref(false);
     const groupedItems = computed(() => getGroupedProducts(props.product));
     const addToCart = async () => {
@@ -105,6 +113,9 @@ export default defineComponent({
           for (const p of groupedItemsFiltered) {
             // eslint-disable-next-line no-await-in-loop
             await addItem({ product: p.product, quantity: p.qty });
+            if (cartError.value.addItem) {
+              break;
+            }
           }
         }
         loading.value = false;
@@ -125,6 +136,7 @@ export default defineComponent({
     );
 
     const { getMagentoImage } = useImage();
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
 
     return {
       addToCart,
@@ -134,6 +146,7 @@ export default defineComponent({
       getProductName,
       getProductPrice,
       getProductThumbnailImage,
+      addToCartError,
     };
   },
 });

packages/theme/modules/catalog/product/components/product-types/simple/SimpleProduct.vue

@@ -84,6 +84,12 @@
           class="product__add-to-cart"
           @click="addItem({ product, quantity: parseInt(qty) })"
         />
+        <SfAlert
+          :style="{ visibility: !!addToCartError ? 'visible' : 'hidden'}"
+          class="product__add-to-cart-error"
+          :message="addToCartError"
+          type="danger"
+        />
         <div class="product__additional-actions">
           <AddToWishlist
             :is-in-wishlist="isInWishlist"
@@ -112,6 +118,7 @@ import {
   SfLoader,
   SfPrice,
   SfRating,
+  SfAlert,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -154,6 +161,7 @@ export default defineComponent({
     SfLoader,
     SfPrice,
     SfRating,
+    SfAlert,
     AddToWishlist,
     SvgImage,
     ProductTabs,
@@ -172,7 +180,9 @@ export default defineComponent({
   setup(props) {
     const qty = ref(1);
     const product = toRef(props, 'product');
-    const { addItem, loading: isCartLoading, canAddToCart } = useCart();
+    const {
+      addItem, error: cartError, loading: isCartLoading, canAddToCart,
+    } = useCart();
     const { productGallery, imageSizes } = useProductGallery(product);
     const { isAuthenticated } = useUser();
     const { addOrRemoveItem, isInWishlist } = useWishlist();
@@ -186,6 +196,7 @@ export default defineComponent({
     const productSpecialPrice = computed(() => getProductPrice(props.product).special);
     const totalReviews = computed(() => getTotalReviews(props.product));
     const averageRating = computed(() => getAverageRating(props.product));
+    const addToCartError = computed(() => cartError.value?.addItem?.message);
 
     return {
       addItem,
@@ -207,6 +218,7 @@ export default defineComponent({
       openNewReviewTab,
       activeTab,
       TabsConfig,
+      addToCartError,
     };
   },
 });

packages/theme/modules/catalog/product/components/product-types/styles.scss

@@ -78,6 +78,10 @@
     }
   }
 
+  ::v-deep &__add-to-cart-error {
+    margin: var(--spacer-xs) 0;
+  }
+
   &__guide,
   &__compare,
   &__save {