Bug 1457317 - Show a title for the add/edit pages. r=MattN
MozReview-Commit-ID: 9B8aA6lPpJX
--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -13,16 +13,17 @@ import paymentRequest from "../paymentRe
* XXX: Bug 1446164 - This form isn't localized when used via this custom element
* as it will be much easier to share the logic once we switch to Fluent.
*/
export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement) {
constructor() {
super();
+ this.pageTitle = document.createElement("h1");
this.genericErrorText = document.createElement("div");
this.backButton = document.createElement("button");
this.backButton.addEventListener("click", this);
this.saveButton = document.createElement("button");
this.saveButton.addEventListener("click", this);
@@ -44,16 +45,17 @@ export default class AddressForm extends
});
xhr.open("GET", url);
xhr.send();
});
}
connectedCallback() {
this.promiseReady.then(form => {
+ this.appendChild(this.pageTitle);
this.appendChild(form);
let record = {};
this.formHandler = new EditAddress({
form,
}, record, {
DEFAULT_REGION: PaymentDialogUtils.DEFAULT_REGION,
getFormFormat: PaymentDialogUtils.getFormFormat,
@@ -74,16 +76,17 @@ export default class AddressForm extends
this.saveButton.textContent = this.dataset.saveButtonLabel;
let record = {};
let {
page,
savedAddresses,
} = state;
+ this.pageTitle.textContent = page.title;
this.genericErrorText.textContent = page.error;
let editing = !!page.guid;
// If an address is selected we want to edit it.
if (editing) {
record = savedAddresses[page.guid];
if (!record) {
--- a/browser/components/payments/res/containers/address-picker.js
+++ b/browser/components/payments/res/containers/address-picker.js
@@ -167,22 +167,24 @@ export default class AddressPicker exten
id: "address-page",
selectedStateKey: this.selectedStateKey,
},
};
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: {
throw new Error("Unexpected onClick");
}
}
this.requestStore.setState(nextState);
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -15,16 +15,17 @@ import paymentRequest from "../paymentRe
* XXX: Bug 1446164 - This form isn't localized when used via this custom element
* as it will be much easier to share the logic once we switch to Fluent.
*/
export default class BasicCardForm extends PaymentStateSubscriberMixin(HTMLElement) {
constructor() {
super();
+ this.pageTitle = document.createElement("h1");
this.genericErrorText = document.createElement("div");
this.backButton = document.createElement("button");
this.backButton.addEventListener("click", this);
this.saveButton = document.createElement("button");
this.saveButton.addEventListener("click", this);
@@ -48,16 +49,17 @@ export default class BasicCardForm exten
});
xhr.open("GET", url);
xhr.send();
});
}
connectedCallback() {
this.promiseReady.then(form => {
+ this.appendChild(this.pageTitle);
this.appendChild(form);
let record = {};
let addresses = [];
this.formHandler = new EditCreditCard({
form,
}, record, addresses, {
isCCNumber: PaymentDialogUtils.isCCNumber,
@@ -70,26 +72,28 @@ export default class BasicCardForm exten
this.appendChild(this.saveButton);
// Only call the connected super callback(s) once our markup is fully
// connected, including the shared form fetched asynchronously.
super.connectedCallback();
});
}
render(state) {
+ 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 {
- page,
- savedAddresses,
- selectedShippingAddress,
- } = state;
let basicCards = paymentRequest.getBasicCards(state);
this.genericErrorText.textContent = page.error;
let editing = !!page.guid;
this.form.querySelector("#cc-number").disabled = editing;
// If a card is selected we want to edit it.
--- a/browser/components/payments/res/containers/payment-dialog.js
+++ b/browser/components/payments/res/containers/payment-dialog.js
@@ -40,16 +40,17 @@ export default class PaymentDialog exten
this._viewAllButton = contents.querySelector("#view-all");
this._viewAllButton.addEventListener("click", this);
this._mainContainer = contents.getElementById("main-container");
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");
this._errorText = contents.querySelector("#error-text");
this._disabledOverlay = contents.getElementById("disabled-overlay");
@@ -230,16 +231,22 @@ export default class PaymentDialog exten
this._cachedState.selectedShippingOption = state.selectedShippingOption;
}
render(state) {
let request = state.request;
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;
totalAmountEl.currency = totalItem.amount.currency;
this._orderDetailsOverlay.hidden = !state.orderDetailsShowing;
this._errorText.textContent = paymentDetails.error;
@@ -264,18 +271,19 @@ export default class PaymentDialog exten
}
if (paymentOptions.requestPayerPhone) {
fieldNames.add("tel");
}
this._payerAddressPicker.setAttribute("address-fields", [...fieldNames].join(" "));
} 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"];
this._renderPayButton(state);
for (let page of this._mainContainer.querySelectorAll(":scope > .page")) {
page.hidden = state.page.id != page.id;
}
--- a/browser/components/payments/res/containers/payment-method-picker.js
+++ b/browser/components/payments/res/containers/payment-method-picker.js
@@ -131,22 +131,24 @@ export default class PaymentMethodPicker
page: {
id: "basic-card-page",
},
};
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: {
throw new Error("Unexpected onClick");
}
}
this.requestStore.setState(nextState);
--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -14,16 +14,26 @@
<!ENTITY shippingOptionsLabel "Shipping Options">
<!ENTITY paymentMethodsLabel "Payment Method">
<!ENTITY address.addLink.label "Add">
<!ENTITY address.editLink.label "Edit">
<!ENTITY basicCard.addLink.label "Add">
<!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">
<!ENTITY processingPaymentButton.label "Processing">
<!ENTITY successPaymentButton.label "Done">
<!ENTITY failPaymentButton.label "Fail">
<!ENTITY unknownPaymentButton.label "Unknown">
<!ENTITY orderDetailsLabel "Order Details">
@@ -87,16 +97,18 @@
data-edit-link-label="&address.editLink.label;"
selected-state-key="selectedShippingAddress"></address-picker>
<div class="shipping-related"><label>&shippingOptionsLabel;</label></div>
<shipping-option-picker class="shipping-related"></shipping-option-picker>
<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>
<div class="payer-related"><label>&payerLabel;</label></div>
<address-picker class="payer-related"
data-add-link-label="&payer.addLink.label;"
data-edit-link-label="&payer.editLink.label;"
@@ -149,11 +161,18 @@
<currency-amount></currency-amount>
</div>
</template>
</head>
<body dir="&locale.dir;">
<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>
--- a/browser/components/payments/test/browser/browser_address_edit.js
+++ b/browser/components/payments/test/browser/browser_address_edit.js
@@ -42,16 +42,19 @@ add_task(async function test_add_link()
is(addLink.textContent, "Add", "Add link text");
addLink.click();
let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
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);
if (!field) {
ok(false, `${key} field not found`);
}
field.value = val;
ok(!field.disabled, `Field #${key} shouldn't be disabled`);
@@ -117,16 +120,19 @@ add_task(async function test_edit_link()
is(editLink.textContent, "Edit", "Edit link text");
editLink.click();
let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
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);
field.value = val;
ok(!field.disabled, `Field #${key} shouldn't be disabled`);
}
content.document.querySelector("address-form button:last-of-type").click();
--- a/browser/components/payments/test/browser/browser_card_edit.js
+++ b/browser/components/payments/test/browser/browser_card_edit.js
@@ -16,16 +16,19 @@ add_task(async function test_add_link()
is(addLink.textContent, "Add", "Add link text");
addLink.click();
let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
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");
ok(Cu.waiveXrays(persistInput).checked, "persist checkbox should be checked by default");
let year = (new Date()).getFullYear();
let card = {
"cc-number": "4111111111111111",
@@ -75,16 +78,19 @@ add_task(async function test_edit_link()
is(editLink.textContent, "Edit", "Edit link text");
editLink.click();
let state = await PTU.DialogContentUtils.waitForState(content, (state) => {
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
"cc-name": "A. Nonymous",
"cc-exp-month": 3,
"cc-exp-year": nextYear,
};
--- a/browser/components/payments/test/mochitest/test_address_form.html
+++ b/browser/components/payments/test/mochitest/test_address_form.html
@@ -69,23 +69,26 @@ add_task(async function test_initialStat
});
add_task(async function test_backButton() {
let form = new AddressForm();
form.dataset.backButtonLabel = "Back";
await form.requestStore.setState({
page: {
id: "test-page",
+ title: "Sample page title",
},
});
await form.promiseReady;
display.appendChild(form);
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, {});
let {page} = await stateChangePromise;
is(page.id, "payment-summary", "Check initial page after appending");
form.remove();
--- a/browser/components/payments/test/mochitest/test_basic_card_form.html
+++ b/browser/components/payments/test/mochitest/test_basic_card_form.html
@@ -64,23 +64,25 @@ add_task(async function test_initialStat
});
add_task(async function test_backButton() {
let form = new BasicCardForm();
form.dataset.backButtonLabel = "Back";
await form.requestStore.setState({
page: {
id: "test-page",
+ title: "Sample page title 2",
},
});
await form.promiseReady;
display.appendChild(form);
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, {});
let {page} = await stateChangePromise;
is(page.id, "payment-summary", "Check initial page after appending");
form.remove();
});