nestiq-component-library 1.1.50 → 1.1.52
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/components/MessagePopup/MessagePopUp.d.ts +3 -4
- package/dist/components/NewPropertyCard/NewPropertyCard.d.ts +3 -0
- package/dist/index.es.js +19 -18
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +19 -18
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/MessagePopup/MessagePopUp.tsx +104 -109
- package/src/components/NewPropertyCard/NewPropertyCard.tsx +6 -1
|
@@ -7,12 +7,11 @@ import "../MessagePopup/MessagePopUp.css";
|
|
|
7
7
|
// import { showToast } from "nestiq-component-library";
|
|
8
8
|
|
|
9
9
|
interface PopupProps {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
lastname: String;
|
|
13
|
-
};
|
|
10
|
+
firstname: string;
|
|
11
|
+
lastname: string;
|
|
14
12
|
handleSendMessage: any;
|
|
15
13
|
onClick: any;
|
|
14
|
+
themesList:any;
|
|
16
15
|
}
|
|
17
16
|
|
|
18
17
|
export default function MessagePopUp(props:PopupProps) {
|
|
@@ -25,133 +24,129 @@ export default function MessagePopUp(props:PopupProps) {
|
|
|
25
24
|
const [messageText, setMessageText] = useState("");
|
|
26
25
|
const [firstName, setFirstName] = useState("");
|
|
27
26
|
const [lastName, setLastName] = useState("");
|
|
28
|
-
interface Theme {
|
|
29
|
-
id: string;
|
|
30
|
-
name: string;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const [themesList, setThemesList] = useState<Theme[]>([]);
|
|
34
27
|
|
|
35
28
|
const handleClose = () => {
|
|
36
29
|
props.onClick();
|
|
37
30
|
};
|
|
31
|
+
const handleSendMessage = () => {
|
|
32
|
+
props.handleSendMessage();
|
|
33
|
+
}
|
|
38
34
|
return (
|
|
39
35
|
<div>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
{props.userData?.lastname}
|
|
67
|
-
</div>
|
|
36
|
+
<div className="popup-overlay">
|
|
37
|
+
<div className="MessageShareSections d-flex flex-column col-10 col-lg-7">
|
|
38
|
+
<img
|
|
39
|
+
src={x}
|
|
40
|
+
alt="close"
|
|
41
|
+
className="closeIcon d-flex flex-column align-self-end"
|
|
42
|
+
onClick={handleClose}
|
|
43
|
+
/>
|
|
44
|
+
<div className="">
|
|
45
|
+
<div className="d-flex ms-md-5 mb-4">
|
|
46
|
+
<div className="circle align-self-center ms-md-2 me-4">
|
|
47
|
+
<img
|
|
48
|
+
src={mail_icon}
|
|
49
|
+
alt="email"
|
|
50
|
+
className="align-self-center"
|
|
51
|
+
style={{
|
|
52
|
+
alignSelf: "center",
|
|
53
|
+
justifyContent: "center",
|
|
54
|
+
margin: "14px",
|
|
55
|
+
width: "25px",
|
|
56
|
+
height: "20px",
|
|
57
|
+
}}
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
60
|
+
<div className="popUpHeader d-flex flex-column text-wrap mb-md-1 ">
|
|
61
|
+
Nachricht senden {props.firstname} {props.lastname}
|
|
68
62
|
</div>
|
|
63
|
+
</div>
|
|
69
64
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
style={{ height: "42px" }}
|
|
79
|
-
value={themeId}
|
|
80
|
-
onChange={(e) => setThemeId(e.target.value)}
|
|
81
|
-
>
|
|
82
|
-
<option value="">Select a theme</option>
|
|
83
|
-
{themesList.map((theme) => (
|
|
84
|
-
<option key={theme.id} value={theme.id}>
|
|
85
|
-
{theme.name}
|
|
86
|
-
</option>
|
|
87
|
-
))}
|
|
88
|
-
</select>
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
<div className="d-flex flex-column mt-md-4 col me-4 w-100">
|
|
92
|
-
<div></div>
|
|
93
|
-
<textarea
|
|
94
|
-
className="popup_textarea col-12 col-md-10 mb-md-0 mt-2 "
|
|
95
|
-
placeholder="Betreff deiner Nachricht"
|
|
65
|
+
<div className="d-flex flex-md-row flex-column ms-md-5 mt-md-0 ">
|
|
66
|
+
<div className="d-flex flex-column mt-md-0 mt-4 col me-4 w-100 align-self-start justify-content-start">
|
|
67
|
+
<span className="popup-tags mb-2">Betreff:*</span>
|
|
68
|
+
<div>
|
|
69
|
+
<select
|
|
70
|
+
name="theme"
|
|
71
|
+
id="theme"
|
|
72
|
+
className="mb-md-4 col-md-11 col-12"
|
|
96
73
|
style={{ height: "42px" }}
|
|
97
|
-
value={
|
|
98
|
-
onChange={(e) =>
|
|
99
|
-
|
|
74
|
+
value={themeId}
|
|
75
|
+
onChange={(e) => setThemeId(e.target.value)}
|
|
76
|
+
>
|
|
77
|
+
<option value="">Select a theme</option>
|
|
78
|
+
{props.themesList.map((theme: { id: string; name: string }) => (
|
|
79
|
+
<option key={theme.id} value={theme.id}>
|
|
80
|
+
{theme.name}
|
|
81
|
+
</option>
|
|
82
|
+
))}
|
|
83
|
+
</select>
|
|
100
84
|
</div>
|
|
101
85
|
</div>
|
|
102
|
-
<div className="d-flex flex-column
|
|
103
|
-
<
|
|
86
|
+
<div className="d-flex flex-column mt-md-4 col me-4 w-100">
|
|
87
|
+
<div></div>
|
|
104
88
|
<textarea
|
|
105
|
-
className="popup_textarea
|
|
106
|
-
placeholder="
|
|
107
|
-
|
|
108
|
-
|
|
89
|
+
className="popup_textarea col-12 col-md-10 mb-md-0 mt-2 "
|
|
90
|
+
placeholder="Betreff deiner Nachricht"
|
|
91
|
+
style={{ height: "42px" }}
|
|
92
|
+
value={subject}
|
|
93
|
+
onChange={(e) => setSubject(e.target.value)}
|
|
109
94
|
/>
|
|
110
95
|
</div>
|
|
111
|
-
|
|
96
|
+
</div>
|
|
97
|
+
<div className="d-flex flex-column col ms-md-5 me-md-4">
|
|
98
|
+
<span className="popup-tags mb-2 ">Deine Nachricht:*</span>
|
|
99
|
+
<textarea
|
|
100
|
+
className="popup_textarea mb-md-4 col-md-11 col-12 "
|
|
101
|
+
placeholder="Deine Nachricht hier..."
|
|
102
|
+
value={messageText}
|
|
103
|
+
onChange={(e) => setMessageText(e.target.value)}
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
{/* <div className="d-flex flex-column ms-5 me-5">
|
|
112
107
|
<span className="popup-tags mb-2">Thema auswählen:*</span>
|
|
113
108
|
|
|
114
109
|
</div> */}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</div>
|
|
127
|
-
<div className="d-flex flex-column me-4 w-100 col ">
|
|
128
|
-
<span className="popup-tags mb-2">Nachname:</span>
|
|
129
|
-
<input
|
|
130
|
-
className="popup_textarea col-12 mb-4 col-md-10"
|
|
131
|
-
placeholder="Dein Nachname"
|
|
132
|
-
type="text"
|
|
133
|
-
value={lastName}
|
|
134
|
-
onChange={(e) => setLastName(e.target.value)}
|
|
135
|
-
style={{ height: "42px" }}
|
|
136
|
-
/>
|
|
137
|
-
</div>
|
|
110
|
+
<div className="d-flex flex-md-row flex-column ms-md-5 ">
|
|
111
|
+
<div className="d-flex flex-column col me-4 w-100">
|
|
112
|
+
<span className="popup-tags mb-2">Vorname:</span>
|
|
113
|
+
<input
|
|
114
|
+
className="popup_textarea mb-md-4 col-12 col-md-11"
|
|
115
|
+
placeholder="Dein Vorname"
|
|
116
|
+
type="text"
|
|
117
|
+
value={props?.firstname}
|
|
118
|
+
onChange={(e) => setFirstName(e.target.value)}
|
|
119
|
+
style={{ height: "42px" }}
|
|
120
|
+
/>
|
|
138
121
|
</div>
|
|
139
|
-
<div className="d-flex
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<strong>Abbrechen</strong>
|
|
150
|
-
</button>
|
|
122
|
+
<div className="d-flex flex-column me-4 w-100 col ">
|
|
123
|
+
<span className="popup-tags mb-2">Nachname:</span>
|
|
124
|
+
<input
|
|
125
|
+
className="popup_textarea col-12 mb-4 col-md-10"
|
|
126
|
+
placeholder="Dein Nachname"
|
|
127
|
+
type="text"
|
|
128
|
+
value={lastName}
|
|
129
|
+
onChange={(e) => setLastName(e.target.value)}
|
|
130
|
+
style={{ height: "42px" }}
|
|
131
|
+
/>
|
|
151
132
|
</div>
|
|
152
133
|
</div>
|
|
134
|
+
<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">
|
|
135
|
+
<button
|
|
136
|
+
className="main_button border-0 rounded-4 align-self-center "
|
|
137
|
+
type="button"
|
|
138
|
+
id="button"
|
|
139
|
+
onClick={handleSendMessage}
|
|
140
|
+
>
|
|
141
|
+
<strong>Nachricht senden</strong>
|
|
142
|
+
</button>
|
|
143
|
+
<button className="button_icon-right border-1 col-sm-3 align-self-center">
|
|
144
|
+
<strong>Abbrechen</strong>
|
|
145
|
+
</button>
|
|
146
|
+
</div>
|
|
153
147
|
</div>
|
|
154
148
|
</div>
|
|
149
|
+
</div>
|
|
155
150
|
{/*
|
|
156
151
|
{showSuccessPopUp && (
|
|
157
152
|
<SuccessPopUp onClick={() => setShowSuccessPopUp(false)} />
|
|
@@ -44,6 +44,9 @@ interface PopupProps {
|
|
|
44
44
|
lastname: string;
|
|
45
45
|
};
|
|
46
46
|
handleSendMessage: any;
|
|
47
|
+
firstname: any;
|
|
48
|
+
lastname: any;
|
|
49
|
+
themesList: any;
|
|
47
50
|
}
|
|
48
51
|
export default function PropertyCard(props: PopupProps) {
|
|
49
52
|
const [liked, setLiked] = useState(false);
|
|
@@ -278,8 +281,10 @@ export default function PropertyCard(props: PopupProps) {
|
|
|
278
281
|
{messagePopUp && (
|
|
279
282
|
<MessagePopUp
|
|
280
283
|
onClick={() => setMessagPopUp(false)}
|
|
281
|
-
userData={props.userData}
|
|
282
284
|
handleSendMessage={props.handleSendMessage}
|
|
285
|
+
firstname={props.firstname}
|
|
286
|
+
lastname={props.lastname}
|
|
287
|
+
themesList={props.themesList}
|
|
283
288
|
/>
|
|
284
289
|
)}
|
|
285
290
|
{sharePopUp && <SharePopup onClick={() => setSharePopUp(false)} />}
|