feat(subscription): enhance subscription management with loading states and Stripe status checks
This commit is contained in:
Andras Bacsai
@@ -8,13 +8,8 @@
|
||||
<h1>Dashboard</h1>
|
||||
<div class="subtitle">Your self-hosted infrastructure.</div>
|
||||
@if (request()->query->get('success'))
|
||||
<div class="items-center justify-center mb-10 font-bold rounded alert alert-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Your subscription has been activated! Welcome onboard! <br>It could take a few seconds before your
|
||||
<div class=" mb-10 font-bold alert alert-success">
|
||||
Your subscription has been activated! Welcome onboard! It could take a few seconds before your
|
||||
subscription is activated.<br> Please be patient.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -3,37 +3,62 @@
|
||||
Subscribe | Coolify
|
||||
</x-slot>
|
||||
@if (auth()->user()->isAdminFromSession())
|
||||
<div>
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscriptions</h1>
|
||||
@if (subscriptionProvider() === 'stripe' && $alreadySubscribed)
|
||||
<x-forms.button wire:click='stripeCustomerPortal'>Manage My Subscription</x-forms.button>
|
||||
@endif
|
||||
@if (request()->query->get('cancelled'))
|
||||
<div class="mb-6 rounded alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Something went wrong with your subscription. Please try again or contact
|
||||
support.</span>
|
||||
</div>
|
||||
@if (request()->query->get('cancelled'))
|
||||
<div class="mb-6 rounded alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Something went wrong with your subscription. Please try again or contact
|
||||
support.</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (config('subscription.provider') === 'stripe')
|
||||
<livewire:subscription.pricing-plans />
|
||||
@endif
|
||||
@endif
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscriptions</h1>
|
||||
</div>
|
||||
@if ($loading)
|
||||
<div class="flex gap-2" wire:init="getStripeStatus">
|
||||
Loading your subscription status...
|
||||
</div>
|
||||
@else
|
||||
@if ($isUnpaid)
|
||||
<div class="mb-6 rounded alert-error">
|
||||
<span>Your last payment was failed for Coolify Cloud.</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2">Open the following link, navigate to the button and pay your unpaid/past due
|
||||
subscription.
|
||||
</p>
|
||||
<x-forms.button wire:click='stripeCustomerPortal'>Billing Portal</x-forms.button>
|
||||
</div>
|
||||
@else
|
||||
@if (config('subscription.provider') === 'stripe')
|
||||
<div @class([
|
||||
'pb-4' => $isCancelled,
|
||||
'pb-10' => !$isCancelled,
|
||||
])>
|
||||
@if ($isCancelled)
|
||||
<div class="alert-error">
|
||||
<span>It looks like your previous subscription has been cancelled, because you forgot to
|
||||
pay
|
||||
the bills.<br />Please subscribe again to continue using Coolify.</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<livewire:subscription.pricing-plans />
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@else
|
||||
<div class="flex flex-col justify-center mx-10">
|
||||
<div class="flex gap-2">
|
||||
<h1>Subscription</h1>
|
||||
</div>
|
||||
<div>You are not an admin or have been removed from this team. If this does not make sense, please <span
|
||||
class="underline cursor-pointer dark:text-white" wire:click="help">contact
|
||||
us</span>.</div>
|
||||
<div>You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
|
||||
<span class="underline cursor-pointer dark:text-white" wire:click="help">contact
|
||||
us</span>.
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div x-data="{ selected: 'monthly' }" class="w-full pb-20 pt-10">
|
||||
<div x-data="{ selected: 'monthly' }" class="w-full pb-20">
|
||||
<div class="px-6 mx-auto lg:px-8">
|
||||
<div class="flex justify-center">
|
||||
<fieldset
|
||||
@@ -72,14 +72,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
|
||||
class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-monthly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
<x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-basic"
|
||||
class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-yearly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
<div class="flex pt-4 h-14">
|
||||
<x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
|
||||
class="w-full" wire:click="subscribeStripe('dynamic-monthly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
<x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-basic"
|
||||
class="w-full" wire:click="subscribeStripe('dynamic-yearly')">
|
||||
Subscribe
|
||||
</x-forms.button>
|
||||
</div>
|
||||
<ul role="list" class="mt-8 space-y-3 text-sm leading-6 dark:text-neutral-400">
|
||||
<li class="flex">
|
||||
<svg class="flex-none w-5 h-6 mr-3 text-warning" viewBox="0 0 20 20" fill="currentColor"
|
||||
|
||||
Reference in New Issue
Block a user