@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/checkout/steps/shipping-address-step.tsx

@@ -0,0 +1,518 @@
+'use client';
+
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Card } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Field, FieldLabel, FieldError, FieldGroup } from '@/components/ui/field';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { useForm, Controller } from 'react-hook-form';
+import { Loader2 } from 'lucide-react';
+import { useRouter } from '@/i18n/navigation';
+import { useCheckout } from '../checkout-provider';
+import { setShippingAddress, createCustomerAddress } from '../actions';
+import { CountrySelect } from '@/components/shared/country-select';
+
+interface ShippingAddressStepProps {
+  onComplete: () => void;
+  returnsToReview?: boolean;
+}
+
+interface AddressFormData {
+  fullName: string;
+  streetLine1: string;
+  streetLine2?: string;
+  city: string;
+  province: string;
+  postalCode: string;
+  countryCode: string;
+  phoneNumber: string;
+  company?: string;
+}
+
+export default function ShippingAddressStep({ onComplete, returnsToReview }: ShippingAddressStepProps) {
+  const router = useRouter();
+  const t = useTranslations('Checkout');
+  const {
+    addresses, companyAddresses, countries, order,
+    selectedAddressId, setSelectedAddressId,
+    selectedCompanyAddressId, setSelectedCompanyAddressId,
+    addressSource, setAddressSource,
+    useSameForBilling, setUseSameForBilling,
+    selectedBillingAddressId, setSelectedBillingAddressId,
+  } = useCheckout();
+  const hasCompanyAddresses = companyAddresses.length > 0;
+  const [dialogOpen, setDialogOpen] = useState(addresses.length === 0 && !hasCompanyAddresses);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const allAddresses = [...addresses, ...companyAddresses];
+  const resolveBillingAddress = () => {
+    if (useSameForBilling || !selectedBillingAddressId) return undefined;
+    const addr = allAddresses.find(a => a.id === selectedBillingAddressId);
+    if (!addr) return undefined;
+    return {
+      fullName: addr.fullName || '',
+      streetLine1: addr.streetLine1,
+      streetLine2: addr.streetLine2 || '',
+      city: addr.city || '',
+      province: addr.province || '',
+      postalCode: addr.postalCode || '',
+      countryCode: addr.country.code,
+      phoneNumber: addr.phoneNumber || '',
+    };
+  };
+
+  const { register, handleSubmit, formState: { errors }, reset, control } = useForm<AddressFormData>({
+    defaultValues: {
+      countryCode: countries[0]?.code || 'US',
+    }
+  });
+
+  const handleSelectExistingAddress = async () => {
+    if (addressSource === 'company') {
+      return handleSelectCompanyAddress();
+    }
+
+    if (!selectedAddressId) return;
+
+    setLoading(true);
+    try {
+      const selectedAddress = addresses.find(a => a.id === selectedAddressId);
+      if (!selectedAddress) return;
+
+      await setShippingAddress({
+        fullName: selectedAddress.fullName || '',
+        company: selectedAddress.company || '',
+        streetLine1: selectedAddress.streetLine1,
+        streetLine2: selectedAddress.streetLine2 || '',
+        city: selectedAddress.city || '',
+        province: selectedAddress.province || '',
+        postalCode: selectedAddress.postalCode || '',
+        countryCode: selectedAddress.country.code,
+        phoneNumber: selectedAddress.phoneNumber || '',
+      }, resolveBillingAddress());
+
+      router.refresh();
+      onComplete();
+    } catch (error) {
+      console.error('Error setting address:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectCompanyAddress = async () => {
+    if (!selectedCompanyAddressId) return;
+
+    setLoading(true);
+    try {
+      const selectedAddress = companyAddresses.find(a => a.id === selectedCompanyAddressId);
+      if (!selectedAddress) return;
+
+      await setShippingAddress({
+        fullName: selectedAddress.fullName,
+        streetLine1: selectedAddress.streetLine1,
+        streetLine2: selectedAddress.streetLine2 || '',
+        city: selectedAddress.city || '',
+        province: selectedAddress.province || '',
+        postalCode: selectedAddress.postalCode || '',
+        countryCode: selectedAddress.country.code,
+        phoneNumber: selectedAddress.phoneNumber || '',
+      }, resolveBillingAddress());
+
+      router.refresh();
+      onComplete();
+    } catch (error) {
+      console.error('Error setting address:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSaveNewAddress = async (data: AddressFormData) => {
+    setSaving(true);
+    try {
+      // First create the address in Vendure
+      const newAddress = await createCustomerAddress(data);
+
+      // Close dialog and reset form
+      setDialogOpen(false);
+      reset();
+
+      // Refresh to get updated addresses list
+      router.refresh();
+
+      // Select the newly created address
+      setSelectedAddressId(newAddress.id);
+    } catch (error) {
+      console.error('Error creating address:', error);
+      alert(t('errorCreatingAddress', {error: error instanceof Error ? error.message : 'Unknown error'}));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const personalAddressList = (
+    <RadioGroup value={selectedAddressId || ''} onValueChange={setSelectedAddressId} className="grid grid-cols-2 gap-3">
+      {addresses.map((address) => (
+        <Label key={address.id} htmlFor={address.id} className="cursor-pointer">
+          <Card className={`p-3 h-full transition-colors ${selectedAddressId === address.id ? 'border-primary ring-1 ring-primary' : 'hover:border-muted-foreground/30'}`}>
+            <div className="flex items-start gap-2">
+              <RadioGroupItem value={address.id} id={address.id} className="mt-0.5 shrink-0" />
+              <div className="text-xs leading-relaxed">
+                <p className="font-medium text-sm">{address.fullName}</p>
+                {address.company && <p className="text-muted-foreground">{address.company}</p>}
+                <p className="text-muted-foreground">{address.streetLine1}{address.streetLine2 ? `, ${address.streetLine2}` : ''}</p>
+                <p className="text-muted-foreground">{address.city}, {address.province} {address.postalCode}</p>
+                <p className="text-muted-foreground">{address.country.name}</p>
+                {address.phoneNumber && <p className="text-muted-foreground">{address.phoneNumber}</p>}
+              </div>
+            </div>
+          </Card>
+        </Label>
+      ))}
+    </RadioGroup>
+  );
+
+  const companyAddressList = (
+    <RadioGroup value={selectedCompanyAddressId || ''} onValueChange={setSelectedCompanyAddressId} className="grid grid-cols-2 gap-3 items-stretch">
+      {companyAddresses.map((address) => (
+        <Label key={address.id} htmlFor={`company-${address.id}`} className="cursor-pointer block">
+          <Card className={`p-3 h-full transition-colors ${selectedCompanyAddressId === address.id ? 'border-primary ring-1 ring-primary' : 'hover:border-muted-foreground/30'}`}>
+            <div className="flex items-start gap-2">
+              <RadioGroupItem value={address.id} id={`company-${address.id}`} className="mt-0.5 shrink-0" />
+              <div className="text-xs leading-relaxed">
+                <p className="font-medium text-sm">{address.fullName}</p>
+                {address.businessUnit && <p className="text-muted-foreground">{address.businessUnit.name}</p>}
+                <p className="text-muted-foreground">{address.streetLine1}{address.streetLine2 ? `, ${address.streetLine2}` : ''}</p>
+                <p className="text-muted-foreground">{address.city}, {address.province} {address.postalCode}</p>
+                <p className="text-muted-foreground">{address.country.name}</p>
+                {address.phoneNumber && <p className="text-muted-foreground">{address.phoneNumber}</p>}
+              </div>
+            </div>
+          </Card>
+        </Label>
+      ))}
+    </RadioGroup>
+  );
+
+  const newAddressDialog = (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" variant="outline">
+          {t('addNewAddress')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <form onSubmit={handleSubmit(onSaveNewAddress)}>
+          <DialogHeader>
+            <DialogTitle>{t('addNewAddress')}</DialogTitle>
+            <DialogDescription>
+              {t('addNewAddressDescription')}
+            </DialogDescription>
+          </DialogHeader>
+
+          <FieldGroup className="my-6">
+            <div className="grid grid-cols-2 gap-4">
+              <Field className="col-span-2">
+                <FieldLabel htmlFor="fullName">{t('fullName')}</FieldLabel>
+                <Input
+                  id="fullName"
+                  {...register('fullName', { required: t('fullNameRequired') })}
+                />
+                <FieldError>{errors.fullName?.message}</FieldError>
+              </Field>
+
+              <Field className="col-span-2">
+                <FieldLabel htmlFor="company">{t('company')}</FieldLabel>
+                <Input id="company" {...register('company')} />
+              </Field>
+
+              <Field className="col-span-2">
+                <FieldLabel htmlFor="streetLine1">{t('streetAddress')}</FieldLabel>
+                <Input
+                  id="streetLine1"
+                  {...register('streetLine1', { required: t('streetRequired') })}
+                />
+                <FieldError>{errors.streetLine1?.message}</FieldError>
+              </Field>
+
+              <Field className="col-span-2">
+                <FieldLabel htmlFor="streetLine2">{t('apartment')}</FieldLabel>
+                <Input id="streetLine2" {...register('streetLine2')} />
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="city">{t('city')}</FieldLabel>
+                <Input
+                  id="city"
+                  {...register('city', { required: t('cityRequired') })}
+                />
+                <FieldError>{errors.city?.message}</FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="province">{t('stateProvince')}</FieldLabel>
+                <Input
+                  id="province"
+                  {...register('province')}
+                />
+                <FieldError>{errors.province?.message}</FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="postalCode">{t('postalCode')}</FieldLabel>
+                <Input
+                  id="postalCode"
+                  {...register('postalCode', { required: t('postalCodeRequired') })}
+                />
+                <FieldError>{errors.postalCode?.message}</FieldError>
+              </Field>
+
+              <Field>
+                <FieldLabel htmlFor="countryCode">{t('country')}</FieldLabel>
+                <Controller
+                  name="countryCode"
+                  control={control}
+                  rules={{ required: t('countryRequired') }}
+                  render={({ field }) => (
+                    <CountrySelect
+                      countries={countries}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={saving}
+                    />
+                  )}
+                />
+                <FieldError>{errors.countryCode?.message}</FieldError>
+              </Field>
+
+              <Field className="col-span-2">
+                <FieldLabel htmlFor="phoneNumber">{t('phoneNumberLabel')}</FieldLabel>
+                <Input
+                  id="phoneNumber"
+                  type="tel"
+                  {...register('phoneNumber')}
+                />
+                <FieldError>{errors.phoneNumber?.message}</FieldError>
+              </Field>
+            </div>
+          </FieldGroup>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setDialogOpen(false)} disabled={saving}>
+              {t('cancel')}
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {t('saveAddress')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+
+  const isCurrentSelectionValid = addressSource === 'company'
+    ? !!selectedCompanyAddressId
+    : !!selectedAddressId;
+
+  const hasAnyAddresses = addresses.length > 0 || hasCompanyAddresses;
+
+  return (
+    <div className="space-y-6">
+      {hasAnyAddresses && (
+        <div className="space-y-4">
+          <h3 className="font-semibold">{t('selectSavedAddress')}</h3>
+
+          {hasCompanyAddresses ? (
+            <Tabs
+              value={addressSource}
+              onValueChange={(v) => setAddressSource(v as 'personal' | 'company')}
+            >
+              <TabsList>
+                <TabsTrigger value="personal">{t('personalAddresses')}</TabsTrigger>
+                <TabsTrigger value="company">{t('companyAddresses')}</TabsTrigger>
+              </TabsList>
+              <TabsContent value="personal">
+                {addresses.length > 0 ? personalAddressList : (
+                  <p className="text-sm text-muted-foreground py-4">{t('noPersonalAddresses')}</p>
+                )}
+              </TabsContent>
+              <TabsContent value="company">
+                {companyAddressList}
+              </TabsContent>
+            </Tabs>
+          ) : (
+            personalAddressList
+          )}
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="same-billing"
+              checked={useSameForBilling}
+              onCheckedChange={(checked) => setUseSameForBilling(checked === true)}
+            />
+            <label
+              htmlFor="same-billing"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {t('useSameForBilling')}
+            </label>
+          </div>
+
+          {!useSameForBilling && allAddresses.length > 0 && (
+            <div className="space-y-3">
+              <h3 className="font-semibold text-sm">{t('selectBillingAddress')}</h3>
+              <RadioGroup value={selectedBillingAddressId || ''} onValueChange={setSelectedBillingAddressId} className="grid grid-cols-2 gap-3">
+                {allAddresses.map((address) => (
+                  <Label key={`billing-${address.id}`} htmlFor={`billing-${address.id}`} className="cursor-pointer">
+                    <Card className={`p-3 h-full transition-colors ${selectedBillingAddressId === address.id ? 'border-primary ring-1 ring-primary' : 'hover:border-muted-foreground/30'}`}>
+                      <div className="flex items-start gap-2">
+                        <RadioGroupItem value={address.id} id={`billing-${address.id}`} className="mt-0.5 shrink-0" />
+                        <div className="text-xs leading-relaxed">
+                          <p className="font-medium text-sm">{address.fullName}</p>
+                          <p className="text-muted-foreground">{address.streetLine1}</p>
+                          <p className="text-muted-foreground">{address.city}, {address.province} {address.postalCode}</p>
+                          <p className="text-muted-foreground">{address.country.name}</p>
+                        </div>
+                      </div>
+                    </Card>
+                  </Label>
+                ))}
+              </RadioGroup>
+            </div>
+          )}
+
+          <div className="flex gap-3">
+            <Button
+              onClick={handleSelectExistingAddress}
+              disabled={!isCurrentSelectionValid || (!useSameForBilling && !selectedBillingAddressId) || loading}
+              className="flex-1"
+            >
+              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {returnsToReview ? t('saveAndReturn') : t('continueWithSelected')}
+            </Button>
+
+            {addressSource === 'personal' && newAddressDialog}
+          </div>
+        </div>
+      )}
+
+      {!hasAnyAddresses && (
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+            <form onSubmit={handleSubmit(onSaveNewAddress)}>
+              <DialogHeader>
+                <DialogTitle>{t('addShippingAddress')}</DialogTitle>
+                <DialogDescription>
+                  {t('addShippingAddressDescription')}
+                </DialogDescription>
+              </DialogHeader>
+
+              <FieldGroup className="my-6">
+                <div className="grid grid-cols-2 gap-4">
+                  <Field className="col-span-2">
+                    <FieldLabel htmlFor="fullName">{t('fullNameLabel')}</FieldLabel>
+                    <Input
+                      id="fullName"
+                      {...register('fullName')}
+                    />
+                    <FieldError>{errors.fullName?.message}</FieldError>
+                  </Field>
+
+                  <Field className="col-span-2">
+                    <FieldLabel htmlFor="company">{t('company')}</FieldLabel>
+                    <Input id="company" {...register('company')} />
+                  </Field>
+
+                  <Field className="col-span-2">
+                    <FieldLabel htmlFor="streetLine1">{t('streetAddress')}</FieldLabel>
+                    <Input
+                      id="streetLine1"
+                      {...register('streetLine1', { required: t('streetRequired') })}
+                    />
+                    <FieldError>{errors.streetLine1?.message}</FieldError>
+                  </Field>
+
+                  <Field className="col-span-2">
+                    <FieldLabel htmlFor="streetLine2">{t('apartment')}</FieldLabel>
+                    <Input id="streetLine2" {...register('streetLine2')} />
+                  </Field>
+
+                  <Field>
+                    <FieldLabel htmlFor="city">{t('cityLabel')}</FieldLabel>
+                    <Input
+                      id="city"
+                      {...register('city')}
+                    />
+                    <FieldError>{errors.city?.message}</FieldError>
+                  </Field>
+
+                  <Field>
+                    <FieldLabel htmlFor="province">{t('stateProvince')}</FieldLabel>
+                    <Input
+                      id="province"
+                      {...register('province')}
+                    />
+                    <FieldError>{errors.province?.message}</FieldError>
+                  </Field>
+
+                  <Field>
+                    <FieldLabel htmlFor="postalCode">{t('postalCodeLabel')}</FieldLabel>
+                    <Input
+                      id="postalCode"
+                      {...register('postalCode')}
+                    />
+                    <FieldError>{errors.postalCode?.message}</FieldError>
+                  </Field>
+
+                  <Field>
+                    <FieldLabel htmlFor="countryCode">{t('country')}</FieldLabel>
+                    <Controller
+                      name="countryCode"
+                      control={control}
+                      rules={{ required: t('countryRequired') }}
+                      render={({ field }) => (
+                        <CountrySelect
+                          countries={countries}
+                          value={field.value}
+                          onValueChange={field.onChange}
+                          disabled={saving}
+                        />
+                      )}
+                    />
+                    <FieldError>{errors.countryCode?.message}</FieldError>
+                  </Field>
+
+                  <Field className="col-span-2">
+                    <FieldLabel htmlFor="phoneNumber">{t('phoneNumberLabel')}</FieldLabel>
+                    <Input
+                      id="phoneNumber"
+                      type="tel"
+                      {...register('phoneNumber')}
+                    />
+                    <FieldError>{errors.phoneNumber?.message}</FieldError>
+                  </Field>
+                </div>
+              </FieldGroup>
+
+              <DialogFooter>
+                <Button type="submit" disabled={saving} className="w-full">
+                  {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  {t('saveAddress')}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+}

package/dist/assets/storefront/src/app/[locale]/checkout/types.ts

@@ -0,0 +1,7 @@
+import { ResultOf } from '@/graphql';
+import { GetActiveOrderForCheckoutQuery } from '@/lib/vendure/queries';
+
+export type CheckoutOrder = NonNullable<ResultOf<typeof GetActiveOrderForCheckoutQuery>['activeOrder']>;
+export type OrderLine = CheckoutOrder['lines'][number];
+export type ShippingAddress = CheckoutOrder['shippingAddress'];
+export type BillingAddress = CheckoutOrder['billingAddress'];

package/dist/assets/storefront/src/app/[locale]/error.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {Link} from '@/i18n/navigation';
+import {useTranslations} from 'next-intl';
+
+export default function GlobalError({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+    const t = useTranslations('Errors');
+    return (
+        <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4">
+            <div className="text-center space-y-6 max-w-md">
+                <h1 className="text-6xl font-bold text-destructive">Error</h1>
+                <h2 className="text-2xl font-semibold">Something went wrong</h2>
+                <p className="text-muted-foreground">
+                    {t('unexpectedError')}
+                </p>
+                <div className="flex gap-4 justify-center">
+                    <Button onClick={() => reset()} variant="outline">
+                        Try Again
+                    </Button>
+                    <Button asChild>
+                        <Link href="/">Go to Home</Link>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,28 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {RequestPasswordResetMutation} from '@/lib/vendure/mutations';
+
+export async function requestPasswordResetAction(prevState: { error?: string; success?: boolean } | undefined, formData: FormData) {
+    const emailAddress = formData.get('emailAddress') as string;
+
+    if (!emailAddress) {
+        return {error: 'Email address is required'};
+    }
+
+    const [result, error] = await client.mutate(RequestPasswordResetMutation, {
+        emailAddress,
+    });
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const resetResult = result.data.requestPasswordReset;
+
+    if (resetResult?.__typename !== 'Success') {
+        return {error: resetResult?.message || 'Failed to request password reset'};
+    }
+
+    return {success: true};
+}