edit.html.heex

<div class="container mt-8" x-data x-init="Hooks.RememberUnsaved.mounted.call({el: $el})">
  <%= if Keila.Billing.billing_enabled?() do %>
    <div class="rounded shadow p-8 mt-8 max-w-5xl mx-auto flex flex-col gap-4 bg-gray-900 text-gray-50">
      <h2 class="text-3xl font-bold">
        <%= gettext("Subscription") %>
      </h2>

      <%= if  @subscription do %>
        <%= case @subscription.status do %>
          <% :active -> %>
            <p class="flex gap-4 items-center">
              <span class="flex h-2 w-8 items-center text-emerald-500">
                <%= render_icon(:check) %>
              </span>
              <%= gettext(
                "You currently have an active subscription. Thanks for supporting Keila!"
              ) %>
            </p>
          <% :paused -> %>
            <p class="flex gap-4 items-center">
              <span class="flex h-2 w-8 items-center text-red-500">
                <%= render_icon(:information_circle) %>
              </span>
              <%= gettext(
                "Your subscription is currently suspended. Please update your payment method to continue using Keila."
              ) %>
            </p>
          <% :past_due -> %>
            <p class="flex gap-4 items-center">
              <span class="flex h-2 w-8 items-center text-red-500">
                <%= render_icon(:information_circle) %>
              </span>
              <%= gettext(
                "There was an error processing your payment. Please update your payment method to continue using Keila."
              ) %>
            </p>
          <% :deleted -> %>
            <p class="flex gap-4 items-center">
              <span class="flex h-2 w-8 items-center text-red-500">
                <%= render_icon(:information_circle) %>
              </span>
              <%= gettext(
                "Your subscription has been cancelled. Please contact us if you want to start a new subscription."
              ) %>
            </p>
        <% end %>

        <%= if @subscription.status != :deleted do %>
          <div class="flex flex-row">
            <div class="text-center flex flex-col gap-4 items-center grow-0">
              <h3 class="font-bold">
                <span class="text-2xl">
                  <%= @plan.name %>
                </span>
                <span class="block -mt-1 text-sm text-emerald-100">
                  <%= raw(
                    gettext("%{price} / month",
                      price:
                        ~s{<span class="paddle-net" data-product="#{@plan.paddle_id}"></span>}
                    )
                  ) %>
                </span>
                <span class="block text-xs text-emerald-300">
                  <%= raw(
                    gettext("(%{price} incl. tax)",
                      price:
                        ~s{<span class="paddle-gross" data-product="#{@plan.paddle_id}"></span>}
                    )
                  ) %>
                </span>
              </h3>
              <ul>
                <li class="flex">
                  <check-complete class="mr-2 shrink-0" />
                  <%= gettext("%{monthly_emails} emails/month",
                    monthly_emails: @plan.monthly_credits
                  ) %>
                </li>
                <li class="flex">
                  <check-complete class="mr-2 shrink-0" />
                  <%= gettext("unlimited contacts") %>
                </li>
              </ul>
              <div class="flex gap-4">
                <%= if @subscription.update_url do %>
                  <a class="button" target="_blank" href={@subscription.update_url}>
                    <%= gettext("Update payment method") %>
                  </a>
                <% end %>
                <%= if @subscription.cancel_url do %>
                  <a class="button" target="_blank" href={@subscription.cancel_url}>
                    <%= gettext("Cancel subscription") %>
                  </a>
                <% end %>
              </div>
            </div>
          </div>
        <% end %>
      <% else %>
        <%= gettext("Subscribe now and start sending emails!") %>

        <div class="grid grid-cols-3 gap-8">
          <%= for plan <- @plans do %>
            <div class="p-4 text-center flex flex-col gap-4 items-center rounded-sm">
              <h3 class="font-bold">
                <span class="text-2xl">
                  <%= plan.name %>
                </span>
                <span class="block -mt-1 text-sm text-emerald-100">
                  <%= raw(
                    gettext("%{price} / month",
                      price: ~s{<span class="paddle-net" data-product="#{plan.paddle_id}"></span>}
                    )
                  ) %>
                </span>
                <span class="block text-xs text-emerald-300">
                  <%= raw(
                    gettext("(%{price} incl. tax)",
                      price:
                        ~s{<span class="paddle-gross" data-product="#{plan.paddle_id}"></span>}
                    )
                  ) %>
                </span>
              </h3>
              <ul>
                <li class="flex">
                  <check-complete class="mr-2 shrink-0" />
                  <%= gettext("%{monthly_emails} emails/month",
                    monthly_emails: plan.monthly_credits
                  ) %>
                </li>
                <li class="flex">
                  <check-complete class="mr-2 shrink-0" />
                  <%= gettext("unlimited contacts") %>
                </li>
              </ul>
              <button
                class="paddle_button button button--large button--cta w-full block justify-center"
                data-product={plan.paddle_id}
                data-email={@current_user.email}
                data-passthrough={Jason.encode!(%{"account_id" => @account.id})}
                data-theme="none"
                data-success={Routes.account_url(@conn, :await_subscription)}
              >
                <%= gettext("Get started") %>
              </button>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
  <% end %>

  <%= if Keila.Accounts.credits_enabled?() do %>
    <div class="rounded shadow p-8 mt-8 max-w-5xl mx-auto flex flex-col gap-4 bg-gray-900 text-gray-50">
      <h2 class="text-3xl font-bold">
        <%= gettext("Sending Quota") %>
      </h2>

      <div class="h-3 relative w-full rounded-full overflow-hidden mt-4">
        <div class="w-full h-full bg-gray-200 absolute"></div>
        <div
          class="h-full bg-emerald-500 absolute"
          style={
            "width:#{elem(@credits, 1) / case elem(@credits, 0) do
              0 -> 1
              other -> other
            end * 100}"
          }
        >
        </div>
      </div>

      <%= gettext("%{remaining} / %{total} emails remaining",
        total: elem(@credits, 0),
        remaining: elem(@credits, 1)
      ) %>
    </div>
  <% end %>
  <.form
    let={f}
    for={@changeset}
    action={Routes.account_path(@conn, :post_edit)}
    class="rounded shadow p-8 mt-8 max-w-5xl mx-auto flex flex-col gap-4 bg-gray-900 text-gray-50"
    @change="setUnsavedReminder(true)"
  >
    <h2 class="text-3xl font-bold">
      <%= gettext("Change Password") %>
    </h2>
    <p class="text-lg text-gray-200">
      <%= gettext("Here you can update your Keila password.") %>
    </p>
    <div class="flex flex-col">
      <%= label(f, :email, gettext("Email")) %>
      <%= with_validation(f, :email) do %>
        <%= text_input(f, :email,
          placeholder: gettext("you@keila.io"),
          class: "text-black",
          disabled: true
        ) %>
      <% end %>
    </div>
    <div class="flex flex-col">
      <%= label(f, :password, gettext("New Password")) %>
      <%= with_validation(f, :password) do %>
        <%= password_input(f, :password, class: "text-black") %>
      <% end %>
    </div>
    <div class="flex justify-end mt-8">
      <button class="button button--cta button--large" @click="setUnsavedReminder(false)">
        <%= gettext("Update password") %>
      </button>
    </div>
  </.form>
  <.form
    let={f}
    for={@changeset}
    action={Routes.account_path(@conn, :post_edit)}
    class="rounded shadow p-8 mt-8 max-w-5xl mx-auto flex flex-col gap-4 bg-gray-900 text-gray-50"
    @change="setUnsavedReminder(true)"
  >
    <h2 class="text-3xl font-bold">
      <%= gettext("Change Language") %>
    </h2>
    <p class="text-lg text-gray-200">
      <%= gettext("Here you can change the language for the Keila interface.") %>
    </p>
    <div class="flex flex-col">
      <%= label(f, :locale, gettext("Language")) %>
      <%= with_validation(f, :locale) do %>
        <%= select(f, :locale, KeilaWeb.Gettext.available_locales(), class: "text-black") %>
      <% end %>
    </div>
    <div class="flex justify-end mt-8">
      <button class="button button--cta button--large" @click="setUnsavedReminder(false)">
        <%= gettext("Update language settings") %>
      </button>
    </div>
  </.form>
  <.form
    let={f}
    for={@conn}
    action={Routes.account_path(@conn, :delete)}
    class="rounded shadow p-8 mt-8 max-w-5xl mx-auto flex flex-col gap-4 bg-gray-900 text-gray-50"
    method="delete"
  >
    <%= hidden_input(f, :require_confirmation, value: "true") %>
    <h2 class="text-3xl font-bold">
      <%= gettext("Remove account") %>
    </h2>
    <p class="text-lg text-gray-200">
      <%= gettext("Here you can remove your Keila account") %>
    </p>
    <div class="flex justify-end mt-8">
      <button
        type="submit"
        class="button button--warn button--large"
        @click="setUnsavedReminder(false)"
      >
        <%= gettext("Remove account") %>
      </button>
    </div>
  </.form>
</div>

<script src="https://cdn.paddle.com/paddle/paddle.js">
</script>
<script type="text/javascript">
  Paddle.Environment.set('<%= Application.get_env(:keila, Keila.Billing) |> Keyword.fetch!(:paddle_environment) %>')
  Paddle.Setup({ vendor: <%= Application.get_env(:keila, Keila.Billing) |> Keyword.fetch!(:paddle_vendor) %> })
</script>