Merge branch 'cloud-ga' into automated-cherry-pick-of-mattermost-webapp-

mattermost#6731-upstream-cloud-ga
mattermost-build · Oct 13, 2020 · c2b8664 · c2b8664
2 parents 4e15e37 + 5ea49bc
commit c2b8664
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 18 deletions.
diff --git a/components/admin_console/billing/billing_subscriptions.tsx b/components/admin_console/billing/billing_subscriptions.tsx
@@ -19,11 +19,17 @@ import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 import {GlobalState} from 'types/store';
 import {getCloudContactUsLink, InquiryType} from 'selectors/cloud';
 
+import {trackEvent} from 'actions/telemetry_actions';
+
 import AlertBanner from 'components/alert_banner';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
-import {Preferences, CloudBanners} from 'utils/constants';
+import {
+    Preferences,
+    CloudBanners,
+    TELEMETRY_CATEGORIES,
+} from 'utils/constants';
 
 import privateCloudImage from 'images/private-cloud-image.svg';
 import upgradeMattermostCloudImage from 'images/upgrade-mattermost-cloud-image.svg';
@@ -69,6 +75,10 @@ const BillingSubscriptions: React.FC<Props> = () => {
                 await dispatch(getStandardAnalytics());
             }());
         }
+
+        if (analytics && shouldShowInfoBanner()) {
+            trackEvent(TELEMETRY_CATEGORIES.CLOUD_ADMIN, 'bannerview_user_limit_warning');
+        }
     }, []);
 
     const shouldShowInfoBanner = (): boolean => {
@@ -84,6 +94,10 @@ const BillingSubscriptions: React.FC<Props> = () => {
     };
 
     const handleHide = async () => {
+        trackEvent(
+            TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+            'click_close_banner_user_limit_warning',
+        );
         dispatch(savePreferences(currentUser.id, [
             {
                 category: Preferences.ADMIN_CLOUD_UPGRADE_PANEL,

diff --git a/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx b/components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx
@@ -10,6 +10,8 @@ import {AnalyticsRow} from 'mattermost-redux/types/admin';
 import {Subscription} from 'mattermost-redux/types/cloud';
 import {isEmpty} from 'lodash';
 
+import {trackEvent} from 'actions/telemetry_actions';
+
 import {t} from 'utils/i18n';
 import PurchaseModal from 'components/purchase_modal';
 
@@ -18,6 +20,7 @@ import {
     CloudBanners,
     AnnouncementBarTypes,
     ModalIdentifiers,
+    TELEMETRY_CATEGORIES,
 } from 'utils/constants';
 
 import AnnouncementBar from '../default_announcement_bar';
@@ -47,13 +50,31 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
         if (isEmpty(this.props.subscription)) {
             await this.props.actions.getCloudSubscription();
         }
+
+        if (!isEmpty(this.props.subscription) && !isEmpty(this.props.analytics) && this.shouldShowBanner()) {
+            if (this.isDismissable()) {
+                trackEvent(
+                    TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                    'bannerview_user_limit_reached',
+                );
+            } else {
+                trackEvent(
+                    TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                    'bannerview_user_limit_exceeded',
+                );
+            }
+        }
     }
 
     handleButtonClick = () => {
         // Do nothing for now
     }
 
     handleClose = async () => {
+        trackEvent(
+            TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+            'click_close_banner_user_limit_reached',
+        );
         await this.props.actions.savePreferences(this.props.currentUser.id, [{
             category: Preferences.CLOUD_UPGRADE_BANNER,
             user_id: this.props.currentUser.id,
@@ -89,6 +110,35 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
         return true;
     }
 
+    isDismissable = () => {
+        const {userLimit, analytics} = this.props;
+        let dismissable = true;
+
+        // If the user limit is less than the current number of users, the banner is not dismissable
+        if (userLimit < analytics!.TOTAL_USERS) {
+            dismissable = false;
+        }
+        return dismissable;
+    }
+
+    showModal = () => {
+        if (this.isDismissable()) {
+            trackEvent(
+                TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                'click_upgrade_banner_user_limit_reached',
+            );
+        } else {
+            trackEvent(
+                TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                'click_upgrade_banner_user_limit_exceeded',
+            );
+        }
+        this.props.actions.openModal({
+            modalId: ModalIdentifiers.CLOUD_PURCHASE,
+            dialogType: PurchaseModal,
+        });
+    }
+
     render() {
         const {userLimit, analytics, preferences} = this.props;
 
@@ -107,24 +157,14 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
             return null;
         }
 
-        let dismissable = true;
-
-        // If the user limit is less than the current number of users, the banner is not dismissable
-        if (userLimit < analytics!.TOTAL_USERS) {
-            dismissable = false;
-        }
+        const dismissable = this.isDismissable();
 
         return (
             <AnnouncementBar
                 type={dismissable ? AnnouncementBarTypes.ADVISOR : AnnouncementBarTypes.CRITICAL_LIGHT}
                 showCloseButton={dismissable}
                 handleClose={this.handleClose}
-                showModal={() =>
-                    this.props.actions.openModal({
-                        modalId: ModalIdentifiers.CLOUD_PURCHASE,
-                        dialogType: PurchaseModal,
-                    })
-                }
+                showModal={this.showModal}
                 modalButtonText={t('admin.billing.subscription.upgradeMattermostCloud.upgradeButton')}
                 modalButtonDefaultText={'Upgrade Mattermost Cloud'}
                 message={dismissable ? t('upgrade.cloud_banner_reached') : t('upgrade.cloud_banner_over')}

diff --git a/components/purchase_modal/index.ts b/components/purchase_modal/index.ts
@@ -7,7 +7,7 @@ import {Stripe} from '@stripe/stripe-js';
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {GenericAction, ActionFunc} from 'mattermost-redux/types/actions';
-import {getCloudProducts} from 'mattermost-redux/actions/cloud';
+import {getCloudProducts, getCloudSubscription} from 'mattermost-redux/actions/cloud';
 import {getClientConfig} from 'mattermost-redux/actions/general';
 
 import {GlobalState} from 'types/store';
@@ -37,6 +37,7 @@ type Actions = {
     getCloudProducts: () => void;
     completeStripeAddPaymentMethod: (stripe: Stripe, billingDetails: BillingDetails, isDevMode: boolean) => Promise<boolean | null>;
     getClientConfig: () => void;
+    getCloudSubscription: () => void;
 }
 
 function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
@@ -47,6 +48,7 @@ function mapDispatchToProps(dispatch: Dispatch<GenericAction>) {
                 getCloudProducts,
                 completeStripeAddPaymentMethod,
                 getClientConfig,
+                getCloudSubscription,
             },
             dispatch,
         ),

diff --git a/components/purchase_modal/process_payment_setup.tsx b/components/purchase_modal/process_payment_setup.tsx
@@ -5,6 +5,8 @@ import React from 'react';
 import {Stripe} from '@stripe/stripe-js';
 
 import {BillingDetails} from 'types/cloud/sku';
+import {pageVisited} from 'actions/telemetry_actions';
+import {TELEMETRY_CATEGORIES} from 'utils/constants';
 
 import successSvg from 'images/cloud/payment_success.svg';
 import failedSvg from 'images/cloud/payment_fail.svg';
@@ -138,6 +140,10 @@ export default class ProcessPaymentSetup extends React.PureComponent<Props, Stat
                 />
             );
         case ProcessState.SUCCESS:
+            pageVisited(
+                TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+                'pageview_payment_success',
+            );
             return (
                 <IconMessage
                     title={t('admin.billing.subscription.upgradedSuccess')}
@@ -151,6 +157,10 @@ export default class ProcessPaymentSetup extends React.PureComponent<Props, Stat
                 />
             );
         case ProcessState.FAILED:
+            pageVisited(
+                TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+                'pageview_payment_failed',
+            );
             return (
                 <IconMessage
                     title={t('admin.billing.subscription.paymentVerificationFailed')}

diff --git a/components/purchase_modal/purchase_modal.tsx b/components/purchase_modal/purchase_modal.tsx
@@ -14,6 +14,8 @@ import wavesBackground from 'images/cloud/waves.svg';
 import blueDotes from 'images/cloud/blue.svg';
 import LowerBlueDots from 'images/cloud/blue-lower.svg';
 import cloudLogo from 'images/cloud/mattermost-cloud.svg';
+import {trackEvent, pageVisited} from 'actions/telemetry_actions';
+import {TELEMETRY_CATEGORIES} from 'utils/constants';
 
 import {STRIPE_CSS_SRC, STRIPE_PUBLIC_KEY} from 'components/payment_form/stripe';
 import RootPortal from 'components/root_portal';
@@ -42,6 +44,7 @@ type Props = {
         getCloudProducts: () => void;
         completeStripeAddPaymentMethod: (stripe: Stripe, billingDetails: BillingDetails, isDevMode: boolean) => Promise<boolean | null>;
         getClientConfig: () => void;
+        getCloudSubscription: () => void;
     };
 }
 
@@ -79,6 +82,7 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
     }
 
     componentDidMount() {
+        pageVisited(TELEMETRY_CATEGORIES.CLOUD_PURCHASING, 'pageview_purchase');
         this.props.actions.getCloudProducts();
 
         // this.fetchProductPrice();
@@ -117,6 +121,12 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                     </div>
                     <a
                         className='footer-text'
+                        onClick={() =>
+                            trackEvent(
+                                TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+                                'click_contact_support',
+                            )
+                        }
                         href={this.props.contactSupportLink}
                         rel='noopener noreferrer'
                         target='_new'
@@ -187,6 +197,12 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                     <div className='footer-text'>{'Need other billing options?'}</div>
                     <a
                         className='footer-text'
+                        onClick={() => {
+                            trackEvent(
+                                TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+                                'click_contact_sales',
+                            );
+                        }}
                         href={this.props.contactSalesLink}
                         target='_new'
                         rel='noopener noreferrer'
@@ -216,7 +232,13 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                 <RootPortal>
                     <FullScreenModal
                         show={Boolean(this.props.show)}
-                        onClose={this.props.actions.closeModal}
+                        onClose={() => {
+                            trackEvent(
+                                TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+                                'click_close_purchasing_screen',
+                            );
+                            this.props.actions.closeModal();
+                        }}
                         ref={this.modal}
                         ariaLabelledBy='purchase_modal_title'
                     >
@@ -230,7 +252,10 @@ export default class PurchaseModal extends React.PureComponent<Props, State> {
                                             this.props.actions.completeStripeAddPaymentMethod
                                         }
                                         isDevMode={this.props.isDevMode}
-                                        onClose={this.props.actions.closeModal}
+                                        onClose={() => {
+                                            this.props.actions.getCloudSubscription();
+                                            this.props.actions.closeModal();
+                                        }}
                                         onBack={() => {
                                             this.setState({processing: false});
                                         }}

diff --git a/components/user_limit_modal/user_limit_modal.tsx b/components/user_limit_modal/user_limit_modal.tsx
@@ -1,11 +1,13 @@
 // 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 {Modal, Button} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
-import {ModalIdentifiers} from 'utils/constants';
+import {trackEvent, pageVisited} from 'actions/telemetry_actions';
+
+import {ModalIdentifiers, TELEMETRY_CATEGORIES} from 'utils/constants';
 import PurchaseModal from 'components/purchase_modal';
 
 import UpgradeUserLimitModalSvg from './user_limit_upgrade_svg';
@@ -20,7 +22,18 @@ type Props = {
 };
 
 export default function UserLimitModal(props: Props) {
+    useEffect(() => {
+        pageVisited(
+            TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+            'pageview_modal_user_limit_reached',
+        );
+    }, []);
+
     const onSubmit = () => {
+        trackEvent(
+            TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+            'click_modal_user_limit_upgrade',
+        );
         props.actions.closeModal();
         props.actions.openModal({
             modalId: ModalIdentifiers.CLOUD_PURCHASE,
@@ -29,6 +42,10 @@ export default function UserLimitModal(props: Props) {
     };
 
     const close = () => {
+        trackEvent(
+            TELEMETRY_CATEGORIES.CLOUD_PURCHASING,
+            'click_modal_user_limit_not_now',
+        );
         props.actions.closeModal();
     };
 

diff --git a/utils/constants.jsx b/utils/constants.jsx
@@ -405,6 +405,11 @@ export const CloudBanners = {
     HIDE: 'hide',
 };
 
+export const TELEMETRY_CATEGORIES = {
+    CLOUD_PURCHASING: 'cloud_purchasing',
+    CLOUD_ADMIN: 'cloud_admin',
+};
+
 export const PostTypes = {
     JOIN_LEAVE: 'system_join_leave',
     JOIN_CHANNEL: 'system_join_channel',