@vendure-platform/create 0.5.0 → 0.5.1

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

@@ -1,12 +1,12 @@
 'use server';
 
-import {client} from '@/lib/vendure/api';
+import { client } from '@/lib/vendure/api';
 import {
     CreateCustomerAddressMutation,
-    UpdateCustomerAddressMutation,
     DeleteCustomerAddressMutation,
+    UpdateCustomerAddressMutation,
 } from '@/lib/vendure/mutations';
-import {revalidatePath} from 'next/cache';
+import { revalidatePath } from 'next/cache';
 
 interface AddressInput {
     fullName: string;
@@ -25,10 +25,7 @@ interface UpdateAddressInput extends AddressInput {
 }
 
 export async function createAddress(address: AddressInput) {
-    const [result, error] = await client.mutate(
-        CreateCustomerAddressMutation,
-        {input: address},
-    );
+    const [result, error] = await client.mutate(CreateCustomerAddressMutation, { input: address });
     if (error) throw error;
 
     if (!result.data.createCustomerAddress) {
@@ -40,25 +37,22 @@ export async function createAddress(address: AddressInput) {
 }
 
 export async function updateAddress(address: UpdateAddressInput) {
-    const {id, ...input} = address;
-
-    const [result, error] = await client.mutate(
-        UpdateCustomerAddressMutation,
-        {
-            input: {
-                id,
-                fullName: input.fullName,
-                streetLine1: input.streetLine1,
-                streetLine2: input.streetLine2,
-                city: input.city,
-                province: input.province,
-                postalCode: input.postalCode,
-                countryCode: input.countryCode,
-                phoneNumber: input.phoneNumber,
-                company: input.company,
-            },
+    const { id, ...input } = address;
+
+    const [result, error] = await client.mutate(UpdateCustomerAddressMutation, {
+        input: {
+            id,
+            fullName: input.fullName,
+            streetLine1: input.streetLine1,
+            streetLine2: input.streetLine2,
+            city: input.city,
+            province: input.province,
+            postalCode: input.postalCode,
+            countryCode: input.countryCode,
+            phoneNumber: input.phoneNumber,
+            company: input.company,
         },
-    );
+    });
     if (error) throw error;
 
     if (!result.data.updateCustomerAddress) {
@@ -70,10 +64,7 @@ export async function updateAddress(address: UpdateAddressInput) {
 }
 
 export async function deleteAddress(id: string) {
-    const [result, error] = await client.mutate(
-        DeleteCustomerAddressMutation,
-        {id},
-    );
+    const [result, error] = await client.mutate(DeleteCustomerAddressMutation, { id });
     if (error) throw error;
 
     if (!result.data.deleteCustomerAddress.success) {
@@ -85,15 +76,12 @@ export async function deleteAddress(id: string) {
 }
 
 export async function setDefaultShippingAddress(id: string) {
-    const [result, error] = await client.mutate(
-        UpdateCustomerAddressMutation,
-        {
-            input: {
-                id,
-                defaultShippingAddress: true,
-            },
+    const [result, error] = await client.mutate(UpdateCustomerAddressMutation, {
+        input: {
+            id,
+            defaultShippingAddress: true,
         },
-    );
+    });
     if (error) throw error;
 
     if (!result.data.updateCustomerAddress) {
@@ -105,15 +93,12 @@ export async function setDefaultShippingAddress(id: string) {
 }
 
 export async function setDefaultBillingAddress(id: string) {
-    const [result, error] = await client.mutate(
-        UpdateCustomerAddressMutation,
-        {
-            input: {
-                id,
-                defaultBillingAddress: true,
-            },
+    const [result, error] = await client.mutate(UpdateCustomerAddressMutation, {
+        input: {
+            id,
+            defaultBillingAddress: true,
         },
-    );
+    });
     if (error) throw error;
 
     if (!result.data.updateCustomerAddress) {

package/dist/assets/storefront/src/app/[locale]/account/addresses/address-form.tsx

@@ -1,180 +1,187 @@
 'use client';
 
+import { CountrySelect } from '@/components/shared/country-select';
 import { Button } from '@/components/ui/button';
+import { Field, FieldError, FieldGroup, FieldLabel } from '@/components/ui/field';
 import { Input } from '@/components/ui/input';
-import { Field, FieldLabel, FieldError, FieldGroup } from '@/components/ui/field';
-import { useForm, Controller } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
-import { CountrySelect } from '@/components/shared/country-select';
 import { useTranslations } from 'next-intl';
+import { Controller, useForm } from 'react-hook-form';
 
 interface Country {
-  id: string;
-  code: string;
-  name: string;
+    id: string;
+    code: string;
+    name: string;
 }
 
 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;
 }
 
 interface CustomerAddress {
-  id: string;
-  fullName?: string | null;
-  company?: string | null;
-  streetLine1: string;
-  streetLine2?: string | null;
-  city?: string | null;
-  province?: string | null;
-  postalCode?: string | null;
-  country: { id: string; code: string; name: string };
-  phoneNumber?: string | null;
-  defaultShippingAddress?: boolean | null;
-  defaultBillingAddress?: boolean | null;
+    id: string;
+    fullName?: string | null;
+    company?: string | null;
+    streetLine1: string;
+    streetLine2?: string | null;
+    city?: string | null;
+    province?: string | null;
+    postalCode?: string | null;
+    country: { id: string; code: string; name: string };
+    phoneNumber?: string | null;
+    defaultShippingAddress?: boolean | null;
+    defaultBillingAddress?: boolean | null;
 }
 
 interface AddressFormProps {
-  countries: Country[];
-  address?: CustomerAddress;
-  onSubmit: (data: AddressFormData & { id?: string }) => Promise<void>;
-  onCancel: () => void;
-  isSubmitting: boolean;
+    countries: Country[];
+    address?: CustomerAddress;
+    onSubmit: (data: AddressFormData & { id?: string }) => Promise<void>;
+    onCancel: () => void;
+    isSubmitting: boolean;
 }
 
 export function AddressForm({ countries, address, onSubmit, onCancel, isSubmitting }: AddressFormProps) {
-  const t = useTranslations('Account');
-  const { register, handleSubmit, formState: { errors }, control } = useForm<AddressFormData>({
-    defaultValues: address ? {
-      fullName: address.fullName || '',
-      company: address.company || '',
-      streetLine1: address.streetLine1,
-      streetLine2: address.streetLine2 || '',
-      city: address.city || '',
-      province: address.province || '',
-      postalCode: address.postalCode || '',
-      countryCode: address.country.code,
-      phoneNumber: address.phoneNumber || '',
-    } : {
-      countryCode: countries[0]?.code || 'US',
-    }
-  });
-
-  const handleFormSubmit = async (data: AddressFormData) => {
-    await onSubmit(address ? { ...data, id: address.id } : data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(handleFormSubmit)}>
-      <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') })}
-              disabled={isSubmitting}
-            />
-            <FieldError>{errors.fullName?.message}</FieldError>
-          </Field>
-
-          <Field className="col-span-2">
-            <FieldLabel htmlFor="company">{t('company')}</FieldLabel>
-            <Input id="company" {...register('company')} disabled={isSubmitting} />
-          </Field>
-
-          <Field className="col-span-2">
-            <FieldLabel htmlFor="streetLine1">{t('streetAddress')}</FieldLabel>
-            <Input
-              id="streetLine1"
-              {...register('streetLine1', { required: t('streetRequired') })}
-              disabled={isSubmitting}
-            />
-            <FieldError>{errors.streetLine1?.message}</FieldError>
-          </Field>
-
-          <Field className="col-span-2">
-            <FieldLabel htmlFor="streetLine2">{t('apartment')}</FieldLabel>
-            <Input id="streetLine2" {...register('streetLine2')} disabled={isSubmitting} />
-          </Field>
-
-          <Field>
-            <FieldLabel htmlFor="city">{t('city')}</FieldLabel>
-            <Input
-              id="city"
-              {...register('city', { required: t('cityRequired') })}
-              disabled={isSubmitting}
-            />
-            <FieldError>{errors.city?.message}</FieldError>
-          </Field>
-
-          <Field>
-            <FieldLabel htmlFor="province">{t('stateProvince')}</FieldLabel>
-            <Input
-              id="province"
-              {...register('province', { required: t('stateProvinceRequired') })}
-              disabled={isSubmitting}
-            />
-            <FieldError>{errors.province?.message}</FieldError>
-          </Field>
-
-          <Field>
-            <FieldLabel htmlFor="postalCode">{t('postalCode')}</FieldLabel>
-            <Input
-              id="postalCode"
-              {...register('postalCode', { required: t('postalCodeRequired') })}
-              disabled={isSubmitting}
-            />
-            <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={isSubmitting}
-                />
-              )}
-            />
-            <FieldError>{errors.countryCode?.message}</FieldError>
-          </Field>
-
-          <Field className="col-span-2">
-            <FieldLabel htmlFor="phoneNumber">{t('phoneNumberField')}</FieldLabel>
-            <Input
-              id="phoneNumber"
-              type="tel"
-              {...register('phoneNumber', { required: t('phoneRequired') })}
-              disabled={isSubmitting}
-            />
-            <FieldError>{errors.phoneNumber?.message}</FieldError>
-          </Field>
-        </div>
-      </FieldGroup>
-
-      <div className="flex gap-3 justify-end">
-        <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
-          {t('cancel')}
-        </Button>
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          {address ? t('updateAddress') : t('saveAddress')}
-        </Button>
-      </div>
-    </form>
-  );
+    const t = useTranslations('Account');
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        control,
+    } = useForm<AddressFormData>({
+        defaultValues: address
+            ? {
+                  fullName: address.fullName || '',
+                  company: address.company || '',
+                  streetLine1: address.streetLine1,
+                  streetLine2: address.streetLine2 || '',
+                  city: address.city || '',
+                  province: address.province || '',
+                  postalCode: address.postalCode || '',
+                  countryCode: address.country.code,
+                  phoneNumber: address.phoneNumber || '',
+              }
+            : {
+                  countryCode: countries[0]?.code || 'US',
+              },
+    });
+
+    const handleFormSubmit = async (data: AddressFormData) => {
+        await onSubmit(address ? { ...data, id: address.id } : data);
+    };
+
+    return (
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+            <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') })}
+                            disabled={isSubmitting}
+                        />
+                        <FieldError>{errors.fullName?.message}</FieldError>
+                    </Field>
+
+                    <Field className="col-span-2">
+                        <FieldLabel htmlFor="company">{t('company')}</FieldLabel>
+                        <Input id="company" {...register('company')} disabled={isSubmitting} />
+                    </Field>
+
+                    <Field className="col-span-2">
+                        <FieldLabel htmlFor="streetLine1">{t('streetAddress')}</FieldLabel>
+                        <Input
+                            id="streetLine1"
+                            {...register('streetLine1', { required: t('streetRequired') })}
+                            disabled={isSubmitting}
+                        />
+                        <FieldError>{errors.streetLine1?.message}</FieldError>
+                    </Field>
+
+                    <Field className="col-span-2">
+                        <FieldLabel htmlFor="streetLine2">{t('apartment')}</FieldLabel>
+                        <Input id="streetLine2" {...register('streetLine2')} disabled={isSubmitting} />
+                    </Field>
+
+                    <Field>
+                        <FieldLabel htmlFor="city">{t('city')}</FieldLabel>
+                        <Input
+                            id="city"
+                            {...register('city', { required: t('cityRequired') })}
+                            disabled={isSubmitting}
+                        />
+                        <FieldError>{errors.city?.message}</FieldError>
+                    </Field>
+
+                    <Field>
+                        <FieldLabel htmlFor="province">{t('stateProvince')}</FieldLabel>
+                        <Input
+                            id="province"
+                            {...register('province', { required: t('stateProvinceRequired') })}
+                            disabled={isSubmitting}
+                        />
+                        <FieldError>{errors.province?.message}</FieldError>
+                    </Field>
+
+                    <Field>
+                        <FieldLabel htmlFor="postalCode">{t('postalCode')}</FieldLabel>
+                        <Input
+                            id="postalCode"
+                            {...register('postalCode', { required: t('postalCodeRequired') })}
+                            disabled={isSubmitting}
+                        />
+                        <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={isSubmitting}
+                                />
+                            )}
+                        />
+                        <FieldError>{errors.countryCode?.message}</FieldError>
+                    </Field>
+
+                    <Field className="col-span-2">
+                        <FieldLabel htmlFor="phoneNumber">{t('phoneNumberField')}</FieldLabel>
+                        <Input
+                            id="phoneNumber"
+                            type="tel"
+                            {...register('phoneNumber', { required: t('phoneRequired') })}
+                            disabled={isSubmitting}
+                        />
+                        <FieldError>{errors.phoneNumber?.message}</FieldError>
+                    </Field>
+                </div>
+            </FieldGroup>
+
+            <div className="flex gap-3 justify-end">
+                <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+                    {t('cancel')}
+                </Button>
+                <Button type="submit" disabled={isSubmitting}>
+                    {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {address ? t('updateAddress') : t('saveAddress')}
+                </Button>
+            </div>
+        </form>
+    );
 }

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

@@ -1,10 +1,5 @@
 'use client';
 
-import { useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -16,6 +11,9 @@ import {
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -23,10 +21,18 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Plus, MoreVertical, Home, CreditCard, Edit2, Trash2 } from 'lucide-react';
-import { AddressForm } from './address-form';
-import { createAddress, updateAddress, deleteAddress, setDefaultShippingAddress, setDefaultBillingAddress } from './actions';
 import { useRouter } from '@/i18n/navigation';
+import { CreditCard, Edit2, Home, MoreVertical, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import {
+    createAddress,
+    deleteAddress,
+    setDefaultBillingAddress,
+    setDefaultShippingAddress,
+    updateAddress,
+} from './actions';
+import { AddressForm } from './address-form';
 
 interface Country {
     id: string;
@@ -63,7 +69,9 @@ export function AddressesClient({ addresses, countries }: AddressesClientProps)
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [addressToDelete, setAddressToDelete] = useState<string | null>(null);
     const [isDeleting, setIsDeleting] = useState(false);
-    const [settingDefault, setSettingDefault] = useState<{ id: string; type: 'shipping' | 'billing' } | null>(null);
+    const [settingDefault, setSettingDefault] = useState<{ id: string; type: 'shipping' | 'billing' } | null>(
+        null,
+    );
 
     const handleAddNew = () => {
         setEditingAddress(null);
@@ -170,7 +178,8 @@ export function AddressesClient({ addresses, countries }: AddressesClientProps)
                                 <div className="flex items-start justify-between">
                                     <div className="space-y-1 flex-1">
                                         <CardTitle className="text-lg">{address.fullName}</CardTitle>
-                                        {(address.defaultShippingAddress || address.defaultBillingAddress) && (
+                                        {(address.defaultShippingAddress ||
+                                            address.defaultBillingAddress) && (
                                             <div className="flex gap-2">
                                                 {address.defaultShippingAddress && (
                                                     <Badge variant="secondary">{t('defaultShipping')}</Badge>
@@ -183,11 +192,7 @@ export function AddressesClient({ addresses, countries }: AddressesClientProps)
                                     </div>
                                     <DropdownMenu>
                                         <DropdownMenuTrigger asChild>
-                                            <Button
-                                                variant="ghost"
-                                                size="icon"
-                                                aria-label="Address actions"
-                                            >
+                                            <Button variant="ghost" size="icon" aria-label="Address actions">
                                                 <MoreVertical className="h-4 w-4" />
                                             </Button>
                                         </DropdownMenuTrigger>
@@ -201,21 +206,27 @@ export function AddressesClient({ addresses, countries }: AddressesClientProps)
                                                 onClick={() => handleSetDefaultShipping(address.id)}
                                                 disabled={
                                                     address.defaultShippingAddress ||
-                                                    (settingDefault?.id === address.id && settingDefault?.type === 'shipping')
+                                                    (settingDefault?.id === address.id &&
+                                                        settingDefault?.type === 'shipping')
                                                 }
                                             >
                                                 <Home className="mr-2 h-4 w-4" />
-                                                {address.defaultShippingAddress ? t('defaultShipping') : t('setAsShipping')}
+                                                {address.defaultShippingAddress
+                                                    ? t('defaultShipping')
+                                                    : t('setAsShipping')}
                                             </DropdownMenuItem>
                                             <DropdownMenuItem
                                                 onClick={() => handleSetDefaultBilling(address.id)}
                                                 disabled={
                                                     address.defaultBillingAddress ||
-                                                    (settingDefault?.id === address.id && settingDefault?.type === 'billing')
+                                                    (settingDefault?.id === address.id &&
+                                                        settingDefault?.type === 'billing')
                                                 }
                                             >
                                                 <CreditCard className="mr-2 h-4 w-4" />
-                                                {address.defaultBillingAddress ? t('defaultBilling') : t('setAsBilling')}
+                                                {address.defaultBillingAddress
+                                                    ? t('defaultBilling')
+                                                    : t('setAsBilling')}
                                             </DropdownMenuItem>
                                             <DropdownMenuSeparator />
                                             <DropdownMenuItem
@@ -251,11 +262,11 @@ export function AddressesClient({ addresses, countries }: AddressesClientProps)
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
                 <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                     <DialogHeader>
-                        <DialogTitle>{editingAddress ? t('editAddress') : t('addNewAddressDialog')}</DialogTitle>
+                        <DialogTitle>
+                            {editingAddress ? t('editAddress') : t('addNewAddressDialog')}
+                        </DialogTitle>
                         <DialogDescription>
-                            {editingAddress
-                                ? t('updateAddressDetails')
-                                : t('fillAddressForm')}
+                            {editingAddress ? t('updateAddressDetails') : t('fillAddressForm')}
                         </DialogDescription>
                     </DialogHeader>
                     <AddressForm
@@ -275,9 +286,7 @@ export function AddressesClient({ addresses, countries }: AddressesClientProps)
                 <AlertDialogContent>
                     <AlertDialogHeader>
                         <AlertDialogTitle>{t('deleteConfirmTitle')}</AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {t('deleteConfirmDescription')}
-                        </AlertDialogDescription>
+                        <AlertDialogDescription>{t('deleteConfirmDescription')}</AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                         <AlertDialogCancel disabled={isDeleting}>{t('cancel')}</AlertDialogCancel>

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

@@ -6,9 +6,7 @@ export default function AddressesLoading() {
         <div className="space-y-6">
             <div>
                 <h1 className="text-3xl font-bold">Addresses</h1>
-                <p className="text-muted-foreground mt-2">
-                    Manage your saved shipping and billing addresses
-                </p>
+                <p className="text-muted-foreground mt-2">Manage your saved shipping and billing addresses</p>
             </div>
 
             <div className="flex justify-between items-center">