@wix/headless-restaurants-olo 0.0.37 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/cjs/dist/react/ItemDetails.d.ts +6 -0
  2. package/cjs/dist/react/ItemDetails.js +2 -2
  3. package/cjs/dist/react/ModifierGroup.d.ts +13 -0
  4. package/cjs/dist/react/ModifierGroup.js +6 -6
  5. package/cjs/dist/react/core/ItemDetails.js +3 -3
  6. package/cjs/dist/services/item-details-service.d.ts +1 -1
  7. package/cjs/dist/services/item-details-service.js +8 -3
  8. package/dist/react/ItemDetails.d.ts +6 -0
  9. package/dist/react/ItemDetails.js +2 -2
  10. package/dist/react/ModifierGroup.d.ts +13 -0
  11. package/dist/react/ModifierGroup.js +6 -6
  12. package/dist/react/core/ItemDetails.js +3 -3
  13. package/dist/services/item-details-service.d.ts +1 -1
  14. package/dist/services/item-details-service.js +8 -3
  15. package/package.json +2 -2
package/cjs/dist/react/ItemDetails.d.ts CHANGED
@@ -54,6 +54,12 @@ export interface ItemDetailsVariantsProps {
54
54
  variantNameClassName?: string;
55
55
  /** CSS classes to apply to variant prices */
56
56
  variantPriceClassName?: string;
57
+ /** CSS classes to apply to the RadioGroup container */
58
+ radioGroupClassName?: string;
59
+ /** CSS classes to apply to each RadioGroup.Item (variant radio button) */
60
+ variantRadioItemClassName?: string;
61
+ /** CSS classes to apply to each variant item container */
62
+ variantItemClassName?: string;
57
63
  /** Optional content to display when no variants are available */
58
64
  emptyState?: React.ReactNode;
59
65
  }
package/cjs/dist/react/ItemDetails.js CHANGED
@@ -78,7 +78,7 @@ Root.displayName = 'ItemDetails.Root';
78
78
  * </ItemDetails.Variants>
79
79
  * ```
80
80
  */
81
- export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
81
+ export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, radioGroupClassName, variantRadioItemClassName, variantItemClassName, emptyState, }, ref) => {
82
82
  return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
83
83
  if (!hasVariants) {
84
84
  return emptyState || null;
@@ -88,7 +88,7 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
88
88
  hasVariants,
89
89
  selectedVariantId,
90
90
  onVariantChange,
91
- }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
91
+ }, children: _jsx(RadioGroupPrimitive.Root, { className: radioGroupClassName, value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', className: variantRadioItemClassName, children: _jsxs("div", { className: variantItemClassName, children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
92
92
  variant.priceInfo?.price ||
93
93
  '' })] }) }, variant._id))) }) }));
94
94
  } }));
package/cjs/dist/react/ModifierGroup.d.ts CHANGED
@@ -10,6 +10,12 @@ export interface ModifiersProps {
10
10
  asChild?: boolean;
11
11
  modifierNameClassName?: string;
12
12
  modifierPriceClassName?: string;
13
+ checkboxRootClassName?: string;
14
+ checkboxIndicatorClassName?: string;
15
+ radioGroupItemClassName?: string;
16
+ radioGroupIndicatorClassName?: string;
17
+ labelClassName?: string;
18
+ modifierItemClassName?: string;
13
19
  children?: AsChildChildren<{
14
20
  selectedModifierIds: string[];
15
21
  onToggle: (modifierId: string) => void;
@@ -24,10 +30,17 @@ export interface ModifierCheckboxProps {
24
30
  className?: string;
25
31
  modifierNameClassName?: string;
26
32
  modifierPriceClassName?: string;
33
+ checkboxRootClassName?: string;
34
+ checkboxIndicatorClassName?: string;
35
+ labelClassName?: string;
27
36
  }
28
37
  export interface ModifierRadioProps {
29
38
  modifierNameClassName?: string;
30
39
  modifierPriceClassName?: string;
40
+ radioGroupItemClassName?: string;
41
+ radioGroupIndicatorClassName?: string;
42
+ labelClassName?: string;
43
+ modifierItemClassName?: string;
31
44
  }
32
45
  export declare const Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
33
46
  export declare const Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
package/cjs/dist/react/ModifierGroup.js CHANGED
@@ -16,24 +16,24 @@ export const Root = React.forwardRef(({ children }) => {
16
16
  return _jsx(ModifierGroupComponent, { children: children });
17
17
  });
18
18
  Root.displayName = 'ItemDetailsModifierGroup.Root';
19
- export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, children, }, ref) => {
19
+ export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, checkboxRootClassName, checkboxIndicatorClassName, radioGroupItemClassName, radioGroupIndicatorClassName, labelClassName, modifierItemClassName, children, }, ref) => {
20
20
  return (_jsx(ModifiersComponent, { children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, singleSelectedModifierId, }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifiers, className: className, customElement: children, customElementProps: {
21
21
  selectedModifierIds,
22
22
  onToggle,
23
23
  modifierGroup,
24
24
  modifiers,
25
25
  isSingleSelect,
26
- }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) })) })) }));
26
+ }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName, radioGroupItemClassName: radioGroupItemClassName, radioGroupIndicatorClassName: radioGroupIndicatorClassName, labelClassName: labelClassName, modifierItemClassName: modifierItemClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName, checkboxRootClassName: checkboxRootClassName, checkboxIndicatorClassName: checkboxIndicatorClassName, labelClassName: labelClassName, className: modifierItemClassName }) })) })) }));
27
27
  });
28
28
  Modifiers.displayName = 'ItemDetailsModifierGroup.Modifiers';
29
- const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, }) => {
29
+ const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, checkboxRootClassName, checkboxIndicatorClassName, labelClassName, }) => {
30
30
  const { modifier } = useModifierContext();
31
31
  const isSelected = selectedModifierIds.includes(modifier._id || '');
32
- return (_jsxs("div", { className: className, style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
32
+ return (_jsxs("div", { className: className, children: [_jsx(CheckboxPrimitive.Root, { className: checkboxRootClassName, checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: checkboxIndicatorClassName, children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: labelClassName, htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
33
33
  };
34
- const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, }) => {
34
+ const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, radioGroupItemClassName, radioGroupIndicatorClassName, labelClassName, modifierItemClassName, }) => {
35
35
  const { modifier } = useModifierContext();
36
- return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
36
+ return (_jsx(RadioGroupPrimitive.Item, { className: radioGroupItemClassName, value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { className: modifierItemClassName, children: [_jsx(RadioGroupPrimitive.Indicator, { className: radioGroupIndicatorClassName }), _jsxs("label", { className: labelClassName, htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
37
37
  };
38
38
  export const Description = React.forwardRef(({ ruleTypeMap, className, asChild, children, ...otherProps }, ref) => {
39
39
  return (_jsx(DescriptionComponent, { ruleTypeMap: ruleTypeMap, children: ({ description }) => {
package/cjs/dist/react/core/ItemDetails.js CHANGED
@@ -4,7 +4,6 @@ import { useService, WixServices } from '@wix/services-manager-react';
4
4
  import { createServicesMap } from '@wix/services-manager';
5
5
  import { ItemService, ItemServiceDefinition, } from '../../services/item-details-service.js';
6
6
  import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
7
- import { useItemContext } from '@wix/headless-restaurants-menus/react';
8
7
  import { AvailabilityStatus, AddToCartButtonState, } from '../../services/common-types.js';
9
8
  import { getAvailabilityText } from '../../services/utils.js';
10
9
  export const Root = ({ children, itemDetailsServiceConfig, }) => {
@@ -74,9 +73,10 @@ export const QuantityComponent = ({ children, }) => {
74
73
  };
75
74
  export const VariantsComponent = ({ children, }) => {
76
75
  const service = useService(ItemServiceDefinition);
77
- const { item } = useItemContext();
78
76
  const selectedVariant = service.selectedVariant?.get?.();
79
- // Get variants from item context
77
+ // Get variants from service's item signal instead of item context
78
+ // The item context might not have priceVariants properly set
79
+ const item = service.item?.get?.();
80
80
  const variants = item?.priceVariants || [];
81
81
  const hasVariants = variants.length > 0;
82
82
  const selectedVariantId = selectedVariant?._id ?? undefined;
package/cjs/dist/services/item-details-service.d.ts CHANGED
@@ -183,7 +183,7 @@ export interface NotFoundItemServiceConfigResult {
183
183
  */
184
184
  export declare function loadItemServiceConfig({ item, operationId, availabilityStatus, }: {
185
185
  item: EnhancedItem;
186
- operationId: string;
186
+ operationId?: string;
187
187
  availabilityStatus?: AvailabilityStatus;
188
188
  }): ItemServiceConfig;
189
189
  export {};
package/cjs/dist/services/item-details-service.js CHANGED
@@ -115,15 +115,20 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
115
115
  const addToCartButtonDisabled = signalsService.signal(!isValidToContinue);
116
116
  const lineItem = signalsService.computed(() => {
117
117
  const formatCurrency = oloSettingsService.formatCurrency;
118
+ const operationId =
119
+ // @ts-expect-error - Operation type from SDK doesn't have id, but our mapped type does
120
+ config.operationId || oloSettingsService.operation.get()?.id;
118
121
  return {
119
122
  quantity: quantity.get(),
120
123
  catalogReference: {
121
124
  catalogItemId: config.item?._id ?? undefined,
122
125
  appId: APP_ID,
123
126
  options: {
124
- operationId: config.operationId,
125
- menuId: config.menuId,
126
- sectionId: config.sectionId,
127
+ operationId,
128
+ // @ts-expect-error - Menu type from SDK doesn't have id, but our mapped type does
129
+ menuId: config.menuId ?? config.item?.menuId,
130
+ // @ts-expect-error - Section type from SDK doesn't have id, but our mapped type does
131
+ sectionId: config.sectionId ?? config.item?.sectionId,
127
132
  priceVariant: getPriceVariantOptions(selectedVariant.get(), formatCurrency),
128
133
  modifierGroups: getLineItemModifiers(selectedModifiers.get(), modifierGroups, formatCurrency),
129
134
  specialRequests: specialRequest.get(),
package/dist/react/ItemDetails.d.ts CHANGED
@@ -54,6 +54,12 @@ export interface ItemDetailsVariantsProps {
54
54
  variantNameClassName?: string;
55
55
  /** CSS classes to apply to variant prices */
56
56
  variantPriceClassName?: string;
57
+ /** CSS classes to apply to the RadioGroup container */
58
+ radioGroupClassName?: string;
59
+ /** CSS classes to apply to each RadioGroup.Item (variant radio button) */
60
+ variantRadioItemClassName?: string;
61
+ /** CSS classes to apply to each variant item container */
62
+ variantItemClassName?: string;
57
63
  /** Optional content to display when no variants are available */
58
64
  emptyState?: React.ReactNode;
59
65
  }
package/dist/react/ItemDetails.js CHANGED
@@ -78,7 +78,7 @@ Root.displayName = 'ItemDetails.Root';
78
78
  * </ItemDetails.Variants>
79
79
  * ```
80
80
  */
81
- export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
81
+ export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, radioGroupClassName, variantRadioItemClassName, variantItemClassName, emptyState, }, ref) => {
82
82
  return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
83
83
  if (!hasVariants) {
84
84
  return emptyState || null;
@@ -88,7 +88,7 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
88
88
  hasVariants,
89
89
  selectedVariantId,
90
90
  onVariantChange,
91
- }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
91
+ }, children: _jsx(RadioGroupPrimitive.Root, { className: radioGroupClassName, value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', className: variantRadioItemClassName, children: _jsxs("div", { className: variantItemClassName, children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
92
92
  variant.priceInfo?.price ||
93
93
  '' })] }) }, variant._id))) }) }));
94
94
  } }));
package/dist/react/ModifierGroup.d.ts CHANGED
@@ -10,6 +10,12 @@ export interface ModifiersProps {
10
10
  asChild?: boolean;
11
11
  modifierNameClassName?: string;
12
12
  modifierPriceClassName?: string;
13
+ checkboxRootClassName?: string;
14
+ checkboxIndicatorClassName?: string;
15
+ radioGroupItemClassName?: string;
16
+ radioGroupIndicatorClassName?: string;
17
+ labelClassName?: string;
18
+ modifierItemClassName?: string;
13
19
  children?: AsChildChildren<{
14
20
  selectedModifierIds: string[];
15
21
  onToggle: (modifierId: string) => void;
@@ -24,10 +30,17 @@ export interface ModifierCheckboxProps {
24
30
  className?: string;
25
31
  modifierNameClassName?: string;
26
32
  modifierPriceClassName?: string;
33
+ checkboxRootClassName?: string;
34
+ checkboxIndicatorClassName?: string;
35
+ labelClassName?: string;
27
36
  }
28
37
  export interface ModifierRadioProps {
29
38
  modifierNameClassName?: string;
30
39
  modifierPriceClassName?: string;
40
+ radioGroupItemClassName?: string;
41
+ radioGroupIndicatorClassName?: string;
42
+ labelClassName?: string;
43
+ modifierItemClassName?: string;
31
44
  }
32
45
  export declare const Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
33
46
  export declare const Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
package/dist/react/ModifierGroup.js CHANGED
@@ -16,24 +16,24 @@ export const Root = React.forwardRef(({ children }) => {
16
16
  return _jsx(ModifierGroupComponent, { children: children });
17
17
  });
18
18
  Root.displayName = 'ItemDetailsModifierGroup.Root';
19
- export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, children, }, ref) => {
19
+ export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, checkboxRootClassName, checkboxIndicatorClassName, radioGroupItemClassName, radioGroupIndicatorClassName, labelClassName, modifierItemClassName, children, }, ref) => {
20
20
  return (_jsx(ModifiersComponent, { children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, singleSelectedModifierId, }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifiers, className: className, customElement: children, customElementProps: {
21
21
  selectedModifierIds,
22
22
  onToggle,
23
23
  modifierGroup,
24
24
  modifiers,
25
25
  isSingleSelect,
26
- }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) })) })) }));
26
+ }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName, radioGroupItemClassName: radioGroupItemClassName, radioGroupIndicatorClassName: radioGroupIndicatorClassName, labelClassName: labelClassName, modifierItemClassName: modifierItemClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName, checkboxRootClassName: checkboxRootClassName, checkboxIndicatorClassName: checkboxIndicatorClassName, labelClassName: labelClassName, className: modifierItemClassName }) })) })) }));
27
27
  });
28
28
  Modifiers.displayName = 'ItemDetailsModifierGroup.Modifiers';
29
- const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, }) => {
29
+ const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, checkboxRootClassName, checkboxIndicatorClassName, labelClassName, }) => {
30
30
  const { modifier } = useModifierContext();
31
31
  const isSelected = selectedModifierIds.includes(modifier._id || '');
32
- return (_jsxs("div", { className: className, style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
32
+ return (_jsxs("div", { className: className, children: [_jsx(CheckboxPrimitive.Root, { className: checkboxRootClassName, checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: checkboxIndicatorClassName, children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: labelClassName, htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
33
33
  };
34
- const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, }) => {
34
+ const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, radioGroupItemClassName, radioGroupIndicatorClassName, labelClassName, modifierItemClassName, }) => {
35
35
  const { modifier } = useModifierContext();
36
- return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
36
+ return (_jsx(RadioGroupPrimitive.Item, { className: radioGroupItemClassName, value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { className: modifierItemClassName, children: [_jsx(RadioGroupPrimitive.Indicator, { className: radioGroupIndicatorClassName }), _jsxs("label", { className: labelClassName, htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
37
37
  };
38
38
  export const Description = React.forwardRef(({ ruleTypeMap, className, asChild, children, ...otherProps }, ref) => {
39
39
  return (_jsx(DescriptionComponent, { ruleTypeMap: ruleTypeMap, children: ({ description }) => {
package/dist/react/core/ItemDetails.js CHANGED
@@ -4,7 +4,6 @@ import { useService, WixServices } from '@wix/services-manager-react';
4
4
  import { createServicesMap } from '@wix/services-manager';
5
5
  import { ItemService, ItemServiceDefinition, } from '../../services/item-details-service.js';
6
6
  import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
7
- import { useItemContext } from '@wix/headless-restaurants-menus/react';
8
7
  import { AvailabilityStatus, AddToCartButtonState, } from '../../services/common-types.js';
9
8
  import { getAvailabilityText } from '../../services/utils.js';
10
9
  export const Root = ({ children, itemDetailsServiceConfig, }) => {
@@ -74,9 +73,10 @@ export const QuantityComponent = ({ children, }) => {
74
73
  };
75
74
  export const VariantsComponent = ({ children, }) => {
76
75
  const service = useService(ItemServiceDefinition);
77
- const { item } = useItemContext();
78
76
  const selectedVariant = service.selectedVariant?.get?.();
79
- // Get variants from item context
77
+ // Get variants from service's item signal instead of item context
78
+ // The item context might not have priceVariants properly set
79
+ const item = service.item?.get?.();
80
80
  const variants = item?.priceVariants || [];
81
81
  const hasVariants = variants.length > 0;
82
82
  const selectedVariantId = selectedVariant?._id ?? undefined;
package/dist/services/item-details-service.d.ts CHANGED
@@ -183,7 +183,7 @@ export interface NotFoundItemServiceConfigResult {
183
183
  */
184
184
  export declare function loadItemServiceConfig({ item, operationId, availabilityStatus, }: {
185
185
  item: EnhancedItem;
186
- operationId: string;
186
+ operationId?: string;
187
187
  availabilityStatus?: AvailabilityStatus;
188
188
  }): ItemServiceConfig;
189
189
  export {};
package/dist/services/item-details-service.js CHANGED
@@ -115,15 +115,20 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
115
115
  const addToCartButtonDisabled = signalsService.signal(!isValidToContinue);
116
116
  const lineItem = signalsService.computed(() => {
117
117
  const formatCurrency = oloSettingsService.formatCurrency;
118
+ const operationId =
119
+ // @ts-expect-error - Operation type from SDK doesn't have id, but our mapped type does
120
+ config.operationId || oloSettingsService.operation.get()?.id;
118
121
  return {
119
122
  quantity: quantity.get(),
120
123
  catalogReference: {
121
124
  catalogItemId: config.item?._id ?? undefined,
122
125
  appId: APP_ID,
123
126
  options: {
124
- operationId: config.operationId,
125
- menuId: config.menuId,
126
- sectionId: config.sectionId,
127
+ operationId,
128
+ // @ts-expect-error - Menu type from SDK doesn't have id, but our mapped type does
129
+ menuId: config.menuId ?? config.item?.menuId,
130
+ // @ts-expect-error - Section type from SDK doesn't have id, but our mapped type does
131
+ sectionId: config.sectionId ?? config.item?.sectionId,
127
132
  priceVariant: getPriceVariantOptions(selectedVariant.get(), formatCurrency),
128
133
  modifierGroups: getLineItemModifiers(selectedModifiers.get(), modifierGroups, formatCurrency),
129
134
  specialRequests: specialRequest.get(),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/headless-restaurants-olo",
3
- "version": "0.0.37",
3
+ "version": "0.0.38",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -77,5 +77,5 @@
77
77
  "groupId": "com.wixpress.headless-components"
78
78
  }
79
79
  },
80
- "falconPackageHash": "d456fa7916d8a275f05e2a7002dc02a1f7cce909a6c03ef1b6bfafa4"
80
+ "falconPackageHash": "6746abc791b2e7b1513723b81760e333d92023a3278e9f6b661ca72f"
81
81
  }