@wayke-se/components-react 3.0.0-beta.4 → 3.0.0-beta.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/index.js +841 -2205
- package/dist/index.js.map +4 -4
- package/dist/index.mjs +822 -2186
- package/dist/index.mjs.map +4 -4
- package/esbuild/lib.js +1 -0
- package/package.json +2 -3
- package/src/components/Gallery/index.tsx +30 -32
- package/src/components/Lightbox/index.tsx +11 -11
package/dist/index.js
CHANGED
|
@@ -2335,12 +2335,6 @@
|
|
|
2335
2335
|
}, /* @__PURE__ */ React4.createElement("path", {
|
|
2336
2336
|
d: "M13 17.7L4.3 9 13 .3l.7.7-8 8 8 8-.7.7z"
|
|
2337
2337
|
}));
|
|
2338
|
-
var IconChevronRight = ({ block }) => /* @__PURE__ */ React4.createElement(Icon2, {
|
|
2339
|
-
viewBox: "0 0 18 18",
|
|
2340
|
-
block
|
|
2341
|
-
}, /* @__PURE__ */ React4.createElement("path", {
|
|
2342
|
-
d: "M5 .3L13.7 9 5 17.7l-.7-.7 8-8-8-8L5 .3z"
|
|
2343
|
-
}));
|
|
2344
2338
|
var IconCheck = ({ block }) => /* @__PURE__ */ React4.createElement(Icon2, {
|
|
2345
2339
|
viewBox: "0 0 16 16",
|
|
2346
2340
|
block
|
|
@@ -4547,7 +4541,7 @@
|
|
|
4547
4541
|
var search_default = WaykeSearch;
|
|
4548
4542
|
|
|
4549
4543
|
// src/layouts/searchItem/index.tsx
|
|
4550
|
-
var
|
|
4544
|
+
var import_react84 = __toESM(__require("react"));
|
|
4551
4545
|
var import_ecom_web = __toESM(__require("@wayke-se/ecom-web"));
|
|
4552
4546
|
|
|
4553
4547
|
// src/components/PriceTable/index.tsx
|
|
@@ -4826,1731 +4820,175 @@
|
|
|
4826
4820
|
var ExtendContent_default = ExtendContent;
|
|
4827
4821
|
|
|
4828
4822
|
// src/components/Gallery/index.tsx
|
|
4829
|
-
var
|
|
4830
|
-
var import_react_slick = __toESM(__require("react-slick"));
|
|
4823
|
+
var import_react38 = __toESM(__require("react"));
|
|
4831
4824
|
var import_scroll_into_view_if_needed = __toESM(__require("scroll-into-view-if-needed"));
|
|
4825
|
+
var Gallery = ({ media, placeholderImage }) => {
|
|
4826
|
+
const slider = (0, import_react38.useRef)(null);
|
|
4827
|
+
const quickNavRef = (0, import_react38.useRef)(null);
|
|
4828
|
+
const isDragging = (0, import_react38.useRef)(false);
|
|
4829
|
+
const [index2, setIndex] = (0, import_react38.useState)(0);
|
|
4830
|
+
const [lightbox, setLightbox] = (0, import_react38.useState)(false);
|
|
4831
|
+
const [navigationDisabled, setNavigationDisabled] = (0, import_react38.useState)(false);
|
|
4832
|
+
const beforeChange = (0, import_react38.useCallback)((_, newIndex) => {
|
|
4833
|
+
const element = quickNavRef.current?.querySelectorAll("li")?.[newIndex];
|
|
4834
|
+
if (element) {
|
|
4835
|
+
(0, import_scroll_into_view_if_needed.default)(element, { scrollMode: "if-needed", block: "nearest", inline: "nearest" });
|
|
4836
|
+
}
|
|
4837
|
+
setIndex(newIndex);
|
|
4838
|
+
}, []);
|
|
4839
|
+
const onMouseDown = (0, import_react38.useCallback)(() => {
|
|
4840
|
+
if (isDragging.current) {
|
|
4841
|
+
isDragging.current = false;
|
|
4842
|
+
}
|
|
4843
|
+
}, []);
|
|
4844
|
+
const onMouseMove = (0, import_react38.useCallback)(() => {
|
|
4845
|
+
if (!isDragging.current) {
|
|
4846
|
+
isDragging.current = true;
|
|
4847
|
+
}
|
|
4848
|
+
}, []);
|
|
4849
|
+
const onClick = (0, import_react38.useCallback)(() => {
|
|
4850
|
+
pubsub_default.publish("ImagesClick");
|
|
4851
|
+
if (!isDragging.current && !lightbox && !!media?.length) {
|
|
4852
|
+
setLightbox(true);
|
|
4853
|
+
}
|
|
4854
|
+
}, [lightbox, media]);
|
|
4855
|
+
const nextImage = (0, import_react38.useCallback)(() => {
|
|
4856
|
+
if (!slider || !slider.current) {
|
|
4857
|
+
return;
|
|
4858
|
+
}
|
|
4859
|
+
slider.current.slickNext();
|
|
4860
|
+
}, [slider]);
|
|
4861
|
+
const prevImage = (0, import_react38.useCallback)(() => {
|
|
4862
|
+
if (!slider || !slider.current) {
|
|
4863
|
+
return;
|
|
4864
|
+
}
|
|
4865
|
+
slider.current.slickPrev();
|
|
4866
|
+
}, [slider]);
|
|
4867
|
+
const goTo = (target) => {
|
|
4868
|
+
if (!slider || !slider.current) {
|
|
4869
|
+
return;
|
|
4870
|
+
}
|
|
4871
|
+
if (slider.current) {
|
|
4872
|
+
setIndex(target);
|
|
4873
|
+
slider.current.slickGoTo(target);
|
|
4874
|
+
}
|
|
4875
|
+
};
|
|
4876
|
+
const onDisableNavigation = () => {
|
|
4877
|
+
if (!isDragging.current)
|
|
4878
|
+
setNavigationDisabled(true);
|
|
4879
|
+
};
|
|
4880
|
+
const onEnableNavigation = (e) => {
|
|
4881
|
+
e.stopPropagation();
|
|
4882
|
+
isDragging.current = false;
|
|
4883
|
+
setNavigationDisabled(false);
|
|
4884
|
+
};
|
|
4885
|
+
const onToggleLightbox = (0, import_react38.useCallback)(() => setLightbox(!lightbox), [lightbox]);
|
|
4886
|
+
const mediaLength = media?.length || 0;
|
|
4887
|
+
const placeholder = (0, import_react38.useMemo)(
|
|
4888
|
+
() => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE,
|
|
4889
|
+
[placeholderImage]
|
|
4890
|
+
);
|
|
4891
|
+
return /* @__PURE__ */ import_react38.default.createElement("p", null, "heheh");
|
|
4892
|
+
};
|
|
4893
|
+
var Gallery_default = Gallery;
|
|
4832
4894
|
|
|
4833
|
-
// src/components/
|
|
4895
|
+
// src/components/ProductPage/index.tsx
|
|
4834
4896
|
var import_styled_components34 = __toESM(__require("styled-components"));
|
|
4835
|
-
var
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
${Wrapper} & {
|
|
4839
|
-
margin-left: ${size(-3)};
|
|
4840
|
-
margin-right: ${size(-3)};
|
|
4841
|
-
}
|
|
4842
|
-
}
|
|
4843
|
-
|
|
4844
|
-
${(props) => props.theme.breakpoint.LtSm} {
|
|
4845
|
-
${Wrapper} & {
|
|
4846
|
-
margin-left: ${size(-2)};
|
|
4847
|
-
margin-right: ${size(-2)};
|
|
4848
|
-
}
|
|
4849
|
-
}
|
|
4897
|
+
var ProductPage = import_styled_components34.default.div`
|
|
4898
|
+
display: flex;
|
|
4899
|
+
flex-direction: column;
|
|
4850
4900
|
|
|
4851
4901
|
${(props) => props.theme.breakpoint.Md} {
|
|
4852
|
-
|
|
4853
|
-
padding-right: ${quickNavWidth}px;
|
|
4902
|
+
flex-direction: row;
|
|
4854
4903
|
}
|
|
4855
4904
|
`;
|
|
4856
|
-
var
|
|
4857
|
-
|
|
4858
|
-
|
|
4859
|
-
padding-bottom: 66.66666667%;
|
|
4860
|
-
|
|
4861
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
4862
|
-
//background-color: ${(props) => props.theme.color.accent};
|
|
4863
|
-
}
|
|
4864
|
-
|
|
4865
|
-
.slick-slider,
|
|
4866
|
-
.slick-list,
|
|
4867
|
-
.slick-track,
|
|
4868
|
-
.slick-slide,
|
|
4869
|
-
.slick-slide > * {
|
|
4870
|
-
height: 100%;
|
|
4905
|
+
var ProductPageAside = import_styled_components34.default.div`
|
|
4906
|
+
${(props) => props.theme.breakpoint.LtMd} {
|
|
4907
|
+
display: contents;
|
|
4871
4908
|
}
|
|
4872
4909
|
|
|
4873
|
-
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
|
|
4877
|
-
font-size: 1rem;
|
|
4878
|
-
}
|
|
4910
|
+
${(props) => props.theme.breakpoint.Md} {
|
|
4911
|
+
flex-shrink: 0;
|
|
4912
|
+
width: calc(375px + ${size(2)});
|
|
4913
|
+
padding-right: ${size(2)};
|
|
4879
4914
|
}
|
|
4880
4915
|
`;
|
|
4881
|
-
var
|
|
4882
|
-
position: absolute;
|
|
4883
|
-
top: 0;
|
|
4884
|
-
bottom: 0;
|
|
4885
|
-
right: 0;
|
|
4886
|
-
width: ${quickNavWidth}px;
|
|
4887
|
-
padding-left: ${size(1)};
|
|
4888
|
-
|
|
4916
|
+
var ProductPageMain = import_styled_components34.default.div`
|
|
4889
4917
|
${(props) => props.theme.breakpoint.LtMd} {
|
|
4890
|
-
display:
|
|
4918
|
+
display: contents;
|
|
4891
4919
|
}
|
|
4892
4920
|
|
|
4893
|
-
|
|
4894
|
-
|
|
4895
|
-
|
|
4896
|
-
|
|
4897
|
-
left: 0;
|
|
4898
|
-
right: 0;
|
|
4899
|
-
height: ${size(2.5)};
|
|
4900
|
-
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
|
|
4901
|
-
pointer-events: none;
|
|
4921
|
+
${(props) => props.theme.breakpoint.Md} {
|
|
4922
|
+
flex: 1 1 100%;
|
|
4923
|
+
min-width: 0;
|
|
4924
|
+
padding-left: ${size(2)};
|
|
4902
4925
|
}
|
|
4903
4926
|
`;
|
|
4904
|
-
var
|
|
4905
|
-
position: relative;
|
|
4906
|
-
width: 100%;
|
|
4907
|
-
height: 100%;
|
|
4908
|
-
overflow: hidden;
|
|
4909
|
-
|
|
4910
|
-
:focus {
|
|
4911
|
-
outline: none;
|
|
4912
|
-
}
|
|
4913
|
-
|
|
4927
|
+
var ProductPageAsideSection = import_styled_components34.default.div`
|
|
4914
4928
|
${(props) => props.theme.breakpoint.LtMd} {
|
|
4915
|
-
|
|
4916
|
-
transition: border-radius 150ms ease;
|
|
4917
|
-
}
|
|
4918
|
-
`;
|
|
4919
|
-
var SliderWrapper = import_styled_components34.default.div`
|
|
4920
|
-
position: absolute;
|
|
4921
|
-
top: 0;
|
|
4922
|
-
bottom: 0;
|
|
4923
|
-
left: 0;
|
|
4924
|
-
right: 0;
|
|
4925
|
-
|
|
4926
|
-
.slick-slider {
|
|
4927
|
-
position: absolute;
|
|
4928
|
-
top: 0;
|
|
4929
|
-
bottom: 0;
|
|
4930
|
-
left: 0;
|
|
4931
|
-
right: 0;
|
|
4932
|
-
user-select: none;
|
|
4933
|
-
touch-action: pan-y;
|
|
4934
|
-
-webkit-tap-highlight-color: transparent;
|
|
4935
|
-
|
|
4936
|
-
.slick-list,
|
|
4937
|
-
.slick-track {
|
|
4938
|
-
transform: translate3d(0, 0, 0);
|
|
4939
|
-
}
|
|
4940
|
-
}
|
|
4941
|
-
|
|
4942
|
-
.slick-list {
|
|
4943
|
-
position: relative;
|
|
4944
|
-
display: block;
|
|
4945
|
-
margin: 0;
|
|
4946
|
-
padding: 0;
|
|
4947
|
-
overflow: hidden;
|
|
4948
|
-
|
|
4949
|
-
&:focus {
|
|
4950
|
-
outline: none;
|
|
4951
|
-
}
|
|
4929
|
+
order: ${(props) => props.mobileOrder};
|
|
4952
4930
|
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
cursor: hand;
|
|
4931
|
+
& + & {
|
|
4932
|
+
margin-top: ${size(2)};
|
|
4956
4933
|
}
|
|
4957
|
-
}
|
|
4958
|
-
|
|
4959
|
-
.slick-track {
|
|
4960
|
-
position: relative;
|
|
4961
|
-
top: 0;
|
|
4962
|
-
left: 0;
|
|
4963
|
-
display: block;
|
|
4964
|
-
margin-left: auto;
|
|
4965
|
-
margin-right: auto;
|
|
4966
4934
|
|
|
4967
|
-
|
|
4968
|
-
|
|
4969
|
-
content: '';
|
|
4970
|
-
display: table;
|
|
4935
|
+
:last-child {
|
|
4936
|
+
margin-bottom: ${size(4)};
|
|
4971
4937
|
}
|
|
4972
4938
|
|
|
4973
|
-
|
|
4974
|
-
|
|
4939
|
+
${ProductPageMain} & {
|
|
4940
|
+
margin-top: ${size(2)};
|
|
4975
4941
|
}
|
|
4976
4942
|
}
|
|
4977
4943
|
|
|
4978
|
-
.
|
|
4979
|
-
|
|
4980
|
-
|
|
4981
|
-
min-height: 1px;
|
|
4982
|
-
}
|
|
4983
|
-
|
|
4984
|
-
.slick-loading {
|
|
4985
|
-
.slick-track {
|
|
4986
|
-
visibility: hidden;
|
|
4987
|
-
}
|
|
4988
|
-
|
|
4989
|
-
img {
|
|
4990
|
-
display: none;
|
|
4944
|
+
${(props) => props.theme.breakpoint.Md} {
|
|
4945
|
+
& + & {
|
|
4946
|
+
margin-top: ${size(4)};
|
|
4991
4947
|
}
|
|
4992
|
-
}
|
|
4993
4948
|
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
display: block;
|
|
4949
|
+
${ProductPageMain} & {
|
|
4950
|
+
margin-bottom: ${size(8)};
|
|
4997
4951
|
}
|
|
4998
4952
|
}
|
|
4999
|
-
|
|
5000
|
-
.
|
|
5001
|
-
pointer-events: none;
|
|
5002
|
-
}
|
|
5003
|
-
|
|
4953
|
+
`;
|
|
4954
|
+
var ProductPageMainSection = import_styled_components34.default.div`
|
|
5004
4955
|
${(props) => props.theme.breakpoint.LtMd} {
|
|
5005
|
-
|
|
5006
|
-
|
|
5007
|
-
|
|
5008
|
-
overflow: visible;
|
|
5009
|
-
width: 95%;
|
|
5010
|
-
}
|
|
4956
|
+
order: 99;
|
|
4957
|
+
padding: ${size(4)} 0;
|
|
4958
|
+
border-top: ${size(1)} solid ${(props) => props.theme.color.accent};
|
|
5011
4959
|
|
|
5012
|
-
|
|
5013
|
-
|
|
5014
|
-
|
|
5015
|
-
|
|
5016
|
-
|
|
4960
|
+
${Wrapper} & {
|
|
4961
|
+
margin-left: ${size(-2)};
|
|
4962
|
+
margin-right: ${size(-2)};
|
|
4963
|
+
padding-left: ${size(2)};
|
|
4964
|
+
padding-right: ${size(2)};
|
|
5017
4965
|
}
|
|
4966
|
+
}
|
|
5018
4967
|
|
|
5019
|
-
|
|
5020
|
-
|
|
5021
|
-
|
|
5022
|
-
${
|
|
5023
|
-
|
|
5024
|
-
border-bottom-left-radius: 0;
|
|
5025
|
-
}
|
|
4968
|
+
${(props) => props.theme.breakpoint.Md} {
|
|
4969
|
+
& + & {
|
|
4970
|
+
margin-top: ${size(8)};
|
|
4971
|
+
padding-top: ${size(8)};
|
|
4972
|
+
border-top: 1px solid ${(props) => props.theme.color.border};
|
|
5026
4973
|
}
|
|
5027
4974
|
}
|
|
5028
4975
|
`;
|
|
5029
|
-
var
|
|
5030
|
-
|
|
5031
|
-
position: absolute;
|
|
5032
|
-
left: 0;
|
|
5033
|
-
top: 0;
|
|
5034
|
-
right: 0;
|
|
5035
|
-
bottom: 0;
|
|
5036
|
-
margin: auto;
|
|
5037
|
-
max-width: 100%;
|
|
5038
|
-
max-height: 100%;
|
|
5039
|
-
object-fit: cover;
|
|
5040
|
-
cursor: pointer;
|
|
5041
|
-
`;
|
|
5042
|
-
var ImageFull = import_styled_components34.default.img`
|
|
5043
|
-
display: block;
|
|
5044
|
-
position: absolute;
|
|
5045
|
-
top: 0;
|
|
5046
|
-
left: 0;
|
|
5047
|
-
width: 100%;
|
|
5048
|
-
height: 100%;
|
|
5049
|
-
object-fit: cover;
|
|
4976
|
+
var ProductPageContentLimit = import_styled_components34.default.div`
|
|
4977
|
+
max-width: 420px;
|
|
5050
4978
|
`;
|
|
5051
|
-
var Arrow = (0, import_styled_components34.default)(ButtonReset)`
|
|
5052
|
-
position: absolute;
|
|
5053
|
-
top: 50%;
|
|
5054
|
-
transform: translateY(-50%);
|
|
5055
|
-
display: flex;
|
|
5056
|
-
align-items: center;
|
|
5057
|
-
justify-content: center;
|
|
5058
|
-
width: ${size(4)};
|
|
5059
|
-
height: ${size(4)};
|
|
5060
|
-
border-radius: 50%;
|
|
5061
|
-
font-size: 1rem;
|
|
5062
|
-
line-height: 1;
|
|
5063
|
-
background-color: rgba(255, 255, 255, 0.4);
|
|
5064
|
-
backdrop-filter: blur(5px);
|
|
5065
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
5066
|
-
color: ${(props) => props.theme.color.textDark};
|
|
5067
|
-
transform-origin: 50% 50%;
|
|
5068
|
-
transition: transform 200ms ease;
|
|
5069
4979
|
|
|
5070
|
-
|
|
5071
|
-
|
|
5072
|
-
position: absolute;
|
|
5073
|
-
top: 0;
|
|
5074
|
-
bottom: 0;
|
|
5075
|
-
left: 0;
|
|
5076
|
-
right: 0;
|
|
5077
|
-
border-radius: 50%;
|
|
5078
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
5079
|
-
opacity: 0;
|
|
5080
|
-
transition: opacity 200ms ease;
|
|
5081
|
-
}
|
|
5082
|
-
|
|
5083
|
-
:hover {
|
|
5084
|
-
:before {
|
|
5085
|
-
opacity: 1;
|
|
5086
|
-
}
|
|
5087
|
-
}
|
|
4980
|
+
// src/hooks/useSearchItem.ts
|
|
4981
|
+
var import_client2 = __require("@apollo/client");
|
|
5088
4982
|
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
left: ${size(2)};
|
|
5099
|
-
`;
|
|
5100
|
-
var ArrowRight = (0, import_styled_components34.default)(Arrow)`
|
|
5101
|
-
right: ${size(2)};
|
|
5102
|
-
`;
|
|
5103
|
-
var QuickNav = import_styled_components34.default.ul`
|
|
5104
|
-
position: relative;
|
|
5105
|
-
max-height: 100%;
|
|
5106
|
-
list-style: none;
|
|
5107
|
-
padding: 0;
|
|
5108
|
-
margin: 0;
|
|
5109
|
-
overflow: auto;
|
|
5110
|
-
-webkit-overflow-scrolling: touch;
|
|
5111
|
-
`;
|
|
5112
|
-
var QuickNavItem = import_styled_components34.default.li.attrs(() => ({
|
|
5113
|
-
className: "wayke__theme wayke__color--primary-text"
|
|
5114
|
-
}))`
|
|
5115
|
-
position: relative;
|
|
5116
|
-
|
|
5117
|
-
& + & {
|
|
5118
|
-
margin-top: ${size(1)};
|
|
5119
|
-
}
|
|
5120
|
-
|
|
5121
|
-
${({ active }) => active && import_styled_components34.css`
|
|
5122
|
-
:before {
|
|
5123
|
-
content: '';
|
|
5124
|
-
position: absolute;
|
|
5125
|
-
top: 0;
|
|
5126
|
-
left: 0;
|
|
5127
|
-
width: 100%;
|
|
5128
|
-
height: 100%;
|
|
5129
|
-
border: 3px solid currentColor;
|
|
5130
|
-
z-index: 2;
|
|
5131
|
-
}
|
|
5132
|
-
`}
|
|
5133
|
-
`;
|
|
5134
|
-
var QuickNavBtn = (0, import_styled_components34.default)(ButtonReset)`
|
|
5135
|
-
position: relative;
|
|
5136
|
-
display: block;
|
|
5137
|
-
width: 100%;
|
|
5138
|
-
height: 0;
|
|
5139
|
-
padding-bottom: 66.66666667%; // 3:2
|
|
5140
|
-
transform-origin: 50% 50%;
|
|
5141
|
-
transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
|
5142
|
-
|
|
5143
|
-
:before {
|
|
5144
|
-
content: '';
|
|
5145
|
-
position: absolute;
|
|
5146
|
-
top: 0;
|
|
5147
|
-
left: 0;
|
|
5148
|
-
width: 100%;
|
|
5149
|
-
height: 100%;
|
|
5150
|
-
background-color: rgba(0, 0, 0, 0.15);
|
|
5151
|
-
opacity: 0;
|
|
5152
|
-
z-index: 1;
|
|
5153
|
-
transition: opacity 150ms ease;
|
|
5154
|
-
}
|
|
5155
|
-
|
|
5156
|
-
:hover {
|
|
5157
|
-
:before {
|
|
5158
|
-
opacity: 1;
|
|
5159
|
-
}
|
|
5160
|
-
}
|
|
5161
|
-
|
|
5162
|
-
:active {
|
|
5163
|
-
transform: scale(0.95);
|
|
5164
|
-
}
|
|
5165
|
-
`;
|
|
5166
|
-
var QuickNavImg = import_styled_components34.default.img`
|
|
5167
|
-
display: block;
|
|
5168
|
-
position: absolute;
|
|
5169
|
-
top: 0;
|
|
5170
|
-
left: 0;
|
|
5171
|
-
width: 100%;
|
|
5172
|
-
height: 100%;
|
|
5173
|
-
object-fit: cover;
|
|
5174
|
-
`;
|
|
5175
|
-
var MediaButtonWrapper = import_styled_components34.default.div`
|
|
5176
|
-
position: absolute;
|
|
5177
|
-
bottom: ${size(2)};
|
|
5178
|
-
left: 50%;
|
|
5179
|
-
transform: translateX(-50%);
|
|
5180
|
-
z-index: 1;
|
|
5181
|
-
`;
|
|
5182
|
-
var EnableNavigationButton = import_styled_components34.default.div`
|
|
5183
|
-
position: absolute;
|
|
5184
|
-
bottom: ${size(2)};
|
|
5185
|
-
left: 50%;
|
|
5186
|
-
transform: translateX(-50%);
|
|
5187
|
-
z-index: 1;
|
|
5188
|
-
`;
|
|
5189
|
-
|
|
5190
|
-
// src/components/Lightbox/index.tsx
|
|
5191
|
-
var import_react47 = __toESM(__require("react"));
|
|
5192
|
-
|
|
5193
|
-
// src/components/Lightbox/wrapper.tsx
|
|
5194
|
-
var import_styled_components35 = __toESM(__require("styled-components"));
|
|
5195
|
-
var Wrapper18 = import_styled_components35.default.div`
|
|
5196
|
-
position: fixed;
|
|
5197
|
-
top: 0;
|
|
5198
|
-
bottom: 0;
|
|
5199
|
-
left: 0;
|
|
5200
|
-
right: 0;
|
|
5201
|
-
padding: ${size(3)};
|
|
5202
|
-
z-index: 90;
|
|
5203
|
-
overflow: auto;
|
|
5204
|
-
|
|
5205
|
-
${(props) => props.theme.breakpoint.LtSm} {
|
|
5206
|
-
padding: ${size(2)};
|
|
5207
|
-
}
|
|
5208
|
-
`;
|
|
5209
|
-
var UiBlock2 = import_styled_components35.default.div.attrs(() => ({
|
|
5210
|
-
role: "button"
|
|
5211
|
-
}))`
|
|
5212
|
-
position: fixed;
|
|
5213
|
-
top: 0;
|
|
5214
|
-
bottom: 0;
|
|
5215
|
-
left: 0;
|
|
5216
|
-
right: 0;
|
|
5217
|
-
background-color: rgba(0, 0, 0, 0.3);
|
|
5218
|
-
z-index: -1;
|
|
5219
|
-
`;
|
|
5220
|
-
var Item9 = import_styled_components35.default.div`
|
|
5221
|
-
position: relative;
|
|
5222
|
-
|
|
5223
|
-
& + & {
|
|
5224
|
-
margin-top: ${size(1)};
|
|
5225
|
-
}
|
|
5226
|
-
`;
|
|
5227
|
-
var Img2 = import_styled_components35.default.img`
|
|
5228
|
-
position: relative;
|
|
5229
|
-
display: block;
|
|
5230
|
-
max-width: 100%;
|
|
5231
|
-
max-height: calc(100vh - ${size(6)});
|
|
5232
|
-
margin: 0 auto;
|
|
5233
|
-
z-index: 1;
|
|
5234
|
-
|
|
5235
|
-
${(props) => props.theme.breakpoint.LtSm} {
|
|
5236
|
-
max-height: calc(100vh - ${size(4)});
|
|
5237
|
-
}
|
|
5238
|
-
`;
|
|
5239
|
-
var CloseBtn2 = (0, import_styled_components35.default)(ButtonReset)`
|
|
5240
|
-
display: flex;
|
|
5241
|
-
align-items: center;
|
|
5242
|
-
justify-content: center;
|
|
5243
|
-
position: fixed;
|
|
5244
|
-
top: ${size(2)};
|
|
5245
|
-
right: ${size(2)};
|
|
5246
|
-
width: ${size(5)};
|
|
5247
|
-
height: ${size(5)};
|
|
5248
|
-
border-radius: 50%;
|
|
5249
|
-
background-color: ${(props) => props.theme.color.bg};
|
|
5250
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
5251
|
-
transform-origin: 50% 50%;
|
|
5252
|
-
transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
|
|
5253
|
-
z-index: 1;
|
|
5254
|
-
|
|
5255
|
-
:before {
|
|
5256
|
-
content: '';
|
|
5257
|
-
position: absolute;
|
|
5258
|
-
top: 0;
|
|
5259
|
-
left: 0;
|
|
5260
|
-
width: 100%;
|
|
5261
|
-
height: 100%;
|
|
5262
|
-
background-color: ${(props) => props.theme.color.hoverOverlay};
|
|
5263
|
-
border-radius: 50%;
|
|
5264
|
-
opacity: 0;
|
|
5265
|
-
transition: opacity 150ms ease;
|
|
5266
|
-
}
|
|
5267
|
-
|
|
5268
|
-
:hover {
|
|
5269
|
-
:before {
|
|
5270
|
-
opacity: 1;
|
|
5271
|
-
}
|
|
5272
|
-
}
|
|
5273
|
-
|
|
5274
|
-
:active {
|
|
5275
|
-
transform: scale(0.97);
|
|
5276
|
-
}
|
|
5277
|
-
|
|
5278
|
-
${(props) => props.theme.breakpoint.LtSm} {
|
|
5279
|
-
top: ${size(1)};
|
|
5280
|
-
right: ${size(1)};
|
|
5281
|
-
}
|
|
5282
|
-
`;
|
|
5283
|
-
|
|
5284
|
-
// src/components/Video/EmbeddedVideoLightbox.tsx
|
|
5285
|
-
var import_react41 = __toESM(__require("react"));
|
|
5286
|
-
|
|
5287
|
-
// src/components/Video/YoutubePlayer.tsx
|
|
5288
|
-
var import_react38 = __toESM(__require("react"));
|
|
5289
|
-
|
|
5290
|
-
// src/components/Video/utils.ts
|
|
5291
|
-
var getVimeoId = (url) => {
|
|
5292
|
-
const regExp = /\/(\d+)/;
|
|
5293
|
-
const match = url.match(regExp);
|
|
5294
|
-
return match && match[1].length > 3 ? match[1] : "";
|
|
5295
|
-
};
|
|
5296
|
-
var getYouTubeId = (url) => {
|
|
5297
|
-
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
|
|
5298
|
-
const match = url.match(regExp);
|
|
5299
|
-
return match && match[7].length === 11 ? match[7] : "";
|
|
5300
|
-
};
|
|
5301
|
-
var youtubeBase = "https://img.youtube.com/vi/";
|
|
5302
|
-
var getYoutubeThumbnail = (url) => {
|
|
5303
|
-
const id = getYouTubeId(url);
|
|
5304
|
-
if (!id) {
|
|
5305
|
-
return void 0;
|
|
5306
|
-
}
|
|
5307
|
-
return {
|
|
5308
|
-
maxresdefault: `${youtubeBase}${id}/maxresdefault.jpg`,
|
|
5309
|
-
hqdefault: `${youtubeBase}${id}/hqdefault.jpg`,
|
|
5310
|
-
mqdefault: `${youtubeBase}${id}/mqdefault.jpg`
|
|
5311
|
-
};
|
|
5312
|
-
};
|
|
5313
|
-
var onImageLoad = (e, thumbnail) => {
|
|
5314
|
-
if (thumbnail?.length === 2 && e.currentTarget.src === thumbnail[0] && e.currentTarget.naturalWidth === 120 && e.currentTarget.naturalHeight === 90) {
|
|
5315
|
-
e.currentTarget.src = thumbnail[1];
|
|
5316
|
-
}
|
|
5317
|
-
};
|
|
5318
|
-
var onImageError = (e, thumbnail) => {
|
|
5319
|
-
if (thumbnail?.length === 2) {
|
|
5320
|
-
e.currentTarget.src = thumbnail[1];
|
|
5321
|
-
}
|
|
5322
|
-
};
|
|
5323
|
-
|
|
5324
|
-
// src/components/Video/wrapper.tsx
|
|
5325
|
-
var import_styled_components36 = __toESM(__require("styled-components"));
|
|
5326
|
-
var Wrapper19 = import_styled_components36.default.div`
|
|
5327
|
-
position: relative;
|
|
5328
|
-
width: 100%;
|
|
5329
|
-
height: ${(props) => props.isPreview ? "100%" : 0};
|
|
5330
|
-
padding-bottom: ${(props) => props.ratio ? props.ratio : "56.25%"};
|
|
5331
|
-
`;
|
|
5332
|
-
var Iframe = import_styled_components36.default.iframe.attrs(() => ({
|
|
5333
|
-
width: "100%",
|
|
5334
|
-
height: "100%",
|
|
5335
|
-
allowFullScreen: true,
|
|
5336
|
-
frameBorder: "0"
|
|
5337
|
-
}))`
|
|
5338
|
-
position: absolute;
|
|
5339
|
-
top: 0;
|
|
5340
|
-
left: 0;
|
|
5341
|
-
width: 100%;
|
|
5342
|
-
height: 100%;
|
|
5343
|
-
`;
|
|
5344
|
-
|
|
5345
|
-
// src/components/Video/YoutubePlayer.tsx
|
|
5346
|
-
var YouTubePlayer = ({ url, autoplay }) => /* @__PURE__ */ import_react38.default.createElement(Wrapper19, null, /* @__PURE__ */ import_react38.default.createElement(Iframe, {
|
|
5347
|
-
src: `https://www.youtube.com/embed/${getYouTubeId(url)}?&enablejsapi=1&?rel=0${autoplay ? "&autoplay=1" : ""}`
|
|
5348
|
-
}));
|
|
5349
|
-
var YoutubePlayer_default = YouTubePlayer;
|
|
5350
|
-
|
|
5351
|
-
// src/components/Video/VimeoPlayer.tsx
|
|
5352
|
-
var import_react39 = __toESM(__require("react"));
|
|
5353
|
-
var VimeoPlayer = ({ url, autoplay }) => /* @__PURE__ */ import_react39.default.createElement(Wrapper19, null, /* @__PURE__ */ import_react39.default.createElement(Iframe, {
|
|
5354
|
-
src: `https://player.vimeo.com/video/${getVimeoId(url)}?${autoplay ? "&autoplay=1" : ""}&loop=0&autopause=0`
|
|
5355
|
-
}));
|
|
5356
|
-
var VimeoPlayer_default = VimeoPlayer;
|
|
5357
|
-
|
|
5358
|
-
// src/components/Video/CustomPlayer.tsx
|
|
5359
|
-
var import_react40 = __toESM(__require("react"));
|
|
5360
|
-
|
|
5361
|
-
// src/components/Video/Video.tsx
|
|
5362
|
-
var import_styled_components37 = __toESM(__require("styled-components"));
|
|
5363
|
-
var Video = import_styled_components37.default.video`
|
|
5364
|
-
position: absolute;
|
|
5365
|
-
top: 0;
|
|
5366
|
-
left: 0;
|
|
5367
|
-
object-fit: ${({ modal }) => modal ? "contain" : "cover"};
|
|
5368
|
-
`;
|
|
5369
|
-
var Video_default = Video;
|
|
5370
|
-
|
|
5371
|
-
// src/components/Video/CustomPlayer.tsx
|
|
5372
|
-
var CustomPlayer = ({ url, controls, modal, ratio = "56.25%", isPreview }) => {
|
|
5373
|
-
return /* @__PURE__ */ import_react40.default.createElement(Wrapper19, {
|
|
5374
|
-
ratio,
|
|
5375
|
-
isPreview
|
|
5376
|
-
}, /* @__PURE__ */ import_react40.default.createElement(Video_default, {
|
|
5377
|
-
key: url,
|
|
5378
|
-
modal,
|
|
5379
|
-
preload: "metadata",
|
|
5380
|
-
controls,
|
|
5381
|
-
width: "100%",
|
|
5382
|
-
height: "100%",
|
|
5383
|
-
src: url
|
|
5384
|
-
}));
|
|
5385
|
-
};
|
|
5386
|
-
var CustomPlayer_default = CustomPlayer;
|
|
5387
|
-
|
|
5388
|
-
// src/components/Video/EmbeddedVideoLightbox.tsx
|
|
5389
|
-
var ytNames = ["youtube.com", "youtu.be"];
|
|
5390
|
-
var isYouTubeVideo = (url) => ytNames.some((host) => url.indexOf(host) >= 0);
|
|
5391
|
-
var vNames = ["vimeo.com"];
|
|
5392
|
-
var isVimeoVideo = (url) => vNames.some((host) => url.indexOf(host) >= 0);
|
|
5393
|
-
var VideoPlayer = ({ url, autoplay = false, controls = true }) => {
|
|
5394
|
-
if (!url)
|
|
5395
|
-
return null;
|
|
5396
|
-
if (isYouTubeVideo(url))
|
|
5397
|
-
return /* @__PURE__ */ import_react41.default.createElement(YoutubePlayer_default, {
|
|
5398
|
-
url,
|
|
5399
|
-
autoplay
|
|
5400
|
-
});
|
|
5401
|
-
if (isVimeoVideo(url))
|
|
5402
|
-
return /* @__PURE__ */ import_react41.default.createElement(VimeoPlayer_default, {
|
|
5403
|
-
url,
|
|
5404
|
-
autoplay
|
|
5405
|
-
});
|
|
5406
|
-
return /* @__PURE__ */ import_react41.default.createElement(CustomPlayer_default, {
|
|
5407
|
-
ratio: "56.25%",
|
|
5408
|
-
controls,
|
|
5409
|
-
url
|
|
5410
|
-
});
|
|
5411
|
-
};
|
|
5412
|
-
var EmbeddedVideoLightbox_default = VideoPlayer;
|
|
5413
|
-
|
|
5414
|
-
// src/components/Sphere/SphereLightbox.tsx
|
|
5415
|
-
var import_react43 = __toESM(__require("react"));
|
|
5416
|
-
|
|
5417
|
-
// src/components/Sphere/SphereViewer.tsx
|
|
5418
|
-
var import_react42 = __toESM(__require("react"));
|
|
5419
|
-
|
|
5420
|
-
// src/components/Sphere/wrapper.tsx
|
|
5421
|
-
var import_styled_components38 = __toESM(__require("styled-components"));
|
|
5422
|
-
var compassSize = size(4);
|
|
5423
|
-
var controlBtnSize = size(4);
|
|
5424
|
-
var Wrapper20 = import_styled_components38.default.div`
|
|
5425
|
-
position: relative;
|
|
5426
|
-
width: 100%;
|
|
5427
|
-
height: 0 !important;
|
|
5428
|
-
padding-bottom: 66.666% !important; // 3:2
|
|
5429
|
-
|
|
5430
|
-
.pnlm-container {
|
|
5431
|
-
position: absolute;
|
|
5432
|
-
height: 100% !important;
|
|
5433
|
-
background-image: none;
|
|
5434
|
-
background-color: ${(props) => props.theme.color.accentDark};
|
|
5435
|
-
}
|
|
5436
|
-
|
|
5437
|
-
// Compass
|
|
5438
|
-
|
|
5439
|
-
.pnlm-compass {
|
|
5440
|
-
width: ${compassSize};
|
|
5441
|
-
height: ${compassSize};
|
|
5442
|
-
border-radius: 50%;
|
|
5443
|
-
bottom: ${size(2)};
|
|
5444
|
-
left: ${size(2)};
|
|
5445
|
-
right: auto;
|
|
5446
|
-
margin-top: 0;
|
|
5447
|
-
border: 5px solid transparent;
|
|
5448
|
-
border-top-color: ${(props) => props.theme.color.textLight};
|
|
5449
|
-
background-color: rgba(255, 255, 255, 0.4);
|
|
5450
|
-
background-image: none;
|
|
5451
|
-
backdrop-filter: blur(5px);
|
|
5452
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
5453
|
-
box-sizing: border-box;
|
|
5454
|
-
|
|
5455
|
-
&:hover {
|
|
5456
|
-
background-color: red;
|
|
5457
|
-
}
|
|
5458
|
-
}
|
|
5459
|
-
|
|
5460
|
-
// Controls (zoom & fullscreen button)
|
|
5461
|
-
|
|
5462
|
-
.pnlm-grab,
|
|
5463
|
-
.pnlm-grabbing {
|
|
5464
|
-
.pnlm-controls-container {
|
|
5465
|
-
display: block;
|
|
5466
|
-
}
|
|
5467
|
-
}
|
|
5468
|
-
|
|
5469
|
-
.pnlm-controls-container {
|
|
5470
|
-
display: none;
|
|
5471
|
-
top: ${size(2)};
|
|
5472
|
-
left: ${size(2)};
|
|
5473
|
-
}
|
|
5474
|
-
|
|
5475
|
-
.pnlm-controls {
|
|
5476
|
-
margin-top: 0;
|
|
5477
|
-
|
|
5478
|
-
& + .pnlm-controls {
|
|
5479
|
-
margin-top: ${size(1)};
|
|
5480
|
-
}
|
|
5481
|
-
}
|
|
5482
|
-
|
|
5483
|
-
// Fullscreen button
|
|
5484
|
-
|
|
5485
|
-
.pnlm-fullscreen-toggle-button {
|
|
5486
|
-
display: none;
|
|
5487
|
-
position: relative;
|
|
5488
|
-
width: ${controlBtnSize};
|
|
5489
|
-
height: ${controlBtnSize};
|
|
5490
|
-
background-image: none;
|
|
5491
|
-
background-color: rgba(255, 255, 255, 0.4);
|
|
5492
|
-
backdrop-filter: blur(5px);
|
|
5493
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
5494
|
-
color: ${(props) => props.theme.color.textDark};
|
|
5495
|
-
border: 0;
|
|
5496
|
-
border-radius: 50%;
|
|
5497
|
-
|
|
5498
|
-
&:hover {
|
|
5499
|
-
background-color: rgba(255, 255, 255, 0.6);
|
|
5500
|
-
}
|
|
5501
|
-
|
|
5502
|
-
&:before {
|
|
5503
|
-
position: absolute;
|
|
5504
|
-
top: 50%;
|
|
5505
|
-
left: 50%;
|
|
5506
|
-
transform: translate(-50%, -50%);
|
|
5507
|
-
font-size: 0.875rem;
|
|
5508
|
-
}
|
|
5509
|
-
}
|
|
5510
|
-
|
|
5511
|
-
.pnlm-fullscreen-toggle-button-inactive {
|
|
5512
|
-
&:before {
|
|
5513
|
-
content: '⤢';
|
|
5514
|
-
}
|
|
5515
|
-
|
|
5516
|
-
&.pnlm-fullscreen-toggle-button-active {
|
|
5517
|
-
&:before {
|
|
5518
|
-
content: '⤢';
|
|
5519
|
-
}
|
|
5520
|
-
}
|
|
5521
|
-
}
|
|
5522
|
-
|
|
5523
|
-
// Gyroscope (Orientation)
|
|
5524
|
-
|
|
5525
|
-
.pnlm-orientation-button {
|
|
5526
|
-
background-image: none;
|
|
5527
|
-
width: ${controlBtnSize};
|
|
5528
|
-
height: ${controlBtnSize};
|
|
5529
|
-
background-color: ${(props) => props.theme.color.accentDark};
|
|
5530
|
-
color: ${(props) => props.theme.color.textDark};
|
|
5531
|
-
border: 0;
|
|
5532
|
-
border-radius: 999px;
|
|
5533
|
-
|
|
5534
|
-
&:hover {
|
|
5535
|
-
background-color: red;
|
|
5536
|
-
}
|
|
5537
|
-
|
|
5538
|
-
&:before {
|
|
5539
|
-
content: 'A';
|
|
5540
|
-
position: absolute;
|
|
5541
|
-
top: 50%;
|
|
5542
|
-
left: 50%;
|
|
5543
|
-
transform: translate(-50%, -50%);
|
|
5544
|
-
font-size: 0.875rem;
|
|
5545
|
-
}
|
|
5546
|
-
|
|
5547
|
-
&.pnlm-orientation-button-active {
|
|
5548
|
-
background-color: green;
|
|
5549
|
-
|
|
5550
|
-
&:hover {
|
|
5551
|
-
background-color: pink;
|
|
5552
|
-
}
|
|
5553
|
-
}
|
|
5554
|
-
}
|
|
5555
|
-
|
|
5556
|
-
// Zoom controls
|
|
5557
|
-
|
|
5558
|
-
.pnlm-zoom-controls {
|
|
5559
|
-
display: none;
|
|
5560
|
-
height: auto;
|
|
5561
|
-
width: auto;
|
|
5562
|
-
background-color: transparent;
|
|
5563
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
5564
|
-
border: 0;
|
|
5565
|
-
border-radius: 999px;
|
|
5566
|
-
|
|
5567
|
-
> * {
|
|
5568
|
-
&:first-child {
|
|
5569
|
-
border-top-left-radius: 999px;
|
|
5570
|
-
border-top-right-radius: 999px;
|
|
5571
|
-
}
|
|
5572
|
-
|
|
5573
|
-
&:last-child {
|
|
5574
|
-
border-bottom-left-radius: 999px;
|
|
5575
|
-
border-bottom-right-radius: 999px;
|
|
5576
|
-
}
|
|
5577
|
-
}
|
|
5578
|
-
}
|
|
5579
|
-
|
|
5580
|
-
.pnlm-zoom-in,
|
|
5581
|
-
.pnlm-zoom-out {
|
|
5582
|
-
position: relative;
|
|
5583
|
-
display: block;
|
|
5584
|
-
width: ${controlBtnSize};
|
|
5585
|
-
height: ${controlBtnSize};
|
|
5586
|
-
background-image: none;
|
|
5587
|
-
background-color: rgba(255, 255, 255, 0.4);
|
|
5588
|
-
backdrop-filter: blur(5px);
|
|
5589
|
-
color: ${(props) => props.theme.color.textDark};
|
|
5590
|
-
border-radius: 0;
|
|
5591
|
-
|
|
5592
|
-
&:before {
|
|
5593
|
-
position: absolute;
|
|
5594
|
-
top: 50%;
|
|
5595
|
-
left: 50%;
|
|
5596
|
-
transform: translate(-50%, -50%);
|
|
5597
|
-
}
|
|
5598
|
-
|
|
5599
|
-
&:hover {
|
|
5600
|
-
background-color: rgba(255, 255, 255, 0.6);
|
|
5601
|
-
}
|
|
5602
|
-
}
|
|
5603
|
-
|
|
5604
|
-
.pnlm-zoom-in {
|
|
5605
|
-
top: auto;
|
|
5606
|
-
|
|
5607
|
-
&:before {
|
|
5608
|
-
content: '+';
|
|
5609
|
-
}
|
|
5610
|
-
}
|
|
5611
|
-
|
|
5612
|
-
.pnlm-zoom-out {
|
|
5613
|
-
bottom: auto;
|
|
5614
|
-
border-top: 1px solid ${(props) => props.theme.color.textDark};
|
|
5615
|
-
|
|
5616
|
-
&:before {
|
|
5617
|
-
content: '-';
|
|
5618
|
-
}
|
|
5619
|
-
}
|
|
5620
|
-
|
|
5621
|
-
// Load Button
|
|
5622
|
-
|
|
5623
|
-
.pnlm-load-button {
|
|
5624
|
-
top: auto;
|
|
5625
|
-
bottom: ${size(2)};
|
|
5626
|
-
transform: translateX(-50%);
|
|
5627
|
-
width: auto;
|
|
5628
|
-
height: auto;
|
|
5629
|
-
padding: ${size(1.75)} ${size(2)};
|
|
5630
|
-
border-radius: 3px;
|
|
5631
|
-
margin: 0;
|
|
5632
|
-
background-color: ${(props) => props.theme.color.accentDark};
|
|
5633
|
-
color: ${(props) => props.theme.color.textDark};
|
|
5634
|
-
line-height: 1.1;
|
|
5635
|
-
user-select: none;
|
|
5636
|
-
|
|
5637
|
-
&:hover {
|
|
5638
|
-
background-color: ${(props) => props.theme.color.accentDark};
|
|
5639
|
-
}
|
|
5640
|
-
|
|
5641
|
-
p {
|
|
5642
|
-
margin: 0;
|
|
5643
|
-
font-size: 0.875rem;
|
|
5644
|
-
}
|
|
5645
|
-
}
|
|
5646
|
-
|
|
5647
|
-
// Load box
|
|
5648
|
-
|
|
5649
|
-
.pnlm-load-box {
|
|
5650
|
-
background-color: transparent;
|
|
5651
|
-
height: auto;
|
|
5652
|
-
margin: 0;
|
|
5653
|
-
width: 150px;
|
|
5654
|
-
transform: translate(-50%, -50%);
|
|
5655
|
-
|
|
5656
|
-
> p {
|
|
5657
|
-
display: none;
|
|
5658
|
-
}
|
|
5659
|
-
}
|
|
5660
|
-
|
|
5661
|
-
// Load bar
|
|
5662
|
-
|
|
5663
|
-
.pnlm-lbar {
|
|
5664
|
-
width: 100%;
|
|
5665
|
-
background-color: rgba(255, 255, 255, 0.4);
|
|
5666
|
-
border: 0;
|
|
5667
|
-
}
|
|
5668
|
-
|
|
5669
|
-
.pnlm-lbar-fill {
|
|
5670
|
-
background-color: ${(props) => props.theme.color.textLight};
|
|
5671
|
-
}
|
|
5672
|
-
`;
|
|
5673
|
-
|
|
5674
|
-
// src/components/Sphere/SphereViewer.tsx
|
|
5675
|
-
var ReactPannellum = (0, import_react42.lazy)(() => import("pannellum-react/es/elements/Pannellum"));
|
|
5676
|
-
var SphereViewer = ({ id, src, preview, autoLoad, onStart }) => {
|
|
5677
|
-
const [number] = (0, import_react42.useState)(Math.floor(1e8 + Math.random() * 9e8));
|
|
5678
|
-
(0, import_react42.useEffect)(() => {
|
|
5679
|
-
setTimeout(() => {
|
|
5680
|
-
if (onStart) {
|
|
5681
|
-
const startBtn = document.querySelector(".pnlm-load-button");
|
|
5682
|
-
if (startBtn)
|
|
5683
|
-
startBtn.addEventListener("click", onStart);
|
|
5684
|
-
}
|
|
5685
|
-
}, 100);
|
|
5686
|
-
}, []);
|
|
5687
|
-
return /* @__PURE__ */ import_react42.default.createElement(Wrapper20, null, /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Suspense, {
|
|
5688
|
-
fallback: /* @__PURE__ */ import_react42.default.createElement(Loader_default, null)
|
|
5689
|
-
}, /* @__PURE__ */ import_react42.default.createElement(ReactPannellum, {
|
|
5690
|
-
id: `a-${id}-${number}`,
|
|
5691
|
-
image: src,
|
|
5692
|
-
hfov: 120,
|
|
5693
|
-
autoLoad,
|
|
5694
|
-
compass: true,
|
|
5695
|
-
width: "100%",
|
|
5696
|
-
preview
|
|
5697
|
-
})));
|
|
5698
|
-
};
|
|
5699
|
-
var SphereViewer_default = SphereViewer;
|
|
5700
|
-
|
|
5701
|
-
// src/components/Sphere/SphereLightbox.tsx
|
|
5702
|
-
var SphereLightbox = ({ url }) => /* @__PURE__ */ import_react43.default.createElement(SphereViewer_default, {
|
|
5703
|
-
id: url,
|
|
5704
|
-
src: url,
|
|
5705
|
-
preview: url,
|
|
5706
|
-
autoLoad: true
|
|
5707
|
-
});
|
|
5708
|
-
var SphereLightbox_default = SphereLightbox;
|
|
5709
|
-
|
|
5710
|
-
// src/components/ThreeSixty/ThreeSixtLightbox.tsx
|
|
5711
|
-
var import_react46 = __toESM(__require("react"));
|
|
5712
|
-
|
|
5713
|
-
// src/components/Gallery/MediaButton.tsx
|
|
5714
|
-
var import_react44 = __toESM(__require("react"));
|
|
5715
|
-
var MediaButton = ({ text, onClick }) => /* @__PURE__ */ import_react44.default.createElement(MediaButtonWrapper, null, /* @__PURE__ */ import_react44.default.createElement(ButtonSecondary, {
|
|
5716
|
-
onClick,
|
|
5717
|
-
title: text
|
|
5718
|
-
}, /* @__PURE__ */ import_react44.default.createElement(ButtonContent, null, text)));
|
|
5719
|
-
var MediaButton_default = MediaButton;
|
|
5720
|
-
|
|
5721
|
-
// src/components/ThreeSixty/Rotation.tsx
|
|
5722
|
-
var import_react45 = __toESM(__require("react"));
|
|
5723
|
-
var calculateCurrentFrame = (startFrame, delta, length) => {
|
|
5724
|
-
const frame = (startFrame + delta) % length;
|
|
5725
|
-
if (frame < 0) {
|
|
5726
|
-
return frame + length;
|
|
5727
|
-
}
|
|
5728
|
-
return frame;
|
|
5729
|
-
};
|
|
5730
|
-
var Rotation = ({ children }) => {
|
|
5731
|
-
const startFrame = (0, import_react45.useRef)(0);
|
|
5732
|
-
const pointerPosition = (0, import_react45.useRef)();
|
|
5733
|
-
const max = (0, import_react45.useRef)(0);
|
|
5734
|
-
const [state, setState] = (0, import_react45.useState)({
|
|
5735
|
-
current: 0,
|
|
5736
|
-
outsideMouseMove: false
|
|
5737
|
-
});
|
|
5738
|
-
(0, import_react45.useEffect)(() => {
|
|
5739
|
-
document.addEventListener("mouseup", touchEnd);
|
|
5740
|
-
return () => {
|
|
5741
|
-
window.document.removeEventListener("mouseup", touchEnd);
|
|
5742
|
-
window.document.body.removeEventListener("mousemove", mouseMove);
|
|
5743
|
-
window.document.body.removeEventListener("mouseup", mouseUp);
|
|
5744
|
-
};
|
|
5745
|
-
}, []);
|
|
5746
|
-
const touchMove = (event) => {
|
|
5747
|
-
const notTouched = typeof pointerPosition.current !== "number";
|
|
5748
|
-
event.preventDefault();
|
|
5749
|
-
if (notTouched) {
|
|
5750
|
-
return;
|
|
5751
|
-
}
|
|
5752
|
-
const childCount = import_react45.Children.count(children);
|
|
5753
|
-
const { offsetWidth } = event.currentTarget;
|
|
5754
|
-
const pointer = calculatePointerPosition(event);
|
|
5755
|
-
const max2 = offsetWidth;
|
|
5756
|
-
const offset = pointer - (pointerPosition.current || 0);
|
|
5757
|
-
const delta = Math.floor(offset / max2 * childCount);
|
|
5758
|
-
setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
|
|
5759
|
-
};
|
|
5760
|
-
const mouseMove = (event) => {
|
|
5761
|
-
const notTouched = typeof pointerPosition.current !== "number";
|
|
5762
|
-
event.preventDefault();
|
|
5763
|
-
if (notTouched || !state.outsideMouseMove)
|
|
5764
|
-
return;
|
|
5765
|
-
const childCount = import_react45.Children.count(children);
|
|
5766
|
-
const pointer = calculatePointerPosition(event);
|
|
5767
|
-
const offset = pointer - (pointerPosition.current || 0);
|
|
5768
|
-
const delta = Math.floor(offset / max.current * childCount);
|
|
5769
|
-
setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
|
|
5770
|
-
};
|
|
5771
|
-
const mouseUp = () => {
|
|
5772
|
-
window.document.body.removeEventListener("mousemove", mouseMove);
|
|
5773
|
-
window.document.body.removeEventListener("mouseup", mouseUp);
|
|
5774
|
-
pointerPosition.current = void 0;
|
|
5775
|
-
startFrame.current = 0;
|
|
5776
|
-
};
|
|
5777
|
-
const touchStart = (event) => {
|
|
5778
|
-
event.preventDefault();
|
|
5779
|
-
pointerPosition.current = calculatePointerPosition(event);
|
|
5780
|
-
startFrame.current = state.current;
|
|
5781
|
-
const { offsetWidth } = event.currentTarget;
|
|
5782
|
-
max.current = offsetWidth;
|
|
5783
|
-
window.document.body.addEventListener("mousemove", mouseMove);
|
|
5784
|
-
window.document.body.addEventListener("mouseup", mouseUp);
|
|
5785
|
-
};
|
|
5786
|
-
const touchEnd = (event) => {
|
|
5787
|
-
event.preventDefault();
|
|
5788
|
-
pointerPosition.current = void 0;
|
|
5789
|
-
startFrame.current = 0;
|
|
5790
|
-
};
|
|
5791
|
-
const onMouseEnter = () => {
|
|
5792
|
-
if (state.outsideMouseMove)
|
|
5793
|
-
setState({ ...state, outsideMouseMove: false });
|
|
5794
|
-
};
|
|
5795
|
-
const onMouseLeave = () => {
|
|
5796
|
-
if (!state.outsideMouseMove)
|
|
5797
|
-
setState({ ...state, outsideMouseMove: true });
|
|
5798
|
-
};
|
|
5799
|
-
const setCurrentFrame = (current) => {
|
|
5800
|
-
if (current !== state.current) {
|
|
5801
|
-
setState({ ...state, current });
|
|
5802
|
-
}
|
|
5803
|
-
};
|
|
5804
|
-
const calculatePointerPosition = (event) => {
|
|
5805
|
-
const { clientX } = event.type.indexOf("touch") === 0 ? event.changedTouches[0] : event;
|
|
5806
|
-
const { offsetLeft } = event.currentTarget;
|
|
5807
|
-
return clientX - offsetLeft;
|
|
5808
|
-
};
|
|
5809
|
-
return /* @__PURE__ */ import_react45.default.createElement("div", {
|
|
5810
|
-
onTouchStart: touchStart,
|
|
5811
|
-
onTouchMove: touchMove,
|
|
5812
|
-
onTouchEnd: touchEnd,
|
|
5813
|
-
onMouseDown: touchStart,
|
|
5814
|
-
onMouseMove: touchMove,
|
|
5815
|
-
onMouseEnter,
|
|
5816
|
-
onMouseLeave
|
|
5817
|
-
}, import_react45.Children.map(
|
|
5818
|
-
children,
|
|
5819
|
-
(child, i) => (0, import_react45.cloneElement)(child, {
|
|
5820
|
-
style: {
|
|
5821
|
-
width: "100%",
|
|
5822
|
-
display: state.current === i ? "block" : "none"
|
|
5823
|
-
}
|
|
5824
|
-
})
|
|
5825
|
-
));
|
|
5826
|
-
};
|
|
5827
|
-
var Rotation_default = Rotation;
|
|
5828
|
-
|
|
5829
|
-
// src/components/ThreeSixty/ThreeSixtLightbox.tsx
|
|
5830
|
-
var ThreeSixtyLightbox = ({ urls }) => {
|
|
5831
|
-
const [started2, setStarted] = (0, import_react46.useState)(false);
|
|
5832
|
-
const onStart = (0, import_react46.useCallback)(() => setStarted(true), []);
|
|
5833
|
-
if (!started2) {
|
|
5834
|
-
return /* @__PURE__ */ import_react46.default.createElement(Item9, null, /* @__PURE__ */ import_react46.default.createElement(Img2, {
|
|
5835
|
-
src: urls[0],
|
|
5836
|
-
alt: "alt"
|
|
5837
|
-
}), /* @__PURE__ */ import_react46.default.createElement(MediaButton_default, {
|
|
5838
|
-
text: "Starta 360\xB0 exteri\xF6rt",
|
|
5839
|
-
onClick: onStart
|
|
5840
|
-
}));
|
|
5841
|
-
}
|
|
5842
|
-
return /* @__PURE__ */ import_react46.default.createElement(Rotation_default, null, urls.map((image, i) => /* @__PURE__ */ import_react46.default.createElement(Img2, {
|
|
5843
|
-
key: image,
|
|
5844
|
-
src: image,
|
|
5845
|
-
alt: `Bild ${i + 1}`
|
|
5846
|
-
})));
|
|
5847
|
-
};
|
|
5848
|
-
var ThreeSixtLightbox_default = ThreeSixtyLightbox;
|
|
5849
|
-
|
|
5850
|
-
// src/components/Lightbox/index.tsx
|
|
5851
|
-
var Lightbox = ({ index: index2, media, onClose }) => {
|
|
5852
|
-
const onRef = (ref) => {
|
|
5853
|
-
if (ref) {
|
|
5854
|
-
setTimeout(() => {
|
|
5855
|
-
ref.scrollIntoView();
|
|
5856
|
-
}, 300);
|
|
5857
|
-
}
|
|
5858
|
-
};
|
|
5859
|
-
const onKeyDown = (e) => {
|
|
5860
|
-
if (e.keyCode === 27) {
|
|
5861
|
-
onClose();
|
|
5862
|
-
}
|
|
5863
|
-
};
|
|
5864
|
-
return /* @__PURE__ */ import_react47.default.createElement(Wrapper18, {
|
|
5865
|
-
ref: (ref) => ref?.focus(),
|
|
5866
|
-
onKeyDown,
|
|
5867
|
-
tabIndex: 0
|
|
5868
|
-
}, /* @__PURE__ */ import_react47.default.createElement(UiBlock2, {
|
|
5869
|
-
onClick: onClose,
|
|
5870
|
-
"aria-hidden": true
|
|
5871
|
-
}), media.map((m, i) => /* @__PURE__ */ import_react47.default.createElement(Item9, {
|
|
5872
|
-
key: i,
|
|
5873
|
-
ref: index2 === i ? onRef : void 0
|
|
5874
|
-
}, m.type === "image" && /* @__PURE__ */ import_react47.default.createElement(Img2, {
|
|
5875
|
-
id: `lightbox-image-${i}`,
|
|
5876
|
-
src: m.files[0].url,
|
|
5877
|
-
alt: `Bild ${i + 1}`
|
|
5878
|
-
}), m.type === "threesixty" && /* @__PURE__ */ import_react47.default.createElement(ThreeSixtLightbox_default, {
|
|
5879
|
-
urls: m.files.map((x) => x.url)
|
|
5880
|
-
}), m.type === "sphere" && /* @__PURE__ */ import_react47.default.createElement(SphereLightbox_default, {
|
|
5881
|
-
url: m.files[0].url
|
|
5882
|
-
}), m.type === "embedded" && /* @__PURE__ */ import_react47.default.createElement(EmbeddedVideoLightbox_default, {
|
|
5883
|
-
url: m.files[0].url
|
|
5884
|
-
}))), /* @__PURE__ */ import_react47.default.createElement(CloseBtn2, {
|
|
5885
|
-
onClick: onClose,
|
|
5886
|
-
title: "St\xE4ng"
|
|
5887
|
-
}, /* @__PURE__ */ import_react47.default.createElement(IconCancel, {
|
|
5888
|
-
block: true
|
|
5889
|
-
})));
|
|
5890
|
-
};
|
|
5891
|
-
var Lightbox_default = Lightbox;
|
|
5892
|
-
|
|
5893
|
-
// src/components/Video/EmbededVideo.tsx
|
|
5894
|
-
var import_react51 = __toESM(__require("react"));
|
|
5895
|
-
|
|
5896
|
-
// src/components/Video/useThumbnail.ts
|
|
5897
|
-
var import_react50 = __require("react");
|
|
5898
|
-
|
|
5899
|
-
// src/hooks/useVimeoThumbnail.ts
|
|
5900
|
-
var import_react49 = __require("react");
|
|
5901
|
-
|
|
5902
|
-
// src/hooks/useFetch.ts
|
|
5903
|
-
var import_react48 = __require("react");
|
|
5904
|
-
var cache = {};
|
|
5905
|
-
var getCachedResult = (key) => cache?.[key] || void 0;
|
|
5906
|
-
var setCachedResult = (key, value) => {
|
|
5907
|
-
cache[key] = value;
|
|
5908
|
-
};
|
|
5909
|
-
var pendingPromise = {};
|
|
5910
|
-
var isPendingPromise = (url) => !!pendingPromise[url];
|
|
5911
|
-
var setPendingPromise = (url, promise) => {
|
|
5912
|
-
pendingPromise = {
|
|
5913
|
-
...pendingPromise,
|
|
5914
|
-
[url]: promise
|
|
5915
|
-
};
|
|
5916
|
-
};
|
|
5917
|
-
var clearPendingPromise = (url) => {
|
|
5918
|
-
delete pendingPromise[url];
|
|
5919
|
-
};
|
|
5920
|
-
var useFetch = (path, options, skip, promiseCache) => {
|
|
5921
|
-
const [data, setData] = (0, import_react48.useState)();
|
|
5922
|
-
const [loading, setLoading] = (0, import_react48.useState)(false);
|
|
5923
|
-
const [error, setError] = (0, import_react48.useState)(false);
|
|
5924
|
-
const doFetch = (0, import_react48.useCallback)(async () => {
|
|
5925
|
-
const key = path.toString();
|
|
5926
|
-
const cached = getCachedResult(key);
|
|
5927
|
-
setError(false);
|
|
5928
|
-
if (cached) {
|
|
5929
|
-
setData(cached);
|
|
5930
|
-
return;
|
|
5931
|
-
}
|
|
5932
|
-
setLoading(true);
|
|
5933
|
-
try {
|
|
5934
|
-
const reusePromise = promiseCache && isPendingPromise(key);
|
|
5935
|
-
const request = reusePromise ? pendingPromise[key] : fetch(path, options);
|
|
5936
|
-
if (promiseCache) {
|
|
5937
|
-
setPendingPromise(key, request);
|
|
5938
|
-
}
|
|
5939
|
-
const result = await request;
|
|
5940
|
-
if (result.ok) {
|
|
5941
|
-
const json2 = await result.clone().json();
|
|
5942
|
-
setCachedResult(key, json2);
|
|
5943
|
-
setData(json2);
|
|
5944
|
-
}
|
|
5945
|
-
} catch (e) {
|
|
5946
|
-
setError(true);
|
|
5947
|
-
} finally {
|
|
5948
|
-
setLoading(false);
|
|
5949
|
-
clearPendingPromise(key);
|
|
5950
|
-
}
|
|
5951
|
-
return;
|
|
5952
|
-
}, [path, options]);
|
|
5953
|
-
(0, import_react48.useEffect)(() => {
|
|
5954
|
-
if (!skip) {
|
|
5955
|
-
doFetch();
|
|
5956
|
-
}
|
|
5957
|
-
}, [path, skip]);
|
|
5958
|
-
return {
|
|
5959
|
-
loading,
|
|
5960
|
-
data,
|
|
5961
|
-
error
|
|
5962
|
-
};
|
|
5963
|
-
};
|
|
5964
|
-
var useFetch_default = useFetch;
|
|
5965
|
-
|
|
5966
|
-
// src/hooks/useVimeoThumbnail.ts
|
|
5967
|
-
var useVimeoThumbnail = (id, small) => {
|
|
5968
|
-
const [thumbnail, setThumbnail] = (0, import_react49.useState)();
|
|
5969
|
-
const { data } = useFetch_default(
|
|
5970
|
-
`http://vimeo.com/api/v2/video/${id}.json`,
|
|
5971
|
-
{},
|
|
5972
|
-
!id || !!thumbnail,
|
|
5973
|
-
true
|
|
5974
|
-
);
|
|
5975
|
-
(0, import_react49.useEffect)(() => {
|
|
5976
|
-
if (data?.[0]) {
|
|
5977
|
-
if (small && data[0].thumbnail_small) {
|
|
5978
|
-
setThumbnail(data[0].thumbnail_small);
|
|
5979
|
-
} else if (data[0].thumbnail_large) {
|
|
5980
|
-
setThumbnail(data[0].thumbnail_large);
|
|
5981
|
-
}
|
|
5982
|
-
}
|
|
5983
|
-
}, [data]);
|
|
5984
|
-
return thumbnail;
|
|
5985
|
-
};
|
|
5986
|
-
var useVimeoThumbnail_default = useVimeoThumbnail;
|
|
5987
|
-
|
|
5988
|
-
// src/components/Video/useThumbnail.ts
|
|
5989
|
-
var useThumbnail = (url, small) => {
|
|
5990
|
-
if (url?.toLowerCase().endsWith(".mp4"))
|
|
5991
|
-
return;
|
|
5992
|
-
const [thumbnail, setThumbnail] = (0, import_react50.useState)();
|
|
5993
|
-
const vimeoId = url ? getVimeoId(url) : void 0;
|
|
5994
|
-
const vimeoThumbnail = useVimeoThumbnail_default(vimeoId, small);
|
|
5995
|
-
(0, import_react50.useEffect)(() => {
|
|
5996
|
-
if (url) {
|
|
5997
|
-
const youtubeThumbnail = getYoutubeThumbnail(url);
|
|
5998
|
-
if (youtubeThumbnail) {
|
|
5999
|
-
if (small) {
|
|
6000
|
-
setThumbnail([youtubeThumbnail.mqdefault]);
|
|
6001
|
-
} else {
|
|
6002
|
-
setThumbnail([youtubeThumbnail.maxresdefault, youtubeThumbnail.hqdefault]);
|
|
6003
|
-
}
|
|
6004
|
-
}
|
|
6005
|
-
}
|
|
6006
|
-
}, [url]);
|
|
6007
|
-
return vimeoThumbnail ? [vimeoThumbnail] : thumbnail;
|
|
6008
|
-
};
|
|
6009
|
-
var useThumbnail_default = useThumbnail;
|
|
6010
|
-
|
|
6011
|
-
// src/components/Modal/index.tsx
|
|
6012
|
-
var React48 = __toESM(__require("react"));
|
|
6013
|
-
|
|
6014
|
-
// src/components/Modal/wrapper.tsx
|
|
6015
|
-
var import_styled_components39 = __toESM(__require("styled-components"));
|
|
6016
|
-
var Wrapper21 = import_styled_components39.default.div.attrs(() => ({
|
|
6017
|
-
role: "dialog"
|
|
6018
|
-
}))`
|
|
6019
|
-
position: fixed;
|
|
6020
|
-
top: 0;
|
|
6021
|
-
bottom: 0;
|
|
6022
|
-
left: 0;
|
|
6023
|
-
right: 0;
|
|
6024
|
-
width: 100%;
|
|
6025
|
-
white-space: normal;
|
|
6026
|
-
text-align: left;
|
|
6027
|
-
z-index: 90;
|
|
6028
|
-
display: flex;
|
|
6029
|
-
align-items: center;
|
|
6030
|
-
justify-content: center;
|
|
6031
|
-
|
|
6032
|
-
${(props) => props.theme.breakpoint.Sm} {
|
|
6033
|
-
padding: ${size(2)};
|
|
6034
|
-
}
|
|
6035
|
-
`;
|
|
6036
|
-
var UiBlock3 = import_styled_components39.default.div.attrs(() => ({
|
|
6037
|
-
"aria-hidden": "true",
|
|
6038
|
-
role: "button"
|
|
6039
|
-
}))`
|
|
6040
|
-
position: fixed;
|
|
6041
|
-
top: 0;
|
|
6042
|
-
bottom: 0;
|
|
6043
|
-
left: 0;
|
|
6044
|
-
right: 0;
|
|
6045
|
-
background-color: rgba(0, 0, 0, 0.35);
|
|
6046
|
-
z-index: -1;
|
|
6047
|
-
|
|
6048
|
-
${(props) => props.theme.breakpoint.LtMd} {
|
|
6049
|
-
animation: ${fadeIn} 300ms ease forwards;
|
|
6050
|
-
}
|
|
6051
|
-
|
|
6052
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
6053
|
-
animation: ${fadeIn} 400ms ease forwards;
|
|
6054
|
-
}
|
|
6055
|
-
`;
|
|
6056
|
-
var Dialog = import_styled_components39.default.article.attrs(() => ({
|
|
6057
|
-
className: "wayke__theme wayke__font--regular"
|
|
6058
|
-
}))`
|
|
6059
|
-
display: flex;
|
|
6060
|
-
flex-direction: column;
|
|
6061
|
-
background-color: ${(props) => props.theme.color.bg};
|
|
6062
|
-
z-index: 1;
|
|
6063
|
-
width: 100%;
|
|
6064
|
-
max-width: 680px;
|
|
6065
|
-
max-height: 100%;
|
|
6066
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
|
6067
|
-
overflow: hidden;
|
|
6068
|
-
|
|
6069
|
-
${(props) => props.theme.breakpoint.LtSm} {
|
|
6070
|
-
align-self: flex-end;
|
|
6071
|
-
transform: translateY(100%);
|
|
6072
|
-
animation: ${noTransform} 300ms ease forwards;
|
|
6073
|
-
}
|
|
6074
|
-
|
|
6075
|
-
${(props) => props.theme.breakpoint.Sm} {
|
|
6076
|
-
transform: translateY(${size(2)});
|
|
6077
|
-
animation: ${fadeIn} 400ms ease, ${noTransform} 400ms ease forwards;
|
|
6078
|
-
}
|
|
6079
|
-
`;
|
|
6080
|
-
var Content4 = import_styled_components39.default.div`
|
|
6081
|
-
flex: 1 1 auto;
|
|
6082
|
-
overflow: auto;
|
|
6083
|
-
-webkit-overflow-scrolling: touch;
|
|
6084
|
-
`;
|
|
6085
|
-
var Header4 = import_styled_components39.default.header`
|
|
6086
|
-
display: flex;
|
|
6087
|
-
align-items: center;
|
|
6088
|
-
min-height: 60px;
|
|
6089
|
-
padding: ${size(3)};
|
|
6090
|
-
padding-bottom: 0;
|
|
6091
|
-
`;
|
|
6092
|
-
var Heading5 = import_styled_components39.default.div`
|
|
6093
|
-
flex: 1 1 auto;
|
|
6094
|
-
|
|
6095
|
-
${H1} {
|
|
6096
|
-
font-size: 1.5rem;
|
|
6097
|
-
}
|
|
6098
|
-
`;
|
|
6099
|
-
var Close2 = import_styled_components39.default.div`
|
|
6100
|
-
flex-shrink: 0;
|
|
6101
|
-
margin: ${size(-2)};
|
|
6102
|
-
padding-left: ${size(3)};
|
|
6103
|
-
`;
|
|
6104
|
-
var CloseBtn3 = (0, import_styled_components39.default)(ButtonReset)`
|
|
6105
|
-
display: block;
|
|
6106
|
-
padding: ${size(2)};
|
|
6107
|
-
`;
|
|
6108
|
-
var Body4 = import_styled_components39.default.div`
|
|
6109
|
-
padding: ${size(3)};
|
|
6110
|
-
`;
|
|
6111
|
-
var Image3 = import_styled_components39.default.img`
|
|
6112
|
-
display: block;
|
|
6113
|
-
width: calc(100% + ${size(6)});
|
|
6114
|
-
margin-left: ${size(-3)};
|
|
6115
|
-
margin-bottom: ${size(3)};
|
|
6116
|
-
`;
|
|
6117
|
-
var ModalFoldout = import_styled_components39.default.div`
|
|
6118
|
-
background-color: ${(props) => props.theme.color.accent};
|
|
6119
|
-
margin: ${size(-3)};
|
|
6120
|
-
margin-top: ${size(3)};
|
|
6121
|
-
padding: ${size(3)};
|
|
6122
|
-
`;
|
|
6123
|
-
var ModalFoldoutBody = import_styled_components39.default.div``;
|
|
6124
|
-
|
|
6125
|
-
// src/components/Modal/index.tsx
|
|
6126
|
-
var Modal = ({ id, title, onClose, children }) => {
|
|
6127
|
-
return /* @__PURE__ */ React48.createElement(portal_default, {
|
|
6128
|
-
id: id || portal_namespace_exports.DefaultPortal
|
|
6129
|
-
}, /* @__PURE__ */ React48.createElement(Wrapper21, {
|
|
6130
|
-
onClick: (e) => e.stopPropagation()
|
|
6131
|
-
}, /* @__PURE__ */ React48.createElement(UiBlock3, {
|
|
6132
|
-
onClick: onClose,
|
|
6133
|
-
title: "St\xE4ng modal"
|
|
6134
|
-
}), /* @__PURE__ */ React48.createElement(Dialog, null, /* @__PURE__ */ React48.createElement(Content4, null, /* @__PURE__ */ React48.createElement(Header4, null, /* @__PURE__ */ React48.createElement(Heading5, null, /* @__PURE__ */ React48.createElement(H1, {
|
|
6135
|
-
noMargin: true
|
|
6136
|
-
}, title)), /* @__PURE__ */ React48.createElement(Close2, null, /* @__PURE__ */ React48.createElement(CloseBtn3, {
|
|
6137
|
-
onClick: onClose,
|
|
6138
|
-
title: "St\xE4ng modal"
|
|
6139
|
-
}, /* @__PURE__ */ React48.createElement(IconCancel, {
|
|
6140
|
-
block: true
|
|
6141
|
-
})))), /* @__PURE__ */ React48.createElement(Body4, null, children)))));
|
|
6142
|
-
};
|
|
6143
|
-
var Modal_default = Modal;
|
|
6144
|
-
|
|
6145
|
-
// src/components/Video/EmbededVideo.tsx
|
|
6146
|
-
var GalleryEmbed = ({ src, index: index2 }) => {
|
|
6147
|
-
const [modal, setModal] = (0, import_react51.useState)();
|
|
6148
|
-
const thumbnail = useThumbnail_default(src);
|
|
6149
|
-
const onClick = (e) => {
|
|
6150
|
-
e.stopPropagation();
|
|
6151
|
-
setModal(src);
|
|
6152
|
-
};
|
|
6153
|
-
const onCloseModal = (e) => {
|
|
6154
|
-
e.stopPropagation();
|
|
6155
|
-
setModal(void 0);
|
|
6156
|
-
};
|
|
6157
|
-
const onError = (0, import_react51.useCallback)(
|
|
6158
|
-
(e) => onImageError(e, thumbnail),
|
|
6159
|
-
[thumbnail]
|
|
6160
|
-
);
|
|
6161
|
-
const onLoad = (0, import_react51.useCallback)(
|
|
6162
|
-
(e) => onImageLoad(e, thumbnail),
|
|
6163
|
-
[thumbnail]
|
|
6164
|
-
);
|
|
6165
|
-
const customVideo = src.toLowerCase().endsWith(".mp4");
|
|
6166
|
-
if (thumbnail?.length && !customVideo) {
|
|
6167
|
-
return /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(ImageFull, {
|
|
6168
|
-
onLoad,
|
|
6169
|
-
src: thumbnail[0],
|
|
6170
|
-
onError,
|
|
6171
|
-
alt: `Bild ${index2 + 1}`
|
|
6172
|
-
}), /* @__PURE__ */ import_react51.default.createElement(MediaButton_default, {
|
|
6173
|
-
text: "Spela video",
|
|
6174
|
-
onClick
|
|
6175
|
-
}), modal && /* @__PURE__ */ import_react51.default.createElement(Modal_default, {
|
|
6176
|
-
title: "Video",
|
|
6177
|
-
onClose: onCloseModal
|
|
6178
|
-
}, /* @__PURE__ */ import_react51.default.createElement(EmbeddedVideoLightbox_default, {
|
|
6179
|
-
url: modal
|
|
6180
|
-
})));
|
|
6181
|
-
}
|
|
6182
|
-
if (customVideo)
|
|
6183
|
-
return /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, /* @__PURE__ */ import_react51.default.createElement(CustomPlayer_default, {
|
|
6184
|
-
ratio: "66.66%",
|
|
6185
|
-
isPreview: true,
|
|
6186
|
-
controls: false,
|
|
6187
|
-
url: src
|
|
6188
|
-
}), /* @__PURE__ */ import_react51.default.createElement(MediaButton_default, {
|
|
6189
|
-
text: "Spela video",
|
|
6190
|
-
onClick
|
|
6191
|
-
}), modal && /* @__PURE__ */ import_react51.default.createElement(Modal_default, {
|
|
6192
|
-
title: "Video",
|
|
6193
|
-
onClose: onCloseModal
|
|
6194
|
-
}, /* @__PURE__ */ import_react51.default.createElement(EmbeddedVideoLightbox_default, {
|
|
6195
|
-
url: modal
|
|
6196
|
-
})));
|
|
6197
|
-
return null;
|
|
6198
|
-
};
|
|
6199
|
-
var EmbededVideo_default = GalleryEmbed;
|
|
6200
|
-
|
|
6201
|
-
// src/components/Video/QuickNavEmbeded.tsx
|
|
6202
|
-
var import_react52 = __toESM(__require("react"));
|
|
6203
|
-
var QuickNavEmbeded = ({ src, index: index2 }) => {
|
|
6204
|
-
const thumbnail = useThumbnail_default(src);
|
|
6205
|
-
const onError = (0, import_react52.useCallback)(
|
|
6206
|
-
(e) => onImageError(e, thumbnail),
|
|
6207
|
-
[thumbnail]
|
|
6208
|
-
);
|
|
6209
|
-
const onLoad = (0, import_react52.useCallback)(
|
|
6210
|
-
(e) => onImageLoad(e, thumbnail),
|
|
6211
|
-
[thumbnail]
|
|
6212
|
-
);
|
|
6213
|
-
const customVideo = src?.toLowerCase().endsWith(".mp4");
|
|
6214
|
-
if (thumbnail?.length && !customVideo)
|
|
6215
|
-
return /* @__PURE__ */ import_react52.default.createElement(QuickNavImg, {
|
|
6216
|
-
onLoad,
|
|
6217
|
-
src: thumbnail[0],
|
|
6218
|
-
onError,
|
|
6219
|
-
alt: `Bild ${index2 + 1}`
|
|
6220
|
-
});
|
|
6221
|
-
if (customVideo)
|
|
6222
|
-
return /* @__PURE__ */ import_react52.default.createElement(CustomPlayer_default, {
|
|
6223
|
-
key: index2,
|
|
6224
|
-
url: src,
|
|
6225
|
-
ratio: "66.66%"
|
|
6226
|
-
});
|
|
6227
|
-
return null;
|
|
6228
|
-
};
|
|
6229
|
-
var QuickNavEmbeded_default = QuickNavEmbeded;
|
|
6230
|
-
|
|
6231
|
-
// src/components/Sphere/Sphere.tsx
|
|
6232
|
-
var import_react53 = __toESM(__require("react"));
|
|
6233
|
-
var onMediaClick = (e, func) => {
|
|
6234
|
-
e.stopPropagation();
|
|
6235
|
-
e.preventDefault();
|
|
6236
|
-
func();
|
|
6237
|
-
};
|
|
6238
|
-
var Sphere = ({ url, preview, visible, onDisableNavigation, navigationDisabled }) => {
|
|
6239
|
-
if (!visible || !navigationDisabled && visible) {
|
|
6240
|
-
return /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(ImageFull, {
|
|
6241
|
-
src: preview,
|
|
6242
|
-
alt: "alt"
|
|
6243
|
-
}), /* @__PURE__ */ import_react53.default.createElement(MediaButton_default, {
|
|
6244
|
-
text: "Starta 360\xB0 interi\xF6rt",
|
|
6245
|
-
onClick: (e) => onMediaClick(e, onDisableNavigation)
|
|
6246
|
-
}));
|
|
6247
|
-
}
|
|
6248
|
-
if (navigationDisabled && visible) {
|
|
6249
|
-
return /* @__PURE__ */ import_react53.default.createElement(SphereViewer_default, {
|
|
6250
|
-
id: url,
|
|
6251
|
-
preview: url,
|
|
6252
|
-
src: url,
|
|
6253
|
-
autoLoad: true,
|
|
6254
|
-
onStart: onDisableNavigation
|
|
6255
|
-
});
|
|
6256
|
-
}
|
|
6257
|
-
return null;
|
|
6258
|
-
};
|
|
6259
|
-
var Sphere_default = Sphere;
|
|
6260
|
-
|
|
6261
|
-
// src/components/ThreeSixty/ThreeSixty.tsx
|
|
6262
|
-
var import_react54 = __toESM(__require("react"));
|
|
6263
|
-
var onMediaClick2 = (e, func) => {
|
|
6264
|
-
e.stopPropagation();
|
|
6265
|
-
e.preventDefault();
|
|
6266
|
-
func();
|
|
6267
|
-
};
|
|
6268
|
-
var ThreeSixty = ({ urls, visible, onDisableNavigation, navigationDisabled }) => {
|
|
6269
|
-
if (!visible || !navigationDisabled && visible) {
|
|
6270
|
-
return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement(Image2, {
|
|
6271
|
-
src: urls[0],
|
|
6272
|
-
alt: "alt"
|
|
6273
|
-
}), /* @__PURE__ */ import_react54.default.createElement(MediaButton_default, {
|
|
6274
|
-
text: "Starta 360\xB0 exteri\xF6rt",
|
|
6275
|
-
onClick: (e) => onMediaClick2(e, onDisableNavigation)
|
|
6276
|
-
}));
|
|
6277
|
-
}
|
|
6278
|
-
if (navigationDisabled && visible) {
|
|
6279
|
-
return /* @__PURE__ */ import_react54.default.createElement("div", {
|
|
6280
|
-
onClick: (e) => {
|
|
6281
|
-
e.stopPropagation();
|
|
6282
|
-
e.preventDefault();
|
|
6283
|
-
}
|
|
6284
|
-
}, /* @__PURE__ */ import_react54.default.createElement(Rotation_default, null, urls.map((image, i) => /* @__PURE__ */ import_react54.default.createElement(Image2, {
|
|
6285
|
-
key: image,
|
|
6286
|
-
src: image,
|
|
6287
|
-
alt: `Bild ${i + 1}`
|
|
6288
|
-
}))));
|
|
6289
|
-
}
|
|
6290
|
-
return null;
|
|
6291
|
-
};
|
|
6292
|
-
var ThreeSixty_default = ThreeSixty;
|
|
6293
|
-
|
|
6294
|
-
// src/components/Gallery/index.tsx
|
|
6295
|
-
var sliderSettings = {
|
|
6296
|
-
dots: false,
|
|
6297
|
-
arrows: false,
|
|
6298
|
-
infinite: true,
|
|
6299
|
-
speed: 300,
|
|
6300
|
-
slidesToShow: 1,
|
|
6301
|
-
slidesToScroll: 1
|
|
6302
|
-
};
|
|
6303
|
-
var Gallery = ({ media, placeholderImage }) => {
|
|
6304
|
-
const slider = (0, import_react55.useRef)(null);
|
|
6305
|
-
const quickNavRef = (0, import_react55.useRef)(null);
|
|
6306
|
-
const isDragging = (0, import_react55.useRef)(false);
|
|
6307
|
-
const [index2, setIndex] = (0, import_react55.useState)(0);
|
|
6308
|
-
const [lightbox, setLightbox] = (0, import_react55.useState)(false);
|
|
6309
|
-
const [navigationDisabled, setNavigationDisabled] = (0, import_react55.useState)(false);
|
|
6310
|
-
const beforeChange = (0, import_react55.useCallback)((_, newIndex) => {
|
|
6311
|
-
const element = quickNavRef.current?.querySelectorAll("li")?.[newIndex];
|
|
6312
|
-
if (element) {
|
|
6313
|
-
(0, import_scroll_into_view_if_needed.default)(element, { scrollMode: "if-needed", block: "nearest", inline: "nearest" });
|
|
6314
|
-
}
|
|
6315
|
-
setIndex(newIndex);
|
|
6316
|
-
}, []);
|
|
6317
|
-
const onMouseDown = (0, import_react55.useCallback)(() => {
|
|
6318
|
-
if (isDragging.current) {
|
|
6319
|
-
isDragging.current = false;
|
|
6320
|
-
}
|
|
6321
|
-
}, []);
|
|
6322
|
-
const onMouseMove = (0, import_react55.useCallback)(() => {
|
|
6323
|
-
if (!isDragging.current) {
|
|
6324
|
-
isDragging.current = true;
|
|
6325
|
-
}
|
|
6326
|
-
}, []);
|
|
6327
|
-
const onClick = (0, import_react55.useCallback)(() => {
|
|
6328
|
-
pubsub_default.publish("ImagesClick");
|
|
6329
|
-
if (!isDragging.current && !lightbox && !!media?.length) {
|
|
6330
|
-
setLightbox(true);
|
|
6331
|
-
}
|
|
6332
|
-
}, [lightbox, media]);
|
|
6333
|
-
const nextImage = (0, import_react55.useCallback)(() => {
|
|
6334
|
-
if (!slider || !slider.current) {
|
|
6335
|
-
return;
|
|
6336
|
-
}
|
|
6337
|
-
slider.current.slickNext();
|
|
6338
|
-
}, [slider]);
|
|
6339
|
-
const prevImage = (0, import_react55.useCallback)(() => {
|
|
6340
|
-
if (!slider || !slider.current) {
|
|
6341
|
-
return;
|
|
6342
|
-
}
|
|
6343
|
-
slider.current.slickPrev();
|
|
6344
|
-
}, [slider]);
|
|
6345
|
-
const goTo = (target) => {
|
|
6346
|
-
if (!slider || !slider.current) {
|
|
6347
|
-
return;
|
|
6348
|
-
}
|
|
6349
|
-
if (slider.current) {
|
|
6350
|
-
setIndex(target);
|
|
6351
|
-
slider.current.slickGoTo(target);
|
|
6352
|
-
}
|
|
6353
|
-
};
|
|
6354
|
-
const onDisableNavigation = () => {
|
|
6355
|
-
if (!isDragging.current)
|
|
6356
|
-
setNavigationDisabled(true);
|
|
6357
|
-
};
|
|
6358
|
-
const onEnableNavigation = (e) => {
|
|
6359
|
-
e.stopPropagation();
|
|
6360
|
-
isDragging.current = false;
|
|
6361
|
-
setNavigationDisabled(false);
|
|
6362
|
-
};
|
|
6363
|
-
const onToggleLightbox = (0, import_react55.useCallback)(() => setLightbox(!lightbox), [lightbox]);
|
|
6364
|
-
const mediaLength = media?.length || 0;
|
|
6365
|
-
const placeholder = (0, import_react55.useMemo)(
|
|
6366
|
-
() => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE,
|
|
6367
|
-
[placeholderImage]
|
|
6368
|
-
);
|
|
6369
|
-
return /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement(Wrapper17, null, /* @__PURE__ */ import_react55.default.createElement(Main, null, /* @__PURE__ */ import_react55.default.createElement(SliderWrapper, {
|
|
6370
|
-
onMouseDown,
|
|
6371
|
-
onMouseMove,
|
|
6372
|
-
onClick
|
|
6373
|
-
}, /* @__PURE__ */ import_react55.default.createElement(import_react_slick.default, {
|
|
6374
|
-
...sliderSettings,
|
|
6375
|
-
swipe: !navigationDisabled,
|
|
6376
|
-
touchMove: !navigationDisabled,
|
|
6377
|
-
swipeToSlide: !navigationDisabled,
|
|
6378
|
-
ref: slider,
|
|
6379
|
-
beforeChange
|
|
6380
|
-
}, !!media?.length ? media.map((m, i) => /* @__PURE__ */ import_react55.default.createElement(Item8, {
|
|
6381
|
-
key: m.files[0].url || i
|
|
6382
|
-
}, m.type === "image" && /* @__PURE__ */ import_react55.default.createElement(Image2, {
|
|
6383
|
-
src: m.files[0].formats.filter(notEmpty).find((x) => x.format === "1170x")?.url,
|
|
6384
|
-
alt: `Bild ${i + 1}`
|
|
6385
|
-
}), m.type === "threesixty" && /* @__PURE__ */ import_react55.default.createElement(ThreeSixty_default, {
|
|
6386
|
-
urls: m.files.map((x) => x.url),
|
|
6387
|
-
visible: i === index2,
|
|
6388
|
-
onDisableNavigation,
|
|
6389
|
-
navigationDisabled
|
|
6390
|
-
}), m.type === "embedded" && /* @__PURE__ */ import_react55.default.createElement(EmbededVideo_default, {
|
|
6391
|
-
src: m.files[0].url,
|
|
6392
|
-
index: i + 1
|
|
6393
|
-
}), m.type === "sphere" && /* @__PURE__ */ import_react55.default.createElement(Sphere_default, {
|
|
6394
|
-
visible: i === index2,
|
|
6395
|
-
url: m.files[0].url,
|
|
6396
|
-
preview: m.files[0].url,
|
|
6397
|
-
onDisableNavigation,
|
|
6398
|
-
navigationDisabled
|
|
6399
|
-
}))) : /* @__PURE__ */ import_react55.default.createElement(Item8, {
|
|
6400
|
-
key: placeholder
|
|
6401
|
-
}, /* @__PURE__ */ import_react55.default.createElement(Image2, {
|
|
6402
|
-
src: placeholder,
|
|
6403
|
-
alt: `Bild 1`
|
|
6404
|
-
}))), navigationDisabled && mediaLength > 1 && /* @__PURE__ */ import_react55.default.createElement(EnableNavigationButton, null, /* @__PURE__ */ import_react55.default.createElement(ButtonSecondary, {
|
|
6405
|
-
onClick: onEnableNavigation,
|
|
6406
|
-
title: "St\xE4ng"
|
|
6407
|
-
}, /* @__PURE__ */ import_react55.default.createElement(ButtonContent, null, "St\xE4ng")))), !navigationDisabled && mediaLength > 1 && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement(ArrowLeft, {
|
|
6408
|
-
onClick: prevImage,
|
|
6409
|
-
title: "F\xF6reg\xE5ende bild"
|
|
6410
|
-
}, /* @__PURE__ */ import_react55.default.createElement(IconChevronLeft, {
|
|
6411
|
-
block: true
|
|
6412
|
-
})), /* @__PURE__ */ import_react55.default.createElement(ArrowRight, {
|
|
6413
|
-
onClick: nextImage,
|
|
6414
|
-
title: "N\xE4sta bild"
|
|
6415
|
-
}, /* @__PURE__ */ import_react55.default.createElement(IconChevronRight, {
|
|
6416
|
-
block: true
|
|
6417
|
-
})))), /* @__PURE__ */ import_react55.default.createElement(Alt, null, /* @__PURE__ */ import_react55.default.createElement(QuickNav, {
|
|
6418
|
-
ref: quickNavRef
|
|
6419
|
-
}, !!media?.length ? media.map((m, i) => {
|
|
6420
|
-
const src = m.files[0].formats.filter(notEmpty).find((x) => x.format === "225x150")?.url || m.files[0].url;
|
|
6421
|
-
return /* @__PURE__ */ import_react55.default.createElement(QuickNavItem, {
|
|
6422
|
-
key: src || i,
|
|
6423
|
-
active: index2 === i
|
|
6424
|
-
}, /* @__PURE__ */ import_react55.default.createElement(QuickNavBtn, {
|
|
6425
|
-
onClick: () => goTo(i),
|
|
6426
|
-
title: `G\xE5 till bild ${i + 1}`
|
|
6427
|
-
}, m.type === "image" && /* @__PURE__ */ import_react55.default.createElement(QuickNavImg, {
|
|
6428
|
-
src,
|
|
6429
|
-
alt: `Bild ${i + 1}`
|
|
6430
|
-
}), m.type === "threesixty" && /* @__PURE__ */ import_react55.default.createElement(QuickNavImg, {
|
|
6431
|
-
src,
|
|
6432
|
-
alt: `Bild ${i + 1}`
|
|
6433
|
-
}), m.type === "embedded" && /* @__PURE__ */ import_react55.default.createElement(QuickNavEmbeded_default, {
|
|
6434
|
-
src,
|
|
6435
|
-
index: i
|
|
6436
|
-
}), m.type === "sphere" && /* @__PURE__ */ import_react55.default.createElement(QuickNavImg, {
|
|
6437
|
-
src: m.files[0].url,
|
|
6438
|
-
alt: `Bild ${i + 1}`
|
|
6439
|
-
})));
|
|
6440
|
-
}) : /* @__PURE__ */ import_react55.default.createElement(QuickNavItem, {
|
|
6441
|
-
key: placeholder,
|
|
6442
|
-
active: true
|
|
6443
|
-
}, /* @__PURE__ */ import_react55.default.createElement(QuickNavBtn, {
|
|
6444
|
-
onClick: () => goTo(0),
|
|
6445
|
-
title: `G\xE5 till bild 0`
|
|
6446
|
-
}, /* @__PURE__ */ import_react55.default.createElement(QuickNavImg, {
|
|
6447
|
-
src: placeholder,
|
|
6448
|
-
alt: `Bild 1`
|
|
6449
|
-
})))))), lightbox && !!media?.length && /* @__PURE__ */ import_react55.default.createElement(Lightbox_default, {
|
|
6450
|
-
media,
|
|
6451
|
-
index: index2,
|
|
6452
|
-
onClose: onToggleLightbox
|
|
6453
|
-
}));
|
|
6454
|
-
};
|
|
6455
|
-
var Gallery_default = Gallery;
|
|
6456
|
-
|
|
6457
|
-
// src/components/ProductPage/index.tsx
|
|
6458
|
-
var import_styled_components40 = __toESM(__require("styled-components"));
|
|
6459
|
-
var ProductPage = import_styled_components40.default.div`
|
|
6460
|
-
display: flex;
|
|
6461
|
-
flex-direction: column;
|
|
6462
|
-
|
|
6463
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
6464
|
-
flex-direction: row;
|
|
6465
|
-
}
|
|
6466
|
-
`;
|
|
6467
|
-
var ProductPageAside = import_styled_components40.default.div`
|
|
6468
|
-
${(props) => props.theme.breakpoint.LtMd} {
|
|
6469
|
-
display: contents;
|
|
6470
|
-
}
|
|
6471
|
-
|
|
6472
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
6473
|
-
flex-shrink: 0;
|
|
6474
|
-
width: calc(375px + ${size(2)});
|
|
6475
|
-
padding-right: ${size(2)};
|
|
6476
|
-
}
|
|
6477
|
-
`;
|
|
6478
|
-
var ProductPageMain = import_styled_components40.default.div`
|
|
6479
|
-
${(props) => props.theme.breakpoint.LtMd} {
|
|
6480
|
-
display: contents;
|
|
6481
|
-
}
|
|
6482
|
-
|
|
6483
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
6484
|
-
flex: 1 1 100%;
|
|
6485
|
-
min-width: 0;
|
|
6486
|
-
padding-left: ${size(2)};
|
|
6487
|
-
}
|
|
6488
|
-
`;
|
|
6489
|
-
var ProductPageAsideSection = import_styled_components40.default.div`
|
|
6490
|
-
${(props) => props.theme.breakpoint.LtMd} {
|
|
6491
|
-
order: ${(props) => props.mobileOrder};
|
|
6492
|
-
|
|
6493
|
-
& + & {
|
|
6494
|
-
margin-top: ${size(2)};
|
|
6495
|
-
}
|
|
6496
|
-
|
|
6497
|
-
:last-child {
|
|
6498
|
-
margin-bottom: ${size(4)};
|
|
6499
|
-
}
|
|
6500
|
-
|
|
6501
|
-
${ProductPageMain} & {
|
|
6502
|
-
margin-top: ${size(2)};
|
|
6503
|
-
}
|
|
6504
|
-
}
|
|
6505
|
-
|
|
6506
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
6507
|
-
& + & {
|
|
6508
|
-
margin-top: ${size(4)};
|
|
6509
|
-
}
|
|
6510
|
-
|
|
6511
|
-
${ProductPageMain} & {
|
|
6512
|
-
margin-bottom: ${size(8)};
|
|
6513
|
-
}
|
|
6514
|
-
}
|
|
6515
|
-
`;
|
|
6516
|
-
var ProductPageMainSection = import_styled_components40.default.div`
|
|
6517
|
-
${(props) => props.theme.breakpoint.LtMd} {
|
|
6518
|
-
order: 99;
|
|
6519
|
-
padding: ${size(4)} 0;
|
|
6520
|
-
border-top: ${size(1)} solid ${(props) => props.theme.color.accent};
|
|
6521
|
-
|
|
6522
|
-
${Wrapper} & {
|
|
6523
|
-
margin-left: ${size(-2)};
|
|
6524
|
-
margin-right: ${size(-2)};
|
|
6525
|
-
padding-left: ${size(2)};
|
|
6526
|
-
padding-right: ${size(2)};
|
|
6527
|
-
}
|
|
6528
|
-
}
|
|
6529
|
-
|
|
6530
|
-
${(props) => props.theme.breakpoint.Md} {
|
|
6531
|
-
& + & {
|
|
6532
|
-
margin-top: ${size(8)};
|
|
6533
|
-
padding-top: ${size(8)};
|
|
6534
|
-
border-top: 1px solid ${(props) => props.theme.color.border};
|
|
6535
|
-
}
|
|
6536
|
-
}
|
|
6537
|
-
`;
|
|
6538
|
-
var ProductPageContentLimit = import_styled_components40.default.div`
|
|
6539
|
-
max-width: 420px;
|
|
6540
|
-
`;
|
|
6541
|
-
|
|
6542
|
-
// src/hooks/useSearchItem.ts
|
|
6543
|
-
var import_client2 = __require("@apollo/client");
|
|
6544
|
-
|
|
6545
|
-
// src/queries/SEARCH_ITEM_QUERY.ts
|
|
6546
|
-
var import_client = __require("@apollo/client");
|
|
6547
|
-
var FinancialOptionDetail = import_client.gql`
|
|
6548
|
-
fragment FinancialOptionDetail on FinancialOptionDetail {
|
|
6549
|
-
current
|
|
6550
|
-
default
|
|
6551
|
-
max
|
|
6552
|
-
min
|
|
6553
|
-
step
|
|
4983
|
+
// src/queries/SEARCH_ITEM_QUERY.ts
|
|
4984
|
+
var import_client = __require("@apollo/client");
|
|
4985
|
+
var FinancialOptionDetail = import_client.gql`
|
|
4986
|
+
fragment FinancialOptionDetail on FinancialOptionDetail {
|
|
4987
|
+
current
|
|
4988
|
+
default
|
|
4989
|
+
max
|
|
4990
|
+
min
|
|
4991
|
+
step
|
|
6554
4992
|
}
|
|
6555
4993
|
`;
|
|
6556
4994
|
var HoursOpen = import_client.gql`
|
|
@@ -6772,30 +5210,164 @@
|
|
|
6772
5210
|
title
|
|
6773
5211
|
}
|
|
6774
5212
|
}
|
|
6775
|
-
${HoursOpen}
|
|
6776
|
-
${FinancialOptionDetail}
|
|
5213
|
+
${HoursOpen}
|
|
5214
|
+
${FinancialOptionDetail}
|
|
5215
|
+
`;
|
|
5216
|
+
var SEARCH_ITEM_QUERY_default = SEARCH_ITEM_QUERY;
|
|
5217
|
+
|
|
5218
|
+
// src/hooks/useSearchItem.ts
|
|
5219
|
+
var useSearchItem = (id) => (0, import_client2.useQuery)(SEARCH_ITEM_QUERY_default, {
|
|
5220
|
+
variables: { id },
|
|
5221
|
+
skip: !id
|
|
5222
|
+
});
|
|
5223
|
+
var useSearchItem_default = useSearchItem;
|
|
5224
|
+
|
|
5225
|
+
// src/components/Modal/index.tsx
|
|
5226
|
+
var React39 = __toESM(__require("react"));
|
|
5227
|
+
|
|
5228
|
+
// src/components/Modal/wrapper.tsx
|
|
5229
|
+
var import_styled_components35 = __toESM(__require("styled-components"));
|
|
5230
|
+
var Wrapper17 = import_styled_components35.default.div.attrs(() => ({
|
|
5231
|
+
role: "dialog"
|
|
5232
|
+
}))`
|
|
5233
|
+
position: fixed;
|
|
5234
|
+
top: 0;
|
|
5235
|
+
bottom: 0;
|
|
5236
|
+
left: 0;
|
|
5237
|
+
right: 0;
|
|
5238
|
+
width: 100%;
|
|
5239
|
+
white-space: normal;
|
|
5240
|
+
text-align: left;
|
|
5241
|
+
z-index: 90;
|
|
5242
|
+
display: flex;
|
|
5243
|
+
align-items: center;
|
|
5244
|
+
justify-content: center;
|
|
5245
|
+
|
|
5246
|
+
${(props) => props.theme.breakpoint.Sm} {
|
|
5247
|
+
padding: ${size(2)};
|
|
5248
|
+
}
|
|
5249
|
+
`;
|
|
5250
|
+
var UiBlock2 = import_styled_components35.default.div.attrs(() => ({
|
|
5251
|
+
"aria-hidden": "true",
|
|
5252
|
+
role: "button"
|
|
5253
|
+
}))`
|
|
5254
|
+
position: fixed;
|
|
5255
|
+
top: 0;
|
|
5256
|
+
bottom: 0;
|
|
5257
|
+
left: 0;
|
|
5258
|
+
right: 0;
|
|
5259
|
+
background-color: rgba(0, 0, 0, 0.35);
|
|
5260
|
+
z-index: -1;
|
|
5261
|
+
|
|
5262
|
+
${(props) => props.theme.breakpoint.LtMd} {
|
|
5263
|
+
animation: ${fadeIn} 300ms ease forwards;
|
|
5264
|
+
}
|
|
5265
|
+
|
|
5266
|
+
${(props) => props.theme.breakpoint.Md} {
|
|
5267
|
+
animation: ${fadeIn} 400ms ease forwards;
|
|
5268
|
+
}
|
|
5269
|
+
`;
|
|
5270
|
+
var Dialog = import_styled_components35.default.article.attrs(() => ({
|
|
5271
|
+
className: "wayke__theme wayke__font--regular"
|
|
5272
|
+
}))`
|
|
5273
|
+
display: flex;
|
|
5274
|
+
flex-direction: column;
|
|
5275
|
+
background-color: ${(props) => props.theme.color.bg};
|
|
5276
|
+
z-index: 1;
|
|
5277
|
+
width: 100%;
|
|
5278
|
+
max-width: 680px;
|
|
5279
|
+
max-height: 100%;
|
|
5280
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
|
5281
|
+
overflow: hidden;
|
|
5282
|
+
|
|
5283
|
+
${(props) => props.theme.breakpoint.LtSm} {
|
|
5284
|
+
align-self: flex-end;
|
|
5285
|
+
transform: translateY(100%);
|
|
5286
|
+
animation: ${noTransform} 300ms ease forwards;
|
|
5287
|
+
}
|
|
5288
|
+
|
|
5289
|
+
${(props) => props.theme.breakpoint.Sm} {
|
|
5290
|
+
transform: translateY(${size(2)});
|
|
5291
|
+
animation: ${fadeIn} 400ms ease, ${noTransform} 400ms ease forwards;
|
|
5292
|
+
}
|
|
6777
5293
|
`;
|
|
6778
|
-
var
|
|
5294
|
+
var Content4 = import_styled_components35.default.div`
|
|
5295
|
+
flex: 1 1 auto;
|
|
5296
|
+
overflow: auto;
|
|
5297
|
+
-webkit-overflow-scrolling: touch;
|
|
5298
|
+
`;
|
|
5299
|
+
var Header4 = import_styled_components35.default.header`
|
|
5300
|
+
display: flex;
|
|
5301
|
+
align-items: center;
|
|
5302
|
+
min-height: 60px;
|
|
5303
|
+
padding: ${size(3)};
|
|
5304
|
+
padding-bottom: 0;
|
|
5305
|
+
`;
|
|
5306
|
+
var Heading5 = import_styled_components35.default.div`
|
|
5307
|
+
flex: 1 1 auto;
|
|
6779
5308
|
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
|
|
6783
|
-
|
|
6784
|
-
|
|
6785
|
-
|
|
5309
|
+
${H1} {
|
|
5310
|
+
font-size: 1.5rem;
|
|
5311
|
+
}
|
|
5312
|
+
`;
|
|
5313
|
+
var Close2 = import_styled_components35.default.div`
|
|
5314
|
+
flex-shrink: 0;
|
|
5315
|
+
margin: ${size(-2)};
|
|
5316
|
+
padding-left: ${size(3)};
|
|
5317
|
+
`;
|
|
5318
|
+
var CloseBtn2 = (0, import_styled_components35.default)(ButtonReset)`
|
|
5319
|
+
display: block;
|
|
5320
|
+
padding: ${size(2)};
|
|
5321
|
+
`;
|
|
5322
|
+
var Body4 = import_styled_components35.default.div`
|
|
5323
|
+
padding: ${size(3)};
|
|
5324
|
+
`;
|
|
5325
|
+
var Image2 = import_styled_components35.default.img`
|
|
5326
|
+
display: block;
|
|
5327
|
+
width: calc(100% + ${size(6)});
|
|
5328
|
+
margin-left: ${size(-3)};
|
|
5329
|
+
margin-bottom: ${size(3)};
|
|
5330
|
+
`;
|
|
5331
|
+
var ModalFoldout = import_styled_components35.default.div`
|
|
5332
|
+
background-color: ${(props) => props.theme.color.accent};
|
|
5333
|
+
margin: ${size(-3)};
|
|
5334
|
+
margin-top: ${size(3)};
|
|
5335
|
+
padding: ${size(3)};
|
|
5336
|
+
`;
|
|
5337
|
+
var ModalFoldoutBody = import_styled_components35.default.div``;
|
|
5338
|
+
|
|
5339
|
+
// src/components/Modal/index.tsx
|
|
5340
|
+
var Modal = ({ id, title, onClose, children }) => {
|
|
5341
|
+
return /* @__PURE__ */ React39.createElement(portal_default, {
|
|
5342
|
+
id: id || portal_namespace_exports.DefaultPortal
|
|
5343
|
+
}, /* @__PURE__ */ React39.createElement(Wrapper17, {
|
|
5344
|
+
onClick: (e) => e.stopPropagation()
|
|
5345
|
+
}, /* @__PURE__ */ React39.createElement(UiBlock2, {
|
|
5346
|
+
onClick: onClose,
|
|
5347
|
+
title: "St\xE4ng modal"
|
|
5348
|
+
}), /* @__PURE__ */ React39.createElement(Dialog, null, /* @__PURE__ */ React39.createElement(Content4, null, /* @__PURE__ */ React39.createElement(Header4, null, /* @__PURE__ */ React39.createElement(Heading5, null, /* @__PURE__ */ React39.createElement(H1, {
|
|
5349
|
+
noMargin: true
|
|
5350
|
+
}, title)), /* @__PURE__ */ React39.createElement(Close2, null, /* @__PURE__ */ React39.createElement(CloseBtn2, {
|
|
5351
|
+
onClick: onClose,
|
|
5352
|
+
title: "St\xE4ng modal"
|
|
5353
|
+
}, /* @__PURE__ */ React39.createElement(IconCancel, {
|
|
5354
|
+
block: true
|
|
5355
|
+
})))), /* @__PURE__ */ React39.createElement(Body4, null, children)))));
|
|
5356
|
+
};
|
|
5357
|
+
var Modal_default = Modal;
|
|
6786
5358
|
|
|
6787
5359
|
// src/components/FinancialOptions/index.tsx
|
|
6788
|
-
var
|
|
5360
|
+
var import_react46 = __toESM(__require("react"));
|
|
6789
5361
|
|
|
6790
5362
|
// src/components/FinancialOptions/leasing.tsx
|
|
6791
|
-
var
|
|
5363
|
+
var import_react40 = __toESM(__require("react"));
|
|
6792
5364
|
|
|
6793
5365
|
// src/components/OptionBox/index.tsx
|
|
6794
|
-
var
|
|
5366
|
+
var React40 = __toESM(__require("react"));
|
|
6795
5367
|
|
|
6796
5368
|
// src/components/OptionBox/wrapper.tsx
|
|
6797
|
-
var
|
|
6798
|
-
var
|
|
5369
|
+
var import_styled_components36 = __toESM(__require("styled-components"));
|
|
5370
|
+
var Wrapper18 = import_styled_components36.default.div`
|
|
6799
5371
|
display: flex;
|
|
6800
5372
|
align-items: center;
|
|
6801
5373
|
padding: ${size(1)};
|
|
@@ -6806,14 +5378,14 @@
|
|
|
6806
5378
|
margin-top: ${size(1)};
|
|
6807
5379
|
}
|
|
6808
5380
|
`;
|
|
6809
|
-
var Logo2 =
|
|
5381
|
+
var Logo2 = import_styled_components36.default.div`
|
|
6810
5382
|
position: relative;
|
|
6811
5383
|
flex-shrink: 0;
|
|
6812
5384
|
margin-right: ${size(1)};
|
|
6813
5385
|
width: ${size(9.5)};
|
|
6814
5386
|
height: ${size(6)};
|
|
6815
5387
|
`;
|
|
6816
|
-
var LogoImg =
|
|
5388
|
+
var LogoImg = import_styled_components36.default.img`
|
|
6817
5389
|
display: block;
|
|
6818
5390
|
position: absolute;
|
|
6819
5391
|
left: 0;
|
|
@@ -6824,17 +5396,17 @@
|
|
|
6824
5396
|
max-width: 100%;
|
|
6825
5397
|
max-height: 100%;
|
|
6826
5398
|
`;
|
|
6827
|
-
var Content5 =
|
|
5399
|
+
var Content5 = import_styled_components36.default.div`
|
|
6828
5400
|
flex: 1 1 auto;
|
|
6829
5401
|
text-align: right;
|
|
6830
5402
|
line-height: 1.4;
|
|
6831
5403
|
`;
|
|
6832
|
-
var OptionBoxHeading =
|
|
5404
|
+
var OptionBoxHeading = import_styled_components36.default.div.attrs(() => ({
|
|
6833
5405
|
className: "wayke__theme wayke__font--bold"
|
|
6834
5406
|
}))`
|
|
6835
5407
|
font-size: 1rem;
|
|
6836
5408
|
`;
|
|
6837
|
-
var OptionBoxContent =
|
|
5409
|
+
var OptionBoxContent = import_styled_components36.default.div`
|
|
6838
5410
|
margin-top: ${size(0.5)};
|
|
6839
5411
|
font-size: 0.875rem;
|
|
6840
5412
|
|
|
@@ -6844,24 +5416,24 @@
|
|
|
6844
5416
|
`;
|
|
6845
5417
|
|
|
6846
5418
|
// src/components/OptionBox/index.tsx
|
|
6847
|
-
var OptionBox = ({ logo, logo2x, logoAlt, children }) => /* @__PURE__ */
|
|
5419
|
+
var OptionBox = ({ logo, logo2x, logoAlt, children }) => /* @__PURE__ */ React40.createElement(Wrapper18, null, logo && /* @__PURE__ */ React40.createElement(Logo2, null, /* @__PURE__ */ React40.createElement(LogoImg, {
|
|
6848
5420
|
src: logo,
|
|
6849
5421
|
srcSet: logo2x,
|
|
6850
5422
|
alt: logoAlt
|
|
6851
|
-
})), /* @__PURE__ */
|
|
5423
|
+
})), /* @__PURE__ */ React40.createElement(Content5, null, children));
|
|
6852
5424
|
var OptionBox_default = OptionBox;
|
|
6853
5425
|
|
|
6854
5426
|
// src/components/DataList/index.tsx
|
|
6855
|
-
var
|
|
5427
|
+
var import_react39 = __toESM(__require("react"));
|
|
6856
5428
|
|
|
6857
5429
|
// src/components/DataList/wrapper.tsx
|
|
6858
|
-
var
|
|
6859
|
-
var List8 =
|
|
5430
|
+
var import_styled_components37 = __toESM(__require("styled-components"));
|
|
5431
|
+
var List8 = import_styled_components37.default.ul`
|
|
6860
5432
|
list-style: none;
|
|
6861
5433
|
padding: 0;
|
|
6862
5434
|
margin: 0;
|
|
6863
5435
|
`;
|
|
6864
|
-
var
|
|
5436
|
+
var Item8 = import_styled_components37.default.li`
|
|
6865
5437
|
display: flex;
|
|
6866
5438
|
align-items: flex-start;
|
|
6867
5439
|
|
|
@@ -6869,10 +5441,10 @@
|
|
|
6869
5441
|
margin-top: ${size(1)};
|
|
6870
5442
|
}
|
|
6871
5443
|
`;
|
|
6872
|
-
var Label7 =
|
|
5444
|
+
var Label7 = import_styled_components37.default.div`
|
|
6873
5445
|
flex: 1 1 auto;
|
|
6874
5446
|
`;
|
|
6875
|
-
var Value2 =
|
|
5447
|
+
var Value2 = import_styled_components37.default.div.attrs(() => ({
|
|
6876
5448
|
className: "wayke__theme wayke__font--bold"
|
|
6877
5449
|
}))`
|
|
6878
5450
|
flex-shrink: 0;
|
|
@@ -6880,25 +5452,25 @@
|
|
|
6880
5452
|
`;
|
|
6881
5453
|
|
|
6882
5454
|
// src/components/DataList/index.tsx
|
|
6883
|
-
var DataList = ({ items }) => /* @__PURE__ */
|
|
5455
|
+
var DataList = ({ items }) => /* @__PURE__ */ import_react39.default.createElement(List8, null, items.map((item) => /* @__PURE__ */ import_react39.default.createElement(Item8, {
|
|
6884
5456
|
key: item.label
|
|
6885
|
-
}, /* @__PURE__ */
|
|
5457
|
+
}, /* @__PURE__ */ import_react39.default.createElement(Label7, null, item.label), /* @__PURE__ */ import_react39.default.createElement(Value2, null, item.value))));
|
|
6886
5458
|
var DataList_default = DataList;
|
|
6887
5459
|
|
|
6888
5460
|
// src/components/FinancialOptions/leasing.tsx
|
|
6889
5461
|
var Leasing = ({ financialOption }) => {
|
|
6890
|
-
const [modal, setModal] = (0,
|
|
6891
|
-
const toggleModal = (0,
|
|
5462
|
+
const [modal, setModal] = (0, import_react40.useState)(false);
|
|
5463
|
+
const toggleModal = (0, import_react40.useCallback)(() => setModal(!modal), [modal]);
|
|
6892
5464
|
const { image, description, monthlyCost, duration, mileage } = financialOption;
|
|
6893
|
-
return /* @__PURE__ */
|
|
5465
|
+
return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, modal && /* @__PURE__ */ import_react40.default.createElement(Modal_default, {
|
|
6894
5466
|
title: "Privatleasing",
|
|
6895
5467
|
onClose: toggleModal
|
|
6896
|
-
}, image && /* @__PURE__ */
|
|
5468
|
+
}, image && /* @__PURE__ */ import_react40.default.createElement(Image2, {
|
|
6897
5469
|
src: image,
|
|
6898
5470
|
alt: "Privatleasing"
|
|
6899
|
-
}), description && /* @__PURE__ */
|
|
5471
|
+
}), description && /* @__PURE__ */ import_react40.default.createElement(Content_default, {
|
|
6900
5472
|
dangerouslySetInnerHTML: { __html: description }
|
|
6901
|
-
}), /* @__PURE__ */
|
|
5473
|
+
}), /* @__PURE__ */ import_react40.default.createElement(ModalFoldout, null, /* @__PURE__ */ import_react40.default.createElement(ModalFoldoutBody, null, /* @__PURE__ */ import_react40.default.createElement(DataList_default, {
|
|
6902
5474
|
items: [
|
|
6903
5475
|
{
|
|
6904
5476
|
label: "M\xE5nadskostnad",
|
|
@@ -6913,14 +5485,14 @@
|
|
|
6913
5485
|
value: `${numberSeparator(mileage?.current || 0)} mil/\xE5r`
|
|
6914
5486
|
}
|
|
6915
5487
|
]
|
|
6916
|
-
})))), /* @__PURE__ */
|
|
5488
|
+
})))), /* @__PURE__ */ import_react40.default.createElement(OptionBox_default, null, /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, monthlyCost !== null && monthlyCost !== void 0 && /* @__PURE__ */ import_react40.default.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/m\xE5n`)), /* @__PURE__ */ import_react40.default.createElement(OptionBoxContent, null, /* @__PURE__ */ import_react40.default.createElement("p", null, "Privatleasing", " ", mileage?.current && duration?.current && /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, /* @__PURE__ */ import_react40.default.createElement(UtilityTextPrimary, null, numberSeparator(mileage?.current), " mil/\xE5r"), " ", "i ", /* @__PURE__ */ import_react40.default.createElement(UtilityTextPrimary, null, duration?.current, " m\xE5n"), ".", " ")), /* @__PURE__ */ import_react40.default.createElement("p", null, /* @__PURE__ */ import_react40.default.createElement(ButtonInline, {
|
|
6917
5489
|
onClick: toggleModal
|
|
6918
5490
|
}, "L\xE4s mer")))));
|
|
6919
5491
|
};
|
|
6920
5492
|
var leasing_default = Leasing;
|
|
6921
5493
|
|
|
6922
5494
|
// src/components/FinancialOptions/loan.tsx
|
|
6923
|
-
var
|
|
5495
|
+
var import_react45 = __toESM(__require("react"));
|
|
6924
5496
|
|
|
6925
5497
|
// src/hooks/useLoan.ts
|
|
6926
5498
|
var import_client4 = __require("@apollo/client");
|
|
@@ -6976,22 +5548,22 @@
|
|
|
6976
5548
|
var useLoan_default = useLoanCalculation;
|
|
6977
5549
|
|
|
6978
5550
|
// src/components/FinancialOptions/LoanModal.tsx
|
|
6979
|
-
var
|
|
5551
|
+
var import_react44 = __toESM(__require("react"));
|
|
6980
5552
|
|
|
6981
5553
|
// src/components/ContentLogo/index.tsx
|
|
6982
|
-
var
|
|
6983
|
-
var ContentLogo =
|
|
5554
|
+
var import_styled_components38 = __toESM(__require("styled-components"));
|
|
5555
|
+
var ContentLogo = import_styled_components38.default.div`
|
|
6984
5556
|
${(props) => props.theme.breakpoint.Sm} {
|
|
6985
5557
|
display: flex;
|
|
6986
5558
|
align-items: flex-start;
|
|
6987
5559
|
}
|
|
6988
5560
|
`;
|
|
6989
|
-
var ContentLogoText =
|
|
5561
|
+
var ContentLogoText = import_styled_components38.default.div`
|
|
6990
5562
|
${(props) => props.theme.breakpoint.Sm} {
|
|
6991
5563
|
flex: 1 1 auto;
|
|
6992
5564
|
}
|
|
6993
5565
|
`;
|
|
6994
|
-
var ContentLogoMedia =
|
|
5566
|
+
var ContentLogoMedia = import_styled_components38.default.div`
|
|
6995
5567
|
${(props) => props.theme.breakpoint.LtSm} {
|
|
6996
5568
|
margin-top: ${size(2)};
|
|
6997
5569
|
}
|
|
@@ -7003,43 +5575,43 @@
|
|
|
7003
5575
|
`;
|
|
7004
5576
|
|
|
7005
5577
|
// src/components/RangeSlider/SliderWithLabel.tsx
|
|
7006
|
-
var
|
|
5578
|
+
var import_react43 = __toESM(__require("react"));
|
|
7007
5579
|
|
|
7008
5580
|
// src/components/RangeSliderLabel/index.tsx
|
|
7009
|
-
var
|
|
5581
|
+
var import_react41 = __toESM(__require("react"));
|
|
7010
5582
|
|
|
7011
5583
|
// src/components/RangeSliderLabel/wrapper.tsx
|
|
7012
|
-
var
|
|
7013
|
-
var
|
|
5584
|
+
var import_styled_components39 = __toESM(__require("styled-components"));
|
|
5585
|
+
var Wrapper19 = import_styled_components39.default.div`
|
|
7014
5586
|
display: flex;
|
|
7015
5587
|
align-items: flex-end;
|
|
7016
5588
|
`;
|
|
7017
|
-
var Label8 =
|
|
5589
|
+
var Label8 = import_styled_components39.default.div.attrs(() => ({
|
|
7018
5590
|
className: "wayke__theme wayke__font--bold"
|
|
7019
5591
|
}))`
|
|
7020
5592
|
flex: 1 1 auto;
|
|
7021
5593
|
`;
|
|
7022
|
-
var Value3 =
|
|
5594
|
+
var Value3 = import_styled_components39.default.div.attrs(() => ({
|
|
7023
5595
|
className: "wayke__theme wayke__font--bold wayke__color--primary-text"
|
|
7024
5596
|
}))`
|
|
7025
5597
|
flex-shrink: 0;
|
|
7026
5598
|
padding-left: ${size(2)};
|
|
7027
5599
|
font-size: 1.125rem;
|
|
7028
5600
|
|
|
7029
|
-
${({ isHighlighted }) => isHighlighted &&
|
|
5601
|
+
${({ isHighlighted }) => isHighlighted && import_styled_components39.css`
|
|
7030
5602
|
font-size: 1.375rem;
|
|
7031
5603
|
color: ${(props) => props.theme.color.textDark} !important;
|
|
7032
5604
|
`}
|
|
7033
5605
|
`;
|
|
7034
5606
|
|
|
7035
5607
|
// src/components/RangeSliderLabel/index.tsx
|
|
7036
|
-
var RangeSliderLabel = ({ label, value, highlight }) => /* @__PURE__ */
|
|
5608
|
+
var RangeSliderLabel = ({ label, value, highlight }) => /* @__PURE__ */ import_react41.default.createElement(Wrapper19, null, /* @__PURE__ */ import_react41.default.createElement(Label8, null, label), value && /* @__PURE__ */ import_react41.default.createElement(Value3, {
|
|
7037
5609
|
isHighlighted: highlight
|
|
7038
5610
|
}, value));
|
|
7039
5611
|
var RangeSliderLabel_default = RangeSliderLabel;
|
|
7040
5612
|
|
|
7041
5613
|
// src/components/RangeSlider/RangeSliderSimple.tsx
|
|
7042
|
-
var
|
|
5614
|
+
var import_react42 = __toESM(__require("react"));
|
|
7043
5615
|
var import_react_compound_slider2 = __require("react-compound-slider");
|
|
7044
5616
|
var RangeSliderSimple = ({
|
|
7045
5617
|
loading,
|
|
@@ -7059,7 +5631,7 @@
|
|
|
7059
5631
|
if (steps.length < 2) {
|
|
7060
5632
|
return null;
|
|
7061
5633
|
}
|
|
7062
|
-
return /* @__PURE__ */
|
|
5634
|
+
return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(Slider, null, /* @__PURE__ */ import_react42.default.createElement(import_react_compound_slider2.Slider, {
|
|
7063
5635
|
disabled: loading,
|
|
7064
5636
|
mode: 1,
|
|
7065
5637
|
step,
|
|
@@ -7068,20 +5640,20 @@
|
|
|
7068
5640
|
onUpdate,
|
|
7069
5641
|
values,
|
|
7070
5642
|
rootStyle: { position: "relative" }
|
|
7071
|
-
}, /* @__PURE__ */
|
|
5643
|
+
}, /* @__PURE__ */ import_react42.default.createElement(import_react_compound_slider2.Rail, null, ({ getRailProps }) => /* @__PURE__ */ import_react42.default.createElement(Bar2, {
|
|
7072
5644
|
...getRailProps()
|
|
7073
|
-
})), /* @__PURE__ */
|
|
5645
|
+
})), /* @__PURE__ */ import_react42.default.createElement(import_react_compound_slider2.Handles, null, ({ handles, getHandleProps }) => /* @__PURE__ */ import_react42.default.createElement("div", {
|
|
7074
5646
|
className: "slider-handles"
|
|
7075
|
-
}, handles.map((handle) => /* @__PURE__ */
|
|
5647
|
+
}, handles.map((handle) => /* @__PURE__ */ import_react42.default.createElement(Handle2, {
|
|
7076
5648
|
key: handle.id,
|
|
7077
5649
|
handle,
|
|
7078
5650
|
domain,
|
|
7079
5651
|
getHandleProps
|
|
7080
|
-
})))), /* @__PURE__ */
|
|
5652
|
+
})))), /* @__PURE__ */ import_react42.default.createElement(import_react_compound_slider2.Tracks, {
|
|
7081
5653
|
right: false
|
|
7082
|
-
}, ({ tracks, getTrackProps }) => /* @__PURE__ */
|
|
5654
|
+
}, ({ tracks, getTrackProps }) => /* @__PURE__ */ import_react42.default.createElement("div", {
|
|
7083
5655
|
className: "slider-tracks"
|
|
7084
|
-
}, tracks.map(({ id, source, target }) => /* @__PURE__ */
|
|
5656
|
+
}, tracks.map(({ id, source, target }) => /* @__PURE__ */ import_react42.default.createElement(Track2, {
|
|
7085
5657
|
key: id,
|
|
7086
5658
|
source,
|
|
7087
5659
|
target,
|
|
@@ -7101,18 +5673,18 @@
|
|
|
7101
5673
|
formatValues,
|
|
7102
5674
|
onChange
|
|
7103
5675
|
}) => {
|
|
7104
|
-
const [local, setLocal] = (0,
|
|
7105
|
-
const onUpdate = (0,
|
|
5676
|
+
const [local, setLocal] = (0, import_react43.useState)(steps);
|
|
5677
|
+
const onUpdate = (0, import_react43.useCallback)((nextValues) => {
|
|
7106
5678
|
setLocal([...nextValues]);
|
|
7107
5679
|
}, []);
|
|
7108
|
-
(0,
|
|
5680
|
+
(0, import_react43.useEffect)(() => {
|
|
7109
5681
|
if (!loading)
|
|
7110
5682
|
setLocal(void 0);
|
|
7111
5683
|
}, [loading]);
|
|
7112
|
-
return /* @__PURE__ */
|
|
5684
|
+
return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react43.default.createElement(RangeSliderLabel_default, {
|
|
7113
5685
|
label,
|
|
7114
5686
|
value: `${numberSeparator(local?.[0] || values[0])}${unit ? ` ${unit}` : ""}`
|
|
7115
|
-
})), /* @__PURE__ */
|
|
5687
|
+
})), /* @__PURE__ */ import_react43.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react43.default.createElement(RangeSliderSimple_default, {
|
|
7116
5688
|
loading,
|
|
7117
5689
|
values,
|
|
7118
5690
|
domain,
|
|
@@ -7137,22 +5709,22 @@
|
|
|
7137
5709
|
return stepGenerator(step, max, steps, nextCurrent);
|
|
7138
5710
|
};
|
|
7139
5711
|
var LoanModal = ({ id, financialOption, onClose }) => {
|
|
7140
|
-
const [tmp, setTmp] = (0,
|
|
7141
|
-
const [extend, setExtend] =
|
|
7142
|
-
const onToggleExtend =
|
|
5712
|
+
const [tmp, setTmp] = (0, import_react44.useState)();
|
|
5713
|
+
const [extend, setExtend] = import_react44.default.useState(false);
|
|
5714
|
+
const onToggleExtend = import_react44.default.useCallback(() => {
|
|
7143
5715
|
if (!extend) {
|
|
7144
5716
|
pubsub_default.publish("FinanceInterest");
|
|
7145
5717
|
}
|
|
7146
5718
|
setExtend(!extend);
|
|
7147
5719
|
}, [extend]);
|
|
7148
|
-
const [variables, setVariables] = (0,
|
|
5720
|
+
const [variables, setVariables] = (0, import_react44.useState)({
|
|
7149
5721
|
duration: financialOption.duration?.current,
|
|
7150
5722
|
downPayment: financialOption.downPayment?.current,
|
|
7151
5723
|
residual: financialOption.residual?.current
|
|
7152
5724
|
});
|
|
7153
5725
|
const { duration, downPayment, residual } = variables;
|
|
7154
5726
|
const { loading, data } = useLoan_default(id, duration, downPayment, residual);
|
|
7155
|
-
(0,
|
|
5727
|
+
(0, import_react44.useEffect)(() => {
|
|
7156
5728
|
if (data) {
|
|
7157
5729
|
setTmp(data);
|
|
7158
5730
|
setVariables({
|
|
@@ -7168,7 +5740,7 @@
|
|
|
7168
5740
|
const downPaymentMax = loan?.downPayment?.max || 0;
|
|
7169
5741
|
const downPaymentStep = loan?.downPayment?.step || 0;
|
|
7170
5742
|
const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
|
|
7171
|
-
const onDownPaymentChange = (0,
|
|
5743
|
+
const onDownPaymentChange = (0, import_react44.useCallback)(
|
|
7172
5744
|
(values) => {
|
|
7173
5745
|
pubsub_default.publish("FinanceInterest");
|
|
7174
5746
|
setVariables({ ...variables, downPayment: values[0] });
|
|
@@ -7180,7 +5752,7 @@
|
|
|
7180
5752
|
const durationMax = loan?.duration?.max || 0;
|
|
7181
5753
|
const durationStep = loan?.duration?.step || 0;
|
|
7182
5754
|
const durationSteps = stepGenerator(durationStep, durationMax);
|
|
7183
|
-
const onDurationChange = (0,
|
|
5755
|
+
const onDurationChange = (0, import_react44.useCallback)(
|
|
7184
5756
|
(values) => {
|
|
7185
5757
|
pubsub_default.publish("FinanceInterest");
|
|
7186
5758
|
setVariables({ ...variables, duration: values[0] });
|
|
@@ -7192,7 +5764,7 @@
|
|
|
7192
5764
|
const residualMax = (loan?.residual?.max || 0) * 100 || 0;
|
|
7193
5765
|
const residualStep = (loan?.residual?.step || 0) * 100 || 0;
|
|
7194
5766
|
const residualSteps = stepGenerator(residualStep, residualMax);
|
|
7195
|
-
const onResidualChange = (0,
|
|
5767
|
+
const onResidualChange = (0, import_react44.useCallback)(
|
|
7196
5768
|
(values) => {
|
|
7197
5769
|
pubsub_default.publish("FinanceInterest");
|
|
7198
5770
|
setVariables({ ...variables, residual: values[0] / 100 });
|
|
@@ -7201,14 +5773,14 @@
|
|
|
7201
5773
|
);
|
|
7202
5774
|
const interestText = ((loan?.interest || 0) * 100).toFixed(2);
|
|
7203
5775
|
const effectiveInterestText = ((loan?.effectiveInterest || 0) * 100).toFixed(2);
|
|
7204
|
-
return /* @__PURE__ */
|
|
5776
|
+
return /* @__PURE__ */ import_react44.default.createElement(Modal_default, {
|
|
7205
5777
|
title: "L\xE5nealternativ",
|
|
7206
5778
|
onClose
|
|
7207
|
-
}, /* @__PURE__ */
|
|
5779
|
+
}, /* @__PURE__ */ import_react44.default.createElement(Repeat, null, /* @__PURE__ */ import_react44.default.createElement(ContentLogo, null, financialOption?.description && /* @__PURE__ */ import_react44.default.createElement(ContentLogoText, null, /* @__PURE__ */ import_react44.default.createElement(Content_default, null, /* @__PURE__ */ import_react44.default.createElement("p", null, financialOption.description))), financialOption?.image && /* @__PURE__ */ import_react44.default.createElement(ContentLogoMedia, null, /* @__PURE__ */ import_react44.default.createElement(LogoBox_default, {
|
|
7208
5780
|
logo: financialOption.image,
|
|
7209
5781
|
alt: financialOption.name || "Logotyp",
|
|
7210
5782
|
wide: true
|
|
7211
|
-
})))), /* @__PURE__ */
|
|
5783
|
+
})))), /* @__PURE__ */ import_react44.default.createElement(Repeat, null, /* @__PURE__ */ import_react44.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react44.default.createElement(SliderWithLabel_default, {
|
|
7212
5784
|
label: "Kontantinsatts",
|
|
7213
5785
|
values: [downPaymentCurrent],
|
|
7214
5786
|
domain: [downPaymentMin, downPaymentMax],
|
|
@@ -7217,7 +5789,7 @@
|
|
|
7217
5789
|
formatValues: true,
|
|
7218
5790
|
loading,
|
|
7219
5791
|
onChange: onDownPaymentChange
|
|
7220
|
-
})), /* @__PURE__ */
|
|
5792
|
+
})), /* @__PURE__ */ import_react44.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react44.default.createElement(SliderWithLabel_default, {
|
|
7221
5793
|
label: "Avbetalning",
|
|
7222
5794
|
values: [durationCurrent],
|
|
7223
5795
|
domain: [durationMin, durationMax],
|
|
@@ -7225,7 +5797,7 @@
|
|
|
7225
5797
|
unit: "m\xE5n",
|
|
7226
5798
|
loading,
|
|
7227
5799
|
onChange: onDurationChange
|
|
7228
|
-
})), residual !== void 0 && residualMax !== 0 && /* @__PURE__ */
|
|
5800
|
+
})), residual !== void 0 && residualMax !== 0 && /* @__PURE__ */ import_react44.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react44.default.createElement(SliderWithLabel_default, {
|
|
7229
5801
|
label: "Restskuld",
|
|
7230
5802
|
values: [residualCurrent],
|
|
7231
5803
|
domain: [residualMin, residualMax],
|
|
@@ -7233,12 +5805,12 @@
|
|
|
7233
5805
|
unit: "%",
|
|
7234
5806
|
loading,
|
|
7235
5807
|
onChange: onResidualChange
|
|
7236
|
-
})), /* @__PURE__ */
|
|
5808
|
+
})), /* @__PURE__ */ import_react44.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react44.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react44.default.createElement(Content_default, {
|
|
7237
5809
|
small: true
|
|
7238
|
-
}, /* @__PURE__ */
|
|
5810
|
+
}, /* @__PURE__ */ import_react44.default.createElement("p", null, `*Ber\xE4knat p\xE5 ${interestText} % r\xE4nta (effektivt ${effectiveInterestText} %)${loan?.mileage !== null ? `och en \xE5rlig k\xF6rstr\xE4cka om ${loan?.mileage} mil.` : ""}`)))), /* @__PURE__ */ import_react44.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react44.default.createElement(ButtonClear, {
|
|
7239
5811
|
onClick: onToggleExtend,
|
|
7240
5812
|
title: extend ? "Visa mindre information" : "Visa mer information"
|
|
7241
|
-
}, /* @__PURE__ */
|
|
5813
|
+
}, /* @__PURE__ */ import_react44.default.createElement(ButtonContent, null, extend ? "Mindre information" : "Mer information"))), /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, extend && /* @__PURE__ */ import_react44.default.createElement(ModalFoldout, null, /* @__PURE__ */ import_react44.default.createElement(ModalFoldoutBody, null, /* @__PURE__ */ import_react44.default.createElement(DataList_default, {
|
|
7242
5814
|
items: [
|
|
7243
5815
|
{
|
|
7244
5816
|
label: "R\xE4nta",
|
|
@@ -7267,8 +5839,8 @@
|
|
|
7267
5839
|
|
|
7268
5840
|
// src/components/FinancialOptions/loan.tsx
|
|
7269
5841
|
var Loan = ({ id, financialOption }) => {
|
|
7270
|
-
const [modal, setModal] = (0,
|
|
7271
|
-
const toggleModal = (0,
|
|
5842
|
+
const [modal, setModal] = (0, import_react45.useState)(false);
|
|
5843
|
+
const toggleModal = (0, import_react45.useCallback)(() => setModal(!modal), [modal]);
|
|
7272
5844
|
const { data } = useLoan_default(
|
|
7273
5845
|
id,
|
|
7274
5846
|
financialOption.duration?.current,
|
|
@@ -7280,100 +5852,100 @@
|
|
|
7280
5852
|
const monthlyCost = data?.loan?.monthlyCost;
|
|
7281
5853
|
const logo = financialOption?.logotype || "https://placehold.it/67x10";
|
|
7282
5854
|
if (financialOption.loanAmount === void 0 || financialOption.loanAmount === null || interest === void 0 || duration === void 0 || monthlyCost === void 0 || interest === null || duration === null || monthlyCost === null) {
|
|
7283
|
-
return /* @__PURE__ */
|
|
5855
|
+
return /* @__PURE__ */ import_react45.default.createElement(OptionBox_default, {
|
|
7284
5856
|
logo,
|
|
7285
5857
|
logoAlt: "Logotyp"
|
|
7286
|
-
}, /* @__PURE__ */
|
|
5858
|
+
}, /* @__PURE__ */ import_react45.default.createElement(OptionBoxHeading, null, "Laddar..."), /* @__PURE__ */ import_react45.default.createElement(OptionBoxContent, null, /* @__PURE__ */ import_react45.default.createElement("p", null, "Laddar...")));
|
|
7287
5859
|
}
|
|
7288
|
-
return /* @__PURE__ */
|
|
5860
|
+
return /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, modal && /* @__PURE__ */ import_react45.default.createElement(LoanModal_default, {
|
|
7289
5861
|
id,
|
|
7290
5862
|
financialOption,
|
|
7291
5863
|
onClose: toggleModal
|
|
7292
|
-
}), /* @__PURE__ */
|
|
5864
|
+
}), /* @__PURE__ */ import_react45.default.createElement(OptionBox_default, {
|
|
7293
5865
|
logo,
|
|
7294
5866
|
logoAlt: "Logotyp"
|
|
7295
|
-
}, /* @__PURE__ */
|
|
5867
|
+
}, /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(OptionBoxHeading, null, `${numberSeparator(monthlyCost)} kr/m\xE5n*`), /* @__PURE__ */ import_react45.default.createElement(OptionBoxContent, null, /* @__PURE__ */ import_react45.default.createElement("p", null, "Delbetala", " ", financialOption.loanAmount && duration && /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement(UtilityTextPrimary, null, numberSeparator(financialOption.loanAmount), " kr"), " ", "i ", /* @__PURE__ */ import_react45.default.createElement(UtilityTextPrimary, null, duration, " m\xE5n"), ".")), /* @__PURE__ */ import_react45.default.createElement("p", null, `*Ber\xE4knat p\xE5 ${(interest * 100).toFixed(2)}% r\xE4nta. `, /* @__PURE__ */ import_react45.default.createElement(ButtonInline, {
|
|
7296
5868
|
onClick: toggleModal
|
|
7297
5869
|
}, "L\xE4s mer"))))));
|
|
7298
5870
|
};
|
|
7299
5871
|
var loan_default = Loan;
|
|
7300
5872
|
|
|
7301
5873
|
// src/components/FinancialOptions/index.tsx
|
|
7302
|
-
var FinancialOptions = ({ id, financialOptions }) => /* @__PURE__ */
|
|
5874
|
+
var FinancialOptions = ({ id, financialOptions }) => /* @__PURE__ */ import_react46.default.createElement(Repeat, null, /* @__PURE__ */ import_react46.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react46.default.createElement(VisualHeading, null, "Andra finansieringsalternativ")), /* @__PURE__ */ import_react46.default.createElement(RepeatTiny, null, financialOptions.map((financialOption, index2) => /* @__PURE__ */ import_react46.default.createElement(import_react46.Fragment, {
|
|
7303
5875
|
key: index2
|
|
7304
|
-
}, financialOption.type === "leasing" && /* @__PURE__ */
|
|
5876
|
+
}, financialOption.type === "leasing" && /* @__PURE__ */ import_react46.default.createElement(leasing_default, {
|
|
7305
5877
|
financialOption
|
|
7306
|
-
}), financialOption.type === "loan" && /* @__PURE__ */
|
|
5878
|
+
}), financialOption.type === "loan" && /* @__PURE__ */ import_react46.default.createElement(loan_default, {
|
|
7307
5879
|
id,
|
|
7308
5880
|
financialOption
|
|
7309
5881
|
})))));
|
|
7310
5882
|
var FinancialOptions_default = FinancialOptions;
|
|
7311
5883
|
|
|
7312
5884
|
// src/components/InsuranceOptions/index.tsx
|
|
7313
|
-
var
|
|
5885
|
+
var import_react56 = __toESM(__require("react"));
|
|
7314
5886
|
|
|
7315
5887
|
// src/components/InsuranceOptions/Insurance.tsx
|
|
7316
|
-
var
|
|
5888
|
+
var import_react53 = __toESM(__require("react"));
|
|
7317
5889
|
|
|
7318
5890
|
// src/components/InsuranceOptions/InsuranceModal.tsx
|
|
7319
|
-
var
|
|
5891
|
+
var import_react52 = __toESM(__require("react"));
|
|
7320
5892
|
|
|
7321
5893
|
// src/components/DetailBox/index.tsx
|
|
7322
|
-
var
|
|
5894
|
+
var import_react47 = __toESM(__require("react"));
|
|
7323
5895
|
|
|
7324
5896
|
// src/components/DetailBox/wrapper.tsx
|
|
7325
|
-
var
|
|
7326
|
-
var
|
|
5897
|
+
var import_styled_components40 = __toESM(__require("styled-components"));
|
|
5898
|
+
var Wrapper20 = import_styled_components40.default.article`
|
|
7327
5899
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
|
|
7328
5900
|
border-radius: 3px;
|
|
7329
5901
|
overflow: hidden;
|
|
7330
5902
|
`;
|
|
7331
|
-
var
|
|
5903
|
+
var Main = import_styled_components40.default.div`
|
|
7332
5904
|
padding: ${size(2.5)};
|
|
7333
5905
|
`;
|
|
7334
|
-
var Heading6 = (0,
|
|
5906
|
+
var Heading6 = (0, import_styled_components40.default)(H2).attrs(() => ({
|
|
7335
5907
|
as: "h1"
|
|
7336
5908
|
}))`
|
|
7337
5909
|
margin-bottom: 0;
|
|
7338
5910
|
`;
|
|
7339
|
-
var Description3 =
|
|
5911
|
+
var Description3 = import_styled_components40.default.div`
|
|
7340
5912
|
margin-top: ${size(1)};
|
|
7341
5913
|
`;
|
|
7342
|
-
var Footer3 =
|
|
5914
|
+
var Footer3 = import_styled_components40.default.div`
|
|
7343
5915
|
margin-top: ${size(1)};
|
|
7344
5916
|
color: red;
|
|
7345
5917
|
`;
|
|
7346
|
-
var Foldout =
|
|
5918
|
+
var Foldout = import_styled_components40.default.div`
|
|
7347
5919
|
background-color: ${(props) => props.theme.color.accent};
|
|
7348
5920
|
padding: ${size(2.5)};
|
|
7349
5921
|
`;
|
|
7350
5922
|
|
|
7351
5923
|
// src/components/DetailBox/index.tsx
|
|
7352
5924
|
var DetailBox = ({ heading, description, children }) => {
|
|
7353
|
-
const [extend, setExtend] =
|
|
7354
|
-
const onToggleExtend =
|
|
5925
|
+
const [extend, setExtend] = import_react47.default.useState(false);
|
|
5926
|
+
const onToggleExtend = import_react47.default.useCallback(() => setExtend(!extend), [extend]);
|
|
7355
5927
|
const extendBtnText = extend ? "Mindre information" : "Mer information";
|
|
7356
|
-
return /* @__PURE__ */
|
|
5928
|
+
return /* @__PURE__ */ import_react47.default.createElement(Wrapper20, null, /* @__PURE__ */ import_react47.default.createElement(Main, null, /* @__PURE__ */ import_react47.default.createElement(Heading6, null, heading), description && /* @__PURE__ */ import_react47.default.createElement(Description3, null, description), /* @__PURE__ */ import_react47.default.createElement(Footer3, null, /* @__PURE__ */ import_react47.default.createElement(ButtonClear, {
|
|
7357
5929
|
onClick: onToggleExtend
|
|
7358
|
-
}, /* @__PURE__ */
|
|
5930
|
+
}, /* @__PURE__ */ import_react47.default.createElement(ButtonContent, null, extendBtnText)))), extend && /* @__PURE__ */ import_react47.default.createElement(Foldout, null, children));
|
|
7359
5931
|
};
|
|
7360
5932
|
var DetailBox_default = DetailBox;
|
|
7361
5933
|
|
|
7362
5934
|
// src/components/ExtendInfo/index.tsx
|
|
7363
|
-
var
|
|
5935
|
+
var import_react48 = __toESM(__require("react"));
|
|
7364
5936
|
|
|
7365
5937
|
// src/components/ExtendInfo/wrapper.tsx
|
|
7366
|
-
var
|
|
7367
|
-
var
|
|
7368
|
-
var Header5 =
|
|
5938
|
+
var import_styled_components41 = __toESM(__require("styled-components"));
|
|
5939
|
+
var Wrapper21 = import_styled_components41.default.div``;
|
|
5940
|
+
var Header5 = import_styled_components41.default.div`
|
|
7369
5941
|
display: flex;
|
|
7370
5942
|
align-items: center;
|
|
7371
5943
|
`;
|
|
7372
|
-
var Title =
|
|
7373
|
-
var Info2 =
|
|
5944
|
+
var Title = import_styled_components41.default.div``;
|
|
5945
|
+
var Info2 = import_styled_components41.default.div`
|
|
7374
5946
|
margin-left: ${size(1)};
|
|
7375
5947
|
`;
|
|
7376
|
-
var InfoBtn = (0,
|
|
5948
|
+
var InfoBtn = (0, import_styled_components41.default)(ButtonReset).attrs(() => ({
|
|
7377
5949
|
className: "wayke__theme wayke__color--primary-text"
|
|
7378
5950
|
}))`
|
|
7379
5951
|
position: relative;
|
|
@@ -7411,7 +5983,7 @@
|
|
|
7411
5983
|
transform: scale(0.95);
|
|
7412
5984
|
}
|
|
7413
5985
|
`;
|
|
7414
|
-
var Extend2 =
|
|
5986
|
+
var Extend2 = import_styled_components41.default.div`
|
|
7415
5987
|
padding-top: ${size(1)};
|
|
7416
5988
|
margin-top: ${size(1)};
|
|
7417
5989
|
border-top: 1px solid ${(props) => props.theme.color.border};
|
|
@@ -7420,23 +5992,23 @@
|
|
|
7420
5992
|
|
|
7421
5993
|
// src/components/ExtendInfo/index.tsx
|
|
7422
5994
|
var ExtendInfo = ({ title, children }) => {
|
|
7423
|
-
const [extend, setExtend] = (0,
|
|
7424
|
-
const onToggleExtend = (0,
|
|
7425
|
-
return /* @__PURE__ */
|
|
5995
|
+
const [extend, setExtend] = (0, import_react48.useState)(false);
|
|
5996
|
+
const onToggleExtend = (0, import_react48.useCallback)(() => setExtend(!extend), [extend]);
|
|
5997
|
+
return /* @__PURE__ */ import_react48.default.createElement(Wrapper21, null, /* @__PURE__ */ import_react48.default.createElement(Header5, null, /* @__PURE__ */ import_react48.default.createElement(Title, null, title), children && /* @__PURE__ */ import_react48.default.createElement(Info2, null, /* @__PURE__ */ import_react48.default.createElement(InfoBtn, {
|
|
7426
5998
|
onClick: onToggleExtend,
|
|
7427
5999
|
title: "Mer information"
|
|
7428
|
-
}, /* @__PURE__ */
|
|
6000
|
+
}, /* @__PURE__ */ import_react48.default.createElement(IconInfo, {
|
|
7429
6001
|
block: true
|
|
7430
|
-
})))), extend && /* @__PURE__ */
|
|
6002
|
+
})))), extend && /* @__PURE__ */ import_react48.default.createElement(Extend2, null, children));
|
|
7431
6003
|
};
|
|
7432
6004
|
var ExtendInfo_default = ExtendInfo;
|
|
7433
6005
|
|
|
7434
6006
|
// src/components/InputLabel/index.tsx
|
|
7435
|
-
var
|
|
6007
|
+
var import_react49 = __toESM(__require("react"));
|
|
7436
6008
|
|
|
7437
6009
|
// src/components/InputLabel/wrapper.tsx
|
|
7438
|
-
var
|
|
7439
|
-
var
|
|
6010
|
+
var import_styled_components42 = __toESM(__require("styled-components"));
|
|
6011
|
+
var Wrapper22 = import_styled_components42.default.label.attrs(() => ({
|
|
7440
6012
|
className: "wayke__theme wayke__font--bold"
|
|
7441
6013
|
}))`
|
|
7442
6014
|
margin-bottom: ${size(0.5)};
|
|
@@ -7444,24 +6016,24 @@
|
|
|
7444
6016
|
`;
|
|
7445
6017
|
|
|
7446
6018
|
// src/components/InputLabel/index.tsx
|
|
7447
|
-
var InputLabel = ({ children, htmlFor }) => /* @__PURE__ */
|
|
6019
|
+
var InputLabel = ({ children, htmlFor }) => /* @__PURE__ */ import_react49.default.createElement(Wrapper22, {
|
|
7448
6020
|
htmlFor
|
|
7449
6021
|
}, children);
|
|
7450
6022
|
var InputLabel_default = InputLabel;
|
|
7451
6023
|
|
|
7452
6024
|
// src/components/InputText/index.tsx
|
|
7453
|
-
var
|
|
6025
|
+
var import_react50 = __toESM(__require("react"));
|
|
7454
6026
|
|
|
7455
6027
|
// src/components/InputText/wrapper.tsx
|
|
7456
|
-
var
|
|
7457
|
-
var
|
|
6028
|
+
var import_styled_components43 = __toESM(__require("styled-components"));
|
|
6029
|
+
var Wrapper23 = import_styled_components43.default.div`
|
|
7458
6030
|
position: relative;
|
|
7459
6031
|
display: flex;
|
|
7460
6032
|
align-items: stretch;
|
|
7461
6033
|
background-color: ${(props) => props.theme.color.accent};
|
|
7462
6034
|
border-radius: 3px;
|
|
7463
6035
|
`;
|
|
7464
|
-
var Input2 =
|
|
6036
|
+
var Input2 = import_styled_components43.default.input.attrs(() => ({
|
|
7465
6037
|
type: "text",
|
|
7466
6038
|
className: "wayke__theme wayke__font--regular"
|
|
7467
6039
|
}))`
|
|
@@ -7508,7 +6080,7 @@
|
|
|
7508
6080
|
`;
|
|
7509
6081
|
|
|
7510
6082
|
// src/components/InputText/index.tsx
|
|
7511
|
-
var InputText = ({ placeholder, label, value, id, onChange, onKeyDown }) => /* @__PURE__ */
|
|
6083
|
+
var InputText = ({ placeholder, label, value, id, onChange, onKeyDown }) => /* @__PURE__ */ import_react50.default.createElement(Wrapper23, null, /* @__PURE__ */ import_react50.default.createElement(Input2, {
|
|
7512
6084
|
placeholder,
|
|
7513
6085
|
value,
|
|
7514
6086
|
id,
|
|
@@ -7519,12 +6091,12 @@
|
|
|
7519
6091
|
var InputText_default = InputText;
|
|
7520
6092
|
|
|
7521
6093
|
// src/components/InputCheckbox/index.tsx
|
|
7522
|
-
var
|
|
6094
|
+
var React54 = __toESM(__require("react"));
|
|
7523
6095
|
|
|
7524
6096
|
// src/components/InputCheckbox/wrapper.tsx
|
|
7525
|
-
var
|
|
7526
|
-
var
|
|
7527
|
-
var Label9 =
|
|
6097
|
+
var React53 = __toESM(__require("react"));
|
|
6098
|
+
var import_styled_components44 = __toESM(__require("styled-components"));
|
|
6099
|
+
var Label9 = import_styled_components44.default.label.attrs(() => ({
|
|
7528
6100
|
className: "wayke__theme wayke__color--primary-text"
|
|
7529
6101
|
}))`
|
|
7530
6102
|
position: relative;
|
|
@@ -7554,13 +6126,13 @@
|
|
|
7554
6126
|
margin-top: -2px;
|
|
7555
6127
|
}
|
|
7556
6128
|
`;
|
|
7557
|
-
var
|
|
6129
|
+
var Wrapper24 = (0, import_styled_components44.default)((props) => /* @__PURE__ */ React53.createElement("div", {
|
|
7558
6130
|
...props
|
|
7559
6131
|
})).attrs(({ type, checked }) => ({
|
|
7560
6132
|
role: type || "checkbox",
|
|
7561
6133
|
"aria-checked": checked
|
|
7562
6134
|
}))`
|
|
7563
|
-
${({ error }) => error &&
|
|
6135
|
+
${({ error }) => error && import_styled_components44.css`
|
|
7564
6136
|
${Label9} {
|
|
7565
6137
|
color: ${(props) => props.theme.color.ui.negative};
|
|
7566
6138
|
|
|
@@ -7570,7 +6142,7 @@
|
|
|
7570
6142
|
}
|
|
7571
6143
|
`}
|
|
7572
6144
|
`;
|
|
7573
|
-
var Input3 = (0,
|
|
6145
|
+
var Input3 = (0, import_styled_components44.default)((props) => /* @__PURE__ */ React53.createElement("input", {
|
|
7574
6146
|
...props,
|
|
7575
6147
|
className: `${props.checked ? "checked" : void 0} ${props.className}`
|
|
7576
6148
|
})).attrs(({ type, checked }) => ({
|
|
@@ -7601,23 +6173,23 @@
|
|
|
7601
6173
|
}
|
|
7602
6174
|
}
|
|
7603
6175
|
`;
|
|
7604
|
-
var LabelText =
|
|
6176
|
+
var LabelText = import_styled_components44.default.div`
|
|
7605
6177
|
color: ${(props) => props.theme.color.textDark};
|
|
7606
6178
|
`;
|
|
7607
6179
|
|
|
7608
6180
|
// src/components/InputSelect/index.tsx
|
|
7609
|
-
var
|
|
6181
|
+
var import_react51 = __toESM(__require("react"));
|
|
7610
6182
|
|
|
7611
6183
|
// src/components/InputSelect/wrapper.tsx
|
|
7612
|
-
var
|
|
6184
|
+
var import_styled_components45 = __toESM(__require("styled-components"));
|
|
7613
6185
|
var iconSize2 = "0.875rem";
|
|
7614
6186
|
var selectPadding = size(2);
|
|
7615
|
-
var
|
|
6187
|
+
var Wrapper25 = import_styled_components45.default.div`
|
|
7616
6188
|
position: relative;
|
|
7617
6189
|
background-color: ${(props) => props.theme.color.accent};
|
|
7618
6190
|
border-radius: 3px;
|
|
7619
6191
|
`;
|
|
7620
|
-
var Select2 =
|
|
6192
|
+
var Select2 = import_styled_components45.default.select.attrs(() => ({
|
|
7621
6193
|
className: "wayke__theme wayke__font--regular"
|
|
7622
6194
|
}))`
|
|
7623
6195
|
position: relative;
|
|
@@ -7651,10 +6223,10 @@
|
|
|
7651
6223
|
border: 0;
|
|
7652
6224
|
}
|
|
7653
6225
|
`;
|
|
7654
|
-
var Option2 =
|
|
6226
|
+
var Option2 = import_styled_components45.default.option`
|
|
7655
6227
|
color: ${(props) => props.theme.color.textDark};
|
|
7656
6228
|
`;
|
|
7657
|
-
var Icon5 =
|
|
6229
|
+
var Icon5 = import_styled_components45.default.div`
|
|
7658
6230
|
position: absolute;
|
|
7659
6231
|
top: 50%;
|
|
7660
6232
|
right: ${selectPadding};
|
|
@@ -7663,29 +6235,29 @@
|
|
|
7663
6235
|
`;
|
|
7664
6236
|
|
|
7665
6237
|
// src/components/InputSelect/index.tsx
|
|
7666
|
-
var InputSelect = ({ value, options, onChange, unit, title }) => /* @__PURE__ */
|
|
6238
|
+
var InputSelect = ({ value, options, onChange, unit, title }) => /* @__PURE__ */ import_react51.default.createElement(Wrapper25, null, /* @__PURE__ */ import_react51.default.createElement(Select2, {
|
|
7667
6239
|
value,
|
|
7668
6240
|
onChange,
|
|
7669
6241
|
title,
|
|
7670
6242
|
"aria-label": title
|
|
7671
|
-
}, options?.map((option) => /* @__PURE__ */
|
|
6243
|
+
}, options?.map((option) => /* @__PURE__ */ import_react51.default.createElement(Option2, {
|
|
7672
6244
|
key: option.value,
|
|
7673
6245
|
value: option.value
|
|
7674
|
-
}, option.displayName || option.value, unit ? ` ${unit}` : ""))), /* @__PURE__ */
|
|
6246
|
+
}, option.displayName || option.value, unit ? ` ${unit}` : ""))), /* @__PURE__ */ import_react51.default.createElement(Icon5, null, /* @__PURE__ */ import_react51.default.createElement(IconChevronDown, {
|
|
7675
6247
|
block: true
|
|
7676
6248
|
})));
|
|
7677
6249
|
var InputSelect_default = InputSelect;
|
|
7678
6250
|
|
|
7679
6251
|
// src/components/InputGroup/index.tsx
|
|
7680
|
-
var
|
|
7681
|
-
var InputGroup =
|
|
6252
|
+
var import_styled_components46 = __toESM(__require("styled-components"));
|
|
6253
|
+
var InputGroup = import_styled_components46.default.div`
|
|
7682
6254
|
${(props) => props.theme.breakpoint.Sm} {
|
|
7683
6255
|
display: flex;
|
|
7684
6256
|
align-items: flex-start;
|
|
7685
6257
|
margin: ${size(-0.5)};
|
|
7686
6258
|
}
|
|
7687
6259
|
`;
|
|
7688
|
-
var InputGroupColumn =
|
|
6260
|
+
var InputGroupColumn = import_styled_components46.default.div`
|
|
7689
6261
|
${(props) => props.theme.breakpoint.LtSm} {
|
|
7690
6262
|
& + & {
|
|
7691
6263
|
margin-top: ${size(1)};
|
|
@@ -7699,12 +6271,12 @@
|
|
|
7699
6271
|
`;
|
|
7700
6272
|
|
|
7701
6273
|
// src/components/ColumnRow/index.tsx
|
|
7702
|
-
var
|
|
7703
|
-
var ColumnRow =
|
|
6274
|
+
var import_styled_components47 = __toESM(__require("styled-components"));
|
|
6275
|
+
var ColumnRow = import_styled_components47.default.div`
|
|
7704
6276
|
display: flex;
|
|
7705
6277
|
align-items: flex-start;
|
|
7706
6278
|
`;
|
|
7707
|
-
var ColumnRowItem =
|
|
6279
|
+
var ColumnRowItem = import_styled_components47.default.div`
|
|
7708
6280
|
flex: 1 1 auto;
|
|
7709
6281
|
|
|
7710
6282
|
:last-child:not(:only-child) {
|
|
@@ -7779,30 +6351,30 @@
|
|
|
7779
6351
|
|
|
7780
6352
|
// src/components/InsuranceOptions/InsuranceModal.tsx
|
|
7781
6353
|
var InsuranceModal = ({ id, branch, onClose, insuranceOptions }) => {
|
|
7782
|
-
const [form, setForm] = (0,
|
|
6354
|
+
const [form, setForm] = (0, import_react52.useState)({
|
|
7783
6355
|
ssn: "",
|
|
7784
6356
|
drivingDistance: "BETWEEN0AND1000" /* Between0And1000 */
|
|
7785
6357
|
});
|
|
7786
|
-
const [payload, setPayload] = (0,
|
|
6358
|
+
const [payload, setPayload] = (0, import_react52.useState)();
|
|
7787
6359
|
const { loading, data, error } = useInsurance_default(
|
|
7788
6360
|
id,
|
|
7789
6361
|
branch?.id ? branch?.id : void 0,
|
|
7790
6362
|
ssnIsValid(payload?.ssn) ? payload?.ssn : void 0,
|
|
7791
6363
|
payload?.drivingDistance
|
|
7792
6364
|
);
|
|
7793
|
-
const onChangeSsn = (0,
|
|
6365
|
+
const onChangeSsn = (0, import_react52.useCallback)(
|
|
7794
6366
|
(e) => setForm({ ...form, ssn: e.currentTarget.value }),
|
|
7795
6367
|
[form]
|
|
7796
6368
|
);
|
|
7797
|
-
const onChangeDrivingDistance = (0,
|
|
6369
|
+
const onChangeDrivingDistance = (0, import_react52.useCallback)(
|
|
7798
6370
|
(e) => setForm({ ...form, drivingDistance: e.currentTarget.value }),
|
|
7799
6371
|
[form]
|
|
7800
6372
|
);
|
|
7801
|
-
const onShowInsurances = (0,
|
|
6373
|
+
const onShowInsurances = (0, import_react52.useCallback)(() => {
|
|
7802
6374
|
pubsub_default.publish("InsuranceInterest");
|
|
7803
6375
|
setPayload(form);
|
|
7804
6376
|
}, [form]);
|
|
7805
|
-
const onKeyDown = (0,
|
|
6377
|
+
const onKeyDown = (0, import_react52.useCallback)(
|
|
7806
6378
|
(e) => {
|
|
7807
6379
|
if (e.keyCode === 13 && ssnIsValid(form.ssn) && !loading) {
|
|
7808
6380
|
onShowInsurances();
|
|
@@ -7817,105 +6389,105 @@
|
|
|
7817
6389
|
{ value: "BETWEEN2000AND2500" /* Between2000And2500 */, displayName: "2000 - 2500" },
|
|
7818
6390
|
{ value: "OVER2500" /* Over2500 */, displayName: "2500+" }
|
|
7819
6391
|
];
|
|
7820
|
-
return /* @__PURE__ */
|
|
6392
|
+
return /* @__PURE__ */ import_react52.default.createElement(Modal_default, {
|
|
7821
6393
|
title: "F\xF6rs\xE4kring",
|
|
7822
6394
|
onClose
|
|
7823
|
-
}, (insuranceOptions?.description || insuranceOptions?.logotype) && /* @__PURE__ */
|
|
6395
|
+
}, (insuranceOptions?.description || insuranceOptions?.logotype) && /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(ContentLogo, null, insuranceOptions.description && /* @__PURE__ */ import_react52.default.createElement(ContentLogoText, null, /* @__PURE__ */ import_react52.default.createElement(Content_default, null, /* @__PURE__ */ import_react52.default.createElement("p", null, insuranceOptions.description))), insuranceOptions.logotype && /* @__PURE__ */ import_react52.default.createElement(ContentLogoMedia, null, /* @__PURE__ */ import_react52.default.createElement(LogoBox_default, {
|
|
7824
6396
|
logo: insuranceOptions.logotype,
|
|
7825
6397
|
alt: insuranceOptions.name || "Logotyp",
|
|
7826
6398
|
wide: true
|
|
7827
|
-
})))), /* @__PURE__ */
|
|
6399
|
+
})))), /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react52.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react52.default.createElement(InputGroup, null, /* @__PURE__ */ import_react52.default.createElement(InputGroupColumn, null, /* @__PURE__ */ import_react52.default.createElement(InputLabel_default, {
|
|
7828
6400
|
htmlFor: "input-insurance-personalnumber"
|
|
7829
|
-
}, "Personnummer"), /* @__PURE__ */
|
|
6401
|
+
}, "Personnummer"), /* @__PURE__ */ import_react52.default.createElement(InputText_default, {
|
|
7830
6402
|
placeholder: "\xC5\xC5\xC5\xC5MMDD-XXXX",
|
|
7831
6403
|
label: "Personnummer",
|
|
7832
6404
|
value: form.ssn,
|
|
7833
6405
|
onChange: onChangeSsn,
|
|
7834
6406
|
onKeyDown,
|
|
7835
6407
|
id: "input-insurance-personalnumber"
|
|
7836
|
-
})), /* @__PURE__ */
|
|
6408
|
+
})), /* @__PURE__ */ import_react52.default.createElement(InputGroupColumn, null, /* @__PURE__ */ import_react52.default.createElement(InputLabel_default, {
|
|
7837
6409
|
htmlFor: "input-insurance-mileage"
|
|
7838
|
-
}, "Uppskattad k\xF6rstr\xE4cka per \xE5r"), /* @__PURE__ */
|
|
6410
|
+
}, "Uppskattad k\xF6rstr\xE4cka per \xE5r"), /* @__PURE__ */ import_react52.default.createElement(InputSelect_default, {
|
|
7839
6411
|
value: form.drivingDistance,
|
|
7840
6412
|
onChange: onChangeDrivingDistance,
|
|
7841
6413
|
options,
|
|
7842
6414
|
unit: "mil",
|
|
7843
6415
|
title: "Uppskattad k\xF6rstr\xE4cka per \xE5r"
|
|
7844
|
-
})))), /* @__PURE__ */
|
|
6416
|
+
})))), /* @__PURE__ */ import_react52.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react52.default.createElement(ButtonPrimary, {
|
|
7845
6417
|
fullWidth: true,
|
|
7846
6418
|
disabled: !ssnIsValid(form.ssn) || loading,
|
|
7847
6419
|
onClick: onShowInsurances
|
|
7848
|
-
}, /* @__PURE__ */
|
|
6420
|
+
}, /* @__PURE__ */ import_react52.default.createElement(ButtonContent, null, "Visa f\xF6rs\xE4kringar")))), false, /* @__PURE__ */ import_react52.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react52.default.createElement(Content_default, {
|
|
7849
6421
|
small: true
|
|
7850
|
-
}, /* @__PURE__ */
|
|
6422
|
+
}, /* @__PURE__ */ import_react52.default.createElement("p", null, "Spara personnummer p\xE5 denna dator f\xF6r att direkt visa f\xF6rs\xE4kringskostnaderna i Wayke. Personnumret lagras inte hos Wayke utan finns bara sparad i din webbl\xE4sare.")))), loading && /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(Loader_default, null)), error && /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(Snackbar_default, {
|
|
7851
6423
|
severity: "error",
|
|
7852
6424
|
icon: true,
|
|
7853
6425
|
heading: "Ett fel har intr\xE4ffat"
|
|
7854
|
-
}, "Kunde inte h\xE4mta f\xF6rs\xE4kringar. V\xE4nligen f\xF6rs\xF6k igen.")), /* @__PURE__ */
|
|
6426
|
+
}, "Kunde inte h\xE4mta f\xF6rs\xE4kringar. V\xE4nligen f\xF6rs\xF6k igen.")), /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, data?.insurances && /* @__PURE__ */ import_react52.default.createElement(Repeat, null, data?.insurances.map((insurance) => /* @__PURE__ */ import_react52.default.createElement(Repeat, {
|
|
7855
6427
|
key: insurance.name
|
|
7856
|
-
}, /* @__PURE__ */
|
|
6428
|
+
}, /* @__PURE__ */ import_react52.default.createElement(DetailBox_default, {
|
|
7857
6429
|
heading: `${numberSeparator(insurance.price)} ${insurance.unit}`,
|
|
7858
6430
|
description: insurance.name
|
|
7859
|
-
}, /* @__PURE__ */
|
|
6431
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, insurance.description && /* @__PURE__ */ import_react52.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react52.default.createElement(Content_default, null, /* @__PURE__ */ import_react52.default.createElement("p", null, insurance.description)))), /* @__PURE__ */ import_react52.default.createElement(import_react52.default.Fragment, null, insurance.url && /* @__PURE__ */ import_react52.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react52.default.createElement(ButtonInline, {
|
|
7860
6432
|
as: "a",
|
|
7861
6433
|
href: insurance.url || "",
|
|
7862
6434
|
target: "_blank",
|
|
7863
6435
|
rel: "noopener noreferrer nofollow"
|
|
7864
|
-
}, "F\xF6rk\xF6psinformation och villkor (\xF6ppnas i ny flik)")))), insurance.items && insurance.items.length > 0 && /* @__PURE__ */
|
|
6436
|
+
}, "F\xF6rk\xF6psinformation och villkor (\xF6ppnas i ny flik)")))), insurance.items && insurance.items.length > 0 && /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(H4, null, "F\xF6rs\xE4kringen inneh\xE5ller"), insurance.items.map((item) => /* @__PURE__ */ import_react52.default.createElement(RepeatSmall, {
|
|
7865
6437
|
key: item.name || ""
|
|
7866
|
-
}, /* @__PURE__ */
|
|
6438
|
+
}, /* @__PURE__ */ import_react52.default.createElement(ExtendInfo_default, {
|
|
7867
6439
|
title: item.name || ""
|
|
7868
|
-
}, item.description)))), insurance.addons && insurance.addons.length > 0 && /* @__PURE__ */
|
|
6440
|
+
}, item.description)))), insurance.addons && insurance.addons.length > 0 && /* @__PURE__ */ import_react52.default.createElement(Repeat, null, /* @__PURE__ */ import_react52.default.createElement(H4, null, "V\xE4lj till"), insurance.addons.map((addon) => /* @__PURE__ */ import_react52.default.createElement(RepeatSmall, {
|
|
7869
6441
|
key: addon.title || ""
|
|
7870
|
-
}, /* @__PURE__ */
|
|
6442
|
+
}, /* @__PURE__ */ import_react52.default.createElement(ColumnRow, null, /* @__PURE__ */ import_react52.default.createElement(ColumnRowItem, null, /* @__PURE__ */ import_react52.default.createElement(ExtendInfo_default, {
|
|
7871
6443
|
title: addon.title || ""
|
|
7872
|
-
}, addon.description)), /* @__PURE__ */
|
|
6444
|
+
}, addon.description)), /* @__PURE__ */ import_react52.default.createElement(ColumnRowItem, null, /* @__PURE__ */ import_react52.default.createElement(UtilityTextBold, null, "+", addon.price, " ", addon.unit))))))))))));
|
|
7873
6445
|
};
|
|
7874
6446
|
var InsuranceModal_default = InsuranceModal;
|
|
7875
6447
|
|
|
7876
6448
|
// src/components/InsuranceOptions/Insurance.tsx
|
|
7877
6449
|
var Insurance = ({ id, branch, insuranceOptions }) => {
|
|
7878
|
-
const [modal, setModal] = (0,
|
|
7879
|
-
const toggleModal = (0,
|
|
6450
|
+
const [modal, setModal] = (0, import_react53.useState)(false);
|
|
6451
|
+
const toggleModal = (0, import_react53.useCallback)(() => setModal(!modal), [modal]);
|
|
7880
6452
|
if (!insuranceOptions.length) {
|
|
7881
6453
|
return null;
|
|
7882
6454
|
}
|
|
7883
|
-
return /* @__PURE__ */
|
|
6455
|
+
return /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, modal && /* @__PURE__ */ import_react53.default.createElement(InsuranceModal_default, {
|
|
7884
6456
|
id,
|
|
7885
6457
|
branch,
|
|
7886
6458
|
onClose: toggleModal,
|
|
7887
6459
|
insuranceOptions: insuranceOptions[0]
|
|
7888
|
-
}), /* @__PURE__ */
|
|
6460
|
+
}), /* @__PURE__ */ import_react53.default.createElement(Repeat, null, /* @__PURE__ */ import_react53.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react53.default.createElement(VisualHeading, null, "V\xE4lj till f\xF6rs\xE4kring")), /* @__PURE__ */ import_react53.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, insuranceOptions.map((insuranceOption, index2) => /* @__PURE__ */ import_react53.default.createElement(OptionBox_default, {
|
|
7889
6461
|
key: `${insuranceOption.url}-${index2}`,
|
|
7890
6462
|
logo: insuranceOption.logotype || void 0,
|
|
7891
6463
|
logoAlt: insuranceOption.name || "Logotyp"
|
|
7892
|
-
}, /* @__PURE__ */
|
|
6464
|
+
}, /* @__PURE__ */ import_react53.default.createElement(OptionBoxHeading, null, "F\xE5 prisf\xF6rslag"), /* @__PURE__ */ import_react53.default.createElement(OptionBoxContent, null, /* @__PURE__ */ import_react53.default.createElement("p", null, /* @__PURE__ */ import_react53.default.createElement(ButtonInline, {
|
|
7893
6465
|
onClick: toggleModal
|
|
7894
6466
|
}, "Mer information")))))))));
|
|
7895
6467
|
};
|
|
7896
6468
|
var Insurance_default = Insurance;
|
|
7897
6469
|
|
|
7898
6470
|
// src/components/InsuranceOptions/InsuranceFree.tsx
|
|
7899
|
-
var
|
|
6471
|
+
var import_react55 = __toESM(__require("react"));
|
|
7900
6472
|
var import_marked2 = __require("marked");
|
|
7901
6473
|
|
|
7902
6474
|
// src/components/InsuranceOptions/InsuranceFreeModal.tsx
|
|
7903
|
-
var
|
|
6475
|
+
var import_react54 = __toESM(__require("react"));
|
|
7904
6476
|
var import_marked = __require("marked");
|
|
7905
6477
|
var InsuranceFreeModal = ({ onClose, insuranceOptions }) => {
|
|
7906
|
-
return /* @__PURE__ */
|
|
6478
|
+
return /* @__PURE__ */ import_react54.default.createElement(Modal_default, {
|
|
7907
6479
|
title: insuranceOptions?.insuranceHeader ?? "F\xF6rs\xE4kring",
|
|
7908
6480
|
onClose
|
|
7909
|
-
}, insuranceOptions?.longDescription && /* @__PURE__ */
|
|
6481
|
+
}, insuranceOptions?.longDescription && /* @__PURE__ */ import_react54.default.createElement(Repeat, null, /* @__PURE__ */ import_react54.default.createElement(Content_default, {
|
|
7910
6482
|
dangerouslySetInnerHTML: {
|
|
7911
6483
|
__html: (0, import_marked.marked)(insuranceOptions.longDescription)
|
|
7912
6484
|
}
|
|
7913
|
-
})), insuranceOptions?.url && /* @__PURE__ */
|
|
6485
|
+
})), insuranceOptions?.url && /* @__PURE__ */ import_react54.default.createElement(Repeat, null, /* @__PURE__ */ import_react54.default.createElement(ButtonInline, {
|
|
7914
6486
|
as: "a",
|
|
7915
6487
|
href: insuranceOptions.url,
|
|
7916
6488
|
target: "_blank",
|
|
7917
6489
|
rel: "noopener noreferrer"
|
|
7918
|
-
}, "L\xE4s mer om f\xF6rs\xE4kringen (\xD6ppnas i ett nytt f\xF6nster)")), insuranceOptions?.logotype && /* @__PURE__ */
|
|
6490
|
+
}, "L\xE4s mer om f\xF6rs\xE4kringen (\xD6ppnas i ett nytt f\xF6nster)")), insuranceOptions?.logotype && /* @__PURE__ */ import_react54.default.createElement(Repeat, null, /* @__PURE__ */ import_react54.default.createElement(LogoBox_default, {
|
|
7919
6491
|
logo: insuranceOptions.logotype,
|
|
7920
6492
|
alt: insuranceOptions.name || "Logotyp",
|
|
7921
6493
|
wide: true
|
|
@@ -7925,23 +6497,23 @@
|
|
|
7925
6497
|
|
|
7926
6498
|
// src/components/InsuranceOptions/InsuranceFree.tsx
|
|
7927
6499
|
var Insurance2 = ({ insuranceOptions }) => {
|
|
7928
|
-
const [modal, setModal] = (0,
|
|
7929
|
-
const toggleModal = (0,
|
|
6500
|
+
const [modal, setModal] = (0, import_react55.useState)(false);
|
|
6501
|
+
const toggleModal = (0, import_react55.useCallback)(() => setModal(!modal), [modal]);
|
|
7930
6502
|
if (!insuranceOptions.length) {
|
|
7931
6503
|
return null;
|
|
7932
6504
|
}
|
|
7933
|
-
return /* @__PURE__ */
|
|
6505
|
+
return /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, modal && /* @__PURE__ */ import_react55.default.createElement(InsuranceFreeModal_default, {
|
|
7934
6506
|
onClose: toggleModal,
|
|
7935
6507
|
insuranceOptions: insuranceOptions[0]
|
|
7936
|
-
}), /* @__PURE__ */
|
|
6508
|
+
}), /* @__PURE__ */ import_react55.default.createElement(Repeat, null, /* @__PURE__ */ import_react55.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react55.default.createElement(VisualHeading, null, insuranceOptions[0]?.insuranceHeader ?? "F\xF6rs\xE4kring")), /* @__PURE__ */ import_react55.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, insuranceOptions.map((insuranceOption, index2) => /* @__PURE__ */ import_react55.default.createElement(OptionBox_default, {
|
|
7937
6509
|
key: `${insuranceOption.url}-${index2}`,
|
|
7938
6510
|
logo: insuranceOption.logotype || void 0,
|
|
7939
6511
|
logoAlt: insuranceOption.name || "Logotyp"
|
|
7940
|
-
}, insuranceOption.description && /* @__PURE__ */
|
|
6512
|
+
}, insuranceOption.description && /* @__PURE__ */ import_react55.default.createElement(Content_default, {
|
|
7941
6513
|
dangerouslySetInnerHTML: {
|
|
7942
6514
|
__html: (0, import_marked2.marked)(insuranceOption.description)
|
|
7943
6515
|
}
|
|
7944
|
-
}), /* @__PURE__ */
|
|
6516
|
+
}), /* @__PURE__ */ import_react55.default.createElement(OptionBoxContent, null, /* @__PURE__ */ import_react55.default.createElement("p", null, /* @__PURE__ */ import_react55.default.createElement(ButtonInline, {
|
|
7945
6517
|
onClick: toggleModal
|
|
7946
6518
|
}, "Mer information")))))))));
|
|
7947
6519
|
};
|
|
@@ -7954,12 +6526,12 @@
|
|
|
7954
6526
|
}
|
|
7955
6527
|
if (insuranceOptions.length > 0) {
|
|
7956
6528
|
if (insuranceOptions[0].requiresDistance && insuranceOptions[0].requiresPersonalNumber)
|
|
7957
|
-
return /* @__PURE__ */
|
|
6529
|
+
return /* @__PURE__ */ import_react56.default.createElement(Insurance_default, {
|
|
7958
6530
|
id,
|
|
7959
6531
|
branch,
|
|
7960
6532
|
insuranceOptions
|
|
7961
6533
|
});
|
|
7962
|
-
return /* @__PURE__ */
|
|
6534
|
+
return /* @__PURE__ */ import_react56.default.createElement(InsuranceFree_default, {
|
|
7963
6535
|
insuranceOptions
|
|
7964
6536
|
});
|
|
7965
6537
|
}
|
|
@@ -7968,22 +6540,22 @@
|
|
|
7968
6540
|
var InsuranceOptions_default = InsuranceOptions;
|
|
7969
6541
|
|
|
7970
6542
|
// src/layouts/searchItem/ManufacturerPackagesOption.tsx
|
|
7971
|
-
var
|
|
6543
|
+
var import_react57 = __toESM(__require("react"));
|
|
7972
6544
|
var import_marked3 = __require("marked");
|
|
7973
6545
|
var ManufacturerPackageOption = ({ packageOption }) => {
|
|
7974
6546
|
if (!packageOption) {
|
|
7975
6547
|
return null;
|
|
7976
6548
|
}
|
|
7977
|
-
return /* @__PURE__ */
|
|
6549
|
+
return /* @__PURE__ */ import_react57.default.createElement(ProductPageMainSection, null, /* @__PURE__ */ import_react57.default.createElement(Repeat, null, /* @__PURE__ */ import_react57.default.createElement(H2, {
|
|
7978
6550
|
noMargin: true
|
|
7979
|
-
}, packageOption.title)), packageOption.description && /* @__PURE__ */
|
|
6551
|
+
}, packageOption.title)), packageOption.description && /* @__PURE__ */ import_react57.default.createElement(Repeat, null, /* @__PURE__ */ import_react57.default.createElement(Content_default, {
|
|
7980
6552
|
dangerouslySetInnerHTML: { __html: (0, import_marked3.marked)(packageOption.description) }
|
|
7981
|
-
})), packageOption.link?.url && /* @__PURE__ */
|
|
6553
|
+
})), packageOption.link?.url && /* @__PURE__ */ import_react57.default.createElement(Repeat, null, /* @__PURE__ */ import_react57.default.createElement(ButtonInline, {
|
|
7982
6554
|
as: "a",
|
|
7983
6555
|
href: packageOption.link.url,
|
|
7984
6556
|
target: "_blank",
|
|
7985
6557
|
rel: "noopener noreferrer"
|
|
7986
|
-
}, packageOption.link.title ? packageOption.link.title : "L\xE4s mer (\xD6ppnas i ett nytt f\xF6nster)")), packageOption.image && /* @__PURE__ */
|
|
6558
|
+
}, packageOption.link.title ? packageOption.link.title : "L\xE4s mer (\xD6ppnas i ett nytt f\xF6nster)")), packageOption.image && /* @__PURE__ */ import_react57.default.createElement(Repeat, null, /* @__PURE__ */ import_react57.default.createElement(LogoBox_default, {
|
|
7987
6559
|
logo: packageOption.image,
|
|
7988
6560
|
alt: "Logotyp",
|
|
7989
6561
|
wide: true
|
|
@@ -7992,23 +6564,23 @@
|
|
|
7992
6564
|
var ManufacturerPackagesOption_default = ManufacturerPackageOption;
|
|
7993
6565
|
|
|
7994
6566
|
// src/layouts/searchItem/CheckList.tsx
|
|
7995
|
-
var
|
|
6567
|
+
var import_react65 = __toESM(__require("react"));
|
|
7996
6568
|
|
|
7997
6569
|
// src/components/ActionList/index.tsx
|
|
7998
|
-
var
|
|
6570
|
+
var import_react59 = __toESM(__require("react"));
|
|
7999
6571
|
|
|
8000
6572
|
// src/components/ActionList/toggle-item.tsx
|
|
8001
|
-
var
|
|
6573
|
+
var import_react58 = __toESM(__require("react"));
|
|
8002
6574
|
var initialValue = {};
|
|
8003
6575
|
var getInitialValue = (title) => title && !!initialValue[title];
|
|
8004
6576
|
var ToggleItem = ({ title, value, type, onClickVisible, onClickValue }) => {
|
|
8005
|
-
const [visible, setVisible] = (0,
|
|
8006
|
-
const _onClickValue = (0,
|
|
6577
|
+
const [visible, setVisible] = (0, import_react58.useState)(() => getInitialValue(type));
|
|
6578
|
+
const _onClickValue = (0, import_react58.useCallback)(() => {
|
|
8007
6579
|
if (onClickValue) {
|
|
8008
6580
|
onClickValue();
|
|
8009
6581
|
}
|
|
8010
6582
|
}, []);
|
|
8011
|
-
const onClick = (0,
|
|
6583
|
+
const onClick = (0, import_react58.useCallback)(() => {
|
|
8012
6584
|
if (!visible) {
|
|
8013
6585
|
initialValue[type] = true;
|
|
8014
6586
|
setVisible(true);
|
|
@@ -8018,17 +6590,17 @@
|
|
|
8018
6590
|
}
|
|
8019
6591
|
}, [visible]);
|
|
8020
6592
|
const visibleTitle = type === "tel" ? "Ring" : type === "mailto" ? "Skicka ett mail till" : "";
|
|
8021
|
-
return /* @__PURE__ */
|
|
6593
|
+
return /* @__PURE__ */ import_react58.default.createElement(RepeatTiny, null, visible ? /* @__PURE__ */ import_react58.default.createElement(ButtonSecondary, {
|
|
8022
6594
|
onClick: _onClickValue,
|
|
8023
6595
|
as: "a",
|
|
8024
6596
|
href: `${type}:${value}`,
|
|
8025
6597
|
title: `${visibleTitle} ${value}`,
|
|
8026
6598
|
fullWidth: true
|
|
8027
|
-
}, /* @__PURE__ */
|
|
6599
|
+
}, /* @__PURE__ */ import_react58.default.createElement(ButtonContent, null, value)) : /* @__PURE__ */ import_react58.default.createElement(ButtonSecondary, {
|
|
8028
6600
|
onClick,
|
|
8029
6601
|
title,
|
|
8030
6602
|
fullWidth: true
|
|
8031
|
-
}, /* @__PURE__ */
|
|
6603
|
+
}, /* @__PURE__ */ import_react58.default.createElement(ButtonContent, null, title)));
|
|
8032
6604
|
};
|
|
8033
6605
|
var toggle_item_default = ToggleItem;
|
|
8034
6606
|
|
|
@@ -8141,18 +6713,18 @@
|
|
|
8141
6713
|
var ActionList = ({ contact, branch }) => {
|
|
8142
6714
|
const email = contact?.email || branch?.contact?.email;
|
|
8143
6715
|
const phonenumber = contact?.phonenumber || branch?.contact?.phonenumber;
|
|
8144
|
-
const onClickMailVisible = (0,
|
|
8145
|
-
const onClickPhoneVisible = (0,
|
|
8146
|
-
const onClickPhoneValue = (0,
|
|
6716
|
+
const onClickMailVisible = (0, import_react59.useCallback)(() => pubsub_default.publish("MailVisible"), []);
|
|
6717
|
+
const onClickPhoneVisible = (0, import_react59.useCallback)(() => pubsub_default.publish("PhonenumberVisible"), []);
|
|
6718
|
+
const onClickPhoneValue = (0, import_react59.useCallback)(() => pubsub_default.publish("PhonenumberCall"), []);
|
|
8147
6719
|
if (!email && !phonenumber) {
|
|
8148
6720
|
return null;
|
|
8149
6721
|
}
|
|
8150
|
-
return /* @__PURE__ */
|
|
6722
|
+
return /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, email && /* @__PURE__ */ import_react59.default.createElement(toggle_item_default, {
|
|
8151
6723
|
onClickVisible: onClickMailVisible,
|
|
8152
6724
|
title: "Visa mailadress",
|
|
8153
6725
|
value: email,
|
|
8154
6726
|
type: "mailto"
|
|
8155
|
-
}), phonenumber && /* @__PURE__ */
|
|
6727
|
+
}), phonenumber && /* @__PURE__ */ import_react59.default.createElement(toggle_item_default, {
|
|
8156
6728
|
title: "Visa telefonnummer",
|
|
8157
6729
|
value: formatPhonenumber(phonenumber),
|
|
8158
6730
|
type: "tel",
|
|
@@ -8163,16 +6735,16 @@
|
|
|
8163
6735
|
var ActionList_default = ActionList;
|
|
8164
6736
|
|
|
8165
6737
|
// src/components/CheckMarkList/index.tsx
|
|
8166
|
-
var
|
|
6738
|
+
var import_react60 = __toESM(__require("react"));
|
|
8167
6739
|
|
|
8168
6740
|
// src/components/CheckMarkList/wrapper.tsx
|
|
8169
|
-
var
|
|
8170
|
-
var List9 =
|
|
6741
|
+
var import_styled_components48 = __toESM(__require("styled-components"));
|
|
6742
|
+
var List9 = import_styled_components48.default.ul`
|
|
8171
6743
|
list-style: none;
|
|
8172
6744
|
padding: 0;
|
|
8173
6745
|
margin: 0;
|
|
8174
6746
|
`;
|
|
8175
|
-
var
|
|
6747
|
+
var Item9 = import_styled_components48.default.li`
|
|
8176
6748
|
position: relative;
|
|
8177
6749
|
font-size: 0.875rem;
|
|
8178
6750
|
|
|
@@ -8180,7 +6752,7 @@
|
|
|
8180
6752
|
margin-top: ${size(0.5)};
|
|
8181
6753
|
}
|
|
8182
6754
|
`;
|
|
8183
|
-
var Icon6 =
|
|
6755
|
+
var Icon6 = import_styled_components48.default.div.attrs(() => ({
|
|
8184
6756
|
className: "wayke__theme wayke__color--primary-text"
|
|
8185
6757
|
}))`
|
|
8186
6758
|
position: absolute;
|
|
@@ -8188,52 +6760,52 @@
|
|
|
8188
6760
|
top: 4px; // Magic number
|
|
8189
6761
|
font-size: 0.875em;
|
|
8190
6762
|
`;
|
|
8191
|
-
var Label10 =
|
|
6763
|
+
var Label10 = import_styled_components48.default.div`
|
|
8192
6764
|
padding-left: calc(1em + ${size(1)});
|
|
8193
6765
|
`;
|
|
8194
6766
|
|
|
8195
6767
|
// src/components/CheckMarkList/index.tsx
|
|
8196
|
-
var CheckMarkListItem = ({ children }) => /* @__PURE__ */
|
|
6768
|
+
var CheckMarkListItem = ({ children }) => /* @__PURE__ */ import_react60.default.createElement(Item9, null, /* @__PURE__ */ import_react60.default.createElement(Icon6, null, /* @__PURE__ */ import_react60.default.createElement(IconCheck, {
|
|
8197
6769
|
block: true
|
|
8198
|
-
})), /* @__PURE__ */
|
|
8199
|
-
var CheckMarkList = ({ children }) => /* @__PURE__ */
|
|
6770
|
+
})), /* @__PURE__ */ import_react60.default.createElement(Label10, null, children));
|
|
6771
|
+
var CheckMarkList = ({ children }) => /* @__PURE__ */ import_react60.default.createElement(List9, null, children);
|
|
8200
6772
|
var CheckMarkList_default = CheckMarkList;
|
|
8201
6773
|
|
|
8202
6774
|
// src/components/SwitchBar/index.tsx
|
|
8203
|
-
var
|
|
6775
|
+
var import_react61 = __toESM(__require("react"));
|
|
8204
6776
|
|
|
8205
6777
|
// src/components/SwitchBar/wrapper.tsx
|
|
8206
|
-
var
|
|
8207
|
-
var
|
|
6778
|
+
var import_styled_components49 = __toESM(__require("styled-components"));
|
|
6779
|
+
var Wrapper26 = import_styled_components49.default.div`
|
|
8208
6780
|
padding: ${size(1.5)} ${size(2)};
|
|
8209
6781
|
background-color: ${(props) => props.theme.color.accentDark};
|
|
8210
6782
|
border-radius: 3px;
|
|
8211
6783
|
font-size: 0.875rem;
|
|
8212
6784
|
`;
|
|
8213
|
-
var Header6 =
|
|
6785
|
+
var Header6 = import_styled_components49.default.div`
|
|
8214
6786
|
display: flex;
|
|
8215
6787
|
align-items: center;
|
|
8216
6788
|
`;
|
|
8217
|
-
var Body5 =
|
|
6789
|
+
var Body5 = import_styled_components49.default.div`
|
|
8218
6790
|
font-size: 0.875rem;
|
|
8219
6791
|
margin-top: ${size(1)};
|
|
8220
6792
|
`;
|
|
8221
|
-
var Info3 =
|
|
6793
|
+
var Info3 = import_styled_components49.default.div`
|
|
8222
6794
|
flex: 1 1 auto;
|
|
8223
6795
|
display: flex;
|
|
8224
6796
|
align-items: center;
|
|
8225
6797
|
`;
|
|
8226
|
-
var Action7 =
|
|
6798
|
+
var Action7 = import_styled_components49.default.div`
|
|
8227
6799
|
flex-shrink: 0;
|
|
8228
6800
|
padding-left: ${size(1.5)};
|
|
8229
6801
|
font-size: 0.875rem;
|
|
8230
6802
|
`;
|
|
8231
|
-
var InfoContent =
|
|
6803
|
+
var InfoContent = import_styled_components49.default.div`
|
|
8232
6804
|
& + & {
|
|
8233
6805
|
margin-left: ${size(0.75)};
|
|
8234
6806
|
}
|
|
8235
6807
|
`;
|
|
8236
|
-
var InfoBtn2 = (0,
|
|
6808
|
+
var InfoBtn2 = (0, import_styled_components49.default)(ButtonReset).attrs(() => ({
|
|
8237
6809
|
className: "wayke__theme wayke__color--primary-text"
|
|
8238
6810
|
}))`
|
|
8239
6811
|
position: relative;
|
|
@@ -8267,7 +6839,7 @@
|
|
|
8267
6839
|
transform: scale(0.95);
|
|
8268
6840
|
}
|
|
8269
6841
|
`;
|
|
8270
|
-
var Title2 =
|
|
6842
|
+
var Title2 = import_styled_components49.default.div.attrs(() => ({
|
|
8271
6843
|
className: "wayke__theme wayke__font--bold"
|
|
8272
6844
|
}))`
|
|
8273
6845
|
font-size: 1rem;
|
|
@@ -8275,17 +6847,17 @@
|
|
|
8275
6847
|
|
|
8276
6848
|
// src/components/SwitchBar/index.tsx
|
|
8277
6849
|
var SwitchBar = ({ title, body, actionTitle, children, onClick }) => {
|
|
8278
|
-
const [info, setInfo] = (0,
|
|
8279
|
-
const onToggleInfo = (0,
|
|
8280
|
-
return /* @__PURE__ */
|
|
6850
|
+
const [info, setInfo] = (0, import_react61.useState)(false);
|
|
6851
|
+
const onToggleInfo = (0, import_react61.useCallback)(() => setInfo(!info), [info]);
|
|
6852
|
+
return /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement(Wrapper26, null, /* @__PURE__ */ import_react61.default.createElement(Header6, null, /* @__PURE__ */ import_react61.default.createElement(Info3, null, /* @__PURE__ */ import_react61.default.createElement(InfoContent, null, /* @__PURE__ */ import_react61.default.createElement(Title2, null, title)), children && /* @__PURE__ */ import_react61.default.createElement(InfoContent, null, /* @__PURE__ */ import_react61.default.createElement(InfoBtn2, {
|
|
8281
6853
|
onClick: onToggleInfo,
|
|
8282
6854
|
title: "Mer information"
|
|
8283
|
-
}, /* @__PURE__ */
|
|
6855
|
+
}, /* @__PURE__ */ import_react61.default.createElement(IconInfo, {
|
|
8284
6856
|
block: true
|
|
8285
|
-
})))), actionTitle && /* @__PURE__ */
|
|
6857
|
+
})))), actionTitle && /* @__PURE__ */ import_react61.default.createElement(Action7, null, /* @__PURE__ */ import_react61.default.createElement(ButtonInline, {
|
|
8286
6858
|
onClick,
|
|
8287
6859
|
title: actionTitle
|
|
8288
|
-
}, actionTitle))), body && /* @__PURE__ */
|
|
6860
|
+
}, actionTitle))), body && /* @__PURE__ */ import_react61.default.createElement(Body5, null, body)), info && /* @__PURE__ */ import_react61.default.createElement(Modal_default, {
|
|
8289
6861
|
title,
|
|
8290
6862
|
onClose: onToggleInfo
|
|
8291
6863
|
}, children));
|
|
@@ -8293,35 +6865,35 @@
|
|
|
8293
6865
|
var SwitchBar_default = SwitchBar;
|
|
8294
6866
|
|
|
8295
6867
|
// src/layouts/searchItem/BranchModal.tsx
|
|
8296
|
-
var
|
|
6868
|
+
var import_react63 = __toESM(__require("react"));
|
|
8297
6869
|
|
|
8298
6870
|
// src/State/CentralStorage/CentralStorageContext.ts
|
|
8299
|
-
var
|
|
8300
|
-
var CentralStorageContext = (0,
|
|
6871
|
+
var import_react62 = __require("react");
|
|
6872
|
+
var CentralStorageContext = (0, import_react62.createContext)({
|
|
8301
6873
|
setCentralStorageId: (_) => {
|
|
8302
6874
|
}
|
|
8303
6875
|
});
|
|
8304
6876
|
|
|
8305
6877
|
// src/layouts/searchItem/BranchModal.tsx
|
|
8306
6878
|
var BranchModal = ({ loading, connections, onClose }) => {
|
|
8307
|
-
const { centralStorageId, setCentralStorageId } = (0,
|
|
8308
|
-
const [localValue, setLocalValue] = (0,
|
|
8309
|
-
const onConfirm = (0,
|
|
6879
|
+
const { centralStorageId, setCentralStorageId } = (0, import_react63.useContext)(CentralStorageContext);
|
|
6880
|
+
const [localValue, setLocalValue] = (0, import_react63.useState)(centralStorageId);
|
|
6881
|
+
const onConfirm = (0, import_react63.useCallback)((id) => {
|
|
8310
6882
|
if (id) {
|
|
8311
6883
|
setCentralStorageId(id);
|
|
8312
6884
|
}
|
|
8313
6885
|
}, []);
|
|
8314
|
-
const onChange = (0,
|
|
6886
|
+
const onChange = (0, import_react63.useCallback)(
|
|
8315
6887
|
(e) => setLocalValue(e.currentTarget.value),
|
|
8316
6888
|
[]
|
|
8317
6889
|
);
|
|
8318
6890
|
if (!localValue) {
|
|
8319
6891
|
return null;
|
|
8320
6892
|
}
|
|
8321
|
-
return /* @__PURE__ */
|
|
6893
|
+
return /* @__PURE__ */ import_react63.default.createElement(Modal_default, {
|
|
8322
6894
|
title: "Byt anl\xE4ggning",
|
|
8323
6895
|
onClose
|
|
8324
|
-
}, /* @__PURE__ */
|
|
6896
|
+
}, /* @__PURE__ */ import_react63.default.createElement(Repeat, null, /* @__PURE__ */ import_react63.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react63.default.createElement(Content_default, null, /* @__PURE__ */ import_react63.default.createElement("p", null, "V\xE4lj den anl\xE4ggning du vill visa kontaktuppgifter f\xF6r."))), /* @__PURE__ */ import_react63.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react63.default.createElement(InputLabel_default, null, "V\xE4lj anl\xE4ggning"), /* @__PURE__ */ import_react63.default.createElement(InputSelect_default, {
|
|
8325
6897
|
value: localValue,
|
|
8326
6898
|
onChange,
|
|
8327
6899
|
options: connections?.map((x) => ({
|
|
@@ -8329,27 +6901,27 @@
|
|
|
8329
6901
|
displayName: x.name
|
|
8330
6902
|
})),
|
|
8331
6903
|
title: "V\xE4lj anl\xE4ggning"
|
|
8332
|
-
}))), /* @__PURE__ */
|
|
6904
|
+
}))), /* @__PURE__ */ import_react63.default.createElement(Repeat, null, /* @__PURE__ */ import_react63.default.createElement(ButtonPrimary, {
|
|
8333
6905
|
disabled: loading,
|
|
8334
6906
|
fullWidth: true,
|
|
8335
6907
|
onClick: () => onConfirm(localValue)
|
|
8336
|
-
}, /* @__PURE__ */
|
|
6908
|
+
}, /* @__PURE__ */ import_react63.default.createElement(ButtonContent, null, "V\xE4lj"))));
|
|
8337
6909
|
};
|
|
8338
6910
|
var BranchModal_default = BranchModal;
|
|
8339
6911
|
|
|
8340
6912
|
// src/layouts/searchItem/PackageOptionModal.tsx
|
|
8341
|
-
var
|
|
6913
|
+
var import_react64 = __toESM(__require("react"));
|
|
8342
6914
|
var import_marked4 = __require("marked");
|
|
8343
|
-
var PackageOptionModal = ({ packageOption, onClose }) => /* @__PURE__ */
|
|
6915
|
+
var PackageOptionModal = ({ packageOption, onClose }) => /* @__PURE__ */ import_react64.default.createElement(Modal_default, {
|
|
8344
6916
|
title: packageOption.title || "",
|
|
8345
6917
|
onClose
|
|
8346
|
-
}, packageOption.image && /* @__PURE__ */
|
|
6918
|
+
}, packageOption.image && /* @__PURE__ */ import_react64.default.createElement(Repeat, null, /* @__PURE__ */ import_react64.default.createElement(LogoBox_default, {
|
|
8347
6919
|
logo: packageOption.image,
|
|
8348
6920
|
alt: packageOption.title || void 0,
|
|
8349
6921
|
wide: true
|
|
8350
|
-
})), packageOption.description && /* @__PURE__ */
|
|
6922
|
+
})), packageOption.description && /* @__PURE__ */ import_react64.default.createElement(Repeat, null, /* @__PURE__ */ import_react64.default.createElement(Content_default, {
|
|
8351
6923
|
dangerouslySetInnerHTML: { __html: (0, import_marked4.marked)(packageOption.description) }
|
|
8352
|
-
})), packageOption.link?.href && packageOption.link.title && /* @__PURE__ */
|
|
6924
|
+
})), packageOption.link?.href && packageOption.link.title && /* @__PURE__ */ import_react64.default.createElement(Repeat, null, /* @__PURE__ */ import_react64.default.createElement(ButtonInline, {
|
|
8353
6925
|
as: "a",
|
|
8354
6926
|
href: packageOption.link.href,
|
|
8355
6927
|
target: "_blank",
|
|
@@ -8367,90 +6939,90 @@
|
|
|
8367
6939
|
toggleEcomModal,
|
|
8368
6940
|
loadingCentralStorageVehicle
|
|
8369
6941
|
}) => {
|
|
8370
|
-
const [modalBranch, setModalBranch] = (0,
|
|
8371
|
-
const openModalBranch = (0,
|
|
8372
|
-
const closeModalBranch = (0,
|
|
8373
|
-
const [modal, setModal] = (0,
|
|
8374
|
-
const onOpen = (0,
|
|
8375
|
-
const onClose = (0,
|
|
8376
|
-
(0,
|
|
6942
|
+
const [modalBranch, setModalBranch] = (0, import_react65.useState)(false);
|
|
6943
|
+
const openModalBranch = (0, import_react65.useCallback)(() => setModalBranch(true), []);
|
|
6944
|
+
const closeModalBranch = (0, import_react65.useCallback)(() => setModalBranch(false), []);
|
|
6945
|
+
const [modal, setModal] = (0, import_react65.useState)();
|
|
6946
|
+
const onOpen = (0, import_react65.useCallback)((nextModal) => setModal(nextModal), []);
|
|
6947
|
+
const onClose = (0, import_react65.useCallback)(() => setModal(void 0), []);
|
|
6948
|
+
(0, import_react65.useEffect)(() => {
|
|
8377
6949
|
if ((branch || contact) && modalBranch) {
|
|
8378
6950
|
setModalBranch(false);
|
|
8379
6951
|
}
|
|
8380
6952
|
}, [branch, contact]);
|
|
8381
6953
|
const packageOption = manufacturer?.packageOption;
|
|
8382
|
-
return /* @__PURE__ */
|
|
6954
|
+
return /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, modalBranch && /* @__PURE__ */ import_react65.default.createElement(BranchModal_default, {
|
|
8383
6955
|
loading: loadingCentralStorageVehicle,
|
|
8384
6956
|
connections: branch?.connections,
|
|
8385
6957
|
onClose: closeModalBranch
|
|
8386
|
-
}), modal && /* @__PURE__ */
|
|
6958
|
+
}), modal && /* @__PURE__ */ import_react65.default.createElement(PackageOptionModal_default, {
|
|
8387
6959
|
packageOption: modal,
|
|
8388
6960
|
onClose
|
|
8389
|
-
}), /* @__PURE__ */
|
|
6961
|
+
}), /* @__PURE__ */ import_react65.default.createElement(Repeat, null, /* @__PURE__ */ import_react65.default.createElement(CheckMarkList_default, null, packageOption?.title && /* @__PURE__ */ import_react65.default.createElement(CheckMarkListItem, null, /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, "Inkl.", " ", /* @__PURE__ */ import_react65.default.createElement(ButtonInline, {
|
|
8390
6962
|
onClick: () => onOpen({
|
|
8391
6963
|
title: packageOption?.title,
|
|
8392
6964
|
image: packageOption?.image,
|
|
8393
6965
|
description: packageOption?.description,
|
|
8394
6966
|
link: packageOption?.link
|
|
8395
6967
|
})
|
|
8396
|
-
}, packageOption.title), " ", "begagnatgaranti")), packageOptions?.map((packageOption2, index2) => /* @__PURE__ */
|
|
6968
|
+
}, packageOption.title), " ", "begagnatgaranti")), packageOptions?.map((packageOption2, index2) => /* @__PURE__ */ import_react65.default.createElement(CheckMarkListItem, {
|
|
8397
6969
|
key: packageOption2.title || index2
|
|
8398
|
-
}, /* @__PURE__ */
|
|
6970
|
+
}, /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, "Inkl.", " ", /* @__PURE__ */ import_react65.default.createElement(ButtonInline, {
|
|
8399
6971
|
onClick: () => onOpen({
|
|
8400
6972
|
title: packageOption2?.title,
|
|
8401
6973
|
image: packageOption2?.image,
|
|
8402
6974
|
description: packageOption2?.description,
|
|
8403
6975
|
link: packageOption2?.link
|
|
8404
6976
|
})
|
|
8405
|
-
}, packageOption2.title)))), ecommerce?.withHomeDelivery && /* @__PURE__ */
|
|
6977
|
+
}, packageOption2.title)))), ecommerce?.withHomeDelivery && /* @__PURE__ */ import_react65.default.createElement(CheckMarkListItem, null, "Hemleverans"))), /* @__PURE__ */ import_react65.default.createElement(Repeat, null, ecommerce && ecommerce.enabled && /* @__PURE__ */ import_react65.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react65.default.createElement(ButtonPrimary, {
|
|
8406
6978
|
disabled: !!ecommerce.reserved,
|
|
8407
6979
|
fullWidth: true,
|
|
8408
6980
|
onClick: toggleEcomModal
|
|
8409
|
-
}, /* @__PURE__ */
|
|
6981
|
+
}, /* @__PURE__ */ import_react65.default.createElement(ButtonContent, null, "K\xF6p bilen online"))), ecommerce?.reserved && /* @__PURE__ */ import_react65.default.createElement(RepeatTiny, null, /* @__PURE__ */ import_react65.default.createElement(SwitchBar_default, {
|
|
8410
6982
|
title: "Bilen \xE4r reserverad",
|
|
8411
6983
|
body: "Denna bil \xE4r reserverad av en annan k\xF6pare."
|
|
8412
|
-
}, /* @__PURE__ */
|
|
6984
|
+
}, /* @__PURE__ */ import_react65.default.createElement(Content_default, null, /* @__PURE__ */ import_react65.default.createElement("p", null, "Denna bil \xE4r reserverad av en annan k\xF6pare.")))), /* @__PURE__ */ import_react65.default.createElement(ActionList_default, {
|
|
8413
6985
|
branch,
|
|
8414
6986
|
contact
|
|
8415
|
-
})), (branch?.connections.length || 0) > 1 && /* @__PURE__ */
|
|
6987
|
+
})), (branch?.connections.length || 0) > 1 && /* @__PURE__ */ import_react65.default.createElement(Repeat, null, /* @__PURE__ */ import_react65.default.createElement(SwitchBar_default, {
|
|
8416
6988
|
title: "Centrallagerbil",
|
|
8417
6989
|
actionTitle: "Byt anl\xE4ggning",
|
|
8418
6990
|
onClick: openModalBranch
|
|
8419
|
-
}, /* @__PURE__ */
|
|
6991
|
+
}, /* @__PURE__ */ import_react65.default.createElement(Content_default, null, /* @__PURE__ */ import_react65.default.createElement("p", null, "Denna bil tillh\xF6r ett centrallager och g\xE5r att k\xF6pa genom flera anl\xE4ggningar. Byt anl\xE4ggning f\xF6r att visa kontaktuppgifter till just den anl\xE4ggningen.")))));
|
|
8420
6992
|
};
|
|
8421
6993
|
var CheckList_default = CheckList;
|
|
8422
6994
|
|
|
8423
6995
|
// src/layouts/searchItem/Related.tsx
|
|
8424
|
-
var
|
|
6996
|
+
var import_react69 = __toESM(__require("react"));
|
|
8425
6997
|
|
|
8426
6998
|
// src/components/SectionHeader/index.tsx
|
|
8427
|
-
var
|
|
6999
|
+
var import_react66 = __toESM(__require("react"));
|
|
8428
7000
|
|
|
8429
7001
|
// src/components/SectionHeader/wrapper.tsx
|
|
8430
|
-
var
|
|
8431
|
-
var
|
|
7002
|
+
var import_styled_components50 = __toESM(__require("styled-components"));
|
|
7003
|
+
var Wrapper27 = import_styled_components50.default.div`
|
|
8432
7004
|
display: flex;
|
|
8433
7005
|
align-items: center;
|
|
8434
7006
|
`;
|
|
8435
|
-
var Heading7 =
|
|
7007
|
+
var Heading7 = import_styled_components50.default.div`
|
|
8436
7008
|
flex: 1 1 auto;
|
|
8437
7009
|
`;
|
|
8438
|
-
var Action8 =
|
|
7010
|
+
var Action8 = import_styled_components50.default.div`
|
|
8439
7011
|
flex-shrink: 0;
|
|
8440
7012
|
padding-left: ${size(2)};
|
|
8441
7013
|
`;
|
|
8442
7014
|
|
|
8443
7015
|
// src/components/SectionHeader/index.tsx
|
|
8444
|
-
var SectionHeader = ({ children, onClick, actionTitle }) => /* @__PURE__ */
|
|
7016
|
+
var SectionHeader = ({ children, onClick, actionTitle }) => /* @__PURE__ */ import_react66.default.createElement(Wrapper27, null, /* @__PURE__ */ import_react66.default.createElement(Heading7, null, children), onClick && actionTitle && /* @__PURE__ */ import_react66.default.createElement(Action8, null, /* @__PURE__ */ import_react66.default.createElement(ButtonClear, {
|
|
8445
7017
|
as: "a",
|
|
8446
7018
|
href: "#",
|
|
8447
7019
|
onClick
|
|
8448
|
-
}, /* @__PURE__ */
|
|
7020
|
+
}, /* @__PURE__ */ import_react66.default.createElement(ButtonContent, null, actionTitle))));
|
|
8449
7021
|
var SectionHeader_default = SectionHeader;
|
|
8450
7022
|
|
|
8451
7023
|
// src/components/OverflowGrid/index.tsx
|
|
8452
|
-
var
|
|
8453
|
-
var OverflowGrid =
|
|
7024
|
+
var import_styled_components51 = __toESM(__require("styled-components"));
|
|
7025
|
+
var OverflowGrid = import_styled_components51.default.div`
|
|
8454
7026
|
${(props) => props.theme.breakpoint.LtMd} {
|
|
8455
7027
|
${Wrapper} & {
|
|
8456
7028
|
margin-left: ${size(-3)};
|
|
@@ -8465,7 +7037,7 @@
|
|
|
8465
7037
|
}
|
|
8466
7038
|
}
|
|
8467
7039
|
`;
|
|
8468
|
-
var OverflowGridList =
|
|
7040
|
+
var OverflowGridList = import_styled_components51.default.ul`
|
|
8469
7041
|
display: flex;
|
|
8470
7042
|
align-items: flex-start;
|
|
8471
7043
|
list-style: none;
|
|
@@ -8497,7 +7069,7 @@
|
|
|
8497
7069
|
}
|
|
8498
7070
|
}
|
|
8499
7071
|
`;
|
|
8500
|
-
var OverflowGridItem =
|
|
7072
|
+
var OverflowGridItem = import_styled_components51.default.li`
|
|
8501
7073
|
flex: 1 0 auto;
|
|
8502
7074
|
width: calc(100% - ${size(2)});
|
|
8503
7075
|
max-width: calc(100% - ${size(2)});
|
|
@@ -8515,11 +7087,11 @@
|
|
|
8515
7087
|
`;
|
|
8516
7088
|
|
|
8517
7089
|
// src/State/RelatedSearch/useRelatedSearch.ts
|
|
8518
|
-
var
|
|
7090
|
+
var import_react68 = __require("react");
|
|
8519
7091
|
|
|
8520
7092
|
// src/State/RelatedSearch/RelatedSearchContext.ts
|
|
8521
|
-
var
|
|
8522
|
-
var RelatedSearchContext = (0,
|
|
7093
|
+
var import_react67 = __require("react");
|
|
7094
|
+
var RelatedSearchContext = (0, import_react67.createContext)({
|
|
8523
7095
|
moreLikeThisUrl: false,
|
|
8524
7096
|
loading: false,
|
|
8525
7097
|
error: false,
|
|
@@ -8530,8 +7102,8 @@
|
|
|
8530
7102
|
|
|
8531
7103
|
// src/State/RelatedSearch/useRelatedSearch.ts
|
|
8532
7104
|
var useRelatedSearch = (id) => {
|
|
8533
|
-
const data = (0,
|
|
8534
|
-
(0,
|
|
7105
|
+
const data = (0, import_react68.useContext)(RelatedSearchContext);
|
|
7106
|
+
(0, import_react68.useEffect)(() => {
|
|
8535
7107
|
const searchParams = new URLSearchParams();
|
|
8536
7108
|
searchParams.set("hits", "3");
|
|
8537
7109
|
if (data.moreLikeThisUrl && id) {
|
|
@@ -8557,7 +7129,7 @@
|
|
|
8557
7129
|
// src/layouts/searchItem/Related.tsx
|
|
8558
7130
|
var Related = ({ id, hashRoute, pathRoute, onClickSearchItem }) => {
|
|
8559
7131
|
const { loading, response, moreLikeThisUrl } = useRelatedSearch_default(id);
|
|
8560
|
-
const onItemClicked = (0,
|
|
7132
|
+
const onItemClicked = (0, import_react69.useCallback)((id2) => {
|
|
8561
7133
|
pubsub_default.publish("ItemClicked", id2);
|
|
8562
7134
|
if (onClickSearchItem) {
|
|
8563
7135
|
onClickSearchItem(id2);
|
|
@@ -8567,30 +7139,30 @@
|
|
|
8567
7139
|
return null;
|
|
8568
7140
|
}
|
|
8569
7141
|
if (loading) {
|
|
8570
|
-
return /* @__PURE__ */
|
|
7142
|
+
return /* @__PURE__ */ import_react69.default.createElement(Loader_default, null);
|
|
8571
7143
|
}
|
|
8572
|
-
return /* @__PURE__ */
|
|
7144
|
+
return /* @__PURE__ */ import_react69.default.createElement(PageSection, {
|
|
8573
7145
|
accent: true,
|
|
8574
7146
|
large: true,
|
|
8575
7147
|
className: "wayke__theme wayke__color--accent-bg"
|
|
8576
|
-
}, /* @__PURE__ */
|
|
7148
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Container_default, null, moreLikeThisUrl ? /* @__PURE__ */ import_react69.default.createElement(Repeat, null, /* @__PURE__ */ import_react69.default.createElement(SectionHeader_default, {
|
|
8577
7149
|
onClick: () => {
|
|
8578
7150
|
}
|
|
8579
|
-
}, /* @__PURE__ */
|
|
7151
|
+
}, /* @__PURE__ */ import_react69.default.createElement(H2, {
|
|
8580
7152
|
noMargin: true
|
|
8581
|
-
}, "Relaterade fordon"))) : /* @__PURE__ */
|
|
7153
|
+
}, "Relaterade fordon"))) : /* @__PURE__ */ import_react69.default.createElement(Repeat, null, /* @__PURE__ */ import_react69.default.createElement(SectionHeader_default, {
|
|
8582
7154
|
onClick: () => {
|
|
8583
7155
|
},
|
|
8584
7156
|
actionTitle: "Visa alla"
|
|
8585
|
-
}, /* @__PURE__ */
|
|
7157
|
+
}, /* @__PURE__ */ import_react69.default.createElement(H2, {
|
|
8586
7158
|
noMargin: true
|
|
8587
|
-
}, "Senast inkomna"))), /* @__PURE__ */
|
|
7159
|
+
}, "Senast inkomna"))), /* @__PURE__ */ import_react69.default.createElement(Repeat, null, /* @__PURE__ */ import_react69.default.createElement(OverflowGrid, null, /* @__PURE__ */ import_react69.default.createElement(OverflowGridList, null, response?.documentList.documents.map((document2) => {
|
|
8588
7160
|
const prefix = pathRoute ? `/${pathRoute}` : "/";
|
|
8589
7161
|
const r = regexPathGuid(pathRoute);
|
|
8590
7162
|
const pathRouteUrl = window.location.pathname === "/" ? `${prefix}${document2._id}` : r.test(`${pathRoute}${id}`) ? window.location.pathname.replace(r, `${pathRoute}${document2._id}`) : `${window.location.pathname}${prefix}${document2._id}`;
|
|
8591
|
-
return /* @__PURE__ */
|
|
7163
|
+
return /* @__PURE__ */ import_react69.default.createElement(OverflowGridItem, {
|
|
8592
7164
|
key: document2._id
|
|
8593
|
-
}, /* @__PURE__ */
|
|
7165
|
+
}, /* @__PURE__ */ import_react69.default.createElement(ProductCard_default, {
|
|
8594
7166
|
id: document2._id,
|
|
8595
7167
|
onClick: onItemClicked,
|
|
8596
7168
|
title: document2.title,
|
|
@@ -8620,24 +7192,24 @@
|
|
|
8620
7192
|
var Related_default = Related;
|
|
8621
7193
|
|
|
8622
7194
|
// src/layouts/searchItem/PackageOptions.tsx
|
|
8623
|
-
var
|
|
7195
|
+
var import_react70 = __toESM(__require("react"));
|
|
8624
7196
|
var import_marked5 = __require("marked");
|
|
8625
7197
|
var PackageOptions = ({ packageOptions }) => {
|
|
8626
7198
|
if (!packageOptions) {
|
|
8627
7199
|
return null;
|
|
8628
7200
|
}
|
|
8629
|
-
return /* @__PURE__ */
|
|
7201
|
+
return /* @__PURE__ */ import_react70.default.createElement(import_react70.default.Fragment, null, packageOptions.map((packageOption, index2) => /* @__PURE__ */ import_react70.default.createElement(ProductPageMainSection, {
|
|
8630
7202
|
key: packageOption.title || index2
|
|
8631
|
-
}, /* @__PURE__ */
|
|
7203
|
+
}, /* @__PURE__ */ import_react70.default.createElement(Repeat, null, /* @__PURE__ */ import_react70.default.createElement(H2, {
|
|
8632
7204
|
noMargin: true
|
|
8633
|
-
}, packageOption.title)), packageOption.description && /* @__PURE__ */
|
|
7205
|
+
}, packageOption.title)), packageOption.description && /* @__PURE__ */ import_react70.default.createElement(Repeat, null, /* @__PURE__ */ import_react70.default.createElement(Content_default, {
|
|
8634
7206
|
dangerouslySetInnerHTML: { __html: (0, import_marked5.marked)(packageOption.description) }
|
|
8635
|
-
})), packageOption.link?.url && /* @__PURE__ */
|
|
7207
|
+
})), packageOption.link?.url && /* @__PURE__ */ import_react70.default.createElement(Repeat, null, /* @__PURE__ */ import_react70.default.createElement(ButtonInline, {
|
|
8636
7208
|
as: "a",
|
|
8637
7209
|
href: packageOption.link.url,
|
|
8638
7210
|
target: "_blank",
|
|
8639
7211
|
rel: "noopener noreferrer"
|
|
8640
|
-
}, packageOption.link.title ? packageOption.link.title : "L\xE4s mer (\xD6ppnas i ett nytt f\xF6nster)")), packageOption.image && /* @__PURE__ */
|
|
7212
|
+
}, packageOption.link.title ? packageOption.link.title : "L\xE4s mer (\xD6ppnas i ett nytt f\xF6nster)")), packageOption.image && /* @__PURE__ */ import_react70.default.createElement(Repeat, null, /* @__PURE__ */ import_react70.default.createElement(LogoBox_default, {
|
|
8641
7213
|
logo: packageOption.image,
|
|
8642
7214
|
alt: "Logotyp",
|
|
8643
7215
|
wide: true
|
|
@@ -8646,31 +7218,31 @@
|
|
|
8646
7218
|
var PackageOptions_default = PackageOptions;
|
|
8647
7219
|
|
|
8648
7220
|
// src/layouts/searchItem/Branch.tsx
|
|
8649
|
-
var
|
|
7221
|
+
var import_react77 = __toESM(__require("react"));
|
|
8650
7222
|
|
|
8651
7223
|
// src/components/TableColumn/index.tsx
|
|
8652
|
-
var
|
|
8653
|
-
var TableColumn =
|
|
7224
|
+
var import_styled_components52 = __toESM(__require("styled-components"));
|
|
7225
|
+
var TableColumn = import_styled_components52.default.div`
|
|
8654
7226
|
line-height: 1.2;
|
|
8655
7227
|
`;
|
|
8656
|
-
var TableColumnRow =
|
|
7228
|
+
var TableColumnRow = import_styled_components52.default.div`
|
|
8657
7229
|
display: flex;
|
|
8658
7230
|
align-items: flex-start;
|
|
8659
7231
|
margin: ${size(-1)};
|
|
8660
7232
|
`;
|
|
8661
|
-
var TableColumnCell =
|
|
7233
|
+
var TableColumnCell = import_styled_components52.default.div`
|
|
8662
7234
|
flex: 1 0 50%;
|
|
8663
7235
|
padding: ${size(1)};
|
|
8664
7236
|
`;
|
|
8665
7237
|
|
|
8666
7238
|
// src/components/OpeningHours/index.tsx
|
|
8667
|
-
var
|
|
7239
|
+
var import_react72 = __toESM(__require("react"));
|
|
8668
7240
|
|
|
8669
7241
|
// src/components/Badge/index.tsx
|
|
8670
|
-
var
|
|
7242
|
+
var import_react71 = __toESM(__require("react"));
|
|
8671
7243
|
|
|
8672
7244
|
// src/components/Badge/wrapper.tsx
|
|
8673
|
-
var
|
|
7245
|
+
var import_styled_components53 = __toESM(__require("styled-components"));
|
|
8674
7246
|
var getBg = (severity) => {
|
|
8675
7247
|
let bg = theme_default.color.textDark;
|
|
8676
7248
|
if (severity === "positive") {
|
|
@@ -8680,7 +7252,7 @@
|
|
|
8680
7252
|
}
|
|
8681
7253
|
return bg;
|
|
8682
7254
|
};
|
|
8683
|
-
var
|
|
7255
|
+
var Wrapper28 = import_styled_components53.default.div.attrs(() => ({
|
|
8684
7256
|
className: "wayke__theme wayke__font--bold"
|
|
8685
7257
|
}))`
|
|
8686
7258
|
display: inline-block;
|
|
@@ -8693,7 +7265,7 @@
|
|
|
8693
7265
|
`;
|
|
8694
7266
|
|
|
8695
7267
|
// src/components/Badge/index.tsx
|
|
8696
|
-
var Badge = ({ label, severity }) => /* @__PURE__ */
|
|
7268
|
+
var Badge = ({ label, severity }) => /* @__PURE__ */ import_react71.default.createElement(Wrapper28, {
|
|
8697
7269
|
severity
|
|
8698
7270
|
}, label);
|
|
8699
7271
|
var Badge_default = Badge;
|
|
@@ -8757,11 +7329,11 @@
|
|
|
8757
7329
|
return new Date().setHours(splitted[0], splitted[1]).valueOf();
|
|
8758
7330
|
};
|
|
8759
7331
|
var OpeningHours = ({ openingHours }) => {
|
|
8760
|
-
const today = (0,
|
|
7332
|
+
const today = (0, import_react72.useMemo)(
|
|
8761
7333
|
() => openingHours ? GetOpeningHoursToday(openingHours) : null,
|
|
8762
7334
|
[openingHours]
|
|
8763
7335
|
);
|
|
8764
|
-
const currentlyOpen = (0,
|
|
7336
|
+
const currentlyOpen = (0, import_react72.useMemo)(() => {
|
|
8765
7337
|
try {
|
|
8766
7338
|
if (today?.from && today?.until) {
|
|
8767
7339
|
const currentDate = new Date().valueOf();
|
|
@@ -8773,60 +7345,60 @@
|
|
|
8773
7345
|
return false;
|
|
8774
7346
|
}
|
|
8775
7347
|
}, [today]);
|
|
8776
|
-
const oh = (0,
|
|
7348
|
+
const oh = (0, import_react72.useMemo)(() => openingHours ? GetOpeningHours(openingHours) : null, [openingHours]);
|
|
8777
7349
|
if (!oh) {
|
|
8778
7350
|
return null;
|
|
8779
7351
|
}
|
|
8780
|
-
return /* @__PURE__ */
|
|
7352
|
+
return /* @__PURE__ */ import_react72.default.createElement(import_react72.default.Fragment, null, /* @__PURE__ */ import_react72.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react72.default.createElement(Badge_default, {
|
|
8781
7353
|
label: currentlyOpen ? "\xD6ppet" : "St\xE4ngt",
|
|
8782
7354
|
severity: currentlyOpen ? "positive" : "negative"
|
|
8783
|
-
})), /* @__PURE__ */
|
|
7355
|
+
})), /* @__PURE__ */ import_react72.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react72.default.createElement(TableColumn, null, /* @__PURE__ */ import_react72.default.createElement(TableColumnRow, null, /* @__PURE__ */ import_react72.default.createElement(TableColumnCell, null, /* @__PURE__ */ import_react72.default.createElement(UtilityTextBold, null, today?.title)), /* @__PURE__ */ import_react72.default.createElement(TableColumnCell, null, /* @__PURE__ */ import_react72.default.createElement(UtilityTextBold, null, today?.from ? `${today.from}-${today.until}` : "St\xE4ngt"))), oh.map((o) => /* @__PURE__ */ import_react72.default.createElement(TableColumnRow, {
|
|
8784
7356
|
key: o.titleFrom
|
|
8785
|
-
}, /* @__PURE__ */
|
|
7357
|
+
}, /* @__PURE__ */ import_react72.default.createElement(TableColumnCell, null, o.titleTo ? `${o.titleFrom}-${o.titleTo}` : o.titleFrom), /* @__PURE__ */ import_react72.default.createElement(TableColumnCell, null, o.from ? `${o.from}-${o.until}` : "St\xE4ngt"))))));
|
|
8786
7358
|
};
|
|
8787
7359
|
var OpeningHours_default = OpeningHours;
|
|
8788
7360
|
|
|
8789
7361
|
// src/components/PhoneNumber/index.tsx
|
|
8790
|
-
var
|
|
7362
|
+
var import_react73 = __toESM(__require("react"));
|
|
8791
7363
|
var PhoneNumber = ({ phoneNumber }) => {
|
|
8792
|
-
const [visible, setVisible] = (0,
|
|
8793
|
-
const onClick = (0,
|
|
8794
|
-
return /* @__PURE__ */
|
|
7364
|
+
const [visible, setVisible] = (0, import_react73.useState)(false);
|
|
7365
|
+
const onClick = (0, import_react73.useCallback)(() => !visible && setVisible(true), [visible]);
|
|
7366
|
+
return /* @__PURE__ */ import_react73.default.createElement(TableColumnRow, null, /* @__PURE__ */ import_react73.default.createElement(TableColumnCell, null, "Telefonnummer"), /* @__PURE__ */ import_react73.default.createElement(TableColumnCell, null, visible ? /* @__PURE__ */ import_react73.default.createElement(ButtonInlineBold, {
|
|
8795
7367
|
as: "a",
|
|
8796
7368
|
href: `tel:${phoneNumber}`,
|
|
8797
7369
|
title: `Ring ${phoneNumber}`
|
|
8798
|
-
}, /* @__PURE__ */
|
|
7370
|
+
}, /* @__PURE__ */ import_react73.default.createElement(ButtonContent, null, phoneNumber)) : /* @__PURE__ */ import_react73.default.createElement(ButtonInlineBold, {
|
|
8799
7371
|
onClick,
|
|
8800
7372
|
title: "Visa telefonnummer"
|
|
8801
|
-
}, /* @__PURE__ */
|
|
7373
|
+
}, /* @__PURE__ */ import_react73.default.createElement(ButtonContent, null, "Visa telefonnummer"))));
|
|
8802
7374
|
};
|
|
8803
7375
|
var PhoneNumber_default = PhoneNumber;
|
|
8804
7376
|
|
|
8805
7377
|
// src/components/Map/index.tsx
|
|
8806
|
-
var
|
|
7378
|
+
var import_react76 = __toESM(__require("react"));
|
|
8807
7379
|
|
|
8808
7380
|
// src/State/Settings/useSettings.ts
|
|
8809
|
-
var
|
|
7381
|
+
var import_react75 = __require("react");
|
|
8810
7382
|
|
|
8811
7383
|
// src/State/Settings/SettingsContext.ts
|
|
8812
|
-
var
|
|
8813
|
-
var SettingsContext = (0,
|
|
7384
|
+
var import_react74 = __require("react");
|
|
7385
|
+
var SettingsContext = (0, import_react74.createContext)({});
|
|
8814
7386
|
|
|
8815
7387
|
// src/State/Settings/useSettings.ts
|
|
8816
|
-
var useSettings = () => (0,
|
|
7388
|
+
var useSettings = () => (0, import_react75.useContext)(SettingsContext);
|
|
8817
7389
|
var useSettings_default = useSettings;
|
|
8818
7390
|
|
|
8819
7391
|
// src/components/Map/wrapper.tsx
|
|
8820
|
-
var
|
|
8821
|
-
var
|
|
7392
|
+
var import_styled_components54 = __toESM(__require("styled-components"));
|
|
7393
|
+
var Wrapper29 = import_styled_components54.default.a`
|
|
8822
7394
|
display: block;
|
|
8823
7395
|
`;
|
|
8824
|
-
var
|
|
7396
|
+
var Image3 = import_styled_components54.default.img`
|
|
8825
7397
|
display: block;
|
|
8826
7398
|
width: 100%;
|
|
8827
7399
|
border-radius: 3px;
|
|
8828
7400
|
`;
|
|
8829
|
-
var Placeholder =
|
|
7401
|
+
var Placeholder = import_styled_components54.default.a`
|
|
8830
7402
|
display: block;
|
|
8831
7403
|
position: relative;
|
|
8832
7404
|
width: 100%;
|
|
@@ -8836,7 +7408,7 @@
|
|
|
8836
7408
|
border-radius: 3px;
|
|
8837
7409
|
color: ${(props) => props.theme.color.textDark};
|
|
8838
7410
|
`;
|
|
8839
|
-
var PlaceholderAction =
|
|
7411
|
+
var PlaceholderAction = import_styled_components54.default.div`
|
|
8840
7412
|
position: absolute;
|
|
8841
7413
|
top: 50%;
|
|
8842
7414
|
left: 50%;
|
|
@@ -8846,8 +7418,8 @@
|
|
|
8846
7418
|
// src/components/Map/index.tsx
|
|
8847
7419
|
var StaticMap = ({ position }) => {
|
|
8848
7420
|
const { googleMapsApiKey, googleMapsMarker } = useSettings_default();
|
|
8849
|
-
const [visible, setVisible] = (0,
|
|
8850
|
-
const onShowMap = (0,
|
|
7421
|
+
const [visible, setVisible] = (0, import_react76.useState)(false);
|
|
7422
|
+
const onShowMap = (0, import_react76.useCallback)((e) => {
|
|
8851
7423
|
if (googleMapsApiKey) {
|
|
8852
7424
|
e.preventDefault();
|
|
8853
7425
|
setVisible(true);
|
|
@@ -8858,33 +7430,33 @@
|
|
|
8858
7430
|
}
|
|
8859
7431
|
const { latitude, longitude } = position;
|
|
8860
7432
|
if (visible && googleMapsApiKey) {
|
|
8861
|
-
return /* @__PURE__ */
|
|
7433
|
+
return /* @__PURE__ */ import_react76.default.createElement(Wrapper29, {
|
|
8862
7434
|
href: `http://maps.google.com/maps?q=${latitude},${longitude}`,
|
|
8863
7435
|
title: "Visa p\xE5 Google Maps",
|
|
8864
7436
|
target: "_blank",
|
|
8865
7437
|
rel: "nofollow noopener noreferrer"
|
|
8866
|
-
}, /* @__PURE__ */
|
|
7438
|
+
}, /* @__PURE__ */ import_react76.default.createElement(Image3, {
|
|
8867
7439
|
src: `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ""}%7C${latitude},${longitude}&key=${googleMapsApiKey}`,
|
|
8868
7440
|
alt: "Karta"
|
|
8869
7441
|
}));
|
|
8870
7442
|
}
|
|
8871
|
-
return /* @__PURE__ */
|
|
7443
|
+
return /* @__PURE__ */ import_react76.default.createElement(Placeholder, {
|
|
8872
7444
|
href: `http://maps.google.com/maps?q=${latitude},${longitude}`,
|
|
8873
7445
|
target: "_blank",
|
|
8874
7446
|
rel: "noopener noreferrer nofollow",
|
|
8875
7447
|
onClick: onShowMap
|
|
8876
|
-
}, /* @__PURE__ */
|
|
7448
|
+
}, /* @__PURE__ */ import_react76.default.createElement(PlaceholderAction, null, /* @__PURE__ */ import_react76.default.createElement(ButtonSecondary, {
|
|
8877
7449
|
as: "div"
|
|
8878
|
-
}, /* @__PURE__ */
|
|
7450
|
+
}, /* @__PURE__ */ import_react76.default.createElement(ButtonContent, null, "Visa karta"))));
|
|
8879
7451
|
};
|
|
8880
7452
|
var Map_default = StaticMap;
|
|
8881
7453
|
|
|
8882
7454
|
// src/layouts/searchItem/Branch.tsx
|
|
8883
7455
|
var Branch2 = ({ branch, loading }) => {
|
|
8884
|
-
const [modal, setModal] = (0,
|
|
8885
|
-
const openModal = (0,
|
|
8886
|
-
const closeModal = (0,
|
|
8887
|
-
(0,
|
|
7456
|
+
const [modal, setModal] = (0, import_react77.useState)(false);
|
|
7457
|
+
const openModal = (0, import_react77.useCallback)(() => setModal(true), []);
|
|
7458
|
+
const closeModal = (0, import_react77.useCallback)(() => setModal(false), []);
|
|
7459
|
+
(0, import_react77.useEffect)(() => {
|
|
8888
7460
|
if (branch && modal) {
|
|
8889
7461
|
setModal(false);
|
|
8890
7462
|
}
|
|
@@ -8892,29 +7464,29 @@
|
|
|
8892
7464
|
if (!branch) {
|
|
8893
7465
|
return null;
|
|
8894
7466
|
}
|
|
8895
|
-
return /* @__PURE__ */
|
|
7467
|
+
return /* @__PURE__ */ import_react77.default.createElement(import_react77.default.Fragment, null, modal && /* @__PURE__ */ import_react77.default.createElement(BranchModal_default, {
|
|
8896
7468
|
loading,
|
|
8897
7469
|
connections: branch?.connections,
|
|
8898
7470
|
onClose: closeModal
|
|
8899
|
-
}), /* @__PURE__ */
|
|
7471
|
+
}), /* @__PURE__ */ import_react77.default.createElement(Repeat, null, /* @__PURE__ */ import_react77.default.createElement(H2, {
|
|
8900
7472
|
noMargin: true
|
|
8901
|
-
}, branch?.location?.city ? `Den h\xE4r bilen finns p\xE5 v\xE5r anl\xE4ggning i ${branch?.location?.city}` : "Kontakt")), /* @__PURE__ */
|
|
7473
|
+
}, branch?.location?.city ? `Den h\xE4r bilen finns p\xE5 v\xE5r anl\xE4ggning i ${branch?.location?.city}` : "Kontakt")), /* @__PURE__ */ import_react77.default.createElement(Repeat, null, /* @__PURE__ */ import_react77.default.createElement(Map_default, {
|
|
8902
7474
|
position: branch?.location?.position
|
|
8903
|
-
})), (branch?.connections?.length || 0) > 1 && /* @__PURE__ */
|
|
7475
|
+
})), (branch?.connections?.length || 0) > 1 && /* @__PURE__ */ import_react77.default.createElement(Repeat, null, /* @__PURE__ */ import_react77.default.createElement(Content_default, null, /* @__PURE__ */ import_react77.default.createElement("p", null, "Denna bil tillh\xF6r ett centrallager och g\xE5r att k\xF6pa genom flera anl\xE4ggningar.", " ", /* @__PURE__ */ import_react77.default.createElement(ButtonInline, {
|
|
8904
7476
|
as: "span",
|
|
8905
7477
|
role: "button",
|
|
8906
7478
|
onClick: openModal,
|
|
8907
7479
|
inline: true
|
|
8908
|
-
}, "Klicka h\xE4r f\xF6r att visa kontaktuppgifter till en annan anl\xE4ggning"), "."))), /* @__PURE__ */
|
|
7480
|
+
}, "Klicka h\xE4r f\xF6r att visa kontaktuppgifter till en annan anl\xE4ggning"), "."))), /* @__PURE__ */ import_react77.default.createElement(Repeat, null, /* @__PURE__ */ import_react77.default.createElement(ProductPageContentLimit, null, /* @__PURE__ */ import_react77.default.createElement(Repeat, null, /* @__PURE__ */ import_react77.default.createElement(TableColumn, null, branch?.location?.streetAddress && branch?.location?.city && /* @__PURE__ */ import_react77.default.createElement(TableColumnRow, null, /* @__PURE__ */ import_react77.default.createElement(TableColumnCell, null, "Adress"), /* @__PURE__ */ import_react77.default.createElement(TableColumnCell, null, /* @__PURE__ */ import_react77.default.createElement(ButtonInlineBold, null, /* @__PURE__ */ import_react77.default.createElement(ButtonContent, null, `${branch?.location?.streetAddress}, ${branch?.location?.city}`)))), branch?.contact?.phonenumber && /* @__PURE__ */ import_react77.default.createElement(PhoneNumber_default, {
|
|
8909
7481
|
phoneNumber: formatPhonenumber(branch.contact.phonenumber)
|
|
8910
|
-
}))), branch?.openingHours && /* @__PURE__ */
|
|
7482
|
+
}))), branch?.openingHours && /* @__PURE__ */ import_react77.default.createElement(Repeat, null, /* @__PURE__ */ import_react77.default.createElement(OpeningHours_default, {
|
|
8911
7483
|
openingHours: branch.openingHours
|
|
8912
7484
|
})))));
|
|
8913
7485
|
};
|
|
8914
7486
|
var Branch_default = Branch2;
|
|
8915
7487
|
|
|
8916
7488
|
// src/State/CentralStorage/useCentralStorage.ts
|
|
8917
|
-
var
|
|
7489
|
+
var import_react78 = __require("react");
|
|
8918
7490
|
|
|
8919
7491
|
// src/hooks/useSearchItemBranch.ts
|
|
8920
7492
|
var import_client8 = __require("@apollo/client");
|
|
@@ -9047,11 +7619,11 @@
|
|
|
9047
7619
|
|
|
9048
7620
|
// src/State/CentralStorage/useCentralStorage.ts
|
|
9049
7621
|
var useCentralStorage = (vehicle) => {
|
|
9050
|
-
const { centralStorageId, setCentralStorageId } = (0,
|
|
7622
|
+
const { centralStorageId, setCentralStorageId } = (0, import_react78.useContext)(CentralStorageContext);
|
|
9051
7623
|
const connections = vehicle?.branch?.connections;
|
|
9052
7624
|
const branchId = centralStorageId ? connections?.find((x) => x.id === centralStorageId)?.id : void 0;
|
|
9053
7625
|
const { data, loading } = useSearchItemBranch_default(vehicle?.id, branchId);
|
|
9054
|
-
(0,
|
|
7626
|
+
(0, import_react78.useEffect)(() => {
|
|
9055
7627
|
if ((connections?.length || 0) > 0) {
|
|
9056
7628
|
const match = centralStorageId ? connections?.find((x) => x.id === centralStorageId) : void 0;
|
|
9057
7629
|
if (!match) {
|
|
@@ -9070,23 +7642,23 @@
|
|
|
9070
7642
|
var useCentralStorage_default = useCentralStorage;
|
|
9071
7643
|
|
|
9072
7644
|
// src/layouts/searchItem/Page404.tsx
|
|
9073
|
-
var
|
|
9074
|
-
var Page404 = () => /* @__PURE__ */
|
|
7645
|
+
var import_react79 = __toESM(__require("react"));
|
|
7646
|
+
var Page404 = () => /* @__PURE__ */ import_react79.default.createElement(Page, null, /* @__PURE__ */ import_react79.default.createElement(PageSection, {
|
|
9075
7647
|
large: true
|
|
9076
|
-
}, /* @__PURE__ */
|
|
7648
|
+
}, /* @__PURE__ */ import_react79.default.createElement(Container_default, null, /* @__PURE__ */ import_react79.default.createElement(H1, {
|
|
9077
7649
|
noMargin: true
|
|
9078
7650
|
}, "404"))));
|
|
9079
7651
|
var Page404_default = Page404;
|
|
9080
7652
|
|
|
9081
7653
|
// src/layouts/searchItem/PageLoading.tsx
|
|
9082
|
-
var
|
|
9083
|
-
var PageLoading = () => /* @__PURE__ */
|
|
7654
|
+
var import_react80 = __toESM(__require("react"));
|
|
7655
|
+
var PageLoading = () => /* @__PURE__ */ import_react80.default.createElement(Page, null, /* @__PURE__ */ import_react80.default.createElement(PageSection, {
|
|
9084
7656
|
large: true
|
|
9085
|
-
}, /* @__PURE__ */
|
|
7657
|
+
}, /* @__PURE__ */ import_react80.default.createElement(Container_default, null, /* @__PURE__ */ import_react80.default.createElement(Loader_default, null))));
|
|
9086
7658
|
var PageLoading_default = PageLoading;
|
|
9087
7659
|
|
|
9088
7660
|
// src/layouts/searchItem/Property.tsx
|
|
9089
|
-
var
|
|
7661
|
+
var import_react82 = __toESM(__require("react"));
|
|
9090
7662
|
|
|
9091
7663
|
// src/utils/vehicle-properties/property-tree-creator.ts
|
|
9092
7664
|
var _PropertyTreeCreator = class {
|
|
@@ -9579,11 +8151,11 @@
|
|
|
9579
8151
|
};
|
|
9580
8152
|
|
|
9581
8153
|
// src/layouts/searchItem/MetadataItem.tsx
|
|
9582
|
-
var
|
|
8154
|
+
var import_react81 = __toESM(__require("react"));
|
|
9583
8155
|
|
|
9584
8156
|
// src/components/TableList/index.tsx
|
|
9585
|
-
var
|
|
9586
|
-
var TableList =
|
|
8157
|
+
var import_styled_components55 = __toESM(__require("styled-components"));
|
|
8158
|
+
var TableList = import_styled_components55.default.ul`
|
|
9587
8159
|
list-style: none;
|
|
9588
8160
|
padding: 0;
|
|
9589
8161
|
margin: 0;
|
|
@@ -9591,7 +8163,7 @@
|
|
|
9591
8163
|
border-bottom: 1px solid ${(props) => props.theme.color.border};
|
|
9592
8164
|
font-size: 0.875rem;
|
|
9593
8165
|
`;
|
|
9594
|
-
var TableListItem =
|
|
8166
|
+
var TableListItem = import_styled_components55.default.li`
|
|
9595
8167
|
display: flex;
|
|
9596
8168
|
align-items: center;
|
|
9597
8169
|
padding: ${size(1)} 0;
|
|
@@ -9600,30 +8172,30 @@
|
|
|
9600
8172
|
border-top: 1px solid ${(props) => props.theme.color.border};
|
|
9601
8173
|
}
|
|
9602
8174
|
`;
|
|
9603
|
-
var TableListKey =
|
|
8175
|
+
var TableListKey = import_styled_components55.default.div`
|
|
9604
8176
|
flex: 1 1 auto;
|
|
9605
8177
|
`;
|
|
9606
|
-
var TableListValue =
|
|
8178
|
+
var TableListValue = import_styled_components55.default.div`
|
|
9607
8179
|
flex-shrink: 0;
|
|
9608
8180
|
padding-left: ${size(1)};
|
|
9609
8181
|
`;
|
|
9610
|
-
var TableListBooleanPos =
|
|
8182
|
+
var TableListBooleanPos = import_styled_components55.default.div`
|
|
9611
8183
|
color: ${(props) => props.theme.color.ui.positive};
|
|
9612
8184
|
`;
|
|
9613
|
-
var TableListBooleanNeg =
|
|
8185
|
+
var TableListBooleanNeg = import_styled_components55.default.div`
|
|
9614
8186
|
color: ${(props) => props.theme.color.ui.negative};
|
|
9615
8187
|
`;
|
|
9616
8188
|
|
|
9617
8189
|
// src/layouts/searchItem/MetadataItem.tsx
|
|
9618
8190
|
var formatValue = (value, unit) => {
|
|
9619
8191
|
if (typeof value === "boolean") {
|
|
9620
|
-
return value ? /* @__PURE__ */
|
|
8192
|
+
return value ? /* @__PURE__ */ import_react81.default.createElement(TableListBooleanPos, {
|
|
9621
8193
|
title: "Ja"
|
|
9622
|
-
}, /* @__PURE__ */
|
|
8194
|
+
}, /* @__PURE__ */ import_react81.default.createElement(SrOnly, null, "Ja"), /* @__PURE__ */ import_react81.default.createElement(IconCheck, {
|
|
9623
8195
|
block: true
|
|
9624
|
-
})) : /* @__PURE__ */
|
|
8196
|
+
})) : /* @__PURE__ */ import_react81.default.createElement(TableListBooleanNeg, {
|
|
9625
8197
|
title: "Nej"
|
|
9626
|
-
}, /* @__PURE__ */
|
|
8198
|
+
}, /* @__PURE__ */ import_react81.default.createElement(SrOnly, null, "Nej"), /* @__PURE__ */ import_react81.default.createElement(IconCancel, {
|
|
9627
8199
|
block: true
|
|
9628
8200
|
}));
|
|
9629
8201
|
}
|
|
@@ -9636,27 +8208,27 @@
|
|
|
9636
8208
|
return value;
|
|
9637
8209
|
};
|
|
9638
8210
|
var MetadataItem = ({ name, hint, value, unit }) => {
|
|
9639
|
-
const [foldout, setFoldout] = (0,
|
|
9640
|
-
const onToggleFoldout = (0,
|
|
8211
|
+
const [foldout, setFoldout] = (0, import_react81.useState)(false);
|
|
8212
|
+
const onToggleFoldout = (0, import_react81.useCallback)(() => setFoldout(!foldout), [foldout]);
|
|
9641
8213
|
const presentedValue = formatValue(value, unit);
|
|
9642
|
-
return /* @__PURE__ */
|
|
8214
|
+
return /* @__PURE__ */ import_react81.default.createElement(TableListItem, null, /* @__PURE__ */ import_react81.default.createElement(TableListKey, null, hint ? /* @__PURE__ */ import_react81.default.createElement(ButtonInline, {
|
|
9643
8215
|
onClick: onToggleFoldout,
|
|
9644
8216
|
title: `Mer information om ${name}`
|
|
9645
|
-
}, name) : name), /* @__PURE__ */
|
|
8217
|
+
}, name) : name), /* @__PURE__ */ import_react81.default.createElement(TableListValue, null, value !== void 0 ? presentedValue : "Uppgift saknas"), hint && foldout && /* @__PURE__ */ import_react81.default.createElement(Modal_default, {
|
|
9646
8218
|
title: name,
|
|
9647
8219
|
onClose: onToggleFoldout
|
|
9648
|
-
}, /* @__PURE__ */
|
|
8220
|
+
}, /* @__PURE__ */ import_react81.default.createElement(Content_default, {
|
|
9649
8221
|
dangerouslySetInnerHTML: { __html: hint }
|
|
9650
8222
|
})));
|
|
9651
8223
|
};
|
|
9652
8224
|
var MetadataItem_default = MetadataItem;
|
|
9653
8225
|
|
|
9654
8226
|
// src/components/Tabs/index.tsx
|
|
9655
|
-
var
|
|
8227
|
+
var React80 = __toESM(__require("react"));
|
|
9656
8228
|
|
|
9657
8229
|
// src/components/Tabs/wrapper.tsx
|
|
9658
|
-
var
|
|
9659
|
-
var
|
|
8230
|
+
var import_styled_components56 = __toESM(__require("styled-components"));
|
|
8231
|
+
var Wrapper30 = import_styled_components56.default.div`
|
|
9660
8232
|
overflow: hidden;
|
|
9661
8233
|
margin-top: ${size(-1)};
|
|
9662
8234
|
margin-left: ${size(-1)};
|
|
@@ -9667,7 +8239,7 @@
|
|
|
9667
8239
|
margin-right: ${size(-2)};
|
|
9668
8240
|
}
|
|
9669
8241
|
`;
|
|
9670
|
-
var List10 =
|
|
8242
|
+
var List10 = import_styled_components56.default.ul`
|
|
9671
8243
|
list-style: none;
|
|
9672
8244
|
padding: 0;
|
|
9673
8245
|
margin: 0;
|
|
@@ -9681,12 +8253,12 @@
|
|
|
9681
8253
|
padding-right: ${size(1)};
|
|
9682
8254
|
}
|
|
9683
8255
|
`;
|
|
9684
|
-
var
|
|
8256
|
+
var Item10 = import_styled_components56.default.li`
|
|
9685
8257
|
display: inline-block;
|
|
9686
8258
|
vertical-align: bottom;
|
|
9687
8259
|
font-size: 1rem;
|
|
9688
8260
|
`;
|
|
9689
|
-
var Action9 = (0,
|
|
8261
|
+
var Action9 = (0, import_styled_components56.default)(ButtonReset).attrs(() => ({
|
|
9690
8262
|
role: "tab",
|
|
9691
8263
|
className: "wayke__theme wayke__font--bold"
|
|
9692
8264
|
}))`
|
|
@@ -9712,7 +8284,7 @@
|
|
|
9712
8284
|
z-index: 1;
|
|
9713
8285
|
}
|
|
9714
8286
|
|
|
9715
|
-
${(props) => props.active &&
|
|
8287
|
+
${(props) => props.active && import_styled_components56.css`
|
|
9716
8288
|
color: ${(props2) => props2.theme.color.textDark};
|
|
9717
8289
|
|
|
9718
8290
|
:after {
|
|
@@ -9722,9 +8294,9 @@
|
|
|
9722
8294
|
`;
|
|
9723
8295
|
|
|
9724
8296
|
// src/components/Tabs/index.tsx
|
|
9725
|
-
var Tabs = ({ tabs, active, onClick }) => /* @__PURE__ */
|
|
8297
|
+
var Tabs = ({ tabs, active, onClick }) => /* @__PURE__ */ React80.createElement(Wrapper30, null, /* @__PURE__ */ React80.createElement(List10, null, tabs.map((tab) => /* @__PURE__ */ React80.createElement(Item10, {
|
|
9726
8298
|
key: tab.name
|
|
9727
|
-
}, /* @__PURE__ */
|
|
8299
|
+
}, /* @__PURE__ */ React80.createElement(Action9, {
|
|
9728
8300
|
title: tab.displayName,
|
|
9729
8301
|
onClick: onClick ? () => onClick(tab.name) : void 0,
|
|
9730
8302
|
active: tab.name === active ? "true" : void 0
|
|
@@ -9732,31 +8304,31 @@
|
|
|
9732
8304
|
var Tabs_default = Tabs;
|
|
9733
8305
|
|
|
9734
8306
|
// src/layouts/searchItem/Property.tsx
|
|
9735
|
-
var MetadataSubCategory = ({ name, properties }) => /* @__PURE__ */
|
|
8307
|
+
var MetadataSubCategory = ({ name, properties }) => /* @__PURE__ */ import_react82.default.createElement(Repeat, null, /* @__PURE__ */ import_react82.default.createElement(H5, {
|
|
9736
8308
|
as: "h3"
|
|
9737
|
-
}, name), /* @__PURE__ */
|
|
8309
|
+
}, name), /* @__PURE__ */ import_react82.default.createElement(TableList, null, !!properties.length && properties.map((property, index2) => /* @__PURE__ */ import_react82.default.createElement(MetadataItem_default, {
|
|
9738
8310
|
name: property.name,
|
|
9739
8311
|
hint: property.hint,
|
|
9740
8312
|
value: property.value,
|
|
9741
8313
|
unit: property.unit,
|
|
9742
8314
|
key: `${property.name}-${index2}`
|
|
9743
8315
|
}))));
|
|
9744
|
-
var MetadataCategory = ({ properties, subCategories }) => /* @__PURE__ */
|
|
8316
|
+
var MetadataCategory = ({ properties, subCategories }) => /* @__PURE__ */ import_react82.default.createElement("div", {
|
|
9745
8317
|
className: "tab-section"
|
|
9746
|
-
}, !!properties.length && /* @__PURE__ */
|
|
8318
|
+
}, !!properties.length && /* @__PURE__ */ import_react82.default.createElement(Repeat, null, /* @__PURE__ */ import_react82.default.createElement(TableList, null, properties.map((property, index2) => /* @__PURE__ */ import_react82.default.createElement(MetadataItem_default, {
|
|
9747
8319
|
name: property.name,
|
|
9748
8320
|
hint: property.hint,
|
|
9749
8321
|
value: property.value,
|
|
9750
8322
|
unit: property.unit,
|
|
9751
8323
|
key: `${property.name}-${index2}`
|
|
9752
|
-
})))), !!subCategories.length && subCategories.map((subCategory, index2) => /* @__PURE__ */
|
|
8324
|
+
})))), !!subCategories.length && subCategories.map((subCategory, index2) => /* @__PURE__ */ import_react82.default.createElement(MetadataSubCategory, {
|
|
9753
8325
|
name: subCategory.name,
|
|
9754
8326
|
properties: subCategory.properties,
|
|
9755
8327
|
key: `${subCategory.name}-${index2}`
|
|
9756
8328
|
})));
|
|
9757
8329
|
var PropertySet = ({ propertySet, vehicleData }) => {
|
|
9758
|
-
const [activeCategoryId, setActiveCategoryId] = (0,
|
|
9759
|
-
const mappedProperties = (0,
|
|
8330
|
+
const [activeCategoryId, setActiveCategoryId] = (0, import_react82.useState)(-1);
|
|
8331
|
+
const mappedProperties = (0, import_react82.useMemo)(() => {
|
|
9760
8332
|
if (!propertySet) {
|
|
9761
8333
|
return void 0;
|
|
9762
8334
|
}
|
|
@@ -9767,24 +8339,24 @@
|
|
|
9767
8339
|
property_tree_sorter_default(tree);
|
|
9768
8340
|
return tree;
|
|
9769
8341
|
}, [propertySet]);
|
|
9770
|
-
(0,
|
|
8342
|
+
(0, import_react82.useEffect)(() => {
|
|
9771
8343
|
const categories = mappedProperties?.categories?.length !== void 0 ? mappedProperties?.categories : void 0;
|
|
9772
8344
|
if (activeCategoryId < 0 && categories !== void 0 && categories.length > 0) {
|
|
9773
8345
|
setActiveCategoryId(categories[0].id);
|
|
9774
8346
|
}
|
|
9775
8347
|
}, [mappedProperties]);
|
|
9776
|
-
const onTab = (0,
|
|
8348
|
+
const onTab = (0, import_react82.useCallback)((id) => setActiveCategoryId(parseInt(id, 10)), []);
|
|
9777
8349
|
const activeCategory = mappedProperties?.categories?.find(
|
|
9778
8350
|
(category) => category.id === activeCategoryId
|
|
9779
8351
|
);
|
|
9780
|
-
return /* @__PURE__ */
|
|
8352
|
+
return /* @__PURE__ */ import_react82.default.createElement(import_react82.default.Fragment, null, /* @__PURE__ */ import_react82.default.createElement(Repeat, null, /* @__PURE__ */ import_react82.default.createElement(Tabs_default, {
|
|
9781
8353
|
tabs: mappedProperties?.categories?.map((category) => ({
|
|
9782
8354
|
name: `${category.id}`,
|
|
9783
8355
|
displayName: category.name
|
|
9784
8356
|
})) || [],
|
|
9785
8357
|
active: `${activeCategoryId}`,
|
|
9786
8358
|
onClick: onTab
|
|
9787
|
-
})), activeCategory && /* @__PURE__ */
|
|
8359
|
+
})), activeCategory && /* @__PURE__ */ import_react82.default.createElement(Repeat, null, /* @__PURE__ */ import_react82.default.createElement(MetadataCategory, {
|
|
9788
8360
|
properties: activeCategory.properties,
|
|
9789
8361
|
subCategories: activeCategory.subCategories
|
|
9790
8362
|
})));
|
|
@@ -9792,11 +8364,11 @@
|
|
|
9792
8364
|
var Property_default = PropertySet;
|
|
9793
8365
|
|
|
9794
8366
|
// src/components/Pdf/index.tsx
|
|
9795
|
-
var
|
|
8367
|
+
var import_react83 = __toESM(__require("react"));
|
|
9796
8368
|
|
|
9797
8369
|
// src/components/Pdf/wrapper.tsx
|
|
9798
|
-
var
|
|
9799
|
-
var PdfListItem =
|
|
8370
|
+
var import_styled_components57 = __toESM(__require("styled-components"));
|
|
8371
|
+
var PdfListItem = import_styled_components57.default.li.attrs(() => ({
|
|
9800
8372
|
className: "wayke__theme wayke__color--primary-text"
|
|
9801
8373
|
}))`
|
|
9802
8374
|
flex: 0 0 50%;
|
|
@@ -9806,14 +8378,14 @@
|
|
|
9806
8378
|
flex: 0 0 100%;
|
|
9807
8379
|
}
|
|
9808
8380
|
`;
|
|
9809
|
-
var PdfContainer =
|
|
8381
|
+
var PdfContainer = import_styled_components57.default.ul`
|
|
9810
8382
|
list-style: none;
|
|
9811
8383
|
padding: 0;
|
|
9812
8384
|
display: flex;
|
|
9813
8385
|
flex-wrap: wrap;
|
|
9814
8386
|
margin: ${size(-1)};
|
|
9815
8387
|
`;
|
|
9816
|
-
var PdfLink =
|
|
8388
|
+
var PdfLink = import_styled_components57.default.a.attrs(() => ({
|
|
9817
8389
|
className: "wayke__theme wayke__color--primary-text wayke__font--bold"
|
|
9818
8390
|
}))`
|
|
9819
8391
|
text-decoration: none;
|
|
@@ -9827,19 +8399,19 @@
|
|
|
9827
8399
|
height: 100%;
|
|
9828
8400
|
}
|
|
9829
8401
|
`;
|
|
9830
|
-
var PdfTitle =
|
|
8402
|
+
var PdfTitle = import_styled_components57.default.div`
|
|
9831
8403
|
color: ${(props) => props.theme.color.textDark};
|
|
9832
8404
|
`;
|
|
9833
|
-
var PdfSubtitle =
|
|
8405
|
+
var PdfSubtitle = import_styled_components57.default.div`
|
|
9834
8406
|
color: ${(props) => props.theme.color.textDarkLighten};
|
|
9835
8407
|
`;
|
|
9836
|
-
var PdfColumn =
|
|
8408
|
+
var PdfColumn = import_styled_components57.default.div`
|
|
9837
8409
|
flex 0 0 auto;
|
|
9838
8410
|
&:first-child {
|
|
9839
8411
|
flex: 1 1 auto;
|
|
9840
8412
|
}
|
|
9841
8413
|
`;
|
|
9842
|
-
var PdfListInner =
|
|
8414
|
+
var PdfListInner = import_styled_components57.default.div`
|
|
9843
8415
|
position: relative;
|
|
9844
8416
|
border: 1px solid ${(props) => props.theme.color.border};
|
|
9845
8417
|
padding: ${size(1.5)};
|
|
@@ -9851,12 +8423,12 @@
|
|
|
9851
8423
|
`;
|
|
9852
8424
|
|
|
9853
8425
|
// src/components/Pdf/index.tsx
|
|
9854
|
-
var PdfDownloadItem = ({ document: document2 }) => /* @__PURE__ */
|
|
8426
|
+
var PdfDownloadItem = ({ document: document2 }) => /* @__PURE__ */ import_react83.default.createElement(PdfListItem, null, /* @__PURE__ */ import_react83.default.createElement(PdfListInner, null, /* @__PURE__ */ import_react83.default.createElement(PdfColumn, null, /* @__PURE__ */ import_react83.default.createElement(PdfTitle, null, document2.name), /* @__PURE__ */ import_react83.default.createElement(PdfSubtitle, null, document2.contentType)), /* @__PURE__ */ import_react83.default.createElement(PdfColumn, null, /* @__PURE__ */ import_react83.default.createElement(PdfLink, {
|
|
9855
8427
|
href: document2.url,
|
|
9856
8428
|
rel: "noopener noreferrer nofollow",
|
|
9857
8429
|
target: "_blank"
|
|
9858
8430
|
}, "\xD6ppna"))));
|
|
9859
|
-
var PdfDownloadContainer = ({ documents }) => /* @__PURE__ */
|
|
8431
|
+
var PdfDownloadContainer = ({ documents }) => /* @__PURE__ */ import_react83.default.createElement(PdfContainer, null, documents.map((document2, i) => /* @__PURE__ */ import_react83.default.createElement(PdfDownloadItem, {
|
|
9860
8432
|
key: `${document2.url}-${i}`,
|
|
9861
8433
|
document: document2
|
|
9862
8434
|
})));
|
|
@@ -9873,10 +8445,10 @@
|
|
|
9873
8445
|
onClickSearchItem
|
|
9874
8446
|
}) => {
|
|
9875
8447
|
const { ecomSettings } = useSettings_default();
|
|
9876
|
-
const ecomContext = (0,
|
|
8448
|
+
const ecomContext = (0, import_react84.useRef)();
|
|
9877
8449
|
const { loading, data: result } = useSearchItem_default(id);
|
|
9878
8450
|
const { vehicle: centralStorageVehicle, loading: loadingCentralStorageVehicle } = useCentralStorage_default(result?.vehicle);
|
|
9879
|
-
(0,
|
|
8451
|
+
(0, import_react84.useEffect)(() => {
|
|
9880
8452
|
if (ecomSettings) {
|
|
9881
8453
|
ecomContext.current = new import_ecom_web.default({
|
|
9882
8454
|
id,
|
|
@@ -9898,28 +8470,28 @@
|
|
|
9898
8470
|
}
|
|
9899
8471
|
};
|
|
9900
8472
|
}, []);
|
|
9901
|
-
(0,
|
|
8473
|
+
(0, import_react84.useEffect)(() => {
|
|
9902
8474
|
if (!disableResetScrollOnInit) {
|
|
9903
8475
|
window.scrollTo(0, 0);
|
|
9904
8476
|
}
|
|
9905
8477
|
}, []);
|
|
9906
|
-
(0,
|
|
8478
|
+
(0, import_react84.useEffect)(() => {
|
|
9907
8479
|
if (result?.vehicle?.data && modifyDocumentTitleItem) {
|
|
9908
8480
|
const { vehicle: vehicle2 } = result;
|
|
9909
8481
|
const { registrationNumber } = vehicle2.data;
|
|
9910
8482
|
document.title = `${registrationNumber} | ${vehicle2.title} | ${vehicle2.shortDescription}`;
|
|
9911
8483
|
}
|
|
9912
8484
|
}, [result]);
|
|
9913
|
-
const options = (0,
|
|
8485
|
+
const options = (0, import_react84.useMemo)(
|
|
9914
8486
|
() => result?.vehicle?.data?.options?.filter(notEmpty).map((opt) => ({ title: opt })),
|
|
9915
8487
|
[result?.vehicle?.data?.options]
|
|
9916
8488
|
);
|
|
9917
|
-
const onShowMoreOptionsClick = (0,
|
|
8489
|
+
const onShowMoreOptionsClick = (0, import_react84.useCallback)(() => pubsub_default.publish("OptionsClick"), []);
|
|
9918
8490
|
if (loading) {
|
|
9919
|
-
return /* @__PURE__ */
|
|
8491
|
+
return /* @__PURE__ */ import_react84.default.createElement(PageLoading_default, null);
|
|
9920
8492
|
}
|
|
9921
8493
|
if (!result?.vehicle?.data) {
|
|
9922
|
-
return /* @__PURE__ */
|
|
8494
|
+
return /* @__PURE__ */ import_react84.default.createElement(Page404_default, null);
|
|
9923
8495
|
}
|
|
9924
8496
|
const { vehicle } = result;
|
|
9925
8497
|
const contact = centralStorageVehicle?.contact;
|
|
@@ -9953,40 +8525,40 @@
|
|
|
9953
8525
|
if (fuelType) {
|
|
9954
8526
|
uspList.push({ title: fuelType });
|
|
9955
8527
|
}
|
|
9956
|
-
return /* @__PURE__ */
|
|
8528
|
+
return /* @__PURE__ */ import_react84.default.createElement(import_react84.default.Fragment, null, /* @__PURE__ */ import_react84.default.createElement(Page, null, /* @__PURE__ */ import_react84.default.createElement(PageSection, {
|
|
9957
8529
|
large: true
|
|
9958
|
-
}, /* @__PURE__ */
|
|
8530
|
+
}, /* @__PURE__ */ import_react84.default.createElement(Container_default, null, /* @__PURE__ */ import_react84.default.createElement(ProductPage, null, /* @__PURE__ */ import_react84.default.createElement(ProductPageAside, null, /* @__PURE__ */ import_react84.default.createElement(ProductPageAsideSection, {
|
|
9959
8531
|
mobileOrder: 1
|
|
9960
|
-
}, !pathRoute && hashRoute ? /* @__PURE__ */
|
|
8532
|
+
}, !pathRoute && hashRoute ? /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(UtilityFontSizeSmall, null, /* @__PURE__ */ import_react84.default.createElement(ButtonInlineLight, {
|
|
9961
8533
|
as: "a",
|
|
9962
8534
|
href: "#",
|
|
9963
8535
|
title: "Tillbaka till bils\xF6k"
|
|
9964
|
-
}, /* @__PURE__ */
|
|
8536
|
+
}, /* @__PURE__ */ import_react84.default.createElement(ButtonContent, null, /* @__PURE__ */ import_react84.default.createElement(IconChevronLeft, {
|
|
9965
8537
|
block: true
|
|
9966
|
-
})), /* @__PURE__ */
|
|
8538
|
+
})), /* @__PURE__ */ import_react84.default.createElement(ButtonContent, null, "Tillbaka till bils\xF6k")))) : null, manufacturer?.logotype && /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(LogoBox_default, {
|
|
9967
8539
|
logo: manufacturer.logotype,
|
|
9968
8540
|
alt: manufacturer.name
|
|
9969
|
-
})), /* @__PURE__ */
|
|
8541
|
+
})), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react84.default.createElement(H1, {
|
|
9970
8542
|
noMargin: true
|
|
9971
|
-
}, title)), shortDescription && /* @__PURE__ */
|
|
8543
|
+
}, title)), shortDescription && /* @__PURE__ */ import_react84.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react84.default.createElement("div", null, shortDescription)), /* @__PURE__ */ import_react84.default.createElement(RepeatSmall, null, /* @__PURE__ */ import_react84.default.createElement(UspList_default, {
|
|
9972
8544
|
small: true,
|
|
9973
8545
|
items: uspList
|
|
9974
|
-
})))), /* @__PURE__ */
|
|
8546
|
+
})))), /* @__PURE__ */ import_react84.default.createElement(ProductPageAsideSection, {
|
|
9975
8547
|
mobileOrder: 2
|
|
9976
|
-
}, /* @__PURE__ */
|
|
8548
|
+
}, /* @__PURE__ */ import_react84.default.createElement(PriceTable_default, {
|
|
9977
8549
|
price
|
|
9978
|
-
})), (financialOptions.length > 0 || insuranceOptions.length > 0) && /* @__PURE__ */
|
|
8550
|
+
})), (financialOptions.length > 0 || insuranceOptions.length > 0) && /* @__PURE__ */ import_react84.default.createElement(ProductPageAsideSection, {
|
|
9979
8551
|
mobileOrder: 4
|
|
9980
|
-
}, financialOptions.length > 0 && /* @__PURE__ */
|
|
8552
|
+
}, financialOptions.length > 0 && /* @__PURE__ */ import_react84.default.createElement(FinancialOptions_default, {
|
|
9981
8553
|
id,
|
|
9982
8554
|
financialOptions
|
|
9983
|
-
}), insuranceOptions.length > 0 && /* @__PURE__ */
|
|
8555
|
+
}), insuranceOptions.length > 0 && /* @__PURE__ */ import_react84.default.createElement(InsuranceOptions_default, {
|
|
9984
8556
|
id,
|
|
9985
8557
|
branch: centralStorageVehicle?.branch,
|
|
9986
8558
|
insuranceOptions
|
|
9987
|
-
})), /* @__PURE__ */
|
|
8559
|
+
})), /* @__PURE__ */ import_react84.default.createElement(ProductPageAsideSection, {
|
|
9988
8560
|
mobileOrder: 5
|
|
9989
|
-
}, /* @__PURE__ */
|
|
8561
|
+
}, /* @__PURE__ */ import_react84.default.createElement(CheckList_default, {
|
|
9990
8562
|
manufacturer,
|
|
9991
8563
|
packageOptions,
|
|
9992
8564
|
ecommerce,
|
|
@@ -9994,77 +8566,141 @@
|
|
|
9994
8566
|
contact: centralStorageVehicle?.contact,
|
|
9995
8567
|
loadingCentralStorageVehicle,
|
|
9996
8568
|
toggleEcomModal: () => ecomContext.current?.start()
|
|
9997
|
-
}))), /* @__PURE__ */
|
|
8569
|
+
}))), /* @__PURE__ */ import_react84.default.createElement(ProductPageMain, null, /* @__PURE__ */ import_react84.default.createElement(ProductPageAsideSection, {
|
|
9998
8570
|
mobileOrder: 3
|
|
9999
|
-
}, /* @__PURE__ */
|
|
8571
|
+
}, /* @__PURE__ */ import_react84.default.createElement(Gallery_default, {
|
|
10000
8572
|
media,
|
|
10001
8573
|
placeholderImage
|
|
10002
|
-
})), /* @__PURE__ */
|
|
8574
|
+
})), /* @__PURE__ */ import_react84.default.createElement(ProductPageMainSection, null, /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(H2, {
|
|
10003
8575
|
noMargin: true
|
|
10004
|
-
}, "Biluppgifter")), /* @__PURE__ */
|
|
8576
|
+
}, "Biluppgifter")), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(Content_default, null, /* @__PURE__ */ import_react84.default.createElement("p", null, "Information direkt fr\xE5n Transportstyrelsen och tillverkaren."))), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(Property_default, {
|
|
10005
8577
|
propertySet,
|
|
10006
8578
|
vehicleData: vehicle.data
|
|
10007
|
-
}))), description && /* @__PURE__ */
|
|
8579
|
+
}))), description && /* @__PURE__ */ import_react84.default.createElement(ProductPageMainSection, null, /* @__PURE__ */ import_react84.default.createElement(Blockquote_default, {
|
|
10008
8580
|
author: contact && contact.name ? contact.name : null,
|
|
10009
8581
|
date: publishedAt ? dateTimeFormat.format(publishedAt, dateTimeFormat.DayMonth) : void 0,
|
|
10010
8582
|
avatar: contact?.avatar || void 0
|
|
10011
|
-
}, !!description && /* @__PURE__ */
|
|
8583
|
+
}, !!description && /* @__PURE__ */ import_react84.default.createElement("p", null, description))), (options?.length || 0) > 0 && /* @__PURE__ */ import_react84.default.createElement(ProductPageMainSection, null, /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(H2, {
|
|
10012
8584
|
noMargin: true
|
|
10013
|
-
}, "Utrustning")), /* @__PURE__ */
|
|
8585
|
+
}, "Utrustning")), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(Content_default, null, /* @__PURE__ */ import_react84.default.createElement("p", null, "Kompletterande uppgifter om bilen."))), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(ExtendContent_default, {
|
|
10014
8586
|
actionTitle: "Visa mer",
|
|
10015
8587
|
onClick: onShowMoreOptionsClick
|
|
10016
|
-
}, /* @__PURE__ */
|
|
8588
|
+
}, /* @__PURE__ */ import_react84.default.createElement(UspList_default, {
|
|
10017
8589
|
items: options
|
|
10018
|
-
})))), (documents.length || 0) > 0 && /* @__PURE__ */
|
|
8590
|
+
})))), (documents.length || 0) > 0 && /* @__PURE__ */ import_react84.default.createElement(ProductPageMainSection, null, /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(H2, {
|
|
10019
8591
|
noMargin: true
|
|
10020
|
-
}, "Dokument")), /* @__PURE__ */
|
|
8592
|
+
}, "Dokument")), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(Content_default, null, /* @__PURE__ */ import_react84.default.createElement("p", null, "Tillh\xF6rande dokument f\xF6r bilen."))), /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(Pdf_default, {
|
|
10021
8593
|
documents
|
|
10022
|
-
}))), /* @__PURE__ */
|
|
8594
|
+
}))), /* @__PURE__ */ import_react84.default.createElement(ProductPageMainSection, null, /* @__PURE__ */ import_react84.default.createElement(Branch_default, {
|
|
10023
8595
|
branch,
|
|
10024
8596
|
loading: loadingCentralStorageVehicle
|
|
10025
|
-
}), ecommerce && ecommerce.enabled && /* @__PURE__ */
|
|
8597
|
+
}), ecommerce && ecommerce.enabled && /* @__PURE__ */ import_react84.default.createElement(Repeat, null, /* @__PURE__ */ import_react84.default.createElement(ButtonPrimary, {
|
|
10026
8598
|
disabled: !!ecommerce.reserved,
|
|
10027
8599
|
title: "K\xF6p bilen online",
|
|
10028
8600
|
onClick: () => ecomContext.current?.start()
|
|
10029
|
-
}, "K\xF6p bilen online"))), /* @__PURE__ */
|
|
8601
|
+
}, "K\xF6p bilen online"))), /* @__PURE__ */ import_react84.default.createElement(PackageOptions_default, {
|
|
10030
8602
|
packageOptions
|
|
10031
|
-
}), /* @__PURE__ */
|
|
8603
|
+
}), /* @__PURE__ */ import_react84.default.createElement(ManufacturerPackagesOption_default, {
|
|
10032
8604
|
packageOption: manufacturer?.packageOption
|
|
10033
|
-
}))))), /* @__PURE__ */
|
|
8605
|
+
}))))), /* @__PURE__ */ import_react84.default.createElement(Related_default, {
|
|
10034
8606
|
id,
|
|
10035
8607
|
hashRoute,
|
|
10036
8608
|
pathRoute,
|
|
10037
8609
|
onClickSearchItem
|
|
10038
|
-
})), false, /* @__PURE__ */
|
|
8610
|
+
})), false, /* @__PURE__ */ import_react84.default.createElement(portal_element_default, {
|
|
10039
8611
|
id: portal_namespace_exports.DefaultPortal
|
|
10040
8612
|
}));
|
|
10041
8613
|
};
|
|
10042
8614
|
var searchItem_default = WaykeSearchItem;
|
|
10043
8615
|
|
|
10044
8616
|
// src/providers/WaykeProvider.tsx
|
|
10045
|
-
var
|
|
8617
|
+
var import_react95 = __toESM(__require("react"));
|
|
10046
8618
|
|
|
10047
8619
|
// src/providers/graphqlProvider.tsx
|
|
10048
|
-
var
|
|
8620
|
+
var import_react85 = __toESM(__require("react"));
|
|
10049
8621
|
var import_client9 = __require("@apollo/client");
|
|
10050
8622
|
var GraphqlProvider = ({ uri, children }) => {
|
|
10051
8623
|
const client = new import_client9.ApolloClient({ uri, cache: new import_client9.InMemoryCache() });
|
|
10052
|
-
return /* @__PURE__ */
|
|
8624
|
+
return /* @__PURE__ */ import_react85.default.createElement(import_client9.ApolloProvider, {
|
|
10053
8625
|
client
|
|
10054
8626
|
}, children);
|
|
10055
8627
|
};
|
|
10056
8628
|
var graphqlProvider_default = GraphqlProvider;
|
|
10057
8629
|
|
|
10058
8630
|
// src/providers/themeProvider.tsx
|
|
10059
|
-
var
|
|
10060
|
-
var
|
|
10061
|
-
var ThemeProvider = ({ children }) => /* @__PURE__ */
|
|
8631
|
+
var import_react86 = __toESM(__require("react"));
|
|
8632
|
+
var import_styled_components58 = __require("styled-components");
|
|
8633
|
+
var ThemeProvider = ({ children }) => /* @__PURE__ */ import_react86.default.createElement(import_styled_components58.ThemeProvider, {
|
|
10062
8634
|
theme: theme_default
|
|
10063
8635
|
}, children);
|
|
10064
8636
|
var themeProvider_default = ThemeProvider;
|
|
10065
8637
|
|
|
10066
8638
|
// src/State/Search/SearchProvider.tsx
|
|
10067
|
-
var
|
|
8639
|
+
var import_react88 = __toESM(__require("react"));
|
|
8640
|
+
|
|
8641
|
+
// src/hooks/useFetch.ts
|
|
8642
|
+
var import_react87 = __require("react");
|
|
8643
|
+
var cache = {};
|
|
8644
|
+
var getCachedResult = (key) => cache?.[key] || void 0;
|
|
8645
|
+
var setCachedResult = (key, value) => {
|
|
8646
|
+
cache[key] = value;
|
|
8647
|
+
};
|
|
8648
|
+
var pendingPromise = {};
|
|
8649
|
+
var isPendingPromise = (url) => !!pendingPromise[url];
|
|
8650
|
+
var setPendingPromise = (url, promise) => {
|
|
8651
|
+
pendingPromise = {
|
|
8652
|
+
...pendingPromise,
|
|
8653
|
+
[url]: promise
|
|
8654
|
+
};
|
|
8655
|
+
};
|
|
8656
|
+
var clearPendingPromise = (url) => {
|
|
8657
|
+
delete pendingPromise[url];
|
|
8658
|
+
};
|
|
8659
|
+
var useFetch = (path, options, skip, promiseCache) => {
|
|
8660
|
+
const [data, setData] = (0, import_react87.useState)();
|
|
8661
|
+
const [loading, setLoading] = (0, import_react87.useState)(false);
|
|
8662
|
+
const [error, setError] = (0, import_react87.useState)(false);
|
|
8663
|
+
const doFetch = (0, import_react87.useCallback)(async () => {
|
|
8664
|
+
const key = path.toString();
|
|
8665
|
+
const cached = getCachedResult(key);
|
|
8666
|
+
setError(false);
|
|
8667
|
+
if (cached) {
|
|
8668
|
+
setData(cached);
|
|
8669
|
+
return;
|
|
8670
|
+
}
|
|
8671
|
+
setLoading(true);
|
|
8672
|
+
try {
|
|
8673
|
+
const reusePromise = promiseCache && isPendingPromise(key);
|
|
8674
|
+
const request = reusePromise ? pendingPromise[key] : fetch(path, options);
|
|
8675
|
+
if (promiseCache) {
|
|
8676
|
+
setPendingPromise(key, request);
|
|
8677
|
+
}
|
|
8678
|
+
const result = await request;
|
|
8679
|
+
if (result.ok) {
|
|
8680
|
+
const json2 = await result.clone().json();
|
|
8681
|
+
setCachedResult(key, json2);
|
|
8682
|
+
setData(json2);
|
|
8683
|
+
}
|
|
8684
|
+
} catch (e) {
|
|
8685
|
+
setError(true);
|
|
8686
|
+
} finally {
|
|
8687
|
+
setLoading(false);
|
|
8688
|
+
clearPendingPromise(key);
|
|
8689
|
+
}
|
|
8690
|
+
return;
|
|
8691
|
+
}, [path, options]);
|
|
8692
|
+
(0, import_react87.useEffect)(() => {
|
|
8693
|
+
if (!skip) {
|
|
8694
|
+
doFetch();
|
|
8695
|
+
}
|
|
8696
|
+
}, [path, skip]);
|
|
8697
|
+
return {
|
|
8698
|
+
loading,
|
|
8699
|
+
data,
|
|
8700
|
+
error
|
|
8701
|
+
};
|
|
8702
|
+
};
|
|
8703
|
+
var useFetch_default = useFetch;
|
|
10068
8704
|
|
|
10069
8705
|
// src/utils/url.ts
|
|
10070
8706
|
var getUrlSearchParamsFromUrl = () => new URLSearchParams(window.location.search);
|
|
@@ -10081,12 +8717,12 @@
|
|
|
10081
8717
|
children
|
|
10082
8718
|
}) => {
|
|
10083
8719
|
const { replaceState, pushState } = usePath_default();
|
|
10084
|
-
const [queryFilter, setQueryFilter] = (0,
|
|
8720
|
+
const [queryFilter, setQueryFilter] = (0, import_react88.useState)({
|
|
10085
8721
|
searchParams: initialSearchParams
|
|
10086
8722
|
});
|
|
10087
|
-
const [initialFacets, setInitialFacets] = (0,
|
|
10088
|
-
const [documents, setDocuments] = (0,
|
|
10089
|
-
const [initialize, setInitialize] = (0,
|
|
8723
|
+
const [initialFacets, setInitialFacets] = (0, import_react88.useState)();
|
|
8724
|
+
const [documents, setDocuments] = (0, import_react88.useState)();
|
|
8725
|
+
const [initialize, setInitialize] = (0, import_react88.useState)(false);
|
|
10090
8726
|
const { data: initialDataRepsonse } = useFetch_default(
|
|
10091
8727
|
`${url}?hits=0`,
|
|
10092
8728
|
{
|
|
@@ -10122,7 +8758,7 @@
|
|
|
10122
8758
|
});
|
|
10123
8759
|
}
|
|
10124
8760
|
};
|
|
10125
|
-
(0,
|
|
8761
|
+
(0, import_react88.useEffect)(() => {
|
|
10126
8762
|
if (useQueryParamsFromUrl) {
|
|
10127
8763
|
window.addEventListener("popstate", popStateEvent);
|
|
10128
8764
|
}
|
|
@@ -10136,12 +8772,12 @@
|
|
|
10136
8772
|
pubsub_default.unsubscribeAction(onFilterUpdateEvent);
|
|
10137
8773
|
};
|
|
10138
8774
|
}, []);
|
|
10139
|
-
(0,
|
|
8775
|
+
(0, import_react88.useEffect)(() => {
|
|
10140
8776
|
if (initialDataRepsonse) {
|
|
10141
8777
|
setInitialFacets(initialDataRepsonse.facets);
|
|
10142
8778
|
}
|
|
10143
8779
|
}, [initialDataRepsonse]);
|
|
10144
|
-
(0,
|
|
8780
|
+
(0, import_react88.useEffect)(() => {
|
|
10145
8781
|
if (useQueryParamsFromUrl) {
|
|
10146
8782
|
const nextSearchParams = new URLSearchParams(queryFilter.searchParams);
|
|
10147
8783
|
nextSearchParams.delete("hits");
|
|
@@ -10164,7 +8800,7 @@
|
|
|
10164
8800
|
}
|
|
10165
8801
|
}
|
|
10166
8802
|
}, [queryFilter, initialize, useQueryParamsFromUrl]);
|
|
10167
|
-
(0,
|
|
8803
|
+
(0, import_react88.useEffect)(() => {
|
|
10168
8804
|
if (response) {
|
|
10169
8805
|
if (!initialFacets && !useQueryParamsFromUrl) {
|
|
10170
8806
|
setInitialFacets(response.facets);
|
|
@@ -10189,7 +8825,7 @@
|
|
|
10189
8825
|
}
|
|
10190
8826
|
}
|
|
10191
8827
|
}, [response, useQueryParamsFromUrl]);
|
|
10192
|
-
const onFilterUpdate = (0,
|
|
8828
|
+
const onFilterUpdate = (0, import_react88.useCallback)(
|
|
10193
8829
|
(nextQuery) => {
|
|
10194
8830
|
{
|
|
10195
8831
|
if (!initialize) {
|
|
@@ -10202,7 +8838,7 @@
|
|
|
10202
8838
|
},
|
|
10203
8839
|
[initialize]
|
|
10204
8840
|
);
|
|
10205
|
-
const onLoadMore = (0,
|
|
8841
|
+
const onLoadMore = (0, import_react88.useCallback)(() => {
|
|
10206
8842
|
if (response) {
|
|
10207
8843
|
setQueryFilter({
|
|
10208
8844
|
searchParams: new URLSearchParams(response?.documentList.pagination.nextPage?.query),
|
|
@@ -10210,7 +8846,7 @@
|
|
|
10210
8846
|
});
|
|
10211
8847
|
}
|
|
10212
8848
|
}, [response]);
|
|
10213
|
-
const onInitialize = (0,
|
|
8849
|
+
const onInitialize = (0, import_react88.useCallback)(
|
|
10214
8850
|
(_initialQueryParams) => {
|
|
10215
8851
|
if (!initialize) {
|
|
10216
8852
|
const searchParamsFromUrl = getUrlSearchParamsFromUrl();
|
|
@@ -10254,15 +8890,15 @@
|
|
|
10254
8890
|
onLoadMore,
|
|
10255
8891
|
onInitialize
|
|
10256
8892
|
};
|
|
10257
|
-
return /* @__PURE__ */
|
|
8893
|
+
return /* @__PURE__ */ import_react88.default.createElement(SearchContext.Provider, {
|
|
10258
8894
|
value
|
|
10259
8895
|
}, children);
|
|
10260
8896
|
};
|
|
10261
8897
|
var SearchProvider_default = SearchProvider;
|
|
10262
8898
|
|
|
10263
8899
|
// src/components/Root/index.tsx
|
|
10264
|
-
var
|
|
10265
|
-
var Root =
|
|
8900
|
+
var import_styled_components59 = __toESM(__require("styled-components"));
|
|
8901
|
+
var Root = import_styled_components59.default.div.attrs(() => ({
|
|
10266
8902
|
className: "wayke__theme wayke__font--regular"
|
|
10267
8903
|
}))`
|
|
10268
8904
|
background-color: ${(props) => props.theme.color.bg};
|
|
@@ -10304,21 +8940,21 @@
|
|
|
10304
8940
|
var useEcom_default = useEcom;
|
|
10305
8941
|
|
|
10306
8942
|
// src/State/Settings/SettingsProvider.tsx
|
|
10307
|
-
var
|
|
8943
|
+
var import_react89 = __toESM(__require("react"));
|
|
10308
8944
|
var SettingsProvider = ({
|
|
10309
8945
|
googleMapsApiKey,
|
|
10310
8946
|
googleMapsMarker,
|
|
10311
8947
|
ecomSettings,
|
|
10312
8948
|
children
|
|
10313
|
-
}) => /* @__PURE__ */
|
|
8949
|
+
}) => /* @__PURE__ */ import_react89.default.createElement(SettingsContext.Provider, {
|
|
10314
8950
|
value: { ecomSettings, googleMapsApiKey, googleMapsMarker }
|
|
10315
8951
|
}, children);
|
|
10316
8952
|
var SettingsProvider_default = SettingsProvider;
|
|
10317
8953
|
|
|
10318
8954
|
// src/State/RelatedSearch/RelatedSearchProvider.tsx
|
|
10319
|
-
var
|
|
8955
|
+
var import_react90 = __toESM(__require("react"));
|
|
10320
8956
|
var RelatedSearchProvider = ({ url, urlMlt, apiKey, children }) => {
|
|
10321
|
-
const [queryFilter, setQueryFilter] = (0,
|
|
8957
|
+
const [queryFilter, setQueryFilter] = (0, import_react90.useState)();
|
|
10322
8958
|
const query = queryFilter?.searchParams.toString();
|
|
10323
8959
|
const {
|
|
10324
8960
|
loading,
|
|
@@ -10333,7 +8969,7 @@
|
|
|
10333
8969
|
},
|
|
10334
8970
|
!queryFilter
|
|
10335
8971
|
);
|
|
10336
|
-
const fetchRelated = (0,
|
|
8972
|
+
const fetchRelated = (0, import_react90.useCallback)(
|
|
10337
8973
|
(searchParams) => setQueryFilter({
|
|
10338
8974
|
searchParams
|
|
10339
8975
|
}),
|
|
@@ -10347,31 +8983,31 @@
|
|
|
10347
8983
|
queryFilter,
|
|
10348
8984
|
fetchRelated
|
|
10349
8985
|
};
|
|
10350
|
-
return /* @__PURE__ */
|
|
8986
|
+
return /* @__PURE__ */ import_react90.default.createElement(RelatedSearchContext.Provider, {
|
|
10351
8987
|
value
|
|
10352
8988
|
}, children);
|
|
10353
8989
|
};
|
|
10354
8990
|
var RelatedSearchProvider_default = RelatedSearchProvider;
|
|
10355
8991
|
|
|
10356
8992
|
// src/State/CentralStorage/CentralStorageProvider.tsx
|
|
10357
|
-
var
|
|
8993
|
+
var import_react92 = __toESM(__require("react"));
|
|
10358
8994
|
|
|
10359
8995
|
// src/hooks/useSessionStorage.ts
|
|
10360
|
-
var
|
|
8996
|
+
var import_react91 = __require("react");
|
|
10361
8997
|
var useSessionStorage = (key) => {
|
|
10362
|
-
const [value, setValue] = (0,
|
|
10363
|
-
const set = (0,
|
|
8998
|
+
const [value, setValue] = (0, import_react91.useState)(sessionStorage.getItem(key));
|
|
8999
|
+
const set = (0, import_react91.useCallback)(
|
|
10364
9000
|
(v) => {
|
|
10365
9001
|
sessionStorage.setItem(key, v);
|
|
10366
9002
|
setValue(v);
|
|
10367
9003
|
},
|
|
10368
9004
|
[key]
|
|
10369
9005
|
);
|
|
10370
|
-
const remove = (0,
|
|
9006
|
+
const remove = (0, import_react91.useCallback)(() => {
|
|
10371
9007
|
sessionStorage.removeItem(key);
|
|
10372
9008
|
setValue(null);
|
|
10373
9009
|
}, [key]);
|
|
10374
|
-
const clear = (0,
|
|
9010
|
+
const clear = (0, import_react91.useCallback)(() => {
|
|
10375
9011
|
sessionStorage.clear();
|
|
10376
9012
|
setValue(null);
|
|
10377
9013
|
}, [key]);
|
|
@@ -10387,21 +9023,21 @@
|
|
|
10387
9023
|
// src/State/CentralStorage/CentralStorageProvider.tsx
|
|
10388
9024
|
var CentralStorageProvider = ({ children }) => {
|
|
10389
9025
|
const { value, set, remove } = useSessionStorage_default("centralStorage");
|
|
10390
|
-
const setCentralStorageId = (0,
|
|
10391
|
-
return /* @__PURE__ */
|
|
9026
|
+
const setCentralStorageId = (0, import_react92.useCallback)((id) => id ? set(id) : remove(), []);
|
|
9027
|
+
return /* @__PURE__ */ import_react92.default.createElement(CentralStorageContext.Provider, {
|
|
10392
9028
|
value: { centralStorageId: value, setCentralStorageId }
|
|
10393
9029
|
}, children);
|
|
10394
9030
|
};
|
|
10395
9031
|
var CentralStorageProvider_default = CentralStorageProvider;
|
|
10396
9032
|
|
|
10397
9033
|
// src/State/Path/PathProvider.tsx
|
|
10398
|
-
var
|
|
9034
|
+
var import_react94 = __toESM(__require("react"));
|
|
10399
9035
|
|
|
10400
9036
|
// src/hooks/usePrevious.ts
|
|
10401
|
-
var
|
|
9037
|
+
var import_react93 = __require("react");
|
|
10402
9038
|
var usePrevious = (value) => {
|
|
10403
|
-
const ref = (0,
|
|
10404
|
-
(0,
|
|
9039
|
+
const ref = (0, import_react93.useRef)();
|
|
9040
|
+
(0, import_react93.useEffect)(() => {
|
|
10405
9041
|
ref.current = value;
|
|
10406
9042
|
});
|
|
10407
9043
|
return ref.current;
|
|
@@ -10429,9 +9065,9 @@
|
|
|
10429
9065
|
var regexGuidAnyWhere = /(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}/g;
|
|
10430
9066
|
var POP_STATE = "popstate";
|
|
10431
9067
|
var PathProvider = ({ children }) => {
|
|
10432
|
-
const [state, dispatch] = (0,
|
|
9068
|
+
const [state, dispatch] = (0, import_react94.useReducer)(reducer_default, initialState);
|
|
10433
9069
|
const previousPath = usePrevious_default(state.path);
|
|
10434
|
-
(0,
|
|
9070
|
+
(0, import_react94.useEffect)(() => {
|
|
10435
9071
|
const onPopState = () => {
|
|
10436
9072
|
dispatch({ type: SET_PATH, path: window.location.pathname });
|
|
10437
9073
|
};
|
|
@@ -10440,7 +9076,7 @@
|
|
|
10440
9076
|
window.removeEventListener(POP_STATE, onPopState);
|
|
10441
9077
|
};
|
|
10442
9078
|
}, []);
|
|
10443
|
-
const pushState = (0,
|
|
9079
|
+
const pushState = (0, import_react94.useCallback)((path) => {
|
|
10444
9080
|
const h1 = window.location.hash;
|
|
10445
9081
|
history.pushState(null, "", `${path}`);
|
|
10446
9082
|
const h2 = window.location.hash;
|
|
@@ -10449,7 +9085,7 @@
|
|
|
10449
9085
|
}
|
|
10450
9086
|
dispatch({ type: SET_PATH, path });
|
|
10451
9087
|
}, []);
|
|
10452
|
-
const replaceState = (0,
|
|
9088
|
+
const replaceState = (0, import_react94.useCallback)((path) => {
|
|
10453
9089
|
const h1 = window.location.hash;
|
|
10454
9090
|
history.replaceState(null, "", path);
|
|
10455
9091
|
const h2 = window.location.hash;
|
|
@@ -10458,8 +9094,8 @@
|
|
|
10458
9094
|
}
|
|
10459
9095
|
dispatch({ type: SET_PATH, path });
|
|
10460
9096
|
}, []);
|
|
10461
|
-
const id = (0,
|
|
10462
|
-
const value = (0,
|
|
9097
|
+
const id = (0, import_react94.useMemo)(() => state.path.match(regexGuidAnyWhere)?.pop(), [state.path]);
|
|
9098
|
+
const value = (0, import_react94.useMemo)(
|
|
10463
9099
|
() => ({
|
|
10464
9100
|
...state,
|
|
10465
9101
|
previousPath,
|
|
@@ -10469,7 +9105,7 @@
|
|
|
10469
9105
|
}),
|
|
10470
9106
|
[state]
|
|
10471
9107
|
);
|
|
10472
|
-
return /* @__PURE__ */
|
|
9108
|
+
return /* @__PURE__ */ import_react94.default.createElement(PathContext.Provider, {
|
|
10473
9109
|
value
|
|
10474
9110
|
}, children);
|
|
10475
9111
|
};
|
|
@@ -10489,33 +9125,33 @@
|
|
|
10489
9125
|
children
|
|
10490
9126
|
}) => {
|
|
10491
9127
|
useEcom_default(ecomSettings);
|
|
10492
|
-
return /* @__PURE__ */
|
|
9128
|
+
return /* @__PURE__ */ import_react95.default.createElement(PathProvider_default, null, /* @__PURE__ */ import_react95.default.createElement(SettingsProvider_default, {
|
|
10493
9129
|
googleMapsApiKey,
|
|
10494
9130
|
googleMapsMarker,
|
|
10495
9131
|
ecomSettings
|
|
10496
|
-
}, /* @__PURE__ */
|
|
9132
|
+
}, /* @__PURE__ */ import_react95.default.createElement(CentralStorageProvider_default, null, /* @__PURE__ */ import_react95.default.createElement(graphqlProvider_default, {
|
|
10497
9133
|
uri: graphQlUrl
|
|
10498
|
-
}, /* @__PURE__ */
|
|
9134
|
+
}, /* @__PURE__ */ import_react95.default.createElement(SearchProvider_default, {
|
|
10499
9135
|
url,
|
|
10500
9136
|
apiKey,
|
|
10501
9137
|
useQueryParamsFromUrl,
|
|
10502
9138
|
pathRoute
|
|
10503
|
-
}, /* @__PURE__ */
|
|
9139
|
+
}, /* @__PURE__ */ import_react95.default.createElement(RelatedSearchProvider_default, {
|
|
10504
9140
|
url,
|
|
10505
9141
|
urlMlt,
|
|
10506
9142
|
apiKey
|
|
10507
|
-
}, /* @__PURE__ */
|
|
9143
|
+
}, /* @__PURE__ */ import_react95.default.createElement(themeProvider_default, null, /* @__PURE__ */ import_react95.default.createElement(Root_default, null, children))))))));
|
|
10508
9144
|
};
|
|
10509
9145
|
var WaykeProvider_default = WaykeProvider;
|
|
10510
9146
|
|
|
10511
9147
|
// src/layouts/WaykeCompositeWithProvider.tsx
|
|
10512
|
-
var
|
|
9148
|
+
var import_react98 = __toESM(__require("react"));
|
|
10513
9149
|
|
|
10514
9150
|
// src/layouts/WaykeComposite.tsx
|
|
10515
|
-
var
|
|
9151
|
+
var import_react97 = __toESM(__require("react"));
|
|
10516
9152
|
|
|
10517
9153
|
// src/hooks/useHashGuid.ts
|
|
10518
|
-
var
|
|
9154
|
+
var import_react96 = __require("react");
|
|
10519
9155
|
var regexGuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
|
|
10520
9156
|
var HASH_CHANGE = "hashchange";
|
|
10521
9157
|
var getGuid = () => {
|
|
@@ -10523,7 +9159,7 @@
|
|
|
10523
9159
|
return regexGuid.test(guid) || !guid ? guid : void 0;
|
|
10524
9160
|
};
|
|
10525
9161
|
var useHashGuid = () => {
|
|
10526
|
-
const [id, setId] = (0,
|
|
9162
|
+
const [id, setId] = (0, import_react96.useState)(() => getGuid());
|
|
10527
9163
|
const onHashChange = () => {
|
|
10528
9164
|
const guid = window.location.hash.substr(1, window.location.hash.length);
|
|
10529
9165
|
if (regexGuid.test(guid) || !guid) {
|
|
@@ -10532,7 +9168,7 @@
|
|
|
10532
9168
|
throw "Invalid Guid";
|
|
10533
9169
|
}
|
|
10534
9170
|
};
|
|
10535
|
-
(0,
|
|
9171
|
+
(0, import_react96.useEffect)(() => {
|
|
10536
9172
|
onHashChange();
|
|
10537
9173
|
window.addEventListener(HASH_CHANGE, onHashChange);
|
|
10538
9174
|
return () => {
|
|
@@ -10557,7 +9193,7 @@
|
|
|
10557
9193
|
}) => {
|
|
10558
9194
|
const hashId = useHashGuid_default();
|
|
10559
9195
|
const { id: pathId } = usePath_default();
|
|
10560
|
-
(0,
|
|
9196
|
+
(0, import_react97.useEffect)(() => {
|
|
10561
9197
|
if (!pathRoute) {
|
|
10562
9198
|
if (hashId) {
|
|
10563
9199
|
pubsub_default.publish("HashRouteChange", hashId);
|
|
@@ -10567,14 +9203,14 @@
|
|
|
10567
9203
|
}
|
|
10568
9204
|
}, [hashId]);
|
|
10569
9205
|
const id = pathId || hashId;
|
|
10570
|
-
return /* @__PURE__ */
|
|
9206
|
+
return /* @__PURE__ */ import_react97.default.createElement(import_react97.default.Fragment, null, id ? /* @__PURE__ */ import_react97.default.createElement(searchItem_default, {
|
|
10571
9207
|
id,
|
|
10572
9208
|
hashRoute: !pathRoute,
|
|
10573
9209
|
disableResetScrollOnInit,
|
|
10574
9210
|
placeholderImage,
|
|
10575
9211
|
pathRoute,
|
|
10576
9212
|
modifyDocumentTitleItem
|
|
10577
|
-
}) : /* @__PURE__ */
|
|
9213
|
+
}) : /* @__PURE__ */ import_react97.default.createElement(search_default, {
|
|
10578
9214
|
filterList,
|
|
10579
9215
|
initialQueryParams,
|
|
10580
9216
|
removeSearchBar,
|
|
@@ -10588,15 +9224,15 @@
|
|
|
10588
9224
|
var WaykeComposite_default = WaykeComposite;
|
|
10589
9225
|
|
|
10590
9226
|
// src/layouts/WaykeCompositeWithProvider.tsx
|
|
10591
|
-
var WaykeCompositeWithProvider = ({ provider, composite }) => /* @__PURE__ */
|
|
9227
|
+
var WaykeCompositeWithProvider = ({ provider, composite }) => /* @__PURE__ */ import_react98.default.createElement(WaykeProvider_default, {
|
|
10592
9228
|
...provider
|
|
10593
|
-
}, /* @__PURE__ */
|
|
9229
|
+
}, /* @__PURE__ */ import_react98.default.createElement(WaykeComposite_default, {
|
|
10594
9230
|
...composite
|
|
10595
9231
|
}));
|
|
10596
9232
|
var WaykeCompositeWithProvider_default = WaykeCompositeWithProvider;
|
|
10597
9233
|
|
|
10598
9234
|
// src/providers/WaykeItemProvidet.tsx
|
|
10599
|
-
var
|
|
9235
|
+
var import_react99 = __toESM(__require("react"));
|
|
10600
9236
|
var WaykeItemProvider = ({
|
|
10601
9237
|
url,
|
|
10602
9238
|
urlMlt,
|
|
@@ -10608,17 +9244,17 @@
|
|
|
10608
9244
|
children
|
|
10609
9245
|
}) => {
|
|
10610
9246
|
useEcom_default(ecomSettings);
|
|
10611
|
-
return /* @__PURE__ */
|
|
9247
|
+
return /* @__PURE__ */ import_react99.default.createElement(PathProvider_default, null, /* @__PURE__ */ import_react99.default.createElement(SettingsProvider_default, {
|
|
10612
9248
|
googleMapsApiKey,
|
|
10613
9249
|
googleMapsMarker,
|
|
10614
9250
|
ecomSettings
|
|
10615
|
-
}, /* @__PURE__ */
|
|
9251
|
+
}, /* @__PURE__ */ import_react99.default.createElement(CentralStorageProvider_default, null, /* @__PURE__ */ import_react99.default.createElement(graphqlProvider_default, {
|
|
10616
9252
|
uri: graphQlUrl
|
|
10617
|
-
}, /* @__PURE__ */
|
|
9253
|
+
}, /* @__PURE__ */ import_react99.default.createElement(RelatedSearchProvider_default, {
|
|
10618
9254
|
url,
|
|
10619
9255
|
urlMlt,
|
|
10620
9256
|
apiKey
|
|
10621
|
-
}, /* @__PURE__ */
|
|
9257
|
+
}, /* @__PURE__ */ import_react99.default.createElement(themeProvider_default, null, /* @__PURE__ */ import_react99.default.createElement(Root_default, null, children)))))));
|
|
10622
9258
|
};
|
|
10623
9259
|
var WaykeItemProvidet_default = WaykeItemProvider;
|
|
10624
9260
|
|