Skip to content

Commit fe52197

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #1140 from fahad-aot/feature/fwf-6169-ai-form-builder-modal
feature/fwf-6169:added ai formbuilder modalm ui
2 parents 0d235fb + d4ca3be commit fe52197

File tree

6 files changed

+817
-3
lines changed

6 files changed

+817
-3
lines changed

‎forms-flow-components/src/components/SvgIcons/index.tsx‎

Lines changed: 475 additions & 0 deletions
Large diffs are not rendered by default.

‎forms-flow-nav/src/endpoints/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const API = {
88
USER_PROFILE_UPDATE: `${WEB_BASE_URL}/user/<user_id>/profile`,
99
GET_PERMISSIONS: `${WEB_BASE_URL}/roles/permissions`,
1010
USER_LOGIN_DETAILS: (userId) => `${WEB_BASE_URL}/user/${userId}/login-details`,
11+
ONBOARDING_USER_ROLE: `${WEB_BASE_URL}/user/info`,
1112
}
1213

1314
export default API;

‎forms-flow-nav/src/services/user/index.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,17 @@ export const fetchUserLoginDetails = () => {
3030
console.error(error);
3131
});
3232
};
33-
33+
export const getOnBoardingUserRole = () => {
34+
const url = API.ONBOARDING_USER_ROLE;
35+
return RequestService.httpGETRequest(url)
36+
.then((res)=>{
37+
if(res.data){
38+
localStorage.setItem("ONBOARDINGUSERROLE", res.data.role);
39+
}
40+
}).catch((err)=>{
41+
console.error(" Error in getting on boarding user role:", err);
42+
});
43+
};
3444

3545
/**
3646
* Trigger a reset password email/link for the current user.

‎forms-flow-nav/src/sidenav/Sidebar.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { fetchTenantDetails, handleTenantSubscription } from "../services/tenant
2222
import { setShowApplications } from "../constants/userContants";
2323
import { LANGUAGE } from "../constants/constants";
2424
import { checkIntegrationEnabled } from "../services/integration";
25-
import { fetchUserLoginDetails } from "../services/user";
25+
import { fetchUserLoginDetails,getOnBoardingUserRole } from "../services/user";
2626
import MenuComponent from "./MenuComponent";
2727
// import Appname from "./formsflow.svg";
2828
import { ApplicationLogo, LogoutIcon, MenuToggleIcon } from "@formsflow/components";
@@ -251,7 +251,7 @@ const Sidebar = React.memo(({ props, sidenavHeight="100%" }) => {
251251
if (isAuthenticated) {
252252
// Fetch federated login details (saves into localStorage)]
253253
fetchUserLoginDetails();
254-
254+
getOnBoardingUserRole();
255255
checkIntegrationEnabled()
256256
.then((res) => {
257257
setIntegrationEnabled(res.data?.enabled);

‎forms-flow-theme/scss/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,4 @@
7070
@import "./v8-scss/modal";
7171
@import "./v8-scss/dragandrop";
7272
@import "./v8-scss/tabs";
73+
@import "./v8-scss/aiFormBuilder";

‎forms-flow-theme/scss/v8-scss/_aiFormBuilder.scss‎

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
// Import theme variables and mixins
2+
@use "mixins";
3+
4+
$spacer-050: var(--spacer-050);
5+
$spacer-075: var(--spacer-075);
6+
$spacer-025: var(--spacer-025);
7+
$spacer-100: var(--spacer-100);
8+
$spacer-125: var(--spacer-125);
9+
$spacer-200: var(--spacer-200);
10+
$spacer-250: var(--spacer-250);
11+
$font-size-m: var(--font-size-m);
12+
$font-size-l: var(--font-size-l);
13+
$font-size-xl: var(--font-size-xl);
14+
$font-weight-regular: var(--font-weight-regular);
15+
$gray-darkest: var(--gray-darkest);
16+
$white-300: var(--white-300);
17+
$border-radius: var(--border-radius);
18+
$gray-x-light: var(--gray-x-light);
19+
$white-200: var(--white-200);
20+
$white-300: var(--white-300);
21+
22+
.ai-form-builder-modal {
23+
@include large-modal-popover();
24+
&__body {
25+
26+
&.custom-scroll {
27+
/* Override the general modal-body scrollbar hiding rules */
28+
-ms-overflow-style: auto !important; /* IE and Edge - show scrollbar */
29+
scrollbar-width: thin !important; /* Firefox - show scrollbar */
30+
31+
&::-webkit-scrollbar {
32+
display: block !important;
33+
width: 0.5rem;
34+
height: auto;
35+
}
36+
}
37+
}
38+
39+
&__title-wrap {
40+
display: inline-flex;
41+
align-items: center;
42+
gap: $spacer-050; /* 8px */
43+
color: $gray-darkest; /* #4a4a4a */
44+
font-size: $font-size-xl; /* 20px */
45+
font-weight: $font-weight-regular; /* 400 */
46+
}
47+
48+
&__sparkle {
49+
color: #B8ABFF80;
50+
font-size: $font-size-l; /* 18px */
51+
line-height: 1;
52+
}
53+
54+
&__guide-panel {
55+
background: $white-200; /* #fcfcfc */
56+
border-radius: $border-radius; /* 5px */
57+
padding: $spacer-125 $spacer-100 0.875rem; /* 14px */ /* 20px 16px 14px */
58+
min-height: 18.25rem; /* 292px */ // to add some space for the guide panel
59+
}
60+
61+
&__guide-panel-loader {
62+
height: 100%;
63+
min-height: 16.125rem; /* 258px */
64+
display: flex;
65+
align-items: center;
66+
justify-content: center;
67+
flex-direction: column;
68+
gap: 1.1875rem; /* 19px */
69+
}
70+
71+
&__guide-panel-loader-text {
72+
color: $gray-darkest; /* #4A4A4A */
73+
text-align: center;
74+
font-size: $font-size-m; /* 15px */
75+
font-weight: $font-weight-regular; /* 400 */
76+
line-height: 1.5rem; /* 24px */
77+
}
78+
79+
&__guide-panel-response {
80+
height: 16.125rem; /* 258px */
81+
overflow-y: auto;
82+
overflow-x: hidden;
83+
84+
}
85+
86+
&__guide-title {
87+
margin: 0 0 1.125rem; /* 18px */
88+
text-align: center;
89+
font-size: 1rem; /* 16px */
90+
font-weight: $font-weight-regular; /* 400 */
91+
color: $gray-darkest; /* #4a4a4a */
92+
}
93+
94+
&__tips-grid {
95+
display: grid;
96+
grid-template-columns: repeat(3, minmax(0, 1fr));
97+
gap: $spacer-075; /* 12px */
98+
margin-bottom: 0.875rem; /* 14px */
99+
}
100+
101+
&__tip-card {
102+
background: $white-300;
103+
border-radius: $border-radius; /* 5px */
104+
min-height: 8.9375rem; /* 143px */
105+
display: flex;
106+
flex-direction: column;
107+
align-items: center;
108+
justify-content: center;
109+
padding: $spacer-100 0.875rem; /* 14px */ /* 16px 14px */
110+
gap: $spacer-075; /* 12px */
111+
112+
p {
113+
margin: 0;
114+
text-align: center;
115+
font-size: 0.8125rem; /* 13px */
116+
line-height: 1.5rem; /* 24px */
117+
color: rgba(74, 74, 74, 0.9);
118+
}
119+
}
120+
121+
&__decorative-strip {
122+
display: flex;
123+
align-items: center;
124+
justify-content: center;
125+
gap: $spacer-075; /* 12px */
126+
margin-bottom: 0.375rem; /* 6px */
127+
}
128+
129+
&__product-icons {
130+
display: inline-flex;
131+
align-items: center;
132+
gap: $spacer-025; /* 4px */
133+
padding: 0.125rem 0.375rem; /* 2px, 6px */
134+
border-radius: 0.625rem; /* 10px */
135+
background: $white-300; /* #fff */
136+
font-size: 0.875rem; /* 14px */
137+
line-height: 1;
138+
}
139+
140+
141+
&__link-tip {
142+
text-align: center;
143+
font-size: 0.8125rem; /* 13px */
144+
line-height: 1.5rem; /* 24px */
145+
font-weight: 600;
146+
color: rgba(74, 74, 74, 0.9);
147+
}
148+
149+
&__input-panel {
150+
position: relative;
151+
border: 0.0625rem solid rgba(184, 171, 255, 0.5); /* 1px */
152+
border-radius: $border-radius; /* 5px */
153+
background: var(--ff-white);
154+
padding: 0.875rem 0.75rem 1rem; /* 14px, 12px, 16px */
155+
}
156+
157+
&__textarea {
158+
width: 100%;
159+
min-height: 6.375rem; /* 102px */
160+
border: 0;
161+
padding: 0;
162+
font-size: $font-size-m; /* 15px */
163+
line-height: 1.5rem; /* 24px */
164+
color: $gray-darkest; /* #4a4a4a */
165+
resize: none; //resize the textarea to none
166+
background: transparent;
167+
168+
&:focus {
169+
outline: none;
170+
box-shadow: none;
171+
}
172+
}
173+
174+
&__prompt-chips {
175+
display: flex;
176+
flex-wrap: wrap;
177+
gap: var(--spacer-050); /* 8px */
178+
margin-top: 0.75rem; /* 12px */
179+
}
180+
181+
&__prompt-chip {
182+
border: 0.0625rem solid #e2e2e2; /* 1px */
183+
background: $white-300; /* #fff */
184+
color: rgba(74, 74, 74, 0.9);
185+
border-radius: $border-radius; /* 5px */
186+
height: $spacer-200; /* 32px */
187+
padding: 0 0.75rem; /* 12px */
188+
display: inline-flex;
189+
align-items: center;
190+
gap: 0.3125rem; /* 5px */
191+
font-size: 0.875rem; /* 14px */
192+
cursor: pointer;
193+
194+
span {
195+
color: #8b7efc;
196+
font-size: 0.6875rem; /* 11px */
197+
line-height: 1;
198+
}
199+
}
200+
201+
&__actions {
202+
display: flex;
203+
align-items: center;
204+
justify-content: space-between;
205+
margin-top: 0.625rem; /* 10px */
206+
}
207+
&__actions-left {
208+
display: flex;
209+
flex-direction: row;
210+
gap: 0.875rem; /* 14px */
211+
}
212+
213+
&__preview-actions {
214+
display: inline-flex;
215+
align-items: center;
216+
gap: 0.625rem; /* 10px */
217+
}
218+
219+
&__preview-progress {
220+
min-width: 5.25rem; /* 84px */
221+
}
222+
223+
&__upload-btn {
224+
border: 0.0625rem solid #e2e2e2; /* 1px */
225+
background: var(--white-300); /* #fff */
226+
color: rgba(74, 74, 74, 0.9);
227+
border-radius: var(--border-radius); /* 5px */
228+
font-size: 0.8125rem; /* 13px */
229+
padding: 0.5rem; /* 8px */
230+
display: inline-flex;
231+
max-height: $spacer-250; /* 40px */
232+
align-items: center;
233+
gap: 0.375rem; /* 6px */
234+
cursor: pointer;
235+
236+
span {
237+
color: #9f9f9f;
238+
font-size: 0.875rem; /* 14px */
239+
line-height: 1;
240+
}
241+
242+
&:hover {
243+
background: #fafafa;
244+
}
245+
}
246+
247+
&__file-input {
248+
display: none;
249+
}
250+
251+
&__attachments {
252+
display: flex;
253+
flex-wrap: wrap;
254+
gap: $spacer-050; /* 8px */
255+
}
256+
257+
&__attachment-item {
258+
position: relative;
259+
overflow: visible;
260+
display: flex;
261+
padding: 0.5rem 0.5rem 0.5rem 0.5625rem; /* 8px, 8px, 8px, 9px */
262+
gap: 0.375rem; /* 6px */
263+
border-radius: $border-radius; /* 5px */
264+
border: 0.0625rem solid $gray-x-light; /* 1px */ /* #e5e5e5 */
265+
background: $white-200; /* #fcfcfc */
266+
}
267+
268+
&__attachment-item--image {
269+
padding: 0;
270+
background: transparent;
271+
}
272+
273+
&__image-preview {
274+
position: relative;
275+
width: $spacer-250; /* 40px */
276+
height: $spacer-250; /* 40px */
277+
border-radius: 0.290687rem; /* 4.651px */
278+
border: 0.058125rem solid $gray-x-light; /* 0.93px */ /* #E5E5E5 */
279+
background: $white-200; /* #FCFCFC */
280+
}
281+
282+
&__image-preview-img {
283+
width: 100%;
284+
height: 100%;
285+
object-fit: cover;
286+
display: block;
287+
}
288+
289+
&__attachment-name {
290+
display: inline-flex;
291+
align-items: center;
292+
gap: 0.875rem; /* 14px */
293+
max-width: calc(100% - 3.25rem); /* 52px */
294+
}
295+
296+
&__attachment-icon {
297+
display: inline-flex;
298+
align-items: center;
299+
justify-content: center;
300+
color: #9f9f9f;
301+
line-height: 1;
302+
}
303+
304+
&__attachment-filename {
305+
white-space: nowrap;
306+
color: $secondary-dark; /* #525254 */
307+
font-size: 0.8125rem; /* 13px */
308+
font-weight: $font-weight-regular; /* 400 */
309+
line-height: 1.5rem; /* 24px */ /* 184.615% */
310+
}
311+
312+
&__remove-btn {
313+
position: absolute;
314+
top: -0.625rem; /* -10px */
315+
right: -0.625rem; /* -10px */
316+
border: 0;
317+
background: transparent;
318+
color: inherit;
319+
cursor: pointer;
320+
padding: 0;
321+
display: inline-flex;
322+
align-items: center;
323+
justify-content: center;
324+
}
325+
326+
}
327+

0 commit comments

Comments
 (0)