@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/company/users/actions.ts

@@ -0,0 +1,74 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    InviteCompanyUserMutation,
+    UpdateCompanyUserMutation,
+    RemoveCompanyUserMutation,
+} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+export async function inviteCompanyUserAction(data: {
+    emailAddress: string;
+    roleIds?: string[];
+    businessUnitIds?: string[];
+}) {
+    const [result, error] = await client.mutate(
+        InviteCompanyUserMutation,
+        {
+            input: {
+                emailAddress: data.emailAddress,
+                roleIds: data.roleIds,
+                businessUnitIds: data.businessUnitIds,
+            },
+        },
+    );
+    if (error) throw error;
+
+    if (!result.data.inviteCompanyUser) {
+        throw new Error('Failed to invite user');
+    }
+
+    revalidatePath('/account/company/users');
+    return result.data.inviteCompanyUser;
+}
+
+export async function updateCompanyUserAction(data: {
+    id: string;
+    roleIds?: string[];
+    businessUnitIds?: string[];
+}) {
+    const [result, error] = await client.mutate(
+        UpdateCompanyUserMutation,
+        {
+            input: {
+                id: data.id,
+                roleIds: data.roleIds,
+                businessUnitIds: data.businessUnitIds,
+            },
+        },
+    );
+    if (error) throw error;
+
+    if (!result.data.updateCompanyUser) {
+        throw new Error('Failed to update user');
+    }
+
+    revalidatePath('/account/company/users');
+    return result.data.updateCompanyUser;
+}
+
+export async function removeCompanyUserAction(id: string) {
+    const [result, error] = await client.mutate(
+        RemoveCompanyUserMutation,
+        {id},
+    );
+    if (error) throw error;
+
+    if (result.data.removeCompanyUser.result !== 'DELETED') {
+        throw new Error(result.data.removeCompanyUser.message || 'Failed to remove user');
+    }
+
+    revalidatePath('/account/company/users');
+    return result.data.removeCompanyUser;
+}

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

@@ -0,0 +1,157 @@
+'use client';
+
+import {Button} from '@/components/ui/button';
+import {Field, FieldLabel, FieldGroup} from '@/components/ui/field';
+import {Checkbox} from '@/components/ui/checkbox';
+import {Label} from '@/components/ui/label';
+import {Badge} from '@/components/ui/badge';
+import {useForm} from 'react-hook-form';
+import {Loader2} from 'lucide-react';
+import {useTranslations} from 'next-intl';
+
+interface EditUserFormData {
+    roleIds: string[];
+    businessUnitIds: string[];
+}
+
+interface CompanyUser {
+    id: string;
+    state: string;
+    customer: {
+        id: string;
+        firstName: string;
+        lastName: string;
+        emailAddress: string;
+    };
+    companyRoles: { id: string; name: string }[];
+    businessUnits: { id: string; name: string }[];
+}
+
+interface CompanyRole {
+    id: string;
+    name: string;
+}
+
+interface CompanyBusinessUnit {
+    id: string;
+    name: string;
+}
+
+interface EditUserFormProps {
+    user: CompanyUser;
+    roles: CompanyRole[];
+    businessUnits: CompanyBusinessUnit[];
+    onSubmit: (data: {id: string; roleIds: string[]; businessUnitIds: string[]}) => Promise<void>;
+    onCancel: () => void;
+    isSubmitting: boolean;
+}
+
+export function EditUserForm({user, roles, businessUnits, onSubmit, onCancel, isSubmitting}: EditUserFormProps) {
+    const t = useTranslations('Company.users.editForm');
+    const {handleSubmit, setValue, watch} = useForm<EditUserFormData>({
+        defaultValues: {
+            roleIds: user.companyRoles.map(r => r.id),
+            businessUnitIds: user.businessUnits.map(bu => bu.id),
+        },
+    });
+
+    const selectedRoleIds = watch('roleIds');
+    const selectedBuIds = watch('businessUnitIds');
+
+    const toggleRole = (roleId: string) => {
+        const current = selectedRoleIds || [];
+        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];
+        setValue('businessUnitIds', next);
+    };
+
+    const handleFormSubmit = async (data: EditUserFormData) => {
+        await onSubmit({
+            id: user.id,
+            roleIds: data.roleIds,
+            businessUnitIds: data.businessUnitIds,
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+            <FieldGroup className="my-6">
+                <div className="space-y-2 rounded-md border p-4 bg-muted/50">
+                    <div className="text-sm">
+                        <span className="font-medium">{t('nameLabel')}</span>{' '}
+                        {user.customer.firstName} {user.customer.lastName}
+                    </div>
+                    <div className="text-sm">
+                        <span className="font-medium">{t('emailLabel')}</span>{' '}
+                        {user.customer.emailAddress}
+                    </div>
+                    <div className="text-sm flex items-center gap-2">
+                        <span className="font-medium">{t('statusLabel')}</span>{' '}
+                        <Badge variant="outline">{user.state}</Badge>
+                    </div>
+                </div>
+
+                {roles.length > 0 && (
+                    <Field>
+                        <FieldLabel>{t('rolesLabel')}</FieldLabel>
+                        <div className="space-y-2 mt-1">
+                            {roles.map(role => (
+                                <div key={role.id} className="flex items-center gap-2">
+                                    <Checkbox
+                                        id={`edit-role-${role.id}`}
+                                        checked={selectedRoleIds?.includes(role.id)}
+                                        onCheckedChange={() => toggleRole(role.id)}
+                                        disabled={isSubmitting}
+                                    />
+                                    <Label htmlFor={`edit-role-${role.id}`} className="font-normal">
+                                        {role.name}
+                                    </Label>
+                                </div>
+                            ))}
+                        </div>
+                    </Field>
+                )}
+
+                {businessUnits.length > 0 && (
+                    <Field>
+                        <FieldLabel>{t('businessUnitsLabel')}</FieldLabel>
+                        <div className="space-y-2 mt-1">
+                            {businessUnits.map(bu => (
+                                <div key={bu.id} className="flex items-center gap-2">
+                                    <Checkbox
+                                        id={`edit-bu-${bu.id}`}
+                                        checked={selectedBuIds?.includes(bu.id)}
+                                        onCheckedChange={() => toggleBu(bu.id)}
+                                        disabled={isSubmitting}
+                                    />
+                                    <Label htmlFor={`edit-bu-${bu.id}`} className="font-normal">
+                                        {bu.name}
+                                    </Label>
+                                </div>
+                            ))}
+                        </div>
+                    </Field>
+                )}
+            </FieldGroup>
+
+            <div className="flex gap-3 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+                    {t('cancelButton')}
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {t('updateButton')}
+                </Button>
+            </div>
+        </form>
+    );
+}

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

@@ -0,0 +1,133 @@
+'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';
+
+interface InviteUserFormData {
+    emailAddress: string;
+    roleIds: string[];
+    businessUnitIds: string[];
+}
+
+interface CompanyRole {
+    id: string;
+    name: string;
+}
+
+interface CompanyBusinessUnit {
+    id: string;
+    name: string;
+}
+
+interface InviteUserFormProps {
+    roles: CompanyRole[];
+    businessUnits: CompanyBusinessUnit[];
+    onSubmit: (data: InviteUserFormData) => Promise<void>;
+    onCancel: () => void;
+    isSubmitting: boolean;
+}
+
+export function InviteUserForm({roles, businessUnits, onSubmit, onCancel, isSubmitting}: InviteUserFormProps) {
+    const t = useTranslations('Company.users.inviteForm');
+    const {register, handleSubmit, formState: {errors}, setValue, watch} = useForm<InviteUserFormData>({
+        defaultValues: {
+            emailAddress: '',
+            roleIds: [],
+            businessUnitIds: [],
+        },
+    });
+
+    const selectedRoleIds = watch('roleIds');
+    const selectedBuIds = watch('businessUnitIds');
+
+    const toggleRole = (roleId: string) => {
+        const current = selectedRoleIds || [];
+        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];
+        setValue('businessUnitIds', next);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <FieldGroup className="my-6">
+                <Field>
+                    <FieldLabel htmlFor="emailAddress">{t('emailLabel')}</FieldLabel>
+                    <Input
+                        id="emailAddress"
+                        type="email"
+                        {...register('emailAddress', {required: t('emailRequired')})}
+                        disabled={isSubmitting}
+                    />
+                    <FieldError>{errors.emailAddress?.message}</FieldError>
+                </Field>
+
+                {roles.length > 0 && (
+                    <Field>
+                        <FieldLabel>{t('rolesLabel')}</FieldLabel>
+                        <div className="space-y-2 mt-1">
+                            {roles.map(role => (
+                                <div key={role.id} className="flex items-center gap-2">
+                                    <Checkbox
+                                        id={`role-${role.id}`}
+                                        checked={selectedRoleIds?.includes(role.id)}
+                                        onCheckedChange={() => toggleRole(role.id)}
+                                        disabled={isSubmitting}
+                                    />
+                                    <Label htmlFor={`role-${role.id}`} className="font-normal">
+                                        {role.name}
+                                    </Label>
+                                </div>
+                            ))}
+                        </div>
+                    </Field>
+                )}
+
+                {businessUnits.length > 0 && (
+                    <Field>
+                        <FieldLabel>{t('businessUnitsLabel')}</FieldLabel>
+                        <div className="space-y-2 mt-1">
+                            {businessUnits.map(bu => (
+                                <div key={bu.id} className="flex items-center gap-2">
+                                    <Checkbox
+                                        id={`bu-${bu.id}`}
+                                        checked={selectedBuIds?.includes(bu.id)}
+                                        onCheckedChange={() => toggleBu(bu.id)}
+                                        disabled={isSubmitting}
+                                    />
+                                    <Label htmlFor={`bu-${bu.id}`} className="font-normal">
+                                        {bu.name}
+                                    </Label>
+                                </div>
+                            ))}
+                        </div>
+                    </Field>
+                )}
+            </FieldGroup>
+
+            <div className="flex gap-3 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+                    {t('cancelButton')}
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {t('sendInvitationButton')}
+                </Button>
+            </div>
+        </form>
+    );
+}

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

@@ -0,0 +1,104 @@
+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 {
+    CompanyBusinessUnitFragment,
+    CompanyPermissionFragment,
+    CompanyRoleFragment,
+    CompanyUserFragment,
+} from '@/lib/vendure/fragments';
+import {UsersClient} from './users-client';
+import {getTranslations} from 'next-intl/server';
+
+export const metadata: Metadata = {
+    title: 'Company Users',
+};
+
+async function CompanyUsersContent() {
+    const [t, companyAccount] = await Promise.all([
+        getTranslations('Company.users'),
+        getCompanyAccount(),
+    ]);
+
+    if (!companyAccount) {
+        await redirect('/account/orders');
+        return;
+    }
+
+    const {permissions} = companyAccount;
+    const canViewUsers = permissions.includes('ViewUsers');
+    const canManageUsers = permissions.includes('ManageUsers');
+
+    if (!canViewUsers && !canManageUsers) {
+        await redirect('/account/orders');
+    }
+
+    const [usersRes, rolesRes, busRes] = await Promise.all([
+        client.query(GetShopCompanyUsersQuery, undefined),
+        client.query(GetCompanyRolesQuery, undefined),
+        client.query(GetCompanyBusinessUnitsQuery, undefined),
+    ]);
+    const [usersResult, usersError] = usersRes;
+    if (usersError) throw usersError;
+    const [rolesResult, rolesError] = rolesRes;
+    if (rolesError) throw rolesError;
+    const [busResult, busError] = busRes;
+    if (busError) throw busError;
+
+    const users = (usersResult.data.shopCompanyUsers ?? []).map(u => {
+        const user = readFragment(CompanyUserFragment, u);
+        return {
+            ...user,
+            companyRoles: user.companyRoles.map(r => {
+                const role = readFragment(CompanyRoleFragment, r);
+                return {
+                    ...role,
+                    permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+                };
+            }),
+            businessUnits: user.businessUnits.map(bu => readFragment(CompanyBusinessUnitFragment, bu)),
+        };
+    });
+    const roles = (rolesResult.data.companyRoles ?? []).map(r => {
+        const role = readFragment(CompanyRoleFragment, r);
+        return {
+            ...role,
+            permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+        };
+    });
+    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>
+            </div>
+
+            <UsersClient
+                users={users}
+                roles={roles}
+                businessUnits={businessUnits}
+                canManageUsers={canManageUsers}
+            />
+        </div>
+    );
+}
+
+export default function CompanyUsersPage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <CompanyUsersContent />
+        </Suspense>
+    );
+}