diff --git a/ee/app/assets/javascripts/billings/billings_util.js b/ee/app/assets/javascripts/billings/billings_util.js new file mode 100644 index 0000000000000000000000000000000000000000..08fb2f35bc14523ac6c61d08a7eeb18a77143a8e --- /dev/null +++ b/ee/app/assets/javascripts/billings/billings_util.js @@ -0,0 +1,3 @@ +export function removeTrialSuffix(planName) { + return planName.replace(/ trial\b/i, ''); +} diff --git a/ee/app/assets/javascripts/billings/constants.js b/ee/app/assets/javascripts/billings/constants.js index 52b1a08676ac60295c8bba05a29c9bc49e8b7516..3feb44eac4864516633998700ede6f03c2f41284 100644 --- a/ee/app/assets/javascripts/billings/constants.js +++ b/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'; diff --git a/ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue b/ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue index 6c51348ae5261cefa31eb07dd0a8c0557b7446c7..ae25b16b6ba7ccb6719e7664062c30a466d2e009 100644 --- a/ee/app/assets/javascripts/billings/subscriptions/components/subscription_table.vue +++ b/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}`; diff --git a/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue b/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue index 3f1ce55649539f782f5bd4a990b312f56d0ac976..2122306adb3739bcdcaced98f1195063b8f7d320 100644 --- a/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_popover.vue +++ b/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"> diff --git a/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue b/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue index 92952a2b1fab59ced87ea3ce118ea0e0d82718dd..2c47ffb5bb4f333d6ae21a287fb2398012320422 100644 --- a/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue +++ b/ee/app/assets/javascripts/contextual_sidebar/components/trial_status_widget.vue @@ -1,5 +1,6 @@ <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, }); diff --git a/ee/spec/frontend/contextual_sidebar/trial_status_popover_spec.js b/ee/spec/frontend/contextual_sidebar/trial_status_popover_spec.js index 4b15fee2648b966513bd204bd8d02044ab32e523..f2e670a2809e7d2da8f4d6e2ce96f7fd46c64934 100644 --- a/ee/spec/frontend/contextual_sidebar/trial_status_popover_spec.js +++ b/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', diff --git a/ee/spec/frontend/contextual_sidebar/trial_status_widget_spec.js b/ee/spec/frontend/contextual_sidebar/trial_status_widget_spec.js index ae4e83dd4f8a0d8d9f2625fb5ceb479726466506..13a57aa952345e9bf0781b2f306f825fb6ff5a27 100644 --- a/ee/spec/frontend/contextual_sidebar/trial_status_widget_spec.js +++ b/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', () => {