Update payment method step edit button text

ee/app/assets/javascripts/subscriptions/new/components/checkout/payment_method.vue

@@ -5,6 +5,7 @@ import { STEP_PAYMENT_METHOD, TRACK_SUCCESS_MESSAGE } from 'ee/subscriptions/con
 import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
 import { sprintf, s__ } from '~/locale';
 import Tracking from '~/tracking';
+import { i18n } from 'ee/vue_shared/purchase_flow/constants';
 import Zuora from './zuora.vue';
 
 export default {
@@ -47,6 +48,7 @@ export default {
     },
   },
   i18n: {
+    stepEditText: i18n.edit,
     stepTitle: s__('Checkout|Payment method'),
     creditCardDetails: s__('Checkout|%{cardType} ending in %{lastFourDigits}'),
     expirationDate: s__('Checkout|Exp %{expirationMonth}/%{expirationYear}'),
@@ -56,6 +58,7 @@ export default {
 </script>
 <template>
   <step
+    :edit-button-text="$options.i18n.stepEditText"
     :step-id="$options.stepId"
     :title="$options.i18n.stepTitle"
     :is-valid="isValid"

ee/app/assets/javascripts/vue_shared/purchase_flow/components/step.vue

@@ -6,8 +6,8 @@ import activeStepQuery from 'ee/vue_shared/purchase_flow/graphql/queries/active_
 import stepListQuery from 'ee/vue_shared/purchase_flow/graphql/queries/step_list.query.graphql';
 import { createAlert } from '~/alert';
 import { convertToSnakeCase, dasherize } from '~/lib/utils/text_utility';
-import { GENERAL_ERROR_MESSAGE } from '../constants';
-import StepHeader from './step_header.vue';
+import { i18n, GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
+import StepHeader from 'ee/vue_shared/purchase_flow/components/step_header.vue';
 
 export default {
   components: {
@@ -16,6 +16,11 @@ export default {
     StepHeader,
   },
   props: {
+    editButtonText: {
+      type: String,
+      required: false,
+      default: i18n.edit,
+    },
     stepId: {
       type: String,
       required: true,
@@ -115,7 +120,13 @@ export default {
 </script>
 <template>
   <div class="gl-w-full gl-pb-5 gl-border-b gl-mb-5">
-    <step-header :title="title" :is-finished="isFinished" :is-editable="isEditable" @edit="edit" />
+    <step-header
+      :edit-button-text="editButtonText"
+      :title="title"
+      :is-finished="isFinished"
+      :is-editable="isEditable"
+      @edit="edit"
+    />
     <div v-show="isActive" class="gl-mt-5" data-testid="active-step-body" @keyup.enter="nextStep">
       <slot name="body" :active="isActive"></slot>
       <gl-form-group

ee/app/assets/javascripts/vue_shared/purchase_flow/components/step_header.vue

 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
-import { s__ } from '~/locale';
 
 export default {
   components: {
@@ -16,15 +15,16 @@ export default {
       type: String,
       required: true,
     },
+    editButtonText: {
+      type: String,
+      required: true,
+    },
     isEditable: {
       type: Boolean,
       required: true,
     },
   },
   emits: ['edit'],
-  i18n: {
-    edit: s__('Checkout|Edit'),
-  },
 };
 </script>
 <template>
@@ -46,7 +46,7 @@ export default {
       v-if="isEditable"
       class="gl-display-flex gl-flex-direction-column gl-justify-content-center"
     >
-      <gl-button size="small" @click="$emit('edit')">{{ $options.i18n.edit }}</gl-button>
+      <gl-button size="small" @click="$emit('edit')">{{ editButtonText }}</gl-button>
     </div>
   </div>
 </template>

ee/app/assets/javascripts/vue_shared/purchase_flow/constants.js

@@ -12,3 +12,7 @@ export const userProfileLink = 'https://gitlab.com/-/profile';
 export const linkCustomersPortalHelpLink = helpPagePath('subscriptions/customers_portal', {
   anchor: '#change-the-linked-account',
 });
+
+export const i18n = {
+  edit: s__('Checkout|Edit'),
+};

ee/spec/frontend/subscriptions/new/components/checkout/payment_method_spec.js

@@ -18,14 +18,10 @@ describe('Payment Method', () => {
   let store;
   let wrapper;
 
-  function createComponent(options = {}) {
-    return mount(PaymentMethod, {
-      store,
-      ...options,
-    });
-  }
+  const findStepComponent = () => wrapper.findComponent(Step);
+  const isStepValid = () => findStepComponent().props('isValid');
 
-  beforeEach(() => {
+  const createComponent = (options = {}) => {
     store = createStore();
 
     store.commit(types.UPDATE_PAYMENT_METHOD_ID, 'paymentMethodId');
@@ -36,13 +32,18 @@ describe('Payment Method', () => {
       credit_card_expiration_year: 2009,
     });
 
-    const mockApollo = createMockApolloProvider(STEPS);
-    wrapper = createComponent({ apolloProvider: mockApollo });
+    wrapper = mount(PaymentMethod, {
+      apolloProvider: createMockApolloProvider(STEPS),
+      store,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
   });
 
   describe('validations', () => {
-    const isStepValid = () => wrapper.findComponent(Step).props('isValid');
-
     it('should be valid when paymentMethodId is defined', () => {
       expect(isStepValid()).toBe(true);
     });
@@ -53,6 +54,10 @@ describe('Payment Method', () => {
       await nextTick();
       expect(isStepValid()).toBe(false);
     });
+
+    it('passes the correct text to the edit button', () => {
+      expect(findStepComponent().props('editButtonText')).toBe('Edit');
+    });
   });
 
   describe('showing the summary', () => {

ee/spec/frontend/vue_shared/purchase_flow/components/checkout/payment_method_spec.js

@@ -22,7 +22,6 @@ describe('Payment Method', () => {
 
   const findCCDetails = () => wrapper.findByTestId('card-details');
   const findCCExpiration = () => wrapper.findByTestId('card-expiration');
-
   const findZuora = () => wrapper.findComponent(Zuora);
 
   const isStepValid = () => wrapper.findComponent(Step).props('isValid');

ee/spec/frontend/vue_shared/purchase_flow/components/step_spec.js

@@ -102,6 +102,14 @@ describe('Step', () => {
       });
     });
 
+    it('passes the correct text to the edit button', () => {
+      wrapper = createComponent({
+        propsData: { editButtonText: 'Change' },
+      });
+
+      expect(findStepHeader().props('editButtonText')).toBe('Change');
+    });
+
     it('should not be shown when this step is not valid and not active', async () => {
       const mockApollo = createMockApolloProvider(STEPS, 1);
       await activateFirstStep(mockApollo);