Bug 1473662 - Save button should be labelled 'Next' when adding a new address or card. r=MattN
authorSam Foster <sfoster@mozilla.com>
Fri, 28 Sep 2018 20:00:03 +0000
changeset 438721 44ab1f5c5056
parent 438720 4c34c45253ef
child 438722 ae0df5bd82ea
push id34735
push useraiakab@mozilla.com
push dateSat, 29 Sep 2018 04:15:27 +0000
treeherdermozilla-central@669ffcf8bc71 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1473662
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 1473662 - Save button should be labelled 'Next' when adding a new address or card. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D7209
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/mochitest/test_address_form.html
browser/components/payments/test/mochitest/test_basic_card_form.html
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -127,22 +127,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;
-    if (page.onboardingWizard) {
-      this.saveButton.textContent = this.dataset.nextButtonLabel;
+    if (editing) {
+      this.saveButton.textContent = this.dataset.updateButtonLabel;
     } else {
-      this.saveButton.textContent = editing ? this.dataset.updateButtonLabel :
-                                              this.dataset.addButtonLabel;
+      this.saveButton.textContent = this.dataset.nextButtonLabel;
     }
+
     this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
     this.persistCheckbox.infoTooltip = this.dataset.persistCheckboxInfoTooltip;
 
     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
@@ -138,21 +138,20 @@ 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;
-    if (page.onboardingWizard) {
-      this.saveButton.textContent = this.dataset.nextButtonLabel;
+    if (editing) {
+      this.saveButton.textContent = this.dataset.updateButtonLabel;
     } else {
-      this.saveButton.textContent = editing ? this.dataset.updateButtonLabel :
-                                              this.dataset.addButtonLabel;
+      this.saveButton.textContent = this.dataset.nextButtonLabel;
     }
     this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
     this.persistCheckbox.infoTooltip = this.dataset.persistCheckboxInfoTooltip;
     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
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -52,25 +52,23 @@
   <!ENTITY successPaymentButton.label    "Done">
   <!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; (CVV will not be saved)">
   <!ENTITY basicCardPage.persistCheckbox.infoTooltip  "&brandShortName; can securely store your credit card information to use in forms like this, so you don’t have to enter it every time.">
   <!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 addressPage.persistCheckbox.infoTooltip  "&brandShortName; can add your address to forms like this, so you don’t have to type it every time.">
   <!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">
@@ -191,31 +189,29 @@
                        data-add-basic-card-title="&basicCard.addPage.title;"
                        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-persist-checkbox-info-tooltip="&basicCardPage.persistCheckbox.infoTooltip;"
                        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-persist-checkbox-info-tooltip="&addressPage.persistCheckbox.infoTooltip;"
                     data-field-required-symbol="&fieldRequiredSymbol;"
                     hidden="hidden"></address-form>
 
       <completion-error-page id="completion-timeout-error" class="illustrated"
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -234,17 +234,17 @@ 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");
+      is(saveButton.textContent, "Next", "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");
       }
     });
 
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -41,17 +41,17 @@ async function add_link(aOptions = {}) {
         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(saveButton.textContent, "Next", "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,
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -105,17 +105,17 @@ add_task(async function test_backButton(
   let {page} = await stateChangePromise;
   is(page.id, "payment-summary", "Check initial page after appending");
 
   form.remove();
 });
 
 add_task(async function test_saveButton() {
   let form = new AddressForm();
-  form.dataset.addButtonLabel = "Add";
+  form.dataset.nextButtonLabel = "Next";
   form.dataset.errorGenericSave = "Generic error";
   await form.promiseReady;
   display.appendChild(form);
   await asyncElementRendered();
 
   ok(form.saveButton.disabled, "Save button initially disabled");
   fillField(form.form.querySelector("#given-name"), "Jaws");
   fillField(form.form.querySelector("#family-name"), "Swaj");
@@ -142,17 +142,17 @@ add_task(async function test_saveButton(
   ok(!form.saveButton.disabled, "Save button is enabled after re-filling street-address");
 
   fillField(form.form.querySelector("#country"), "CA");
   ok(form.saveButton.disabled, "Save button is disabled after changing the country to Canada");
   fillField(form.form.querySelector("#country"), "US");
   ok(!form.saveButton.disabled, "Save button is enabled after changing the country to US");
 
   let messagePromise = promiseContentToChromeMessage("updateAutofillRecord");
-  is(form.saveButton.textContent, "Add", "Check label");
+  is(form.saveButton.textContent, "Next", "Check label");
   form.saveButton.scrollIntoView();
   synthesizeMouseAtCenter(form.saveButton, {});
 
   let details = await messagePromise;
   ok(typeof(details.messageID) == "number" && details.messageID > 0, "Check messageID type");
   delete details.messageID;
   is(details.collectionName, "addresses", "Check collectionName");
   isDeeply(details, {
@@ -260,17 +260,17 @@ add_task(async function test_edit() {
   });
   ok(form.saveButton.disabled, "Save button should be disabled for an empty form");
 
   form.remove();
 });
 
 add_task(async function test_restricted_address_fields() {
   let form = new AddressForm();
-  form.dataset.addButtonLabel = "Add";
+  form.dataset.nextButtonLabel = "Next";
   form.dataset.errorGenericSave = "Generic error";
   await form.promiseReady;
   display.appendChild(form);
   await form.requestStore.setState({
     "address-page": {
       addressFields: "name email tel",
     },
   });
--- a/browser/components/payments/test/mochitest/test_basic_card_form.html
+++ b/browser/components/payments/test/mochitest/test_basic_card_form.html
@@ -109,17 +109,17 @@ add_task(async function test_backButton(
   let {page} = await stateChangePromise;
   is(page.id, "payment-summary", "Check initial page after appending");
 
   form.remove();
 });
 
 add_task(async function test_saveButton() {
   let form = new BasicCardForm();
-  form.dataset.addButtonLabel = "Add";
+  form.dataset.nextButtonLabel = "Next";
   form.dataset.errorGenericSave = "Generic error";
   await form.promiseReady;
   display.appendChild(form);
 
   let address1 = deepClone(PTU.Addresses.TimBL);
   address1.guid = "TimBLGUID";
   let address2 = deepClone(PTU.Addresses.TimBL2);
   address2.guid = "TimBL2GUID";
@@ -179,17 +179,17 @@ add_task(async function test_saveButton(
   is(fieldsVisiblyInvalid.length, 1, "Check 1 field visibly invalid after blanking and blur");
   is(fieldsVisiblyInvalid[0].id, "cc-number", "Check #cc-number is visibly invalid");
 
   fillField(form.form.querySelector("#cc-number"), "4111 1111-1111 1111");
   is(form.querySelectorAll(":-moz-ui-invalid").length, 0, "Check no fields visibly invalid");
   ok(!form.saveButton.disabled, "Save button is enabled after re-filling cc-number");
 
   let messagePromise = promiseContentToChromeMessage("updateAutofillRecord");
-  is(form.saveButton.textContent, "Add", "Check label");
+  is(form.saveButton.textContent, "Next", "Check label");
   form.saveButton.scrollIntoView();
   synthesizeMouseAtCenter(form.saveButton, {});
 
   let details = await messagePromise;
   ok(typeof(details.messageID) == "number" && details.messageID > 0, "Check messageID type");
   delete details.messageID;
   is(details.collectionName, "creditCards", "Check collectionName");
   isDeeply(details, {
@@ -448,17 +448,17 @@ add_task(async function test_edit() {
     billingAddressGUID: address1.guid, // Default selected
   });
 
   form.remove();
 });
 
 add_task(async function test_field_validity_updates() {
   let form = new BasicCardForm();
-  form.dataset.updateButtonLabel = "Add";
+  form.dataset.updateButtonLabel = "Update";
   await form.promiseReady;
   display.appendChild(form);
   await asyncElementRendered();
 
   let ccNumber = form.form.querySelector("#cc-number");
   let nameInput = form.form.querySelector("#cc-name");
   let typeInput = form.form.querySelector("#cc-type");
   let cscInput = form.form.querySelector("#cc-csc");
@@ -506,17 +506,17 @@ add_task(async function test_field_valid
   ok(nameInput.checkValidity(), "cc-name field is valid with a value");
   ok(!form.saveButton.disabled, "Save button is no longer disabled with corrected input");
 
   form.remove();
 });
 
 add_task(async function test_numberCustomValidityReset() {
   let form = new BasicCardForm();
-  form.dataset.updateButtonLabel = "Add";
+  form.dataset.updateButtonLabel = "Update";
   await form.promiseReady;
   display.appendChild(form);
   await asyncElementRendered();
 
   fillField(form.querySelector("#cc-number"), "junk");
   sendKey("TAB");
   ok(form.querySelector("#cc-number:-moz-ui-invalid"), "cc-number field is visibly invalid");