@r2u/javascript-ar-sdk 6.22.0 → 6.22.1
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 +1 -1
- package/dist/init.bundle.js +1 -1
- package/dist/public/locales/en/translation.json +36 -0
- package/dist/sku.bundle.js +1 -1
- package/dist/src/assets/icons.js +18 -0
- package/dist/src/assets/icons.js.map +1 -0
- package/dist/src/components/Modal/Canvas/index.js +11 -0
- package/dist/src/components/Modal/Canvas/index.js.map +1 -0
- package/dist/src/components/Modal/Canvas/styles.js +34 -0
- package/dist/src/components/Modal/Canvas/styles.js.map +1 -0
- package/dist/src/components/Modal/Context.js +27 -0
- package/dist/src/components/Modal/Context.js.map +1 -0
- package/dist/src/components/Modal/Feedback/Confirm.js +16 -0
- package/dist/src/components/Modal/Feedback/Confirm.js.map +1 -0
- package/dist/src/components/Modal/Feedback/Main.js +16 -0
- package/dist/src/components/Modal/Feedback/Main.js.map +1 -0
- package/dist/src/components/Modal/Feedback/index.js +31 -0
- package/dist/src/components/Modal/Feedback/index.js.map +1 -0
- package/dist/src/components/Modal/Feedback/styles.js +100 -0
- package/dist/src/components/Modal/Feedback/styles.js.map +1 -0
- package/dist/src/components/Modal/Instructions/index.js +50 -0
- package/dist/src/components/Modal/Instructions/index.js.map +1 -0
- package/dist/src/components/Modal/Instructions/styles.js +137 -0
- package/dist/src/components/Modal/Instructions/styles.js.map +1 -0
- package/dist/src/components/Modal/InstructionsAmericanas/index.js +50 -0
- package/dist/src/components/Modal/InstructionsAmericanas/index.js.map +1 -0
- package/dist/src/components/Modal/InstructionsAmericanas/styles.js +116 -0
- package/dist/src/components/Modal/InstructionsAmericanas/styles.js.map +1 -0
- package/dist/src/components/Modal/InstructionsMolduraMinuto/index.js +103 -0
- package/dist/src/components/Modal/InstructionsMolduraMinuto/index.js.map +1 -0
- package/dist/src/components/Modal/InstructionsMolduraMinuto/styles.js +77 -0
- package/dist/src/components/Modal/InstructionsMolduraMinuto/styles.js.map +1 -0
- package/dist/src/components/Modal/InstructionsYDigital/index.js +50 -0
- package/dist/src/components/Modal/InstructionsYDigital/index.js.map +1 -0
- package/dist/src/components/Modal/InstructionsYDigital/styles.js +137 -0
- package/dist/src/components/Modal/InstructionsYDigital/styles.js.map +1 -0
- package/dist/src/components/Modal/InstructionsYDigitalVideo/index.js +44 -0
- package/dist/src/components/Modal/InstructionsYDigitalVideo/index.js.map +1 -0
- package/dist/src/components/Modal/InstructionsYDigitalVideo/styles.js +137 -0
- package/dist/src/components/Modal/InstructionsYDigitalVideo/styles.js.map +1 -0
- package/dist/src/components/Modal/Social/index.js +20 -0
- package/dist/src/components/Modal/Social/index.js.map +1 -0
- package/dist/src/components/Modal/Social/styles.js +85 -0
- package/dist/src/components/Modal/Social/styles.js.map +1 -0
- package/dist/src/components/Modal/Viewer/index.js +26 -0
- package/dist/src/components/Modal/Viewer/index.js.map +1 -0
- package/dist/src/components/Modal/Viewer/styles.js +56 -0
- package/dist/src/components/Modal/Viewer/styles.js.map +1 -0
- package/dist/src/components/Modal/ViewerFull/index.js +15 -0
- package/dist/src/components/Modal/ViewerFull/index.js.map +1 -0
- package/dist/src/components/Modal/ViewerFull/styles.js +12 -0
- package/dist/src/components/Modal/ViewerFull/styles.js.map +1 -0
- package/dist/src/components/R2UModelViewer/ProgressBar/index.js +9 -0
- package/dist/src/components/R2UModelViewer/ProgressBar/index.js.map +1 -0
- package/dist/src/components/R2UModelViewer/ProgressBar/styles.js +54 -0
- package/dist/src/components/R2UModelViewer/ProgressBar/styles.js.map +1 -0
- package/dist/src/components/R2UModelViewer/ProgressBar/types.js +1 -0
- package/dist/src/components/R2UModelViewer/ProgressBar/types.js.map +1 -0
- package/dist/src/components/R2UModelViewer/index.d.ts +1 -1
- package/dist/src/components/R2UModelViewer/index.js +63 -0
- package/dist/src/components/R2UModelViewer/index.js.map +1 -0
- package/dist/src/components/R2UModelViewer/styles.js +128 -0
- package/dist/src/components/R2UModelViewer/styles.js.map +1 -0
- package/dist/src/components/WaterMark/index.js +9 -0
- package/dist/src/components/WaterMark/index.js.map +1 -0
- package/dist/src/components/WaterMark/styles.js +26 -0
- package/dist/src/components/WaterMark/styles.js.map +1 -0
- package/dist/src/config/i18n.js +69 -0
- package/dist/src/config/i18n.js.map +1 -0
- package/dist/src/error/ViewerError.js +7 -0
- package/dist/src/error/ViewerError.js.map +1 -0
- package/dist/src/fonts/index.js +9 -0
- package/dist/src/fonts/index.js.map +1 -0
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.js +25 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/methods/analytics.js +17 -0
- package/dist/src/methods/analytics.js.map +1 -0
- package/dist/src/methods/ar.js +372 -0
- package/dist/src/methods/ar.js.map +1 -0
- package/dist/src/methods/config.js +40 -0
- package/dist/src/methods/config.js.map +1 -0
- package/dist/src/methods/init.js +51 -0
- package/dist/src/methods/init.js.map +1 -0
- package/dist/src/methods/qrCode.js +48 -0
- package/dist/src/methods/qrCode.js.map +1 -0
- package/dist/src/methods/sku.d.ts +1 -1
- package/dist/src/methods/sku.js +47 -0
- package/dist/src/methods/sku.js.map +1 -0
- package/dist/src/methods/types.js +1 -0
- package/dist/src/methods/types.js.map +1 -0
- package/dist/src/methods/viewer.js +310 -0
- package/dist/src/methods/viewer.js.map +1 -0
- package/dist/src/screens/Fallback/index.js +22 -0
- package/dist/src/screens/Fallback/index.js.map +1 -0
- package/dist/src/screens/Feedback/index.d.ts +1 -1
- package/dist/src/screens/Feedback/index.js +21 -0
- package/dist/src/screens/Feedback/index.js.map +1 -0
- package/dist/src/screens/Instructions/index.d.ts +1 -1
- package/dist/src/screens/Instructions/index.js +48 -0
- package/dist/src/screens/Instructions/index.js.map +1 -0
- package/dist/src/screens/Social/index.js +9 -0
- package/dist/src/screens/Social/index.js.map +1 -0
- package/dist/src/services/analytics.js +219 -0
- package/dist/src/services/analytics.js.map +1 -0
- package/dist/src/services/constants.js +65 -0
- package/dist/src/services/constants.js.map +1 -0
- package/dist/src/services/cookies.js +19 -0
- package/dist/src/services/cookies.js.map +1 -0
- package/dist/src/services/customer.js +17 -0
- package/dist/src/services/customer.js.map +1 -0
- package/dist/src/services/customization.js +73 -0
- package/dist/src/services/customization.js.map +1 -0
- package/dist/src/services/product.js +49 -0
- package/dist/src/services/product.js.map +1 -0
- package/dist/src/services/requests.js +55 -0
- package/dist/src/services/requests.js.map +1 -0
- package/dist/src/state.d.ts +1 -1
- package/dist/src/state.js +23 -0
- package/dist/src/state.js.map +1 -0
- package/dist/src/types/Viewer.js +1 -0
- package/dist/src/types/Viewer.js.map +1 -0
- package/dist/src/types/index.js +1 -0
- package/dist/src/types/index.js.map +1 -0
- package/dist/src/utils/sortCustomization.js +10 -0
- package/dist/src/utils/sortCustomization.js.map +1 -0
- package/dist/{vendors.fe050b32669a2a3c34a3.bundle.js → vendors.8c5a3e61e714fd2ec175.bundle.js} +1 -1
- package/package.json +6 -4
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
export const Content = styled.div `
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: space-evenly;
|
|
7
|
+
|
|
8
|
+
.powered {
|
|
9
|
+
display: flex;
|
|
10
|
+
text-decoration: unset;
|
|
11
|
+
flex-direction: row;
|
|
12
|
+
align-items: center;
|
|
13
|
+
margin-top: 2%;
|
|
14
|
+
|
|
15
|
+
img {
|
|
16
|
+
width: 32.9px;
|
|
17
|
+
height: 17px;
|
|
18
|
+
object-fit: contain;
|
|
19
|
+
margin: 5px;
|
|
20
|
+
filter: brightness(85%);
|
|
21
|
+
}
|
|
22
|
+
h1 {
|
|
23
|
+
width: 90px;
|
|
24
|
+
height: 20px;
|
|
25
|
+
font-family: proxima-Nova, sans-serif;
|
|
26
|
+
font-size: 16px;
|
|
27
|
+
font-weight: bold;
|
|
28
|
+
font-stretch: normal;
|
|
29
|
+
font-style: normal;
|
|
30
|
+
line-height: 1.25;
|
|
31
|
+
letter-spacing: normal;
|
|
32
|
+
text-align: center;
|
|
33
|
+
color: #d8d8d8;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.instructions {
|
|
38
|
+
width: min(90vw, 50vh);
|
|
39
|
+
height: min(90vw, 50vh);
|
|
40
|
+
border: solid 20px #f2f2f2;
|
|
41
|
+
margin: 12px;
|
|
42
|
+
|
|
43
|
+
.border {
|
|
44
|
+
border-radius: 20px;
|
|
45
|
+
box-shadow: 0 0 0 20px #f2f2f2;
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 100%;
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: row;
|
|
50
|
+
justify-content: space-between;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.example {
|
|
54
|
+
height: 100%;
|
|
55
|
+
object-fit: contain;
|
|
56
|
+
border-radius: 20px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.instructionsColumn {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
justify-content: space-evenly;
|
|
63
|
+
align-items: center;
|
|
64
|
+
width: 50%;
|
|
65
|
+
span {
|
|
66
|
+
font-family: proxima-Nova, sans-serif;
|
|
67
|
+
font-size: 14px;
|
|
68
|
+
font-weight: bold;
|
|
69
|
+
font-stretch: normal;
|
|
70
|
+
font-style: normal;
|
|
71
|
+
line-height: 1.22;
|
|
72
|
+
letter-spacing: normal;
|
|
73
|
+
text-align: center;
|
|
74
|
+
color: #000000;
|
|
75
|
+
}
|
|
76
|
+
.icon {
|
|
77
|
+
width: 50%;
|
|
78
|
+
object-fit: contain;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.no-watermark {
|
|
84
|
+
margin-top: 60px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.text {
|
|
88
|
+
h1 {
|
|
89
|
+
font-family: proxima-Nova, sans-serif;
|
|
90
|
+
font-size: 26px;
|
|
91
|
+
font-weight: bold;
|
|
92
|
+
font-stretch: normal;
|
|
93
|
+
font-style: normal;
|
|
94
|
+
line-height: 1.23;
|
|
95
|
+
letter-spacing: normal;
|
|
96
|
+
text-align: center;
|
|
97
|
+
color: #000000;
|
|
98
|
+
}
|
|
99
|
+
h3 {
|
|
100
|
+
font-family: proxima-Nova, sans-serif;
|
|
101
|
+
font-size: 18px;
|
|
102
|
+
font-weight: 300;
|
|
103
|
+
font-stretch: normal;
|
|
104
|
+
font-style: normal;
|
|
105
|
+
line-height: 1.22;
|
|
106
|
+
letter-spacing: normal;
|
|
107
|
+
text-align: center;
|
|
108
|
+
color: #707070;
|
|
109
|
+
margin: 5px 20px 30px 20px;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ar-button {
|
|
114
|
+
width: calc(100vw - 40px);
|
|
115
|
+
height: 50px;
|
|
116
|
+
border: none;
|
|
117
|
+
margin: auto;
|
|
118
|
+
border-radius: 23px;
|
|
119
|
+
background-color: #000000;
|
|
120
|
+
&:disabled {
|
|
121
|
+
background-color: gray;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
span {
|
|
125
|
+
font-family: proxima-Nova, sans-serif;
|
|
126
|
+
font-size: 18px;
|
|
127
|
+
font-weight: bold;
|
|
128
|
+
font-stretch: normal;
|
|
129
|
+
font-style: normal;
|
|
130
|
+
line-height: 1.22;
|
|
131
|
+
letter-spacing: normal;
|
|
132
|
+
text-align: center;
|
|
133
|
+
color: #ffffff;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
`;
|
|
137
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Modal/Instructions/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIhC,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
/* eslint-disable react/jsx-no-literals */
|
|
13
|
+
import React, { useContext, useEffect, useState } from 'react';
|
|
14
|
+
import Canvas from '../Canvas';
|
|
15
|
+
import { Container } from './styles';
|
|
16
|
+
import { AmericanasLogo } from '../../../assets/icons';
|
|
17
|
+
import { ModalContext } from '../Context';
|
|
18
|
+
import Fonts from '../../../fonts';
|
|
19
|
+
const InstructionsAmericanas = (_a) => {
|
|
20
|
+
var { onOpen, activateAR } = _a, arProps = __rest(_a, ["onOpen", "activateAR"]);
|
|
21
|
+
const { closeModal } = useContext(ModalContext);
|
|
22
|
+
const [disabled, setDisabled] = useState(false);
|
|
23
|
+
useEffect(onOpen, []);
|
|
24
|
+
document.addEventListener('visibilitychange', () => closeModal(), {
|
|
25
|
+
once: true,
|
|
26
|
+
});
|
|
27
|
+
window.addEventListener('hashchange', () => closeModal(), { once: true });
|
|
28
|
+
return (React.createElement(Canvas, { color: "#F1F1F1" },
|
|
29
|
+
React.createElement(Fonts, null),
|
|
30
|
+
React.createElement(Container, null,
|
|
31
|
+
React.createElement("div", { className: "logo" },
|
|
32
|
+
React.createElement(AmericanasLogo, null)),
|
|
33
|
+
React.createElement("div", { className: "instructions" },
|
|
34
|
+
React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-cover.jpg", alt: "", className: "example" }),
|
|
35
|
+
React.createElement("div", { className: "instructions-column" },
|
|
36
|
+
React.createElement("div", { className: "instruction-unit" },
|
|
37
|
+
React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-hand-move.png", alt: "", className: "icon" }),
|
|
38
|
+
React.createElement("span", null, "segure e arraste o produto para mover")),
|
|
39
|
+
React.createElement("div", { className: "instruction-unit" },
|
|
40
|
+
React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-hand-rotate.png", alt: "", className: "icon" }),
|
|
41
|
+
React.createElement("span", null, "segure o produto com dois dedos para girar")))),
|
|
42
|
+
React.createElement("div", { className: "footer" },
|
|
43
|
+
React.createElement("span", null, "coloque o produto em seu espa\u00E7o para verificar todas as dimens\u00F5es"),
|
|
44
|
+
React.createElement("button", { type: "button", className: "ar-button", disabled: disabled, onClick: () => {
|
|
45
|
+
activateAR(arProps);
|
|
46
|
+
setDisabled(true);
|
|
47
|
+
} }, disabled ? (React.createElement("span", null, "carregando ...")) : (React.createElement("span", null, "veja como fica no seu espa\u00E7o")))))));
|
|
48
|
+
};
|
|
49
|
+
export default InstructionsAmericanas;
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Modal/InstructionsAmericanas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,0CAA0C;AAC1C,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE9D,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAEzC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,MAAM,sBAAsB,GAAgC,CAAC,EAIzC,EAAE,EAAE;QAJqC,EAC3D,MAAM,EACN,UAAU,OAEQ,EADf,OAAO,cAHiD,wBAI5D,CADW;IAEV,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE/C,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAErB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,EAAE;QAChE,IAAI,EAAE,IAAI;KACX,CAAC,CAAA;IACF,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAEzE,OAAO,CACL,oBAAC,MAAM,IAAC,KAAK,EAAC,SAAS;QACrB,oBAAC,KAAK,OAAG;QACT,oBAAC,SAAS;YACR,6BAAK,SAAS,EAAC,MAAM;gBACnB,oBAAC,cAAc,OAAG,CACd;YACN,6BAAK,SAAS,EAAC,cAAc;gBAC3B,6BACE,GAAG,EAAC,iDAAiD,EACrD,GAAG,EAAC,EAAE,EACN,SAAS,EAAC,SAAS,GACnB;gBACF,6BAAK,SAAS,EAAC,qBAAqB;oBAClC,6BAAK,SAAS,EAAC,kBAAkB;wBAC/B,6BACE,GAAG,EAAC,qDAAqD,EACzD,GAAG,EAAC,EAAE,EACN,SAAS,EAAC,MAAM,GAChB;wBACF,0EAAkD,CAC9C;oBACN,6BAAK,SAAS,EAAC,kBAAkB;wBAC/B,6BACE,GAAG,EAAC,uDAAuD,EAC3D,GAAG,EAAC,EAAE,EACN,SAAS,EAAC,MAAM,GAChB;wBACF,+EAAuD,CACnD,CACF,CACF;YACN,6BAAK,SAAS,EAAC,QAAQ;gBACrB,gHAEO;gBACP,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,WAAW,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAS,EAAE;wBAClB,UAAU,CAAC,OAAO,CAAC,CAAA;wBACnB,WAAW,CAAC,IAAI,CAAC,CAAA;oBACnB,CAAC,IAEA,QAAQ,CAAC,CAAC,CAAC,CACV,mDAA2B,CAC5B,CAAC,CAAC,CAAC,CACF,sEAAyC,CAC1C,CACM,CACL,CACI,CACL,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
export const Container = styled.div `
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: space-between;
|
|
7
|
+
height: 100vh;
|
|
8
|
+
|
|
9
|
+
.logo {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
background-color: #f80032;
|
|
14
|
+
width: 100%;
|
|
15
|
+
border-radius: 0px 0px 16px 16px;
|
|
16
|
+
padding: 28px 0px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.instructions {
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
width: 100%;
|
|
22
|
+
margin: 29px 0;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: row;
|
|
25
|
+
justify-content: space-evenly;
|
|
26
|
+
|
|
27
|
+
.example {
|
|
28
|
+
width: 25vh;
|
|
29
|
+
height: auto;
|
|
30
|
+
border-radius: 16px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@media screen and (max-width: 359px) {
|
|
34
|
+
.example {
|
|
35
|
+
width: 20vh;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.instructions-column {
|
|
40
|
+
display: flex;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: space-evenly;
|
|
44
|
+
|
|
45
|
+
.instruction-unit {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
|
|
51
|
+
.icon {
|
|
52
|
+
width: 50px;
|
|
53
|
+
height: auto;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
span {
|
|
57
|
+
font-family: 'Roboto', sans-serif;
|
|
58
|
+
font-weight: 400;
|
|
59
|
+
margin-top: 12px;
|
|
60
|
+
color: #333333;
|
|
61
|
+
width: 140px;
|
|
62
|
+
font-size: 14px;
|
|
63
|
+
text-align: center;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@media screen and (max-width: 359px) {
|
|
67
|
+
span {
|
|
68
|
+
width: 130px;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.footer {
|
|
76
|
+
padding-top: 32px;
|
|
77
|
+
margin-top: 28px;
|
|
78
|
+
border-radius: 16px 16px 0px 0px;
|
|
79
|
+
width: 100%;
|
|
80
|
+
background-color: #ffffff;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
align-items: center;
|
|
84
|
+
|
|
85
|
+
span {
|
|
86
|
+
font-family: 'Roboto', sans-serif;
|
|
87
|
+
font-weight: 400;
|
|
88
|
+
width: 280px;
|
|
89
|
+
font-size: 16px;
|
|
90
|
+
color: #333333;
|
|
91
|
+
text-align: center;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media screen and (max-width: 359px) {
|
|
95
|
+
span {
|
|
96
|
+
width: 200px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.ar-button {
|
|
101
|
+
margin: 24px;
|
|
102
|
+
width: 90%;
|
|
103
|
+
border: none;
|
|
104
|
+
height: 54px;
|
|
105
|
+
border-radius: 12px;
|
|
106
|
+
background-color: #f80032;
|
|
107
|
+
span {
|
|
108
|
+
font-family: 'Roboto', sans-serif;
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
color: #ffffff;
|
|
111
|
+
font-size: 17px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
`;
|
|
116
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Modal/InstructionsAmericanas/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHlC,CAAA"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
/* eslint-disable react/jsx-no-literals */
|
|
13
|
+
import React, { useContext, useEffect, useState } from 'react';
|
|
14
|
+
import { Container } from './styles';
|
|
15
|
+
import { FiArrowLeft } from '../../../assets/icons';
|
|
16
|
+
import { ModalContext } from '../Context';
|
|
17
|
+
import Slider from 'react-slick';
|
|
18
|
+
import logo from '../../../assets/images/Logo.png';
|
|
19
|
+
import titleImage from '../../../assets/images/Título inicial.png';
|
|
20
|
+
import cardSlider1 from '../../../assets/images/Tutorial 1.png';
|
|
21
|
+
import cardSlider2 from '../../../assets/images/Tutorial 2.png';
|
|
22
|
+
import cardSlider3 from '../../../assets/images/Tutorial 3.png';
|
|
23
|
+
import background1 from '../../../assets/images/bg1.jpg';
|
|
24
|
+
import background2 from '../../../assets/images/bg2.png';
|
|
25
|
+
const InstructionsMolduraMinuto = (_a) => {
|
|
26
|
+
var { onOpen, activateAR } = _a, arProps = __rest(_a, ["onOpen", "activateAR"]);
|
|
27
|
+
const { closeModal } = useContext(ModalContext);
|
|
28
|
+
const [sliderOpen, openSlider] = useState(false);
|
|
29
|
+
const [disabled, disableButton] = useState(false);
|
|
30
|
+
let slider;
|
|
31
|
+
useEffect(onOpen, []);
|
|
32
|
+
document.addEventListener('visibilitychange', () => closeModal(), {
|
|
33
|
+
once: true,
|
|
34
|
+
});
|
|
35
|
+
window.addEventListener('hashchange', () => closeModal(), { once: true });
|
|
36
|
+
const settings = {
|
|
37
|
+
dots: true,
|
|
38
|
+
infinite: false,
|
|
39
|
+
speed: 500,
|
|
40
|
+
slidesToShow: 1,
|
|
41
|
+
slidesToScroll: 1,
|
|
42
|
+
arrows: false,
|
|
43
|
+
style: {
|
|
44
|
+
position: 'relative',
|
|
45
|
+
margin: 'auto',
|
|
46
|
+
top: '50%',
|
|
47
|
+
msTransform: 'translateY(-50%)',
|
|
48
|
+
transform: 'translateY(-50%)',
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
const next = () => {
|
|
52
|
+
slider === null || slider === void 0 ? void 0 : slider.slickNext();
|
|
53
|
+
console.log(slider);
|
|
54
|
+
};
|
|
55
|
+
return (React.createElement(React.Fragment, null,
|
|
56
|
+
React.createElement("link", { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" }),
|
|
57
|
+
React.createElement("link", { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" }),
|
|
58
|
+
React.createElement(Container, { background: sliderOpen ? background2 : background1 },
|
|
59
|
+
React.createElement("div", { style: { width: '100vw', position: 'absolute', top: '6vh' } }, !sliderOpen && (React.createElement("img", { src: titleImage, alt: "Realidade Aumentada", style: {
|
|
60
|
+
width: '60vw',
|
|
61
|
+
display: 'block',
|
|
62
|
+
margin: 'auto',
|
|
63
|
+
maxHeight: '12vh',
|
|
64
|
+
} }))),
|
|
65
|
+
sliderOpen && (React.createElement(Slider, Object.assign({ ref: (ref) => {
|
|
66
|
+
slider = ref;
|
|
67
|
+
} }, settings),
|
|
68
|
+
React.createElement("div", { className: "slide" },
|
|
69
|
+
React.createElement("img", { src: cardSlider1, alt: "Tutorial 1" }),
|
|
70
|
+
React.createElement("button", { className: "red-button next", onClick: next }, "Pr\u00F3ximo")),
|
|
71
|
+
React.createElement("div", { className: "slide" },
|
|
72
|
+
React.createElement("img", { src: cardSlider2, alt: "Tutorial 2" }),
|
|
73
|
+
React.createElement("button", { className: "red-button next", onClick: next }, "Pr\u00F3ximo")),
|
|
74
|
+
React.createElement("div", { className: "slide" },
|
|
75
|
+
React.createElement("img", { src: cardSlider3, alt: "Tutorial 3" }),
|
|
76
|
+
React.createElement("button", { className: "red-button next", disabled: disabled, onClick: () => {
|
|
77
|
+
disableButton(true);
|
|
78
|
+
activateAR(arProps);
|
|
79
|
+
} }, disabled ? 'Carregando...' : 'Começar!')))),
|
|
80
|
+
!sliderOpen && (React.createElement("button", { className: "red-button", style: {
|
|
81
|
+
msTransform: 'translateY(-50%)',
|
|
82
|
+
transform: 'translateY(-50%)',
|
|
83
|
+
position: 'absolute',
|
|
84
|
+
bottom: '22vh',
|
|
85
|
+
left: '25vw',
|
|
86
|
+
display: sliderOpen ? 'hidden' : 'auto',
|
|
87
|
+
}, onClick: () => {
|
|
88
|
+
openSlider(true);
|
|
89
|
+
} }, "Veja como usar")),
|
|
90
|
+
React.createElement("div", { style: { width: '100vw', position: 'absolute', bottom: '14vh' } }, !sliderOpen && (React.createElement("img", { src: logo, alt: "Logo", style: {
|
|
91
|
+
width: '50vw',
|
|
92
|
+
display: 'block',
|
|
93
|
+
margin: 'auto',
|
|
94
|
+
maxHeight: '9vh',
|
|
95
|
+
} }))),
|
|
96
|
+
React.createElement(FiArrowLeft, { width: 40, height: 40, color: "#505050", cursor: "pointer", className: "exit", onClick: closeModal, style: {
|
|
97
|
+
position: 'absolute',
|
|
98
|
+
top: '10px',
|
|
99
|
+
left: '10px',
|
|
100
|
+
} }))));
|
|
101
|
+
};
|
|
102
|
+
export default InstructionsMolduraMinuto;
|
|
103
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Modal/InstructionsMolduraMinuto/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,0CAA0C;AAC1C,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,OAAO,IAAI,MAAM,iCAAiC,CAAA;AAClD,OAAO,UAAU,MAAM,2CAA2C,CAAA;AAClE,OAAO,WAAW,MAAM,uCAAuC,CAAA;AAC/D,OAAO,WAAW,MAAM,uCAAuC,CAAA;AAC/D,OAAO,WAAW,MAAM,uCAAuC,CAAA;AAC/D,OAAO,WAAW,MAAM,gCAAgC,CAAA;AACxD,OAAO,WAAW,MAAM,gCAAgC,CAAA;AAExD,MAAM,yBAAyB,GAAgC,CAAC,EAI5C,EAAE,EAAE;QAJwC,EAC9D,MAAM,EACN,UAAU,OAEQ,EADf,OAAO,cAHoD,wBAI/D,CADW;IAEV,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAC/C,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACzD,MAAM,CAAC,QAAQ,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE1D,IAAI,MAAqB,CAAA;IAEzB,SAAS,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAErB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,EAAE;QAChE,IAAI,EAAE,IAAI;KACX,CAAC,CAAA;IACF,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAEzE,MAAM,QAAQ,GAAG;QACf,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,GAAG;QACV,YAAY,EAAE,CAAC;QACf,cAAc,EAAE,CAAC;QACjB,MAAM,EAAE,KAAK;QAEb,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,KAAK;YACV,WAAW,EAAE,kBAAkB;YAC/B,SAAS,EAAE,kBAAkB;SAC9B;KACF,CAAA;IAED,MAAM,IAAI,GAAG,GAAS,EAAE;QACtB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,GAAE;QACnB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACrB,CAAC,CAAA;IAED,OAAO,CACL;QACE,8BACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,2EAA2E,GAChF;QACF,8BACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,iFAAiF,GACtF;QACF,oBAAC,SAAS,IAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;YAC3D,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,IAC7D,CAAC,UAAU,IAAI,CACd,6BACE,GAAG,EAAE,UAAU,EACf,GAAG,EAAC,qBAAqB,EACzB,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,OAAO;oBAChB,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,MAAM;iBAClB,GACD,CACH,CACG;YACL,UAAU,IAAI,CACb,oBAAC,MAAM,kBACL,GAAG,EAAE,CAAC,GAAG,EAAQ,EAAE;oBACjB,MAAM,GAAG,GAAG,CAAA;gBACd,CAAC,IACG,QAAQ;gBAEZ,6BAAK,SAAS,EAAC,OAAO;oBACpB,6BAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,YAAY,GAAG;oBAC1C,gCAAQ,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,mBAExC,CACL;gBACN,6BAAK,SAAS,EAAC,OAAO;oBACpB,6BAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,YAAY,GAAG;oBAC1C,gCAAQ,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,mBAExC,CACL;gBACN,6BAAK,SAAS,EAAC,OAAO;oBACpB,6BAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,YAAY,GAAG;oBAC1C,gCACE,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAS,EAAE;4BAClB,aAAa,CAAC,IAAI,CAAC,CAAA;4BACnB,UAAU,CAAC,OAAO,CAAC,CAAA;wBACrB,CAAC,IAEA,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CACjC,CACL,CACC,CACV;YACA,CAAC,UAAU,IAAI,CACd,gCACE,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;oBACL,WAAW,EAAE,kBAAkB;oBAC/B,SAAS,EAAE,kBAAkB;oBAC7B,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,MAAM;oBACd,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;iBACxC,EACD,OAAO,EAAE,GAAS,EAAE;oBAClB,UAAU,CAAC,IAAI,CAAC,CAAA;gBAClB,CAAC,qBAGM,CACV;YAED,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,IACjE,CAAC,UAAU,IAAI,CACd,6BACE,GAAG,EAAE,IAAI,EACT,GAAG,EAAC,MAAM,EACV,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,OAAO;oBAChB,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,KAAK;iBACjB,GACD,CACH,CACG;YACN,oBAAC,WAAW,IACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,EAChB,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,MAAM;oBACX,IAAI,EAAE,MAAM;iBACb,GACD,CACQ,CACX,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,yBAAyB,CAAA"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import circle from '../../../assets/images/circle.png';
|
|
3
|
+
import circleActive from '../../../assets/images/circle2.png';
|
|
4
|
+
export const Container = styled.div `
|
|
5
|
+
position: fixed;
|
|
6
|
+
z-index: 1000;
|
|
7
|
+
top: 0px;
|
|
8
|
+
left: 0px;
|
|
9
|
+
height: 100vh;
|
|
10
|
+
width: 100vw;
|
|
11
|
+
background-size: cover;
|
|
12
|
+
background-position: center;
|
|
13
|
+
background-image: url(${({ background }) => background});
|
|
14
|
+
|
|
15
|
+
img {
|
|
16
|
+
object-fit: contain;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.slide {
|
|
20
|
+
height: 100vh;
|
|
21
|
+
position: relative;
|
|
22
|
+
|
|
23
|
+
img {
|
|
24
|
+
width: 90vw;
|
|
25
|
+
max-width: 500px;
|
|
26
|
+
position: absolute;
|
|
27
|
+
left: 50%;
|
|
28
|
+
top: 50%;
|
|
29
|
+
transform: translate(-50%, -50%);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.red-button {
|
|
34
|
+
background-color: rgb(227, 7, 24);
|
|
35
|
+
border: none;
|
|
36
|
+
border-radius: 2.5vw;
|
|
37
|
+
padding: 1.2vh 5vw;
|
|
38
|
+
color: #fff;
|
|
39
|
+
margin: 0 auto;
|
|
40
|
+
display: block;
|
|
41
|
+
font-size: 2.3vh;
|
|
42
|
+
width: 50vw;
|
|
43
|
+
box-shadow: 0 0 20px #00000030;
|
|
44
|
+
|
|
45
|
+
&.next {
|
|
46
|
+
position: absolute;
|
|
47
|
+
left: 50%;
|
|
48
|
+
bottom: 17vh;
|
|
49
|
+
transform: translatex(-50%);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.red-button:disabled {
|
|
54
|
+
opacity: 0.6;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.slick-dots {
|
|
58
|
+
position: absolute;
|
|
59
|
+
bottom: 13vh;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
li {
|
|
63
|
+
background-image: url(${circle});
|
|
64
|
+
background-size: 100% 100%;
|
|
65
|
+
width: 1.5vh !important;
|
|
66
|
+
height: 1.5vh !important;
|
|
67
|
+
|
|
68
|
+
&.slick-active {
|
|
69
|
+
background-image: url(${circleActive});
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
button:before {
|
|
73
|
+
content: '' !important;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
77
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/Modal/InstructionsMolduraMinuto/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,MAAM,MAAM,mCAAmC,CAAA;AACtD,OAAO,YAAY,MAAM,oCAAoC,CAAA;AAM7D,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB;;;;;;;;;0BASzB,CAAC,EAAE,UAAU,EAAE,EAAU,EAAE,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDpC,MAAM;;;;;;8BAMJ,YAAY;;;;;;;CAOzC,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { useContext, useEffect, useState } from 'react';
|
|
13
|
+
import { FiArrowLeft } from '../../../assets/icons';
|
|
14
|
+
import { Content } from './styles';
|
|
15
|
+
import Canvas from '../Canvas';
|
|
16
|
+
import { ModalContext } from '../Context';
|
|
17
|
+
import instructionsCover from '../../../assets/images/Toyota Rav4 instructions.jpg';
|
|
18
|
+
import translationsEN from '../../../../public/locales/en/translation.json';
|
|
19
|
+
const InstructionsYDigital = (_a) => {
|
|
20
|
+
var { hasWaterMark = true, onOpen, activateAR } = _a, arProps = __rest(_a, ["hasWaterMark", "onOpen", "activateAR"]);
|
|
21
|
+
const { closeModal } = useContext(ModalContext);
|
|
22
|
+
const [disabled, setDisabled] = useState(false);
|
|
23
|
+
useEffect(onOpen, []);
|
|
24
|
+
document.addEventListener('visibilitychange', () => closeModal(), {
|
|
25
|
+
once: true,
|
|
26
|
+
});
|
|
27
|
+
window.addEventListener('hashchange', () => closeModal(), { once: true });
|
|
28
|
+
return (React.createElement(Canvas, null,
|
|
29
|
+
React.createElement(Content, null,
|
|
30
|
+
React.createElement(FiArrowLeft, { width: 30, height: 30, color: "#707070", cursor: "pointer", className: "exit", onClick: closeModal }),
|
|
31
|
+
React.createElement("a", { href: "https://r2u.io", className: "powered", target: "_blank", rel: "noopener noreferrer", style: { visibility: hasWaterMark ? undefined : 'hidden' } },
|
|
32
|
+
React.createElement("h1", null, translationsEN.poweredBy),
|
|
33
|
+
React.createElement("img", { src: "https://sdk.r2u.io/assets/r2u-full-white-logo.png", alt: "", className: "icon" })),
|
|
34
|
+
React.createElement("div", { className: `instructions ${!hasWaterMark && 'no-watermark'}` },
|
|
35
|
+
React.createElement("div", { className: "border" },
|
|
36
|
+
React.createElement("img", { src: instructionsCover, alt: "", className: "example" }),
|
|
37
|
+
React.createElement("div", { className: "instructionsColumn" },
|
|
38
|
+
React.createElement("span", null, translationsEN.instructions.handMove),
|
|
39
|
+
React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-hand-move.png", alt: "", className: "icon" }),
|
|
40
|
+
React.createElement("span", null, translationsEN.instructions.handRotate),
|
|
41
|
+
React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-hand-rotate.png", alt: "", className: "icon" })))),
|
|
42
|
+
React.createElement("div", { className: "text" },
|
|
43
|
+
React.createElement("h3", null, translationsEN.instructions.text)),
|
|
44
|
+
React.createElement("button", { type: "button", className: "ar-button", disabled: disabled, onClick: () => {
|
|
45
|
+
activateAR(arProps);
|
|
46
|
+
setDisabled(true);
|
|
47
|
+
} }, disabled ? (React.createElement("span", null, translationsEN.instructions.loading)) : (React.createElement("span", null, translationsEN.instructions.button))))));
|
|
48
|
+
};
|
|
49
|
+
export default InstructionsYDigital;
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Modal/InstructionsYDigital/index.tsx"],"names":[],"mappings":"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"}
|