зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
fc5fc8afb1
Коммит
08a50f34a1
|
@ -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, {});
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче