feat(cloud): Add support for viewing status of SSL in custom domains (#12011)

# Pull Request Template

## Description

Fixes
[CW-4620](https://linear.app/chatwoot/issue/CW-4620/rethinking-custom-domains-in-chatwoot)

<img width="642" height="187" alt="Screenshot 2025-07-29 at 8 17 44 PM"
src="https://github.com/user-attachments/assets/ad2f5dac-4b27-4dce-93ca-6cbba74443fb"
/>


## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue

@@ -4,12 +4,16 @@ import { useRoute, useRouter } from 'vue-router';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import { useAccount } from 'dashboard/composables/useAccount';
 import PortalSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue';
 
+const SSL_STATUS_FETCH_INTERVAL = 5000;
+
 const { t } = useI18n();
 const store = useStore();
 const route = useRoute();
 const router = useRouter();
+const { isOnChatwootCloud } = useAccount();
 
 const { updateUISettings } = useUISettings();
 
@@ -24,6 +28,15 @@ const getDefaultLocale = slug => {
   return getPortalBySlug.value(slug)?.meta?.default_locale;
 };
 
+const fetchSSLStatus = () => {
+  if (!isOnChatwootCloud.value) return;
+
+  const { portalSlug } = route.params;
+  store.dispatch('portals/sslStatus', {
+    portalSlug,
+  });
+};
+
 const fetchPortalAndItsCategories = async (slug, locale) => {
   const selectedPortalParam = { portalSlug: slug, locale };
   await Promise.all([
@@ -106,8 +119,35 @@ const deletePortal = async selectedPortalForDelete => {
   }
 };
 
+const handleSendCnameInstructions = async payload => {
+  try {
+    await store.dispatch('portals/sendCnameInstructions', payload);
+    useAlert(
+      t(
+        'HELP_CENTER.PORTAL.PORTAL_SETTINGS.SEND_CNAME_INSTRUCTIONS.API.SUCCESS_MESSAGE'
+      )
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t(
+          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.SEND_CNAME_INSTRUCTIONS.API.ERROR_MESSAGE'
+        )
+    );
+  }
+};
+
 const handleUpdatePortal = updatePortalSettings;
-const handleUpdatePortalConfiguration = updatePortalSettings;
+const handleUpdatePortalConfiguration = portalObj => {
+  updatePortalSettings(portalObj);
+
+  // If custom domain is added or updated, fetch SSL status after a delay of 5 seconds (only on Chatwoot cloud)
+  if (portalObj?.custom_domain && isOnChatwootCloud.value) {
+    setTimeout(() => {
+      fetchSSLStatus();
+    }, SSL_STATUS_FETCH_INTERVAL);
+  }
+};
 const handleDeletePortal = deletePortal;
 </script>
 
@@ -118,5 +158,7 @@ const handleDeletePortal = deletePortal;
     @update-portal="handleUpdatePortal"
     @update-portal-configuration="handleUpdatePortalConfiguration"
     @delete-portal="handleDeletePortal"
+    @refresh-status="fetchSSLStatus"
+    @send-cname-instructions="handleSendCnameInstructions"
   />
 </template>