@wix/headless-restaurants-olo 0.0.31 → 0.0.32

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 (65) hide show
  1. package/cjs/dist/react/ClickableItem.d.ts +18 -3
  2. package/cjs/dist/react/ClickableItem.js +16 -9
  3. package/cjs/dist/react/FulfillmentDetails.d.ts +233 -0
  4. package/cjs/dist/react/FulfillmentDetails.js +255 -0
  5. package/cjs/dist/react/ItemDetails.d.ts +233 -36
  6. package/cjs/dist/react/ItemDetails.js +208 -0
  7. package/cjs/dist/react/OLO.d.ts +5 -160
  8. package/cjs/dist/react/OLO.js +6 -122
  9. package/cjs/dist/react/OLOMenus.d.ts +8 -2
  10. package/cjs/dist/react/OLOMenus.js +3 -4
  11. package/cjs/dist/react/Settings.d.ts +176 -48
  12. package/cjs/dist/react/Settings.js +276 -26
  13. package/cjs/dist/react/core/ClickableItem.d.ts +12 -5
  14. package/cjs/dist/react/core/ClickableItem.js +13 -14
  15. package/cjs/dist/react/core/FulfillmentDetails.d.ts +78 -0
  16. package/cjs/dist/react/core/FulfillmentDetails.js +177 -0
  17. package/cjs/dist/react/core/ItemDetails.js +2 -4
  18. package/cjs/dist/react/core/OLO.d.ts +6 -74
  19. package/cjs/dist/react/core/OLO.js +5 -44
  20. package/cjs/dist/react/core/OLOMenus.d.ts +1 -1
  21. package/cjs/dist/react/core/OLOMenus.js +2 -3
  22. package/cjs/dist/react/core/Settings.d.ts +138 -22
  23. package/cjs/dist/react/core/Settings.js +157 -34
  24. package/cjs/dist/react/core/index.d.ts +1 -0
  25. package/cjs/dist/react/core/index.js +1 -0
  26. package/cjs/dist/react/index.d.ts +2 -0
  27. package/cjs/dist/react/index.js +1 -0
  28. package/cjs/dist/services/fulfillments-service.js +80 -22
  29. package/cjs/dist/types/fulfillments-types.d.ts +49 -2
  30. package/cjs/dist/types/operation.d.ts +1 -1
  31. package/cjs/dist/utils/fulfillments-utils.d.ts +34 -1
  32. package/cjs/dist/utils/fulfillments-utils.js +209 -1
  33. package/dist/react/ClickableItem.d.ts +18 -3
  34. package/dist/react/ClickableItem.js +16 -9
  35. package/dist/react/FulfillmentDetails.d.ts +233 -0
  36. package/dist/react/FulfillmentDetails.js +255 -0
  37. package/dist/react/ItemDetails.d.ts +233 -36
  38. package/dist/react/ItemDetails.js +208 -0
  39. package/dist/react/OLO.d.ts +5 -160
  40. package/dist/react/OLO.js +6 -122
  41. package/dist/react/OLOMenus.d.ts +8 -2
  42. package/dist/react/OLOMenus.js +3 -4
  43. package/dist/react/Settings.d.ts +176 -48
  44. package/dist/react/Settings.js +276 -26
  45. package/dist/react/core/ClickableItem.d.ts +12 -5
  46. package/dist/react/core/ClickableItem.js +13 -14
  47. package/dist/react/core/FulfillmentDetails.d.ts +78 -0
  48. package/dist/react/core/FulfillmentDetails.js +177 -0
  49. package/dist/react/core/ItemDetails.js +2 -4
  50. package/dist/react/core/OLO.d.ts +6 -74
  51. package/dist/react/core/OLO.js +5 -44
  52. package/dist/react/core/OLOMenus.d.ts +1 -1
  53. package/dist/react/core/OLOMenus.js +2 -3
  54. package/dist/react/core/Settings.d.ts +138 -22
  55. package/dist/react/core/Settings.js +157 -34
  56. package/dist/react/core/index.d.ts +1 -0
  57. package/dist/react/core/index.js +1 -0
  58. package/dist/react/index.d.ts +2 -0
  59. package/dist/react/index.js +1 -0
  60. package/dist/services/fulfillments-service.js +80 -22
  61. package/dist/types/fulfillments-types.d.ts +49 -2
  62. package/dist/types/operation.d.ts +1 -1
  63. package/dist/utils/fulfillments-utils.d.ts +34 -1
  64. package/dist/utils/fulfillments-utils.js +209 -1
  65. package/package.json +2 -2
@@ -1,91 +1,23 @@
1
1
  import React from 'react';
2
2
  import { OLOSettingsServiceConfig } from '../../services/olo-settings-service.js';
3
- import { ItemServiceConfig } from '../../services/item-details-service.js';
4
3
  interface CoreOLORootProps {
5
- itemId?: string;
6
- /** Pre-loaded item service config (optional) */
7
- itemServiceConfig?: ItemServiceConfig;
8
- /** Pre-loaded cart service config (optional) */
9
- cartServiceConfig?: any;
10
4
  /** Pre-loaded OLO settings service config (optional) */
11
5
  oloSettingsServiceConfig?: OLOSettingsServiceConfig;
12
- /** Children render prop that receives the services manager state */
6
+ /** Children components */
13
7
  children: React.ReactNode;
14
8
  }
15
9
  /**
16
10
  * Core OLO Root component that sets up service management
17
- * Provides ItemService and CurrentCartService to child components
11
+ * Provides OLOSettingsService to child components
18
12
  *
19
13
  * @example
20
14
  * ```tsx
21
- * <CoreOLO.Root itemId="item-123">
22
- * {({ servicesManager, isLoading, hasServices }) => (
23
- * hasServices ? (
24
- * <ServicesManagerProvider servicesManager={servicesManager}>
25
- * <ItemDetailsComponents />
26
- * </ServicesManagerProvider>
27
- * ) : (
28
- * <LoadingSpinner />
29
- * )
30
- * )}
15
+ * <CoreOLO.Root oloSettingsServiceConfig={config}>
16
+ * <Settings.Root>
17
+ * <SettingsComponents />
18
+ * </Settings.Root>
31
19
  * </CoreOLO.Root>
32
20
  * ```
33
21
  */
34
22
  export declare const Root: React.FC<CoreOLORootProps>;
35
- interface CoreOLOProviderProps {
36
- /** The ID of the item to load */
37
- itemId?: string;
38
- /** Pre-loaded item service config (optional) */
39
- itemServiceConfig?: ItemServiceConfig;
40
- /** Pre-loaded cart service config (optional) */
41
- cartServiceConfig?: any;
42
- /** Pre-loaded OLO settings service config (optional) */
43
- oloSettingsServiceConfig?: OLOSettingsServiceConfig;
44
- /** Loading component to show while services are initializing */
45
- loading?: React.ReactNode;
46
- /** Error component to show if service initialization fails */
47
- error?: (error: string) => React.ReactNode;
48
- /** Children that will receive the services context */
49
- children: React.ReactNode;
50
- }
51
- /**
52
- * Convenience wrapper that combines Root with ServicesManagerProvider
53
- * Automatically provides services context to children
54
- *
55
- * @example
56
- * ```tsx
57
- * <CoreOLO.Provider itemId="item-123">
58
- * <ItemDetailsComponents />
59
- * </CoreOLO.Provider>
60
- * ```
61
- */
62
- export declare const Provider: React.FC<CoreOLOProviderProps>;
63
- interface CoreOLOItemDetailsProps {
64
- /** The ID of the item to load */
65
- itemId: string;
66
- /** Pre-loaded configurations (optional) */
67
- configs?: {
68
- itemServiceConfig?: ItemServiceConfig;
69
- cartServiceConfig?: any;
70
- };
71
- /** Loading component */
72
- loading?: React.ReactNode;
73
- /** Error component */
74
- error?: (error: string) => React.ReactNode;
75
- /** Children that will have access to item services */
76
- children: React.ReactNode;
77
- }
78
- /**
79
- * Specialized wrapper for item details that ensures ItemService is available
80
- *
81
- * @example
82
- * ```tsx
83
- * <CoreOLO.ItemDetails itemId="item-123">
84
- * <ItemDetailsPrimitive.Root>
85
- * {({ item }) => <div>{item.name}</div>}
86
- * </ItemDetailsPrimitive.Root>
87
- * </CoreOLO.ItemDetails>
88
- * ```
89
- */
90
- export declare const ItemDetails: React.FC<CoreOLOItemDetailsProps>;
91
23
  export {};
@@ -1,59 +1,20 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createServicesMap } from '@wix/services-manager';
3
3
  import { WixServices } from '@wix/services-manager-react';
4
- // import { ItemService, ItemServiceDefinition, loadItemServiceConfig } from '@/components/restaurants-olo/services/itemDetailsService';
5
4
  import { OLOSettingsService, OLOSettingsServiceDefinition, } from '@wix/headless-restaurants-olo/services';
6
5
  /**
7
6
  * Core OLO Root component that sets up service management
8
- * Provides ItemService and CurrentCartService to child components
7
+ * Provides OLOSettingsService to child components
9
8
  *
10
9
  * @example
11
10
  * ```tsx
12
- * <CoreOLO.Root itemId="item-123">
13
- * {({ servicesManager, isLoading, hasServices }) => (
14
- * hasServices ? (
15
- * <ServicesManagerProvider servicesManager={servicesManager}>
16
- * <ItemDetailsComponents />
17
- * </ServicesManagerProvider>
18
- * ) : (
19
- * <LoadingSpinner />
20
- * )
21
- * )}
11
+ * <CoreOLO.Root oloSettingsServiceConfig={config}>
12
+ * <Settings.Root>
13
+ * <SettingsComponents />
14
+ * </Settings.Root>
22
15
  * </CoreOLO.Root>
23
16
  * ```
24
17
  */
25
18
  export const Root = ({ oloSettingsServiceConfig, children, }) => {
26
19
  return (_jsx(WixServices, { servicesMap: createServicesMap().addService(OLOSettingsServiceDefinition, OLOSettingsService, oloSettingsServiceConfig), children: children }));
27
20
  };
28
- /**
29
- * Convenience wrapper that combines Root with ServicesManagerProvider
30
- * Automatically provides services context to children
31
- *
32
- * @example
33
- * ```tsx
34
- * <CoreOLO.Provider itemId="item-123">
35
- * <ItemDetailsComponents />
36
- * </CoreOLO.Provider>
37
- * ```
38
- */
39
- export const Provider = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettingsServiceConfig,
40
- // loading = <div>Loading services...</div>,
41
- // error: errorComponent = (error: string) => <div>Error: {error}</div>,
42
- children, }) => {
43
- return (_jsx(Root, { itemId: itemId, itemServiceConfig: itemServiceConfig, cartServiceConfig: cartServiceConfig, oloSettingsServiceConfig: oloSettingsServiceConfig, children: children }));
44
- };
45
- /**
46
- * Specialized wrapper for item details that ensures ItemService is available
47
- *
48
- * @example
49
- * ```tsx
50
- * <CoreOLO.ItemDetails itemId="item-123">
51
- * <ItemDetailsPrimitive.Root>
52
- * {({ item }) => <div>{item.name}</div>}
53
- * </ItemDetailsPrimitive.Root>
54
- * </CoreOLO.ItemDetails>
55
- * ```
56
- */
57
- export const ItemDetails = ({ itemId, configs, loading, error, children, }) => {
58
- return (_jsx(Provider, { itemId: itemId, itemServiceConfig: configs?.itemServiceConfig, cartServiceConfig: configs?.cartServiceConfig, loading: loading, error: error, children: children }));
59
- };
@@ -4,4 +4,4 @@ export interface OLOMenusRootProps {
4
4
  config: MenusServiceConfig;
5
5
  children: (updatedConfig: MenusServiceConfig) => React.ReactNode;
6
6
  }
7
- export declare const Root: React.ForwardRefExoticComponent<OLOMenusRootProps & React.RefAttributes<HTMLElement>>;
7
+ export declare const Root: ({ config, children, }: OLOMenusRootProps) => React.ReactNode;
@@ -1,7 +1,6 @@
1
- import React from 'react';
2
1
  import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
3
2
  import { useService } from '@wix/services-manager-react';
4
- export const Root = React.forwardRef(function OLOMenusRoot({ config, children }) {
3
+ export const Root = function OLOMenusRoot({ config, children, }) {
5
4
  const service = useService(OLOSettingsServiceDefinition);
6
5
  const filteredMenus = service.filterMenus(config.menus);
7
6
  const hasMenus = Array.isArray(filteredMenus) && filteredMenus.length > 0;
@@ -9,4 +8,4 @@ export const Root = React.forwardRef(function OLOMenusRoot({ config, children })
9
8
  return null;
10
9
  config.menus = filteredMenus;
11
10
  return children(config);
12
- });
11
+ };
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
3
- import { FulfillmentsServiceConfig, TimeSlot } from '../../types/fulfillments-types.js';
3
+ import { DispatchType, FulfillmentsServiceConfig, TimeSlot } from '../../types/fulfillments-types.js';
4
+ import * as fulfillemtMethodsSDK from '@wix/auto_sdk_restaurants_fulfillment-methods';
4
5
  export interface RootProps {
5
6
  children: (props: {
6
7
  isLoading: boolean;
@@ -27,6 +28,8 @@ export interface CurrentTimeSlotProps {
27
28
  children: (props: {
28
29
  timeSlot: TimeSlot;
29
30
  hasDetails: boolean;
31
+ asapTime: number | undefined;
32
+ asapTimeRange: operationsSDK.DurationRange | undefined;
30
33
  }) => React.ReactNode;
31
34
  }
32
35
  /**
@@ -98,36 +101,149 @@ export interface CurrentLocationProps {
98
101
  * ```
99
102
  */
100
103
  export declare const CurrentLocation: React.FC<CurrentLocationProps>;
101
- export interface ExtraDataProps {
104
+ export interface MinOrderAmountProps {
102
105
  children: (props: {
103
- extraData: {
104
- acceptingOrders: boolean;
105
- deliveryFee?: number;
106
- minOrderAmount?: number;
107
- freeDeliveryThreshold?: number;
108
- taxRate?: number;
109
- serviceCharge?: number;
110
- isOnline?: boolean;
111
- orderingDisabledReason?: string;
112
- };
113
- hasExtraData: boolean;
106
+ minOrderAmount: number | undefined;
107
+ hasMinOrderAmount: boolean;
108
+ }) => React.ReactNode;
109
+ }
110
+ /**
111
+ * Component that provides access to minimum order amount information
112
+ *
113
+ * @example
114
+ * ```tsx
115
+ * <CoreSettings.MinOrderAmount>
116
+ * {({ minOrderAmount, hasMinOrderAmount }) => (
117
+ * hasMinOrderAmount ? (
118
+ * <div>Minimum order: ${minOrderAmount}</div>
119
+ * ) : null
120
+ * )}
121
+ * </CoreSettings.MinOrderAmount>
122
+ * ```
123
+ */
124
+ export declare const MinOrderAmount: React.FC<MinOrderAmountProps>;
125
+ export interface AcceptingOrdersProps {
126
+ children: (props: {
127
+ acceptingOrders: boolean;
128
+ }) => React.ReactNode;
129
+ }
130
+ /**
131
+ * Component that provides access to accepting orders status
132
+ *
133
+ * @example
134
+ * ```tsx
135
+ * <CoreSettings.AcceptingOrders>
136
+ * {({ acceptingOrders }) => (
137
+ * <div>
138
+ * Status: {acceptingOrders ? 'Accepting Orders' : 'Not Accepting Orders'}
139
+ * </div>
140
+ * )}
141
+ * </CoreSettings.AcceptingOrders>
142
+ * ```
143
+ */
144
+ export declare const AcceptingOrders: React.FC<AcceptingOrdersProps>;
145
+ export interface DeliveryFeeProps {
146
+ children: (props: {
147
+ deliveryFee: string | undefined;
148
+ hasDeliveryFee: boolean;
149
+ }) => React.ReactNode;
150
+ }
151
+ /**
152
+ * Component that provides access to delivery fee information
153
+ *
154
+ * @example
155
+ * ```tsx
156
+ * <CoreSettings.DeliveryFee>
157
+ * {({ deliveryFee, hasDeliveryFee }) => (
158
+ * hasDeliveryFee ? (
159
+ * <div>Delivery Fee: ${deliveryFee}</div>
160
+ * ) : (
161
+ * <div>Free Delivery</div>
162
+ * )
163
+ * )}
164
+ * </CoreSettings.DeliveryFee>
165
+ * ```
166
+ */
167
+ export declare const DeliveryFee: React.FC<DeliveryFeeProps>;
168
+ export interface FreeDeliveryThresholdProps {
169
+ children: (props: {
170
+ freeDeliveryThreshold: string | undefined;
171
+ hasFreeDeliveryThreshold: boolean;
114
172
  }) => React.ReactNode;
115
173
  }
116
174
  /**
117
- * Component that provides access to extra settings data
175
+ * Component that provides access to free delivery threshold information
118
176
  *
119
177
  * @example
120
178
  * ```tsx
121
- * <CoreSettings.ExtraData>
122
- * {({ extraData }) => (
179
+ * <CoreSettings.FreeDeliveryThreshold>
180
+ * {({ freeDeliveryThreshold, hasFreeDeliveryThreshold }) => (
181
+ * hasFreeDeliveryThreshold ? (
182
+ * <div>Free delivery on orders over ${freeDeliveryThreshold}</div>
183
+ * ) : null
184
+ * )}
185
+ * </CoreSettings.FreeDeliveryThreshold>
186
+ * ```
187
+ */
188
+ export declare const FreeDeliveryThreshold: React.FC<FreeDeliveryThresholdProps>;
189
+ export interface SelectedAddressProps {
190
+ children: (props: {
191
+ selectedAddress: fulfillemtMethodsSDK.CommonAddress | null;
192
+ hasAddress: boolean;
193
+ selectedType: DispatchType | null;
194
+ }) => React.ReactNode;
195
+ }
196
+ /**
197
+ * Component that provides access to the selected address
198
+ *
199
+ * @example
200
+ * ```tsx
201
+ * <CoreSettings.SelectedAddress>
202
+ * {({ address, hasAddress }) => (
203
+ * hasAddress ? (
204
+ * <div>
205
+ * <p>{address.street}</p>
206
+ * <p>{address.city}, {address.state} {address.zip}</p>
207
+ * <p>{address.country}</p>
208
+ * </div>
209
+ * ) : null
210
+ * )}
211
+ * </CoreSettings.SelectedAddress>
212
+ * ```
213
+ */
214
+ export declare const SelectedAddress: React.FC<SelectedAddressProps>;
215
+ export interface DispatchTypeSelectorProps {
216
+ children: (props: {
217
+ availableTypes: Array<{
218
+ type: DispatchType;
219
+ isSelected: boolean;
220
+ timeSlot: TimeSlot | null;
221
+ }>;
222
+ selectedType: DispatchType | null;
223
+ selectDispatchType: (type: DispatchType) => void;
224
+ hasTypes: boolean;
225
+ }) => React.ReactNode;
226
+ }
227
+ /**
228
+ * Component that provides dispatch type selection (pickup or delivery)
229
+ *
230
+ * @example
231
+ * ```tsx
232
+ * <CoreSettings.DispatchTypeSelector>
233
+ * {({ availableTypes, selectedType, selectDispatchType }) => (
123
234
  * <div>
124
- * <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
125
- * <p>Delivery Fee: ${extraData.deliveryFee}</p>
126
- * <p>Min Order: ${extraData.minOrderAmount}</p>
127
- * <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
235
+ * {availableTypes.map(({ type, isSelected }) => (
236
+ * <button
237
+ * key={type}
238
+ * onClick={() => selectDispatchType(type)}
239
+ * disabled={isSelected}
240
+ * >
241
+ * {type} {isSelected && '(selected)'}
242
+ * </button>
243
+ * ))}
128
244
  * </div>
129
245
  * )}
130
- * </CoreSettings.ExtraData>
246
+ * </CoreSettings.DispatchTypeSelector>
131
247
  * ```
132
248
  */
133
- export declare const ExtraData: React.FC<ExtraDataProps>;
249
+ export declare const DispatchTypeSelector: React.FC<DispatchTypeSelectorProps>;
@@ -57,7 +57,14 @@ export const CurrentTimeSlot = ({ children, }) => {
57
57
  const fulfillmentsService = useService(FulfillmentsServiceDefinition);
58
58
  const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get() ?? {};
59
59
  const hasDetails = Boolean(fulfillmentsService.selectedTimeSlot?.get());
60
- return children({ timeSlot: selectedTimeSlot, hasDetails });
60
+ const asapTime = fulfillmentsService.asapTimeSignal?.get();
61
+ const asapTimeRange = fulfillmentsService.asapTimeRangeSignal?.get();
62
+ return children({
63
+ timeSlot: selectedTimeSlot,
64
+ hasDetails,
65
+ asapTime,
66
+ asapTimeRange,
67
+ });
61
68
  };
62
69
  /**
63
70
  * Component that provides access to current fulfillment options
@@ -114,49 +121,165 @@ export const CurrentLocation = ({ children, }) => {
114
121
  return children({ location: currentLocation, hasLocation });
115
122
  };
116
123
  /**
117
- * Component that provides access to extra settings data
124
+ * Component that provides access to minimum order amount information
118
125
  *
119
126
  * @example
120
127
  * ```tsx
121
- * <CoreSettings.ExtraData>
122
- * {({ extraData }) => (
128
+ * <CoreSettings.MinOrderAmount>
129
+ * {({ minOrderAmount, hasMinOrderAmount }) => (
130
+ * hasMinOrderAmount ? (
131
+ * <div>Minimum order: ${minOrderAmount}</div>
132
+ * ) : null
133
+ * )}
134
+ * </CoreSettings.MinOrderAmount>
135
+ * ```
136
+ */
137
+ export const MinOrderAmount = ({ children }) => {
138
+ const fulfillmentsService = useService(FulfillmentsServiceDefinition);
139
+ const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
140
+ const minOrderAmount = selectedDispatchInfo?.minOrder
141
+ ? Number(selectedDispatchInfo.minOrder)
142
+ : undefined;
143
+ const hasMinOrderAmount = Boolean(minOrderAmount !== undefined);
144
+ return children({ minOrderAmount, hasMinOrderAmount });
145
+ };
146
+ /**
147
+ * Component that provides access to accepting orders status
148
+ *
149
+ * @example
150
+ * ```tsx
151
+ * <CoreSettings.AcceptingOrders>
152
+ * {({ acceptingOrders }) => (
123
153
  * <div>
124
- * <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
125
- * <p>Delivery Fee: ${extraData.deliveryFee}</p>
126
- * <p>Min Order: ${extraData.minOrderAmount}</p>
127
- * <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
154
+ * Status: {acceptingOrders ? 'Accepting Orders' : 'Not Accepting Orders'}
128
155
  * </div>
129
156
  * )}
130
- * </CoreSettings.ExtraData>
157
+ * </CoreSettings.AcceptingOrders>
131
158
  * ```
132
159
  */
133
- export const ExtraData = ({ children }) => {
160
+ export const AcceptingOrders = ({ children, }) => {
134
161
  const service = useService(OLOSettingsServiceDefinition);
135
162
  const fulfillmentsService = useService(FulfillmentsServiceDefinition);
136
163
  const operation = service.operation?.get();
137
- const fulfillments = fulfillmentsService.fulfillments?.get();
138
- const minOrderPrice = fulfillments && fulfillments.length > 0
139
- ? Math.min(...fulfillments
140
- .map((f) => Number(f.minOrderPrice ?? 0))
141
- .filter((x) => x !== undefined))
142
- : undefined;
143
- const extraData = {
144
- acceptingOrders: operation?.status === 'ACTIVE' && !operation?.paused,
145
- deliveryFee: operation?.fulfillment?.delivery?.fee?.amount ||
146
- operation?.deliveryFee,
147
- minOrderAmount: minOrderPrice,
148
- freeDeliveryThreshold: operation?.fulfillment?.delivery?.freeDeliveryThreshold
149
- ?.amount || operation?.freeDeliveryThreshold,
150
- taxRate: operation?.pricing?.taxRate || operation?.taxRate,
151
- serviceCharge: operation?.pricing?.serviceCharge?.amount ||
152
- operation?.serviceCharge,
153
- isOnline: operation?.status === 'ACTIVE',
154
- orderingDisabledReason: operation?.paused
155
- ? operation?.pauseReason
156
- : undefined,
164
+ const selectedFulfillment = fulfillmentsService.selectedFulfillment?.get();
165
+ const acceptingOrders = Boolean(operation?.enabled) && Boolean(selectedFulfillment);
166
+ return children({ acceptingOrders });
167
+ };
168
+ /**
169
+ * Component that provides access to delivery fee information
170
+ *
171
+ * @example
172
+ * ```tsx
173
+ * <CoreSettings.DeliveryFee>
174
+ * {({ deliveryFee, hasDeliveryFee }) => (
175
+ * hasDeliveryFee ? (
176
+ * <div>Delivery Fee: ${deliveryFee}</div>
177
+ * ) : (
178
+ * <div>Free Delivery</div>
179
+ * )
180
+ * )}
181
+ * </CoreSettings.DeliveryFee>
182
+ * ```
183
+ */
184
+ export const DeliveryFee = ({ children }) => {
185
+ const fulfillmentsService = useService(FulfillmentsServiceDefinition);
186
+ const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
187
+ console.log('selectedDispatchInfo', selectedDispatchInfo);
188
+ const deliveryFee = selectedDispatchInfo?.deliveryFee ?? undefined;
189
+ const hasDeliveryFee = Boolean(deliveryFee);
190
+ return children({ deliveryFee, hasDeliveryFee });
191
+ };
192
+ /**
193
+ * Component that provides access to free delivery threshold information
194
+ *
195
+ * @example
196
+ * ```tsx
197
+ * <CoreSettings.FreeDeliveryThreshold>
198
+ * {({ freeDeliveryThreshold, hasFreeDeliveryThreshold }) => (
199
+ * hasFreeDeliveryThreshold ? (
200
+ * <div>Free delivery on orders over ${freeDeliveryThreshold}</div>
201
+ * ) : null
202
+ * )}
203
+ * </CoreSettings.FreeDeliveryThreshold>
204
+ * ```
205
+ */
206
+ export const FreeDeliveryThreshold = ({ children, }) => {
207
+ const fulfillmentsService = useService(FulfillmentsServiceDefinition);
208
+ const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
209
+ const freeDeliveryThreshold = selectedDispatchInfo?.freeFulfillmentPriceThreshold ?? undefined;
210
+ const hasFreeDeliveryThreshold = Boolean(freeDeliveryThreshold);
211
+ return children({ freeDeliveryThreshold, hasFreeDeliveryThreshold });
212
+ };
213
+ /**
214
+ * Component that provides access to the selected address
215
+ *
216
+ * @example
217
+ * ```tsx
218
+ * <CoreSettings.SelectedAddress>
219
+ * {({ address, hasAddress }) => (
220
+ * hasAddress ? (
221
+ * <div>
222
+ * <p>{address.street}</p>
223
+ * <p>{address.city}, {address.state} {address.zip}</p>
224
+ * <p>{address.country}</p>
225
+ * </div>
226
+ * ) : null
227
+ * )}
228
+ * </CoreSettings.SelectedAddress>
229
+ * ```
230
+ */
231
+ export const SelectedAddress = ({ children, }) => {
232
+ const fulfillmentsService = useService(FulfillmentsServiceDefinition);
233
+ const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
234
+ const selectedAddress = selectedDispatchInfo?.address ?? null;
235
+ const hasAddress = Boolean(selectedAddress);
236
+ const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();
237
+ const selectedType = selectedTimeSlot?.dispatchType ?? null;
238
+ return children({ selectedAddress, hasAddress, selectedType });
239
+ };
240
+ /**
241
+ * Component that provides dispatch type selection (pickup or delivery)
242
+ *
243
+ * @example
244
+ * ```tsx
245
+ * <CoreSettings.DispatchTypeSelector>
246
+ * {({ availableTypes, selectedType, selectDispatchType }) => (
247
+ * <div>
248
+ * {availableTypes.map(({ type, isSelected }) => (
249
+ * <button
250
+ * key={type}
251
+ * onClick={() => selectDispatchType(type)}
252
+ * disabled={isSelected}
253
+ * >
254
+ * {type} {isSelected && '(selected)'}
255
+ * </button>
256
+ * ))}
257
+ * </div>
258
+ * )}
259
+ * </CoreSettings.DispatchTypeSelector>
260
+ * ```
261
+ */
262
+ export const DispatchTypeSelector = ({ children, }) => {
263
+ const fulfillmentsService = useService(FulfillmentsServiceDefinition);
264
+ const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();
265
+ const selectedType = selectedTimeSlot?.dispatchType ?? null;
266
+ const availableTypes = fulfillmentsService.availableTypes
267
+ ?.get()
268
+ ?.map((type) => {
269
+ return {
270
+ type,
271
+ isSelected: type === selectedType,
272
+ timeSlot: selectedTimeSlot,
273
+ };
274
+ });
275
+ const selectDispatchType = (type) => {
276
+ fulfillmentsService.selectFulfillmentType(type);
157
277
  };
158
- const hasExtraData = Boolean(extraData.deliveryFee !== undefined ||
159
- extraData.minOrderAmount !== undefined ||
160
- extraData.freeDeliveryThreshold !== undefined);
161
- return children({ extraData, hasExtraData });
278
+ const hasTypes = availableTypes.length > 0;
279
+ return children({
280
+ availableTypes,
281
+ selectedType,
282
+ selectDispatchType,
283
+ hasTypes,
284
+ });
162
285
  };
@@ -2,3 +2,4 @@ export * as CoreItemDetails from './ItemDetails.js';
2
2
  export { CoreClickableItem } from './ClickableItem.js';
3
3
  export * as CoreOLO from './OLO.js';
4
4
  export * as CoreSettings from './Settings.js';
5
+ export * as CoreFulfillmentDetails from './FulfillmentDetails.js';
@@ -2,3 +2,4 @@ export * as CoreItemDetails from './ItemDetails.js';
2
2
  export { CoreClickableItem } from './ClickableItem.js';
3
3
  export * as CoreOLO from './OLO.js';
4
4
  export * as CoreSettings from './Settings.js';
5
+ export * as CoreFulfillmentDetails from './FulfillmentDetails.js';
@@ -4,3 +4,5 @@ export * as ClickableItem from './ClickableItem.js';
4
4
  export * as OLO from './OLO.js';
5
5
  export * as Settings from './Settings.js';
6
6
  export * as OLOMenus from './OLOMenus.js';
7
+ export * as FulfillmentDetails from './FulfillmentDetails.js';
8
+ export type { SelectedItemData } from './ClickableItem.js';
@@ -4,3 +4,4 @@ export * as ClickableItem from './ClickableItem.js';
4
4
  export * as OLO from './OLO.js';
5
5
  export * as Settings from './Settings.js';
6
6
  export * as OLOMenus from './OLOMenus.js';
7
+ export * as FulfillmentDetails from './FulfillmentDetails.js';