From 76e31d18f3a41ebd99e884edc8cb897f657cd2ba Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Tue, 13 Oct 2020 17:04:56 -0400
Subject: [PATCH] [MM-28063] Cloud Telemetry - Admin Console (#6762)

* WIP

* [MM-28063] Cloud Billing Telemetry - Admin Console

* PR feedback

* Lint fix
---
 .../admin_console/billing/billing_history.tsx |  8 +-
 .../billing/billing_subscriptions.scss        |  6 +-
 .../billing/billing_subscriptions.tsx         | 92 ++++++++-----------
 .../admin_console/billing/billing_summary.tsx |  2 +
 .../admin_console/billing/company_info.tsx    |  3 +
 .../billing/company_info_display.tsx          |  4 +
 .../admin_console/billing/payment_info.tsx    |  3 +
 .../billing/payment_info_display.tsx          |  3 +
 .../billing/payment_info_edit.tsx             | 21 ++++-
 .../admin_console/billing/plan_details.tsx    |  4 +-
 i18n/en.json                                  |  2 +-
 11 files changed, 88 insertions(+), 60 deletions(-)

diff --git a/components/admin_console/billing/billing_history.tsx b/components/admin_console/billing/billing_history.tsx
index 624db239e23a..d72fb1975996 100644
--- a/components/admin_console/billing/billing_history.tsx
+++ b/components/admin_console/billing/billing_history.tsx
@@ -1,9 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import {FormattedDate, FormattedMessage, FormattedNumber} from 'react-intl';
 
+import {pageVisited, trackEvent} from 'actions/telemetry_actions';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg';
@@ -33,6 +34,7 @@ const noBillingHistorySection = (
             rel='noopener noreferrer'
             href={CloudLinks.BILLING_DOCS}
             className='BillingHistory__noHistory-link'
+            onClick={() => trackEvent('cloud_admin', 'click_billing_history', {screen: 'billing'})}
         >
             <FormattedMessage
                 id='admin.billing.history.seeHowBillingWorks'
@@ -124,6 +126,10 @@ const BillingHistory: React.FC<Props> = () => {
     const previousPage = () => {};
     const nextPage = () => {};
 
+    useEffect(() => {
+        pageVisited('cloud_admin', 'pageview_billing_history');
+    }, []);
+
     const paging = (
         <div className='BillingHistory__paging'>
             <FormattedMarkdownMessage
diff --git a/components/admin_console/billing/billing_subscriptions.scss b/components/admin_console/billing/billing_subscriptions.scss
index e3150b6341b6..ac29bef852cf 100644
--- a/components/admin_console/billing/billing_subscriptions.scss
+++ b/components/admin_console/billing/billing_subscriptions.scss
@@ -169,22 +169,26 @@
     background: var(--sys-center-channel-bg);
     color: var(--sys-button-bg);
     box-shadow: inset 0 0 0 1px var(--sys-button-bg);
-    border: none;
     border-radius: 4px;
     padding: 13px 20px;
     font-weight: 600;
     font-size: 14px;
     line-height: 14px;
+    display: block;
+    width: fit-content;
 
     &:hover:not(.disabled) {
         background: rgba(var(--sys-button-bg-rgb), 0.04);
+        text-decoration: none;
     }
 
     &:active {
         background: rgba(var(--sys-button-bg-rgb), 0.08);
+        text-decoration: none;
     }
 
     &:focus {
         box-shadow: inset 0 0 0 2px var(--sys-button-bg);
+        text-decoration: none;
     }
 }
diff --git a/components/admin_console/billing/billing_subscriptions.tsx b/components/admin_console/billing/billing_subscriptions.tsx
index 8d6ef611e29b..21ece65e47af 100644
--- a/components/admin_console/billing/billing_subscriptions.tsx
+++ b/components/admin_console/billing/billing_subscriptions.tsx
@@ -1,49 +1,44 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState, useEffect} from 'react';
+import React, {useEffect} from 'react';
 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';
-
-import {PreferenceType} from 'mattermost-redux/types/preferences';
-
 import {getStandardAnalytics} from 'mattermost-redux/actions/admin';
+import {getCloudSubscription, getCloudProducts} from 'mattermost-redux/actions/cloud';
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
-import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+import {DispatchFunc} from 'mattermost-redux/types/actions';
+import {PreferenceType} from 'mattermost-redux/types/preferences';
 
-import {GlobalState} from 'types/store';
-import {getCloudContactUsLink, InquiryType} from 'selectors/cloud';
-
-import {trackEvent} from 'actions/telemetry_actions';
-
+import {pageVisited, trackEvent} from 'actions/telemetry_actions';
+import {openModal} from 'actions/views/modals';
 import AlertBanner from 'components/alert_banner';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
+import PurchaseModal from 'components/purchase_modal';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
-
+import {getCloudContactUsLink, InquiryType} from 'selectors/cloud';
+import {GlobalState} from 'types/store';
 import {
     Preferences,
     CloudBanners,
+    ModalIdentifiers,
     TELEMETRY_CATEGORIES,
 } from 'utils/constants';
 
 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 PlanDetails from './plan_details';
 
 import './billing_subscriptions.scss';
 
 const WARNING_THRESHOLD = 3;
 
-// TODO: temp
-const isFree = false;
-
 type Props = {
 };
 
@@ -61,21 +56,27 @@ const BillingSubscriptions: React.FC<Props> = () => {
 
     const contactSalesLink = useSelector((state: GlobalState) => getCloudContactUsLink(state, InquiryType.Sales));
 
+    const onUpgradeMattermostCloud = () => {
+        trackEvent('cloud_admin', 'click_upgrade_mattermost_cloud');
+
+        dispatch(openModal({
+            modalId: ModalIdentifiers.CLOUD_PURCHASE,
+            dialogType: PurchaseModal,
+        }));
+    };
+
     useEffect(() => {
         getCloudSubscription()(dispatch, store.getState());
         getCloudProducts()(dispatch, store.getState());
-    }, []);
 
-    const [showDanger, setShowDanger] = useState(false);
-    const [showWarning, setShowWarning] = useState(false);
-
-    useEffect(() => {
         if (!analytics) {
             (async function getAllAnalytics() {
                 await dispatch(getStandardAnalytics());
             }());
         }
 
+        pageVisited('cloud_admin', 'pageview_billing_subscription');
+
         if (analytics && shouldShowInfoBanner()) {
             trackEvent(TELEMETRY_CATEGORIES.CLOUD_ADMIN, 'bannerview_user_limit_warning');
         }
@@ -125,7 +126,10 @@ const BillingSubscriptions: React.FC<Props> = () => {
                     defaultMessage='The free tier is **limited to 10 users.** Get access to more users, teams and other great features'
                 />
             </div>
-            <button className='UpgradeMattermostCloud__upgradeButton'>
+            <button
+                onClick={onUpgradeMattermostCloud}
+                className='UpgradeMattermostCloud__upgradeButton'
+            >
                 <FormattedMessage
                     id='admin.billing.subscription.upgradeMattermostCloud.upgradeButton'
                     defaultMessage='Upgrade Mattermost Cloud'
@@ -149,18 +153,18 @@ const BillingSubscriptions: React.FC<Props> = () => {
                         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>
+                <a
+                    href={contactSalesLink}
+                    rel='noopener noreferrer'
+                    target='_new'
+                    className='PrivateCloudCard__contactSales'
+                    onClick={() => trackEvent('cloud_admin', 'click_contact_sales')}
+                >
+                    <FormattedMessage
+                        id='admin.billing.subscription.privateCloudCard.contactSales'
+                        defaultMessage='Contact Sales'
+                    />
+                </a>
             </div>
             <div className='PrivateCloudCard__image'>
                 <img src={privateCloudImage}/>
@@ -180,22 +184,6 @@ const BillingSubscriptions: React.FC<Props> = () => {
             />
             <div className='admin-console__wrapper'>
                 <div className='admin-console__content'>
-                    {showDanger && (
-                        <AlertBanner
-                            mode='danger'
-                            title='Test Danger Title'
-                            message='This is a test danger message'
-                            onDismiss={() => setShowDanger(false)}
-                        />
-                    )}
-                    {showWarning && (
-                        <AlertBanner
-                            mode='warning'
-                            title='Test Warning Title'
-                            message='This is a test warning message'
-                            onDismiss={() => setShowWarning(false)}
-                        />
-                    )}
                     {shouldShowInfoBanner() && (
                         <AlertBanner
                             mode='info'
@@ -216,7 +204,7 @@ const BillingSubscriptions: React.FC<Props> = () => {
                         style={{marginTop: '20px'}}
                     >
                         <PlanDetails/>
-                        {isFree ? upgradeMattermostCloud() : <BillingSummary/>}
+                        {subscription?.is_paid_tier === 'true' ? <BillingSummary/> : upgradeMattermostCloud()}
                     </div>
                     {privateCloudCard()}
                 </div>
diff --git a/components/admin_console/billing/billing_summary.tsx b/components/admin_console/billing/billing_summary.tsx
index 6c987c7bf7a2..ee616cd033ad 100644
--- a/components/admin_console/billing/billing_summary.tsx
+++ b/components/admin_console/billing/billing_summary.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import {trackEvent} from 'actions/telemetry_actions';
 import {CloudLinks} from 'utils/constants';
 
 import noBillingHistoryGraphic from 'images/no_billing_history_graphic.svg';
@@ -33,6 +34,7 @@ const noBillingHistory = (
             rel='noopener noreferrer'
             href={CloudLinks.BILLING_DOCS}
             className='BillingSummary__noBillingHistory-link'
+            onClick={() => trackEvent('cloud_admin', 'click_how_billing_works', {screen: 'subscriptions'})}
         >
             <FormattedMessage
                 id='admin.billing.subscriptions.billing_summary.noBillingHistory.link'
diff --git a/components/admin_console/billing/company_info.tsx b/components/admin_console/billing/company_info.tsx
index 1ffef933344d..6d67c0748b4a 100644
--- a/components/admin_console/billing/company_info.tsx
+++ b/components/admin_console/billing/company_info.tsx
@@ -7,6 +7,7 @@ import {useDispatch} from 'react-redux';
 import {DispatchFunc} from 'mattermost-redux/types/actions';
 import {getCloudCustomer} from 'mattermost-redux/actions/cloud';
 
+import {pageVisited} from 'actions/telemetry_actions';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 import CompanyInfoDisplay from './company_info_display';
@@ -20,6 +21,8 @@ const CompanyInfo: React.FC<Props> = () => {
 
     useEffect(() => {
         dispatch(getCloudCustomer());
+
+        pageVisited('cloud_admin', 'pageview_billing_company_info');
     }, []);
 
     return (
diff --git a/components/admin_console/billing/company_info_display.tsx b/components/admin_console/billing/company_info_display.tsx
index 930e39929dc9..b4ba5372cc1d 100644
--- a/components/admin_console/billing/company_info_display.tsx
+++ b/components/admin_console/billing/company_info_display.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
+import {trackEvent} from 'actions/telemetry_actions';
 import BlockableLink from 'components/admin_console/blockable_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import noCompanyInfoGraphic from 'images/no_company_info_graphic.svg';
@@ -20,6 +21,7 @@ const addInfoButton = (
         <BlockableLink
             to='/admin_console/billing/company_info_edit'
             className='CompanyInfoDisplay__addInfoButton'
+            onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
         >
             <i className='icon icon-plus'/>
             <FormattedMessage
@@ -46,6 +48,7 @@ const noCompanyInfoSection = (
             <BlockableLink
                 to='/admin_console/billing/company_info_edit'
                 className='CompanyInfoDisplay__noCompanyInfo-link'
+                onClick={() => trackEvent('cloud_admin', 'click_add_company_info')}
             >
                 <FormattedMessage
                     id='admin.billing.company_info.add'
@@ -99,6 +102,7 @@ const CompanyInfoDisplay: React.FC = () => {
                     <BlockableLink
                         to='/admin_console/billing/company_info_edit'
                         className='CompanyInfoDisplay__companyInfo-editButton'
+                        onClick={() => trackEvent('cloud_admin', 'click_edit_company_info')}
                     >
                         <i className='icon icon-pencil-outline'/>
                     </BlockableLink>
diff --git a/components/admin_console/billing/payment_info.tsx b/components/admin_console/billing/payment_info.tsx
index d051ec2848f6..a17a1ee67dc5 100644
--- a/components/admin_console/billing/payment_info.tsx
+++ b/components/admin_console/billing/payment_info.tsx
@@ -7,6 +7,7 @@ import {useDispatch} from 'react-redux';
 import {DispatchFunc} from 'mattermost-redux/types/actions';
 import {getCloudCustomer} from 'mattermost-redux/actions/cloud';
 
+import {pageVisited} from 'actions/telemetry_actions';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
 import PaymentInfoDisplay from './payment_info_display';
@@ -20,6 +21,8 @@ const PaymentInfo: React.FC<Props> = () => {
 
     useEffect(() => {
         dispatch(getCloudCustomer());
+
+        pageVisited('cloud_admin', 'pageview_billing_payment_info');
     }, []);
 
     return (
diff --git a/components/admin_console/billing/payment_info_display.tsx b/components/admin_console/billing/payment_info_display.tsx
index e3bd98b68b68..be2ad79b656c 100644
--- a/components/admin_console/billing/payment_info_display.tsx
+++ b/components/admin_console/billing/payment_info_display.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useSelector} from 'react-redux';
 
+import {trackEvent} from 'actions/telemetry_actions';
 import BlockableLink from 'components/admin_console/blockable_link';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import CardImage from 'components/payment_form/card_image';
@@ -18,6 +19,7 @@ const addInfoButton = (
         <BlockableLink
             to='/admin_console/billing/payment_info_edit'
             className='PaymentInfoDisplay__addInfoButton'
+            onClick={() => trackEvent('cloud_admin', 'click_add_credit_card')}
         >
             <i className='icon icon-plus'/>
             <FormattedMessage
@@ -43,6 +45,7 @@ const noPaymentInfoSection = (
         <BlockableLink
             to='/admin_console/billing/payment_info_edit'
             className='PaymentInfoDisplay__noPaymentInfo-link'
+            onClick={() => trackEvent('cloud_admin', 'click_add_credit_card')}
         >
             <FormattedMessage
                 id='admin.billing.payment_info.add'
diff --git a/components/admin_console/billing/payment_info_edit.tsx b/components/admin_console/billing/payment_info_edit.tsx
index bc6ebe6545b4..92b574a45d06 100644
--- a/components/admin_console/billing/payment_info_edit.tsx
+++ b/components/admin_console/billing/payment_info_edit.tsx
@@ -19,6 +19,7 @@ import {STRIPE_CSS_SRC, STRIPE_PUBLIC_KEY} from 'components/payment_form/stripe'
 import SaveButton from 'components/save_button';
 import {areBillingDetailsValid, BillingDetails} from 'types/cloud/sku';
 import {GlobalState} from 'types/store';
+import {CloudLinks} from 'utils/constants';
 import {browserHistory} from 'utils/browser_history';
 
 import './payment_info_edit.scss';
@@ -96,10 +97,22 @@ const PaymentInfoEdit: React.FC = () => {
                                 />
                             }
                             message={
-                                <FormattedMarkdownMessage
-                                    id='admin.billing.payment_info_edit.creditCardWarningDescription'
-                                    defaultMessage='Credit cards are kept on file for future payments. You’ll only be charged if you move in to the paid tier of Mattermost Cloud and exceed the free tier limits. [See how billing works](!https://www.google.com)'
-                                />
+                                <>
+                                    <FormattedMarkdownMessage
+                                        id='admin.billing.payment_info_edit.creditCardWarningDescription'
+                                        defaultMessage='Credit cards are kept on file for future payments. You’ll only be charged if you move in to the paid tier of Mattermost Cloud and exceed the free tier limits. '
+                                    />
+                                    <a
+                                        target='_new'
+                                        rel='noopener noreferrer'
+                                        href={CloudLinks.BILLING_DOCS}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.billing.subscription.planDetails.howBillingWorks'
+                                            defaultMessage='See how billing works'
+                                        />
+                                    </a>
+                                </>
                             }
                             onDismiss={() => setShowCreditCardWarning(false)}
                         />
diff --git a/components/admin_console/billing/plan_details.tsx b/components/admin_console/billing/plan_details.tsx
index 0289f283d905..84f971f131b4 100644
--- a/components/admin_console/billing/plan_details.tsx
+++ b/components/admin_console/billing/plan_details.tsx
@@ -9,6 +9,7 @@ import classNames from 'classnames';
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 
+import {trackEvent} from 'actions/telemetry_actions';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import OverlayTrigger from 'components/overlay_trigger';
 import {getCurrentLocale} from 'selectors/i18n';
@@ -74,8 +75,9 @@ const seatsAndSubscriptionDates = (locale: string, userCount: number, numberOfSe
                                             target='_new'
                                             rel='noopener noreferrer'
                                             href={CloudLinks.BILLING_DOCS}
+                                            onClick={() => trackEvent('cloud_admin', 'click_how_billing_works', {screen: 'payment'})}
                                         >
-                                            <FormattedMarkdownMessage
+                                            <FormattedMessage
                                                 id='admin.billing.subscription.planDetails.howBillingWorks'
                                                 defaultMessage='See how billing works'
                                             />
diff --git a/i18n/en.json b/i18n/en.json
index d28ca9b83ac9..968332c50056 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -228,7 +228,7 @@
   "admin.billing.payment_info_display.noPaymentInfo": "There are currently no credit cards on file.",
   "admin.billing.payment_info_display.savedPaymentDetails": "Your saved payment details",
   "admin.billing.payment_info_edit.cancel": "Cancel",
-  "admin.billing.payment_info_edit.creditCardWarningDescription": "Credit cards are kept on file for future payments. You’ll only be charged if you move in to the paid tier of Mattermost Cloud and exceed the free tier limits. [See how billing works](!https://www.google.com)",
+  "admin.billing.payment_info_edit.creditCardWarningDescription": "Credit cards are kept on file for future payments. You’ll only be charged if you move in to the paid tier of Mattermost Cloud and exceed the free tier limits. ",
   "admin.billing.payment_info_edit.creditCardWarningTitle": "NOTE: Your card will not be charged at this time",
   "admin.billing.payment_info_edit.formError": "There are errors in the form above",
   "admin.billing.payment_info_edit.save": "Save credit card",