analytics/lib/plausible_web/templates/site/settings_google_import.html.heex

<div class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
  <header class="relative border-b border-gray-200 pb-4">
    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
      Google Analytics Data Import
    </h2>
    <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">
      Import existing data from your Google Analytics account.
    </p>
    <PlausibleWeb.Components.Generic.docs_info slug="google-analytics-import" />
  </header>

  <%= if Keyword.get(Application.get_env(:plausible, :google), :client_id) do %>
    <%= cond do %>
      <% @site.imported_data && @site.imported_data.status == "importing" -> %>
        <li class="py-4 flex items-center justify-between space-x-4">
          <div class="flex flex-col">
            <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
              Import from <%= @site.imported_data.source %>
              <svg
                class="animate-spin -mr-1 ml-1 h-4 w-4 inline text-indigo-600"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
              >
                <circle
                  class="opacity-25"
                  cx="12"
                  cy="12"
                  r="10"
                  stroke="currentColor"
                  stroke-width="4"
                >
                </circle>
                <path
                  class="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                >
                </path>
              </svg>
            </p>
            <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
              From <%= PlausibleWeb.EmailView.date_format(@site.imported_data.start_date) %> to <%= PlausibleWeb.EmailView.date_format(
                @site.imported_data.end_date
              ) %>
            </p>
          </div>
          <%= link("Cancel import",
            to: "/#{URI.encode_www_form(@site.domain)}/settings/forget-imported",
            method: :delete,
            class:
              "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150"
          ) %>
        </li>
      <% @site.imported_data && @site.imported_data.status == "ok" -> %>
        <li class="py-4 flex items-center justify-between space-x-4">
          <div class="flex flex-col">
            <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
              Import from <%= @site.imported_data.source %>
              <svg
                class="h-4 w-4 inline ml-1 -mt-1 text-green-600"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
              >
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </p>
            <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
              From <%= PlausibleWeb.EmailView.date_format(@site.imported_data.start_date) %> to <%= PlausibleWeb.EmailView.date_format(
                @site.imported_data.end_date
              ) %>
            </p>
          </div>
          <%= link(
            "Clear " <>
              PlausibleWeb.StatsView.large_number_format(@imported_pageviews) <>
              " Imported Pageviews",
            to: "/#{URI.encode_www_form(@site.domain)}/settings/forget-imported",
            method: :delete,
            class:
              "inline-block mt-4 px-4 py-2 text-sm leading-5 font-medium text-red-600 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150"
          ) %>
        </li>
      <% true -> %>
        <%= if @site.imported_data && @site.imported_data.status == "error" do %>
          <div class="text-sm mt-2 text-gray-900 dark:text-gray-100">
            Your latest import has failed. You can try importing again by clicking the button below. If you try multiple times and the import keeps failing, please contact support.
          </div>
        <% end %>
        <PlausibleWeb.Components.Google.button
          id="analytics-connect"
          to={Plausible.Google.API.import_authorize_url(@site.id, "import", legacy: true)}
        />
    <% end %>
  <% else %>
    <div class="my-8 text-center text-lg">
      <svg
        class="block mx-auto mb-4 w-6 h-6 text-yellow-500"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        >
        </path>
      </svg>
      <p class="text-gray-900 dark:text-gray-200">
        An extra step is needed to set up your Plausible Analytics Self Hosted for the Google Search Console integration.
        Find instructions <%= link("here",
          to: "https://plausible.io/docs/self-hosting-configuration#google-search-integration",
          class: "text-indigo-500"
        ) %>
      </p>
    </div>
  <% end %>
</div>