Add currency to onboarding (#9691)

src/onboarding/onboarding-core-config.ts

@@ -8,6 +8,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { createCurrencyListEl } from "../components/currency-datalist";
 import "../components/map/ha-locations-editor";
 import type { MarkerLocation } from "../components/map/ha-locations-editor";
 import { createTimezoneListEl } from "../components/timezone-datalist";
@@ -16,11 +17,12 @@ import {
   detectCoreConfig,
   saveCoreConfig,
 } from "../data/core";
+import { SYMBOL_TO_ISO } from "../data/currency";
 import { onboardCoreConfigStep } from "../data/onboarding";
 import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant } from "../types";
 
-const amsterdam = [52.3731339, 4.8903147];
+const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");
 
 @customElement("onboarding-core-config")
@@ -31,15 +33,17 @@ class OnboardingCoreConfig extends LitElement {
 
   @state() private _working = false;
 
-  @state() private _name!: ConfigUpdateValues["location_name"];
+  @state() private _name?: ConfigUpdateValues["location_name"];
 
-  @state() private _location!: [number, number];
+  @state() private _location?: [number, number];
 
-  @state() private _elevation!: string;
+  @state() private _elevation?: string;
 
-  @state() private _unitSystem!: ConfigUpdateValues["unit_system"];
+  @state() private _unitSystem?: ConfigUpdateValues["unit_system"];
 
-  @state() private _timeZone!: string;
+  @state() private _currency?: ConfigUpdateValues["currency"];
+
+  @state() private _timeZone?: string;
 
   protected render(): TemplateResult {
     return html`
@@ -159,6 +163,35 @@ class OnboardingCoreConfig extends LitElement {
         </paper-radio-group>
       </div>
 
+      <div class="row">
+            <div class="flex">
+              ${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.currency"
+              )}<br />
+              <a
+                href="https://en.wikipedia.org/wiki/ISO_4217#Active_codes"
+                target="_blank"
+                rel="noopener noreferrer"
+                >${this.hass.localize(
+                  "ui.panel.config.core.section.core.core_config.find_currency_value"
+                )}</a
+              >
+            </div>
+
+            <paper-input
+              class="flex"
+              .label=${this.hass.localize(
+                "ui.panel.config.core.section.core.core_config.currency"
+              )}
+              name="currency"
+              list="currencies"
+              .disabled=${this._working}
+              .value=${this._currencyValue}
+              @value-changed=${this._handleChange}
+            ></paper-input>
+          </div>
+        </div>
+
       <div class="footer">
         <mwc-button @click=${this._save} .disabled=${this._working}>
           ${this.onboardingLocalize(
@@ -180,10 +213,15 @@ class OnboardingCoreConfig extends LitElement {
         this._save(ev);
       }
     });
-    const input = this.shadowRoot!.querySelector(
+    const tzInput = this.shadowRoot!.querySelector(
       "[name=timeZone]"
     ) as PaperInputElement;
-    input.inputElement.appendChild(createTimezoneListEl());
+    tzInput.inputElement.appendChild(createTimezoneListEl());
+
+    const cInput = this.shadowRoot!.querySelector(
+      "[name=currency]"
+    ) as PaperInputElement;
+    cInput.inputElement.appendChild(createCurrencyListEl());
   }
 
   private get _nameValue() {
@@ -210,6 +248,10 @@ class OnboardingCoreConfig extends LitElement {
     return this._unitSystem !== undefined ? this._unitSystem : "metric";
   }
 
+  private get _currencyValue() {
+    return this._currency !== undefined ? this._currency : "";
+  }
+
   private _markerLocation = memoizeOne(
     (location: [number, number]): MarkerLocation[] => [
       {
@@ -223,7 +265,16 @@ class OnboardingCoreConfig extends LitElement {
 
   private _handleChange(ev: PolymerChangedEvent<string>) {
     const target = ev.currentTarget as PaperInputElement;
-    this[`_${target.name}`] = target.value;
+
+    let value = target.value;
+
+    if (target.name === "currency" && value) {
+      if (value in SYMBOL_TO_ISO) {
+        value = SYMBOL_TO_ISO[value];
+      }
+    }
+
+    this[`_${target.name}`] = value;
   }
 
   private _locationChanged(ev) {
@@ -240,6 +291,7 @@ class OnboardingCoreConfig extends LitElement {
     this._working = true;
     try {
       const values = await detectCoreConfig(this.hass);
+
       if (values.latitude && values.longitude) {
         this._location = [Number(values.latitude), Number(values.longitude)];
       }
@@ -252,6 +304,9 @@ class OnboardingCoreConfig extends LitElement {
       if (values.time_zone) {
         this._timeZone = values.time_zone;
       }
+      if (values.currency) {
+        this._currency = values.currency;
+      }
     } catch (err) {
       alert(`Failed to detect location information: ${err.message}`);
     } finally {
@@ -271,6 +326,7 @@ class OnboardingCoreConfig extends LitElement {
         elevation: Number(this._elevationValue),
         unit_system: this._unitSystemValue,
         time_zone: this._timeZoneValue || "UTC",
+        currency: this._currencyValue || "EUR",
       });
       const result = await onboardCoreConfigStep(this.hass);
       fireEvent(this, "onboarding-step", {
@@ -311,6 +367,9 @@ class OnboardingCoreConfig extends LitElement {
         margin-top: 16px;
         text-align: right;
       }
+      a {
+        color: var(--primary-color);
+      }
     `;
   }
 }