TBT-41 Disallow downgrade plan WEB

app/components/billing/select-plan.js

@@ -18,8 +18,120 @@ export default Component.extend({
   isLoading: or('save.isRunning', 'accounts.fetchSubscriptions.isRunning', 'accounts.fetchV2Subscriptions.isRunning'),
   showAnnual: false,
   showCalculator: false,
+  annualPlans: [],
 
-  displayedPlans: reads('availablePlans'),
+  isCancellationMoreThanOneMonthOld: computed('subscription.{isCanceled,canceledAt}', function () {
+    if (!this.subscription || !this.subscription.isCanceled) {
+      return false;
+    }
+
+    const canceledAtTime = new Date(this.subscription.canceledAt).getTime();
+    const currentDate = new Date();
+    currentDate.setMonth(currentDate.getMonth() - 1);
+
+    const oneMonthAgoTime = currentDate.getTime();
+
+    return canceledAtTime < oneMonthAgoTime;
+  }),
+
+  isValidityMoreThanOneMonthOld: computed('subscription.validTo', function () {
+    if (!this.subscription || !this.subscription.validTo) {
+      return false;
+    }
+
+    const validToTime = new Date(this.subscription.validTo).getTime();
+    const currentDate = new Date();
+    currentDate.setMonth(currentDate.getMonth() - 1);
+
+    const oneMonthAgoTime = currentDate.getTime();
+
+    return validToTime < oneMonthAgoTime;
+  }),
+
+  displayedPlans: computed('availablePlans.[]', 'subscription.plan.startingPrice', function () {
+    if (!this.subscription || !this.subscription.plan || this.subscription.plan.trialPlan) {
+      return this.availablePlans;
+    }
+
+    if (this.isCancellationMoreThanOneMonthOld || this.isValidityMoreThanOneMonthOld) {
+      return this.availablePlans;
+    }
+
+    let allowedHybridPlans = this.availablePlans.filter(plan => plan.planType.includes('hybrid'));
+    let allowedMeteredPlans = this.availablePlans.filter(plan => plan.planType.includes('metered'));
+
+    let filteredPlans = this.filterPlansByStartingPrice(this.availablePlans, this.subscription.plan.startingPrice);
+
+    if (this.isHybridPlan(this.subscription.plan)) {
+      return this.handleHybridPlans.call(this, filteredPlans, allowedHybridPlans, allowedMeteredPlans);
+    } else if (this.isMeteredPlan(this.subscription.plan)) {
+      return this.handleMeteredPlans.call(this, allowedHybridPlans, allowedMeteredPlans);
+    } else {
+      // set the annualPlans property for old subscriptions
+      if (this.availablePlans.every(plan => plan.isAnnual)) {
+        this.set('annualPlans', this.availablePlans);
+      }
+      return this.availablePlans;
+    }
+  }),
+
+  filterPlansByStartingPrice(plans, startingPrice) {
+    return plans.filter(plan => plan.startingPrice > startingPrice);
+  },
+
+  isHybridPlan(plan) {
+    return plan.planType && plan.planType.includes('hybrid');
+  },
+
+  isMeteredPlan(plan) {
+    return plan.planType && plan.planType.includes('metered');
+  },
+
+  handleHybridPlans(filteredPlans, allowedHybridPlans, allowedMeteredPlans) {
+    let filteredHybridPlans = this.filterPlansByStartingPrice(allowedHybridPlans, this.subscription.plan.startingPrice);
+    filteredPlans = filteredHybridPlans.filter(plan => !allowedMeteredPlans.includes(plan));
+
+    if (filteredPlans.every(plan => plan.planType === 'hybrid annual')) {
+      this.set('annualPlans', filteredPlans);
+    }
+
+    const referencePlan = this.findReferencePlan('hybrid annual');
+    if (!referencePlan) {
+      return this.availablePlans;
+    }
+
+    const higherTierPlans = this.filterHigherTierPlans(referencePlan);
+    filteredPlans = filteredPlans.filter(plan => !higherTierPlans.includes(plan));
+
+    return filteredPlans;
+  },
+
+  handleMeteredPlans(allowedHybridPlans, allowedMeteredPlans) {
+    let filteredMeteredPlans = this.filterPlansByStartingPrice(allowedMeteredPlans, this.subscription.plan.startingPrice);
+    let filteredHybridPlans = this.filterPlansByStartingPrice(allowedHybridPlans, this.subscription.plan.startingPrice);
+
+    let filteredPlans = [...filteredMeteredPlans, ...filteredHybridPlans];
+
+    if (filteredPlans.every(plan => plan.isAnnual)) {
+      this.set('annualPlans', filteredPlans);
+    }
+
+    return filteredPlans;
+  },
+
+  findReferencePlan(planType) {
+    return this.availablePlans.find(plan =>
+      plan.name === this.subscription.plan.name && plan.planType === planType
+    );
+  },
+
+  filterHigherTierPlans(referencePlan) {
+    return this.availablePlans.filter(plan =>
+      plan.startingPrice > this.subscription.plan.startingPrice &&
+      plan.planType === referencePlan.planType &&
+      plan.startingPrice < referencePlan.startingPrice
+    );
+  },
 
   selectedPlan: computed('displayedPlans.[].name', 'defaultPlanName', {
     get() {
@@ -32,7 +144,7 @@ export default Component.extend({
     set(key, value) {
       this.set('_selectedPlan', value);
       return this._selectedPlan;
-    }
+    },
   }),
 
   allowReactivation: computed(function () {
@@ -92,6 +204,29 @@ export default Component.extend({
 
     hideCalculator() {
       this.set('showCalculator', false);
+    },
+  },
+
+  // Determine if the user has either an annual plan or all to be displayed plans are annual so we can show the annual card immediately in the UI
+  didInsertElement() {
+    this._super(...arguments);
+
+    this.set('areAllAnnualPlans', Array.isArray(this.annualPlans) && this.annualPlans.length > 0);
+
+    if (this.annualPlans.length === 0) {
+      this.set('emptyAnnualPlans', true);
     }
-  }
+
+    if (this.subscription && this.subscription.plan) {
+      if (!this.subscription.isCanceled && !this.isValidityMoreThanOneMonthOld) {
+        if (this.subscription.plan.isAnnual || this.areAllAnnualPlans) {
+          this.set('showAnnual', true);
+        }
+      } else if (this.subscription.isCanceled && !this.isCancellationMoreThanOneMonthOld) {
+        if (this.subscription.plan.isAnnual || this.areAllAnnualPlans) {
+          this.set('showAnnual', true);
+        }
+      }
+    }
+  },
 });

app/styles/app/layouts/billing-plans.scss

@@ -375,6 +375,9 @@
       width: 530px;
       margin-left: auto;
       margin-right: auto;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
 
       a {
         cursor: pointer;

app/templates/components/billing/select-plan.hbs

@@ -6,18 +6,25 @@
       <h3 data-test-billing-info-title>
         Select Plan
       </h3>
+      <h2>
+        Questions about plans? <a class='credits-calculator-button' href="mailto:[email protected]">Contact our Customer Success Team</a>
+      </h2>
       <nav class="travistab-nav">
         <ul>
-          <li>
-            <a class={{if (not this.showAnnual) 'active'}} onclick={{action 'showMonthlyPlans'}}>
-              Monthly Plans
-            </a>
-          </li>
-          <li>
-            <a class={{if this.showAnnual 'active'}} onclick={{action 'showAnnualPlans'}}>
-              Annual Plans
-            </a>
-          </li>
+          {{#unless (or (and this.subscription.plan.isAnnual (or (not this.isCancellationMoreThanOneMonthOld this.isValidityMoreThanOneMonthOld))) this.areAllAnnualPlans)}}
+            <li>
+              <a class={{if (not this.showAnnual) 'active'}} onclick={{action 'showMonthlyPlans'}}>
+                Monthly Plans
+              </a>
+            </li>
+          {{/unless}}
+          {{#unless (and (and this.subscription.plan.isAnnual (or (not this.isCancellationMoreThanOneMonthOld this.isValidityMoreThanOneMonthOld))) this.emptyAnnualPlans)}}
+            <li>
+              <a class={{if this.showAnnual 'active'}} onclick={{action 'showAnnualPlans'}}>
+                Annual Plans
+              </a>
+            </li>
+          {{/unless}}
         </ul>
       </nav>
       <div class='plan-selector'>

tests/integration/components/billing/select-plan-test.js

@@ -1,4 +1,4 @@
-import { module, skip } from 'qunit';
+import { module, skip, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
@@ -27,6 +27,7 @@ module('Integration | Component | billing-select-plan', function (hooks) {
       hasCreditAddons: true,
       hasOSSCreditAddons: true,
       hasUserLicenseAddons: true,
+      planType: 'hybrid annual',
     };
     this.plan1 = plan1;
 
@@ -43,6 +44,7 @@ module('Integration | Component | billing-select-plan', function (hooks) {
       hasCreditAddons: true,
       hasOSSCreditAddons: true,
       hasUserLicenseAddons: true,
+      planType: 'hybrid annual',
     };
     this.plan2 = plan2;
 
@@ -77,4 +79,22 @@ module('Integration | Component | billing-select-plan', function (hooks) {
     assert.dom(profilePage.billing.selectedPlan.name.scope).hasText(`${this.plan2.name}`);
     assert.dom(profilePage.billing.selectedPlan.price.scope).hasText(`$${this.plan2.startingPrice / 100}/${this.plan2.isAnnual ? 'annualy' : 'monthly'}`);
   });
+
+  test('displayedPlans should filter availablePlans based on subscription.plan.startingPrice', function (assert) {
+    let component = this.owner.lookup('component:billing/select-plan');
+    let subscription = { plan: { name: 'Standard Tier Plan', startingPrice: 3000, trialPlan: false } };
+
+    component.set('availablePlans', [this.plan1, this.plan2]);
+    component.set('subscription', subscription);
+    const referencePlan = component.get('availablePlans')
+      .find(plan => plan.name === component.get('subscription').plan.name && plan.planType === 'hybrid annual');
+
+    component.set('referencePlan', referencePlan);
+
+    let displayedPlans = component.get('displayedPlans');
+
+    assert.ok(displayedPlans, 'displayedPlans should be defined');
+    assert.equal(displayedPlans.length, 2, 'displayedPlans should contain 2 plans');
+    assert.deepEqual(displayedPlans, [this.plan1, this.plan2], 'displayedPlans should contain the correct plans');
+  });
 });