lib/plausible_web/components/first_dashboard_launch_banner.ex

defmodule PlausibleWeb.Components.FirstDashboardLaunchBanner do
  @moduledoc """
  A banner that appears on the first dashboard launch
  """

  use PlausibleWeb, :component

  attr(:site, Plausible.Site, required: true)

  def set(assigns) do
    ~H"""
    <script>
      sessionStorage.setItem('<%= storage_key(@site) %>', false);
    </script>
    """
  end

  attr(:site, Plausible.Site, required: true)

  def render(assigns) do
    ~H"""
    <div
      x-cloak
      x-data={x_data(@site)}
      class="w-full px-4 text-sm font-bold text-center text-blue-900 bg-blue-200 rounded-sm transition"
      style="top: 91px"
      role="alert"
      x-bind:class="! show ? 'hidden' : ''"
      x-init={x_init(@site)}
    >
      <.styled_link
        class="plausible-event-name=Weekly+Email+Note+Click"
        href={Routes.site_path(PlausibleWeb.Endpoint, :settings_email_reports, @site.domain)}
      >
        Get weekly traffic summaries by email →
      </.styled_link>
    </div>
    """
  end

  defp x_data(site) do
    "{show: !!sessionStorage.getItem('#{storage_key(site)}')}"
  end

  defp x_init(site) do
    "setTimeout(() => sessionStorage.removeItem('#{storage_key(site)}'), 3000)"
  end

  defp storage_key(site) do
    "dashboard_seen_#{site.domain}"
  end
end