nestiq-component-library 1.1.51 → 1.1.53
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/assets/images/icon_checkmark.9b48c4a4bc651b08.svg +10 -0
- package/dist/assets/images/warning.6f99cb4c6a048b47.svg +11 -0
- package/dist/components/MessagePopup/ErrorPopup.d.ts +7 -0
- package/dist/components/MessagePopup/MessagePopUp.d.ts +1 -0
- package/dist/components/MessagePopup/SuccessPopup.d.ts +7 -0
- package/dist/components/NewPropertyCard/NewPropertyCard.d.ts +1 -0
- package/dist/index.es.js +93 -27
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +93 -27
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/icon_checkmark.svg +10 -0
- package/src/assets/images/warning.svg +11 -0
- package/src/components/MessagePopup/ErrorPopup.tsx +64 -0
- package/src/components/MessagePopup/MessagePopUp.tsx +117 -109
- package/src/components/MessagePopup/PopUp.css +408 -0
- package/src/components/MessagePopup/SuccessPopup.tsx +71 -0
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +2 -0
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import x from "../../assets/Images/icon_close_2.png";
|
|
2
|
+
import "./PopUp.css";
|
|
3
|
+
import icon_checkmark from "../../assets/Images/icon_checkmark.svg";
|
|
4
|
+
import warning from "../../assets/Images/warning.svg";
|
|
5
|
+
import React from "react";
|
|
6
|
+
|
|
7
|
+
interface PopupProps {
|
|
8
|
+
onClick: any;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default function SuccessPopUp(props: PopupProps) {
|
|
12
|
+
const handleClose = () => {
|
|
13
|
+
props.onClick();
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<div className="popup-overlay">
|
|
18
|
+
|
|
19
|
+
<div className="shareSection-Error d-flex flex-column col-6 ">
|
|
20
|
+
<img
|
|
21
|
+
src={x}
|
|
22
|
+
alt="close"
|
|
23
|
+
className="closeIcon d-flex flex-column align-self-end ms-5 "
|
|
24
|
+
onClick={handleClose}
|
|
25
|
+
/>
|
|
26
|
+
<div className=" d-flex flex-column align-self-center ms-5 ">
|
|
27
|
+
<img src={warning} alt="facebook" className=" mb-4" />
|
|
28
|
+
</div>
|
|
29
|
+
<div className="popUpHeader d-flex flex-column col- text-center text-wrap mb-1 align-self-center">
|
|
30
|
+
<span > Oops! Etwas ist schiefgelaufen.</span>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div className="d-flex flex-column mt-4 mb-4">
|
|
36
|
+
<span className="text-center ms-5 text-wrap">
|
|
37
|
+
Beim Senden deiner Nachricht ist ein Fehler aufgetreten. Wenn das Problem weiterhin besteht, kontaktiere uns unter support@nestiq.de
|
|
38
|
+
</span>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
<div className=" d-flex flex-row align-self-center ">
|
|
44
|
+
|
|
45
|
+
<button
|
|
46
|
+
className="d-flex button_success-left col-sm-5 border-0 rounded-4"
|
|
47
|
+
type="button"
|
|
48
|
+
id="button">
|
|
49
|
+
|
|
50
|
+
<strong> Erneut versuchen</strong>
|
|
51
|
+
</button>
|
|
52
|
+
|
|
53
|
+
<button
|
|
54
|
+
className="button_success-right w-50 border-1 ms-3 rounded-4"
|
|
55
|
+
type="button"
|
|
56
|
+
id="button" >
|
|
57
|
+
<strong> Support kontaktieren</strong>
|
|
58
|
+
</button>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
2
|
import x from "../../assets/Images/icon_close_2.png";
|
|
3
3
|
import mail_icon from "../../assets/Images/mail-icon.png";
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
import SuccessPopUp from "../MessagePopup/SuccessPopup";
|
|
5
|
+
import ErrorPopUp from "../MessagePopup/ErrorPopup";
|
|
6
6
|
import "../MessagePopup/MessagePopUp.css";
|
|
7
7
|
// import { showToast } from "nestiq-component-library";
|
|
8
8
|
|
|
9
9
|
interface PopupProps {
|
|
10
|
-
|
|
10
|
+
firstname: string;
|
|
11
11
|
lastname: string;
|
|
12
12
|
handleSendMessage: any;
|
|
13
13
|
onClick: any;
|
|
14
|
+
themesList:any;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
export default function MessagePopUp(props:PopupProps) {
|
|
@@ -23,140 +24,147 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
23
24
|
const [messageText, setMessageText] = useState("");
|
|
24
25
|
const [firstName, setFirstName] = useState("");
|
|
25
26
|
const [lastName, setLastName] = useState("");
|
|
26
|
-
interface Theme {
|
|
27
|
-
id: string;
|
|
28
|
-
name: string;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const [themesList, setThemesList] = useState<Theme[]>([]);
|
|
32
27
|
|
|
33
28
|
const handleClose = () => {
|
|
34
29
|
props.onClick();
|
|
35
30
|
};
|
|
31
|
+
const handleSendMessage = () => {
|
|
32
|
+
props.handleSendMessage();
|
|
33
|
+
}
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
const user = JSON.parse(localStorage.getItem("user") || "{}");
|
|
36
|
+
if (user) {
|
|
37
|
+
setFirstName(user.firstname || "");
|
|
38
|
+
setLastName(user.lastname || "");
|
|
39
|
+
} else if (!user) {
|
|
40
|
+
console.log("no user");
|
|
41
|
+
}
|
|
42
|
+
}, []);
|
|
36
43
|
return (
|
|
37
44
|
<div>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
</div>
|
|
62
|
-
<div className="popUpHeader d-flex flex-column text-wrap mb-md-1 ">
|
|
63
|
-
Nachricht senden {props.firstname}{" "}
|
|
64
|
-
{props.lastname}
|
|
65
|
-
</div>
|
|
45
|
+
<div className="popup-overlay">
|
|
46
|
+
<div className="MessageShareSections d-flex flex-column col-10 col-lg-7">
|
|
47
|
+
<img
|
|
48
|
+
src={x}
|
|
49
|
+
alt="close"
|
|
50
|
+
className="closeIcon d-flex flex-column align-self-end"
|
|
51
|
+
onClick={handleClose}
|
|
52
|
+
/>
|
|
53
|
+
<div className="">
|
|
54
|
+
<div className="d-flex ms-md-5 mb-4">
|
|
55
|
+
<div className="circle align-self-center ms-md-2 me-4">
|
|
56
|
+
<img
|
|
57
|
+
src={mail_icon}
|
|
58
|
+
alt="email"
|
|
59
|
+
className="align-self-center"
|
|
60
|
+
style={{
|
|
61
|
+
alignSelf: "center",
|
|
62
|
+
justifyContent: "center",
|
|
63
|
+
margin: "14px",
|
|
64
|
+
width: "25px",
|
|
65
|
+
height: "20px",
|
|
66
|
+
}}
|
|
67
|
+
/>
|
|
66
68
|
</div>
|
|
69
|
+
<div className="popUpHeader d-flex flex-column text-wrap mb-md-1 ">
|
|
70
|
+
Nachricht senden {firstName} {lastName}
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
67
73
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
<div className="d-flex flex-md-row flex-column ms-md-5 mt-md-0 ">
|
|
75
|
+
<div className="d-flex flex-column mt-md-0 mt-4 col me-4 w-100 align-self-start justify-content-start">
|
|
76
|
+
<span className="popup-tags mb-2">Betreff:*</span>
|
|
77
|
+
<div>
|
|
78
|
+
<select
|
|
79
|
+
name="theme"
|
|
80
|
+
id="theme"
|
|
81
|
+
className="mb-md-4 col-md-11 col-12"
|
|
82
|
+
style={{ height: "42px" }}
|
|
83
|
+
value={themeId}
|
|
84
|
+
onChange={(e) => setThemeId(e.target.value)}
|
|
85
|
+
>
|
|
86
|
+
<option value="">Select a theme</option>
|
|
87
|
+
{props.themesList.map(
|
|
88
|
+
(theme: { id: string; name: string }) => (
|
|
82
89
|
<option key={theme.id} value={theme.id}>
|
|
83
90
|
{theme.name}
|
|
84
91
|
</option>
|
|
85
|
-
)
|
|
86
|
-
|
|
87
|
-
</
|
|
88
|
-
</div>
|
|
89
|
-
<div className="d-flex flex-column mt-md-4 col me-4 w-100">
|
|
90
|
-
<div></div>
|
|
91
|
-
<textarea
|
|
92
|
-
className="popup_textarea col-12 col-md-10 mb-md-0 mt-2 "
|
|
93
|
-
placeholder="Betreff deiner Nachricht"
|
|
94
|
-
style={{ height: "42px" }}
|
|
95
|
-
value={subject}
|
|
96
|
-
onChange={(e) => setSubject(e.target.value)}
|
|
97
|
-
/>
|
|
92
|
+
)
|
|
93
|
+
)}
|
|
94
|
+
</select>
|
|
98
95
|
</div>
|
|
99
96
|
</div>
|
|
100
|
-
<div className="d-flex flex-column
|
|
101
|
-
<
|
|
97
|
+
<div className="d-flex flex-column mt-md-4 col me-4 w-100">
|
|
98
|
+
<div></div>
|
|
102
99
|
<textarea
|
|
103
|
-
className="popup_textarea
|
|
104
|
-
placeholder="
|
|
105
|
-
|
|
106
|
-
|
|
100
|
+
className="popup_textarea col-12 col-md-10 mb-md-0 mt-2 "
|
|
101
|
+
placeholder="Betreff deiner Nachricht"
|
|
102
|
+
style={{ height: "42px" }}
|
|
103
|
+
value={subject}
|
|
104
|
+
onChange={(e) => setSubject(e.target.value)}
|
|
107
105
|
/>
|
|
108
106
|
</div>
|
|
109
|
-
|
|
107
|
+
</div>
|
|
108
|
+
<div className="d-flex flex-column col ms-md-5 me-md-4">
|
|
109
|
+
<span className="popup-tags mb-2 ">Deine Nachricht:*</span>
|
|
110
|
+
<textarea
|
|
111
|
+
className="popup_textarea mb-md-4 col-md-11 col-12 "
|
|
112
|
+
placeholder="Deine Nachricht hier..."
|
|
113
|
+
value={messageText}
|
|
114
|
+
onChange={(e) => setMessageText(e.target.value)}
|
|
115
|
+
/>
|
|
116
|
+
</div>
|
|
117
|
+
{/* <div className="d-flex flex-column ms-5 me-5">
|
|
110
118
|
<span className="popup-tags mb-2">Thema auswählen:*</span>
|
|
111
119
|
|
|
112
120
|
</div> */}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</div>
|
|
125
|
-
<div className="d-flex flex-column me-4 w-100 col ">
|
|
126
|
-
<span className="popup-tags mb-2">Nachname:</span>
|
|
127
|
-
<input
|
|
128
|
-
className="popup_textarea col-12 mb-4 col-md-10"
|
|
129
|
-
placeholder="Dein Nachname"
|
|
130
|
-
type="text"
|
|
131
|
-
value={lastName}
|
|
132
|
-
onChange={(e) => setLastName(e.target.value)}
|
|
133
|
-
style={{ height: "42px" }}
|
|
134
|
-
/>
|
|
135
|
-
</div>
|
|
121
|
+
<div className="d-flex flex-md-row flex-column ms-md-5 ">
|
|
122
|
+
<div className="d-flex flex-column col me-4 w-100">
|
|
123
|
+
<span className="popup-tags mb-2">Vorname:</span>
|
|
124
|
+
<input
|
|
125
|
+
className="popup_textarea mb-md-4 col-12 col-md-11"
|
|
126
|
+
placeholder="Dein Vorname"
|
|
127
|
+
type="text"
|
|
128
|
+
value={firstName}
|
|
129
|
+
onChange={(e) => setFirstName(e.target.value)}
|
|
130
|
+
style={{ height: "42px" }}
|
|
131
|
+
/>
|
|
136
132
|
</div>
|
|
137
|
-
<div className="d-flex
|
|
138
|
-
<
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<strong>Abbrechen</strong>
|
|
148
|
-
</button>
|
|
133
|
+
<div className="d-flex flex-column me-4 w-100 col ">
|
|
134
|
+
<span className="popup-tags mb-2">Nachname:</span>
|
|
135
|
+
<input
|
|
136
|
+
className="popup_textarea col-12 mb-4 col-md-10"
|
|
137
|
+
placeholder="Dein Nachname"
|
|
138
|
+
type="text"
|
|
139
|
+
value={lastName}
|
|
140
|
+
onChange={(e) => setLastName(e.target.value)}
|
|
141
|
+
style={{ height: "42px" }}
|
|
142
|
+
/>
|
|
149
143
|
</div>
|
|
150
144
|
</div>
|
|
145
|
+
<div className="d-flex gap-md-3 gap-3 flex-md-row flex-column align-self-center justify-content-center mb-4 mt-md-2">
|
|
146
|
+
<button
|
|
147
|
+
className="main_button border-0 rounded-4 align-self-center "
|
|
148
|
+
type="button"
|
|
149
|
+
id="button"
|
|
150
|
+
onClick={handleSendMessage}
|
|
151
|
+
>
|
|
152
|
+
<strong>Nachricht senden</strong>
|
|
153
|
+
</button>
|
|
154
|
+
<button className="button_icon-right border-1 col-sm-3 align-self-center">
|
|
155
|
+
<strong>Abbrechen</strong>
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
151
158
|
</div>
|
|
152
159
|
</div>
|
|
153
|
-
|
|
160
|
+
</div>
|
|
161
|
+
|
|
154
162
|
{showSuccessPopUp && (
|
|
155
163
|
<SuccessPopUp onClick={() => setShowSuccessPopUp(false)} />
|
|
156
164
|
)}
|
|
157
165
|
{showErrorPopUp && (
|
|
158
166
|
<ErrorPopUp onClick={() => setShowErrorPopUp(false)} />
|
|
159
|
-
)}
|
|
167
|
+
)}
|
|
160
168
|
</div>
|
|
161
169
|
);
|
|
162
170
|
}
|