fix(whatsapp): prioritize health errors over stale data

app/javascript/dashboard/routes/dashboard/settings/inbox/components/AccountHealth.vue

@@ -412,7 +412,7 @@ const handleCopyWebhookUrl = async url => {
         </ButtonV4>
       </div>
 
-      <div v-if="healthData" class="space-y-6">
+      <div v-if="healthData && !errorState" class="space-y-6">
         <section v-for="section in healthSections" :key="section.key">
           <h3 class="mb-3 text-heading-4 text-n-slate-12">
             {{ section.title }}

app/javascript/dashboard/routes/dashboard/settings/inbox/components/specs/AccountHealth.spec.js

@@ -11,9 +11,9 @@ vi.mock('vue-i18n', () => ({
 }));
 
 describe('AccountHealth', () => {
-  const mountComponent = healthData =>
+  const mountComponent = (healthData, props = {}) =>
     shallowMount(AccountHealth, {
-      props: { healthData },
+      props: { healthData, ...props },
     });
 
   beforeEach(() => {
@@ -66,4 +66,20 @@ describe('AccountHealth', () => {
       'INBOX_MGMT.ACCOUNT_HEALTH.VALUES.MODES.CUSTOM_MODE'
     );
   });
+
+  it('shows the current error instead of stale health data', () => {
+    const wrapper = mountComponent(
+      { verified_name: 'Stale Business Name' },
+      {
+        healthError: {
+          type: 'authorization',
+          message: 'The connection needs to be refreshed',
+        },
+        isEmbeddedSignup: true,
+      }
+    );
+
+    expect(wrapper.text()).toContain('The connection needs to be refreshed');
+    expect(wrapper.text()).not.toContain('Stale Business Name');
+  });
 });