@cimplify/sdk 0.71.0 → 0.72.0

package/dist/react.d.mts

@@ -760,25 +760,41 @@ interface CimplifyUserButtonProps {
 declare function CimplifyUserButton({ session: controlledSession, sessionUri, links, identityUrl, signOutHref, onSignOut, clientId, redirectUri, signInLabel, onSignIn, hideName, align, className, }: CimplifyUserButtonProps): React$1.ReactElement | null;
 
 interface PriceProps {
-    /** The amount in base (business) currency. */
+    /** The amount, denominated in `currency` (or the business base currency). */
     amount: number | string;
-    /** Explicit currency — skips provider lookup when provided. */
+    /**
+     * Currency the `amount` is denominated in. Pass the product/order currency
+     * so the value renders correctly during SSR — before the provider has
+     * loaded the business client-side. Falls back to the provider's base
+     * currency, then USD.
+     */
     currency?: CurrencyCode;
     /** Optional CSS class name for the wrapping span. */
     className?: string;
     /** Optional prefix rendered before the formatted price (e.g. "+"). */
     prefix?: string;
+    /**
+     * Apply the provider's FX display-currency override when one is active.
+     * Default true. The conversion is a post-hydration enhancement: it only
+     * engages once an FX rate has loaded client-side, so SSR and first-paint
+     * output always match and no currency flash occurs.
+     */
+    convert?: boolean;
 }
 /**
  * Price — renders a formatted price value.
  *
- * When used inside CimplifyProvider: reads displayCurrency and convertPrice
- * from context for FX conversion.
+ * Currency is resolved from the `currency` prop (the amount's source currency),
+ * falling back to the provider's base currency, then USD. Because the source
+ * currency comes from data rather than the client-only provider bootstrap, an
+ * explicit `currency` renders correctly during SSR.
  *
- * When used outside a provider (or with explicit `currency` prop): formats
- * directly — no provider required. Works in any React environment.
+ * FX display-currency conversion (when a user picks a non-base display
+ * currency) is layered on top after hydration, and only when the source is the
+ * base currency the FX rate is computed from. It never affects the server or
+ * first-paint render, so there is no hydration mismatch.
  */
-declare function Price({ amount, currency, className, prefix }: PriceProps): React$1.ReactElement;
+declare function Price({ amount, currency, className, prefix, convert, }: PriceProps): React$1.ReactElement;
 
 interface CimplifyClientContextValue {
     client: CimplifyClient;
@@ -815,13 +831,23 @@ interface CimplifyProviderProps {
     client?: CimplifyClient;
     children: ReactNode;
     onLocationChange?: (location: Location) => void;
+    /**
+     * Server-fetched business to seed the provider. When provided, `business`
+     * and `baseCurrency` are correct on the first (server) render, so prices
+     * render in the right currency during SSR with no loading flash. Pass from
+     * a Server Component via `getServerClient().business.getInfo()`. Passing
+     * `null` marks "no business" as resolved (still skips the loading state).
+     */
+    initialBusiness?: Business | null;
+    /** Server-fetched locations to seed the provider alongside `initialBusiness`. */
+    initialLocations?: Location[];
     /**
      * Toggle hidden optimistic UI for collection-backed hooks. Default true.
      * Set to false to disable optimistic updates app-wide (e.g. e2e tests).
      */
     optimistic?: boolean;
 }
-declare function CimplifyProvider({ client, children, onLocationChange, optimistic, }: CimplifyProviderProps): React$1.ReactElement;
+declare function CimplifyProvider({ client, children, onLocationChange, initialBusiness, initialLocations, optimistic, }: CimplifyProviderProps): React$1.ReactElement;
 declare function useCimplify(): CimplifyContextValue;
 declare function useOptionalCimplify(): CimplifyContextValue | null;
 declare function useCimplifyClient(): CimplifyClientContextValue;
@@ -1508,13 +1534,14 @@ interface VariantSelectorProps {
     variants: VariantView[];
     variantAxes?: VariantAxisWithValues[];
     basePrice?: Money;
+    currency?: CurrencyCode;
     selectedVariantId?: string;
     onVariantChange: (variantId: string | undefined, variant: VariantView | undefined) => void;
     productName?: string;
     className?: string;
     classNames?: VariantSelectorClassNames;
 }
-declare function VariantSelector({ variants, variantAxes, basePrice, selectedVariantId, onVariantChange, productName, className, classNames, }: VariantSelectorProps): React$1.ReactElement | null;
+declare function VariantSelector({ variants, variantAxes, basePrice, currency, selectedVariantId, onVariantChange, productName, className, classNames, }: VariantSelectorProps): React$1.ReactElement | null;
 
 interface AddOnSelectorClassNames {
     root?: string;
@@ -1534,10 +1561,11 @@ interface AddOnSelectorProps {
     addOns: AddOnWithOptions[];
     selectedOptions: string[];
     onOptionsChange: (optionIds: string[]) => void;
+    currency?: CurrencyCode;
     className?: string;
     classNames?: AddOnSelectorClassNames;
 }
-declare function AddOnSelector({ addOns, selectedOptions, onOptionsChange, className, classNames, }: AddOnSelectorProps): React$1.ReactElement | null;
+declare function AddOnSelector({ addOns, selectedOptions, onOptionsChange, currency, className, classNames, }: AddOnSelectorProps): React$1.ReactElement | null;
 
 interface BundleSelectorClassNames {
     root?: string;
@@ -1562,13 +1590,14 @@ interface BundleSelectorProps {
     bundlePrice?: Money;
     discountValue?: Money;
     pricingType?: BundlePriceType;
+    currency?: CurrencyCode;
     onSelectionsChange: (selections: BundleSelectionInput[]) => void;
     onPriceChange?: (price: number) => void;
     onReady?: (ready: boolean) => void;
     className?: string;
     classNames?: BundleSelectorClassNames;
 }
-declare function BundleSelector({ components, bundlePrice, discountValue, pricingType, onSelectionsChange, onPriceChange, onReady, className, classNames, }: BundleSelectorProps): React$1.ReactElement | null;
+declare function BundleSelector({ components, bundlePrice, discountValue, pricingType, currency, onSelectionsChange, onPriceChange, onReady, className, classNames, }: BundleSelectorProps): React$1.ReactElement | null;
 
 interface CompositeSelectorClassNames {
     root?: string;
@@ -1603,6 +1632,7 @@ interface CompositeSelectorClassNames {
 interface CompositeSelectorProps {
     compositeId: string;
     groups: CompositeGroupView[];
+    currency?: CurrencyCode;
     onSelectionsChange: (selections: ComponentSelectionInput[]) => void;
     onPriceChange?: (price: CompositePriceResult | null) => void;
     onReady?: (ready: boolean) => void;
@@ -1610,7 +1640,7 @@ interface CompositeSelectorProps {
     className?: string;
     classNames?: CompositeSelectorClassNames;
 }
-declare function CompositeSelector({ compositeId, groups, onSelectionsChange, onPriceChange, onReady, skipPriceFetch, className, classNames, }: CompositeSelectorProps): React$1.ReactElement | null;
+declare function CompositeSelector({ compositeId, groups, currency, onSelectionsChange, onPriceChange, onReady, skipPriceFetch, className, classNames, }: CompositeSelectorProps): React$1.ReactElement | null;
 
 interface ProductCustomizerClassNames {
     root?: string;
@@ -1828,10 +1858,11 @@ interface CustomerInputFieldsProps {
     values: Record<string, unknown>;
     onChange: (values: Record<string, unknown>) => void;
     onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;
+    currency?: CurrencyCode;
     className?: string;
     classNames?: CustomerInputFieldsClassNames;
 }
-declare function CustomerInputFields({ fields, values, onChange, onFileUpload, className, classNames, }: CustomerInputFieldsProps): React$1.ReactElement | null;
+declare function CustomerInputFields({ fields, values, onChange, onFileUpload, currency, className, classNames, }: CustomerInputFieldsProps): React$1.ReactElement | null;
 
 interface SaleBadgeClassNames {
     root?: string;
@@ -2409,6 +2440,8 @@ interface SlotPickerProps {
     groupByTimeOfDay?: boolean;
     /** Show price on each slot. Default: true. */
     showPrice?: boolean;
+    /** Currency the slot prices are denominated in. */
+    currency?: CurrencyCode;
     /**
      * Hide slots whose `start_time` is already in the past. Default: true.
      * Set to false to show elapsed slots greyed-out (still un-selectable).
@@ -2435,7 +2468,7 @@ interface SlotPickerProps {
     className?: string;
     classNames?: SlotPickerClassNames;
 }
-declare function SlotPicker({ slots: slotsProp, serviceId, date, participantCount, selectedSlot, onSlotSelect, groupByTimeOfDay, showPrice, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, emptyMessage, className, classNames, }: SlotPickerProps): React$1.ReactElement;
+declare function SlotPicker({ slots: slotsProp, serviceId, date, participantCount, selectedSlot, onSlotSelect, groupByTimeOfDay, showPrice, currency, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, emptyMessage, className, classNames, }: SlotPickerProps): React$1.ReactElement;
 
 interface DateSlotPickerClassNames {
     root?: string;
@@ -2461,6 +2494,8 @@ interface DateSlotPickerProps {
     availability?: DayAvailability[];
     /** Show price on slots. Default: true. */
     showPrice?: boolean;
+    /** Currency the slot prices are denominated in. */
+    currency?: CurrencyCode;
     /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */
     schedulingMode?: SchedulingMode;
     /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */
@@ -2474,7 +2509,7 @@ interface DateSlotPickerProps {
     className?: string;
     classNames?: DateSlotPickerClassNames;
 }
-declare function DateSlotPicker({ serviceId, daysToShow, participantCount, selectedSlot, onSlotSelect, availability: availabilityProp, showPrice, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, className, classNames, }: DateSlotPickerProps): React$1.ReactElement;
+declare function DateSlotPicker({ serviceId, daysToShow, participantCount, selectedSlot, onSlotSelect, availability: availabilityProp, showPrice, currency, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, className, classNames, }: DateSlotPickerProps): React$1.ReactElement;
 
 interface DatePickerClassNames {
     /** Outer wrapper around the trigger. */
@@ -3480,6 +3515,8 @@ interface BillingPlanSelectorProps {
     onPlanSelect?: (plan: ProductBillingPlan | null) => void;
     /** Currently selected plan ID. */
     selectedPlanId?: string | null;
+    /** Currency the plan amounts are denominated in. */
+    currency?: CurrencyCode;
     /** Show a "One-time purchase" option at the top. */
     showOneTimePurchase?: boolean;
     /** Label for the one-time purchase option. Default: "One-time purchase". */
@@ -3495,7 +3532,7 @@ interface BillingPlanSelectorProps {
  * Renders plan cards with frequency, markup, trial, and setup fee details.
  * Returns `null` when no plans are available (and one-time purchase is hidden).
  */
-declare function BillingPlanSelector({ productId, plans: plansProp, onPlanSelect, selectedPlanId, showOneTimePurchase, oneTimePurchaseLabel, renderPlan, className, classNames, }: BillingPlanSelectorProps): React$1.ReactElement | null;
+declare function BillingPlanSelector({ productId, plans: plansProp, currency, onPlanSelect, selectedPlanId, showOneTimePurchase, oneTimePurchaseLabel, renderPlan, className, classNames, }: BillingPlanSelectorProps): React$1.ReactElement | null;
 
 interface VolumePricingClassNames {
     root?: string;
@@ -3511,10 +3548,11 @@ interface VolumePricingProps {
     tiers: QuantityPricingTier[];
     currentQuantity?: number;
     defaultOpen?: boolean;
+    currency?: CurrencyCode;
     className?: string;
     classNames?: VolumePricingClassNames;
 }
-declare function VolumePricing({ tiers, currentQuantity, defaultOpen, className, classNames, }: VolumePricingProps): React$1.ReactElement | null;
+declare function VolumePricing({ tiers, currentQuantity, defaultOpen, currency, className, classNames, }: VolumePricingProps): React$1.ReactElement | null;
 
 interface PriceRangeProps {
     product: Product | ProductWithDetails;

package/dist/react.d.ts

@@ -760,25 +760,41 @@ interface CimplifyUserButtonProps {
 declare function CimplifyUserButton({ session: controlledSession, sessionUri, links, identityUrl, signOutHref, onSignOut, clientId, redirectUri, signInLabel, onSignIn, hideName, align, className, }: CimplifyUserButtonProps): React$1.ReactElement | null;
 
 interface PriceProps {
-    /** The amount in base (business) currency. */
+    /** The amount, denominated in `currency` (or the business base currency). */
     amount: number | string;
-    /** Explicit currency — skips provider lookup when provided. */
+    /**
+     * Currency the `amount` is denominated in. Pass the product/order currency
+     * so the value renders correctly during SSR — before the provider has
+     * loaded the business client-side. Falls back to the provider's base
+     * currency, then USD.
+     */
     currency?: CurrencyCode;
     /** Optional CSS class name for the wrapping span. */
     className?: string;
     /** Optional prefix rendered before the formatted price (e.g. "+"). */
     prefix?: string;
+    /**
+     * Apply the provider's FX display-currency override when one is active.
+     * Default true. The conversion is a post-hydration enhancement: it only
+     * engages once an FX rate has loaded client-side, so SSR and first-paint
+     * output always match and no currency flash occurs.
+     */
+    convert?: boolean;
 }
 /**
  * Price — renders a formatted price value.
  *
- * When used inside CimplifyProvider: reads displayCurrency and convertPrice
- * from context for FX conversion.
+ * Currency is resolved from the `currency` prop (the amount's source currency),
+ * falling back to the provider's base currency, then USD. Because the source
+ * currency comes from data rather than the client-only provider bootstrap, an
+ * explicit `currency` renders correctly during SSR.
  *
- * When used outside a provider (or with explicit `currency` prop): formats
- * directly — no provider required. Works in any React environment.
+ * FX display-currency conversion (when a user picks a non-base display
+ * currency) is layered on top after hydration, and only when the source is the
+ * base currency the FX rate is computed from. It never affects the server or
+ * first-paint render, so there is no hydration mismatch.
  */
-declare function Price({ amount, currency, className, prefix }: PriceProps): React$1.ReactElement;
+declare function Price({ amount, currency, className, prefix, convert, }: PriceProps): React$1.ReactElement;
 
 interface CimplifyClientContextValue {
     client: CimplifyClient;
@@ -815,13 +831,23 @@ interface CimplifyProviderProps {
     client?: CimplifyClient;
     children: ReactNode;
     onLocationChange?: (location: Location) => void;
+    /**
+     * Server-fetched business to seed the provider. When provided, `business`
+     * and `baseCurrency` are correct on the first (server) render, so prices
+     * render in the right currency during SSR with no loading flash. Pass from
+     * a Server Component via `getServerClient().business.getInfo()`. Passing
+     * `null` marks "no business" as resolved (still skips the loading state).
+     */
+    initialBusiness?: Business | null;
+    /** Server-fetched locations to seed the provider alongside `initialBusiness`. */
+    initialLocations?: Location[];
     /**
      * Toggle hidden optimistic UI for collection-backed hooks. Default true.
      * Set to false to disable optimistic updates app-wide (e.g. e2e tests).
      */
     optimistic?: boolean;
 }
-declare function CimplifyProvider({ client, children, onLocationChange, optimistic, }: CimplifyProviderProps): React$1.ReactElement;
+declare function CimplifyProvider({ client, children, onLocationChange, initialBusiness, initialLocations, optimistic, }: CimplifyProviderProps): React$1.ReactElement;
 declare function useCimplify(): CimplifyContextValue;
 declare function useOptionalCimplify(): CimplifyContextValue | null;
 declare function useCimplifyClient(): CimplifyClientContextValue;
@@ -1508,13 +1534,14 @@ interface VariantSelectorProps {
     variants: VariantView[];
     variantAxes?: VariantAxisWithValues[];
     basePrice?: Money;
+    currency?: CurrencyCode;
     selectedVariantId?: string;
     onVariantChange: (variantId: string | undefined, variant: VariantView | undefined) => void;
     productName?: string;
     className?: string;
     classNames?: VariantSelectorClassNames;
 }
-declare function VariantSelector({ variants, variantAxes, basePrice, selectedVariantId, onVariantChange, productName, className, classNames, }: VariantSelectorProps): React$1.ReactElement | null;
+declare function VariantSelector({ variants, variantAxes, basePrice, currency, selectedVariantId, onVariantChange, productName, className, classNames, }: VariantSelectorProps): React$1.ReactElement | null;
 
 interface AddOnSelectorClassNames {
     root?: string;
@@ -1534,10 +1561,11 @@ interface AddOnSelectorProps {
     addOns: AddOnWithOptions[];
     selectedOptions: string[];
     onOptionsChange: (optionIds: string[]) => void;
+    currency?: CurrencyCode;
     className?: string;
     classNames?: AddOnSelectorClassNames;
 }
-declare function AddOnSelector({ addOns, selectedOptions, onOptionsChange, className, classNames, }: AddOnSelectorProps): React$1.ReactElement | null;
+declare function AddOnSelector({ addOns, selectedOptions, onOptionsChange, currency, className, classNames, }: AddOnSelectorProps): React$1.ReactElement | null;
 
 interface BundleSelectorClassNames {
     root?: string;
@@ -1562,13 +1590,14 @@ interface BundleSelectorProps {
     bundlePrice?: Money;
     discountValue?: Money;
     pricingType?: BundlePriceType;
+    currency?: CurrencyCode;
     onSelectionsChange: (selections: BundleSelectionInput[]) => void;
     onPriceChange?: (price: number) => void;
     onReady?: (ready: boolean) => void;
     className?: string;
     classNames?: BundleSelectorClassNames;
 }
-declare function BundleSelector({ components, bundlePrice, discountValue, pricingType, onSelectionsChange, onPriceChange, onReady, className, classNames, }: BundleSelectorProps): React$1.ReactElement | null;
+declare function BundleSelector({ components, bundlePrice, discountValue, pricingType, currency, onSelectionsChange, onPriceChange, onReady, className, classNames, }: BundleSelectorProps): React$1.ReactElement | null;
 
 interface CompositeSelectorClassNames {
     root?: string;
@@ -1603,6 +1632,7 @@ interface CompositeSelectorClassNames {
 interface CompositeSelectorProps {
     compositeId: string;
     groups: CompositeGroupView[];
+    currency?: CurrencyCode;
     onSelectionsChange: (selections: ComponentSelectionInput[]) => void;
     onPriceChange?: (price: CompositePriceResult | null) => void;
     onReady?: (ready: boolean) => void;
@@ -1610,7 +1640,7 @@ interface CompositeSelectorProps {
     className?: string;
     classNames?: CompositeSelectorClassNames;
 }
-declare function CompositeSelector({ compositeId, groups, onSelectionsChange, onPriceChange, onReady, skipPriceFetch, className, classNames, }: CompositeSelectorProps): React$1.ReactElement | null;
+declare function CompositeSelector({ compositeId, groups, currency, onSelectionsChange, onPriceChange, onReady, skipPriceFetch, className, classNames, }: CompositeSelectorProps): React$1.ReactElement | null;
 
 interface ProductCustomizerClassNames {
     root?: string;
@@ -1828,10 +1858,11 @@ interface CustomerInputFieldsProps {
     values: Record<string, unknown>;
     onChange: (values: Record<string, unknown>) => void;
     onFileUpload?: (file: File, field: ProductInputField) => Promise<string>;
+    currency?: CurrencyCode;
     className?: string;
     classNames?: CustomerInputFieldsClassNames;
 }
-declare function CustomerInputFields({ fields, values, onChange, onFileUpload, className, classNames, }: CustomerInputFieldsProps): React$1.ReactElement | null;
+declare function CustomerInputFields({ fields, values, onChange, onFileUpload, currency, className, classNames, }: CustomerInputFieldsProps): React$1.ReactElement | null;
 
 interface SaleBadgeClassNames {
     root?: string;
@@ -2409,6 +2440,8 @@ interface SlotPickerProps {
     groupByTimeOfDay?: boolean;
     /** Show price on each slot. Default: true. */
     showPrice?: boolean;
+    /** Currency the slot prices are denominated in. */
+    currency?: CurrencyCode;
     /**
      * Hide slots whose `start_time` is already in the past. Default: true.
      * Set to false to show elapsed slots greyed-out (still un-selectable).
@@ -2435,7 +2468,7 @@ interface SlotPickerProps {
     className?: string;
     classNames?: SlotPickerClassNames;
 }
-declare function SlotPicker({ slots: slotsProp, serviceId, date, participantCount, selectedSlot, onSlotSelect, groupByTimeOfDay, showPrice, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, emptyMessage, className, classNames, }: SlotPickerProps): React$1.ReactElement;
+declare function SlotPicker({ slots: slotsProp, serviceId, date, participantCount, selectedSlot, onSlotSelect, groupByTimeOfDay, showPrice, currency, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, emptyMessage, className, classNames, }: SlotPickerProps): React$1.ReactElement;
 
 interface DateSlotPickerClassNames {
     root?: string;
@@ -2461,6 +2494,8 @@ interface DateSlotPickerProps {
     availability?: DayAvailability[];
     /** Show price on slots. Default: true. */
     showPrice?: boolean;
+    /** Currency the slot prices are denominated in. */
+    currency?: CurrencyCode;
     /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */
     schedulingMode?: SchedulingMode;
     /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */
@@ -2474,7 +2509,7 @@ interface DateSlotPickerProps {
     className?: string;
     classNames?: DateSlotPickerClassNames;
 }
-declare function DateSlotPicker({ serviceId, daysToShow, participantCount, selectedSlot, onSlotSelect, availability: availabilityProp, showPrice, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, className, classNames, }: DateSlotPickerProps): React$1.ReactElement;
+declare function DateSlotPicker({ serviceId, daysToShow, participantCount, selectedSlot, onSlotSelect, availability: availabilityProp, showPrice, currency, schedulingMode, durationUnit, durationValue, hideElapsedSlots, minLeadMinutes, className, classNames, }: DateSlotPickerProps): React$1.ReactElement;
 
 interface DatePickerClassNames {
     /** Outer wrapper around the trigger. */
@@ -3480,6 +3515,8 @@ interface BillingPlanSelectorProps {
     onPlanSelect?: (plan: ProductBillingPlan | null) => void;
     /** Currently selected plan ID. */
     selectedPlanId?: string | null;
+    /** Currency the plan amounts are denominated in. */
+    currency?: CurrencyCode;
     /** Show a "One-time purchase" option at the top. */
     showOneTimePurchase?: boolean;
     /** Label for the one-time purchase option. Default: "One-time purchase". */
@@ -3495,7 +3532,7 @@ interface BillingPlanSelectorProps {
  * Renders plan cards with frequency, markup, trial, and setup fee details.
  * Returns `null` when no plans are available (and one-time purchase is hidden).
  */
-declare function BillingPlanSelector({ productId, plans: plansProp, onPlanSelect, selectedPlanId, showOneTimePurchase, oneTimePurchaseLabel, renderPlan, className, classNames, }: BillingPlanSelectorProps): React$1.ReactElement | null;
+declare function BillingPlanSelector({ productId, plans: plansProp, currency, onPlanSelect, selectedPlanId, showOneTimePurchase, oneTimePurchaseLabel, renderPlan, className, classNames, }: BillingPlanSelectorProps): React$1.ReactElement | null;
 
 interface VolumePricingClassNames {
     root?: string;
@@ -3511,10 +3548,11 @@ interface VolumePricingProps {
     tiers: QuantityPricingTier[];
     currentQuantity?: number;
     defaultOpen?: boolean;
+    currency?: CurrencyCode;
     className?: string;
     classNames?: VolumePricingClassNames;
 }
-declare function VolumePricing({ tiers, currentQuantity, defaultOpen, className, classNames, }: VolumePricingProps): React$1.ReactElement | null;
+declare function VolumePricing({ tiers, currentQuantity, defaultOpen, currency, className, classNames, }: VolumePricingProps): React$1.ReactElement | null;
 
 interface PriceRangeProps {
     product: Product | ProductWithDetails;