Merge branch 'vs/fix-summary-addon-purchase' into 'master'

Fix summary section when purchasing an addon

See merge request gitlab-org/gitlab!65657

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

@@ -23,7 +23,6 @@ export default {
   emptySvg,
   data() {
     return {
-      plans: null,
       hasError: false,
     };
   },
@@ -59,10 +58,10 @@ export default {
   />
   <step-order-app v-else-if="!$apollo.loading">
     <template #checkout>
-      <checkout :plans="plans" />
+      <checkout :plan="plans[0]" />
     </template>
     <template #order-summary>
-      <order-summary :plans="plans" />
+      <order-summary :plan="plans[0]" />
     </template>
   </step-order-app>
 </template>

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

 <script>
+import updateState from 'ee/subscriptions/graphql/mutations/update_state.mutation.graphql';
+import { GENERAL_ERROR_MESSAGE } from 'ee/vue_shared/purchase_flow/constants';
+import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import AddonPurchaseDetails from './checkout/addon_purchase_details.vue';
 import BillingAddress from './checkout/billing_address.vue';
@@ -8,11 +11,28 @@ import PaymentMethod from './checkout/payment_method.vue';
 export default {
   components: { AddonPurchaseDetails, BillingAddress, PaymentMethod, ConfirmOrder },
   props: {
-    plans: {
-      type: Array,
+    plan: {
+      type: Object,
       required: true,
     },
   },
+  mounted() {
+    this.updateSelectedPlanId(this.plan.id);
+  },
+  methods: {
+    updateSelectedPlanId(planId) {
+      this.$apollo
+        .mutate({
+          mutation: updateState,
+          variables: {
+            input: { selectedPlanId: planId },
+          },
+        })
+        .catch((error) => {
+          createFlash({ message: GENERAL_ERROR_MESSAGE, error, captureError: true });
+        });
+    },
+  },
   i18n: {
     checkout: s__('Checkout|Checkout'),
   },
@@ -22,7 +42,7 @@ export default {
   <div class="checkout gl-display-flex gl-flex-direction-column gl-align-items-center">
     <div class="flash-container"></div>
     <h2 class="gl-mt-6 gl-mb-7 gl-mb-lg-5">{{ $options.i18n.checkout }}</h2>
-    <addon-purchase-details :plans="plans" />
+    <addon-purchase-details :plan="plan" />
     <billing-address />
     <payment-method />
     <confirm-order />

ee/app/assets/javascripts/subscriptions/buy_minutes/components/order_summary.vue

 <script>
 import { GlIcon, GlCollapse, GlCollapseToggleDirective } from '@gitlab/ui';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
-import { TAX_RATE, NEW_GROUP } from 'ee/subscriptions/new/constants';
+import { TAX_RATE } from 'ee/subscriptions/new/constants';
 import formattingMixins from 'ee/subscriptions/new/formatting_mixins';
 import { sprintf, s__ } from '~/locale';
 import SummaryDetails from './order_summary/summary_details.vue';
@@ -17,8 +17,8 @@ export default {
   },
   mixins: [formattingMixins],
   props: {
-    plans: {
-      type: Array,
+    plan: {
+      type: Object,
       required: true,
     },
   },
@@ -27,12 +27,8 @@ export default {
       query: stateQuery,
       manual: true,
       result({ data }) {
-        this.subscription = data.subscription;
         this.namespaces = data.namespaces;
-        this.isSetupForCompany = data.isSetupForCompany;
-        this.fullName = data.fullName;
-        this.customer = data.customer;
-        this.selectedPlanId = data.selectedPlanId;
+        this.subscription = data.subscription;
       },
     },
   },
@@ -40,22 +36,15 @@ export default {
     return {
       subscription: {},
       namespaces: [],
-      isSetupForCompany: false,
       isBottomSummaryVisible: false,
-      fullName: null,
-      customer: {},
-      selectedPlanId: null,
     };
   },
   computed: {
-    selectedPlan() {
-      return this.plans.find((plan) => plan.id === this.selectedPlanId);
-    },
     selectedPlanPrice() {
-      return this.selectedPlan.pricePerYear;
+      return this.plan.pricePerYear;
     },
     selectedGroup() {
-      return this.namespaces.find((group) => group.id === this.subscription.namespaceId);
+      return this.namespaces.find((group) => group.id === Number(this.subscription.namespaceId));
     },
     totalExVat() {
       return this.subscription.quantity * this.selectedPlanPrice;
@@ -66,46 +55,21 @@ export default {
     totalAmount() {
       return this.totalExVat + this.vat;
     },
-    usersPresent() {
+    quantityPresent() {
       return this.subscription.quantity > 0;
     },
-    isGroupSelected() {
-      return this.subscription.namespaceId && this.subscription.namespaceId !== NEW_GROUP;
-    },
-    isSelectedGroupPresent() {
-      return (
-        this.isGroupSelected &&
-        this.namespaces.some((namespace) => namespace.id === this.subscription.namespaceId)
-      );
-    },
-    name() {
-      if (this.isSetupForCompany && this.customer.company) {
-        return this.customer.company;
-      }
-
-      if (this.isGroupSelected && this.isSelectedGroupPresent) {
-        return this.selectedGroup.name;
-      }
-
-      if (this.isSetupForCompany) {
-        return s__('Checkout|Your organization');
-      }
-
-      return this.fullName;
+    namespaceName() {
+      return this.selectedGroup.name;
     },
     titleWithName() {
-      return sprintf(this.$options.i18n.title, { name: this.name });
+      return sprintf(this.$options.i18n.title, { name: this.namespaceName });
     },
     isVisible() {
-      return (
-        !this.$apollo.loading &&
-        (!this.isGroupSelected || this.isSelectedGroupPresent) &&
-        this.selectedPlan
-      );
+      return !this.$apollo.loading;
     },
   },
   i18n: {
-    title: s__("Checkout|%{name}'s GitLab subscription"),
+    title: s__("Checkout|%{name}'s CI minutes"),
   },
   taxRate: TAX_RATE,
 };
@@ -121,20 +85,22 @@ export default {
           <div class="d-flex">
             <gl-icon v-if="isBottomSummaryVisible" name="chevron-down" />
             <gl-icon v-else name="chevron-right" />
-            <div>{{ titleWithName }}</div>
+            <div data-testid="title">{{ titleWithName }}</div>
+          </div>
+          <div class="gl-ml-3" data-testid="amount">
+            {{ formatAmount(totalAmount, quantityPresent) }}
           </div>
-          <div class="gl-ml-3">{{ formatAmount(totalAmount, usersPresent) }}</div>
         </h4>
       </div>
       <gl-collapse id="summary-details" v-model="isBottomSummaryVisible">
         <summary-details
           :vat="vat"
           :total-ex-vat="totalExVat"
-          :users-present="usersPresent"
-          :selected-plan-text="selectedPlan.name"
+          :quantity-present="quantityPresent"
+          :selected-plan-text="plan.name"
           :selected-plan-price="selectedPlanPrice"
           :total-amount="totalAmount"
-          :number-of-users="subscription.quantity"
+          :quantity="subscription.quantity"
           :tax-rate="$options.taxRate"
         />
       </gl-collapse>
@@ -148,11 +114,11 @@ export default {
       <summary-details
         :vat="vat"
         :total-ex-vat="totalExVat"
-        :users-present="usersPresent"
-        :selected-plan-text="selectedPlan.name"
+        :quantity-present="quantityPresent"
+        :selected-plan-text="plan.name"
         :selected-plan-price="selectedPlanPrice"
         :total-amount="totalAmount"
-        :number-of-users="subscription.quantity"
+        :quantity="subscription.quantity"
         :tax-rate="$options.taxRate"
       />
     </div>

ee/app/assets/javascripts/subscriptions/buy_minutes/components/order_summary/summary_details.vue

@@ -13,10 +13,6 @@ export default {
       type: Number,
       required: true,
     },
-    usersPresent: {
-      type: Boolean,
-      required: true,
-    },
     selectedPlanText: {
       type: String,
       required: true,
@@ -29,7 +25,7 @@ export default {
       type: Number,
       required: true,
     },
-    numberOfUsers: {
+    quantity: {
       type: Number,
       required: true,
     },
@@ -38,6 +34,10 @@ export default {
       required: false,
       default: null,
     },
+    purchaseHasExpiration: {
+      type: Boolean,
+      required: false,
+    },
   },
   data() {
     return {
@@ -51,8 +51,8 @@ export default {
   },
   i18n: {
     selectedPlanText: s__('Checkout|%{selectedPlanText} plan'),
-    numberOfUsers: s__('Checkout|(x%{numberOfUsers})'),
-    pricePerUserPerYear: s__('Checkout|$%{selectedPlanPrice} per user per year'),
+    quantity: s__('Checkout|(x%{quantity})'),
+    pricePerUnitPerYear: s__('Checkout|$%{selectedPlanPrice} per pack per year'),
     dates: s__('Checkout|%{startDate} - %{endDate}'),
     subtotal: s__('Checkout|Subtotal'),
     tax: s__('Checkout|Tax'),
@@ -63,22 +63,22 @@ export default {
 <template>
   <div>
     <div class="d-flex justify-content-between bold gl-mt-3 gl-mb-3">
-      <div class="js-selected-plan">
+      <div data-testid="selected-plan">
         {{ sprintf($options.i18n.selectedPlanText, { selectedPlanText }) }}
-        <span v-if="usersPresent" class="js-number-of-users">{{
-          sprintf($options.i18n.numberOfUsers, { numberOfUsers })
+        <span v-if="quantity" data-testid="quantity">{{
+          sprintf($options.i18n.quantity, { quantity })
         }}</span>
       </div>
-      <div class="js-amount">{{ formatAmount(totalExVat, usersPresent) }}</div>
+      <div data-testid="amount">{{ formatAmount(totalExVat, quantity > 0) }}</div>
     </div>
-    <div class="text-secondary js-per-user">
+    <div class="text-secondary" data-testid="price-per-unit">
       {{
-        sprintf($options.i18n.pricePerUserPerYear, {
+        sprintf($options.i18n.pricePerUnitPerYear, {
           selectedPlanPrice: selectedPlanPrice.toLocaleString(),
         })
       }}
     </div>
-    <div class="text-secondary js-dates">
+    <div v-if="purchaseHasExpiration" class="text-secondary" data-testid="subscription-period">
       {{
         sprintf($options.i18n.dates, {
           startDate: formatDate(startDate),
@@ -90,17 +90,17 @@ export default {
       <div class="border-bottom gl-mt-3 gl-mb-3"></div>
       <div class="d-flex justify-content-between text-secondary">
         <div>{{ $options.i18n.subtotal }}</div>
-        <div class="js-total-ex-vat">{{ formatAmount(totalExVat, usersPresent) }}</div>
+        <div data-testid="total-ex-vat">{{ formatAmount(totalExVat, quantity > 0) }}</div>
       </div>
       <div class="d-flex justify-content-between text-secondary">
         <div>{{ $options.i18n.tax }}</div>
-        <div class="js-vat">{{ formatAmount(vat, usersPresent) }}</div>
+        <div data-testid="vat">{{ formatAmount(vat, quantity > 0) }}</div>
       </div>
     </div>
     <div class="border-bottom gl-mt-3 gl-mb-3"></div>
     <div class="d-flex justify-content-between bold gl-font-lg">
       <div>{{ $options.i18n.total }}</div>
-      <div class="js-total-amount">{{ formatAmount(totalAmount, usersPresent) }}</div>
+      <div data-itestid="total-amount">{{ formatAmount(totalAmount, quantity > 0) }}</div>
     </div>
   </div>
 </template>

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

 import { STEPS } from 'ee/subscriptions/constants';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
-import { convertObjectPropsToCamelCase, parseBoolean } from '~/lib/utils/common_utils';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 function arrayToGraphqlArray(arr, typename) {
   return Array.from(arr, (item) => {
@@ -11,23 +11,21 @@ function arrayToGraphqlArray(arr, typename) {
 }
 
 export function writeInitialDataToApolloCache(apolloProvider, dataset) {
-  const { groupData, newUser, setupForCompany, fullName, planId = null } = dataset;
+  const { groupData, namespaceId } = dataset;
   // eslint-disable-next-line @gitlab/require-i18n-strings
   const namespaces = arrayToGraphqlArray(JSON.parse(groupData), 'Namespace');
-  const isNewUser = parseBoolean(newUser);
-  const isSetupForCompany = parseBoolean(setupForCompany) || !isNewUser;
 
   apolloProvider.clients.defaultClient.cache.writeQuery({
     query: stateQuery,
     data: {
-      isNewUser,
-      isSetupForCompany,
+      isNewUser: false,
+      fullName: null,
+      isSetupForCompany: false,
+      selectedPlanId: null,
       namespaces,
-      fullName,
-      selectedPlanId: planId,
       subscription: {
         quantity: 1,
-        namespaceId: null,
+        namespaceId,
         // eslint-disable-next-line @gitlab/require-i18n-strings
         __typename: 'Subscription',
       },

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

@@ -108,7 +108,7 @@ export default {
 };
 </script>
 <template>
-  <div class="mb-3 mb-lg-5">
+  <div class="mb-3 mb-lg-5 gl-w-full">
     <step-header :title="title" :is-finished="isFinished" />
     <div :class="['card', snakeCasedStep]">
       <div v-show="isActive" @keyup.enter="nextStep">

ee/app/controllers/subscriptions_controller.rb

@@ -2,9 +2,9 @@
 
 class SubscriptionsController < ApplicationController
   layout 'checkout'
-  skip_before_action :authenticate_user!, only: [:new, :buy_minutes]
+  skip_before_action :authenticate_user!, only: [:new]
 
-  before_action :load_eligible_groups, only: %i[new buy_minutes]
+  before_action :load_eligible_groups, only: :new
 
   feature_category :purchase
 
@@ -30,8 +30,11 @@ class SubscriptionsController < ApplicationController
   end
 
   def buy_minutes
-    render_404 unless Feature.enabled?(:new_route_ci_minutes_purchase, default_enabled: :yaml)
-    redirect_unauthenticated_user
+    return render_404 unless Feature.enabled?(:new_route_ci_minutes_purchase, default_enabled: :yaml)
+
+    @group = find_group
+
+    return render_404 if @group.nil?
   end
 
   def payment_form

ee/app/helpers/subscriptions_helper.rb

@@ -16,6 +16,14 @@ module SubscriptionsHelper
     }
   end
 
+  def addon_data(group)
+    {
+      group_data: [present_group(group)].to_json,
+      namespace_id: params[:selected_group],
+      source: params[:source]
+    }
+  end
+
   def plan_title
     strong_memoize(:plan_title) do
       plan = subscription_available_plans.find { |plan| plan[:id] == params[:plan_id] }
@@ -45,13 +53,15 @@ module SubscriptionsHelper
   end
 
   def present_groups(groups)
-    groups.map do |namespace|
-      {
-        id: namespace.id,
-        name: namespace.name,
-        users: namespace.member_count,
-        guests: namespace.guest_count
-      }
-    end
+    groups.map { |namespace| present_group(namespace) }
+  end
+
+  def present_group(namespace)
+    {
+      id: namespace.id,
+      name: namespace.name,
+      users: namespace.member_count,
+      guests: namespace.guest_count
+    }
   end
 end

ee/app/views/subscriptions/buy_minutes.html.haml

 - page_title _('Buy CI Minutes')
 
-#js-buy-minutes{ data: subscription_data(@eligible_groups) }
+#js-buy-minutes{ data: addon_data(@group) }

ee/spec/controllers/subscriptions_controller_spec.rb

@@ -65,19 +65,18 @@ RSpec.describe SubscriptionsController do
   end
 
   describe 'GET #buy_minutes' do
-    subject(:buy_minutes) { get :buy_minutes, params: { plan_id: 'bronze_id' } }
+    let_it_be(:group) { create(:group) }
 
-    it_behaves_like 'unauthenticated subscription request', 'buy_minutes'
+    subject(:buy_minutes) { get :buy_minutes, params: { selected_group: group.id } }
 
     context 'with authenticated user' do
       before do
+        group.add_owner(user)
+        stub_feature_flags(new_route_ci_minutes_purchase: true)
         sign_in(user)
       end
 
-      it { is_expected.to render_template 'layouts/checkout' }
-      it { is_expected.to render_template :buy_minutes }
-
-      context 'when there are groups eligible for the subscription' do
+      context 'when there are groups eligible for the addon' do
         let_it_be(:group) { create(:group) }
 
         before do
@@ -88,30 +87,21 @@ RSpec.describe SubscriptionsController do
           end
         end
 
-        it 'assigns the eligible groups for the subscription' do
-          buy_minutes
-
-          expect(assigns(:eligible_groups)).to eq [group]
-        end
-      end
-
-      context 'when there are no eligible groups for the subscription' do
-        it 'assigns eligible groups as an empty array' do
-          allow_next_instance_of(GitlabSubscriptions::FilterPurchaseEligibleNamespacesService, user: user, namespaces: []) do |instance|
-            allow(instance).to receive(:execute).and_return(instance_double(ServiceResponse, success?: true, payload: []))
-          end
+        it { is_expected.to render_template 'layouts/checkout' }
+        it { is_expected.to render_template :buy_minutes }
 
+        it 'assigns the group for the addon' do
           buy_minutes
 
-          expect(assigns(:eligible_groups)).to eq []
+          expect(assigns(:group)).to eq group
         end
       end
     end
 
     context 'with :new_route_ci_minutes_purchase disabled' do
       before do
-        sign_in(user)
         stub_feature_flags(new_route_ci_minutes_purchase: false)
+        sign_in(user)
       end
 
       it { is_expected.to have_gitlab_http_status(:not_found) }

ee/spec/frontend/subscriptions/buy_minutes/components/checkout/addon_purchase_details_spec.js

@@ -8,10 +8,7 @@ import subscriptionsResolvers from 'ee/subscriptions/buy_minutes/graphql/resolve
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
 import Step from 'ee/vue_shared/purchase_flow/components/step.vue';
 import purchaseFlowResolvers from 'ee/vue_shared/purchase_flow/graphql/resolvers';
-import {
-  stateData as initialStateData,
-  mockCiMinutesPlans,
-} from 'ee_jest/subscriptions/buy_minutes/mock_data';
+import { stateData as initialStateData } from 'ee_jest/subscriptions/buy_minutes/mock_data';
 import createMockApollo from 'helpers/mock_apollo_helper';
 
 const localVue = createLocalVue();
@@ -40,9 +37,6 @@ describe('AddonPurchaseDetails', () => {
     return mount(AddonPurchaseDetails, {
       localVue,
       apolloProvider,
-      propsData: {
-        plans: mockCiMinutesPlans,
-      },
       stubs: {
         Step,
       },

ee/spec/frontend/subscriptions/buy_minutes/components/checkout/order_summary_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
-import { merge } from 'lodash';
-import VueApollo from 'vue-apollo';
-import OrderSummary from 'ee/subscriptions/buy_minutes/components/order_summary.vue';
-import subscriptionsResolvers from 'ee/subscriptions/buy_minutes/graphql/resolvers';
-import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
-import purchaseFlowResolvers from 'ee/vue_shared/purchase_flow/graphql/resolvers';
-import {
-  mockCiMinutesPlans,
-  stateData as mockStateData,
-} from 'ee_jest/subscriptions/buy_minutes/mock_data';
-import createMockApollo from 'helpers/mock_apollo_helper';
-
-const localVue = createLocalVue();
-localVue.use(VueApollo);
-
-describe('Order Summary', () => {
-  const resolvers = { ...purchaseFlowResolvers, ...subscriptionsResolvers };
-  const initialStateData = {
-    selectedPlanId: 'secondPlanId',
-  };
-  let wrapper;
-
-  const createMockApolloProvider = (stateData = {}) => {
-    const mockApollo = createMockApollo([], resolvers);
-
-    const data = merge({}, mockStateData, initialStateData, stateData);
-
-    mockApollo.clients.defaultClient.cache.writeQuery({
-      query: stateQuery,
-      data,
-    });
-
-    return mockApollo;
-  };
-
-  const createComponent = (stateData) => {
-    const apolloProvider = createMockApolloProvider(stateData);
-
-    wrapper = mount(OrderSummary, {
-      localVue,
-      apolloProvider,
-      propsData: {
-        plans: mockCiMinutesPlans,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('Changing the company name', () => {
-    describe('When purchasing for a single user', () => {
-      beforeEach(() => {
-        createComponent({ isSetupForCompany: false });
-      });
-
-      it('should display the title with the passed name', () => {
-        expect(wrapper.find('h4').text()).toContain("Full Name's GitLab subscription");
-      });
-    });
-
-    describe('When purchasing for a company or group', () => {
-      describe('Without a group name provided', () => {
-        beforeEach(() => {
-          createComponent({ isSetupForCompany: true });
-        });
-
-        it('should display the title with the default name', () => {
-          expect(wrapper.find('h4').text()).toContain("Your organization's GitLab subscription");
-        });
-      });
-
-      describe('With a group name provided', () => {
-        beforeEach(() => {
-          createComponent({
-            isSetupForCompany: true,
-            customer: { company: 'My group' },
-          });
-        });
-
-        it('when given a group name, it should display the title with the group name', () => {
-          expect(wrapper.find('h4').text()).toContain("My group's GitLab subscription");
-        });
-      });
-    });
-  });
-
-  describe('Changing the plan', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    describe('the selected plan', () => {
-      it('should display the chosen plan', () => {
-        expect(wrapper.find('.js-selected-plan').text()).toContain('silver plan');
-      });
-
-      it('should display the correct formatted amount price per user', () => {
-        expect(wrapper.find('.js-per-user').text()).toContain('$228 per user per year');
-      });
-    });
-
-    describe('the default plan', () => {
-      beforeEach(() => {
-        createComponent({
-          subscription: { quantity: 1 },
-          selectedPlanId: 'firstPlanId',
-        });
-      });
-
-      it('should display the chosen plan', () => {
-        expect(wrapper.find('.js-selected-plan').text()).toContain('bronze plan');
-      });
-
-      it('should display the correct formatted amount price per user', () => {
-        expect(wrapper.find('.js-per-user').text()).toContain('$48 per user per year');
-      });
-
-      it('should display the correct formatted total amount', () => {
-        expect(wrapper.find('.js-total-amount').text()).toContain('$48');
-      });
-    });
-  });
-
-  describe('Changing the number of users', () => {
-    beforeEach(() => {
-      createComponent({
-        subscription: { quantity: 1 },
-      });
-    });
-
-    describe('the default of 1 selected user', () => {
-      it('should display the correct number of users', () => {
-        expect(wrapper.find('.js-number-of-users').text()).toContain('(x1)');
-      });
-
-      it('should display the correct formatted amount price per user', () => {
-        expect(wrapper.find('.js-per-user').text()).toContain('$228 per user per year');
-      });
-
-      it('should display the correct multiplied formatted amount of the chosen plan', () => {
-        expect(wrapper.find('.js-amount').text()).toContain('$228');
-      });
-
-      it('should display the correct formatted total amount', () => {
-        expect(wrapper.find('.js-total-amount').text()).toContain('$228');
-      });
-    });
-
-    describe('3 selected users', () => {
-      beforeEach(() => {
-        createComponent({
-          subscription: { quantity: 3 },
-        });
-      });
-
-      it('should display the correct number of users', () => {
-        expect(wrapper.find('.js-number-of-users').text()).toContain('(x3)');
-      });
-
-      it('should display the correct formatted amount price per user', () => {
-        expect(wrapper.find('.js-per-user').text()).toContain('$228 per user per year');
-      });
-
-      it('should display the correct multiplied formatted amount of the chosen plan', () => {
-        expect(wrapper.find('.js-amount').text()).toContain('$684');
-      });
-
-      it('should display the correct formatted total amount', () => {
-        expect(wrapper.find('.js-total-amount').text()).toContain('$684');
-      });
-    });
-
-    describe('no selected users', () => {
-      beforeEach(() => {
-        createComponent({
-          subscription: { quantity: 0 },
-        });
-      });
-
-      it('should not display the number of users', () => {
-        expect(wrapper.find('.js-number-of-users').exists()).toBe(false);
-      });
-
-      it('should display the correct formatted amount price per user', () => {
-        expect(wrapper.find('.js-per-user').text()).toContain('$228 per user per year');
-      });
-
-      it('should not display the amount', () => {
-        expect(wrapper.find('.js-amount').text()).toContain('-');
-      });
-
-      it('should display the correct formatted total amount', () => {
-        expect(wrapper.find('.js-total-amount').text()).toContain('-');
-      });
-    });
-
-    describe('date range', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      it('shows the formatted date range from the start date to one year in the future', () => {
-        expect(wrapper.find('.js-dates').text()).toContain('Jul 6, 2020 - Jul 6, 2021');
-      });
-    });
-
-    describe('tax rate', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      describe('a tax rate of 0', () => {
-        it('should not display the total amount excluding vat', () => {
-          expect(wrapper.find('.js-total-ex-vat').exists()).toBe(false);
-        });
-
-        it('should not display the vat amount', () => {
-          expect(wrapper.find('.js-vat').exists()).toBe(false);
-        });
-      });
-    });
-  });
-});

ee/spec/frontend/subscriptions/buy_minutes/components/order_summary/summary_details_spec.js

+import { shallowMount } from '@vue/test-utils';
+import SummaryDetails from 'ee/subscriptions/buy_minutes/components/order_summary/summary_details.vue';
+
+describe('SummaryDetails', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    return shallowMount(SummaryDetails, {
+      propsData: {
+        vat: 8,
+        totalExVat: 10,
+        selectedPlanText: 'Test',
+        selectedPlanPrice: 10,
+        totalAmount: 10,
+        quantity: 1,
+        ...props,
+      },
+    });
+  };
+
+  const findQuantity = () => wrapper.find('[data-testid="quantity"]');
+  const findSubscriptionPeriod = () => wrapper.find('[data-testid="subscription-period"]');
+  const findTotalExVat = () => wrapper.find('[data-testid="total-ex-vat"]');
+  const findVat = () => wrapper.find('[data-testid="vat"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('renders the plan name', () => {
+      expect(wrapper.find('[data-testid="selected-plan"]').text()).toMatchInterpolatedText(
+        'Test plan (x1)',
+      );
+    });
+
+    it('renders the price per unit', () => {
+      expect(wrapper.find('[data-testid="price-per-unit"]').text()).toBe('$10 per pack per year');
+    });
+  });
+
+  describe('when quantity is greater then zero', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('renders quantity', () => {
+      expect(findQuantity().isVisible()).toBe(true);
+      expect(findQuantity().text()).toBe('(x1)');
+    });
+  });
+
+  describe('when quantity is less or equal to zero', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ quantity: 0 });
+    });
+
+    it('does not render quantity', () => {
+      expect(wrapper.find('[data-testid="quantity"]').exists()).toBe(false);
+    });
+  });
+
+  describe('when subscription has expiration', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ purchaseHasExpiration: true });
+    });
+
+    it('renders subscription period', () => {
+      expect(findSubscriptionPeriod().isVisible()).toBe(true);
+      expect(findSubscriptionPeriod().text()).toBe('Jul 6, 2020 - Jul 6, 2021');
+    });
+  });
+
+  describe('when subscription does not have expiration', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ purchaseHasExpiration: false });
+    });
+
+    it('does not render subscription period', () => {
+      expect(findSubscriptionPeriod().exists()).toBe(false);
+    });
+  });
+
+  describe('when tax rate is applied', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ taxRate: 8 });
+    });
+
+    it('renders tax fields', () => {
+      expect(findTotalExVat().isVisible()).toBe(true);
+      expect(findTotalExVat().text()).toBe('$10');
+
+      expect(findVat().isVisible()).toBe(true);
+      expect(findVat().text()).toBe('$8');
+    });
+  });
+
+  describe('when tax rate is not applied', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+    });
+
+    it('does not render tax fields', () => {
+      expect(findTotalExVat().exists()).toBe(false);
+      expect(findVat().exists()).toBe(false);
+    });
+  });
+});

ee/spec/frontend/subscriptions/buy_minutes/components/order_summary_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { merge } from 'lodash';
+import VueApollo from 'vue-apollo';
+import OrderSummary from 'ee/subscriptions/buy_minutes/components/order_summary.vue';
+import subscriptionsResolvers from 'ee/subscriptions/buy_minutes/graphql/resolvers';
+import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
+import purchaseFlowResolvers from 'ee/vue_shared/purchase_flow/graphql/resolvers';
+import {
+  mockCiMinutesPlans,
+  mockParsedNamespaces,
+  stateData as mockStateData,
+} from 'ee_jest/subscriptions/buy_minutes/mock_data';
+import createMockApollo from 'helpers/mock_apollo_helper';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('Order Summary', () => {
+  const resolvers = { ...purchaseFlowResolvers, ...subscriptionsResolvers };
+  const initialStateData = {
+    selectedPlanId: 'ciMinutesPackPlanId',
+    namespaces: [mockParsedNamespaces[0]],
+    subscription: {
+      namespaceId: mockParsedNamespaces[0].id,
+    },
+  };
+  let wrapper;
+
+  const createMockApolloProvider = (stateData = {}) => {
+    const mockApollo = createMockApollo([], resolvers);
+
+    const data = merge({}, mockStateData, initialStateData, stateData);
+
+    mockApollo.clients.defaultClient.cache.writeQuery({
+      query: stateQuery,
+      data,
+    });
+
+    return mockApollo;
+  };
+
+  const createComponent = (stateData) => {
+    const apolloProvider = createMockApolloProvider(stateData);
+
+    wrapper = shallowMount(OrderSummary, {
+      localVue,
+      apolloProvider,
+      propsData: {
+        plan: mockCiMinutesPlans[0],
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('the default plan', () => {
+    beforeEach(() => {
+      createComponent({
+        subscription: { quantity: 1 },
+        selectedPlanId: 'ciMinutesPackPlanId',
+      });
+    });
+
+    it('displays the title', () => {
+      expect(wrapper.find('[data-testid="title"]').text()).toMatchInterpolatedText(
+        "Gitlab Org's CI minutes",
+      );
+    });
+  });
+
+  describe('when quantity is greater than zero', () => {
+    beforeEach(() => {
+      createComponent({
+        subscription: { quantity: 3 },
+      });
+    });
+
+    it('renders amount', () => {
+      expect(wrapper.find('[data-testid="amount"]').text()).toBe('$30');
+    });
+  });
+
+  describe('when quantity is less than or equal to zero', () => {
+    beforeEach(() => {
+      createComponent({
+        subscription: { quantity: 0 },
+      });
+    });
+
+    it('does not render amount', () => {
+      expect(wrapper.find('[data-testid="amount"]').text()).toBe('-');
+    });
+  });
+});

ee/spec/frontend/subscriptions/buy_minutes/mock_data.js

 import { STEPS } from 'ee/subscriptions/constants';
 
 export const mockCiMinutesPlans = [
-  { id: 'firstPlanId', code: 'bronze', pricePerYear: 48, name: 'bronze', __typename: 'Plan' },
-  { id: 'secondPlanId', code: 'silver', pricePerYear: 228, name: 'silver', __typename: 'Plan' },
+  {
+    id: 'ciMinutesPackPlanId',
+    code: 'ci_minutes',
+    pricePerYear: 10,
+    name: '1000 CI minutes pack',
+    __typename: 'Plan',
+  },
 ];
 export const mockNamespaces =
   '[{"id":132,"name":"Gitlab Org","users":3},{"id":483,"name":"Gnuwget","users":12}]';

ee/spec/frontend/subscriptions/buy_minutes/utils_spec.js

 import apolloProvider from 'ee/subscriptions/buy_minutes/graphql';
 import { writeInitialDataToApolloCache } from 'ee/subscriptions/buy_minutes/utils';
 import stateQuery from 'ee/subscriptions/graphql/queries/state.query.graphql';
-import {
-  mockNamespaces,
-  mockParsedNamespaces,
-  mockNewUser,
-  mockFullName,
-  mockSetupForCompany,
-} from './mock_data';
+import { mockNamespaces, mockParsedNamespaces } from './mock_data';
 
 const DEFAULT_DATA = {
   groupData: mockNamespaces,
-  newUser: mockNewUser,
-  fullName: mockFullName,
-  setupForCompany: mockSetupForCompany,
+  namespaceId: mockParsedNamespaces[0].id,
+  newUser: false,
+  fullName: null,
+  setupForCompany: false,
 };
 
 describe('utils', () => {
@@ -48,72 +43,5 @@ describe('utils', () => {
         });
       });
     });
-
-    describe('newUser', () => {
-      describe.each`
-        newUser        | parsedNewUser | throws
-        ${'true'}      | ${true}       | ${false}
-        ${mockNewUser} | ${false}      | ${false}
-        ${''}          | ${false}      | ${true}
-      `('parameter decoding', ({ newUser, parsedNewUser, throws }) => {
-        it(`decodes ${newUser} to ${parsedNewUser}`, async () => {
-          if (throws) {
-            expect(() => {
-              writeInitialDataToApolloCache(apolloProvider, { newUser });
-            }).toThrow();
-          } else {
-            writeInitialDataToApolloCache(apolloProvider, { ...DEFAULT_DATA, newUser });
-            const sourceData = await apolloProvider.clients.defaultClient.query({
-              query: stateQuery,
-            });
-            expect(sourceData.data.isNewUser).toEqual(parsedNewUser);
-          }
-        });
-      });
-    });
-
-    describe('fullName', () => {
-      describe.each`
-        fullName        | parsedFullName
-        ${mockFullName} | ${mockFullName}
-        ${''}           | ${''}
-        ${null}         | ${null}
-      `('parameter decoding', ({ fullName, parsedFullName }) => {
-        it(`decodes ${fullName} to ${parsedFullName}`, async () => {
-          writeInitialDataToApolloCache(apolloProvider, { ...DEFAULT_DATA, fullName });
-          const sourceData = await apolloProvider.clients.defaultClient.query({
-            query: stateQuery,
-          });
-          expect(sourceData.data.fullName).toEqual(parsedFullName);
-        });
-      });
-    });
-
-    describe('setupForCompany', () => {
-      describe.each`
-        setupForCompany        | parsedSetupForCompany | throws
-        ${mockSetupForCompany} | ${true}               | ${false}
-        ${'false'}             | ${false}              | ${false}
-        ${''}                  | ${false}              | ${true}
-      `('parameter decoding', ({ setupForCompany, parsedSetupForCompany, throws }) => {
-        it(`decodes ${setupForCompany} to ${parsedSetupForCompany}`, async () => {
-          if (throws) {
-            expect(() => {
-              writeInitialDataToApolloCache(apolloProvider, { setupForCompany });
-            }).toThrow();
-          } else {
-            writeInitialDataToApolloCache(apolloProvider, {
-              ...DEFAULT_DATA,
-              newUser: 'true',
-              setupForCompany,
-            });
-            const sourceData = await apolloProvider.clients.defaultClient.query({
-              query: stateQuery,
-            });
-            expect(sourceData.data.isSetupForCompany).toEqual(parsedSetupForCompany);
-          }
-        });
-      });
-    });
   });
 });

ee/spec/helpers/subscriptions_helper_spec.rb

@@ -132,4 +132,21 @@ RSpec.describe SubscriptionsHelper do
       it { is_expected.to eq(nil) }
     end
   end
+
+  describe '#addon_data' do
+    subject(:addon_data) { helper.addon_data(group) }
+
+    let_it_be(:user) { create(:user, name: 'First Last') }
+    let_it_be(:group) { create(:group, name: 'My Namespace') }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+      allow(helper).to receive(:params).and_return({ selected_group: group.id.to_s, source: 'some_source' })
+      group.add_owner(user)
+    end
+
+    it { is_expected.to include(namespace_id: group.id.to_s) }
+    it { is_expected.to include(source: 'some_source') }
+    it { is_expected.to include(group_data: %Q{[{"id":#{group.id},"name":"My Namespace","users":1,"guests":0}]}) }
+  end
 end

ee/spec/support/shared_examples/views/subscription_shared_examples.rb

 # frozen_string_literal: true
+
 RSpec.shared_examples_for 'subscription form data' do |js_selector|
   before do
     allow(view).to receive(:subscription_data).and_return(
@@ -18,3 +19,21 @@ RSpec.shared_examples_for 'subscription form data' do |js_selector|
   it { is_expected.to have_selector("#{js_selector}[data-plan-id='bronze_id']") }
   it { is_expected.to have_selector("#{js_selector}[data-source='some_source']") }
 end
+
+RSpec.shared_examples_for 'addon form data' do |js_selector|
+  before do
+    allow(view).to receive(:addon_data).and_return(
+      plan_data: '[{"id":"ci_minutes_plan_id","code":"ci_minutes","price_per_year":10.0}]',
+      namespace_id: '1',
+      plan_id: 'ci_minutes_plan_id',
+      source: 'some_source'
+    )
+  end
+
+  subject { render }
+
+  it { is_expected.to have_selector("#{js_selector}[data-plan-data='[{\"id\":\"ci_minutes_plan_id\",\"code\":\"ci_minutes\",\"price_per_year\":10.0}]']") }
+  it { is_expected.to have_selector("#{js_selector}[data-plan-id='ci_minutes_plan_id']") }
+  it { is_expected.to have_selector("#{js_selector}[data-namespace-id='1']") }
+  it { is_expected.to have_selector("#{js_selector}[data-source='some_source']") }
+end

ee/spec/views/subscriptions/buy_minutes.html.haml_spec.rb

@@ -3,5 +3,5 @@
 require 'spec_helper'
 
 RSpec.describe 'subscriptions/buy_minutes' do
-  it_behaves_like 'subscription form data', '#js-buy-minutes'
+  it_behaves_like 'addon form data', '#js-buy-minutes'
 end

locale/gitlab.pot

@@ -6418,12 +6418,18 @@ msgstr ""
 msgid "Checkout"
 msgstr ""
 
+msgid "Checkout|$%{selectedPlanPrice} per pack per year"
+msgstr ""
+
 msgid "Checkout|$%{selectedPlanPrice} per user per year"
 msgstr ""
 
 msgid "Checkout|%{cardType} ending in %{lastFourDigits}"
 msgstr ""
 
+msgid "Checkout|%{name}'s CI minutes"
+msgstr ""
+
 msgid "Checkout|%{name}'s GitLab subscription"
 msgstr ""
 
@@ -6442,6 +6448,9 @@ msgstr ""
 msgid "Checkout|(x%{numberOfUsers})"
 msgstr ""
 
+msgid "Checkout|(x%{quantity})"
+msgstr ""
+
 msgid "Checkout|Billing address"
 msgstr ""