mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Voice assistant cloud upsell (#16299)
This commit is contained in:
Paul Bottein
GitHub
parent
2498f1db41
commit
62ed1d54b0
206
src/panels/config/voice-assistants/cloud-discover.ts
Normal file
206
src/panels/config/voice-assistants/cloud-discover.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>`
|
||||
: html`<ha-card
|
||||
header="Easily connect to voice assistants with Home Assistant Cloud"
|
||||
>
|
||||
<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>`
|
||||
: ""}`}
|
||||
></cloud-google-pref>
|
||||
`
|
||||
: html`<cloud-discover .hass=${this.hass}></cloud-discover>`}
|
||||
</div>
|
||||
</hass-tabs-subpage>
|
||||
`;
|
||||
|
||||
@ -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": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user