Fix Popover Trial Status Text for New Trials

ee/app/assets/javascripts/billings/billings_util.js

+export function removeTrialSuffix(planName) {
+  return planName.replace(/ trial\b/i, '');
+}

ee/app/assets/javascripts/billings/constants.js

@@ -3,5 +3,3 @@ export const TABLE_TYPE_FREE = 'free';
 export const TABLE_TYPE_TRIAL = 'trial';
 
 export const DAYS_FOR_RENEWAL = 15;
-
-export const PLAN_TITLE_TRIAL_TEXT = ' Trial';

ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue

@@ -2,12 +2,12 @@
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { removeTrialSuffix } from 'ee/billings/billings_util';
 import {
   TABLE_TYPE_DEFAULT,
   TABLE_TYPE_FREE,
   TABLE_TYPE_TRIAL,
   DAYS_FOR_RENEWAL,
-  PLAN_TITLE_TRIAL_TEXT,
 } from 'ee/billings/constants';
 import ExtendReactivateTrialButton from 'ee/trials/extend_reactivate_trial/components/extend_reactivate_trial_button.vue';
 import createFlash from '~/flash';
@@ -79,7 +79,7 @@ export default {
     subscriptionHeader() {
       const planName = this.isFreePlan
         ? s__('SubscriptionTable|Free')
-        : escape(this.planName.replace(PLAN_TITLE_TRIAL_TEXT, ''));
+        : escape(removeTrialSuffix(this.planName));
       const suffix = this.isSubscription && this.plan.trial ? s__('SubscriptionTable|Trial') : '';
 
       return `${this.namespaceName}: ${planName} ${suffix}`;

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue

@@ -2,6 +2,7 @@
 import { GlButton, GlPopover, GlSprintf } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { debounce } from 'lodash';
+import { removeTrialSuffix } from 'ee/billings/billings_util';
 import axios from '~/lib/utils/axios_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { sprintf } from '~/locale';
@@ -56,10 +57,13 @@ export default {
     formattedTrialEndDate() {
       return formatDate(this.trialEndDate, trialEndDateFormatString);
     },
+    planNameWithoutTrial() {
+      return removeTrialSuffix(this.planName);
+    },
     upgradeButtonTitle() {
       return sprintf(this.$options.i18n.upgradeButtonTitle, {
         groupName: this.groupName,
-        planName: this.planName,
+        planName: removeTrialSuffix(this.planName),
       });
     },
   },
@@ -162,7 +166,7 @@ export default {
       <template #bold="{ content }">
         <b>{{ sprintf(content, { trialEndDate: formattedTrialEndDate }) }}</b>
       </template>
-      <template #planName>{{ planName }}</template>
+      <template #planName>{{ planNameWithoutTrial }}</template>
     </gl-sprintf>
 
     <div class="gl-mt-5">

ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue

 <script>
 import { GlLink, GlProgressBar } from '@gitlab/ui';
+import { removeTrialSuffix } from 'ee/billings/billings_util';
 import { sprintf } from '~/locale';
 import Tracking from '~/tracking';
 import { EXPERIMENT_KEY, WIDGET } from './constants';
@@ -26,7 +27,7 @@ export default {
       const i18nWidgetTitle = i18n.widgetTitle.countableTranslator(this.daysRemaining);
 
       return sprintf(i18nWidgetTitle, {
-        planName: this.planName,
+        planName: removeTrialSuffix(this.planName),
         enDash: '–',
         num: this.daysRemaining,
       });

ee/spec/frontend/contextual_sidebar/trial_status_popover_spec.js

@@ -86,6 +86,15 @@ describe('TrialStatusPopover component', () => {
     expectTracking(trackingEvents.compareBtnClick);
   });
 
+  it('does not include the word "Trial" if the plan name includes it', () => {
+    wrapper = createComponent({ planName: 'Ultimate Trial' }, mount);
+
+    const popoverText = wrapper.text();
+
+    expect(popoverText).toContain('We hope you’re enjoying the features of GitLab Ultimate.');
+    expect(popoverText).toMatch(/Upgrade Some Test Group to Ultimate(?! Trial)/);
+  });
+
   describe('startInitiallyShown', () => {
     const userCalloutProviders = {
       userCalloutsPath: 'user_callouts/path',

ee/spec/frontend/contextual_sidebar/trial_status_widget_spec.js

@@ -64,6 +64,12 @@ describe('TrialStatusWidget component', () => {
 
       unmockTracking();
     });
+
+    it('does not render Trial twice if the plan name includes "Trial"', () => {
+      wrapper = createComponent({ planName: 'Ultimate Trial' });
+
+      expect(wrapper.text()).toEqual('Ultimate Trial – 20 days left');
+    });
   });
 
   describe('with the optional containerId prop', () => {