[MM-28062] Add telemetry for in-app purchase flow (mattermost#6760)

* Add telemetry for in-app purchase flow * Fix spelling mistake in telemetry doc * Fixes * Fix linter
Revanth47 · Oct 13, 2020 · 8618aeb · 8618aeb
1 parent 2d69be5
commit 8618aeb
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
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,13 +14,14 @@ 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, CloudLinks} from 'utils/constants';
 
 import {STRIPE_CSS_SRC, STRIPE_PUBLIC_KEY} from 'components/payment_form/stripe';
 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';
 
@@ -79,6 +80,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 +119,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 +195,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 +230,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'
  >

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,10 @@ export const CloudBanners = {
  HIDE: 'hide',
 };
 
+export const TELEMETRY_CATEGORIES = {
+ CLOUD_PURCHASING: 'cloud_purchasing',
+};
+
 export const PostTypes = {
  JOIN_LEAVE: 'system_join_leave',
  JOIN_CHANNEL: 'system_join_channel',