fix: coupon code invalid error message

- rework coupon code component to handle GraphQL errors
M2-559

Author: bartoszherba

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

@@ -203,7 +203,7 @@ export interface MagentoApiMethods {
   applyCouponToCart(
     input: ApplyCouponToCartInput,
     customQuery?: CustomQuery
-  ): Promise<FetchResult<ApplyCouponToCartMutation>>;
+  ): Promise<ApolloQueryResult<ApplyCouponToCartMutation>>;
 
   availableStores(customQuery?: CustomQuery): Promise<ApolloQueryResult<AvailableStoresQuery>>;
 
@@ -355,7 +355,7 @@ export interface MagentoApiMethods {
   removeCouponFromCart(
     input: RemoveCouponFromCartInput,
     customQuery?: CustomQuery
-  ): Promise<FetchResult<RemoveCouponFromCartMutation>>;
+  ): Promise<ApolloQueryResult<RemoveCouponFromCartMutation>>;
 
   removeItemFromCart(
     input: RemoveItemFromCartInput,

packages/theme/components/CouponCode.vue

@@ -14,7 +14,7 @@
         :disabled="isCouponCodeApplied"
         :label="$t('Enter promo code')"
         class="sf-input--filled coupon-code__input"
-        :error-message="$t('An error occurred')"
+        :error-message="$t(applyCouponMsg.message)"
         :valid="!hasAnyError"
       />
       <SfButton
@@ -52,9 +52,8 @@ export default defineComponent({
 
     const couponCodeAppliedToCart = computed(() => cartGetters.getAppliedCoupon(cart.value)?.code);
     const isCouponCodeApplied = computed(() => couponCodeAppliedToCart.value !== undefined);
-
-    const hasAnyError = computed(() => Object.values(error.value).some((value) => value instanceof Error));
-
+    const hasAnyError = computed(() => Object.values(error.value).some((value) => value !== null));
+    const applyCouponMsg = computed<Error>(() => error.value.applyCoupon || error.value.removeCoupon || { message: '', name: 'apply-coupon' });
     const applyOrRemoveCoupon = async () => {
       const operationPromise = isCouponCodeApplied.value
         ? removeCoupon({})
@@ -67,8 +66,9 @@ export default defineComponent({
       couponCodeUserInput,
       couponCodeAppliedToCart,
       isCouponCodeApplied,
-      hasAnyError,
+      applyCouponMsg,
       applyOrRemoveCoupon,
+      hasAnyError,
     };
   },
 });

packages/theme/lang/de.js

@@ -10,6 +10,7 @@ export default {
   "All Orders": "Alle Bestellungen",
   "Allow order notifications": "Bestellbenachrichtigungen zulassen",
   "Apply": "Übernehmen",
+  "Applied Coupon": "Angewendeter Gutschein",
   "Attention!": "Attention!",
   "Back to home": "Zurück Zur Startseite",
   "Back to homepage": "Zurück zur Homepage",
@@ -131,6 +132,7 @@ export default {
   "Read reviews": "Bewertungen lesen",
   "Register": "Registrieren",
   "Register today": "Melde dich noch heute an",
+  "Remove": "Löschen",
   "Remove Address": "Adresse entfernen",
   "Remove from Wishlist": "Von Wunschliste entfernen",
   "Repeat Password": "Wiederhole das Passwort",
@@ -266,5 +268,6 @@ export default {
   "Show less": "Zeige weniger",
   "Yes": "Ja",
   "No": "Nein",
-  "Apply filters": "Filter anwenden"
+  "Apply filters": "Filter anwenden",
+  "The coupon code isn't valid. Verify the code and try again.": "Der Gutscheincode ist ungültig. Überprüfen Sie den Code und versuchen Sie es erneut."
 };

packages/theme/lang/en.js

@@ -10,6 +10,7 @@ export default {
   "All Orders": "All Orders",
   "Allow order notifications": "Allow order notifications",
   "Apply": "Apply",
+  "Applied Coupon": "Applied Coupon",
   "Attention!": "Attention!",
   "Back to home": "Back to home",
   "Back to homepage": "Back to homepage",
@@ -127,6 +128,7 @@ export default {
   "Read reviews": "Read reviews",
   "Register": "Register",
   "Register today": "Register today",
+  "Remove": "Remove",
   "Remove Address": "Remove Address",
   "Remove from Wishlist": "Remove from Wishlist",
   "Repeat Password": "Repeat Password",
@@ -264,5 +266,6 @@ export default {
   "Show less": "Show less",
   "Yes": "Yes",
   "No": "No",
-  "Apply filters": "Apply filters"
+  "Apply filters": "Apply filters",
+  "The coupon code isn't valid. Verify the code and try again.": "The coupon code isn't valid. Verify the code and try again.",
 };

packages/theme/modules/checkout/composables/useCart/commands/applyCouponCommand.ts

@@ -13,16 +13,17 @@ export const applyCouponCommand = {
       currentCart,
     });
 
-    const { data } = await context.$magento.api.applyCouponToCart({
+    const { data, errors } = await context.$magento.api.applyCouponToCart({
       cart_id: currentCart.id,
       coupon_code: couponCode,
     }, customQuery);
 
-    Logger.debug('[Result]:', { data });
+    Logger.debug('[Result]:', { data, errors });
 
     return {
-      updatedCart: data.applyCouponToCart.cart as unknown as Cart,
+      updatedCart: data.applyCouponToCart?.cart as unknown as Cart,
       updatedCoupon: { code: couponCode },
+      errors,
     };
   },
 };

packages/theme/modules/checkout/composables/useCart/commands/removeCouponCommand.ts

@@ -6,15 +6,16 @@ export const removeCouponCommand = {
   execute: async (context: VsfContext, { currentCart, customQuery = { removeCouponFromCart: 'removeCouponFromCart' } }) => {
     Logger.debug('[Magento]: Remove coupon from cart', { currentCart });
 
-    const { data } = await context.$magento.api.removeCouponFromCart({
+    const { data, errors } = await context.$magento.api.removeCouponFromCart({
       cart_id: currentCart.id,
     }, customQuery);
 
     Logger.debug('[Result]:', { data });
 
     return {
-      updatedCart: data.removeCouponFromCart.cart as unknown as Cart,
+      updatedCart: data.removeCouponFromCart?.cart as unknown as Cart,
       updatedCoupon: { code: '' },
+      errors,
     };
   },
 };

packages/theme/modules/checkout/composables/useCart/index.ts

@@ -197,21 +197,35 @@ PRODUCT
     }
   };
 
+  const handleCoupon = async (couponCode = null, customQuery = null): Promise<void> => {
+    const variables = {
+      currentCart: cart.value,
+      customQuery,
+      couponCode,
+    };
+
+    const { updatedCart, errors } = couponCode
+      ? await applyCouponCommand.execute(context, variables)
+      : await removeCouponCommand.execute(context, variables);
+
+    if (errors) {
+      throw errors[0];
+    }
+
+    if (updatedCart) {
+      customerStore.$patch((state) => {
+        state.cart = updatedCart;
+      });
+    }
+  };
+
   const applyCoupon = async ({ couponCode, customQuery }): Promise<void> => {
     Logger.debug('useCart.applyCoupon');
 
     try {
       loading.value = true;
-      const { updatedCart } = await applyCouponCommand.execute(context, {
-        currentCart: cart.value,
-        couponCode,
-        customQuery,
-      });
-
+      await handleCoupon(couponCode, customQuery);
       error.value.applyCoupon = null;
-      customerStore.$patch((state) => {
-        state.cart = updatedCart;
-      });
     } catch (err) {
       error.value.applyCoupon = err;
       Logger.error('useCart/applyCoupon', err);
@@ -225,16 +239,8 @@ PRODUCT
 
     try {
       loading.value = true;
-      const { updatedCart } = await removeCouponCommand.execute(context, {
-        currentCart: cart.value,
-        customQuery,
-      });
-
-      error.value.removeCoupon = null;
-      customerStore.$patch((state) => {
-        state.cart = updatedCart;
-      });
-      loading.value = false;
+      await handleCoupon(null, customQuery);
+      error.value.applyCoupon = null;
     } catch (err) {
       error.value.removeCoupon = err;
       Logger.error('useCart/removeCoupon', err);