From 0a9a92ee7da748262ace66753f33a333759afc77 Mon Sep 17 00:00:00 2001
From: w3cj <cj@null.computer>
Date: Fri, 12 Apr 2024 06:36:23 -0600
Subject: [PATCH 1/4] bug: fix allowTab logic

---
 resources/views/components/forms/textarea.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index a4b499c9c..fff1a6bb9 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -56,7 +56,7 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
 
         </div>
     @else
-        <textarea @keydown.tab="{{ $allowTab }} && handleKeydown" placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
+        <textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
             @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
     wire:model={{ $value ?? $id }}

From 6e7e2de490e1cd6fe533ab2562f3dfc75b865537 Mon Sep 17 00:00:00 2001
From: w3cj <cj@null.computer>
Date: Fri, 12 Apr 2024 07:23:48 -0600
Subject: [PATCH 2/4] bug: use 2 space instead of tab

---
 resources/views/components/forms/textarea.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/forms/textarea.blade.php b/resources/views/components/forms/textarea.blade.php
index fff1a6bb9..f5bdc3e7d 100644
--- a/resources/views/components/forms/textarea.blade.php
+++ b/resources/views/components/forms/textarea.blade.php
@@ -4,7 +4,7 @@ function handleKeydown(e) {
             e.preventDefault();
 
             e.target.setRangeText(
-                '\t',
+                '  ',
                 e.target.selectionStart,
                 e.target.selectionStart,
                 'end'

From 7b4d8a8f05f7cd534a28a228f7185e8ddcb7e446 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 12 Apr 2024 15:48:56 +0200
Subject: [PATCH 3/4] wip: new pricing

---
 app/Http/Controllers/Webhook/Stripe.php       |   8 +-
 app/Livewire/Subscription/PricingPlans.php    |  13 ++
 config/sentry.php                             |   2 +-
 config/subscription.php                       |   3 +
 config/version.php                            |   2 +-
 docker-compose.prod.yml                       |   2 +
 .../subscription/pricing-plans-old.blade.php  |  67 +++++++
 .../subscription/pricing-plans.blade.php      | 183 +++++++++++-------
 versions.json                                 |   2 +-
 9 files changed, 212 insertions(+), 70 deletions(-)
 create mode 100644 resources/views/livewire/subscription/pricing-plans-old.blade.php

diff --git a/app/Http/Controllers/Webhook/Stripe.php b/app/Http/Controllers/Webhook/Stripe.php
index 8cf39e58a..7d6721252 100644
--- a/app/Http/Controllers/Webhook/Stripe.php
+++ b/app/Http/Controllers/Webhook/Stripe.php
@@ -159,8 +159,12 @@ public function events(Request $request)
                     $feedback = data_get($data, 'cancellation_details.feedback');
                     $comment = data_get($data, 'cancellation_details.comment');
                     $lookup_key = data_get($data, 'items.data.0.price.lookup_key');
-                    if (str($lookup_key)->contains('ultimate')) {
-                        $quantity = data_get($data, 'items.data.0.quantity', 10);
+                    if (str($lookup_key)->contains('ultimate') || str($lookup_key)->contains('dynamic')) {
+                        if (str($lookup_key)->contains('dynamic')) {
+                            $quantity = data_get($data, 'items.data.0.quantity', 2);
+                        } else {
+                            $quantity = data_get($data, 'items.data.0.quantity', 10);
+                        }
                         $team = data_get($subscription, 'team');
                         $team->update([
                             'custom_server_limit' => $quantity,
diff --git a/app/Livewire/Subscription/PricingPlans.php b/app/Livewire/Subscription/PricingPlans.php
index 3996d70d5..4e4dbadee 100644
--- a/app/Livewire/Subscription/PricingPlans.php
+++ b/app/Livewire/Subscription/PricingPlans.php
@@ -39,6 +39,12 @@ public function subscribeStripe($type)
             case 'ultimate-yearly':
                 $priceId = config('subscription.stripe_price_id_ultimate_yearly');
                 break;
+            case 'dynamic-monthly':
+                $priceId = config('subscription.stripe_price_id_dynamic_monthly');
+                break;
+            case 'dynamic-yearly':
+                $priceId = config('subscription.stripe_price_id_dynamic_yearly');
+                break;
             default:
                 $priceId = config('subscription.stripe_price_id_basic_monthly');
                 break;
@@ -72,6 +78,13 @@ public function subscribeStripe($type)
             ];
             $payload['line_items'][0]['quantity'] = 10;
         }
+        if (str($type)->contains('dynamic')) {
+            $payload['line_items'][0]['adjustable_quantity'] = [
+                'enabled' => true,
+                'minimum' => 2,
+            ];
+            $payload['line_items'][0]['quantity'] = 2;
+        }
 
         if (!data_get($team, 'subscription.stripe_trial_already_ended')) {
             if (config('constants.limits.trial_period') > 0) {
diff --git a/config/sentry.php b/config/sentry.php
index ac9f8c626..e0a923f0b 100644
--- a/config/sentry.php
+++ b/config/sentry.php
@@ -7,7 +7,7 @@
 
     // The release version of your application
     // Example with dynamic git hash: trim(exec('git --git-dir ' . base_path('.git') . ' log --pretty="%h" -n1 HEAD'))
-    'release' => '4.0.0-beta.256',
+    'release' => '4.0.0-beta.257',
     // When left empty or `null` the Laravel environment will be used
     'environment' => config('app.env'),
 
diff --git a/config/subscription.php b/config/subscription.php
index 96a9a8e1c..f8bf77ce0 100644
--- a/config/subscription.php
+++ b/config/subscription.php
@@ -20,6 +20,9 @@
     'stripe_price_id_ultimate_monthly_old' => env('STRIPE_PRICE_ID_ULTIMATE_MONTHLY_OLD', null),
     'stripe_price_id_ultimate_yearly_old' => env('STRIPE_PRICE_ID_ULTIMATE_YEARLY_OLD', null),
 
+    'stripe_price_id_dynamic_monthly' => env('STRIPE_PRICE_ID_DYNAMIC_MONTHLY', null),
+    'stripe_price_id_dynamic_yearly' => env('STRIPE_PRICE_ID_DYNAMIC_YEARLY', null),
+
     // Paddle
     'paddle_vendor_id' => env('PADDLE_VENDOR_ID', null),
     'paddle_vendor_auth_code' => env('PADDLE_VENDOR_AUTH_CODE', null),
diff --git a/config/version.php b/config/version.php
index f9a441c01..f395ea35c 100644
--- a/config/version.php
+++ b/config/version.php
@@ -1,3 +1,3 @@
 <?php
 
-return '4.0.0-beta.256';
+return '4.0.0-beta.257';
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index d09dab9e9..4e85836d2 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -58,6 +58,8 @@ services:
       - STRIPE_PRICE_ID_PRO_YEARLY
       - STRIPE_PRICE_ID_ULTIMATE_MONTHLY
       - STRIPE_PRICE_ID_ULTIMATE_YEARLY
+      - STRIPE_PRICE_ID_DYNAMIC_MONTHLY
+      - STRIPE_PRICE_ID_DYNAMIC_YEARLY
       - STRIPE_PRICE_ID_BASIC_MONTHLY_OLD
       - STRIPE_PRICE_ID_BASIC_YEARLY_OLD
       - STRIPE_PRICE_ID_PRO_MONTHLY_OLD
diff --git a/resources/views/livewire/subscription/pricing-plans-old.blade.php b/resources/views/livewire/subscription/pricing-plans-old.blade.php
new file mode 100644
index 000000000..e4a3cc762
--- /dev/null
+++ b/resources/views/livewire/subscription/pricing-plans-old.blade.php
@@ -0,0 +1,67 @@
+<x-pricing-plans>
+    @if (config('subscription.provider') === 'stripe')
+        <x-slot:basic>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('basic-monthly')">
+                {{ $isTrial ? 'Start Trial' : '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('basic-yearly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+        </x-slot:basic>
+        <x-slot:pro>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('pro-monthly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('pro-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+        </x-slot:pro>
+        <x-slot:ultimate>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('ultimate-monthly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('ultimate-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+        </x-slot:ultimate>
+    @endif
+    @if (config('subscription.provider') === 'paddle')
+        <x-paddle />
+    @endif
+    @if (config('subscription.provider') === 'lemon')
+        <x-slot:basic>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('basic-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="getSubscriptionLink('basic-yearly')"> Subscribe
+            </x-forms.button>
+        </x-slot:basic>
+        <x-slot:pro>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('pro-monthly')"> Subscribe
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
+                wire:click="getSubscriptionLink('pro-yearly')"> Subscribe
+            </x-forms.button>
+        </x-slot:pro>
+        <x-slot:ultimate>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-monthly')"> Subscribe
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-yearly')"> Subscribe
+            </x-forms.button>
+        </x-slot:ultimate>
+    @endif
+</x-pricing-plans>
diff --git a/resources/views/livewire/subscription/pricing-plans.blade.php b/resources/views/livewire/subscription/pricing-plans.blade.php
index e4a3cc762..e1a9dbfbf 100644
--- a/resources/views/livewire/subscription/pricing-plans.blade.php
+++ b/resources/views/livewire/subscription/pricing-plans.blade.php
@@ -1,67 +1,120 @@
-<x-pricing-plans>
-    @if (config('subscription.provider') === 'stripe')
-        <x-slot:basic>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('basic-monthly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
+<div x-data="{ selected: 'monthly' }" class="w-full pb-20">
+    <div class="max-w-2xl px-6 mx-auto lg:px-8">
+        <div class="flex justify-center">
+            <fieldset
+                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5">
+                <legend class="sr-only">Payment frequency</legend>
+                <label class="cursor-pointer rounded px-2.5 py-1"
+                    :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
+                    <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
+                        class="sr-only">
+                    <span>Monthly</span>
+                </label>
+                <label class="cursor-pointer rounded px-2.5 py-1"
+                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
+                    <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
+                        class="sr-only">
+                    <span>Annually</span>
+                </label>
+            </fieldset>
+        </div>
+        <div x-show="selected === 'monthly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
+            <div>Save <span class="font-bold text-black dark:text-warning">10%</span> annually with the yearly plans.
+            </div>
+        </div>
+        <div x-show="selected === 'yearly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
+            <div>
+            </div>
+        </div>
+        <div class="flow-root mt-12">
+            <div class="pb-10 text-xl text-center">For the detailed list of features, please visit our landing page: <a
+                    class="font-bold underline dark:text-white" href="https://coolify.io">coolify.io</a></div>
+            <div
+                class="grid max-w-sm grid-cols-1 -mt-16 divide-y divide-neutral-200 dark:divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-1 lg:divide-x lg:divide-y-0 xl:-mx-4">
+                <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
+                    <h3 id="tier-dynamic" class="text-4xl font-semibold leading-7 dark:text-white">Dynamic</h3>
+                    <p class="flex items-baseline mt-6 gap-x-1">
+                        <span x-show="selected === 'monthly'" x-cloak>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
+                            <span class="text-sm font-semibold leading-6 "> for the first 2 servers</span>
+                        </span>
 
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-basic" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('basic-yearly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-        </x-slot:basic>
-        <x-slot:pro>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('pro-monthly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
+                        <span x-show="selected === 'yearly'" x-cloak>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
+                            <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
+                        </span>
+                    </p>
+                    <p class="flex items-baseline gap-x-1">
+                        <span x-show="selected === 'monthly'" x-cloak>
+                            <span class="text-2xl font-bold tracking-tight dark:text-white">$3</span>
+                            <span class="text-sm font-semibold leading-6 "> for any additional</span>
+                        </span>
 
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('pro-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-        </x-slot:pro>
-        <x-slot:ultimate>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('ultimate-monthly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('ultimate-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-        </x-slot:ultimate>
-    @endif
-    @if (config('subscription.provider') === 'paddle')
-        <x-paddle />
-    @endif
-    @if (config('subscription.provider') === 'lemon')
-        <x-slot:basic>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('basic-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="getSubscriptionLink('basic-yearly')"> Subscribe
-            </x-forms.button>
-        </x-slot:basic>
-        <x-slot:pro>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('pro-monthly')"> Subscribe
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
-                wire:click="getSubscriptionLink('pro-yearly')"> Subscribe
-            </x-forms.button>
-        </x-slot:pro>
-        <x-slot:ultimate>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-monthly')"> Subscribe
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-yearly')"> Subscribe
-            </x-forms.button>
-        </x-slot:ultimate>
-    @endif
-</x-pricing-plans>
+                        <span x-show="selected === 'yearly'" x-cloak>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
+                            <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
+                        </span>
+                    </p>
+                    <span x-show="selected === 'monthly'" x-cloak>
+                        <span>billed monthly (+VAT)</span>
+                    </span>
+                    <span x-show="selected === 'yearly'" x-cloak>
+                        <span>billed annually</span>
+                    </span>
+                    <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
+                        class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-monthly')">
+                        {{ $isTrial ? 'Start Trial' : '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')">
+                        {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+                    </x-forms.button>
+                    <p class="mt-10 text-sm leading-6 dark:text-white h-[6.5rem]">Begin hosting your own services in the
+                        cloud.
+                    </p>
+                    <ul role="list" class="space-y-3 text-sm leading-6 ">
+                        <li class="flex">
+                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
+                                fill="currentColor" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.775 0 001.137-.089l4-5.5z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Connect <span class="px-1 font-bold dark:text-white">2</span> servers
+                        </li>
+                        <li class="flex gap-x-3">
+                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                                aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Included Email System
+                        </li>
+                        <li class="flex gap-x-3">
+                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                                aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Email Support
+                        </li>
+                        <li class="flex font-bold dark:text-white gap-x-3">
+                            <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
+                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path
+                                        d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
+                                    <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
+                                </g>
+                            </svg>
+                            + All upcoming features
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/versions.json b/versions.json
index 9bd13a9bf..ccb225d96 100644
--- a/versions.json
+++ b/versions.json
@@ -1,7 +1,7 @@
 {
     "coolify": {
         "v4": {
-            "version": "4.0.0-beta.256"
+            "version": "4.0.0-beta.257"
         }
     }
 }

From 7c0e8d9421e7cfefffb89b54a6b8133ec9824d8e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 12 Apr 2024 21:45:36 +0200
Subject: [PATCH 4/4] Refactor pricing plans component and update button styles

---
 resources/css/app.css                         |   2 +-
 .../subscription/pricing-plans-new.blade.php  | 120 ++++++++++++
 .../subscription/pricing-plans-old.blade.php  |  67 -------
 .../subscription/pricing-plans.blade.php      | 183 +++++++-----------
 4 files changed, 186 insertions(+), 186 deletions(-)
 create mode 100644 resources/views/livewire/subscription/pricing-plans-new.blade.php
 delete mode 100644 resources/views/livewire/subscription/pricing-plans-old.blade.php

diff --git a/resources/css/app.css b/resources/css/app.css
index 719836599..a8a55f1e8 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -271,7 +271,7 @@ .info-helper-popup {
 }
 
 .buyme {
-    @apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-sm bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
+    @apply block px-3 py-2 mt-10 text-sm font-semibold leading-6 text-center text-white rounded-md shadow-sm hover:text-white bg-coolgray-200 hover:bg-coolgray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-coolgray-200 hover:no-underline;
 }
 
 .title {
diff --git a/resources/views/livewire/subscription/pricing-plans-new.blade.php b/resources/views/livewire/subscription/pricing-plans-new.blade.php
new file mode 100644
index 000000000..e1a9dbfbf
--- /dev/null
+++ b/resources/views/livewire/subscription/pricing-plans-new.blade.php
@@ -0,0 +1,120 @@
+<div x-data="{ selected: 'monthly' }" class="w-full pb-20">
+    <div class="max-w-2xl px-6 mx-auto lg:px-8">
+        <div class="flex justify-center">
+            <fieldset
+                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5">
+                <legend class="sr-only">Payment frequency</legend>
+                <label class="cursor-pointer rounded px-2.5 py-1"
+                    :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
+                    <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
+                        class="sr-only">
+                    <span>Monthly</span>
+                </label>
+                <label class="cursor-pointer rounded px-2.5 py-1"
+                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
+                    <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
+                        class="sr-only">
+                    <span>Annually</span>
+                </label>
+            </fieldset>
+        </div>
+        <div x-show="selected === 'monthly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
+            <div>Save <span class="font-bold text-black dark:text-warning">10%</span> annually with the yearly plans.
+            </div>
+        </div>
+        <div x-show="selected === 'yearly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
+            <div>
+            </div>
+        </div>
+        <div class="flow-root mt-12">
+            <div class="pb-10 text-xl text-center">For the detailed list of features, please visit our landing page: <a
+                    class="font-bold underline dark:text-white" href="https://coolify.io">coolify.io</a></div>
+            <div
+                class="grid max-w-sm grid-cols-1 -mt-16 divide-y divide-neutral-200 dark:divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-1 lg:divide-x lg:divide-y-0 xl:-mx-4">
+                <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
+                    <h3 id="tier-dynamic" class="text-4xl font-semibold leading-7 dark:text-white">Dynamic</h3>
+                    <p class="flex items-baseline mt-6 gap-x-1">
+                        <span x-show="selected === 'monthly'" x-cloak>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
+                            <span class="text-sm font-semibold leading-6 "> for the first 2 servers</span>
+                        </span>
+
+                        <span x-show="selected === 'yearly'" x-cloak>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
+                            <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
+                        </span>
+                    </p>
+                    <p class="flex items-baseline gap-x-1">
+                        <span x-show="selected === 'monthly'" x-cloak>
+                            <span class="text-2xl font-bold tracking-tight dark:text-white">$3</span>
+                            <span class="text-sm font-semibold leading-6 "> for any additional</span>
+                        </span>
+
+                        <span x-show="selected === 'yearly'" x-cloak>
+                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
+                            <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
+                        </span>
+                    </p>
+                    <span x-show="selected === 'monthly'" x-cloak>
+                        <span>billed monthly (+VAT)</span>
+                    </span>
+                    <span x-show="selected === 'yearly'" x-cloak>
+                        <span>billed annually</span>
+                    </span>
+                    <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
+                        class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-monthly')">
+                        {{ $isTrial ? 'Start Trial' : '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')">
+                        {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+                    </x-forms.button>
+                    <p class="mt-10 text-sm leading-6 dark:text-white h-[6.5rem]">Begin hosting your own services in the
+                        cloud.
+                    </p>
+                    <ul role="list" class="space-y-3 text-sm leading-6 ">
+                        <li class="flex">
+                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
+                                fill="currentColor" aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.775 0 001.137-.089l4-5.5z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Connect <span class="px-1 font-bold dark:text-white">2</span> servers
+                        </li>
+                        <li class="flex gap-x-3">
+                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                                aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Included Email System
+                        </li>
+                        <li class="flex gap-x-3">
+                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
+                                aria-hidden="true">
+                                <path fill-rule="evenodd"
+                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Email Support
+                        </li>
+                        <li class="flex font-bold dark:text-white gap-x-3">
+                            <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
+                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path
+                                        d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
+                                    <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
+                                </g>
+                            </svg>
+                            + All upcoming features
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/livewire/subscription/pricing-plans-old.blade.php b/resources/views/livewire/subscription/pricing-plans-old.blade.php
deleted file mode 100644
index e4a3cc762..000000000
--- a/resources/views/livewire/subscription/pricing-plans-old.blade.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<x-pricing-plans>
-    @if (config('subscription.provider') === 'stripe')
-        <x-slot:basic>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('basic-monthly')">
-                {{ $isTrial ? 'Start Trial' : '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('basic-yearly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-        </x-slot:basic>
-        <x-slot:pro>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('pro-monthly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('pro-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-        </x-slot:pro>
-        <x-slot:ultimate>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('ultimate-monthly')">
-                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
-                wire:click="subscribeStripe('ultimate-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-            </x-forms.button>
-        </x-slot:ultimate>
-    @endif
-    @if (config('subscription.provider') === 'paddle')
-        <x-paddle />
-    @endif
-    @if (config('subscription.provider') === 'lemon')
-        <x-slot:basic>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('basic-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="getSubscriptionLink('basic-yearly')"> Subscribe
-            </x-forms.button>
-        </x-slot:basic>
-        <x-slot:pro>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('pro-monthly')"> Subscribe
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
-                wire:click="getSubscriptionLink('pro-yearly')"> Subscribe
-            </x-forms.button>
-        </x-slot:pro>
-        <x-slot:ultimate>
-            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-monthly')"> Subscribe
-            </x-forms.button>
-
-            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate"
-                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-yearly')"> Subscribe
-            </x-forms.button>
-        </x-slot:ultimate>
-    @endif
-</x-pricing-plans>
diff --git a/resources/views/livewire/subscription/pricing-plans.blade.php b/resources/views/livewire/subscription/pricing-plans.blade.php
index e1a9dbfbf..e4a3cc762 100644
--- a/resources/views/livewire/subscription/pricing-plans.blade.php
+++ b/resources/views/livewire/subscription/pricing-plans.blade.php
@@ -1,120 +1,67 @@
-<div x-data="{ selected: 'monthly' }" class="w-full pb-20">
-    <div class="max-w-2xl px-6 mx-auto lg:px-8">
-        <div class="flex justify-center">
-            <fieldset
-                class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded dark:text-white gap-x-1 bg-white/5">
-                <legend class="sr-only">Payment frequency</legend>
-                <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'monthly' ? 'bg-coollabs-100 text-white' : ''">
-                    <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
-                        class="sr-only">
-                    <span>Monthly</span>
-                </label>
-                <label class="cursor-pointer rounded px-2.5 py-1"
-                    :class="selected === 'yearly' ? 'bg-coollabs-100 text-white' : ''">
-                    <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
-                        class="sr-only">
-                    <span>Annually</span>
-                </label>
-            </fieldset>
-        </div>
-        <div x-show="selected === 'monthly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
-            <div>Save <span class="font-bold text-black dark:text-warning">10%</span> annually with the yearly plans.
-            </div>
-        </div>
-        <div x-show="selected === 'yearly'" class="flex justify-center h-10 mt-3 text-sm leading-6 ">
-            <div>
-            </div>
-        </div>
-        <div class="flow-root mt-12">
-            <div class="pb-10 text-xl text-center">For the detailed list of features, please visit our landing page: <a
-                    class="font-bold underline dark:text-white" href="https://coolify.io">coolify.io</a></div>
-            <div
-                class="grid max-w-sm grid-cols-1 -mt-16 divide-y divide-neutral-200 dark:divide-coolgray-500 isolate gap-y-16 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-1 lg:divide-x lg:divide-y-0 xl:-mx-4">
-                <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
-                    <h3 id="tier-dynamic" class="text-4xl font-semibold leading-7 dark:text-white">Dynamic</h3>
-                    <p class="flex items-baseline mt-6 gap-x-1">
-                        <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight dark:text-white">$5</span>
-                            <span class="text-sm font-semibold leading-6 "> for the first 2 servers</span>
-                        </span>
+<x-pricing-plans>
+    @if (config('subscription.provider') === 'stripe')
+        <x-slot:basic>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('basic-monthly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
 
-                        <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
-                            <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
-                        </span>
-                    </p>
-                    <p class="flex items-baseline gap-x-1">
-                        <span x-show="selected === 'monthly'" x-cloak>
-                            <span class="text-2xl font-bold tracking-tight dark:text-white">$3</span>
-                            <span class="text-sm font-semibold leading-6 "> for any additional</span>
-                        </span>
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-basic" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('basic-yearly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+        </x-slot:basic>
+        <x-slot:pro>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('pro-monthly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
 
-                        <span x-show="selected === 'yearly'" x-cloak>
-                            <span class="text-4xl font-bold tracking-tight dark:text-white">$4</span>
-                            <span class="text-sm font-semibold leading-6 ">/month + VAT</span>
-                        </span>
-                    </p>
-                    <span x-show="selected === 'monthly'" x-cloak>
-                        <span>billed monthly (+VAT)</span>
-                    </span>
-                    <span x-show="selected === 'yearly'" x-cloak>
-                        <span>billed annually</span>
-                    </span>
-                    <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
-                        class="w-full h-10 buyme" wire:click="subscribeStripe('dynamic-monthly')">
-                        {{ $isTrial ? 'Start Trial' : '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')">
-                        {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
-                    </x-forms.button>
-                    <p class="mt-10 text-sm leading-6 dark:text-white h-[6.5rem]">Begin hosting your own services in the
-                        cloud.
-                    </p>
-                    <ul role="list" class="space-y-3 text-sm leading-6 ">
-                        <li class="flex">
-                            <svg class="flex-none w-5 h-6 mr-3 dark:text-warning" viewBox="0 0 20 20"
-                                fill="currentColor" aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.775 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Connect <span class="px-1 font-bold dark:text-white">2</span> servers
-                        </li>
-                        <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Included Email System
-                        </li>
-                        <li class="flex gap-x-3">
-                            <svg class="flex-none w-5 h-6 dark:text-warning" viewBox="0 0 20 20" fill="currentColor"
-                                aria-hidden="true">
-                                <path fill-rule="evenodd"
-                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                                    clip-rule="evenodd" />
-                            </svg>
-                            Email Support
-                        </li>
-                        <li class="flex font-bold dark:text-white gap-x-3">
-                            <svg width="512" height="512" class="flex-none w-5 h-6 text-green-600"
-                                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                    stroke-width="2">
-                                    <path
-                                        d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3" />
-                                    <path d="M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
-                                </g>
-                            </svg>
-                            + All upcoming features
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('pro-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+        </x-slot:pro>
+        <x-slot:ultimate>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('ultimate-monthly')">
+                {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate" class="w-full h-10 buyme"
+                wire:click="subscribeStripe('ultimate-yearly')"> {{ $isTrial ? 'Start Trial' : 'Subscribe' }}
+            </x-forms.button>
+        </x-slot:ultimate>
+    @endif
+    @if (config('subscription.provider') === 'paddle')
+        <x-paddle />
+    @endif
+    @if (config('subscription.provider') === 'lemon')
+        <x-slot:basic>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-basic"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('basic-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="getSubscriptionLink('basic-yearly')"> Subscribe
+            </x-forms.button>
+        </x-slot:basic>
+        <x-slot:pro>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-pro"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('pro-monthly')"> Subscribe
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-pro" class="w-full h-10 buyme"
+                wire:click="getSubscriptionLink('pro-yearly')"> Subscribe
+            </x-forms.button>
+        </x-slot:pro>
+        <x-slot:ultimate>
+            <x-forms.button x-show="selected === 'monthly'" x-cloak aria-describedby="tier-ultimate"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-monthly')"> Subscribe
+            </x-forms.button>
+
+            <x-forms.button x-show="selected === 'yearly'" x-cloak aria-describedby="tier-ultimate"
+                class="w-full h-10 buyme" wire:click="getSubscriptionLink('ultimate-yearly')"> Subscribe
+            </x-forms.button>
+        </x-slot:ultimate>
+    @endif
+</x-pricing-plans>