diff --git a/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts b/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts
index 54baba4cff..cc14fbddb3 100644
--- a/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts
+++ b/packages/files-ui/cypress/support/page-objects/billingHistoryPage.ts
@@ -3,6 +3,6 @@ import { basePage } from "./basePage"
export const billingHistoryPage = {
...basePage,
billingHistoryHeader: () => cy.get("[data-cy=header-billing-history]"),
- downloadInvoiceButton: () => cy.get("[data-testid=button-download-invoice]"),
- payInvoiceButton: () => cy.get("[data-testid=button-pay-invoice]")
+ viewPdfButton: () => cy.get("[data-testid=button-download-invoice]"),
+ payNowButton: () => cy.get("[data-testid=button-pay-invoice]")
}
\ No newline at end of file
diff --git a/packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts b/packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts
new file mode 100644
index 0000000000..520846dc58
--- /dev/null
+++ b/packages/files-ui/cypress/support/page-objects/modals/billing/cryptoPaymentModal.ts
@@ -0,0 +1,24 @@
+export const cryptoPaymentModal = {
+ body: () => cy.get("[data-testid=modal-container-cryptoPayment]", { timeout: 10000 }),
+ closeButton: () => cy.get("[data-testid=button-close-modal-cryptoPayment]"),
+ payWithCryptoHeader: () => cy.get("[data-cy=header-pay-with-crypto]"),
+ cryptoPaymentTimer: () => cy.get("[data-cy=container-crypto-time-remaining]"),
+ totalLabel: () => cy.get("[data-cy=label-total-crypto-title]", { timeout: 10000 }),
+ totalPriceLabel: () => cy.get("[data-cy=label-total-crypto-price]"),
+ crypoPaymentErrorLabel: () => cy.get("[data-cy=label-crypto-payment-error]"),
+ selectCryptocurrencyLabel: () => cy.get("[data-cy=label-select-cryptocurrency]"),
+ cryptoPaymentButton: () => cy.get("[data-cy=container-crypto-payment-option]"),
+
+ // elements below only shown after crypto payment button has been clicked
+ receivingQrCodeContainer: () => cy.get("[data-cy=container-qr-code]"),
+ currencyTypeWarning: () => cy.get("[data-cy=label-currency-type-warning]"),
+ destinationAddressLabelTitle: () => cy.get("[data-cy=label-destination-address-title]"),
+ destinationAddressLabel: () => cy.get("[data-cy=label-destination-address]"),
+ cryptoAmountTitleLabel: () => cy.get("[data-cy=label-crypto-amount-title]"),
+ cryptoAmountLabel: () => cy.get("[data-cy=label-crypto-amount]"),
+ crypoFinalSaleWarningLabel: () => cy.get("[data-cy=label-crypto-final-sale-warning]"),
+ goBackButton: () => cy.get("[data-testid=button-go-back-to-crypto-selection]"),
+ switchNetworkButton: () => cy.get("[data-testid=button-switch-network]"),
+ connectWalletButton: () => cy.get("[data-testid=button-connect-wallet]")
+}
+
diff --git a/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts b/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts
index 087b584d5a..8024b834d0 100644
--- a/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts
+++ b/packages/files-ui/cypress/support/page-objects/modals/billing/planChangeConfirmationModal.ts
@@ -13,7 +13,12 @@ export const planChangeConfirmationModal = {
totalLabel: () => cy.get("[data-cy=label-total-title]"),
totalPriceLabel: () => cy.get("[data-cy=label-total-price]"),
changePlanErrorLabel: () => cy.get("[data-cy=label-change-plan-error]"),
- planPaymentWarningLabel: () => cy.get("[data-cy=label-change-plan-payment-warning]"),
goBackButton: () => cy.get("[data-testid=button-go-back-to-payment-method]"),
- confirmPlanChangeButton: () => cy.get("[data-testid=button-confirm-plan-change]")
+ confirmPlanChangeButton: () => cy.get("[data-testid=button-confirm-plan-change]"),
+ finalSaleWarningLabel: () => cy.get("[data-cy=label-final-sale-warning]"),
+
+ // elements are only displayed if the payment type is crypto
+ payWithCryptoLabel: () => cy.get("[data-cy=label-pay-with-crypto]"),
+ acceptedCurrenciesLabel: () => cy.get("[data-cy=label-accepted-currencies]"),
+ acceptedCryptoTypes: () => cy.get("[data-cy=label-accepted-crypto-types]")
}
\ No newline at end of file
diff --git a/packages/files-ui/cypress/support/page-objects/settingsPage.ts b/packages/files-ui/cypress/support/page-objects/settingsPage.ts
index 2cab1390dc..3ef3ef642c 100644
--- a/packages/files-ui/cypress/support/page-objects/settingsPage.ts
+++ b/packages/files-ui/cypress/support/page-objects/settingsPage.ts
@@ -35,6 +35,9 @@ export const settingsPage = {
noCardLabel: () => cy.get("[data-cy=label-no-card]"),
removeCardLink: () => cy.get("[data-cy=link-remove-card]"),
changePlanButton: () => cy.get("[data-cy=button-change-plan]", { timeout: 10000 }),
+ allInvoicesLink: () => cy.get("[data-cy=link-all-invoices]"),
+ viewPdfButton: () => cy.get("[data-testid=button-download-invoice]"),
+ payNowButton: () => cy.get("[data-testid=button-pay-invoice]"),
// use this convenience function when an upgraded account is required as a test requisite
upgradeSubscription(plan: "standard" | "premium") {
diff --git a/packages/files-ui/cypress/tests/subscription-plan-spec.ts b/packages/files-ui/cypress/tests/subscription-plan-spec.ts
index 8bf8ef5aac..4a35dfc872 100644
--- a/packages/files-ui/cypress/tests/subscription-plan-spec.ts
+++ b/packages/files-ui/cypress/tests/subscription-plan-spec.ts
@@ -14,6 +14,7 @@ import { planChangeConfirmationModal } from "../support/page-objects/modals/bill
import { planChangeSuccessModal } from "../support/page-objects/modals/billing/planChangeSuccessModal"
import { billingHistoryPage } from "../support/page-objects/billingHistoryPage"
import { downgradeDetailsModal } from "../support/page-objects/modals/billing/downgradeDetailsModal"
+import { cryptoPaymentModal } from "../support/page-objects/modals/billing/cryptoPaymentModal"
describe("Subscription Plan", () => {
@@ -326,7 +327,7 @@ describe("Subscription Plan", () => {
planChangeConfirmationModal.billingStartDate().should("be.visible")
planChangeConfirmationModal.totalLabel().should("be.visible")
planChangeConfirmationModal.totalPriceLabel().should("be.visible")
- planChangeConfirmationModal.planPaymentWarningLabel().should("be.visible")
+ planChangeConfirmationModal.finalSaleWarningLabel().should("be.visible")
planChangeConfirmationModal.goBackButton().should("be.visible")
planChangeConfirmationModal.confirmPlanChangeButton().should("be.visible")
@@ -356,7 +357,7 @@ describe("Subscription Plan", () => {
expect($request).to.be.null
})
- billingHistoryPage.downloadInvoiceButton().first().click()
+ billingHistoryPage.viewPdfButton().first().click()
// ensure the download request contains pdf content
cy.wait("@downloadRequest").its("response.headers").should("contain", {
@@ -459,5 +460,67 @@ describe("Subscription Plan", () => {
cy.get("@freePlanName").should("not.equal", $standardPlanName)
})
})
+
+ it("can initiate and return to a crypto payment flow within 60 minutes", () => {
+ cy.web3Login({ deleteCreditCard: true, resetToFreePlan: true })
+ navigationMenu.settingsNavButton().click()
+ settingsPage.subscriptionTabButton().click()
+ settingsPage.changePlanButton().click()
+ selectPlanModal.createPlanCypressAliases()
+ cy.get("@standardPlanBox").parent().within(() => {
+ selectPlanModal.selectPlanButton().click()
+ })
+
+ // choose crypto as payment type
+ planDetailsModal.durationToggleSwitch().click()
+ planDetailsModal.selectThisPlanButton().click()
+ selectPaymentMethodModal.cryptoRadioInput()
+ .should("be.visible")
+ .click()
+ selectPaymentMethodModal.selectPaymentButton().click()
+
+ // ensure crypto payment specific elements are displayed
+ planChangeConfirmationModal.body().should("be.visible")
+ planChangeConfirmationModal.payWithCryptoLabel().should("be.visible")
+ planChangeConfirmationModal.acceptedCurrenciesLabel().should("be.visible")
+ planChangeConfirmationModal.acceptedCryptoTypes().should("be.visible")
+ planChangeConfirmationModal.finalSaleWarningLabel().should("be.visible")
+ planChangeConfirmationModal.confirmPlanChangeButton().click()
+
+ // ensure default crypto elements are displayed
+ cryptoPaymentModal.body().should("be.visible")
+ cryptoPaymentModal.payWithCryptoHeader().should("be.visible")
+ cryptoPaymentModal.totalLabel().should("be.visible")
+ cryptoPaymentModal.cryptoPaymentTimer().should("be.visible")
+ cryptoPaymentModal.totalPriceLabel().should("be.visible")
+ cryptoPaymentModal.selectCryptocurrencyLabel().should("be.visible")
+
+ // choose a crypto currency
+ cryptoPaymentModal.cryptoPaymentButton().contains("Ethereum").click()
+
+ // ensure additional modal elements are displayed after crypto type is selected
+ cryptoPaymentModal.receivingQrCodeContainer().should("be.visible")
+ cryptoPaymentModal.currencyTypeWarning().should("be.visible")
+ cryptoPaymentModal.destinationAddressLabelTitle().should("be.visible")
+ cryptoPaymentModal.destinationAddressLabel().should("be.visible")
+ cryptoPaymentModal.cryptoAmountTitleLabel().should("be.visible")
+ cryptoPaymentModal.cryptoAmountLabel().should("be.visible")
+ cryptoPaymentModal.crypoFinalSaleWarningLabel().should("be.visible")
+ cryptoPaymentModal.goBackButton().should("be.visible")
+ cryptoPaymentModal.connectWalletButton().should("be.visible")
+
+ // close modal, ensure we can return to flow via "pay now" on settings page
+ cryptoPaymentModal.closeButton().click()
+ cryptoPaymentModal.body().should("not.exist")
+ settingsPage.payNowButton().click()
+ cryptoPaymentModal.body().should("be.visible")
+
+ // close modal, ensure we can return to flow via "pay now" on billing history page
+ cryptoPaymentModal.closeButton().click()
+ cryptoPaymentModal.body().should("not.exist")
+ settingsPage.allInvoicesLink().click()
+ billingHistoryPage.payNowButton().click()
+ cryptoPaymentModal.body().should("be.visible")
+ })
})
})
\ No newline at end of file
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx
index a2f78d2f55..cda0540d37 100644
--- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx
+++ b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx
@@ -48,7 +48,10 @@ const BillingHistory = () => {
component="p"
className={classes.link}
>
-
+