Merge branch 'growth-60-hide-progress-bar-for-existing-users' into 'master'

Only show Progress Bar for new users

See merge request gitlab-org/gitlab!24877

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

 <script>
 import { s__ } from '~/locale';
 import { PROGRESS_STEPS } from '../constants';
+import { mapState } from 'vuex';
 import ProgressBar from './checkout/progress_bar.vue';
 import SubscriptionDetails from './checkout/subscription_details.vue';
 import BillingAddress from './checkout/billing_address.vue';
@@ -14,6 +15,9 @@ export default {
       step: PROGRESS_STEPS.checkout,
     };
   },
+  computed: {
+    ...mapState(['newUser']),
+  },
   i18n: {
     checkout: s__('Checkout|Checkout'),
   },
@@ -22,7 +26,7 @@ export default {
 <template>
   <div class="checkout d-flex flex-column justify-content-between w-100">
     <div class="full-width">
-      <progress-bar :step="step" />
+      <progress-bar v-if="newUser" :step="step" />
       <div class="flash-container"></div>
       <h2 class="mt-4 mb-3 mb-lg-5">{{ $options.i18n.checkout }}</h2>
       <subscription-details />

ee/app/assets/javascripts/subscriptions/new/store/state.js

@@ -16,14 +16,15 @@ const determineSelectedPlan = (planId, plans) => {
   return plans[0] && plans[0].value;
 };
 
-export default ({ planData = '[]', planId, setupForCompany, fullName }) => {
-  const plans = parsePlanData(planData);
+export default ({ planData = '[]', planId, setupForCompany, fullName, newUser }) => {
+  const availablePlans = parsePlanData(planData);
 
   return {
     currentStep: STEPS[0],
-    availablePlans: plans,
-    selectedPlan: determineSelectedPlan(planId, plans),
     isSetupForCompany: parseBoolean(setupForCompany),
+    availablePlans,
+    selectedPlan: determineSelectedPlan(planId, availablePlans),
+    newUser: parseBoolean(newUser),
     fullName,
     organizationName: null,
     numberOfUsers: parseBoolean(setupForCompany) ? 0 : 1,

ee/spec/frontend/subscriptions/new/components/checkout_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import createStore from 'ee/subscriptions/new/store';
+import Component from 'ee/subscriptions/new/components/checkout.vue';
+import ProgressBar from 'ee/subscriptions/new/components/checkout/progress_bar.vue';
+
+describe('Checkout', () => {
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  let store;
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(Component, {
+      store,
+    });
+  };
+
+  const findProgressBar = () => wrapper.find(ProgressBar);
+
+  beforeEach(() => {
+    store = createStore();
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each([[true, true], [false, false]])('when newUser=%s', (newUser, visible) => {
+    beforeEach(() => {
+      store.state.newUser = newUser;
+    });
+
+    it(`progress bar visibility is ${visible}`, () => {
+      expect(findProgressBar().exists()).toBe(visible);
+    });
+  });
+});