Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1432921 - Show an address input form before the summary view for users without a saved address.r=MattN

Browse Source 
MozReview-Commit-ID: 3T25SXyIiGI

--HG--
extra : rebase_source : 57968f37af05faeb166853d2d26d8dde8e81d4bd
This commit is contained in:
prathiksha 2018-05-09 13:26:47 -07:00
parent cb74ea4e08
commit 78362e8ee9
8 changed files with 113 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
browser/components/payments/res/containers/address-form.js
View File

@ -21,6 +21,10 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
this.pageTitle = document.createElement("h1");
this.genericErrorText = document.createElement("div");
this.cancelButton = document.createElement("button");
this.cancelButton.id = "address-page-cancel-button";
this.cancelButton.addEventListener("click", this);
this.backButton = document.createElement("button");
this.backButton.addEventListener("click", this);
@ -63,6 +67,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
});
this.appendChild(this.genericErrorText);
this.appendChild(this.cancelButton);
this.appendChild(this.backButton);
this.appendChild(this.saveButton);
// Only call the connected super callback(s) once our markup is fully
@ -72,6 +77,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
}
render(state) {
this.cancelButton.textContent = this.dataset.cancelButtonLabel;
this.backButton.textContent = this.dataset.backButtonLabel;
this.saveButton.textContent = this.dataset.saveButtonLabel;
@ -81,6 +87,8 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
savedAddresses,
} = state;
this.backButton.hidden = page.onboardingWizard;
if (page.addressFields) {
this.setAttribute("address-fields", page.addressFields);
} else {
@ -114,6 +122,10 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
onClick(evt) {
switch (evt.target) {
case this.cancelButton: {
paymentRequest.cancel();
break;
}
case this.backButton: {
this.requestStore.setState({
page: {
@ -142,6 +154,7 @@ export default class AddressForm extends PaymentStateSubscriberMixin(HTMLElement
errorStateChange: {
page: {
id: "address-page",
onboardingWizard: page.onboardingWizard,
error: this.dataset.errorGenericSave,
},
},

2
browser/components/payments/res/mixins/PaymentStateSubscriberMixin.js
View File

@ -17,6 +17,8 @@ export let requestStore = new PaymentsStore({
orderDetailsShowing: false,
page: {
id: "payment-summary",
// onboardingWizard: true,
// error: "My error",
},
request: {
tabId: null,

17
browser/components/payments/res/paymentRequest.js
View File

@ -114,12 +114,25 @@ var paymentRequest = {
log.debug("onShowPaymentRequest: domReadyPromise resolved");
log.debug("onShowPaymentRequest, isPrivate?", detail.isPrivate);
document.querySelector("payment-dialog").setStateFromParent({
let state = {
request: detail.request,
savedAddresses: detail.savedAddresses,
savedBasicCards: detail.savedBasicCards,
isPrivate: detail.isPrivate,
});
page: {
id: "payment-summary",
},
};
if (Object.keys(detail.savedAddresses).length == 0) {
state.page = {
id: "address-page",
onboardingWizard: true,
};
}
document.querySelector("payment-dialog").setStateFromParent(state);
},
cancel() {

2
browser/components/payments/res/paymentRequest.xhtml
View File

@ -43,6 +43,7 @@
<!ENTITY basicCardPage.saveButton.label "Save">
<!ENTITY basicCardPage.persistCheckbox.label "Save credit card to Firefox (Security code will not be saved)">
<!ENTITY addressPage.error.genericSave "There was an error saving the address.">
<!ENTITY addressPage.cancelButton.label "Cancel">
<!ENTITY addressPage.backButton.label "Back">
<!ENTITY addressPage.saveButton.label "Save">
]>
@ -143,6 +144,7 @@
<address-form id="address-page"
class="page"
data-error-generic-save="&addressPage.error.genericSave;"
data-cancel-button-label="&addressPage.cancelButton.label;"
data-back-button-label="&addressPage.backButton.label;"
data-save-button-label="&addressPage.saveButton.label;"
hidden="hidden"></address-form>

1
browser/components/payments/test/browser/browser.ini
View File

@ -10,6 +10,7 @@ support-files =
[browser_card_edit.js]
[browser_change_shipping.js]
[browser_host_name.js]
[browser_payments_onboarding_wizard.js]
[browser_profile_storage.js]
[browser_request_serialization.js]
[browser_request_shipping.js]

78
browser/components/payments/test/browser/browser_payments_onboarding_wizard.js Normal file
View File

@ -0,0 +1,78 @@
"use strict";
add_task(async function test_onboarding_wizard_without_saved_addresses() {
await BrowserTestUtils.withNewTab({
gBrowser,
url: BLANK_PAGE_URL,
}, async browser => {
cleanupFormAutofillStorage();
info("Opening the payment dialog");
let {win, frame} =
await setupPaymentDialog(browser, {
methodData: [PTU.MethodData.basicCard],
details: PTU.Details.total60USD,
options: PTU.Options.requestShippingOption,
merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
});
info("Checking if the address page has been rendered");
await spawnPaymentDialogTask(frame, async function() {
let {
PaymentTestUtils: PTU,
} = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
await ContentTaskUtils.waitForCondition(() =>
content.document.getElementById("address-page-cancel-button"), "Address page is rendered");
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "address-page";
}, "Address page is shown first if there are no saved addresses");
});
info("Closing the payment dialog");
spawnPaymentDialogTask(frame, async function() {
content.document.getElementById("address-page-cancel-button").click();
});
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
});
});
add_task(async function test_onboarding_wizard_with_saved_addresses() {
await BrowserTestUtils.withNewTab({
gBrowser,
url: BLANK_PAGE_URL,
}, async browser => {
addSampleAddressesAndBasicCard();
info("Opening the payment dialog");
let {win, frame} =
await setupPaymentDialog(browser, {
methodData: [PTU.MethodData.basicCard],
details: PTU.Details.total60USD,
merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
});
info("Checking if the payment summary page is now visible");
await spawnPaymentDialogTask(frame, async function() {
let {
PaymentTestUtils: PTU,
} = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
await ContentTaskUtils.waitForCondition(() => content.document.getElementById("cancel"),
"Payment summary page is rendered");
await PTU.DialogContentUtils.waitForState(content, (state) => {
return state.page.id == "payment-summary";
}, "Payment summary page is shown when there are saved addresses");
});
info("Closing the payment dialog");
spawnPaymentDialogTask(frame, async function() {
content.document.getElementById("address-page-cancel-button").click();
});
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
cleanupFormAutofillStorage();
});
});

13
browser/components/payments/test/browser/browser_request_shipping.js
View File

@ -1,18 +1,7 @@
"use strict";
add_task(async function setup() {
let onChanged = TestUtils.topicObserved("formautofill-storage-changed",
(subject, data) => data == "add");
let card = {
"cc-exp-month": 1,
"cc-exp-year": 9999,
"cc-name": "John Doe",
"cc-number": "999999999999",
};
formAutofillStorage.creditCards.add(card);
await onChanged;
await addSampleAddressesAndBasicCard();
});
add_task(async function test_request_shipping_present() {

1
browser/components/payments/test/mochitest/test_address_form.html
View File

@ -136,6 +136,7 @@ add_task(async function test_saveButton() {
page: {
id: "address-page",
error: "Generic error",
onboardingWizard: undefined,
},
},
guid: undefined,