MM-27454 - Contact Us and Billing Documentation Links (mattermost#6731)

Co-authored-by: Mattermod <[email protected]>
Revanth47 · Oct 13, 2020 · 2d69be5 · 2d69be5
1 parent 767ef1f
commit 2d69be5
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 79 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -13,10 +13,10 @@ executors:
 aliases:
  - &restore_cache
  restore_cache:
- key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-4
+ key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-5
  - &save_cache
  save_cache:
- key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-4
+ key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-5
  paths:
  - ~/mattermost/mattermost-webapp/node_modules
 

diff --git a/components/admin_console/billing/billing_history.tsx b/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 = {
@@ -27,9 +29,9 @@ const noBillingHistorySection = (
  />
  </div>
  <a
- target='_blank'
+ target='_new'
  rel='noopener noreferrer'
- href='http:https://www.google.com'
+ href={CloudLinks.BILLING_DOCS}
  className='BillingHistory__noHistory-link'
  >
  <FormattedMessage

diff --git a/components/admin_console/billing/billing_subscriptions.tsx b/components/admin_console/billing/billing_subscriptions.tsx
@@ -2,8 +2,8 @@
 // See LICENSE.txt for license information.
 
 import React, {useState, useEffect} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useStore, useSelector} from 'react-redux';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import {getCloudSubscription, getCloudProducts} from 'mattermost-redux/actions/cloud';
 import {DispatchFunc} from 'mattermost-redux/types/actions';
@@ -17,6 +17,8 @@ import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 
 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';
@@ -27,63 +29,9 @@ import privateCloudImage from 'images/private-cloud-image.svg';
 import upgradeMattermostCloudImage from 'images/upgrade-mattermost-cloud-image.svg';
 
 import PlanDetails from './plan_details';
-
-import './billing_subscriptions.scss';
 import BillingSummary from './billing_summary';
 
-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>
-);
+import './billing_subscriptions.scss';
 
 const WARNING_THRESHOLD = 3;
 
@@ -105,6 +53,8 @@ const BillingSubscriptions: React.FC<Props> = () => {
  const getCategory = makeGetCategory();
  const preferences = useSelector<GlobalState, PreferenceType[]>((state) => getCategory(state, Preferences.ADMIN_CLOUD_UPGRADE_PANEL));
 
+ const contactSalesLink = useSelector((state: GlobalState) => getCloudContactUsLink(state, InquiryType.Sales));
+
  useEffect(() => {
  getCloudSubscription()(dispatch, store.getState());
  getCloudProducts()(dispatch, store.getState());
@@ -144,6 +94,66 @@ const BillingSubscriptions: React.FC<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'>
+ <a
+ href={contactSalesLink}
+ rel='noopener noreferrer'
+ target='_new'
+ >
+ <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

diff --git a/components/admin_console/billing/billing_summary.tsx b/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';
@@ -27,9 +29,9 @@ const noBillingHistory = (
  />
  </div>
  <a
- target='_blank'
+ target='_new'
  rel='noopener noreferrer'
- href='http:https://www.google.com'
+ href={CloudLinks.BILLING_DOCS}
  className='BillingSummary__noBillingHistory-link'
  >
  <FormattedMessage

diff --git a/components/admin_console/billing/plan_details.tsx b/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='_new'
+ rel='noopener noreferrer'
+ href={CloudLinks.BILLING_DOCS}
+ >
+ <FormattedMarkdownMessage
+ id='admin.billing.subscription.planDetails.howBillingWorks'
+ defaultMessage='See how billing works'
+ />
+ </a>
  </div>
  </Tooltip>
  )}

diff --git a/components/purchase_modal/index.ts b/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 = {

diff --git a/components/purchase_modal/purchase_modal.tsx b/components/purchase_modal/purchase_modal.tsx
@@ -20,19 +20,23 @@ 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 stripePromise = loadStripe(STRIPE_PUBLIC_KEY);
 
 type Props = {
  show: boolean;
  isDevMode: boolean;
  products?: Dictionary<Product>;
+ contactSupportLink: string;
+ contactSalesLink: string;
  actions: {
  closeModal: () => void;
  getCloudProducts: () => void;
@@ -113,7 +117,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='_new'
  >
  <FormattedMessage
  defaultMessage={'Contact Support'}
@@ -166,7 +172,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='_new'
+ rel='noopener noreferrer'
+ >
  <FormattedMessage
  defaultMessage={'See how billing works.'}
  id={'admin.billing.subscription.howItWorks'}
@@ -177,7 +187,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='_new'
+ rel='noopener noreferrer'
  >
  <FormattedMessage
  defaultMessage={'Contact Sales'}

diff --git a/i18n/en.json b/i18n/en.json
@@ -257,10 +257,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",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
  "localforage-observable": "2.0.1",
  "mark.js": "8.11.1",
  "marked": "github:mattermost/marked#87769262aa02e1784570f61f4f962050e07cc335",
- "mattermost-redux": "github:mattermost/mattermost-redux#5f2f131e4660a9f58851835085fbe62d2f3419d5",
+ "mattermost-redux": "github:mattermost/mattermost-redux#15811ca565f1c72e666308c89babbc97d8da1dc0",
  "moment-timezone": "0.5.31",
  "p-queue": "6.6.1",
  "pdfjs-dist": "2.1.266",