зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1642058: Add expiration date in card list view under Preferences r=zbraniecki,fluent-reviewers,MattN,flod
*** Differential Revision: https://phabricator.services.mozilla.com/D77953
This commit is contained in:
Adam Roach [:abr]
Родитель
67bca5c4f4
Коммит
1915544e02
|
|
@ -9,6 +9,7 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title data-localization="manageCreditCardsTitle"/>
|
||||
<link rel="localization" href="toolkit/payments/payments.ftl"/>
|
||||
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
|
||||
<link rel="stylesheet" href="chrome://formautofill/content/manageDialog.css" />
|
||||
<script src="chrome://formautofill/content/manageDialog.js"></script>
|
||||
|
|
|
|||
|
|
@ -156,12 +156,17 @@ class ManageRecords {
|
|||
let selectedGuids = this._selectedOptions.map(option => option.value);
|
||||
this.clearRecordElements();
|
||||
for (let record of records) {
|
||||
let { id, args, raw } = this.getLabelInfo(record);
|
||||
let option = new Option(
|
||||
this.getLabel(record),
|
||||
raw ?? "",
|
||||
record.guid,
|
||||
false,
|
||||
selectedGuids.includes(record.guid)
|
||||
);
|
||||
if (id) {
|
||||
document.l10n.setAttributes(option, id, args);
|
||||
}
|
||||
|
||||
option.record = record;
|
||||
this._elements.records.appendChild(option);
|
||||
}
|
||||
|
|
@ -345,8 +350,8 @@ class ManageAddresses extends ManageRecords {
|
|||
});
|
||||
}
|
||||
|
||||
getLabel(address) {
|
||||
return FormAutofillUtils.getAddressLabel(address);
|
||||
getLabelInfo(address) {
|
||||
return { raw: FormAutofillUtils.getAddressLabel(address) };
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -411,10 +416,12 @@ class ManageCreditCards extends ManageRecords {
|
|||
* @param {object} creditCard
|
||||
* @returns {string}
|
||||
*/
|
||||
getLabel(creditCard) {
|
||||
return CreditCard.getLabel({
|
||||
getLabelInfo(creditCard) {
|
||||
return CreditCard.getLabelInfo({
|
||||
name: creditCard["cc-name"],
|
||||
number: creditCard["cc-number"],
|
||||
month: creditCard["cc-exp-month"],
|
||||
year: creditCard["cc-exp-year"],
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ add_task(async function test_removingSingleAndMultipleCreditCards() {
|
|||
await saveCreditCard(TEST_CREDIT_CARD_1);
|
||||
await saveCreditCard(TEST_CREDIT_CARD_2);
|
||||
await saveCreditCard(TEST_CREDIT_CARD_3);
|
||||
await saveCreditCard(TEST_CREDIT_CARD_4);
|
||||
await saveCreditCard(TEST_CREDIT_CARD_5);
|
||||
|
||||
let win = window.openDialog(
|
||||
MANAGE_CREDIT_CARDS_DIALOG_URL,
|
||||
|
|
@ -56,25 +58,36 @@ add_task(async function test_removingSingleAndMultipleCreditCards() {
|
|||
let btnRemove = win.document.querySelector(TEST_SELECTORS.btnRemove);
|
||||
let btnEdit = win.document.querySelector(TEST_SELECTORS.btnEdit);
|
||||
|
||||
is(selRecords.length, 3, "Three credit cards");
|
||||
is(selRecords[0].text, "**** 7870", "Masked credit card 3");
|
||||
is(selRecords.length, 5, "Five credit cards");
|
||||
is(selRecords[0].text, "**** 1881, Chris P. Bacon", "Masked credit card 5");
|
||||
is(selRecords[1].text, "**** 5100", "Masked credit card 4");
|
||||
is(
|
||||
selRecords[1].text,
|
||||
"**** 1045, Timothy Berners-Lee",
|
||||
selRecords[2].text,
|
||||
"**** 7870, Expires on 1/2000",
|
||||
"Masked credit card 3"
|
||||
);
|
||||
is(
|
||||
selRecords[3].text,
|
||||
"**** 1045, Timothy Berners-Lee, Expires on 12/" +
|
||||
(new Date().getFullYear() + 10),
|
||||
"Masked credit card 2"
|
||||
);
|
||||
is(selRecords[2].text, "**** 1111, John Doe", "Masked credit card 1");
|
||||
is(
|
||||
selRecords[4].text,
|
||||
"**** 1111, John Doe, Expires on 4/" + new Date().getFullYear(),
|
||||
"Masked credit card 1"
|
||||
);
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(selRecords.children[0], {}, win);
|
||||
is(btnRemove.disabled, false, "Remove button enabled");
|
||||
is(btnEdit.disabled, false, "Edit button enabled");
|
||||
EventUtils.synthesizeMouseAtCenter(btnRemove, {}, win);
|
||||
await BrowserTestUtils.waitForEvent(selRecords, "RecordsRemoved");
|
||||
is(selRecords.length, 2, "Two credit cards left");
|
||||
is(selRecords.length, 4, "Four credit cards left");
|
||||
|
||||
EventUtils.synthesizeMouseAtCenter(selRecords.children[0], {}, win);
|
||||
EventUtils.synthesizeMouseAtCenter(
|
||||
selRecords.children[1],
|
||||
selRecords.children[3],
|
||||
{ shiftKey: true },
|
||||
win
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
/* exported MANAGE_ADDRESSES_DIALOG_URL, MANAGE_CREDIT_CARDS_DIALOG_URL, EDIT_ADDRESS_DIALOG_URL, EDIT_CREDIT_CARD_DIALOG_URL,
|
||||
BASE_URL, TEST_ADDRESS_1, TEST_ADDRESS_2, TEST_ADDRESS_3, TEST_ADDRESS_4, TEST_ADDRESS_5, TEST_ADDRESS_CA_1, TEST_ADDRESS_DE_1,
|
||||
TEST_ADDRESS_IE_1,
|
||||
TEST_CREDIT_CARD_1, TEST_CREDIT_CARD_2, TEST_CREDIT_CARD_3, FORM_URL, CREDITCARD_FORM_URL, CREDITCARD_FORM_IFRAME_URL
|
||||
TEST_CREDIT_CARD_1, TEST_CREDIT_CARD_2, TEST_CREDIT_CARD_3, TEST_CREDIT_CARD_4, TEST_CREDIT_CARD_5,
|
||||
FORM_URL, CREDITCARD_FORM_URL, CREDITCARD_FORM_IFRAME_URL
|
||||
FTU_PREF, ENABLED_AUTOFILL_ADDRESSES_PREF, AUTOFILL_CREDITCARDS_AVAILABLE_PREF, ENABLED_AUTOFILL_CREDITCARDS_PREF,
|
||||
SUPPORTED_COUNTRIES_PREF,
|
||||
SYNC_USERNAME_PREF, SYNC_ADDRESSES_PREF, SYNC_CREDITCARDS_PREF, SYNC_CREDITCARDS_AVAILABLE_PREF, CREDITCARDS_USED_STATUS_PREF,
|
||||
|
|
@ -154,6 +155,17 @@ const TEST_CREDIT_CARD_3 = {
|
|||
"cc-type": "mastercard",
|
||||
};
|
||||
|
||||
const TEST_CREDIT_CARD_4 = {
|
||||
"cc-number": "5105105105105100",
|
||||
"cc-type": "mastercard",
|
||||
};
|
||||
|
||||
const TEST_CREDIT_CARD_5 = {
|
||||
"cc-name": "Chris P. Bacon",
|
||||
"cc-number": "4012888888881881",
|
||||
"cc-type": "visa",
|
||||
};
|
||||
|
||||
const MAIN_BUTTON = "button";
|
||||
const SECONDARY_BUTTON = "secondaryButton";
|
||||
const MENU_BUTTON = "menubutton";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
# 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/.
|
||||
|
||||
|
||||
# This value isn't used directly, but is defined to avoid duplication
|
||||
# in the "credit-card-label-*" strings.
|
||||
#
|
||||
# Variables:
|
||||
# $month (String): Numeric month the credit card expires
|
||||
# $year (String): Four-digit year the credit card expires
|
||||
credit-card-expiration = Expires on { $month }/{ $year }
|
||||
|
||||
## These labels serve as a description of a credit card.
|
||||
## The description must include a credit card number, and may optionally
|
||||
## include a cardholder name, an expiration date, or both, so we have
|
||||
## four variations.
|
||||
|
||||
# Label for a credit card with a number only
|
||||
#
|
||||
# Variables:
|
||||
# $number (String): Partially-redacted credit card number
|
||||
credit-card-label-number = { $number }
|
||||
|
||||
# Label for a credit card with a number and name
|
||||
#
|
||||
# Variables:
|
||||
# $number (String): Partially-redacted credit card number
|
||||
# $name (String): Cardholder name
|
||||
credit-card-label-number-name = { $number }, { $name }
|
||||
|
||||
# Label for a credit card with a number and expiration date
|
||||
#
|
||||
# Variables:
|
||||
# $number (String): Partially-redacted credit card number
|
||||
credit-card-label-number-expiration = { $number }, { credit-card-expiration }
|
||||
|
||||
# Label for a credit card with a number, name, and expiration date
|
||||
#
|
||||
# Variables:
|
||||
# $number (String): Partially-redacted credit card number
|
||||
# $name (String): Cardholder name
|
||||
credit-card-label-number-name-expiration =
|
||||
{ $number }, { $name }, { credit-card-expiration }
|
||||
|
|
@ -212,8 +212,32 @@ class CreditCard {
|
|||
}
|
||||
|
||||
/**
|
||||
* Get credit card display label. It should display masked numbers and the
|
||||
* cardholder's name, separated by a comma.
|
||||
* Get credit card display label. It should display masked numbers, the
|
||||
* cardholder's name, and the expiration date, separated by a commas.
|
||||
*/
|
||||
static getLabelInfo({ number, name, month, year }) {
|
||||
let formatSelector = ["number"];
|
||||
if (name) {
|
||||
formatSelector.push("name");
|
||||
}
|
||||
if (month && year) {
|
||||
formatSelector.push("expiration");
|
||||
}
|
||||
let stringId = "credit-card-label-" + formatSelector.join("-");
|
||||
return {
|
||||
id: stringId,
|
||||
args: {
|
||||
number: CreditCard.getMaskedNumber(number),
|
||||
name,
|
||||
month: month?.toString(),
|
||||
year: year?.toString(),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* !!! DEPRECATED !!!
|
||||
* Please use getLabelInfo above, as it allows for localization.
|
||||
*/
|
||||
static getLabel({ number, name }) {
|
||||
let parts = [];
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче