Bug 1457317 - Show a title for the add/edit pages. r=MattN

MozReview-Commit-ID: 9B8aA6lPpJX

--HG--
extra : rebase_source : 82ce9c8cf952ce9e5ba945fde7640fa00378d936

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

@@ -18,6 +18,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
   constructor() {
     super();
 
+    this.pageTitle = document.createElement("h1");
     this.genericErrorText = document.createElement("div");
 
     this.backButton = document.createElement("button");
@@ -49,6 +50,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
 
   connectedCallback() {
     this.promiseReady.then(form => {
+      this.appendChild(this.pageTitle);
       this.appendChild(form);
 
       let record = {};
@@ -79,6 +81,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
       savedAddresses,
     } = state;
 
+    this.pageTitle.textContent = page.title;
     this.genericErrorText.textContent = page.error;
 
     let editing = !!page.guid;

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

@@ -172,12 +172,14 @@ export default class AddressPicker extends PaymentStateSubscriberMixin(HTMLEleme
     switch (target) {
       case this.addLink: {
         nextState.page.guid = null;
+        nextState.page.title = this.dataset.addAddressTitle;
         break;
       }
       case this.editLink: {
         let state = this.requestStore.getState();
         let selectedAddressGUID = state[this.selectedStateKey];
         nextState.page.guid = selectedAddressGUID;
+        nextState.page.title = this.dataset.editAddressTitle;
         break;
       }
       default: {

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

@@ -20,6 +20,7 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(HTMLEleme
   constructor() {
     super();
 
+    this.pageTitle = document.createElement("h1");
     this.genericErrorText = document.createElement("div");
 
     this.backButton = document.createElement("button");
@@ -53,6 +54,7 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(HTMLEleme
 
   connectedCallback() {
     this.promiseReady.then(form => {
+      this.appendChild(this.pageTitle);
       this.appendChild(form);
 
       let record = {};
@@ -75,16 +77,18 @@ export default class BasicCardForm extends PaymentStateSubscriberMixin(HTMLEleme
   }
 
   render(state) {
-    this.backButton.textContent = this.dataset.backButtonLabel;
-    this.saveButton.textContent = this.dataset.saveButtonLabel;
-    this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
-
-    let record = {};
     let {
       page,
       savedAddresses,
       selectedShippingAddress,
     } = state;
+
+    this.pageTitle.textContent = page.title;
+    this.backButton.textContent = this.dataset.backButtonLabel;
+    this.saveButton.textContent = this.dataset.saveButtonLabel;
+    this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
+
+    let record = {};
     let basicCards = paymentRequest.getBasicCards(state);
 
     this.genericErrorText.textContent = page.error;

browser/components/payments/res/containers/payment-dialog.js

@@ -45,6 +45,7 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
     this._orderDetailsOverlay = contents.querySelector("#order-details-overlay");
 
     this._shippingTypeLabel = contents.querySelector("#shipping-type-label");
+    this._shippingAddressPicker = contents.querySelector("address-picker.shipping-related");
     this._shippingRelatedEls = contents.querySelectorAll(".shipping-related");
     this._payerRelatedEls = contents.querySelectorAll(".payer-related");
     this._payerAddressPicker = contents.querySelector("address-picker.payer-related");
@@ -235,6 +236,12 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
     let paymentDetails = request.paymentDetails;
     this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost;
 
+    let shippingType = state.request.paymentOptions.shippingType || "shipping";
+    this._shippingAddressPicker.dataset.addAddressTitle =
+      this.dataset[shippingType + "AddressTitleAdd"];
+    this._shippingAddressPicker.dataset.editAddressTitle =
+      this.dataset[shippingType + "AddressTitleEdit"];
+
     let totalItem = paymentRequest.getTotalItem(state);
     let totalAmountEl = this.querySelector("#total > currency-amount");
     totalAmountEl.value = totalItem.amount.value;
@@ -269,8 +276,9 @@ export default class PaymentDialog extends PaymentStateSubscriberMixin(HTMLEleme
     } else {
       this._payerAddressPicker.removeAttribute("address-fields");
     }
+    this._payerAddressPicker.dataset.addAddressTitle = this.dataset.payerTitleAdd;
+    this._payerAddressPicker.dataset.editAddressTitle = this.dataset.payerTitleEdit;
 
-    let shippingType = paymentOptions.shippingType || "shipping";
     this._shippingTypeLabel.querySelector("label").textContent =
       this._shippingTypeLabel.dataset[shippingType + "AddressLabel"];
 

browser/components/payments/res/containers/payment-method-picker.js

@@ -136,12 +136,14 @@ export default class PaymentMethodPicker extends PaymentStateSubscriberMixin(HTM
     switch (target) {
       case this.addLink: {
         nextState.page.guid = null;
+        nextState.page.title = this.dataset.addBasicCardTitle;
         break;
       }
       case this.editLink: {
         let state = this.requestStore.getState();
         let selectedPaymentCardGUID = state[this.selectedStateKey];
         nextState.page.guid = selectedPaymentCardGUID;
+        nextState.page.title = this.dataset.editBasicCardTitle;
         break;
       }
       default: {

browser/components/payments/res/paymentRequest.xhtml

@@ -19,6 +19,16 @@
   <!ENTITY basicCard.editLink.label   "Edit">
   <!ENTITY payer.addLink.label        "Add">
   <!ENTITY payer.editLink.label       "Edit">
+  <!ENTITY shippingAddress.addPage.title  "Add Shipping Address">
+  <!ENTITY shippingAddress.editPage.title "Edit Shipping Address">
+  <!ENTITY deliveryAddress.addPage.title  "Add Delivery Address">
+  <!ENTITY deliveryAddress.editPage.title "Edit Delivery Address">
+  <!ENTITY pickupAddress.addPage.title    "Add Pickup Address">
+  <!ENTITY pickupAddress.editPage.title   "Edit Pickup Address">
+  <!ENTITY basicCard.addPage.title    "Add Credit Card">
+  <!ENTITY basicCard.editPage.title   "Edit Credit Card">
+  <!ENTITY payer.addPage.title        "Add Payer Contact">
+  <!ENTITY payer.editPage.title       "Edit Payer Contact">
   <!ENTITY payerLabel                 "Contact Information">
   <!ENTITY cancelPaymentButton.label   "Cancel">
   <!ENTITY approvePaymentButton.label  "Pay">
@@ -92,6 +102,8 @@
 
           <div><label>&paymentMethodsLabel;</label></div>
           <payment-method-picker selected-state-key="selectedPaymentCard"
+                                 data-add-basic-card-title="&basicCard.addPage.title;"
+                                 data-edit-basic-card-title="&basicCard.editPage.title;"
                                  data-add-link-label="&basicCard.addLink.label;"
                                  data-edit-link-label="&basicCard.editLink.label;">
           </payment-method-picker>
@@ -154,6 +166,13 @@
   <iframe id="debugging-console"
           hidden="hidden"
           height="400"></iframe>
-  <payment-dialog></payment-dialog>
+  <payment-dialog data-shipping-address-title-add="&shippingAddress.addPage.title;"
+                  data-shipping-address-title-edit="&shippingAddress.editPage.title;"
+                  data-delivery-address-title-add="&deliveryAddress.addPage.title;"
+                  data-delivery-address-title-edit="&deliveryAddress.editPage.title;"
+                  data-pickup-address-title-add="&pickupAddress.addPage.title;"
+                  data-pickup-address-title-edit="&pickupAddress.editPage.title;"
+                  data-payer-title-add="&payer.addPage.title;"
+                  data-payer-title-edit="&payer.editPage.title;"></payment-dialog>
 </body>
 </html>

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

@@ -47,6 +47,9 @@ add_task(async function test_add_link() {
         return state.page.id == "address-page" && !state.page.guid;
       }, "Check add page state");
 
+      let title = content.document.querySelector("address-form h1");
+      is(title.textContent, "Add Shipping Address", "Page title should be set");
+
       info("filling fields");
       for (let [key, val] of Object.entries(address)) {
         let field = content.document.getElementById(key);
@@ -122,6 +125,9 @@ add_task(async function test_edit_link() {
         return state.page.id == "address-page" && !!state.page.guid;
       }, "Check edit page state");
 
+      let title = content.document.querySelector("address-form h1");
+      is(title.textContent, "Edit Shipping Address", "Page title should be set");
+
       info("overwriting field values");
       for (let [key, val] of Object.entries(address)) {
         let field = content.document.getElementById(key);

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

@@ -21,6 +21,9 @@ add_task(async function test_add_link() {
       return state.page.id == "basic-card-page" && !state.page.guid;
     }, "Check add page state");
 
+    let title = content.document.querySelector("basic-card-form h1");
+    is(title.textContent, "Add Credit Card", "Add title should be set");
+
     ok(!state.isPrivate,
        "isPrivate flag is not set when paymentrequest is shown from a non-private session");
     let persistInput = content.document.querySelector("basic-card-form labelled-checkbox");
@@ -80,6 +83,9 @@ add_task(async function test_edit_link() {
       return state.page.id == "basic-card-page" && !!state.page.guid;
     }, "Check edit page state");
 
+    let title = content.document.querySelector("basic-card-form h1");
+    is(title.textContent, "Edit Credit Card", "Edit title should be set");
+
     let nextYear = (new Date()).getFullYear() + 1;
     let card = {
       // cc-number cannot be modified

browser/components/payments/test/mochitest/test_address_form.html

@@ -74,6 +74,7 @@ add_task(async function test_backButton() {
   await form.requestStore.setState({
     page: {
       id: "test-page",
+      title: "Sample page title",
     },
   });
   await form.promiseReady;
@@ -81,6 +82,8 @@ add_task(async function test_backButton() {
   await asyncElementRendered();
 
   let stateChangePromise = promiseStateChange(form.requestStore);
+  is(form.pageTitle.textContent, "Sample page title", "Check label");
+
   is(form.backButton.textContent, "Back", "Check label");
   form.backButton.scrollIntoView();
   synthesizeMouseAtCenter(form.backButton, {});

browser/components/payments/test/mochitest/test_basic_card_form.html

@@ -69,6 +69,7 @@ add_task(async function test_backButton() {
   await form.requestStore.setState({
     page: {
       id: "test-page",
+      title: "Sample page title 2",
     },
   });
   await form.promiseReady;
@@ -76,6 +77,7 @@ add_task(async function test_backButton() {
   await asyncElementRendered();
 
   let stateChangePromise = promiseStateChange(form.requestStore);
+  is(form.pageTitle.textContent, "Sample page title 2", "Check title");
   is(form.backButton.textContent, "Back", "Check label");
   synthesizeMouseAtCenter(form.backButton, {});