Add localisation to voice wizard (#23169)

* Add localization to voice wizard

* more

src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts

@@ -18,7 +18,11 @@ export class CloudStepIntro extends LitElement {
           src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
           alt="Nabu Casa logo"
         />
-        <h1>The power of Home Assistant Cloud</h1>
+        <h1>
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.satellite_wizard.cloud.title"
+          )}
+        </h1>
         <div class="features">
           <div class="feature speech">
             <div class="logos">
@@ -45,12 +49,15 @@ export class CloudStepIntro extends LitElement {
               </div>
             </div>
             <h2>
-              Remote access
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.cloud.features.remote_access.title"
+              )}
               <span class="no-wrap"></span>
             </h2>
             <p>
-              Secure remote access to your system while supporting the
-              development of Home Assistant.
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.cloud.features.remote_access.text"
+              )}
             </p>
           </div>
           <div class="feature">
@@ -101,7 +108,9 @@ export class CloudStepIntro extends LitElement {
           </ha-button>
         </a>
         <ha-button unelevated @click=${this._signUp}
-          >Try 1 month for free</ha-button
+          >${this.hass.localize(
+            "ui.panel.config.cloud.register.headline"
+          )}</ha-button
         >
       </div>`;
   }

src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts

@@ -32,7 +32,7 @@ export class CloudStepSignin extends LitElement {
           src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
           alt="Nabu Casa logo"
         />
-        <h1>Sign in</h1>
+        <h1>${this.hass.localize("ui.panel.config.cloud.login.sign_in")}</h1>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
@@ -73,7 +73,9 @@ export class CloudStepSignin extends LitElement {
           unelevated
           @click=${this._handleLogin}
           .disabled=${this._requestInProgress}
-          >Sign in</ha-button
+          >${this.hass.localize(
+            "ui.panel.config.cloud.login.sign_in"
+          )}</ha-button
         >
       </div>`;
   }

src/dialogs/voice-assistant-setup/cloud/cloud-step-signup.ts

@@ -40,14 +40,18 @@ export class CloudStepSignup extends LitElement {
           src=${`/static/images/logo_nabu_casa${this.hass.themes?.darkMode ? "_dark" : ""}.png`}
           alt="Nabu Casa logo"
         />
-        <h1>Sign up</h1>
+        <h1>
+          ${this.hass.localize("ui.panel.config.cloud.register.create_account")}
+        </h1>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         ${this._state === "VERIFY"
           ? html`<p>
-              Check the email we just sent to ${this._email} and click the
-              confirmation link to continue.
+              ${this.hass.localize(
+                "ui.panel.config.cloud.register.confirm_email",
+                { email: this._email }
+              )}
             </p>`
           : html`<ha-textfield
                 autofocus
@@ -86,23 +90,29 @@ export class CloudStepSignup extends LitElement {
           ? html`<ha-button
                 @click=${this._handleResendVerifyEmail}
                 .disabled=${this._requestInProgress}
-                >Send the email again</ha-button
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.register.resend_confirm_email"
+                )}</ha-button
               ><ha-button
                 unelevated
                 @click=${this._login}
                 .disabled=${this._requestInProgress}
-                >I clicked the link</ha-button
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.register.clicked_confirm"
+                )}</ha-button
               >`
           : html`<ha-button
                 @click=${this._signIn}
                 .disabled=${this._requestInProgress}
-                >Sign in</ha-button
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.login.sign_in"
+                )}</ha-button
               >
               <ha-button
                 unelevated
                 @click=${this._handleRegister}
                 .disabled=${this._requestInProgress}
-                >Next</ha-button
+                >${this.hass.localize("ui.common.next")}</ha-button
               >`}
       </div>`;
   }

src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts

@@ -145,7 +145,9 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                 @click=${this._goToNextStep}
                 class="skip-btn"
                 slot="actionItems"
-                >Skip</ha-button
+                >${this.hass.localize(
+                  "ui.panel.config.voice_assistants.satellite_wizard.skip"
+                )}</ha-button
               >`
             : nothing}
         </ha-dialog-header>
@@ -164,7 +166,9 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
                 )}
               ></ha-voice-assistant-setup-step-update>`
             : assistEntityState?.state === UNAVAILABLE
-              ? html`Your voice assistant is not available.`
+              ? this.hass.localize(
+                  "ui.panel.config.voice_assistants.satellite_wizard.not_available"
+                )
               : this._step === STEP.CHECK
                 ? html`<ha-voice-assistant-setup-step-check
                     .hass=${this.hass}

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-area.ts

@@ -21,25 +21,36 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
           src="/static/images/voice-assistant/area.png"
           alt="Casita Home Assistant logo"
         />
-        <h1>Select area</h1>
+        <h1>
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.satellite_wizard.area.title"
+          )}
+        </h1>
         <p class="secondary">
-          When you voice assistant knows where it is, it can better control the
-          devices around it.
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.satellite_wizard.area.secondary"
+          )}
         </p>
         <ha-area-picker
           .hass=${this.hass}
           .value=${device.area_id}
         ></ha-area-picker>
       </div>
       <div class="footer">
-        <ha-button @click=${this._setArea} unelevated>Next</ha-button>
+        <ha-button @click=${this._setArea} unelevated
+          >${this.hass.localize("ui.common.next")}</ha-button
+        >
       </div>`;
   }
 
   private async _setArea() {
     const area = this.shadowRoot!.querySelector("ha-area-picker")!.value;
     if (!area) {
-      showAlertDialog(this, { text: "Please select an area" });
+      showAlertDialog(this, {
+        text: this.hass.localize(
+          "ui.panel.config.voice_assistants.satellite_wizard.area.no_selection"
+        ),
+      });
       return;
     }
     await updateDeviceRegistryEntry(this.hass, this.deviceId, {

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-change-wake-word.ts

@@ -1,14 +1,13 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-md-list";
+import "../../components/ha-md-list-item";
 import type { AssistSatelliteConfiguration } from "../../data/assist_satellite";
 import { setWakeWords } from "../../data/assist_satellite";
 import type { HomeAssistant } from "../../types";
-import { STEP } from "./voice-assistant-setup-dialog";
 import { AssistantSetupStyles } from "./styles";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
-import { formatLanguageCode } from "../../common/language/format_language";
+import { STEP } from "./voice-assistant-setup-dialog";
 
 @customElement("ha-voice-assistant-setup-step-change-wake-word")
 export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
@@ -25,11 +24,15 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
           src="/static/images/voice-assistant/change-wake-word.png"
           alt="Casita Home Assistant logo"
         />
-        <h1>Change wake word</h1>
+        <h1>
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.satellite_wizard.change_wake_word.title"
+          )}
+        </h1>
         <p class="secondary">
-          Some wake words are better for
-          ${formatLanguageCode(this.hass.locale.language, this.hass.locale)} and
-          voice than others. Please try them out.
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.satellite_wizard.change_wake_word.secondary"
+          )}
         </p>
       </div>
       <ha-md-list>

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-check.ts

@@ -40,30 +40,47 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
               src="/static/images/voice-assistant/error.png"
               alt="Casita Home Assistant error logo"
             />
-            <h1>The voice assistant is unable to connect to Home Assistant</h1>
+            <h1>
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.satellite_wizard.check.failed_title"
+              )}
+            </h1>
             <p class="secondary">
-              To play audio, the voice assistant device has to connect to Home
-              Assistant to fetch the files. Our test shows that the device is
-              unable to reach the Home Assistant server.
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.satellite_wizard.check.failed_secondary"
+              )}
             </p>
             <div class="footer">
               <a
                 href=${documentationUrl(
                   this.hass,
                   "/voice_control/troubleshooting/#i-dont-get-a-voice-response"
                 )}
-                ><ha-button>Help me</ha-button></a
+                ><ha-button
+                  >${this.hass.localize(
+                    "ui.panel.config.voice_assistants.satellite_wizard.check.help"
+                  )}</ha-button
+                ></a
+              >
+              <ha-button @click=${this._testConnection}
+                >${this.hass.localize(
+                  "ui.panel.config.voice_assistants.satellite_wizard.check.retry"
+                )}</ha-button
               >
-              <ha-button @click=${this._testConnection}>Retry</ha-button>
             </div>`
         : html`<img
               src="/static/images/voice-assistant/hi.png"
               alt="Casita Home Assistant hi logo"
             />
-            <h1>Hi</h1>
+            <h1>
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.satellite_wizard.check.title"
+              )}
+            </h1>
             <p class="secondary">
-              Over the next couple steps we're going to personalize your voice
-              assistant.
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.satellite_wizard.check.secondary"
+              )}
             </p>
 
             ${this._showLoader