Add ui test for crypto payment flow initiation and return (#1933)

* add new ui tests for annual and monthly billing options

* add new element identifiers for downgrade details modal

* add test to downgrade subscription plan

* address pr feedback

* add test for returning to pay crypto invoice

* fix misc mistakes

* re-add accidentally removed test steps

* Apply suggestions from code review

* lingui extract

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Co-authored-by: GitHub Actions <actions@github.com>

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]")
 }

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]")
+}
+

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]")
 }

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") {

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")
+    })
   })
 })

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx

@@ -48,7 +48,10 @@ const BillingHistory = () => {
           component="p"
           className={classes.link}
         >
-          <Link to={ROUTE_LINKS.BillingHistory}>
+          <Link
+            to={ROUTE_LINKS.BillingHistory}
+            data-cy="link-all-invoices"
+          >
             <Trans>All invoices</Trans>
           </Link>
         </Typography>

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/ConfirmPlan.tsx

@@ -226,6 +226,7 @@ const ConfirmPlan = ({
             <Typography
               variant="body1"
               component="p"
+              data-cy="label-pay-with-crypto"
             >
               <Trans>Pay with Crypto</Trans>
             </Typography>
@@ -247,13 +248,15 @@ const ConfirmPlan = ({
             <Typography
               component="p"
               variant="body1"
+              data-cy="label-accepted-currencies"
             >
               <Trans>Accepted currencies</Trans>
             </Typography>
             <div className={classes.pushRightBox}>
               <Typography
                 variant="body1"
                 component="p"
+                data-cy="label-accepted-crypto-types"
               >
                 DAI, USDC, ETH or BTC
               </Typography>
@@ -308,7 +311,7 @@ const ConfirmPlan = ({
           variant="body1"
           component="p"
           className={classes.warningText}
-          data-cy="label-change-plan-payment-warning"
+          data-cy="label-final-sale-warning"
         >
           <InfoCircleIcon className={classes.icon} />
           {paymentMethod === "crypto"

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/CryptoPayment.tsx

@@ -368,15 +368,20 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
           variant="h5"
           component="h4"
           className={classes.heading}
+          data-cy="header-pay-with-crypto"
         >
           <Trans>Pay with crypto</Trans>
         </Typography>
-        {cryptoPayment && <div className={classes.pushRightBox}>
+        {cryptoPayment && <div
+          className={classes.pushRightBox}
+          data-cy="container-crypto-time-remaining"
+        >
           <CircularProgressBar
             progress={(timeRemaining?.as("s") || 0) / 3600 * 100}
             width={23}
             label={timeRemaining?.format("mm:ss") || ""}
             variant="secondary"
+            data-cy="label-select-cryptocurrency"
           />
         </div>}
       </div>
@@ -388,25 +393,32 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
           component="p"
           variant="body1"
           className={classes.error}
+          data-cy="label-crypto-payment-error"
         >
           <Trans>Failed to create a charge</Trans>
         </Typography>
       }
       {cryptoPayment && pendingCryptoInvoice &&
         <>
           <div className={classes.rowBox}>
-            <Typography>Total</Typography>
+            <Typography data-cy="label-total-crypto-title">
+              Total
+            </Typography>
             <div className={classes.pushRightBox}>
-              <Typography>
+              <Typography data-cy="label-total-crypto-price">
                 {pendingCryptoInvoice.currency?.toUpperCase()} {pendingCryptoInvoice.amount}
               </Typography>
             </div>
           </div>
           <Divider />
           {!selectedCurrency && currencies &&
             <>
-              <Typography>Select a cryptocurrency</Typography>
-              <div className={classes.availableCurrencies}>
+              <Typography data-cy="label-select-cryptocurrency">
+                <Trans>Select a cryptocurrency</Trans>
+              </Typography>
+              <div
+                className={classes.availableCurrencies}
+                data-cy="container-crypto-payment-option">
                 {currencies.map(c => {
                   const CurrencyIcon = iconMap[c] || null
                   return <Button
@@ -423,23 +435,28 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
           }
           {selectedCurrency && selectedPaymentMethod &&
             <>
-              <div className={classes.qrCode}>
+              <div
+                className={classes.qrCode}
+                data-cy="container-qr-code"
+              >
                 <QRCode
                   value={selectedPaymentMethod.address}
                   size={128}
                 />
               </div>
               <div className={classes.qrCodeLabel}>
-                <Typography>
+                <Typography data-cy="label-currency-type-warning">
                   <Trans>Only send {selectedCurrency} to this address</Trans>
                 </Typography>
               </div>
               <Divider />
-              <Typography><Trans>Destination Address</Trans></Typography>
+              <Typography data-cy="label-destination-address-title">
+                <Trans>Destination Address</Trans>
+              </Typography>
               <div
                 className={clsx(classes.rowBox, classes.copyRow)}
                 onClick={onCopyDestinationAddress}>
-                <Typography>{selectedPaymentMethod.address}</Typography>
+                <Typography data-cy="label-destination-address">{selectedPaymentMethod.address}</Typography>
                 <div className={classes.pushRightBox}>
                   <CopyIcon className={classes.copyIcon} />
                   <div className={clsx(classes.copiedFlag, { "active": copiedDestinationAddress })}>
@@ -451,12 +468,14 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
                   </div>
                 </div>
               </div>
-              <Typography><Trans>Total Amount</Trans></Typography>
+              <Typography data-cy="label-crypto-amount-title">
+                <Trans>Total Amount</Trans>
+              </Typography>
               <div
                 className={clsx(classes.rowBox, classes.copyRow)}
                 onClick={onCopyAmount}
               >
-                <Typography>
+                <Typography data-cy="label-crypto-amount">
                   {selectedPaymentMethod.amount} {symbolMap[selectedCurrency]}
                 </Typography>
                 <div className={classes.pushRightBox}>
@@ -474,7 +493,7 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
                 variant="body1"
                 component="p"
                 className={classes.warningText}
-                data-cy="label-crypto-payment-warning"
+                data-cy="label-crypto-final-sale-warning"
               >
                 <InfoCircleIcon className={classes.icon} />
                 <Trans>
@@ -491,14 +510,23 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
           {!!selectedCurrency && <Button
             onClick={() => setSelectedCurrency(undefined)}
             variant="text"
+            testId="go-back-to-crypto-selection"
           >
             <Trans>Go back</Trans>
           </Button>}
           {selectedCurrency && selectedCurrency !== "bitcoin" && !isReady &&
-            <Button onClick={selectWallet}><Trans>Connect Wallet</Trans></Button>
+            <Button
+              onClick={selectWallet}
+              testId="connect-wallet"
+            >
+              <Trans>Connect Wallet</Trans>
+            </Button>
           }
           {selectedCurrency && selectedCurrency !== "bitcoin" && isReady && network !== 1 &&
-            <Button onClick={handleSwitchNetwork}>
+            <Button
+              onClick={handleSwitchNetwork}
+              testId="switch-network"
+            >
               <Trans>Switch Network</Trans>
             </Button>
           }

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx

@@ -68,7 +68,7 @@ const PayInvoiceModal = ({ onClose, invoiceId }: IChangeProductModal) => {
       injectedClass={{
         inner: classes.inner
       }}
-      testId="pay-invoice"
+      testId="cryptoPayment"
       onClose={onClose}
     >
       {invoiceToPay?.payment_method === "crypto"

packages/files-ui/src/locales/de/messages.po

@@ -796,6 +796,9 @@ msgstr "Sicherheit"
 msgid "See payment info"
 msgstr ""
 
+msgid "Select a cryptocurrency"
+msgstr ""
+
 msgid "Select a wallet"
 msgstr ""
 

packages/files-ui/src/locales/en/messages.po

@@ -799,6 +799,9 @@ msgstr "Security"
 msgid "See payment info"
 msgstr "See payment info"
 
+msgid "Select a cryptocurrency"
+msgstr "Select a cryptocurrency"
+
 msgid "Select a wallet"
 msgstr "Select a wallet"
 

packages/files-ui/src/locales/es/messages.po

@@ -800,6 +800,9 @@ msgstr "Seguridad"
 msgid "See payment info"
 msgstr ""
 
+msgid "Select a cryptocurrency"
+msgstr ""
+
 msgid "Select a wallet"
 msgstr "Seleccione una billetera"
 

packages/files-ui/src/locales/fr/messages.po

@@ -800,6 +800,9 @@ msgstr "Sécurité"
 msgid "See payment info"
 msgstr "Voir les détails du paiement"
 
+msgid "Select a cryptocurrency"
+msgstr ""
+
 msgid "Select a wallet"
 msgstr "Sélectionner un wallet"