@vendure-platform/create 0.1.0

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

@@ -0,0 +1,292 @@
+'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,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    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';
+
+interface Country {
+    id: string;
+    code: string;
+    name: 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;
+}
+
+interface AddressesClientProps {
+    addresses: CustomerAddress[];
+    countries: Country[];
+}
+
+export function AddressesClient({ addresses, countries }: AddressesClientProps) {
+    const t = useTranslations('Account');
+    const router = useRouter();
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingAddress, setEditingAddress] = useState<CustomerAddress | null>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    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 handleAddNew = () => {
+        setEditingAddress(null);
+        setDialogOpen(true);
+    };
+
+    const handleEdit = (address: CustomerAddress) => {
+        setEditingAddress(address);
+        setDialogOpen(true);
+    };
+
+    const handleDelete = (addressId: string) => {
+        setAddressToDelete(addressId);
+        setDeleteDialogOpen(true);
+    };
+
+    const handleSetDefaultShipping = async (addressId: string) => {
+        setSettingDefault({ id: addressId, type: 'shipping' });
+        try {
+            await setDefaultShippingAddress(addressId);
+            router.refresh();
+        } catch (error) {
+            console.error('Error setting default shipping address:', error);
+            alert(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        } finally {
+            setSettingDefault(null);
+        }
+    };
+
+    const handleSetDefaultBilling = async (addressId: string) => {
+        setSettingDefault({ id: addressId, type: 'billing' });
+        try {
+            await setDefaultBillingAddress(addressId);
+            router.refresh();
+        } catch (error) {
+            console.error('Error setting default billing address:', error);
+            alert(`Error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        } finally {
+            setSettingDefault(null);
+        }
+    };
+
+    const confirmDelete = async () => {
+        if (!addressToDelete) return;
+
+        setIsDeleting(true);
+        try {
+            await deleteAddress(addressToDelete);
+            router.refresh();
+            setDeleteDialogOpen(false);
+            setAddressToDelete(null);
+        } catch (error) {
+            console.error('Error deleting address:', error);
+            alert(`Error deleting address: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        } finally {
+            setIsDeleting(false);
+        }
+    };
+
+    const handleSubmit = async (data: any) => {
+        setIsSubmitting(true);
+        try {
+            if (editingAddress) {
+                await updateAddress(data);
+            } else {
+                await createAddress(data);
+            }
+            router.refresh();
+            setDialogOpen(false);
+            setEditingAddress(null);
+        } catch (error) {
+            console.error('Error saving address:', error);
+            alert(`Error saving address: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <>
+            <div className="flex justify-between items-center">
+                <div></div>
+                <Button onClick={handleAddNew}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    {t('addNewAddress')}
+                </Button>
+            </div>
+
+            {addresses.length === 0 ? (
+                <Card>
+                    <CardContent className="py-12 text-center">
+                        <p className="text-muted-foreground mb-4">{t('noAddressesSaved')}</p>
+                        <Button onClick={handleAddNew}>
+                            <Plus className="mr-2 h-4 w-4" />
+                            {t('addFirstAddress')}
+                        </Button>
+                    </CardContent>
+                </Card>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {addresses.map((address) => (
+                        <Card key={address.id}>
+                            <CardHeader>
+                                <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) && (
+                                            <div className="flex gap-2">
+                                                {address.defaultShippingAddress && (
+                                                    <Badge variant="secondary">{t('defaultShipping')}</Badge>
+                                                )}
+                                                {address.defaultBillingAddress && (
+                                                    <Badge variant="secondary">{t('defaultBilling')}</Badge>
+                                                )}
+                                            </div>
+                                        )}
+                                    </div>
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger asChild>
+                                            <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                aria-label="Address actions"
+                                            >
+                                                <MoreVertical className="h-4 w-4" />
+                                            </Button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent align="end">
+                                            <DropdownMenuItem onClick={() => handleEdit(address)}>
+                                                <Edit2 className="mr-2 h-4 w-4" />
+                                                {t('edit')}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuItem
+                                                onClick={() => handleSetDefaultShipping(address.id)}
+                                                disabled={
+                                                    address.defaultShippingAddress ||
+                                                    (settingDefault?.id === address.id && settingDefault?.type === 'shipping')
+                                                }
+                                            >
+                                                <Home className="mr-2 h-4 w-4" />
+                                                {address.defaultShippingAddress ? t('defaultShipping') : t('setAsShipping')}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuItem
+                                                onClick={() => handleSetDefaultBilling(address.id)}
+                                                disabled={
+                                                    address.defaultBillingAddress ||
+                                                    (settingDefault?.id === address.id && settingDefault?.type === 'billing')
+                                                }
+                                            >
+                                                <CreditCard className="mr-2 h-4 w-4" />
+                                                {address.defaultBillingAddress ? t('defaultBilling') : t('setAsBilling')}
+                                            </DropdownMenuItem>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuItem
+                                                onClick={() => handleDelete(address.id)}
+                                                className="text-destructive focus:text-destructive"
+                                            >
+                                                <Trash2 className="mr-2 h-4 w-4 text-destructive" />
+                                                {t('delete')}
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                            </CardHeader>
+                            <CardContent>
+                                <div className="text-sm text-muted-foreground space-y-1">
+                                    {address.company && <p>{address.company}</p>}
+                                    <p>
+                                        {address.streetLine1}
+                                        {address.streetLine2 && `, ${address.streetLine2}`}
+                                    </p>
+                                    <p>
+                                        {address.city}, {address.province} {address.postalCode}
+                                    </p>
+                                    <p>{address.country.name}</p>
+                                    <p>{address.phoneNumber}</p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>{editingAddress ? t('editAddress') : t('addNewAddressDialog')}</DialogTitle>
+                        <DialogDescription>
+                            {editingAddress
+                                ? t('updateAddressDetails')
+                                : t('fillAddressForm')}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <AddressForm
+                        countries={countries}
+                        address={editingAddress || undefined}
+                        onSubmit={handleSubmit}
+                        onCancel={() => {
+                            setDialogOpen(false);
+                            setEditingAddress(null);
+                        }}
+                        isSubmitting={isSubmitting}
+                    />
+                </DialogContent>
+            </Dialog>
+
+            <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t('deleteConfirmTitle')}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t('deleteConfirmDescription')}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={isDeleting}>{t('cancel')}</AlertDialogCancel>
+                        <AlertDialogAction onClick={confirmDelete} disabled={isDeleting}>
+                            {isDeleting ? t('deleting') : t('delete')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+}

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

@@ -0,0 +1,48 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function AddressesLoading() {
+    return (
+        <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>
+            </div>
+
+            <div className="flex justify-between items-center">
+                <div></div>
+                <Skeleton className="h-10 w-40" />
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {[1, 2, 3, 4].map((i) => (
+                    <Card key={i}>
+                        <CardHeader>
+                            <div className="flex items-start justify-between">
+                                <div className="space-y-2 flex-1">
+                                    <Skeleton className="h-6 w-40" />
+                                    <Skeleton className="h-5 w-32" />
+                                </div>
+                                <div className="flex gap-2">
+                                    <Skeleton className="h-8 w-8" />
+                                    <Skeleton className="h-8 w-8" />
+                                </div>
+                            </div>
+                        </CardHeader>
+                        <CardContent>
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-48" />
+                                <Skeleton className="h-4 w-56" />
+                                <Skeleton className="h-4 w-44" />
+                                <Skeleton className="h-4 w-36" />
+                                <Skeleton className="h-4 w-32" />
+                            </div>
+                        </CardContent>
+                    </Card>
+                ))}
+            </div>
+        </div>
+    );
+}

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

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

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

@@ -0,0 +1,28 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {SubmitApprovalDecisionMutation} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+interface SubmitDecisionInput {
+    approvalRequestId: string;
+    decision: 'APPROVED' | 'REJECTED';
+    comment?: string;
+}
+
+export async function submitApprovalDecision(input: SubmitDecisionInput) {
+    const [, error] = await client.mutate(
+        SubmitApprovalDecisionMutation,
+        {input},
+    );
+
+    if (error) {
+        return {
+            success: false,
+            message: error.message || 'Failed to submit decision',
+        };
+    }
+
+    revalidatePath('/account/approvals');
+    return {success: true};
+}