@perceptimagery/dita-configurator-staging 0.3.1 → 0.3.2001
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 +110 -68
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
try {
|
|
5
5
|
if (typeof document != "undefined") {
|
|
6
6
|
var elementStyle = document.createElement("style");
|
|
7
|
-
elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n\n#Sprie-config-html,\n#Sprie-config-body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Work Sans', sans-serif;\n box-sizing: border-box;\n}\n
|
|
7
|
+
elementStyle.appendChild(document.createTextNode("@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800&display=swap');\n#Sprie-config-html {\n font-size: 87.5%; /* 1rem = 14px (same on dita-website) */ \n}\n#Sprie-config-html,\n#Sprie-config-body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Work Sans', sans-serif;\n box-sizing: border-box;\n}\n#Sprie-config-body * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n.sprie-config-loadingBox {\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 24px;\n font-weight: 500;\n z-index: 10000;\n background: #f2f2f2;\n}\n/*== MAIN_CONTAINER ==*/\n#Sprie-config-Main-Container {\n width: 100%;\n height: 100%;\n}\n\n/*== HEADER ==*/\n#Sprie-config-Header {\n height: 5rem; /* 70px */\n border-bottom: 1.5px solid #aeaeae;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n .sprie-config-Header-groupName {\n color: #373737;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5275rem;\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n }\n}\n\n/*== 3D_VIEWER ==*/\n#Sprie-config-Viewer-Container {\n position: relative;\n width: 100%;\n\n img {\n position: absolute;\n top: 2rem;\n left: 2rem;\n }\n}\n\n/*= 3D_VIEWER-LOADER =*/\n.sprie-config-loadingFrame {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-size: 24px;\n font-weight: 500;\n z-index: 1000;\n background: #fafafa;\n opacity: 0.7;\n}\n\n.sprie-config-loader {\n border: 8px solid #222222;\n width: 60px;\n padding: 8px;\n aspect-ratio: 1;\n border-radius: 50%;\n background: #222222;\n --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;\n -webkit-mask: var(--_m);\n mask: var(--_m);\n -webkit-mask-composite: source-out;\n mask-composite: subtract;\n animation: spin 1s infinite linear;\n}\n\n@keyframes spin {\n to {\n transform: rotate(1turn);\n }\n}\n\n/*== CUSTOMISATION_BLOCK ==*/\n#Sprie-config-Customisation-block {\n height: 15.42rem; /* 216px */\n background-color: #f2f2f2;\n border-top: 1px solid #91847e;\n position: relative;\n flex-grow: 1;\n}\n\n.sprie-config-price-block {\n position: absolute;\n right: 0;\n z-index: 1000;\n display: flex;\n flex-direction: column;\n align-items: end;\n gap: 0.4rem;\n p {\n font-size: 1.25rem;\n font-weight: 500;\n color: #121212;\n }\n}\n\n.frameName {\n color: #4d4d4d;\n font-size: 0.875rem;\n font-weight: 500;\n line-height: 1.5275rem;\n letter-spacing: -0.05rem;\n text-transform: uppercase;\n}\n\n.price-tag {\n color: #222;\n font-size: 1.3125rem;\n font-weight: 400;\n line-height: 2.275rem; \n}\n\n/*=== Mobile_View ===*/\n@media (max-width: 576px) {\n /* HEADER */\n #Sprie-config-Header {\n height: 5.25rem; /* 73.5px */\n }\n\n #Sprie-config-Viewer-Container {\n img {\n position: absolute;\n top: 1.2rem;\n left: 1.2rem;\n }\n }\n}\n.sprie-config-palette {\n display: flex;\n gap: 1.5rem;\n justify-content: flex-start;\n overflow-x: auto;\n}\n\n.sprie-config-palette-img-box {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n .sprie-config-image {\n width: 60px;\n height: 60px;\n }\n\n .sprie-config-image.mobile-view {\n width: 45px;\n height: 45px;\n }\n}\n\n.sprie-config-palette-img-box > button {\n background-color: transparent;\n}\n\n.sprie-config-palette-img-text {\n position: absolute;\n z-index: 100;\n bottom: -1rem;\n\n .sprie-config-palette-imgName {\n white-space: nowrap;\n z-index: 100;\n }\n}\n.sprie-config-engraving-block {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.8rem;\n}\n\n.sprie-config-engraving-checkbox[type='checkbox'] {\n width: 1rem;\n height: 1rem;\n accent-color: #000;\n border: 0.25rem solid #000;\n border-radius: 0.5rem;\n background-color: transparent;\n}\n\n.sprie-config-engraving-inputField-block {\n width: 25rem;\n position: relative;\n}\n\n.sprie-config-engraving-inputField {\n width: 100%;\n font-size: 0.8rem;\n font-weight: 500;\n background: transparent;\n border-width: 1px;\n}\n\n.sprie-config-engraving-inputInfo {\n position: absolute;\n white-space: nowrap;\n font-size: 0.6rem;\n bottom: 0.2rem;\n right: 0.4rem;\n color: #686868;\n}\n\n.sprie-config-engraving-link {\n position: absolute;\n white-space: nowrap;\n font-size: 0.7rem;\n bottom: -1.2rem;\n right: 0;\n color: #686868;\n text-decoration: underline;\n}\n\n@media (max-width: 576px) {\n .sprie-config-engraving-inputField-block {\n width: 70%;\n }\n}\n.carousel {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.carousel-container {\n width: 80%;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.carousel-item {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 100%;\n transition-property: transform;\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n transition-duration: 500ms;\n}\n\n.carousel-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 2rem;\n\n .step-syntax {\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.5rem;\n color: #4d4d4d;\n }\n\n .select-syntax {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n color: #91847e;\n }\n}\n\n/* Arrow-btns */\n.carousel-btn {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n background-color: transparent;\n}\n.arrow {\n border: solid #91847e;\n border-width: 0 3px 3px 0;\n display: inline-block;\n}\n\n.right-arrow {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n}\n\n.left-arrow {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n}\n\n/* Step-tracker */\n\n.step-tracker-block {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-bottom: 1px solid #aeaeae;\n width: 26.25rem;\n}\n\n.step-tracker {\n display: flex;\n gap: 1rem;\n}\n\n.step-circle {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1px solid #7d7d7d;\n background-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n font-size: 14px;\n}\n\n.step-circle.active {\n background-color: #000; /* Change color for active step */\n border-color: #000;\n}\n\n@media (max-width: 576px) {\n .carousel-container {\n width: 100%;\n }\n\n .step-tracker-block {\n width: 80%;\n }\n}\n.sprie-config-add-to-cart-block {\n width: 14.5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.5rem;\n}\n.sprie-config-add-to-cart-btn {\n width: 100%;\n height: 2.75rem; /* 44px */\n background-color: #000000;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 0;\n\n font-size: 0.875rem;\n letter-spacing: 0.1rem;\n font-weight: 500;\n color: #ffffff;\n}\n\n#Sprie-Config-return-policy-label {\n display: flex;\n justify-content: center;\n width: 13.5rem;\n\n p {\n font-size: 0.7rem;\n text-align: end;\n margin-top: 0.05rem;\n }\n}\n#Sprie-Config-return-policy-checkbox[type='checkbox'] {\n width: 1rem;\n height: 1rem;\n accent-color: #000;\n border: 0.25rem solid #000;\n border-radius: 0.5rem;\n background-color: transparent;\n}\n\n.sprie-config-add-to-cart-btn:disabled,\n.sprie-config-add-to-cart-btn [disabled] {\n /* border: 1px solid #999999; */\n background-color: rgb(80, 79, 79);\n cursor: default;\n}\n@media (max-width: 576px) {\n .sprie-config-add-to-cart-block {\n width: 100%;\n }\n\n .sprie-config-add-to-cart-btn {\n width: 100%;\n height: 4rem; /* 64px */\n }\n\n #Sprie-Config-return-policy-label {\n width: 100%;\n gap : .5rem;\n }\n}"));
|
|
8
8
|
document.head.appendChild(elementStyle);
|
|
9
9
|
}
|
|
10
10
|
} catch (e) {
|
|
@@ -112,7 +112,7 @@ var __publicField = (obj, key, value) => {
|
|
|
112
112
|
host: "https://api.sprie.io"
|
|
113
113
|
};
|
|
114
114
|
const config$1 = Object.freeze(Config$2);
|
|
115
|
-
const version$1 = "0.3.
|
|
115
|
+
const version$1 = "0.3.2001";
|
|
116
116
|
function modifyLensArr$1(arr, element) {
|
|
117
117
|
const index2 = arr.findIndex((e) => e["sku"] === element["sku"]);
|
|
118
118
|
if (index2 !== -1) {
|
|
@@ -43375,8 +43375,7 @@ bool bvhIntersectFirstHit(
|
|
|
43375
43375
|
{
|
|
43376
43376
|
src: e.thumbnail,
|
|
43377
43377
|
alt: e.name + "image",
|
|
43378
|
-
|
|
43379
|
-
height: isMobileView ? 45 : 60,
|
|
43378
|
+
className: `sprie-config-image ${isMobileView ? "mobile-view" : ""}`,
|
|
43380
43379
|
style: {
|
|
43381
43380
|
border: (selectedLens == null ? void 0 : selectedLens._id) === e._id ? "1px solid #9d9b9c" : "0",
|
|
43382
43381
|
borderRadius: "50%",
|
|
@@ -43399,7 +43398,11 @@ bool bvhIntersectFirstHit(
|
|
|
43399
43398
|
);
|
|
43400
43399
|
}
|
|
43401
43400
|
const index$2 = "";
|
|
43402
|
-
function LaserEngraving({
|
|
43401
|
+
function LaserEngraving({
|
|
43402
|
+
heading,
|
|
43403
|
+
onChecked,
|
|
43404
|
+
onTextAdded
|
|
43405
|
+
}) {
|
|
43403
43406
|
const [input, setInput] = reactExports.useState("");
|
|
43404
43407
|
const [isChecked, setIsChecked] = reactExports.useState(false);
|
|
43405
43408
|
reactExports.useEffect(() => {
|
|
@@ -43408,44 +43411,62 @@ bool bvhIntersectFirstHit(
|
|
|
43408
43411
|
reactExports.useEffect(() => {
|
|
43409
43412
|
onTextAdded(input);
|
|
43410
43413
|
}, [input]);
|
|
43411
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43412
|
-
|
|
43413
|
-
|
|
43414
|
-
|
|
43415
|
-
|
|
43416
|
-
|
|
43417
|
-
|
|
43418
|
-
|
|
43419
|
-
|
|
43420
|
-
|
|
43421
|
-
|
|
43422
|
-
|
|
43423
|
-
|
|
43424
|
-
|
|
43425
|
-
|
|
43426
|
-
|
|
43427
|
-
|
|
43428
|
-
|
|
43429
|
-
|
|
43430
|
-
|
|
43431
|
-
|
|
43432
|
-
|
|
43433
|
-
|
|
43434
|
-
|
|
43435
|
-
|
|
43436
|
-
|
|
43437
|
-
|
|
43438
|
-
|
|
43439
|
-
|
|
43440
|
-
|
|
43441
|
-
|
|
43442
|
-
|
|
43443
|
-
|
|
43444
|
-
|
|
43445
|
-
|
|
43446
|
-
|
|
43447
|
-
|
|
43448
|
-
|
|
43414
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43415
|
+
"div",
|
|
43416
|
+
{
|
|
43417
|
+
className: "sprie-config-engraving-block",
|
|
43418
|
+
style: { marginTop: ".5rem" },
|
|
43419
|
+
children: [
|
|
43420
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: ".8rem" }, children: [
|
|
43421
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
43422
|
+
"input",
|
|
43423
|
+
{
|
|
43424
|
+
type: "checkbox",
|
|
43425
|
+
className: "sprie-config-engraving-checkbox",
|
|
43426
|
+
onChange: (e) => {
|
|
43427
|
+
setIsChecked(e.target.checked);
|
|
43428
|
+
},
|
|
43429
|
+
checked: isChecked
|
|
43430
|
+
}
|
|
43431
|
+
),
|
|
43432
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43433
|
+
"p",
|
|
43434
|
+
{
|
|
43435
|
+
style: {
|
|
43436
|
+
fontSize: ".9rem",
|
|
43437
|
+
color: "#4d4d4d",
|
|
43438
|
+
fontWeight: "500",
|
|
43439
|
+
margin: "0"
|
|
43440
|
+
},
|
|
43441
|
+
children: [
|
|
43442
|
+
"Add ",
|
|
43443
|
+
"Laser Engraving",
|
|
43444
|
+
" ",
|
|
43445
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: "400" }, children: "(OPTIONAL)" })
|
|
43446
|
+
]
|
|
43447
|
+
}
|
|
43448
|
+
)
|
|
43449
|
+
] }),
|
|
43450
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sprie-config-engraving-inputField-block", children: [
|
|
43451
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
43452
|
+
"input",
|
|
43453
|
+
{
|
|
43454
|
+
type: "text",
|
|
43455
|
+
className: "sprie-config-engraving-inputField",
|
|
43456
|
+
placeholder: "ADD CUSTOM TEXT",
|
|
43457
|
+
value: input,
|
|
43458
|
+
onChange: (e) => setInput(e.target.value),
|
|
43459
|
+
maxLength: 15,
|
|
43460
|
+
style: { padding: "0.7rem" },
|
|
43461
|
+
disabled: !isChecked
|
|
43462
|
+
}
|
|
43463
|
+
),
|
|
43464
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sprie-config-engraving-inputInfo", children: `${input.length}/15 characters` }),
|
|
43465
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "#", className: "sprie-config-engraving-link", children: "About Custom Laser Engraving" })
|
|
43466
|
+
] })
|
|
43467
|
+
]
|
|
43468
|
+
}
|
|
43469
|
+
);
|
|
43449
43470
|
}
|
|
43450
43471
|
const index$1 = "";
|
|
43451
43472
|
function StepTracker({
|
|
@@ -43642,8 +43663,7 @@ bool bvhIntersectFirstHit(
|
|
|
43642
43663
|
{
|
|
43643
43664
|
src: e.thumbnail,
|
|
43644
43665
|
alt: e.name + "image",
|
|
43645
|
-
|
|
43646
|
-
height: isMobileView ? 45 : 60,
|
|
43666
|
+
className: `sprie-config-image ${isMobileView ? "mobile-view" : ""}`,
|
|
43647
43667
|
style: {
|
|
43648
43668
|
border: (selectedOrbital == null ? void 0 : selectedOrbital._id) === e._id ? "1px solid #9d9b9c" : "0",
|
|
43649
43669
|
borderRadius: "50%",
|
|
@@ -43679,16 +43699,18 @@ bool bvhIntersectFirstHit(
|
|
|
43679
43699
|
domService,
|
|
43680
43700
|
ThreeDConfigurator: ThreeDConfigurator2
|
|
43681
43701
|
}) {
|
|
43702
|
+
var _a2;
|
|
43682
43703
|
const [selectedFrame, setSelectedFrame] = reactExports.useState();
|
|
43683
43704
|
const [selectedLens, setSelectedLens] = reactExports.useState();
|
|
43684
43705
|
const [selectedOrbital, setSelectedOrbital] = reactExports.useState();
|
|
43685
43706
|
const [modelLoading, setModelLoading] = reactExports.useState(false);
|
|
43686
43707
|
const [showAddToCart, setShowAddToCart] = reactExports.useState(false);
|
|
43708
|
+
const [viewerHeight, setViewerHeight] = reactExports.useState();
|
|
43709
|
+
const mainContainerRef = reactExports.useRef(null);
|
|
43710
|
+
(_a2 = mainContainerRef.current) == null ? void 0 : _a2.clientHeight;
|
|
43687
43711
|
const domInstance = reactExports.useRef();
|
|
43688
43712
|
domInstance.current = domService;
|
|
43689
43713
|
const isMobileView = window.innerWidth <= 576;
|
|
43690
|
-
const windowHeight = window.innerHeight / 16;
|
|
43691
|
-
const occupiedHeight = isMobileView ? showAddToCart ? (336 + 84) / 16 : (280 + 84) / 16 : (240 + 88) / 16;
|
|
43692
43714
|
const onChangeFrame = async (frame, reload) => {
|
|
43693
43715
|
if (frame._id === (selectedFrame == null ? void 0 : selectedFrame._id) && !reload) {
|
|
43694
43716
|
return;
|
|
@@ -43707,7 +43729,9 @@ bool bvhIntersectFirstHit(
|
|
|
43707
43729
|
return includedLens;
|
|
43708
43730
|
};
|
|
43709
43731
|
const getOrbitalInfo = (frame) => {
|
|
43710
|
-
const includedOrbital = frame == null ? void 0 : frame.customisation.find(
|
|
43732
|
+
const includedOrbital = frame == null ? void 0 : frame.customisation.find(
|
|
43733
|
+
(x2) => x2.type == "Orbital"
|
|
43734
|
+
);
|
|
43711
43735
|
return includedOrbital;
|
|
43712
43736
|
};
|
|
43713
43737
|
const onChangeLens = async (requestedLens) => {
|
|
@@ -43731,12 +43755,24 @@ bool bvhIntersectFirstHit(
|
|
|
43731
43755
|
setModelLoading(false);
|
|
43732
43756
|
});
|
|
43733
43757
|
} else {
|
|
43734
|
-
domInstance.current.changeLens(
|
|
43758
|
+
domInstance.current.changeLens(
|
|
43759
|
+
[requestedLens, selectedOrbital],
|
|
43760
|
+
false,
|
|
43761
|
+
selectedFrame
|
|
43762
|
+
);
|
|
43735
43763
|
}
|
|
43736
43764
|
} else if (frameDefaultLens && isDefaultRequested) {
|
|
43737
|
-
domInstance.current.changeLens(
|
|
43765
|
+
domInstance.current.changeLens(
|
|
43766
|
+
[frameDefaultLens, selectedOrbital],
|
|
43767
|
+
false,
|
|
43768
|
+
selectedFrame
|
|
43769
|
+
);
|
|
43738
43770
|
} else {
|
|
43739
|
-
domInstance.current.changeLens(
|
|
43771
|
+
domInstance.current.changeLens(
|
|
43772
|
+
[requestedLens, selectedOrbital],
|
|
43773
|
+
false,
|
|
43774
|
+
selectedFrame
|
|
43775
|
+
);
|
|
43740
43776
|
}
|
|
43741
43777
|
setSelectedLens(requestedLens);
|
|
43742
43778
|
};
|
|
@@ -43767,54 +43803,60 @@ bool bvhIntersectFirstHit(
|
|
|
43767
43803
|
const onEngravingTextAdded = (text) => {
|
|
43768
43804
|
console.log(text);
|
|
43769
43805
|
};
|
|
43806
|
+
reactExports.useEffect(() => {
|
|
43807
|
+
if (mainContainerRef.current) {
|
|
43808
|
+
const occupiedHeight = isMobileView ? showAddToCart ? 294 + 73.5 : 245 + 73.5 : 216 + 70;
|
|
43809
|
+
setViewerHeight(
|
|
43810
|
+
(mainContainerRef.current.clientHeight - (occupiedHeight + 1)) / 14
|
|
43811
|
+
// in rem
|
|
43812
|
+
);
|
|
43813
|
+
}
|
|
43814
|
+
}, [isMobileView, mainContainerRef, showAddToCart]);
|
|
43770
43815
|
reactExports.useEffect(() => {
|
|
43771
43816
|
frameList && setSelectedFrame(frameList[0]);
|
|
43772
43817
|
lensList && setSelectedLens(lensList[0]);
|
|
43773
43818
|
orbitalList && setSelectedOrbital(orbitalList[0]);
|
|
43774
43819
|
}, [frameList, lensList, orbitalList]);
|
|
43775
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { id: "Sprie-config-Main-Container", children: [
|
|
43820
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { id: "Sprie-config-Main-Container", ref: mainContainerRef, children: [
|
|
43776
43821
|
/* @__PURE__ */ jsxRuntimeExports.jsxs("header", { id: "Sprie-config-Header", children: [
|
|
43777
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
43778
|
-
|
|
43779
|
-
{
|
|
43780
|
-
src: ditaLogo,
|
|
43781
|
-
alt: "dita-logo",
|
|
43782
|
-
height: 20
|
|
43783
|
-
}
|
|
43784
|
-
),
|
|
43785
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "sprie-config-Header-groupName", children: [
|
|
43822
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: ditaLogo, alt: "dita-logo", width: 97, height: 20 }),
|
|
43823
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("p", { style: { margin: "0" }, className: "sprie-config-Header-groupName", children: [
|
|
43786
43824
|
orgName,
|
|
43787
43825
|
" CUSTOMIZER"
|
|
43788
43826
|
] })
|
|
43789
43827
|
] }),
|
|
43790
43828
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43791
|
-
"
|
|
43829
|
+
"section",
|
|
43792
43830
|
{
|
|
43793
43831
|
id: "Sprie-config-Viewer-Container",
|
|
43794
|
-
style: {
|
|
43832
|
+
style: {
|
|
43833
|
+
height: `${viewerHeight}rem`
|
|
43834
|
+
},
|
|
43795
43835
|
children: [
|
|
43796
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: deg360_Icon, alt: "360deg-logo", height: 34 }),
|
|
43836
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: deg360_Icon, alt: "360deg-logo", width: 44, height: 34 }),
|
|
43797
43837
|
modelLoading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loadingFrame", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sprie-config-loader" }) }),
|
|
43798
43838
|
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", height: "100%" }, id: "holder-canvas" })
|
|
43799
43839
|
]
|
|
43800
43840
|
}
|
|
43801
43841
|
),
|
|
43802
43842
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43803
|
-
"
|
|
43843
|
+
"section",
|
|
43804
43844
|
{
|
|
43805
43845
|
id: "Sprie-config-Customisation-block",
|
|
43806
43846
|
style: {
|
|
43807
43847
|
paddingTop: "1.5rem",
|
|
43808
|
-
height: isMobileView ? showAddToCart ? "21rem" : "17.5rem" : "
|
|
43848
|
+
height: isMobileView ? showAddToCart ? "21rem" : "17.5rem" : "15.42rem"
|
|
43809
43849
|
},
|
|
43810
43850
|
children: [
|
|
43811
43851
|
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
43812
43852
|
"div",
|
|
43813
43853
|
{
|
|
43814
43854
|
className: "sprie-config-price-block",
|
|
43815
|
-
style: {
|
|
43855
|
+
style: {
|
|
43856
|
+
top: isMobileView || !showAddToCart ? "-3rem" : "-8.5rem"
|
|
43857
|
+
},
|
|
43816
43858
|
children: [
|
|
43817
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: {
|
|
43859
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { margin: " 0.8rem 0 0" }, children: "$925.00 USD" }),
|
|
43818
43860
|
!isMobileView && showAddToCart && /* @__PURE__ */ jsxRuntimeExports.jsx(AddToCartBtn, {}),
|
|
43819
43861
|
showAddToCart && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { marginRight: ".8rem", fontSize: ".6rem" }, children: "Please Allow 7-10 Days for Customization Process." })
|
|
43820
43862
|
]
|