added flag for notification and network

Author: Bhupesh-mfsi

packages/messenger-widget/README.md

@@ -90,7 +90,7 @@ Follow the below given steps :-
             theme: undefined, 
             signInImage: undefined,
             siwe: undefined,
-            disableNetworkDialog: undefined,
+            disableDialogOptions: undefined,
         };
 
         return (
@@ -247,7 +247,7 @@ Follow the below given steps :-
             theme: undefined, 
             signInImage: undefined,
             siwe: undefined,
-            disableNetworkDialog: undefined,
+            disableDialogOptions: undefined,
         };
 
         return (
@@ -455,19 +455,42 @@ Example :
     }
 ```
 
-7. disableNetworkDialog
+7. disableDialogOptions
 ```js
 const props: DM3Configuration = {
    ...
-   disableNetworkDialog: true,
+   disableDialogOptions: true,
 }
 ```
-This is a optional property of type boolean. To disable network dialog for adding and removing delivery service nodes, its value should be set to true. By default it is false and network dialog is enabled.
+This is a optional property of type DisableDialogType. To disable all the properties of dialog set it true. By default all properties are active. All the properties of each category is optional.
 ```js
 Example : 
-   disableNetworkDialog: true
-   disableNetworkDialog: false
-   disableNetworkDialog: undefined // its same as this property is not passed in props
+   disableDialogOptions: true
+   disableDialogOptions: false
+   disableDialogOptions: undefined
+   disableDialogOptions: {
+      network: true,
+      notification: {
+         email: true,
+         push: false,
+      },
+      profile: {
+         dm3: boolean | {
+            cloud: false,
+            optimism: true,
+         },
+         self: boolean | {
+            gnosis: true,
+            ens: false,
+         }
+      }
+   }
+   disableDialogOptions: {
+      notification: {
+         email: true,
+         push: false,
+      },
+   }
 ```
 
 8. theme

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

@@ -10,6 +10,7 @@ import { getVerficationModalContent } from './hooks/VerificationContent';
 import { DM3ConfigurationContext } from '../../../context/DM3ConfigurationContext';
 import { NotificationContext } from '../../../context/NotificationContext';
 import loader from '../../../assets/images/loader.svg';
+import { ModalContext } from '../../../context/ModalContext';
 
 export function Notification() {
     const { screenWidth } = useContext(DM3ConfigurationContext);
@@ -44,6 +45,8 @@ export function Notification() {
         loaderData,
     } = useContext(NotificationContext);
 
+    const { disabledNotification } = useContext(ModalContext);
+
     return (
         <div className="position-relative h-100">
             <Heading heading={heading} description={description} />
@@ -85,55 +88,59 @@ export function Notification() {
             </div>
 
             {/* Email notifications enabled/disabled */}
-            <div className="notification-content-left mt-4">
-                <div className="d-flex align-items-center">
-                    <Checkbox
-                        checked={isEmailActive}
+            {!disabledNotification.email && (
+                <div className="notification-content-left mt-4">
+                    <div className="d-flex align-items-center">
+                        <Checkbox
+                            checked={isEmailActive}
+                            disabled={!isNotificationsActive}
+                            action={() =>
+                                toggleSpecificNotificationChannel(
+                                    !isEmailActive,
+                                    NotificationChannelType.EMAIL,
+                                    setIsEmailActive,
+                                )
+                            }
+                            heading="Email"
+                        />
+                        {email && isNotificationsActive ? (
+                            <DeleteIcon
+                                data={email}
+                                type={NotificationChannelType.EMAIL}
+                                deleteNotification={setEmail}
+                            />
+                        ) : (
+                            <NotificationButton
+                                text="Add Email"
+                                disabled={
+                                    !isNotificationsActive || !isEmailActive
+                                }
+                                action={() => {
+                                    setActiveVerification(
+                                        NotificationChannelType.EMAIL,
+                                    );
+                                    setActiveVerificationContent(
+                                        getVerficationModalContent(
+                                            NotificationChannelType.EMAIL,
+                                            setActiveVerification,
+                                            setEmail,
+                                        ),
+                                    );
+                                }}
+                            />
+                        )}
+                    </div>
+                    <Text
                         disabled={!isNotificationsActive}
-                        action={() =>
-                            toggleSpecificNotificationChannel(
-                                !isEmailActive,
-                                NotificationChannelType.EMAIL,
-                                setIsEmailActive,
-                            )
+                        text={
+                            'An email is sent to inform you that a message is waiting for you at a delivery service.'
                         }
-                        heading="Email"
                     />
-                    {email && isNotificationsActive ? (
-                        <DeleteIcon
-                            data={email}
-                            type={NotificationChannelType.EMAIL}
-                            deleteNotification={setEmail}
-                        />
-                    ) : (
-                        <NotificationButton
-                            text="Add Email"
-                            disabled={!isNotificationsActive || !isEmailActive}
-                            action={() => {
-                                setActiveVerification(
-                                    NotificationChannelType.EMAIL,
-                                );
-                                setActiveVerificationContent(
-                                    getVerficationModalContent(
-                                        NotificationChannelType.EMAIL,
-                                        setActiveVerification,
-                                        setEmail,
-                                    ),
-                                );
-                            }}
-                        />
-                    )}
+                    <span className="experimental-fun">
+                        Experimental function. Do not use in production!
+                    </span>
                 </div>
-                <Text
-                    disabled={!isNotificationsActive}
-                    text={
-                        'An email is sent to inform you that a message is waiting for you at a delivery service.'
-                    }
-                />
-                <span className="experimental-fun">
-                    Experimental function. Do not use in production!
-                </span>
-            </div>
+            )}
 
             {/* Mobile notifications enabled/disabled */}
             {/* <div className="notification-content-left mt-4">
@@ -179,22 +186,24 @@ export function Notification() {
             </div> */}
 
             {/* Push notifications enabled/disabled */}
-            <div className="notification-content-left mt-4">
-                <div className="d-flex align-items-center">
-                    <Checkbox
-                        checked={isPushNotifyActive}
+            {!disabledNotification.push && (
+                <div className="notification-content-left mt-4">
+                    <div className="d-flex align-items-center">
+                        <Checkbox
+                            checked={isPushNotifyActive}
+                            disabled={!isNotificationsActive}
+                            action={() =>
+                                pushNotificationAction(!isPushNotifyActive)
+                            }
+                            heading="Push Notifications"
+                        />
+                    </div>
+                    <Text
                         disabled={!isNotificationsActive}
-                        action={() =>
-                            pushNotificationAction(!isPushNotifyActive)
-                        }
-                        heading="Push Notifications"
+                        text={'Enable push notifications to your browser.'}
                     />
                 </div>
-                <Text
-                    disabled={!isNotificationsActive}
-                    text={'Enable push notifications to your browser.'}
-                />
-            </div>
+            )}
         </div>
     );
 }

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

@@ -32,7 +32,6 @@ export const DM3ConfigurationContext =
             showContacts: true,
             publicVapidKey: '',
             nonce: '',
-            disableNetworkDialog: false,
         },
         screenWidth: window.innerWidth,
         setScreenWidth: (width: number) => {},

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

@@ -6,6 +6,7 @@ import {
     ProfileType,
 } from '../utils/enum-type-utils';
 import {
+    DisabledNotificationType,
     IConfigureProfileModal,
     IOpenEmojiPopup,
     PreferencesOptionType,
@@ -40,6 +41,7 @@ export type ModalContextType = {
     setPreferencesOptionSelected: (item: PreferencesOptionType | null) => void;
     preferencesOptions: PreferencesOptionType[];
     updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void;
+    disabledNotification: DisabledNotificationType;
 };
 
 export const ModalContext = React.createContext<ModalContextType>({
@@ -76,6 +78,10 @@ export const ModalContext = React.createContext<ModalContextType>({
     setPreferencesOptionSelected: (item: PreferencesOptionType | null) => {},
     preferencesOptions: [],
     updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => {},
+    disabledNotification: {
+        email: false,
+        push: false,
+    },
 });
 
 export const ModalContextProvider = ({ children }: { children?: any }) => {
@@ -106,6 +112,7 @@ export const ModalContextProvider = ({ children }: { children?: any }) => {
         preferencesOptions,
         updatePreferenceSelected,
         resetModalStates,
+        disabledNotification,
     } = useModal();
 
     return (
@@ -137,6 +144,7 @@ export const ModalContextProvider = ({ children }: { children?: any }) => {
                 setPreferencesOptionSelected,
                 preferencesOptions,
                 updatePreferenceSelected,
+                disabledNotification,
             }}
         >
             {children}

packages/messenger-widget/src/demo.tsx

@@ -23,7 +23,7 @@ export function Demo() {
         theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors
         signInImage: undefined, // OPTIONAL PARAMETER : string URL of image
         siwe: undefined, // OPTIONAL PARAMETER : sign in with ethereum
-        disableNetworkDialog: true, // OPTIONAL PARAMETER : to enable/disable adding or removing DS nodes
+        disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties
     };
 
     return (

packages/messenger-widget/src/hooks/configuration/useDM3Configuration.test.ts

@@ -20,7 +20,6 @@ const config: DM3Configuration = {
     showContacts: true,
     publicVapidKey: '',
     nonce: '',
-    disableNetworkDialog: true,
 };
 
 describe('useDM3Configuration hook test cases', () => {

packages/messenger-widget/src/hooks/configuration/useDM3Configuration.ts

@@ -29,7 +29,6 @@ export const useDm3Configuration = () => {
         showContacts: true,
         publicVapidKey: '',
         nonce: '',
-        disableNetworkDialog: false,
     });
 
     const validateSiweCredentials = async (data: Siwe) => {