diff options
Diffstat (limited to '')
48 files changed, 6220 insertions, 0 deletions
diff --git a/browser/components/payments/res/PaymentsStore.js b/browser/components/payments/res/PaymentsStore.js new file mode 100644 index 0000000000..7e439076d8 --- /dev/null +++ b/browser/components/payments/res/PaymentsStore.js @@ -0,0 +1,97 @@ +/* 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/. */ + +/** + * The PaymentsStore class provides lightweight storage with an async publish/subscribe mechanism. + * Synchronous state changes are batched to improve application performance and to reduce partial + * state propagation. + */ + +export default class PaymentsStore { + /** + * @param {object} [defaultState = {}] The initial state of the store. + */ + constructor(defaultState = {}) { + this._defaultState = Object.assign({}, defaultState); + this._state = defaultState; + this._nextNotifification = 0; + this._subscribers = new Set(); + } + + /** + * Get the current state as a shallow clone with a shallow freeze. + * You shouldn't modify any part of the returned state object as that would bypass notifying + * subscribers and could lead to subscribers assuming old state. + * + * @returns {Object} containing the current state + */ + getState() { + return Object.freeze(Object.assign({}, this._state)); + } + + /** + * Used for testing to reset to the default state from the constructor. + * @returns {Promise} returned by setState. + */ + async reset() { + return this.setState(this._defaultState); + } + + /** + * Augment the current state with the keys of `obj` and asynchronously notify + * state subscribers. As a result, multiple synchronous state changes will lead + * to a single subscriber notification which leads to better performance and + * reduces partial state changes. + * + * @param {Object} obj The object to augment the state with. Keys in the object + * will be shallow copied with Object.assign. + * + * @example If the state is currently {a:3} then setState({b:"abc"}) will result in a state of + * {a:3, b:"abc"}. + */ + async setState(obj) { + Object.assign(this._state, obj); + let thisChangeNum = ++this._nextNotifification; + + // Let any synchronous setState calls that happen after the current setState call + // complete first. + // Their effects on the state will be batched up before the callback is actually called below. + await Promise.resolve(); + + // Don't notify for state changes that are no longer the most recent. We only want to call the + // callback once with the latest state. + if (thisChangeNum !== this._nextNotifification) { + return; + } + + for (let subscriber of this._subscribers) { + try { + subscriber.stateChangeCallback(this.getState()); + } catch (ex) { + console.error(ex); + } + } + } + + /** + * Subscribe the object to state changes notifications via a `stateChangeCallback` method. + * + * @param {Object} component to receive state change callbacks via a `stateChangeCallback` method. + * If the component is already subscribed, do nothing. + */ + subscribe(component) { + if (this._subscribers.has(component)) { + return; + } + + this._subscribers.add(component); + } + + /** + * @param {Object} component to stop receiving state change callbacks. + */ + unsubscribe(component) { + this._subscribers.delete(component); + } +} diff --git a/browser/components/payments/res/components/accepted-cards.css b/browser/components/payments/res/components/accepted-cards.css new file mode 100644 index 0000000000..575e17b4f1 --- /dev/null +++ b/browser/components/payments/res/components/accepted-cards.css @@ -0,0 +1,108 @@ +/* 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/. */ + +accepted-cards { + margin: 1em 0; + display: flex; + flex-wrap: nowrap; + align-items: first baseline; +} + +.accepted-cards-label { + display: inline-block; + font-size: smaller; + flex: 0 2 content; + white-space: nowrap; +} + +.accepted-cards-list { + display: inline-block; + list-style-type: none; + margin: 0; + padding: 0; + flex: 2 1 auto; +} + +.accepted-cards-list > .accepted-cards-item { + display: inline-block; + width: 32px; + height: 32px; + padding: 0; + margin: 5px 0; + margin-inline-start: 10px; + vertical-align: middle; + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +/* placeholders for specific card icons we don't yet have assets for */ +accepted-cards:not(.branded) .accepted-cards-item[data-network-id] { + width: 48px; + text-align: center; + background-image: url("./card-icon.svg"); + -moz-context-properties: fill-opacity; + fill-opacity: 0.5; +} +accepted-cards:not(.branded) .accepted-cards-item[data-network-id]::after { + box-sizing: border-box; + content: attr(data-network-id); + padding: 8px 4px 0 4px; + text-align: center; + font-size: 0.7rem; + display: inline-block; + overflow: hidden; + width: 100%; +} + +/* + We use .png / @2x.png images where we don't yet have a vector version of a logo +*/ +.accepted-cards-item[data-network-id="amex"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-amex.png"); +} + +.accepted-cards-item[data-network-id="cartebancaire"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-cartebancaire.png"); +} + +.accepted-cards-item[data-network-id="diners"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-diners.svg"); +} + +.accepted-cards-item[data-network-id="discover"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-discover.png"); +} + +.accepted-cards-item[data-network-id="jcb"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-jcb.svg"); +} + +.accepted-cards-item[data-network-id="mastercard"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-mastercard.svg"); +} + +.accepted-cards-item[data-network-id="mir"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-mir.svg"); +} + +.accepted-cards-item[data-network-id="unionpay"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-unionpay.svg"); +} + +.accepted-cards-item[data-network-id="visa"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-visa.svg"); +} + +@media (min-resolution: 1.1dppx) { + .accepted-cards-item[data-network-id="amex"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-amex@2x.png"); + } + .accepted-cards-item[data-network-id="cartebancaire"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-cartebancaire@2x.png"); + } + .accepted-cards-item[data-network-id="discover"] { + background-image: url("chrome://formautofill/content/third-party/cc-logo-discover@2x.png"); + } +} diff --git a/browser/components/payments/res/components/accepted-cards.js b/browser/components/payments/res/components/accepted-cards.js new file mode 100644 index 0000000000..c66e040576 --- /dev/null +++ b/browser/components/payments/res/components/accepted-cards.js @@ -0,0 +1,75 @@ +/* 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/. */ + +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <accepted-cards></accepted-cards> + */ + +export default class AcceptedCards extends PaymentStateSubscriberMixin( + HTMLElement +) { + constructor() { + super(); + + this._listEl = document.createElement("ul"); + this._listEl.classList.add("accepted-cards-list"); + this._labelEl = document.createElement("span"); + this._labelEl.classList.add("accepted-cards-label"); + } + + connectedCallback() { + this.label = this.getAttribute("label"); + this.appendChild(this._labelEl); + + this._listEl.textContent = ""; + let allNetworks = PaymentDialogUtils.getCreditCardNetworks(); + for (let network of allNetworks) { + let item = document.createElement("li"); + item.classList.add("accepted-cards-item"); + item.dataset.networkId = network; + item.setAttribute("aria-role", "image"); + item.setAttribute("aria-label", network); + this._listEl.appendChild(item); + } + let isBranded = PaymentDialogUtils.isOfficialBranding(); + this.classList.toggle("branded", isBranded); + this.appendChild(this._listEl); + // Only call the connected super callback(s) once our markup is fully + // connected + super.connectedCallback(); + } + + render(state) { + let basicCardMethod = state.request.paymentMethods.find( + method => method.supportedMethods == "basic-card" + ); + let merchantNetworks = + basicCardMethod && + basicCardMethod.data && + basicCardMethod.data.supportedNetworks; + if (merchantNetworks && merchantNetworks.length) { + for (let item of this._listEl.children) { + let network = item.dataset.networkId; + item.hidden = !(network && merchantNetworks.includes(network)); + } + this.hidden = false; + } else { + // hide the whole list if the merchant didn't specify a preference + this.hidden = true; + } + } + + set label(value) { + this._labelEl.textContent = value; + } + + get acceptedItems() { + return Array.from(this._listEl.children).filter(item => !item.hidden); + } +} + +customElements.define("accepted-cards", AcceptedCards); diff --git a/browser/components/payments/res/components/address-option.css b/browser/components/payments/res/components/address-option.css new file mode 100644 index 0000000000..9619048ae6 --- /dev/null +++ b/browser/components/payments/res/components/address-option.css @@ -0,0 +1,29 @@ +/* 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/. */ + +address-option.rich-option { + grid-row-gap: 5px; +} + +address-option > .line { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +address-option > .line:empty { + /* Hide the 2nd line in cases where it's empty + (e.g. payer field with one or two fields requested) */ + display: none; +} + +address-option > .line > span { + white-space: nowrap; +} + +address-option > .line > span:empty::before { + /* Show the string for missing fields in grey when the field is empty */ + color: GrayText; + content: attr(data-missing-string); +} diff --git a/browser/components/payments/res/components/address-option.js b/browser/components/payments/res/components/address-option.js new file mode 100644 index 0000000000..2661f3e231 --- /dev/null +++ b/browser/components/payments/res/components/address-option.js @@ -0,0 +1,159 @@ +/* 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/. */ + +/* import-globals-from ../../../../../browser/extensions/formautofill/content/autofillEditForms.js*/ +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; +import RichOption from "./rich-option.js"; +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * Up to two-line address display. After bug 1475684 this will also be used for + * the single-line <option> substitute too. + * + * <rich-select> + * <address-option guid="98hgvnbmytfc" + * address-level1="MI" + * address-level2="Some City" + * email="foo@example.com" + * country="USA" + * name="Jared Wein" + * postal-code="90210" + * street-address="1234 Anywhere St" + * tel="+1 650 555-5555"></address-option> + * </rich-select> + * + * Attribute names follow FormAutofillStorage.jsm. + */ + +export default class AddressOption extends ObservedPropertiesMixin(RichOption) { + static get recordAttributes() { + return [ + "address-level1", + "address-level2", + "address-level3", + "country", + "email", + "guid", + "name", + "organization", + "postal-code", + "street-address", + "tel", + ]; + } + + static get observedAttributes() { + return RichOption.observedAttributes.concat( + AddressOption.recordAttributes, + "address-fields", + "break-after-nth-field", + "data-field-separator" + ); + } + + constructor() { + super(); + + this._line1 = document.createElement("div"); + this._line1.classList.add("line"); + this._line2 = document.createElement("div"); + this._line2.classList.add("line"); + + for (let name of AddressOption.recordAttributes) { + this[`_${name}`] = document.createElement("span"); + this[`_${name}`].classList.add(name); + // XXX Bug 1490816: Use appropriate strings + let missingValueString = + name.replace(/(-|^)([a-z])/g, ($0, $1, $2) => { + return $1.replace("-", " ") + $2.toUpperCase(); + }) + " Missing"; + this[`_${name}`].dataset.missingString = missingValueString; + } + } + + connectedCallback() { + this.appendChild(this._line1); + this.appendChild(this._line2); + super.connectedCallback(); + } + + static formatSingleLineLabel(address, addressFields) { + return PaymentDialogUtils.getAddressLabel(address, addressFields); + } + + get requiredFields() { + if (this.hasAttribute("address-fields")) { + let names = this.getAttribute("address-fields") + .trim() + .split(/\s+/); + if (names.length) { + return names; + } + } + + return [ + // "address-level1", // TODO: bug 1481481 - not required for some countries e.g. DE + "address-level2", + "country", + "name", + "postal-code", + "street-address", + ]; + } + + render() { + // Clear the lines of the fields so we can append only the ones still + // visible in the correct order below. + this._line1.textContent = ""; + this._line2.textContent = ""; + + // Fill the fields with their text/strings. + // Fall back to empty strings to prevent 'null' from appearing. + for (let name of AddressOption.recordAttributes) { + let camelCaseName = super.constructor.kebabToCamelCase(name); + let fieldEl = this[`_${name}`]; + fieldEl.textContent = this[camelCaseName] || ""; + } + + let { fieldsOrder } = PaymentDialogUtils.getFormFormat(this.country); + // A subset of the requested fields may be returned if the fields don't apply to the country. + let requestedVisibleFields = this.addressFields || "mailing-address"; + let visibleFields = EditAddress.computeVisibleFields( + fieldsOrder, + requestedVisibleFields + ); + let visibleFieldCount = 0; + let requiredFields = this.requiredFields; + // Start by populating line 1 + let lineEl = this._line1; + // Which field number to start line 2 after. + let breakAfterNthField = this.breakAfterNthField || 2; + + // Now actually place the fields in the proper place on the lines. + for (let field of visibleFields) { + let fieldEl = this[`_${field.fieldId}`]; + if (!fieldEl) { + log.warn(`address-option render: '${field.fieldId}' doesn't exist`); + continue; + } + + if (!fieldEl.textContent && !requiredFields.includes(field.fieldId)) { + // The field is empty and we don't need to show "Missing …" so don't append. + continue; + } + + if (lineEl.children.length) { + lineEl.append(this.dataset.fieldSeparator); + } + lineEl.appendChild(fieldEl); + + // Add a break after this field, if requested. + if (++visibleFieldCount == breakAfterNthField) { + lineEl = this._line2; + } + } + } +} + +customElements.define("address-option", AddressOption); diff --git a/browser/components/payments/res/components/basic-card-option.css b/browser/components/payments/res/components/basic-card-option.css new file mode 100644 index 0000000000..29776b0722 --- /dev/null +++ b/browser/components/payments/res/components/basic-card-option.css @@ -0,0 +1,40 @@ +/* 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/. */ + +basic-card-option { + grid-column-gap: 1em; + grid-template-areas: "cc-type cc-number cc-exp cc-name"; + /* Need to set a minimum width for the cc-type svg in the <img> to fill */ + grid-template-columns: minmax(1em, auto); + justify-content: start; +} + +basic-card-option > .cc-number, +basic-card-option > .cc-name, +basic-card-option > .cc-exp, +basic-card-option > .cc-type { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +basic-card-option > .cc-number { + grid-area: cc-number; + /* Don't truncate the card number */ + overflow: visible; +} + +basic-card-option > .cc-name { + grid-area: cc-name; +} + +basic-card-option > .cc-exp { + grid-area: cc-exp; +} + +basic-card-option > .cc-type { + grid-area: cc-type; + height: 100%; + text-transform: capitalize; +} diff --git a/browser/components/payments/res/components/basic-card-option.js b/browser/components/payments/res/components/basic-card-option.js new file mode 100644 index 0000000000..cda4a5d892 --- /dev/null +++ b/browser/components/payments/res/components/basic-card-option.js @@ -0,0 +1,89 @@ +/* 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/. */ + +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; +import RichOption from "./rich-option.js"; + +/** + * <rich-select> + * <basic-card-option></basic-card-option> + * </rich-select> + */ + +export default class BasicCardOption extends ObservedPropertiesMixin( + RichOption +) { + static get recordAttributes() { + return ["cc-exp", "cc-name", "cc-number", "cc-type", "guid"]; + } + + static get observedAttributes() { + return RichOption.observedAttributes.concat( + BasicCardOption.recordAttributes + ); + } + + constructor() { + super(); + + for (let name of ["cc-name", "cc-number", "cc-exp", "cc-type"]) { + this[`_${name}`] = document.createElement( + name == "cc-type" ? "img" : "span" + ); + this[`_${name}`].classList.add(name); + } + } + + connectedCallback() { + for (let name of ["cc-name", "cc-number", "cc-exp", "cc-type"]) { + this.appendChild(this[`_${name}`]); + } + super.connectedCallback(); + } + + static formatCCNumber(ccNumber) { + // XXX: Bug 1470175 - This should probably be unified with CreditCard.jsm logic. + return ccNumber ? ccNumber.replace(/[*]{4,}/, "****") : ""; + } + + static formatSingleLineLabel(basicCard) { + let ccNumber = BasicCardOption.formatCCNumber(basicCard["cc-number"]); + + // XXX Bug 1473772 - Hard-coded string + let ccExp = basicCard["cc-exp"] ? "Exp. " + basicCard["cc-exp"] : ""; + let ccName = basicCard["cc-name"]; + // XXX: Bug 1491040, displaying cc-type in this context may need its own localized string + let ccType = basicCard["cc-type"] || ""; + // Filter out empty/undefined tokens before joining by three spaces + // ( in the middle of two normal spaces to avoid them visually collapsing in HTML) + return [ + ccType.replace(/^[a-z]/, $0 => $0.toUpperCase()), + ccNumber, + ccExp, + ccName, + // XXX Bug 1473772 - Hard-coded string: + ] + .filter(str => !!str) + .join(" \xa0 "); + } + + get requiredFields() { + return BasicCardOption.recordAttributes; + } + + render() { + this["_cc-name"].textContent = this.ccName || ""; + this["_cc-number"].textContent = BasicCardOption.formatCCNumber( + this.ccNumber + ); + // XXX Bug 1473772 - Hard-coded string: + this["_cc-exp"].textContent = this.ccExp ? "Exp. " + this.ccExp : ""; + // XXX: Bug 1491040, displaying cc-type in this context may need its own localized string + this["_cc-type"].alt = this.ccType || ""; + this["_cc-type"].src = + "chrome://formautofill/content/icon-credit-card-generic.svg"; + } +} + +customElements.define("basic-card-option", BasicCardOption); diff --git a/browser/components/payments/res/components/card-icon.svg b/browser/components/payments/res/components/card-icon.svg new file mode 100644 index 0000000000..1ea36d7fae --- /dev/null +++ b/browser/components/payments/res/components/card-icon.svg @@ -0,0 +1,9 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 32"> + <rect x="0" y="0" width="48" height="32" rx="4" ry="4" fill="#000" fill-opacity="context-fill-opacity"> + </rect> + <rect x="0" y="6" width="48" height="20" fill="#fff" fill-opacity="1"> + </rect> +</svg> diff --git a/browser/components/payments/res/components/csc-input.js b/browser/components/payments/res/components/csc-input.js new file mode 100644 index 0000000000..4497f8a789 --- /dev/null +++ b/browser/components/payments/res/components/csc-input.js @@ -0,0 +1,112 @@ +/* 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/. */ + +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; + +/** + * <csc-input placeholder="CVV*" + default-value="123" + front-tooltip="Look on front of card for CSC" + back-tooltip="Look on back of card for CSC"></csc-input> + */ + +export default class CscInput extends ObservedPropertiesMixin(HTMLElement) { + static get observedAttributes() { + return [ + "back-tooltip", + "card-type", + "default-value", + "disabled", + "front-tooltip", + "placeholder", + "value", + ]; + } + constructor({ useAlwaysVisiblePlaceholder, inputId } = {}) { + super(); + + this.useAlwaysVisiblePlaceholder = useAlwaysVisiblePlaceholder; + + this._input = document.createElement("input"); + this._input.id = inputId || ""; + this._input.setAttribute("type", "text"); + this._input.autocomplete = "off"; + this._input.size = 3; + this._input.required = true; + // 3 or more digits + this._input.pattern = "[0-9]{3,}"; + this._input.classList.add("security-code"); + if (useAlwaysVisiblePlaceholder) { + this._label = document.createElement("span"); + this._label.dataset.localization = "cardCVV"; + this._label.className = "label-text"; + } + this._tooltip = document.createElement("span"); + this._tooltip.className = "info-tooltip csc"; + this._tooltip.setAttribute("tabindex", "0"); + this._tooltip.setAttribute("role", "tooltip"); + + // The parent connectedCallback calls its render method before + // our connectedCallback can run. This causes issues for parent + // code that is looking for all the form elements. Thus, we + // append the children during the constructor to make sure they + // be part of the DOM sooner. + this.appendChild(this._input); + if (this.useAlwaysVisiblePlaceholder) { + this.appendChild(this._label); + } + this.appendChild(this._tooltip); + } + + connectedCallback() { + this.render(); + } + + render() { + if (this.defaultValue) { + let oldDefaultValue = this._input.defaultValue; + this._input.defaultValue = this.defaultValue; + if (this._input.defaultValue != oldDefaultValue) { + // Setting defaultValue will place a value in the field + // but doesn't trigger a 'change' event, which is needed + // to update the Pay button state on the summary page. + this._input.dispatchEvent(new Event("change", { bubbles: true })); + } + } else { + this._input.defaultValue = ""; + } + if (this.value) { + // Setting the value will trigger form validation + // so only set the value if one has been provided. + this._input.value = this.value; + } + if (this.useAlwaysVisiblePlaceholder) { + this._label.textContent = this.placeholder || ""; + } else { + this._input.placeholder = this.placeholder || ""; + } + if (this.cardType == "amex") { + this._tooltip.setAttribute("aria-label", this.frontTooltip || ""); + } else { + this._tooltip.setAttribute("aria-label", this.backTooltip || ""); + } + } + + get value() { + return this._input.value; + } + + get isValid() { + return this._input.validity.valid; + } + + set disabled(value) { + // This is kept out of render() since callers + // are expecting it to apply immediately. + this._input.disabled = value; + return !!value; + } +} + +customElements.define("csc-input", CscInput); diff --git a/browser/components/payments/res/components/currency-amount.js b/browser/components/payments/res/components/currency-amount.js new file mode 100644 index 0000000000..5c8d07cb2d --- /dev/null +++ b/browser/components/payments/res/components/currency-amount.js @@ -0,0 +1,63 @@ +/* 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/. */ + +/** + * <currency-amount value="7.5" currency="USD" display-code></currency-amount> + */ + +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; + +export default class CurrencyAmount extends ObservedPropertiesMixin( + HTMLElement +) { + static get observedAttributes() { + return ["currency", "display-code", "value"]; + } + + constructor() { + super(); + this._currencyAmountTextNode = document.createTextNode(""); + this._currencyCodeElement = document.createElement("span"); + this._currencyCodeElement.classList.add("currency-code"); + } + + render() { + this.append(this._currencyAmountTextNode, this._currencyCodeElement); + let currencyAmount = ""; + let currencyCode = ""; + try { + if (this.value && this.currency) { + let number = Number.parseFloat(this.value); + if (Number.isNaN(number) || !Number.isFinite(number)) { + throw new RangeError("currency-amount value must be a finite number"); + } + const symbolFormatter = new Intl.NumberFormat(navigator.languages, { + style: "currency", + currency: this.currency, + currencyDisplay: "symbol", + }); + currencyAmount = symbolFormatter.format(this.value); + + if (this.displayCode !== null) { + // XXX: Bug 1473772 will move the separator to a Fluent string. + currencyAmount += " "; + + const codeFormatter = new Intl.NumberFormat(navigator.languages, { + style: "currency", + currency: this.currency, + currencyDisplay: "code", + }); + let parts = codeFormatter.formatToParts(this.value); + let currencyPart = parts.find(part => part.type == "currency"); + currencyCode = currencyPart.value; + } + } + } finally { + this._currencyAmountTextNode.textContent = currencyAmount; + this._currencyCodeElement.textContent = currencyCode; + } + } +} + +customElements.define("currency-amount", CurrencyAmount); diff --git a/browser/components/payments/res/components/labelled-checkbox.js b/browser/components/payments/res/components/labelled-checkbox.js new file mode 100644 index 0000000000..f26d982f4f --- /dev/null +++ b/browser/components/payments/res/components/labelled-checkbox.js @@ -0,0 +1,59 @@ +/* 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/. */ + +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; + +/** + * <labelled-checkbox label="Some label" value="The value"></labelled-checkbox> + */ + +export default class LabelledCheckbox extends ObservedPropertiesMixin( + HTMLElement +) { + static get observedAttributes() { + return ["infoTooltip", "form", "label", "value"]; + } + constructor() { + super(); + + this._label = document.createElement("label"); + this._labelSpan = document.createElement("span"); + this._infoTooltip = document.createElement("span"); + this._infoTooltip.className = "info-tooltip"; + this._infoTooltip.setAttribute("tabindex", "0"); + this._infoTooltip.setAttribute("role", "tooltip"); + this._checkbox = document.createElement("input"); + this._checkbox.type = "checkbox"; + } + + connectedCallback() { + this.appendChild(this._label); + this._label.appendChild(this._checkbox); + this._label.appendChild(this._labelSpan); + this._label.appendChild(this._infoTooltip); + this.render(); + } + + render() { + this._labelSpan.textContent = this.label; + this._infoTooltip.setAttribute("aria-label", this.infoTooltip); + // We don't use the ObservedPropertiesMixin behaviour because we want to be able to mirror + // form="" but ObservedPropertiesMixin removes attributes when "". + if (this.hasAttribute("form")) { + this._checkbox.setAttribute("form", this.getAttribute("form")); + } else { + this._checkbox.removeAttribute("form"); + } + } + + get checked() { + return this._checkbox.checked; + } + + set checked(value) { + return (this._checkbox.checked = value); + } +} + +customElements.define("labelled-checkbox", LabelledCheckbox); diff --git a/browser/components/payments/res/components/payment-details-item.css b/browser/components/payments/res/components/payment-details-item.css new file mode 100644 index 0000000000..3332698014 --- /dev/null +++ b/browser/components/payments/res/components/payment-details-item.css @@ -0,0 +1,12 @@ +/* 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/. */ + +payment-details-item { + margin: 1px 0; + min-height: 2em; +} + +payment-details-item > currency-amount { + text-align: end; +} diff --git a/browser/components/payments/res/components/payment-details-item.js b/browser/components/payments/res/components/payment-details-item.js new file mode 100644 index 0000000000..c2fe31ccfd --- /dev/null +++ b/browser/components/payments/res/components/payment-details-item.js @@ -0,0 +1,47 @@ +/* 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/. */ + +/** + * <ul> + * <payment-details-item + label="Some item" + amount-value="1.00" + amount-currency="USD"></payment-details-item> + * </ul> + */ + +import CurrencyAmount from "./currency-amount.js"; +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; + +export default class PaymentDetailsItem extends ObservedPropertiesMixin( + HTMLElement +) { + static get observedAttributes() { + return ["label", "amount-currency", "amount-value"]; + } + + constructor() { + super(); + this._label = document.createElement("span"); + this._label.classList.add("label"); + this._currencyAmount = new CurrencyAmount(); + } + + connectedCallback() { + this.appendChild(this._label); + this.appendChild(this._currencyAmount); + + if (super.connectedCallback) { + super.connectedCallback(); + } + } + + render() { + this._currencyAmount.value = this.amountValue; + this._currencyAmount.currency = this.amountCurrency; + this._label.textContent = this.label; + } +} + +customElements.define("payment-details-item", PaymentDetailsItem); diff --git a/browser/components/payments/res/components/payment-request-page.js b/browser/components/payments/res/components/payment-request-page.js new file mode 100644 index 0000000000..76b41f178e --- /dev/null +++ b/browser/components/payments/res/components/payment-request-page.js @@ -0,0 +1,36 @@ +/* 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/. */ + +/** + * <payment-request-page></payment-request-page> + */ + +export default class PaymentRequestPage extends HTMLElement { + constructor() { + super(); + + this.classList.add("page"); + + this.pageTitleHeading = document.createElement("h2"); + + // The body and footer may be pre-defined in the template so re-use them if they exist. + this.body = + this.querySelector(":scope > .page-body") || + document.createElement("div"); + this.body.classList.add("page-body"); + + this.footer = + this.querySelector(":scope > footer") || document.createElement("footer"); + } + + connectedCallback() { + // The heading goes inside the body so it scrolls. + this.body.prepend(this.pageTitleHeading); + this.appendChild(this.body); + + this.appendChild(this.footer); + } +} + +customElements.define("payment-request-page", PaymentRequestPage); diff --git a/browser/components/payments/res/components/rich-option.js b/browser/components/payments/res/components/rich-option.js new file mode 100644 index 0000000000..d82697de20 --- /dev/null +++ b/browser/components/payments/res/components/rich-option.js @@ -0,0 +1,26 @@ +/* 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/. */ + +/** + * <rich-select> + * <rich-option></rich-option> + * </rich-select> + */ + +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; + +export default class RichOption extends ObservedPropertiesMixin(HTMLElement) { + static get observedAttributes() { + return ["selected", "value"]; + } + + connectedCallback() { + this.classList.add("rich-option"); + this.render(); + } + + render() {} +} + +customElements.define("rich-option", RichOption); diff --git a/browser/components/payments/res/components/rich-select.css b/browser/components/payments/res/components/rich-select.css new file mode 100644 index 0000000000..8ec2fead3d --- /dev/null +++ b/browser/components/payments/res/components/rich-select.css @@ -0,0 +1,58 @@ +/* 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/. */ + +rich-select { + /* Include the padding in the max-width calculation so that we truncate rather + than grow wider than 100% of the parent. */ + box-sizing: border-box; + display: block; + /* Has to be the same as `payment-method-picker > input`: */ + margin: 10px 0; + /* Padding for the dropmarker (copied from common.css) */ + padding-inline-end: 24px; + position: relative; + /* Don't allow the <rich-select> to grow wider than the container so that we + truncate with text-overflow for long options instead. */ + max-width: 100%; +} + +/* Focusing on the underlying select element outlines the outer + rich-select wrapper making it appear like rich-select is focused. */ +rich-select:focus-within > select { + outline: 1px dotted var(--in-content-text-color); +} + +/* + * The HTML select element is hidden and placed on the rich-option + * element to make it look like clicking on the rich-option element + * in the closed state opens the HTML select dropdown. */ +rich-select > select { + /* Hide the text from the closed state so that the text/layout from + <rich-option> won't overlap it. The !important matches common.css. */ + color: transparent !important; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; +} + +rich-select > select > option { + /* Reset the text color in the popup/open state */ + color: var(--in-content-text-color); +} + +.rich-option { + display: grid; + padding: 8px; +} + +.rich-select-selected-option { + /* Clicks on the selected rich option should go to the <select> below to open the popup */ + pointer-events: none; + /* Use position:relative so this is positioned on top of the <select> which + also has position:relative. */ + position: relative; +} diff --git a/browser/components/payments/res/components/rich-select.js b/browser/components/payments/res/components/rich-select.js new file mode 100644 index 0000000000..0226b32a79 --- /dev/null +++ b/browser/components/payments/res/components/rich-select.js @@ -0,0 +1,104 @@ +/* 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/. */ + +import HandleEventMixin from "../mixins/HandleEventMixin.js"; +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; +import RichOption from "./rich-option.js"; + +/** + * <rich-select> + * <rich-option></rich-option> + * </rich-select> + * + * Note: The only supported way to change the selected option is via the + * `value` setter. + */ +export default class RichSelect extends HandleEventMixin( + ObservedPropertiesMixin(HTMLElement) +) { + static get observedAttributes() { + return ["disabled", "hidden"]; + } + + constructor() { + super(); + this.popupBox = document.createElement("select"); + } + + connectedCallback() { + // the popupBox element may change in between constructor and being connected + // so wait until connected before listening to events on it + this.popupBox.addEventListener("change", this); + this.appendChild(this.popupBox); + this.render(); + } + + get selectedOption() { + return this.getOptionByValue(this.value); + } + + get selectedRichOption() { + // XXX: Bug 1475684 - This can be removed once `selectedOption` returns a + // RichOption which extends HTMLOptionElement. + return this.querySelector(":scope > .rich-select-selected-option"); + } + + get value() { + return this.popupBox.value; + } + + set value(guid) { + this.popupBox.value = guid; + this.render(); + } + + getOptionByValue(value) { + return this.popupBox.querySelector( + `:scope > [value="${CSS.escape(value)}"]` + ); + } + + onChange(event) { + // Since the render function depends on the popupBox's value, we need to + // re-render if the value changes. + this.render(); + } + + render() { + let selectedRichOption = this.querySelector( + ":scope > .rich-select-selected-option" + ); + if (selectedRichOption) { + selectedRichOption.remove(); + } + + if (this.value) { + let optionType = this.getAttribute("option-type"); + if (!selectedRichOption || selectedRichOption.localName != optionType) { + selectedRichOption = document.createElement(optionType); + } + + let option = this.getOptionByValue(this.value); + let attributeNames = selectedRichOption.constructor.observedAttributes; + for (let attributeName of attributeNames) { + let attributeValue = option.getAttribute(attributeName); + if (attributeValue) { + selectedRichOption.setAttribute(attributeName, attributeValue); + } else { + selectedRichOption.removeAttribute(attributeName); + } + } + } else { + selectedRichOption = new RichOption(); + selectedRichOption.textContent = "(None selected)"; // XXX: bug 1473772 + } + selectedRichOption.classList.add("rich-select-selected-option"); + // Hide the rich-option from a11y tools since the native <select> will + // already provide the selected option label. + selectedRichOption.setAttribute("aria-hidden", "true"); + selectedRichOption = this.appendChild(selectedRichOption); + } +} + +customElements.define("rich-select", RichSelect); diff --git a/browser/components/payments/res/components/shipping-option.css b/browser/components/payments/res/components/shipping-option.css new file mode 100644 index 0000000000..6c84c5eb84 --- /dev/null +++ b/browser/components/payments/res/components/shipping-option.css @@ -0,0 +1,16 @@ +/* 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/. */ + +shipping-option.rich-option { + display: block; + /* Below properties are to support truncating with an ellipsis for long options */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +shipping-option > .label, +shipping-option > .amount { + white-space: nowrap; +} diff --git a/browser/components/payments/res/components/shipping-option.js b/browser/components/payments/res/components/shipping-option.js new file mode 100644 index 0000000000..1832546463 --- /dev/null +++ b/browser/components/payments/res/components/shipping-option.js @@ -0,0 +1,65 @@ +/* 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/. */ + +import CurrencyAmount from "./currency-amount.js"; +import ObservedPropertiesMixin from "../mixins/ObservedPropertiesMixin.js"; +import RichOption from "./rich-option.js"; + +/** + * <rich-select> + * <shipping-option></shipping-option> + * </rich-select> + */ + +export default class ShippingOption extends ObservedPropertiesMixin( + RichOption +) { + static get recordAttributes() { + return ["label", "amount-currency", "amount-value"]; + } + + static get observedAttributes() { + return RichOption.observedAttributes.concat( + ShippingOption.recordAttributes + ); + } + + constructor() { + super(); + + this.amount = null; + this._currencyAmount = new CurrencyAmount(); + this._currencyAmount.classList.add("amount"); + this._label = document.createElement("span"); + this._label.classList.add("label"); + } + + connectedCallback() { + this.appendChild(this._currencyAmount); + this.append(" "); + this.appendChild(this._label); + super.connectedCallback(); + } + + static formatSingleLineLabel(option) { + let amount = new CurrencyAmount(); + amount.value = option.amount.value; + amount.currency = option.amount.currency; + amount.render(); + + return amount.textContent + " " + option.label; + } + + render() { + this._label.textContent = this.label; + this._currencyAmount.currency = this.amountCurrency; + this._currencyAmount.value = this.amountValue; + // Need to call render after setting these properties + // if we want the amount to get displayed in the same + // render pass as the label. + this._currencyAmount.render(); + } +} + +customElements.define("shipping-option", ShippingOption); diff --git a/browser/components/payments/res/containers/address-form.css b/browser/components/payments/res/containers/address-form.css new file mode 100644 index 0000000000..484610414c --- /dev/null +++ b/browser/components/payments/res/containers/address-form.css @@ -0,0 +1,55 @@ +/* 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/. */ + +.error-text { + color: #fff; + background-color: #d70022; + border-radius: 2px; + margin: 5px 3px 0 3px; + /* The padding-top and padding-bottom are referenced by address-form.js */ /* TODO */ + padding: 5px 12px; + position: absolute; + z-index: 1; + pointer-events: none; + top: 100%; + visibility: hidden; +} + +/* ::before is the error on the error text panel */ +:is(input, textarea, select) ~ .error-text::before { + background-color: #d70022; + top: -7px; + content: '.'; + height: 16px; + position: absolute; + text-indent: -999px; + transform: rotate(45deg); + white-space: nowrap; + width: 16px; + z-index: -1 +} + +/* Position the arrow */ +.error-text:dir(ltr)::before { + left: 12px +} + +.error-text:dir(rtl)::before { + right: 12px +} + +:is(input, textarea, select):-moz-ui-invalid:focus ~ .error-text { + visibility: visible; +} + +address-form > footer > .cancel-button { + /* When cancel is shown (during onboarding), it should always be on the left with a space after it */ + margin-right: auto; +} + +address-form > footer > .back-button { + /* When back is shown (outside onboarding) we want "Back <space> Add/Save" */ + /* Bug 1468153 may change the button ordering to match platform conventions */ + margin-right: auto; +} diff --git a/browser/components/payments/res/containers/address-form.js b/browser/components/payments/res/containers/address-form.js new file mode 100644 index 0000000000..287251ea7d --- /dev/null +++ b/browser/components/payments/res/containers/address-form.js @@ -0,0 +1,447 @@ +/* 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/. */ + +/* import-globals-from ../../../../../browser/extensions/formautofill/content/autofillEditForms.js*/ +import LabelledCheckbox from "../components/labelled-checkbox.js"; +import PaymentRequestPage from "../components/payment-request-page.js"; +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; +import paymentRequest from "../paymentRequest.js"; +import HandleEventMixin from "../mixins/HandleEventMixin.js"; +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <address-form></address-form> + * + * Don't use document.getElementById or document.querySelector* to access form + * elements, use querySelector on `this` or `this.form` instead so that elements + * can be found before the element is connected. + * + * XXX: Bug 1446164 - This form isn't localized when used via this custom element + * as it will be much easier to share the logic once we switch to Fluent. + */ + +export default class AddressForm extends HandleEventMixin( + PaymentStateSubscriberMixin(PaymentRequestPage) +) { + constructor() { + super(); + + this.genericErrorText = document.createElement("div"); + this.genericErrorText.setAttribute("aria-live", "polite"); + this.genericErrorText.classList.add("page-error"); + + this.cancelButton = document.createElement("button"); + this.cancelButton.className = "cancel-button"; + this.cancelButton.addEventListener("click", this); + + this.backButton = document.createElement("button"); + this.backButton.className = "back-button"; + this.backButton.addEventListener("click", this); + + this.saveButton = document.createElement("button"); + this.saveButton.className = "save-button primary"; + this.saveButton.addEventListener("click", this); + + this.persistCheckbox = new LabelledCheckbox(); + this.persistCheckbox.className = "persist-checkbox"; + + // Combination of AddressErrors and PayerErrors as keys + this._errorFieldMap = { + addressLine: "#street-address", + city: "#address-level2", + country: "#country", + dependentLocality: "#address-level3", + email: "#email", + // Bug 1472283 is on file to support + // additional-name and family-name. + // XXX: For now payer name errors go on the family-name and address-errors + // go on the given-name so they don't overwrite each other. + name: "#family-name", + organization: "#organization", + phone: "#tel", + postalCode: "#postal-code", + // Bug 1472283 is on file to support + // additional-name and family-name. + recipient: "#given-name", + region: "#address-level1", + // Bug 1474905 is on file to properly support regionCode. See + // full note in paymentDialogWrapper.js + regionCode: "#address-level1", + }; + + // The markup is shared with form autofill preferences. + let url = "formautofill/editAddress.xhtml"; + this.promiseReady = this._fetchMarkup(url).then(doc => { + this.form = doc.getElementById("form"); + return this.form; + }); + } + + _fetchMarkup(url) { + return new Promise((resolve, reject) => { + let xhr = new XMLHttpRequest(); + xhr.responseType = "document"; + xhr.addEventListener("error", reject); + xhr.addEventListener("load", evt => { + resolve(xhr.response); + }); + xhr.open("GET", url); + xhr.send(); + }); + } + + connectedCallback() { + this.promiseReady.then(form => { + this.body.appendChild(form); + + let record = undefined; + this.formHandler = new EditAddress( + { + form, + }, + record, + { + DEFAULT_REGION: PaymentDialogUtils.DEFAULT_REGION, + getFormFormat: PaymentDialogUtils.getFormFormat, + findAddressSelectOption: PaymentDialogUtils.findAddressSelectOption, + countries: PaymentDialogUtils.countries, + } + ); + + // The EditAddress constructor adds `input` event listeners on the same element, + // which update field validity. By adding our event listeners after this constructor, + // validity will be updated before our handlers get the event + this.form.addEventListener("input", this); + this.form.addEventListener("invalid", this); + this.form.addEventListener("change", this); + + // The "invalid" event does not bubble and needs to be listened for on each + // form element. + for (let field of this.form.elements) { + field.addEventListener("invalid", this); + } + + this.body.appendChild(this.persistCheckbox); + this.body.appendChild(this.genericErrorText); + + this.footer.appendChild(this.cancelButton); + this.footer.appendChild(this.backButton); + this.footer.appendChild(this.saveButton); + // Only call the connected super callback(s) once our markup is fully + // connected, including the shared form fetched asynchronously. + super.connectedCallback(); + }); + } + + render(state) { + if (!this.id) { + throw new Error("AddressForm without an id"); + } + let record; + let { page, [this.id]: addressPage } = state; + + if (this.id && page && page.id !== this.id) { + log.debug(`${this.id}: no need to further render inactive page`); + return; + } + + let editing = !!addressPage.guid; + this.cancelButton.textContent = this.dataset.cancelButtonLabel; + this.backButton.textContent = this.dataset.backButtonLabel; + if (editing) { + this.saveButton.textContent = this.dataset.updateButtonLabel; + } else { + this.saveButton.textContent = this.dataset.nextButtonLabel; + } + + this.persistCheckbox.label = this.dataset.persistCheckboxLabel; + this.persistCheckbox.infoTooltip = this.dataset.persistCheckboxInfoTooltip; + + this.backButton.hidden = page.onboardingWizard; + this.cancelButton.hidden = !page.onboardingWizard; + + this.pageTitleHeading.textContent = editing + ? this.dataset.titleEdit + : this.dataset.titleAdd; + this.genericErrorText.textContent = page.error; + + let addresses = paymentRequest.getAddresses(state); + + // If an address is selected we want to edit it. + if (editing) { + record = addresses[addressPage.guid]; + if (!record) { + throw new Error( + "Trying to edit a non-existing address: " + addressPage.guid + ); + } + // When editing an existing record, prevent changes to persistence + this.persistCheckbox.hidden = true; + } else { + let { + saveAddressDefaultChecked, + } = PaymentDialogUtils.getDefaultPreferences(); + if (typeof saveAddressDefaultChecked != "boolean") { + throw new Error(`Unexpected non-boolean value for saveAddressDefaultChecked from + PaymentDialogUtils.getDefaultPreferences(): ${typeof saveAddressDefaultChecked}`); + } + // Adding a new record: default persistence to the pref value when in a not-private session + this.persistCheckbox.hidden = false; + this.persistCheckbox.checked = state.isPrivate + ? false + : saveAddressDefaultChecked; + } + + let selectedStateKey = this.getAttribute("selected-state-key").split("|"); + log.debug(`${this.id}#render got selectedStateKey: ${selectedStateKey}`); + + if (addressPage.addressFields) { + this.form.dataset.addressFields = addressPage.addressFields; + } else { + this.form.dataset.addressFields = "mailing-address tel"; + } + this.formHandler.loadRecord(record); + + // Add validation to some address fields + this.updateRequiredState(); + + // Show merchant errors for the appropriate address form. + let merchantFieldErrors = AddressForm.merchantFieldErrorsForForm( + state, + selectedStateKey + ); + for (let [errorName, errorSelector] of Object.entries( + this._errorFieldMap + )) { + let errorText = ""; + // Never show errors on an 'add' screen as they would be for a different address. + if (editing && merchantFieldErrors) { + if (errorName == "region" || errorName == "regionCode") { + errorText = + merchantFieldErrors.regionCode || merchantFieldErrors.region || ""; + } else { + errorText = merchantFieldErrors[errorName] || ""; + } + } + let container = this.form.querySelector(errorSelector + "-container"); + let field = this.form.querySelector(errorSelector); + field.setCustomValidity(errorText); + let span = paymentRequest.maybeCreateFieldErrorElement(container); + span.textContent = errorText; + } + + this.updateSaveButtonState(); + } + + onChange(event) { + if (event.target.id == "country") { + this.updateRequiredState(); + } + this.updateSaveButtonState(); + } + + onInvalid(event) { + if (event.target instanceof HTMLFormElement) { + this.onInvalidForm(event); + } else { + this.onInvalidField(event); + } + } + + onClick(evt) { + switch (evt.target) { + case this.cancelButton: { + paymentRequest.cancel(); + break; + } + case this.backButton: { + let currentState = this.requestStore.getState(); + const previousId = currentState.page.previousId; + let state = { + page: { + id: previousId || "payment-summary", + }, + }; + if (previousId) { + state[previousId] = Object.assign({}, currentState[previousId], { + preserveFieldValues: true, + }); + } + this.requestStore.setState(state); + break; + } + case this.saveButton: { + if (this.form.checkValidity()) { + this.saveRecord(); + } + break; + } + default: { + throw new Error("Unexpected click target"); + } + } + } + + onInput(event) { + event.target.setCustomValidity(""); + this.updateSaveButtonState(); + } + + /** + * @param {Event} event - "invalid" event + * Note: Keep this in-sync with the equivalent version in basic-card-form.js + */ + onInvalidField(event) { + let field = event.target; + let container = field.closest(`#${field.id}-container`); + let errorTextSpan = paymentRequest.maybeCreateFieldErrorElement(container); + errorTextSpan.textContent = field.validationMessage; + } + + onInvalidForm() { + this.saveButton.disabled = true; + } + + updateRequiredState() { + for (let field of this.form.elements) { + let container = field.closest(`#${field.id}-container`); + if (field.localName == "button" || !container) { + continue; + } + let span = container.querySelector(".label-text"); + span.setAttribute( + "fieldRequiredSymbol", + this.dataset.fieldRequiredSymbol + ); + container.toggleAttribute("required", field.required && !field.disabled); + } + } + + updateSaveButtonState() { + this.saveButton.disabled = !this.form.checkValidity(); + } + + async saveRecord() { + let record = this.formHandler.buildFormObject(); + let currentState = this.requestStore.getState(); + let { + page, + tempAddresses, + savedBasicCards, + [this.id]: addressPage, + } = currentState; + let editing = !!addressPage.guid; + + if ( + editing + ? addressPage.guid in tempAddresses + : !this.persistCheckbox.checked + ) { + record.isTemporary = true; + } + + let successStateChange; + const previousId = page.previousId; + if (page.onboardingWizard && !Object.keys(savedBasicCards).length) { + successStateChange = { + "basic-card-page": { + selectedStateKey: "selectedPaymentCard", + // Preserve field values as the user may have already edited the card + // page and went back to the address page to make a correction. + preserveFieldValues: true, + }, + page: { + id: "basic-card-page", + previousId: this.id, + onboardingWizard: page.onboardingWizard, + }, + }; + } else { + successStateChange = { + page: { + id: previousId || "payment-summary", + onboardingWizard: page.onboardingWizard, + }, + }; + } + + if (previousId) { + successStateChange[previousId] = Object.assign( + {}, + currentState[previousId] + ); + successStateChange[previousId].preserveFieldValues = true; + } + + try { + let { guid } = await paymentRequest.updateAutofillRecord( + "addresses", + record, + addressPage.guid + ); + let selectedStateKey = this.getAttribute("selected-state-key").split("|"); + + if (selectedStateKey.length == 1) { + Object.assign(successStateChange, { + [selectedStateKey[0]]: guid, + }); + } else if (selectedStateKey.length == 2) { + // Need to keep properties like preserveFieldValues from getting removed. + let subObj = Object.assign({}, successStateChange[selectedStateKey[0]]); + subObj[selectedStateKey[1]] = guid; + Object.assign(successStateChange, { + [selectedStateKey[0]]: subObj, + }); + } else { + throw new Error( + `selectedStateKey not supported: '${selectedStateKey}'` + ); + } + + this.requestStore.setState(successStateChange); + } catch (ex) { + log.warn("saveRecord: error:", ex); + this.requestStore.setState({ + page: { + id: this.id, + onboardingWizard: page.onboardingWizard, + error: this.dataset.errorGenericSave, + }, + }); + } + } + + /** + * Get the dictionary of field-specific merchant errors relevant to the + * specific form identified by the state key. + * @param {object} state The application state + * @param {string[]} stateKey The key in state to return address errors for. + * @returns {object} with keys as PaymentRequest field names and values of + * merchant-provided error strings. + */ + static merchantFieldErrorsForForm(state, stateKey) { + let { paymentDetails } = state.request; + switch (stateKey.join("|")) { + case "selectedShippingAddress": { + return paymentDetails.shippingAddressErrors; + } + case "selectedPayerAddress": { + return paymentDetails.payerErrors; + } + case "basic-card-page|billingAddressGUID": { + // `paymentMethod` can be null. + return ( + (paymentDetails.paymentMethodErrors && + paymentDetails.paymentMethodErrors.billingAddress) || + {} + ); + } + default: { + throw new Error("Unknown selectedStateKey"); + } + } + } +} + +customElements.define("address-form", AddressForm); diff --git a/browser/components/payments/res/containers/address-picker.js b/browser/components/payments/res/containers/address-picker.js new file mode 100644 index 0000000000..b76a0f5d02 --- /dev/null +++ b/browser/components/payments/res/containers/address-picker.js @@ -0,0 +1,282 @@ +/* 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/. */ + +import AddressForm from "./address-form.js"; +import AddressOption from "../components/address-option.js"; +import RichPicker from "./rich-picker.js"; +import paymentRequest from "../paymentRequest.js"; +import HandleEventMixin from "../mixins/HandleEventMixin.js"; + +/** + * <address-picker></address-picker> + * Container around add/edit links and <rich-select> with + * <address-option> listening to savedAddresses & tempAddresses. + */ + +export default class AddressPicker extends HandleEventMixin(RichPicker) { + static get pickerAttributes() { + return ["address-fields", "break-after-nth-field", "data-field-separator"]; + } + + static get observedAttributes() { + return RichPicker.observedAttributes.concat(AddressPicker.pickerAttributes); + } + + constructor() { + super(); + this.dropdown.setAttribute("option-type", "address-option"); + } + + attributeChangedCallback(name, oldValue, newValue) { + super.attributeChangedCallback(name, oldValue, newValue); + // connectedCallback may add and adjust elements & values + // so avoid calling render before the element is connected + if ( + this.isConnected && + AddressPicker.pickerAttributes.includes(name) && + oldValue !== newValue + ) { + this.render(this.requestStore.getState()); + } + } + + get fieldNames() { + if (this.hasAttribute("address-fields")) { + let names = this.getAttribute("address-fields") + .trim() + .split(/\s+/); + if (names.length) { + return names; + } + } + + return [ + // "address-level1", // TODO: bug 1481481 - not required for some countries e.g. DE + "address-level2", + "country", + "name", + "postal-code", + "street-address", + ]; + } + + /** + * De-dupe and filter addresses for the given set of fields that will be visible + * + * @param {object} addresses + * @param {array?} fieldNames - optional list of field names that be used when + * de-duping and excluding entries + * @returns {object} filtered copy of given addresses + */ + filterAddresses(addresses, fieldNames = this.fieldNames) { + let uniques = new Set(); + let result = {}; + for (let [guid, address] of Object.entries(addresses)) { + let addressCopy = {}; + let isMatch = false; + // exclude addresses that are missing all of the requested fields + for (let name of fieldNames) { + if (address[name]) { + isMatch = true; + addressCopy[name] = address[name]; + } + } + if (isMatch) { + let key = JSON.stringify(addressCopy); + // exclude duplicated addresses + if (!uniques.has(key)) { + uniques.add(key); + result[guid] = address; + } + } + } + return result; + } + + get options() { + return this.dropdown.popupBox.options; + } + + /** + * @param {object} state - See `PaymentsStore.setState` + * The value of the picker is retrieved from state store rather than the DOM + * @returns {string} guid + */ + getCurrentValue(state) { + let [selectedKey, selectedLeaf] = this.selectedStateKey.split("|"); + let guid = state[selectedKey]; + if (selectedLeaf) { + guid = guid[selectedLeaf]; + } + return guid; + } + + render(state) { + let selectedAddressGUID = this.getCurrentValue(state) || ""; + let addresses = paymentRequest.getAddresses(state); + let desiredOptions = []; + let filteredAddresses = this.filterAddresses(addresses, this.fieldNames); + for (let [guid, address] of Object.entries(filteredAddresses)) { + let optionEl = this.dropdown.getOptionByValue(guid); + if (!optionEl) { + optionEl = document.createElement("option"); + optionEl.value = guid; + } + + for (let key of AddressOption.recordAttributes) { + let val = address[key]; + if (val) { + optionEl.setAttribute(key, val); + } else { + optionEl.removeAttribute(key); + } + } + + optionEl.dataset.fieldSeparator = this.dataset.fieldSeparator; + + if (this.hasAttribute("address-fields")) { + optionEl.setAttribute( + "address-fields", + this.getAttribute("address-fields") + ); + } else { + optionEl.removeAttribute("address-fields"); + } + + if (this.hasAttribute("break-after-nth-field")) { + optionEl.setAttribute( + "break-after-nth-field", + this.getAttribute("break-after-nth-field") + ); + } else { + optionEl.removeAttribute("break-after-nth-field"); + } + + // fieldNames getter is not used here because it returns a default array with + // attributes even when "address-fields" observed attribute is null. + let addressFields = this.getAttribute("address-fields"); + optionEl.textContent = AddressOption.formatSingleLineLabel( + address, + addressFields + ); + desiredOptions.push(optionEl); + } + + this.dropdown.popupBox.textContent = ""; + + if (this._allowEmptyOption) { + let optionEl = document.createElement("option"); + optionEl.value = ""; + desiredOptions.unshift(optionEl); + } + + for (let option of desiredOptions) { + this.dropdown.popupBox.appendChild(option); + } + + // Update selectedness after the options are updated + this.dropdown.value = selectedAddressGUID; + + if (selectedAddressGUID && selectedAddressGUID !== this.dropdown.value) { + throw new Error( + `${this.selectedStateKey} option ${selectedAddressGUID} ` + + `does not exist in the address picker` + ); + } + + super.render(state); + } + + get selectedStateKey() { + return this.getAttribute("selected-state-key"); + } + + errorForSelectedOption(state) { + let superError = super.errorForSelectedOption(state); + if (superError) { + return superError; + } + + if (!this.selectedOption) { + return ""; + } + + let merchantFieldErrors = AddressForm.merchantFieldErrorsForForm( + state, + this.selectedStateKey.split("|") + ); + // TODO: errors in priority order. + return ( + Object.values(merchantFieldErrors).find(msg => { + return typeof msg == "string" && msg.length; + }) || "" + ); + } + + onChange(event) { + let [selectedKey, selectedLeaf] = this.selectedStateKey.split("|"); + if (!selectedKey) { + return; + } + // selectedStateKey can be a '|' delimited string indicating a path into the state object + // to update with the new value + let newState = {}; + + if (selectedLeaf) { + let currentState = this.requestStore.getState(); + newState[selectedKey] = Object.assign({}, currentState[selectedKey], { + [selectedLeaf]: this.dropdown.value, + }); + } else { + newState[selectedKey] = this.dropdown.value; + } + this.requestStore.setState(newState); + } + + onClick({ target }) { + let pageId; + let currentState = this.requestStore.getState(); + let nextState = { + page: {}, + }; + + switch (this.selectedStateKey) { + case "selectedShippingAddress": + pageId = "shipping-address-page"; + break; + case "selectedPayerAddress": + pageId = "payer-address-page"; + break; + case "basic-card-page|billingAddressGUID": + pageId = "billing-address-page"; + break; + default: { + throw new Error( + "onClick, un-matched selectedStateKey: " + this.selectedStateKey + ); + } + } + nextState.page.id = pageId; + let addressFields = this.getAttribute("address-fields"); + nextState[pageId] = { addressFields }; + + switch (target) { + case this.addLink: { + nextState[pageId].guid = null; + break; + } + case this.editLink: { + nextState[pageId].guid = this.getCurrentValue(currentState); + break; + } + default: { + throw new Error("Unexpected onClick"); + } + } + + this.requestStore.setState(nextState); + } +} + +customElements.define("address-picker", AddressPicker); diff --git a/browser/components/payments/res/containers/basic-card-form.css b/browser/components/payments/res/containers/basic-card-form.css new file mode 100644 index 0000000000..f4a8721e03 --- /dev/null +++ b/browser/components/payments/res/containers/basic-card-form.css @@ -0,0 +1,43 @@ +/* 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/. */ + +basic-card-form .editCreditCardForm { + /* Add the persist-checkbox row to the grid */ + grid-template-areas: + "cc-number cc-exp-month cc-exp-year" + "cc-name cc-type cc-csc" + "accepted accepted accepted" + "persist-checkbox persist-checkbox persist-checkbox" + "billingAddressGUID billingAddressGUID billingAddressGUID"; +} + +basic-card-form csc-input { + display: flex; + flex-grow: 1; +} + +basic-card-form .editCreditCardForm > accepted-cards { + grid-area: accepted; + margin: 0; +} + +basic-card-form .editCreditCardForm .persist-checkbox { + display: flex; + grid-area: persist-checkbox; +} + +#billingAddressGUID-container { + display: grid; +} + +basic-card-form > footer > .cancel-button { + /* When cancel is shown (during onboarding), it should always be on the left with a space after it */ + margin-right: auto; +} + +basic-card-form > footer > .cancel-button[hidden] ~ .back-button { + /* When back is shown (outside onboarding) we want "Back <space> Add/Save" */ + /* Bug 1468153 may change the button ordering to match platform conventions */ + margin-right: auto; +} diff --git a/browser/components/payments/res/containers/basic-card-form.js b/browser/components/payments/res/containers/basic-card-form.js new file mode 100644 index 0000000000..f71b7fc74c --- /dev/null +++ b/browser/components/payments/res/containers/basic-card-form.js @@ -0,0 +1,507 @@ +/* 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/. */ + +/* import-globals-from ../../../../../browser/extensions/formautofill/content/autofillEditForms.js*/ +import AcceptedCards from "../components/accepted-cards.js"; +import BillingAddressPicker from "./billing-address-picker.js"; +import CscInput from "../components/csc-input.js"; +import LabelledCheckbox from "../components/labelled-checkbox.js"; +import PaymentRequestPage from "../components/payment-request-page.js"; +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; +import paymentRequest from "../paymentRequest.js"; +import HandleEventMixin from "../mixins/HandleEventMixin.js"; + +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <basic-card-form></basic-card-form> + * + * XXX: Bug 1446164 - This form isn't localized when used via this custom element + * as it will be much easier to share the logic once we switch to Fluent. + */ + +export default class BasicCardForm extends HandleEventMixin( + PaymentStateSubscriberMixin(PaymentRequestPage) +) { + constructor() { + super(); + + this.genericErrorText = document.createElement("div"); + this.genericErrorText.setAttribute("aria-live", "polite"); + this.genericErrorText.classList.add("page-error"); + + this.cscInput = new CscInput({ + useAlwaysVisiblePlaceholder: true, + inputId: "cc-csc", + }); + + this.persistCheckbox = new LabelledCheckbox(); + // The persist checkbox shouldn't be part of the record which gets saved so + // exclude it from the form. + this.persistCheckbox.form = ""; + this.persistCheckbox.className = "persist-checkbox"; + + this.acceptedCardsList = new AcceptedCards(); + + // page footer + this.cancelButton = document.createElement("button"); + this.cancelButton.className = "cancel-button"; + this.cancelButton.addEventListener("click", this); + + this.backButton = document.createElement("button"); + this.backButton.className = "back-button"; + this.backButton.addEventListener("click", this); + + this.saveButton = document.createElement("button"); + this.saveButton.className = "save-button primary"; + this.saveButton.addEventListener("click", this); + + this.footer.append(this.cancelButton, this.backButton, this.saveButton); + + // The markup is shared with form autofill preferences. + let url = "formautofill/editCreditCard.xhtml"; + this.promiseReady = this._fetchMarkup(url).then(doc => { + this.form = doc.getElementById("form"); + return this.form; + }); + } + + _fetchMarkup(url) { + return new Promise((resolve, reject) => { + let xhr = new XMLHttpRequest(); + xhr.responseType = "document"; + xhr.addEventListener("error", reject); + xhr.addEventListener("load", evt => { + resolve(xhr.response); + }); + xhr.open("GET", url); + xhr.send(); + }); + } + + _upgradeBillingAddressPicker() { + let addressRow = this.form.querySelector(".billingAddressRow"); + let addressPicker = (this.billingAddressPicker = new BillingAddressPicker()); + + // Wrap the existing <select> that the formHandler manages + if (addressPicker.dropdown.popupBox) { + addressPicker.dropdown.popupBox.remove(); + } + addressPicker.dropdown.popupBox = this.form.querySelector( + "#billingAddressGUID" + ); + + // Hide the original label as the address picker provide its own, + // but we'll copy the localized textContent from it when rendering + addressRow.querySelector(".label-text").hidden = true; + + addressPicker.dataset.addLinkLabel = this.dataset.addressAddLinkLabel; + addressPicker.dataset.editLinkLabel = this.dataset.addressEditLinkLabel; + addressPicker.dataset.fieldSeparator = this.dataset.addressFieldSeparator; + addressPicker.dataset.addAddressTitle = this.dataset.billingAddressTitleAdd; + addressPicker.dataset.editAddressTitle = this.dataset.billingAddressTitleEdit; + addressPicker.dataset.invalidLabel = this.dataset.invalidAddressLabel; + // break-after-nth-field, address-fields not needed here + + // this state is only used to carry the selected guid between pages; + // the select#billingAddressGUID is the source of truth for the current value + addressPicker.setAttribute( + "selected-state-key", + "basic-card-page|billingAddressGUID" + ); + + addressPicker.addLink.addEventListener("click", this); + addressPicker.editLink.addEventListener("click", this); + + addressRow.appendChild(addressPicker); + } + + connectedCallback() { + this.promiseReady.then(form => { + this.body.appendChild(form); + + let record = {}; + let addresses = []; + this.formHandler = new EditCreditCard( + { + form, + }, + record, + addresses, + { + isCCNumber: PaymentDialogUtils.isCCNumber, + getAddressLabel: PaymentDialogUtils.getAddressLabel, + getSupportedNetworks: PaymentDialogUtils.getCreditCardNetworks, + } + ); + + // The EditCreditCard constructor adds `change` and `input` event listeners on the same + // element, which update field validity. By adding our event listeners after this + // constructor, validity will be updated before our handlers get the event + form.addEventListener("change", this); + form.addEventListener("input", this); + form.addEventListener("invalid", this); + + this._upgradeBillingAddressPicker(); + + // The "invalid" event does not bubble and needs to be listened for on each + // form element. + for (let field of this.form.elements) { + field.addEventListener("invalid", this); + } + + // Replace the form-autofill cc-csc fields with our csc-input. + let cscContainer = this.form.querySelector("#cc-csc-container"); + cscContainer.textContent = ""; + cscContainer.appendChild(this.cscInput); + + let billingAddressRow = this.form.querySelector(".billingAddressRow"); + form.insertBefore(this.persistCheckbox, billingAddressRow); + form.insertBefore(this.acceptedCardsList, billingAddressRow); + this.body.appendChild(this.genericErrorText); + // Only call the connected super callback(s) once our markup is fully + // connected, including the shared form fetched asynchronously. + super.connectedCallback(); + }); + } + + render(state) { + let { + page, + selectedShippingAddress, + "basic-card-page": basicCardPage, + } = state; + + if (this.id && page && page.id !== this.id) { + log.debug( + `BasicCardForm: no need to further render inactive page: ${page.id}` + ); + return; + } + + if (!basicCardPage.selectedStateKey) { + throw new Error("A `selectedStateKey` is required"); + } + + let editing = !!basicCardPage.guid; + this.cancelButton.textContent = this.dataset.cancelButtonLabel; + this.backButton.textContent = this.dataset.backButtonLabel; + if (editing) { + this.saveButton.textContent = this.dataset.updateButtonLabel; + } else { + this.saveButton.textContent = this.dataset.nextButtonLabel; + } + + this.cscInput.placeholder = this.dataset.cscPlaceholder; + this.cscInput.frontTooltip = this.dataset.cscFrontInfoTooltip; + this.cscInput.backTooltip = this.dataset.cscBackInfoTooltip; + + // The label text from the form isn't available until render() time. + let labelText = this.form.querySelector(".billingAddressRow .label-text") + .textContent; + this.billingAddressPicker.setAttribute("label", labelText); + + this.persistCheckbox.label = this.dataset.persistCheckboxLabel; + this.persistCheckbox.infoTooltip = this.dataset.persistCheckboxInfoTooltip; + + this.acceptedCardsList.label = this.dataset.acceptedCardsLabel; + + // 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; + + this.form.querySelector("#cc-number").disabled = editing; + + // The CVV fields should be hidden and disabled when editing. + this.form.querySelector("#cc-csc-container").hidden = editing; + this.cscInput.disabled = editing; + + // If a card is selected we want to edit it. + if (editing) { + this.pageTitleHeading.textContent = this.dataset.editBasicCardTitle; + record = basicCards[basicCardPage.guid]; + if (!record) { + throw new Error( + "Trying to edit a non-existing card: " + basicCardPage.guid + ); + } + // When editing an existing record, prevent changes to persistence + this.persistCheckbox.hidden = true; + } else { + this.pageTitleHeading.textContent = this.dataset.addBasicCardTitle; + // Use a currently selected shipping address as the default billing address + record.billingAddressGUID = basicCardPage.billingAddressGUID; + if (!record.billingAddressGUID && selectedShippingAddress) { + record.billingAddressGUID = selectedShippingAddress; + } + + let { + saveCreditCardDefaultChecked, + } = PaymentDialogUtils.getDefaultPreferences(); + if (typeof saveCreditCardDefaultChecked != "boolean") { + throw new Error(`Unexpected non-boolean value for saveCreditCardDefaultChecked from + PaymentDialogUtils.getDefaultPreferences(): ${typeof saveCreditCardDefaultChecked}`); + } + // Adding a new record: default persistence to pref value when in a not-private session + this.persistCheckbox.hidden = false; + if (basicCardPage.hasOwnProperty("persistCheckboxValue")) { + // returning to this page, use previous checked state + this.persistCheckbox.checked = basicCardPage.persistCheckboxValue; + } else { + this.persistCheckbox.checked = state.isPrivate + ? false + : saveCreditCardDefaultChecked; + } + } + + this.formHandler.loadRecord( + record, + addresses, + basicCardPage.preserveFieldValues + ); + + this.form.querySelector(".billingAddressRow").hidden = false; + + let billingAddressSelect = this.billingAddressPicker.dropdown; + if (basicCardPage.billingAddressGUID) { + billingAddressSelect.value = basicCardPage.billingAddressGUID; + } else if (!editing) { + if (paymentRequest.getAddresses(state)[selectedShippingAddress]) { + billingAddressSelect.value = selectedShippingAddress; + } else { + let firstAddressGUID = Object.keys(addresses)[0]; + if (firstAddressGUID) { + // Only set the value if we have a saved address to not mark the field + // dirty and invalid on an add form with no saved addresses. + billingAddressSelect.value = firstAddressGUID; + } + } + } + // Need to recalculate the populated state since + // billingAddressSelect is updated after loadRecord. + this.formHandler.updatePopulatedState(billingAddressSelect.popupBox); + + this.updateRequiredState(); + this.updateSaveButtonState(); + } + + onChange(evt) { + let ccType = this.form.querySelector("#cc-type"); + this.cscInput.setAttribute("card-type", ccType.value); + + this.updateSaveButtonState(); + } + + onClick(evt) { + switch (evt.target) { + case this.cancelButton: { + paymentRequest.cancel(); + break; + } + case this.billingAddressPicker.addLink: + case this.billingAddressPicker.editLink: { + // The address-picker has set state for the page to advance to, now set up the + // necessary state for returning to and re-rendering this page + let { + "basic-card-page": basicCardPage, + page, + } = this.requestStore.getState(); + let nextState = { + page: Object.assign({}, page, { + previousId: "basic-card-page", + }), + "basic-card-page": { + preserveFieldValues: true, + guid: basicCardPage.guid, + persistCheckboxValue: this.persistCheckbox.checked, + selectedStateKey: basicCardPage.selectedStateKey, + }, + }; + this.requestStore.setState(nextState); + break; + } + case this.backButton: { + let currentState = this.requestStore.getState(); + let { + page, + request, + "shipping-address-page": shippingAddressPage, + "billing-address-page": billingAddressPage, + "basic-card-page": basicCardPage, + selectedShippingAddress, + } = currentState; + + let nextState = { + page: { + id: page.previousId || "payment-summary", + onboardingWizard: page.onboardingWizard, + }, + }; + + if (page.onboardingWizard) { + if (request.paymentOptions.requestShipping) { + shippingAddressPage = Object.assign({}, shippingAddressPage, { + guid: selectedShippingAddress, + }); + Object.assign(nextState, { + "shipping-address-page": shippingAddressPage, + }); + } else { + billingAddressPage = Object.assign({}, billingAddressPage, { + guid: basicCardPage.billingAddressGUID, + }); + Object.assign(nextState, { + "billing-address-page": billingAddressPage, + }); + } + + let basicCardPageState = Object.assign({}, basicCardPage, { + preserveFieldValues: true, + }); + delete basicCardPageState.persistCheckboxValue; + + Object.assign(nextState, { + "basic-card-page": basicCardPageState, + }); + } + + this.requestStore.setState(nextState); + break; + } + case this.saveButton: { + if (this.form.checkValidity()) { + this.saveRecord(); + } + break; + } + default: { + throw new Error("Unexpected click target"); + } + } + } + + onInput(event) { + event.target.setCustomValidity(""); + this.updateSaveButtonState(); + } + + onInvalid(event) { + if (event.target instanceof HTMLFormElement) { + this.onInvalidForm(event); + } else { + this.onInvalidField(event); + } + } + + /** + * @param {Event} event - "invalid" event + * Note: Keep this in-sync with the equivalent version in address-form.js + */ + onInvalidField(event) { + let field = event.target; + let container = field.closest(`#${field.id}-container`); + let errorTextSpan = paymentRequest.maybeCreateFieldErrorElement(container); + errorTextSpan.textContent = field.validationMessage; + } + + onInvalidForm() { + this.saveButton.disabled = true; + } + + updateSaveButtonState() { + const INVALID_CLASS_NAME = "invalid-selected-option"; + let isValid = + this.form.checkValidity() && + !this.billingAddressPicker.classList.contains(INVALID_CLASS_NAME); + this.saveButton.disabled = !isValid; + } + + updateRequiredState() { + for (let field of this.form.elements) { + let container = field.closest(".container"); + let span = container.querySelector(".label-text"); + if (!span) { + // The billing address field doesn't use a label inside the field. + continue; + } + span.setAttribute( + "fieldRequiredSymbol", + this.dataset.fieldRequiredSymbol + ); + container.toggleAttribute("required", field.required && !field.disabled); + } + } + + async saveRecord() { + let record = this.formHandler.buildFormObject(); + let currentState = this.requestStore.getState(); + let { tempBasicCards, "basic-card-page": basicCardPage } = currentState; + let editing = !!basicCardPage.guid; + + if ( + editing + ? basicCardPage.guid in tempBasicCards + : !this.persistCheckbox.checked + ) { + record.isTemporary = true; + } + + for (let editableFieldName of [ + "cc-name", + "cc-exp-month", + "cc-exp-year", + "cc-type", + ]) { + record[editableFieldName] = record[editableFieldName] || ""; + } + + // Only save the card number if we're saving a new record, otherwise we'd + // overwrite the unmasked card number with the masked one. + if (!editing) { + record["cc-number"] = record["cc-number"] || ""; + } + + // Never save the CSC in storage. Storage will throw and not save the record + // if it is passed. + delete record["cc-csc"]; + + try { + let { guid } = await paymentRequest.updateAutofillRecord( + "creditCards", + record, + basicCardPage.guid + ); + let { selectedStateKey } = currentState["basic-card-page"]; + if (!selectedStateKey) { + throw new Error( + `state["basic-card-page"].selectedStateKey is required` + ); + } + this.requestStore.setState({ + page: { + id: "payment-summary", + }, + [selectedStateKey]: guid, + [selectedStateKey + "SecurityCode"]: this.cscInput.value, + }); + } catch (ex) { + log.warn("saveRecord: error:", ex); + this.requestStore.setState({ + page: { + id: "basic-card-page", + error: this.dataset.errorGenericSave, + }, + }); + } + } +} + +customElements.define("basic-card-form", BasicCardForm); diff --git a/browser/components/payments/res/containers/billing-address-picker.js b/browser/components/payments/res/containers/billing-address-picker.js new file mode 100644 index 0000000000..57b70a2364 --- /dev/null +++ b/browser/components/payments/res/containers/billing-address-picker.js @@ -0,0 +1,33 @@ +/* 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/. */ + +import AddressPicker from "./address-picker.js"; +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <billing-address-picker></billing-address-picker> + * Extends AddressPicker to treat the <select>'s value as the source of truth + */ + +export default class BillingAddressPicker extends AddressPicker { + constructor() { + super(); + this._allowEmptyOption = true; + } + + /** + * @param {object?} state - See `PaymentsStore.setState` + * The value of the picker is the child dropdown element's value + * @returns {string} guid + */ + getCurrentValue() { + return this.dropdown.value; + } + + onChange(event) { + this.render(this.requestStore.getState()); + } +} + +customElements.define("billing-address-picker", BillingAddressPicker); diff --git a/browser/components/payments/res/containers/completion-error-page.js b/browser/components/payments/res/containers/completion-error-page.js new file mode 100644 index 0000000000..9e8f7ce9f7 --- /dev/null +++ b/browser/components/payments/res/containers/completion-error-page.js @@ -0,0 +1,112 @@ +/* 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/. */ + +import HandleEventMixin from "../mixins/HandleEventMixin.js"; +import PaymentRequestPage from "../components/payment-request-page.js"; +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; +import paymentRequest from "../paymentRequest.js"; + +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <completion-error-page></completion-error-page> + * + * XXX: Bug 1473772 - This page isn't fully localized when used via this custom element + * as it will be much easier to implement and share the logic once we switch to Fluent. + */ + +export default class CompletionErrorPage extends HandleEventMixin( + PaymentStateSubscriberMixin(PaymentRequestPage) +) { + constructor() { + super(); + + this.classList.add("error-page"); + this.suggestionHeading = document.createElement("p"); + this.body.append(this.suggestionHeading); + this.suggestionsList = document.createElement("ul"); + this.suggestions = []; + this.body.append(this.suggestionsList); + + this.brandingSpan = document.createElement("span"); + this.brandingSpan.classList.add("branding"); + this.footer.appendChild(this.brandingSpan); + + this.doneButton = document.createElement("button"); + this.doneButton.classList.add("done-button", "primary"); + this.doneButton.addEventListener("click", this); + + this.footer.appendChild(this.doneButton); + } + + render(state) { + let { page } = state; + + if (this.id && page && page.id !== this.id) { + log.debug( + `CompletionErrorPage: no need to further render inactive page: ${page.id}` + ); + return; + } + + let { request } = this.requestStore.getState(); + let { displayHost } = request.topLevelPrincipal.URI; + for (let key of [ + "pageTitle", + "suggestion-heading", + "suggestion-1", + "suggestion-2", + "suggestion-3", + ]) { + if (this.dataset[key] && displayHost) { + this.dataset[key] = this.dataset[key].replace( + "**host-name**", + displayHost + ); + } + } + + this.pageTitleHeading.textContent = this.dataset.pageTitle; + this.suggestionHeading.textContent = this.dataset.suggestionHeading; + this.brandingSpan.textContent = this.dataset.brandingLabel; + this.doneButton.textContent = this.dataset.doneButtonLabel; + + this.suggestionsList.textContent = ""; + if (this.dataset["suggestion-1"]) { + this.suggestions[0] = this.dataset["suggestion-1"]; + } + if (this.dataset["suggestion-2"]) { + this.suggestions[1] = this.dataset["suggestion-2"]; + } + if (this.dataset["suggestion-3"]) { + this.suggestions[2] = this.dataset["suggestion-3"]; + } + + let suggestionsFragment = document.createDocumentFragment(); + for (let suggestionText of this.suggestions) { + let listNode = document.createElement("li"); + listNode.textContent = suggestionText; + suggestionsFragment.appendChild(listNode); + } + this.suggestionsList.appendChild(suggestionsFragment); + } + + onClick(event) { + switch (event.target) { + case this.doneButton: { + this.onDoneButtonClick(event); + break; + } + default: { + throw new Error("Unexpected click target"); + } + } + } + + onDoneButtonClick(event) { + paymentRequest.closeDialog(); + } +} + +customElements.define("completion-error-page", CompletionErrorPage); diff --git a/browser/components/payments/res/containers/cvv-hint-image-back.svg b/browser/components/payments/res/containers/cvv-hint-image-back.svg new file mode 100644 index 0000000000..1e9f4ddb10 --- /dev/null +++ b/browser/components/payments/res/containers/cvv-hint-image-back.svg @@ -0,0 +1,27 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="27" version="1.1">
+ <defs>
+ <circle id="a" cx="10" cy="10" r="10"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+ <path fill="#A1C6FF" d="M37 6.2a10.046 10.046 0 0 0 -2 -0.2c-5.523 0 -10 4.477 -10 10a9.983 9.983 0 0 0 3.999 8h-27.999a1 1 0 0 1 -1 -1v-22a1 1 0 0 1 1 -1h35a1 1 0 0 1 1 1v5.2zm-18 7.8c3.314 0 6 -1.567 6 -3.5s-2.686 -3.5 -6 -3.5 -6 1.567 -6 3.5 2.686 3.5 6 3.5z"/>
+ <path fill="#5F5F5F" d="M2 17h9v2h-9v-2zm0 -15h33v3h-33v-3zm0 18h15v2h-15v-2zm10 -3h13v2h-13v-2z"/>
+ <g transform="translate(25 6)">
+ <mask id="b" fill="#fff">
+ <use xlink:href="#a"/>
+ </mask>
+ <use stroke="#FFF" stroke-width="1.5" xlink:href="#a"/>
+ <g mask="url(#b)">
+ <g transform="translate(-77 -31)">
+ <rect width="99.39" height="69.141" x="0" y="0" fill="#A1C6FF" fill-rule="evenodd" rx="1"/>
+ <path fill="#5F5F5F" fill-rule="evenodd" d="M79 46h17v6h-17z"/>
+ <text fill="none" font-family="sans-serif" font-size="6">
+ <tspan x="80" y="42" fill="#5F5F5F">1234</tspan>
+ </text>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/browser/components/payments/res/containers/cvv-hint-image-front.svg b/browser/components/payments/res/containers/cvv-hint-image-front.svg new file mode 100644 index 0000000000..5a758870a1 --- /dev/null +++ b/browser/components/payments/res/containers/cvv-hint-image-front.svg @@ -0,0 +1,25 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="27" version="1.1">
+ <defs>
+ <circle id="a" cx="10" cy="10" r="10"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
+ <path fill="#62A0FF" d="M37 6.458a9.996 9.996 0 0 0 -3 -0.458c-3.701 0 -6.933 2.011 -8.662 5h-22.338v5h21a9.983 9.983 0 0 0 3.999 8h-26.999a1 1 0 0 1 -1 -1v-22a1 1 0 0 1 1 -1h35a1 1 0 0 1 1 1v5.458z"/>
+ <path fill="#5F5F5F" d="M37 6.458a9.996 9.996 0 0 0 -3 -0.458 9.97 9.97 0 0 0 -7.141 3h-26.859v-6h37v3.458z"/>
+ <g transform="translate(24 6)">
+ <mask id="b" fill="#fff">
+ <use xlink:href="#a"/>
+ </mask>
+ <use stroke="#FFF" stroke-width="1.5" xlink:href="#a"/>
+ <g mask="url(#b)">
+ <path fill="#62A0FF" fill-rule="evenodd" d="M-41.923 -15.615h64.476a1 1 0 0 1 1 1v44.244a1 1 0 0 1 -1 1h-64.476a1 1 0 0 1 -1 -1v-44.244a1 1 0 0 1 1 -1zm2.923 19.615v9h55v-9h-55z"/>
+ <path fill="#5F5F5F" fill-rule="evenodd" d="M-43 -10h66v12h-66z"/>
+ <text fill="none" font-family="sans-serif" font-size="6" transform="translate(-43.923 -15.615)">
+ <tspan x="47.676" y="26.104" fill="#5F5F5F">123</tspan>
+ </text>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/browser/components/payments/res/containers/error-page.css b/browser/components/payments/res/containers/error-page.css new file mode 100644 index 0000000000..bd4bec96b5 --- /dev/null +++ b/browser/components/payments/res/containers/error-page.css @@ -0,0 +1,42 @@ +/* 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/. */ + +.error-page.illustrated > .page-body { + display: flex; + justify-content: center; + min-height: 160px; + background-position: left center; + background-repeat: no-repeat; + background-size: 160px; + padding-inline-start: 160px; +} + +.error-page.illustrated > .page-body:dir(rtl) { + background-position: right center; +} + +.error-page.illustrated > .page-body > h2 { + background: none; + padding-inline-start: 0; + margin-inline-start: 0; + font-weight: lighter; + font-size: 2rem; +} + +.error-page.illustrated > .page-body > p { + margin-top: 0; + margin-bottom: 0; +} + +.error-page.illustrated > .page-body > ul { + margin-top: .5rem; +} + +.error-page#completion-timeout-error > .page-body { + background-image: url("./timeout.svg"); +} + +.error-page#completion-fail-error > .page-body { + background-image: url("./warning.svg"); +} diff --git a/browser/components/payments/res/containers/order-details.css b/browser/components/payments/res/containers/order-details.css new file mode 100644 index 0000000000..beadeb3b88 --- /dev/null +++ b/browser/components/payments/res/containers/order-details.css @@ -0,0 +1,55 @@ +/* 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/. */ + +order-details { + display: grid; + grid-template-columns: 20% auto 10rem; + grid-gap: 1em; + margin: 1px 4vw; +} + +order-details > ul { + list-style-type: none; + margin: 1em 0; + padding: 0; + display: contents; +} + +order-details payment-details-item { + margin: 1px 0; + display: contents; +} +payment-details-item .label { + grid-column-start: 1; + grid-column-end: 3; +} +payment-details-item currency-amount { + grid-column-start: 3; + grid-column-end: 4; +} + +order-details .footer-items-list:not(:empty):before { + border: 1px solid GrayText; + display: block; + content: ""; + grid-column-start: 1; + grid-column-end: 4; +} + +order-details > .details-total { + margin: 1px 0; + display: contents; +} + +.details-total > .label { + margin: 0; + font-size: large; + grid-column-start: 2; + grid-column-end: 3; + text-align: end; +} +.details-total > currency-amount { + font-size: large; + text-align: end; +} diff --git a/browser/components/payments/res/containers/order-details.js b/browser/components/payments/res/containers/order-details.js new file mode 100644 index 0000000000..a458c14784 --- /dev/null +++ b/browser/components/payments/res/containers/order-details.js @@ -0,0 +1,143 @@ +/* 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/. */ + +// <currency-amount> is used in the <template> +import "../components/currency-amount.js"; +import PaymentDetailsItem from "../components/payment-details-item.js"; +import paymentRequest from "../paymentRequest.js"; +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; + +/** + * <order-details></order-details> + */ + +export default class OrderDetails extends PaymentStateSubscriberMixin( + HTMLElement +) { + connectedCallback() { + if (!this._contents) { + let template = document.getElementById("order-details-template"); + let contents = (this._contents = document.importNode( + template.content, + true + )); + + this._mainItemsList = contents.querySelector(".main-list"); + this._footerItemsList = contents.querySelector(".footer-items-list"); + this._totalAmount = contents.querySelector( + ".details-total > currency-amount" + ); + + this.appendChild(this._contents); + } + super.connectedCallback(); + } + + get mainItemsList() { + return this._mainItemsList; + } + + get footerItemsList() { + return this._footerItemsList; + } + + get totalAmountElem() { + return this._totalAmount; + } + + static _emptyList(listEl) { + while (listEl.lastChild) { + listEl.removeChild(listEl.lastChild); + } + } + + static _populateList(listEl, items) { + let fragment = document.createDocumentFragment(); + for (let item of items) { + let row = new PaymentDetailsItem(); + row.label = item.label; + row.amountValue = item.amount.value; + row.amountCurrency = item.amount.currency; + fragment.appendChild(row); + } + listEl.appendChild(fragment); + return listEl; + } + + _getAdditionalDisplayItems(state) { + let methodId = state.selectedPaymentCard; + let modifier = paymentRequest.getModifierForPaymentMethod(state, methodId); + if (modifier && modifier.additionalDisplayItems) { + return modifier.additionalDisplayItems; + } + return []; + } + + render(state) { + let totalItem = paymentRequest.getTotalItem(state); + + OrderDetails._emptyList(this.mainItemsList); + OrderDetails._emptyList(this.footerItemsList); + + let mainItems = OrderDetails._getMainListItems(state); + if (mainItems.length) { + OrderDetails._populateList(this.mainItemsList, mainItems); + } + + let footerItems = OrderDetails._getFooterListItems(state); + if (footerItems.length) { + OrderDetails._populateList(this.footerItemsList, footerItems); + } + + this.totalAmountElem.value = totalItem.amount.value; + this.totalAmountElem.currency = totalItem.amount.currency; + } + + /** + * Determine if a display item should belong in the footer list. + * This uses the proposed "type" property, tracked at: + * https://github.com/w3c/payment-request/issues/163 + * + * @param {object} item - Data representing a PaymentItem + * @returns {boolean} + */ + static isFooterItem(item) { + return item.type == "tax"; + } + + static _getMainListItems(state) { + let request = state.request; + let items = request.paymentDetails.displayItems; + if (Array.isArray(items) && items.length) { + let predicate = item => !OrderDetails.isFooterItem(item); + return request.paymentDetails.displayItems.filter(predicate); + } + return []; + } + + static _getFooterListItems(state) { + let request = state.request; + let items = request.paymentDetails.displayItems; + let footerItems = []; + let methodId = state.selectedPaymentCard; + if (methodId) { + let modifier = paymentRequest.getModifierForPaymentMethod( + state, + methodId + ); + if (modifier && Array.isArray(modifier.additionalDisplayItems)) { + footerItems.push(...modifier.additionalDisplayItems); + } + } + if (Array.isArray(items) && items.length) { + let predicate = OrderDetails.isFooterItem; + footerItems.push( + ...request.paymentDetails.displayItems.filter(predicate) + ); + } + return footerItems; + } +} + +customElements.define("order-details", OrderDetails); diff --git a/browser/components/payments/res/containers/payment-dialog.js b/browser/components/payments/res/containers/payment-dialog.js new file mode 100644 index 0000000000..7bf094e267 --- /dev/null +++ b/browser/components/payments/res/containers/payment-dialog.js @@ -0,0 +1,593 @@ +/* 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/. */ + +import HandleEventMixin from "../mixins/HandleEventMixin.js"; +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; +import paymentRequest from "../paymentRequest.js"; + +import "../components/currency-amount.js"; +import "../components/payment-request-page.js"; +import "../components/accepted-cards.js"; +import "./address-picker.js"; +import "./address-form.js"; +import "./basic-card-form.js"; +import "./completion-error-page.js"; +import "./order-details.js"; +import "./payment-method-picker.js"; +import "./shipping-option-picker.js"; + +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <payment-dialog></payment-dialog> + * + * Warning: Do not import this module from any other module as it will import + * everything else (see above) and ruin element independence. This can stop + * being exported once tests stop depending on it. + */ + +export default class PaymentDialog extends HandleEventMixin( + PaymentStateSubscriberMixin(HTMLElement) +) { + constructor() { + super(); + this._template = document.getElementById("payment-dialog-template"); + this._cachedState = {}; + } + + connectedCallback() { + let contents = document.importNode(this._template.content, true); + this._hostNameEl = contents.querySelector("#host-name"); + + this._cancelButton = contents.querySelector("#cancel"); + this._cancelButton.addEventListener("click", this.cancelRequest); + + this._payButton = contents.querySelector("#pay"); + this._payButton.addEventListener("click", this); + + this._viewAllButton = contents.querySelector("#view-all"); + this._viewAllButton.addEventListener("click", this); + + this._mainContainer = contents.getElementById("main-container"); + this._orderDetailsOverlay = contents.querySelector( + "#order-details-overlay" + ); + + this._shippingAddressPicker = contents.querySelector( + "address-picker.shipping-related" + ); + this._shippingOptionPicker = contents.querySelector( + "shipping-option-picker" + ); + this._shippingRelatedEls = contents.querySelectorAll(".shipping-related"); + this._payerRelatedEls = contents.querySelectorAll(".payer-related"); + this._payerAddressPicker = contents.querySelector( + "address-picker.payer-related" + ); + this._paymentMethodPicker = contents.querySelector("payment-method-picker"); + this._acceptedCardsList = contents.querySelector("accepted-cards"); + this._manageText = contents.querySelector(".manage-text"); + this._manageText.addEventListener("click", this); + + this._header = contents.querySelector("header"); + + this._errorText = contents.querySelector("header > .page-error"); + + this._disabledOverlay = contents.getElementById("disabled-overlay"); + + this.appendChild(contents); + + super.connectedCallback(); + } + + disconnectedCallback() { + this._cancelButton.removeEventListener("click", this.cancelRequest); + this._payButton.removeEventListener("click", this.pay); + this._viewAllButton.removeEventListener("click", this); + super.disconnectedCallback(); + } + + onClick(event) { + switch (event.currentTarget) { + case this._viewAllButton: + let orderDetailsShowing = !this.requestStore.getState() + .orderDetailsShowing; + this.requestStore.setState({ orderDetailsShowing }); + break; + case this._payButton: + this.pay(); + break; + case this._manageText: + if (event.target instanceof HTMLAnchorElement) { + this.openPreferences(event); + } + break; + } + } + + openPreferences(event) { + paymentRequest.openPreferences(); + event.preventDefault(); + } + + cancelRequest() { + paymentRequest.cancel(); + } + + pay() { + let state = this.requestStore.getState(); + let { + selectedPayerAddress, + selectedPaymentCard, + selectedPaymentCardSecurityCode, + selectedShippingAddress, + } = state; + + let data = { + selectedPaymentCardGUID: selectedPaymentCard, + selectedPaymentCardSecurityCode, + }; + + data.selectedShippingAddressGUID = state.request.paymentOptions + .requestShipping + ? selectedShippingAddress + : null; + + data.selectedPayerAddressGUID = this._isPayerRequested( + state.request.paymentOptions + ) + ? selectedPayerAddress + : null; + + paymentRequest.pay(data); + } + + /** + * Called when the selectedShippingAddress or its properties are changed. + * @param {string} shippingAddressGUID + */ + changeShippingAddress(shippingAddressGUID) { + // Clear shipping address merchant errors when the shipping address changes. + let request = Object.assign({}, this.requestStore.getState().request); + request.paymentDetails = Object.assign({}, request.paymentDetails); + request.paymentDetails.shippingAddressErrors = {}; + this.requestStore.setState({ request }); + + paymentRequest.changeShippingAddress({ + shippingAddressGUID, + }); + } + + changeShippingOption(optionID) { + paymentRequest.changeShippingOption({ + optionID, + }); + } + + /** + * Called when the selectedPaymentCard or its relevant properties or billingAddress are changed. + * @param {string} selectedPaymentCardBillingAddressGUID + */ + changePaymentMethod(selectedPaymentCardBillingAddressGUID) { + // Clear paymentMethod merchant errors when the paymentMethod or billingAddress changes. + let request = Object.assign({}, this.requestStore.getState().request); + request.paymentDetails = Object.assign({}, request.paymentDetails); + request.paymentDetails.paymentMethodErrors = null; + this.requestStore.setState({ request }); + + paymentRequest.changePaymentMethod({ + selectedPaymentCardBillingAddressGUID, + }); + } + + /** + * Called when the selectedPayerAddress or its relevant properties are changed. + * @param {string} payerAddressGUID + */ + changePayerAddress(payerAddressGUID) { + // Clear payer address merchant errors when the payer address changes. + let request = Object.assign({}, this.requestStore.getState().request); + request.paymentDetails = Object.assign({}, request.paymentDetails); + request.paymentDetails.payerErrors = {}; + this.requestStore.setState({ request }); + + paymentRequest.changePayerAddress({ + payerAddressGUID, + }); + } + + _isPayerRequested(paymentOptions) { + return ( + paymentOptions.requestPayerName || + paymentOptions.requestPayerEmail || + paymentOptions.requestPayerPhone + ); + } + + _getAdditionalDisplayItems(state) { + let methodId = state.selectedPaymentCard; + let modifier = paymentRequest.getModifierForPaymentMethod(state, methodId); + if (modifier && modifier.additionalDisplayItems) { + return modifier.additionalDisplayItems; + } + return []; + } + + _updateCompleteStatus(state) { + let { completeStatus } = state.request; + switch (completeStatus) { + case "fail": + case "timeout": + case "unknown": + state.page = { + id: `completion-${completeStatus}-error`, + }; + state.changesPrevented = false; + break; + case "": { + // When we get a DOM update for an updateWith() or retry() the completeStatus + // is "" when we need to show non-final screens. Don't set the page as we + // may be on a form instead of payment-summary + state.changesPrevented = false; + break; + } + } + return state; + } + + /** + * Set some state from the privileged parent process. + * Other elements that need to set state should use their own `this.requestStore.setState` + * method provided by the `PaymentStateSubscriberMixin`. + * + * @param {object} state - See `PaymentsStore.setState` + */ + // eslint-disable-next-line complexity + async setStateFromParent(state) { + let oldAddresses = paymentRequest.getAddresses( + this.requestStore.getState() + ); + let oldBasicCards = paymentRequest.getBasicCards( + this.requestStore.getState() + ); + if (state.request) { + state = this._updateCompleteStatus(state); + } + this.requestStore.setState(state); + + // Check if any foreign-key constraints were invalidated. + state = this.requestStore.getState(); + let { + selectedPayerAddress, + selectedPaymentCard, + selectedShippingAddress, + selectedShippingOption, + } = state; + let addresses = paymentRequest.getAddresses(state); + let { paymentOptions } = state.request; + + if (paymentOptions.requestShipping) { + let shippingOptions = state.request.paymentDetails.shippingOptions; + let shippingAddress = + selectedShippingAddress && addresses[selectedShippingAddress]; + let oldShippingAddress = + selectedShippingAddress && oldAddresses[selectedShippingAddress]; + + // Ensure `selectedShippingAddress` never refers to a deleted address. + // We also compare address timestamps to notify about changes + // made outside the payments UI. + if (shippingAddress) { + // invalidate the cached value if the address was modified + if ( + oldShippingAddress && + shippingAddress.guid == oldShippingAddress.guid && + shippingAddress.timeLastModified != + oldShippingAddress.timeLastModified + ) { + delete this._cachedState.selectedShippingAddress; + } + } else if (selectedShippingAddress !== null) { + // null out the `selectedShippingAddress` property if it is undefined, + // or if the address it pointed to was removed from storage. + log.debug("resetting invalid/deleted shipping address"); + this.requestStore.setState({ + selectedShippingAddress: null, + }); + } + + // Ensure `selectedShippingOption` never refers to a deleted shipping option and + // matches the merchant's selected option if the user hasn't made a choice. + if ( + shippingOptions && + (!selectedShippingOption || + !shippingOptions.find(opt => opt.id == selectedShippingOption)) + ) { + this._cachedState.selectedShippingOption = selectedShippingOption; + this.requestStore.setState({ + // Use the DOM's computed selected shipping option: + selectedShippingOption: state.request.shippingOption, + }); + } + } + + let basicCards = paymentRequest.getBasicCards(state); + let oldPaymentMethod = + selectedPaymentCard && oldBasicCards[selectedPaymentCard]; + let paymentMethod = selectedPaymentCard && basicCards[selectedPaymentCard]; + if ( + oldPaymentMethod && + paymentMethod.guid == oldPaymentMethod.guid && + paymentMethod.timeLastModified != oldPaymentMethod.timeLastModified + ) { + delete this._cachedState.selectedPaymentCard; + } else { + // Changes to the billing address record don't change the `timeLastModified` + // on the card record so we have to check for changes to the address separately. + + let billingAddressGUID = + paymentMethod && paymentMethod.billingAddressGUID; + let billingAddress = billingAddressGUID && addresses[billingAddressGUID]; + let oldBillingAddress = + billingAddressGUID && oldAddresses[billingAddressGUID]; + + if ( + oldBillingAddress && + billingAddress && + billingAddress.timeLastModified != oldBillingAddress.timeLastModified + ) { + delete this._cachedState.selectedPaymentCard; + } + } + + // Ensure `selectedPaymentCard` never refers to a deleted payment card. + if (selectedPaymentCard && !basicCards[selectedPaymentCard]) { + this.requestStore.setState({ + selectedPaymentCard: null, + selectedPaymentCardSecurityCode: null, + }); + } + + if (this._isPayerRequested(state.request.paymentOptions)) { + let payerAddress = + selectedPayerAddress && addresses[selectedPayerAddress]; + let oldPayerAddress = + selectedPayerAddress && oldAddresses[selectedPayerAddress]; + + if ( + oldPayerAddress && + payerAddress && + ((paymentOptions.requestPayerName && + payerAddress.name != oldPayerAddress.name) || + (paymentOptions.requestPayerEmail && + payerAddress.email != oldPayerAddress.email) || + (paymentOptions.requestPayerPhone && + payerAddress.tel != oldPayerAddress.tel)) + ) { + // invalidate the cached value if the payer address fields were modified + delete this._cachedState.selectedPayerAddress; + } + + // Ensure `selectedPayerAddress` never refers to a deleted address and refers + // to an address if one exists. + if (!addresses[selectedPayerAddress]) { + this.requestStore.setState({ + selectedPayerAddress: Object.keys(addresses)[0] || null, + }); + } + } + } + + _renderPayButton(state) { + let completeStatus = state.request.completeStatus; + switch (completeStatus) { + case "processing": + case "success": + case "unknown": { + this._payButton.disabled = true; + this._payButton.textContent = this._payButton.dataset[ + completeStatus + "Label" + ]; + break; + } + case "": { + // initial/default state + this._payButton.textContent = this._payButton.dataset.label; + const INVALID_CLASS_NAME = "invalid-selected-option"; + this._payButton.disabled = + (state.request.paymentOptions.requestShipping && + (!this._shippingAddressPicker.selectedOption || + this._shippingAddressPicker.classList.contains( + INVALID_CLASS_NAME + ) || + !this._shippingOptionPicker.selectedOption)) || + (this._isPayerRequested(state.request.paymentOptions) && + (!this._payerAddressPicker.selectedOption || + this._payerAddressPicker.classList.contains( + INVALID_CLASS_NAME + ))) || + !this._paymentMethodPicker.securityCodeInput.isValid || + !this._paymentMethodPicker.selectedOption || + this._paymentMethodPicker.classList.contains(INVALID_CLASS_NAME) || + state.changesPrevented; + break; + } + case "fail": + case "timeout": { + // pay button is hidden in fail/timeout states. + this._payButton.textContent = this._payButton.dataset.label; + this._payButton.disabled = true; + break; + } + default: { + throw new Error(`Invalid completeStatus: ${completeStatus}`); + } + } + } + + _renderPayerFields(state) { + let paymentOptions = state.request.paymentOptions; + let payerRequested = this._isPayerRequested(paymentOptions); + let payerAddressForm = this.querySelector( + "address-form[selected-state-key='selectedPayerAddress']" + ); + + for (let element of this._payerRelatedEls) { + element.hidden = !payerRequested; + } + + if (payerRequested) { + let fieldNames = new Set(); + if (paymentOptions.requestPayerName) { + fieldNames.add("name"); + } + if (paymentOptions.requestPayerEmail) { + fieldNames.add("email"); + } + if (paymentOptions.requestPayerPhone) { + fieldNames.add("tel"); + } + let addressFields = [...fieldNames].join(" "); + this._payerAddressPicker.setAttribute("address-fields", addressFields); + if (payerAddressForm.form) { + payerAddressForm.form.dataset.extraRequiredFields = addressFields; + } + + // For the payer picker we want to have a line break after the name field (#1) + // if all three fields are requested. + if (fieldNames.size == 3) { + this._payerAddressPicker.setAttribute("break-after-nth-field", 1); + } else { + this._payerAddressPicker.removeAttribute("break-after-nth-field"); + } + } else { + this._payerAddressPicker.removeAttribute("address-fields"); + } + } + + stateChangeCallback(state) { + super.stateChangeCallback(state); + + // Don't dispatch change events for initial selectedShipping* changes at initialization + // if requestShipping is false. + if (state.request.paymentOptions.requestShipping) { + if ( + state.selectedShippingAddress != + this._cachedState.selectedShippingAddress + ) { + this.changeShippingAddress(state.selectedShippingAddress); + } + + if ( + state.selectedShippingOption != this._cachedState.selectedShippingOption + ) { + this.changeShippingOption(state.selectedShippingOption); + } + } + + let selectedPaymentCard = state.selectedPaymentCard; + let basicCards = paymentRequest.getBasicCards(state); + let billingAddressGUID = (basicCards[selectedPaymentCard] || {}) + .billingAddressGUID; + if ( + selectedPaymentCard != this._cachedState.selectedPaymentCard && + billingAddressGUID + ) { + // Update _cachedState to prevent an infinite loop when changePaymentMethod updates state. + this._cachedState.selectedPaymentCard = state.selectedPaymentCard; + this.changePaymentMethod(billingAddressGUID); + } + + if (this._isPayerRequested(state.request.paymentOptions)) { + if ( + state.selectedPayerAddress != this._cachedState.selectedPayerAddress + ) { + this.changePayerAddress(state.selectedPayerAddress); + } + } + + this._cachedState.selectedShippingAddress = state.selectedShippingAddress; + this._cachedState.selectedShippingOption = state.selectedShippingOption; + this._cachedState.selectedPayerAddress = state.selectedPayerAddress; + } + + render(state) { + let request = state.request; + let paymentDetails = request.paymentDetails; + this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost; + + let displayItems = request.paymentDetails.displayItems || []; + let additionalItems = this._getAdditionalDisplayItems(state); + this._viewAllButton.hidden = + !displayItems.length && !additionalItems.length; + + let shippingType = state.request.paymentOptions.shippingType || "shipping"; + let addressPickerLabel = this._shippingAddressPicker.dataset[ + shippingType + "AddressLabel" + ]; + this._shippingAddressPicker.setAttribute("label", addressPickerLabel); + let optionPickerLabel = this._shippingOptionPicker.dataset[ + shippingType + "OptionsLabel" + ]; + this._shippingOptionPicker.setAttribute("label", optionPickerLabel); + + let shippingAddressForm = this.querySelector( + "address-form[selected-state-key='selectedShippingAddress']" + ); + shippingAddressForm.dataset.titleAdd = this.dataset[ + shippingType + "AddressTitleAdd" + ]; + shippingAddressForm.dataset.titleEdit = this.dataset[ + shippingType + "AddressTitleEdit" + ]; + + let totalItem = paymentRequest.getTotalItem(state); + let totalAmountEl = this.querySelector("#total > currency-amount"); + totalAmountEl.value = totalItem.amount.value; + totalAmountEl.currency = totalItem.amount.currency; + + // Show the total header on the address and basic card pages only during + // on-boarding(FTU) and on the payment summary page. + this._header.hidden = + !state.page.onboardingWizard && state.page.id != "payment-summary"; + + this._orderDetailsOverlay.hidden = !state.orderDetailsShowing; + let genericError = ""; + if ( + this._shippingAddressPicker.selectedOption && + (!request.paymentDetails.shippingOptions || + !request.paymentDetails.shippingOptions.length) + ) { + genericError = this._errorText.dataset[shippingType + "GenericError"]; + } + this._errorText.textContent = paymentDetails.error || genericError; + + let paymentOptions = request.paymentOptions; + for (let element of this._shippingRelatedEls) { + element.hidden = !paymentOptions.requestShipping; + } + + this._renderPayerFields(state); + + let isMac = /mac/i.test(navigator.platform); + for (let manageTextEl of this._manageText.children) { + manageTextEl.hidden = manageTextEl.dataset.os == "mac" ? !isMac : isMac; + let link = manageTextEl.querySelector("a"); + // The href is only set to be exposed to accessibility tools so users know what will open. + // The actual opening happens from the click event listener. + link.href = "about:preferences#privacy-form-autofill"; + } + + this._renderPayButton(state); + + for (let page of this._mainContainer.querySelectorAll(":scope > .page")) { + page.hidden = state.page.id != page.id; + } + + this.toggleAttribute("changes-prevented", state.changesPrevented); + this.setAttribute("complete-status", request.completeStatus); + this._disabledOverlay.hidden = !state.changesPrevented; + } +} + +customElements.define("payment-dialog", PaymentDialog); diff --git a/browser/components/payments/res/containers/payment-method-picker.js b/browser/components/payments/res/containers/payment-method-picker.js new file mode 100644 index 0000000000..3693d352a5 --- /dev/null +++ b/browser/components/payments/res/containers/payment-method-picker.js @@ -0,0 +1,199 @@ +/* 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/. */ + +import BasicCardOption from "../components/basic-card-option.js"; +import CscInput from "../components/csc-input.js"; +import HandleEventMixin from "../mixins/HandleEventMixin.js"; +import RichPicker from "./rich-picker.js"; +import paymentRequest from "../paymentRequest.js"; + +/* import-globals-from ../unprivileged-fallbacks.js */ + +/** + * <payment-method-picker></payment-method-picker> + * Container around add/edit links and <rich-select> with + * <basic-card-option> listening to savedBasicCards. + */ + +export default class PaymentMethodPicker extends HandleEventMixin(RichPicker) { + constructor() { + super(); + this.dropdown.setAttribute("option-type", "basic-card-option"); + this.securityCodeInput = new CscInput(); + this.securityCodeInput.className = "security-code-container"; + this.securityCodeInput.placeholder = this.dataset.cscPlaceholder; + this.securityCodeInput.backTooltip = this.dataset.cscBackTooltip; + this.securityCodeInput.frontTooltip = this.dataset.cscFrontTooltip; + this.securityCodeInput.addEventListener("change", this); + this.securityCodeInput.addEventListener("input", this); + } + + connectedCallback() { + super.connectedCallback(); + this.dropdown.after(this.securityCodeInput); + } + + get fieldNames() { + let fieldNames = [...BasicCardOption.recordAttributes]; + return fieldNames; + } + + render(state) { + let basicCards = paymentRequest.getBasicCards(state); + let desiredOptions = []; + for (let [guid, basicCard] of Object.entries(basicCards)) { + let optionEl = this.dropdown.getOptionByValue(guid); + if (!optionEl) { + optionEl = document.createElement("option"); + optionEl.value = guid; + } + + for (let key of BasicCardOption.recordAttributes) { + let val = basicCard[key]; + if (val) { + optionEl.setAttribute(key, val); + } else { + optionEl.removeAttribute(key); + } + } + + optionEl.textContent = BasicCardOption.formatSingleLineLabel(basicCard); + desiredOptions.push(optionEl); + } + + this.dropdown.popupBox.textContent = ""; + for (let option of desiredOptions) { + this.dropdown.popupBox.appendChild(option); + } + + // Update selectedness after the options are updated + let selectedPaymentCardGUID = state[this.selectedStateKey]; + if (selectedPaymentCardGUID) { + this.dropdown.value = selectedPaymentCardGUID; + + if (selectedPaymentCardGUID !== this.dropdown.value) { + throw new Error( + `The option ${selectedPaymentCardGUID} ` + + `does not exist in the payment method picker` + ); + } + } else { + this.dropdown.value = ""; + } + + let securityCodeState = state[this.selectedStateKey + "SecurityCode"]; + if ( + securityCodeState && + securityCodeState != this.securityCodeInput.value + ) { + this.securityCodeInput.defaultValue = securityCodeState; + } + + let selectedCardType = + (basicCards[selectedPaymentCardGUID] && + basicCards[selectedPaymentCardGUID]["cc-type"]) || + ""; + this.securityCodeInput.cardType = selectedCardType; + + super.render(state); + } + + errorForSelectedOption(state) { + let superError = super.errorForSelectedOption(state); + if (superError) { + return superError; + } + let selectedOption = this.selectedOption; + if (!selectedOption) { + return ""; + } + + let basicCardMethod = state.request.paymentMethods.find( + method => method.supportedMethods == "basic-card" + ); + let merchantNetworks = + basicCardMethod && + basicCardMethod.data && + basicCardMethod.data.supportedNetworks; + let acceptedNetworks = + merchantNetworks || PaymentDialogUtils.getCreditCardNetworks(); + let selectedCard = paymentRequest.getBasicCards(state)[ + selectedOption.value + ]; + let isSupported = + selectedCard["cc-type"] && + acceptedNetworks.includes(selectedCard["cc-type"]); + return isSupported ? "" : this.dataset.invalidLabel; + } + + get selectedStateKey() { + return this.getAttribute("selected-state-key"); + } + + onInput(event) { + this.onInputOrChange(event); + } + + onChange(event) { + this.onInputOrChange(event); + } + + onInputOrChange({ currentTarget }) { + let selectedKey = this.selectedStateKey; + let stateChange = {}; + + if (!selectedKey) { + return; + } + + switch (currentTarget) { + case this.dropdown: { + stateChange[selectedKey] = this.dropdown.value; + break; + } + case this.securityCodeInput: { + stateChange[ + selectedKey + "SecurityCode" + ] = this.securityCodeInput.value; + break; + } + default: { + return; + } + } + + this.requestStore.setState(stateChange); + } + + onClick({ target }) { + let nextState = { + page: { + id: "basic-card-page", + }, + "basic-card-page": { + selectedStateKey: this.selectedStateKey, + }, + }; + + switch (target) { + case this.addLink: { + nextState["basic-card-page"].guid = null; + break; + } + case this.editLink: { + let state = this.requestStore.getState(); + let selectedPaymentCardGUID = state[this.selectedStateKey]; + nextState["basic-card-page"].guid = selectedPaymentCardGUID; + break; + } + default: { + throw new Error("Unexpected onClick"); + } + } + + this.requestStore.setState(nextState); + } +} + +customElements.define("payment-method-picker", PaymentMethodPicker); diff --git a/browser/components/payments/res/containers/rich-picker.css b/browser/components/payments/res/containers/rich-picker.css new file mode 100644 index 0000000000..7b232518d0 --- /dev/null +++ b/browser/components/payments/res/containers/rich-picker.css @@ -0,0 +1,83 @@ +/* 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/. */ + +.rich-picker { + display: grid; + grid-template-columns: 5fr auto auto; + grid-template-areas: + "label edit add" + "dropdown dropdown dropdown" + "invalid invalid invalid"; + padding-top: 8px; +} + +.rich-picker > label { + color: #0c0c0d; + font-weight: 700; + grid-area: label; +} + +.rich-picker > .add-link, +.rich-picker > .edit-link { + padding: 0 8px; +} + +.rich-picker > .add-link { + grid-area: add; +} + +.rich-picker > .edit-link { + grid-area: edit; + border-inline-end: 1px solid #0C0C0D33; +} + +.rich-picker > rich-select { + grid-area: dropdown; +} + +.invalid-selected-option > rich-select > select { + border: 1px solid #c70011; +} + +.rich-picker > .invalid-label { + grid-area: invalid; + font-weight: normal; + color: #c70011; +} + +:not(.invalid-selected-option) > .invalid-label { + display: none; +} + +/* Payment Method Picker */ +payment-method-picker.rich-picker { + grid-template-columns: 20fr 1fr auto auto; + grid-template-areas: + "label spacer edit add" + "dropdown csc csc csc" + "invalid invalid invalid invalid"; +} + +.security-code-container { + display: flex; + flex-grow: 1; + grid-area: csc; + margin: 10px 0; /* Has to be same as rich-select */ +} + +.rich-picker .security-code { + border: 1px solid #0C0C0D33; + /* Underlap the 1px border from common.css */ + margin-inline-start: -1px; + flex-grow: 1; + padding: 8px; +} + +.rich-picker .security-code:-moz-ui-invalid, +.rich-picker .security-code:focus { + /* So the error outline and focus ring appear above the adjacent dropdown when appropriate. */ + /* We don't want to always be on top or we will cover the error outline or focus outline from the + dropdown. */ + z-index: 1; +} diff --git a/browser/components/payments/res/containers/rich-picker.js b/browser/components/payments/res/containers/rich-picker.js new file mode 100644 index 0000000000..3752f67942 --- /dev/null +++ b/browser/components/payments/res/containers/rich-picker.js @@ -0,0 +1,114 @@ +/* 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/. */ + +import PaymentStateSubscriberMixin from "../mixins/PaymentStateSubscriberMixin.js"; +import RichSelect from "../components/rich-select.js"; + +export default class RichPicker extends PaymentStateSubscriberMixin( + HTMLElement +) { + static get observedAttributes() { + return ["label"]; + } + + constructor() { + super(); + this.classList.add("rich-picker"); + + this.dropdown = new RichSelect(); + this.dropdown.addEventListener("change", this); + + this.labelElement = document.createElement("label"); + + this.addLink = document.createElement("a"); + this.addLink.className = "add-link"; + this.addLink.href = "javascript:void(0)"; + this.addLink.addEventListener("click", this); + + this.editLink = document.createElement("a"); + this.editLink.className = "edit-link"; + this.editLink.href = "javascript:void(0)"; + this.editLink.addEventListener("click", this); + + this.invalidLabel = document.createElement("label"); + this.invalidLabel.className = "invalid-label"; + } + + connectedCallback() { + if (!this.dropdown.popupBox.id) { + this.dropdown.popupBox.id = + "select-" + Math.floor(Math.random() * 1000000); + } + this.labelElement.setAttribute("for", this.dropdown.popupBox.id); + this.invalidLabel.setAttribute("for", this.dropdown.popupBox.id); + + // The document order, by default, controls tab order so keep that in mind if changing this. + this.appendChild(this.labelElement); + this.appendChild(this.dropdown); + this.appendChild(this.editLink); + this.appendChild(this.addLink); + this.appendChild(this.invalidLabel); + super.connectedCallback(); + } + + attributeChangedCallback(name, oldValue, newValue) { + if (name == "label") { + this.labelElement.textContent = newValue; + } + } + + render(state) { + this.editLink.hidden = !this.dropdown.value; + + let errorText = this.errorForSelectedOption(state); + this.classList.toggle("invalid-selected-option", !!errorText); + this.invalidLabel.textContent = errorText; + this.addLink.textContent = this.dataset.addLinkLabel; + this.editLink.textContent = this.dataset.editLinkLabel; + } + + get selectedOption() { + return this.dropdown.selectedOption; + } + + get selectedRichOption() { + return this.dropdown.selectedRichOption; + } + + get requiredFields() { + return this.selectedOption ? this.selectedOption.requiredFields || [] : []; + } + + get fieldNames() { + return []; + } + + /** + * @param {object} state Application state + * @returns {string} Containing an error message for the picker or "" for no error. + */ + errorForSelectedOption(state) { + if (!this.selectedOption) { + return ""; + } + if (!this.dataset.invalidLabel) { + throw new Error("data-invalid-label is required"); + } + return this.missingFieldsOfSelectedOption().length + ? this.dataset.invalidLabel + : ""; + } + + missingFieldsOfSelectedOption() { + let selectedOption = this.selectedOption; + if (!selectedOption) { + return []; + } + + let fieldNames = this.selectedRichOption.requiredFields || []; + + // Return all field names that are empty or missing from the option. + return fieldNames.filter(name => !selectedOption.getAttribute(name)); + } +} diff --git a/browser/components/payments/res/containers/shipping-option-picker.js b/browser/components/payments/res/containers/shipping-option-picker.js new file mode 100644 index 0000000000..01a97f1ac4 --- /dev/null +++ b/browser/components/payments/res/containers/shipping-option-picker.js @@ -0,0 +1,72 @@ +/* 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/. */ + +import RichPicker from "./rich-picker.js"; +import ShippingOption from "../components/shipping-option.js"; +import HandleEventMixin from "../mixins/HandleEventMixin.js"; + +/** + * <shipping-option-picker></shipping-option-picker> + * Container around <rich-select> with + * <option> listening to shippingOptions. + */ + +export default class ShippingOptionPicker extends HandleEventMixin(RichPicker) { + constructor() { + super(); + this.dropdown.setAttribute("option-type", "shipping-option"); + } + + render(state) { + this.addLink.hidden = true; + this.editLink.hidden = true; + + // If requestShipping is true but paymentDetails.shippingOptions isn't defined + // then use an empty array as a fallback. + let shippingOptions = state.request.paymentDetails.shippingOptions || []; + let desiredOptions = []; + for (let option of shippingOptions) { + let optionEl = this.dropdown.getOptionByValue(option.id); + if (!optionEl) { + optionEl = document.createElement("option"); + optionEl.value = option.id; + } + + optionEl.setAttribute("label", option.label); + optionEl.setAttribute("amount-currency", option.amount.currency); + optionEl.setAttribute("amount-value", option.amount.value); + + optionEl.textContent = ShippingOption.formatSingleLineLabel(option); + desiredOptions.push(optionEl); + } + + this.dropdown.popupBox.textContent = ""; + for (let option of desiredOptions) { + this.dropdown.popupBox.appendChild(option); + } + + // Update selectedness after the options are updated + let selectedShippingOption = state.selectedShippingOption; + this.dropdown.value = selectedShippingOption; + + if ( + selectedShippingOption && + selectedShippingOption !== this.dropdown.popupBox.value + ) { + throw new Error( + `The option ${selectedShippingOption} ` + + `does not exist in the shipping option picker` + ); + } + } + + onChange(event) { + let selectedOptionId = this.dropdown.value; + this.requestStore.setState({ + selectedShippingOption: selectedOptionId, + }); + } +} + +customElements.define("shipping-option-picker", ShippingOptionPicker); diff --git a/browser/components/payments/res/containers/timeout.svg b/browser/components/payments/res/containers/timeout.svg new file mode 100644 index 0000000000..a9c96ababd --- /dev/null +++ b/browser/components/payments/res/containers/timeout.svg @@ -0,0 +1,84 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="183" height="159" version="1.1">
+ <defs>
+ <linearGradient id="a" x1="-58.737%" x2="177.192%" y1="-3.847%" y2="112.985%">
+ <stop offset="0%" stop-color="#CCFBFF"/>
+ <stop offset="100%" stop-color="#C9E4FF"/>
+ </linearGradient>
+ <linearGradient id="b" x1="-62.081%" x2="144.194%" y1="-14.656%" y2="104.338%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#008EA4"/>
+ </linearGradient>
+ <linearGradient id="c" x1="-93.784%" x2="130.325%" y1="-512.631%" y2="364.268%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="d" x1="-632.1%" x2="878.563%" y1="-1341.641%" y2="1656.303%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="e" x1="-145.225%" x2="166.502%" y1="-230.02%" y2="260.392%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="f" x1="-16.485%" x2="216.233%" y1="-373.776%" y2="1088.73%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="g" x1="-13.212%" x2="220.924%" y1="-398.815%" y2="1263.59%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="h" x1="56.524%" x2="154.312%" y1="90.974%" y2="705.12%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#008EA4"/>
+ </linearGradient>
+ <linearGradient id="i" x1="-2629.906%" x2="2946.182%" y1="-2629.905%" y2="2946.183%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="j" x1="-2788.189%" x2="2787.9%" y1="-2788.189%" y2="2787.9%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="k" x1="-2975.533%" x2="2600.555%" y1="-2975.533%" y2="2600.555%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="l" x1="-2968.553%" x2="2607.535%" y1="-2968.552%" y2="2607.537%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="m" x1="-47.612%" x2="165.227%" y1="-4.394%" y2="113.507%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ </defs>
+ <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1">
+ <path fill="#EAEAEE" d="M41.548 94.855h110.678a1 1 0 1 0 0 -2h-110.678a1 1 0 0 0 0 2zm14.952 -5h27.764a0.5 0.5 0 1 0 0 -1h-27.765a0.5 0.5 0 1 0 0 1zm-35.386 8.869a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 1 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 1 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 1 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 1 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 1 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 1 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 0 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 0 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 0 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 0 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 0 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 0 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 0 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5z"/>
+ <path fill="#FFF" d="M1.474 63.811h25.423s-7.955 -17.777 8.932 -20.076c15.062 -2.05 21.014 13.427 21.014 13.427s1.786 -8.93 10.743 -7.221c8.832 1.684 15.353 15.889 15.353 15.889h22.137"/>
+ <path fill="#EAEAEE" d="M105.51 61.633h-6.544a0.588 0.588 0 1 1 0 -1.176h6.545a0.588 0.588 0 0 1 0 1.176zm-17.132 0h-1.176a0.588 0.588 0 1 1 0 -1.176h1.176a0.588 0.588 0 1 1 0 1.176zm-61.046 -0.712h-1.893a0.588 0.588 0 0 1 0 -1.176h1.023a24.94 24.94 0 0 1 -0.269 -0.756 0.588 0.588 0 0 1 1.115 -0.377 18.812 18.812 0 0 0 0.56 1.48 0.588 0.588 0 0 1 -0.536 0.829zm-11.305 0h-14.117a0.588 0.588 0 1 1 0 -1.176h14.117a0.588 0.588 0 0 1 0 1.176zm66.928 -0.064a0.588 0.588 0 0 1 -0.514 -0.301 44.273 44.273 0 0 0 -1.828 -2.974 0.588 0.588 0 1 1 0.977 -0.654 45.65 45.65 0 0 1 1.878 3.053 0.588 0.588 0 0 1 -0.513 0.876zm-57.304 -6.042a0.588 0.588 0 0 1 -0.582 -0.507 20.77 20.77 0 0 1 -0.134 -1.205 0.588 0.588 0 0 1 1.173 -0.094 19.39 19.39 0 0 0 0.126 1.136 0.588 0.588 0 0 1 -0.583 0.67zm30.647 -2.594a0.587 0.587 0 0 1 -0.519 -0.31 26.496 26.496 0 0 0 -0.57 -1.001 0.588 0.588 0 1 1 1.01 -0.605 27.467 27.467 0 0 1 0.596 1.048 0.588 0.588 0 0 1 -0.517 0.868zm18.676 -1.503a0.586 0.586 0 0 1 -0.383 -0.143 14.722 14.722 0 0 0 -6.68 -3.535 8.578 8.578 0 0 0 -5.628 0.61 0.588 0.588 0 1 1 -0.54 -1.046 9.747 9.747 0 0 1 6.389 -0.72 15.855 15.855 0 0 1 7.225 3.8 0.588 0.588 0 0 1 -0.383 1.034zm-22.019 -3.335a0.587 0.587 0 0 1 -0.443 -0.202 21.943 21.943 0 0 0 -2.45 -2.41 0.588 0.588 0 0 1 0.755 -0.903 23.254 23.254 0 0 1 2.582 2.54 0.588 0.588 0 0 1 -0.444 0.975zm-24.258 -3.43a0.589 0.589 0 0 1 -0.395 -1.025 14.421 14.421 0 0 1 7.882 -3.255 19.345 19.345 0 0 1 5.96 0.08 0.588 0.588 0 1 1 -0.203 1.158 18.263 18.263 0 0 0 -5.597 -0.073 13.284 13.284 0 0 0 -7.253 2.963 0.59 0.59 0 0 1 -0.394 0.152z"/>
+ <path fill="#FFF" d="M106.242 66.149h-104.771a1.176 1.176 0 1 1 0 -2.353h104.771a1.176 1.176 0 0 1 0 2.353zm1.978 -51.759h14.187s-4.44 -9.92 4.985 -11.203c8.404 -1.144 11.726 7.493 11.726 7.493s0.907 -4.089 5.995 -4.03c4.756 0.055 8.38 7.914 8.568 8.867h12.353"/>
+ <path fill="#EAEAEE" d="M122.823 12.8h-14.167a0.59 0.59 0 1 1 0 -1.18h14.167a0.59 0.59 0 0 1 0 1.18zm43.647 -0.184h-0.545a0.59 0.59 0 1 1 0 -1.18h0.545a0.59 0.59 0 1 1 0 1.18zm-5.267 0h-3.542a0.59 0.59 0 1 1 0 -1.18h3.542a0.59 0.59 0 1 1 0 1.18zm-21.648 -3.527a0.614 0.614 0 0 1 -0.553 -0.384l-0.088 -0.207a0.59 0.59 0 0 1 0.23 -0.74 5.483 5.483 0 0 1 5.186 -4 7.111 7.111 0 0 1 1.33 0.132 10.622 10.622 0 0 1 5.267 3.045 0.59 0.59 0 0 1 -0.822 0.848 9.484 9.484 0 0 0 -4.666 -2.733 5.935 5.935 0 0 0 -1.109 -0.111c-3.402 0 -4.166 3.527 -4.196 3.678a0.592 0.592 0 0 1 -0.579 0.472zm-16.422 -5.27a0.59 0.59 0 0 1 -0.45 -0.973 6.799 6.799 0 0 1 3.236 -2.026 0.59 0.59 0 1 1 0.351 1.127 5.632 5.632 0 0 0 -2.688 1.665 0.589 0.589 0 0 1 -0.45 0.208zm8.784 -1.987a0.601 0.601 0 0 1 -0.156 -0.02 9.055 9.055 0 0 0 -1.083 -0.225 0.59 0.59 0 0 1 -0.5 -0.668 0.6 0.6 0 0 1 0.668 -0.5 10.36 10.36 0 0 1 1.224 0.253 0.59 0.59 0 0 1 -0.153 1.16z"/>
+ <path fill="#FFF" d="M166.948 16.76h-58.468a1.18 1.18 0 0 1 0 -2.36h58.468a1.18 1.18 0 0 1 0 2.36z"/>
+ <ellipse cx="99.859" cy="152.41" fill="#EAEAEE" rx="30" ry="5.802"/>
+ <path fill="#F9F9FA" d="M116.421 66.559c-4.126 4.126 -9.051 9.488 -9.656 16.465 0.605 6.977 5.53 12.339 9.656 16.465a26.199 26.199 0 0 1 9.126 19.9v11.242h-52.517v-11.242a26.199 26.199 0 0 1 9.126 -19.9c4.126 -4.126 9.051 -9.488 9.656 -16.465 -0.605 -6.977 -5.53 -12.339 -9.656 -16.465a26.199 26.199 0 0 1 -9.126 -19.9v-11.369h52.517v11.369a26.199 26.199 0 0 1 -9.126 19.9z"/>
+ <path fill="url(#a)" d="M35.304 21.239c-3.349 4.126 -8.666 10.808 -9.157 17.785 0.491 6.977 5.808 13.659 9.157 17.785a25.765 25.765 0 0 1 7.408 18.58v11.242h-42.627v-11.242a25.765 25.765 0 0 1 7.407 -18.58c3.35 -4.126 8.667 -10.808 9.157 -17.785 -0.49 -6.977 -5.808 -13.659 -9.157 -17.785a25.765 25.765 0 0 1 -7.407 -18.58v-2.13a95.816 95.816 0 0 0 22.369 2.64c12.527 0 20.258 -2.64 20.258 -2.64v2.13a25.765 25.765 0 0 1 -7.408 18.58z" transform="translate(78 44)"/>
+ <path fill="url(#b)" d="M55.548 6.222h-52.518a2.932 2.932 0 0 1 0 -5.864h52.518a2.932 2.932 0 0 1 0 5.864zm2.932 92.409a2.932 2.932 0 0 0 -2.932 -2.932h-52.518a2.932 2.932 0 0 0 0 5.863h52.518a2.932 2.932 0 0 0 2.932 -2.931z" transform="translate(70 32)"/>
+ <path fill="url(#c)" d="M129.028 130.684c0.334 5 -13.767 7.667 -29.749 7.667 -15.981 0 -28.937 -3.358 -28.937 -7.5 0 -4.143 12.956 -7.5 28.937 -7.5 15.982 0 29.474 3.2 29.75 7.333z"/>
+ <path fill="#F9F9FA" d="M125.654 127.755c0 2.185 -11.233 5.596 -25.792 5.596 -14.56 0 -26.932 -3.41 -26.932 -5.596 0 -2.185 11.802 -3.956 26.362 -3.956 14.56 0 26.362 1.771 26.362 3.956z"/>
+ <path fill="url(#d)" d="M95.233 76.435s1.978 4.121 4.286 4.286c2.307 0.165 4.43 -4.388 4.43 -4.388l-8.716 0.102z"/>
+ <path fill="url(#e)" d="M99.288 102.48c7.502 0 21.137 23.169 21.137 23.169s-1.442 3.702 -20.563 3.702c-19.122 0 -21.71 -3.702 -21.71 -3.702s13.763 -23.17 21.136 -23.17z"/>
+ <path fill="url(#f)" d="M127.852 37.313c0 2.185 -12.049 5.038 -27.657 5.038s-28.864 -2.853 -28.864 -5.038 12.653 -3.956 28.26 -3.956c15.609 0 28.261 1.771 28.261 3.956z"/>
+ <ellipse cx="99.42" cy="33.357" fill="url(#g)" rx="28.089" ry="3.956"/>
+ <ellipse cx="99.603" cy="76.333" fill="url(#h)" rx="4.346" ry="1"/>
+ <circle cx="99.393" cy="84.717" r="1.181" fill="url(#i)"/>
+ <circle cx="98.996" cy="92.589" r="1.181" fill="url(#j)"/>
+ <circle cx="98.145" cy="102.288" r="1.181" fill="url(#k)"/>
+ <circle cx="101.388" cy="98.715" r="1.181" fill="url(#l)"/>
+ <path fill="#F9F9FA" d="M84.628 53.363a1.833 1.833 0 0 1 -0.264 -0.026l-0.237 -0.08a41.18 41.18 0 0 0 -0.238 -0.118 2.238 2.238 0 0 1 -0.197 -0.172 1.325 1.325 0 0 1 -0.382 -0.922 1.359 1.359 0 0 1 0.105 -0.515 1.297 1.297 0 0 1 0.277 -0.422 1.012 1.012 0 0 1 0.197 -0.158 2.196 2.196 0 0 1 0.238 -0.132 1.55 1.55 0 0 1 0.237 -0.066 1.331 1.331 0 0 1 1.2 0.356 1.297 1.297 0 0 1 0.278 0.422 1.169 1.169 0 0 1 0.105 0.515 1.329 1.329 0 0 1 -1.319 1.318zm-0.221 69.007a1.319 1.319 0 0 1 -1.318 -1.282c-0.227 -8.439 2.93 -13.501 3.064 -13.712a1.319 1.319 0 0 1 2.227 1.413c-0.057 0.092 -2.858 4.684 -2.653 12.227a1.32 1.32 0 0 1 -1.283 1.355h-0.037zm8.793 -54.507a1.319 1.319 0 0 1 -1.002 -0.46 102.116 102.116 0 0 1 -6.712 -9.614 1.319 1.319 0 0 1 2.24 -1.39 101.694 101.694 0 0 0 6.476 9.287 1.32 1.32 0 0 1 -1.002 2.177z"/>
+ <path fill="url(#m)" d="M127.377 126.244v-6.856a28.144 28.144 0 0 0 -9.656 -21.217c-4.074 -4.092 -8.47 -8.976 -9.052 -15.1 0.582 -6.218 4.978 -11.103 9.026 -15.17a28.118 28.118 0 0 0 9.682 -21.242v-6.529a3.426 3.426 0 0 0 2.27 -2.456 4.696 4.696 0 0 0 -0.888 -5.862c-3.257 -4.026 -24.92 -4.23 -29.23 -4.23 -10.758 0 -24.656 0.91 -28.356 3.436a4.777 4.777 0 0 0 -2.674 4.272 4.71 4.71 0 0 0 2.19 3.98 4.54 4.54 0 0 0 0.73 0.528v6.86a28.09 28.09 0 0 0 9.657 21.218c4.074 4.093 8.47 8.98 9.051 15.101 -0.582 6.215 -4.977 11.102 -9.025 15.169a28.149 28.149 0 0 0 -9.68 21.317l-0.003 6.78a4.741 4.741 0 0 0 -2.92 4.387 4.455 4.455 0 0 0 0.319 1.685c1.459 6.64 27.596 6.83 30.571 6.83 2.951 0 28.885 -0.189 30.526 -6.661a4.734 4.734 0 0 0 -2.538 -6.24zm0.365 5.42l-0.041 0.132c-0.48 3.01 -15.028 5.032 -28.312 5.032 -16.33 0 -28.03 -2.665 -28.315 -5.058l-0.04 -0.145a2.426 2.426 0 0 1 2.205 -3.426h0.5v-8.81a25.817 25.817 0 0 1 8.946 -19.548c4.404 -4.42 9.154 -9.727 9.763 -16.86 -0.609 -7.047 -5.359 -12.354 -9.79 -16.8a25.792 25.792 0 0 1 -8.92 -19.522v-8.348l-0.318 -0.124a3.457 3.457 0 0 1 -1.232 -0.69l-0.117 -0.091a2.422 2.422 0 0 1 0.19 -4.336l0.094 -0.056c2.392 -1.774 14.074 -3.113 27.175 -3.113 15.231 0 26.482 1.747 27.434 3.379l0.115 0.134a2.396 2.396 0 0 1 0.333 3.42l-0.165 0.2 0.094 0.32c-0.057 0.126 -0.362 0.534 -1.938 1.048l-0.345 0.112v8.145a25.817 25.817 0 0 1 -8.946 19.547c-4.404 4.421 -9.154 9.728 -9.763 16.86 0.609 7.048 5.359 12.354 9.79 16.8a25.813 25.813 0 0 1 8.92 19.564v8.769h0.5a2.42 2.42 0 0 1 2.183 3.464z"/>
+ </g>
+</svg>
diff --git a/browser/components/payments/res/containers/warning.svg b/browser/components/payments/res/containers/warning.svg new file mode 100644 index 0000000000..0b25be0f91 --- /dev/null +++ b/browser/components/payments/res/containers/warning.svg @@ -0,0 +1,32 @@ +<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="162" height="147" version="1.1">
+ <defs>
+ <linearGradient id="a" x1="-5.18%" x2="85.305%" y1="13.831%" y2="117.402%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ <linearGradient id="b" x1="-26.306%" x2="110.545%" y1="-9.375%" y2="148.477%">
+ <stop offset="0%" stop-color="#CCFBFF"/>
+ <stop offset="100%" stop-color="#C9E4FF"/>
+ </linearGradient>
+ <linearGradient id="c" x1="-335.989%" x2="397.876%" y1="-66.454%" y2="146.763%">
+ <stop offset="0%" stop-color="#00C8D7"/>
+ <stop offset="100%" stop-color="#0A84FF"/>
+ </linearGradient>
+ </defs>
+ <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1">
+ <path fill="#EAEAEE" d="M20.53 83.44h110.678a1 1 0 1 0 0 -2h-110.679a1 1 0 0 0 0 2zm14.951 -5h27.765a0.5 0.5 0 1 0 0 -1h-27.765a0.5 0.5 0 1 0 0 1zm-35.385 8.87a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 1 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 1 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 1 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 1 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 1 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 1 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 1 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 1 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 0 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 0 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5zm20 0a0.5 0.5 0 0 1 0.5 -0.5h3a0.5 0.5 0 0 1 0 1h-3a0.5 0.5 0 0 1 -0.5 -0.5zm7 0a0.5 0.5 0 0 1 0.5 -0.5h1a0.5 0.5 0 0 1 0 1h-1a0.5 0.5 0 0 1 -0.5 -0.5zm10 0a0.5 0.5 0 0 1 0.5 -0.5h12a0.5 0.5 0 0 1 0 1h-12a0.5 0.5 0 0 1 -0.5 -0.5z"/>
+ <path fill="#FFF" d="M36.206 58.897h25.423s-7.955 -17.777 8.932 -20.077c15.062 -2.05 21.014 13.427 21.014 13.427s1.786 -8.93 10.743 -7.221c8.832 1.684 15.352 15.889 15.352 15.889h22.137"/>
+ <path fill="#EAEAEE" d="M140.243 56.719h-6.545a0.588 0.588 0 0 1 0 -1.177h6.545a0.588 0.588 0 0 1 0 1.177zm-17.133 0h-1.177a0.588 0.588 0 0 1 0 -1.177h1.177a0.588 0.588 0 0 1 0 1.177zm-61.047 -0.713h-1.892a0.588 0.588 0 1 1 0 -1.176h1.023a24.95 24.95 0 0 1 -0.27 -0.756 0.588 0.588 0 0 1 1.115 -0.377 18.81 18.81 0 0 0 0.562 1.48 0.588 0.588 0 0 1 -0.538 0.83zm-11.304 0h-14.118a0.588 0.588 0 1 1 0 -1.176h14.118a0.588 0.588 0 1 1 0 1.176zm66.928 -0.064a0.588 0.588 0 0 1 -0.515 -0.301 44.263 44.263 0 0 0 -1.827 -2.973 0.588 0.588 0 1 1 0.977 -0.655 45.639 45.639 0 0 1 1.878 3.053 0.588 0.588 0 0 1 -0.513 0.876zm-57.304 -6.042a0.588 0.588 0 0 1 -0.582 -0.507 20.768 20.768 0 0 1 -0.134 -1.205 0.588 0.588 0 0 1 1.173 -0.094 19.388 19.388 0 0 0 0.126 1.136 0.588 0.588 0 0 1 -0.583 0.67zm30.646 -2.594a0.587 0.587 0 0 1 -0.518 -0.31 26.496 26.496 0 0 0 -0.57 -1.001 0.588 0.588 0 1 1 1.01 -0.604 27.467 27.467 0 0 1 0.595 1.047 0.588 0.588 0 0 1 -0.517 0.868zm18.677 -1.503a0.586 0.586 0 0 1 -0.383 -0.142 14.722 14.722 0 0 0 -6.68 -3.536 8.578 8.578 0 0 0 -5.628 0.61 0.588 0.588 0 1 1 -0.54 -1.046 9.747 9.747 0 0 1 6.389 -0.72 15.855 15.855 0 0 1 7.225 3.8 0.588 0.588 0 0 1 -0.383 1.034zm-22.019 -3.335a0.587 0.587 0 0 1 -0.443 -0.201 21.943 21.943 0 0 0 -2.45 -2.41 0.588 0.588 0 0 1 0.755 -0.904 23.255 23.255 0 0 1 2.582 2.54 0.588 0.588 0 0 1 -0.444 0.975zm-24.259 -3.43a0.589 0.589 0 0 1 -0.394 -1.025 14.421 14.421 0 0 1 7.882 -3.254 19.345 19.345 0 0 1 5.959 0.079 0.588 0.588 0 1 1 -0.202 1.158 18.263 18.263 0 0 0 -5.598 -0.072 13.284 13.284 0 0 0 -7.252 2.963 0.59 0.59 0 0 1 -0.395 0.151z"/>
+ <path fill="#FFF" d="M140.974 61.234h-104.772a1.176 1.176 0 0 1 0 -2.353h104.772a1.176 1.176 0 0 1 0 2.353zm-120.522 -46.508h14.187s-4.44 -9.92 4.984 -11.204c8.405 -1.144 11.727 7.493 11.727 7.493s0.907 -4.089 5.995 -4.03c4.755 0.055 8.38 7.915 8.567 8.867h12.354"/>
+ <path fill="#EAEAEE" d="M35.055 13.136h-14.167a0.59 0.59 0 1 1 0 -1.18h14.167a0.59 0.59 0 1 1 0 1.18zm43.647 -0.185h-0.545a0.59 0.59 0 0 1 0 -1.18h0.545a0.59 0.59 0 0 1 0 1.18zm-5.267 0h-3.542a0.59 0.59 0 0 1 0 -1.18h3.542a0.59 0.59 0 0 1 0 1.18zm-21.648 -3.526a0.614 0.614 0 0 1 -0.554 -0.384l-0.087 -0.208a0.59 0.59 0 0 1 0.23 -0.739 5.483 5.483 0 0 1 5.186 -4 7.111 7.111 0 0 1 1.33 0.131 10.622 10.622 0 0 1 5.266 3.045 0.59 0.59 0 0 1 -0.822 0.848 9.484 9.484 0 0 0 -4.665 -2.733 5.934 5.934 0 0 0 -1.109 -0.11c-3.403 0 -4.166 3.526 -4.196 3.677a0.592 0.592 0 0 1 -0.58 0.473zm-16.422 -5.27a0.59 0.59 0 0 1 -0.45 -0.973 6.799 6.799 0 0 1 3.235 -2.027 0.59 0.59 0 0 1 0.352 1.127 5.632 5.632 0 0 0 -2.688 1.665 0.589 0.589 0 0 1 -0.45 0.208zm8.783 -1.988a0.601 0.601 0 0 1 -0.155 -0.02 9.053 9.053 0 0 0 -1.083 -0.224 0.59 0.59 0 0 1 -0.5 -0.669 0.6 0.6 0 0 1 0.668 -0.5 10.36 10.36 0 0 1 1.224 0.253 0.59 0.59 0 0 1 -0.154 1.16z"/>
+ <path fill="#FFF" d="M79.18 17.096h-58.468a1.18 1.18 0 1 1 0 -2.361h58.468a1.18 1.18 0 1 1 0 2.36z"/>
+ <path fill="url(#a)" d="M125.948 119.063h-93.75a2.821 2.821 0 0 1 -2.442 -4.232l46.874 -81.19a2.82 2.82 0 0 1 4.887 0.001l46.874 81.19 -0.001 -0.001a2.821 2.821 0 0 1 -2.442 4.232zm-46.875 -84.333a0.32 0.32 0 0 0 -0.277 0.16l-46.875 81.192a0.32 0.32 0 0 0 0.276 0.481h93.751a0.32 0.32 0 0 0 0.278 -0.48l-0.001 -0.001 -46.874 -81.19a0.32 0.32 0 0 0 -0.278 -0.162z"/>
+ <path fill="#F9F9FA" d="M79.073 34.73a0.32 0.32 0 0 0 -0.277 0.16l-46.875 81.192a0.32 0.32 0 0 0 0.276 0.481h93.751a0.32 0.32 0 0 0 0.278 -0.48l-0.001 -0.001 -46.874 -81.19a0.32 0.32 0 0 0 -0.278 -0.162z"/>
+ <ellipse cx="79.424" cy="140.995" fill="#EAEAEE" rx="49.833" ry="5.802"/>
+ <path fill="url(#b)" d="M79.073 42.313a0.275 0.275 0 0 0 -0.238 0.138l-40.24 69.699a0.275 0.275 0 0 0 0.237 0.413h80.481a0.275 0.275 0 0 0 0.238 -0.412v-0.001l-40.24 -69.699a0.274 0.274 0 0 0 -0.238 -0.138z"/>
+ <path fill="url(#c)" d="M83.67 87.928h-9.19l-1.535 -25.095h12.255l-1.53 25.095zm1.473 11.018c0 3.35 -2.717 6.067 -6.068 6.067 -3.35 0 -6.067 -2.716 -6.067 -6.067s2.716 -6.068 6.067 -6.068a6.1 6.1 0 0 1 6.068 6.068z"/>
+ </g>
+</svg>
diff --git a/browser/components/payments/res/debugging.css b/browser/components/payments/res/debugging.css new file mode 100644 index 0000000000..6ce0dcbcf9 --- /dev/null +++ b/browser/components/payments/res/debugging.css @@ -0,0 +1,35 @@ +/* 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/. */ + +html { + color: -moz-DialogText; + font: message-box; + /* Make sure the background ends to the bottom if there is unused space */ + height: 100%; +} + +h1 { + font-size: 1em; +} + +fieldset > label { + white-space: nowrap; +} + +.group { + margin: 0.5em 0; +} + +label.block { + display: block; + margin: 0.3em 0; +} + +button.wide { + width: 100%; +} + +#complete-status { + column-count: 2; +} diff --git a/browser/components/payments/res/debugging.html b/browser/components/payments/res/debugging.html new file mode 100644 index 0000000000..9b5b80c9e6 --- /dev/null +++ b/browser/components/payments/res/debugging.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- 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/. --> +<html> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> + <link rel="stylesheet" href="debugging.css"/> + <script src="debugging.js"></script> + </head> + <body> + <div> + <section class="group"> + <button id="refresh">Refresh</button> + <button id="rerender">Re-render</button> + <button id="logState">Log state</button> + <button id="debugFrame" hidden>Debug frame</button> + <button id="toggleDirectionality">Toggle :dir</button> + <button id="toggleBranding">Toggle branding</button> + </section> + <section class="group"> + <h1>Requests</h1> + <button id="setRequest1">Request 1</button> + <button id="setRequest2">Request 2</button> + <fieldset id="paymentOptions"> + <legend>Payment Options</legend> + <label><input type="checkbox" autocomplete="off" name="requestPayerName" id="setRequestPayerName">requestPayerName</label> + <label><input type="checkbox" autocomplete="off" name="requestPayerEmail" id="setRequestPayerEmail">requestPayerEmail</label> + <label><input type="checkbox" autocomplete="off" name="requestPayerPhone" id="setRequestPayerPhone">requestPayerPhone</label> + <label><input type="checkbox" autocomplete="off" name="requestShipping" id="setRequestShipping">requestShipping</label> + </fieldset> + </section> + + <section class="group"> + <h1>Addresses</h1> + <button id="setAddresses1">Set Addreses 1</button> + <button id="setDupesAddresses">Set Duped Addresses</button> + <button id="delete1Address">Delete 1 Address</button> + </section> + + <section class="group"> + <h1>Payment Methods</h1> + <button id="setBasicCards1">Set Basic Cards 1</button> + <button id="delete1Card">Delete 1 Card</button> + </section> + + <section class="group"> + <h1>States</h1> + <fieldset id="complete-status"> + <legend>Complete Status</legend> + <label class="block"><input type="radio" name="setCompleteStatus" value="">(default)</label> + <label class="block"><input type="radio" name="setCompleteStatus" value="processing">Processing</label> + <label class="block"><input type="radio" name="setCompleteStatus" value="fail">Fail</label> + <label class="block"><input type="radio" name="setCompleteStatus" value="unknown">Unknown</label> + <label class="block"><input type="radio" name="setCompleteStatus" value="timeout">Timeout</label> + </fieldset> + <label class="block"><input type="checkbox" id="setChangesPrevented">Prevent changes</label> + + + <section class="group"> + <fieldset> + <legend>User Data Errors</legend> + <button id="saveVisibleForm" title="Bypasses field validation">Save Visible Form</button> + <button id="setBasicCardErrors">Basic Card Errors</button> + <button id="setPayerErrors">Payer Errors</button> + <button id="setShippingError">Shipping Error</button> + <button id="setShippingAddressErrors">Shipping Address Errors</button> + + </fieldset> + </section> + </section> + </div> + </body> +</html> diff --git a/browser/components/payments/res/debugging.js b/browser/components/payments/res/debugging.js new file mode 100644 index 0000000000..fffc85dd11 --- /dev/null +++ b/browser/components/payments/res/debugging.js @@ -0,0 +1,664 @@ +/* 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/. */ + +const paymentDialog = window.parent.document.querySelector("payment-dialog"); +// The requestStore should be manipulated for most changes but autofill storage changes +// happen through setStateFromParent which includes some consistency checks. +const requestStore = paymentDialog.requestStore; + +// keep the payment options checkboxes in sync w. actual state +const paymentOptionsUpdater = { + stateChangeCallback(state) { + this.render(state); + }, + render(state) { + let { completeStatus, paymentOptions } = state.request; + + document.getElementById("setChangesPrevented").checked = + state.changesPrevented; + + let paymentOptionInputs = document.querySelectorAll( + "#paymentOptions input[type='checkbox']" + ); + for (let input of paymentOptionInputs) { + if (paymentOptions.hasOwnProperty(input.name)) { + input.checked = paymentOptions[input.name]; + } + } + + let completeStatusInputs = document.querySelectorAll( + "input[type='radio'][name='setCompleteStatus']" + ); + for (let input of completeStatusInputs) { + input.checked = input.value == completeStatus; + } + }, +}; + +let REQUEST_1 = { + tabId: 9, + topLevelPrincipal: { URI: { displayHost: "debugging.example.com" } }, + requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25", + completeStatus: "", + paymentMethods: [], + paymentDetails: { + id: "", + totalItem: { + label: "Demo total", + amount: { currency: "EUR", value: "1.00" }, + pending: false, + }, + displayItems: [ + { + label: "Square", + amount: { + currency: "USD", + value: "5", + }, + }, + ], + payerErrors: {}, + paymentMethodErrors: {}, + shippingAddressErrors: {}, + shippingOptions: [ + { + id: "std", + label: "Standard (3-5 business days)", + amount: { + currency: "USD", + value: 10, + }, + selected: false, + }, + { + id: "super-slow", + // Long to test truncation + label: "Ssssssssuuuuuuuuupppppeeeeeeerrrrr sssssllllllloooooowwwwww", + amount: { + currency: "USD", + value: 1.5, + }, + selected: true, + }, + ], + modifiers: null, + error: "", + }, + paymentOptions: { + requestPayerName: true, + requestPayerEmail: false, + requestPayerPhone: false, + requestShipping: true, + shippingType: "shipping", + }, + shippingOption: "std", +}; + +let REQUEST_2 = { + tabId: 9, + topLevelPrincipal: { URI: { displayHost: "example.com" } }, + requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25", + completeStatus: "", + paymentMethods: [ + { + supportedMethods: "basic-card", + data: { + supportedNetworks: ["amex", "discover", "mastercard", "visa"], + }, + }, + ], + paymentDetails: { + id: "", + totalItem: { + label: "", + amount: { currency: "CAD", value: "25.75" }, + pending: false, + }, + displayItems: [ + { + label: "Triangle", + amount: { + currency: "CAD", + value: "3", + }, + }, + { + label: "Circle", + amount: { + currency: "EUR", + value: "10.50", + }, + }, + { + label: "Tax", + type: "tax", + amount: { + currency: "USD", + value: "1.50", + }, + }, + ], + payerErrors: {}, + paymentMethoErrors: {}, + shippingAddressErrors: {}, + shippingOptions: [ + { + id: "123", + label: "Fast (default)", + amount: { + currency: "USD", + value: 10, + }, + selected: true, + }, + { + id: "947", + label: "Slow", + amount: { + currency: "USD", + value: 1, + }, + selected: false, + }, + ], + modifiers: [ + { + supportedMethods: "basic-card", + total: { + label: "Total", + amount: { + currency: "CAD", + value: "28.75", + }, + pending: false, + }, + additionalDisplayItems: [ + { + label: "Credit card fee", + amount: { + currency: "CAD", + value: "1.50", + }, + }, + ], + data: {}, + }, + ], + error: "", + }, + paymentOptions: { + requestPayerName: false, + requestPayerEmail: false, + requestPayerPhone: false, + requestShipping: true, + shippingType: "shipping", + }, + shippingOption: "123", +}; + +let ADDRESSES_1 = { + "48bnds6854t": { + "address-level1": "MI", + "address-level2": "Some City", + country: "US", + email: "foo@bar.com", + "family-name": "Smith", + "given-name": "John", + guid: "48bnds6854t", + name: "John Smith", + "postal-code": "90210", + "street-address": "123 Sesame Street,\nApt 40", + tel: "+1 519 555-5555", + timeLastUsed: 50000, + }, + "68gjdh354j": { + "additional-name": "Z.", + "address-level1": "CA", + "address-level2": "Mountain View", + country: "US", + "family-name": "Doe", + "given-name": "Jane", + guid: "68gjdh354j", + name: "Jane Z. Doe", + "postal-code": "94041", + "street-address": "P.O. Box 123", + tel: "+1 650 555-5555", + timeLastUsed: 30000, + }, + abcde12345: { + "address-level2": "Mountain View", + country: "US", + "family-name": "Fields", + "given-name": "Mrs.", + guid: "abcde12345", + name: "Mrs. Fields", + timeLastUsed: 70000, + }, + german1: { + "additional-name": "Y.", + "address-level1": "", + "address-level2": "Berlin", + country: "DE", + email: "de@example.com", + "family-name": "Mouse", + "given-name": "Anon", + guid: "german1", + name: "Anon Y. Mouse", + organization: "Mozilla", + "postal-code": "10997", + "street-address": "Schlesische Str. 27", + tel: "+49 30 983333002", + timeLastUsed: 10000, + }, + "missing-country": { + "address-level1": "ON", + "address-level2": "Toronto", + "family-name": "Bogard", + "given-name": "Kristin", + guid: "missing-country", + name: "Kristin Bogard", + "postal-code": "H0H 0H0", + "street-address": "123 Yonge Street\nSuite 2300", + tel: "+1 416 555-5555", + timeLastUsed: 90000, + }, + TimBR: { + "given-name": "Timothy", + "additional-name": "João", + "family-name": "Berners-Lee", + organization: "World Wide Web Consortium", + "street-address": "Rua Adalberto Pajuaba, 404", + "address-level3": "Campos Elísios", + "address-level2": "Ribeirão Preto", + "address-level1": "SP", + "postal-code": "14055-220", + country: "BR", + tel: "+0318522222222", + email: "timbr@example.org", + timeLastUsed: 110000, + }, +}; + +let DUPED_ADDRESSES = { + a9e830667189: { + "street-address": "Unit 1\n1505 Northeast Kentucky Industrial Parkway \n", + "address-level2": "Greenup", + "address-level1": "KY", + "postal-code": "41144", + country: "US", + email: "bob@example.com", + "family-name": "Smith", + "given-name": "Bob", + guid: "a9e830667189", + tel: "+19871234567", + name: "Bob Smith", + timeLastUsed: 10001, + }, + "72a15aed206d": { + "street-address": "1 New St", + "address-level2": "York", + "address-level1": "SC", + "postal-code": "29745", + country: "US", + "given-name": "Mary Sue", + guid: "72a15aed206d", + tel: "+19871234567", + name: "Mary Sue", + "address-line1": "1 New St", + timeLastUsed: 10009, + }, + "2b4dce0fbc1f": { + "street-address": "123 Park St", + "address-level2": "Springfield", + "address-level1": "OR", + "postal-code": "97403", + country: "US", + email: "rita@foo.com", + "family-name": "Foo", + "given-name": "Rita", + guid: "2b4dce0fbc1f", + name: "Rita Foo", + "address-line1": "123 Park St", + timeLastUsed: 10005, + }, + "46b2635a5b26": { + "street-address": "432 Another St", + "address-level2": "Springfield", + "address-level1": "OR", + "postal-code": "97402", + country: "US", + email: "rita@foo.com", + "family-name": "Foo", + "given-name": "Rita", + guid: "46b2635a5b26", + name: "Rita Foo", + "address-line1": "432 Another St", + timeLastUsed: 10003, + }, +}; + +let BASIC_CARDS_1 = { + "53f9d009aed2": { + billingAddressGUID: "68gjdh354j", + methodName: "basic-card", + "cc-number": "************5461", + guid: "53f9d009aed2", + version: 3, + timeCreated: 1505240896213, + timeLastModified: 1515609524588, + timeLastUsed: 10000, + timesUsed: 0, + "cc-name": "John Smith", + "cc-exp-month": 6, + "cc-exp-year": 2024, + "cc-type": "visa", + "cc-given-name": "John", + "cc-additional-name": "", + "cc-family-name": "Smith", + "cc-exp": "2024-06", + }, + "9h5d4h6f4d1s": { + methodName: "basic-card", + "cc-number": "************0954", + guid: "9h5d4h6f4d1s", + version: 3, + timeCreated: 1517890536491, + timeLastModified: 1517890564518, + timeLastUsed: 50000, + timesUsed: 0, + "cc-name": "Jane Doe", + "cc-exp-month": 5, + "cc-exp-year": 2023, + "cc-type": "mastercard", + "cc-given-name": "Jane", + "cc-additional-name": "", + "cc-family-name": "Doe", + "cc-exp": "2023-05", + }, + "123456789abc": { + methodName: "basic-card", + "cc-number": "************1234", + guid: "123456789abc", + version: 3, + timeCreated: 1517890536491, + timeLastModified: 1517890564518, + timeLastUsed: 90000, + timesUsed: 0, + "cc-name": "Jane Fields", + "cc-given-name": "Jane", + "cc-additional-name": "", + "cc-family-name": "Fields", + "cc-type": "discover", + }, + "amex-card": { + methodName: "basic-card", + billingAddressGUID: "68gjdh354j", + "cc-number": "************1941", + guid: "amex-card", + version: 1, + timeCreated: 1517890536491, + timeLastModified: 1517890564518, + timeLastUsed: 70000, + timesUsed: 0, + "cc-name": "Capt America", + "cc-given-name": "Capt", + "cc-additional-name": "", + "cc-family-name": "America", + "cc-type": "amex", + "cc-exp-month": 6, + "cc-exp-year": 2023, + "cc-exp": "2023-06", + }, + "missing-cc-name": { + methodName: "basic-card", + "cc-number": "************8563", + guid: "missing-cc-name", + version: 3, + timeCreated: 1517890536491, + timeLastModified: 1517890564518, + timeLastUsed: 30000, + timesUsed: 0, + "cc-exp-month": 8, + "cc-exp-year": 2024, + "cc-exp": "2024-08", + }, +}; + +let buttonActions = { + debugFrame() { + let event = new CustomEvent("paymentContentToChrome", { + bubbles: true, + detail: { + messageType: "debugFrame", + }, + }); + document.dispatchEvent(event); + }, + + delete1Address() { + let savedAddresses = Object.assign( + {}, + requestStore.getState().savedAddresses + ); + delete savedAddresses[Object.keys(savedAddresses)[0]]; + // Use setStateFromParent since it ensures there is no dangling + // `selectedShippingAddress` foreign key (FK) reference. + paymentDialog.setStateFromParent({ + savedAddresses, + }); + }, + + delete1Card() { + let savedBasicCards = Object.assign( + {}, + requestStore.getState().savedBasicCards + ); + delete savedBasicCards[Object.keys(savedBasicCards)[0]]; + // Use setStateFromParent since it ensures there is no dangling + // `selectedPaymentCard` foreign key (FK) reference. + paymentDialog.setStateFromParent({ + savedBasicCards, + }); + }, + + logState() { + let state = requestStore.getState(); + // eslint-disable-next-line no-console + console.log(state); + dump(`${JSON.stringify(state, null, 2)}\n`); + }, + + refresh() { + window.parent.location.reload(true); + }, + + rerender() { + requestStore.setState({}); + }, + + saveVisibleForm() { + // Bypasses field validation which is useful to test error handling. + paymentDialog + .querySelector("#main-container > .page:not([hidden])") + .saveRecord(); + }, + + setAddresses1() { + paymentDialog.setStateFromParent({ savedAddresses: ADDRESSES_1 }); + }, + + setDupesAddresses() { + paymentDialog.setStateFromParent({ savedAddresses: DUPED_ADDRESSES }); + }, + + setBasicCards1() { + paymentDialog.setStateFromParent({ savedBasicCards: BASIC_CARDS_1 }); + }, + + setBasicCardErrors() { + let request = Object.assign({}, requestStore.getState().request); + request.paymentDetails = Object.assign( + {}, + requestStore.getState().request.paymentDetails + ); + request.paymentDetails.paymentMethodErrors = { + cardNumber: "", + cardholderName: "", + cardSecurityCode: "", + expiryMonth: "", + expiryYear: "", + billingAddress: { + addressLine: + "Can only buy from ROADS, not DRIVES, BOULEVARDS, or STREETS", + city: "Can only buy from CITIES, not TOWNSHIPS or VILLAGES", + country: "Can only buy from US, not CA", + dependentLocality: "Can only be SUBURBS, not NEIGHBORHOODS", + organization: "Can only buy from CORPORATIONS, not CONSORTIUMS", + phone: "Only allowed to buy from area codes that start with 9", + postalCode: "Only allowed to buy from postalCodes that start with 0", + recipient: "Can only buy from names that start with J", + region: "Can only buy from regions that start with M", + regionCode: "Regions must be 1 to 3 characters in length", + }, + }; + requestStore.setState({ + request, + }); + }, + + setChangesPrevented(evt) { + requestStore.setState({ + changesPrevented: evt.target.checked, + }); + }, + + setCompleteStatus() { + let input = document.querySelector("[name='setCompleteStatus']:checked"); + let completeStatus = input.value; + let request = requestStore.getState().request; + paymentDialog.setStateFromParent({ + request: Object.assign({}, request, { completeStatus }), + }); + }, + + setPayerErrors() { + let request = Object.assign({}, requestStore.getState().request); + request.paymentDetails = Object.assign( + {}, + requestStore.getState().request.paymentDetails + ); + request.paymentDetails.payerErrors = { + email: "Only @mozilla.com emails are supported", + name: "Payer name must start with M", + phone: "Payer area codes must start with 1", + }; + requestStore.setState({ + request, + }); + }, + + setPaymentOptions() { + let options = {}; + let checkboxes = document.querySelectorAll( + "#paymentOptions input[type='checkbox']" + ); + for (let input of checkboxes) { + options[input.name] = input.checked; + } + let req = Object.assign({}, requestStore.getState().request, { + paymentOptions: options, + }); + requestStore.setState({ request: req }); + }, + + setRequest1() { + paymentDialog.setStateFromParent({ request: REQUEST_1 }); + }, + + setRequest2() { + paymentDialog.setStateFromParent({ request: REQUEST_2 }); + }, + + setRequestPayerName() { + buttonActions.setPaymentOptions(); + }, + setRequestPayerEmail() { + buttonActions.setPaymentOptions(); + }, + setRequestPayerPhone() { + buttonActions.setPaymentOptions(); + }, + setRequestShipping() { + buttonActions.setPaymentOptions(); + }, + + setShippingError() { + let request = Object.assign({}, requestStore.getState().request); + request.paymentDetails = Object.assign( + {}, + requestStore.getState().request.paymentDetails + ); + request.paymentDetails.error = "Shipping Error!"; + request.paymentDetails.shippingOptions = []; + requestStore.setState({ + request, + }); + }, + + setShippingAddressErrors() { + let request = Object.assign({}, requestStore.getState().request); + request.paymentDetails = Object.assign( + {}, + requestStore.getState().request.paymentDetails + ); + request.paymentDetails.shippingAddressErrors = { + addressLine: "Can only ship to ROADS, not DRIVES, BOULEVARDS, or STREETS", + city: "Can only ship to CITIES, not TOWNSHIPS or VILLAGES", + country: "Can only ship to USA, not CA", + dependentLocality: "Can only be SUBURBS, not NEIGHBORHOODS", + organization: "Can only ship to CORPORATIONS, not CONSORTIUMS", + phone: "Only allowed to ship to area codes that start with 9", + postalCode: "Only allowed to ship to postalCodes that start with 0", + recipient: "Can only ship to names that start with J", + region: "Can only ship to regions that start with M", + regionCode: "Regions must be 1 to 3 characters in length", + }; + requestStore.setState({ + request, + }); + }, + + toggleDirectionality() { + let body = paymentDialog.ownerDocument.body; + body.dir = body.dir == "rtl" ? "ltr" : "rtl"; + }, + + toggleBranding() { + for (let container of paymentDialog.querySelectorAll("accepted-cards")) { + container.classList.toggle("branded"); + } + }, +}; + +window.addEventListener("click", function onButtonClick(evt) { + let id = evt.target.id || evt.target.name; + if (!id || typeof buttonActions[id] != "function") { + return; + } + + buttonActions[id](evt); +}); + +window.addEventListener("DOMContentLoaded", function onDCL() { + if (window.location.protocol == "resource:") { + // Only show the debug frame button if we're running from a resource URI + // so it doesn't show during development over file: or http: since it won't work. + // Note that the button still won't work if resource://payments/paymentRequest.xhtml + // is manually loaded in a tab but will be shown. + document.getElementById("debugFrame").hidden = false; + } + + requestStore.subscribe(paymentOptionsUpdater); + paymentOptionsUpdater.render(requestStore.getState()); +}); diff --git a/browser/components/payments/res/mixins/HandleEventMixin.js b/browser/components/payments/res/mixins/HandleEventMixin.js new file mode 100644 index 0000000000..8d09ac2207 --- /dev/null +++ b/browser/components/payments/res/mixins/HandleEventMixin.js @@ -0,0 +1,28 @@ +/* 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/. */ + +/** + * A mixin to forward events to on* methods if defined. + * + * @param {string} superclass The class to extend. + * @returns {class} + */ +export default function HandleEventMixin(superclass) { + return class HandleEvent extends superclass { + handleEvent(evt) { + function capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1); + } + if (super.handleEvent) { + super.handleEvent(evt); + } + // Check whether event name is a defined function in object. + let fn = "on" + capitalize(evt.type); + if (this[fn] && typeof this[fn] === "function") { + return this[fn](evt); + } + return null; + } + }; +} diff --git a/browser/components/payments/res/mixins/ObservedPropertiesMixin.js b/browser/components/payments/res/mixins/ObservedPropertiesMixin.js new file mode 100644 index 0000000000..5fe71af90c --- /dev/null +++ b/browser/components/payments/res/mixins/ObservedPropertiesMixin.js @@ -0,0 +1,71 @@ +/* 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/. */ + +/** + * Define getters and setters for observedAttributes converted to camelCase and + * trigger a batched aynchronous call to `render` upon observed + * attribute/property changes. + */ + +export default function ObservedPropertiesMixin(superClass) { + return class ObservedProperties extends superClass { + static kebabToCamelCase(name) { + return name.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase()); + } + + constructor() { + super(); + + this._observedPropertiesMixin = { + pendingRender: false, + }; + + // Reflect property changes for `observedAttributes` to attributes. + for (let name of this.constructor.observedAttributes || []) { + if (name in this) { + // Don't overwrite existing properties. + continue; + } + // Convert attribute names from kebab-case to camelCase properties + Object.defineProperty(this, ObservedProperties.kebabToCamelCase(name), { + configurable: true, + get() { + return this.getAttribute(name); + }, + set(value) { + if (value === null || value === undefined || value === false) { + this.removeAttribute(name); + } else { + this.setAttribute(name, value); + } + }, + }); + } + } + + async _invalidateFromObservedPropertiesMixin() { + if (this._observedPropertiesMixin.pendingRender) { + return; + } + + this._observedPropertiesMixin.pendingRender = true; + await Promise.resolve(); + try { + this.render(); + } finally { + this._observedPropertiesMixin.pendingRender = false; + } + } + + attributeChangedCallback(attr, oldValue, newValue) { + if (super.attributeChangedCallback) { + super.attributeChangedCallback(attr, oldValue, newValue); + } + if (oldValue === newValue) { + return; + } + this._invalidateFromObservedPropertiesMixin(); + } + }; +} diff --git a/browser/components/payments/res/mixins/PaymentStateSubscriberMixin.js b/browser/components/payments/res/mixins/PaymentStateSubscriberMixin.js new file mode 100644 index 0000000000..ede9e1bfc5 --- /dev/null +++ b/browser/components/payments/res/mixins/PaymentStateSubscriberMixin.js @@ -0,0 +1,112 @@ +/* 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/. */ + +import PaymentsStore from "../PaymentsStore.js"; + +/** + * A mixin for a custom element to observe store changes to information about a payment request. + */ + +/** + * State of the payment request dialog. + */ +export let requestStore = new PaymentsStore({ + changesPrevented: false, + orderDetailsShowing: false, + "basic-card-page": { + guid: null, + // preserveFieldValues: true, + selectedStateKey: "selectedPaymentCard", + }, + "shipping-address-page": { + guid: null, + }, + "payer-address-page": { + guid: null, + }, + "billing-address-page": { + guid: null, + }, + "payment-summary": {}, + page: { + id: "payment-summary", + previousId: null, + // onboardingWizard: true, + // error: "", + }, + request: { + completeStatus: "", + tabId: null, + topLevelPrincipal: { URI: { displayHost: null } }, + requestId: null, + paymentMethods: [], + paymentDetails: { + id: null, + totalItem: { label: null, amount: { currency: null, value: 0 } }, + displayItems: [], + payerErrors: {}, + paymentMethodErrors: null, + shippingAddressErrors: {}, + shippingOptions: [], + modifiers: null, + error: "", + }, + paymentOptions: { + requestPayerName: false, + requestPayerEmail: false, + requestPayerPhone: false, + requestShipping: false, + shippingType: "shipping", + }, + shippingOption: null, + }, + selectedPayerAddress: null, + selectedPaymentCard: null, + selectedPaymentCardSecurityCode: null, + selectedShippingAddress: null, + selectedShippingOption: null, + savedAddresses: {}, + savedBasicCards: {}, + tempAddresses: {}, + tempBasicCards: {}, +}); + +/** + * A mixin to render UI based upon the requestStore and get updated when that store changes. + * + * Attaches `requestStore` to the element to give access to the store. + * @param {class} superClass The class to extend + * @returns {class} + */ +export default function PaymentStateSubscriberMixin(superClass) { + return class PaymentStateSubscriber extends superClass { + constructor() { + super(); + this.requestStore = requestStore; + } + + connectedCallback() { + this.requestStore.subscribe(this); + this.render(this.requestStore.getState()); + if (super.connectedCallback) { + super.connectedCallback(); + } + } + + disconnectedCallback() { + this.requestStore.unsubscribe(this); + if (super.disconnectedCallback) { + super.disconnectedCallback(); + } + } + + /** + * Called by the store upon state changes. + * @param {object} state The current state + */ + stateChangeCallback(state) { + this.render(state); + } + }; +} diff --git a/browser/components/payments/res/paymentRequest.css b/browser/components/payments/res/paymentRequest.css new file mode 100644 index 0000000000..ef03c745ae --- /dev/null +++ b/browser/components/payments/res/paymentRequest.css @@ -0,0 +1,265 @@ +/* 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/. */ + +:root { + height: 100%; +} + +body { + height: 100%; + margin: 0; + /* Override font-size from in-content/common.css which is too large */ + font-size: inherit; +} + +[hidden] { + display: none !important; +} + +#debugging-console { + /* include the default borders in the max-height */ + box-sizing: border-box; + float: right; + height: 100vh; + /* Float above the other overlays */ + position: relative; + z-index: 99; +} + +payment-dialog { + box-sizing: border-box; + display: grid; + grid-template: "header" auto + "main" 1fr + "disabled-overlay" auto; + height: 100%; +} + +payment-dialog > header, +.page > .page-body, +.page > footer { + padding: 0 10%; +} + +payment-dialog > header { + border-bottom: 1px solid rgba(0,0,0,0.1); + display: flex; + /* Wrap so that the error text appears full-width above the rest of the contents */ + flex-wrap: wrap; + /* from visual spec: */ + padding-bottom: 19px; + padding-top: 19px; +} + +payment-dialog > header > .page-error:empty { + display: none; +} + +payment-dialog > header > .page-error { + background: #D70022; + border-radius: 3px; + color: white; + padding: 6px; + width: 100%; +} + +#main-container { + display: flex; + grid-area: main; + position: relative; + max-height: 100%; +} + +.page { + display: flex; + flex-direction: column; + height: 100%; + position: relative; + width: 100%; +} + +.page > .page-body { + display: flex; + flex-direction: column; + flex-grow: 1; + /* The area above the footer should scroll, if necessary. */ + overflow: auto; + padding-top: 18px; +} + +.page > .page-body > h2:empty { + display: none; +} + +.page-error { + color: #D70022; +} + +.manage-text { + margin: 0; + padding: 18px 0; +} + +.page > footer { + align-items: center; + justify-content: end; + background-color: #eaeaee; + display: flex; + /* from visual spec: */ + padding-top: 20px; + padding-bottom: 18px; +} + +#order-details-overlay { + background-color: var(--in-content-page-background); + overflow: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; +} + +#total { + flex: 1 1 auto; + margin: 5px; +} + +#total > currency-amount { + color: var(--in-content-link-color); + font-size: 1.5em; +} + +#total > currency-amount > .currency-code { + color: GrayText; + font-size: 1rem; +} + +#total > div { + color: GrayText; +} + +#view-all { + flex: 0 1 auto; +} + +payment-dialog[complete-status="processing"] #pay { + /* Force opacity to 1 even when disabled in the processing state. */ + opacity: 1; +} + +payment-dialog #pay::before { + -moz-context-properties: fill; + content: url(chrome://browser/skin/connection-secure.svg); + fill: currentColor; + height: 16px; + margin-inline-end: 0.5em; + vertical-align: text-bottom; + width: 16px; +} + +payment-dialog[changes-prevented][complete-status="fail"] #pay, +payment-dialog[changes-prevented][complete-status="unknown"] #pay, +payment-dialog[changes-prevented][complete-status="processing"] #pay, +payment-dialog[changes-prevented][complete-status="success"] #pay { + /* Show the pay button above #disabled-overlay */ + position: relative; + z-index: 51; +} + +#disabled-overlay { + background: white; + grid-area: disabled-overlay; + opacity: 0.6; + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + /* z-index must be greater than some positioned fields and #pay with z-index + but less than 99, the z-index of the debugging console. */ + z-index: 50; +} + +.persist-checkbox { + padding: 5px 0; +} + +.persist-checkbox > label { + display: flex; + align-items: center; +} + +.info-tooltip { + display: inline-block; + background-image: url(chrome://global/skin/icons/help.svg); + width: 16px; + height: 16px; + padding: 2px 4px; + background-repeat: no-repeat; + background-position: center; + position: relative; +} + +.info-tooltip:focus::after, +.info-tooltip:hover::after { + content: attr(aria-label); + display: block; + position: absolute; + padding: 3px 5px; + background-color: #fff; + border: 1px solid #bebebf; + box-shadow: 1px 1px 3px #bebebf; + font-size: smaller; + line-height: normal; + width: 188px; + /* Center the tooltip over the (i) icon (188px / 2 - 5px (padding) - 1px (border)). */ + left: -86px; + bottom: 20px; +} + +.info-tooltip:dir(rtl):focus::after, +.info-tooltip:dir(rtl):hover::after { + left: auto; + right: -86px; +} + +.csc.info-tooltip:focus::after, +.csc.info-tooltip:hover::after { + /* Right-align the tooltip over the (i) icon (-188px - 60px (padding) - 2px (border) + 4px ((i) start padding) + 16px ((i) icon width)). */ + left: -226px; + background-position: top 5px left 5px; + background-image: url(./containers/cvv-hint-image-back.svg); + background-repeat: no-repeat; + padding-inline-start: 55px; +} + +.csc.info-tooltip[cc-type="amex"]::after { + background-image: url(./containers/cvv-hint-image-front.svg); +} + +.csc.info-tooltip:dir(rtl):focus::after, +.csc.info-tooltip:dir(rtl):hover::after { + left: auto; + /* Left-align the tooltip over the (i) icon (-188px - 60px (padding) - 2px (border) + 4px ((i) start padding) + 16px ((i) icon width)). */ + right: -226px; + background-position: top 5px right 5px; +} + +.branding { + background-image: url(chrome://branding/content/icon32.png); + background-size: 16px; + background-repeat: no-repeat; + background-position: left center; + padding-inline-start: 20px; + line-height: 20px; + margin-inline-end: auto; +} + +.branding:dir(rtl) { + background-position: right center; +} diff --git a/browser/components/payments/res/paymentRequest.js b/browser/components/payments/res/paymentRequest.js new file mode 100644 index 0000000000..1a08184615 --- /dev/null +++ b/browser/components/payments/res/paymentRequest.js @@ -0,0 +1,356 @@ +/* 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/. */ + +/** + * Loaded in the unprivileged frame of each payment dialog. + * + * Communicates with privileged code via DOM Events. + */ + +/* import-globals-from unprivileged-fallbacks.js */ + +var paymentRequest = { + _nextMessageID: 1, + domReadyPromise: null, + + init() { + // listen to content + window.addEventListener("paymentChromeToContent", this); + + window.addEventListener("keydown", this); + + this.domReadyPromise = new Promise(function dcl(resolve) { + window.addEventListener("DOMContentLoaded", resolve, { once: true }); + }).then(this.handleEvent.bind(this)); + + // This scope is now ready to listen to the initialization data + this.sendMessageToChrome("initializeRequest"); + }, + + handleEvent(event) { + switch (event.type) { + case "DOMContentLoaded": { + this.onPaymentRequestLoad(); + break; + } + case "keydown": { + if (event.code != "KeyD" || !event.altKey || !event.ctrlKey) { + break; + } + this.toggleDebuggingConsole(); + break; + } + case "unload": { + this.onPaymentRequestUnload(); + break; + } + case "paymentChromeToContent": { + this.onChromeToContent(event); + break; + } + default: { + throw new Error("Unexpected event type"); + } + } + }, + + /** + * @param {string} messageType + * @param {[object]} detail + * @returns {number} message ID to be able to identify a reply (where applicable). + */ + sendMessageToChrome(messageType, detail = {}) { + let messageID = this._nextMessageID++; + log.debug("sendMessageToChrome:", messageType, messageID, detail); + let event = new CustomEvent("paymentContentToChrome", { + bubbles: true, + detail: Object.assign( + { + messageType, + messageID, + }, + detail + ), + }); + document.dispatchEvent(event); + return messageID; + }, + + toggleDebuggingConsole() { + let debuggingConsole = document.getElementById("debugging-console"); + if (debuggingConsole.hidden && !debuggingConsole.src) { + debuggingConsole.src = "debugging.html"; + } + debuggingConsole.hidden = !debuggingConsole.hidden; + }, + + onChromeToContent({ detail }) { + let { messageType } = detail; + log.debug("onChromeToContent:", messageType); + + switch (messageType) { + case "responseSent": { + let { request } = document + .querySelector("payment-dialog") + .requestStore.getState(); + document.querySelector("payment-dialog").requestStore.setState({ + changesPrevented: true, + request: Object.assign({}, request, { completeStatus: "processing" }), + }); + break; + } + case "showPaymentRequest": { + this.onShowPaymentRequest(detail); + break; + } + case "updateState": { + document.querySelector("payment-dialog").setStateFromParent(detail); + break; + } + } + }, + + onPaymentRequestLoad() { + log.debug("onPaymentRequestLoad"); + window.addEventListener("unload", this, { once: true }); + + // Automatically show the debugging console if loaded with a truthy `debug` query parameter. + if (new URLSearchParams(location.search).get("debug")) { + this.toggleDebuggingConsole(); + } + }, + + async onShowPaymentRequest(detail) { + // Handle getting called before the DOM is ready. + log.debug("onShowPaymentRequest:", detail); + await this.domReadyPromise; + + log.debug("onShowPaymentRequest: domReadyPromise resolved"); + log.debug("onShowPaymentRequest, isPrivate?", detail.isPrivate); + + let paymentDialog = document.querySelector("payment-dialog"); + let state = { + request: detail.request, + savedAddresses: detail.savedAddresses, + savedBasicCards: detail.savedBasicCards, + // Temp records can exist upon a reload during development. + tempAddresses: detail.tempAddresses, + tempBasicCards: detail.tempBasicCards, + isPrivate: detail.isPrivate, + page: { + id: "payment-summary", + }, + }; + + let hasSavedAddresses = !!Object.keys(this.getAddresses(state)).length; + let hasSavedCards = !!Object.keys(this.getBasicCards(state)).length; + let shippingRequested = state.request.paymentOptions.requestShipping; + + // Onboarding wizard flow. + if (!hasSavedAddresses && shippingRequested) { + state.page = { + id: "shipping-address-page", + onboardingWizard: true, + }; + + state["shipping-address-page"] = { + guid: null, + }; + } else if (!hasSavedAddresses && !hasSavedCards) { + state.page = { + id: "billing-address-page", + onboardingWizard: true, + }; + + state["billing-address-page"] = { + guid: null, + }; + } else if (!hasSavedCards) { + state.page = { + id: "basic-card-page", + onboardingWizard: true, + }; + state["basic-card-page"] = { + selectedStateKey: "selectedPaymentCard", + }; + } + + await paymentDialog.setStateFromParent(state); + + this.sendMessageToChrome("paymentDialogReady"); + }, + + openPreferences() { + this.sendMessageToChrome("openPreferences"); + }, + + cancel() { + this.sendMessageToChrome("paymentCancel"); + }, + + pay(data) { + this.sendMessageToChrome("pay", data); + }, + + closeDialog() { + this.sendMessageToChrome("closeDialog"); + }, + + changePaymentMethod(data) { + this.sendMessageToChrome("changePaymentMethod", data); + }, + + changeShippingAddress(data) { + this.sendMessageToChrome("changeShippingAddress", data); + }, + + changeShippingOption(data) { + this.sendMessageToChrome("changeShippingOption", data); + }, + + changePayerAddress(data) { + this.sendMessageToChrome("changePayerAddress", data); + }, + + /** + * Add/update an autofill storage record. + * + * If the the `guid` argument is provided update the record; otherwise, add it. + * @param {string} collectionName The autofill collection that record belongs to. + * @param {object} record The autofill record to add/update + * @param {string} [guid] The guid of the autofill record to update + * @returns {Promise} when the update response is received + */ + updateAutofillRecord(collectionName, record, guid) { + return new Promise((resolve, reject) => { + let messageID = this.sendMessageToChrome("updateAutofillRecord", { + collectionName, + guid, + record, + }); + + window.addEventListener("paymentChromeToContent", function onMsg({ + detail, + }) { + if ( + detail.messageType != "updateAutofillRecord:Response" || + detail.messageID != messageID + ) { + return; + } + log.debug("updateAutofillRecord: response:", detail); + window.removeEventListener("paymentChromeToContent", onMsg); + document + .querySelector("payment-dialog") + .setStateFromParent(detail.stateChange); + if (detail.error) { + reject(detail); + } else { + resolve(detail); + } + }); + }); + }, + + /** + * @param {object} state object representing the UI state + * @param {string} selectedMethodID (GUID) uniquely identifying the selected payment method + * @returns {object?} the applicable modifier for the payment method + */ + getModifierForPaymentMethod(state, selectedMethodID) { + let basicCards = this.getBasicCards(state); + let selectedMethod = basicCards[selectedMethodID] || null; + if (selectedMethod && selectedMethod.methodName !== "basic-card") { + throw new Error( + `${selectedMethod.methodName} (${selectedMethodID}) ` + + `is not a supported payment method` + ); + } + let modifiers = state.request.paymentDetails.modifiers; + if (!selectedMethod || !modifiers || !modifiers.length) { + return null; + } + let appliedModifier = modifiers.find(modifier => { + // take the first matching modifier + if ( + modifier.supportedMethods && + modifier.supportedMethods != selectedMethod.methodName + ) { + return false; + } + let supportedNetworks = + (modifier.data && modifier.data.supportedNetworks) || []; + return ( + !supportedNetworks.length || + supportedNetworks.includes(selectedMethod["cc-type"]) + ); + }); + return appliedModifier || null; + }, + + /** + * @param {object} state object representing the UI state + * @returns {object} in the shape of `nsIPaymentItem` representing the total + * that applies to the selected payment method. + */ + getTotalItem(state) { + let methodID = state.selectedPaymentCard; + if (methodID) { + let modifier = paymentRequest.getModifierForPaymentMethod( + state, + methodID + ); + if (modifier && modifier.hasOwnProperty("total")) { + return modifier.total; + } + } + return state.request.paymentDetails.totalItem; + }, + + onPaymentRequestUnload() { + // remove listeners that may be used multiple times here + window.removeEventListener("paymentChromeToContent", this); + }, + + _sortObjectsByTimeLastUsed(objects) { + let sortedValues = Object.values(objects).sort((a, b) => { + let aLastUsed = a.timeLastUsed || a.timeLastModified; + let bLastUsed = b.timeLastUsed || b.timeLastModified; + return bLastUsed - aLastUsed; + }); + let sortedObjects = {}; + for (let obj of sortedValues) { + sortedObjects[obj.guid] = obj; + } + return sortedObjects; + }, + + getAddresses(state) { + let addresses = Object.assign( + {}, + state.savedAddresses, + state.tempAddresses + ); + return this._sortObjectsByTimeLastUsed(addresses); + }, + + getBasicCards(state) { + let cards = Object.assign({}, state.savedBasicCards, state.tempBasicCards); + return this._sortObjectsByTimeLastUsed(cards); + }, + + maybeCreateFieldErrorElement(container) { + let span = container.querySelector(".error-text"); + if (!span) { + span = document.createElement("span"); + span.className = "error-text"; + container.appendChild(span); + } + return span; + }, +}; + +paymentRequest.init(); + +export default paymentRequest; diff --git a/browser/components/payments/res/paymentRequest.xhtml b/browser/components/payments/res/paymentRequest.xhtml new file mode 100644 index 0000000000..e88b529333 --- /dev/null +++ b/browser/components/payments/res/paymentRequest.xhtml @@ -0,0 +1,303 @@ +<?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 % globalDTD SYSTEM "chrome://global/locale/global.dtd"> + %globalDTD; + <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" > + %brandDTD; + + <!ENTITY viewAllItems "View All Items"> + <!ENTITY paymentSummaryTitle "Your Payment"> + <!ENTITY header.payTo "Pay to"> + <!ENTITY fieldRequiredSymbol "*"> + + <!ENTITY shippingAddressLabel "Shipping Address"> + <!ENTITY deliveryAddressLabel "Delivery Address"> + <!ENTITY pickupAddressLabel "Pickup Address"> + <!ENTITY shippingOptionsLabel "Shipping Options"> + <!ENTITY deliveryOptionsLabel "Delivery Options"> + <!ENTITY pickupOptionsLabel "Pickup Options"> + <!ENTITY shippingGenericError "Can’t ship to this address. Select a different address."> + <!ENTITY deliveryGenericError "Can’t deliver to this address. Select a different address."> + <!ENTITY pickupGenericError "Can’t pick up from this address. Select a different address."> + <!ENTITY paymentMethodsLabel "Payment Method"> + <!ENTITY address.fieldSeparator ", "> + <!ENTITY address.addLink.label "Add"> + <!ENTITY address.editLink.label "Edit"> + <!ENTITY basicCard.addLink.label "Add"> + <!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 billingAddress.addPage.title "Add Billing Address"> + <!ENTITY billingAddress.editPage.title "Edit Billing Address"> + <!ENTITY basicCard.addPage.title "Add Credit Card"> + <!ENTITY basicCard.editPage.title "Edit Credit Card"> + <!ENTITY basicCard.csc.placeholder "CVV"> + <!ENTITY basicCard.csc.back.infoTooltip "3 digit number found on the back of your credit card."> + <!ENTITY basicCard.csc.front.infoTooltip "3 digit number found on the front of your credit card."> + <!ENTITY payer.addPage.title "Add Payer Contact"> + <!ENTITY payer.editPage.title "Edit Payer Contact"> + <!ENTITY payerLabel "Contact Information"> + <!ENTITY manageInPreferences "Manage saved address and credit card information in <a>&brandShortName; Preferences</a>."> + <!ENTITY manageInOptions "Manage saved address and credit card information in <a>&brandShortName; Options</a>."> + <!ENTITY cancelPaymentButton.label "Cancel"> + <!ENTITY approvePaymentButton.label "Pay"> + <!ENTITY processingPaymentButton.label "Processing"> + <!ENTITY successPaymentButton.label "Done"> + <!ENTITY unknownPaymentButton.label "Unknown"> + <!ENTITY orderDetailsLabel "Order Details"> + <!ENTITY orderTotalLabel "Total"> + <!ENTITY basicCardPage.error.genericSave "There was an error saving the payment card."> + <!ENTITY basicCardPage.addressAddLink.label "Add"> + <!ENTITY basicCardPage.addressEditLink.label "Edit"> + <!ENTITY basicCardPage.backButton.label "Back"> + <!ENTITY basicCardPage.nextButton.label "Next"> + <!ENTITY basicCardPage.updateButton.label "Update"> + <!ENTITY basicCardPage.persistCheckbox.label "Save credit card to &brandShortName; (CVV will not be saved)"> + <!ENTITY basicCardPage.persistCheckbox.infoTooltip "&brandShortName; can securely store your credit card information to use in forms like this, so you don’t have to enter it every time."> + <!ENTITY addressPage.error.genericSave "There was an error saving the address."> + <!ENTITY addressPage.cancelButton.label "Cancel"> + <!ENTITY addressPage.backButton.label "Back"> + <!ENTITY addressPage.nextButton.label "Next"> + <!ENTITY addressPage.updateButton.label "Update"> + <!ENTITY addressPage.persistCheckbox.label "Save address to &brandShortName;"> + <!ENTITY addressPage.persistCheckbox.infoTooltip "&brandShortName; can add your address to forms like this, so you don’t have to type it every time."> + <!ENTITY failErrorPage.title "We couldn’t complete your payment to **host-name**"> + <!ENTITY failErrorPage.suggestionHeading "The most likely cause is a hiccup with your credit card."> + <!ENTITY failErrorPage.suggestion1 "Make sure the card you’re using hasn’t expired"> + <!ENTITY failErrorPage.suggestion2 "Double check the card number and expiration date"> + <!ENTITY failErrorPage.suggestion3 "If your credit card information is correct, contact the merchant for more information"> + <!ENTITY failErrorPage.doneButton.label "Close"> + <!ENTITY timeoutErrorPage.title "**host-name** is taking too long to respond."> + <!ENTITY timeoutErrorPage.suggestionHeading "The most likely cause is a temporary connection hiccup. Open a new tab to check your network connection or click “Close” to try again."> + <!ENTITY timeoutErrorPage.doneButton.label "Close"> + <!ENTITY webPaymentsBranding.label "&brandShortName; Checkout"> + <!ENTITY invalidOption.label "Missing or invalid information"> + <!ENTITY acceptedCards.label "Merchant accepts:"> +]> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>&paymentSummaryTitle;</title> + + <!-- chrome: is needed for global.dtd --> + <meta http-equiv="Content-Security-Policy" content="default-src 'self' chrome:"/> + + <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/> + <link rel="stylesheet" href="chrome://formautofill/content/skin/editDialog-shared.css"/> + <link rel="stylesheet" href="chrome://formautofill/content/skin/editAddress.css"/> + <link rel="stylesheet" href="chrome://formautofill/content/skin/editCreditCard.css"/> + <link rel="stylesheet" href="chrome://formautofill/content/skin/editDialog.css"/> + <link rel="stylesheet" href="paymentRequest.css"/> + <link rel="stylesheet" href="components/rich-select.css"/> + <link rel="stylesheet" href="components/address-option.css"/> + <link rel="stylesheet" href="components/basic-card-option.css"/> + <link rel="stylesheet" href="components/shipping-option.css"/> + <link rel="stylesheet" href="components/payment-details-item.css"/> + <link rel="stylesheet" href="components/accepted-cards.css"/> + <link rel="stylesheet" href="containers/address-form.css"/> + <link rel="stylesheet" href="containers/basic-card-form.css"/> + <link rel="stylesheet" href="containers/order-details.css"/> + <link rel="stylesheet" href="containers/rich-picker.css"/> + <link rel="stylesheet" href="containers/error-page.css"/> + + <script src="unprivileged-fallbacks.js"></script> + + <script src="formautofill/autofillEditForms.js"></script> + + <script type="module" src="containers/payment-dialog.js"></script> + <script type="module" src="paymentRequest.js"></script> + + <template id="payment-dialog-template"> + <header> + <div class="page-error" + data-shipping-generic-error="&shippingGenericError;" + data-delivery-generic-error="&deliveryGenericError;" + data-pickup-generic-error="&pickupGenericError;" + aria-live="polite"></div> + <div id="total"> + <currency-amount display-code="display-code"></currency-amount> + <div>&header.payTo; <span id="host-name"></span></div> + </div> + <div id="top-buttons" hidden="hidden"> + <button id="view-all" class="closed">&viewAllItems;</button> + </div> + </header> + + <div id="main-container"> + <payment-request-page id="payment-summary"> + <div class="page-body"> + <address-picker class="shipping-related" + data-add-link-label="&address.addLink.label;" + data-edit-link-label="&address.editLink.label;" + data-field-separator="&address.fieldSeparator;" + data-shipping-address-label="&shippingAddressLabel;" + data-delivery-address-label="&deliveryAddressLabel;" + data-pickup-address-label="&pickupAddressLabel;" + data-invalid-label="&invalidOption.label;" + selected-state-key="selectedShippingAddress"></address-picker> + + <shipping-option-picker class="shipping-related" + data-shipping-options-label="&shippingOptionsLabel;" + data-delivery-options-label="&deliveryOptionsLabel;" + data-pickup-options-label="&pickupOptionsLabel;"></shipping-option-picker> + + <payment-method-picker selected-state-key="selectedPaymentCard" + data-add-link-label="&basicCard.addLink.label;" + data-edit-link-label="&basicCard.editLink.label;" + data-csc-placeholder="&basicCard.csc.placeholder;" + data-csc-back-tooltip="&basicCard.csc.back.infoTooltip;" + data-csc-front-tooltip="&basicCard.csc.front.infoTooltip;" + data-invalid-label="&invalidOption.label;" + label="&paymentMethodsLabel;"> + </payment-method-picker> + <accepted-cards hidden="hidden" label="&acceptedCards.label;"></accepted-cards> + <address-picker class="payer-related" + label="&payerLabel;" + data-add-link-label="&payer.addLink.label;" + data-edit-link-label="&payer.editLink.label;" + data-field-separator="&address.fieldSeparator;" + data-invalid-label="&invalidOption.label;" + selected-state-key="selectedPayerAddress"></address-picker> + + <p class="manage-text"> + <span hidden="hidden" data-os="mac">&manageInPreferences;</span> + <span hidden="hidden">&manageInOptions;</span> + </p> + </div> + + <footer> + <span class="branding">&webPaymentsBranding.label;</span> + <button id="cancel">&cancelPaymentButton.label;</button> + <button id="pay" + class="primary" + data-label="&approvePaymentButton.label;" + data-processing-label="&processingPaymentButton.label;" + data-unknown-label="&unknownPaymentButton.label;" + data-success-label="&successPaymentButton.label;"></button> + </footer> + </payment-request-page> + <section id="order-details-overlay" hidden="hidden"> + <h2>&orderDetailsLabel;</h2> + <order-details></order-details> + </section> + + <basic-card-form id="basic-card-page" + data-add-basic-card-title="&basicCard.addPage.title;" + data-edit-basic-card-title="&basicCard.editPage.title;" + data-error-generic-save="&basicCardPage.error.genericSave;" + + data-address-add-link-label="&basicCardPage.addressAddLink.label;" + data-address-edit-link-label="&basicCardPage.addressEditLink.label;" + + data-invalid-address-label="&invalidOption.label;" + data-address-field-separator="&address.fieldSeparator;" + data-back-button-label="&basicCardPage.backButton.label;" + data-next-button-label="&basicCardPage.nextButton.label;" + data-update-button-label="&basicCardPage.updateButton.label;" + data-cancel-button-label="&cancelPaymentButton.label;" + data-persist-checkbox-label="&basicCardPage.persistCheckbox.label;" + data-persist-checkbox-info-tooltip="&basicCardPage.persistCheckbox.infoTooltip;" + data-csc-placeholder="&basicCard.csc.placeholder;" + data-csc-back-info-tooltip="&basicCard.csc.back.infoTooltip;" + data-csc-front-info-tooltip="&basicCard.csc.front.infoTooltip;" + data-accepted-cards-label="&acceptedCards.label;" + data-field-required-symbol="&fieldRequiredSymbol;" + hidden="hidden"></basic-card-form> + + <address-form id="shipping-address-page" + data-title-add="&shippingAddress.addPage.title;" + data-title-edit="&shippingAddress.editPage.title;" + data-error-generic-save="&addressPage.error.genericSave;" + data-cancel-button-label="&addressPage.cancelButton.label;" + data-back-button-label="&addressPage.backButton.label;" + data-next-button-label="&addressPage.nextButton.label;" + data-update-button-label="&addressPage.updateButton.label;" + data-persist-checkbox-label="&addressPage.persistCheckbox.label;" + data-persist-checkbox-info-tooltip="&addressPage.persistCheckbox.infoTooltip;" + data-field-required-symbol="&fieldRequiredSymbol;" + hidden="hidden" + selected-state-key="selectedShippingAddress"></address-form> + + <address-form id="payer-address-page" + data-title-add="&payer.addPage.title;" + data-title-edit="&payer.editPage.title;" + data-error-generic-save="&addressPage.error.genericSave;" + data-cancel-button-label="&addressPage.cancelButton.label;" + data-back-button-label="&addressPage.backButton.label;" + data-next-button-label="&addressPage.nextButton.label;" + data-update-button-label="&addressPage.updateButton.label;" + data-persist-checkbox-label="&addressPage.persistCheckbox.label;" + data-persist-checkbox-info-tooltip="&addressPage.persistCheckbox.infoTooltip;" + data-field-required-symbol="&fieldRequiredSymbol;" + hidden="hidden" + selected-state-key="selectedPayerAddress"></address-form> + + <address-form id="billing-address-page" + data-title-add="&billingAddress.addPage.title;" + data-title-edit="&billingAddress.editPage.title;" + data-error-generic-save="&addressPage.error.genericSave;" + data-cancel-button-label="&addressPage.cancelButton.label;" + data-back-button-label="&addressPage.backButton.label;" + data-next-button-label="&addressPage.nextButton.label;" + data-update-button-label="&addressPage.updateButton.label;" + data-persist-checkbox-label="&addressPage.persistCheckbox.label;" + data-persist-checkbox-info-tooltip="&addressPage.persistCheckbox.infoTooltip;" + data-field-required-symbol="&fieldRequiredSymbol;" + hidden="hidden" + selected-state-key="basic-card-page|billingAddressGUID"></address-form> + + <completion-error-page id="completion-timeout-error" class="illustrated" + data-page-title="&timeoutErrorPage.title;" + data-suggestion-heading="&timeoutErrorPage.suggestionHeading;" + data-branding-label="&webPaymentsBranding.label;" + data-done-button-label="&timeoutErrorPage.doneButton.label;" + hidden="hidden"></completion-error-page> + <completion-error-page id="completion-fail-error" class="illustrated" + data-page-title="&failErrorPage.title;" + data-suggestion-heading="&failErrorPage.suggestionHeading;" + data-suggestion-1="&failErrorPage.suggestion1;" + data-suggestion-2="&failErrorPage.suggestion2;" + data-suggestion-3="&failErrorPage.suggestion3;" + data-branding-label="&webPaymentsBranding.label;" + data-done-button-label="&failErrorPage.doneButton.label;" + hidden="hidden"></completion-error-page> + </div> + + <div id="disabled-overlay" hidden="hidden"> + <!-- overlay to prevent changes while waiting for a response from the merchant --> + </div> + </template> + + <template id="order-details-template"> + <ul class="main-list"></ul> + <ul class="footer-items-list"></ul> + + <div class="details-total"> + <h2 class="label">&orderTotalLabel;</h2> + <currency-amount></currency-amount> + </div> + </template> +</head> +<body dir="&locale.dir;"> + <iframe id="debugging-console" + hidden="hidden"> + </iframe> + <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-billing-address-title-add="&billingAddress.addPage.title;" + data-payer-title-add="&payer.addPage.title;" + data-payer-title-edit="&payer.editPage.title;"></payment-dialog> +</body> +</html> diff --git a/browser/components/payments/res/unprivileged-fallbacks.js b/browser/components/payments/res/unprivileged-fallbacks.js new file mode 100644 index 0000000000..ee7e47a7df --- /dev/null +++ b/browser/components/payments/res/unprivileged-fallbacks.js @@ -0,0 +1,159 @@ +/* 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 file defines fallback objects to be used during development outside + * of the paymentDialogWrapper. When loaded in the wrapper, a frame script + * overwrites these methods. Since these methods need to get overwritten in the + * global scope, it can't be converted into an ES module. + */ + +/* eslint-disable no-console */ +/* exported log, PaymentDialogUtils */ + +"use strict"; + +var log = { + error: console.error.bind(console, "paymentRequest.xhtml:"), + warn: console.warn.bind(console, "paymentRequest.xhtml:"), + info: console.info.bind(console, "paymentRequest.xhtml:"), + debug: console.debug.bind(console, "paymentRequest.xhtml:"), +}; + +var PaymentDialogUtils = { + getAddressLabel(address, addressFields = null) { + if (addressFields) { + let requestedFields = addressFields.trim().split(/\s+/); + return ( + requestedFields + .filter(f => f && address[f]) + .map(f => address[f]) + .join(", ") + ` (${address.guid})` + ); + } + return `${address.name} (${address.guid})`; + }, + + getCreditCardNetworks() { + // Shim for list of known and supported credit card network ids as exposed by + // toolkit/modules/CreditCard.jsm + return [ + "amex", + "cartebancaire", + "diners", + "discover", + "jcb", + "mastercard", + "mir", + "unionpay", + "visa", + ]; + }, + isCCNumber(str) { + return !!str.replace(/[-\s]/g, "").match(/^\d{9,}$/); + }, + DEFAULT_REGION: "US", + countries: new Map([ + ["US", "United States"], + ["CA", "Canada"], + ["DE", "Germany"], + ]), + getFormFormat(country) { + if (country == "DE") { + return { + addressLevel3Label: "suburb", + addressLevel2Label: "city", + addressLevel1Label: "province", + addressLevel1Options: null, + postalCodeLabel: "postalCode", + fieldsOrder: [ + { + fieldId: "name", + newLine: true, + }, + { + fieldId: "organization", + newLine: true, + }, + { + fieldId: "street-address", + newLine: true, + }, + { fieldId: "postal-code" }, + { fieldId: "address-level2" }, + ], + postalCodePattern: "\\d{5}", + countryRequiredFields: [ + "street-address", + "address-level2", + "postal-code", + ], + }; + } + + let addressLevel1Options = null; + if (country == "US") { + addressLevel1Options = new Map([ + ["CA", "California"], + ["MA", "Massachusetts"], + ["MI", "Michigan"], + ]); + } else if (country == "CA") { + addressLevel1Options = new Map([ + ["NS", "Nova Scotia"], + ["ON", "Ontario"], + ["YT", "Yukon"], + ]); + } + + let fieldsOrder = [ + { fieldId: "name", newLine: true }, + { fieldId: "street-address", newLine: true }, + { fieldId: "address-level2" }, + { fieldId: "address-level1" }, + { fieldId: "postal-code" }, + { fieldId: "organization" }, + ]; + if (country == "BR") { + fieldsOrder.splice(2, 0, { fieldId: "address-level3" }); + } + + return { + addressLevel3Label: "suburb", + addressLevel2Label: "city", + addressLevel1Label: country == "US" ? "state" : "province", + addressLevel1Options, + postalCodeLabel: country == "US" ? "zip" : "postalCode", + fieldsOrder, + // The following values come from addressReferences.js and should not be changed. + /* eslint-disable-next-line max-len */ + postalCodePattern: + country == "US" + ? "(\\d{5})(?:[ \\-](\\d{4}))?" + : "[ABCEGHJKLMNPRSTVXY]\\d[ABCEGHJ-NPRSTV-Z] ?\\d[ABCEGHJ-NPRSTV-Z]\\d", + countryRequiredFields: + country == "US" || country == "CA" + ? [ + "street-address", + "address-level2", + "address-level1", + "postal-code", + ] + : ["street-address", "address-level2", "postal-code"], + }; + }, + findAddressSelectOption(selectEl, address, fieldName) { + return null; + }, + getDefaultPreferences() { + let prefValues = { + saveCreditCardDefaultChecked: false, + saveAddressDefaultChecked: true, + }; + return prefValues; + }, + isOfficialBranding() { + return false; + }, +}; |
