nestiq-component-library 1.1.45 → 1.1.46
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/mail-icon.176f921aa16b9a3d.png +0 -0
- package/dist/components/MessagePopup/MessagePopUp.d.ts +12 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +84 -20
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +84 -19
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/images/icon_close 2.png +0 -0
- package/src/assets/images/mail-icon.png +0 -0
- package/src/components/MessagePopup/MessagePopUp.css +196 -0
- package/src/components/MessagePopup/MessagePopUp.tsx +164 -0
- package/src/index.tsx +1 -0
|
@@ -0,0 +1,196 @@
|
|
|
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: 9998; /* Ensure it's above other content */
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.MessageShareSections {
|
|
15
|
+
height: 550px;
|
|
16
|
+
padding: 10px 14px;
|
|
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
|
+
.popup-tags {
|
|
82
|
+
font-size: large;
|
|
83
|
+
font-weight: bold;
|
|
84
|
+
}
|
|
85
|
+
.button_icon-left {
|
|
86
|
+
width: 184px;
|
|
87
|
+
height: 43px;
|
|
88
|
+
flex-grow: 0;
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: row;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 8px;
|
|
94
|
+
padding: 12px 24px;
|
|
95
|
+
border-radius: 16px;
|
|
96
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
97
|
+
}
|
|
98
|
+
.button-text {
|
|
99
|
+
width: 85px;
|
|
100
|
+
height: 19px;
|
|
101
|
+
flex-grow: 0;
|
|
102
|
+
font-family: Inter;
|
|
103
|
+
font-size: 16px;
|
|
104
|
+
font-weight: 500;
|
|
105
|
+
font-stretch: normal;
|
|
106
|
+
font-style: normal;
|
|
107
|
+
line-height: normal;
|
|
108
|
+
letter-spacing: normal;
|
|
109
|
+
text-align: center;
|
|
110
|
+
}
|
|
111
|
+
.button_icon-right {
|
|
112
|
+
width: 184px;
|
|
113
|
+
height: 43px;
|
|
114
|
+
flex-grow: 0;
|
|
115
|
+
display: flex;
|
|
116
|
+
flex-direction: row;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
align-items: center;
|
|
119
|
+
gap: 8px;
|
|
120
|
+
padding: 12px 24px;
|
|
121
|
+
border-radius: 16px;
|
|
122
|
+
border-color: #000;
|
|
123
|
+
background-color: transparent;
|
|
124
|
+
}
|
|
125
|
+
.circle {
|
|
126
|
+
height: 55px;
|
|
127
|
+
width: 55px;
|
|
128
|
+
background-color: transparent;
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
border-style: solid;
|
|
131
|
+
border-color: #000;
|
|
132
|
+
border-width: 2px;
|
|
133
|
+
align-content: center;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
justify-items: center;
|
|
136
|
+
justify-self: center;
|
|
137
|
+
}
|
|
138
|
+
@media (min-width: 375px) and (max-width: 667px) {
|
|
139
|
+
.popup-overlay {
|
|
140
|
+
/* Fixed position to cover the whole screen */
|
|
141
|
+
|
|
142
|
+
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
|
|
143
|
+
display: flex; /* Flexbox to center the popup */
|
|
144
|
+
|
|
145
|
+
z-index: 9998; /* Ensure it's above other content */
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.MessageShareSections {
|
|
149
|
+
height: 650px;
|
|
150
|
+
border-radius: 16px;
|
|
151
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
152
|
+
border: solid 1px #d7d9e3;
|
|
153
|
+
background-color: #fff;
|
|
154
|
+
}
|
|
155
|
+
.button_icon-left {
|
|
156
|
+
width: 90px;
|
|
157
|
+
height: 43px;
|
|
158
|
+
flex-grow: 0;
|
|
159
|
+
display: flex;
|
|
160
|
+
flex-direction: row;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
align-items: center;
|
|
163
|
+
gap: 8px;
|
|
164
|
+
padding: 12px 24px;
|
|
165
|
+
border-radius: 16px;
|
|
166
|
+
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
167
|
+
}
|
|
168
|
+
.button-text {
|
|
169
|
+
width: 85px;
|
|
170
|
+
height: 19px;
|
|
171
|
+
flex-grow: 0;
|
|
172
|
+
font-family: Inter;
|
|
173
|
+
font-size: 16px;
|
|
174
|
+
font-weight: 500;
|
|
175
|
+
font-stretch: normal;
|
|
176
|
+
font-style: normal;
|
|
177
|
+
line-height: normal;
|
|
178
|
+
letter-spacing: normal;
|
|
179
|
+
text-align: center;
|
|
180
|
+
}
|
|
181
|
+
.button_icon-right {
|
|
182
|
+
width: 184px;
|
|
183
|
+
}
|
|
184
|
+
.circle {
|
|
185
|
+
height: 55px;
|
|
186
|
+
width: 55px;
|
|
187
|
+
background-color: transparent;
|
|
188
|
+
border-radius: 50%;
|
|
189
|
+
border-style: solid;
|
|
190
|
+
border-color: #000;
|
|
191
|
+
border-width: 2px;
|
|
192
|
+
}
|
|
193
|
+
.button_icon-left {
|
|
194
|
+
width: 184px;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
|
+
import x from "../../assets/Images/icon_close_2.png";
|
|
3
|
+
import mail_icon from "../../assets/Images/mail-icon.png";
|
|
4
|
+
// import SuccessPopUp from "./SuccessPopUp";
|
|
5
|
+
// import ErrorPopUp from "./ErrorPopUp";
|
|
6
|
+
import "./MessagePopUp.css";
|
|
7
|
+
// import { showToast } from "nestiq-component-library";
|
|
8
|
+
|
|
9
|
+
interface PopupProps {
|
|
10
|
+
onclose: any;
|
|
11
|
+
userdata: {
|
|
12
|
+
firstname: any;
|
|
13
|
+
lastname: String;
|
|
14
|
+
};
|
|
15
|
+
handleSendMessage:any;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export default function MessagePopUp(props:PopupProps) {
|
|
19
|
+
|
|
20
|
+
const [showMessagePopUp, setshowMessagePopUp]= useState();
|
|
21
|
+
const [showSuccessPopUp, setShowSuccessPopUp] = useState(false);
|
|
22
|
+
const [showErrorPopUp, setShowErrorPopUp] = useState(false);
|
|
23
|
+
const [themeId, setThemeId] = useState("");
|
|
24
|
+
const [subject, setSubject] = useState("");
|
|
25
|
+
const [messageText, setMessageText] = useState("");
|
|
26
|
+
const [firstName, setFirstName] = useState("");
|
|
27
|
+
const [lastName, setLastName] = useState("");
|
|
28
|
+
interface Theme {
|
|
29
|
+
id: string;
|
|
30
|
+
name: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
const [themesList, setThemesList] = useState<Theme[]>([]);
|
|
34
|
+
|
|
35
|
+
const handleClose = props.onclose;
|
|
36
|
+
return (
|
|
37
|
+
<div>
|
|
38
|
+
{showMessagePopUp && (
|
|
39
|
+
<div className="popup-overlay">
|
|
40
|
+
<div className="MessageShareSections d-flex flex-column col-10 col-lg-7">
|
|
41
|
+
<img
|
|
42
|
+
src={x}
|
|
43
|
+
alt="close"
|
|
44
|
+
className="closeIcon d-flex flex-column align-self-end"
|
|
45
|
+
onClick={handleClose}
|
|
46
|
+
/>
|
|
47
|
+
<div className="">
|
|
48
|
+
<div className="d-flex ms-md-5 mb-4">
|
|
49
|
+
<div className="circle align-self-center ms-md-2 me-4">
|
|
50
|
+
<img
|
|
51
|
+
src={mail_icon}
|
|
52
|
+
alt="email"
|
|
53
|
+
className="align-self-center"
|
|
54
|
+
style={{
|
|
55
|
+
alignSelf: "center",
|
|
56
|
+
justifyContent: "center",
|
|
57
|
+
margin: "14px",
|
|
58
|
+
width: "25px",
|
|
59
|
+
height: "20px",
|
|
60
|
+
}}
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
<div className="popUpHeader d-flex flex-column text-wrap mb-md-1 ">
|
|
64
|
+
Nachricht senden {props.userdata?.firstname}{" "}
|
|
65
|
+
{props.userdata?.lastname}
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div className="d-flex flex-md-row flex-column ms-md-5 mt-md-0 ">
|
|
70
|
+
<div className="d-flex flex-column mt-md-0 mt-4 col me-4 w-100 align-self-start justify-content-start">
|
|
71
|
+
<span className="popup-tags mb-2">Betreff:*</span>
|
|
72
|
+
<div>
|
|
73
|
+
<select
|
|
74
|
+
name="theme"
|
|
75
|
+
id="theme"
|
|
76
|
+
className="mb-md-4 col-md-11 col-12"
|
|
77
|
+
style={{ height: "42px" }}
|
|
78
|
+
value={themeId}
|
|
79
|
+
onChange={(e) => setThemeId(e.target.value)}
|
|
80
|
+
>
|
|
81
|
+
<option value="">Select a theme</option>
|
|
82
|
+
{themesList.map((theme) => (
|
|
83
|
+
<option key={theme.id} value={theme.id}>
|
|
84
|
+
{theme.name}
|
|
85
|
+
</option>
|
|
86
|
+
))}
|
|
87
|
+
</select>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
<div className="d-flex flex-column mt-md-4 col me-4 w-100">
|
|
91
|
+
<div></div>
|
|
92
|
+
<textarea
|
|
93
|
+
className="popup_textarea col-12 col-md-10 mb-md-0 mt-2 "
|
|
94
|
+
placeholder="Betreff deiner Nachricht"
|
|
95
|
+
style={{ height: "42px" }}
|
|
96
|
+
value={subject}
|
|
97
|
+
onChange={(e) => setSubject(e.target.value)}
|
|
98
|
+
/>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div className="d-flex flex-column col ms-md-5 me-md-4">
|
|
102
|
+
<span className="popup-tags mb-2 ">Deine Nachricht:*</span>
|
|
103
|
+
<textarea
|
|
104
|
+
className="popup_textarea mb-md-4 col-md-11 col-12 "
|
|
105
|
+
placeholder="Deine Nachricht hier..."
|
|
106
|
+
value={messageText}
|
|
107
|
+
onChange={(e) => setMessageText(e.target.value)}
|
|
108
|
+
/>
|
|
109
|
+
</div>
|
|
110
|
+
{/* <div className="d-flex flex-column ms-5 me-5">
|
|
111
|
+
<span className="popup-tags mb-2">Thema auswählen:*</span>
|
|
112
|
+
|
|
113
|
+
</div> */}
|
|
114
|
+
<div className="d-flex flex-md-row flex-column ms-md-5 ">
|
|
115
|
+
<div className="d-flex flex-column col me-4 w-100">
|
|
116
|
+
<span className="popup-tags mb-2">Vorname:</span>
|
|
117
|
+
<input
|
|
118
|
+
className="popup_textarea mb-md-4 col-12 col-md-11"
|
|
119
|
+
placeholder="Dein Vorname"
|
|
120
|
+
type="text"
|
|
121
|
+
value={props?.userdata.firstname}
|
|
122
|
+
onChange={(e) => setFirstName(e.target.value)}
|
|
123
|
+
style={{ height: "42px" }}
|
|
124
|
+
/>
|
|
125
|
+
</div>
|
|
126
|
+
<div className="d-flex flex-column me-4 w-100 col ">
|
|
127
|
+
<span className="popup-tags mb-2">Nachname:</span>
|
|
128
|
+
<input
|
|
129
|
+
className="popup_textarea col-12 mb-4 col-md-10"
|
|
130
|
+
placeholder="Dein Nachname"
|
|
131
|
+
type="text"
|
|
132
|
+
value={lastName}
|
|
133
|
+
onChange={(e) => setLastName(e.target.value)}
|
|
134
|
+
style={{ height: "42px" }}
|
|
135
|
+
/>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
<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">
|
|
139
|
+
<button
|
|
140
|
+
className="main_button border-0 rounded-4 align-self-center "
|
|
141
|
+
type="button"
|
|
142
|
+
id="button"
|
|
143
|
+
onClick={props.handleSendMessage}
|
|
144
|
+
>
|
|
145
|
+
<strong>Nachricht senden</strong>
|
|
146
|
+
</button>
|
|
147
|
+
<button className="button_icon-right border-1 col-sm-3 align-self-center">
|
|
148
|
+
<strong>Abbrechen</strong>
|
|
149
|
+
</button>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
)}
|
|
155
|
+
{/*
|
|
156
|
+
{showSuccessPopUp && (
|
|
157
|
+
<SuccessPopUp onClick={() => setShowSuccessPopUp(false)} />
|
|
158
|
+
)}
|
|
159
|
+
{showErrorPopUp && (
|
|
160
|
+
<ErrorPopUp onClick={() => setShowErrorPopUp(false)} />
|
|
161
|
+
)} */}
|
|
162
|
+
</div>
|
|
163
|
+
);
|
|
164
|
+
}
|
package/src/index.tsx
CHANGED
|
@@ -10,6 +10,7 @@ export { default as PropertyCard } from "./components/PropertyCard//PropertyCard
|
|
|
10
10
|
export { default as SharePopup } from "./components/SharePopup/SharePopup";
|
|
11
11
|
export { default as FloorPlanPopup } from "./components/FloorPlanPopup/FloorPlanPopup";
|
|
12
12
|
export { default as NewPropertyCard } from "./components/NewPropertyCard/NewPropertyCard";
|
|
13
|
+
export { default as MessagePopUp } from "./components/MessagePopup/MessagePopUp";
|
|
13
14
|
|
|
14
15
|
// TOASTER WRAPPER AND FUNCTION
|
|
15
16
|
export {
|