[MM-28063] Cloud Telemetry - Admin Console (#6762)

* WIP

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

* PR feedback

* Lint fix

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

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;
     }
 }

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>

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'

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 (

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>

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 (

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'

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)}
                         />

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'
                                             />

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",