1 files changed, 65 insertions, 0 deletions
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);