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.

packages/billing/gateway/src/components/billing-session-status.tsx

@@ -1,7 +1,3 @@
-'use client';
-
-import Link from 'next/link';
-
 import { Check, ChevronRight } from 'lucide-react';
 
 import { Button } from '@kit/ui/button';
@@ -12,33 +8,13 @@ import { Trans } from '@kit/ui/trans';
  * Retrieves the session status for a Stripe checkout session.
  * Since we should only arrive here for a successful checkout, we only check
  * for the `paid` status.
- *
- * @param {Stripe.Checkout.Session['status']} status - The status of the Stripe checkout session.
- * @param {string} customerEmail - The email address of the customer associated with the session.
- *
- * @returns {ReactElement} - The component to render based on the session status.
- */
+ **/
 export function BillingSessionStatus({
   customerEmail,
-  redirectPath,
+  onRedirect,
 }: React.PropsWithChildren<{
   customerEmail: string;
-  redirectPath: string;
-}>) {
-  return (
-    <SuccessSessionStatus
-      redirectPath={redirectPath}
-      customerEmail={customerEmail}
-    />
-  );
-}
-
-function SuccessSessionStatus({
-  customerEmail,
-  redirectPath,
-}: React.PropsWithChildren<{
-  customerEmail: string;
-  redirectPath: string;
+  onRedirect: () => void;
 }>) {
   return (
     <section
@@ -78,15 +54,15 @@ function SuccessSessionStatus({
           </p>
         </div>
 
-        <Link data-test={'checkout-success-back-link'} href={redirectPath}>
-          <Button>
+        <form data-test={'checkout-success-back-link'}>
+          <Button formAction={onRedirect}>
             <span>
               <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
             </span>
 
             <ChevronRight className={'h-4'} />
           </Button>
-        </Link>
+        </form>
       </div>
     </section>
   );

packages/billing/gateway/src/components/plan-picker.tsx

@@ -288,7 +288,7 @@ export function PlanPicker(
                             >
                               <If
                                 condition={
-                                  plan.trialPeriod && props.canStartTrial
+                                  plan.trialDays && props.canStartTrial
                                 }
                               >
                                 <div>
@@ -296,7 +296,7 @@ export function PlanPicker(
                                     <Trans
                                       i18nKey={`billing:trialPeriod`}
                                       values={{
-                                        period: plan.trialPeriod,
+                                        period: plan.trialDays,
                                       }}
                                     />
                                   </Badge>
@@ -356,7 +356,7 @@ export function PlanPicker(
               ) : (
                 <>
                   <If
-                    condition={selectedPlan?.trialPeriod && props.canStartTrial}
+                    condition={selectedPlan?.trialDays && props.canStartTrial}
                     fallback={t(`proceedToPayment`)}
                   >
                     <span>{t(`startTrial`)}</span>