Bug 1435105 - Vary the payment request address label according to 'shippingType'. r?mattn
MozReview-Commit-ID: 6HiraY6BbKb
--- a/toolkit/components/payments/res/containers/payment-dialog.js
+++ b/toolkit/components/payments/res/containers/payment-dialog.js
@@ -26,16 +26,17 @@ class PaymentDialog extends PaymentState
this._payButton = contents.querySelector("#pay");
this._payButton.addEventListener("click", this);
this._viewAllButton = contents.querySelector("#view-all");
this._viewAllButton.addEventListener("click", this);
this._orderDetailsOverlay = contents.querySelector("#order-details-overlay");
+ this._shippingTypeLabel = contents.querySelector("#shipping-type-label");
this._shippingRequestedEls = contents.querySelectorAll(".shippingRequested");
this._errorText = contents.querySelector("#error-text");
this._disabledOverlay = contents.getElementById("disabled-overlay");
this.appendChild(contents);
super.connectedCallback();
@@ -184,19 +185,23 @@ class PaymentDialog extends PaymentState
let totalItem = paymentDetails.totalItem;
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;
+ let paymentOptions = request.paymentOptions;
for (let element of this._shippingRequestedEls) {
- element.hidden = !request.paymentOptions.requestShipping;
+ element.hidden = !paymentOptions.requestShipping;
}
+ let shippingType = paymentOptions.shippingType || "shipping";
+ this._shippingTypeLabel.querySelector("label").textContent =
+ this._shippingTypeLabel.dataset[shippingType + "AddressLabel"];
this._renderPayButton(state);
let {
changesPrevented,
completionState,
} = state;
if (changesPrevented) {--- a/toolkit/components/payments/res/paymentRequest.xhtml
+++ b/toolkit/components/payments/res/paymentRequest.xhtml
@@ -1,16 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html [
<!ENTITY viewAllItems "View All Items">
<!ENTITY paymentSummaryTitle "Your Payment">
<!ENTITY shippingAddressLabel "Shipping Address">
+ <!ENTITY deliveryAddressLabel "Delivery Address">
+ <!ENTITY pickupAddressLabel "Pickup Address">
<!ENTITY shippingOptionsLabel "Shipping Options">
<!ENTITY paymentMethodsLabel "Payment Method">
<!ENTITY cancelPaymentButton.label "Cancel">
<!ENTITY approvePaymentButton.label "Pay">
<!ENTITY processingPaymentButton.label "Processing">
<!ENTITY orderDetailsLabel "Order Details">
<!ENTITY orderTotalLabel "Total">
]>
@@ -60,17 +62,21 @@
</div>
</header>
<div id="main-container">
<section id="payment-summary">
<h1>&paymentSummaryTitle;</h1>
<section>
- <div class="shippingRequested"><label>&shippingAddressLabel;</label></div>
+ <div class="shippingRequested"
+ id="shipping-type-label"
+ data-shipping-address-label="&shippingAddressLabel;"
+ data-delivery-address-label="&deliveryAddressLabel;"
+ data-pickup-address-label="&pickupAddressLabel;"><label></label></div>
<address-picker class="shippingRequested" selected-state-key="selectedShippingAddress"></address-picker>
<div class="shippingRequested"><label>&shippingOptionsLabel;</label></div>
<shipping-option-picker class="shippingRequested"></shipping-option-picker>
<div><label>&paymentMethodsLabel;</label></div>
<payment-method-picker selected-state-key="selectedPaymentCard"></payment-method-picker>
<div><label id="error-text"></label></div>
</section>
--- a/toolkit/components/payments/test/PaymentTestUtils.jsm
+++ b/toolkit/components/payments/test/PaymentTestUtils.jsm
@@ -84,16 +84,22 @@ this.PaymentTestUtils = {
},
DialogContentTasks: {
isElementVisible: selector => {
let element = content.document.querySelector(selector);
return !element.hidden;
},
+ getElementTextContent: selector => {
+ let doc = content.document;
+ let element = doc.querySelector(selector);
+ return element.textContent;
+ },
+
getShippingOptions: () => {
let select = content.document.querySelector("shipping-option-picker > rich-select");
let popupBox = Cu.waiveXrays(select).popupBox;
let selectedOptionIndex = Array.from(popupBox.children)
.findIndex(item => item.hasAttribute("selected"));
let selectedOption = popupBox.children[selectedOptionIndex];
let currencyAmount = selectedOption.querySelector("currency-amount");
return {
@@ -101,24 +107,16 @@ this.PaymentTestUtils = {
selectedOptionIndex,
selectedOptionValue: selectedOption.getAttribute("value"),
selectedOptionLabel: selectedOption.getAttribute("label"),
selectedOptionCurrency: currencyAmount.getAttribute("currency"),
selectedOptionAmount: currencyAmount.getAttribute("amount"),
};
},
- getErrorDetails: () => {
- let doc = content.document;
- let errorText = doc.querySelector("#error-text");
- return {
- text: errorText.textContent,
- };
- },
-
selectShippingAddressByCountry: country => {
let doc = content.document;
let addressPicker =
doc.querySelector("address-picker[selected-state-key='selectedShippingAddress']");
let select = addressPicker.querySelector("rich-select");
let option = select.querySelector(`[country="${country}"]`);
select.click();
option.click();--- a/toolkit/components/payments/test/browser/browser_request_shipping.js
+++ b/toolkit/components/payments/test/browser/browser_request_shipping.js
@@ -15,37 +15,58 @@ add_task(async function setup() {
await onChanged;
});
add_task(async function test_request_shipping_present() {
await BrowserTestUtils.withNewTab({
gBrowser,
url: BLANK_PAGE_URL,
}, async browser => {
- let {win, frame} =
- await setupPaymentDialog(browser, {
- methodData: [PTU.MethodData.basicCard],
- details: PTU.Details.twoShippingOptions,
- options: PTU.Options.requestShippingOption,
- taskFn: PTU.ContentTasks.createAndShowRequest,
+ for (let [shippingKey, shippingString] of [
+ [null, "Shipping Address"],
+ ["shipping", "Shipping Address"],
+ ["delivery", "Delivery Address"],
+ ["pickup", "Pickup Address"],
+ ]) {
+ let options = {
+ requestShipping: true,
+ };
+ if (shippingKey) {
+ options.shippingType = shippingKey;
}
- );
+ let {win, frame} =
+ await setupPaymentDialog(browser, {
+ methodData: [PTU.MethodData.basicCard],
+ details: PTU.Details.twoShippingOptions,
+ options,
+ taskFn: PTU.ContentTasks.createAndShowRequest,
+ }
+ );
- let isShippingOptionsVisible =
- await spawnPaymentDialogTask(frame,
- PTU.DialogContentTasks.isElementVisible,
- "shipping-option-picker");
- ok(isShippingOptionsVisible, "shipping-option-picker should be visible");
- let isShippingAddressVisible =
- await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible,
- "address-picker[selected-state-key='selectedShippingAddress']");
- ok(isShippingAddressVisible, "shipping address picker should be visible");
+ let isShippingOptionsVisible =
+ await spawnPaymentDialogTask(frame,
+ PTU.DialogContentTasks.isElementVisible,
+ "shipping-option-picker");
+ ok(isShippingOptionsVisible, "shipping-option-picker should be visible");
+ let addressSelector = "address-picker[selected-state-key='selectedShippingAddress']";
+ let isShippingAddressVisible =
+ await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.isElementVisible,
+ addressSelector);
+ ok(isShippingAddressVisible, "shipping address picker should be visible");
- spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
- await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
+ let shippingOptionText =
+ await spawnPaymentDialogTask(frame,
+ PTU.DialogContentTasks.getElementTextContent,
+ "#shipping-type-label");
+ is(shippingOptionText, shippingString,
+ "Label should be match shipping type: " + shippingKey);
+
+ spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
+ await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
+ }
});
});
add_task(async function test_request_shipping_not_present() {
await BrowserTestUtils.withNewTab({
gBrowser,
url: BLANK_PAGE_URL,
}, async browser => {--- a/toolkit/components/payments/test/browser/browser_shippingaddresschange_error.js
+++ b/toolkit/components/payments/test/browser/browser_shippingaddresschange_error.js
@@ -35,18 +35,20 @@ add_task(async function test_show_error_
await spawnPaymentDialogTask(frame,
PTU.DialogContentTasks.selectShippingOptionById,
"1");
info("awaiting the shippingoptionchange event");
await ContentTask.spawn(browser, {
eventName: "shippingoptionchange",
}, PTU.ContentTasks.awaitPaymentRequestEventPromise);
- let errors = await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getErrorDetails);
- is(errors.text, EXPECTED_ERROR_TEXT, "Error text should be present on dialog");
+ let errorText = await spawnPaymentDialogTask(frame,
+ PTU.DialogContentTasks.getElementTextContent,
+ "#error-text");
+ is(errorText, EXPECTED_ERROR_TEXT, "Error text should be present on dialog");
info("setting up the event handler for shippingaddresschange");
await ContentTask.spawn(browser, {
eventName: "shippingaddresschange",
details: {
error: "",
shippingOptions: PTU.Details.twoShippingOptions.shippingOptions,
total: {
@@ -60,17 +62,19 @@ add_task(async function test_show_error_
}, PTU.ContentTasks.updateWith);
await spawnPaymentDialogTask(frame,
PTU.DialogContentTasks.selectShippingAddressByCountry,
"DE");
info("awaiting the shippingaddresschange event");
await ContentTask.spawn(browser, {
eventName: "shippingaddresschange",
}, PTU.ContentTasks.awaitPaymentRequestEventPromise);
- errors = await spawnPaymentDialogTask(frame, PTU.DialogContentTasks.getErrorDetails);
- is(errors.text, "", "Error text should not be present on dialog");
+ errorText = await spawnPaymentDialogTask(frame,
+ PTU.DialogContentTasks.getElementTextContent,
+ "#error-text");
+ is(errorText, "", "Error text should not be present on dialog");
info("clicking cancel");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
});
});