nestiq-component-library 1.1.52 → 1.1.54
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 +9 -0
- package/dist/components/MessagePopup/SuccessPopup.d.ts +7 -0
- package/dist/components/NewPropertyCard/NewPropertyCard.d.ts +9 -0
- package/dist/index.es.js +103 -32
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +103 -32
- 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 +56 -19
- package/src/components/MessagePopup/PopUp.css +408 -0
- package/src/components/MessagePopup/SuccessPopup.tsx +71 -0
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +10 -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,22 +1,30 @@
|
|
|
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 "../ToastWrapper/ToastWrapper";
|
|
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
|
+
themesList: any;
|
|
15
|
+
requestObj: {
|
|
16
|
+
fromUser: string;
|
|
17
|
+
property: string;
|
|
18
|
+
text: string;
|
|
19
|
+
firstName: string;
|
|
20
|
+
lastName: string;
|
|
21
|
+
theme: string;
|
|
22
|
+
subject: string;
|
|
23
|
+
};
|
|
15
24
|
}
|
|
16
25
|
|
|
17
|
-
export default function MessagePopUp(props:PopupProps) {
|
|
18
|
-
|
|
19
|
-
const [showMessagePopUp, setshowMessagePopUp]= useState();
|
|
26
|
+
export default function MessagePopUp(props: PopupProps) {
|
|
27
|
+
const [showMessagePopUp, setshowMessagePopUp] = useState();
|
|
20
28
|
const [showSuccessPopUp, setShowSuccessPopUp] = useState(false);
|
|
21
29
|
const [showErrorPopUp, setShowErrorPopUp] = useState(false);
|
|
22
30
|
const [themeId, setThemeId] = useState("");
|
|
@@ -24,13 +32,40 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
24
32
|
const [messageText, setMessageText] = useState("");
|
|
25
33
|
const [firstName, setFirstName] = useState("");
|
|
26
34
|
const [lastName, setLastName] = useState("");
|
|
35
|
+
const [id, setId] = useState("");
|
|
27
36
|
|
|
28
37
|
const handleClose = () => {
|
|
29
38
|
props.onClick();
|
|
30
39
|
};
|
|
31
40
|
const handleSendMessage = () => {
|
|
32
|
-
|
|
33
|
-
|
|
41
|
+
if (!messageText || !subject || !firstName || !lastName || !themeId) {
|
|
42
|
+
// toast.warning("Please fill in all fields.");
|
|
43
|
+
showToast("Please fill in all fields.", "warning");
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const user = JSON.parse(localStorage.getItem("user" ) || "{}");
|
|
48
|
+
const userId = user.id;
|
|
49
|
+
|
|
50
|
+
const requestObj = {
|
|
51
|
+
fromUser: `/users/${userId}`,
|
|
52
|
+
property: `/properties/${id}`,
|
|
53
|
+
text: messageText,
|
|
54
|
+
firstName,
|
|
55
|
+
lastName,
|
|
56
|
+
theme: `/themes/${themeId}`,
|
|
57
|
+
subject: subject,
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
const user = JSON.parse(localStorage.getItem("user") || "{}");
|
|
62
|
+
if (user) {
|
|
63
|
+
setFirstName(user.firstname || "");
|
|
64
|
+
setLastName(user.lastname || "");
|
|
65
|
+
} else if (!user) {
|
|
66
|
+
console.log("no user");
|
|
67
|
+
}
|
|
68
|
+
}, []);
|
|
34
69
|
return (
|
|
35
70
|
<div>
|
|
36
71
|
<div className="popup-overlay">
|
|
@@ -58,7 +93,7 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
58
93
|
/>
|
|
59
94
|
</div>
|
|
60
95
|
<div className="popUpHeader d-flex flex-column text-wrap mb-md-1 ">
|
|
61
|
-
Nachricht senden {
|
|
96
|
+
Nachricht senden {firstName} {lastName}
|
|
62
97
|
</div>
|
|
63
98
|
</div>
|
|
64
99
|
|
|
@@ -75,11 +110,13 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
75
110
|
onChange={(e) => setThemeId(e.target.value)}
|
|
76
111
|
>
|
|
77
112
|
<option value="">Select a theme</option>
|
|
78
|
-
{props.themesList.map(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
113
|
+
{props.themesList.map(
|
|
114
|
+
(theme: { id: string; name: string }) => (
|
|
115
|
+
<option key={theme.id} value={theme.id}>
|
|
116
|
+
{theme.name}
|
|
117
|
+
</option>
|
|
118
|
+
)
|
|
119
|
+
)}
|
|
83
120
|
</select>
|
|
84
121
|
</div>
|
|
85
122
|
</div>
|
|
@@ -114,7 +151,7 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
114
151
|
className="popup_textarea mb-md-4 col-12 col-md-11"
|
|
115
152
|
placeholder="Dein Vorname"
|
|
116
153
|
type="text"
|
|
117
|
-
value={
|
|
154
|
+
value={firstName}
|
|
118
155
|
onChange={(e) => setFirstName(e.target.value)}
|
|
119
156
|
style={{ height: "42px" }}
|
|
120
157
|
/>
|
|
@@ -147,13 +184,13 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
147
184
|
</div>
|
|
148
185
|
</div>
|
|
149
186
|
</div>
|
|
150
|
-
|
|
187
|
+
|
|
151
188
|
{showSuccessPopUp && (
|
|
152
189
|
<SuccessPopUp onClick={() => setShowSuccessPopUp(false)} />
|
|
153
190
|
)}
|
|
154
191
|
{showErrorPopUp && (
|
|
155
192
|
<ErrorPopUp onClick={() => setShowErrorPopUp(false)} />
|
|
156
|
-
)}
|
|
193
|
+
)}
|
|
157
194
|
</div>
|
|
158
195
|
);
|
|
159
196
|
}
|
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
.popup-overlay {
|
|
2
|
+
position: fixed; /* Fixed position to cover the whole screen */
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
right: 0;
|
|
6
|
+
bottom: 0;
|
|
7
|
+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
8
|
+
display: flex; /* Flexbox to center the popup */
|
|
9
|
+
justify-content: center; /* Center horizontally */
|
|
10
|
+
align-items: center; /* Center vertically */
|
|
11
|
+
z-index: 2000; /* Ensure it's above other content */
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.shareSection {
|
|
15
|
+
height: 340px;
|
|
16
|
+
padding: 40px;
|
|
17
|
+
border-radius: 16px;
|
|
18
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
19
|
+
border: solid 1px #d7d9e3;
|
|
20
|
+
background-color: #fff;
|
|
21
|
+
}
|
|
22
|
+
.popUpHeader {
|
|
23
|
+
height: 48px;
|
|
24
|
+
font-size: 32px;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
color: #1b1b1b;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.closeIcon {
|
|
30
|
+
width: 16px;
|
|
31
|
+
height: 16px;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.socialMediaIconsSection {
|
|
36
|
+
gap: 60px !important;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.socialMediaIcons {
|
|
40
|
+
width: 28px !important;
|
|
41
|
+
height: 28px !important;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.socialMediaIconText {
|
|
46
|
+
height: 36px;
|
|
47
|
+
font-size: 13px;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
line-height: 3;
|
|
50
|
+
color: #344041;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.popup_search-input {
|
|
55
|
+
height: 60px;
|
|
56
|
+
padding-inline-end: 190px;
|
|
57
|
+
font-size: 20px;
|
|
58
|
+
box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
59
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.popup_search-input::placeholder {
|
|
63
|
+
font-size: 20px;
|
|
64
|
+
color: rgba(140, 140, 140, 0.5);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.popup_search-input:focus {
|
|
68
|
+
outline: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.popupcustom-button {
|
|
72
|
+
height: 35px;
|
|
73
|
+
color: #000;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
border-color: var(--main-yellow);
|
|
76
|
+
right: 0;
|
|
77
|
+
z-index: 1;
|
|
78
|
+
background-color: var(--main-yellow);
|
|
79
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
80
|
+
}
|
|
81
|
+
.button-text {
|
|
82
|
+
width: 115px;
|
|
83
|
+
height: 19px;
|
|
84
|
+
flex-grow: 0;
|
|
85
|
+
font-family: Inter;
|
|
86
|
+
font-size: 16px;
|
|
87
|
+
font-weight: 500;
|
|
88
|
+
font-stretch: normal;
|
|
89
|
+
font-style: normal;
|
|
90
|
+
line-height: normal;
|
|
91
|
+
letter-spacing: normal;
|
|
92
|
+
text-align: center;
|
|
93
|
+
}
|
|
94
|
+
.button_success-right {
|
|
95
|
+
width: 184px;
|
|
96
|
+
height: 43px;
|
|
97
|
+
flex-grow: 0;
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: row;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
align-items: center;
|
|
102
|
+
gap: 8px;
|
|
103
|
+
padding: 12px 24px;
|
|
104
|
+
border-radius: 16px;
|
|
105
|
+
border-color: #000;
|
|
106
|
+
background-color: transparent;
|
|
107
|
+
}
|
|
108
|
+
.button_success-left {
|
|
109
|
+
width: 200px;
|
|
110
|
+
height: 43px;
|
|
111
|
+
flex-grow: 0;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: row;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
align-items: center;
|
|
116
|
+
gap: 8px;
|
|
117
|
+
padding: 12px 24px;
|
|
118
|
+
border-radius: 16px;
|
|
119
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
120
|
+
background-color: var(--main-yellow);
|
|
121
|
+
}
|
|
122
|
+
.shareSection-Success {
|
|
123
|
+
height: 510px;
|
|
124
|
+
padding: 40px;
|
|
125
|
+
border-radius: 16px;
|
|
126
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
127
|
+
border: solid 1px #d7d9e3;
|
|
128
|
+
background-color: #fff;
|
|
129
|
+
}
|
|
130
|
+
.shareSection-Error {
|
|
131
|
+
height: 400px;
|
|
132
|
+
padding: 10px;
|
|
133
|
+
border-radius: 16px;
|
|
134
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
135
|
+
border: solid 1px #d7d9e3;
|
|
136
|
+
background-color: #fff;
|
|
137
|
+
}
|
|
138
|
+
.MessageShareSection {
|
|
139
|
+
height: 513px;
|
|
140
|
+
padding: 14px 14px;
|
|
141
|
+
border-radius: 16px;
|
|
142
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
143
|
+
border: solid 1px #d7d9e3;
|
|
144
|
+
background-color: #fff;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.popup-tags {
|
|
148
|
+
font-size: large;
|
|
149
|
+
font-weight: bold;
|
|
150
|
+
}
|
|
151
|
+
.button_icon-left {
|
|
152
|
+
width: 184px;
|
|
153
|
+
height: 43px;
|
|
154
|
+
flex-grow: 0;
|
|
155
|
+
display: flex;
|
|
156
|
+
flex-direction: row;
|
|
157
|
+
justify-content: center;
|
|
158
|
+
align-items: center;
|
|
159
|
+
gap: 8px;
|
|
160
|
+
padding: 12px 24px;
|
|
161
|
+
border-radius: 16px;
|
|
162
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
163
|
+
}
|
|
164
|
+
.main_button {
|
|
165
|
+
width: 184px;
|
|
166
|
+
height: 43px;
|
|
167
|
+
flex-grow: 0;
|
|
168
|
+
display: flex;
|
|
169
|
+
flex-direction: row;
|
|
170
|
+
justify-content: center;
|
|
171
|
+
align-items: center;
|
|
172
|
+
gap: 8px;
|
|
173
|
+
padding: 12px 24px;
|
|
174
|
+
border-radius: 16px;
|
|
175
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
176
|
+
background-color: var(--main-yellow);
|
|
177
|
+
}
|
|
178
|
+
.button-text {
|
|
179
|
+
width: 85px;
|
|
180
|
+
height: 19px;
|
|
181
|
+
flex-grow: 0;
|
|
182
|
+
font-family: Inter;
|
|
183
|
+
font-size: 16px;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
font-stretch: normal;
|
|
186
|
+
font-style: normal;
|
|
187
|
+
line-height: normal;
|
|
188
|
+
letter-spacing: normal;
|
|
189
|
+
text-align: center;
|
|
190
|
+
}
|
|
191
|
+
.button_icon-right {
|
|
192
|
+
width: 184px;
|
|
193
|
+
height: 43px;
|
|
194
|
+
flex-grow: 0;
|
|
195
|
+
display: flex;
|
|
196
|
+
flex-direction: row;
|
|
197
|
+
justify-content: center;
|
|
198
|
+
align-items: center;
|
|
199
|
+
gap: 8px;
|
|
200
|
+
padding: 12px 24px;
|
|
201
|
+
border-radius: 16px;
|
|
202
|
+
border-color: #000;
|
|
203
|
+
background-color: transparent;
|
|
204
|
+
}
|
|
205
|
+
.circle {
|
|
206
|
+
height: 55px;
|
|
207
|
+
width: 55px;
|
|
208
|
+
background-color: transparent;
|
|
209
|
+
border-radius: 50%;
|
|
210
|
+
border-style: solid;
|
|
211
|
+
border-color: #000;
|
|
212
|
+
border-width: 2px;
|
|
213
|
+
}
|
|
214
|
+
.Line-9,
|
|
215
|
+
.Line-10 {
|
|
216
|
+
height: 1px;
|
|
217
|
+
flex-grow: 1;
|
|
218
|
+
background-color: rgba(140, 140, 140, 0.5);
|
|
219
|
+
max-width: 18rem;
|
|
220
|
+
align-self: center;
|
|
221
|
+
align-content: center;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.middle-container {
|
|
225
|
+
display: flex;
|
|
226
|
+
align-items: center;
|
|
227
|
+
justify-content: center;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.middle-text {
|
|
231
|
+
margin: 25px 25px;
|
|
232
|
+
}
|
|
233
|
+
.google-button {
|
|
234
|
+
width: 260px;
|
|
235
|
+
height: 45px;
|
|
236
|
+
flex-grow: 0;
|
|
237
|
+
display: flex;
|
|
238
|
+
flex-direction: row;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
align-items: center;
|
|
241
|
+
gap: 8px;
|
|
242
|
+
padding: 12px 24px;
|
|
243
|
+
border-radius: 4px;
|
|
244
|
+
background-color: #000000;
|
|
245
|
+
background: linear-gradient(to top, #000, #666);
|
|
246
|
+
}
|
|
247
|
+
.Account-popup {
|
|
248
|
+
height: 713px;
|
|
249
|
+
padding: 10px;
|
|
250
|
+
border-radius: 16px;
|
|
251
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
252
|
+
border: solid 1px #d7d9e3;
|
|
253
|
+
background-color: #fff;
|
|
254
|
+
max-width: 1000px;
|
|
255
|
+
}
|
|
256
|
+
.lightertxt {
|
|
257
|
+
color: #797979;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.filter {
|
|
261
|
+
height: 343px;
|
|
262
|
+
align-self: stretch;
|
|
263
|
+
flex-grow: 0;
|
|
264
|
+
display: flex;
|
|
265
|
+
flex-direction: column;
|
|
266
|
+
gap: 2px;
|
|
267
|
+
padding: 32px;
|
|
268
|
+
border-radius: 32px;
|
|
269
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
270
|
+
background-color: #f2f2f2;
|
|
271
|
+
}
|
|
272
|
+
.loginFilter {
|
|
273
|
+
height: 280px;
|
|
274
|
+
align-self: stretch;
|
|
275
|
+
flex-grow: 0;
|
|
276
|
+
display: flex;
|
|
277
|
+
flex-direction: column;
|
|
278
|
+
gap: 2px;
|
|
279
|
+
padding: 32px;
|
|
280
|
+
border-radius: 32px;
|
|
281
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
282
|
+
background-color: #f2f2f2;
|
|
283
|
+
}
|
|
284
|
+
.radioLabel {
|
|
285
|
+
width: 176px;
|
|
286
|
+
height: 19px;
|
|
287
|
+
flex-grow: 0;
|
|
288
|
+
font-family: Inter;
|
|
289
|
+
font-size: 16px;
|
|
290
|
+
font-weight: normal;
|
|
291
|
+
font-stretch: normal;
|
|
292
|
+
font-style: normal;
|
|
293
|
+
line-height: normal;
|
|
294
|
+
letter-spacing: normal;
|
|
295
|
+
text-align: left;
|
|
296
|
+
color: #1b1b1b;
|
|
297
|
+
}
|
|
298
|
+
.goButton-text {
|
|
299
|
+
width: 78px;
|
|
300
|
+
height: 19px;
|
|
301
|
+
flex-grow: 0;
|
|
302
|
+
font-family: Inter;
|
|
303
|
+
font-size: 16px;
|
|
304
|
+
font-weight: 500;
|
|
305
|
+
font-stretch: normal;
|
|
306
|
+
font-style: normal;
|
|
307
|
+
line-height: normal;
|
|
308
|
+
letter-spacing: normal;
|
|
309
|
+
text-align: center;
|
|
310
|
+
color: #1b1b1b;
|
|
311
|
+
}
|
|
312
|
+
.placeholders {
|
|
313
|
+
width: 232px;
|
|
314
|
+
height: 45px;
|
|
315
|
+
flex-grow: 0;
|
|
316
|
+
display: flex;
|
|
317
|
+
flex-direction: row;
|
|
318
|
+
justify-content: flex-start;
|
|
319
|
+
align-items: center;
|
|
320
|
+
gap: 8px;
|
|
321
|
+
padding: 12px 24px;
|
|
322
|
+
border-radius: 4px;
|
|
323
|
+
background-image: linear-gradient(to top, #000 100%, #666 0%);
|
|
324
|
+
}
|
|
325
|
+
.TagW.active {
|
|
326
|
+
height: 40px;
|
|
327
|
+
flex-grow: 1;
|
|
328
|
+
display: flex;
|
|
329
|
+
flex-direction: row;
|
|
330
|
+
justify-content: center;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 6px;
|
|
333
|
+
padding: 0 24px;
|
|
334
|
+
border-radius: 16px;
|
|
335
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
336
|
+
background-image: linear-gradient(to top, #000, #666);
|
|
337
|
+
color: white;
|
|
338
|
+
}
|
|
339
|
+
.Tag {
|
|
340
|
+
height: 40px;
|
|
341
|
+
flex-grow: 1;
|
|
342
|
+
display: flex;
|
|
343
|
+
flex-direction: row;
|
|
344
|
+
justify-content: center;
|
|
345
|
+
align-items: center;
|
|
346
|
+
gap: 6px;
|
|
347
|
+
padding: 0 24px;
|
|
348
|
+
border-radius: 16px;
|
|
349
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
350
|
+
background-image: linear-gradient(
|
|
351
|
+
to top,
|
|
352
|
+
rgba(255, 0, 0, 0),
|
|
353
|
+
rgba(255, 0, 0, 1)
|
|
354
|
+
);
|
|
355
|
+
}
|
|
356
|
+
.TagW {
|
|
357
|
+
height: 40px;
|
|
358
|
+
flex-grow: 1;
|
|
359
|
+
display: flex;
|
|
360
|
+
flex-direction: row;
|
|
361
|
+
justify-content: center;
|
|
362
|
+
align-items: center;
|
|
363
|
+
gap: 6px;
|
|
364
|
+
padding: 0 24px;
|
|
365
|
+
border-radius: 16px;
|
|
366
|
+
border: solid 1px #000;
|
|
367
|
+
background-color: #fff;
|
|
368
|
+
color: #000;
|
|
369
|
+
}
|
|
370
|
+
/* */
|
|
371
|
+
@media (min-width: 375px) and (max-width: 667px) {
|
|
372
|
+
.Account-popup {
|
|
373
|
+
height: 650px !important;
|
|
374
|
+
padding: 10px;
|
|
375
|
+
border-radius: 16px;
|
|
376
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
377
|
+
border: solid 1px #d7d9e3;
|
|
378
|
+
background-color: #fff;
|
|
379
|
+
width: 90vw;
|
|
380
|
+
}
|
|
381
|
+
.filter {
|
|
382
|
+
height: 260px;
|
|
383
|
+
align-self: stretch;
|
|
384
|
+
flex-grow: 0;
|
|
385
|
+
display: flex;
|
|
386
|
+
flex-direction: column;
|
|
387
|
+
gap: 2px;
|
|
388
|
+
padding: 32px;
|
|
389
|
+
border-radius: 32px;
|
|
390
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
391
|
+
background-color: #f2f2f2;
|
|
392
|
+
}
|
|
393
|
+
.middle-text {
|
|
394
|
+
margin: 5px 25px;
|
|
395
|
+
}
|
|
396
|
+
.loginFilter {
|
|
397
|
+
height: 180px;
|
|
398
|
+
align-self: stretch;
|
|
399
|
+
flex-grow: 0;
|
|
400
|
+
display: flex;
|
|
401
|
+
flex-direction: column;
|
|
402
|
+
gap: 2px;
|
|
403
|
+
padding: 32px;
|
|
404
|
+
border-radius: 32px;
|
|
405
|
+
box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);
|
|
406
|
+
background-color: #f2f2f2;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
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 React, { useState } from "react";
|
|
5
|
+
|
|
6
|
+
interface PopupProps {
|
|
7
|
+
onClick: any;
|
|
8
|
+
}
|
|
9
|
+
export default function SuccessPopUp(props: PopupProps) {
|
|
10
|
+
const [showSuccessPopUp, setShowSuccessPopUp] = useState(true);
|
|
11
|
+
|
|
12
|
+
const handleClose = () => {
|
|
13
|
+
props.onClick();
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const handleSendMessage = () => {
|
|
17
|
+
setShowSuccessPopUp(false);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<div>
|
|
22
|
+
{showSuccessPopUp && (
|
|
23
|
+
<div className="popup-overlay">
|
|
24
|
+
<div className="shareSection-Success d-flex flex-column col-7 ">
|
|
25
|
+
<img
|
|
26
|
+
src={x}
|
|
27
|
+
alt="close"
|
|
28
|
+
className="closeIcon d-flex flex-column align-self-end ms-5 "
|
|
29
|
+
onClick={handleClose}
|
|
30
|
+
/>
|
|
31
|
+
<div className=" d-flex flex-column align-self-center ms-5 ">
|
|
32
|
+
<img src={icon_checkmark} alt="facebook" className=" mb-4" />
|
|
33
|
+
</div>
|
|
34
|
+
<div className="popUpHeader d-flex flex-column col- text-center text-wrap mb-5 align-self-center">
|
|
35
|
+
<span > Herzlichen Glückwunsch! </span>
|
|
36
|
+
<span > Deine Nachricht wurde erfolgreich gesendet. </span>
|
|
37
|
+
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div className="d-flex flex-column mt-4 mb-4">
|
|
41
|
+
<span className="text-center ms-5 text-wrap">
|
|
42
|
+
Neben vielen weiteren Einstellungen und Aktionen kannst du die Antwort auf deine Nachricht in deinem Control Center einsehen, sobald der Verkäufer darauf reagiert hat.
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
<div className=" d-flex flex-row align-self-center ">
|
|
49
|
+
|
|
50
|
+
<button
|
|
51
|
+
className="d-flex button_success-left col-sm-5 border-0 rounded-4"
|
|
52
|
+
type="button"
|
|
53
|
+
id="button"
|
|
54
|
+
onClick={handleSendMessage}
|
|
55
|
+
>
|
|
56
|
+
|
|
57
|
+
<strong> Zum Control Center</strong>
|
|
58
|
+
</button>
|
|
59
|
+
|
|
60
|
+
<button
|
|
61
|
+
className="button_success-right col-sm-3 border-1 ms-3 rounded-4"
|
|
62
|
+
type="button"
|
|
63
|
+
id="button" >
|
|
64
|
+
<strong>Abbrechen</strong>
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
</div>
|
|
69
|
+
</div>)}</div>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
@@ -47,6 +47,15 @@ interface PopupProps {
|
|
|
47
47
|
firstname: any;
|
|
48
48
|
lastname: any;
|
|
49
49
|
themesList: any;
|
|
50
|
+
requestObj: {
|
|
51
|
+
fromUser: string;
|
|
52
|
+
property: string;
|
|
53
|
+
text: string;
|
|
54
|
+
firstName: string;
|
|
55
|
+
lastName: string;
|
|
56
|
+
theme: string;
|
|
57
|
+
subject: string;
|
|
58
|
+
};
|
|
50
59
|
}
|
|
51
60
|
export default function PropertyCard(props: PopupProps) {
|
|
52
61
|
const [liked, setLiked] = useState(false);
|
|
@@ -285,6 +294,7 @@ export default function PropertyCard(props: PopupProps) {
|
|
|
285
294
|
firstname={props.firstname}
|
|
286
295
|
lastname={props.lastname}
|
|
287
296
|
themesList={props.themesList}
|
|
297
|
+
requestObj={props.requestObj}
|
|
288
298
|
/>
|
|
289
299
|
)}
|
|
290
300
|
{sharePopUp && <SharePopup onClick={() => setSharePopUp(false)} />}
|