@vendure-platform/create 0.1.0

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

@@ -0,0 +1,55 @@
+'use client';
+
+import {useTranslations} from 'next-intl';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {CreditCard} from 'lucide-react';
+
+interface CompanyPaymentMethod {
+    id: string;
+    name: string;
+    description?: string | null;
+    terms?: string | null;
+}
+
+interface PaymentMethodsClientProps {
+    paymentMethods: CompanyPaymentMethod[];
+}
+
+export function PaymentMethodsClient({paymentMethods}: PaymentMethodsClientProps) {
+    const t = useTranslations('Company.paymentMethods');
+    if (paymentMethods.length === 0) {
+        return (
+            <Card>
+                <CardContent className="py-12 text-center">
+                    <p className="text-muted-foreground">{t('noPaymentMethods')}</p>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {paymentMethods.map((method) => (
+                <Card key={method.id}>
+                    <CardHeader>
+                        <div className="flex items-center gap-2">
+                            <CreditCard className="h-5 w-5 text-muted-foreground" />
+                            <CardTitle className="text-lg">{method.name}</CardTitle>
+                        </div>
+                        {method.description && (
+                            <CardDescription>{method.description}</CardDescription>
+                        )}
+                    </CardHeader>
+                    {method.terms && (
+                        <CardContent>
+                            <div className="text-sm text-muted-foreground">
+                                <p className="font-medium text-foreground mb-1">{t('termsLabel')}</p>
+                                <p>{method.terms}</p>
+                            </div>
+                        </CardContent>
+                    )}
+                </Card>
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,66 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {redirect} from '@/i18n/navigation';
+import {readFragment} from '@/graphql';
+import {client} from '@/lib/vendure/api';
+import {getCompanyAccount} from '@/lib/vendure/actions';
+import {GetCompanyRolesQuery} from '@/lib/vendure/queries';
+import {CompanyPermissionFragment, CompanyRoleFragment} from '@/lib/vendure/fragments';
+import {RolesClient} from './roles-client';
+import {getTranslations} from 'next-intl/server';
+
+export const metadata: Metadata = {
+    title: 'Company Roles',
+};
+
+async function CompanyRolesContent() {
+    const [t, companyAccount] = await Promise.all([
+        getTranslations('Company.roles'),
+        getCompanyAccount(),
+    ]);
+
+    if (!companyAccount) {
+        await redirect('/account/orders');
+        return;
+    }
+
+    const {permissions} = companyAccount;
+    if (!permissions.includes('ManageRoles')) {
+        await redirect('/account/orders');
+    }
+
+    const [rolesResult, rolesError] = await client.query(GetCompanyRolesQuery, {});
+    if (rolesError) throw rolesError;
+    const roles = (rolesResult.data.companyRoles ?? []).map(r => {
+        const role = readFragment(CompanyRoleFragment, r);
+        return {
+            ...role,
+            permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+        };
+    });
+
+    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>
+
+            <RolesClient roles={roles} />
+        </div>
+    );
+}
+
+export default function CompanyRolesPage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <CompanyRolesContent />
+        </Suspense>
+    );
+}

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

@@ -0,0 +1,93 @@
+'use client';
+
+import {useTranslations} from 'next-intl';
+import {Alert, AlertDescription} from '@/components/ui/alert';
+import {Badge} from '@/components/ui/badge';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@/components/ui/accordion';
+import {Info, Shield} from 'lucide-react';
+
+interface CompanyPermission {
+    id: string;
+    name: string;
+    description: string | null;
+    isBuiltIn: boolean;
+}
+
+interface CompanyRole {
+    id: string;
+    name: string;
+    isDefault: boolean;
+    permissions: CompanyPermission[];
+}
+
+interface RolesClientProps {
+    roles: CompanyRole[];
+}
+
+export function RolesClient({roles}: RolesClientProps) {
+    const t = useTranslations('Company.roles');
+    return (
+        <>
+            <Alert>
+                <Info className="h-4 w-4" />
+                <AlertDescription>
+                    {t('managedByAdminNotice')}
+                </AlertDescription>
+            </Alert>
+
+            {roles.length === 0 ? (
+                <div className="text-center py-12 text-muted-foreground">
+                    {t('noRoles')}
+                </div>
+            ) : (
+                <Accordion type="multiple" className="w-full">
+                    {roles.map((role) => (
+                        <AccordionItem key={role.id} value={role.id}>
+                            <AccordionTrigger>
+                                <div className="flex items-center gap-2">
+                                    <Shield className="h-4 w-4 text-muted-foreground" />
+                                    <span>{role.name}</span>
+                                    {role.isDefault && (
+                                        <Badge variant="secondary">{t('defaultBadge')}</Badge>
+                                    )}
+                                </div>
+                            </AccordionTrigger>
+                            <AccordionContent>
+                                {role.permissions.length === 0 ? (
+                                    <p className="text-muted-foreground text-sm">
+                                        {t('noPermissions')}
+                                    </p>
+                                ) : (
+                                    <div className="space-y-2">
+                                        {role.permissions.map((permission) => (
+                                            <div
+                                                key={permission.id}
+                                                className="flex items-start gap-3 rounded-md border p-3"
+                                            >
+                                                <div>
+                                                    <p className="text-sm font-medium">
+                                                        {permission.name}
+                                                    </p>
+                                                    {permission.description && (
+                                                        <p className="text-sm text-muted-foreground">
+                                                            {permission.description}
+                                                        </p>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                )}
+                            </AccordionContent>
+                        </AccordionItem>
+                    ))}
+                </Accordion>
+            )}
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/company/tax-ids/actions.ts

@@ -0,0 +1,51 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    AddTaxIdMutation,
+    RemoveTaxIdMutation,
+    SetDefaultTaxIdMutation,
+} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+interface AddTaxIdInput {
+    number: string;
+    type?: string;
+    countryCode: string;
+}
+
+export async function addTaxIdAction(input: AddTaxIdInput) {
+    const [result, error] = await client.mutate(AddTaxIdMutation, {input});
+    if (error) throw error;
+
+    if (!result.data.addTaxId) {
+        throw new Error('Failed to add tax ID');
+    }
+
+    revalidatePath('/account/company/tax-ids');
+    return result.data.addTaxId;
+}
+
+export async function removeTaxIdAction(id: string) {
+    const [result, error] = await client.mutate(RemoveTaxIdMutation, {id});
+    if (error) throw error;
+
+    if (result.data.removeTaxId.result !== 'DELETED') {
+        throw new Error(result.data.removeTaxId.message || 'Failed to remove tax ID');
+    }
+
+    revalidatePath('/account/company/tax-ids');
+    return result.data.removeTaxId;
+}
+
+export async function setDefaultTaxIdAction(id: string) {
+    const [result, error] = await client.mutate(SetDefaultTaxIdMutation, {id});
+    if (error) throw error;
+
+    if (!result.data.setDefaultTaxId) {
+        throw new Error('Failed to set default tax ID');
+    }
+
+    revalidatePath('/account/company/tax-ids');
+    return result.data.setDefaultTaxId;
+}

package/dist/assets/storefront/src/app/[locale]/account/company/tax-ids/page.tsx

@@ -0,0 +1,57 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {redirect} from '@/i18n/navigation';
+import {readFragment} from '@/graphql';
+import {client} from '@/lib/vendure/api';
+import {getCompanyAccount} from '@/lib/vendure/actions';
+import {GetTaxIdsQuery} from '@/lib/vendure/queries';
+import {TaxIdFragment} from '@/lib/vendure/fragments';
+import {TaxIdsClient} from './tax-ids-client';
+
+export const metadata: Metadata = {
+    title: 'Tax IDs',
+};
+
+async function TaxIdsContent() {
+    const companyAccount = await getCompanyAccount();
+
+    if (!companyAccount) {
+        await redirect('/account');
+        return;
+    }
+
+    const {permissions} = companyAccount;
+    if (!permissions.includes('ManageCompany')) {
+        await redirect('/account');
+    }
+
+    const [result, error] = await client.query(GetTaxIdsQuery, {});
+    if (error) throw error;
+
+    const taxIds = (result.data.taxIds ?? []).map(t => readFragment(TaxIdFragment, t));
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <h1 className="text-3xl font-bold">Tax IDs</h1>
+                <p className="text-muted-foreground mt-2">
+                    Manage your company&apos;s tax identification numbers for VAT and tax exemptions
+                </p>
+            </div>
+
+            <TaxIdsClient taxIds={taxIds} />
+        </div>
+    );
+}
+
+export default function TaxIdsPage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <TaxIdsContent />
+        </Suspense>
+    );
+}

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

@@ -0,0 +1,326 @@
+'use client';
+
+import {useState, useTransition} from 'react';
+import {useTranslations} from 'next-intl';
+import {useRouter} from '@/i18n/navigation';
+import {useForm} from 'react-hook-form';
+import {
+    MoreHorizontal,
+    Plus,
+    Star,
+    Trash2,
+    FileCheck2,
+    Clock,
+    AlertTriangle,
+    XCircle,
+    AlertCircle,
+} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Badge} from '@/components/ui/badge';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+
+import {addTaxIdAction, removeTaxIdAction, setDefaultTaxIdAction} from './actions';
+
+interface TaxId {
+    id: string;
+    number: string;
+    type: string;
+    countryCode: string;
+    validationStatus: string;
+    validatedAt: string | null;
+    isDefault: boolean;
+}
+
+interface TaxIdsClientProps {
+    taxIds: TaxId[];
+}
+
+function getStatusConfig(t: ReturnType<typeof useTranslations<'TaxIds'>>) {
+    return {
+        Pending: {label: t('statusPending'), variant: 'secondary' as const, icon: Clock},
+        Valid: {label: t('statusValid'), variant: 'default' as const, icon: FileCheck2},
+        Invalid: {label: t('statusInvalid'), variant: 'destructive' as const, icon: XCircle},
+        Expired: {label: t('statusExpired'), variant: 'outline' as const, icon: AlertTriangle},
+        Error: {label: t('statusError'), variant: 'destructive' as const, icon: AlertCircle},
+    };
+}
+
+function getTypeLabels(t: ReturnType<typeof useTranslations<'TaxIds'>>): Record<string, string> {
+    return {
+        'eu-vat': t('typeEuVat'),
+        'gb-vat': t('typeGbVat'),
+        'ch-uid': t('typeChUid'),
+        'custom': t('typeCustom'),
+    };
+}
+
+function StatusBadge({status, statusConfig}: { status: string; statusConfig: ReturnType<typeof getStatusConfig> }) {
+    const config = statusConfig[status as keyof typeof statusConfig] ?? {label: status, variant: 'outline' as const, icon: AlertCircle};
+    const Icon = config.icon;
+    return (
+        <Badge variant={config.variant} className="gap-1">
+            <Icon className="h-3 w-3"/>
+            {config.label}
+        </Badge>
+    );
+}
+
+/** Types where the country code is embedded as a 2-letter prefix in the number */
+const COUNTRY_PREFIX_TYPES = new Set(['eu-vat', 'gb-vat']);
+
+function extractCountryCode(number: string): string {
+    const match = number.trim().match(/^([A-Z]{2})/i);
+    return match ? match[1].toUpperCase() : '';
+}
+
+interface AddTaxIdFormValues {
+    number: string;
+    type: string;
+    countryCode: string;
+}
+
+export function TaxIdsClient({taxIds}: TaxIdsClientProps) {
+    const t = useTranslations('TaxIds');
+    const statusConfig = getStatusConfig(t);
+    const typeLabels = getTypeLabels(t);
+    const router = useRouter();
+    const [addDialogOpen, setAddDialogOpen] = useState(false);
+    const [deleteId, setDeleteId] = useState<string | null>(null);
+    const [isPending, startTransition] = useTransition();
+
+    const form = useForm<AddTaxIdFormValues>({
+        defaultValues: {number: '', type: 'eu-vat', countryCode: ''},
+    });
+
+    function handleAdd(values: AddTaxIdFormValues) {
+        startTransition(async () => {
+            try {
+                const countryCode = COUNTRY_PREFIX_TYPES.has(values.type)
+                    ? extractCountryCode(values.number)
+                    : values.countryCode.toUpperCase();
+                if (!countryCode) {
+                    alert('Could not determine country code. Make sure the number starts with a 2-letter country prefix (e.g. DE, FR, IE).');
+                    return;
+                }
+                await addTaxIdAction({
+                    number: values.number,
+                    type: values.type,
+                    countryCode,
+                });
+                setAddDialogOpen(false);
+                form.reset();
+                router.refresh();
+            } catch (e: any) {
+                alert(e.message || 'Failed to add tax ID');
+            }
+        });
+    }
+
+    function handleDelete(id: string) {
+        startTransition(async () => {
+            try {
+                await removeTaxIdAction(id);
+                setDeleteId(null);
+                router.refresh();
+            } catch (e: any) {
+                alert(e.message || 'Failed to remove tax ID');
+            }
+        });
+    }
+
+    function handleSetDefault(id: string) {
+        startTransition(async () => {
+            try {
+                await setDefaultTaxIdAction(id);
+                router.refresh();
+            } catch (e: any) {
+                alert(e.message || 'Failed to set default tax ID');
+            }
+        });
+    }
+
+    return (
+        <>
+            <div className="flex justify-end">
+                <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+                    <DialogTrigger asChild>
+                        <Button>
+                            <Plus className="h-4 w-4 mr-2"/>
+                            {t('addButton')}
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <form onSubmit={form.handleSubmit(handleAdd)}>
+                            <DialogHeader>
+                                <DialogTitle>{t('addDialogTitle')}</DialogTitle>
+                            </DialogHeader>
+                            <div className="space-y-4 py-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="number">{t('numberLabel')}</Label>
+                                    <Input
+                                        id="number"
+                                        placeholder={t('numberPlaceholder')}
+                                        {...form.register('number', {required: true})}
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="type">{t('typeLabel')}</Label>
+                                    <Select
+                                        value={form.watch('type')}
+                                        onValueChange={v => form.setValue('type', v)}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue/>
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="eu-vat">{t('typeEuVat')}</SelectItem>
+                                            <SelectItem value="gb-vat">{t('typeGbVat')}</SelectItem>
+                                            <SelectItem value="ch-uid">{t('typeChUid')}</SelectItem>
+                                            <SelectItem value="custom">{t('typeCustom')}</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                {!COUNTRY_PREFIX_TYPES.has(form.watch('type')) && (
+                                    <div className="space-y-2">
+                                        <Label htmlFor="countryCode">{t('countryCodeLabel')}</Label>
+                                        <Input
+                                            id="countryCode"
+                                            placeholder={t('countryCodePlaceholder')}
+                                            maxLength={2}
+                                            {...form.register('countryCode', {maxLength: 2})}
+                                            onChange={e => {
+                                                e.target.value = e.target.value.toUpperCase();
+                                                form.setValue('countryCode', e.target.value);
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                            <DialogFooter>
+                                <Button type="submit" disabled={isPending}>
+                                    {isPending ? t('addingButton') : t('addConfirmButton')}
+                                </Button>
+                            </DialogFooter>
+                        </form>
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            {taxIds.length === 0 ? (
+                <Card>
+                    <CardContent className="py-12 text-center">
+                        <p className="text-muted-foreground">{t('noTaxIds')}</p>
+                    </CardContent>
+                </Card>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {taxIds.map(taxId => (
+                        <Card key={taxId.id}>
+                            <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
+                                <div>
+                                    <CardTitle className="text-lg font-mono">
+                                        {taxId.number}
+                                    </CardTitle>
+                                    <p className="text-sm text-muted-foreground mt-1">
+                                        {typeLabels[taxId.type] ?? taxId.type} · {taxId.countryCode}
+                                    </p>
+                                </div>
+                                <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                                            <MoreHorizontal className="h-4 w-4"/>
+                                        </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                        {!taxId.isDefault && (
+                                            <DropdownMenuItem onClick={() => handleSetDefault(taxId.id)}>
+                                                <Star className="h-4 w-4 mr-2"/>
+                                                {t('setDefaultMenuItem')}
+                                            </DropdownMenuItem>
+                                        )}
+                                        <DropdownMenuItem
+                                            className="text-destructive"
+                                            onClick={() => setDeleteId(taxId.id)}
+                                        >
+                                            <Trash2 className="h-4 w-4 mr-2"/>
+                                            {t('removeMenuItem')}
+                                        </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                </DropdownMenu>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="flex items-center gap-2">
+                                    <StatusBadge status={taxId.validationStatus} statusConfig={statusConfig}/>
+                                    {taxId.isDefault && (
+                                        <Badge variant="outline" className="gap-1">
+                                            <Star className="h-3 w-3"/>
+                                            {t('defaultBadge')}
+                                        </Badge>
+                                    )}
+                                </div>
+                                {taxId.validatedAt && (
+                                    <p className="text-xs text-muted-foreground mt-2">
+                                        {t('validatedAt', {date: new Date(taxId.validatedAt).toLocaleDateString()})}
+                                    </p>
+                                )}
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            <AlertDialog open={deleteId !== null} onOpenChange={open => !open && setDeleteId(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t('removeDialogTitle')}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t('removeDialogDescription')}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>{t('cancelButton')}</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={() => deleteId && handleDelete(deleteId)}
+                            disabled={isPending}
+                        >
+                            {isPending ? t('removingButton') : t('removeConfirm')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+}