Show expiration date for non-prorated purchases

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

@@ -154,6 +154,7 @@ export default {
           :quantity="quantity"
           :tax-rate="$options.taxRate"
           :subscription-end-date="endDate"
+          :has-expiration="purchaseHasExpiration"
         >
           <template #price-per-unit="{ price }">
             <slot name="price-per-unit" :price="price"></slot>
@@ -178,6 +179,7 @@ export default {
         :quantity="quantity"
         :tax-rate="$options.taxRate"
         :subscription-end-date="endDate"
+        :has-expiration="purchaseHasExpiration"
       >
         <template #price-per-unit="{ price }">
           <slot name="price-per-unit" :price="price"></slot>

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

@@ -52,6 +52,11 @@ export default {
       required: false,
       default: '',
     },
+    hasExpiration: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -61,7 +66,8 @@ export default {
   computed: {
     endDate() {
       return (
-        this.subscriptionEndDate || this.startDate.setFullYear(this.startDate.getFullYear() + 1)
+        this.subscriptionEndDate ||
+        new Date(this.startDate).setFullYear(this.startDate.getFullYear() + 1)
       );
     },
     hasPositiveQuantity() {
@@ -107,7 +113,7 @@ export default {
       <div class="gl-text-gray-500" data-testid="price-per-unit">
         <slot name="price-per-unit" :price="formattedPrice"></slot>
       </div>
-      <div v-if="subscriptionEndDate" class="gl-text-gray-500" data-testid="subscription-period">
+      <div v-if="hasExpiration" class="gl-text-gray-500" data-testid="subscription-period">
         {{
           sprintf($options.i18n.dates, {
             startDate: formatDate(startDate),

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

@@ -83,7 +83,18 @@ describe('SummaryDetails', () => {
 
   describe('when subscription has expiration', () => {
     beforeEach(() => {
-      wrapper = createComponent({ subscriptionEndDate: '2021-02-06' });
+      wrapper = createComponent({ hasExpiration: true });
+    });
+
+    it('renders subscription period', () => {
+      expect(findSubscriptionPeriod().isVisible()).toBe(true);
+      expect(findSubscriptionPeriod().text()).toBe('Jul 6, 2020 - Jul 6, 2021');
+    });
+  });
+
+  describe('when subscription has expiration and the end date provided', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ subscriptionEndDate: '2021-02-06', hasExpiration: true });
     });
 
     it('renders subscription period', () => {