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

MozReview-Commit-ID: 9B8aA6lPpJX

--HG--
extra : rebase_source : 82ce9c8cf952ce9e5ba945fde7640fa00378d936
This commit is contained in:
Jared Wein 2018-04-26 15:43:31 -07:00
Родитель fc5fc8afb1
Коммит 08a50f34a1
10 изменённых файлов: 62 добавлений и 7 удалений

Просмотреть файл

@ -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;

Просмотреть файл

@ -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: {

Просмотреть файл

@ -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;

Просмотреть файл

@ -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"];

Просмотреть файл

@ -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: {

Просмотреть файл

@ -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>

Просмотреть файл

@ -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);

Просмотреть файл

@ -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

Просмотреть файл

@ -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, {});

Просмотреть файл

@ -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, {});