Adding latest updates to the themes and billing fixes

config/wave.php

@@ -19,7 +19,7 @@
 		'min_password_length' => 5,
 	],
 
-	'primary_color' => '#0069ff',
+	'primary_color' => '#000000',
 
 	'user_model' => \App\Models\User::class,
 	'show_docs' => env('WAVE_DOCS', true),

public/build/manifest.json

@@ -1,11 +1,11 @@
 {
   "resources/css/filament/admin/theme.css": {
-    "file": "assets/theme-DEp2EyQr.css",
+    "file": "assets/theme-CgejNvRn.css",
     "src": "resources/css/filament/admin/theme.css",
     "isEntry": true
   },
   "resources/themes/anchor/assets/css/app.css": {
-    "file": "assets/app-BvJ2NiEg.css",
+    "file": "assets/app-BTJ8dSUm.css",
     "src": "resources/themes/anchor/assets/css/app.css",
     "isEntry": true
   },

resources/themes/anchor/components/marketing/sections/pricing.blade.php

@@ -5,7 +5,7 @@
         description="Set sail and discover the riches of our value-packed plans, meticulously designed to offer you the very best features for less on your SaaS expedition. " 
     />
 
-    <div x-data="{ on: false, billing: 'Monthly', basic: {'Monthly' : '19', 'Yearly' : '180'}, pro: {'Monthly' : '49', 'Yearly' : '450' },
+    <div x-data="{ on: false, billing: '{{ get_default_billing_cycle() }}',
             toggleRepositionMarker(toggleButton){
                 this.$refs.marker.style.width=toggleButton.offsetWidth + 'px';
                 this.$refs.marker.style.height=toggleButton.offsetHeight + 'px';
@@ -21,30 +21,35 @@
                     }, 10); 
                 }, 1);
         "
-        class="mx-auto mb-2 mt-12 md:my-12 w-full max-w-6xl" x-cloak>
+        class="w-full max-w-6xl mx-auto mt-12 mb-2 md:my-12" x-cloak>
 
-        <div class="flex relative justify-start md:justify-center items-center pb-5 -translate-y-2">
-            <div class="inline-flex relative justify-center items-center p-1 md:mx-auto w-auto text-center rounded-full border-2 border-zinc-900 -translate-y-3">
-                <div x-ref="monthly" x-on:click="billing='Monthly'; toggleRepositionMarker($el)" :class="{ 'text-white': billing == 'Monthly' }" class="relative z-20 px-3.5 py-1 text-sm font-medium leading-6 text-zinc-900 rounded-full duration-300 ease-out cursor-pointer">
-                    Monthly
-                </div>
-                <div x-ref="yearly" x-on:click="billing='Yearly'; toggleRepositionMarker($el)" :class="{ 'text-white': billing == 'Yearly' }" class="relative z-20 px-3.5 py-1 text-sm font-medium leading-6 text-zinc-900 rounded-full duration-300 ease-out cursor-pointer">
-                    Yearly
-                </div>
-                <div x-ref="marker" class="absolute left-0 z-10 w-1/2 h-full opacity-0" x-cloak>
-                    <div class="w-full h-full bg-zinc-900 rounded-full shadow-sm"></div>
-                </div>
-            </div>  
-        </div>
+        @if(has_monthly_yearly_toggle())
+            <div class="relative flex items-center justify-start pb-5 -translate-y-2 md:justify-center">
+                <div class="relative inline-flex items-center justify-center w-auto p-1 text-center -translate-y-3 border-2 rounded-full md:mx-auto border-zinc-900">
+                    <div x-ref="monthly" x-on:click="billing='Monthly'; toggleRepositionMarker($el)" :class="{ 'text-white': billing == 'Monthly', 'text-zinc-900' : billing != 'Monthly' }" class="relative z-20 px-3.5 py-1 text-sm font-medium leading-6 rounded-full duration-300 ease-out cursor-pointer">
+                        Monthly
+                    </div>
+                    <div x-ref="yearly" x-on:click="billing='Yearly'; toggleRepositionMarker($el)" :class="{ 'text-white': billing == 'Yearly', 'text-zinc-900' : billing != 'Yearly' }" class="relative z-20 px-3.5 py-1 text-sm font-medium leading-6 rounded-full duration-300 ease-out cursor-pointer">
+                        Yearly
+                    </div>
+                    <div x-ref="marker" class="absolute left-0 z-10 w-1/2 h-full opacity-0" x-cloak>
+                        <div class="w-full h-full rounded-full shadow-sm bg-zinc-900"></div>
+                    </div>
+                </div>  
+            </div>
+        @endif
 
-        <div class="flex-col flex lg:flex-row flex-wrap lg:space-x-5">
+        <div class="flex flex-col flex-wrap lg:flex-row lg:space-x-5">
 
             @foreach(Wave\Plan::where('active', 1)->get() as $plan)
                 @php $features = explode(',', $plan->features); @endphp
-                <div class="flex-1 px-0 mx-auto mb-6 w-full md:max-w-md lg:mb-0">
-                    <div class="flex flex-col md:mb-10 h-full bg-white rounded-xl border-2  @if($plan->default){{ 'border-zinc-900 lg:scale-105' }}@else{{ 'border-zinc-200' }}@endif shadow-sm sm:mb-0">
+                <div
+                    {{--  Say that you have a monthly plan that doesn't have a yearly plan, in that case we will hide the place that doesn't have a price_id --}}
+                    x-show="(billing == 'Monthly' && '{{ $plan->monthly_price_id }}' != '') || (billing == 'Yearly' && '{{ $plan->yearly_price_id }}' != '')" 
+                    class="flex-1 w-full px-0 mx-auto mb-6 md:max-w-lg lg:mb-0" x-cloak>
+                    <div class="flex flex-col lg:mb-10 h-full bg-white rounded-xl border-2  @if($plan->default){{ 'border-zinc-900 lg:scale-105' }}@else{{ 'border-zinc-200' }}@endif shadow-sm sm:mb-0">
                         <div class="px-8 pt-8">
-                            <span class="px-4 py-1 text-base font-medium text-white bg-zinc-900 rounded-full text-uppercase" data-primary="indigo-700">
+                            <span class="px-4 py-1 text-base font-medium text-white rounded-full bg-zinc-900 text-uppercase" data-primary="indigo-700">
                                 {{ $plan->name }}
                             </span>
                         </div>
@@ -63,7 +68,7 @@ class="mx-auto mb-2 mt-12 md:my-12 w-full max-w-6xl" x-cloak>
                                 @foreach($features as $feature)
                                     <li class="mt-1">
                                         <span class="flex items-center text-green-500">
-                                            <svg class="mr-3 w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path></svg>
+                                            <svg class="w-4 h-4 mr-3 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path></svg>
                                             <span class="text-zinc-700">
                                                 {{ $feature }}
                                             </span>
@@ -84,5 +89,5 @@ class="mx-auto mb-2 mt-12 md:my-12 w-full max-w-6xl" x-cloak>
         </div>
     </div>
 
-    <p class="mb-8 mt-0 w-full text-zinc-500 sm:my-10 text-center">All plans are fully configurable in the Admin Area.</p>
+    <p class="w-full mt-0 mb-8 text-center text-zinc-500 sm:my-10">All plans are fully configurable in the Admin Area.</p>
 </section>

resources/themes/anchor/pages/settings/subscription.blade.php

@@ -53,8 +53,10 @@ public function mount(): void
                     @notsubscriber
                         <div class="mb-4">
                             <x-app.alert id="no_subscriptions" :dismissable="false" type="info">
-                                <x-phosphor-shopping-bag-open-duotone class="flex-shrink-0 mr-1.5 -ml-1.5 w-6 h-6" />
-                                <span>No active subscriptions found. Please select a plan below.</span>
+                                <div class="flex items-center space-x-1.5">
+                                    <x-phosphor-shopping-bag-open-duotone class="flex-shrink-0 mr-1.5 -ml-1.5 w-6 h-6" />
+                                    <span>No active subscriptions found. Please select a plan below.</span>
+                                </div>
                             </x-app.alert>
                         </div>
                         <livewire:billing.checkout />

resources/views/filament/pages/themes.blade.php

@@ -8,7 +8,6 @@
 
             <div class="grid grid-cols-1 gap-5 xl:grid-cols-3 md:grid-cols-2">
                 @foreach($themes as $theme)
-
                     <div class="overflow-hidden border rounded-md border-neutral-200 dark:border-neutral-700">
                         <img class="relative" src="{{ url('wave/theme/image' ) }}/{{ $theme->folder }}">
                         <div class="flex items-center justify-between flex-shrink-0 w-full p-4 border-t border-neutral-200 dark:border-neutral-700">
@@ -17,7 +16,7 @@
                                 <p class="text-xs text-zinc-500">@if(isset($theme->version)){{ 'version ' . $theme->version }}@endif</p>
                             </div>
                             <div class="relative flex items-center space-x-1">
-                                <button wire:click="deleteTheme('{{ $theme->folder }}')" wire:confirm="Are you sure you want to delete {{ $theme->name }}?" class="flex items-center justify-center w-8 h-8 border rounded-md border-zinc-200 hover:bg-zinc-200">
+                                <button wire:click="deleteTheme('{{ $theme->folder }}')" wire:confirm="Are you sure you want to delete {{ $theme->name }}?" class="flex items-center justify-center w-8 h-8 border rounded-md border-zinc-200 dark:border-zinc-700 dark:hover:bg-zinc-800 hover:bg-zinc-200">
                                     <x-phosphor-trash-bold class="w-4 h-4 text-red-500" />
                                 </button>
                             </div>

wave/resources/views/components/billing/billing_cycle_toggle.blade.php

@@ -9,15 +9,15 @@
         }, 1);
     "
     @reposition-interval-marker.window="toggleRepositionMarker($refs.monthly);"
-    class="relative mb-5 w-40"
+    class="relative w-40 mb-5"
     x-cloak>
-    <div x-ref="toggleButtons" class="inline-grid relative grid-cols-2 justify-center items-center p-1 w-full h-10 bg-white rounded-full ring-1 ring-gray-200 shadow-sm select-none">
+    <div x-ref="toggleButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-2 p-1 bg-white rounded-full shadow-sm select-none dark:bg-neutral-800 ring-1 ring-gray-200 dark:ring-neutral-700">
         <button x-ref="monthly" @click="toggleButtonClicked($el, 'month');" type="button"
-            :class="{ 'text-white' : billing_cycle_selected == 'month', 'text-gray-500' : billing_cycle_selected != 'month' }"
-            class="inline-flex relative z-20 justify-center items-center px-3 w-full h-8 text-xs font-semibold whitespace-nowrap transition-all cursor-pointer">Monthly</button>
+            :class="{ 'text-white' : billing_cycle_selected == 'month', 'text-gray-500 dark:text-neutral-400' : billing_cycle_selected != 'month' }"
+            class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-xs font-semibold transition-all cursor-pointer whitespace-nowrap">Monthly</button>
         <button x-ref="yearly" @click="toggleButtonClicked($el, 'year');" type="button" 
-            :class="{ 'text-white' : billing_cycle_selected == 'year', 'text-gray-500' : billing_cycle_selected != 'year' }"
-            class="inline-flex relative z-20 justify-center items-center px-3 w-full h-8 text-xs font-semibold whitespace-nowrap rounded-md transition-all cursor-pointer">Yearly</button>
+            :class="{ 'text-white' : billing_cycle_selected == 'year', 'text-gray-500 dark:text-neutral-400' : billing_cycle_selected != 'year' }"
+            class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-xs font-semibold transition-all rounded-md cursor-pointer whitespace-nowrap">Yearly</button>
         <div x-ref="marker" class="absolute left-0 z-10 w-1/2 h-full opacity-0" x-cloak>
             <div @class([
                 'w-full h-full rounded-full shadow-sm',