@vendure-platform/create 0.5.0 → 0.5.2

package/dist/assets/storefront/src/app/[locale]/account/company/users/invite-user-form.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Field, FieldLabel, FieldError, FieldGroup} from '@/components/ui/field';
-import {Checkbox} from '@/components/ui/checkbox';
-import {Label} from '@/components/ui/label';
-import {useForm} from 'react-hook-form';
-import {Loader2} from 'lucide-react';
-import {useTranslations} from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useForm } from 'react-hook-form';
 
 interface InviteUserFormData {
     emailAddress: string;
@@ -33,9 +33,21 @@ interface InviteUserFormProps {
     isSubmitting: boolean;
 }
 
-export function InviteUserForm({roles, businessUnits, onSubmit, onCancel, isSubmitting}: InviteUserFormProps) {
+export function InviteUserForm({
+    roles,
+    businessUnits,
+    onSubmit,
+    onCancel,
+    isSubmitting,
+}: InviteUserFormProps) {
     const t = useTranslations('Company.users.inviteForm');
-    const {register, handleSubmit, formState: {errors}, setValue, watch} = useForm<InviteUserFormData>({
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        setValue,
+        watch,
+    } = useForm<InviteUserFormData>({
         defaultValues: {
             emailAddress: '',
             roleIds: [],
@@ -48,17 +60,13 @@ export function InviteUserForm({roles, businessUnits, onSubmit, onCancel, isSubm
 
     const toggleRole = (roleId: string) => {
         const current = selectedRoleIds || [];
-        const next = current.includes(roleId)
-            ? current.filter(id => id !== roleId)
-            : [...current, roleId];
+        const next = current.includes(roleId) ? current.filter((id) => id !== roleId) : [...current, roleId];
         setValue('roleIds', next);
     };
 
     const toggleBu = (buId: string) => {
         const current = selectedBuIds || [];
-        const next = current.includes(buId)
-            ? current.filter(id => id !== buId)
-            : [...current, buId];
+        const next = current.includes(buId) ? current.filter((id) => id !== buId) : [...current, buId];
         setValue('businessUnitIds', next);
     };
 
@@ -70,7 +78,7 @@ export function InviteUserForm({roles, businessUnits, onSubmit, onCancel, isSubm
                     <Input
                         id="emailAddress"
                         type="email"
-                        {...register('emailAddress', {required: t('emailRequired')})}
+                        {...register('emailAddress', { required: t('emailRequired') })}
                         disabled={isSubmitting}
                     />
                     <FieldError>{errors.emailAddress?.message}</FieldError>
@@ -80,7 +88,7 @@ export function InviteUserForm({roles, businessUnits, onSubmit, onCancel, isSubm
                     <Field>
                         <FieldLabel>{t('rolesLabel')}</FieldLabel>
                         <div className="space-y-2 mt-1">
-                            {roles.map(role => (
+                            {roles.map((role) => (
                                 <div key={role.id} className="flex items-center gap-2">
                                     <Checkbox
                                         id={`role-${role.id}`}
@@ -101,7 +109,7 @@ export function InviteUserForm({roles, businessUnits, onSubmit, onCancel, isSubm
                     <Field>
                         <FieldLabel>{t('businessUnitsLabel')}</FieldLabel>
                         <div className="space-y-2 mt-1">
-                            {businessUnits.map(bu => (
+                            {businessUnits.map((bu) => (
                                 <div key={bu.id} className="flex items-center gap-2">
                                     <Checkbox
                                         id={`bu-${bu.id}`}

package/dist/assets/storefront/src/app/[locale]/account/company/users/page.tsx

@@ -1,35 +1,36 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {redirect} from '@/i18n/navigation';
-import {readFragment} from '@/graphql';
-import {getCompanyAccount} from '@/lib/vendure/actions';
-import {client} from '@/lib/vendure/api';
-import {GetShopCompanyUsersQuery, GetCompanyRolesQuery, GetCompanyBusinessUnitsQuery} from '@/lib/vendure/queries';
+import { readFragment } from '@/graphql';
+import { redirect } from '@/i18n/navigation';
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
 import {
     CompanyBusinessUnitFragment,
     CompanyPermissionFragment,
     CompanyRoleFragment,
     CompanyUserFragment,
 } from '@/lib/vendure/fragments';
-import {UsersClient} from './users-client';
-import {getTranslations} from 'next-intl/server';
+import {
+    GetCompanyBusinessUnitsQuery,
+    GetCompanyRolesQuery,
+    GetShopCompanyUsersQuery,
+} from '@/lib/vendure/queries';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { UsersClient } from './users-client';
 
 export const metadata: Metadata = {
     title: 'Company Users',
 };
 
 async function CompanyUsersContent() {
-    const [t, companyAccount] = await Promise.all([
-        getTranslations('Company.users'),
-        getCompanyAccount(),
-    ]);
+    const [t, companyAccount] = await Promise.all([getTranslations('Company.users'), getCompanyAccount()]);
 
     if (!companyAccount) {
         await redirect('/account/orders');
         return;
     }
 
-    const {permissions} = companyAccount;
+    const { permissions } = companyAccount;
     const canViewUsers = permissions.includes('ViewUsers');
     const canManageUsers = permissions.includes('ManageUsers');
 
@@ -49,36 +50,36 @@ async function CompanyUsersContent() {
     const [busResult, busError] = busRes;
     if (busError) throw busError;
 
-    const users = (usersResult.data.shopCompanyUsers ?? []).map(u => {
+    const users = (usersResult.data.shopCompanyUsers ?? []).map((u) => {
         const user = readFragment(CompanyUserFragment, u);
         return {
             ...user,
-            companyRoles: user.companyRoles.map(r => {
+            companyRoles: user.companyRoles.map((r) => {
                 const role = readFragment(CompanyRoleFragment, r);
                 return {
                     ...role,
-                    permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+                    permissions: role.permissions.map((p) => readFragment(CompanyPermissionFragment, p)),
                 };
             }),
-            businessUnits: user.businessUnits.map(bu => readFragment(CompanyBusinessUnitFragment, bu)),
+            businessUnits: user.businessUnits.map((bu) => readFragment(CompanyBusinessUnitFragment, bu)),
         };
     });
-    const roles = (rolesResult.data.companyRoles ?? []).map(r => {
+    const roles = (rolesResult.data.companyRoles ?? []).map((r) => {
         const role = readFragment(CompanyRoleFragment, r);
         return {
             ...role,
-            permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+            permissions: role.permissions.map((p) => readFragment(CompanyPermissionFragment, p)),
         };
     });
-    const businessUnits = (busResult.data.companyBusinessUnits ?? []).map(bu => readFragment(CompanyBusinessUnitFragment, bu));
+    const businessUnits = (busResult.data.companyBusinessUnits ?? []).map((bu) =>
+        readFragment(CompanyBusinessUnitFragment, bu),
+    );
 
     return (
         <div className="space-y-6">
             <div>
                 <h1 className="text-3xl font-bold">{t('pageTitle')}</h1>
-                <p className="text-muted-foreground mt-2">
-                    {t('pageDescription')}
-                </p>
+                <p className="text-muted-foreground mt-2">{t('pageDescription')}</p>
             </div>
 
             <UsersClient
@@ -93,11 +94,13 @@ async function CompanyUsersContent() {
 
 export default function CompanyUsersPage() {
     return (
-        <Suspense fallback={
-            <div className="text-center py-12">
-                <p className="text-sm text-muted-foreground">Loading...</p>
-            </div>
-        }>
+        <Suspense
+            fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <CompanyUsersContent />
         </Suspense>
     );

package/dist/assets/storefront/src/app/[locale]/account/company/users/users-client.tsx

@@ -1,18 +1,5 @@
 'use client';
 
-import {useState} from 'react';
-import {useTranslations} from 'next-intl';
-import {Button} from '@/components/ui/button';
-import {Badge} from '@/components/ui/badge';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from '@/components/ui/table';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from '@/components/ui/dialog';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -23,6 +10,9 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -30,11 +20,14 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {Plus, MoreVertical, Edit2, Trash2} from 'lucide-react';
-import {InviteUserForm} from './invite-user-form';
-import {EditUserForm} from './edit-user-form';
-import {inviteCompanyUserAction, updateCompanyUserAction, removeCompanyUserAction} from './actions';
-import {useRouter} from '@/i18n/navigation';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { useRouter } from '@/i18n/navigation';
+import { Edit2, MoreVertical, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { inviteCompanyUserAction, removeCompanyUserAction, updateCompanyUserAction } from './actions';
+import { EditUserForm } from './edit-user-form';
+import { InviteUserForm } from './invite-user-form';
 
 interface CompanyUser {
     id: string;
@@ -45,8 +38,8 @@ interface CompanyUser {
         lastName: string;
         emailAddress: string;
     };
-    companyRoles: {id: string; name: string}[];
-    businessUnits: {id: string; name: string}[];
+    companyRoles: { id: string; name: string }[];
+    businessUnits: { id: string; name: string }[];
 }
 
 interface CompanyRole {
@@ -66,7 +59,7 @@ interface UsersClientProps {
     canManageUsers: boolean;
 }
 
-export function UsersClient({users, roles, businessUnits, canManageUsers}: UsersClientProps) {
+export function UsersClient({ users, roles, businessUnits, canManageUsers }: UsersClientProps) {
     const t = useTranslations('Company.users');
     const router = useRouter();
     const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
@@ -76,7 +69,11 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
     const [userToDelete, setUserToDelete] = useState<CompanyUser | null>(null);
     const [isDeleting, setIsDeleting] = useState(false);
 
-    const handleInvite = async (data: {emailAddress: string; roleIds: string[]; businessUnitIds: string[]}) => {
+    const handleInvite = async (data: {
+        emailAddress: string;
+        roleIds: string[];
+        businessUnitIds: string[];
+    }) => {
         setIsSubmitting(true);
         try {
             await inviteCompanyUserAction(data);
@@ -90,7 +87,7 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
         }
     };
 
-    const handleUpdate = async (data: {id: string; roleIds: string[]; businessUnitIds: string[]}) => {
+    const handleUpdate = async (data: { id: string; roleIds: string[]; businessUnitIds: string[] }) => {
         setIsSubmitting(true);
         try {
             await updateCompanyUserAction(data);
@@ -133,9 +130,7 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
             )}
 
             {users.length === 0 ? (
-                <div className="text-center py-12 text-muted-foreground">
-                    {t('noUsers')}
-                </div>
+                <div className="text-center py-12 text-muted-foreground">{t('noUsers')}</div>
             ) : (
                 <Table>
                     <TableHeader>
@@ -149,7 +144,7 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
                         </TableRow>
                     </TableHeader>
                     <TableBody>
-                        {users.map(user => (
+                        {users.map((user) => (
                             <TableRow key={user.id}>
                                 <TableCell className="font-medium">
                                     {user.customer.firstName} {user.customer.lastName}
@@ -160,15 +155,19 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
                                 </TableCell>
                                 <TableCell>
                                     <div className="flex flex-wrap gap-1">
-                                        {user.companyRoles.map(role => (
-                                            <Badge key={role.id} variant="secondary">{role.name}</Badge>
+                                        {user.companyRoles.map((role) => (
+                                            <Badge key={role.id} variant="secondary">
+                                                {role.name}
+                                            </Badge>
                                         ))}
                                     </div>
                                 </TableCell>
                                 <TableCell>
                                     <div className="flex flex-wrap gap-1">
-                                        {user.businessUnits.map(bu => (
-                                            <Badge key={bu.id} variant="secondary">{bu.name}</Badge>
+                                        {user.businessUnits.map((bu) => (
+                                            <Badge key={bu.id} variant="secondary">
+                                                {bu.name}
+                                            </Badge>
                                         ))}
                                     </div>
                                 </TableCell>
@@ -210,9 +209,7 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
                 <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
                         <DialogTitle>{t('inviteDialogTitle')}</DialogTitle>
-                        <DialogDescription>
-                            {t('inviteDialogDescription')}
-                        </DialogDescription>
+                        <DialogDescription>{t('inviteDialogDescription')}</DialogDescription>
                     </DialogHeader>
                     <InviteUserForm
                         roles={roles}
@@ -228,9 +225,7 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
                 <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
                         <DialogTitle>{t('editDialogTitle')}</DialogTitle>
-                        <DialogDescription>
-                            {t('editDialogDescription')}
-                        </DialogDescription>
+                        <DialogDescription>{t('editDialogDescription')}</DialogDescription>
                     </DialogHeader>
                     {editingUser && (
                         <EditUserForm
@@ -250,7 +245,9 @@ export function UsersClient({users, roles, businessUnits, canManageUsers}: Users
                     <AlertDialogHeader>
                         <AlertDialogTitle>{t('removeDialogTitle')}</AlertDialogTitle>
                         <AlertDialogDescription>
-                            {t('removeDialogDescription', {name: `${userToDelete?.customer.firstName} ${userToDelete?.customer.lastName}`})}
+                            {t('removeDialogDescription', {
+                                name: `${userToDelete?.customer.firstName} ${userToDelete?.customer.lastName}`,
+                            })}
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>

package/dist/assets/storefront/src/app/[locale]/account/error.tsx

@@ -10,9 +10,7 @@ export default function AccountError({ reset }: { error: Error & { digest?: stri
             <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
                 <AlertTitle>Something went wrong</AlertTitle>
-                <AlertDescription>
-                    We couldn&apos;t load this page. Please try again later.
-                </AlertDescription>
+                <AlertDescription>We couldn&apos;t load this page. Please try again later.</AlertDescription>
             </Alert>
             <div className="mt-4">
                 <Button onClick={() => reset()} variant="outline" size="sm">

package/dist/assets/storefront/src/app/[locale]/account/layout.tsx

@@ -1,29 +1,21 @@
-import type {Metadata} from 'next';
-import {Suspense, type ReactNode} from 'react';
-import {noIndexRobots} from '@/lib/metadata';
-import {getCompanyAccount, getHasCompany} from '@/lib/vendure/actions';
-import {AccountSidebar} from '@/components/commerce/account-sidebar';
-import {CatalogSidebarSkeleton} from '@/components/shared/catalog-sidebar-skeleton';
+import { AccountSidebar } from '@/components/commerce/account-sidebar';
+import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
+import { noIndexRobots } from '@/lib/metadata';
+import { getCompanyAccount, getHasCompany } from '@/lib/vendure/actions';
+import type { Metadata } from 'next';
+import { Suspense, type ReactNode } from 'react';
 
 export const metadata: Metadata = {
     robots: noIndexRobots(),
 };
 
 async function AccountSidebarLoader() {
-    const [companyAccount, hasCompany] = await Promise.all([
-        getCompanyAccount(),
-        getHasCompany(),
-    ]);
+    const [companyAccount, hasCompany] = await Promise.all([getCompanyAccount(), getHasCompany()]);
     const permissions = companyAccount?.permissions ?? [];
-    return (
-        <AccountSidebar
-            permissions={permissions}
-            hasCompany={hasCompany}
-        />
-    );
+    return <AccountSidebar permissions={permissions} hasCompany={hasCompany} />;
 }
 
-export default function AccountLayout({ children }: {children: ReactNode}) {
+export default function AccountLayout({ children }: { children: ReactNode }) {
     return (
         <div className="container mx-auto px-4 pt-[var(--page-top-offset)]">
             <div className="pt-4 pb-6 flex items-center" aria-hidden="true">
@@ -36,11 +28,13 @@ export default function AccountLayout({ children }: {children: ReactNode}) {
                     </Suspense>
                 </aside>
                 <main className="lg:col-span-4">
-                    <Suspense fallback={
-                        <div className="text-center py-12">
-                            <p className="text-sm text-muted-foreground">Loading...</p>
-                        </div>
-                    }>
+                    <Suspense
+                        fallback={
+                            <div className="text-center py-12">
+                                <p className="text-sm text-muted-foreground">Loading...</p>
+                            </div>
+                        }
+                    >
                         {children}
                     </Suspense>
                 </main>