@vendure-platform/create 0.1.0

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

@@ -0,0 +1,340 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {ExternalLink} from 'lucide-react';
+import {client} from '@/lib/vendure/api';
+import {GetMyApprovalRequestsQuery, GetOrderSummaryQuery} from '@/lib/vendure/queries';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {redirect} from '@/i18n/navigation';
+import {ErrorState} from '@/components/shared/error-state';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {ApprovalStatusBadge} from '@/components/commerce/approval-status-badge';
+import {ApprovalDecisionForm} from '@/components/commerce/approval-decision-form';
+import {Price} from '@/components/commerce/price';
+import {formatDate, formatDateTime} from '@/lib/format';
+import {setRequestLocale, getTranslations} from 'next-intl/server';
+import {Link} from '@/i18n/navigation';
+import {Button} from '@/components/ui/button';
+import Image from 'next/image';
+import {ResultOf} from '@/graphql';
+
+export const metadata: Metadata = {
+    title: 'Approvals',
+};
+
+type ApprovalRequest = NonNullable<ResultOf<typeof GetMyApprovalRequestsQuery>['myApprovalRequests']>['items'][number];
+type OrderSummary = NonNullable<ResultOf<typeof GetOrderSummaryQuery>['orderByCode']>;
+type ApprovalsTranslations = Awaited<ReturnType<typeof getTranslations<'Approvals'>>>;
+
+/**
+ * Extracts the order code from an approval request summary string.
+ * Coupled to the server-side summary template format: "Order #<code> ..."
+ */
+function parseOrderCode(summary: string | null | undefined): string | null {
+    return summary?.match(/^Order #(\S+)/)?.[1] ?? null;
+}
+
+async function fetchOrderSummaries(
+    requests: Array<{ entityType: string; summary: string | null }>,
+): Promise<Map<string, OrderSummary>> {
+    const orderCodes = requests
+        .filter(r => r.entityType === 'Order')
+        .map(r => parseOrderCode(r.summary))
+        .filter((code): code is string => code != null);
+
+    const uniqueCodes = [...new Set(orderCodes)];
+    const orderMap = new Map<string, OrderSummary>();
+
+    await Promise.all(
+        uniqueCodes.map(async (code) => {
+            const [result, error] = await client.query(GetOrderSummaryQuery, {code});
+            if (!error && result?.data?.orderByCode) {
+                orderMap.set(code, result.data.orderByCode);
+            }
+        }),
+    );
+
+    return orderMap;
+}
+
+function PendingApprovalCard({
+    request,
+    orderMap,
+    locale,
+    t,
+}: {
+    request: ApprovalRequest;
+    orderMap: Map<string, OrderSummary>;
+    locale: string;
+    t: ApprovalsTranslations;
+}) {
+    const orderCode = parseOrderCode(request.summary);
+    const order = orderCode ? orderMap.get(orderCode) : undefined;
+    const requester = request.requestedByCustomer ?? order?.customer;
+    const lines = order?.lines ?? [];
+    const visibleLines = lines.slice(0, 3);
+    const remainingCount = lines.length - visibleLines.length;
+
+    return (
+        <Card>
+            <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                    <div>
+                        {order ? (
+                            <CardTitle className="text-base">
+                                Order {order.code}
+                                <span className="ml-2 text-sm font-normal text-muted-foreground">
+                                    <Price value={order.totalWithTax} currencyCode={order.currencyCode} />
+                                </span>
+                            </CardTitle>
+                        ) : (
+                            <CardTitle className="text-base">
+                                {request.entityType} #{request.entityId}
+                            </CardTitle>
+                        )}
+                        <p className="text-sm text-muted-foreground mt-0.5">
+                            {requester && (
+                                <span>{t('requestedBy', {name: `${requester.firstName} ${requester.lastName}`})} &middot; </span>
+                            )}
+                            {formatDateTime(request.createdAt, locale)}
+                        </p>
+                    </div>
+                    <ApprovalStatusBadge status={request.status}/>
+                </div>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {visibleLines.length > 0 && (
+                    <div className="space-y-2">
+                        {visibleLines.map((line) => (
+                            <div key={line.id} className="flex items-center gap-3 text-sm">
+                                <div className="relative h-10 w-10 rounded overflow-hidden bg-gray-100 flex-shrink-0">
+                                    {line.productVariant.product.featuredAsset && (
+                                        <Image
+                                            src={line.productVariant.product.featuredAsset.preview + '?w=80&h=80'}
+                                            alt={line.productVariant.product.name}
+                                            fill
+                                            className="object-cover"
+                                        />
+                                    )}
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <p className="truncate font-medium">{line.productVariant.product.name}</p>
+                                    <p className="text-xs text-muted-foreground">
+                                        {line.productVariant.name} &middot; {t('quantityLabel', {qty: line.quantity})}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                        {remainingCount > 0 && (
+                            <p className="text-xs text-muted-foreground pl-[52px]">
+                                {t('andMoreItems', {count: remainingCount})}
+                            </p>
+                        )}
+                    </div>
+                )}
+                {!order && request.summary && (
+                    <p className="text-sm">{request.summary}</p>
+                )}
+                {orderCode && (
+                    <Button variant="outline" size="sm" asChild>
+                        <Link href={`/account/orders/${orderCode}`}>
+                            <ExternalLink className="h-3.5 w-3.5 mr-1.5" />
+                            {t('viewOrderButton')}
+                        </Link>
+                    </Button>
+                )}
+                <ApprovalDecisionForm approvalRequestId={request.id}/>
+            </CardContent>
+        </Card>
+    );
+}
+
+/** Group history requests by entity (order), showing one card per order with all approval rounds. */
+function groupByEntity(requests: ApprovalRequest[]): Array<{ key: string; orderCode: string | null; requester: string; requests: ApprovalRequest[] }> {
+    const groups = new Map<string, { orderCode: string | null; requester: string; requests: ApprovalRequest[] }>();
+    for (const r of requests) {
+        const key = `${r.entityType}:${r.entityId}`;
+        if (!groups.has(key)) {
+            const requester = r.requestedByCustomer;
+            groups.set(key, {
+                orderCode: parseOrderCode(r.summary),
+                requester: requester ? `${requester.firstName} ${requester.lastName}` : '',
+                requests: [],
+            });
+        }
+        groups.get(key)!.requests.push(r);
+    }
+    return [...groups.entries()].map(([key, group]) => ({ key, ...group }));
+}
+
+function HistoryGroupCard({
+    orderCode,
+    requester,
+    requests,
+    locale,
+    t,
+}: {
+    orderCode: string | null;
+    requester: string;
+    requests: ApprovalRequest[];
+    locale: string;
+    t: ApprovalsTranslations;
+}) {
+    // Latest request determines the overall status shown in the header
+    const latest = requests[0];
+
+    return (
+        <Card>
+            <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                    <div>
+                        {orderCode ? (
+                            <CardTitle className="text-base">
+                                <Link href={`/account/orders/${orderCode}`} className="text-primary hover:underline">
+                                    Order {orderCode}
+                                </Link>
+                            </CardTitle>
+                        ) : (
+                            <CardTitle className="text-base">
+                                {latest.entityType} #{latest.entityId}
+                            </CardTitle>
+                        )}
+                        {requester && (
+                            <p className="text-sm text-muted-foreground mt-0.5">{requester}</p>
+                        )}
+                    </div>
+                    <ApprovalStatusBadge status={latest.status}/>
+                </div>
+            </CardHeader>
+            <CardContent className="pt-0">
+                <div className="text-xs text-muted-foreground space-y-2">
+                    {requests.map((r) => {
+                        const madeDecisions = r.decisions?.filter(d => d.decision !== 'PENDING') ?? [];
+                        if (madeDecisions.length === 0) return null;
+                        return (
+                            <div key={r.id}>
+                                <span className="text-muted-foreground/60">{formatDateTime(r.createdAt, locale)}</span>
+                                {madeDecisions.map(d => (
+                                    <div key={d.id} className="ml-2">
+                                        {d.customer
+                                            ? `${d.customer.firstName} ${d.customer.lastName}`
+                                            : t('adminLabel')}{' '}
+                                        — {d.decision}
+                                        {d.comment && ` ("${d.comment}")`}
+                                    </div>
+                                ))}
+                            </div>
+                        );
+                    })}
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+const APPROVALS_PAGE_SIZE = 50;
+
+async function ApprovalsContent({params}: {params: Promise<{locale: string}>}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const [t, activeCustomer] = await Promise.all([
+        getTranslations('Approvals'),
+        getActiveCustomer(),
+    ]);
+    if (!activeCustomer) {
+        return await redirect('/sign-in');
+    }
+
+    const [result, error] = await client.query(
+        GetMyApprovalRequestsQuery,
+        {options: {take: APPROVALS_PAGE_SIZE, sort: {createdAt: 'DESC'}}},
+    );
+    if (error) {
+        return (
+            <ErrorState message="We couldn't load this page. Please try again later." />
+        );
+    }
+    const {data} = result;
+    const allRequests = data.myApprovalRequests?.items ?? [];
+
+    if (allRequests.length === 0) {
+        return (
+            <div className="text-center py-12">
+                <p className="text-muted-foreground">{t('noApprovalRequests')}</p>
+            </div>
+        );
+    }
+
+    // Categorize: requests where I have a pending decision vs everything else.
+    // A request with no decisions yet (workflow still initializing) is treated as
+    // pending if the status is PENDING or IN_PROGRESS and I'm not the requester,
+    // since it likely hasn't assigned approvers yet.
+    const pendingApprovals = allRequests.filter(r =>
+        r.decisions?.some(d =>
+            d.decision === 'PENDING' && d.customer?.id === activeCustomer.id,
+        ),
+    );
+    const pastAndOther = allRequests.filter(r =>
+        !pendingApprovals.includes(r),
+    );
+
+    // Only fetch order summaries for pending approvals (history rows don't need them)
+    const orderMap = await fetchOrderSummaries(pendingApprovals);
+
+    return (
+        <div className="space-y-10">
+            {pendingApprovals.length > 0 && (
+                <section>
+                    <h2 className="text-2xl font-bold mb-4">{t('pendingDecisionsHeading')}</h2>
+                    <p className="text-sm text-muted-foreground mb-4">
+                        {t('pendingDecisionsCount', {count: pendingApprovals.length})}
+                    </p>
+                    <div className="space-y-4">
+                        {pendingApprovals.map((request) => (
+                            <PendingApprovalCard
+                                key={request.id}
+                                request={request}
+                                orderMap={orderMap}
+                                locale={locale}
+                                t={t}
+                            />
+                        ))}
+                    </div>
+                </section>
+            )}
+
+            {pastAndOther.length > 0 && (
+                <section>
+                    <h2 className="text-2xl font-bold mb-4">{t('historyHeading')}</h2>
+                    <div className="space-y-3">
+                        {groupByEntity(pastAndOther).map((group) => (
+                            <HistoryGroupCard
+                                key={group.key}
+                                orderCode={group.orderCode}
+                                requester={group.requester}
+                                requests={group.requests}
+                                locale={locale}
+                                t={t}
+                            />
+                        ))}
+                    </div>
+                </section>
+            )}
+        </div>
+    );
+}
+
+export default async function ApprovalsPage({params}: {params: Promise<{locale: string}>}) {
+    const t = await getTranslations('Approvals');
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">{t('pageTitle')}</h1>
+            <Suspense fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">{t('loading')}</p>
+                </div>
+            }>
+                <ApprovalsContent params={params}/>
+            </Suspense>
+        </div>
+    );
+}

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

@@ -0,0 +1,33 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {UpdateCompanyAccountMutation} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+export async function updateCompanyAction(
+    prevState: { error?: string; success?: boolean } | undefined,
+    formData: FormData,
+) {
+    const companyName = formData.get('companyName') as string;
+
+    if (!companyName?.trim()) {
+        return {error: 'Company name is required'};
+    }
+
+    const [result, error] = await client.mutate(
+        UpdateCompanyAccountMutation,
+        {input: {name: companyName.trim()}},
+    );
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    if (!result.data.updateCompanyAccount?.company) {
+        return {error: 'Failed to update company'};
+    }
+
+    revalidatePath('/account/company');
+    revalidatePath('/', 'layout');
+    return {success: true};
+}

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

@@ -0,0 +1,83 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    CreateCompanyAddressMutation,
+    UpdateCompanyAddressMutation,
+    DeleteCompanyAddressMutation,
+} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+interface CreateCompanyAddressInput {
+    fullName: string;
+    streetLine1: string;
+    streetLine2?: string;
+    province?: string;
+    countryCode: string;
+    city?: string;
+    postalCode?: string;
+    phoneNumber?: string;
+    defaultShippingAddress: boolean;
+    defaultBillingAddress: boolean;
+    businessUnitId?: string;
+}
+
+interface UpdateCompanyAddressInput {
+    id: string;
+    fullName?: string;
+    streetLine1?: string;
+    streetLine2?: string;
+    province?: string;
+    countryCode?: string;
+    city?: string;
+    postalCode?: string;
+    phoneNumber?: string;
+    defaultShippingAddress?: boolean;
+    defaultBillingAddress?: boolean;
+    businessUnitId?: string;
+}
+
+export async function createCompanyAddressAction(input: CreateCompanyAddressInput) {
+    const [result, error] = await client.mutate(
+        CreateCompanyAddressMutation,
+        {input},
+    );
+    if (error) throw error;
+
+    if (!result.data.createCompanyAddress) {
+        throw new Error('Failed to create company address');
+    }
+
+    revalidatePath('/account/company/addresses');
+    return result.data.createCompanyAddress;
+}
+
+export async function updateCompanyAddressAction(input: UpdateCompanyAddressInput) {
+    const [result, error] = await client.mutate(
+        UpdateCompanyAddressMutation,
+        {input},
+    );
+    if (error) throw error;
+
+    if (!result.data.updateCompanyAddress) {
+        throw new Error('Failed to update company address');
+    }
+
+    revalidatePath('/account/company/addresses');
+    return result.data.updateCompanyAddress;
+}
+
+export async function deleteCompanyAddressAction(id: string) {
+    const [result, error] = await client.mutate(
+        DeleteCompanyAddressMutation,
+        {id},
+    );
+    if (error) throw error;
+
+    if (result.data.deleteCompanyAddress.result !== 'DELETED') {
+        throw new Error(result.data.deleteCompanyAddress.message || 'Failed to delete company address');
+    }
+
+    revalidatePath('/account/company/addresses');
+    return result.data.deleteCompanyAddress;
+}