Switch buy minutes order summary to GlCollapse component

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

 <script>
-import { GlIcon } from '@gitlab/ui';
-import STATE_QUERY from 'ee/subscriptions/graphql/queries/state.query.graphql';
+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 formattingMixins from 'ee/subscriptions/new/formatting_mixins';
 import { sprintf, s__ } from '~/locale';
@@ -10,6 +10,10 @@ export default {
   components: {
     SummaryDetails,
     GlIcon,
+    GlCollapse,
+  },
+  directives: {
+    GlCollapseToggle: GlCollapseToggleDirective,
   },
   mixins: [formattingMixins],
   props: {
@@ -20,7 +24,7 @@ export default {
   },
   apollo: {
     state: {
-      query: STATE_QUERY,
+      query: stateQuery,
       manual: true,
       result({ data }) {
         this.subscription = data.subscription;
@@ -37,7 +41,7 @@ export default {
       subscription: {},
       namespaces: [],
       isSetupForCompany: false,
-      collapsed: true,
+      isBottomSummaryVisible: false,
       fullName: null,
       customer: {},
       selectedPlanId: null,
@@ -100,11 +104,6 @@ export default {
       );
     },
   },
-  methods: {
-    toggleCollapse() {
-      this.collapsed = !this.collapsed;
-    },
-  },
   i18n: {
     title: s__("Checkout|%{name}'s GitLab subscription"),
   },
@@ -117,27 +116,28 @@ export default {
     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">
-      <div @click="toggleCollapse">
-        <h4 class="d-flex justify-content-between gl-font-lg" :class="{ 'gl-mb-7': !collapsed }">
+      <div v-gl-collapse-toggle.summary-details>
+        <h4 class="d-flex justify-content-between gl-font-lg">
           <div class="d-flex">
-            <gl-icon v-if="collapsed" name="chevron-right" :size="18" use-deprecated-sizes />
-            <gl-icon v-else name="chevron-down" :size="18" use-deprecated-sizes />
+            <gl-icon v-if="isBottomSummaryVisible" name="chevron-down" />
+            <gl-icon v-else name="chevron-right" />
             <div>{{ titleWithName }}</div>
           </div>
           <div class="gl-ml-3">{{ formatAmount(totalAmount, usersPresent) }}</div>
         </h4>
       </div>
-      <summary-details
-        v-show="!collapsed"
-        :vat="vat"
-        :total-ex-vat="totalExVat"
-        :users-present="usersPresent"
-        :selected-plan-text="selectedPlan.name"
-        :selected-plan-price="selectedPlanPrice"
-        :total-amount="totalAmount"
-        :number-of-users="subscription.quantity"
-        :tax-rate="$options.taxRate"
-      />
+      <gl-collapse id="summary-details" v-model="isBottomSummaryVisible">
+        <summary-details
+          :vat="vat"
+          :total-ex-vat="totalExVat"
+          :users-present="usersPresent"
+          :selected-plan-text="selectedPlan.name"
+          :selected-plan-price="selectedPlanPrice"
+          :total-amount="totalAmount"
+          :number-of-users="subscription.quantity"
+          :tax-rate="$options.taxRate"
+        />
+      </gl-collapse>
     </div>
     <div class="d-none d-lg-block">
       <div class="append-bottom-20">

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

@@ -39,12 +39,14 @@ export default {
       default: null,
     },
   },
+  data() {
+    return {
+      startDate: new Date(),
+    };
+  },
   computed: {
-    startDate() {
-      return new Date(Date.now());
-    },
     endDate() {
-      return new Date(this.startDate).setFullYear(this.startDate.getFullYear() + 1);
+      return this.startDate.setFullYear(this.startDate.getFullYear() + 1);
     },
   },
   i18n: {