Skip to content

Commit 5871b75

Browse files
Bhupesh-mfsiBhupesh-mfsi
committed
added settings option in preferences
1 parent 16c0d22 commit 5871b75

File tree

6 files changed

+216
-55
lines changed

6 files changed

+216
-55
lines changed

‎packages/messenger-widget/src/components/ConfigureProfile/ConfigureProfile.css‎

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -163,47 +163,6 @@ input::placeholder {
163163
border-radius: 6px;
164164
}
165165

166-
/* Customized CSS for radio button */
167-
.radio {
168-
input[type="radio"] {
169-
opacity: 0;
170-
+ .radio-label {
171-
&:before {
172-
content: '';
173-
background: #1F2029;
174-
border-radius: 100%;
175-
border: 1px solid var(--text-primary-color);
176-
display: inline-block;
177-
width: 1.4em;
178-
height: 1.4em;
179-
position: relative;
180-
top: -0.2em;
181-
margin-right: 1em;
182-
vertical-align: top;
183-
cursor: pointer;
184-
text-align: center;
185-
transition: all 250ms ease;
186-
}
187-
}
188-
&:checked {
189-
+ .radio-label {
190-
&:before {
191-
background-color: var(--configure-profile-modal-background-color);
192-
box-shadow: inset 0 0 0 4px #1F2029;
193-
}
194-
}
195-
}
196-
&:focus {
197-
+ .radio-label {
198-
&:before {
199-
outline: none;
200-
border-color: var(--configure-profile-modal-background-color);
201-
}
202-
}
203-
}
204-
}
205-
}
206-
207166
.ens-components-container{
208167
padding: 1.25rem;
209168
}
@@ -307,17 +266,6 @@ input::placeholder {
307266
margin-left: -11px;
308267
}
309268

310-
.radio {
311-
input[type="radio"] {
312-
opacity: 0;
313-
+ .radio-label {
314-
&:before {
315-
width: 2em !important;
316-
}
317-
}
318-
}
319-
}
320-
321269
.dm3-prof-select-type{
322270
font-size: 12px;
323271
}

‎packages/messenger-widget/src/components/Preferences/NormalView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export function NormalView() {
7575
' ',
7676
preferencesOptionSelected &&
7777
preferencesOptionSelected.name ===
78-
item.name
78+
item.name
7979
? 'normal-btn-hover'
8080
: '',
8181
)}
@@ -106,7 +106,7 @@ export function NormalView() {
106106
</div>
107107
<div className="col-10 m-0 p-0">
108108
{preferencesOptionSelected &&
109-
preferencesOptionSelected.isEnabled ? (
109+
preferencesOptionSelected.isEnabled ? (
110110
preferencesOptionSelected.component
111111
) : (
112112
<div className="d-flex align-items-start justify-content-end">

‎packages/messenger-widget/src/components/Preferences/Settings/Settings.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.settings-option-container{
2+
padding: 2rem 1rem 1rem 1rem;
3+
}
4+
5+
.settings-option{
6+
color: var(--text-primary-color);
7+
font-weight: 500;
8+
font-size: 14px;
9+
line-height: 24px;
10+
margin-left: 0.5rem;
11+
display: flex;
12+
align-items: center;
13+
}
14+
15+
.settings-msg-view{
16+
padding-left: 2rem;
17+
}
18+
19+
@media only screen and (max-width: 500px) {
20+
.msg-view-heading{
21+
font-size: 0.9rem;
22+
}
23+
24+
.msg-view-desc{
25+
font-size: 12px;
26+
}
27+
}

‎packages/messenger-widget/src/components/Preferences/Settings/Settings.tsx‎

Lines changed: 133 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,148 @@
1+
import { useEffect, useState } from 'react';
12
import { Heading } from '../Heading/Heading';
23
import './Settings.css';
34

5+
// message view option type ex : OLD/NEW
6+
export type MsgViewOptionType = {
7+
name: string;
8+
viewType: string;
9+
isEnabled: boolean;
10+
};
11+
12+
// settings data type to be used to store in local storage
13+
export type SettingsDataType = {
14+
messageView: string;
15+
};
16+
417
export function Settings() {
18+
// heading of the page
519
const heading = 'Settings';
20+
21+
// description of the page
622
const description = 'Define how you want to enable/disable components';
723

24+
// available message view options
25+
const msgViewOptions = [
26+
{
27+
name: 'Old message view',
28+
viewType: 'OLD',
29+
isEnabled: true,
30+
},
31+
{
32+
name: 'New message view',
33+
viewType: 'NEW',
34+
isEnabled: true,
35+
},
36+
];
37+
38+
// state to handle current message view type selected to show in chat screen
39+
const [msgViewSelected, setMsgViewSelected] = useState<MsgViewOptionType>(
40+
msgViewOptions[0],
41+
);
42+
43+
const getSettingsFromLocalStorage = () => {
44+
// fetch settings data from local storage
45+
const settingsData = localStorage.getItem('settings');
46+
// return data if found else return null
47+
return settingsData ? JSON.parse(settingsData) : null;
48+
};
49+
50+
const configureMsgView = () => {
51+
// fetch message view type from local storage
52+
const settingsData: SettingsDataType | null =
53+
getSettingsFromLocalStorage();
54+
// if message view found in local storage
55+
if (settingsData && settingsData.messageView) {
56+
// filter out the message type selected from available options
57+
const msgViewType = msgViewOptions.filter(
58+
(m) => m.viewType === settingsData.messageView,
59+
);
60+
// set the selected view type
61+
setMsgViewSelected(
62+
msgViewType.length ? msgViewType[0] : msgViewOptions[0],
63+
);
64+
}
65+
};
66+
67+
const updateSettingsInLocalStorage = (data: SettingsDataType) => {
68+
// convert JSON data of settings into string
69+
const settingsData = JSON.stringify(data);
70+
// save the data into local storage
71+
localStorage.setItem('settings', settingsData);
72+
};
73+
74+
const updateMsgView = (msgView: MsgViewOptionType) => {
75+
// get the view type from selected message view type object
76+
const { viewType } = msgView;
77+
78+
// update local state of message view type selected
79+
setMsgViewSelected(msgView);
80+
81+
// fetch local storage data for settings
82+
const settingsData: SettingsDataType | null =
83+
getSettingsFromLocalStorage();
84+
85+
// update the property of message view
86+
if (settingsData) {
87+
settingsData.messageView = viewType;
88+
}
89+
90+
// create a updated object based on the data
91+
const updatedSettings = settingsData
92+
? settingsData
93+
: {
94+
messageView: viewType,
95+
};
96+
97+
// update the local storage with the new message view type
98+
updateSettingsInLocalStorage(updatedSettings);
99+
};
100+
101+
// on screen load, get the settings data from local storage ad update the states
102+
useEffect(() => {
103+
configureMsgView();
104+
}, []);
8105

9106
return (
10107
<div>
108+
{/* heading of the page */}
11109
<Heading heading={heading} description={description} />
12-
<div className="">
13110

111+
{/* title and description of the property */}
112+
<div className="settings-msg-view">
113+
<div className="mt-2 font-weight-800 msg-view-heading">
114+
Message View
115+
</div>
116+
<div className="font-size-14 msg-view-desc">
117+
Select a view how the message should look like
118+
</div>
119+
</div>
120+
121+
{/* radio button options to select the message view type */}
122+
<div>
123+
<div className="settings-option-container">
124+
{msgViewOptions.map((option, index) => (
125+
<div
126+
key={index}
127+
className="radio d-flex mb-3 width-fit"
128+
onClick={() => {
129+
updateMsgView(option);
130+
}}
131+
>
132+
<input
133+
type="radio"
134+
value={option.viewType}
135+
checked={
136+
option.viewType === msgViewSelected.viewType
137+
}
138+
readOnly
139+
/>
140+
<label className="settings-option radio-label">
141+
{option.name}
142+
</label>
143+
</div>
144+
))}
145+
</div>
14146
</div>
15147
</div>
16148
);

‎packages/messenger-widget/src/components/Preferences/bl.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export enum PREFERENCES_ITEMS {
2020
NOTIFICATION = 'NOTIFICATION',
2121
NETWORK = 'NETWORK',
2222
STORAGE = 'STORAGE',
23+
SETTINGS = 'SETTINGS',
2324
}
2425

2526
export const preferencesItems = [
@@ -86,6 +87,7 @@ export const preferencesItems = [
8687
<img src={settingsIcon} alt="network" className="pref-icon me-2" />
8788
),
8889
name: 'Settings',
90+
ticker: PREFERENCES_ITEMS.SETTINGS,
8991
component: <Settings />,
9092
isEnabled: true,
9193
},

‎packages/messenger-widget/src/styles/common.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,47 @@ input:focus {
154154
height: inherit;
155155
}
156156

157+
/* Customized CSS for radio button */
158+
.radio {
159+
input[type="radio"] {
160+
opacity: 0;
161+
+ .radio-label {
162+
&:before {
163+
content: '';
164+
background: #1F2029;
165+
border-radius: 100%;
166+
border: 1px solid var(--text-primary-color);
167+
display: inline-block;
168+
width: 1.4em;
169+
height: 1.4em;
170+
position: relative;
171+
top: -0.2em;
172+
margin-right: 1em;
173+
vertical-align: top;
174+
cursor: pointer;
175+
text-align: center;
176+
transition: all 250ms ease;
177+
}
178+
}
179+
&:checked {
180+
+ .radio-label {
181+
&:before {
182+
background-color: var(--configure-profile-modal-background-color);
183+
box-shadow: inset 0 0 0 4px #1F2029;
184+
}
185+
}
186+
}
187+
&:focus {
188+
+ .radio-label {
189+
&:before {
190+
outline: none;
191+
border-color: var(--configure-profile-modal-background-color);
192+
}
193+
}
194+
}
195+
}
196+
}
197+
157198
/* CSS to rotate the spinner svg image */
158199
@-webkit-keyframes rotating {
159200
from {
@@ -246,6 +287,17 @@ input:focus {
246287
backdrop-filter: brightness(0.3);
247288
}
248289

290+
.radio {
291+
input[type="radio"] {
292+
opacity: 0;
293+
+ .radio-label {
294+
&:before {
295+
width: 1.5em !important;
296+
}
297+
}
298+
}
299+
}
300+
249301
}
250302

251303
@media only screen and (min-width: 800px) {

0 commit comments

Comments
 (0)