Bug 1491065 - Use 'Next' as label for the save buttons during onboarding. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D6318

--HG--
extra : moz-landing-system : lando

browser/components/payments/res/containers/address-form.js

@@ -125,8 +125,12 @@ export default class AddressForm extends PaymentStateSubscriberMixin(PaymentRequ
     let editing = !!addressPage.guid;
     this.cancelButton.textContent = this.dataset.cancelButtonLabel;
     this.backButton.textContent = this.dataset.backButtonLabel;
-    this.saveButton.textContent = editing ? this.dataset.updateButtonLabel :
-                                            this.dataset.addButtonLabel;
+    if (page.onboardingWizard) {
+      this.saveButton.textContent = this.dataset.nextButtonLabel;
+    } else {
+      this.saveButton.textContent = editing ? this.dataset.updateButtonLabel :
+                                              this.dataset.addButtonLabel;
+    }
     this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
 
     this.backButton.hidden = page.onboardingWizard;

browser/components/payments/res/containers/basic-card-form.js

@@ -127,8 +127,12 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(PaymentRe
     let editing = !!basicCardPage.guid;
     this.cancelButton.textContent = this.dataset.cancelButtonLabel;
     this.backButton.textContent = this.dataset.backButtonLabel;
-    this.saveButton.textContent = editing ? this.dataset.updateButtonLabel :
-                                            this.dataset.addButtonLabel;
+    if (page.onboardingWizard) {
+      this.saveButton.textContent = this.dataset.nextButtonLabel;
+    } else {
+      this.saveButton.textContent = editing ? this.dataset.updateButtonLabel :
+                                              this.dataset.addButtonLabel;
+    }
     this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
     this.addressAddLink.textContent = this.dataset.addressAddLinkLabel;
     this.addressEditLink.textContent = this.dataset.addressEditLinkLabel;

browser/components/payments/res/paymentRequest.xhtml

@@ -55,12 +55,14 @@
   <!ENTITY basicCardPage.addressEditLink.label "Edit">
   <!ENTITY basicCardPage.backButton.label     "Back">
   <!ENTITY basicCardPage.addButton.label      "Add">
+  <!ENTITY basicCardPage.nextButton.label     "Next">
   <!ENTITY basicCardPage.updateButton.label   "Update">
   <!ENTITY basicCardPage.persistCheckbox.label     "Save credit card to &brandShortName; (Security code will not be saved)">
   <!ENTITY addressPage.error.genericSave      "There was an error saving the address.">
   <!ENTITY addressPage.cancelButton.label     "Cancel">
   <!ENTITY addressPage.backButton.label       "Back">
   <!ENTITY addressPage.addButton.label        "Add">
+  <!ENTITY addressPage.nextButton.label       "Next">
   <!ENTITY addressPage.updateButton.label     "Update">
   <!ENTITY addressPage.persistCheckbox.label  "Save address to &brandShortName;">
   <!ENTITY failErrorPage.title                "We couldn’t complete your payment to **host-name**">
@@ -183,6 +185,7 @@
                        data-billing-address-title-edit="&billingAddress.editPage.title;"
                        data-back-button-label="&basicCardPage.backButton.label;"
                        data-add-button-label="&basicCardPage.addButton.label;"
+                       data-next-button-label="&basicCardPage.nextButton.label;"
                        data-update-button-label="&basicCardPage.updateButton.label;"
                        data-cancel-button-label="&cancelPaymentButton.label;"
                        data-persist-checkbox-label="&basicCardPage.persistCheckbox.label;"
@@ -195,6 +198,7 @@
                     data-cancel-button-label="&addressPage.cancelButton.label;"
                     data-back-button-label="&addressPage.backButton.label;"
                     data-add-button-label="&addressPage.addButton.label;"
+                    data-next-button-label="&addressPage.nextButton.label;"
                     data-update-button-label="&addressPage.updateButton.label;"
                     data-persist-checkbox-label="&addressPage.persistCheckbox.label;"
                     data-field-required-symbol="&fieldRequiredSymbol;"

browser/components/payments/test/browser/browser_address_edit.js

@@ -142,6 +142,9 @@ add_task(async function test_edit_link() {
 
       let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Edit Shipping Address", "Page title should be set");
+
+      let saveButton = content.document.querySelector("address-form .save-button");
+      is(saveButton.textContent, "Update", "Save button has the correct label");
     });
 
     let editOptions = {
@@ -235,6 +238,9 @@ add_task(async function test_add_payer_contact_name_email_link() {
       let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Add Payer Contact", "Page title should be set");
 
+      let saveButton = content.document.querySelector("address-form .save-button");
+      is(saveButton.textContent, "Add", "Save button has the correct label");
+
       info("check that non-payer requested fields are hidden");
       for (let selector of ["#organization", "#tel"]) {
         let element = content.document.querySelector(selector);
@@ -321,6 +327,9 @@ add_task(async function test_edit_payer_contact_name_email_phone_link() {
       let title = content.document.querySelector("address-form h2");
       is(title.textContent, "Edit Payer Contact", "Page title should be set");
 
+      let saveButton = content.document.querySelector("address-form .save-button");
+      is(saveButton.textContent, "Update", "Save button has the correct label");
+
       info("check that non-payer requested fields are hidden");
       let formElements =
         content.document.querySelectorAll("address-form :-moz-any(input, select, textarea");

browser/components/payments/test/browser/browser_card_edit.js

@@ -43,6 +43,9 @@ async function add_link(aOptions = {}) {
       let title = content.document.querySelector("basic-card-form h2");
       is(title.textContent, "Add Credit Card", "Add title should be set");
 
+      let saveButton = content.document.querySelector("basic-card-form .save-button");
+      is(saveButton.textContent, "Add", "Save button has the correct label");
+
       is(state.isPrivate, testArgs.isPrivate,
          "isPrivate flag has expected value when shown from a private/non-private session");
     }, aOptions);
@@ -400,6 +403,9 @@ add_task(async function test_edit_link() {
     let title = content.document.querySelector("basic-card-form h2");
     is(title.textContent, "Edit Credit Card", "Edit title should be set");
 
+    let saveButton = content.document.querySelector("basic-card-form .save-button");
+    is(saveButton.textContent, "Update", "Save button has the correct label");
+
     let card = Object.assign({}, PTU.BasicCards.JohnDoe);
     // cc-number cannot be modified
     delete card["cc-number"];

browser/components/payments/test/browser/browser_payments_onboarding_wizard.js

@@ -43,6 +43,8 @@ add_task(async function test_onboarding_wizard_without_saved_addresses_and_saved
       info("Checking if the address page has been rendered");
       let addressSaveButton = content.document.querySelector("address-form .save-button");
       ok(content.isVisible(addressSaveButton), "Address save button is rendered");
+      is(addressSaveButton.textContent, "Next",
+         "Address save button has the correct label during onboarding");
 
       info("Check if the total header is visible on the address page during on-boarding");
       let header = content.document.querySelector("header");
@@ -74,6 +76,8 @@ add_task(async function test_onboarding_wizard_without_saved_addresses_and_saved
       }, "Basic card page is shown after the address page during on boarding");
 
       let cardSaveButton = content.document.querySelector("basic-card-form .save-button");
+      is(cardSaveButton.textContent, "Next",
+         "Card save button has the correct label during onboarding");
       ok(content.isVisible(cardSaveButton), "Basic card page is rendered");
 
       let basicCardTitle = content.document.querySelector("basic-card-form h2");