@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

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

@@ -1,16 +1,18 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {client} from '@/lib/vendure/api';
-import {GetCustomerAddressesQuery, GetAvailableCountriesQuery} from '@/lib/vendure/queries';
-import {ErrorState} from '@/components/shared/error-state';
-import {AddressesClient} from './addresses-client';
-import {getTranslations} from 'next-intl/server';
+import { ErrorState } from '@/components/shared/error-state';
+import { pinRootLocale } from '@/i18n/server';
+import { client } from '@/lib/vendure/api';
+import { GetAvailableCountriesQuery, GetCustomerAddressesQuery } from '@/lib/vendure/queries';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { AddressesClient } from './addresses-client';
 
 export const metadata: Metadata = {
     title: 'Addresses',
 };
 
 async function AddressesContent() {
+    await pinRootLocale();
     const t = await getTranslations('Account');
     const [addressesRes, countriesRes] = await Promise.all([
         client.query(GetCustomerAddressesQuery, {}),
@@ -19,9 +21,7 @@ async function AddressesContent() {
     const [addressesResult, addressesError] = addressesRes;
     const [countriesResult, countriesError] = countriesRes;
     if (addressesError || countriesError) {
-        return (
-            <ErrorState message="We couldn't load this page. Please try again later." />
-        );
+        return <ErrorState message="We couldn't load this page. Please try again later." />;
     }
 
     const addresses = addressesResult.data.activeCustomer?.addresses || [];
@@ -31,9 +31,7 @@ async function AddressesContent() {
         <div className="space-y-6">
             <div>
                 <h1 className="text-3xl font-bold">{t('addresses')}</h1>
-                <p className="text-muted-foreground mt-2">
-                    {t('manageAddresses')}
-                </p>
+                <p className="text-muted-foreground mt-2">{t('manageAddresses')}</p>
             </div>
 
             <AddressesClient addresses={addresses} countries={countries} />
@@ -43,11 +41,13 @@ async function AddressesContent() {
 
 export default function AddressesPage() {
     return (
-        <Suspense fallback={
-            <div className="text-center py-12">
-                <p className="text-sm text-muted-foreground">Loading...</p>
-            </div>
-        }>
+        <Suspense
+            fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <AddressesContent />
         </Suspense>
     );

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

@@ -1,8 +1,8 @@
 'use server';
 
-import {client} from '@/lib/vendure/api';
-import {SubmitApprovalDecisionMutation} from '@/lib/vendure/mutations';
-import {revalidatePath} from 'next/cache';
+import { client } from '@/lib/vendure/api';
+import { SubmitApprovalDecisionMutation } from '@/lib/vendure/mutations';
+import { revalidatePath } from 'next/cache';
 
 interface SubmitDecisionInput {
     approvalRequestId: string;
@@ -11,10 +11,7 @@ interface SubmitDecisionInput {
 }
 
 export async function submitApprovalDecision(input: SubmitDecisionInput) {
-    const [, error] = await client.mutate(
-        SubmitApprovalDecisionMutation,
-        {input},
-    );
+    const [, error] = await client.mutate(SubmitApprovalDecisionMutation, { input });
 
     if (error) {
         return {
@@ -24,5 +21,5 @@ export async function submitApprovalDecision(input: SubmitDecisionInput) {
     }
 
     revalidatePath('/account/approvals');
-    return {success: true};
+    return { success: true };
 }

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

@@ -1,27 +1,29 @@
-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 { ApprovalDecisionForm } from '@/components/commerce/approval-decision-form';
+import { ApprovalStatusBadge } from '@/components/commerce/approval-status-badge';
+import { Price } from '@/components/commerce/price';
+import { ErrorState } from '@/components/shared/error-state';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ResultOf } from '@/graphql';
+import { Link, redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
+import { formatDateTime } from '@/lib/format';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { GetMyApprovalRequestsQuery, GetOrderSummaryQuery } from '@/lib/vendure/queries';
+import { ExternalLink } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
-import {ResultOf} from '@/graphql';
+import { Suspense } from 'react';
 
 export const metadata: Metadata = {
     title: 'Approvals',
 };
 
-type ApprovalRequest = NonNullable<ResultOf<typeof GetMyApprovalRequestsQuery>['myApprovalRequests']>['items'][number];
+type ApprovalRequest = NonNullable<
+    ResultOf<typeof GetMyApprovalRequestsQuery>['myApprovalRequests']
+>['items'][number];
 type OrderSummary = NonNullable<ResultOf<typeof GetOrderSummaryQuery>['orderByCode']>;
 type ApprovalsTranslations = Awaited<ReturnType<typeof getTranslations<'Approvals'>>>;
 
@@ -37,8 +39,8 @@ 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((r) => r.entityType === 'Order')
+        .map((r) => parseOrderCode(r.summary))
         .filter((code): code is string => code != null);
 
     const uniqueCodes = [...new Set(orderCodes)];
@@ -46,7 +48,7 @@ async function fetchOrderSummaries(
 
     await Promise.all(
         uniqueCodes.map(async (code) => {
-            const [result, error] = await client.query(GetOrderSummaryQuery, {code});
+            const [result, error] = await client.query(GetOrderSummaryQuery, { code });
             if (!error && result?.data?.orderByCode) {
                 orderMap.set(code, result.data.orderByCode);
             }
@@ -93,12 +95,17 @@ function PendingApprovalCard({
                         )}
                         <p className="text-sm text-muted-foreground mt-0.5">
                             {requester && (
-                                <span>{t('requestedBy', {name: `${requester.firstName} ${requester.lastName}`})} &middot; </span>
+                                <span>
+                                    {t('requestedBy', {
+                                        name: `${requester.firstName} ${requester.lastName}`,
+                                    })}{' '}
+                                    &middot;{' '}
+                                </span>
                             )}
                             {formatDateTime(request.createdAt, locale)}
                         </p>
                     </div>
-                    <ApprovalStatusBadge status={request.status}/>
+                    <ApprovalStatusBadge status={request.status} />
                 </div>
             </CardHeader>
             <CardContent className="space-y-3">
@@ -109,7 +116,10 @@ function PendingApprovalCard({
                                 <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'}
+                                            src={
+                                                line.productVariant.product.featuredAsset.preview +
+                                                '?w=80&h=80'
+                                            }
                                             alt={line.productVariant.product.name}
                                             fill
                                             className="object-cover"
@@ -119,21 +129,20 @@ function PendingApprovalCard({
                                 <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})}
+                                        {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})}
+                                {t('andMoreItems', { count: remainingCount })}
                             </p>
                         )}
                     </div>
                 )}
-                {!order && request.summary && (
-                    <p className="text-sm">{request.summary}</p>
-                )}
+                {!order && request.summary && <p className="text-sm">{request.summary}</p>}
                 {orderCode && (
                     <Button variant="outline" size="sm" asChild>
                         <Link href={`/account/orders/${orderCode}`}>
@@ -142,15 +151,20 @@ function PendingApprovalCard({
                         </Link>
                     </Button>
                 )}
-                <ApprovalDecisionForm approvalRequestId={request.id}/>
+                <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[] }>();
+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)) {
@@ -189,7 +203,10 @@ function HistoryGroupCard({
                     <div>
                         {orderCode ? (
                             <CardTitle className="text-base">
-                                <Link href={`/account/orders/${orderCode}`} className="text-primary hover:underline">
+                                <Link
+                                    href={`/account/orders/${orderCode}`}
+                                    className="text-primary hover:underline"
+                                >
                                     Order {orderCode}
                                 </Link>
                             </CardTitle>
@@ -198,22 +215,22 @@ function HistoryGroupCard({
                                 {latest.entityType} #{latest.entityId}
                             </CardTitle>
                         )}
-                        {requester && (
-                            <p className="text-sm text-muted-foreground mt-0.5">{requester}</p>
-                        )}
+                        {requester && <p className="text-sm text-muted-foreground mt-0.5">{requester}</p>}
                     </div>
-                    <ApprovalStatusBadge status={latest.status}/>
+                    <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') ?? [];
+                        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 => (
+                                <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}`
@@ -233,27 +250,21 @@ function HistoryGroupCard({
 
 const APPROVALS_PAGE_SIZE = 50;
 
-async function ApprovalsContent({params}: {params: Promise<{locale: string}>}) {
-    const {locale} = await params;
+async function ApprovalsContent({ params }: { params: Promise<{ locale: string }> }) {
+    const { locale } = await params;
     setRequestLocale(locale);
-    const [t, activeCustomer] = await Promise.all([
-        getTranslations('Approvals'),
-        getActiveCustomer(),
-    ]);
+    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'}}},
-    );
+    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." />
-        );
+        return <ErrorState message="We couldn't load this page. Please try again later." />;
     }
-    const {data} = result;
+    const { data } = result;
     const allRequests = data.myApprovalRequests?.items ?? [];
 
     if (allRequests.length === 0) {
@@ -268,14 +279,10 @@ async function ApprovalsContent({params}: {params: Promise<{locale: string}>}) {
     // 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),
+    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);
@@ -286,7 +293,7 @@ async function ApprovalsContent({params}: {params: Promise<{locale: string}>}) {
                 <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})}
+                        {t('pendingDecisionsCount', { count: pendingApprovals.length })}
                     </p>
                     <div className="space-y-4">
                         {pendingApprovals.map((request) => (
@@ -323,17 +330,20 @@ async function ApprovalsContent({params}: {params: Promise<{locale: string}>}) {
     );
 }
 
-export default async function ApprovalsPage({params}: {params: Promise<{locale: string}>}) {
+export default async function ApprovalsPage({ params }: { params: Promise<{ locale: string }> }) {
+    await pinRootLocale();
     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
+                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

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

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

@@ -1,12 +1,12 @@
 'use server';
 
-import {client} from '@/lib/vendure/api';
+import { client } from '@/lib/vendure/api';
 import {
     CreateCompanyAddressMutation,
-    UpdateCompanyAddressMutation,
     DeleteCompanyAddressMutation,
+    UpdateCompanyAddressMutation,
 } from '@/lib/vendure/mutations';
-import {revalidatePath} from 'next/cache';
+import { revalidatePath } from 'next/cache';
 
 interface CreateCompanyAddressInput {
     fullName: string;
@@ -38,10 +38,7 @@ interface UpdateCompanyAddressInput {
 }
 
 export async function createCompanyAddressAction(input: CreateCompanyAddressInput) {
-    const [result, error] = await client.mutate(
-        CreateCompanyAddressMutation,
-        {input},
-    );
+    const [result, error] = await client.mutate(CreateCompanyAddressMutation, { input });
     if (error) throw error;
 
     if (!result.data.createCompanyAddress) {
@@ -53,10 +50,7 @@ export async function createCompanyAddressAction(input: CreateCompanyAddressInpu
 }
 
 export async function updateCompanyAddressAction(input: UpdateCompanyAddressInput) {
-    const [result, error] = await client.mutate(
-        UpdateCompanyAddressMutation,
-        {input},
-    );
+    const [result, error] = await client.mutate(UpdateCompanyAddressMutation, { input });
     if (error) throw error;
 
     if (!result.data.updateCompanyAddress) {
@@ -68,10 +62,7 @@ export async function updateCompanyAddressAction(input: UpdateCompanyAddressInpu
 }
 
 export async function deleteCompanyAddressAction(id: string) {
-    const [result, error] = await client.mutate(
-        DeleteCompanyAddressMutation,
-        {id},
-    );
+    const [result, error] = await client.mutate(DeleteCompanyAddressMutation, { id });
     if (error) throw error;
 
     if (result.data.deleteCompanyAddress.result !== 'DELETED') {