@vendure-platform/create 0.1.0

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

@@ -0,0 +1,260 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {ChevronLeft, AlertTriangle, Info} from 'lucide-react';
+import {client} from '@/lib/vendure/api';
+import {GetMyQuoteDetailQuery} from '@/lib/vendure/queries';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Separator} from '@/components/ui/separator';
+import {Price} from '@/components/commerce/price';
+import {QuoteStatusBadge} from '@/components/commerce/quote-status-badge';
+import {QuoteActionButtons} from '@/components/commerce/quote-action-buttons';
+import {QuoteVersionComparison} from '@/components/commerce/quote-version-comparison';
+import {QuoteActivityTimeline} from '@/components/commerce/quote-activity-timeline';
+import {QuoteValidityIndicator} from '@/components/commerce/quote-validity-indicator';
+import {QuoteCsvExportButton} from '@/components/commerce/quote-csv-export-button';
+import {formatDate} from '@/lib/format';
+import {getActiveChannelCached} from '@/lib/vendure/cached';
+import {getActiveChannelToken} from '@/lib/channel-server';
+import {setRequestLocale, getTranslations} from 'next-intl/server';
+import {Link, redirect} from '@/i18n/navigation';
+
+const TERMINAL_STATUSES = new Set(['ACCEPTED', 'REJECTED', 'CANCELLED', 'EXPIRED']);
+
+interface QuoteDetailPageProps {
+    params: Promise<{locale: string; id: string}>;
+}
+
+export async function generateMetadata({params}: QuoteDetailPageProps): Promise<Metadata> {
+    const {id} = await params;
+    return {
+        title: `Quote ${id}`,
+    };
+}
+
+type QuoteDetailTranslations = Awaited<ReturnType<typeof getTranslations<'Quotes'>>>;
+
+function getValidityBanner(validUntil: string | null | undefined, t: QuoteDetailTranslations) {
+    if (!validUntil) return null;
+    const daysRemaining = Math.ceil(
+        (new Date(validUntil).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
+    );
+    if (daysRemaining < 0) {
+        return (
+            <div className="rounded-lg border border-red-200 bg-red-50 p-4 mb-6">
+                <div className="flex gap-3">
+                    <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5"/>
+                    <div>
+                        <h3 className="font-medium text-red-900">{t('quoteExpiredTitle')}</h3>
+                        <p className="text-sm text-red-800 mt-1">
+                            {t('quoteExpiredMessage')}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    if (daysRemaining <= 3) {
+        return (
+            <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 mb-6">
+                <div className="flex gap-3">
+                    <AlertTriangle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5"/>
+                    <div>
+                        <h3 className="font-medium text-amber-900">{t('quoteExpiringSoonTitle')}</h3>
+                        <p className="text-sm text-amber-800 mt-1">
+                            {t('quoteExpiresIn', {days: daysRemaining})}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    return null;
+}
+
+export default async function QuoteDetailPage(props: QuoteDetailPageProps) {
+    return (
+        <Suspense fallback={<div><p className="text-sm text-muted-foreground">Loading quote...</p></div>}>
+            <QuoteDetailContent paramsPromise={props.params} />
+        </Suspense>
+    );
+}
+
+async function QuoteDetailContent({paramsPromise}: {paramsPromise: Promise<{locale: string; id: string}>}) {
+    const {locale, id} = await paramsPromise;
+    setRequestLocale(locale);
+    const channelToken = await getActiveChannelToken();
+    const [t, [result, error], channel] = await Promise.all([
+        getTranslations('Quotes'),
+        client.query(GetMyQuoteDetailQuery, {id}),
+        getActiveChannelCached(channelToken),
+    ]);
+    const currencyCode = channel.defaultCurrencyCode;
+    if (error) {
+        return await redirect('/account/quotes');
+    }
+
+    const quote = result.data.myQuote;
+    if (!quote) {
+        return await redirect('/account/quotes');
+    }
+    const version = quote.currentVersion;
+    const isTerminal = TERMINAL_STATUSES.has(quote.status);
+    const v1 = quote.versions.find(v => v.versionNumber === 1);
+    const v1LineItems = v1 && quote.versions.length > 1
+        ? v1.lineItems.map(item => ({sku: item.sku, unitPrice: item.unitPrice}))
+        : undefined;
+
+    return (
+        <div>
+            <div className="mb-6">
+                <Button variant="ghost" size="sm" asChild className="mb-4">
+                    <Link href="/account/quotes">
+                        <ChevronLeft className="h-4 w-4 mr-2"/>
+                        {t('backToQuotes')}
+                    </Link>
+                </Button>
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <div>
+                            <h1 className="text-3xl font-bold">Quote {quote.quoteNumber}</h1>
+                            <p className="text-muted-foreground mt-1">
+                                {t('createdOn', {date: formatDate(quote.createdAt, locale, 'long')})}
+                            </p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        {version && (
+                            <QuoteCsvExportButton
+                                quoteNumber={quote.quoteNumber}
+                                lineItems={version.lineItems}
+                                subtotal={version.subtotal}
+                                shippingCost={version.shippingCost}
+                                total={version.total}
+                                v1LineItems={v1LineItems}
+                            />
+                        )}
+                        <QuoteStatusBadge status={quote.status}/>
+                    </div>
+                </div>
+            </div>
+
+            {quote.status === 'IN_REVIEW' && (
+                <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 mb-6">
+                    <div className="flex gap-3">
+                        <Info className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5"/>
+                        <div>
+                            <h3 className="font-medium text-blue-900">{t('inReviewBannerTitle')}</h3>
+                            <p className="text-sm text-blue-800 mt-1">
+                                {t('inReviewBannerMessage')}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {!isTerminal && getValidityBanner(quote.validUntil, t)}
+
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                {/* Left Column - Line Items, Summary, Versions, Comments */}
+                <div className="lg:col-span-2 space-y-6">
+                    {/* Line Items */}
+                    {version && (
+                        <QuoteVersionComparison
+                            currentVersion={version}
+                            versions={quote.versions}
+                            currencyCode={currencyCode}
+                        />
+                    )}
+
+                    {/* Quote Summary */}
+                    {version && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>{t('summaryCardTitle')}</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="space-y-2">
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-muted-foreground">{t('subtotal')} <span className="text-[10px]">({t('subtotalExclTax')})</span></span>
+                                        <span><Price value={version.subtotal} currencyCode={currencyCode}/></span>
+                                    </div>
+                                    <div className="flex justify-between text-sm">
+                                        <span className="text-muted-foreground">{t('shipping')}</span>
+                                        <span>
+                                            {version.shippingCost > 0
+                                                ? <Price value={version.shippingCost} currencyCode={currencyCode}/>
+                                                : t('shippingIncluded')}
+                                        </span>
+                                    </div>
+                                    <Separator className="my-2"/>
+                                    <div className="flex justify-between font-bold text-lg">
+                                        <span>{t('total')}</span>
+                                        <span><Price value={version.total} currencyCode={currencyCode} taxLabel="excl" /></span>
+                                    </div>
+                                    <p className="text-xs text-muted-foreground mt-2 italic">{t('taxCalculatedAtCheckout')}</p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    )}
+
+                    {/* Activity Timeline */}
+                    <QuoteActivityTimeline
+                        versions={quote.versions}
+                        comments={quote.comments}
+                        currentVersionNumber={version?.versionNumber}
+                        currencyCode={currencyCode}
+                    />
+                </div>
+
+                {/* Right Column - Info & Actions */}
+                <div className="space-y-6">
+                    {/* Quote Info */}
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{t('infoCardTitle')}</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-3 text-sm">
+                            <div className="flex items-center justify-between">
+                                <span className="text-muted-foreground">{t('infoStatus')}</span>
+                                <QuoteStatusBadge status={quote.status}/>
+                            </div>
+                            <div className="flex justify-between">
+                                <span className="text-muted-foreground">{t('infoQuoteNumber')}</span>
+                                <span className="font-medium">{quote.quoteNumber}</span>
+                            </div>
+                            {quote.validUntil && (
+                                <div className="flex justify-between">
+                                    <span className="text-muted-foreground">{t('infoValidUntil')}</span>
+                                    <QuoteValidityIndicator validUntil={quote.validUntil}/>
+                                </div>
+                            )}
+                            {quote.convertedOrderId && (
+                                <div className="flex justify-between">
+                                    <span className="text-muted-foreground">{t('infoConvertedOrder')}</span>
+                                    <span className="font-medium text-green-700">{t('infoConvertedOrderYes')}</span>
+                                </div>
+                            )}
+                        </CardContent>
+                    </Card>
+
+                    {/* Actions */}
+                    {(quote.status === 'DRAFT' || quote.status === 'QUOTED' || (quote.status === 'ACCEPTED' && !quote.convertedOrderId)) && (
+                        <Card>
+                            <CardHeader>
+                                <CardTitle>{t('actionsCardTitle')}</CardTitle>
+                            </CardHeader>
+                            <CardContent>
+                                <QuoteActionButtons
+                                    quoteId={quote.id}
+                                    status={quote.status}
+                                    convertedOrderId={quote.convertedOrderId}
+                                />
+                            </CardContent>
+                        </Card>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,253 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    RequestQuoteFromCartMutation,
+    SubmitQuoteMutation,
+    AcceptQuoteMutation,
+    RejectQuoteMutation,
+    RequestQuoteChangesMutation,
+    AcceptAndConvertQuoteMutation,
+    AddQuoteCommentMutation,
+    RequestQuoteMutation,
+    RemoveAllOrderLinesMutation,
+    CancelQuoteCheckoutMutation,
+} from '@/lib/vendure/mutations';
+import {QuoteStockCheckQuery, SearchVariantsQuery} from '@/lib/vendure/queries';
+import {revalidatePath, updateTag} from 'next/cache';
+import {redirect} from '@/i18n/navigation';
+
+function invalidateCart() {
+    updateTag('cart');
+    updateTag('active-order');
+}
+
+type QuoteLineItemInput = { productVariantId: string; quantity: number; note?: string };
+
+/**
+ * Creates a quote from line items and auto-submits it.
+ * Returns the quote ID on success, or throws on failure.
+ */
+async function createAndSubmitQuote(lineItems: QuoteLineItemInput[], note?: string) {
+    const [result, error] = await client.mutate(
+        RequestQuoteMutation,
+        {input: {lineItems, note: note || undefined}},
+    );
+    if (error) {
+        throw new Error(error.message || 'Failed to create quote');
+    }
+    const quoteId = result.data.requestQuote.id;
+    // Auto-submit — if this fails, user lands on the quote detail page
+    // where they can see the DRAFT and manually submit
+    const [, submitError] = await client.mutate(SubmitQuoteMutation, {quoteId});
+    if (submitError) {
+        console.error('[createAndSubmitQuote] Submit failed:', submitError);
+    }
+    return quoteId;
+}
+
+export async function searchVariantsForQuote(term: string) {
+    const [result, error] = await client.query(SearchVariantsQuery, {
+        input: { term: term.trim(), take: 10, groupByProduct: false },
+    });
+
+    if (error) {
+        console.error('[searchVariantsForQuote] Failed:', error);
+        return [];
+    }
+
+    return result.data.search.items
+        .filter(item => item.price.__typename === 'SinglePrice')
+        .map(item => ({
+            productVariantId: item.productVariantId,
+            productName: item.productName,
+            variantName: item.productVariantName,
+            sku: item.sku,
+            imageUrl: item.productAsset?.preview ?? undefined,
+            price: (item.price as { __typename: 'SinglePrice'; value: number }).value,
+            currencyCode: item.currencyCode,
+            inStock: item.inStock,
+        }));
+}
+
+export async function requestQuoteFromCart() {
+    const [result, error] = await client.mutate(RequestQuoteFromCartMutation, {});
+    if (error) {
+        const message = error.message || 'Failed to request quote';
+        console.error('[requestQuoteFromCart] FAILED:', message);
+        return {success: false, message};
+    }
+    const quoteId = result.data.requestQuoteFromCart.id;
+
+    // Auto-submit — if this fails, user still lands on the quote detail page
+    // where they can see the DRAFT and manually submit
+    const [, submitError] = await client.mutate(SubmitQuoteMutation, {quoteId});
+    if (submitError) {
+        console.error('[requestQuoteFromCart] Submit failed, redirecting to draft:', submitError);
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    await redirect(`/account/quotes/${quoteId}`);
+}
+
+export async function submitQuote(quoteId: string) {
+    const [, error] = await client.mutate(SubmitQuoteMutation, {quoteId});
+
+    if (error) {
+        const message = error.message || 'Failed to submit quote';
+        console.error('[submitQuote] FAILED:', message);
+        return {success: false, message};
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    return {success: true};
+}
+
+export async function acceptQuote(quoteId: string) {
+    const [, error] = await client.mutate(AcceptQuoteMutation, {quoteId});
+
+    if (error) {
+        return {
+            success: false,
+            message: error.message || 'Failed to accept quote',
+        };
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    return {success: true};
+}
+
+export async function rejectQuote(quoteId: string, reason?: string) {
+    const [, error] = await client.mutate(RejectQuoteMutation, {quoteId, reason: reason ?? null});
+
+    if (error) {
+        return {
+            success: false,
+            message: error.message || 'Failed to reject quote',
+        };
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    return {success: true};
+}
+
+export async function requestQuoteChanges(quoteId: string, reason?: string) {
+    const [, error] = await client.mutate(RequestQuoteChangesMutation, {quoteId, reason: reason ?? null});
+
+    if (error) {
+        return {
+            success: false,
+            message: error.message || 'Failed to request changes',
+        };
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    return {success: true};
+}
+
+export async function acceptAndConvertQuote(quoteId: string) {
+    const [result, error] = await client.mutate(AcceptAndConvertQuoteMutation, {quoteId});
+
+    if (error) {
+        return {
+            success: false,
+            message: error.message || 'Failed to convert quote to order',
+        };
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    revalidatePath('/account/orders', 'layout');
+    invalidateCart();
+    return {
+        success: true,
+        redirectTo: '/checkout',
+    };
+}
+
+export async function cancelQuoteCheckout() {
+    const [, error] = await client.mutate(CancelQuoteCheckoutMutation, {});
+    if (error) {
+        return {success: false, message: error.message || 'Failed to cancel'};
+    }
+    invalidateCart();
+    revalidatePath('/checkout', 'layout');
+    return {success: true};
+}
+
+export async function addQuoteComment(quoteId: string, text: string) {
+    const [, error] = await client.mutate(AddQuoteCommentMutation, {quoteId, text});
+
+    if (error) {
+        return {
+            success: false,
+            message: error.message || 'Failed to add comment',
+        };
+    }
+
+    revalidatePath('/account/quotes', 'layout');
+    return {success: true};
+}
+
+/**
+ * Standalone flow: create quote from line items, submit, redirect to detail.
+ * On success, redirects (throws NEXT_REDIRECT) — only failure returns a result.
+ */
+export async function requestQuoteWithItems(
+    lineItems: QuoteLineItemInput[],
+    note?: string,
+) {
+    let quoteId: string;
+    try {
+        quoteId = await createAndSubmitQuote(lineItems, note);
+    } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to create quote';
+        return {success: false as const, message};
+    }
+    revalidatePath('/account/quotes', 'layout');
+    await redirect(`/account/quotes/${quoteId}`);
+}
+
+/**
+ * Cart flow: create quote from line items, submit, clear cart, redirect.
+ * On success, redirects (throws NEXT_REDIRECT) — only failure returns a result.
+ */
+export async function requestQuoteFromCartWithReview(
+    lineItems: QuoteLineItemInput[],
+    note?: string,
+) {
+    let quoteId: string;
+    try {
+        quoteId = await createAndSubmitQuote(lineItems, note);
+    } catch (err) {
+        const message = err instanceof Error ? err.message : 'Failed to create quote';
+        return {success: false as const, message};
+    }
+    const [, clearError] = await client.mutate(RemoveAllOrderLinesMutation, {});
+    if (clearError) {
+        console.error('[requestQuoteFromCartWithReview] Clear cart failed:', clearError);
+    }
+    revalidatePath('/account/quotes', 'layout');
+    invalidateCart();
+    await redirect(`/account/quotes/${quoteId}`);
+}
+
+type StockCheckResult = {
+    allInStock: boolean;
+    outOfStockItems: Array<{
+        sku: string;
+        productName: string;
+        requestedQuantity: number;
+        availableStock: number;
+    }>;
+};
+
+export async function checkQuoteStock(quoteId: string): Promise<StockCheckResult> {
+    const [result, error] = await client.query(QuoteStockCheckQuery, {quoteId});
+    if (error) {
+        // Fail open — if the stock check itself fails, let the conversion
+        // service catch real stock issues. Better than showing an empty warning.
+        console.error('[checkQuoteStock] Failed:', error);
+        return {allInStock: true, outOfStockItems: []};
+    }
+    return result.data.quoteStockCheck as StockCheckResult;
+}

package/dist/assets/storefront/src/app/[locale]/account/quotes/new/new-quote-form.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { QuoteRequestForm } from '@/components/commerce/quote-request-form';
+import { QuoteProductSearch } from '@/components/commerce/quote-product-search';
+import { requestQuoteWithItems } from '@/app/[locale]/account/quotes/actions';
+import { useRouter } from '@/i18n/navigation';
+
+interface NewQuoteFormProps {
+    sender: { name: string; email: string; company?: string };
+    currencyCode: string;
+}
+
+export function NewQuoteForm({ sender, currencyCode }: NewQuoteFormProps) {
+    const router = useRouter();
+
+    return (
+        <QuoteRequestForm
+            initialLineItems={[]}
+            sender={sender}
+            mode="standalone"
+            onSubmit={requestQuoteWithItems}
+            onCancel={() => router.push('/account/quotes')}
+            renderSearch={(addItem) => (
+                <QuoteProductSearch onAddItem={addItem} currencyCode={currencyCode} />
+            )}
+        />
+    );
+}

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

@@ -0,0 +1,51 @@
+import type { Metadata } from 'next';
+import { client } from '@/lib/vendure/api';
+import { readFragment } from '@/graphql';
+import { GetActiveCustomerQuery, GetActiveChannelQuery, GetCompanyAccountQuery } from '@/lib/vendure/queries';
+import { ActiveCustomerFragment, CompanyFragment } from '@/lib/vendure/fragments';
+import { redirect } from '@/i18n/navigation';
+import { NewQuoteForm } from './new-quote-form';
+import { locale as rootLocale } from 'next/root-params';
+import type { Locale } from '@/i18n/routing';
+import { getTranslations } from 'next-intl/server';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({ locale, namespace: 'Quotes' });
+    return { title: t('newQuotePageTitle') };
+}
+
+export default async function NewQuotePage() {
+    const [customerResult, customerError] = await client.query(GetActiveCustomerQuery, {});
+    if (customerError || !customerResult.data.activeCustomer) {
+        return await redirect('/sign-in');
+    }
+
+    const customer = readFragment(ActiveCustomerFragment, customerResult.data.activeCustomer);
+
+    const [[channelResult], [companyResult], t] = await Promise.all([
+        client.query(GetActiveChannelQuery, {}),
+        client.query(GetCompanyAccountQuery, {}),
+        getTranslations('Quotes'),
+    ]);
+    const currencyCode = channelResult?.data.activeChannel?.defaultCurrencyCode ?? 'USD';
+
+    let companyName: string | undefined;
+    if (companyResult?.data.companyAccount?.company) {
+        const company = readFragment(CompanyFragment, companyResult.data.companyAccount.company);
+        companyName = company.name;
+    }
+
+    const sender = {
+        name: `${customer.firstName} ${customer.lastName}`,
+        email: customer.emailAddress,
+        company: companyName,
+    };
+
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-6">{t('newQuoteHeading')}</h1>
+            <NewQuoteForm sender={sender} currencyCode={currencyCode} />
+        </div>
+    );
+}