Update src/dialogs/analytics/dialog-analytics-optin.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/analytics.ts

@@ -9,6 +9,7 @@ export interface AnalyticsPreferences {
 
 export interface Analytics {
   preferences: AnalyticsPreferences;
+  onboarded: boolean;
 }
 
 export const getAnalyticsDetails = (hass: HomeAssistant) =>

src/dialogs/analytics/dialog-analytics-optin.ts

@@ -0,0 +1,165 @@
+import "../../components/ha-analytics";
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-dialog";
+import { Analytics, setAnalyticsPreferences } from "../../data/analytics";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import { DialogAnalyticsOptInParams } from "./show-dialog-analytics-optin";
+import { analyticsLearnMore } from "../../components/ha-analytics-learn-more";
+
+@customElement("dialog-analytics-optin")
+class DialogAnalyticsOptIn extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @internalProperty() private _error?: string;
+
+  @internalProperty() private _submitting = false;
+
+  @internalProperty() private _showPreferences = false;
+
+  @internalProperty() private _analyticsDetails?: Analytics;
+
+  public showDialog(params: DialogAnalyticsOptInParams): void {
+    this._error = undefined;
+    this._submitting = false;
+    this._analyticsDetails = params.analytics;
+  }
+
+  public closeDialog(): void {
+    this._error = undefined;
+    this._submitting = false;
+    this._showPreferences = false;
+    this._analyticsDetails = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._analyticsDetails) {
+      return html``;
+    }
+    return html`
+      <ha-dialog
+        open
+        heading="Analytics"
+        scrimClickAction
+        escapeKeyAction
+        hideActions
+      >
+        <div class="content">
+          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._showPreferences
+            ? html`<ha-analytics
+                @analytics-preferences-changed=${this._preferencesChanged}
+                .hass=${this.hass}
+                .analytics=${this._analyticsDetails!}
+              ></ha-analytics>`
+            : html` <div class="introduction">
+                To help us better understand how you use Home Assistant, and to
+                ensure our priorities align with yours, we ask that you share
+                anonymized information from your installation. This will help make Home
+                Assistant better and help us convince manufacturers to add local
+                control and privacy-focused features.
+                <p>
+                  If you want to change what you share, you can find this in
+                  under "General" here in the configuration panel
+                </p>
+              </div>`}
+          ${analyticsLearnMore(this.hass)}
+        </div>
+        <div class="dialog-actions">
+          <mwc-button @click=${this._ignore} .disabled=${this._submitting}>
+            Ignore
+          </mwc-button>
+          <mwc-button
+            @click=${this._customize}
+            .disabled=${this._submitting || this._showPreferences}
+          >
+            Customize
+          </mwc-button>
+          <mwc-button @click=${this._submit} .disabled=${this._submitting}>
+            ${this._showPreferences ? "Submit" : "Enable analytics"}
+          </mwc-button>
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  private _preferencesChanged(event: CustomEvent): void {
+    this._analyticsDetails = {
+      ...this._analyticsDetails!,
+      preferences: event.detail.preferences,
+    };
+  }
+
+  private async _ignore() {
+    this._submitting = true;
+    try {
+      await setAnalyticsPreferences(this.hass, {});
+    } catch (err) {
+      this._error = err.message;
+      this._submitting = false;
+      return;
+    }
+    this.closeDialog();
+  }
+
+  private async _customize() {
+    this._showPreferences = true;
+  }
+
+  private async _submit() {
+    this._submitting = true;
+    try {
+      await setAnalyticsPreferences(
+        this.hass,
+        this._showPreferences
+          ? this._analyticsDetails!.preferences
+          : { base: true, usage: true, statistics: true }
+      );
+    } catch (err) {
+      this._error = err.message;
+      this._submitting = false;
+      return;
+    }
+
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+        .content {
+          padding-bottom: 54px;
+        }
+        .dialog-actions {
+          display: flex;
+          justify-content: space-between;
+          bottom: 16px;
+          position: absolute;
+          width: calc(100% - 48px);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-analytics-optin": DialogAnalyticsOptIn;
+  }
+}

src/dialogs/analytics/show-dialog-analytics-optin.ts

@@ -0,0 +1,20 @@
+import { fireEvent } from "../../common/dom/fire_event";
+import { Analytics } from "../../data/analytics";
+
+export interface DialogAnalyticsOptInParams {
+  analytics: Analytics;
+}
+
+export const loadConfigEntrySystemOptionsDialog = () =>
+  import("./dialog-analytics-optin");
+
+export const showDialogAnalyticsOptIn = (
+  element: HTMLElement,
+  dialogParams: DialogAnalyticsOptInParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-analytics-optin",
+    dialogImport: loadConfigEntrySystemOptionsDialog,
+    dialogParams,
+  });
+};

src/onboarding/onboarding-analytics.ts

@@ -27,6 +27,7 @@ class OnboardingAnalytics extends LitElement {
 
   @internalProperty() private _analyticsDetails: Analytics = {
     preferences: {},
+    onboarded: false,
   };
 
   protected render(): TemplateResult {

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -15,7 +15,9 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
 import "../../../components/ha-svg-icon";
+import { getAnalyticsDetails } from "../../../data/analytics";
 import { CloudStatus } from "../../../data/cloud";
+import { showDialogAnalyticsOptIn } from "../../../dialogs/analytics/show-dialog-analytics-optin";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
@@ -36,6 +38,15 @@ class HaConfigDashboard extends LitElement {
 
   @property() public showAdvanced!: boolean;
 
+  protected firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    getAnalyticsDetails(this.hass).then((analytics) => {
+      if (!analytics.onboarded) {
+        showDialogAnalyticsOptIn(this, { analytics });
+      }
+    });
+  }
+
   protected render(): TemplateResult {
     const content = html` <ha-config-section
       .narrow=${this.narrow}