@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/accept-invitation/[token]/accept-invitation-client.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import {useState} from 'react';
+import {useTranslations} from 'next-intl';
+import {Button} from '@/components/ui/button';
+import {Alert, AlertDescription} from '@/components/ui/alert';
+import {Loader2, AlertCircle} from 'lucide-react';
+import {acceptInvitationAction} from './actions';
+
+interface AcceptInvitationClientProps {
+    token: string;
+    companyName: string;
+}
+
+export function AcceptInvitationClient({token, companyName}: AcceptInvitationClientProps) {
+    const t = useTranslations('AcceptInvitation');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleAccept = async () => {
+        setIsSubmitting(true);
+        setError(null);
+
+        try {
+            const result = await acceptInvitationAction(token);
+            if (result?.error) {
+                setError(result.error);
+            }
+        } catch {
+            setError(t('unexpectedError'));
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="space-y-4">
+            {error && (
+                <Alert variant="destructive">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertDescription>{error}</AlertDescription>
+                </Alert>
+            )}
+
+            <Button
+                onClick={handleAccept}
+                disabled={isSubmitting}
+                size="lg"
+                className="w-full"
+            >
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {t('acceptButton')}
+            </Button>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/accept-invitation/[token]/actions.ts

@@ -0,0 +1,32 @@
+'use server';
+
+import {readFragment} from '@/graphql';
+import {client} from '@/lib/vendure/api';
+import {AcceptCompanyInvitationMutation} from '@/lib/vendure/mutations';
+import {CompanyFragment} from '@/lib/vendure/fragments';
+import {setCompanyId} from '@/lib/company-context';
+import {revalidatePath} from 'next/cache';
+import {redirect} from '@/i18n/navigation';
+
+export async function acceptInvitationAction(token: string): Promise<{error: string} | undefined> {
+    const [result, error] = await client.mutate(
+        AcceptCompanyInvitationMutation,
+        {token},
+    );
+    if (error) throw error;
+
+    const data = result.data.acceptCompanyInvitation;
+
+    if (data.__typename === 'InvitationTokenError') {
+        return {error: data.message};
+    }
+
+    if (data.__typename === 'CompanyAccount') {
+        const company = readFragment(CompanyFragment, data.company);
+        await setCompanyId(company.id);
+        revalidatePath('/', 'layout');
+        await redirect('/account/company');
+    }
+
+    return {error: 'An unexpected error occurred.'};
+}

package/dist/assets/storefront/src/app/[locale]/accept-invitation/[token]/page.tsx

@@ -0,0 +1,85 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {getTranslations} from 'next-intl/server';
+import {locale as rootLocale} from 'next/root-params';
+import type {Locale} from '@/i18n/routing';
+import {redirect} from '@/i18n/navigation';
+import {readFragment} from '@/graphql';
+import {client} from '@/lib/vendure/api';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {GetCompanyInvitationQuery} from '@/lib/vendure/queries';
+import {CompanyFragment} from '@/lib/vendure/fragments';
+import {AuthPageShell} from '@/components/layout/auth-page-shell';
+import {AcceptInvitationClient} from './accept-invitation-client';
+import {SignOutAndRetry} from './sign-out-and-retry';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'AcceptInvitation'});
+    return {title: t('pageTitle')};
+}
+
+async function AcceptInvitationContent({params}: {params: Promise<{locale: string; token: string}>}) {
+    const {token} = await params;
+    const t = await getTranslations('AcceptInvitation');
+    const activeCustomer = await getActiveCustomer();
+    if (!activeCustomer) {
+        await redirect(`/sign-in?redirectTo=/accept-invitation/${token}`);
+    }
+
+    let companyName: string | null = null;
+    let error: string | null = null;
+
+    const [result, queryError] = await client.query(
+        GetCompanyInvitationQuery,
+        {token},
+    );
+    if (queryError) {
+        error = t('invalidOrExpired');
+    } else {
+        const company = readFragment(CompanyFragment, result.data.companyInvitation?.company);
+        companyName = company?.name ?? null;
+    }
+
+    if (error || !companyName) {
+        return (
+            <AuthPageShell>
+                <div className="text-center space-y-6">
+                    <h1 className="text-3xl font-bold">{t('invalidTitle')}</h1>
+                    <p className="text-muted-foreground">
+                        {t('differentAccount', {email: activeCustomer?.emailAddress ?? ''})}
+                    </p>
+                    <SignOutAndRetry token={token} />
+                </div>
+            </AuthPageShell>
+        );
+    }
+
+    return (
+        <AuthPageShell>
+            <div className="text-center space-y-6">
+                <h1 className="text-3xl font-bold">{t('joinCompany', {companyName})}</h1>
+                <p className="text-muted-foreground">
+                    {t('invitedToJoin', {companyName})}
+                </p>
+                <AcceptInvitationClient token={token} companyName={companyName} />
+            </div>
+        </AuthPageShell>
+    );
+}
+
+export default function AcceptInvitationPage({
+    params,
+}: {
+    params: Promise<{locale: string; token: string}>;
+}) {
+    return (
+        <Suspense fallback={
+            <AuthPageShell>
+                <p className="text-sm text-muted-foreground">Loading...</p>
+            </AuthPageShell>
+        }>
+            <AcceptInvitationContent params={params} />
+        </Suspense>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/accept-invitation/[token]/sign-out-and-retry.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import {useTransition} from 'react';
+import {useTranslations} from 'next-intl';
+import {useRouter} from '@/i18n/navigation';
+import {Button} from '@/components/ui/button';
+import {logoutAction} from '@/app/[locale]/sign-in/actions';
+
+export function SignOutAndRetry({token}: {token: string}) {
+    const t = useTranslations('AcceptInvitation');
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+
+    const handleSignOut = () => {
+        startTransition(async () => {
+            await logoutAction();
+            router.replace(`/sign-in?redirectTo=/accept-invitation/${token}`);
+        });
+    };
+
+    return (
+        <Button onClick={handleSignOut} disabled={isPending} variant="outline">
+            {isPending ? t('signingOut') : t('signOutAndRetry')}
+        </Button>
+    );
+}

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

@@ -0,0 +1,125 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {
+    CreateCustomerAddressMutation,
+    UpdateCustomerAddressMutation,
+    DeleteCustomerAddressMutation,
+} from '@/lib/vendure/mutations';
+import {revalidatePath} from 'next/cache';
+
+interface AddressInput {
+    fullName: string;
+    streetLine1: string;
+    streetLine2?: string;
+    city: string;
+    province: string;
+    postalCode: string;
+    countryCode: string;
+    phoneNumber: string;
+    company?: string;
+}
+
+interface UpdateAddressInput extends AddressInput {
+    id: string;
+}
+
+export async function createAddress(address: AddressInput) {
+    const [result, error] = await client.mutate(
+        CreateCustomerAddressMutation,
+        {input: address},
+    );
+    if (error) throw error;
+
+    if (!result.data.createCustomerAddress) {
+        throw new Error('Failed to create address');
+    }
+
+    revalidatePath('/account/addresses');
+    return result.data.createCustomerAddress;
+}
+
+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,
+            },
+        },
+    );
+    if (error) throw error;
+
+    if (!result.data.updateCustomerAddress) {
+        throw new Error('Failed to update address');
+    }
+
+    revalidatePath('/account/addresses');
+    return result.data.updateCustomerAddress;
+}
+
+export async function deleteAddress(id: string) {
+    const [result, error] = await client.mutate(
+        DeleteCustomerAddressMutation,
+        {id},
+    );
+    if (error) throw error;
+
+    if (!result.data.deleteCustomerAddress.success) {
+        throw new Error('Failed to delete address');
+    }
+
+    revalidatePath('/account/addresses');
+    return result.data.deleteCustomerAddress;
+}
+
+export async function setDefaultShippingAddress(id: string) {
+    const [result, error] = await client.mutate(
+        UpdateCustomerAddressMutation,
+        {
+            input: {
+                id,
+                defaultShippingAddress: true,
+            },
+        },
+    );
+    if (error) throw error;
+
+    if (!result.data.updateCustomerAddress) {
+        throw new Error('Failed to set default shipping address');
+    }
+
+    revalidatePath('/account/addresses');
+    return result.data.updateCustomerAddress;
+}
+
+export async function setDefaultBillingAddress(id: string) {
+    const [result, error] = await client.mutate(
+        UpdateCustomerAddressMutation,
+        {
+            input: {
+                id,
+                defaultBillingAddress: true,
+            },
+        },
+    );
+    if (error) throw error;
+
+    if (!result.data.updateCustomerAddress) {
+        throw new Error('Failed to set default billing address');
+    }
+
+    revalidatePath('/account/addresses');
+    return result.data.updateCustomerAddress;
+}

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

@@ -0,0 +1,180 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+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';
+
+interface Country {
+  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;
+}
+
+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 AddressFormProps {
+  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>
+  );
+}