Merge branch 'onboarding-issues-experiment-checkout-progress-bar' into 'master'

Onboarding issues experiment checkout progress bar

See merge request gitlab-org/gitlab!31876

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

 <script>
 import { s__ } from '~/locale';
-import { STEPS, SUBSCRIPTON_FLOW_STEPS } from 'ee/registrations/constants';
+import {
+  STEPS,
+  SUBSCRIPTON_FLOW_STEPS,
+  ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS,
+} from 'ee/registrations/constants';
 import { mapState } from 'vuex';
 import ProgressBar from 'ee/registrations/components/progress_bar.vue';
 import SubscriptionDetails from './checkout/subscription_details.vue';
@@ -10,10 +14,14 @@ import ConfirmOrder from './checkout/confirm_order.vue';
 
 export default {
   components: { ProgressBar, SubscriptionDetails, BillingAddress, PaymentMethod, ConfirmOrder },
-  steps: SUBSCRIPTON_FLOW_STEPS,
   currentStep: STEPS.checkout,
   computed: {
-    ...mapState(['isNewUser']),
+    ...mapState(['isOnboardingIssuesExperimentEnabled', 'isNewUser']),
+    steps() {
+      return this.isOnboardingIssuesExperimentEnabled
+        ? ONBOARDING_ISSUES_EXPERIMENT_AND_SUBSCRIPTION_FLOW_STEPS
+        : SUBSCRIPTON_FLOW_STEPS;
+    },
   },
   i18n: {
     checkout: s__('Checkout|Checkout'),
@@ -23,7 +31,7 @@ export default {
 <template>
   <div class="checkout d-flex flex-column justify-content-between w-100">
     <div class="full-width">
-      <progress-bar v-if="isNewUser" :steps="$options.steps" :current-step="$options.currentStep" />
+      <progress-bar v-if="isNewUser" :steps="steps" :current-step="$options.currentStep" />
       <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

@@ -44,6 +44,7 @@ export default ({
   setupForCompany,
   fullName,
   newUser,
+  onboardingIssuesExperimentEnabled,
   groupData = '[]',
 }) => {
   const availablePlans = parsePlanData(planData);
@@ -57,6 +58,7 @@ export default ({
     availablePlans,
     selectedPlan: determineSelectedPlan(planId, availablePlans),
     isNewUser,
+    isOnboardingIssuesExperimentEnabled: parseBoolean(onboardingIssuesExperimentEnabled),
     fullName,
     groupData: groups,
     selectedGroup: groupId,

ee/app/helpers/subscriptions_helper.rb

@@ -34,6 +34,7 @@ module SubscriptionsHelper
       plan_id: params[:plan_id],
       namespace_id: params[:namespace_id],
       new_user: new_user?.to_s,
+      onboarding_issues_experiment_enabled: experiment_enabled?(:onboarding_issues).to_s,
       group_data: group_data.to_json
     }
   end

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

@@ -51,6 +51,21 @@ describe('Checkout', () => {
       ]);
     });
 
+    describe('when part of the onboarding issues experiment', () => {
+      beforeEach(() => {
+        store.state.isOnboardingIssuesExperimentEnabled = true;
+      });
+
+      it('passes the steps', () => {
+        expect(findProgressBar().props('steps')).toEqual([
+          'Your profile',
+          'Checkout',
+          'Your GitLab group',
+          'Your first project',
+        ]);
+      });
+    });
+
     it('passes the current step', () => {
       expect(findProgressBar().props('currentStep')).toEqual('Checkout');
     });

ee/spec/helpers/subscriptions_helper_spec.rb

@@ -35,6 +35,7 @@ describe SubscriptionsHelper do
     before do
       allow(helper).to receive(:params).and_return(plan_id: 'bronze_id', namespace_id: group.id.to_s)
       allow(helper).to receive(:current_user).and_return(user)
+      allow(helper).to receive(:experiment_enabled?).with(:onboarding_issues).and_return(false)
       group.add_owner(user)
     end