@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/business-unit-form.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Field, FieldLabel, FieldError, FieldGroup} from '@/components/ui/field';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import {useForm, Controller} from 'react-hook-form';
+import {Loader2} from 'lucide-react';
+import type {CompanyBusinessUnit, BUFormSubmitData} from './types';
+import {useTranslations} from 'next-intl';
+
+interface BusinessUnitFormData {
+    name: string;
+    email: string;
+    phone: string;
+    parentId: string;
+}
+
+interface BusinessUnitFormProps {
+    businessUnit?: CompanyBusinessUnit;
+    allBusinessUnits: CompanyBusinessUnit[];
+    onSubmit: (data: BUFormSubmitData) => Promise<void>;
+    onCancel: () => void;
+    isSubmitting: boolean;
+}
+
+function getDepth(buId: string, allBus: CompanyBusinessUnit[]): number {
+    let depth = 0;
+    let currentId = buId;
+    while (true) {
+        const bu = allBus.find(b => b.id === currentId);
+        if (!bu?.parent) break;
+        depth++;
+        currentId = bu.parent.id;
+    }
+    return depth;
+}
+
+function isDescendant(ancestorId: string, targetId: string, allBus: CompanyBusinessUnit[]): boolean {
+    const bu = allBus.find(b => b.id === targetId);
+    if (!bu) return false;
+    if (bu.children?.some(c => c.id === ancestorId)) return true;
+    return bu.children?.some(c => isDescendant(ancestorId, c.id, allBus)) ?? false;
+}
+
+export function BusinessUnitForm({businessUnit, allBusinessUnits, onSubmit, onCancel, isSubmitting}: BusinessUnitFormProps) {
+    const t = useTranslations('Company.businessUnits.form');
+    const {register, handleSubmit, formState: {errors}, control} = useForm<BusinessUnitFormData>({
+        defaultValues: {
+            name: businessUnit?.name || '',
+            email: businessUnit?.email || '',
+            phone: businessUnit?.phone || '',
+            parentId: businessUnit?.parent?.id || '__none__',
+        },
+    });
+
+    const availableParents = allBusinessUnits.filter(bu => {
+        if (businessUnit && bu.id === businessUnit.id) return false;
+        if (businessUnit && isDescendant(bu.id, businessUnit.id, allBusinessUnits)) return false;
+        const parentDepth = getDepth(bu.id, allBusinessUnits);
+        if (parentDepth >= 2) return false;
+        return true;
+    });
+
+    const handleFormSubmit = async (data: BusinessUnitFormData) => {
+        await onSubmit({
+            ...(businessUnit && {id: businessUnit.id}),
+            name: data.name,
+            email: data.email || undefined,
+            phone: data.phone || undefined,
+            parentId: data.parentId === '__none__' ? null : data.parentId,
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+            <FieldGroup className="my-6">
+                <Field>
+                    <FieldLabel htmlFor="name">{t('nameLabel')}</FieldLabel>
+                    <Input
+                        id="name"
+                        {...register('name', {required: t('nameRequired')})}
+                        disabled={isSubmitting}
+                    />
+                    <FieldError>{errors.name?.message}</FieldError>
+                </Field>
+
+                <Field>
+                    <FieldLabel htmlFor="email">{t('emailLabel')}</FieldLabel>
+                    <Input
+                        id="email"
+                        type="email"
+                        {...register('email')}
+                        disabled={isSubmitting}
+                    />
+                </Field>
+
+                <Field>
+                    <FieldLabel htmlFor="phone">{t('phoneLabel')}</FieldLabel>
+                    <Input
+                        id="phone"
+                        type="tel"
+                        {...register('phone')}
+                        disabled={isSubmitting}
+                    />
+                </Field>
+
+                <Field>
+                    <FieldLabel>{t('parentLabel')}</FieldLabel>
+                    <Controller
+                        name="parentId"
+                        control={control}
+                        render={({field}) => (
+                            <Select
+                                value={field.value}
+                                onValueChange={field.onChange}
+                                disabled={isSubmitting}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue placeholder={t('parentNone')} />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="__none__">{t('parentNone')}</SelectItem>
+                                    {availableParents.map(bu => (
+                                        <SelectItem key={bu.id} value={bu.id}>
+                                            {bu.name}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+                    />
+                </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" />}
+                    {businessUnit ? t('updateButton') : t('createButton')}
+                </Button>
+            </div>
+        </form>
+    );
+}

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

@@ -0,0 +1,210 @@
+'use client';
+
+import {useState} from 'react';
+import {useTranslations} from 'next-intl';
+import {Button} from '@/components/ui/button';
+import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from '@/components/ui/dialog';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {Plus, Edit2, Trash2} from 'lucide-react';
+import {BusinessUnitForm} from './business-unit-form';
+import {createBusinessUnitAction, updateBusinessUnitAction, deleteBusinessUnitAction} from './actions';
+import {useRouter} from '@/i18n/navigation';
+import type {CompanyBusinessUnit, BUFormSubmitData} from './types';
+
+interface BusinessUnitsClientProps {
+    businessUnits: CompanyBusinessUnit[];
+}
+
+function BusinessUnitNode({
+    bu,
+    allBusinessUnits,
+    depth,
+    onEdit,
+    onDelete,
+}: {
+    bu: CompanyBusinessUnit;
+    allBusinessUnits: CompanyBusinessUnit[];
+    depth: number;
+    onEdit: (bu: CompanyBusinessUnit) => void;
+    onDelete: (bu: CompanyBusinessUnit) => void;
+}) {
+    const children = allBusinessUnits.filter(b => b.parent?.id === bu.id);
+
+    return (
+        <div>
+            <div
+                className="flex items-center justify-between py-3 px-4 border rounded-md bg-card"
+                style={{marginLeft: depth * 24}}
+            >
+                <div className="space-y-1">
+                    <div className="font-medium">{bu.name}</div>
+                    <div className="text-sm text-muted-foreground space-x-4">
+                        {bu.email && <span>{bu.email}</span>}
+                        {bu.phone && <span>{bu.phone}</span>}
+                    </div>
+                </div>
+                <div className="flex gap-1">
+                    <Button variant="ghost" size="icon" onClick={() => onEdit(bu)} aria-label="Edit">
+                        <Edit2 className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => onDelete(bu)} aria-label="Delete">
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                </div>
+            </div>
+            {children.map(child => (
+                <BusinessUnitNode
+                    key={child.id}
+                    bu={allBusinessUnits.find(b => b.id === child.id) || child}
+                    allBusinessUnits={allBusinessUnits}
+                    depth={depth + 1}
+                    onEdit={onEdit}
+                    onDelete={onDelete}
+                />
+            ))}
+        </div>
+    );
+}
+
+export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
+    const t = useTranslations('Company.businessUnits');
+    const router = useRouter();
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingBu, setEditingBu] = useState<CompanyBusinessUnit | null>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [buToDelete, setBuToDelete] = useState<CompanyBusinessUnit | null>(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    const handleAddNew = () => {
+        setEditingBu(null);
+        setDialogOpen(true);
+    };
+
+    const handleEdit = (bu: CompanyBusinessUnit) => {
+        setEditingBu(bu);
+        setDialogOpen(true);
+    };
+
+    const handleDelete = (bu: CompanyBusinessUnit) => {
+        setBuToDelete(bu);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleSubmit = async (data: BUFormSubmitData) => {
+        setIsSubmitting(true);
+        try {
+            if (data.id) {
+                await updateBusinessUnitAction({id: data.id, name: data.name, email: data.email, phone: data.phone, parentId: data.parentId});
+            } else {
+                await createBusinessUnitAction({name: data.name, email: data.email, phone: data.phone, parentId: data.parentId});
+            }
+            router.refresh();
+            setDialogOpen(false);
+            setEditingBu(null);
+        } catch (error) {
+            console.error('Error saving business unit:', error);
+            alert(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    const confirmDelete = async () => {
+        if (!buToDelete) return;
+        setIsDeleting(true);
+        try {
+            await deleteBusinessUnitAction(buToDelete.id);
+            router.refresh();
+            setDeleteDialogOpen(false);
+            setBuToDelete(null);
+        } catch (error) {
+            console.error('Error deleting business unit:', error);
+            alert(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        } finally {
+            setIsDeleting(false);
+        }
+    };
+
+    const topLevelBus = businessUnits.filter(bu => !bu.parent);
+
+    return (
+        <>
+            <div className="flex justify-between items-center">
+                <div></div>
+                <Button onClick={handleAddNew}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    {t('addButton')}
+                </Button>
+            </div>
+
+            {businessUnits.length === 0 ? (
+                <div className="text-center py-12 text-muted-foreground">
+                    {t('noBusinessUnits')}
+                </div>
+            ) : (
+                <div className="space-y-2">
+                    {topLevelBus.map(bu => (
+                        <BusinessUnitNode
+                            key={bu.id}
+                            bu={bu}
+                            allBusinessUnits={businessUnits}
+                            depth={0}
+                            onEdit={handleEdit}
+                            onDelete={handleDelete}
+                        />
+                    ))}
+                </div>
+            )}
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>{editingBu ? t('editDialogTitle') : t('addDialogTitle')}</DialogTitle>
+                        <DialogDescription>
+                            {editingBu
+                                ? t('editDialogDescription')
+                                : t('addDialogDescription')}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <BusinessUnitForm
+                        businessUnit={editingBu || undefined}
+                        allBusinessUnits={businessUnits}
+                        onSubmit={handleSubmit}
+                        onCancel={() => {
+                            setDialogOpen(false);
+                            setEditingBu(null);
+                        }}
+                        isSubmitting={isSubmitting}
+                    />
+                </DialogContent>
+            </Dialog>
+
+            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t('deleteDialogTitle')}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t('deleteDialogDescription', {name: buToDelete?.name ?? ''})}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={isDeleting}>{t('cancelButton')}</AlertDialogCancel>
+                        <AlertDialogAction onClick={confirmDelete} disabled={isDeleting}>
+                            {isDeleting ? t('deletingButton') : t('deleteConfirm')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/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 {getCompanyAccount} from '@/lib/vendure/actions';
+import {client} from '@/lib/vendure/api';
+import {GetCompanyBusinessUnitsQuery} from '@/lib/vendure/queries';
+import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
+import {ErrorState} from '@/components/shared/error-state';
+import {BusinessUnitsClient} from './business-units-client';
+import {getTranslations} from 'next-intl/server';
+
+export const metadata: Metadata = {
+    title: 'Business Units',
+};
+
+async function BusinessUnitsContent() {
+    const [t, companyAccount] = await Promise.all([
+        getTranslations('Company.businessUnits'),
+        getCompanyAccount(),
+    ]);
+
+    if (!companyAccount) {
+        await redirect('/account/orders');
+        return;
+    }
+
+    const {permissions} = companyAccount;
+
+    if (!permissions.includes('ManageBusinessUnits')) {
+        await redirect('/account/orders');
+    }
+
+    const [result, error] = await client.query(GetCompanyBusinessUnitsQuery, undefined);
+    if (error) {
+        return (
+            <ErrorState message="We couldn't load this page. Please try again later." />
+        );
+    }
+    const businessUnits = (result.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>
+
+            <BusinessUnitsClient businessUnits={businessUnits} />
+        </div>
+    );
+}
+
+export default function BusinessUnitsPage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <BusinessUnitsContent />
+        </Suspense>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/types.ts

@@ -0,0 +1,8 @@
+import type {ResultOf, VariablesOf} from '@/graphql';
+import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
+import {CreateCompanyBusinessUnitMutation, UpdateCompanyBusinessUnitMutation} from '@/lib/vendure/mutations';
+
+export type CompanyBusinessUnit = ResultOf<typeof CompanyBusinessUnitFragment>;
+export type CreateBUInput = VariablesOf<typeof CreateCompanyBusinessUnitMutation>['input'];
+export type UpdateBUInput = VariablesOf<typeof UpdateCompanyBusinessUnitMutation>['input'];
+export type BUFormSubmitData = CreateBUInput & {id?: string};

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

@@ -0,0 +1,57 @@
+'use client';
+
+import {useActionState} from 'react';
+import {updateCompanyAction} from './actions';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {useTranslations} from 'next-intl';
+
+interface EditCompanyFormProps {
+    companyName: string;
+}
+
+export function EditCompanyForm({companyName}: EditCompanyFormProps) {
+    const t = useTranslations('Company.editCompany');
+    const [state, formAction, isPending] = useActionState(updateCompanyAction, undefined);
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('cardTitle')}</CardTitle>
+                <CardDescription>
+                    {t('cardDescription')}
+                </CardDescription>
+            </CardHeader>
+            <form action={formAction}>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="companyName">{t('companyNameLabel')}</Label>
+                        <Input
+                            id="companyName"
+                            name="companyName"
+                            type="text"
+                            defaultValue={companyName}
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    {state?.error && (
+                        <div className="text-sm text-destructive">
+                            {state.error}
+                        </div>
+                    )}
+                    {state?.success && (
+                        <div className="text-sm text-green-600">
+                            {t('updateSuccess')}
+                        </div>
+                    )}
+                    <Button type="submit" disabled={isPending}>
+                        {isPending ? t('updatingButton') : t('updateButton')}
+                    </Button>
+                </CardContent>
+            </form>
+        </Card>
+    );
+}

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

@@ -0,0 +1,89 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {redirect} from '@/i18n/navigation';
+import {Clock} from 'lucide-react';
+import {getCompanyAccount, getMyCompanies} from '@/lib/vendure/actions';
+import {CompanyStateBadge} from '@/components/commerce/company-state-badge';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {EditCompanyForm} from './edit-company-form';
+import {getTranslations} from 'next-intl/server';
+
+export const metadata: Metadata = {
+    title: 'Company Profile',
+};
+
+async function CompanyProfileContent() {
+    const [t, companyAccount] = await Promise.all([
+        getTranslations('Company'),
+        getCompanyAccount(),
+    ]);
+
+    if (!companyAccount) {
+        // Company context not available (requires Active company state) —
+        // check if user has a non-active company (e.g. Pending approval).
+        // Note: c.state is the Company entity state, not the CompanyUser state.
+        const companies = await getMyCompanies();
+        const pendingCompany = companies.find(c => c.state !== 'Active');
+        if (pendingCompany) {
+            return (
+                <div className="space-y-6">
+                    <div>
+                        <div className="flex items-center gap-3">
+                            <h1 className="text-3xl font-bold">{pendingCompany.name}</h1>
+                            <CompanyStateBadge state={pendingCompany.state} />
+                        </div>
+                    </div>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle className="flex items-center gap-2">
+                                <Clock className="h-5 w-5 text-amber-500" />
+                                {t('pendingRegistrationTitle')}
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <p className="text-muted-foreground">
+                                {t('pendingRegistrationMessage')}
+                            </p>
+                        </CardContent>
+                    </Card>
+                </div>
+            );
+        }
+        await redirect('/account/orders');
+        return;
+    }
+
+    const {company, companyUser, permissions} = companyAccount;
+    const canManageCompany = permissions.includes('ManageCompany');
+    const roleNames = companyUser.companyRoles.map((r: {name: string}) => r.name).join(', ');
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <div className="flex items-center gap-3">
+                    <h1 className="text-3xl font-bold">{company.name}</h1>
+                    <CompanyStateBadge state={company.state} />
+                </div>
+                <p className="text-muted-foreground mt-2">
+                    {roleNames ? t('yourRole', {roleNames}) : t('companyMember')}
+                </p>
+            </div>
+
+            {canManageCompany && (
+                <EditCompanyForm companyName={company.name} />
+            )}
+        </div>
+    );
+}
+
+export default function CompanyPage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <CompanyProfileContent />
+        </Suspense>
+    );
+}

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

@@ -0,0 +1,65 @@
+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 {GetCompanyPaymentMethodsQuery} from '@/lib/vendure/queries';
+import {CompanyPaymentMethodFragment} from '@/lib/vendure/fragments';
+import {ErrorState} from '@/components/shared/error-state';
+import {PaymentMethodsClient} from './payment-methods-client';
+import {getTranslations} from 'next-intl/server';
+
+export const metadata: Metadata = {
+    title: 'Company Payment Methods',
+};
+
+async function CompanyPaymentMethodsContent() {
+    const [t, companyAccount] = await Promise.all([
+        getTranslations('Company.paymentMethods'),
+        getCompanyAccount(),
+    ]);
+
+    if (!companyAccount) {
+        await redirect('/account/orders');
+        return;
+    }
+
+    const {permissions} = companyAccount;
+    if (!permissions.includes('ManagePaymentMethods')) {
+        await redirect('/account/orders');
+    }
+
+    const [result, error] = await client.query(GetCompanyPaymentMethodsQuery, {});
+    if (error) {
+        return (
+            <ErrorState message="We couldn't load this page. Please try again later." />
+        );
+    }
+    const paymentMethods = (result.data.companyPaymentMethods ?? []).map(pm => readFragment(CompanyPaymentMethodFragment, pm));
+
+    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>
+
+            <PaymentMethodsClient paymentMethods={paymentMethods} />
+        </div>
+    );
+}
+
+export default function CompanyPaymentMethodsPage() {
+    return (
+        <Suspense fallback={
+            <div className="text-center py-12">
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </div>
+        }>
+            <CompanyPaymentMethodsContent />
+        </Suspense>
+    );
+}