- {preferencesItems.map((item, index) => {
+ {preferencesOptions.map((item, index) => {
return (
item.isEnabled && (
- setPreferencesOptionSelected(
- item,
+ updatePreferenceSelected(
+ item.ticker,
)
}
>
diff --git a/packages/messenger-widget/src/components/Preferences/Network/Network.tsx b/packages/messenger-widget/src/components/Preferences/Network/Network.tsx
index a8013f4f5..2381d92b7 100644
--- a/packages/messenger-widget/src/components/Preferences/Network/Network.tsx
+++ b/packages/messenger-widget/src/components/Preferences/Network/Network.tsx
@@ -4,7 +4,7 @@ import deleteIcon from '../../../assets/images/delete.svg';
import { useContext, useEffect } from 'react';
import { DM3UserProfileContext } from '../../../context/DM3UserProfileContext';
import { ModalContext } from '../../../context/ModalContext';
-import { preferencesItems } from '../bl';
+import { PREFERENCES_ITEMS } from '../bl';
export function Network() {
const heading = 'Network';
@@ -24,7 +24,7 @@ export function Network() {
setError,
} = useContext(DM3UserProfileContext);
- const { setPreferencesOptionSelected } = useContext(ModalContext);
+ const { updatePreferenceSelected } = useContext(ModalContext);
// input field modal should remain close on initial load of network screen
useEffect(() => {
@@ -80,8 +80,8 @@ export function Network() {
- setPreferencesOptionSelected(
- preferencesItems[1],
+ updatePreferenceSelected(
+ PREFERENCES_ITEMS.DM3_PROFILE,
)
}
>
diff --git a/packages/messenger-widget/src/components/Preferences/NormalView.tsx b/packages/messenger-widget/src/components/Preferences/NormalView.tsx
index 726d68f0f..bbba597a4 100644
--- a/packages/messenger-widget/src/components/Preferences/NormalView.tsx
+++ b/packages/messenger-widget/src/components/Preferences/NormalView.tsx
@@ -1,5 +1,4 @@
import './Preferences.css';
-import { preferencesItems } from './bl';
import infoIcon from './../../assets/images/preferences-info.svg';
import { useContext, useEffect, useState } from 'react';
import closeIcon from '../../assets/images/cross.svg';
@@ -13,18 +12,18 @@ export function NormalView() {
setShowProfileConfigurationModal,
resetConfigureProfileModal,
preferencesOptionSelected,
- setPreferencesOptionSelected,
+ updatePreferenceSelected,
+ preferencesOptions,
} = useContext(ModalContext);
- // const [optionChoosen, setOptionChoosen] = useState(null);
-
/**
- * Opens DM3 profile configuration by default if user clicked
- * on "Configure Profile" button
+ * Opens first option by default
*/
useEffect(() => {
- if (showProfileConfigurationModal) {
- setPreferencesOptionSelected(preferencesItems[1]);
+ if (showProfileConfigurationModal && !preferencesOptionSelected) {
+ updatePreferenceSelected(
+ preferencesOptions.length ? preferencesOptions[0].ticker : null,
+ );
}
}, []);
@@ -68,7 +67,7 @@ export function NormalView() {
- {preferencesItems.map((item, index) => {
+ {preferencesOptions.map((item, index) => {
return (
item.isEnabled && (
- setPreferencesOptionSelected(
- item,
+ updatePreferenceSelected(
+ item.ticker,
)
}
>
diff --git a/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx b/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx
index 6f56047d8..e3caf6b6e 100644
--- a/packages/messenger-widget/src/components/Preferences/Notification/Notification.tsx
+++ b/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 { disabledOptions } = useContext(ModalContext);
+
return (
@@ -85,55 +88,59 @@ export function Notification() {
{/* Email notifications enabled/disabled */}
-
-
-
+
+
+ toggleSpecificNotificationChannel(
+ !isEmailActive,
+ NotificationChannelType.EMAIL,
+ setIsEmailActive,
+ )
+ }
+ heading="Email"
+ />
+ {email && isNotificationsActive ? (
+
+ ) : (
+ {
+ setActiveVerification(
+ NotificationChannelType.EMAIL,
+ );
+ setActiveVerificationContent(
+ getVerficationModalContent(
+ NotificationChannelType.EMAIL,
+ setActiveVerification,
+ setEmail,
+ ),
+ );
+ }}
+ />
+ )}
+
+
- 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 ? (
-
- ) : (
- {
- setActiveVerification(
- NotificationChannelType.EMAIL,
- );
- setActiveVerificationContent(
- getVerficationModalContent(
- NotificationChannelType.EMAIL,
- setActiveVerification,
- setEmail,
- ),
- );
- }}
- />
- )}
+
+ Experimental function. Do not use in production!
+
-
-
- Experimental function. Do not use in production!
-
-
+ )}
{/* Mobile notifications enabled/disabled */}
{/*
@@ -179,22 +186,24 @@ export function Notification() {
*/}
{/* Push notifications enabled/disabled */}
-
-
-
+
+
+ pushNotificationAction(!isPushNotifyActive)
+ }
+ heading="Push Notifications"
+ />
+
+
- pushNotificationAction(!isPushNotifyActive)
- }
- heading="Push Notifications"
+ text={'Enable push notifications to your browser.'}
/>
-
-
+ )}
);
}
diff --git a/packages/messenger-widget/src/components/Preferences/bl.tsx b/packages/messenger-widget/src/components/Preferences/bl.tsx
index 7ad12578b..9f84bcb8f 100644
--- a/packages/messenger-widget/src/components/Preferences/bl.tsx
+++ b/packages/messenger-widget/src/components/Preferences/bl.tsx
@@ -11,6 +11,15 @@ import { Network } from './Network/Network';
import { Storage } from './Storage/Storage';
import { DM3Profile } from './DM3Profile/DM3Profile';
+export enum PREFERENCES_ITEMS {
+ PROPERTIES = 'PROPERTIES',
+ DM3_PROFILE = 'DM3_PROFILE',
+ SPAM = 'SPAM',
+ NOTIFICATION = 'NOTIFICATION',
+ NETWORK = 'NETWORK',
+ STORAGE = 'STORAGE',
+}
+
export const preferencesItems = [
{
icon: (
@@ -22,18 +31,21 @@ export const preferencesItems = [
),
name: 'Properties',
component:
,
+ ticker: PREFERENCES_ITEMS.PROPERTIES,
isEnabled: false,
},
{
icon:
,
name: 'dm3 Profile',
component:
,
+ ticker: PREFERENCES_ITEMS.DM3_PROFILE,
isEnabled: true,
},
{
icon:
,
name: 'Spam Protection',
component:
,
+ ticker: PREFERENCES_ITEMS.SPAM,
isEnabled: false,
},
{
@@ -46,6 +58,7 @@ export const preferencesItems = [
),
name: 'Notification',
component:
,
+ ticker: PREFERENCES_ITEMS.NOTIFICATION,
isEnabled: true,
},
{
@@ -54,6 +67,7 @@ export const preferencesItems = [
),
name: 'Network',
component:
,
+ ticker: PREFERENCES_ITEMS.NETWORK,
isEnabled: true,
},
{
@@ -62,6 +76,7 @@ export const preferencesItems = [
),
name: 'Storage',
component:
,
+ ticker: PREFERENCES_ITEMS.STORAGE,
isEnabled: false,
},
];
diff --git a/packages/messenger-widget/src/components/Profile/Profile.tsx b/packages/messenger-widget/src/components/Profile/Profile.tsx
index 8413b52a8..b5d85938a 100644
--- a/packages/messenger-widget/src/components/Profile/Profile.tsx
+++ b/packages/messenger-widget/src/components/Profile/Profile.tsx
@@ -30,8 +30,11 @@ export function Profile() {
const { setSelectedRightView } = useContext(UiViewContext);
- const { setShowProfileConfigurationModal, setShowPreferencesModal } =
- useContext(ModalContext);
+ const {
+ setShowProfileConfigurationModal,
+ setShowPreferencesModal,
+ updatePreferenceSelected,
+ } = useContext(ModalContext);
const mainnetProvider = useMainnetProvider();
@@ -128,6 +131,7 @@ export function Profile() {
openConfigurationModal(
setShowProfileConfigurationModal,
setShowPreferencesModal,
+ updatePreferenceSelected,
)
}
/>
diff --git a/packages/messenger-widget/src/context/ModalContext.tsx b/packages/messenger-widget/src/context/ModalContext.tsx
index 57b143007..446d846f7 100644
--- a/packages/messenger-widget/src/context/ModalContext.tsx
+++ b/packages/messenger-widget/src/context/ModalContext.tsx
@@ -6,11 +6,13 @@ import {
ProfileType,
} from '../utils/enum-type-utils';
import {
+ DisabledOptionsType,
IConfigureProfileModal,
IOpenEmojiPopup,
+ PreferencesOptionType,
useModal,
} from '../hooks/modals/useModal';
-import { preferencesItems } from '../components/Preferences/bl';
+import { PREFERENCES_ITEMS } from '../components/Preferences/bl';
export type ModalContextType = {
loaderContent: string;
@@ -35,18 +37,12 @@ export type ModalContextType = {
setConfigureProfileModal: (modal: IConfigureProfileModal) => void;
resetConfigureProfileModal: () => void;
resetModalStates: () => void;
- preferencesOptionSelected: {
- icon: JSX.Element;
- name: string;
- component: JSX.Element;
- isEnabled: boolean;
- };
- setPreferencesOptionSelected: (item: {
- icon: JSX.Element;
- name: string;
- component: JSX.Element;
- isEnabled: boolean;
- }) => void;
+ preferencesOptionSelected: PreferencesOptionType | null;
+ setPreferencesOptionSelected: (item: PreferencesOptionType | null) => void;
+ preferencesOptions: PreferencesOptionType[];
+ updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void;
+ disabledOptions: DisabledOptionsType;
+ isProfileDialogDisabled: () => boolean;
};
export const ModalContext = React.createContext
({
@@ -79,13 +75,27 @@ export const ModalContext = React.createContext({
setConfigureProfileModal: (modal: IConfigureProfileModal) => {},
resetConfigureProfileModal: () => {},
resetModalStates: () => {},
- preferencesOptionSelected: preferencesItems[1],
- setPreferencesOptionSelected: (item: {
- icon: JSX.Element;
- name: string;
- component: JSX.Element;
- isEnabled: boolean;
- }) => {},
+ preferencesOptionSelected: null,
+ setPreferencesOptionSelected: (item: PreferencesOptionType | null) => {},
+ preferencesOptions: [],
+ updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => {},
+ disabledOptions: {
+ notification: {
+ email: false,
+ push: false,
+ },
+ profile: {
+ dm3: [
+ { key: 'dm3', value: false },
+ { key: 'optimism', value: false },
+ ],
+ own: [
+ { key: 'ens', value: false },
+ { key: 'gnosis', value: false },
+ ],
+ },
+ },
+ isProfileDialogDisabled: () => false,
});
export const ModalContextProvider = ({ children }: { children?: any }) => {
@@ -113,7 +123,11 @@ export const ModalContextProvider = ({ children }: { children?: any }) => {
resetConfigureProfileModal,
preferencesOptionSelected,
setPreferencesOptionSelected,
+ preferencesOptions,
+ updatePreferenceSelected,
resetModalStates,
+ disabledOptions,
+ isProfileDialogDisabled,
} = useModal();
return (
@@ -143,6 +157,10 @@ export const ModalContextProvider = ({ children }: { children?: any }) => {
resetConfigureProfileModal,
preferencesOptionSelected,
setPreferencesOptionSelected,
+ preferencesOptions,
+ updatePreferenceSelected,
+ disabledOptions,
+ isProfileDialogDisabled,
}}
>
{children}
diff --git a/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts b/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts
index be51fec23..b7394d106 100644
--- a/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts
+++ b/packages/messenger-widget/src/context/testHelper/getMockedDm3Configuration.ts
@@ -28,4 +28,5 @@ export const DEFAULT_DM3_CONFIGURATION = {
showContacts: false,
publicVapidKey: '',
nonce: '',
+ disableNetworkDialog: false,
};
diff --git a/packages/messenger-widget/src/demo.tsx b/packages/messenger-widget/src/demo.tsx
index c458bb1ea..71d03d241 100644
--- a/packages/messenger-widget/src/demo.tsx
+++ b/packages/messenger-widget/src/demo.tsx
@@ -23,6 +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
+ disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties
};
return (
diff --git a/packages/messenger-widget/src/hooks/modals/useModal.ts b/packages/messenger-widget/src/hooks/modals/useModal.ts
index 0274e715e..aad17f4a5 100644
--- a/packages/messenger-widget/src/hooks/modals/useModal.ts
+++ b/packages/messenger-widget/src/hooks/modals/useModal.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
import { NewContact } from '../../interfaces/utils';
import { MessageProps } from '../../interfaces/props';
import {
@@ -6,7 +6,11 @@ import {
ProfileScreenType,
ProfileType,
} from '../../utils/enum-type-utils';
-import { preferencesItems } from '../../components/Preferences/bl';
+import {
+ PREFERENCES_ITEMS,
+ preferencesItems,
+} from '../../components/Preferences/bl';
+import { DM3ConfigurationContext } from '../../context/DM3ConfigurationContext';
export interface IOpenEmojiPopup {
action: boolean;
@@ -18,6 +22,25 @@ export interface IConfigureProfileModal {
onScreen: ProfileScreenType;
}
+export type PreferencesOptionType = {
+ icon: JSX.Element;
+ name: string;
+ component: JSX.Element;
+ isEnabled: boolean;
+ ticker: PREFERENCES_ITEMS;
+};
+
+export type DisabledOptionsType = {
+ notification: {
+ email: boolean;
+ push: boolean;
+ };
+ profile: {
+ dm3: { key: string; value: boolean }[];
+ own: { key: string; value: boolean }[];
+ };
+};
+
export const useModal = () => {
const [loaderContent, setLoaderContent] = useState('');
@@ -56,12 +79,33 @@ export const useModal = () => {
onScreen: ProfileScreenType.NONE,
});
- const [preferencesOptionSelected, setPreferencesOptionSelected] = useState<{
- icon: JSX.Element;
- name: string;
- component: JSX.Element;
- isEnabled: boolean;
- }>(preferencesItems[1]);
+ const [preferencesOptions, setPreferencesOptions] = useState<
+ PreferencesOptionType[]
+ >([]);
+
+ const [preferencesOptionSelected, setPreferencesOptionSelected] =
+ useState(null);
+
+ const [disabledOptions, setDisabledOptions] = useState(
+ {
+ notification: {
+ email: false,
+ push: false,
+ },
+ profile: {
+ dm3: [
+ { key: 'dm3', value: false },
+ { key: 'optimism', value: false },
+ ],
+ own: [
+ { key: 'ens', value: false },
+ { key: 'gnosis', value: false },
+ ],
+ },
+ },
+ );
+
+ const { dm3Configuration } = useContext(DM3ConfigurationContext);
const resetConfigureProfileModal = () => {
setConfigureProfileModal({
@@ -87,9 +131,163 @@ export const useModal = () => {
profileOptionSelected: ProfileType.DM3_NAME,
onScreen: ProfileScreenType.NONE,
});
- setPreferencesOptionSelected(preferencesItems[1]);
+ setPreferencesOptions(preferencesItems);
+ setPreferencesOptionSelected(null);
};
+ const configureOptionsOfPreferences = () => {
+ const prefState = [...preferencesItems];
+ const optionsToDisable = { ...disabledOptions };
+ const dialogDisabled = dm3Configuration.disableDialogOptions;
+
+ // disable all properties of preferences config
+ if (dialogDisabled !== undefined && dialogDisabled === true) {
+ const disabledOptions = prefState.map((p) => {
+ return {
+ ...p,
+ isEnabled: false,
+ };
+ });
+ setPreferencesOptions(disabledOptions);
+ return;
+ }
+
+ // disable specific properties of dialog
+ if (
+ dialogDisabled !== undefined &&
+ typeof dialogDisabled === 'object'
+ ) {
+ // update network dialog
+ const updatedNetworkOptions = prefState.map((pref) => {
+ return {
+ ...pref,
+ isEnabled:
+ pref.ticker === PREFERENCES_ITEMS.NETWORK
+ ? !dialogDisabled.network ?? pref.isEnabled
+ : pref.isEnabled,
+ };
+ });
+
+ // update notification dialog
+ const updatedNotificationOptions =
+ dialogDisabled.notification === true
+ ? updatedNetworkOptions.map((pref) => {
+ return {
+ ...pref,
+ isEnabled:
+ pref.ticker === PREFERENCES_ITEMS.NOTIFICATION
+ ? false
+ : pref.isEnabled,
+ };
+ })
+ : updatedNetworkOptions;
+
+ // update profile dialog
+ let updatedProfileOptions = updatedNotificationOptions;
+
+ // disable profile dialog
+ if (dialogDisabled.profile === true) {
+ updatedProfileOptions = updatedNotificationOptions.map(
+ (pref) => {
+ return {
+ ...pref,
+ isEnabled:
+ pref.ticker === PREFERENCES_ITEMS.DM3_PROFILE
+ ? false
+ : pref.isEnabled,
+ };
+ },
+ );
+ optionsToDisable.profile.dm3[0].value = true;
+ optionsToDisable.profile.dm3[1].value = true;
+ optionsToDisable.profile.own[0].value = true;
+ optionsToDisable.profile.own[1].value = true;
+ }
+
+ // disable specific notification type
+ if (typeof dialogDisabled.notification === 'object') {
+ optionsToDisable.notification.email =
+ dialogDisabled.notification.email ?? false;
+ optionsToDisable.notification.push =
+ dialogDisabled.notification.push ?? false;
+ }
+
+ // disable specific profile type
+ if (typeof dialogDisabled.profile === 'object') {
+ // if entire dm3 profile (dm3name and optimism) is disabled/enabled
+ if (typeof dialogDisabled.profile.dm3 === 'boolean') {
+ optionsToDisable.profile.dm3[0].value =
+ dialogDisabled.profile.dm3;
+ optionsToDisable.profile.dm3[1].value =
+ dialogDisabled.profile.dm3;
+ }
+
+ // if specific dm3name or optimism profile is disabled/enabled
+ if (typeof dialogDisabled.profile.dm3 === 'object') {
+ optionsToDisable.profile.dm3[0].value =
+ dialogDisabled.profile.dm3.cloud ?? false;
+ optionsToDisable.profile.dm3[1].value =
+ dialogDisabled.profile.dm3.optimism ?? false;
+ }
+
+ // if entire self profile (ens and gnosis) is disabled/enabled
+ if (typeof dialogDisabled.profile.self === 'boolean') {
+ optionsToDisable.profile.own[0].value =
+ dialogDisabled.profile.self;
+ optionsToDisable.profile.own[1].value =
+ dialogDisabled.profile.self;
+ }
+
+ // if specific ens or gnosis profile is disabled/enabled
+ if (typeof dialogDisabled.profile.self === 'object') {
+ optionsToDisable.profile.own[0].value =
+ dialogDisabled.profile.self.ens ?? false;
+ optionsToDisable.profile.own[1].value =
+ dialogDisabled.profile.self.gnosis ?? false;
+ }
+ }
+
+ setDisabledOptions(optionsToDisable);
+ setPreferencesOptions(
+ updatedProfileOptions as PreferencesOptionType[],
+ );
+
+ return;
+ }
+
+ // update the preferences options as per configuration
+ setPreferencesOptions(prefState);
+ };
+
+ const updatePreferenceSelected = (ticker: PREFERENCES_ITEMS | null) => {
+ setPreferencesOptionSelected(
+ ticker
+ ? preferencesOptions.find(
+ (p) => p.ticker === ticker && p.isEnabled,
+ ) ?? null
+ : null,
+ );
+ };
+
+ const isProfileDialogDisabled = () => {
+ const disabledDm3Profile = disabledOptions.profile.dm3.filter(
+ (d) => !d.value,
+ );
+ const disabledOwnProfile = disabledOptions.profile.own.filter(
+ (d) => !d.value,
+ );
+ // if atleast one profile is enabled
+ if (disabledDm3Profile.length || disabledOwnProfile.length) {
+ return false;
+ }
+ return true;
+ };
+
+ // configure dialog to show properties in preferences modal
+ useEffect(() => {
+ configureOptionsOfPreferences();
+ }, [dm3Configuration]);
+
return {
loaderContent,
setLoaderContent,
@@ -115,5 +313,9 @@ export const useModal = () => {
resetConfigureProfileModal,
preferencesOptionSelected,
setPreferencesOptionSelected,
+ preferencesOptions,
+ updatePreferenceSelected,
+ disabledOptions,
+ isProfileDialogDisabled,
};
};
diff --git a/packages/messenger-widget/src/interfaces/config.ts b/packages/messenger-widget/src/interfaces/config.ts
index edf9d212d..0bc7374a7 100644
--- a/packages/messenger-widget/src/interfaces/config.ts
+++ b/packages/messenger-widget/src/interfaces/config.ts
@@ -1,3 +1,31 @@
+export type DisableDialogType =
+ | boolean
+ | {
+ network?: boolean;
+ notification?:
+ | boolean
+ | {
+ email?: boolean;
+ push?: boolean;
+ };
+ profile?:
+ | boolean
+ | {
+ dm3?:
+ | boolean
+ | {
+ cloud?: boolean;
+ optimism?: boolean;
+ };
+ self?:
+ | boolean
+ | {
+ gnosis: boolean;
+ ens: boolean;
+ };
+ };
+ };
+
export interface DM3Configuration {
defaultContact: string;
defaultServiceUrl: string;
@@ -18,6 +46,7 @@ export interface DM3Configuration {
theme?: any;
signInImage?: string;
siwe?: Siwe;
+ disableDialogOptions?: DisableDialogType;
}
export interface Dm3Props {
diff --git a/packages/next-messenger-demo/app/components/DM3Container.tsx b/packages/next-messenger-demo/app/components/DM3Container.tsx
index 5b25db6b2..0eb5b78fb 100644
--- a/packages/next-messenger-demo/app/components/DM3Container.tsx
+++ b/packages/next-messenger-demo/app/components/DM3Container.tsx
@@ -26,6 +26,7 @@ export default function DM3Container() {
showContacts: true, // true for all contacts / false for default contact
theme: undefined, // OPTIONAL PARAMETER : undefined/themeColors
signInImage: undefined, // OPTIONAL PARAMETER : string URL of image
+ disableDialogOptions: undefined, // OPTIONAL PARAMETER : to enable/disable dialog properties
};
return (