MM-27454 - Contact Us and Billing Documentation Links

components/admin_console/billing/billing_history.tsx

@@ -8,6 +8,8 @@ import FormattedAdminHeader from 'components/widgets/admin_console/formatted_adm
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg';
 
+import {CloudLinks} from 'utils/constants';
+
 import './billing_history.scss';
 
 type Props = {
@@ -29,7 +31,7 @@ const noBillingHistorySection = (
         <a
             target='_blank'
             rel='noopener noreferrer'
-            href='http://www.google.com'
+            href={CloudLinks.BILLING_DOCS}
             className='BillingHistory__noHistory-link'
         >
             <FormattedMessage

components/admin_console/billing/billing_subscriptions.tsx

@@ -2,88 +2,39 @@
 // See LICENSE.txt for license information.
 
 import React, {useState, useEffect} from 'react';
-import {useDispatch, useStore} from 'react-redux';
+import {useDispatch, useStore, useSelector} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
 
 import {getCloudSubscription, getCloudProducts} from 'mattermost-redux/actions/cloud';
 import {DispatchFunc} from 'mattermost-redux/types/actions';
 
+import {GlobalState} from 'types/store';
+import {getCloudContactUsLink, InquiryType} from 'selectors/cloud';
+
 import AlertBanner from 'components/alert_banner';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import privateCloudImage from 'images/private-cloud-image.svg';
 import upgradeMattermostCloudImage from 'images/upgrade-mattermost-cloud-image.svg';
 
 import PlanDetails from './plan_details';
+import BillingSummary from './billing_summary';
 
 import './billing_subscriptions.scss';
-import BillingSummary from './billing_summary';
 
 type Props = {
 
 };
 
-const upgradeMattermostCloud = () => (
-    <div className='UpgradeMattermostCloud'>
-        <div className='UpgradeMattermostCloud__image'>
-            <img src={upgradeMattermostCloudImage}/>
-        </div>
-        <div className='UpgradeMattermostCloud__title'>
-            <FormattedMessage
-                id='admin.billing.subscription.upgradeMattermostCloud.title'
-                defaultMessage='Need more users?'
-            />
-        </div>
-        <div className='UpgradeMattermostCloud__description'>
-            <FormattedMarkdownMessage
-                id='admin.billing.subscription.upgradeMattermostCloud.description'
-                defaultMessage='The free tier is **limited to 10 users.** Get access to more users, teams and other great features'
-            />
-        </div>
-        <button className='UpgradeMattermostCloud__upgradeButton'>
-            <FormattedMessage
-                id='admin.billing.subscription.upgradeMattermostCloud.upgradeButton'
-                defaultMessage='Upgrade Mattermost Cloud'
-            />
-        </button>
-    </div>
-);
-
-const privateCloudCard = () => (
-    <div className='PrivateCloudCard'>
-        <div className='PrivateCloudCard__text'>
-            <div className='PrivateCloudCard__text-title'>
-                <FormattedMessage
-                    id='admin.billing.subscription.privateCloudCard.title'
-                    defaultMessage='Looking for a high-trust private cloud?'
-                />
-            </div>
-            <div className='PrivateCloudCard__text-description'>
-                <FormattedMessage
-                    id='admin.billing.subscription.privateCloudCard.description'
-                    defaultMessage='If you need software with dedicated, single-tenant architecture, Mattermost Private Cloud (Beta) is the solution for high-trust collaboration.'
-                />
-            </div>
-            <button className='PrivateCloudCard__contactSales'>
-                <FormattedMessage
-                    id='admin.billing.subscription.privateCloudCard.contactSales'
-                    defaultMessage='Contact Sales'
-                />
-            </button>
-        </div>
-        <div className='PrivateCloudCard__image'>
-            <img src={privateCloudImage}/>
-        </div>
-    </div>
-);
-
 // TODO: temp
 const isFree = false;
 
 const BillingSubscriptions: React.FC<Props> = () => {
     const dispatch = useDispatch<DispatchFunc>();
     const store = useStore();
 
+    const contactSalesLink = useSelector((state: GlobalState) => getCloudContactUsLink(state, InquiryType.Sales));
+
     useEffect(() => {
         getCloudSubscription()(dispatch, store.getState());
         getCloudProducts()(dispatch, store.getState());
@@ -93,6 +44,66 @@ const BillingSubscriptions: React.FC<Props> = () => {
     const [showWarning, setShowWarning] = useState(true);
     const [showInfo, setShowInfo] = useState(true);
 
+    const upgradeMattermostCloud = () => (
+        <div className='UpgradeMattermostCloud'>
+            <div className='UpgradeMattermostCloud__image'>
+                <img src={upgradeMattermostCloudImage}/>
+            </div>
+            <div className='UpgradeMattermostCloud__title'>
+                <FormattedMessage
+                    id='admin.billing.subscription.upgradeMattermostCloud.title'
+                    defaultMessage='Need more users?'
+                />
+            </div>
+            <div className='UpgradeMattermostCloud__description'>
+                <FormattedMarkdownMessage
+                    id='admin.billing.subscription.upgradeMattermostCloud.description'
+                    defaultMessage='The free tier is **limited to 10 users.** Get access to more users, teams and other great features'
+                />
+            </div>
+            <button className='UpgradeMattermostCloud__upgradeButton'>
+                <FormattedMessage
+                    id='admin.billing.subscription.upgradeMattermostCloud.upgradeButton'
+                    defaultMessage='Upgrade Mattermost Cloud'
+                />
+            </button>
+        </div>
+    );
+
+    const privateCloudCard = () => (
+        <div className='PrivateCloudCard'>
+            <div className='PrivateCloudCard__text'>
+                <div className='PrivateCloudCard__text-title'>
+                    <FormattedMessage
+                        id='admin.billing.subscription.privateCloudCard.title'
+                        defaultMessage='Looking for a high-trust private cloud?'
+                    />
+                </div>
+                <div className='PrivateCloudCard__text-description'>
+                    <FormattedMessage
+                        id='admin.billing.subscription.privateCloudCard.description'
+                        defaultMessage='If you need software with dedicated, single-tenant architecture, Mattermost Private Cloud (Beta) is the solution for high-trust collaboration.'
+                    />
+                </div>
+                <button className='PrivateCloudCard__contactSales'>
+                    <a
+                        href={contactSalesLink}
+                        rel='noopener noreferrer'
+                        target='_blank'
+                    >
+                        <FormattedMessage
+                            id='admin.billing.subscription.privateCloudCard.contactSales'
+                            defaultMessage='Contact Sales'
+                        />
+                    </a>
+                </button>
+            </div>
+            <div className='PrivateCloudCard__image'>
+                <img src={privateCloudImage}/>
+            </div>
+        </div>
+    );
+
     return (
         <div className='wrapper--fixed BillingSubscriptions'>
             <FormattedAdminHeader

components/admin_console/billing/billing_summary.tsx

@@ -4,6 +4,8 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {CloudLinks} from 'utils/constants';
+
 import noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg';
 
 import './billing_summary.scss';
@@ -29,7 +31,7 @@ const noBillingHistory = (
         <a
             target='_blank'
             rel='noopener noreferrer'
-            href='http://www.google.com'
+            href={CloudLinks.BILLING_DOCS}
             className='BillingSummary__noBillingHistory-link'
         >
             <FormattedMessage

components/admin_console/billing/plan_details.tsx

@@ -14,6 +14,7 @@ import OverlayTrigger from 'components/overlay_trigger';
 import {getCurrentLocale} from 'selectors/i18n';
 import {GlobalState} from 'types/store';
 import {getMonthLong} from 'utils/i18n';
+import {CloudLinks} from 'utils/constants';
 import {localizeMessage} from 'utils/utils';
 
 import './plan_details.scss';
@@ -67,8 +68,18 @@ const seatsAndSubscriptionDates = (locale: string, userCount: number, numberOfSe
                                     <div className='BillingSubscriptions__tooltipMessage'>
                                         <FormattedMarkdownMessage
                                             id='admin.billing.subscription.planDetails.prolongedOverages'
-                                            defaultMessage='Prolonged overages may result in additional charges. [See how billing works](!https://google.com)'
+                                            defaultMessage='Prolonged overages may result in additional charges.'
                                         />
+                                        <a
+                                            target='_blank'
+                                            rel='noopener noreferrer'
+                                            href={CloudLinks.BILLING_DOCS}
+                                        >
+                                            <FormattedMarkdownMessage
+                                                id='admin.billing.subscription.planDetails.howBillingWorks'
+                                                defaultMessage='See how billing works'
+                                            />
+                                        </a>
                                     </div>
                                 </Tooltip>
                             )}

components/purchase_modal/index.ts

@@ -3,34 +3,33 @@
 
 import {connect} from 'react-redux';
 import {bindActionCreators, Dispatch, ActionCreatorsMapObject} from 'redux';
+import {Stripe} from '@stripe/stripe-js';
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {GenericAction, ActionFunc} from 'mattermost-redux/types/actions';
-import {Stripe} from '@stripe/stripe-js';
-
 import {getCloudProducts} from 'mattermost-redux/actions/cloud';
+import {getClientConfig} from 'mattermost-redux/actions/general';
 
-import {
-    getClientConfig,
-} from 'mattermost-redux/actions/general';
-
+import {GlobalState} from 'types/store';
 import {BillingDetails} from 'types/cloud/sku';
 
 import {isModalOpen} from 'selectors/views/modals';
+import {getCloudContactUsLink, InquiryType} from 'selectors/cloud';
+
 import {ModalIdentifiers} from 'utils/constants';
 
 import {closeModal} from 'actions/views/modals';
 import {completeStripeAddPaymentMethod} from 'actions/cloud';
 
-import {GlobalState} from 'types/store';
-
 import PurchaseModal from './purchase_modal';
 
 function mapStateToProps(state: GlobalState) {
     return {
         show: isModalOpen(state, ModalIdentifiers.CLOUD_PURCHASE),
         products: state.entities.cloud!.products,
         isDevMode: getConfig(state).EnableDeveloper === 'true',
+        contactSupportLink: getCloudContactUsLink(state, InquiryType.Technical),
+        contactSalesLink: getCloudContactUsLink(state, InquiryType.Sales),
     };
 }
 type Actions = {

components/purchase_modal/purchase_modal.tsx

@@ -20,12 +20,14 @@ import RootPortal from 'components/root_portal';
 import FullScreenModal from 'components/widgets/modals/full_screen_modal';
 import {areBillingDetailsValid, BillingDetails} from 'types/cloud/sku';
 import {getNextBillingDate} from 'utils/utils';
+import {CloudLinks} from 'utils/constants';
 
 import PaymentForm from '../payment_form/payment_form';
 
+import ProcessPaymentSetup from './process_payment_setup';
+
 import './purchase.scss';
 import 'components/payment_form/payment_form.scss';
-import ProcessPaymentSetup from './process_payment_setup';
 
 const STRIPE_CSS_SRC = 'https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i&display=swap';
 const STRIPE_PUBLIC_KEY = 'pk_test_ttEpW6dCHksKyfAFzh6MvgBj';
@@ -36,6 +38,8 @@ type Props = {
     show: boolean;
     isDevMode: boolean;
     products?: Dictionary<Product>;
+    contactSupportLink: string;
+    contactSalesLink: string;
     actions: {
         closeModal: () => void;
         getCloudProducts: () => void;
@@ -116,7 +120,9 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                     </div>
                     <a
                         className='footer-text'
-                        href='https://support.mattermost.com/hc/en-us/requests/new?ticket_form_id=360000640492'
+                        href={this.props.contactSupportLink}
+                        rel='noopener noreferrer'
+                        target='_blank'
                     >
                         <FormattedMessage
                             defaultMessage={'Contact Support'}
@@ -169,7 +175,11 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                                 />
                             </span>
                             {'\u00A0'}
-                            <a href='https://support.mattermost.com/hc/en-us/requests/new?ticket_form_id=360000640492'>
+                            <a
+                                href={CloudLinks.BILLING_DOCS}
+                                target='_blank'
+                                rel='noopener noreferrer'
+                            >
                                 <FormattedMessage
                                     defaultMessage={'See how billing works.'}
                                     id={'admin.billing.subscription.howItWorks'}
@@ -180,7 +190,9 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                     <div className='footer-text'>{'Need other billing options?'}</div>
                     <a
                         className='footer-text'
-                        href='https://support.mattermost.com/hc/en-us/requests/new?ticket_form_id=360000640492'
+                        href={this.props.contactSalesLink}
+                        target='_blank'
+                        rel='noopener noreferrer'
                     >
                         <FormattedMessage
                             defaultMessage={'Contact Sales'}

i18n/en.json

@@ -247,10 +247,11 @@
   "admin.billing.subscription.planDetails.features.selfServiceDocumentation": "Self-Service documentation and forum support",
   "admin.billing.subscription.planDetails.features.unlimitedIntegrations": "Unlimited Integrations",
   "admin.billing.subscription.planDetails.features.unlimitedTeamsAndChannels": "Unlimited teams, channels, and search history",
+  "admin.billing.subscription.planDetails.howBillingWorks": "See how billing works",
   "admin.billing.subscription.planDetails.numberOfSeats": "{numberOfSeats} seats",
   "admin.billing.subscription.planDetails.numberOfSeatsRegistered": "({userCount} currently registered)",
   "admin.billing.subscription.planDetails.perUserPerMonth": "/user/month",
-  "admin.billing.subscription.planDetails.prolongedOverages": "Prolonged overages may result in additional charges. [See how billing works](!https://google.com)",
+  "admin.billing.subscription.planDetails.prolongedOverages": "Prolonged overages may result in additional charges.",
   "admin.billing.subscription.planDetails.seatCountOverages": "Seat count overages",
   "admin.billing.subscription.planDetails.startDate": "Start Date: ",
   "admin.billing.subscription.planDetails.tiers.free": "Free",

selectors/cloud.ts

@@ -0,0 +1,23 @@
+
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+
+import {GlobalState} from 'types/store';
+
+export enum InquiryType {
+    Technical = 'technical',
+    Sales = 'sales',
+    Billing = 'billing'
+}
+
+export function getCloudContactUsLink(state: GlobalState, inquiry: InquiryType): string {
+    // cloud/contact-us with query params for name, email and inquiry
+    const cwsUrl = getConfig(state).CWSUrl;
+    const user = getCurrentUser(state);
+    const fullName = `${user.first_name} ${user.last_name}`;
+
+    return `${cwsUrl}/cloud/contact-us?email=${encodeURIComponent(user.email)}&name=${encodeURIComponent(fullName)}&inquiry=${inquiry}`;
+}

utils/constants.jsx

@@ -670,6 +670,10 @@ export const AboutLinks = {
     PRIVACY_POLICY: 'https://about.mattermost.com/default-privacy-policy/',
 };
 
+export const CloudLinks = {
+    BILLING_DOCS: 'https://docs.mattermost.com/overview/mattermost-cloud-overview.html#how-billing-works',
+};
+
 export const PermissionsScope = {
     [Permissions.INVITE_USER]: 'team_scope',
     [Permissions.INVITE_GUEST]: 'team_scope',