@vendure-platform/create 0.5.0 → 0.5.1

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

@@ -1,518 +1,597 @@
 'use client';
 
-import { useState } from 'react';
-import { useTranslations } from 'next-intl';
+import { CountrySelect } from '@/components/shared/country-select';
 import { Button } from '@/components/ui/button';
+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, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useRouter } from '@/i18n/navigation';
+import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { createCustomerAddress, setShippingAddress } from '../actions';
 import { useCheckout } from '../checkout-provider';
-import { setShippingAddress, createCustomerAddress } from '../actions';
-import { CountrySelect } from '@/components/shared/country-select';
 
 interface ShippingAddressStepProps {
-  onComplete: () => void;
-  returnsToReview?: boolean;
+    onComplete: () => void;
+    returnsToReview?: boolean;
 }
 
 interface AddressFormData {
-  fullName: string;
-  streetLine1: string;
-  streetLine2?: string;
-  city: string;
-  province: string;
-  postalCode: string;
-  countryCode: string;
-  phoneNumber: string;
-  company?: string;
+    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 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 { 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>
+
+    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>
-                      </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>
-      )}
+                </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>
+    );
 
-      {!hasAnyAddresses && (
+    const newAddressDialog = (
         <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')}
+            <DialogTrigger asChild>
+                <Button type="button" variant="outline">
+                    {t('addNewAddress')}
                 </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
+            </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>
-      )}
-    </div>
-  );
+    );
+
+    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>
+    );
 }