@jotul/jotul-widgets 1.2.1 → 1.2.3
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.css +1 -1
- package/dist/JotulWidget.d.ts +2 -2
- package/dist/JotulWidget.js +87 -53
- package/dist/api.js +9 -5
- package/dist/components/DealerCardSkeleton.d.ts +0 -1
- package/dist/components/DealerCardSkeleton.js +1 -2
- package/dist/components/FindDealerDrawerWidget.d.ts +3 -4
- package/dist/components/FindDealerDrawerWidget.js +11 -9
- package/dist/components/FinderSearchRowSkeleton.d.ts +0 -1
- package/dist/components/FinderSearchRowSkeleton.js +1 -2
- package/dist/components/ProductPageWidget.d.ts +3 -4
- package/dist/components/ProductPageWidget.js +12 -10
- package/dist/components/product-page/DealerList.d.ts +2 -2
- package/dist/components/product-page/DealerList.js +4 -3
- package/dist/index.d.ts +1 -1
- package/dist/types.d.ts +14 -25
- package/package.json +1 -1
package/dist/JotulWidget.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.jwi-pointer-events-none{pointer-events:none}.jwi-fixed{position:fixed}.jwi-absolute{position:absolute}.jwi-relative{position:relative}.jwi-inset-0{inset:0}.jwi-inset-x-0{left:0;right:0}.jwi-bottom-0{bottom:0}.jwi-left-0{left:0}.jwi-right-0{right:0}.jwi-right-3{right:.75rem}.jwi-top-0{top:0}.jwi-top-3{top:.75rem}.jwi-z-20{z-index:20}.jwi-z-30{z-index:30}.jwi-z-\[1200\]{z-index:1200}.jwi-z-\[9998\]{z-index:9998}.jwi-z-\[9999\]{z-index:9999}.jwi-m-0{margin:0}.jwi--mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.-jwi-mt-px{margin-top:-1px}.jwi-mb-3{margin-bottom:.75rem}.jwi-mr-\[-12px\]{margin-right:-12px}.jwi-mt-1{margin-top:.25rem}.jwi-mt-2{margin-top:.5rem}.jwi-mt-3{margin-top:.75rem}.jwi-mt-4{margin-top:1rem}.jwi-box-border{box-sizing:border-box}.jwi-flex{display:flex}.jwi-inline-flex{display:inline-flex}.jwi-h-10{height:2.5rem}.jwi-h-12{height:3rem}.jwi-h-14{height:3.5rem}.jwi-h-3\.5{height:.875rem}.jwi-h-4{height:1rem}.jwi-h-5{height:1.25rem}.jwi-h-6{height:1.5rem}.jwi-h-9{height:2.25rem}.jwi-h-\[14px\]{height:14px}.jwi-h-\[18px\]{height:18px}.jwi-h-\[22px\]{height:22px}.jwi-h-\[45\%\]{height:45%}.jwi-h-\[60px\]{height:60px}.jwi-h-\[78vh\]{height:78vh}.jwi-h-\[calc\(78vh-48px\)\]{height:calc(78vh - 48px)}.jwi-h-\[min\(85vh\,860px\)\]{height:min(85vh,860px)}.jwi-h-auto{height:auto}.jwi-h-full{height:100%}.jwi-max-h-\[min\(60vh\,480px\)\]{max-height:min(60vh,480px)}.jwi-max-h-none{max-height:none}.jwi-min-h-0{min-height:0}.jwi-min-h-\[48px\]{min-height:48px}.jwi-min-h-\[56px\]{min-height:56px}.jwi-w-1\/2{width:50%}.jwi-w-14{width:3.5rem}.jwi-w-2\/3{width:66.666667%}.jwi-w-24{width:6rem}.jwi-w-28{width:7rem}.jwi-w-3\.5{width:.875rem}.jwi-w-4{width:1rem}.jwi-w-48{width:12rem}.jwi-w-5{width:1.25rem}.jwi-w-9{width:2.25rem}.jwi-w-\[14px\]{width:14px}.jwi-w-\[18px\]{width:18px}.jwi-w-\[22px\]{width:22px}.jwi-w-\[40px\]{width:40px}.jwi-w-\[540px\]{width:540px}.jwi-w-\[min\(100vw\,1200px\)\]{width:min(100vw,1200px)}.jwi-w-\[min\(92vw\,620px\)\]{width:min(92vw,620px)}.jwi-w-\[min\(96vw\,1200px\)\]{width:min(96vw,1200px)}.jwi-w-auto{width:auto}.jwi-w-fit{width:-moz-fit-content;width:fit-content}.jwi-w-full{width:100%}.jwi-min-w-0{min-width:0}.jwi-max-w-\[220px\]{max-width:220px}.jwi-max-w-\[520px\]{max-width:520px}.jwi-max-w-\[70\%\]{max-width:70%}.jwi-max-w-\[calc\(100\%-5rem\)\]{max-width:calc(100% - 5rem)}.jwi-max-w-full{max-width:100%}.jwi-flex-1{flex:1 1 0%}.jwi-flex-shrink-0,.jwi-shrink-0{flex-shrink:0}.jwi-scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes jwi-pulse{50%{opacity:.5}}.jwi-animate-pulse{animation:jwi-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes jwi-spin{to{transform:rotate(1turn)}}.jwi-animate-spin{animation:jwi-spin 1s linear infinite}.jwi-cursor-pointer{cursor:pointer}.jwi-resize-y{resize:vertical}.jwi-flex-row{flex-direction:row}.jwi-flex-col{flex-direction:column}.jwi-items-start{align-items:flex-start}.jwi-items-center{align-items:center}.jwi-items-stretch{align-items:stretch}.jwi-justify-end{justify-content:flex-end}.jwi-justify-center{justify-content:center}.jwi-justify-between{justify-content:space-between}.jwi-gap-0\.5{gap:.125rem}.jwi-gap-1\.5{gap:.375rem}.jwi-gap-2{gap:.5rem}.jwi-gap-3{gap:.75rem}.jwi-gap-4{gap:1rem}.jwi-space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.jwi-self-stretch{align-self:stretch}.jwi-overflow-hidden{overflow:hidden}.jwi-overflow-y-auto{overflow-y:auto}.jwi-overscroll-y-contain{overscroll-behavior-y:contain}.jwi-whitespace-nowrap{white-space:nowrap}.jwi-break-all{word-break:break-all}.jwi-rounded-\[10px\]{border-radius:10px}.jwi-rounded-\[12px\]{border-radius:12px}.jwi-rounded-full{border-radius:9999px}.jwi-rounded-md{border-radius:.375rem}.jwi-rounded-b-\[10px\]{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.jwi-rounded-t-\[10px\]{border-top-left-radius:10px;border-top-right-radius:10px}.jwi-rounded-t-\[16px\]{border-top-left-radius:16px;border-top-right-radius:16px}.jwi-border{border-width:1px}.jwi-border-0{border-width:0}.jwi-border-b{border-bottom-width:1px}.jwi-border-t{border-top-width:1px}.jwi-border-t-0{border-top-width:0}.jwi-border-\[\#b7e5c2\]{--tw-border-opacity:1;border-color:rgb(183 229 194/var(--tw-border-opacity,1))}.jwi-border-\[\#b8d8aa\]{--tw-border-opacity:1;border-color:rgb(184 216 170/var(--tw-border-opacity,1))}.jwi-border-\[\#d8d2c7\]{--tw-border-opacity:1;border-color:rgb(216 210 199/var(--tw-border-opacity,1))}.jwi-border-\[\#e6e1d7\]{--tw-border-opacity:1;border-color:rgb(230 225 215/var(--tw-border-opacity,1))}.jwi-border-\[\#ef2b18\]{--tw-border-opacity:1;border-color:rgb(239 43 24/var(--tw-border-opacity,1))}.jwi-border-\[\#f0c7c2\]{--tw-border-opacity:1;border-color:rgb(240 199 194/var(--tw-border-opacity,1))}.jwi-bg-\[\#FCFCFC\]{--tw-bg-opacity:1;background-color:rgb(252 252 252/var(--tw-bg-opacity,1))}.jwi-bg-\[\#e8eef1\]{--tw-bg-opacity:1;background-color:rgb(232 238 241/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ece8df\]{--tw-bg-opacity:1;background-color:rgb(236 232 223/var(--tw-bg-opacity,1))}.jwi-bg-\[\#eefbf2\]{--tw-bg-opacity:1;background-color:rgb(238 251 242/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ef2b18\]{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}.jwi-bg-\[\#eff9e9\]{--tw-bg-opacity:1;background-color:rgb(239 249 233/var(--tw-bg-opacity,1))}.jwi-bg-\[\#f7f5ef\]{--tw-bg-opacity:1;background-color:rgb(247 245 239/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fbf3db\]{--tw-bg-opacity:1;background-color:rgb(251 243 219/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fff3f1\]{--tw-bg-opacity:1;background-color:rgb(255 243 241/var(--tw-bg-opacity,1))}.jwi-bg-black\/35{background-color:rgba(0,0,0,.35)}.jwi-bg-black\/45{background-color:rgba(0,0,0,.45)}.jwi-bg-transparent{background-color:transparent}.jwi-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.jwi-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.jwi-from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.jwi-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.jwi-p-0{padding:0}.jwi-p-2{padding:.5rem}.jwi-p-4{padding:1rem}.jwi-p-6{padding:1.5rem}.jwi-p-8{padding:2rem}.jwi-px-2\.5{padding-left:.625rem;padding-right:.625rem}.jwi-px-3{padding-left:.75rem;padding-right:.75rem}.jwi-px-4{padding-left:1rem;padding-right:1rem}.jwi-px-5{padding-left:1.25rem;padding-right:1.25rem}.jwi-px-6{padding-left:1.5rem;padding-right:1.5rem}.jwi-px-7{padding-left:1.75rem;padding-right:1.75rem}.jwi-py-1{padding-top:.25rem;padding-bottom:.25rem}.jwi-py-2{padding-top:.5rem;padding-bottom:.5rem}.jwi-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.jwi-py-3{padding-top:.75rem;padding-bottom:.75rem}.jwi-py-4{padding-top:1rem;padding-bottom:1rem}.jwi-py-8{padding-top:2rem;padding-bottom:2rem}.jwi-pb-24{padding-bottom:6rem}.jwi-pb-3{padding-bottom:.75rem}.jwi-pl-5{padding-left:1.25rem}.jwi-pr-1{padding-right:.25rem}.jwi-pr-3{padding-right:.75rem}.jwi-pr-\[12px\]{padding-right:12px}.jwi-pt-3{padding-top:.75rem}.jwi-text-left{text-align:left}.jwi-text-center{text-align:center}.jwi-font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.jwi-text-2xl{font-size:1.5rem;line-height:2rem}.jwi-text-\[13px\]{font-size:13px}.jwi-text-base{font-size:1rem;line-height:1.5rem}.jwi-text-sm{font-size:.875rem;line-height:1.25rem}.jwi-text-xl{font-size:1.25rem;line-height:1.75rem}.jwi-text-xs{font-size:.75rem;line-height:1rem}.jwi-font-medium{font-weight:500}.jwi-font-normal{font-weight:400}.jwi-font-semibold{font-weight:600}.jwi-uppercase{text-transform:uppercase}.jwi-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.jwi-leading-6{line-height:1.5rem}.jwi-leading-\[1\.35\]{line-height:1.35}.jwi-leading-\[1\.4\]{line-height:1.4}.jwi-leading-none{line-height:1}.jwi-leading-snug{line-height:1.375}.jwi-leading-tight{line-height:1.25}.jwi-tracking-\[0\.06em\]{letter-spacing:.06em}.jwi-text-\[\#111111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.jwi-text-\[\#16330f\]{--tw-text-opacity:1;color:rgb(22 51 15/var(--tw-text-opacity,1))}.jwi-text-\[\#1b5e20\]{--tw-text-opacity:1;color:rgb(27 94 32/var(--tw-text-opacity,1))}.jwi-text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.jwi-text-\[\#767676\]{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.jwi-text-\[\#8f2d21\]{--tw-text-opacity:1;color:rgb(143 45 33/var(--tw-text-opacity,1))}.jwi-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.jwi-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.jwi-opacity-25{opacity:.25}.jwi-opacity-75{opacity:.75}.jwi-opacity-95{opacity:.95}.jwi-shadow-\[-8px_0_32px_rgba\(0\,0\,0\,0\.2\)\]{--tw-shadow:-8px 0 32px rgba(0,0,0,.2);--tw-shadow-colored:-8px 0 32px var(--tw-shadow-color)}.jwi-shadow-\[-8px_0_32px_rgba\(0\,0\,0\,0\.2\)\],.jwi-shadow-\[0_-12px_36px_rgba\(0\,0\,0\,0\.22\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_-12px_36px_rgba\(0\,0\,0\,0\.22\)\]{--tw-shadow:0 -12px 36px rgba(0,0,0,.22);--tw-shadow-colored:0 -12px 36px var(--tw-shadow-color)}.jwi-shadow-\[0_-6px_20px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow:0 -6px 20px rgba(0,0,0,.12);--tw-shadow-colored:0 -6px 20px var(--tw-shadow-color)}.jwi-shadow-\[0_-6px_20px_rgba\(0\,0\,0\,0\.12\)\],.jwi-shadow-\[0_1px_2px_rgba\(17\,17\,17\,0\.03\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_1px_2px_rgba\(17\,17\,17\,0\.03\)\]{--tw-shadow:0 1px 2px hsla(0,0%,7%,.03);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color)}.jwi-shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.25\)\]{--tw-shadow:0 20px 60px rgba(0,0,0,.25);--tw-shadow-colored:0 20px 60px var(--tw-shadow-color)}.jwi-shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.25\)\],.jwi-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.12\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow:0 2px 8px rgba(0,0,0,.12);--tw-shadow-colored:0 2px 8px var(--tw-shadow-color)}.jwi-shadow-\[0_6px_16px_rgba\(22\,51\,15\,0\.08\)\]{--tw-shadow:0 6px 16px rgba(22,51,15,.08);--tw-shadow-colored:0 6px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_8px_24px_rgba\(17\,17\,17\,0\.08\)\]{--tw-shadow:0 8px 24px hsla(0,0%,7%,.08);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-outline-none{outline:2px solid transparent;outline-offset:2px}.jwi-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.placeholder\:jwi-text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:jwi-text-\[13px\]::placeholder{font-size:13px}.placeholder\:jwi-text-\[\#767676\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.placeholder\:jwi-text-\[\#767676\]::placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.hover\:jwi-bg-\[\#d92817\]:hover{--tw-bg-opacity:1;background-color:rgb(217 40 23/var(--tw-bg-opacity,1))}.hover\:jwi-bg-\[\#f7f5f0\]:hover{--tw-bg-opacity:1;background-color:rgb(247 245 240/var(--tw-bg-opacity,1))}.hover\:jwi-text-\[\#444444\]:hover{--tw-text-opacity:1;color:rgb(68 68 68/var(--tw-text-opacity,1))}.hover\:jwi-underline:hover{text-decoration-line:underline}.focus\:jwi-border-\[\#111111\]:focus{--tw-border-opacity:1;border-color:rgb(17 17 17/var(--tw-border-opacity,1))}.disabled\:jwi-cursor-wait:disabled{cursor:wait}.disabled\:hover\:jwi-bg-\[\#ef2b18\]:hover:disabled{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}@media (min-width:768px){.md\:jwi-h-full{height:100%}.md\:jwi-w-\[48\%\]{width:48%}.md\:jwi-w-\[52\%\]{width:52%}.md\:jwi-max-w-\[220px\]{max-width:220px}.md\:jwi-flex-row{flex-direction:row}.md\:jwi-items-center{align-items:center}.md\:jwi-justify-between{justify-content:space-between}.md\:jwi-border-r{border-right-width:1px}.md\:jwi-border-\[\#ece8df\]{--tw-border-opacity:1;border-color:rgb(236 232 223/var(--tw-border-opacity,1))}.md\:jwi-text-\[14px\]{font-size:14px}.md\:jwi-text-base{font-size:1rem;line-height:1.5rem}.md\:jwi-text-sm{font-size:.875rem;line-height:1.25rem}.md\:placeholder\:jwi-text-\[14px\]::-moz-placeholder{font-size:14px}.md\:placeholder\:jwi-text-\[14px\]::placeholder{font-size:14px}}
|
|
1
|
+
.jwi-pointer-events-none{pointer-events:none}.jwi-fixed{position:fixed}.jwi-absolute{position:absolute}.jwi-relative{position:relative}.jwi-inset-0{inset:0}.jwi-inset-x-0{left:0;right:0}.jwi-bottom-0{bottom:0}.jwi-left-0{left:0}.jwi-right-0{right:0}.jwi-right-3{right:.75rem}.jwi-top-0{top:0}.jwi-top-3{top:.75rem}.jwi-z-20{z-index:20}.jwi-z-30{z-index:30}.jwi-z-\[1200\]{z-index:1200}.jwi-z-\[2147483647\]{z-index:2147483647}.jwi-m-0{margin:0}.jwi--mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.-jwi-mt-px{margin-top:-1px}.jwi-mb-3{margin-bottom:.75rem}.jwi-mr-\[-12px\]{margin-right:-12px}.jwi-mt-1{margin-top:.25rem}.jwi-mt-2{margin-top:.5rem}.jwi-mt-3{margin-top:.75rem}.jwi-mt-4{margin-top:1rem}.jwi-box-border{box-sizing:border-box}.jwi-inline-block{display:inline-block}.jwi-flex{display:flex}.jwi-inline-flex{display:inline-flex}.jwi-h-10{height:2.5rem}.jwi-h-12{height:3rem}.jwi-h-14{height:3.5rem}.jwi-h-3\.5{height:.875rem}.jwi-h-4{height:1rem}.jwi-h-5{height:1.25rem}.jwi-h-6{height:1.5rem}.jwi-h-9{height:2.25rem}.jwi-h-\[14px\]{height:14px}.jwi-h-\[18px\]{height:18px}.jwi-h-\[22px\]{height:22px}.jwi-h-\[45\%\]{height:45%}.jwi-h-\[60px\]{height:60px}.jwi-h-\[78vh\]{height:78vh}.jwi-h-\[calc\(78vh-48px\)\]{height:calc(78vh - 48px)}.jwi-h-\[min\(85vh\,860px\)\]{height:min(85vh,860px)}.jwi-h-auto{height:auto}.jwi-h-full{height:100%}.jwi-max-h-\[min\(60vh\,480px\)\]{max-height:min(60vh,480px)}.jwi-max-h-none{max-height:none}.jwi-min-h-0{min-height:0}.jwi-min-h-\[48px\]{min-height:48px}.jwi-min-h-\[56px\]{min-height:56px}.jwi-w-1\/2{width:50%}.jwi-w-14{width:3.5rem}.jwi-w-2\/3{width:66.666667%}.jwi-w-24{width:6rem}.jwi-w-28{width:7rem}.jwi-w-3\.5{width:.875rem}.jwi-w-4{width:1rem}.jwi-w-48{width:12rem}.jwi-w-5{width:1.25rem}.jwi-w-9{width:2.25rem}.jwi-w-\[14px\]{width:14px}.jwi-w-\[18px\]{width:18px}.jwi-w-\[22px\]{width:22px}.jwi-w-\[40px\]{width:40px}.jwi-w-\[540px\]{width:540px}.jwi-w-\[min\(100vw\,1200px\)\]{width:min(100vw,1200px)}.jwi-w-\[min\(92vw\,620px\)\]{width:min(92vw,620px)}.jwi-w-\[min\(96vw\,1200px\)\]{width:min(96vw,1200px)}.jwi-w-auto{width:auto}.jwi-w-fit{width:-moz-fit-content;width:fit-content}.jwi-w-full{width:100%}.jwi-min-w-0{min-width:0}.jwi-max-w-\[220px\]{max-width:220px}.jwi-max-w-\[520px\]{max-width:520px}.jwi-max-w-\[70\%\]{max-width:70%}.jwi-max-w-\[calc\(100\%-5rem\)\]{max-width:calc(100% - 5rem)}.jwi-max-w-full{max-width:100%}.jwi-flex-1{flex:1 1 0%}.jwi-flex-shrink-0,.jwi-shrink-0{flex-shrink:0}.jwi-scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes jwi-pulse{50%{opacity:.5}}.jwi-animate-\[pulse_2s_ease-in-out_infinite\]{animation:jwi-pulse 2s ease-in-out infinite}@keyframes jwi-spin{to{transform:rotate(1turn)}}.jwi-animate-spin{animation:jwi-spin 1s linear infinite}.jwi-cursor-pointer{cursor:pointer}.jwi-resize-y{resize:vertical}.jwi-flex-row{flex-direction:row}.jwi-flex-col{flex-direction:column}.jwi-items-start{align-items:flex-start}.jwi-items-center{align-items:center}.jwi-items-stretch{align-items:stretch}.jwi-justify-end{justify-content:flex-end}.jwi-justify-center{justify-content:center}.jwi-justify-between{justify-content:space-between}.jwi-gap-0\.5{gap:.125rem}.jwi-gap-1\.5{gap:.375rem}.jwi-gap-2{gap:.5rem}.jwi-gap-3{gap:.75rem}.jwi-gap-4{gap:1rem}.jwi-space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.jwi-self-stretch{align-self:stretch}.jwi-overflow-hidden{overflow:hidden}.jwi-overflow-y-auto{overflow-y:auto}.jwi-overscroll-y-contain{overscroll-behavior-y:contain}.jwi-whitespace-nowrap{white-space:nowrap}.jwi-break-all{word-break:break-all}.jwi-rounded-\[10px\]{border-radius:10px}.jwi-rounded-\[12px\]{border-radius:12px}.jwi-rounded-full{border-radius:9999px}.jwi-rounded-md{border-radius:.375rem}.jwi-rounded-b-\[10px\]{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.jwi-rounded-t-\[10px\]{border-top-left-radius:10px;border-top-right-radius:10px}.jwi-rounded-t-\[16px\]{border-top-left-radius:16px;border-top-right-radius:16px}.jwi-border{border-width:1px}.jwi-border-0{border-width:0}.jwi-border-2{border-width:2px}.jwi-border-b{border-bottom-width:1px}.jwi-border-t{border-top-width:1px}.jwi-border-t-0{border-top-width:0}.jwi-border-\[\#b7e5c2\]{--tw-border-opacity:1;border-color:rgb(183 229 194/var(--tw-border-opacity,1))}.jwi-border-\[\#b8d8aa\]{--tw-border-opacity:1;border-color:rgb(184 216 170/var(--tw-border-opacity,1))}.jwi-border-\[\#d8d2c7\]{--tw-border-opacity:1;border-color:rgb(216 210 199/var(--tw-border-opacity,1))}.jwi-border-\[\#e6e1d7\]{--tw-border-opacity:1;border-color:rgb(230 225 215/var(--tw-border-opacity,1))}.jwi-border-\[\#ef2b18\]{--tw-border-opacity:1;border-color:rgb(239 43 24/var(--tw-border-opacity,1))}.jwi-border-\[\#f0c7c2\]{--tw-border-opacity:1;border-color:rgb(240 199 194/var(--tw-border-opacity,1))}.jwi-border-t-\[\#111111\]{--tw-border-opacity:1;border-top-color:rgb(17 17 17/var(--tw-border-opacity,1))}.jwi-bg-\[\#FCFCFC\]{--tw-bg-opacity:1;background-color:rgb(252 252 252/var(--tw-bg-opacity,1))}.jwi-bg-\[\#e8eef1\]{--tw-bg-opacity:1;background-color:rgb(232 238 241/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ece8df\]{--tw-bg-opacity:1;background-color:rgb(236 232 223/var(--tw-bg-opacity,1))}.jwi-bg-\[\#eefbf2\]{--tw-bg-opacity:1;background-color:rgb(238 251 242/var(--tw-bg-opacity,1))}.jwi-bg-\[\#ef2b18\]{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}.jwi-bg-\[\#eff9e9\]{--tw-bg-opacity:1;background-color:rgb(239 249 233/var(--tw-bg-opacity,1))}.jwi-bg-\[\#f7f5ef\]{--tw-bg-opacity:1;background-color:rgb(247 245 239/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fbf3db\]{--tw-bg-opacity:1;background-color:rgb(251 243 219/var(--tw-bg-opacity,1))}.jwi-bg-\[\#fff3f1\]{--tw-bg-opacity:1;background-color:rgb(255 243 241/var(--tw-bg-opacity,1))}.jwi-bg-black\/35{background-color:rgba(0,0,0,.35)}.jwi-bg-black\/45{background-color:rgba(0,0,0,.45)}.jwi-bg-transparent{background-color:transparent}.jwi-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.jwi-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.jwi-from-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.jwi-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.jwi-p-0{padding:0}.jwi-p-2{padding:.5rem}.jwi-p-4{padding:1rem}.jwi-p-6{padding:1.5rem}.jwi-p-8{padding:2rem}.jwi-px-2\.5{padding-left:.625rem;padding-right:.625rem}.jwi-px-3{padding-left:.75rem;padding-right:.75rem}.jwi-px-4{padding-left:1rem;padding-right:1rem}.jwi-px-5{padding-left:1.25rem;padding-right:1.25rem}.jwi-px-6{padding-left:1.5rem;padding-right:1.5rem}.jwi-px-7{padding-left:1.75rem;padding-right:1.75rem}.jwi-py-1{padding-top:.25rem;padding-bottom:.25rem}.jwi-py-2{padding-top:.5rem;padding-bottom:.5rem}.jwi-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.jwi-py-3{padding-top:.75rem;padding-bottom:.75rem}.jwi-py-4{padding-top:1rem;padding-bottom:1rem}.jwi-pb-24{padding-bottom:6rem}.jwi-pb-3{padding-bottom:.75rem}.jwi-pl-5{padding-left:1.25rem}.jwi-pr-1{padding-right:.25rem}.jwi-pr-3{padding-right:.75rem}.jwi-pr-\[12px\]{padding-right:12px}.jwi-pt-3{padding-top:.75rem}.jwi-text-left{text-align:left}.jwi-text-center{text-align:center}.jwi-font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.jwi-text-2xl{font-size:1.5rem;line-height:2rem}.jwi-text-\[13px\]{font-size:13px}.jwi-text-base{font-size:1rem;line-height:1.5rem}.jwi-text-sm{font-size:.875rem;line-height:1.25rem}.jwi-text-xl{font-size:1.25rem;line-height:1.75rem}.jwi-text-xs{font-size:.75rem;line-height:1rem}.jwi-font-medium{font-weight:500}.jwi-font-normal{font-weight:400}.jwi-font-semibold{font-weight:600}.jwi-uppercase{text-transform:uppercase}.jwi-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.jwi-leading-6{line-height:1.5rem}.jwi-leading-\[1\.35\]{line-height:1.35}.jwi-leading-\[1\.4\]{line-height:1.4}.jwi-leading-none{line-height:1}.jwi-leading-snug{line-height:1.375}.jwi-leading-tight{line-height:1.25}.jwi-tracking-\[0\.06em\]{letter-spacing:.06em}.jwi-text-\[\#111111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.jwi-text-\[\#16330f\]{--tw-text-opacity:1;color:rgb(22 51 15/var(--tw-text-opacity,1))}.jwi-text-\[\#1b5e20\]{--tw-text-opacity:1;color:rgb(27 94 32/var(--tw-text-opacity,1))}.jwi-text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.jwi-text-\[\#767676\]{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.jwi-text-\[\#8f2d21\]{--tw-text-opacity:1;color:rgb(143 45 33/var(--tw-text-opacity,1))}.jwi-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.jwi-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.jwi-opacity-25{opacity:.25}.jwi-opacity-75{opacity:.75}.jwi-shadow-\[-8px_0_32px_rgba\(0\,0\,0\,0\.2\)\]{--tw-shadow:-8px 0 32px rgba(0,0,0,.2);--tw-shadow-colored:-8px 0 32px var(--tw-shadow-color)}.jwi-shadow-\[-8px_0_32px_rgba\(0\,0\,0\,0\.2\)\],.jwi-shadow-\[0_-12px_36px_rgba\(0\,0\,0\,0\.22\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_-12px_36px_rgba\(0\,0\,0\,0\.22\)\]{--tw-shadow:0 -12px 36px rgba(0,0,0,.22);--tw-shadow-colored:0 -12px 36px var(--tw-shadow-color)}.jwi-shadow-\[0_-6px_20px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow:0 -6px 20px rgba(0,0,0,.12);--tw-shadow-colored:0 -6px 20px var(--tw-shadow-color)}.jwi-shadow-\[0_-6px_20px_rgba\(0\,0\,0\,0\.12\)\],.jwi-shadow-\[0_1px_2px_rgba\(17\,17\,17\,0\.03\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_1px_2px_rgba\(17\,17\,17\,0\.03\)\]{--tw-shadow:0 1px 2px hsla(0,0%,7%,.03);--tw-shadow-colored:0 1px 2px var(--tw-shadow-color)}.jwi-shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.25\)\]{--tw-shadow:0 20px 60px rgba(0,0,0,.25);--tw-shadow-colored:0 20px 60px var(--tw-shadow-color)}.jwi-shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.25\)\],.jwi-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.12\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.12\)\]{--tw-shadow:0 2px 8px rgba(0,0,0,.12);--tw-shadow-colored:0 2px 8px var(--tw-shadow-color)}.jwi-shadow-\[0_6px_16px_rgba\(22\,51\,15\,0\.08\)\]{--tw-shadow:0 6px 16px rgba(22,51,15,.08);--tw-shadow-colored:0 6px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-shadow-\[0_8px_24px_rgba\(17\,17\,17\,0\.08\)\]{--tw-shadow:0 8px 24px hsla(0,0%,7%,.08);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.jwi-outline-none{outline:2px solid transparent;outline-offset:2px}.jwi-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.jwi-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.jwi-duration-300{transition-duration:.3s}.jwi-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\:jwi-text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:jwi-text-\[13px\]::placeholder{font-size:13px}.placeholder\:jwi-text-\[\#767676\]::-moz-placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.placeholder\:jwi-text-\[\#767676\]::placeholder{--tw-text-opacity:1;color:rgb(118 118 118/var(--tw-text-opacity,1))}.hover\:jwi-bg-\[\#d92817\]:hover{--tw-bg-opacity:1;background-color:rgb(217 40 23/var(--tw-bg-opacity,1))}.hover\:jwi-bg-\[\#f7f5f0\]:hover{--tw-bg-opacity:1;background-color:rgb(247 245 240/var(--tw-bg-opacity,1))}.hover\:jwi-text-\[\#444444\]:hover{--tw-text-opacity:1;color:rgb(68 68 68/var(--tw-text-opacity,1))}.hover\:jwi-underline:hover{text-decoration-line:underline}.focus\:jwi-border-\[\#111111\]:focus{--tw-border-opacity:1;border-color:rgb(17 17 17/var(--tw-border-opacity,1))}.disabled\:jwi-cursor-wait:disabled{cursor:wait}.disabled\:hover\:jwi-bg-\[\#ef2b18\]:hover:disabled{--tw-bg-opacity:1;background-color:rgb(239 43 24/var(--tw-bg-opacity,1))}@media (min-width:768px){.md\:jwi-h-full{height:100%}.md\:jwi-w-\[48\%\]{width:48%}.md\:jwi-w-\[52\%\]{width:52%}.md\:jwi-max-w-\[220px\]{max-width:220px}.md\:jwi-flex-row{flex-direction:row}.md\:jwi-items-center{align-items:center}.md\:jwi-justify-between{justify-content:space-between}.md\:jwi-border-r{border-right-width:1px}.md\:jwi-border-\[\#ece8df\]{--tw-border-opacity:1;border-color:rgb(236 232 223/var(--tw-border-opacity,1))}.md\:jwi-text-\[14px\]{font-size:14px}.md\:jwi-text-base{font-size:1rem;line-height:1.5rem}.md\:jwi-text-sm{font-size:.875rem;line-height:1.25rem}.md\:placeholder\:jwi-text-\[14px\]::-moz-placeholder{font-size:14px}.md\:placeholder\:jwi-text-\[14px\]::placeholder{font-size:14px}}
|
package/dist/JotulWidget.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ import type { JotulWidgetProps } from './types';
|
|
|
4
4
|
export { DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, } from './i18n/widgetStrings';
|
|
5
5
|
export type { JotulWidgetLocale } from './i18n/widgetStrings';
|
|
6
6
|
export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
|
|
7
|
-
export type { CheckWidgetAuthorizationOptions, DealerSearchResponse, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetProps, JotulWidgetScope,
|
|
8
|
-
export declare function JotulWidget({ type, endpoint, className, productName, locale: localeProp,
|
|
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;
|
package/dist/JotulWidget.js
CHANGED
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import './JotulWidget.css';
|
|
4
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, cloneElement, isValidElement } from 'react';
|
|
5
5
|
import { FinderSearchRowSkeleton } from './components/FinderSearchRowSkeleton';
|
|
6
6
|
import { DealerCardSkeleton } from './components/DealerCardSkeleton';
|
|
7
|
-
import { ProductPageWidget } from './widgets/ProductPageWidget';
|
|
8
|
-
import { FindDealerDrawerWidget } from './components/FindDealerDrawerWidget';
|
|
9
|
-
import { ButtonSpinner } from './icons/ButtonSpinner';
|
|
10
7
|
import { DEFAULT_WIDGET_LOCALE_TAG, resolveWidgetUiLocale, WIDGET_STRINGS, } from './i18n/widgetStrings';
|
|
11
8
|
import { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, } from './api';
|
|
12
9
|
import { createInquiryFormValues, getSafeWidgetErrorMessage, isDealerInSearchResult, isValidEmail, isWidgetType, renderReadyState, } from './utils';
|
|
13
|
-
|
|
10
|
+
function ButtonWrapper({ children, onClick, }) {
|
|
11
|
+
return (_jsx("span", { role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
|
|
12
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
13
|
+
e.preventDefault();
|
|
14
|
+
onClick();
|
|
15
|
+
}
|
|
16
|
+
}, style: { cursor: 'pointer', display: 'inline-block' }, children: children }));
|
|
17
|
+
}
|
|
14
18
|
export { DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, } from './i18n/widgetStrings';
|
|
15
19
|
export { checkWidgetAuthorization, searchLocationSuggestions, searchDealersByCoordinates, searchDealersByPostalCode, };
|
|
16
20
|
const GEO_PERMISSION_DENIED = 1;
|
|
@@ -28,20 +32,31 @@ const MARKET_FALLBACK_CENTER = {
|
|
|
28
32
|
FI: [60.1699, 24.9384],
|
|
29
33
|
DE: [52.52, 13.405],
|
|
30
34
|
};
|
|
31
|
-
export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp,
|
|
32
|
-
const
|
|
35
|
+
export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, productName, locale: localeProp, markets: marketsProp, scope, brands, campaignSlug, styling, button, buttonLoading, widgetRef, }) {
|
|
36
|
+
const apiMarkets = useMemo(() => {
|
|
37
|
+
if (marketsProp == null)
|
|
38
|
+
return undefined;
|
|
39
|
+
if (!Array.isArray(marketsProp))
|
|
40
|
+
return undefined;
|
|
41
|
+
const valid = marketsProp
|
|
42
|
+
.map((m) => m?.trim().toUpperCase())
|
|
43
|
+
.filter((m) => m.length === 2 && /^[A-Z]{2}$/.test(m));
|
|
44
|
+
return valid.length > 0 ? valid : undefined;
|
|
45
|
+
}, [marketsProp]);
|
|
46
|
+
const firstMarket = apiMarkets?.[0];
|
|
47
|
+
const resolvedUiLocale = useMemo(() => resolveWidgetUiLocale(localeProp, firstMarket), [localeProp, firstMarket]);
|
|
33
48
|
const t = WIDGET_STRINGS[resolvedUiLocale];
|
|
34
49
|
const apiLocaleTag = useMemo(() => (localeProp?.trim() ? localeProp.trim() : DEFAULT_WIDGET_LOCALE_TAG), [localeProp]);
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
50
|
+
const defaultButtonLoading = useMemo(() => {
|
|
51
|
+
if (isValidElement(button)) {
|
|
52
|
+
return cloneElement(button, {
|
|
53
|
+
disabled: true,
|
|
54
|
+
'aria-disabled': true,
|
|
55
|
+
children: t.loading,
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
return (_jsxs("span", { className: "jwi-inline-flex jwi-items-center jwi-gap-2 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: [_jsx("span", { className: "jwi-inline-block jwi-h-4 jwi-w-4 jwi-animate-spin jwi-rounded-full jwi-border-2 jwi-border-[#d8d2c7] jwi-border-t-[#111111]" }), t.loading] }));
|
|
59
|
+
}, [button, t.loading]);
|
|
45
60
|
const [auth, setAuth] = useState(null);
|
|
46
61
|
const [isLoading, setIsLoading] = useState(false);
|
|
47
62
|
const [searchResult, setSearchResult] = useState(null);
|
|
@@ -59,16 +74,19 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
59
74
|
const [inquiryValues, setInquiryValues] = useState(null);
|
|
60
75
|
const [inquiryError, setInquiryError] = useState(null);
|
|
61
76
|
const [isInquirySubmitted, setIsInquirySubmitted] = useState(false);
|
|
77
|
+
const [FindDealerDrawerWidgetComp, setFindDealerDrawerWidgetComp] = useState(null);
|
|
78
|
+
const [ProductPageWidgetComp, setProductPageWidgetComp] = useState(null);
|
|
79
|
+
const [isComponentLoading, setIsComponentLoading] = useState(false);
|
|
62
80
|
const autocompleteCacheRef = useRef(new Map());
|
|
63
81
|
const productPageCampaignSlug = type === 'productPage' ? campaignSlug : undefined;
|
|
64
82
|
const dealerSearchOptions = useMemo(() => ({
|
|
65
83
|
endpoint,
|
|
66
84
|
locale: apiLocaleTag,
|
|
67
|
-
|
|
85
|
+
markets: apiMarkets,
|
|
68
86
|
scope,
|
|
69
87
|
brands,
|
|
70
88
|
campaignSlug: productPageCampaignSlug,
|
|
71
|
-
}), [apiLocaleTag,
|
|
89
|
+
}), [apiLocaleTag, apiMarkets, brands, endpoint, productPageCampaignSlug, scope]);
|
|
72
90
|
const runDealerSearchByCoordinates = useCallback(async (latitude, longitude) => {
|
|
73
91
|
setLocationError(null);
|
|
74
92
|
setIsSearching(true);
|
|
@@ -83,10 +101,10 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
83
101
|
}
|
|
84
102
|
}, [dealerSearchOptions, scope]);
|
|
85
103
|
const runFallbackDealerSearch = useCallback(() => {
|
|
86
|
-
const fallbackCenter = (
|
|
104
|
+
const fallbackCenter = (firstMarket != null ? MARKET_FALLBACK_CENTER[firstMarket] : undefined) ??
|
|
87
105
|
MARKET_FALLBACK_CENTER.NO;
|
|
88
106
|
return runDealerSearchByCoordinates(fallbackCenter[0], fallbackCenter[1]);
|
|
89
|
-
}, [
|
|
107
|
+
}, [firstMarket, runDealerSearchByCoordinates]);
|
|
90
108
|
const runLocationSearch = useCallback(() => {
|
|
91
109
|
const messages = WIDGET_STRINGS[resolvedUiLocale];
|
|
92
110
|
setShouldAutoLocateAfterAuth(false);
|
|
@@ -130,7 +148,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
130
148
|
setLocationSuggestions([]);
|
|
131
149
|
return;
|
|
132
150
|
}
|
|
133
|
-
const cacheKey = `${apiLocaleTag}|${
|
|
151
|
+
const cacheKey = `${apiLocaleTag}|${firstMarket ?? ''}|${productPageCampaignSlug ?? ''}|${query.toLowerCase()}`;
|
|
134
152
|
const cached = autocompleteCacheRef.current.get(cacheKey);
|
|
135
153
|
if (cached != null) {
|
|
136
154
|
setLocationSuggestions(cached);
|
|
@@ -151,7 +169,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
151
169
|
cancelled = true;
|
|
152
170
|
clearTimeout(timer);
|
|
153
171
|
};
|
|
154
|
-
}, [apiLocaleTag,
|
|
172
|
+
}, [apiLocaleTag, firstMarket, productPageCampaignSlug, dealerSearchOptions, locationQuery]);
|
|
155
173
|
useEffect(() => {
|
|
156
174
|
if ((type === 'productPage' || type === 'findDealerDrawer') && !isOpen)
|
|
157
175
|
return;
|
|
@@ -193,6 +211,33 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
193
211
|
return 'typeReady';
|
|
194
212
|
}, [type]);
|
|
195
213
|
const widgetType = isWidgetType(type) ? type : undefined;
|
|
214
|
+
useEffect(() => {
|
|
215
|
+
if (!isOpen)
|
|
216
|
+
return;
|
|
217
|
+
const needsFindDealer = widgetType === 'findDealerDrawer' && FindDealerDrawerWidgetComp == null;
|
|
218
|
+
const needsProductPage = widgetType === 'productPage' && ProductPageWidgetComp == null;
|
|
219
|
+
if (!needsFindDealer && !needsProductPage)
|
|
220
|
+
return;
|
|
221
|
+
setIsComponentLoading(true);
|
|
222
|
+
const tasks = [];
|
|
223
|
+
if (needsFindDealer) {
|
|
224
|
+
tasks.push(import('./components/FindDealerDrawerWidget')
|
|
225
|
+
.then((m) => {
|
|
226
|
+
setFindDealerDrawerWidgetComp(() => m.FindDealerDrawerWidget);
|
|
227
|
+
})
|
|
228
|
+
.catch(() => { }));
|
|
229
|
+
}
|
|
230
|
+
if (needsProductPage) {
|
|
231
|
+
tasks.push(import('./components/ProductPageWidget')
|
|
232
|
+
.then((m) => {
|
|
233
|
+
setProductPageWidgetComp(() => m.ProductPageWidget);
|
|
234
|
+
})
|
|
235
|
+
.catch(() => { }));
|
|
236
|
+
}
|
|
237
|
+
Promise.all(tasks).finally(() => {
|
|
238
|
+
setIsComponentLoading(false);
|
|
239
|
+
});
|
|
240
|
+
}, [isOpen, widgetType, FindDealerDrawerWidgetComp, ProductPageWidgetComp]);
|
|
196
241
|
const openProductPageWidget = useCallback(() => {
|
|
197
242
|
setLocationError(null);
|
|
198
243
|
setSearchResult(null);
|
|
@@ -216,43 +261,26 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
216
261
|
setIsSearchingSuggestions(false);
|
|
217
262
|
setMapSearchResult(null);
|
|
218
263
|
}, []);
|
|
264
|
+
useImperativeHandle(widgetRef, () => ({
|
|
265
|
+
open: openProductPageWidget,
|
|
266
|
+
close: closeDealerWidget,
|
|
267
|
+
isOpen,
|
|
268
|
+
}), [openProductPageWidget, closeDealerWidget, isOpen]);
|
|
219
269
|
const shellClass = 'jwi-box-border jwi-flex jwi-w-[540px] jwi-max-w-full jwi-flex-col jwi-font-sans jwi-text-[#111111]';
|
|
220
270
|
const rootClass = className != null && className !== '' ? `${shellClass} ${className}` : shellClass;
|
|
221
271
|
if (typeState !== 'typeReady') {
|
|
222
272
|
return _jsx("div", { className: rootClass, children: t.invalidWidgetTypeError });
|
|
223
273
|
}
|
|
224
|
-
const resolvedTrigger = trigger ?? productPageTrigger ?? findDealerDrawerTrigger;
|
|
225
|
-
const resolvedTriggerNode = typeof resolvedTrigger === 'function'
|
|
226
|
-
? resolvedTrigger({
|
|
227
|
-
onOpen: openProductPageWidget,
|
|
228
|
-
isLoading,
|
|
229
|
-
label: t.findDealer,
|
|
230
|
-
className: heroPrimaryButton.className,
|
|
231
|
-
style: heroPrimaryButton.style,
|
|
232
|
-
})
|
|
233
|
-
: resolvedTrigger;
|
|
234
|
-
const renderTrigger = (alwaysClickable = false) => {
|
|
235
|
-
if (resolvedTriggerNode == null) {
|
|
236
|
-
return (_jsx("button", { type: "button", onClick: openProductPageWidget, className: heroPrimaryButton.className, style: heroPrimaryButton.style, children: t.findDealer }));
|
|
237
|
-
}
|
|
238
|
-
if (typeof resolvedTrigger === 'function' && !alwaysClickable) {
|
|
239
|
-
return resolvedTriggerNode;
|
|
240
|
-
}
|
|
241
|
-
return (_jsx("div", { role: "button", tabIndex: 0, onClick: openProductPageWidget, onKeyDown: (event) => {
|
|
242
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
243
|
-
event.preventDefault();
|
|
244
|
-
openProductPageWidget();
|
|
245
|
-
}
|
|
246
|
-
}, children: resolvedTriggerNode }));
|
|
247
|
-
};
|
|
248
274
|
if (widgetType === 'productPage' && !isOpen) {
|
|
249
|
-
|
|
275
|
+
if (button == null)
|
|
276
|
+
return null;
|
|
277
|
+
return (_jsx("div", { className: rootClass, children: _jsx(ButtonWrapper, { onClick: openProductPageWidget, children: button }) }));
|
|
250
278
|
}
|
|
251
279
|
const productPageAuthPending = widgetType === 'productPage' &&
|
|
252
280
|
isOpen &&
|
|
253
281
|
(auth === null || isLoading);
|
|
254
282
|
if (productPageAuthPending) {
|
|
255
|
-
return (_jsx("div", { className: rootClass, children:
|
|
283
|
+
return (_jsx("div", { className: rootClass, children: buttonLoading ?? defaultButtonLoading }));
|
|
256
284
|
}
|
|
257
285
|
const waitingForAuth = auth === null &&
|
|
258
286
|
!((widgetType === 'productPage' || widgetType === 'findDealerDrawer') &&
|
|
@@ -270,7 +298,7 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
270
298
|
return _jsx("div", { className: rootClass, children: getSafeWidgetErrorMessage(auth?.error, t) });
|
|
271
299
|
}
|
|
272
300
|
if (widgetType === 'productPage') {
|
|
273
|
-
return (_jsx("div", { className: rootClass, children: _jsx(
|
|
301
|
+
return (_jsx("div", { className: rootClass, children: ProductPageWidgetComp != null ? (_jsx(ProductPageWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
|
|
274
302
|
? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
|
|
275
303
|
: searchResult, mapSearchResult: mapSearchResult?.ok === false
|
|
276
304
|
? { ...mapSearchResult, error: getSafeWidgetErrorMessage(mapSearchResult.error, t) }
|
|
@@ -339,18 +367,24 @@ export function JotulWidget({ type, endpoint = '/api/jotul/widget', className, p
|
|
|
339
367
|
if (isDealerInSearchResult(dealer.dealerName, searchResult, t.unknownDealer))
|
|
340
368
|
return;
|
|
341
369
|
void runDealerSearchByCoordinates(dealer.latitude, dealer.longitude);
|
|
342
|
-
}, onClosePopup: closeDealerWidget }) }));
|
|
370
|
+
}, onClosePopup: closeDealerWidget })) : null }));
|
|
343
371
|
}
|
|
344
372
|
if (widgetType === 'findDealerDrawer') {
|
|
345
373
|
const drawerLoading = isOpen &&
|
|
346
374
|
(auth === null ||
|
|
347
375
|
isLoading ||
|
|
376
|
+
isComponentLoading ||
|
|
348
377
|
(isSearching && searchResult == null && mapSearchResult == null));
|
|
349
|
-
return (_jsxs("div", { className: rootClass, children: [
|
|
378
|
+
return (_jsxs("div", { className: rootClass, children: [button != null &&
|
|
379
|
+
(drawerLoading ? (buttonLoading ?? defaultButtonLoading) : (_jsx(ButtonWrapper, { onClick: openProductPageWidget, children: button }))), _jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[2147483647] jwi-bg-black/35", style: {
|
|
380
|
+
opacity: isOpen ? 1 : 0,
|
|
381
|
+
pointerEvents: isOpen ? 'auto' : 'none',
|
|
382
|
+
transition: 'opacity 300ms ease-out',
|
|
383
|
+
}, onClick: closeDealerWidget }), _jsx("div", { className: "jwi-fixed jwi-right-0 jwi-top-0 jwi-z-[2147483647] jwi-h-full jwi-w-[min(100vw,1200px)] jwi-bg-white jwi-shadow-[-8px_0_32px_rgba(0,0,0,0.2)]", style: {
|
|
350
384
|
transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
|
|
351
385
|
transition: 'transform 300ms ease-out',
|
|
352
386
|
willChange: 'transform',
|
|
353
|
-
}, "aria-hidden": !isOpen, children: drawerLoading ? (_jsxs("div", { className: "jwi-flex jwi-h-full jwi-w-full jwi-bg-white", children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-1/2 jwi-flex-col jwi-overflow-hidden", children: _jsxs("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: [_jsx("div", { className: "jwi-h-12 jwi-w-full jwi-
|
|
387
|
+
}, "aria-hidden": !isOpen, children: drawerLoading || FindDealerDrawerWidgetComp == null ? (_jsxs("div", { className: "jwi-flex jwi-h-full jwi-w-full jwi-bg-white", children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-1/2 jwi-flex-col jwi-overflow-hidden", children: _jsxs("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: [_jsx("div", { className: "jwi-h-12 jwi-w-full jwi-rounded-[10px] jwi-bg-[#ece8df] jwi-transition-opacity jwi-duration-300 jwi-ease-out" }), _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-rounded-full jwi-bg-[#ece8df] jwi-transition-opacity jwi-duration-300 jwi-ease-out" }), _jsxs("div", { className: "jwi-flex jwi-flex-col jwi-gap-4", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] }) }), _jsx("div", { className: "jwi-h-full jwi-w-1/2 jwi-bg-[#e8eef1]" })] })) : (_jsx(FindDealerDrawerWidgetComp, { t: t, buttonStyling: styling?.button, borderStyling: styling?.border, markets: apiMarkets, scope: scope, isSearching: isSearching, locationError: locationError, searchResult: searchResult?.ok === false
|
|
354
388
|
? { ...searchResult, error: getSafeWidgetErrorMessage(searchResult.error, t) }
|
|
355
389
|
: searchResult, mapSearchResult: mapSearchResult?.ok === false
|
|
356
390
|
? { ...mapSearchResult, error: getSafeWidgetErrorMessage(mapSearchResult.error, t) }
|
package/dist/api.js
CHANGED
|
@@ -6,11 +6,15 @@ function appendLocaleAndMarket(params, options) {
|
|
|
6
6
|
? options.locale.trim()
|
|
7
7
|
: DEFAULT_WIDGET_LOCALE_TAG;
|
|
8
8
|
params.set('locale', locale);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
if (Array.isArray(options?.markets)) {
|
|
10
|
+
for (const m of options.markets) {
|
|
11
|
+
const trimmed = m?.trim();
|
|
12
|
+
if (!trimmed)
|
|
13
|
+
continue;
|
|
14
|
+
const upper = trimmed.toUpperCase();
|
|
15
|
+
if (/^[A-Z]{2}$/.test(upper)) {
|
|
16
|
+
params.append('market', upper);
|
|
17
|
+
}
|
|
14
18
|
}
|
|
15
19
|
}
|
|
16
20
|
if (options?.scope === 'ildstedet') {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { R10 } from '../constants';
|
|
3
|
-
/** Matches a dealer card: title + badge, two lines, CTA + phone row. */
|
|
4
3
|
export function DealerCardSkeleton() {
|
|
5
|
-
return (_jsxs("div", { className: `jwi-w-full jwi-animate-
|
|
4
|
+
return (_jsxs("div", { className: `jwi-w-full jwi-animate-[pulse_2s_ease-in-out_infinite] ${R10} jwi-border jwi-border-[#e6e1d7] jwi-bg-white jwi-p-4 jwi-shadow-[0_1px_2px_rgba(17,17,17,0.03)] jwi-transition-opacity jwi-duration-300 jwi-ease-out`, children: [_jsxs("div", { className: "jwi-flex jwi-items-start jwi-justify-between jwi-gap-3", children: [_jsx("div", { className: "jwi-h-5 jwi-max-w-[70%] jwi-flex-1 jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-6 jwi-w-14 jwi-shrink-0 jwi-rounded-full jwi-bg-[#ece8df]" })] }), _jsxs("div", { className: "jwi-mt-4 jwi-space-y-1.5", children: [_jsx("div", { className: "jwi-h-4 jwi-w-full jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-4 jwi-w-2/3 jwi-rounded-full jwi-bg-[#ece8df]" })] }), _jsxs("div", { className: "jwi-mt-4 jwi-flex jwi-flex-col jwi-gap-3 md:jwi-flex-row md:jwi-items-center md:jwi-justify-between", children: [_jsx("div", { className: `jwi-h-12 jwi-w-full jwi-max-w-[220px] ${R10} jwi-bg-[#ece8df]` }), _jsxs("div", { className: "jwi-flex jwi-min-w-0 jwi-items-center jwi-gap-2", children: [_jsx("div", { className: "jwi-h-3.5 jwi-w-3.5 jwi-shrink-0 jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-4 jwi-w-24 jwi-rounded-full jwi-bg-[#ece8df]" })] })] })] }));
|
|
6
5
|
}
|
|
@@ -2,11 +2,11 @@ import 'leaflet/dist/leaflet.css';
|
|
|
2
2
|
import 'leaflet.markercluster/dist/MarkerCluster.css';
|
|
3
3
|
import type { WidgetStrings } from '../i18n/widgetStrings';
|
|
4
4
|
import type { DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetScope, LocationSuggestion } from '../types';
|
|
5
|
-
type FindDealerDrawerWidgetProps = {
|
|
5
|
+
export type FindDealerDrawerWidgetProps = {
|
|
6
6
|
t: WidgetStrings;
|
|
7
7
|
buttonStyling?: JotulWidgetButtonStyling;
|
|
8
8
|
borderStyling?: JotulWidgetBorderStyling;
|
|
9
|
-
|
|
9
|
+
markets?: string[];
|
|
10
10
|
scope?: JotulWidgetScope;
|
|
11
11
|
isSearching: boolean;
|
|
12
12
|
locationError: string | null;
|
|
@@ -36,5 +36,4 @@ type FindDealerDrawerWidgetProps = {
|
|
|
36
36
|
}) => void;
|
|
37
37
|
onClose: () => void;
|
|
38
38
|
};
|
|
39
|
-
export declare function FindDealerDrawerWidget({ t, buttonStyling, borderStyling,
|
|
40
|
-
export {};
|
|
39
|
+
export declare function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }: FindDealerDrawerWidgetProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
3
|
import 'leaflet/dist/leaflet.css';
|
|
3
4
|
import 'leaflet.markercluster/dist/MarkerCluster.css';
|
|
@@ -57,10 +58,11 @@ function getDealerMapPoint(dealer) {
|
|
|
57
58
|
function toAssetSrc(value) {
|
|
58
59
|
return typeof value === 'string' ? value : value.src;
|
|
59
60
|
}
|
|
60
|
-
function createDealerPinIcon(isExclusive, active,
|
|
61
|
+
function createDealerPinIcon(isExclusive, active, markets) {
|
|
61
62
|
const size = active ? 48 : 42;
|
|
62
63
|
const width = Math.round((16 / 20) * size);
|
|
63
|
-
const
|
|
64
|
+
const isNorway = markets?.includes('NO') ?? false;
|
|
65
|
+
const exclusivePin = isNorway ? dealerPinIldstedet : dealerPinExclusive;
|
|
64
66
|
const pinUrl = isExclusive ? toAssetSrc(exclusivePin) : toAssetSrc(dealerPin);
|
|
65
67
|
return icon({
|
|
66
68
|
iconUrl: pinUrl,
|
|
@@ -101,7 +103,7 @@ function FocusActiveDealer({ point }) {
|
|
|
101
103
|
}, [map, point]);
|
|
102
104
|
return null;
|
|
103
105
|
}
|
|
104
|
-
function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, clusterBrandFill, clusterBrandLabel,
|
|
106
|
+
function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, clusterBrandFill, clusterBrandLabel, markets, activeDealerName, onSelectDealer, onUnavailable, }) {
|
|
105
107
|
const map = useMap();
|
|
106
108
|
const markersByDealerRef = useRef(new Map());
|
|
107
109
|
const pointsRef = useRef(points);
|
|
@@ -117,7 +119,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
|
|
|
117
119
|
for (const p of pointsRef.current) {
|
|
118
120
|
const marker = markersByDealerRef.current.get(p.dealerName);
|
|
119
121
|
if (marker != null) {
|
|
120
|
-
marker.setIcon(createDealerPinIcon(p.isExclusive, active === p.dealerName,
|
|
122
|
+
marker.setIcon(createDealerPinIcon(p.isExclusive, active === p.dealerName, markets));
|
|
121
123
|
}
|
|
122
124
|
}
|
|
123
125
|
}
|
|
@@ -147,7 +149,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
|
|
|
147
149
|
}
|
|
148
150
|
function makeMarker(point) {
|
|
149
151
|
const marker = leaf.marker([point.latitude, point.longitude], {
|
|
150
|
-
icon: createDealerPinIcon(point.isExclusive, activeNameRef.current === point.dealerName,
|
|
152
|
+
icon: createDealerPinIcon(point.isExclusive, activeNameRef.current === point.dealerName, markets),
|
|
151
153
|
});
|
|
152
154
|
marker.on('click', () => {
|
|
153
155
|
onSelectRef.current?.({
|
|
@@ -222,7 +224,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
|
|
|
222
224
|
}, [map, pointsBoundsKey, clusterThemeKey]);
|
|
223
225
|
return null;
|
|
224
226
|
}
|
|
225
|
-
export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling,
|
|
227
|
+
export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClose, }) {
|
|
226
228
|
const rawDealers = (searchResult?.dealers ?? EMPTY_DEALERS);
|
|
227
229
|
const dealers = useMemo(() => (scope === 'ildstedet' ? rawDealers.filter(isExclusiveDealer) : rawDealers), [rawDealers, scope]);
|
|
228
230
|
const rawMapDealers = (mapSearchResult?.dealers ?? rawDealers);
|
|
@@ -288,13 +290,13 @@ export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market
|
|
|
288
290
|
const successPanel = (_jsx("div", { className: "jwi-flex jwi-w-full jwi-items-center jwi-justify-center jwi-bg-white jwi-p-2", children: _jsxs("div", { className: "jwi-flex jwi-w-full jwi-max-w-[520px] jwi-flex-col jwi-items-center jwi-gap-4 jwi-rounded-[10px] jwi-bg-white jwi-p-8 jwi-text-center", children: [_jsx("div", { className: "jwi-text-2xl jwi-font-semibold jwi-text-[#111111]", children: t.inquiryThankYouTitle }), _jsx("div", { className: "jwi-text-sm jwi-leading-6 jwi-text-[#333333]", children: t.inquirySentSuccess }), _jsx("button", { type: "button", onClick: onClose, className: "jwi-mt-2 jwi-inline-flex jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-md jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-5 jwi-py-2.5 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: t.goBack })] }) }));
|
|
289
291
|
const canShowMore = visibleDealerCount < dealers.length;
|
|
290
292
|
const showMoreButton = canShowMore ? (_jsx("button", { type: "button", onClick: () => setVisibleDealerCount((count) => Math.min(count + 10, dealers.length)), className: "jwi-mt-3 jwi-inline-flex jwi-w-full jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-md jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-3 jwi-py-2 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: "Show more" })) : null;
|
|
291
|
-
const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 6, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_MINIMAL_TILE_URL, maxZoom: 19 }), _jsx(FitMapBounds, { boundsKey: mapBoundsKey, points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), _jsx(ClusteredMapMarkers, { points: mapPoints, pointsBoundsKey: mapBoundsKey, clusterThemeKey: mapClusterTheme.key, clusterBrandFill: mapClusterTheme.fill, clusterBrandLabel: mapClusterTheme.label,
|
|
293
|
+
const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 6, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_MINIMAL_TILE_URL, maxZoom: 19 }), _jsx(FitMapBounds, { boundsKey: mapBoundsKey, points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), _jsx(ClusteredMapMarkers, { points: mapPoints, pointsBoundsKey: mapBoundsKey, clusterThemeKey: mapClusterTheme.key, clusterBrandFill: mapClusterTheme.fill, clusterBrandLabel: mapClusterTheme.label, markets: markets, activeDealerName: activeDealerName, onUnavailable: () => setClusterUnavailable(true), onSelectDealer: (dealer) => {
|
|
292
294
|
setActiveDealerName(dealer.dealerName);
|
|
293
295
|
onMapDealerSelect?.(dealer);
|
|
294
296
|
} }), clusterUnavailable &&
|
|
295
297
|
mapPoints.map((point) => {
|
|
296
298
|
const isActive = activeDealerName === point.dealerName;
|
|
297
|
-
return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive,
|
|
299
|
+
return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive, markets), eventHandlers: {
|
|
298
300
|
click: () => {
|
|
299
301
|
setActiveDealerName(point.dealerName);
|
|
300
302
|
onMapDealerSelect?.({
|
|
@@ -305,7 +307,7 @@ export function FindDealerDrawerWidget({ t, buttonStyling, borderStyling, market
|
|
|
305
307
|
},
|
|
306
308
|
}, children: _jsx(Tooltip, { children: point.dealerName }) }, `${point.dealerName}-${point.latitude}-${point.longitude}`));
|
|
307
309
|
})] }));
|
|
308
|
-
const leftContent = (_jsx(_Fragment, { children: showInquirySuccessScreen ? (successPanel) : inquiryFormOpen ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-
|
|
310
|
+
const leftContent = (_jsx(_Fragment, { children: showInquirySuccessScreen ? (successPanel) : inquiryFormOpen ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isSearching && (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-[pulse_2s_ease-in-out_infinite] jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })), searchResult?.ok && !isSearching && (_jsxs(_Fragment, { children: [_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: !isMobileViewport, autoScrollToActive: true, enableInternalScroll: !isMobileViewport, maxHeightClassName: "jwi-max-h-none", t: t, buttonStyling: buttonStyling, borderStyling: borderStyling, markets: markets, onStartInquiry: onStartInquiry, onSelectDealer: setActiveDealerName }), showMoreButton] }))] })) }));
|
|
309
311
|
if (isMobileViewport) {
|
|
310
312
|
return (_jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col jwi-bg-white", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: onClose, className: "jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111]", "aria-label": t.closeMap, children: "\u00D7" }) }), _jsx("div", { className: "jwi-min-h-0 jwi-flex-1 jwi-overflow-y-auto jwi-bg-white jwi-p-4 jwi-pb-24", children: leftContent }), !inquiryFormOpen && !showInquirySuccessScreen && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(true), className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-20 jwi-flex jwi-h-14 jwi-items-center jwi-justify-center jwi-gap-2 jwi-rounded-t-[16px] jwi-border-t jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111] jwi-shadow-[0_-6px_20px_rgba(0,0,0,0.12)]", children: [t.openMap, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(-90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] })), mobileMapExpanded && !inquiryFormOpen && !showInquirySuccessScreen && (_jsxs("div", { className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-30 jwi-h-[78vh] jwi-overflow-hidden jwi-rounded-t-[16px] jwi-bg-white jwi-shadow-[0_-12px_36px_rgba(0,0,0,0.22)]", children: [_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(false), className: "jwi-flex jwi-h-12 jwi-w-full jwi-items-center jwi-justify-center jwi-gap-2 jwi-border-b jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111]", children: [t.closeMapMobile, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] }), _jsx("div", { className: "jwi-h-[calc(78vh-48px)] jwi-w-full", children: mapCanvas })] }))] }));
|
|
311
313
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { R10 } from '../constants';
|
|
3
|
-
/** Matches the finder chrome: bordered box, pin + hint + Find in one row. */
|
|
4
3
|
export function FinderSearchRowSkeleton() {
|
|
5
|
-
return (_jsx("div", { className: `jwi-w-full jwi-overflow-hidden ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white`, children: _jsxs("div", { className: "jwi-flex jwi-w-full jwi-min-w-0 jwi-flex-row jwi-items-stretch", children: [_jsxs("div", { className: "jwi-flex jwi-min-w-0 jwi-flex-1 jwi-items-center jwi-gap-3 jwi-py-4 jwi-pl-5 jwi-pr-3", children: [_jsx("div", { className: "jwi-h-4 jwi-w-4 jwi-shrink-0 jwi-animate-
|
|
4
|
+
return (_jsx("div", { className: `jwi-w-full jwi-overflow-hidden ${R10} jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-transition-opacity jwi-duration-300 jwi-ease-out`, children: _jsxs("div", { className: "jwi-flex jwi-w-full jwi-min-w-0 jwi-flex-row jwi-items-stretch", children: [_jsxs("div", { className: "jwi-flex jwi-min-w-0 jwi-flex-1 jwi-items-center jwi-gap-3 jwi-py-4 jwi-pl-5 jwi-pr-3", children: [_jsx("div", { className: "jwi-h-4 jwi-w-4 jwi-shrink-0 jwi-animate-[pulse_2s_ease-in-out_infinite] jwi-rounded-full jwi-bg-[#ece8df]" }), _jsx("div", { className: "jwi-h-5 jwi-min-w-0 jwi-flex-1 jwi-animate-[pulse_2s_ease-in-out_infinite] jwi-rounded-full jwi-bg-[#ece8df]" })] }), _jsx("div", { className: "jwi-w-28 jwi-shrink-0 jwi-self-stretch jwi-animate-[pulse_2s_ease-in-out_infinite] jwi-bg-[#ece8df]" })] }) }));
|
|
6
5
|
}
|
|
@@ -2,11 +2,11 @@ import 'leaflet/dist/leaflet.css';
|
|
|
2
2
|
import 'leaflet.markercluster/dist/MarkerCluster.css';
|
|
3
3
|
import type { WidgetStrings } from '../i18n/widgetStrings';
|
|
4
4
|
import type { DealerSearchResponse, InquiryFormValues, JotulWidgetBorderStyling, JotulWidgetButtonStyling, JotulWidgetScope, LocationSuggestion } from '../types';
|
|
5
|
-
type ProductPageWidgetProps = {
|
|
5
|
+
export type ProductPageWidgetProps = {
|
|
6
6
|
t: WidgetStrings;
|
|
7
7
|
buttonStyling?: JotulWidgetButtonStyling;
|
|
8
8
|
borderStyling?: JotulWidgetBorderStyling;
|
|
9
|
-
|
|
9
|
+
markets?: string[];
|
|
10
10
|
scope?: JotulWidgetScope;
|
|
11
11
|
isSearching: boolean;
|
|
12
12
|
locationError: string | null;
|
|
@@ -36,5 +36,4 @@ type ProductPageWidgetProps = {
|
|
|
36
36
|
}) => void;
|
|
37
37
|
onClosePopup?: () => void;
|
|
38
38
|
};
|
|
39
|
-
export declare function ProductPageWidget({ t, buttonStyling, borderStyling,
|
|
40
|
-
export {};
|
|
39
|
+
export declare function ProductPageWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClosePopup, }: ProductPageWidgetProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
3
|
import 'leaflet/dist/leaflet.css';
|
|
3
4
|
import 'leaflet.markercluster/dist/MarkerCluster.css';
|
|
@@ -66,10 +67,11 @@ function getDealerMapPoint(dealer) {
|
|
|
66
67
|
function toAssetSrc(value) {
|
|
67
68
|
return typeof value === 'string' ? value : value.src;
|
|
68
69
|
}
|
|
69
|
-
function createDealerPinIcon(isExclusive, active,
|
|
70
|
+
function createDealerPinIcon(isExclusive, active, markets) {
|
|
70
71
|
const size = active ? 48 : 42;
|
|
71
72
|
const width = Math.round((16 / 20) * size);
|
|
72
|
-
const
|
|
73
|
+
const isNorway = markets?.includes('NO') ?? false;
|
|
74
|
+
const exclusivePin = isNorway ? dealerPinIldstedet : dealerPinExclusive;
|
|
73
75
|
const pinUrl = isExclusive ? toAssetSrc(exclusivePin) : toAssetSrc(dealerPin);
|
|
74
76
|
return icon({
|
|
75
77
|
iconUrl: pinUrl,
|
|
@@ -108,7 +110,7 @@ function FocusActiveDealer({ point }) {
|
|
|
108
110
|
}, [map, point]);
|
|
109
111
|
return null;
|
|
110
112
|
}
|
|
111
|
-
function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, clusterBrandFill, clusterBrandLabel,
|
|
113
|
+
function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, clusterBrandFill, clusterBrandLabel, markets, activeDealerName, onSelectDealer, onUnavailable, }) {
|
|
112
114
|
const map = useMap();
|
|
113
115
|
const markersByDealerRef = useRef(new Map());
|
|
114
116
|
const pointsRef = useRef(points);
|
|
@@ -124,7 +126,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
|
|
|
124
126
|
for (const p of pointsRef.current) {
|
|
125
127
|
const marker = markersByDealerRef.current.get(p.dealerName);
|
|
126
128
|
if (marker != null) {
|
|
127
|
-
marker.setIcon(createDealerPinIcon(p.isExclusive, active === p.dealerName,
|
|
129
|
+
marker.setIcon(createDealerPinIcon(p.isExclusive, active === p.dealerName, markets));
|
|
128
130
|
}
|
|
129
131
|
}
|
|
130
132
|
}
|
|
@@ -154,7 +156,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
|
|
|
154
156
|
}
|
|
155
157
|
function makeMarker(point) {
|
|
156
158
|
const marker = leaf.marker([point.latitude, point.longitude], {
|
|
157
|
-
icon: createDealerPinIcon(point.isExclusive, activeNameRef.current === point.dealerName,
|
|
159
|
+
icon: createDealerPinIcon(point.isExclusive, activeNameRef.current === point.dealerName, markets),
|
|
158
160
|
});
|
|
159
161
|
marker.on('click', () => {
|
|
160
162
|
onSelectRef.current?.({
|
|
@@ -229,7 +231,7 @@ function ClusteredMapMarkers({ points, pointsBoundsKey, clusterThemeKey, cluster
|
|
|
229
231
|
}, [map, pointsBoundsKey, clusterThemeKey]);
|
|
230
232
|
return null;
|
|
231
233
|
}
|
|
232
|
-
export function ProductPageWidget({ t, buttonStyling, borderStyling,
|
|
234
|
+
export function ProductPageWidget({ t, buttonStyling, borderStyling, markets, scope, isSearching, locationError, searchResult, mapSearchResult, inquiryValues, inquiryError, isInquirySubmitted, selectedDealerName, isManualSearchEnabled, query, suggestions, suggestionsOpen, isSuggestionsLoading, onQueryChange, onQuerySubmit, onSuggestionSelect, onDismissSuggestions, onInquiryClose, onInquirySubmit, onInquiryFieldChange, onStartInquiry, onMapDealerSelect, onClosePopup, }) {
|
|
233
235
|
const rawDealers = (searchResult?.dealers ?? EMPTY_DEALERS);
|
|
234
236
|
const dealers = useMemo(() => (scope === 'ildstedet' ? rawDealers.filter(isExclusiveDealer) : rawDealers), [rawDealers, scope]);
|
|
235
237
|
const rawMapDealers = (mapSearchResult?.dealers ?? rawDealers);
|
|
@@ -298,13 +300,13 @@ export function ProductPageWidget({ t, buttonStyling, borderStyling, market, sco
|
|
|
298
300
|
key: `${fill}\0${label}`,
|
|
299
301
|
};
|
|
300
302
|
}, [buttonStyling?.backgroundColor, buttonStyling?.textColor]);
|
|
301
|
-
const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 6, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_MINIMAL_TILE_URL, maxZoom: 19 }), _jsx(FitMapBounds, { boundsKey: mapBoundsKey, points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), _jsx(ClusteredMapMarkers, { points: mapPoints, pointsBoundsKey: mapBoundsKey, clusterThemeKey: mapClusterTheme.key, clusterBrandFill: mapClusterTheme.fill, clusterBrandLabel: mapClusterTheme.label,
|
|
303
|
+
const mapCanvas = (_jsxs(MapContainer, { center: defaultCenter ?? [59.9139, 10.7522], zoom: 6, className: "jwi-h-full jwi-w-full", zoomControl: true, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">OpenStreetMap</a> contributors \u00A9 <a href="https://carto.com/attributions" target="_blank" rel="noreferrer">CARTO</a>', url: OSM_MINIMAL_TILE_URL, maxZoom: 19 }), _jsx(FitMapBounds, { boundsKey: mapBoundsKey, points: mapPoints, defaultCenter: defaultCenter }), _jsx(FocusActiveDealer, { point: activeMapPoint }), _jsx(ClusteredMapMarkers, { points: mapPoints, pointsBoundsKey: mapBoundsKey, clusterThemeKey: mapClusterTheme.key, clusterBrandFill: mapClusterTheme.fill, clusterBrandLabel: mapClusterTheme.label, markets: markets, activeDealerName: activeDealerName, onUnavailable: () => setClusterUnavailable(true), onSelectDealer: (dealer) => {
|
|
302
304
|
setActiveDealerName(dealer.dealerName);
|
|
303
305
|
onMapDealerSelect?.(dealer);
|
|
304
306
|
} }), clusterUnavailable &&
|
|
305
307
|
mapPoints.map((point) => {
|
|
306
308
|
const isActive = activeDealerName === point.dealerName;
|
|
307
|
-
return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive,
|
|
309
|
+
return (_jsx(Marker, { position: [point.latitude, point.longitude], icon: createDealerPinIcon(point.isExclusive, isActive, markets), eventHandlers: {
|
|
308
310
|
click: () => {
|
|
309
311
|
setActiveDealerName(point.dealerName);
|
|
310
312
|
onMapDealerSelect?.({
|
|
@@ -331,7 +333,7 @@ export function ProductPageWidget({ t, buttonStyling, borderStyling, market, sco
|
|
|
331
333
|
function renderSuccessPanel() {
|
|
332
334
|
return (_jsx("div", { className: "jwi-flex jwi-w-full jwi-items-center jwi-justify-center jwi-bg-white jwi-p-2", children: _jsxs("div", { className: `jwi-flex jwi-w-full jwi-max-w-[520px] jwi-flex-col jwi-items-center jwi-gap-4 ${R10} jwi-bg-white jwi-p-8 jwi-text-center`, children: [_jsx("div", { className: "jwi-text-2xl jwi-font-semibold jwi-text-[#111111]", children: t.inquiryThankYouTitle }), _jsx("div", { className: "jwi-text-sm jwi-leading-6 jwi-text-[#333333]", children: t.inquirySentSuccess }), _jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-mt-2 jwi-inline-flex jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-md jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-px-5 jwi-py-2.5 jwi-text-sm jwi-font-medium jwi-text-[#111111]", children: t.goBack })] }) }));
|
|
333
335
|
}
|
|
334
|
-
return (_jsxs(_Fragment, { children: [!isMobileViewport && (_jsx(_Fragment, { children: _jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[
|
|
336
|
+
return (_jsxs(_Fragment, { children: [!isMobileViewport && (_jsx(_Fragment, { children: _jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[2147483647] jwi-flex jwi-items-center jwi-justify-center jwi-bg-black/45 jwi-p-4", onClick: closeMapPopup, children: _jsxs("div", { className: `jwi-relative jwi-flex jwi-scale-100 jwi-flex-col jwi-overflow-hidden ${R10} jwi-bg-white jwi-shadow-[0_20px_60px_rgba(0,0,0,0.25)] jwi-transition-all ${showInquirySuccessScreen
|
|
335
337
|
? 'jwi-h-auto jwi-w-[min(92vw,620px)]'
|
|
336
|
-
: 'jwi-h-[min(85vh,860px)] jwi-w-[min(96vw,1200px)] md:jwi-flex-row'}`, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-absolute jwi-right-3 jwi-top-3 jwi-z-[1200] jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111] jwi-shadow-[0_2px_8px_rgba(0,0,0,0.12)]", "aria-label": t.closeMap, children: "\u00D7" }), showInquirySuccessScreen ? (renderSuccessPanel()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-overflow-hidden md:jwi-w-[48%] md:jwi-border-r md:jwi-border-[#ece8df]", children: _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), _jsx(CampaignStatus, { campaign: searchResult?.campaign, t: t }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isSearching ? (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-
|
|
338
|
+
: 'jwi-h-[min(85vh,860px)] jwi-w-[min(96vw,1200px)] md:jwi-flex-row'}`, onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-absolute jwi-right-3 jwi-top-3 jwi-z-[1200] jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111] jwi-shadow-[0_2px_8px_rgba(0,0,0,0.12)]", "aria-label": t.closeMap, children: "\u00D7" }), showInquirySuccessScreen ? (renderSuccessPanel()) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-overflow-hidden md:jwi-w-[48%] md:jwi-border-r md:jwi-border-[#ece8df]", children: _jsx("div", { className: "jwi-flex jwi-h-full jwi-min-h-0 jwi-w-full jwi-flex-col jwi-gap-3 jwi-overflow-hidden jwi-bg-white jwi-p-6", children: showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), _jsx(CampaignStatus, { campaign: searchResult?.campaign, t: t }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isSearching ? (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-[pulse_2s_ease-in-out_infinite] jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-mr-[-12px] jwi-flex jwi-h-full jwi-flex-col jwi-gap-4 jwi-overflow-y-auto jwi-pr-[12px]", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })) : (_jsxs(_Fragment, { children: [searchResult?.ok && (_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, fitAvailableHeight: true, autoScrollToActive: true, maxHeightClassName: "jwi-max-h-none", t: t, buttonStyling: buttonStyling, borderStyling: borderStyling, markets: markets, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })), showMoreButton] }))] })) }) }), _jsx("div", { className: "jwi-relative jwi-h-[45%] jwi-w-full md:jwi-h-full md:jwi-w-[52%]", children: mapCanvas })] }))] }) }) })), isMobileViewport && (_jsx("div", { className: "jwi-fixed jwi-inset-0 jwi-z-[2147483647] jwi-bg-white", children: _jsxs("div", { className: "jwi-relative jwi-flex jwi-h-full jwi-flex-col", children: [_jsx("div", { className: "jwi-flex jwi-justify-end jwi-bg-white jwi-px-4 jwi-pt-3", children: _jsx("button", { type: "button", onClick: closeMapPopup, className: "jwi-inline-flex jwi-h-9 jwi-w-9 jwi-cursor-pointer jwi-items-center jwi-justify-center jwi-rounded-full jwi-border jwi-border-[#d8d2c7] jwi-bg-white jwi-text-xl jwi-leading-none jwi-text-[#111111]", "aria-label": t.closeMap, children: "\u00D7" }) }), _jsx("div", { className: "jwi-min-h-0 jwi-flex-1 jwi-overflow-y-auto jwi-bg-white jwi-p-4 jwi-pb-24", children: showInquirySuccessScreen ? (renderSuccessPanel()) : showInquiryInMapPopup ? (_jsx(InquiryForm, { t: t, buttonStyling: buttonStyling, inquiryValues: inquiryValues, inquiryError: inquiryError, embedded: true, onInquiryClose: onInquiryClose, onInquirySubmit: onInquirySubmit, onInquiryFieldChange: onInquiryFieldChange })) : (_jsxs(_Fragment, { children: [_jsx(LocationSearch, { t: t, isManualSearchEnabled: isManualSearchEnabled, query: query, suggestions: suggestions, suggestionsOpen: suggestionsOpen, isSuggestionsLoading: isSuggestionsLoading, onQueryChange: onQueryChange, onQuerySubmit: onQuerySubmit, onSuggestionSelect: onSuggestionSelect, onDismissSuggestions: onDismissSuggestions }), _jsx(CampaignStatus, { campaign: searchResult?.campaign, t: t }), locationError != null && !isManualSearchEnabled && (_jsx(StatusBanner, { tone: "error", children: locationError })), searchResult?.ok === false && (_jsx(StatusBanner, { tone: "error", children: searchResult.error ?? '' })), isSearching ? (_jsxs("div", { className: "jwi-flex jwi-flex-col", children: [_jsx("div", { className: "jwi-w-full jwi-flex-shrink-0 jwi-border-b jwi-border-[#e6e1d7] jwi-pb-3", children: _jsx("div", { className: "jwi-h-5 jwi-w-48 jwi-animate-[pulse_2s_ease-in-out_infinite] jwi-rounded-full jwi-bg-[#ece8df]" }) }), _jsxs("div", { className: "jwi-mt-3 jwi-flex jwi-flex-col jwi-gap-4", children: [_jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {}), _jsx(DealerCardSkeleton, {})] })] })) : (_jsxs(_Fragment, { children: [searchResult?.ok && (_jsx(DealerList, { dealers: visibleDealers, total: total, selectedDealerName: selectedDealerName, activeDealerName: activeDealerName, maxHeightClassName: "jwi-max-h-none", autoScrollToActive: true, enableInternalScroll: false, t: t, buttonStyling: buttonStyling, borderStyling: borderStyling, markets: markets, onStartInquiry: onStartInquiry, onSelectDealer: handleDealerFocus })), showMoreButton] }))] })) }), !showInquiryInMapPopup && !showInquirySuccessScreen && !mobileMapExpanded && (_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded((open) => !open), className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-20 jwi-flex jwi-h-14 jwi-items-center jwi-justify-center jwi-gap-2 jwi-rounded-t-[16px] jwi-border-t jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111] jwi-shadow-[0_-6px_20px_rgba(0,0,0,0.12)]", children: [t.openMap, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(-90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] })), mobileMapExpanded && !showInquiryInMapPopup && !showInquirySuccessScreen && (_jsxs("div", { className: "jwi-absolute jwi-inset-x-0 jwi-bottom-0 jwi-z-30 jwi-h-[78vh] jwi-overflow-hidden jwi-rounded-t-[16px] jwi-bg-white jwi-shadow-[0_-12px_36px_rgba(0,0,0,0.22)]", children: [_jsxs("button", { type: "button", onClick: () => setMobileMapExpanded(false), className: "jwi-flex jwi-h-12 jwi-w-full jwi-items-center jwi-justify-center jwi-gap-2 jwi-border-b jwi-border-[#e6e1d7] jwi-bg-white jwi-text-sm jwi-font-semibold jwi-text-[#111111]", children: [t.closeMapMobile, _jsx("span", { className: "jwi-inline-flex", style: { transform: 'rotate(90deg)' }, children: _jsx(ArrowRightIcon, { className: "jwi-h-4 jwi-w-4 jwi-shrink-0" }) })] }), _jsx("div", { className: "jwi-h-[calc(78vh-48px)] jwi-w-full", children: mapCanvas })] }))] }) }))] }));
|
|
337
339
|
}
|
|
@@ -14,9 +14,9 @@ type DealerListProps = {
|
|
|
14
14
|
t: WidgetStrings;
|
|
15
15
|
buttonStyling?: JotulWidgetButtonStyling;
|
|
16
16
|
borderStyling?: JotulWidgetBorderStyling;
|
|
17
|
-
|
|
17
|
+
markets?: string[];
|
|
18
18
|
onStartInquiry: (dealerName: string) => void;
|
|
19
19
|
onSelectDealer?: (dealerName: string) => void;
|
|
20
20
|
};
|
|
21
|
-
export declare function DealerList({ dealers, total, selectedDealerName, activeDealerName, maxHeightClassName, fitAvailableHeight, autoScrollToActive, enableInternalScroll, headerRight, t, buttonStyling, borderStyling,
|
|
21
|
+
export declare function DealerList({ dealers, total, selectedDealerName, activeDealerName, maxHeightClassName, fitAvailableHeight, autoScrollToActive, enableInternalScroll, headerRight, t, buttonStyling, borderStyling, markets, onStartInquiry, onSelectDealer, }: DealerListProps): import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
export {};
|
|
@@ -7,7 +7,7 @@ import { getWidgetPrimaryButtonPresentation } from '../../utils/widgetPrimaryBut
|
|
|
7
7
|
import exclusiveDealerBadge from '../../images/jotul-exclusive-dealer.png';
|
|
8
8
|
import ildstedetDealer from '../../images/ildstedet-dealer.svg';
|
|
9
9
|
import { asText, formatDistance, getDealerAddressLines, getDealerKey, getDealerName, isExclusiveDealer, } from '../../utils';
|
|
10
|
-
export function DealerList({ dealers, total, selectedDealerName, activeDealerName = null, maxHeightClassName = 'jwi-max-h-[min(60vh,480px)]', fitAvailableHeight = false, autoScrollToActive = false, enableInternalScroll = true, headerRight, t, buttonStyling, borderStyling,
|
|
10
|
+
export function DealerList({ dealers, total, selectedDealerName, activeDealerName = null, maxHeightClassName = 'jwi-max-h-[min(60vh,480px)]', fitAvailableHeight = false, autoScrollToActive = false, enableInternalScroll = true, headerRight, t, buttonStyling, borderStyling, markets, onStartInquiry, onSelectDealer, }) {
|
|
11
11
|
const cardRefs = useRef({});
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
if (!autoScrollToActive || !activeDealerName)
|
|
@@ -36,8 +36,9 @@ export function DealerList({ dealers, total, selectedDealerName, activeDealerNam
|
|
|
36
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
|
|
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
|
-
const
|
|
40
|
-
const
|
|
39
|
+
const isNorway = markets?.includes('NO') ?? false;
|
|
40
|
+
const badgeImage = isNorway ? ildstedetDealer : exclusiveDealerBadge;
|
|
41
|
+
const badgeAlt = isNorway ? 'Ildstedet dealer' : 'Jotul exclusive dealer';
|
|
41
42
|
return (_jsx("img", { src: typeof badgeImage === 'string'
|
|
42
43
|
? badgeImage
|
|
43
44
|
: badgeImage.src, alt: badgeAlt, className: "jwi-h-auto jwi-w-[40px] jwi-shrink-0 jwi-rounded-full jwi-m-0" }));
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { checkWidgetAuthorization, DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetBorderStyling, type JotulWidgetButtonStyling, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetStyling, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';
|
|
1
|
+
export { checkWidgetAuthorization, DEFAULT_WIDGET_LOCALE_TAG, normalizeWidgetLocale, resolveWidgetUiLocale, searchDealersByCoordinates, searchDealersByPostalCode, JotulWidget, type CheckWidgetAuthorizationOptions, type DealerSearchResponse, type JotulWidgetBorderStyling, type JotulWidgetButtonStyling, type JotulWidgetHandle, type JotulWidgetLocale, type JotulWidgetProps, type JotulWidgetStyling, type JotulWidgetType, type WidgetAuthClientResponse, } from './JotulWidget';
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
2
|
export type JotulWidgetType = 'productPage' | 'findDealerDrawer' | 'dealerFinder' | 'warrantyForm';
|
|
3
3
|
export type JotulWidgetScope = 'ildstedet';
|
|
4
4
|
export type WidgetAuthClientResponse = {
|
|
@@ -48,8 +48,8 @@ export type CheckWidgetAuthorizationOptions = {
|
|
|
48
48
|
fetcher?: typeof fetch;
|
|
49
49
|
/** BCP 47 language tag (e.g. `nb-NO`, `en-US`) sent to the API as `locale`. */
|
|
50
50
|
locale?: string;
|
|
51
|
-
/** ISO 3166-1 alpha-2 market/country (e.g. `NO
|
|
52
|
-
|
|
51
|
+
/** ISO 3166-1 alpha-2 market(s)/country(ies) (e.g. `["NO", "SE"]`) sent to the API as `market` params. */
|
|
52
|
+
markets?: string[];
|
|
53
53
|
scope?: JotulWidgetScope;
|
|
54
54
|
brands?: string[];
|
|
55
55
|
/** Optional Sanity campaign slug used to limit dealer results to campaign dealers. */
|
|
@@ -68,39 +68,28 @@ export type JotulWidgetStyling = {
|
|
|
68
68
|
button?: JotulWidgetButtonStyling;
|
|
69
69
|
border?: JotulWidgetBorderStyling;
|
|
70
70
|
};
|
|
71
|
-
export type
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
className: string;
|
|
76
|
-
style?: CSSProperties;
|
|
71
|
+
export type JotulWidgetHandle = {
|
|
72
|
+
open: () => void;
|
|
73
|
+
close: () => void;
|
|
74
|
+
isOpen: boolean;
|
|
77
75
|
};
|
|
78
76
|
export type JotulWidgetProps = {
|
|
79
77
|
type?: string;
|
|
80
78
|
endpoint?: string;
|
|
81
79
|
className?: string;
|
|
82
80
|
productName?: string;
|
|
83
|
-
/** BCP 47 tag for widget UI strings and API `locale` (default `nb-NO` when omitted). */
|
|
84
81
|
locale?: string;
|
|
85
|
-
|
|
86
|
-
market?: string;
|
|
82
|
+
markets?: string[];
|
|
87
83
|
scope?: JotulWidgetScope;
|
|
88
84
|
brands?: string[];
|
|
89
|
-
/** Optional Sanity campaign slug used to limit dealer results to campaign dealers. */
|
|
90
85
|
campaignSlug?: string;
|
|
91
86
|
styling?: JotulWidgetStyling;
|
|
92
|
-
/**
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
/** @deprecated Use `trigger` instead. */
|
|
99
|
-
productPageTrigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
|
|
100
|
-
/**
|
|
101
|
-
* @deprecated Use `trigger` instead.
|
|
102
|
-
*/
|
|
103
|
-
findDealerDrawerTrigger?: ReactNode | ((props: WidgetTriggerRenderProps) => ReactNode);
|
|
87
|
+
/** Trigger button element. Wrapped internally with onClick → open. */
|
|
88
|
+
button?: ReactNode;
|
|
89
|
+
/** Shown instead of `button` while the widget loads. Defaults to translated loading text. */
|
|
90
|
+
buttonLoading?: ReactNode;
|
|
91
|
+
/** Ref handle for imperative open/close control (alternative to `button`). */
|
|
92
|
+
widgetRef?: React.Ref<JotulWidgetHandle>;
|
|
104
93
|
};
|
|
105
94
|
export type DealerRecord = Record<string, unknown>;
|
|
106
95
|
export type InquiryFormValues = {
|