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.
This commit is contained in:
Giancarlo Buomprisco
2025-06-01 19:10:39 +07:00
committed by GitHub
parent cb80e4fdcf
commit fc2fda595a
18 changed files with 72 additions and 116 deletions

View File

@@ -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>
);
}
}

View File

@@ -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}>

View File

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

View File

@@ -1,4 +1,3 @@
import { BillingConfig } from '@kit/billing';
import { UpsertSubscriptionParams } from '@kit/billing/types';
type SubscriptionStatus =
@@ -23,8 +22,6 @@ export function createLemonSqueezySubscriptionPayloadBuilderService() {
* @description This class is used to build the subscription payload for Lemon Squeezy
*/
class LemonSqueezySubscriptionPayloadBuilderService {
private config?: BillingConfig;
/**
* @name build
* @description Build the subscription payload for Lemon Squeezy
@@ -103,24 +100,18 @@ class LemonSqueezySubscriptionPayloadBuilderService {
}
private getSubscriptionStatus(status: SubscriptionStatus) {
switch (status) {
case 'active':
return 'active';
case 'cancelled':
return 'canceled';
case 'paused':
return 'paused';
case 'on_trial':
return 'trialing';
case 'past_due':
return 'past_due';
case 'unpaid':
return 'unpaid';
case 'expired':
return 'past_due';
default:
return 'active';
}
const statusMap = {
active: 'active',
cancelled: 'canceled',
paused: 'paused',
on_trial: 'trialing',
past_due: 'past_due',
unpaid: 'unpaid',
expired: 'past_due',
} satisfies Record<SubscriptionStatus, UpsertSubscriptionParams['status']>;
// Default to 'active' if status is unknown
return statusMap[status] || 'active';
}
}

View File

@@ -447,19 +447,16 @@ export class LemonSqueezyWebhookHandlerService
return type;
}
private getOrderStatus(status: OrderStatus) {
switch (status) {
case 'paid':
return 'succeeded';
case 'pending':
return 'pending';
case 'failed':
return 'failed';
case 'refunded':
return 'failed';
default:
return 'pending';
}
const statusMap = {
paid: 'succeeded',
pending: 'pending',
failed: 'failed',
refunded: 'failed',
} satisfies Record<OrderStatus, UpsertOrderParams['status']>
return statusMap[status] ?? 'pending';
}
}

View File

@@ -100,7 +100,7 @@ export function AccountSelector({
role="combobox"
aria-expanded={open}
className={cn(
'dark:shadow-primary/10 group w-full min-w-0 px-2 lg:w-auto lg:max-w-fit',
'dark:shadow-primary/10 group w-full min-w-0 px-2 lg:w-auto lg:max-w-fit mr-1',
{
'justify-start': !collapsed,
'm-auto justify-center px-2 lg:w-full': collapsed,
@@ -114,7 +114,7 @@ export function AccountSelector({
<span
className={cn('flex max-w-full items-center', {
'justify-center gap-x-0': collapsed,
'gap-x-4': !collapsed,
'gap-x-2': !collapsed,
})}
>
<PersonalAccountAvatar />
@@ -133,7 +133,7 @@ export function AccountSelector({
<span
className={cn('flex max-w-full items-center', {
'justify-center gap-x-0': collapsed,
'gap-x-4': !collapsed,
'gap-x-2': !collapsed,
})}
>
<Avatar className={'rounded-xs h-6 w-6'}>
@@ -158,7 +158,7 @@ export function AccountSelector({
</If>
<CaretSortIcon
className={cn('ml-2 h-4 w-4 shrink-0 opacity-50', {
className={cn('ml-1 h-4 w-4 shrink-0 opacity-50', {
hidden: collapsed,
})}
/>

View File

@@ -92,7 +92,7 @@ export function AccountMembersTable({
})
.sort((prev, next) => {
if (prev.primary_owner_user_id === prev.user_id) {
return -1;
return 0;
}
if (prev.role_hierarchy_level < next.role_hierarchy_level) {

View File

@@ -128,7 +128,7 @@ export function parseAcceptLanguageHeader(
const trimmedLocale = locale.trim();
const numQ = Number(q.replace(/q ?=/, ''));
return [isNaN(numQ) ? 0 : numQ, trimmedLocale];
return [Number.isNaN(numQ) ? 0 : numQ, trimmedLocale];
})
.sort(([q1], [q2]) => q2 - q1) // Sort by quality value in descending order
.flatMap(([_, locale]) => {

View File

@@ -244,7 +244,7 @@ function onError({
console.error(
{
error,
error: JSON.stringify(error).replace(/["\\]/g, '\\$&'),
name: `auth.callback`,
},
`An error occurred while signing user in`,

View File

@@ -392,7 +392,7 @@ const SidebarHeader: React.FC<React.ComponentPropsWithRef<'div'>> = ({
return (
<div
data-sidebar="header"
className={cn('flex flex-col gap-2 p-2', className)}
className={cn('flex flex-col gap-2 p-2 group-data-[state=collapsed]:group-data-[collapsible=offcanvas]:hidden', className)}
{...props}
/>
);