Bug 1462461 - Show the back button in the basic card page during on-boarding.r?MattN
MozReview-Commit-ID: 1a8YtdbtV2M
--- a/browser/components/payments/res/containers/basic-card-form.js
+++ b/browser/components/payments/res/containers/basic-card-form.js
@@ -113,18 +113,19 @@ export default class BasicCardForm exten
this.cancelButton.textContent = this.dataset.cancelButtonLabel;
this.backButton.textContent = this.dataset.backButtonLabel;
this.saveButton.textContent = this.dataset.saveButtonLabel;
this.persistCheckbox.label = this.dataset.persistCheckboxLabel;
this.addressAddLink.textContent = this.dataset.addressAddLinkLabel;
this.addressEditLink.textContent = this.dataset.addressEditLinkLabel;
- // The back button is temporarily hidden(See Bug 1462461).
- this.backButton.hidden = !!page.onboardingWizard;
+ // The next line needs an onboarding check since we don't set previousId
+ // when navigating to add/edit directly from the summary page.
+ this.backButton.hidden = !page.previousId && page.onboardingWizard;
this.cancelButton.hidden = !page.onboardingWizard;
let record = {};
let basicCards = paymentRequest.getBasicCards(state);
let addresses = paymentRequest.getAddresses(state);
this.genericErrorText.textContent = page.error;
@@ -205,21 +206,49 @@ export default class BasicCardForm exten
if (evt.target == this.addressEditLink && selectedOption && selectedOption.value) {
nextState["address-page"].title = this.dataset.billingAddressTitleEdit;
nextState["address-page"].guid = selectedOption.value;
}
this.requestStore.setState(nextState);
break;
}
case this.backButton: {
- this.requestStore.setState({
+ let {
+ page,
+ request,
+ "address-page": addressPage,
+ "basic-card-page": basicCardPage,
+ selectedShippingAddress,
+ } = this.requestStore.getState();
+
+ let nextState = {
page: {
- id: "payment-summary",
+ id: page.previousId || "payment-summary",
+ onboardingWizard: page.onboardingWizard,
},
- });
+ };
+
+ let addressPageState;
+ if (page.onboardingWizard) {
+ if (request.paymentOptions.requestShipping) {
+ addressPageState = Object.assign({}, addressPage, {guid: selectedShippingAddress});
+ } else {
+ addressPageState =
+ Object.assign({}, addressPage, {guid: basicCardPage.billingAddressGUID});
+ }
+
+ let basicCardPageState = Object.assign({}, basicCardPage, {preserveFieldValues: true});
+
+ Object.assign(nextState, {
+ "address-page": addressPageState,
+ "basic-card-page": basicCardPageState,
+ });
+ }
+
+ this.requestStore.setState(nextState);
break;
}
case this.saveButton: {
this.saveRecord();
break;
}
default: {
throw new Error("Unexpected click target");
--- a/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
+++ b/browser/components/payments/test/browser/browser_payments_onboarding_wizard.js
@@ -401,8 +401,103 @@ add_task(async function test_on_boarding
info("Closing the payment dialog");
spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
cleanupFormAutofillStorage();
});
});
+
+add_task(async function test_back_button_on_basic_card_page_during_onboarding() {
+ 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,
+ merchantTaskFn: PTU.ContentTasks.createAndShowRequest,
+ });
+
+ await spawnPaymentDialogTask(frame, async function() {
+ let {
+ PaymentTestUtils: PTU,
+ } = ChromeUtils.import("resource://testing-common/PaymentTestUtils.jsm", {});
+
+ await PTU.DialogContentUtils.waitForState(content, (state) => {
+ return state.page.id == "address-page";
+ }, "Address page is shown first if there are saved addresses during on boarding");
+
+ info("Checking if the address page has been rendered");
+ let addressSaveButton = content.document.querySelector("address-form .save-button");
+ ok(content.isVisible(addressSaveButton), "Address save button is rendered");
+
+ for (let [key, val] of Object.entries(PTU.Addresses.TimBL2)) {
+ 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`);
+ }
+ content.document.querySelector("address-form .save-button").click();
+
+ await PTU.DialogContentUtils.waitForState(content, (state) => {
+ return state.page.id == "basic-card-page";
+ }, "Basic card page is shown next");
+
+ info("Checking if basic card page is rendered");
+ let basicCardBackButton = content.document.querySelector("basic-card-form .back-button");
+ ok(content.isVisible(basicCardBackButton), "Back button is visible on the basic card page");
+
+ info("Partially fill basic card form");
+ let field = content.document.getElementById("cc-number");
+ field.value = PTU.BasicCards.JohnDoe["cc-number"];
+
+ info("Clicking on the back button to edit address saved in the previous step");
+ basicCardBackButton.click();
+
+ await PTU.DialogContentUtils.waitForState(content, (state) => {
+ return state.page.id == "address-page" &&
+ state["address-page"].guid == state["basic-card-page"].billingAddressGUID;
+ }, "Address page is shown again");
+
+ info("Checking if the address page has been rendered");
+ addressSaveButton = content.document.querySelector("address-form .save-button");
+ ok(content.isVisible(addressSaveButton), "Address save button is rendered");
+
+ info("Checking if the address saved in the last step is correctly loaded in the form");
+ field = content.document.getElementById("given-name");
+ ok(field.value, PTU.Addresses.TimBL2["given-name"],
+ "Given name field value is correctly loaded");
+
+ info("Editing the address and saving again");
+ field.value = "John";
+ addressSaveButton.click();
+
+ info("Checking if the address was correctly edited");
+ await PTU.DialogContentUtils.waitForState(content, (state) => {
+ return state.page.id == "basic-card-page" &&
+ // eslint-disable-next-line max-len
+ state.savedAddresses[state["basic-card-page"].billingAddressGUID]["given-name"] == "John";
+ }, "Address was correctly edited and saved");
+
+ // eslint-disable-next-line max-len
+ info("Checking if the basic card form is now rendered and if the field values from before are preserved");
+ let basicCardCancelButton = content.document.querySelector("basic-card-form .cancel-button");
+ ok(content.isVisible(basicCardCancelButton),
+ "Cancel button is visible on the basic card page");
+ field = content.document.getElementById("cc-number");
+ ok(field.value, PTU.BasicCards.JohnDoe["cc-number"], "Values in the form are preserved");
+ });
+
+ info("Closing the payment dialog");
+ spawnPaymentDialogTask(frame, PTU.DialogContentTasks.manuallyClickCancel);
+ await BrowserTestUtils.waitForCondition(() => win.closed, "dialog should be closed");
+
+ cleanupFormAutofillStorage();
+ });
+});