@jotul/jotul-widgets 1.2.5 → 1.2.6
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.
package/dist/JotulWidget.d.ts
CHANGED
|
@@ -5,4 +5,4 @@ export { DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale
|
|
|
5
5
|
export type { JotulWidgetLocale } from './i18n/widgetStrings';
|
|
6
6
|
export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
|
|
7
7
|
export type { CheckWidgetAuthorizationOptions, DealerSearchResponse, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetHandle, JotulWidgetProps, JotulWidgetScope, JotulWidgetStyling, JotulWidgetType, WidgetAuthClientResponse, } from './types';
|
|
8
|
-
export declare function JotulWidget({ type, endpoint, className, productName, locale: localeProp, markets: marketsProp, scope, brands, campaignSlug, styling, button, buttonLoading, widgetRef, }: JotulWidgetProps): import("react/jsx-runtime").JSX.Element | null;
|
|
8
|
+
export declare function JotulWidget({ type, endpoint, className, productName, locale: localeProp, markets: marketsProp, scope, brands, campaignSlug, styling, button, buttonLoading, widgetRef, }: JotulWidgetProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
package/dist/JotulWidget.js
CHANGED
|
@@ -68,10 +68,10 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
68
68
|
const [inquiryValues, setInquiryValues] = useState(null);
|
|
69
69
|
const [inquiryError, setInquiryError] = useState(null);
|
|
70
70
|
const [isInquirySubmitted, setIsInquirySubmitted] = useState(false);
|
|
71
|
-
const [mounted, setMounted] = useState(false);
|
|
72
71
|
const [FindDealerDrawerWidgetComp, setFindDealerDrawerWidgetComp] = useState(null);
|
|
73
72
|
const [ProductPageWidgetComp, setProductPageWidgetComp] = useState(null);
|
|
74
73
|
const [isComponentLoading, setIsComponentLoading] = useState(false);
|
|
74
|
+
const [mounted, setMounted] = useState(false);
|
|
75
75
|
const autocompleteCacheRef = useRef(new Map());
|
|
76
76
|
const productPageCampaignSlug = type === 'productPage' ? campaignSlug : undefined;
|
|
77
77
|
const dealerSearchOptions = useMemo(() => ({
|
|
@@ -272,13 +272,13 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
272
272
|
if (widgetType === 'productPage' && !isOpen) {
|
|
273
273
|
if (button == null)
|
|
274
274
|
return null;
|
|
275
|
-
return
|
|
275
|
+
return renderButton(button, openProductPageWidget);
|
|
276
276
|
}
|
|
277
277
|
const productPageAuthPending = widgetType === 'productPage' &&
|
|
278
278
|
isOpen &&
|
|
279
279
|
(auth === null || isLoading);
|
|
280
280
|
if (productPageAuthPending) {
|
|
281
|
-
return
|
|
281
|
+
return buttonLoading ?? button ?? null;
|
|
282
282
|
}
|
|
283
283
|
const waitingForAuth = auth === null &&
|
|
284
284
|
!((widgetType === 'productPage' || widgetType === 'findDealerDrawer') &&
|
|
@@ -296,78 +296,78 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
296
296
|
return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
|
|
297
297
|
}
|
|
298
298
|
if (widgetType === 'productPage') {
|
|
299
|
-
return
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
setLocationSuggestions([]);
|
|
310
|
-
}
|
|
311
|
-
}, onQuerySubmit: async (value) => {
|
|
312
|
-
const query = value.trim();
|
|
313
|
-
if (query.length < 3)
|
|
314
|
-
return;
|
|
315
|
-
setIsSearchingSuggestions(true);
|
|
316
|
-
const result = await searchLocationSuggestions(query, dealerSearchOptions);
|
|
317
|
-
const resolvedSuggestions = result.ok && Array.isArray(result.suggestions) ? result.suggestions : [];
|
|
318
|
-
setLocationSuggestions(resolvedSuggestions);
|
|
319
|
-
setIsSearchingSuggestions(false);
|
|
320
|
-
const suggestion = resolvedSuggestions[0];
|
|
321
|
-
if (!suggestion)
|
|
322
|
-
return;
|
|
323
|
-
setLocationQuery(suggestion.label);
|
|
324
|
-
setLocationSuggestions([]);
|
|
325
|
-
setIsSearchingSuggestions(false);
|
|
326
|
-
setIsSuggestionListOpen(false);
|
|
327
|
-
await runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
|
|
328
|
-
}, onSuggestionSelect: (suggestion) => {
|
|
329
|
-
setLocationQuery(suggestion.label);
|
|
330
|
-
setLocationSuggestions([]);
|
|
331
|
-
setIsSearchingSuggestions(false);
|
|
332
|
-
setIsSuggestionListOpen(false);
|
|
333
|
-
void runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
|
|
334
|
-
}, onDismissSuggestions: () => {
|
|
299
|
+
return ProductPageWidgetComp != null && mounted
|
|
300
|
+
? createPortal(_jsx(ProductPageWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
|
|
301
|
+
? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
|
|
302
|
+
: searchResult, mapSearchResult: mapSearchResult?.ok === false
|
|
303
|
+
? { ...mapSearchResult, error: getSafeWidgetErrorMessage(mapSearchResult.error, t) }
|
|
304
|
+
: mapSearchResult, inquiryValues: inquiryValues, inquiryError: inquiryError, isInquirySubmitted: isInquirySubmitted, selectedDealerName: selectedDealerName, isManualSearchEnabled: isManualLocationSearchEnabled, query: locationQuery, suggestions: locationSuggestions, suggestionsOpen: isSuggestionListOpen, isSuggestionsLoading: isSearchingSuggestions, onQueryChange: (value) => {
|
|
305
|
+
setLocationQuery(value);
|
|
306
|
+
const trimmed = value.trim();
|
|
307
|
+
setIsSuggestionListOpen(trimmed.length > 0);
|
|
308
|
+
if (trimmed.length < 3) {
|
|
335
309
|
setLocationSuggestions([]);
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
310
|
+
}
|
|
311
|
+
}, onQuerySubmit: async (value) => {
|
|
312
|
+
const query = value.trim();
|
|
313
|
+
if (query.length < 3)
|
|
314
|
+
return;
|
|
315
|
+
setIsSearchingSuggestions(true);
|
|
316
|
+
const result = await searchLocationSuggestions(query, dealerSearchOptions);
|
|
317
|
+
const resolvedSuggestions = result.ok && Array.isArray(result.suggestions) ? result.suggestions : [];
|
|
318
|
+
setLocationSuggestions(resolvedSuggestions);
|
|
319
|
+
setIsSearchingSuggestions(false);
|
|
320
|
+
const suggestion = resolvedSuggestions[0];
|
|
321
|
+
if (!suggestion)
|
|
322
|
+
return;
|
|
323
|
+
setLocationQuery(suggestion.label);
|
|
324
|
+
setLocationSuggestions([]);
|
|
325
|
+
setIsSearchingSuggestions(false);
|
|
326
|
+
setIsSuggestionListOpen(false);
|
|
327
|
+
await runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
|
|
328
|
+
}, onSuggestionSelect: (suggestion) => {
|
|
329
|
+
setLocationQuery(suggestion.label);
|
|
330
|
+
setLocationSuggestions([]);
|
|
331
|
+
setIsSearchingSuggestions(false);
|
|
332
|
+
setIsSuggestionListOpen(false);
|
|
333
|
+
void runDealerSearchByCoordinates(suggestion.latitude, suggestion.longitude);
|
|
334
|
+
}, onDismissSuggestions: () => {
|
|
335
|
+
setLocationSuggestions([]);
|
|
336
|
+
setIsSearchingSuggestions(false);
|
|
337
|
+
setIsSuggestionListOpen(false);
|
|
338
|
+
}, onInquiryClose: () => {
|
|
339
|
+
setSelectedDealerName(null);
|
|
340
|
+
setInquiryValues(null);
|
|
341
|
+
setInquiryError(null);
|
|
342
|
+
}, onInquirySubmit: () => {
|
|
343
|
+
if (inquiryValues == null)
|
|
344
|
+
return;
|
|
345
|
+
const trimmedName = inquiryValues.name.trim();
|
|
346
|
+
const trimmedEmail = inquiryValues.email.trim();
|
|
347
|
+
const trimmedPhone = inquiryValues.phone.trim();
|
|
348
|
+
if (!trimmedName || !trimmedEmail || !trimmedPhone) {
|
|
349
|
+
setInquiryError(t.formValidationRequired);
|
|
350
|
+
return;
|
|
351
|
+
}
|
|
352
|
+
if (!isValidEmail(trimmedEmail)) {
|
|
353
|
+
setInquiryError(t.formValidationEmail);
|
|
354
|
+
return;
|
|
355
|
+
}
|
|
356
|
+
setInquiryError(null);
|
|
357
|
+
setIsInquirySubmitted(true);
|
|
358
|
+
setSelectedDealerName(null);
|
|
359
|
+
setInquiryValues(null);
|
|
360
|
+
}, onInquiryFieldChange: (key, value) => setInquiryValues((current) => current == null ? current : { ...current, [key]: value }), onStartInquiry: (dealerName) => {
|
|
361
|
+
setSelectedDealerName(dealerName);
|
|
362
|
+
setInquiryValues(createInquiryFormValues(productName, dealerName));
|
|
363
|
+
setInquiryError(null);
|
|
364
|
+
setIsInquirySubmitted(false);
|
|
365
|
+
}, onMapDealerSelect: (dealer) => {
|
|
366
|
+
if (isDealerInSearchResult(dealer.dealerName, searchResult, t.unknownDealer))
|
|
367
|
+
return;
|
|
368
|
+
void runDealerSearchByCoordinates(dealer.latitude, dealer.longitude);
|
|
369
|
+
}, onClosePopup: closeDealerWidget }), document.body)
|
|
370
|
+
: null;
|
|
371
371
|
}
|
|
372
372
|
if (widgetType === 'findDealerDrawer') {
|
|
373
373
|
const drawerLoading = isOpen &&
|
|
@@ -375,7 +375,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
375
375
|
isLoading ||
|
|
376
376
|
isComponentLoading ||
|
|
377
377
|
(isSearching && searchResult == null && mapSearchResult == null));
|
|
378
|
-
return (_jsxs(
|
|
378
|
+
return (_jsxs(_Fragment, { children: [button != null &&
|
|
379
379
|
(drawerLoading
|
|
380
380
|
? buttonLoading ?? button
|
|
381
381
|
: renderButton(button, openProductPageWidget)), mounted &&
|
|
@@ -33,7 +33,7 @@ export function DealerList({ dealers, total, selectedDealerName, activeDealerNam
|
|
|
33
33
|
const isExclusive = isExclusiveDealer(dealer);
|
|
34
34
|
return (_jsxs("div", { ref: (element) => {
|
|
35
35
|
cardRefs.current[dealerName] = element;
|
|
36
|
-
}, className: `jwi-w-full jwi-cursor-pointer ${R10} jwi-border jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)] ${isActiveDealer ? 'jwi-border-[#ef2b18]' : ''}`, style: isActiveDealer && activeBorderColor
|
|
36
|
+
}, className: `jwi-w-full jwi-cursor-pointer ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)] ${isActiveDealer ? 'jwi-border-[#ef2b18]' : ''}`, style: isActiveDealer && activeBorderColor
|
|
37
37
|
? { borderColor: activeBorderColor }
|
|
38
38
|
: undefined, onClick: () => onSelectDealer?.(dealerName), children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-min-w-0 jwi-max-w-[calc(100%-5rem)] jwi-pr-1", children: _jsxs("div", { className: "jwi-flex jwi-items-center jwi-gap-2", children: [isExclusive && (() => {
|
|
39
39
|
const isNorway = markets?.includes('NO') ?? false;
|