Bug/infinite loading

packages/commercetools/theme/components/Checkout/VsfShippingProvider.vue

@@ -12,6 +12,9 @@
       <div v-else-if="errorShippingProvider.save">
         {{ $t('There was some error while trying to select this shipping method. We are sorry, please try with different shipping method or later.') }}
       </div>
+      <div v-else-if="!shippingMethods.length">
+        {{ $t('There are no shipping methods available for this country. We are sorry, please try with different country or later.') }}
+      </div>
       <div class="form__radio-group">
           <SfRadio
             v-for="method in shippingMethods"

packages/core/core/src/factories/useUserFactory.ts

@@ -41,6 +41,7 @@ export const useUserFactory = <USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS ex
 
     const updateUser = async ({ user: providedUser }) => {
       Logger.debug('useUserFactory.updateUser', providedUser);
+      resetErrorValue();
 
       try {
         loading.value = true;
@@ -63,7 +64,7 @@ export const useUserFactory = <USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS ex
         user.value = await _factoryParams.register(providedUser);
         error.value.register = null;
       } catch (err) {
-        error.value.register = err;
+        error.value.register = err.response?.data || err;
         Logger.error('useUser/register', err);
       } finally {
         loading.value = false;
@@ -79,7 +80,7 @@ export const useUserFactory = <USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS ex
         user.value = await _factoryParams.logIn(providedUser);
         error.value.login = null;
       } catch (err) {
-        error.value.login = err;
+        error.value.login = err.response?.data || err;
         Logger.error('useUser/login', err);
       } finally {
         loading.value = false;
@@ -88,6 +89,7 @@ export const useUserFactory = <USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS ex
 
     const logout = async () => {
       Logger.debug('useUserFactory.logout');
+      resetErrorValue();
 
       try {
         await _factoryParams.logOut();
@@ -101,6 +103,7 @@ export const useUserFactory = <USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS ex
 
     const changePassword = async (params) => {
       Logger.debug('useUserFactory.changePassword', { currentPassword: mask(params.current), newPassword: mask(params.new) });
+      resetErrorValue();
 
       try {
         loading.value = true;
@@ -120,6 +123,7 @@ export const useUserFactory = <USER, UPDATE_USER_PARAMS, REGISTER_USER_PARAMS ex
 
     const load = async () => {
       Logger.debug('useUserFactory.load');
+      resetErrorValue();
 
       try {
         loading.value = true;

packages/core/docs/changelog/5463.js

@@ -0,0 +1,8 @@
+module.exports = {
+  description: 'Fix VsfShippingProvider to correctly show errors related to no shipping methods available for certain country',
+  link: 'https://github.com/vuestorefront/vue-storefront/issues/5463',
+  isBreaking: false,
+  breakingChanges: [],
+  author: 'Baroshem',
+  linkToGitHubAccount: 'https://github.com/Baroshem'
+};

packages/core/docs/changelog/5508.js

@@ -0,0 +1,15 @@
+module.exports = {
+  description: 'Fix infinite loading for login and register by implementing error handling in core module and in LoginModal',
+  link: 'https://github.com/vuestorefront/vue-storefront/issues/5508',
+  isBreaking: true,
+  breakingChanges: [
+    {
+      module: 'core/middleware, LoginModal',
+      before: 'There was no error handling and thats why the infinite loading was appearing',
+      after: 'Errors are handled immediately',
+      comment: 'add try/catch to middleware, set more appriopriate value to err.value in useUserFactory, and implement error handling in LoginModal'
+    }
+  ],
+  author: 'Baroshem',
+  linkToGitHubAccount: 'https://github.com/Baroshem'
+};

packages/core/middleware/src/createServer.ts

@@ -37,9 +37,15 @@ function createServer (config: MiddlewareConfig): Express {
     const createApiClient = apiClient.createApiClient.bind({ middleware: middlewareContext });
     const apiClientInstance = createApiClient(configuration);
     const apiFunction = apiClientInstance.api[functionName];
-    const platformResponse = await apiFunction(...req.body);
+    try {
+      const platformResponse = await apiFunction(...req.body);
 
-    res.send(platformResponse);
+      res.send(platformResponse);
+    } catch (error) {
+      res.status(500);
+
+      res.send(error);
+    }
   });
 
   consola.success('Middleware created!');

packages/core/nuxt-theme-module/theme/components/LoginModal.vue

@@ -216,6 +216,7 @@ export default {
     };
 
     const handleForm = (fn) => async () => {
+      resetErrorValues();
       await fn({ user: form.value });
       resetErrorValues();