@bigbinary/neeto-custom-domains-frontend 3.2.2 → 3.3.0

package/README.md

@@ -68,30 +68,87 @@ end
 All common controller logic is extracted to the engine. However, we still need
 to load some records from the host app controller.
 
+If the custom domain is associated with `Organization`, add a
+`Api::V1::CustomDomainable` concern in the host app and include it in the
+controller. This keeps the loader reusable across controllers that need it.
+
 ```ruby
-class Api::V1::Admin::CustomDomainsController < NeetoCustomDomainsEngine::DomainsController
+# app/controllers/concerns/api/v1/custom_domainable.rb
+module Api::V1::CustomDomainable
+  extend ActiveSupport::Concern
+
   private
 
-    # If custom_domain is associated to Organization
     def load_custom_domainable!
       @custom_domainable = organization
     end
+end
+```
+
+```ruby
+class Api::V1::Admin::CustomDomainsController < NeetoCustomDomainsEngine::DomainsController
+  include Api::V1::CustomDomainable
+end
+```
+
+If the custom domain is associated with another resource (eg. `Site`), define
+`load_custom_domainable!` directly in the controller instead:
+
+```ruby
+class Api::V1::Admin::CustomDomainsController < NeetoCustomDomainsEngine::DomainsController
+  private
 
-    # If custom_domain is associated to other resources (eg: site)
     def load_custom_domainable!
       @custom_domainable = organization.sites.find(params[:site_id])
     end
 end
 ```
 
-3. Include the following module to your application's `config/routes.rb` file:
+3. Add a `CustomDomainConcern` model concern
+
+The engine's `NeetoCustomDomainsEngine::Domain` model needs `custom_domain_url`
+and `organization` to be available on the domain record — they are used, for
+example, when generating links in notification emails and when pushing the
+domain to NeetoTower.
+
+Define the concern in the host app at the exact path below. The engine
+auto-includes it via `include CustomDomainConcern if defined?(CustomDomainConcern)`,
+so no initializer or manual patching is needed — Rails autoloading handles it.
+
+The path returned by `custom_domain_url` is product-specific. Point it at
+wherever the custom domain settings page is mounted in your product's admin
+panel (the example below uses NeetoQuiz's path; replace it for your product).
+
+```ruby
+# app/models/concerns/custom_domain_concern.rb
+module CustomDomainConcern
+  extend ActiveSupport::Concern
+
+  def custom_domain_url
+    root_url = organization.root_url
+    # Replace this path with the route to the custom domain settings page
+    # in your product's admin panel.
+    "#{root_url}/admin/admin-panel/custom-domain"
+  end
+
+  def organization
+    custom_domainable
+  end
+end
+```
+
+If the `custom_domainable` is not the `Organization` itself (eg. `Site`),
+update `organization` to traverse to the owning organization (eg.
+`custom_domainable.organization`).
+
+4. Include the following module to your application's `config/routes.rb` file:
 
 ```ruby
 include NeetoCustomDomainsEngine::Routes::Draw
 
 ```
 
-4. Define required routes.
+5. Define required routes.
 
 ```ruby
 # config/routes.rb
@@ -101,7 +158,7 @@ custom_domains_routes :acme
 custom_domains_routes :domain
 ```
 
-5. Add frontend component. `url` should be the api to the custom domains
+6. Add frontend component. `url` should be the api to the custom domains
    controller.
 
 ```js
@@ -193,7 +250,7 @@ const CustomDomain = () => {
 export default CustomDomain;
 ```
 
-6. Mount the `CustomDomain` component at the desired apth.
+7. Mount the `CustomDomain` component at the desired path.
 
 ##### ENV variables
 
@@ -230,4 +287,4 @@ guide for details on how to publish.
 - NeetoInvoice
 - NeetoChat
 - NeetoRunner
-- NeetoWireframe
+  

package/app/javascript/src/translations/en.json

@@ -32,10 +32,10 @@
     "notFound": "There are no custom domains to show.",
     "tooltipContent": "Delete currently added custom domain to add a new one.",
     "placeholder": "{{subdomainPlaceholder,anyCase}}.yourbusiness.com",
-    "activeTooltipDescription": "Your custom domain is active.",
-    "pendingTooltipDescription": "Your custom domain is pending validation.",
+    "activeTooltipDescription": "Your custom domain is verified and active.",
+    "pendingTooltipDescription": "Your custom domain has pending validation. DNS changes can take up to 48 hours to propagate.",
     "failedTooltipDescription": "Your custom domain is failed to validate. Please try again later.",
-    "redirectionTooltipDescription": "Your custom domain is active. Visiting <b>{{fromDomain}}</b> will redirect you to <b>{{toDomain}}</b>.",
+    "redirectionTooltipDescription": "Your custom domain is verified and active. Visiting <b>{{fromDomain}}</b> will redirect you to <b>{{toDomain}}</b>.",
     "cname": "CNAME",
     "label": "Domain name",
     "domainValidation": "Domain validation",
@@ -95,8 +95,10 @@
       "customDomain": "Add domain of your choice in case you do not prefer to use the default Neeto domain."
     },
     "noData": {
-      "title": "No custom domain has been added.",
-      "helpText": "Add your custom domain to have a personalized URL."
+      "title": "Setup your custom domain",
+      "helpTextDefault": "Add your custom domain to have a personalized URL.",
+      "helpTextDisconnected": "To learn how to set up a custom domain, visit this <Link>help article</Link>.",
+      "helpTextConnected": "To learn more about custom domains, visit this <Link>help article</Link>."
     }
   }
 }

package/dist/.ready

@@ -0,0 +1 @@
+Built at 2026-05-28T19:41:52.619Z

package/dist/CustomDomain.js

@@ -2,12 +2,12 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { createElement, useState, useEffect, memo } from 'react';
 import { isPresent, truncate, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { withT, useQueryParams } from '@bigbinary/neeto-commons-frontend/react-utils';
-import Container from '@bigbinary/neeto-molecules/Container';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import useMutationWithInvalidation from '@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation';
 import axios from 'axios';
+import Container from '@bigbinary/neeto-molecules/Container';
 import Alert from '@bigbinary/neetoui/Alert';
 import { Trans, useTranslation } from 'react-i18next';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -15,11 +15,11 @@ import classNames from 'classnames';
 import { SINGULAR } from '@bigbinary/neeto-commons-frontend/constants';
 import CustomDomain$1 from '@bigbinary/neeto-icons/CustomDomain';
 import ExternalLink from '@bigbinary/neeto-icons/ExternalLink';
-import CardLayout from '@bigbinary/neeto-molecules/CardLayout';
-import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
+import CardLayout from '@bigbinary/neeto-molecules/CardLayout';
+import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import CheckCircle from '@bigbinary/neeto-icons/CheckCircle';
 import Warning2 from '@bigbinary/neeto-icons/Warning2';
 import CloseCircle from '@bigbinary/neeto-icons/CloseCircle';
@@ -73,7 +73,7 @@ var domainsApi = {
 var DOMAIN_QUERY_KEY = "custom-domain";
 
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateCustomDomain = function useCreateCustomDomain(url) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return useMutationWithInvalidation(function (payload) {
@@ -161,9 +161,12 @@ var DNS_TARGETS = {
 
 var Domain = function Domain(_ref) {
   var isCustomDomainAdded = _ref.isCustomDomainAdded,
+    disconnectedIntegrationCardDescription = _ref.disconnectedIntegrationCardDescription,
+    connectedIntegrationCardDescription = _ref.connectedIntegrationCardDescription,
     openPane = _ref.openPane,
     customDomains = _ref.customDomains,
     openDeleteAlert = _ref.openDeleteAlert,
+    helpDocUrl = _ref.helpDocUrl,
     setSelectedCustomDomain = _ref.setSelectedCustomDomain;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
@@ -259,19 +262,39 @@ var Domain = function Domain(_ref) {
                   "data-testid": "delete-custom-domain-button"
                 }]
               })]
-            }), /*#__PURE__*/jsxs(Typography, {
-              className: "neeto-ui-text-gray-600",
-              style: "body2",
-              children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && (customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsx(Trans, {
-                components: {
-                  b: /*#__PURE__*/jsx("b", {})
-                },
-                i18nKey: "neetoCustomDomains.redirectionTooltipDescription",
-                values: {
-                  fromDomain: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
-                  toDomain: customDomain === null || customDomain === void 0 || (_customDomain$redirec = customDomain.redirection) === null || _customDomain$redirec === void 0 ? void 0 : _customDomain$redirec.toHostname
-                }
-              }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && !(customDomain !== null && customDomain !== void 0 && customDomain.redirection) && t("neetoCustomDomains.activeTooltipDescription"), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending" && t("neetoCustomDomains.pendingTooltipDescription"), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed" && t("neetoCustomDomains.failedTooltipDescription")]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [/*#__PURE__*/jsxs(Typography, {
+                className: "neeto-ui-text-gray-600",
+                style: "body2",
+                children: [(customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && (customDomain === null || customDomain === void 0 ? void 0 : customDomain.redirection) && /*#__PURE__*/jsxs("span", {
+                  children: [/*#__PURE__*/jsx(Trans, {
+                    components: {
+                      b: /*#__PURE__*/jsx("b", {})
+                    },
+                    i18nKey: "neetoCustomDomains.redirectionTooltipDescription",
+                    values: {
+                      fromDomain: customDomain === null || customDomain === void 0 ? void 0 : customDomain.hostname,
+                      toDomain: customDomain === null || customDomain === void 0 || (_customDomain$redirec = customDomain.redirection) === null || _customDomain$redirec === void 0 ? void 0 : _customDomain$redirec.toHostname
+                    }
+                  }), " ", connectedIntegrationCardDescription || ""]
+                }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "active" && !(customDomain !== null && customDomain !== void 0 && customDomain.redirection) && /*#__PURE__*/jsxs("span", {
+                  children: [t("neetoCustomDomains.activeTooltipDescription"), " ", connectedIntegrationCardDescription || ""]
+                }), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "pending" && t("neetoCustomDomains.pendingTooltipDescription"), (customDomain === null || customDomain === void 0 ? void 0 : customDomain.status) === "failed" && t("neetoCustomDomains.failedTooltipDescription")]
+              }), /*#__PURE__*/jsx(Typography, {
+                className: "neeto-ui-text-gray-600 mt-2",
+                style: "body2",
+                children: /*#__PURE__*/jsx(Trans, {
+                  i18nKey: "neetoCustomDomains.noData.helpTextConnected",
+                  components: {
+                    Link: /*#__PURE__*/jsx(Button, {
+                      href: helpDocUrl,
+                      rel: "noreferrer",
+                      style: "link",
+                      target: "_blank"
+                    })
+                  }
+                })
+              })]
             })]
           })]
         }, index);
@@ -298,10 +321,26 @@ var Domain = function Domain(_ref) {
           style: "h4",
           weight: "medium",
           children: t("neetoCustomDomains.noData.title")
-        }), /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-600",
-          style: "body2",
-          children: t("neetoCustomDomains.noData.helpText")
+        }), /*#__PURE__*/jsxs("div", {
+          children: [/*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600",
+            style: "body2",
+            children: disconnectedIntegrationCardDescription || t("neetoCustomDomains.noData.helpTextDefault")
+          }), /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-600 mt-2",
+            style: "body2",
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoCustomDomains.noData.helpTextDisconnected",
+              components: {
+                Link: /*#__PURE__*/jsx(Button, {
+                  href: helpDocUrl,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })]
         })]
       })]
     })
@@ -983,7 +1022,7 @@ var strategyOptions = [{
 }];
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Strategy = withT(function (_ref) {
   var t = _ref.t,
     hostname = _ref.hostname,
@@ -1069,7 +1108,7 @@ var Strategy = withT(function (_ref) {
 });
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DomainField = function DomainField(_ref) {
   var onCreate = _ref.onCreate,
     url = _ref.url,
@@ -1836,7 +1875,7 @@ var Validation = function Validation(_ref) {
   });
 };
 
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
 var css = ".neeto_custom_domain_stepper button{cursor:default!important}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2RvbWFpbnMvX292ZXJyaWRlcy5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYXBwbGljYXRpb24uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDRSxvQ0FDRSx3QkNBSiIsInNvdXJjZXNDb250ZW50IjpbIi5uZWV0b19jdXN0b21fZG9tYWluX3N0ZXBwZXIge1xuICBidXR0b24ge1xuICAgIGN1cnNvcjogZGVmYXVsdCAhaW1wb3J0YW50O1xuICB9XG59XG4iLCIubmVldG9fY3VzdG9tX2RvbWFpbl9zdGVwcGVyIGJ1dHRvbiB7XG4gIGN1cnNvcjogZGVmYXVsdCAhaW1wb3J0YW50O1xufSJdfQ== */";
 n(css,{});
@@ -1930,33 +1969,21 @@ var DomainPane = function DomainPane(_ref) {
   });
 };
 
-var Header = function Header(_ref) {
-  var openPane = _ref.openPane,
-    breadcrumbs = _ref.breadcrumbs,
-    isCustomDomainAdded = _ref.isCustomDomainAdded,
-    setSelectedCustomDomain = _ref.setSelectedCustomDomain,
-    helpDocUrl = _ref.helpDocUrl,
+var Header$1 = function Header(_ref) {
+  _ref.openPane;
+    var breadcrumbs = _ref.breadcrumbs;
+    _ref.isCustomDomainAdded;
+    _ref.setSelectedCustomDomain;
+    var helpDocUrl = _ref.helpDocUrl,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "large" : _ref$size;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var handleClick = function handleClick() {
-    setSelectedCustomDomain({});
-    openPane();
-  };
   return /*#__PURE__*/jsx(NeetoHeader, {
     breadcrumbs: breadcrumbs,
     size: size,
     "data-testid": "custom-domain-header",
     title: t("neetoCustomDomains.customDomain", SINGULAR),
-    actionBlock: /*#__PURE__*/jsx(Button, {
-      "data-testid": "add-new-custom-domain-button",
-      disabled: isCustomDomainAdded,
-      label: t("neetoCustomDomains.actions.add", {
-        what: t("neetoCustomDomains.customDomain", SINGULAR)
-      }),
-      onClick: handleClick
-    }),
     titleHelpPopoverProps: {
       title: t("neetoCustomDomains.customDomain", SINGULAR),
       description: t("neetoCustomDomains.toolTips.customDomain"),
@@ -1966,7 +1993,7 @@ var Header = function Header(_ref) {
     }
   });
 };
-var Header$1 = /*#__PURE__*/memo(Header);
+var Header = /*#__PURE__*/memo(Header$1);
 
 var CustomDomain = function CustomDomain(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
@@ -1976,6 +2003,8 @@ var CustomDomain = function CustomDomain(_ref) {
     headerSize = _ref.headerSize,
     dnsHelpDocs = _ref.dnsHelpDocs,
     subdomainPlaceholder = _ref.subdomainPlaceholder,
+    disconnectedIntegrationCardDescription = _ref.disconnectedIntegrationCardDescription,
+    connectedIntegrationCardDescription = _ref.connectedIntegrationCardDescription,
     appName = _ref.appName,
     _ref$environment = _ref.environment,
     environment = _ref$environment === void 0 ? "production" : _ref$environment;
@@ -2018,13 +2047,13 @@ var CustomDomain = function CustomDomain(_ref) {
   var isCustomDomainAdded = isNotEmpty(customDomains);
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
-      className: "flex justify-center items-center w-full h-screen",
+      className: "flex h-screen w-full items-center justify-center",
       children: /*#__PURE__*/jsx(Spinner, {})
     });
   }
   return /*#__PURE__*/jsxs("div", {
     children: [/*#__PURE__*/jsxs(Container, {
-      children: [/*#__PURE__*/jsx(Header$1, {
+      children: [/*#__PURE__*/jsx(Header, {
         breadcrumbs: breadcrumbs,
         helpDocUrl: helpDocUrl,
         isCustomDomainAdded: isCustomDomainAdded,
@@ -2032,9 +2061,11 @@ var CustomDomain = function CustomDomain(_ref) {
         setSelectedCustomDomain: setSelectedCustomDomain,
         size: headerSize
       }), /*#__PURE__*/jsx("div", {
-        className: "flex w-full justify-center h-full",
+        className: "flex h-full w-full justify-center",
         children: /*#__PURE__*/jsx(Domain, {
+          connectedIntegrationCardDescription: connectedIntegrationCardDescription,
           customDomains: customDomains,
+          disconnectedIntegrationCardDescription: disconnectedIntegrationCardDescription,
           helpDocUrl: helpDocUrl,
           isCustomDomainAdded: isCustomDomainAdded,
           openDeleteAlert: openDeleteAlert,