@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/register/registration-form.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { useTranslations } from 'next-intl';
+import { registerAction } from './actions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form';
+import {Link} from '@/i18n/navigation';
+
+function useRegistrationSchema() {
+    const t = useTranslations('Auth');
+    return z.object({
+        emailAddress: z.string().email('Please enter a valid email address'),
+        firstName: z.string().optional(),
+        lastName: z.string().optional(),
+        phoneNumber: z.string().optional(),
+        password: z.string().min(8, t('passwordMinLength')),
+        confirmPassword: z.string(),
+    }).refine((data) => data.password === data.confirmPassword, {
+        message: t('passwordsMismatch'),
+        path: ["confirmPassword"],
+    });
+}
+
+type RegistrationFormData = {
+    emailAddress: string;
+    firstName?: string;
+    lastName?: string;
+    phoneNumber?: string;
+    password: string;
+    confirmPassword: string;
+};
+
+interface RegistrationFormProps {
+    redirectTo?: string;
+}
+
+export function RegistrationForm({ redirectTo }: RegistrationFormProps) {
+    const t = useTranslations('Auth');
+    const [isPending, startTransition] = useTransition();
+    const [serverError, setServerError] = useState<string | null>(null);
+    const registrationSchema = useRegistrationSchema();
+
+    const form = useForm<RegistrationFormData>({
+        resolver: zodResolver(registrationSchema),
+        defaultValues: {
+            emailAddress: '',
+            firstName: '',
+            lastName: '',
+            phoneNumber: '',
+            password: '',
+            confirmPassword: '',
+        },
+    });
+
+    const onSubmit = (data: RegistrationFormData) => {
+        setServerError(null);
+
+        startTransition(async () => {
+            const formData = new FormData();
+            formData.append('emailAddress', data.emailAddress);
+            if (data.firstName) formData.append('firstName', data.firstName);
+            if (data.lastName) formData.append('lastName', data.lastName);
+            if (data.phoneNumber) formData.append('phoneNumber', data.phoneNumber);
+            formData.append('password', data.password);
+            if (redirectTo) {
+                formData.append('redirectTo', redirectTo);
+            }
+
+            const result = await registerAction(undefined, formData);
+            if (result?.error) {
+                setServerError(result.error);
+            }
+        });
+    };
+
+    const signInHref = redirectTo
+        ? `/sign-in?redirectTo=${encodeURIComponent(redirectTo)}`
+        : '/sign-in';
+
+    return (
+        <Card>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)}>
+                    <CardContent className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="emailAddress"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t('emailAddressLabel')}</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="email"
+                                            placeholder="you@example.com"
+                                            disabled={isPending}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="grid grid-cols-2 gap-4">
+                            <FormField
+                                control={form.control}
+                                name="firstName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>{t('firstNameLabel')}</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                type="text"
+                                                placeholder="John"
+                                                disabled={isPending}
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="lastName"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>{t('lastNameLabel')}</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                type="text"
+                                                placeholder="Doe"
+                                                disabled={isPending}
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        </div>
+
+                        <FormField
+                            control={form.control}
+                            name="phoneNumber"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t('phoneNumberLabel')}</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="tel"
+                                            placeholder="+1 (555) 000-0000"
+                                            disabled={isPending}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t('passwordLabel')}</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="password"
+                                            placeholder="••••••••"
+                                            disabled={isPending}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="confirmPassword"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t('confirmPasswordLabel')}</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="password"
+                                            placeholder="••••••••"
+                                            disabled={isPending}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        {serverError && (
+                            <div className="text-sm text-destructive">
+                                {serverError}
+                            </div>
+                        )}
+
+                        <Button type="submit" className="w-full" disabled={isPending}>
+                            {isPending ? t('creatingAccount') : t('createAccount')}
+                        </Button>
+                    </CardContent>
+                    <CardFooter className="flex flex-col space-y-4 mt-4">
+
+                        <div className="text-sm text-center text-muted-foreground">
+                            {t('alreadyHaveAccount')}{' '}
+                            <Link href={signInHref} className="hover:text-primary underline">
+                                {t('signInLink')}
+                            </Link>
+                        </div>
+                    </CardFooter>
+                </form>
+            </Form>
+        </Card>
+    );
+}

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

@@ -0,0 +1,40 @@
+'use server';
+
+import {readFragment} from '@/graphql';
+import {client} from '@/lib/vendure/api';
+import {RegisterCompanyMutation} from '@/lib/vendure/mutations';
+import {CompanyFragment} from '@/lib/vendure/fragments';
+import {setCompanyId} from '@/lib/company-context';
+import {redirect} from '@/i18n/navigation';
+import {revalidatePath} from 'next/cache';
+
+export async function registerCompanyAction(
+    prevState: { error?: string } | 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(
+        RegisterCompanyMutation,
+        {input: {companyName: companyName.trim()}},
+    );
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const companyAccount = result.data.registerCompany;
+    if (!companyAccount?.company) {
+        return {error: 'Failed to register company'};
+    }
+
+    const company = readFragment(CompanyFragment, companyAccount.company);
+    await setCompanyId(company.id);
+    revalidatePath('/', 'layout');
+
+    await redirect('/account/company');
+}

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

@@ -0,0 +1,43 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {redirect} from '@/i18n/navigation';
+import {getTranslations} from 'next-intl/server';
+import {locale as rootLocale} from 'next/root-params';
+import {type Locale} from '@/i18n/routing';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {AuthPageShell} from '@/components/layout/auth-page-shell';
+import {RegistrationForm} from './registration-form';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'RegisterCompany'});
+    return {
+        title: t('cardTitle'),
+    };
+}
+
+async function RegisterCompanyContent() {
+    const customer = await getActiveCustomer();
+
+    if (!customer) {
+        await redirect('/sign-in?redirectTo=/register-company');
+    }
+
+    return (
+        <AuthPageShell>
+            <RegistrationForm />
+        </AuthPageShell>
+    );
+}
+
+export default function RegisterCompanyPage() {
+    return (
+        <Suspense fallback={
+            <AuthPageShell>
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </AuthPageShell>
+        }>
+            <RegisterCompanyContent />
+        </Suspense>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/register-company/registration-form.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import {useActionState} from 'react';
+import {useTranslations} from 'next-intl';
+import {registerCompanyAction} 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';
+
+export function RegistrationForm() {
+    const t = useTranslations('RegisterCompany');
+    const [state, formAction, isPending] = useActionState(registerCompanyAction, undefined);
+
+    return (
+        <Card className="w-full max-w-md">
+            <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"
+                            placeholder={t('companyNamePlaceholder')}
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    {state?.error && (
+                        <div className="text-sm text-destructive">
+                            {state.error}
+                        </div>
+                    )}
+                    <Button type="submit" disabled={isPending} className="w-full">
+                        {isPending ? t('registeringButton') : t('registerButton')}
+                    </Button>
+                </CardContent>
+            </form>
+        </Card>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/reset-password/actions.ts

@@ -0,0 +1,40 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {ResetPasswordMutation} from '@/lib/vendure/mutations';
+import {setAuthToken} from '@/lib/auth';
+import {redirect} from '@/i18n/navigation';
+
+export async function resetPasswordAction(prevState: { error?: string } | undefined, formData: FormData) {
+    const token = formData.get('token') as string;
+    const password = formData.get('password') as string;
+    const confirmPassword = formData.get('confirmPassword') as string;
+
+    if (!token || !password || !confirmPassword) {
+        return {error: 'All fields are required'};
+    }
+
+    if (password !== confirmPassword) {
+        return {error: 'Passwords do not match'};
+    }
+
+
+    const [result, error] = await client.mutate(ResetPasswordMutation, {
+        token,
+        password,
+    });
+    if (error) throw error;
+
+    const resetResult = result.data.resetPassword;
+
+    if (resetResult.__typename !== 'CurrentUser') {
+        return {error: resetResult.message};
+    }
+
+    // Store the token in a cookie if returned
+    if (result.authToken) {
+        await setAuthToken(result.authToken);
+    }
+
+    await redirect('/');
+}

package/dist/assets/storefront/src/app/[locale]/reset-password/page.tsx

@@ -0,0 +1,32 @@
+import type {Metadata} from 'next';
+import { Suspense } from 'react';
+import { Loader2 } from 'lucide-react';
+import {getTranslations} from 'next-intl/server';
+import {locale as rootLocale} from 'next/root-params';
+import {type Locale} from '@/i18n/routing';
+import { ResetPasswordForm } from './reset-password-form';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Auth'});
+    return {
+        title: t('resetYourPassword'),
+        description: t('resetYourPasswordDescription'),
+    };
+}
+
+export default function ResetPasswordPage({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    return (
+        <div className="container mx-auto px-4 py-16">
+            <div className="max-w-md mx-auto">
+                <Suspense fallback={
+                    <div className="flex justify-center">
+                        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                    </div>
+                }>
+                    <ResetPasswordForm searchParams={searchParams} />
+                </Suspense>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/reset-password/reset-password-form.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { use, useActionState } from 'react';
+import { useTranslations } from 'next-intl';
+import { resetPasswordAction } from './actions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import {Link} from '@/i18n/navigation';
+
+interface ResetPasswordFormProps {
+    searchParams: Promise<{ token?: string }>;
+}
+
+export function ResetPasswordForm({ searchParams }: ResetPasswordFormProps) {
+    const t = useTranslations('Auth');
+    const params = use(searchParams);
+    const token = params.token || null;
+
+    const [state, formAction, isPending] = useActionState(resetPasswordAction, undefined);
+
+    if (!token) {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('invalidResetLink')}</CardTitle>
+                    <CardDescription>
+                        {t('invalidResetLinkDescription')}
+                    </CardDescription>
+                </CardHeader>
+                <CardFooter>
+                    <Link href="/forgot-password">
+                        <Button variant="outline" className="w-full">
+                            {t('requestNewResetLink')}
+                        </Button>
+                    </Link>
+                </CardFooter>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('resetYourPassword')}</CardTitle>
+                <CardDescription>
+                    {t('resetYourPasswordDescription')}
+                </CardDescription>
+            </CardHeader>
+            <form action={formAction}>
+                <input type="hidden" name="token" value={token} />
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="password">{t('newPassword')}</Label>
+                        <Input
+                            id="password"
+                            name="password"
+                            type="password"
+                            placeholder="••••••••"
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="confirmPassword">{t('confirmPassword')}</Label>
+                        <Input
+                            id="confirmPassword"
+                            name="confirmPassword"
+                            type="password"
+                            placeholder="••••••••"
+                            required
+                            disabled={isPending}
+                        />
+                    </div>
+                    {state?.error && (
+                        <div className="text-sm text-destructive">
+                            {state.error}
+                        </div>
+                    )}
+                </CardContent>
+                <CardFooter className="flex flex-col space-y-4">
+                    <Button type="submit" className="w-full" disabled={isPending}>
+                        {isPending ? t('resettingPassword') : t('resetPassword')}
+                    </Button>
+                    <Link
+                        href="/sign-in"
+                        className="text-sm text-center text-muted-foreground hover:text-primary"
+                    >
+                        {t('backToSignIn')}
+                    </Link>
+                </CardFooter>
+            </form>
+        </Card>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/shopping-list/[code]/add-to-cart-button.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useTransition } from 'react';
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { ShoppingCart } from 'lucide-react';
+import { addToCart } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import { toast } from 'sonner';
+
+export function PublicShoppingListAddToCart({ variantId, outOfStock }: { variantId: string; outOfStock?: boolean }) {
+    const t = useTranslations('SharedShoppingList');
+    const [isPending, startTransition] = useTransition();
+
+    const handleClick = () => {
+        startTransition(async () => {
+            const result = await addToCart(variantId, 1);
+            if (result.success) {
+                toast.success(t('addedToCart'));
+            } else {
+                toast.error(result.error || t('failedToAdd'));
+            }
+        });
+    };
+
+    return (
+        <Button variant="outline" size="sm" onClick={handleClick} disabled={isPending || outOfStock}>
+            <ShoppingCart className="mr-2 h-4 w-4" />
+            {outOfStock ? t('outOfStock') : isPending ? t('adding') : t('addToCart')}
+        </Button>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/shopping-list/[code]/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function PublicShoppingListLoading() {
+    return (
+        <div className="container mx-auto px-4 py-30">
+            <div className="max-w-3xl mx-auto">
+                <div className="mb-8">
+                    <Skeleton className="h-9 w-64 mb-2" />
+                    <Skeleton className="h-4 w-48 mb-1" />
+                    <Skeleton className="h-3 w-24" />
+                </div>
+
+                <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>
+                            <Skeleton className="h-9 w-28 shrink-0" />
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}