analytics/lib/plausible_web/components/first_dashboard_launch_bann...

50 lines
1.2 KiB
Elixir

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 href={"/#{URI.encode_www_form(@site.domain)}/settings/email-reports"}>
Invite guests, enable email reports, import from GA and more →
</.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