Snyk report fixes + offcanvas sidebar fix (#263)

Refactor:
- Improved consistency and robustness by standardizing file encoding arguments from 'utf-8' to 'utf8' across various file read/write operations.
- Simplified status mapping logic in billing components and services by replacing switch statements with direct mapping objects for clearer and more maintainable code.
- Enhanced type conversion and error handling in billing and internationalization components for improved reliability.
- Updated sorting logic in team member tables for more predictable member ordering.
- Improved error logging with sanitized output to prevent formatting issues.
- Adjusted environment variable whitelisting to use a more flexible matching pattern.
- Fix variables for sidebar style handling

Style:
- Refined spacing and layout in account selector and sidebar header components for better visual consistency.

packages/billing/gateway/src/components/current-plan-alert.tsx

@@ -2,43 +2,27 @@ import { Enums } from '@kit/supabase/database';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { Trans } from '@kit/ui/trans';
 
+const statusBadgeMap: Record<Enums<'subscription_status'>, `success` | `destructive` | `warning`> = {
+  active: 'success',
+  trialing: 'success',
+  past_due: 'destructive',
+  canceled: 'destructive',
+  unpaid: 'destructive',
+  incomplete: 'warning',
+  incomplete_expired: 'destructive',
+  paused: 'warning',
+};
+
 export function CurrentPlanAlert(
   props: React.PropsWithoutRef<{
     status: Enums<'subscription_status'>;
   }>,
 ) {
-  let variant: 'success' | 'warning' | 'destructive';
   const prefix = 'billing:status';
 
   const text = `${prefix}.${props.status}.description`;
   const title = `${prefix}.${props.status}.heading`;
-
-  switch (props.status) {
-    case 'active':
-      variant = 'success';
-      break;
-    case 'trialing':
-      variant = 'success';
-      break;
-    case 'past_due':
-      variant = 'destructive';
-      break;
-    case 'canceled':
-      variant = 'destructive';
-      break;
-    case 'unpaid':
-      variant = 'destructive';
-      break;
-    case 'incomplete':
-      variant = 'warning';
-      break;
-    case 'incomplete_expired':
-      variant = 'destructive';
-      break;
-    case 'paused':
-      variant = 'warning';
-      break;
-  }
+  const variant = statusBadgeMap[props.status];
 
   return (
     <Alert variant={variant}>
@@ -51,4 +35,4 @@ export function CurrentPlanAlert(
       </AlertDescription>
     </Alert>
   );
-}
+}

packages/billing/gateway/src/components/current-plan-badge.tsx

@@ -4,43 +4,27 @@ import { Trans } from '@kit/ui/trans';
 
 type Status = Enums<'subscription_status'> | Enums<'payment_status'>;
 
+const statusBadgeMap: Record<Status, `success` | `destructive` | `warning`> = {
+  active: 'success',
+  succeeded: 'success',
+  trialing: 'success',
+  past_due: 'destructive',
+  failed: 'destructive',
+  canceled: 'destructive',
+  unpaid: 'destructive',
+  incomplete: 'warning',
+  pending: 'warning',
+  incomplete_expired: 'destructive',
+  paused: 'warning',
+}
+
 export function CurrentPlanBadge(
   props: React.PropsWithoutRef<{
     status: Status;
   }>,
 ) {
-  let variant: 'success' | 'warning' | 'destructive';
   const text = `billing:status.${props.status}.badge`;
-
-  switch (props.status) {
-    case 'active':
-    case 'succeeded':
-      variant = 'success';
-      break;
-    case 'trialing':
-      variant = 'success';
-      break;
-    case 'past_due':
-    case 'failed':
-      variant = 'destructive';
-      break;
-    case 'canceled':
-      variant = 'destructive';
-      break;
-    case 'unpaid':
-      variant = 'destructive';
-      break;
-    case 'incomplete':
-    case 'pending':
-      variant = 'warning';
-      break;
-    case 'incomplete_expired':
-      variant = 'destructive';
-      break;
-    case 'paused':
-      variant = 'warning';
-      break;
-  }
+  const variant = statusBadgeMap[props.status];
 
   return (
     <Badge data-test={'current-plan-card-status-badge'} variant={variant}>

packages/billing/gateway/src/components/line-item-details.tsx

@@ -258,7 +258,7 @@ function Tiers({
                 i18nKey={'billing:andAbove'}
                 values={{
                   unit,
-                  previousTier: (previousTierFrom as number) - 1,
+                  previousTier: (Number(previousTierFrom) as number) - 1,
                 }}
               />
             </span>