Add new ui tests for annual and monthly billing options

packages/files-ui/cypress/support/page-objects/modals/billing/planDetailsModal.ts

@@ -6,6 +6,7 @@ export const planDetailsModal = {
   storageDetailsLabel: () => cy.get("[data-cy=label-storage-details]"),
   billingLabel: () => cy.get("[data-cy=label-billing]"),
   billingStartDate: () => cy.get("[data-cy=label-billing-start-date]"),
+  annualBillingLabel: () => cy.get("[data-cy=label-annual-billing]"),
   durationToggleSwitch: () => cy.get("[data-testid=toggle-switch-duration]"),
   totalCostLabel: () => cy.get("[data-cy=label-total-cost]"),
   selectThisPlanButton: () => cy.get("[data-testid=button-select-this-plan]"),

packages/files-ui/cypress/tests/subscription-plan-spec.ts

@@ -205,6 +205,8 @@ describe("Subscription Plan", () => {
       planDetailsModal.storageDetailsLabel().should("be.visible")
       planDetailsModal.billingLabel().should("be.visible")
       planDetailsModal.billingStartDate().should("be.visible")
+      planDetailsModal.annualBillingLabel().should("be.visible")
+      planDetailsModal.durationToggleSwitch().should("be.visible")
       planDetailsModal.totalCostLabel().should("be.visible")
       planDetailsModal.selectThisPlanButton().should("be.visible")
       planDetailsModal.goBackButton().should("be.visible")
@@ -214,6 +216,67 @@ describe("Subscription Plan", () => {
       selectPlanModal.body().should("be.visible")
     })
 
+    it("can toggle between monthly and annual billing price", () => {
+      cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
+      navigationMenu.settingsNavButton().click()
+      settingsPage.subscriptionTabButton().click()
+      settingsPage.changePlanButton().click()
+
+      selectPlanModal.planBoxContainer().contains("Standard plan")
+        .should("be.visible")
+        .as("standardPlanBox")
+
+      cy.get("@standardPlanBox").parent().within(() => {
+        selectPlanModal.selectPlanButton().click()
+      })
+
+      // retrieve the monthly plan data as cypress alias for later comparison
+      planDetailsModal.totalCostLabel().invoke("text").as("monthlyBillingPrice")
+
+      // toggle to enable annual billing
+      planDetailsModal.durationToggleSwitch().click()
+      planDetailsModal.totalCostLabel().invoke("text").as("yearlyBillingPrice")
+
+      // price should update when switching to annual billing
+      cy.get("@monthlyBillingPrice").then(($monthlyBillingPrice) => {
+        cy.get("@yearlyBillingPrice").should("not.equal", $monthlyBillingPrice)
+      })
+    })
+
+    it("can only choose crypto as a payment option for annual billing", () => {
+      cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
+      navigationMenu.settingsNavButton().click()
+      settingsPage.subscriptionTabButton().click()
+      settingsPage.changePlanButton().click()
+
+      selectPlanModal.planBoxContainer().contains("Standard plan")
+        .should("be.visible")
+        .as("standardPlanBox")
+
+      cy.get("@standardPlanBox").parent().within(() => {
+        selectPlanModal.selectPlanButton().click()
+      })
+
+      // ensure the crypto option cannot be selected for monthly billing
+      planDetailsModal.selectThisPlanButton().click()
+      selectPaymentMethodModal.cryptoRadioInput()
+        .should("be.visible")
+        .click()
+      selectPaymentMethodModal.selectPaymentButton().should("be.disabled")
+      selectPaymentMethodModal.goBackButton().click()
+
+      // toggle to enable annual billing
+      planDetailsModal.durationToggleSwitch().click()
+      planDetailsModal.totalCostLabel().invoke("text").as("yearlyBillingPrice")
+
+      // ensure the crypto option can be selected for annual billing
+      planDetailsModal.selectThisPlanButton().click()
+      selectPaymentMethodModal.cryptoRadioInput()
+        .should("be.visible")
+        .click()
+      selectPaymentMethodModal.selectPaymentButton().should("be.enabled")
+    })
+
     it("can upgrade the plan via credit card payment", () => {
       cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })