Show consolidated prepaid totals on plan pricing cards.

When 6/12/24 month Paystack is selected, Pro and Business prices display the full term amount instead of /mo.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/components/plan-tier-price.blade.php

@@ -0,0 +1,23 @@
+@props([
+    'currency' => 'GHS',
+    'monthlyMinor' => 0,
+    'prepaidMinor' => null,
+    'monthlyDisplay' => null,
+    'monthlySuffix' => '/mo',
+    'dark' => false,
+])
+
+@php
+    $prepaidBase = (int) ($prepaidMinor ?? $monthlyMinor);
+    $monthlyFormatted = $monthlyDisplay ?? number_format((int) $monthlyMinor / 100, 0);
+    $muted = $dark ? 'text-slate-300' : 'text-slate-500';
+    $text = $dark ? 'text-white' : 'text-slate-900';
+@endphp
+
+<p {{ $attributes->merge(['class' => "mt-2 text-3xl font-bold {$text}"]) }}>
+    <span x-show="billing === 'monthly'">{{ $currency }} {{ $monthlyFormatted }}<span class="text-base font-medium {{ $muted }}">{{ $monthlySuffix }}</span></span>
+    <span x-show="billing !== 'monthly'" x-cloak>
+        <span x-text="'{{ $currency }} ' + ({{ $prepaidBase }} * billing / 100).toLocaleString()"></span>
+        <span class="block text-base font-medium {{ $muted }}" x-text="'for ' + billing + ' months'"></span>
+    </span>
+</p>

resources/views/pos/pro/index.blade.php

@@ -58,7 +58,7 @@
 
             <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 {{ $planKey === 'pro' ? 'ring-2 ring-indigo-500' : '' }}">
                 <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600">Pro</p>
-                <p class="mt-2 text-3xl font-bold text-slate-900">{{ $currency }} {{ $proPrice }}<span class="text-base font-medium text-slate-500">/mo</span></p>
+                <x-plan-tier-price :currency="$currency" :monthly-minor="$proPriceMinor" />
                 <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-700">
                     <li>Unlimited products</li>
                     <li>Restaurant mode</li>
@@ -78,7 +78,7 @@
 
             <div class="flex flex-col rounded-2xl border border-slate-200 bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-white {{ $planKey === 'enterprise' ? 'ring-2 ring-amber-400' : '' }}">
                 <p class="text-xs font-semibold uppercase tracking-wide text-amber-300">Business</p>
-                <p class="mt-2 text-3xl font-bold">{{ $currency }} {{ $enterprisePrice }}<span class="text-base font-medium text-slate-300">/mo</span></p>
+                <x-plan-tier-price :currency="$currency" :monthly-minor="$enterprisePriceMinor" dark />
                 <ul class="mt-5 flex-1 space-y-2 text-sm text-slate-200">
                     <li>Everything in Pro</li>
                     <li>Multi-location</li>