Add new Livewire component and update subscription actions

app/Livewire/LayoutPopups.php

@@ -4,7 +4,7 @@
 
 use Livewire\Component;
 
-class Sponsorship extends Component
+class LayoutPopups extends Component
 {
     public function getListeners()
     {
@@ -23,6 +23,6 @@ public function disable()
     }
     public function render()
     {
-        return view('livewire.sponsorship');
+        return view('livewire.layout-popups');
     }
 }

app/Livewire/Subscription/Actions.php

@@ -9,6 +9,7 @@
 class Actions extends Component
 {
     public $server_limits = 0;
+    
     public function mount()
     {
         $this->server_limits = Team::serverLimit();

app/Models/Team.php

@@ -54,6 +54,12 @@ static public function serverLimitReached() {
         $servers = $team->servers->count();
         return $servers >= $serverLimit;
     }
+    public function serverOverflow() {
+        if ($this->serverLimit() < $this->servers->count()) {
+            return true;
+        }
+        return false;
+    }
     static public function serverLimit()
     {
         return Team::find(currentTeam()->id)->limits['serverLimit'];

resources/views/components/banner.blade.php

@@ -0,0 +1,22 @@
+@props(['closable' => true])
+<div x-data="{
+    bannerVisible: false,
+    bannerVisibleAfter: 100,
+}" x-show="bannerVisible" x-transition:enter="transition ease-out duration-200"
+    x-transition:enter-start="-translate-y-10" x-transition:enter-end="translate-y-0"
+    x-transition:leave="transition ease-in duration-100" x-transition:leave-start="translate-y-0"
+    x-transition:leave-end="-translate-y-10" x-init="setTimeout(() => { bannerVisible = true }, bannerVisibleAfter);"
+    class="relative z-50 w-full py-2 mx-auto duration-100 ease-out shadow-sm bg-coolgray-100 sm:py-0 sm:h-14" x-cloak>
+    <div class="flex items-center justify-between h-full px-3">
+        {{ $slot }}
+        @if ($closable)
+            <button @click="bannerVisible=false"
+                class="flex items-center flex-shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-neutral-200 rounded-full hover:bg-coolgray-500">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-full h-full">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        @endif
+    </div>
+</div>

resources/views/layouts/app.blade.php

@@ -7,7 +7,7 @@
             <magic-bar></magic-bar>
         </div>
     @endpersist
-    <livewire:sponsorship />
+    <livewire:layout-popups />
     @auth
         <livewire:realtime-connection />
     @endauth

resources/views/livewire/layout-popups.blade.php

@@ -11,4 +11,9 @@ class="underline text-warning">Please
             </div>
         </div>
     @endif
+    @if (currentTeam()->serverOverflow())
+    <x-banner :closable=false>
+            <div><span class="font-bold text-red-500">WARNING:</span> The number of active servers exceeds the limit covered by your payment. If not resolved, some of your servers <span class="font-bold text-red-500">will be deactivated</span> in the next billing cycle. Visit <a href="{{route('subscription.show')}}" class="text-white underline">/subscription</a> to update your subscription.</div>
+    </x-banner>
+    @endif
 </div>

resources/views/livewire/subscription/actions.blade.php

@@ -1,7 +1,8 @@
 <div>
     @if (subscriptionProvider() === 'stripe')
         <div class="pt-4">
-            <div class="pb-4">Your current Plan is: <strong
+            <h2>Your current plan</h2>
+            <div class="pb-4">Tier: <strong
                     class="text-warning">{{ data_get(currentTeam(), 'subscription')->type() }}</strong></div>
 
             @if (currentTeam()->subscription->stripe_cancel_at_period_end)
@@ -10,13 +11,19 @@ class="text-warning">{{ data_get(currentTeam(), 'subscription')->type() }}</stro
                 <div>Subscription is active. Last invoice is
                     {{ currentTeam()->subscription->stripe_invoice_paid ? 'paid' : 'not paid' }}.</div>
             @endif
-            <h3 class="pt-4">Limits</h3>
+            <div>Number of paid servers: {{ $server_limits }}</div>
-            <div>Server: {{ $server_limits }}</div>
+            <div>Currently active servers: {{ currentTeam()->servers->count() }}</div>
-            <h3 class="pt-4">Actions</h3>
+            @if (currentTeam()->serverOverflow())
+                <div class="py-4"><span class="font-bold text-red-500">WARNING:</span> You must delete
+                    {{ currentTeam()->servers->count() - $server_limits }} servers,
+                    or upgrade your subscription. {{ currentTeam()->servers->count() - $server_limits }} servers will be
+                    deactivated in the next billing cycle.</div>
+            @endif
+            <h2 class="pt-4">Manage your subscription</h2>
             <div class="pb-4">Cancel, upgrade or downgrade your subscription.</div>
             <div class="flex gap-2">
-                <x-forms.button wire:click='stripeCustomerPortal'>Manage your subscription on <svg
+                <x-forms.button wire:click='stripeCustomerPortal'>Go to <svg xmlns="http://www.w3.org/2000/svg"
-                        xmlns="http://www.w3.org/2000/svg" class="w-12" viewBox="0 0 512 214">
+                        class="w-12" viewBox="0 0 512 214">
                         <path fill="#635BFF"
                             d="M512 110.08c0-36.409-17.636-65.138-51.342-65.138c-33.85 0-54.33 28.73-54.33 64.854c0 42.808 24.179 64.426 58.88 64.426c16.925 0 29.725-3.84 39.396-9.244v-28.445c-9.67 4.836-20.764 7.823-34.844 7.823c-13.796 0-26.027-4.836-27.591-21.618h69.547c0-1.85.284-9.245.284-12.658Zm-70.258-13.511c0-16.071 9.814-22.756 18.774-22.756c8.675 0 17.92 6.685 17.92 22.756h-36.694Zm-90.31-51.627c-13.939 0-22.899 6.542-27.876 11.094l-1.85-8.818h-31.288v165.83l35.555-7.537l.143-40.249c5.12 3.698 12.657 8.96 25.173 8.96c25.458 0 48.64-20.48 48.64-65.564c-.142-41.245-23.609-63.716-48.498-63.716Zm-8.534 97.991c-8.391 0-13.37-2.986-16.782-6.684l-.143-52.765c3.698-4.124 8.818-6.968 16.925-6.968c12.942 0 21.902 14.506 21.902 33.137c0 19.058-8.818 33.28-21.902 33.28ZM241.493 36.551l35.698-7.68V0l-35.698 7.538V36.55Zm0 10.809h35.698v124.444h-35.698V47.36Zm-38.257 10.524L200.96 47.36h-30.72v124.444h35.556V87.467c8.39-10.951 22.613-8.96 27.022-7.396V47.36c-4.551-1.707-21.191-4.836-29.582 10.524Zm-71.112-41.386l-34.702 7.395l-.142 113.92c0 21.05 15.787 36.551 36.836 36.551c11.662 0 20.195-2.133 24.888-4.693V140.8c-4.55 1.849-27.022 8.391-27.022-12.658V77.653h27.022V47.36h-27.022l.142-30.862ZM35.982 83.484c0-5.546 4.551-7.68 12.09-7.68c10.808 0 24.461 3.272 35.27 9.103V51.484c-11.804-4.693-23.466-6.542-35.27-6.542C19.2 44.942 0 60.018 0 85.192c0 39.252 54.044 32.995 54.044 49.92c0 6.541-5.688 8.675-13.653 8.675c-11.804 0-26.88-4.836-38.827-11.378v33.849c13.227 5.689 26.596 8.106 38.827 8.106c29.582 0 49.92-14.648 49.92-40.106c-.142-42.382-54.329-34.845-54.329-50.774Z" />
                     </svg></x-forms.button>