Bug 1491065 - Use 'Next' as label for the save buttons during onboarding. r=MattN
authorSam Foster <sfoster@mozilla.com>
Wed, 19 Sep 2018 22:10:50 +0000
changeset 437352 8889fed6e2cf56f4e6a9540c9477a7ecf0e39c02
parent 437351 66041721e70b0573c9958f5b1875c4a8a13015e1
child 437353 35f07b7fb79f3a1c18b7e682ee806b1171bdb787
push id34678
push userbtara@mozilla.com
push dateThu, 20 Sep 2018 04:11:49 +0000
treeherdermozilla-central@5111ca226d2b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1491065
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1491065 - Use 'Next' as label for the save buttons during onboarding. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D6318
browser/components/payments/res/containers/address-form.js
browser/components/payments/res/containers/basic-card-form.js
browser/components/payments/res/paymentRequest.xhtml
browser/components/payments/test/browser/browser_address_edit.js
browser/components/payments/test/browser/browser_card_edit.js
browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -120,18 +120,22 @@ export default class AddressForm extends
     if (this.id && page && page.id !== this.id) {
       log.debug(`AddressForm: no need to further render inactive page: ${page.id}`);
       return;
     }
 
     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;
     this.cancelButton.hidden = !page.onboardingWizard;
 
     this.pageTitleHeading.textContent = addressPage.title;
     this.genericErrorText.textContent = page.error;
 
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -122,18 +122,22 @@ export default class BasicCardForm exten
     if (this.id && page && page.id !== this.id) {
       log.debug(`BasicCardForm: no need to further render inactive page: ${page.id}`);
       return;
     }
 
     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;
     this.acceptedCardsList.label = this.dataset.acceptedCardsLabel;
 
     // The next line needs an onboarding check since we don't set previousId
     // when navigating to add/edit directly from the summary page.
     this.backButton.hidden = !page.previousId && page.onboardingWizard;
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -50,22 +50,24 @@
   <!ENTITY unknownPaymentButton.label    "Unknown">
   <!ENTITY orderDetailsLabel          "Order Details">
   <!ENTITY orderTotalLabel            "Total">
   <!ENTITY basicCardPage.error.genericSave    "There was an error saving the payment card.">
   <!ENTITY basicCardPage.addressAddLink.label "Add">
   <!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**">
   <!ENTITY failErrorPage.suggestionHeading    "The most likely cause is a hiccup with your credit card.">
   <!ENTITY failErrorPage.suggestion1          "Make sure the card you’re using hasn’t expired">
   <!ENTITY failErrorPage.suggestion2          "Double check the card number and expiration date">
   <!ENTITY failErrorPage.suggestion3          "If your credit card information is correct, contact the merchant for more information">
   <!ENTITY failErrorPage.doneButton.label     "Close">
@@ -178,28 +180,30 @@
                        data-edit-basic-card-title="&basicCard.editPage.title;"
                        data-error-generic-save="&basicCardPage.error.genericSave;"
                        data-address-add-link-label="&basicCardPage.addressAddLink.label;"
                        data-address-edit-link-label="&basicCardPage.addressEditLink.label;"
                        data-billing-address-title-add="&billingAddress.addPage.title;"
                        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;"
                        data-accepted-cards-label="&acceptedCards.label;"
                        data-field-required-symbol="&fieldRequiredSymbol;"
                        hidden="hidden"></basic-card-form>
 
       <address-form id="address-page"
                     data-error-generic-save="&addressPage.error.genericSave;"
                     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;"
                     hidden="hidden"></address-form>
 
       <completion-error-page id="completion-timeout-error" class="illustrated"
                   data-page-title="&timeoutErrorPage.title;"
                   data-suggestion-heading="&timeoutErrorPage.suggestionHeading;"
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -137,16 +137,19 @@ add_task(async function test_edit_link()
       editLink.click();
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !!state["address-page"].guid;
       }, "Check edit page state");
 
       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 = {
       checkboxSelector: "#address-page .persist-checkbox",
       isEditing: true,
       expectPersist: true,
     };
     await fillInShippingAddressForm(frame, EXPECTED_ADDRESS, editOptions);
@@ -230,16 +233,19 @@ add_task(async function test_add_payer_c
     });
 
     await navigateToAddAddressPage(frame, addOptions);
 
     await spawnPaymentDialogTask(frame, async () => {
       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);
         ok(content.isHidden(element), selector + " should be hidden");
       }
     });
 
     await fillInPayerAddressForm(frame, EXPECTED_ADDRESS, addOptions);
@@ -316,16 +322,19 @@ add_task(async function test_edit_payer_
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" && !!state["address-page"].guid;
       }, "Check edit page state");
 
       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");
       let allowedFields = ["given-name", "additional-name", "family-name", "email", "tel"];
       for (let element of formElements) {
         let shouldBeVisible = allowedFields.includes(element.id);
         if (shouldBeVisible) {
           ok(content.isVisible(element), element.id + " should be visible");
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -38,16 +38,19 @@ async function add_link(aOptions = {}) {
       let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
         return Object.keys(state.savedBasicCards).length == 1 &&
                Object.keys(state.savedAddresses).length == 1;
       }, "Check no cards or addresses present at beginning of test");
 
       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);
 
     let cardOptions = Object.assign({}, {
       checkboxSelector: "basic-card-form .persist-checkbox",
       expectPersist: aOptions.expectCardPersist,
       networkSelector: "basic-card-form #cc-type",
@@ -395,16 +398,19 @@ add_task(async function test_edit_link()
     state = await PTU.DialogContentUtils.waitForState(content, (state) => {
       return Object.keys(state.savedBasicCards).length == 1 &&
              Object.keys(state.savedAddresses).length == 1;
     }, "Check card and address present at beginning of test");
 
     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"];
     card["cc-exp-year"]++;
     card["cc-exp-month"]++;
 
     info("overwriting field values");
     for (let [key, val] of Object.entries(card)) {
--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -38,16 +38,18 @@ add_task(async function test_onboarding_
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "address-page" &&
                state["address-page"].selectedStateKey[0] == "selectedShippingAddress";
       }, "Address page is shown first during on-boarding if there are no saved addresses");
 
       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");
       ok(content.isVisible(header),
          "Total Header is visible on the address page during on-boarding");
       ok(header.textContent, "Total Header contains text");
 
       info("Check if the page title is visible on the address page");
@@ -69,16 +71,18 @@ add_task(async function test_onboarding_
         PaymentTestUtils: PTU,
       } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
 
       await PTU.DialogContentUtils.waitForState(content, (state) => {
         return state.page.id == "basic-card-page";
       }, "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");
       ok(content.isVisible(basicCardTitle), "Basic card page title is visible");
       is(basicCardTitle.textContent, "Add Credit Card", "Basic card page title is correctly shown");
 
       info("Check if the correct billing address is selected in the basic card page");
       PTU.DialogContentUtils.waitForState(content, (state) => {