fix(inboxes): show facebook inbox creation errors (#15408)

Facebook inbox creation failures in Settings could leave users on the
same screen without explaining what went wrong. This change preserves
the backend error response and displays it through the existing toast
mechanism, making account-limit and other creation failures visible and
actionable.

The shared action now passes the original API error through, so the
newer onboarding flow also receives the specific backend message.
Successful Facebook inbox creation remains unchanged.

### How to reproduce

1. Use an account that has reached its inbox limit.
2. Go to Settings → Inboxes → Add Inbox → Facebook.
3. Select a Facebook Page and create the inbox.
4. Previously, the loading state ended without any visible error.

### How to test

1. Attempt Facebook inbox creation while the backend returns an HTTP 402
account-limit error.
2. Confirm the returned error appears as a toast message.
3. Retry after increasing the account limit and confirm inbox creation
continues normally.

### Things to know

The toast falls back to a generic localized creation error when the API
response does not contain a displayable message.

Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -562,6 +562,7 @@
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
       "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
       "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
+      "ERROR_CHANNEL_CREATION": "We were unable to create the inbox. Please try again.",
       "CREATING_CHANNEL": "Creating your Inbox...",
       "TITLE": "Configure Inbox Details",
       "DESC": ""

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -14,6 +14,7 @@ import { useAccount } from 'dashboard/composables/useAccount';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import { META_RESTRICTION_STATUS_URL } from 'dashboard/constants/globals';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 import * as Sentry from '@sentry/vue';
 
@@ -152,7 +153,13 @@ export default {
               params: { page: 'new', inbox_id: data.id },
             });
           })
-          .catch(() => {
+          .catch(error => {
+            const errorMessage = parseAPIErrorResponse(error);
+            useAlert(
+              typeof errorMessage === 'string'
+                ? errorMessage
+                : this.$t('INBOX_MGMT.DETAILS.ERROR_CHANNEL_CREATION')
+            );
             this.isCreating = false;
           });
       }

app/javascript/dashboard/store/modules/inboxes.js

@@ -226,7 +226,7 @@ export const actions = {
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
-      throw new Error(error);
+      throw error;
     }
   },
   createWhatsAppEmbeddedSignup: async ({ commit }, params) => {

app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js

@@ -95,8 +95,9 @@ describe('#actions', () => {
       ]);
     });
     it('sends correct actions if API is error', async () => {
-      axios.post.mockRejectedValue({ message: 'Incorrect header' });
-      await expect(actions.createFBChannel({ commit })).rejects.toThrow(Error);
+      const error = { response: { data: { error: 'Incorrect header' } } };
+      axios.post.mockRejectedValue(error);
+      await expect(actions.createFBChannel({ commit })).rejects.toBe(error);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_INBOXES_UI_FLAG, { isCreating: true }],
         [types.default.SET_INBOXES_UI_FLAG, { isCreating: false }],