Update UI, improve E2E tests and modify trial period configuration

The code changes incorporate UI updates for better usability and user experience. E2E test scripts(in `user-billing.spec.ts` and `team-billing.spec.ts`) were also updated for improved efficiency and accuracy, primarily replacing 'Active' status check with 'Trial'. Changes have been made in the trialDays configuration, with the term 'trialPeriod' now replaced by 'trialDays' across different components. Notably, a new error handling case is included in `lemon-squeezy-billing-strategy.service.ts` for failed subscription cancellation attempts.

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -8,6 +8,7 @@ import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
 
 import { createBillingPortalSession } from '~/(dashboard)/home/[account]/billing/server-actions';
 import billingConfig from '~/config/billing.config';
@@ -75,13 +76,17 @@ async function TeamAccountBillingPage({ params }: Params) {
       />
 
       <PageBody>
-        <div className={'mx-auto flex w-full max-w-2xl flex-col space-y-6'}>
+        <div
+          className={cn(`flex w-full flex-col space-y-6`, {
+            'mx-auto max-w-2xl ': subscription,
+          })}
+        >
           <If
             condition={subscription}
             fallback={
-              <>
+              <div>
                 <Checkout />
-              </>
+              </div>
             }
           >
             {(subscription) => (

apps/web/app/(dashboard)/home/[account]/billing/return/page.tsx

@@ -1,3 +1,4 @@
+import { revalidatePath } from 'next/cache';
 import dynamic from 'next/dynamic';
 import { notFound, redirect } from 'next/navigation';
 
@@ -7,17 +8,12 @@ import { requireUser } from '@kit/supabase/require-user';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
 import billingConfig from '~/config/billing.config';
-import pathsConfig from '~/config/paths.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 interface SessionPageProps {
   searchParams: {
     session_id: string;
   };
-
-  params: {
-    account: string;
-  };
 }
 
 const LazyEmbeddedCheckout = dynamic(
@@ -31,10 +27,7 @@ const LazyEmbeddedCheckout = dynamic(
   },
 );
 
-async function ReturnCheckoutSessionPage({
-  searchParams,
-  params,
-}: SessionPageProps) {
+async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
   const sessionId = searchParams.session_id;
 
   if (!sessionId) {
@@ -52,17 +45,12 @@ async function ReturnCheckoutSessionPage({
     );
   }
 
-  const redirectPath = pathsConfig.app.accountHome.replace(
-    '[account]',
-    params.account,
-  );
-
   return (
     <>
       <div className={'fixed left-0 top-48 z-50 mx-auto w-full'}>
         <BillingSessionStatus
+          onRedirect={onRedirect}
           customerEmail={customerEmail ?? ''}
-          redirectPath={redirectPath}
         />
       </div>
 
@@ -106,3 +94,15 @@ async function loadCheckoutSession(sessionId: string) {
     checkoutToken,
   };
 }
+
+// eslint-disable-next-line @typescript-eslint/require-await
+async function onRedirect() {
+  'use server';
+
+  // revalidate the home page to update cached pages
+  // which may have changed due to the billing session
+  revalidatePath('/home', 'layout');
+
+  // redirect back
+  redirect('../');
+}