@vendure-platform/create 0.4.0 → 0.5.1

package/dist/assets/storefront/src/app/[locale]/checkout/checkout-provider.tsx

@@ -1,181 +1,181 @@
 'use client';
 
-import { createContext, useContext, ReactNode, useState } from 'react';
+import { createContext, ReactNode, useContext, useState } from 'react';
 import { CheckoutOrder } from './types';
 
 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 CompanyAddress {
-  id: string;
-  fullName: string;
-  streetLine1: string;
-  streetLine2?: string | null;
-  province?: string | null;
-  country: { id: string; code: string; name: string };
-  city?: string | null;
-  postalCode?: string | null;
-  phoneNumber?: string | null;
-  defaultShippingAddress: boolean;
-  defaultBillingAddress: boolean;
-  businessUnit?: { id: string; name: string } | null;
+    id: string;
+    fullName: string;
+    streetLine1: string;
+    streetLine2?: string | null;
+    province?: string | null;
+    country: { id: string; code: string; name: string };
+    city?: string | null;
+    postalCode?: string | null;
+    phoneNumber?: string | null;
+    defaultShippingAddress: boolean;
+    defaultBillingAddress: boolean;
+    businessUnit?: { id: string; name: string } | null;
 }
 
 interface CompanyPaymentMethod {
-  id: string;
-  name: string;
-  description?: string | null;
-  terms?: string | null;
+    id: string;
+    name: string;
+    description?: string | null;
+    terms?: string | null;
 }
 
 interface Country {
-  id: string;
-  code: string;
-  name: string;
+    id: string;
+    code: string;
+    name: string;
 }
 
 interface ShippingMethod {
-  id: string;
-  name: string;
-  code: string;
-  description?: string | null;
-  price: number;
-  priceWithTax: number;
+    id: string;
+    name: string;
+    code: string;
+    description?: string | null;
+    price: number;
+    priceWithTax: number;
 }
 
 interface PaymentMethod {
-  id: string;
-  name: string;
-  code: string;
-  description?: string | null;
-  isEligible: boolean;
-  eligibilityMessage?: string | null;
+    id: string;
+    name: string;
+    code: string;
+    description?: string | null;
+    isEligible: boolean;
+    eligibilityMessage?: string | null;
 }
 
 interface CheckoutContextType {
-  order: CheckoutOrder;
-  addresses: CustomerAddress[];
-  companyAddresses: CompanyAddress[];
-  companyPaymentMethods: CompanyPaymentMethod[];
-  countries: Country[];
-  shippingMethods: ShippingMethod[];
-  paymentMethods: PaymentMethod[];
-  selectedPaymentMethodCode: string | null;
-  setSelectedPaymentMethodCode: (code: string | null) => void;
-  selectedAddressId: string | null;
-  setSelectedAddressId: (id: string | null) => void;
-  selectedCompanyAddressId: string | null;
-  setSelectedCompanyAddressId: (id: string | null) => void;
-  addressSource: 'personal' | 'company';
-  setAddressSource: (source: 'personal' | 'company') => void;
-  useSameForBilling: boolean;
-  setUseSameForBilling: (value: boolean) => void;
-  selectedBillingAddressId: string | null;
-  setSelectedBillingAddressId: (id: string | null) => void;
-  storeCreditsCoverOrder: boolean;
+    order: CheckoutOrder;
+    addresses: CustomerAddress[];
+    companyAddresses: CompanyAddress[];
+    companyPaymentMethods: CompanyPaymentMethod[];
+    countries: Country[];
+    shippingMethods: ShippingMethod[];
+    paymentMethods: PaymentMethod[];
+    selectedPaymentMethodCode: string | null;
+    setSelectedPaymentMethodCode: (code: string | null) => void;
+    selectedAddressId: string | null;
+    setSelectedAddressId: (id: string | null) => void;
+    selectedCompanyAddressId: string | null;
+    setSelectedCompanyAddressId: (id: string | null) => void;
+    addressSource: 'personal' | 'company';
+    setAddressSource: (source: 'personal' | 'company') => void;
+    useSameForBilling: boolean;
+    setUseSameForBilling: (value: boolean) => void;
+    selectedBillingAddressId: string | null;
+    setSelectedBillingAddressId: (id: string | null) => void;
+    storeCreditsCoverOrder: boolean;
 }
 
 const CheckoutContext = createContext<CheckoutContextType | null>(null);
 
 interface CheckoutProviderProps {
-  children: ReactNode;
-  order: CheckoutOrder;
-  addresses: CustomerAddress[];
-  companyAddresses: CompanyAddress[];
-  companyPaymentMethods: CompanyPaymentMethod[];
-  countries: Country[];
-  shippingMethods: ShippingMethod[];
-  paymentMethods: PaymentMethod[];
+    children: ReactNode;
+    order: CheckoutOrder;
+    addresses: CustomerAddress[];
+    companyAddresses: CompanyAddress[];
+    companyPaymentMethods: CompanyPaymentMethod[];
+    countries: Country[];
+    shippingMethods: ShippingMethod[];
+    paymentMethods: PaymentMethod[];
 }
 
 export function CheckoutProvider({
-  children,
-  order,
-  addresses,
-  companyAddresses,
-  companyPaymentMethods,
-  countries,
-  shippingMethods,
-  paymentMethods,
+    children,
+    order,
+    addresses,
+    companyAddresses,
+    companyPaymentMethods,
+    countries,
+    shippingMethods,
+    paymentMethods,
 }: CheckoutProviderProps) {
-  const [selectedPaymentMethodCode, setSelectedPaymentMethodCode] = useState<string | null>(
-    paymentMethods.length === 1 ? paymentMethods[0].code : null
-  );
+    const [selectedPaymentMethodCode, setSelectedPaymentMethodCode] = useState<string | null>(
+        paymentMethods.length === 1 ? paymentMethods[0].code : null,
+    );
 
-  const hasCompanyAddresses = companyAddresses.length > 0;
-  const [addressSource, setAddressSource] = useState<'personal' | 'company'>(
-    hasCompanyAddresses ? 'company' : 'personal'
-  );
-  const [selectedAddressId, setSelectedAddressId] = useState<string | null>(() => {
-    if (order.shippingAddress) {
-      const match = addresses.find(
-        (a) => a.streetLine1 === order.shippingAddress?.streetLine1 &&
-               a.postalCode === order.shippingAddress?.postalCode
-      );
-      if (match) return match.id;
-    }
-    const defaultAddr = addresses.find((a) => a.defaultShippingAddress);
-    if (defaultAddr) return defaultAddr.id;
-    if (addresses.length === 1) return addresses[0].id;
-    return null;
-  });
-  const [selectedCompanyAddressId, setSelectedCompanyAddressId] = useState<string | null>(() => {
-    const defaultAddr = companyAddresses.find((a) => a.defaultShippingAddress);
-    return defaultAddr?.id || null;
-  });
-  const [useSameForBilling, setUseSameForBilling] = useState(true);
-  const [selectedBillingAddressId, setSelectedBillingAddressId] = useState<string | null>(null);
+    const hasCompanyAddresses = companyAddresses.length > 0;
+    const [addressSource, setAddressSource] = useState<'personal' | 'company'>(
+        hasCompanyAddresses ? 'company' : 'personal',
+    );
+    const [selectedAddressId, setSelectedAddressId] = useState<string | null>(() => {
+        if (order.shippingAddress) {
+            const match = addresses.find(
+                (a) =>
+                    a.streetLine1 === order.shippingAddress?.streetLine1 &&
+                    a.postalCode === order.shippingAddress?.postalCode,
+            );
+            if (match) return match.id;
+        }
+        const defaultAddr = addresses.find((a) => a.defaultShippingAddress);
+        if (defaultAddr) return defaultAddr.id;
+        if (addresses.length === 1) return addresses[0].id;
+        return null;
+    });
+    const [selectedCompanyAddressId, setSelectedCompanyAddressId] = useState<string | null>(() => {
+        const defaultAddr = companyAddresses.find((a) => a.defaultShippingAddress);
+        return defaultAddr?.id || null;
+    });
+    const [useSameForBilling, setUseSameForBilling] = useState(true);
+    const [selectedBillingAddressId, setSelectedBillingAddressId] = useState<string | null>(null);
 
-  const storeCreditsCoverOrder =
-    (order.storeCreditsApplied ?? []).length > 0 &&
-    order.totalWithTaxAfterStoreCredit === 0;
+    const storeCreditsCoverOrder =
+        (order.storeCreditsApplied ?? []).length > 0 && order.totalWithTaxAfterStoreCredit === 0;
 
-  return (
-    <CheckoutContext.Provider
-      value={{
-        order,
-        addresses,
-        companyAddresses,
-        companyPaymentMethods,
-        countries,
-        shippingMethods,
-        paymentMethods,
-        selectedPaymentMethodCode,
-        setSelectedPaymentMethodCode,
-        selectedAddressId,
-        setSelectedAddressId,
-        selectedCompanyAddressId,
-        setSelectedCompanyAddressId,
-        addressSource,
-        setAddressSource,
-        useSameForBilling,
-        setUseSameForBilling,
-        selectedBillingAddressId,
-        setSelectedBillingAddressId,
-        storeCreditsCoverOrder,
-      }}
-    >
-      {children}
-    </CheckoutContext.Provider>
-  );
+    return (
+        <CheckoutContext.Provider
+            value={{
+                order,
+                addresses,
+                companyAddresses,
+                companyPaymentMethods,
+                countries,
+                shippingMethods,
+                paymentMethods,
+                selectedPaymentMethodCode,
+                setSelectedPaymentMethodCode,
+                selectedAddressId,
+                setSelectedAddressId,
+                selectedCompanyAddressId,
+                setSelectedCompanyAddressId,
+                addressSource,
+                setAddressSource,
+                useSameForBilling,
+                setUseSameForBilling,
+                selectedBillingAddressId,
+                setSelectedBillingAddressId,
+                storeCreditsCoverOrder,
+            }}
+        >
+            {children}
+        </CheckoutContext.Provider>
+    );
 }
 
 export function useCheckout() {
-  const context = useContext(CheckoutContext);
-  if (!context) {
-    throw new Error('useCheckout must be used within CheckoutProvider');
-  }
-  return context;
+    const context = useContext(CheckoutContext);
+    if (!context) {
+        throw new Error('useCheckout must be used within CheckoutProvider');
+    }
+    return context;
 }

package/dist/assets/storefront/src/app/[locale]/checkout/order-summary.tsx

@@ -1,160 +1,179 @@
 'use client';
 
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
+import { Price } from '@/components/commerce/price';
+import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
-import { Button } from '@/components/ui/button';
+import { maskCode } from '@/lib/format';
 import { X } from 'lucide-react';
-import { OrderLine } from './types';
-import { useCheckout } from './checkout-provider';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
 import { removeStoreCredit } from './actions';
-import { Price } from '@/components/commerce/price';
-import { maskCode } from '@/lib/format';
+import { useCheckout } from './checkout-provider';
+import { OrderLine } from './types';
 
 export default function OrderSummary() {
-  const { order } = useCheckout();
-  const t = useTranslations('Checkout');
+    const { order } = useCheckout();
+    const t = useTranslations('Checkout');
 
-  const storeCreditsApplied = order.storeCreditsApplied ?? [];
-  const totalAfterCredit = order.totalWithTaxAfterStoreCredit;
-  const hasCreditsApplied = storeCreditsApplied.length > 0;
-  const taxTotal = order.totalWithTax - order.total;
+    const storeCreditsApplied = order.storeCreditsApplied ?? [];
+    const totalAfterCredit = order.totalWithTaxAfterStoreCredit;
+    const hasCreditsApplied = storeCreditsApplied.length > 0;
+    const taxTotal = order.totalWithTax - order.total;
 
-  return (
-    <Card className="sticky top-4">
-      <CardHeader>
-        <CardTitle>{t('orderSummary')}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="space-y-3">
-          {order.lines.map((line: OrderLine) => (
-            <div key={line.id} className="flex gap-3">
-              {line.productVariant.product.featuredAsset && (
-                <div className="flex-shrink-0 w-15 h-15">
-                  <Image
-                    src={line.productVariant.product.featuredAsset.preview}
-                    alt={line.productVariant.name}
-                    width={60}
-                    height={60}
-                    className="rounded object-cover w-full h-full"
-                  />
+    return (
+        <Card className="sticky top-4">
+            <CardHeader>
+                <CardTitle>{t('orderSummary')}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="space-y-3">
+                    {order.lines.map((line: OrderLine) => (
+                        <div key={line.id} className="flex gap-3">
+                            {line.productVariant.product.featuredAsset && (
+                                <div className="flex-shrink-0 w-15 h-15">
+                                    <Image
+                                        src={line.productVariant.product.featuredAsset.preview}
+                                        alt={line.productVariant.name}
+                                        width={60}
+                                        height={60}
+                                        className="rounded object-cover w-full h-full"
+                                    />
+                                </div>
+                            )}
+                            <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium line-clamp-2">
+                                    {line.productVariant.product.name}
+                                </p>
+                                {line.productVariant.name !== line.productVariant.product.name && (
+                                    <p className="text-xs text-muted-foreground">
+                                        {line.productVariant.name}
+                                    </p>
+                                )}
+                                <p className="text-xs text-muted-foreground">
+                                    {t('qty', { quantity: line.quantity })}
+                                </p>
+                            </div>
+                            <div className="text-sm font-medium">
+                                <Price value={line.linePrice} currencyCode={order.currencyCode} />
+                            </div>
+                        </div>
+                    ))}
                 </div>
-              )}
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium line-clamp-2">
-                  {line.productVariant.product.name}
-                </p>
-                {line.productVariant.name !== line.productVariant.product.name && (
-                  <p className="text-xs text-muted-foreground">
-                    {line.productVariant.name}
-                  </p>
-                )}
-                <p className="text-xs text-muted-foreground">
-                  {t('qty', {quantity: line.quantity})}
-                </p>
-              </div>
-              <div className="text-sm font-medium">
-                <Price value={line.linePrice} currencyCode={order.currencyCode} />
-              </div>
-            </div>
-          ))}
-        </div>
 
-        <Separator />
+                <Separator />
 
-        <div className="space-y-2">
-          <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">{t('subtotal')}</span>
-            <span>
-              <Price value={order.subTotal} currencyCode={order.currencyCode} />
-            </span>
-          </div>
+                <div className="space-y-2">
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">{t('subtotal')}</span>
+                        <span>
+                            <Price value={order.subTotal} currencyCode={order.currencyCode} />
+                        </span>
+                    </div>
 
-          {order.discounts && order.discounts.length > 0 && (
-            <>
-              {order.discounts.map((discount, index: number) => (
-                <div key={index} className="flex justify-between text-sm text-green-600">
-                  <span>{discount.description}</span>
-                  <span>
-                    <Price value={discount.amount} currencyCode={order.currencyCode} />
-                  </span>
-                </div>
-              ))}
-            </>
-          )}
+                    {order.discounts && order.discounts.length > 0 && (
+                        <>
+                            {order.discounts.map((discount, index: number) => (
+                                <div key={index} className="flex justify-between text-sm text-green-600">
+                                    <span>{discount.description}</span>
+                                    <span>
+                                        <Price value={discount.amount} currencyCode={order.currencyCode} />
+                                    </span>
+                                </div>
+                            ))}
+                        </>
+                    )}
 
-          <div className="flex justify-between text-sm">
-            <span className="text-muted-foreground">{t('shipping')}</span>
-            <span>
-              {order.shipping > 0
-                ? <Price value={order.shipping} currencyCode={order.currencyCode} />
-                : t('toBeCalculated')}
-            </span>
-          </div>
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">{t('shipping')}</span>
+                        <span>
+                            {order.shipping > 0 ? (
+                                <Price value={order.shipping} currencyCode={order.currencyCode} />
+                            ) : (
+                                t('toBeCalculated')
+                            )}
+                        </span>
+                    </div>
 
-          {order.taxSummary && order.taxSummary.length > 0 ? (
-            order.taxSummary.map((tax, index: number) => (
-              <div key={index} className="flex justify-between text-sm">
-                <span className="text-muted-foreground">
-                  {tax.description} ({tax.taxRate}%)
-                </span>
-                <span>
-                  <Price value={tax.taxTotal} currencyCode={order.currencyCode} />
-                </span>
-              </div>
-            ))
-          ) : (
-            <div className="flex justify-between text-sm">
-              <span className="text-muted-foreground">{t('tax')}</span>
-              <span>
-                <Price value={taxTotal} currencyCode={order.currencyCode} />
-              </span>
-            </div>
-          )}
+                    {order.taxSummary && order.taxSummary.length > 0 ? (
+                        order.taxSummary.map((tax, index: number) => (
+                            <div key={index} className="flex justify-between text-sm">
+                                <span className="text-muted-foreground">
+                                    {tax.description} ({tax.taxRate}%)
+                                </span>
+                                <span>
+                                    <Price value={tax.taxTotal} currencyCode={order.currencyCode} />
+                                </span>
+                            </div>
+                        ))
+                    ) : (
+                        <div className="flex justify-between text-sm">
+                            <span className="text-muted-foreground">{t('tax')}</span>
+                            <span>
+                                <Price value={taxTotal} currencyCode={order.currencyCode} />
+                            </span>
+                        </div>
+                    )}
 
-          {hasCreditsApplied && (
-            <>
-              {storeCreditsApplied.map((credit) => (
-                <div key={credit.code} className="flex justify-between items-center text-sm text-green-600">
-                  <span className="flex items-center gap-1">
-                    {t('storeCredit', {code: maskCode(credit.code)})}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 text-muted-foreground hover:text-destructive"
-                      onClick={() => removeStoreCredit(credit.code)}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </span>
-                  <span>-<Price value={credit.amountDeducted} currencyCode={order.currencyCode} /></span>
+                    {hasCreditsApplied && (
+                        <>
+                            {storeCreditsApplied.map((credit) => (
+                                <div
+                                    key={credit.code}
+                                    className="flex justify-between items-center text-sm text-green-600"
+                                >
+                                    <span className="flex items-center gap-1">
+                                        {t('storeCredit', { code: maskCode(credit.code) })}
+                                        <Button
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-5 w-5 text-muted-foreground hover:text-destructive"
+                                            onClick={() => removeStoreCredit(credit.code)}
+                                        >
+                                            <X className="h-3 w-3" />
+                                        </Button>
+                                    </span>
+                                    <span>
+                                        -
+                                        <Price
+                                            value={credit.amountDeducted}
+                                            currencyCode={order.currencyCode}
+                                        />
+                                    </span>
+                                </div>
+                            ))}
+                        </>
+                    )}
                 </div>
-              ))}
-            </>
-          )}
-        </div>
 
-        <Separator />
+                <Separator />
 
-        <div>
-          <div className="flex justify-between font-bold text-lg">
-            <span>{t('total')}</span>
-            <span>
-              {hasCreditsApplied && totalAfterCredit != null ? (
-                <span className="flex items-center gap-2">
-                  <span className="text-sm font-normal text-muted-foreground line-through">
-                    <Price value={order.totalWithTax} currencyCode={order.currencyCode} />
-                  </span>
-                  <Price value={totalAfterCredit} currencyCode={order.currencyCode} taxLabel="incl" />
-                </span>
-              ) : (
-                <Price value={order.totalWithTax} currencyCode={order.currencyCode} taxLabel="incl" />
-              )}
-            </span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
+                <div>
+                    <div className="flex justify-between font-bold text-lg">
+                        <span>{t('total')}</span>
+                        <span>
+                            {hasCreditsApplied && totalAfterCredit != null ? (
+                                <span className="flex items-center gap-2">
+                                    <span className="text-sm font-normal text-muted-foreground line-through">
+                                        <Price value={order.totalWithTax} currencyCode={order.currencyCode} />
+                                    </span>
+                                    <Price
+                                        value={totalAfterCredit}
+                                        currencyCode={order.currencyCode}
+                                        taxLabel="incl"
+                                    />
+                                </span>
+                            ) : (
+                                <Price
+                                    value={order.totalWithTax}
+                                    currencyCode={order.currencyCode}
+                                    taxLabel="incl"
+                                />
+                            )}
+                        </span>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    );
 }