added cashier subscription, subscription plans
This commit is contained in:
Gitea
43
resources/views/flux/icon/circle-x.blade.php
Normal file
43
resources/views/flux/icon/circle-x.blade.php
Normal file
@@ -0,0 +1,43 @@
|
||||
{{-- Credit: Lucide (https://lucide.dev) --}}
|
||||
|
||||
@props([
|
||||
'variant' => 'outline',
|
||||
])
|
||||
|
||||
@php
|
||||
if ($variant === 'solid') {
|
||||
throw new \Exception('The "solid" variant is not supported in Lucide.');
|
||||
}
|
||||
|
||||
$classes = Flux::classes('shrink-0')
|
||||
->add(match($variant) {
|
||||
'outline' => '[:where(&)]:size-6',
|
||||
'solid' => '[:where(&)]:size-6',
|
||||
'mini' => '[:where(&)]:size-5',
|
||||
'micro' => '[:where(&)]:size-4',
|
||||
});
|
||||
|
||||
$strokeWidth = match ($variant) {
|
||||
'outline' => 2,
|
||||
'mini' => 2.25,
|
||||
'micro' => 2.5,
|
||||
};
|
||||
@endphp
|
||||
|
||||
<svg
|
||||
{{ $attributes->class($classes) }}
|
||||
data-flux-icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="{{ $strokeWidth }}"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
data-slot="icon"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="m15 9-6 6" />
|
||||
<path d="m9 9 6 6" />
|
||||
</svg>
|
||||
@@ -1,19 +1,11 @@
|
||||
@section('title'){{ __('Dashboard') }}@endsection
|
||||
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
||||
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
||||
<div class="grid auto-rows-min gap-4 md:grid-cols-2">
|
||||
|
||||
|
||||
|
||||
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<span class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
|
||||
<flux:icon.circle-dollar-sign />
|
||||
</span>
|
||||
<div>
|
||||
<p class="text-2xl font-medium text-gray-900 dark:text-white">0</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Balance</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<span class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
|
||||
<span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
|
||||
<flux:icon.at-sign />
|
||||
</span>
|
||||
<div>
|
||||
@@ -23,7 +15,7 @@
|
||||
</article>
|
||||
|
||||
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<span class="rounded-full bg-blue-100 p-3 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400">
|
||||
<span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
|
||||
<flux:icon.mails />
|
||||
</span>
|
||||
<div>
|
||||
@@ -34,7 +26,35 @@
|
||||
|
||||
|
||||
</div>
|
||||
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
@if(auth()->user()->subscribedToProduct(config('app.plans')[0]['product_id']))
|
||||
|
||||
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Your <span class="text-accent-content font-bold">{{ $subscription['name'] }}</span> subscription is active and will be
|
||||
@if($subscription['ends_at']) end at<span class="app-primary"> {{ \Carbon\Carbon::make($subscription['ends_at'])->toFormattedDayDateString() }}.</span>
|
||||
@else auto-renew as per the plan you chose.
|
||||
@endif
|
||||
To manage you subscription <a href="{{ route('billing') }}" target="_blank" class="text-blue-500">Click here</a></p>
|
||||
</div>
|
||||
</article>
|
||||
@else
|
||||
<div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]">
|
||||
<livewire:dashboard.pricing />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Check if session flash data exists
|
||||
@if(session()->has('alert'))
|
||||
setTimeout(function() {
|
||||
// Emitting showAlert event with type and message from session
|
||||
Livewire.emit('showAlert', {
|
||||
type: '{{ session('alert')['type'] }}',
|
||||
message: '{{ session('alert')['message'] }}'
|
||||
});
|
||||
}, 2000); // 2000ms = 2 seconds delay
|
||||
@endif
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
46
resources/views/livewire/dashboard/pricing.blade.php
Normal file
46
resources/views/livewire/dashboard/pricing.blade.php
Normal file
@@ -0,0 +1,46 @@
|
||||
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 ">
|
||||
<div class="w-full mb-8 items-center flex justify-center">
|
||||
<h1 class="text-center text-3xl text-gray-900 dark:text-gray-200">Purchase Subscription</h1>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:items-center md:gap-8">
|
||||
|
||||
@if(isset($plans))
|
||||
@foreach($plans as $plan)
|
||||
<div class="rounded-2xl border dark:border-white/[0.1] border-black/[0.3] p-6 shadow-xs ring-1 ring-white/[0.5] sm:px-8 lg:p-12">
|
||||
<div class="text-center">
|
||||
<h2 class="text-lg font-medium text-gray-900 dark:text-gray-400">{{ $plan->name }} @if(!$plan->monthly_billing)
|
||||
<flux:badge variant="solid" size="sm" color="emerald">2 Months Free</flux:badge>
|
||||
@endif</h2>
|
||||
|
||||
<p class="mt-2 sm:mt-4">
|
||||
<strong class="text-3xl font-bold text-gray-900 dark:text-gray-200 sm:text-4xl">${{ $plan->price }}</strong>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-400">/{{ $plan->monthly_billing ? 'month' : 'year' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="mt-6 space-y-2">
|
||||
|
||||
@if($plan->details)
|
||||
@forelse ($plan->details as $key => $value)
|
||||
@if ($value)
|
||||
<li class="flex items-center gap-1">
|
||||
@if($value == "true")<flux:icon.check-circle />
|
||||
@else <flux:icon.circle-x />
|
||||
@endif
|
||||
<span class="text-gray-700 dark:text-gray-400 "> {{ $key }} </span>
|
||||
</li>
|
||||
@endif
|
||||
@empty
|
||||
@endforelse
|
||||
@endif
|
||||
</ul>
|
||||
|
||||
<flux:button variant="primary" class="w-full mt-6 cursor-pointer" wire:click="choosePlan('{{ $plan->pricing_id }}')">
|
||||
Choose Plan
|
||||
</flux:button>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user