zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove admin functionality related code

Browse Source 
The admin functionality related code has been removed which includes various user and organization functionalities like delete, update, ban etc. This includes action logic, UI components and supportive utility functions. Notable deletions include the server action files, dialog components for actions like banning and deleting, and related utility functions. This massive cleanup is aimed at simplifying the codebase and the commit reflects adherence to project restructuring.
This commit is contained in:
giancarlo
2024-03-25 15:40:43 +08:00
parent 752259ab17
commit 95793c42b4
135 changed files with 1062 additions and 2872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
packages/billing-gateway/src/components/billing-session-status.tsx Normal file
View File

@@ -0,0 +1,97 @@
'use client';
import Link from 'next/link';
import { CheckIcon, ChevronRightIcon } from 'lucide-react';
import { Button } from '@kit/ui/button';
import { Heading } from '@kit/ui/heading';
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,
}: React.PropsWithChildren<{
customerEmail: string;
redirectPath: string;
}>) {
return (
<SuccessSessionStatus
redirectPath={redirectPath}
customerEmail={customerEmail}
/>
);
}
function SuccessSessionStatus({
customerEmail,
redirectPath,
}: React.PropsWithChildren<{
customerEmail: string;
redirectPath: string;
}>) {
return (
<section
data-test={'payment-return-success'}
className={
'fade-in mx-auto max-w-xl rounded-xl border p-16 xl:drop-shadow-sm' +
' dark:border-dark-800 border-gray-100' +
' bg-background animate-in slide-in-from-bottom-8 ease-out' +
' zoom-in-50 dark:shadow-primary/40 duration-1000 dark:shadow-2xl'
}
>
<div
className={
'flex flex-col items-center justify-center space-y-4 text-center'
}
>
<CheckIcon
className={
'w-16 rounded-full bg-green-500 p-1 text-white ring-8' +
' ring-green-500/30 dark:ring-green-500/50'
}
/>
<Heading level={3}>
<span className={'mr-4 font-semibold'}>
<Trans i18nKey={'subscription:checkoutSuccessTitle'} />
</span>
🎉
</Heading>
<div
className={'flex flex-col space-y-4 text-gray-500 dark:text-gray-400'}
>
<p>
<Trans
i18nKey={'subscription:checkoutSuccessDescription'}
values={{ customerEmail }}
/>
</p>
</div>
<Button data-test={'checkout-success-back-button'} variant={'outline'}>
<Link href={redirectPath}>
<span className={'flex items-center space-x-2.5'}>
<span>
<Trans i18nKey={'subscription:checkoutSuccessBackButton'} />
</span>
<ChevronRightIcon className={'h-4'} />
</span>
</Link>
</Button>
</div>
</section>
);
}

8
packages/billing-gateway/src/components/embedded-checkout.tsx
View File

@@ -8,11 +8,17 @@ export function EmbeddedCheckout(
props: React.PropsWithChildren<{
checkoutToken: string;
provider: BillingProvider;
onClose?: () => void;
}>,
) {
const CheckoutComponent = loadCheckoutComponent(props.provider);
return <CheckoutComponent checkoutToken={props.checkoutToken} />;
return (
<CheckoutComponent
onClose={props.onClose}
checkoutToken={props.checkoutToken}
/>
);
}
function loadCheckoutComponent(provider: BillingProvider) {

1
packages/billing-gateway/src/components/index.ts
View File

@@ -1,3 +1,4 @@
export * from './plan-picker';
export * from './current-plan-card';
export * from './embedded-checkout';
export * from './billing-session-status';

20
packages/billing-gateway/src/components/plan-picker.tsx
View File

@@ -38,6 +38,8 @@ export function PlanPicker(
}, []);
const form = useForm({
reValidateMode: 'onChange',
mode: 'onChange',
resolver: zodResolver(
z
.object({
@@ -56,7 +58,7 @@ export function PlanPicker(
return intervals.includes(data.interval);
},
{ message: 'Invalid plan', path: ['planId'] },
{ message: `Please pick a plan to continue`, path: ['planId'] },
),
),
defaultValues: {
@@ -65,7 +67,7 @@ export function PlanPicker(
},
});
const selectedInterval = form.watch('interval');
const { interval: selectedInterval } = form.watch();
return (
<Form {...form}>
@@ -101,8 +103,12 @@ export function PlanPicker(
id={interval}
value={interval}
onClick={() => {
form.setValue('planId', '');
form.setValue('interval', interval);
form.setValue('planId', '', {
shouldValidate: true,
});
form.setValue('interval', interval, {
shouldValidate: true,
});
}}
/>
@@ -149,7 +155,9 @@ export function PlanPicker(
id={variant.id}
value={variant.id}
onClick={() => {
form.setValue('planId', variant.id);
form.setValue('planId', variant.id, {
shouldValidate: true,
});
}}
/>
@@ -198,7 +206,7 @@ export function PlanPicker(
/>
<div>
<Button disabled={props.pending}>
<Button disabled={props.pending || !form.formState.isValid}>
{props.pending ? (
'Processing...'
) : (

10
packages/billing/src/services/billing-strategy-provider.service.ts
View File

@@ -16,7 +16,15 @@ export abstract class BillingStrategyProviderService {
abstract retrieveCheckoutSession(
params: z.infer<typeof RetrieveCheckoutSessionSchema>,
): Promise<unknown>;
): Promise<{
checkoutToken: string | null;
status: 'complete' | 'expired' | 'open';
isSessionOpen: boolean;
customer: {
email: string | null;
};
}>;
abstract createCheckoutSession(
params: z.infer<typeof CreateBillingCheckoutSchema>,

2
packages/features/accounts/src/components/personal-account-dropdown.tsx
View File

@@ -36,7 +36,7 @@ export function PersonalAccountDropdown({
paths,
}: {
className?: string;
session: Session | undefined;
session: Session | null;
signOutRequested: () => unknown;
showProfileName?: boolean;
paths: {

3
packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx
View File

@@ -28,12 +28,13 @@ const AccountInfoSchema = z.object({
export function UpdateAccountDetailsForm({
displayName,
onUpdate,
userId,
}: {
displayName: string;
userId: string;
onUpdate: (user: Partial<UpdateUserDataParams>) => void;
}) {
const updateAccountMutation = useUpdateAccountData();
const updateAccountMutation = useUpdateAccountData(userId);
const { t } = useTranslation();
const form = useForm({

11
packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
View File

@@ -29,7 +29,7 @@ export function UpdateAccountImageContainer() {
return (
<UploadProfileAvatarForm
currentPhotoURL={accountData.data.picture_url}
pictureUrl={accountData.data.picture_url ?? null}
userId={accountData.data.id}
onAvatarUpdated={revalidateUserDataQuery}
/>
@@ -37,7 +37,7 @@ export function UpdateAccountImageContainer() {
}
function UploadProfileAvatarForm(props: {
currentPhotoURL: string | null;
pictureUrl: string | null;
userId: string;
onAvatarUpdated: () => void;
}) {
@@ -58,10 +58,9 @@ function UploadProfileAvatarForm(props: {
const onValueChange = useCallback(
(file: File | null) => {
const removeExistingStorageFile = () => {
if (props.currentPhotoURL) {
if (props.pictureUrl) {
return (
deleteProfilePhoto(client, props.currentPhotoURL) ??
Promise.resolve()
deleteProfilePhoto(client, props.pictureUrl) ?? Promise.resolve()
);
}
@@ -108,7 +107,7 @@ function UploadProfileAvatarForm(props: {
);
return (
<ImageUploader value={props.currentPhotoURL} onValueChange={onValueChange}>
<ImageUploader value={props.pictureUrl} onValueChange={onValueChange}>
<div className={'flex flex-col space-y-1'}>
<span className={'text-sm'}>
<Trans i18nKey={'profile:profilePictureHeading'} />

7
packages/features/accounts/src/components/personal-account-settings/update-email-form-container.tsx
View File

@@ -1,11 +1,16 @@
'use client';
import { useUser } from '@kit/supabase/hooks/use-user';
import { LoadingOverlay } from '@kit/ui/loading-overlay';
import { UpdateEmailForm } from './update-email-form';
export function UpdateEmailFormContainer(props: { callbackPath: string }) {
const { data: user } = useUser();
const { data: user, isPending } = useUser();
if (isPending) {
return <LoadingOverlay />;
}
if (!user) {
return null;

7
packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
View File

@@ -2,6 +2,7 @@
import { useUser } from '@kit/supabase/hooks/use-user';
import { Alert } from '@kit/ui/alert';
import { LoadingOverlay } from '@kit/ui/loading-overlay';
import { Trans } from '@kit/ui/trans';
import { UpdatePasswordForm } from './update-password-form';
@@ -11,10 +12,10 @@ export function UpdatePasswordFormContainer(
callbackPath: string;
}>,
) {
const { data: user } = useUser();
const { data: user, isPending } = useUser();
if (!user) {
return null;
if (isPending) {
return <LoadingOverlay />;
}
const canUpdatePassword = user.identities?.some(

4
packages/features/auth/src/components/password-reset-form.tsx
View File

@@ -23,7 +23,7 @@ import { Trans } from '@kit/ui/trans';
import { PasswordResetSchema } from '../schemas/password-reset.schema';
function PasswordResetForm(params: { redirectTo: string }) {
export function PasswordResetForm(params: { redirectTo: string }) {
const updateUser = useUpdateUser();
const form = useForm<z.infer<typeof PasswordResetSchema>>({
@@ -109,8 +109,6 @@ function PasswordResetForm(params: { redirectTo: string }) {
);
}
export default PasswordResetForm;
function SuccessState() {
return (
<div className={'flex flex-col space-y-4'}>

1
packages/features/auth/src/password-reset.ts
View File

@@ -1 +1,2 @@
export * from './components/password-reset-request-container';
export * from './components/password-reset-form';

25
packages/features/team-accounts/src/actions/account-invitations-server-actions.ts
View File

@@ -9,7 +9,9 @@ import { z } from 'zod';
import { Database } from '@kit/supabase/database';
import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
import { DeleteInvitationSchema } from '../schema/delete-invitation.schema';
import { InviteMembersSchema } from '../schema/invite-members.schema';
import { UpdateInvitationSchema } from '../schema/update-invitation-schema';
import { AccountInvitationsService } from '../services/account-invitations.service';
/**
@@ -44,7 +46,11 @@ export async function createInvitationsAction(params: {
*
* @return {Object} - The result of the delete operation.
*/
export async function deleteInvitationAction(params: { invitationId: string }) {
export async function deleteInvitationAction(
params: z.infer<typeof DeleteInvitationSchema>,
) {
const invitation = DeleteInvitationSchema.parse(params);
const client = getSupabaseServerActionClient();
const { data, error } = await client.auth.getUser();
@@ -54,27 +60,22 @@ export async function deleteInvitationAction(params: { invitationId: string }) {
const service = new AccountInvitationsService(client);
await service.removeInvitation({
invitationId: params.invitationId,
});
await service.deleteInvitation(invitation);
return { success: true };
}
export async function updateInvitationAction(params: {
invitationId: string;
role: Database['public']['Enums']['account_role'];
}) {
export async function updateInvitationAction(
params: z.infer<typeof UpdateInvitationSchema>,
) {
const client = getSupabaseServerActionClient();
const invitation = UpdateInvitationSchema.parse(params);
await assertSession(client);
const service = new AccountInvitationsService(client);
await service.updateInvitation({
invitationId: params.invitationId,
role: params.role,
});
await service.updateInvitation(invitation);
return { success: true };
}

24
packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx
View File

@@ -15,6 +15,7 @@ import {
DropdownMenuTrigger,
} from '@kit/ui/dropdown-menu';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { ProfileAvatar } from '@kit/ui/profile-avatar';
import { RoleBadge } from '../role-badge';
@@ -37,9 +38,30 @@ export function AccountInvitationsTable({
invitations,
permissions,
}: AccountInvitationsTableProps) {
const [search, setSearch] = useState('');
const columns = useMemo(() => getColumns(permissions), [permissions]);
return <DataTable columns={columns} data={invitations} />;
const filteredInvitations = invitations.filter((member) => {
const searchString = search.toLowerCase();
const email = member.email.split('@')[0]?.toLowerCase() ?? '';
return (
email.includes(searchString) ||
member.role.toLowerCase().includes(searchString)
);
});
return (
<div className={'flex flex-col space-y-2'}>
<Input
value={search}
onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
placeholder={'Search Invitation'}
/>
<DataTable columns={columns} data={filteredInvitations} />
</div>
);
}
function getColumns(permissions: {

9
packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx
View File

@@ -34,7 +34,7 @@ type Role = Database['public']['Enums']['account_role'];
export const UpdateInvitationDialog: React.FC<{
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
invitationId: string;
invitationId: number;
userRole: Role;
}> = ({ isOpen, setIsOpen, invitationId, userRole }) => {
return (
@@ -65,7 +65,7 @@ function UpdateInvitationForm({
userRole,
setIsOpen,
}: React.PropsWithChildren<{
invitationId: string;
invitationId: number;
userRole: Role;
setIsOpen: (isOpen: boolean) => void;
}>) {
@@ -75,7 +75,10 @@ function UpdateInvitationForm({
const onSubmit = ({ role }: { role: Role }) => {
startTransition(async () => {
try {
await updateInvitationAction({ invitationId, role });
await updateInvitationAction({
invitationId,
role,
});
setIsOpen(false);
} catch (e) {

27
packages/features/team-accounts/src/components/members/account-members-table.tsx
View File

@@ -15,6 +15,7 @@ import {
DropdownMenuTrigger,
} from '@kit/ui/dropdown-menu';
import { If } from '@kit/ui/if';
import { Input } from '@kit/ui/input';
import { ProfileAvatar } from '@kit/ui/profile-avatar';
import { RoleBadge } from '../role-badge';
@@ -42,12 +43,34 @@ export function AccountMembersTable({
permissions,
currentUserId,
}: AccountMembersTableProps) {
const [search, setSearch] = useState('');
const columns = useMemo(
() => getColumns(permissions, currentUserId),
[currentUserId, permissions],
);
return <DataTable columns={columns} data={members} />;
const filteredMembers = members.filter((member) => {
const searchString = search.toLowerCase();
const displayName = member.name ?? member.email.split('@')[0];
return (
displayName.includes(searchString) ||
member.role.toLowerCase().includes(searchString)
);
});
return (
<div className={'flex flex-col space-y-2'}>
<Input
value={search}
onInput={(e) => setSearch((e.target as HTMLInputElement).value)}
placeholder={'Search Member'}
/>
<DataTable columns={columns} data={filteredMembers} />
</div>
);
}
function getColumns(
@@ -111,7 +134,7 @@ function getColumns(
<If condition={isPrimaryOwner}>
<span
className={
'rounded-md bg-yellow-400 px-2.5 py-1 text-xs font-medium'
'rounded-md bg-yellow-400 px-2.5 py-1 text-xs font-medium dark:text-black'
}
>
Primary

2
packages/features/team-accounts/src/components/role-badge.tsx
View File

@@ -10,7 +10,7 @@ const roleClassNameBuilder = cva('font-medium capitalize', {
variants: {
role: {
owner: 'bg-primary',
member: 'bg-blue-50 text-blue-500 hover:bg-blue-50',
member: 'bg-blue-50 text-blue-500 dark:bg-blue-500/10',
},
},
});

5
packages/features/team-accounts/src/schema/delete-invitation.schema.ts Normal file
View File

@@ -0,0 +1,5 @@
import { z } from 'zod';
export const DeleteInvitationSchema = z.object({
invitationId: z.bigint(),
});

10
packages/features/team-accounts/src/schema/update-invitation-schema.ts Normal file
View File

@@ -0,0 +1,10 @@
import { z } from 'zod';
import { Database } from '@kit/supabase/database';
type Role = Database['public']['Enums']['account_role'];
export const UpdateInvitationSchema = z.object({
id: z.bigint(),
role: z.custom<Role>(() => z.string().min(1)),
});

23
packages/features/team-accounts/src/services/account-invitations.service.ts
View File

@@ -7,7 +7,9 @@ import { Mailer } from '@kit/mailers';
import { Logger } from '@kit/shared/logger';
import { Database } from '@kit/supabase/database';
import { DeleteInvitationSchema } from '../schema/delete-invitation.schema';
import { InviteMembersSchema } from '../schema/invite-members.schema';
import { UpdateInvitationSchema } from '../schema/update-invitation-schema';
const invitePath = process.env.INVITATION_PAGE_PATH;
const siteURL = process.env.NEXT_PUBLIC_SITE_URL;
@@ -33,10 +35,10 @@ export class AccountInvitationsService {
constructor(private readonly client: SupabaseClient<Database>) {}
async removeInvitation(params: { invitationId: string }) {
async deleteInvitation(params: z.infer<typeof DeleteInvitationSchema>) {
Logger.info('Removing invitation', {
invitationId: params.invitationId,
name: this.namespace,
...params,
});
const { data, error } = await this.client
@@ -51,20 +53,16 @@ export class AccountInvitationsService {
}
Logger.info('Invitation successfully removed', {
invitationId: params.invitationId,
...params,
name: this.namespace,
});
return data;
}
async updateInvitation(params: {
invitationId: string;
role: Database['public']['Enums']['account_role'];
}) {
async updateInvitation(params: z.infer<typeof UpdateInvitationSchema>) {
Logger.info('Updating invitation', {
invitationId: params.invitationId,
role: params.role,
...params,
name: this.namespace,
});
@@ -74,7 +72,7 @@ export class AccountInvitationsService {
role: params.role,
})
.match({
id: params.invitationId,
id: params.id,
});
if (error) {
@@ -82,8 +80,7 @@ export class AccountInvitationsService {
}
Logger.info('Invitation successfully updated', {
invitationId: params.invitationId,
role: params.role,
...params,
name: this.namespace,
});
@@ -154,7 +151,7 @@ export class AccountInvitationsService {
try {
const { renderInviteEmail } = await import('@kit/emails');
const html = await renderInviteEmail({
const html = renderInviteEmail({
link: this.getInvitationLink(invitation.invite_token),
invitedUserEmail: invitation.email,
inviter: user.email,

12
packages/stripe/src/services/stripe-billing-strategy.service.ts
View File

@@ -56,7 +56,17 @@ export class StripeBillingStrategyService
) {
const stripe = await this.stripeProvider();
return await stripe.subscriptions.retrieve(params.sessionId);
const session = await stripe.checkout.sessions.retrieve(params.sessionId);
const isSessionOpen = session.status === 'open';
return {
checkoutToken: session.client_secret,
isSessionOpen,
status: session.status ?? 'complete',
customer: {
email: session.customer_details?.email ?? null,
},
};
}
private async stripeProvider(): Promise<Stripe> {

2
packages/supabase/src/clients/server-actions.client.ts
View File

@@ -14,7 +14,7 @@ const createServerSupabaseClient = () => {
});
};
export const getSupabaseServerActionClient = (params?: { admin: false }) => {
export const getSupabaseServerActionClient = (params?: { admin: boolean }) => {
const keys = getSupabaseClientKeys();
const admin = params?.admin ?? false;

15
packages/supabase/src/hooks/use-user-session.ts
View File

@@ -1,16 +1,19 @@
import { useCallback } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import type { Session } from '@supabase/supabase-js';
import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
import { useSupabase } from './use-supabase';
const queryKey = ['supabase:session'];
export function useUserSession() {
export function useUserSession(initialSession?: Session | null) {
const supabase = useSupabase();
const queryFn = async () => {
const { data, error } = await supabase.auth.getSession();
console.log(data, error);
if (error) {
throw error;
}
@@ -18,7 +21,11 @@ export function useUserSession() {
return data.session;
};
return useQuery({ queryKey, queryFn });
return useSuspenseQuery({
queryKey,
queryFn,
initialData: initialSession,
});
}
export function useRevalidateUserSession() {

5
packages/ui/src/makerkit/data-table.tsx
View File

@@ -26,7 +26,7 @@ import {
ChevronsRightIcon,
} from 'lucide-react';
import { Button } from '@kit/ui/button';
import { Button } from '../shadcn/button';
import {
Table,
TableBody,
@@ -35,8 +35,7 @@ import {
TableHead,
TableHeader,
TableRow,
} from '@kit/ui/table';
} from '../shadcn/table';
import Trans from './trans';
interface ReactTableProps<T extends object> {

5
packages/ui/src/makerkit/image-upload-input.tsx
View File

@@ -8,9 +8,8 @@ import Image from 'next/image';
import cn from 'clsx';
import { UploadCloud, XIcon } from 'lucide-react';
import { Button } from '@kit/ui/button';
import { Label } from '@kit/ui/label';
import { Button } from '../shadcn/button';
import { Label } from '../shadcn/label';
import { If } from './if';
type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {

3
packages/ui/src/makerkit/image-uploader.tsx
View File

@@ -7,8 +7,7 @@ import Image from 'next/image';
import { ImageIcon } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { Button } from '@kit/ui/button';
import { Button } from '../shadcn/button';
import ImageUploadInput from './image-upload-input';
import { Trans } from './trans';

3
packages/ui/src/makerkit/language-dropdown-switcher.tsx
View File

@@ -5,13 +5,14 @@ import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import useRefresh from '@kit/shared/hooks/use-refresh';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@kit/ui/select';
} from '../shadcn/select';
const LanguageDropdownSwitcher: React.FC<{
onChange?: (locale: string) => unknown;

6
packages/ui/src/makerkit/mobile-navigation-dropdown.tsx
View File

@@ -7,14 +7,14 @@ import { usePathname } from 'next/navigation';
import { ChevronDownIcon } from 'lucide-react';
import { Button } from '@kit/ui/button';
import { Button } from '../shadcn/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@kit/ui/dropdown-menu';
import { Trans } from '@kit/ui/trans';
} from '../shadcn/dropdown-menu';
import { Trans } from '../shadcn/trans';
function MobileNavigationDropdown({
links,

4
packages/ui/src/makerkit/mobile-navigation-menu.tsx
View File

@@ -10,8 +10,8 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@kit/ui/dropdown-menu';
import { Trans } from '@kit/ui/trans';
} from '../shadcn/dropdown-menu';
import { Trans } from '../shadcn/trans';
const MobileNavigationDropdown: React.FC<{
links: {

307
packages/ui/src/makerkit/pricing-table.tsx
View File

@@ -1,307 +0,0 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import { CheckCircleIcon, SparklesIcon } from 'lucide-react';
import { Button } from '@kit/ui/button';
import Heading from '@kit/ui/heading';
// TODO: pass in from app
import pathsConfig from '@kit/web/config/paths.config';
import pricingConfig from '@kit/web/config/pricing.config';
import { cn } from '../utils/cn';
import { If } from './if';
import { Trans } from './trans';
interface CheckoutButtonProps {
readonly stripePriceId?: string;
readonly recommended?: boolean;
}
interface PricingItemProps {
selectable: boolean;
product: {
name: string;
features: string[];
description: string;
recommended?: boolean;
badge?: string;
};
plan: {
name: string;
stripePriceId?: string;
price: string;
label?: string;
href?: string;
};
}
const STRIPE_PRODUCTS = pricingConfig.products;
const STRIPE_PLANS = STRIPE_PRODUCTS.reduce<string[]>((acc, product) => {
product.plans.forEach((plan) => {
if (plan.name && !acc.includes(plan.name)) {
acc.push(plan.name);
}
});
return acc;
}, []);
function PricingTable(
props: React.PropsWithChildren<{
CheckoutButton?: React.ComponentType<CheckoutButtonProps>;
}>,
) {
const [planVariant, setPlanVariant] = useState<string>(STRIPE_PLANS[0]);
return (
<div className={'flex flex-col space-y-12'}>
<div className={'flex justify-center'}>
<PlansSwitcher
plans={STRIPE_PLANS}
plan={planVariant}
setPlan={setPlanVariant}
/>
</div>
<div
className={
'flex flex-col items-start space-y-6 lg:space-y-0' +
' justify-center lg:flex-row lg:space-x-4'
}
>
{STRIPE_PRODUCTS.map((product) => {
const plan =
product.plans.find((item) => item.name === planVariant) ??
product.plans[0];
return (
<PricingItem
selectable
key={plan.stripePriceId ?? plan.name}
plan={plan}
product={product}
CheckoutButton={props.CheckoutButton}
/>
);
})}
</div>
</div>
);
}
export default PricingTable;
PricingTable.Item = PricingItem;
PricingTable.Price = Price;
PricingTable.FeaturesList = FeaturesList;
function PricingItem(
props: React.PropsWithChildren<
PricingItemProps & {
CheckoutButton?: React.ComponentType<CheckoutButtonProps>;
}
>,
) {
const recommended = props.product.recommended ?? false;
return (
<div
data-test={'subscription-plan'}
className={cn(
`
relative flex w-full flex-col justify-between space-y-6 rounded-lg
p-6 lg:w-4/12 xl:max-w-xs xl:p-8 2xl:w-3/12
`,
{
['border']: !recommended,
['border-2 border-primary']: recommended,
},
)}
>
<div className={'flex flex-col space-y-1'}>
<div className={'flex items-center space-x-4'}>
<Heading level={4}>{props.product.name}</Heading>
<If condition={props.product.badge}>
<div
className={cn(
`flex space-x-1 rounded-md px-2 py-1 text-xs font-medium`,
{
['bg-primary text-primary-foreground']: recommended,
['bg-muted text-muted-foreground']: !recommended,
},
)}
>
<If condition={recommended}>
<SparklesIcon className={'mr-1 h-4 w-4'} />
</If>
<span>{props.product.badge}</span>
</div>
</If>
</div>
<span className={'text-muted-foreground'}>
{props.product.description}
</span>
</div>
<div className={'flex items-end space-x-1'}>
<Price>{props.plan.price}</Price>
<If condition={props.plan.name}>
<span className={cn(`text-lg lowercase text-muted-foreground`)}>
<span>/</span>
<span>{props.plan.name}</span>
</span>
</If>
</div>
<div className={'text-current'}>
<FeaturesList features={props.product.features} />
</div>
<If condition={props.selectable}>
<If
condition={props.plan.stripePriceId && props.CheckoutButton}
fallback={
<DefaultCheckoutButton
recommended={recommended}
plan={props.plan}
/>
}
>
{(CheckoutButton) => (
<CheckoutButton
recommended={recommended}
stripePriceId={props.plan.stripePriceId}
/>
)}
</If>
</If>
</div>
);
}
function FeaturesList(
props: React.PropsWithChildren<{
features: string[];
}>,
) {
return (
<ul className={'flex flex-col space-y-2'}>
{props.features.map((feature) => {
return (
<ListItem key={feature}>
<Trans
i18nKey={`common:plans.features.${feature}`}
defaults={feature}
/>
</ListItem>
);
})}
</ul>
);
}
function Price({ children }: React.PropsWithChildren) {
// little trick to re-animate the price when switching plans
const key = Math.random();
return (
<div
key={key}
className={`duration-500 animate-in fade-in slide-in-from-left-4`}
>
<span className={'text-2xl font-bold lg:text-3xl xl:text-4xl'}>
{children}
</span>
</div>
);
}
function ListItem({ children }: React.PropsWithChildren) {
return (
<li className={'flex items-center space-x-3 font-medium'}>
<div>
<CheckCircleIcon className={'h-5 text-green-500'} />
</div>
<span className={'text-sm'}>{children}</span>
</li>
);
}
function PlansSwitcher(
props: React.PropsWithChildren<{
plans: string[];
plan: string;
setPlan: (plan: string) => void;
}>,
) {
return (
<div className={'flex'}>
{props.plans.map((plan, index) => {
const selected = plan === props.plan;
const className = cn('focus:!ring-0 !outline-none', {
'rounded-r-none border-r-transparent': index === 0,
'rounded-l-none': index === props.plans.length - 1,
['hover:bg-muted']: !selected,
['font-bold hover:bg-background hover:text-initial']: selected,
});
return (
<Button
key={plan}
variant={'outline'}
className={className}
onClick={() => props.setPlan(plan)}
>
<span className={'flex items-center space-x-1'}>
<If condition={selected}>
<CheckCircleIcon className={'h-4 text-green-500'} />
</If>
<span>
<Trans i18nKey={`common:plans.${plan}`} defaults={plan} />
</span>
</span>
</Button>
);
})}
</div>
);
}
function DefaultCheckoutButton(
props: React.PropsWithChildren<{
plan: PricingItemProps['plan'];
recommended?: boolean;
}>,
) {
const signUpPath = pathsConfig.auth.signUp;
const linkHref =
props.plan.href ?? `${signUpPath}?utm_source=${props.plan.stripePriceId}`;
const label = props.plan.label ?? 'common:getStarted';
return (
<div className={'bottom-0 left-0 w-full p-0'}>
<Button
className={'w-full'}
variant={props.recommended ? 'default' : 'outline'}
>
<Link href={linkHref}>
<Trans i18nKey={label} defaults={label} />
</Link>
</Button>
</div>
);
}

8
packages/ui/src/makerkit/profile-avatar.tsx
View File

@@ -1,7 +1,7 @@
import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
import { Avatar, AvatarFallback, AvatarImage } from '../shadcn/avatar';
type SessionProps = {
displayName?: string | null;
displayName: string | null;
pictureUrl?: string | null;
};
@@ -31,7 +31,9 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
<AvatarImage src={props.pictureUrl ?? undefined} />
<AvatarFallback>
<span className={'uppercase'}>{initials}</span>
<span suppressHydrationWarning className={'uppercase'}>
{initials}
</span>
</AvatarFallback>
</Avatar>
);

3
packages/ui/src/makerkit/sidebar.tsx
View File

@@ -9,8 +9,7 @@ import { cva } from 'class-variance-authority';
import { ChevronDownIcon } from 'lucide-react';
import { z } from 'zod';
import { Button } from '@kit/ui/button';
import { Button } from '../shadcn/button';
import {
Tooltip,
TooltipContent,