Fix OrderSummary cmp

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

@@ -21,15 +21,14 @@ export default {
   apollo: {
     state: {
       query: STATE_QUERY,
-      update(data) {
-        return data;
-      },
+      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;
       },
     },
   },
@@ -41,11 +40,12 @@ export default {
       collapsed: true,
       fullName: null,
       customer: {},
+      selectedPlanId: null,
     };
   },
   computed: {
     selectedPlan() {
-      return this.plans.find((plan) => plan.code === this.subscription.planId);
+      return this.plans.find((plan) => plan.code === this.selectedPlanId);
     },
     selectedPlanPrice() {
       return this.selectedPlan.pricePerYear;
@@ -106,7 +106,7 @@ export default {
 </script>
 <template>
   <div
-    v-if="!$apollo.loading && (!isGroupSelected || isSelectedGroupPresent)"
+    v-if="!$apollo.loading && (!isGroupSelected || isSelectedGroupPresent) && selectedPlan"
     class="order-summary gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mt-2 mt-lg-5"
   >
     <div class="d-lg-none">

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

@@ -17,7 +17,7 @@ localVue.use(VueApollo);
 describe('Order Summary', () => {
   const resolvers = { ...purchaseFlowResolvers, ...subscriptionsResolvers };
   const initialStateData = {
-    subscription: { planId: 'silver' },
+    selectedPlanId: 'silver',
   };
   let wrapper;
 
@@ -105,7 +105,8 @@ describe('Order Summary', () => {
     describe('the default plan', () => {
       beforeEach(() => {
         createComponent({
-          subscription: { planId: 'bronze', quantity: 1 },
+          subscription: { quantity: 1 },
+          selectedPlanId: 'bronze',
         });
       });
 
@@ -126,7 +127,8 @@ describe('Order Summary', () => {
   describe('Changing the number of users', () => {
     beforeEach(() => {
       createComponent({
-        subscription: { planId: 'silver', quantity: 1 },
+        subscription: { quantity: 1 },
+        selectedPlanId: 'silver',
       });
     });
 
@@ -151,7 +153,8 @@ describe('Order Summary', () => {
     describe('3 selected users', () => {
       beforeEach(() => {
         createComponent({
-          subscription: { planId: 'silver', quantity: 3 },
+          subscription: { quantity: 3 },
+          selectedPlanId: 'silver',
         });
       });
 
@@ -175,7 +178,8 @@ describe('Order Summary', () => {
     describe('no selected users', () => {
       beforeEach(() => {
         createComponent({
-          subscription: { planId: 'silver', quantity: 0 },
+          subscription: { quantity: 0 },
+          selectedPlanId: 'silver',
         });
       });