Fix the summary section

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,16 @@ export default {
     return {
       subscription: {},
       namespaces: [],
-      isSetupForCompany: false,
       isBottomSummaryVisible: false,
-      fullName: null,
-      customer: {},
-      selectedPlanId: null,
     };
   },
+  mounted() {},
   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 === +this.subscription.namespaceId);
     },
     totalExVat() {
       return this.subscription.quantity * this.selectedPlanPrice;
@@ -66,46 +56,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,
 };
@@ -123,18 +88,18 @@ export default {
             <gl-icon v-else name="chevron-right" />
             <div>{{ titleWithName }}</div>
           </div>
-          <div class="gl-ml-3">{{ formatAmount(totalAmount, usersPresent) }}</div>
+          <div class="gl-ml-3">{{ formatAmount(totalAmount, quantityPresent) }}</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 +113,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'),
@@ -65,20 +65,20 @@ export default {
     <div class="d-flex justify-content-between bold gl-mt-3 gl-mb-3">
       <div class="js-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 > 0" class="js-quantity">{{
+          sprintf($options.i18n.quantity, { quantity })
         }}</span>
       </div>
-      <div class="js-amount">{{ formatAmount(totalExVat, usersPresent) }}</div>
+      <div class="js-amount">{{ formatAmount(totalExVat, quantity > 0) }}</div>
     </div>
-    <div class="text-secondary js-per-user">
+    <div class="text-secondary js-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 js-dates">
       {{
         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 class="js-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 class="js-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 class="js-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, planId = null } = 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,
-      namespaces,
-      fullName,
+      isNewUser: false,
+      fullName: null,
+      isSetupForCompany: false,
       selectedPlanId: planId,
+      namespaces,
       subscription: {
         quantity: 1,
-        namespaceId: null,
+        namespaceId,
         // eslint-disable-next-line @gitlab/require-i18n-strings
         __typename: 'Subscription',
       },