added context and feature flag for settings

packages/messenger-widget/README.md

@@ -475,14 +475,17 @@ Example :
          push: false,
       },
       profile: {
-         dm3: boolean | {
+         dm3: {
             cloud: false,
             optimism: true,
          },
-         self: boolean | {
+         self: {
             gnosis: true,
             ens: false,
          }
+      },
+      settings: {
+         messageView: true,
       }
    }
    disableDialogOptions: {

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

@@ -35,6 +35,7 @@
     cursor: pointer;
     padding: 0.5rem 1.3rem 0.5rem 1.3rem;
     font-size: 1rem;
+    align-items: center;
 }
 
 .preferences-aside-content {

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

@@ -1,18 +1,8 @@
-import { useEffect, useState } from 'react';
-import { Heading } from '../Heading/Heading';
 import './Settings.css';
-
-// message view option type ex : OLD/NEW
-export type MsgViewOptionType = {
-    name: string;
-    viewType: string;
-    isEnabled: boolean;
-};
-
-// settings data type to be used to store in local storage
-export type SettingsDataType = {
-    messageView: string;
-};
+import { useContext } from 'react';
+import { Heading } from '../Heading/Heading';
+import { ModalContext } from '../../../context/ModalContext';
+import { SettingsContext } from '../../../context/SettingsContext';
 
 export function Settings() {
     // heading of the page
@@ -21,129 +11,57 @@ export function Settings() {
     // description of the page
     const description = 'Define how you want to enable/disable components';
 
-    // available message view options
-    const msgViewOptions = [
-        {
-            name: 'Old message view',
-            viewType: 'OLD',
-            isEnabled: true,
-        },
-        {
-            name: 'New message view',
-            viewType: 'NEW',
-            isEnabled: true,
-        },
-    ];
-
-    // state to handle current message view type selected to show in chat screen
-    const [msgViewSelected, setMsgViewSelected] = useState<MsgViewOptionType>(
-        msgViewOptions[0],
-    );
-
-    const getSettingsFromLocalStorage = () => {
-        // fetch settings data from local storage
-        const settingsData = localStorage.getItem('settings');
-        // return data if found else return null
-        return settingsData ? JSON.parse(settingsData) : null;
-    };
-
-    const configureMsgView = () => {
-        // fetch message view type from local storage
-        const settingsData: SettingsDataType | null =
-            getSettingsFromLocalStorage();
-        // if message view found in local storage
-        if (settingsData && settingsData.messageView) {
-            // filter out the message type selected from available options
-            const msgViewType = msgViewOptions.filter(
-                (m) => m.viewType === settingsData.messageView,
-            );
-            // set the selected view type
-            setMsgViewSelected(
-                msgViewType.length ? msgViewType[0] : msgViewOptions[0],
-            );
-        }
-    };
-
-    const updateSettingsInLocalStorage = (data: SettingsDataType) => {
-        // convert JSON data of settings into string
-        const settingsData = JSON.stringify(data);
-        // save the data into local storage
-        localStorage.setItem('settings', settingsData);
-    };
-
-    const updateMsgView = (msgView: MsgViewOptionType) => {
-        // get the view type from selected message view type object
-        const { viewType } = msgView;
-
-        // update local state of message view type selected
-        setMsgViewSelected(msgView);
-
-        // fetch local storage data for settings
-        const settingsData: SettingsDataType | null =
-            getSettingsFromLocalStorage();
-
-        // update the property of message view
-        if (settingsData) {
-            settingsData.messageView = viewType;
-        }
-
-        // create a updated object based on the data
-        const updatedSettings = settingsData
-            ? settingsData
-            : {
-                  messageView: viewType,
-              };
-
-        // update the local storage with the new message view type
-        updateSettingsInLocalStorage(updatedSettings);
-    };
-
-    // on screen load, get the settings data from local storage ad update the states
-    useEffect(() => {
-        configureMsgView();
-    }, []);
+    const { disabledOptions } = useContext(ModalContext);
+    const { msgViewOptions, msgViewSelected, updateMsgView } =
+        useContext(SettingsContext);
 
     return (
         <div>
             {/* heading of the page */}
             <Heading heading={heading} description={description} />
 
-            {/* title and description of the property */}
-            <div className="settings-msg-view">
-                <div className="mt-2 font-weight-800 msg-view-heading">
-                    Message View
-                </div>
-                <div className="font-size-14 msg-view-desc">
-                    Select a view how the message should look like
-                </div>
-            </div>
-
-            {/* radio button options to select the message view type */}
-            <div>
-                <div className="settings-option-container">
-                    {msgViewOptions.map((option, index) => (
-                        <div
-                            key={index}
-                            className="radio d-flex mb-3 width-fit"
-                            onClick={() => {
-                                updateMsgView(option);
-                            }}
-                        >
-                            <input
-                                type="radio"
-                                value={option.viewType}
-                                checked={
-                                    option.viewType === msgViewSelected.viewType
-                                }
-                                readOnly
-                            />
-                            <label className="settings-option radio-label">
-                                {option.name}
-                            </label>
+            {/* Show message option selection when option is not disabled */}
+            {!disabledOptions.settings.messageView && (
+                <>
+                    {/* title and description of the property */}
+                    <div className="settings-msg-view">
+                        <div className="mt-2 font-weight-800 msg-view-heading">
+                            Message View
+                        </div>
+                        <div className="font-size-14 msg-view-desc">
+                            Select a view how the message should look like
+                        </div>
+                    </div>
+
+                    {/* radio button options to select the message view type */}
+                    <div>
+                        <div className="settings-option-container">
+                            {msgViewOptions.map((option, index) => (
+                                <div
+                                    key={index}
+                                    className="radio d-flex mb-3 width-fit"
+                                    onClick={() => {
+                                        updateMsgView(option);
+                                    }}
+                                >
+                                    <input
+                                        type="radio"
+                                        value={option.viewType}
+                                        checked={
+                                            option.viewType ===
+                                            msgViewSelected.viewType
+                                        }
+                                        readOnly
+                                    />
+                                    <label className="settings-option radio-label">
+                                        {option.name}
+                                    </label>
+                                </div>
+                            ))}
                         </div>
-                    ))}
-                </div>
-            </div>
+                    </div>
+                </>
+            )}
         </div>
     );
 }

packages/messenger-widget/src/context/ModalContext.tsx

@@ -94,6 +94,9 @@ export const ModalContext = React.createContext<ModalContextType>({
                 { key: 'gnosis', value: false },
             ],
         },
+        settings: {
+            messageView: false,
+        },
     },
     isProfileDialogDisabled: () => false,
 });

packages/messenger-widget/src/context/SettingsContext.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+    MSG_VIEW_OPTIONS,
+    MsgViewOptionType,
+    useSettings,
+} from '../hooks/settings/useSettings';
+
+export type SettingsContextType = {
+    msgViewOptions: MsgViewOptionType[];
+    updateMsgView: (msgView: MsgViewOptionType) => void;
+    msgViewSelected: MsgViewOptionType;
+};
+
+export const SettingsContext = React.createContext<SettingsContextType>({
+    msgViewOptions: MSG_VIEW_OPTIONS,
+    updateMsgView: (msgView: MsgViewOptionType) => {},
+    msgViewSelected: MSG_VIEW_OPTIONS[0],
+});
+
+export const SettingsContextProvider = ({ children }: { children?: any }) => {
+    const { msgViewOptions, updateMsgView, msgViewSelected } = useSettings();
+
+    return (
+        <SettingsContext.Provider
+            value={{
+                msgViewOptions,
+                updateMsgView,
+                msgViewSelected,
+            }}
+        >
+            {children}
+        </SettingsContext.Provider>
+    );
+};

packages/messenger-widget/src/hooks/modals/useModal.ts

@@ -39,6 +39,9 @@ export type DisabledOptionsType = {
         dm3: { key: string; value: boolean }[];
         own: { key: string; value: boolean }[];
     };
+    settings: {
+        messageView: boolean;
+    };
 };
 
 export const useModal = () => {
@@ -102,6 +105,9 @@ export const useModal = () => {
                     { key: 'gnosis', value: false },
                 ],
             },
+            settings: {
+                messageView: false,
+            },
         },
     );
 
@@ -247,9 +253,30 @@ export const useModal = () => {
                 }
             }
 
+            // update settings dialog
+            const updatedSettingsOptions =
+                dialogDisabled.settings === true
+                    ? updatedProfileOptions.map((pref) => {
+                          return {
+                              ...pref,
+                              isEnabled:
+                                  pref.ticker === PREFERENCES_ITEMS.SETTINGS
+                                      ? false
+                                      : pref.isEnabled,
+                          };
+                      })
+                    : updatedProfileOptions;
+
+            // disable specific settings option
+            if (typeof dialogDisabled.settings === 'object') {
+                optionsToDisable.settings.messageView =
+                    dialogDisabled.settings.messageView ?? false;
+            }
+
+            // update the states for disabled options
             setDisabledOptions(optionsToDisable);
             setPreferencesOptions(
-                updatedProfileOptions as PreferencesOptionType[],
+                updatedSettingsOptions as PreferencesOptionType[],
             );
 
             return;