Voice assistant cloud upsell (#16299)

src/panels/config/voice-assistants/cloud-discover.ts

@@ -0,0 +1,206 @@
+import { mdiMicrophoneMessage, mdiOpenInNew } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-card";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import "../../../components/ha-svg-icon";
+import "../../../components/ha-button";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+
+@customElement("cloud-discover")
+export class CloudDiscover extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected render() {
+    return html`
+      <ha-card outlined>
+        <div class="card-content">
+          <h1 class="header">
+            ${this.hass.localize(
+              "ui.panel.config.voice_assistants.assistants.cloud.header"
+            )}
+          </h1>
+          <div class="features">
+            <div class="feature">
+              <div class="logos">
+                <img
+                  alt="Google Assistant"
+                  src=${brandsUrl({
+                    domain: "google_assistant",
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                />
+                <img
+                  alt="Amazon Alexa"
+                  src=${brandsUrl({
+                    domain: "alexa",
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                />
+              </div>
+              <h2>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.assistants.title"
+                )}
+              </h2>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.assistants.text"
+                )}
+              </p>
+            </div>
+            <div class="feature">
+              <div class="logos">
+                <div class="round-icon">
+                  <ha-svg-icon .path=${mdiMicrophoneMessage}></ha-svg-icon>
+                </div>
+              </div>
+              <h2>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.speech.title"
+                )}
+              </h2>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.speech.text"
+                )}
+              </p>
+            </div>
+          </div>
+          <div class="more">
+            <a href="https://www.nabucasa.com" target="_blank" rel="noreferrer">
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.cloud.and_more"
+              )}
+              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+            </a>
+          </div>
+        </div>
+        ${isComponentLoaded(this.hass, "cloud")
+          ? html`
+              <div class="card-actions">
+                <a href="/config/cloud/register">
+                  <ha-button unelevated>
+                    ${this.hass.localize(
+                      "ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
+                    )}
+                  </ha-button>
+                </a>
+                <a href="/config/cloud/login">
+                  <ha-button>
+                    ${this.hass.localize(
+                      "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
+                    )}
+                  </ha-button>
+                </a>
+              </div>
+            `
+          : nothing}
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-card {
+        display: flex;
+        flex-direction: column;
+      }
+      .card-content {
+        padding: 24px 16px;
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+      }
+      .header {
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 36px;
+        text-align: center;
+        max-width: 600px;
+        margin: 0 auto 8px auto;
+      }
+      @media (min-width: 800px) {
+        .header {
+          font-size: 32px;
+          line-height: 40px;
+          margin-bottom: 16px;
+        }
+      }
+      .features {
+        display: grid;
+        grid-template-columns: auto;
+        grid-gap: 16px;
+        padding: 16px;
+      }
+      @media (min-width: 600px) {
+        .features {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+      .feature {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        margin-bottom: 16px;
+      }
+      .feature .logos {
+        margin-bottom: 16px;
+      }
+      .feature .logos > * {
+        width: 40px;
+        height: 40px;
+        margin: 0 4px;
+      }
+      .round-icon {
+        border-radius: 50%;
+        color: #6e41ab;
+        background-color: #e8dcf7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+      }
+      .feature h2 {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      .feature p {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        margin: 0;
+      }
+      .more {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .more a {
+        text-decoration: none;
+        color: var(--primary-color);
+        font-weight: 500;
+        font-size: 14px;
+      }
+      .more a ha-svg-icon {
+        --mdc-icon-size: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-discover": CloudDiscover;
+  }
+}

src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts

@@ -11,6 +11,7 @@ import "./assist-pref";
 import "./cloud-alexa-pref";
 import "./cloud-google-pref";
 import { voiceAssistantTabs } from "./ha-config-voice-assistants";
+import "./cloud-discover";
 
 @customElement("ha-config-voice-assistants-assistants")
 export class HaConfigVoiceAssistantsAssistants extends LitElement {
@@ -39,10 +40,11 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
       >
         <div class="content">
           ${isComponentLoaded(this.hass, "assist_pipeline")
-            ? html`<assist-pref .hass=${this.hass}></assist-pref>`
+            ? html` <assist-pref .hass=${this.hass}></assist-pref> `
             : nothing}
           ${this.cloudStatus?.logged_in
-            ? html`<cloud-alexa-pref
+            ? html`
+                <cloud-alexa-pref
                   .hass=${this.hass}
                   .cloudStatus=${this.cloudStatus}
                   dir=${computeRTLDirection(this.hass)}
@@ -51,46 +53,9 @@ export class HaConfigVoiceAssistantsAssistants extends LitElement {
                   .hass=${this.hass}
                   .cloudStatus=${this.cloudStatus}
                   dir=${computeRTLDirection(this.hass)}
-                ></cloud-google-pref>`
+                ></cloud-google-pref>
-            : html`<ha-card
+              `
-                  header="Easily connect to voice assistants with Home Assistant Cloud"
+            : html`<cloud-discover .hass=${this.hass}></cloud-discover>`}
-                >
-                  <div class="card-content">
-                    With Home Assistant Cloud, you can connect your Home
-                    Assistant instance in a few simple clicks to both Google
-                    Assistant and Amazon Alexa. If you can connect it to Home
-                    Assistant, you can now control it with your voice using the
-                    Amazon Echo, Google Home or your Android phone.
-                  </div>
-                  <div class="card-actions">
-                    <a
-                      href="https://www.nabucasa.com"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      <mwc-button>Learn more</mwc-button>
-                    </a>
-                  </div>
-                </ha-card>
-                ${isComponentLoaded(this.hass, "cloud")
-                  ? html` <ha-card outlined>
-                      <a href="/config/cloud/register">
-                        <paper-item>
-                          <paper-item-body two-line>
-                            ${this.hass.localize(
-                              "ui.panel.config.cloud.login.start_trial"
-                            )}
-                            <div secondary>
-                              ${this.hass.localize(
-                                "ui.panel.config.cloud.login.trial_info"
-                              )}
-                            </div>
-                          </paper-item-body>
-                          <ha-icon-next></ha-icon-next>
-                        </paper-item>
-                      </a>
-                    </ha-card>`
-                  : ""}`}
         </div>
       </hass-tabs-subpage>
     `;

src/translations/en.json

@@ -2055,6 +2055,22 @@
                   "tts_voice": "Voice"
                 }
               }
+            },
+            "cloud": {
+              "header": "Get the best assistant with Home Assistant Cloud",
+              "features": {
+                "assistants": {
+                  "title": "Google Assistant and Amazon Alexa",
+                  "text": "Control all your Home Assistant devices via any Google Assistant-enabled or Alexa-enabled device."
+                },
+                "speech": {
+                  "title": "Better speech options",
+                  "text": "Bring personality to your home by having it speak to you using our neural-network powered speech-to-text and text-to-speech services."
+                }
+              },
+              "and_more": "And more",
+              "try_one_month": "Try 1 month for free",
+              "sign_in": "Sign in"
             }
           },
           "expose": {