Merge branch '20220613-add-getting-started-section' of https://github.com/vuestorefront/magento2 into 20220613-add-getting-started-section

Author: filipsobol

.github/workflows/conventional-pr-name.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v1
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: "16"
 

.github/workflows/publish-npm.yml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: "16"
           registry-url: "https://registry.npmjs.org/"

.github/workflows/test.yml

@@ -25,10 +25,9 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16.13.0'
-          cache: 'yarn'
 
       - name: Install dependencies
         run: yarn install

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/helpers/checkout/address.ts

@@ -25,7 +25,7 @@ export const addressFromApiToForm = (address: CustomerAddress | CartAddressInter
   apartment: address.street?.[1],
   city: address.city,
   region: (address as CustomerAddress)?.region?.region_code ?? (address as CartAddressInterface).region.code,
-  country_code: (address as CustomerAddress)?.country_code ?? (address as CartAddressInterface).region.code,
+  country_code: (address as CustomerAddress)?.country_code ?? (address as CartAddressInterface).country.code,
   postcode: address.postcode,
   telephone: address.telephone,
 });

packages/theme/lang/de.js

@@ -15,7 +15,7 @@ export default {
   "Back to home": "Zurück Zur Startseite",
   "Back to homepage": "Zurück zur Homepage",
   "Billing": "Abrechnung",
-  "Billing Address": "Rechnungsadresse",
+  "Billing address": "Rechnungsadresse",
   "Brand": "Marke",
   "Cancel": "Abbrechen",
   "Cart": "Warenkorb",
@@ -156,13 +156,14 @@ export default {
   "Set up newsletter": "Richten Sie Ihren Newsletter ein und wir senden Ihnen wöchentlich Informationen zu neuen Produkten und Trends aus den von Ihnen ausgewählten Bereichen",
   "Share your look": "Teile deinen Look",
   "Shipping": "Versand",
-  "Shipping Address": "Lieferanschrift",
-  "Shipping Details": "Versanddetails",
-  "Shipping Method": "Versandart",
+  "Shipping address": "Lieferanschrift",
+  "Shipping details": "Versanddetails",
+  "Shipping method": "Versandart",
   "Show":"Show",
   "show more": "mehr anzeigen",
   "Show on page": "Auf Seite anzeigen",
   "Sign in": "Einloggen",
+  "Size guide": "Größentabelle",
   "Sign Up for Newsletter": "Anmeldung für Newsletter",
   "Sort by": "Sortieren nach",
   "Sort: Default": "Standard",

packages/theme/lang/en.js

@@ -15,7 +15,7 @@ export default {
   "Back to home": "Back to home",
   "Back to homepage": "Back to homepage",
   "Billing": "Billing",
-  "Billing Address": "Billing Address",
+  "Billing address": "Billing address",
   "Brand": "Brand",
   "Cancel": "Cancel",
   "Cart": "Cart",
@@ -151,13 +151,14 @@ export default {
   "Set up newsletter": "Set up your newsletter and we will send you information about new products and trends from the sections you selected every week.",
   "Share your look": "Share your look",
   "Shipping": "Shipping",
-  "Shipping Address": "Shipping Address",
-  "Shipping Details": "Shipping Details",
-  "Shipping Method": "Shipping Method",
+  "Shipping address": "Shipping address",
+  "Shipping details": "Shipping details",
+  "Shipping method": "Shipping method",
   "Show":"Show",
   "show more": "show more",
   "Show on page": "Show on page",
   "Sign in": "Sign in",
+  "Size guide": "Size guide",
   "Sign Up for Newsletter": "Sign Up for Newsletter",
   "Sort by": "Sort by",
   "Sort: Default": "Default",

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,
     };
   },
 });