add trial expiry day countdown to billing banner

resources/js/Components/Billing/BillingBanner.vue

@@ -8,6 +8,7 @@ import {
 import { Link } from '@inertiajs/vue3';
 import { computed } from 'vue';
 import {
+    daysLeftInTrial,
     isBillingActivated,
     isBlocked,
     isFreePlan,
@@ -45,7 +46,9 @@ const showFreeUpgradeBanner = computed(
         <MainContainer class="flex items-center justify-between">
             <div class="flex items-center space-x-1.5">
                 <CheckBadgeIcon class="w-4 text-white/50"></CheckBadgeIcon>
-                <span class="font-medium"> Your trial expires in X days. </span>
+                <span class="font-medium">
+                    Your trial expires in {{ daysLeftInTrial() }} days.
+                </span>
                 <span>
                     To continue using all features & support the development of
                     solidtime, please upgrade your plan.

resources/js/utils/billing.ts

@@ -1,4 +1,5 @@
 import { usePage } from '@inertiajs/vue3';
+import { getDayJsInstance } from '@/packages/ui/src/utils/time';
 
 export function isBillingActivated() {
     const page = usePage<{
@@ -17,6 +18,22 @@ export function isInTrial() {
 
     return page.props.billing.has_trial;
 }
+
+export function daysLeftInTrial() {
+    const page = usePage<{
+        billing: {
+            trial_until: string;
+        };
+    }>();
+
+    return (
+        getDayJsInstance()(page.props.billing.trial_until).diff(
+            getDayJsInstance()(),
+            'days'
+        ) + 1
+    );
+}
+
 export function isBlocked() {
     const page = usePage<{
         billing: {