Inject translations and avoid avoidable logic in app component

- Removes the need to have a logic to swtich i18n in app component
- Moves planCode to the only file its being used in for simplicity

ee/app/assets/javascripts/subscriptions/buy_addons_shared/components/app.vue

@@ -7,7 +7,7 @@ import { ERROR_FETCHING_DATA_HEADER, ERROR_FETCHING_DATA_DESCRIPTION } from '~/e
 import Checkout from 'ee/subscriptions/buy_addons_shared/components/checkout.vue';
 import AddonPurchaseDetails from 'ee/subscriptions/buy_addons_shared/components/checkout/addon_purchase_details.vue';
 import { formatNumber, sprintf } from '~/locale';
-import { CUSTOMERSDOT_CLIENT, I18N_ADDON } from 'ee/subscriptions/buy_addons_shared/constants';
+import { CUSTOMERSDOT_CLIENT } from 'ee/subscriptions/buy_addons_shared/constants';
 
 import plansQuery from 'ee/subscriptions/graphql/queries/plans.customer.query.graphql';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
@@ -20,7 +20,7 @@ export default {
     GlAlert,
     OrderSummary,
   },
-  inject: ['tags'],
+  inject: ['tags', 'i18n'],
   data() {
     return {
       hasError: false,
@@ -28,9 +28,6 @@ export default {
     };
   },
   computed: {
-    i18n() {
-      return this.plan?.code ? I18N_ADDON[this.plan.code] || {} : {};
-    },
     emptySvgPath() {
       return `data:image/svg+xml;utf8,${encodeURIComponent(emptySvg)}`;
     },

ee/app/assets/javascripts/subscriptions/buy_addons_shared/constants.js

@@ -6,10 +6,6 @@ export const planTags = {
   STORAGE_PLAN: 'STORAGE_PLAN',
 };
 /* eslint-enable @gitlab/require-i18n-strings */
-export const planCode = {
-  CI_1000_MINUTES_PLAN: 'ci_minutes',
-  STORAGE_PLAN: 'storage',
-};
 
 export const CUSTOMERSDOT_CLIENT = 'customersDotClient';
 export const GITLAB_CLIENT = 'gitlabClient';
@@ -59,33 +55,28 @@ export const I18N_API_ERROR = s__(
 );
 
 // Addon label translations
-export const I18N_ADDON = {
-  [planCode.CI_1000_MINUTES_PLAN]: {
-    alertText: s__(
-      "Checkout|CI minute packs are only used after you've used your subscription's monthly quota. The additional minutes will roll over month to month and are valid for one year.",
-    ),
-    formula: I18N_DETAILS_FORMULA,
-    formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
-    formulaTotal: s__('Checkout|%{quantity} CI minutes'),
-    pricePerUnit: s__('Checkout|$%{selectedPlanPrice} per pack of 1,000 minutes'),
-    summaryTitle: (quantity) =>
-      n__('Checkout|%d CI minute pack', 'Checkout|%d CI minute packs', quantity),
-    summaryTotal: s__('Checkout|Total minutes: %{quantity}'),
-    title: s__("Checkout|%{name}'s CI minutes"),
-    tooltipNote: '',
-  },
-  [planCode.STORAGE_PLAN]: {
-    alertText: '',
-    formula: I18N_DETAILS_FORMULA,
-    formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
-    formulaTotal: s__('Checkout|%{quantity} GB of storage'),
-    pricePerUnit: s__('Checkout|$%{selectedPlanPrice} per 10 GB storage pack per year'),
-    summaryTitle: (quantity) =>
-      n__('Checkout|%{quantity} storage pack', 'Checkout|%{quantity} storage packs', quantity),
-    summaryTotal: s__('Checkout|Total storage: %{quantity} GB'),
-    title: s__("Checkout|%{name}'s storage subscription"),
-    tooltipNote: s__(
-      'Checkout|Your storage subscription has the same term as your main subscription, and the price is prorated accordingly.',
-    ),
-  },
+export const I18N_CI_1000_MINUTES_PLAN = {
+  alertText: s__(
+    "Checkout|CI minute packs are only used after you've used your subscription's monthly quota. The additional minutes will roll over month to month and are valid for one year.",
+  ),
+  formula: I18N_DETAILS_FORMULA,
+  formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
+  formulaTotal: s__('Checkout|%{quantity} CI minutes'),
+  pricePerUnit: s__('Checkout|$%{selectedPlanPrice} per pack of 1,000 minutes'),
+  summaryTitle: (quantity) =>
+    n__('Checkout|%d CI minute pack', 'Checkout|%d CI minute packs', quantity),
+  summaryTotal: s__('Checkout|Total minutes: %{quantity}'),
+  title: s__("Checkout|%{name}'s CI minutes"),
+};
+
+export const I18N_STORAGE_PLAN = {
+  alertText: '',
+  formula: I18N_DETAILS_FORMULA,
+  formulaWithAlert: I18N_DETAILS_FORMULA_WITH_ALERT,
+  formulaTotal: s__('Checkout|%{quantity} GB of storage'),
+  pricePerUnit: s__('Checkout|$%{selectedPlanPrice} per 10 GB storage pack per year'),
+  summaryTitle: (quantity) =>
+    n__('Checkout|%{quantity} storage pack', 'Checkout|%{quantity} storage packs', quantity),
+  summaryTotal: s__('Checkout|Total storage: %{quantity} GB'),
+  title: s__("Checkout|%{name}'s storage subscription"),
 };

ee/app/assets/javascripts/subscriptions/buy_addons_shared/graphql/resolvers.js

@@ -11,12 +11,16 @@ import {
   I18N_CI_MINUTES_PRODUCT_UNIT,
   I18N_STORAGE_PRODUCT_LABEL,
   I18N_STORAGE_PRODUCT_UNIT,
-  planCode,
   STORAGE_PER_PACK,
 } from 'ee/subscriptions/buy_addons_shared/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
 import createFlash from '~/flash';
 
+const planCode = {
+  CI_1000_MINUTES_PLAN: 'ci_minutes',
+  STORAGE_PLAN: 'storage',
+};
+
 const planData = {
   [planCode.CI_1000_MINUTES_PLAN]: {
     hasExpiration: false,

ee/app/assets/javascripts/subscriptions/buy_minutes/index.js

 import Vue from 'vue';
 import ensureData from '~/ensure_data';
-import { planTags } from 'ee/subscriptions/buy_addons_shared/constants';
+import { planTags, I18N_CI_1000_MINUTES_PLAN } from 'ee/subscriptions/buy_addons_shared/constants';
 import App from 'ee/subscriptions/buy_addons_shared/components/app.vue';
 import { writeInitialDataToApolloCache } from '../buy_addons_shared/utils';
 import apolloProvider from '../buy_addons_shared/graphql';
@@ -16,6 +16,7 @@ export default (el) => {
     shouldLog: true,
     provide: {
       tags: [planTags.CI_1000_MINUTES_PLAN],
+      i18n: I18N_CI_1000_MINUTES_PLAN,
     },
   });
 

ee/app/assets/javascripts/subscriptions/buy_storage/index.js

 import Vue from 'vue';
 import ensureData from '~/ensure_data';
-import { planTags } from 'ee/subscriptions/buy_addons_shared/constants';
+import { planTags, I18N_STORAGE_PLAN } from 'ee/subscriptions/buy_addons_shared/constants';
 import App from 'ee/subscriptions/buy_addons_shared/components/app.vue';
 import apolloProvider from '../buy_addons_shared/graphql';
 import { writeInitialDataToApolloCache } from '../buy_addons_shared/utils';
@@ -16,6 +16,7 @@ export default (el) => {
     shouldLog: true,
     provide: {
       tags: [planTags.STORAGE_PLAN],
+      i18n: I18N_STORAGE_PLAN,
     },
   });
 

ee/spec/frontend/subscriptions/buy_addons_shared/app_spec.js

@@ -3,9 +3,9 @@ import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import { pick } from 'lodash';
 import {
-  I18N_ADDON,
+  I18N_CI_1000_MINUTES_PLAN,
+  I18N_STORAGE_PLAN,
   I18N_API_ERROR,
-  planCode,
   planTags,
 } from 'ee/subscriptions/buy_addons_shared/constants';
 import Checkout from 'ee/subscriptions/buy_addons_shared/components/checkout.vue';
@@ -59,6 +59,7 @@ describe('Buy Addons Shared App', () => {
   describe('Storage', () => {
     const injectedProps = {
       tags: [planTags.STORAGE_PLAN],
+      i18n: I18N_STORAGE_PLAN,
     };
     describe('when data is received', () => {
       beforeEach(async () => {
@@ -81,7 +82,7 @@ describe('Buy Addons Shared App', () => {
       it('provides the correct props to order summary', () => {
         expect(findOrderSummary().props()).toMatchObject({
           plan: { ...getStoragePlan, isAddon: true },
-          title: I18N_ADDON[planCode.STORAGE_PLAN].title,
+          title: I18N_STORAGE_PLAN.title,
         });
       });
 
@@ -185,6 +186,7 @@ describe('Buy Addons Shared App', () => {
   describe('CI Minutes', () => {
     const injectedProps = {
       tags: [planTags.CI_1000_MINUTES_PLAN],
+      i18n: I18N_CI_1000_MINUTES_PLAN,
     };
 
     describe('when data is received', () => {
@@ -208,7 +210,7 @@ describe('Buy Addons Shared App', () => {
       it('provides the correct props to order summary', () => {
         expect(findOrderSummary().props()).toMatchObject({
           plan: { ...getCiMinutesPlan, isAddon: true },
-          title: I18N_ADDON[planCode.CI_1000_MINUTES_PLAN].title,
+          title: I18N_CI_1000_MINUTES_PLAN.title,
         });
       });
     });