@vendure-platform/create 0.1.0

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

@@ -0,0 +1,248 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {client} from '@/lib/vendure/api';
+import {GetMyQuotesQuery} from '@/lib/vendure/queries';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {getActiveChannelCached} from '@/lib/vendure/cached';
+import {getActiveChannelToken} from '@/lib/channel-server';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from '@/components/ui/pagination';
+import {ErrorState} from '@/components/shared/error-state';
+import {ArrowRightIcon, Plus} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {Price} from '@/components/commerce/price';
+import {QuoteStatusBadge} from '@/components/commerce/quote-status-badge';
+import {formatDate} from '@/lib/format';
+import {setRequestLocale, getTranslations} from 'next-intl/server';
+import {Link, redirect} from '@/i18n/navigation';
+
+export const metadata: Metadata = {
+    title: 'Quotes',
+};
+
+const ITEMS_PER_PAGE = 10;
+
+type QuoteRow = {
+    id: string;
+    quoteNumber: string;
+    createdAt: string;
+    status: string;
+    requestedBy: string;
+    itemCount: number;
+    total: number | null;
+};
+
+type QuotesTranslations = Awaited<ReturnType<typeof getTranslations<'Quotes'>>>;
+
+function QuoteTable({quotes, locale, currencyCode, t}: {quotes: QuoteRow[]; locale: string; currencyCode: string; t: QuotesTranslations}) {
+    return (
+        <div className="border rounded-lg">
+            <Table>
+                <TableHeader className="bg-muted">
+                    <TableRow>
+                        <TableHead>{t('tableHeadQuoteNumber')}</TableHead>
+                        <TableHead>{t('tableHeadDate')}</TableHead>
+                        <TableHead>{t('tableHeadRequestedBy')}</TableHead>
+                        <TableHead>{t('tableHeadStatus')}</TableHead>
+                        <TableHead>{t('tableHeadItems')}</TableHead>
+                        <TableHead className="text-right">{t('tableHeadTotal')}</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {quotes.map((quote) => (
+                        <TableRow key={quote.id} className="hover:bg-muted/50">
+                            <TableCell className="font-medium">
+                                <Button asChild variant="outline">
+                                    <Link href={`/account/quotes/${quote.id}`}>
+                                        {quote.quoteNumber} <ArrowRightIcon/>
+                                    </Link>
+                                </Button>
+                            </TableCell>
+                            <TableCell>
+                                {formatDate(quote.createdAt, locale)}
+                            </TableCell>
+                            <TableCell>
+                                {quote.requestedBy}
+                            </TableCell>
+                            <TableCell>
+                                <QuoteStatusBadge status={quote.status}/>
+                            </TableCell>
+                            <TableCell>
+                                {t('itemCount', {count: quote.itemCount})}
+                            </TableCell>
+                            <TableCell className="text-right">
+                                {quote.total != null ? (
+                                    <Price value={quote.total} currencyCode={currencyCode} taxLabel="excl" />
+                                ) : (
+                                    '—'
+                                )}
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </div>
+    );
+}
+
+export default async function QuotesPage(props: {params: Promise<{locale: string}>; searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    return (
+        <Suspense fallback={<div><div className="flex items-center justify-between mb-6"><h1 className="text-3xl font-bold">Quotes</h1></div><p className="text-sm text-muted-foreground">Loading quotes...</p></div>}>
+            <QuotesContent params={props.params} searchParamsPromise={props.searchParams} />
+        </Suspense>
+    );
+}
+
+async function QuotesContent({params, searchParamsPromise}: {params: Promise<{locale: string}>; searchParamsPromise: Promise<Record<string, string | string[] | undefined>>}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const channelToken = await getActiveChannelToken();
+    const [t, searchParams, activeCustomer, channel] = await Promise.all([
+        getTranslations('Quotes'),
+        searchParamsPromise,
+        getActiveCustomer(),
+        getActiveChannelCached(channelToken),
+    ]);
+    const currencyCode = channel.defaultCurrencyCode;
+    const pageParam = searchParams.page;
+    const currentPage = parseInt(Array.isArray(pageParam) ? pageParam[0] : pageParam || '1', 10);
+    const skip = (currentPage - 1) * ITEMS_PER_PAGE;
+    if (!activeCustomer) return await redirect('/sign-in');
+
+    const [result, error] = await client.query(
+        GetMyQuotesQuery,
+        {
+            options: {
+                take: ITEMS_PER_PAGE,
+                skip,
+                sort: {createdAt: 'DESC' as any},
+            },
+        },
+    );
+    if (error) {
+        return (
+            <div>
+                <h1 className="text-3xl font-bold mb-6">Quotes</h1>
+                <ErrorState message="We couldn't load your quotes. Please try again later." />
+            </div>
+        );
+    }
+    const data = result.data;
+
+    const allQuotes = data.myQuotes.items;
+    const totalItems = data.myQuotes.totalItems;
+    const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+    // Split into own quotes and company members' quotes
+    const myQuoteRows: QuoteRow[] = [];
+    const companyQuoteRows: QuoteRow[] = [];
+
+    for (const quote of allQuotes) {
+        const row: QuoteRow = {
+            id: quote.id,
+            quoteNumber: quote.quoteNumber,
+            createdAt: quote.createdAt,
+            status: quote.status,
+            requestedBy: quote.customer
+                ? `${quote.customer.firstName} ${quote.customer.lastName}`
+                : '—',
+            itemCount: quote.currentVersion?.lineItems.length ?? 0,
+            total: quote.currentVersion?.total ?? null,
+        };
+        if (quote.customer?.id === activeCustomer.id) {
+            myQuoteRows.push(row);
+        } else {
+            companyQuoteRows.push(row);
+        }
+    }
+
+    return (
+        <div>
+            <div className="flex items-center justify-between mb-6">
+                <h1 className="text-3xl font-bold">{t('pageTitle')}</h1>
+                <Button asChild>
+                    <Link href="/account/quotes/new">
+                        <Plus className="h-4 w-4 mr-2" />
+                        {t('newQuoteButton')}
+                    </Link>
+                </Button>
+            </div>
+
+            {allQuotes.length === 0 ? (
+                <div className="text-center py-12">
+                    <p className="text-muted-foreground">{t('noQuotes')}</p>
+                </div>
+            ) : (
+                <div className="space-y-10">
+                    {myQuoteRows.length > 0 && (
+                        <section>
+                            <h2 className="text-2xl font-bold mb-4">{t('myQuotesHeading')}</h2>
+                            <QuoteTable quotes={myQuoteRows} locale={locale} currencyCode={currencyCode} t={t} />
+                        </section>
+                    )}
+
+                    {companyQuoteRows.length > 0 && (
+                        <section>
+                            <h2 className="text-2xl font-bold mb-4">{t('companyQuotesHeading')}</h2>
+                            <QuoteTable quotes={companyQuoteRows} locale={locale} currencyCode={currencyCode} t={t} />
+                        </section>
+                    )}
+                </div>
+            )}
+
+            {totalPages > 1 && (
+                <div className="mt-6">
+                    <Pagination>
+                        <PaginationContent>
+                            <PaginationItem>
+                                <PaginationPrevious
+                                    href={currentPage > 1 ? `/account/quotes?page=${currentPage - 1}` : '#'}
+                                    className={currentPage === 1 ? 'pointer-events-none opacity-50' : ''}
+                                />
+                            </PaginationItem>
+                            {Array.from({length: totalPages}, (_, i) => i + 1).map((page) => {
+                                if (page === 1 || page === totalPages || (page >= currentPage - 1 && page <= currentPage + 1)) {
+                                    return (
+                                        <PaginationItem key={page}>
+                                            <PaginationLink href={`/account/quotes?page=${page}`} isActive={page === currentPage}>
+                                                {page}
+                                            </PaginationLink>
+                                        </PaginationItem>
+                                    );
+                                } else if (page === currentPage - 2 || page === currentPage + 2) {
+                                    return (
+                                        <PaginationItem key={page}>
+                                            <PaginationEllipsis/>
+                                        </PaginationItem>
+                                    );
+                                }
+                                return null;
+                            })}
+                            <PaginationItem>
+                                <PaginationNext
+                                    href={currentPage < totalPages ? `/account/quotes?page=${currentPage + 1}` : '#'}
+                                    className={currentPage === totalPages ? 'pointer-events-none opacity-50' : ''}
+                                />
+                            </PaginationItem>
+                        </PaginationContent>
+                    </Pagination>
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/[id]/loading.tsx

@@ -0,0 +1,44 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function ShoppingListDetailLoading() {
+    return (
+        <div>
+            {/* Header */}
+            <div className="mb-6">
+                <Skeleton className="h-8 w-36 mb-4" />
+
+                <div className="flex items-center justify-between">
+                    <Skeleton className="h-9 w-48" />
+                    <div className="flex items-center gap-4">
+                        <Skeleton className="h-8 w-24" />
+                        <Skeleton className="h-8 w-20" />
+                    </div>
+                </div>
+            </div>
+
+            {/* Actions bar */}
+            <div className="flex items-center justify-between mb-4">
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-9 w-36" />
+            </div>
+
+            {/* Item list */}
+            <div className="space-y-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                    <div key={i} className="flex items-center gap-4 border rounded-lg p-4">
+                        <Skeleton className="w-20 h-20 rounded-md shrink-0" />
+                        <div className="flex-1 space-y-2">
+                            <Skeleton className="h-4 w-48" />
+                            <Skeleton className="h-3 w-32" />
+                            <Skeleton className="h-4 w-20" />
+                        </div>
+                        <div className="flex items-center gap-2 shrink-0">
+                            <Skeleton className="h-8 w-8" />
+                            <Skeleton className="h-8 w-8" />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/account/shopping-lists/[id]/page.tsx

@@ -0,0 +1,51 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { getActiveUserShoppingList, getActiveUserShoppingLists } from '../actions';
+import { notFound } from 'next/navigation';
+import { redirect } from '@/i18n/navigation';
+import { ShoppingListDetailClient } from './shopping-list-detail-client';
+
+export const metadata: Metadata = {
+    title: 'Shopping List',
+};
+
+export default async function ShoppingListDetailPage({ params }: { params: Promise<{ locale: string; id: string }> }) {
+    return (
+        <Suspense fallback={<div className="flex items-center justify-center py-12"><p className="text-sm text-muted-foreground">Loading...</p></div>}>
+            <ShoppingListDetailContent paramsPromise={params} />
+        </Suspense>
+    );
+}
+
+async function ShoppingListDetailContent({ paramsPromise }: { paramsPromise: Promise<{ locale: string; id: string }> }) {
+    const { id } = await paramsPromise;
+
+    const customer = await getActiveCustomer();
+    if (!customer) {
+        return await redirect('/sign-in');
+    }
+
+    const channelToken = await getActiveChannelToken();
+    const [shoppingList, allShoppingLists, channel] = await Promise.all([
+        getActiveUserShoppingList(id),
+        getActiveUserShoppingLists(),
+        getActiveChannelCached(channelToken),
+    ]);
+
+    if (!shoppingList) {
+        notFound();
+    }
+
+    const otherShoppingLists = (allShoppingLists ?? []).filter((w) => w.id !== id);
+
+    return (
+        <ShoppingListDetailClient
+            shoppingList={shoppingList}
+            otherShoppingLists={otherShoppingLists}
+            currencyCode={channel.defaultCurrencyCode}
+        />
+    );
+}