Added air-gapped contact sales modal (#25807)

webapp/channels/src/components/air_gapped_contact_sales_modal/index.tsx

@@ -0,0 +1,58 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import accessProblemImage from 'images/access_problem.svg';
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+import {useDispatch} from 'react-redux';
+
+import {GenericModal} from '@mattermost/components';
+
+import {closeModal} from 'actions/views/modals';
+
+import ExternalLink from 'components/external_link';
+
+import {ModalIdentifiers} from 'utils/constants';
+
+import './style.scss';
+
+function AirGappedContactSalesModal() {
+    const dispatch = useDispatch();
+    const {formatMessage} = useIntl();
+
+    const handleOnClose = useCallback(() => {
+        dispatch(closeModal(ModalIdentifiers.AIR_GAPPED_CONTACT_SALES));
+    }, []);
+
+    return (
+        <GenericModal
+            id='air-gapped-contact-sales-modal'
+            className='air-gapped-contact-sales-modal'
+            modalHeaderText={formatMessage({id: 'air_gapped_contact_sales_modal.title', defaultMessage: 'Looks like you do not have access to the internet'})}
+            compassDesign={true}
+            onExited={handleOnClose}
+        >
+            <div className='air-gapped-contact-sales-modal-body'>
+                <div className='body-text'>
+                    {formatMessage({id: 'air_gapped_contact_sales_modal.body', defaultMessage: 'Please access the link below to contact sales.'})}
+                </div>
+                <div className='contact-sales-link'>
+                    <ExternalLink
+                        location='air_gapped_contact_sales_modal'
+                        href='https://mattermost.com/contact-sales/'
+                    >
+                        {'https://mattermost.com/contact-sales/'}
+                    </ExternalLink>
+                </div>
+                <div className='image'>
+                    <img
+                        aria-hidden='true'
+                        src={accessProblemImage}
+                    />
+                </div>
+            </div>
+        </GenericModal>
+    );
+}
+
+export default AirGappedContactSalesModal;

webapp/channels/src/components/air_gapped_contact_sales_modal/style.scss

@@ -0,0 +1,13 @@
+.air-gapped-contact-sales-modal {
+    width: 512px;
+}
+
+.air-gapped-contact-sales-modal-body {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 26px;
+}
+
+.air-gapped-contact-sales-modal-body > .image {
+    align-self: center;
+}

webapp/channels/src/i18n/en.json

@@ -2684,6 +2684,8 @@
   "adminConsole.list.table.rowsCount.20": "20",
   "adminConsole.list.table.rowsCount.50": "50",
   "adminConsole.list.table.rowsCount.show(rowsPerPage)": "rows per page",
+  "air_gapped_contact_sales_modal.body": "Please access the link below to contact sales.",
+  "air_gapped_contact_sales_modal.title": "Looks like you do not have access to the internet",
   "air_gapped_modal.close": "Close",
   "air_gapped_modal.description": "To start your trial, please visit {link} and request a trial key.",
   "air_gapped_modal.title": "Request a trial key",

webapp/channels/src/utils/constants.tsx

@@ -454,6 +454,7 @@ export const ModalIdentifiers = {
     IP_FILTERING_DELETE_CONFIRMATION_MODAL: 'ip_filtering_delete_confirmation_modal',
     IP_FILTERING_SAVE_CONFIRMATION_MODAL: 'ip_filtering_save_confirmation_modal',
     REACTION_LIMIT_REACHED: 'reaction_limit_reached',
+    AIR_GAPPED_CONTACT_SALES: 'air_gapped_contact_sales',
 };
 
 export const UserStatuses = {