feat: Add optimizely experiment to measure Remind, Revoke engagement

is happening on the LPR vs. the subsidy management pages
openedx · Dec 21, 2022 · 2d435cc · 2d435cc
1 parent ba888e9
commit 2d435cc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,10 @@
       <script src="https://www.edx.org/optimizelyjs/<%= htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID %>.js"></script>
     <% } %>
 
+    <% if (htmlWebpackPlugin.options.NODE_ENV !== 'production' && htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID) { %>
+      <script src="https://cdn.optimizely.com/js/<%= htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID %>.js"></script>
+    <% } %>
+
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/Admin/index.jsx b/src/components/Admin/index.jsx
@@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
 import { Icon } from '@edx/paragon';
 import { Link } from 'react-router-dom';
 
+import { getConfig } from '@edx/frontend-platform/config';
 import Hero from '../Hero';
 import StatusAlert from '../StatusAlert';
 import EnrollmentsTable from '../EnrollmentsTable';
@@ -25,6 +26,7 @@ import AdminCardsSkeleton from './AdminCardsSkeleton';
 import { SubscriptionData } from '../subscriptions';
 import EmbeddedSubscription from './EmbeddedSubscription';
 import { features } from '../../config';
+import { isExperimentVariant } from '../../optimizely';
 
 class Admin extends React.Component {
   componentDidMount() {
@@ -297,6 +299,11 @@ class Admin extends React.Component {
     };
     const { SUBSCRIPTION_LPR } = features;
 
+    const config = getConfig();
+
+    // Only users buckted in `Variation 1` can see the Subscription Management UI on LPR.
+    const isExperimentVariation1 = isExperimentVariant(config.EXPERIMENT_1_ID, config.EXPERIMENT_1_VARIANT_1_ID);
+
     return (
       <main role="main" className="learner-progress-report">
         {!loading && !error && !this.hasAnalyticsData() ? <EnterpriseAppSkeleton /> : (
@@ -320,7 +327,7 @@ class Admin extends React.Component {
                 )}
               </div>
 
-              {SUBSCRIPTION_LPR
+              {SUBSCRIPTION_LPR && isExperimentVariation1
                   && (
                   <div className="row">
                     <div className="col mb-4.5">

diff --git a/src/components/Admin/licenses/LicenseManagementTable/index.jsx b/src/components/Admin/licenses/LicenseManagementTable/index.jsx
@@ -26,6 +26,7 @@ import RevokeBulkAction from '../../../subscriptions/licenses/LicenseManagementT
 import LicenseManagementTableActionColumn from '../../../subscriptions/licenses/LicenseManagementTable/LicenseManagementTableActionColumn';
 import LicenseManagementUserBadge from '../../../subscriptions/licenses/LicenseManagementTable/LicenseManagementUserBadge';
 import { SUBSCRIPTION_TABLE_EVENTS } from '../../../../eventTracking';
+import { pushEvent, EVENTS } from '../../../../optimizely';
 
 const userRecentAction = (user) => {
   switch (user.status) {
@@ -168,12 +169,14 @@ const LicenseManagementTable = () => {
 
   // Successful action modal callback
   const onRemindSuccess = () => {
+    pushEvent(EVENTS.LPR_SUBSCRIPTION_LICENSE_REMIND, { enterpriseUUID: subscription.enterpriseCustomerUuid });
     // Refresh users to get updated lastRemindDate
     forceRefreshUsers();
     setToastMessage('Users successfully reminded');
     setShowToast(true);
   };
   const onRevokeSuccess = () => {
+    pushEvent(EVENTS.LPR_SUBSCRIPTION_LICENSE_REVOKE, { enterpriseUUID: subscription.enterpriseCustomerUuid });
     // Refresh subscription and user data to get updated revoke count and revoked list of users
     forceRefreshSubscription();
     forceRefreshDetailView();

diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
@@ -12,6 +12,7 @@ import {
 import debounce from 'lodash.debounce';
 import moment from 'moment';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import { getConfig } from '@edx/frontend-platform/config';
 
 import { SubscriptionContext } from '../../SubscriptionData';
 import { SubscriptionDetailContext, defaultStatusFilter } from '../../SubscriptionDetailContextProvider';
@@ -28,6 +29,7 @@ import RevokeBulkAction from './bulk-actions/RevokeBulkAction';
 import LicenseManagementTableActionColumn from './LicenseManagementTableActionColumn';
 import LicenseManagementUserBadge from './LicenseManagementUserBadge';
 import { SUBSCRIPTION_TABLE_EVENTS } from '../../../../eventTracking';
+import { pushEvent, EVENTS, isExperimentActive } from '../../../../optimizely';
 
 const userRecentAction = (user) => {
   switch (user.status) {
@@ -59,6 +61,8 @@ const LicenseManagementTable = () => {
   const { width } = useWindowSize();
   const showFiltersInSidebar = useMemo(() => width > breakpoints.medium.maxWidth, [width]);
 
+  const config = getConfig();
+
   const {
     forceRefresh: forceRefreshSubscription,
   } = useContext(SubscriptionContext);
@@ -172,12 +176,18 @@ const LicenseManagementTable = () => {
 
   // Successful action modal callback
   const onRemindSuccess = () => {
+    if (isExperimentActive(config.EXPERIMENT_1_ID)) {
+      pushEvent(EVENTS.SUBSCRIPTION_LICENSE_REMIND, { enterpriseUUID: subscription.enterpriseCustomerUuid });
+    }
     // Refresh users to get updated lastRemindDate
     forceRefreshUsers();
     setToastMessage('Users successfully reminded');
     setShowToast(true);
   };
   const onRevokeSuccess = () => {
+    if (isExperimentActive(config.EXPERIMENT_1_ID)) {
+      pushEvent(EVENTS.SUBSCRIPTION_LICENSE_REVOKE, { enterpriseUUID: subscription.enterpriseCustomerUuid });
+    }
     // Refresh subscription and user data to get updated revoke count and revoked list of users
     forceRefreshSubscription();
     forceRefreshDetailView();

diff --git a/src/index.jsx b/src/index.jsx
@@ -39,6 +39,8 @@ initialize({
         ENTERPRISE_LEARNER_PORTAL_URL: process.env.ENTERPRISE_LEARNER_PORTAL_URL || null,
         FEATURE_LEARNER_CREDIT_MANAGEMENT: process.env.FEATURE_LEARNER_CREDIT_MANAGEMENT || hasFeatureFlagEnabled('LEARNER_CREDIT_MANAGEMENT') || null,
         FEATURE_CONTENT_HIGHLIGHTS: process.env.FEATURE_CONTENT_HIGHLIGHTS || hasFeatureFlagEnabled('CONTENT_HIGHLIGHTS') || null,
+        EXPERIMENT_1_ID: process.env.EXPERIMENT_1_ID || null,
+        EXPERIMENT_1_VARIANT_1_ID: process.env.EXPERIMENT_1_VARIANT_1_ID || null,
       });
     },
   },

diff --git a/src/optimizely.js b/src/optimizely.js
@@ -1,4 +1,9 @@
-export const EVENTS = {};
+export const EVENTS = {
+  SUBSCRIPTION_LICENSE_REMIND: 'enterprise_admin_portal_subscription_license_remind',
+  SUBSCRIPTION_LICENSE_REVOKE: 'enterprise_admin_portal_subscription_license_revoke',
+  LPR_SUBSCRIPTION_LICENSE_REMIND: 'enterprise_admin_portal_lpr_subscription_license_remind',
+  LPR_SUBSCRIPTION_LICENSE_REVOKE: 'enterprise_admin_portal_lpr_subscription_license_revoke',
+};
 
 export const getActiveExperiments = () => {
   if (!window.optimizely) {