l-min-components 1.0.699 → 1.0.705

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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/AppMainLayout/index.jsx +27 -14
  3. package/src/components/deactivated/index.jsx +82 -0
  4. package/src/components/deactivated/useAccount.js +39 -0
  5. package/src/components/header/account-dropdown.jsx +205 -188
  6. package/src/components/header/getHeaderDetails.js +24 -1
  7. package/src/components/header/index.jsx +24 -60
  8. package/src/components/header/index.styled.js +16 -86
  9. package/src/components/sideBar/sideMenu/index.jsx +18 -5
  10. package/src/components/sideBar/userCard/index.jsx +43 -22
  11. package/src/components/sideNav/index.jsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "l-min-components",
3
- "version": "1.0.699",
3
+ "version": "1.0.705",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "src/assets",
package/src/components/AppMainLayout/index.jsx CHANGED
@@ -26,6 +26,7 @@ import InstructorRightBar from "../fileRightBar/instructorRightBar";
26
26
  import EnterpriseRightBar from "../fileRightBar/enterpriseRightBar";
27
27
  import PersonalRightBar from "../fileRightBar/personalRightBar";
28
28
  import useHeader from "../header/getHeaderDetails";
29
+ import GracePeriod from "../deactivated";
29
30
 
30
31
  const AppMainLayout = () => {
31
32
  const [isOpen, setIsOpen] = useState(true);
@@ -48,11 +49,15 @@ const AppMainLayout = () => {
48
49
  const [accessToken, setAccessToken] = useState("");
49
50
  const [envType, setEnvType] = useState("");
50
51
  const [newNotifications, setNewNotifications] = useState([]);
52
+ const [deactivated, setDeactivated] = useState(true) // testing, until we get account setup
53
+
51
54
  const {
52
55
  setDefaultAccount,
53
56
  handleSetDefaultAccount,
54
57
  notificationMarkReadData,
55
58
  handleGetNotificationMarkRead,
59
+ userPlanData,
60
+ handleGetUserPlan,
56
61
  } = useHeader();
57
62
 
58
63
  useEffect(() => {
@@ -128,6 +133,13 @@ const AppMainLayout = () => {
128
133
  }, []);
129
134
  console.log("envType", envType);
130
135
 
136
+ useEffect(() => {
137
+ handleGetUserPlan()
138
+ }, [])
139
+
140
+ const currentPlan = userPlanData?.data?.current_plan;
141
+ const planState = userPlanData?.data?.state
142
+
131
143
  return (
132
144
  <OutletContext.Provider
133
145
  value={{
@@ -157,7 +169,7 @@ const AppMainLayout = () => {
157
169
  newNotifications,
158
170
  setNewNotifications,
159
171
  notificationMarkReadData,
160
- handleGetNotificationMarkRead
172
+ handleGetNotificationMarkRead,
161
173
  }}
162
174
  >
163
175
  <Layout
@@ -175,18 +187,7 @@ const AppMainLayout = () => {
175
187
  user={user}
176
188
  routes={sideMenuOptions}
177
189
  affiliatesActive={affiliatesActive}
178
- userType={
179
- window.location.pathname.includes("enterprise")
180
- ? "enterprise"
181
- : window.location.pathname.includes("personal")
182
- ? "personal"
183
- : window.location.pathname.includes("instructor")
184
- ? "instructor"
185
- : window.location.pathname.includes("developer") ||
186
- window.location.hostname.includes("developer")
187
- ? "developer"
188
- : "developer"
189
- }
190
+ userType={generalData?.selectedAccount?.type?.toLowerCase()}
190
191
  isOpen={isOpen}
191
192
  setIsOpen={setIsOpen}
192
193
  setRightComponent={setRightComponent}
@@ -194,6 +195,18 @@ const AppMainLayout = () => {
194
195
  )}
195
196
  </>
196
197
  )}
198
+ {
199
+ // window.location.pathname.includes("enterprise")
200
+ // ? "enterprise"
201
+ // : window.location.pathname.includes("personal")
202
+ // ? "personal"
203
+ // : window.location.pathname.includes("instructor")
204
+ // ? "instructor"
205
+ // : window.location.pathname.includes("developer") ||
206
+ // window.location.hostname.includes("developer")
207
+ // ? "developer"
208
+ // : "developer"
209
+ }
197
210
  </LeftLayout>
198
211
  <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
199
212
  {window.location.pathname.includes("instructor") &&
@@ -205,7 +218,7 @@ const AppMainLayout = () => {
205
218
  />
206
219
  )}
207
220
 
208
- <Outlet />
221
+ {window.location.pathname.includes("enterprise") && deactivated ? <GracePeriod /> : <Outlet />}
209
222
  </CenterLayout>
210
223
 
211
224
  {rightLayout && !coming && (
package/src/components/deactivated/index.jsx ADDED
@@ -0,0 +1,82 @@
1
+ import React from 'react';
2
+ import { useLocation } from "react-router-dom";
3
+ import styled from 'styled-components';
4
+
5
+ const routes = [
6
+ { path: "dashboard", title: "Dashboard" },
7
+ { path: "reports", title: "Reports" },
8
+ { path: "courses", title: "Courses" },
9
+ { path: "manage-teams", title: "Manage Teams" },
10
+ { path: "msg/messages", title: "Messages" },
11
+ { path: "announcements", title: "Announcements" },
12
+ { path: "file-manager", title: "File Manager" },
13
+ ];
14
+
15
+ const GracePeriod = () => {
16
+ const location = useLocation();
17
+
18
+ const getTitleFromPath = (path) => {
19
+ const route = routes.find(route => path.includes(route.path));
20
+ return route?.title || "Dashboard";
21
+ };
22
+
23
+ const pageTitle = getTitleFromPath(location.pathname);
24
+
25
+ return (
26
+ <GracePeriodWrapper>
27
+ <h1>{pageTitle}</h1>
28
+ <div className="gracePeriod_account">
29
+ <div className="content">
30
+ <p>Sorry, you can’t access your account</p>
31
+ </div>
32
+ </div>
33
+ </GracePeriodWrapper>
34
+ );
35
+ };
36
+
37
+ const GracePeriodWrapper = styled.div`
38
+ h1 {
39
+ margin-top: 0px;
40
+ margin-bottom: 20px;
41
+ color: #313333;
42
+ font-size: 24px;
43
+ }
44
+
45
+ .gracePeriod_account {
46
+ border-radius: 30.67px;
47
+ background: var(--white, #fff);
48
+ display: flex;
49
+ justify-content: center;
50
+ align-items: center;
51
+ width: 100%;
52
+ height: 670px;
53
+ flex-shrink: 0;
54
+
55
+ .content {
56
+ border-radius: 15px;
57
+ background: var(--Neutral-10, #f5f7f7);
58
+ display: flex;
59
+ justify-content: center;
60
+ align-items: center;
61
+ display: inline-flex;
62
+ padding: 30px 18px;
63
+ flex-direction: column;
64
+ align-items: center;
65
+ gap: 30px;
66
+
67
+ p {
68
+ color: var(--Neutral-90, #313333);
69
+ text-align: center;
70
+ font-feature-settings: "salt" on, "liga" off;
71
+ font-family: Nunito;
72
+ font-size: 25px;
73
+ font-style: normal;
74
+ font-weight: 500;
75
+ line-height: 120%; /* 30px */
76
+ width: 306px;
77
+ }
78
+ }
79
+ }
80
+ `;
81
+
82
+ export default GracePeriod;
package/src/components/deactivated/useAccount.js ADDED
@@ -0,0 +1,39 @@
1
+ import useAxios from "axios-hooks";
2
+
3
+ const useAccount = () => {
4
+
5
+ // current plan
6
+ const [{ ...userPlanData }, getUserPlan] = useAxios(
7
+ {
8
+ url: `/payment/v1/current_plan/`,
9
+ method: "GET",
10
+ },
11
+
12
+ {
13
+ manual: true,
14
+ }
15
+ );
16
+
17
+ const handleGetUserPlan = async () => {
18
+ try {
19
+ await getUserPlan();
20
+ } catch (err) {
21
+ console.log(err);
22
+ }
23
+ };
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+ return {
32
+
33
+ userPlanData,
34
+ handleGetUserPlan,
35
+
36
+
37
+ };
38
+ };
39
+ export default useAccount;
package/src/components/header/account-dropdown.jsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  AccountDropdownFooter,
9
9
  } from "./index.styled";
10
10
  import { useLocation, useNavigate } from "react-router-dom";
11
- import useHeader from "./getHeaderDetails";
11
+ // import useHeader from "./getHeaderDetails";
12
12
  import { OutletContext } from "..";
13
13
  /**
14
14
  * @param {{
@@ -20,29 +20,14 @@ import { OutletContext } from "..";
20
20
  *
21
21
  */
22
22
  const AccountDropdown = (props) => {
23
- // const [selectedAccount, setSelectedAccount] = useState();
24
- const navigate = useNavigate();
25
23
  const { pathname } = useLocation();
26
24
  useEffect(() => {}, [pathname]);
27
- const {
28
- setDefaultAccount,
29
- handleSetDefaultAccount,
30
- } = useHeader();
31
25
 
32
26
  const { envType } = useContext(OutletContext);
27
+ // const { setGeneralData, generalData } = useContext(OutletContext);
33
28
 
34
29
  useEffect(() => {
35
- if (props?.selectedAccount?.type === "DEVELOPER") {
36
- const date = new Date();
37
- date.setDate(date.getDate() + 28);
38
- document.cookie =
39
- "activeDeveloperAccount=" +
40
- props?.selectedAccount?.id +
41
- `; domain=${
42
- window.location.href.includes("localhost")
43
- ? ".localhost"
44
- : ".learngual.com"
45
- }; path=/; expires=${date.toUTCString()};`;
30
+ if (props?.selectedAccount) {
46
31
  props?.setGeneralData((generalData) => ({
47
32
  ...generalData,
48
33
  accounts: props?.userAccountsDetail?.data,
@@ -51,11 +36,25 @@ const AccountDropdown = (props) => {
51
36
  }));
52
37
  }
53
38
  }, [props?.selectedAccount]);
39
+
40
+ const handleRedirectFunc = ({ type, id }) => {
41
+ if (window.location.port) {
42
+ window.location.href = `${window.location.protocol}//${
43
+ window.location.hostname
44
+ }:${window.location.port}/${type?.toLowerCase()}`;
45
+ } else {
46
+ window.location.href = `${window.location.protocol}//${
47
+ window.location.hostname
48
+ }/${type?.toLowerCase()}`;
49
+ }
50
+ // console.log(id, "bam");
51
+ };
52
+
54
53
  console.log(props?.selectedAccount, "selected");
55
54
 
56
55
  return (
57
56
  <>
58
- <AccountDropdownLayout>
57
+ <AccountDropdownLayout ref={props?.ref}>
59
58
  <AccountDropdownHeader>
60
59
  <div className="img_div">
61
60
  <img
@@ -109,189 +108,207 @@ const AccountDropdown = (props) => {
109
108
  </div>
110
109
  )} */}
111
110
 
112
-
113
111
  {/* {envType === "live" && */}
114
112
  <>
115
- {props?.developerAccountData.length > 0 && (
116
- <div>
117
- <h3 style={{ marginBottom: 10 }}>Developer accounts</h3>
118
- {props?.developerAccountData?.map((developerItem, idx) => (
119
- <div
120
- className={`account-info ${
121
- developerItem === props?.selectedAccount ? "activated" : ""
122
- }`}
123
- onClick={() => {
124
- props?.setSelectedAccount(developerItem);
125
- handleSetDefaultAccount(developerItem?.id);
126
- if (
127
- window.location.port &&
128
- window.location.host.includes("developer")
129
- ) {
130
- window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/developer`;
131
- } else if (
132
- !window.location.port &&
133
- window.location.host.includes("developer")
134
- ) {
135
- window.location.href = `${window.location.protocol}//${window.location.hostname}/developer`;
136
- }
137
- }}
138
- key={idx}
139
- >
140
- <div className="avatar-container">
141
- <img
142
- src={developerItem?.profile_photo?.url || props.avatar}
143
- alt="account photo"
144
- />
145
- </div>
146
- <div className="account-details">
147
- <h1 style={{ textTransform: "capitalize" }}>
148
- {" "}
149
- {developerItem?.metadata?.organization_name ||
150
- props.accountName}
151
- </h1>
152
- {developerItem?.notification_count > 0 && (
153
- <span>{developerItem?.notification_count}</span>
154
- )}
155
- </div>
156
- </div>
157
- ))}
158
- </div>
159
- )}
113
+ {props?.developerAccountData.length > 0 && (
114
+ <div>
115
+ <h3 style={{ marginBottom: 10 }}>Developer accounts</h3>
116
+ {props?.developerAccountData?.map((developerItem, idx) => {
117
+ return (
118
+ <div
119
+ className={`account-info ${
120
+ developerItem?.id === props?.selectedAccount?.id
121
+ ? "activated"
122
+ : ""
123
+ }`}
124
+ onClick={() => {
125
+ props?.setSelectedAccount(developerItem);
126
+
127
+ setTimeout(() => {
128
+ handleRedirectFunc(developerItem);
129
+ }, 1000);
130
+ }}
131
+ key={idx}
132
+ >
133
+ <div className="avatar-container">
134
+ <img
135
+ src={
136
+ developerItem?.profile_photo?.url || props.avatar
137
+ }
138
+ alt="account photo"
139
+ />
140
+ </div>
141
+ <div className="account-details">
142
+ <h1 style={{ textTransform: "capitalize" }}>
143
+ {" "}
144
+ {developerItem?.metadata?.organization_name ||
145
+ props.accountName}
146
+ </h1>
147
+ {developerItem?.notification_count > 0 && (
148
+ <span>{developerItem?.notification_count}</span>
149
+ )}
150
+ </div>
151
+ </div>
152
+ );
153
+ })}
154
+ </div>
155
+ )}
160
156
  </>
161
157
  {/* } */}
162
158
 
163
- {envType === "staging" || envType === "localhost" ?
164
- <>
165
- {props?.instructorAccountData?.length > 0 && (
166
- <div>
167
- <h3>Instructor account</h3>
168
- {props?.instructorAccountData?.map((instructorItem, idx) => (
169
- <div
170
- className={`account-info ${
171
- instructorItem === props?.selectedAccount ? "activated" : ""
172
- }`}
173
- onClick={() => {
174
- props?.setSelectedAccount(instructorItem);
175
- handleSetDefaultAccount(instructorItem?.id);
176
- if (window.location.port) {
177
- window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/instructor/dashboard`;
178
- } else {
179
- window.location.href = `${window.location.protocol}//${window.location.hostname}/instructor/dashboard`;
180
- }
181
- }}
182
- key={idx}
183
- >
184
- <div className="avatar-container">
185
- <img
186
- src={instructorItem?.profile_photo?.url || props.avatar}
187
- alt="account photo"
188
- />
189
- </div>
190
- <div className="account-details">
191
- <h1>
192
- {" "}
193
- {instructorItem?.display_name || props.accountName}
194
- </h1>
195
- {instructorItem?.notification_count > 0 && (
196
- <span>{instructorItem?.notification_count} </span>
197
- )}
198
- </div>
199
- </div>
200
- ))}
201
- </div>
202
- )}
203
- {envType === "staging" || envType === "localhost" && props?.enterpriseAccountData?.length > 0 && (
204
- <div>
205
- <h3>Enterprise account</h3>
206
- {props?.enterpriseAccountData?.map((enterpriseItem, idx) => (
207
- <div
208
- className={`account-info ${
209
- enterpriseItem === props?.selectedAccount ? "activated" : ""
210
- }`}
211
- onClick={() => {
212
- props?.setSelectedAccount(enterpriseItem);
213
- handleSetDefaultAccount(enterpriseItem?.id);
214
- if (window.location.port) {
215
- window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/enterprise/dashboard`;
216
- } else {
217
- window.location.href = `${window.location.protocol}//${window.location.hostname}/enterprise/dashboard`;
218
- }
219
- }}
220
- key={idx}
221
- >
222
- <div className="avatar-container">
223
- <img
224
- src={enterpriseItem?.profile_photo?.url || props.avatar}
225
- alt="account photo"
226
- />
227
- </div>
228
- <div className="account-details">
229
- <h1>
230
- {" "}
231
- {enterpriseItem?.display_name || props.accountName}
232
- </h1>
233
- {enterpriseItem?.notification_count > 0 && (
234
- <span>{enterpriseItem?.notification_count} </span>
235
- )}
236
- </div>
159
+ {envType === "staging" || envType === "localhost" ? (
160
+ <>
161
+ {props?.instructorAccountData?.length > 0 && (
162
+ <div>
163
+ <h3>Instructor account</h3>
164
+ {props?.instructorAccountData?.map((instructorItem, idx) => {
165
+ console.log(
166
+ instructorItem?.id,
167
+ props?.selectedAccount?.id,
168
+ "run"
169
+ );
170
+ return (
171
+ <div
172
+ className={`account-info ${
173
+ instructorItem?.id === props?.selectedAccount?.id
174
+ ? "activated"
175
+ : ""
176
+ }`}
177
+ onClick={() => {
178
+ props?.setSelectedAccount(instructorItem);
179
+ setTimeout(() => {
180
+ handleRedirectFunc(instructorItem);
181
+ }, 1000);
182
+ }}
183
+ key={idx}
184
+ >
185
+ <div className="avatar-container">
186
+ <img
187
+ src={
188
+ instructorItem?.profile_photo?.url || props.avatar
189
+ }
190
+ alt="account photo"
191
+ />
192
+ </div>
193
+ <div className="account-details">
194
+ <h1>
195
+ {" "}
196
+ {instructorItem?.display_name || props.accountName}
197
+ </h1>
198
+ {instructorItem?.notification_count > 0 && (
199
+ <span>{instructorItem?.notification_count} </span>
200
+ )}
201
+ </div>
202
+ </div>
203
+ );
204
+ })}
237
205
  </div>
238
- ))}
239
- </div>
240
- )}
241
-
242
- {envType === "staging" || envType === "localhost" && props?.personalAccountData?.length > 0 && (
243
- <div>
244
- <h3>Personal account</h3>
245
- {props?.personalAccountData?.map((personalItem, idx) => (
246
- <div
247
- className={`account-info ${
248
- personalItem === props?.selectedAccount ? "activated" : ""
249
- }`}
250
- onClick={() => {
251
- props?.setSelectedAccount(personalItem);
252
- handleSetDefaultAccount(personalItem?.id);
253
- if (window.location.port) {
254
- window.location.href = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/personal/dashboard`;
255
- } else {
256
- window.location.href = `${window.location.protocol}//${window.location.hostname}/personal/dashboard`;
257
- }
258
- }}
259
- key={idx}
260
- >
261
- <div className="avatar-container">
262
- <img
263
- src={personalItem?.profile_photo?.url || props.avatar}
264
- alt="account photo"
265
- />
266
- </div>
267
- <div className="account-details">
268
- <h1>
269
- {" "}
270
- {personalItem?.display_name || props.accountName}
271
- </h1>
272
- {personalItem?.notification_count > 0 && (
273
- <span>{personalItem?.notification_count} </span>
274
- )}
275
- </div>
276
- </div>
277
- ))}
278
- </div>
206
+ )}
207
+ {envType === "staging" ||
208
+ (envType === "localhost" &&
209
+ props?.enterpriseAccountData?.length > 0 && (
210
+ <div>
211
+ <h3>Enterprise account</h3>
212
+ {props?.enterpriseAccountData?.map(
213
+ (enterpriseItem, idx) => (
214
+ <div
215
+ className={`account-info ${
216
+ enterpriseItem?.id === props?.selectedAccount?.id
217
+ ? "activated"
218
+ : ""
219
+ }`}
220
+ onClick={() => {
221
+ props?.setSelectedAccount(enterpriseItem);
222
+ setTimeout(() => {
223
+ handleRedirectFunc(enterpriseItem);
224
+ }, 1000);
225
+ }}
226
+ key={idx}
227
+ >
228
+ <div className="avatar-container">
229
+ <img
230
+ src={
231
+ enterpriseItem?.profile_photo?.url ||
232
+ props.avatar
233
+ }
234
+ alt="account photo"
235
+ />
236
+ </div>
237
+ <div className="account-details">
238
+ <h1>
239
+ {" "}
240
+ {enterpriseItem?.display_name ||
241
+ props.accountName}
242
+ </h1>
243
+ {enterpriseItem?.notification_count > 0 && (
244
+ <span>
245
+ {enterpriseItem?.notification_count}{" "}
246
+ </span>
247
+ )}
248
+ </div>
249
+ </div>
250
+ )
251
+ )}
252
+ </div>
253
+ ))}
254
+
255
+ {envType === "staging" ||
256
+ (envType === "localhost" &&
257
+ props?.personalAccountData?.length > 0 && (
258
+ <div>
259
+ <h3>Personal account</h3>
260
+ {props?.personalAccountData?.map((personalItem, idx) => (
261
+ <div
262
+ className={`account-info ${
263
+ personalItem?.id === props?.selectedAccount?.id
264
+ ? "activated"
265
+ : ""
266
+ }`}
267
+ onClick={() => {
268
+ props?.setSelectedAccount(personalItem);
269
+ setTimeout(() => {
270
+ handleRedirectFunc(personalItem);
271
+ }, 1000);
272
+ }}
273
+ key={idx}
274
+ >
275
+ <div className="avatar-container">
276
+ <img
277
+ src={
278
+ personalItem?.profile_photo?.url || props.avatar
279
+ }
280
+ alt="account photo"
281
+ />
282
+ </div>
283
+ <div className="account-details">
284
+ <h1>
285
+ {" "}
286
+ {personalItem?.display_name || props.accountName}
287
+ </h1>
288
+ {personalItem?.notification_count > 0 && (
289
+ <span>{personalItem?.notification_count} </span>
290
+ )}
291
+ </div>
292
+ </div>
293
+ ))}
294
+ </div>
295
+ ))}
296
+ </>
297
+ ) : (
298
+ <></>
279
299
  )}
280
- </> :
281
- <></>
282
- }
283
300
  {/* // )} */}
284
301
  </AccountDropdownBody>
285
302
 
286
303
  <AccountDropdownFooter>
287
304
  <button
288
305
  onClick={() => {
289
- if(window.location.hostname.includes("staging")){
306
+ if (window.location.hostname.includes("staging")) {
290
307
  window.location.href =
291
- "https://559staging.learngual.com/auth/account-type";
292
- }
293
- else if(!window.location.hostname.includes("localhost")){
294
- window.location.href= "https://learngual.com/auth/account-type";
308
+ "https://559staging.learngual.com/auth/account-type";
309
+ } else if (!window.location.hostname.includes("localhost")) {
310
+ window.location.href =
311
+ "https://learngual.com/auth/account-type";
295
312
  }
296
313
  }}
297
314
  style={{ cursor: "pointer" }}
package/src/components/header/getHeaderDetails.js CHANGED
@@ -154,6 +154,26 @@ const handleGetNotificationMarkRead = async () => {
154
154
  }
155
155
  };
156
156
 
157
+ // current plan
158
+ const [{ ...userPlanData }, getUserPlan] = useAxios(
159
+ {
160
+ url: `/payment/v1/current_plan/`,
161
+ method: "GET",
162
+ },
163
+
164
+ {
165
+ manual: true,
166
+ }
167
+ );
168
+
169
+ const handleGetUserPlan = async () => {
170
+ try {
171
+ await getUserPlan();
172
+ } catch (err) {
173
+ console.log(err);
174
+ }
175
+ };
176
+
157
177
  return {
158
178
  handleGetUserDetails,
159
179
  userDetails,
@@ -170,7 +190,10 @@ const handleGetNotificationMarkRead = async () => {
170
190
  notificationMarkReadData,
171
191
  handleGetNotificationMarkRead,
172
192
  notificationData,
173
- handleGetNotification
193
+ handleGetNotification,
194
+
195
+ userPlanData,
196
+ handleGetUserPlan,
174
197
  };
175
198
  };
176
199
  export default useHeader;
package/src/components/header/index.jsx CHANGED
@@ -58,11 +58,13 @@ const HeaderComponent = (props) => {
58
58
  generalNotificationCountData,
59
59
  handleGeneralNotificationCount,
60
60
  notificationData,
61
- handleGetNotification
61
+ handleGetNotification,
62
62
  } = useHeader();
63
63
  const { pathname } = useLocation();
64
- const { setGeneralData, generalData, notificationMarkReadData } = useContext(OutletContext);
64
+ const { setGeneralData, generalData, notificationMarkReadData } =
65
+ useContext(OutletContext);
65
66
  const [selectedAccount, setSelectedAccount] = useState();
67
+ const { setDefaultAccount, handleSetDefaultAccount } = useHeader();
66
68
 
67
69
  useEffect(() => {
68
70
  setIsOpen(false);
@@ -118,10 +120,7 @@ const HeaderComponent = (props) => {
118
120
  let enterpriseArray = [];
119
121
 
120
122
  allUserAccountsDetail?.map((accountItem, idx) => {
121
- if (
122
- accountItem?.type === "PERSONAL" &&
123
- !personalAccountData?.includes(accountItem)
124
- ) {
123
+ if (accountItem?.type === "PERSONAL") {
125
124
  personalArray.push(accountItem);
126
125
  setPersonalAccountData(personalArray);
127
126
  }
@@ -129,64 +128,22 @@ const HeaderComponent = (props) => {
129
128
  developerArray.push(accountItem);
130
129
  setDeveloperAccountData(developerArray);
131
130
  }
132
- if (
133
- accountItem?.type === "INSTRUCTOR" &&
134
- !instructorAccountData?.includes(accountItem)
135
- ) {
131
+ if (accountItem?.type === "INSTRUCTOR") {
136
132
  instructorArray.push(accountItem);
137
133
  setInstructorAccountData(instructorArray);
138
134
  }
139
- if (
140
- accountItem?.type === "ENTERPRISE" &&
141
- !enterpriseAccountData?.includes(accountItem)
142
- ) {
135
+ if (accountItem?.type === "ENTERPRISE") {
143
136
  enterpriseArray.push(accountItem);
144
137
  setEnterpriseAccountData(enterpriseArray);
145
138
  }
146
139
  });
147
-
148
- if (window.location.pathname.includes("personal")) {
149
- setSelectedAccount(personalArray?.find(
150
- (item) => (item?.id === defaultAcctId || item?.id === account_id) ?? item
151
- ));
152
- }
153
- if (
154
- window.location.host?.includes("developer") ||
155
- window.location.host?.includes("coming") ||
156
- window.location.host?.includes("localhost") ||
157
- window.location.pathname.includes("developer")
158
- ) {
159
- setSelectedAccount(
160
- developerArray?.find(
161
- (item) => item?.id === activeDeveloperAccount ?? item
162
- )
163
- );
164
- }
165
- if (window.location.pathname.includes("instructor")) {
166
- setSelectedAccount(instructorArray?.find(
167
- (item) => (item?.id === defaultAcctId || item?.id === account_id) ?? item
168
- ));
169
- }
170
- if (window.location.pathname.includes("enterprise")) {
171
- setSelectedAccount(enterpriseArray?.find(
172
- (item) => (item?.id === defaultAcctId || item?.id === account_id) ?? item
173
- ));
174
- }
175
- // if all fails, set selected acct to developer
176
- else{
177
- setSelectedAccount(
178
- developerArray?.find(
179
- (item) => item?.id === activeDeveloperAccount ?? item
180
- )
181
- );
182
- }
183
140
  }
184
141
  }, [userAccountsDetail?.data, generalNotificationCountData?.response]);
185
142
 
186
143
  // update general data when selected acct changes
187
144
 
188
145
  useEffect(() => {
189
- if (selectedAccount) {
146
+ if (selectedAccount?.id) {
190
147
  setGeneralData((generalData) => ({
191
148
  ...generalData,
192
149
  selectedAccount: selectedAccount,
@@ -196,6 +153,7 @@ const HeaderComponent = (props) => {
196
153
 
197
154
  const containerRef = useRef(null);
198
155
  const secondContainerRef = useRef(null);
156
+ const acctDropdownContainerRef = useRef(null);
199
157
 
200
158
  // logic for closing language dropdown when clicking outside
201
159
 
@@ -222,7 +180,9 @@ const HeaderComponent = (props) => {
222
180
  const handleClickOutside = (event) => {
223
181
  if (
224
182
  secondContainerRef.current &&
225
- !secondContainerRef.current.contains(event.target)
183
+ acctDropdownContainerRef.current &&
184
+ !secondContainerRef.current.contains(event.target) &&
185
+ !acctDropdownContainerRef.current.contains(event.target)
226
186
  ) {
227
187
  setIsOpen();
228
188
  }
@@ -257,8 +217,10 @@ const HeaderComponent = (props) => {
257
217
  ? ".localhost"
258
218
  : ".learngual.com"
259
219
  }; path=/; expires=${date.toUTCString()};`;
220
+
221
+ setSelectedAccount(getDefaultAccount?.data);
260
222
  }
261
- }, [getDefaultAccount?.response]);
223
+ }, [getDefaultAccount?.data]);
262
224
 
263
225
  // get current default account and store in cookie from path
264
226
  useEffect(() => {
@@ -285,8 +247,6 @@ const HeaderComponent = (props) => {
285
247
  const [socketUrl, setSocketUrl] = useState(
286
248
  "dev-117782726-api.learngual.com/notify/v1/ws/connect/"
287
249
  );
288
- const socket = useRef();
289
- const generalSocket = useRef();
290
250
  const token = getCookie("access");
291
251
  const defaultAcctId = getCookie("defaultAccountID");
292
252
  const account_id = generalData?.defaultAccount?.id || defaultAcctId;
@@ -332,7 +292,6 @@ const HeaderComponent = (props) => {
332
292
 
333
293
  // websocket for room
334
294
  useEffect(() => {
335
-
336
295
  const websocket2 = new WebSocket(
337
296
  `wss://${socketUrl}?account=${account_id}&authorization=${token}&room_id=${account_id}`
338
297
  );
@@ -378,7 +337,9 @@ const HeaderComponent = (props) => {
378
337
  handleGetUnreadNotification();
379
338
  handleGeneralNotificationCount();
380
339
  }, [notificationMarkReadData?.response]);
381
-
340
+ console.log("====================================");
341
+ console.log(selectedAccount, "sel");
342
+ console.log("====================================");
382
343
  return (
383
344
  <Navbar>
384
345
  <img src={logo} alt="Learngual logo" />
@@ -485,7 +446,6 @@ const HeaderComponent = (props) => {
485
446
  />
486
447
  )}
487
448
  </div>
488
-
489
449
  {selectedAccount && (
490
450
  <UserProfile
491
451
  onClick={(e) => {
@@ -503,7 +463,8 @@ const HeaderComponent = (props) => {
503
463
  </div>
504
464
  <div className="user-info-container">
505
465
  <h5 style={{ textTransform: "capitalize" }}>
506
- {selectedAccount?.metadata?.organization_name}
466
+ {selectedAccount?.metadata?.organization_name ||
467
+ selectedAccount?.display_name}
507
468
  </h5>
508
469
  <h6 style={{ textTransform: "capitalize" }}>
509
470
  {selectedAccount?.type?.toLowerCase()}
@@ -517,7 +478,7 @@ const HeaderComponent = (props) => {
517
478
  {isOpen && (
518
479
  <AccountDropdown
519
480
  avatar={avatar}
520
- activeAccountName={"Default name"}
481
+ activeAccountName={selectedAccount?.display_name}
521
482
  activeAccountType={"Personal Account"}
522
483
  accountName={"Default name"}
523
484
  accountType={"Default Account"}
@@ -538,6 +499,9 @@ const HeaderComponent = (props) => {
538
499
  setGeneralData={setGeneralData}
539
500
  userAccountsDetail={userAccountsDetail}
540
501
  userDetails={userDetails}
502
+ setDefaultAccount={setDefaultAccount}
503
+ handleSetDefaultAccount={handleSetDefaultAccount}
504
+ ref={acctDropdownContainerRef}
541
505
  />
542
506
  )}
543
507
  </Navbar>
package/src/components/header/index.styled.js CHANGED
@@ -109,13 +109,13 @@ export const Nav = styled.ul`
109
109
  font-weight: 600;
110
110
  &::after {
111
111
  content: "";
112
- position: absolute;
113
- left: 0;
114
- bottom: -9px;
115
- width: 40px;
116
- height: 4px;
117
- background-color: rgba(0, 194, 194, 1);
118
- transition: width 0.3s ease-in-out;
112
+ position: absolute;
113
+ left: 0;
114
+ bottom: -9px;
115
+ width: 40px;
116
+ height: 4px;
117
+ background-color: rgba(0, 194, 194, 1);
118
+ transition: width 0.3s ease-in-out;
119
119
  }
120
120
  }
121
121
 
@@ -124,87 +124,12 @@ export const Nav = styled.ul`
124
124
  }
125
125
 
126
126
  & svg path {
127
- stroke: ${({ isActive }) => (isActive ? 'rgba(0, 194, 194, 1)' : 'currentcolor')};
127
+ stroke: ${({ isActive }) =>
128
+ isActive ? "rgba(0, 194, 194, 1)" : "currentcolor"};
128
129
  }
129
130
  }
130
131
  `;
131
132
 
132
- // export const Nav = styled.ul`
133
- // display: flex;
134
- // list-style: none;
135
- // align-items: center;
136
- // margin: 0 10px;
137
- // padding: 0 5px;
138
- // width: 57%;
139
- // @media screen and (max-width: 1530px) {
140
- // width: 40%;
141
- // }
142
- // & li {
143
- // display: flex;
144
- // align-items: center;
145
- // margin: 0 10px;
146
- // }
147
-
148
- // & li:nth-of-type(1) {
149
- // margin-right: 75px;
150
- // margin-left: 35px;
151
- // }
152
-
153
- // & a.active {
154
- // color: rgba(0, 194, 194, 1) !important;
155
- // font-size: 21px;
156
- // font-weight: 600;
157
- // & svg path {
158
- // stroke: rgba(0, 194, 194, 1);
159
- // }
160
- // }
161
- // /* & a.active:after {
162
- // content: "";
163
- // position: absolute;
164
- // left: 0;
165
- // bottom: -9px;
166
- // width: 40px;
167
- // height: 4px;
168
- // background-color: rgba(0, 194, 194, 1);
169
- // transition: width 0.3s ease-in-out;
170
- // } */
171
-
172
- // & a {
173
- // text-decoration: none;
174
- // display: flex;
175
- // align-items: center;
176
- // color: #4a4d4d;
177
- // font-size: 15px;
178
- // font-style: normal;
179
- // font-weight: 600;
180
- // line-height: normal;
181
- // position: relative;
182
-
183
- // &:hover:after {
184
- // content: "";
185
- // position: absolute;
186
- // left: 0;
187
- // bottom: -9px;
188
- // width: 40px;
189
- // height: 4px;
190
- // background-color: rgba(0, 194, 194, 1);
191
- // transition: width 0.3s ease-in-out;
192
- // }
193
-
194
- // & svg {
195
- // margin-right: 12px;
196
- // }
197
-
198
- // &:hover {
199
- // color: rgba(0, 194, 194, 1);
200
- // // border-bottom: 2px solid rgba(0, 194, 194, 1);
201
- // & svg path {
202
- // stroke: rgba(0, 194, 194, 1);
203
- // }
204
- // }
205
- // }
206
- // `;
207
-
208
133
  export const SearchInputGroup = styled.div`
209
134
  background-color: transparent;
210
135
  border-radius: 60px;
@@ -296,6 +221,10 @@ export const UserProfile = styled.div`
296
221
  color: rgba(49, 51, 51, 1);
297
222
  font-size: 16px;
298
223
  font-weight: 700;
224
+ text-overflow: ellipsis;
225
+ overflow: hidden;
226
+ white-space: nowrap;
227
+ max-width: 150px;
299
228
  @media screen and (max-width: 1530px) {
300
229
  font-size: 12px;
301
230
  }
@@ -432,7 +361,8 @@ export const AccountDropdownHeader = styled.div`
432
361
  export const AccountDropdownBody = styled.div`
433
362
  background-color: #ffffff;
434
363
  width: 100%;
435
-
364
+ overflow-y: scroll;
365
+ height: 100%;
436
366
  & h3 {
437
367
  font-family: "Nunito";
438
368
  font-style: normal;
@@ -549,7 +479,7 @@ export const Navbar2 = styled.nav`
549
479
  z-index: 99;
550
480
  justify-content: space-between;
551
481
 
552
- img{
482
+ img {
553
483
  cursor: pointer;
554
484
  }
555
485
  `;
package/src/components/sideBar/sideMenu/index.jsx CHANGED
@@ -40,11 +40,24 @@ const SideMenu = ({
40
40
  }, [isOpen]);
41
41
 
42
42
  // Normal route filter
43
- const filteredRoutes = routes.find(
44
- (route) => route.userType === userType
45
- )?.routes;
46
- const [routeFilter, setRouteFilter] = useState(filteredRoutes);
43
+ const [filteredRoutes, setFilteredRoutes] = useState();
47
44
 
45
+ useEffect(() => {
46
+ if (userType) {
47
+ setFilteredRoutes(
48
+ routes.find((route) => route.userType === userType)?.routes
49
+ );
50
+ }
51
+ }, [userType]);
52
+
53
+ console.log("====================================");
54
+ console.log(filteredRoutes, "rar");
55
+ console.log("====================================");
56
+
57
+ const [routeFilter, setRouteFilter] = useState();
58
+ useEffect(() => {
59
+ setRouteFilter(filteredRoutes);
60
+ }, []);
48
61
  // filter route to remove contract
49
62
  const affiliatesFilteredRoute = filteredRoutes?.filter(
50
63
  (route) => !route.affiliates
@@ -57,7 +70,7 @@ const SideMenu = ({
57
70
  } else {
58
71
  setRouteFilter(filteredRoutes);
59
72
  }
60
- }, [affiliatesActive]);
73
+ }, [affiliatesActive, filteredRoutes]);
61
74
 
62
75
  // Right bars
63
76
  const EnterpriseRight = <EnterpriseRightBar />;
package/src/components/sideBar/userCard/index.jsx CHANGED
@@ -13,32 +13,49 @@ import avatar from "../../../assets/images/avatar.png";
13
13
  import { OutletContext } from "../../AppMainLayout";
14
14
 
15
15
  const UserCard = ({ user, isOpen }) => {
16
- const { handleGetUserDetails, userDetails } = useHeader();
16
+ const { handleGetUserDetails, userDetails, handleSetDefaultAccount } =
17
+ useHeader();
17
18
  const [organizationName, setOrganizationName] = useState();
18
19
  const { generalData } = useContext(OutletContext);
19
20
  useEffect(() => {
20
21
  handleGetUserDetails();
21
- if (generalData?.accounts) {
22
- const cookies = document.cookie;
23
- const cookieArray = cookies.split(";");
24
- let activeDeveloperAccount;
25
- for (let i = 0; i < cookieArray.length; i++) {
26
- const cookie = cookieArray[i].trim();
27
- if (cookie.startsWith("activeDeveloperAccount=")) {
28
- activeDeveloperAccount = cookie.substring(
29
- "activeDeveloperAccount=".length,
30
- cookie.length
31
- );
32
- break;
33
- }
34
- }
22
+ if (generalData?.selectedAccount) {
23
+ const date = new Date();
24
+ date.setDate(date.getDate() + 28);
25
+ document.cookie =
26
+ "activeDeveloperAccount=" +
27
+ generalData?.selectedAccount?.id +
28
+ `; domain=${
29
+ window.location.href.includes("localhost")
30
+ ? ".localhost"
31
+ : ".learngual.com"
32
+ }; path=/; expires=${date.toUTCString()};`;
33
+ document.cookie =
34
+ "defaultAccountID=" +
35
+ generalData?.selectedAccount?.id +
36
+ `; domain=${
37
+ window.location.href.includes("localhost")
38
+ ? ".localhost"
39
+ : ".learngual.com"
40
+ }; path=/; expires=${date.toUTCString()};`;
41
+ document.cookie =
42
+ "defaultAccountType=" +
43
+ generalData?.selectedAccount?.type +
44
+ `; domain=${
45
+ window.location.href.includes("localhost")
46
+ ? ".localhost"
47
+ : ".learngual.com"
48
+ }; path=/; expires=${date.toUTCString()};`;
49
+
50
+ handleSetDefaultAccount(generalData?.selectedAccount?.id);
35
51
 
36
-
37
- if (generalData?.selectedAccount?.type === 'PERSONAL') {
38
- setOrganizationName(generalData?.selectedAccount?.display_name)
39
- }else{
40
- return setOrganizationName(generalData?.selectedAccount?.metadata?.organization_name);
41
- }
52
+ if (generalData?.selectedAccount?.type === "PERSONAL") {
53
+ setOrganizationName(generalData?.selectedAccount?.display_name);
54
+ } else {
55
+ return setOrganizationName(
56
+ generalData?.selectedAccount?.metadata?.organization_name
57
+ );
58
+ }
42
59
  }
43
60
  }, [generalData]);
44
61
  console.log(generalData, "data");
@@ -85,7 +102,11 @@ const UserCard = ({ user, isOpen }) => {
85
102
  fontWeight: 700,
86
103
  fontSize: 15,
87
104
  }}
88
- >{`${organizationName? organizationName : ''}.`}</Handle>
105
+ >{`${
106
+ organizationName
107
+ ? organizationName
108
+ : generalData?.selectedAccount?.display_name ?? ""
109
+ }.`}</Handle>
89
110
  </UserDetail>
90
111
  </>
91
112
  )}
package/src/components/sideNav/index.jsx CHANGED
@@ -50,7 +50,7 @@ const SideBar = ({ routes }) => {
50
50
  <NavItem key={route.path}>
51
51
  <NavLinkStyled
52
52
  activeClassName="active"
53
- to={route?.path}
53
+ to={route?.newTab ? "" : route?.path}
54
54
  onClick={() =>
55
55
  window.open(route.path, route?.newTab ? "_blank" : "")
56
56
  }