102 lines
4.3 KiB
Plaintext
102 lines
4.3 KiB
Plaintext
<.focus_box>
|
|
<:title>
|
|
Confirm new subscription plan
|
|
</:title>
|
|
|
|
<div class="text-lg font-bold dark:text-gray-100">Due now</div>
|
|
<div class="block text-gray-500 dark:text-gray-200 text-sm">
|
|
Your card will be charged a pro-rated amount for the current billing period
|
|
</div>
|
|
|
|
<div class="flex flex-col mt-4">
|
|
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
|
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none">
|
|
<table class="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
|
|
Amount
|
|
</th>
|
|
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800">
|
|
<tr class="border-b border-gray-200">
|
|
<td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100">
|
|
{present_currency(@preview_info["immediate_payment"]["currency"])}{@preview_info[
|
|
"immediate_payment"
|
|
]["amount"]}
|
|
</td>
|
|
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100">
|
|
{present_date(@preview_info["immediate_payment"]["date"])}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-6"></div>
|
|
|
|
<div class="py-4 dark:text-gray-100 text-lg font-bold">Next payment</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
|
<div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none">
|
|
<table class="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
|
|
Amount
|
|
</th>
|
|
<th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
|
|
Date
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800">
|
|
<tr class="border-b border-gray-200">
|
|
<td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100">
|
|
{present_currency(@preview_info["immediate_payment"]["currency"])}{@preview_info[
|
|
"next_payment"
|
|
]["amount"]}
|
|
</td>
|
|
<td class="px-6 py-4 text-sm leading-5 dark:text-gray-100">
|
|
{present_date(@preview_info["next_payment"]["date"])}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mt-10">
|
|
<span class="flex rounded-md shadow-sm">
|
|
<a
|
|
href={@back_link}
|
|
type="button"
|
|
class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:text-gray-500 dark:hover:text-gray-200 focus:outline-none focus:border-blue-300 focus:ring active:text-gray-800 dark:active:text-gray-200 active:bg-gray-50 transition ease-in-out duration-150"
|
|
>
|
|
Back
|
|
</a>
|
|
</span>
|
|
<span class="flex space-betwee rounded-md shadow-sm">
|
|
<.button_link
|
|
href={Routes.billing_path(@conn, :change_plan, @preview_info["plan_id"])}
|
|
method="post"
|
|
>
|
|
Confirm plan change
|
|
</.button_link>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="text-center mt-8 dark:text-gray-100">
|
|
Questions?
|
|
<.styled_link href="https://plausible.io/contact">Contact us</.styled_link>
|
|
</div>
|
|
</.focus_box>
|