Merge pull request #1194 from dm3-org/1189-feature-flag

1189 feature flag
dm3-org · Oct 1, 2024 · 6ba9fb8 · 6ba9fb8
2 parents a22fd95 + a531752
commit 6ba9fb8
Show file tree

Hide file tree

Showing 22 changed files with 564 additions and 172 deletions.
diff --git a/packages/messenger-demo/src/App.tsx b/packages/messenger-demo/src/App.tsx
@@ -50,6 +50,7 @@ function App() {
         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/README.md b/packages/messenger-widget/README.md
@@ -89,7 +89,8 @@ Follow the below given steps :-
             showContacts: true,
             theme: undefined, 
             signInImage: undefined,
-            siwe: undefined
+            siwe: undefined,
+            disableDialogOptions: undefined,
         };
 
         return (
@@ -246,6 +247,7 @@ Follow the below given steps :-
             theme: undefined, 
             signInImage: undefined,
             siwe: undefined,
+            disableDialogOptions: undefined,
         };
 
         return (
@@ -453,11 +455,49 @@ Example :
     }
 ```
 
-7. theme
+7. disableDialogOptions
+```js
+const props: DM3Configuration = {
+   ...
+   disableDialogOptions: true,
+}
+```
+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 : 
+   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
 ```js
 const props: DM3Configuration = {
    ...
-   theme: undefined,
+   theme: undefined, 
 }
 ```
 This is a optional property of type object. Its used to customize the styling, look & feel of the widget. Colors can be set for different components.

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/CloudStorage.tsx
@@ -17,7 +17,7 @@ export function CloudStorage() {
 
     const { existingDm3Name } = useContext(ConfigureDM3NameContext);
 
-    const { configureProfileModal, setConfigureProfileModal } =
+    const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
         useContext(ModalContext);
 
     const isNameAlreadyConfigured = (): boolean => {
@@ -76,13 +76,21 @@ export function CloudStorage() {
                         }}
                     >
                         {dm3NamingServices &&
-                            dm3NamingServices.map((data, index) => {
-                                return (
-                                    <option value={data.name} key={index}>
-                                        {data.name}
-                                    </option>
-                                );
-                            })}
+                            // Filter out disabled options and show only enabled options
+                            dm3NamingServices
+                                .filter(
+                                    (d) =>
+                                        disabledOptions.profile.dm3.filter(
+                                            (p) => p.key === d.key && !p.value,
+                                        ).length,
+                                )
+                                .map((data, index) => {
+                                    return (
+                                        <option value={data.name} key={index}>
+                                            {data.name}
+                                        </option>
+                                    );
+                                })}
                     </select>
                 </div>
 

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/MobileView.tsx
@@ -27,7 +27,7 @@ export function MobileView() {
 
     const { account, ethAddress } = useContext(AuthContext);
 
-    const { configureProfileModal, setConfigureProfileModal } =
+    const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
         useContext(ModalContext);
 
     const { setEnsName, setNamingServiceSelected, existingEnsName } =
@@ -71,7 +71,11 @@ export function MobileView() {
     }, [ethAddress]);
 
     useEffect(() => {
-        if (connectedChainId) {
+        // set the naming service selected by default based on chain connected if no options are disabled
+        if (
+            connectedChainId &&
+            !disabledOptions.profile.own.filter((p) => p.value).length
+        ) {
             setNamingServiceSelected(fetchServiceFromChainId(connectedChainId));
         }
     }, []);

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx b/packages/messenger-widget/src/components/ConfigureProfile/NormalView.tsx
@@ -27,7 +27,7 @@ export function NormalView() {
 
     const { account, ethAddress } = useContext(AuthContext);
 
-    const { configureProfileModal, setConfigureProfileModal } =
+    const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
         useContext(ModalContext);
 
     const { setEnsName, setNamingServiceSelected, existingEnsName } =
@@ -71,7 +71,11 @@ export function NormalView() {
     }, [ethAddress]);
 
     useEffect(() => {
-        if (connectedChainId) {
+        // set the naming service selected by default based on chain connected if no options are disabled
+        if (
+            connectedChainId &&
+            !disabledOptions.profile.own.filter((p) => p.value).length
+        ) {
             setNamingServiceSelected(fetchServiceFromChainId(connectedChainId));
         }
     }, []);

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx b/packages/messenger-widget/src/components/ConfigureProfile/OwnStorage.tsx
@@ -7,7 +7,7 @@ import { ConfigureProfileContext } from './context/ConfigureProfileContext';
 export function OwnStorage() {
     const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
-    const { configureProfileModal, setConfigureProfileModal } =
+    const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
         useContext(ModalContext);
 
     const { existingEnsName, namingServiceSelected, setNamingServiceSelected } =
@@ -70,13 +70,21 @@ export function OwnStorage() {
                         }}
                     >
                         {namingServices &&
-                            namingServices.map((data, index) => {
-                                return (
-                                    <option value={data.name} key={index}>
-                                        {data.name}
-                                    </option>
-                                );
-                            })}
+                            // Filter out disabled options and show only enabled options
+                            namingServices
+                                .filter(
+                                    (n) =>
+                                        disabledOptions.profile.own.filter(
+                                            (p) => p.key === n.key && !p.value,
+                                        ).length,
+                                )
+                                .map((data, index) => {
+                                    return (
+                                        <option value={data.name} key={index}>
+                                            {data.name}
+                                        </option>
+                                    );
+                                })}
                     </select>
                 </div>
 

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx b/packages/messenger-widget/src/components/ConfigureProfile/ProfileTypeSelector.tsx
@@ -1,58 +1,78 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { ModalContext } from '../../context/ModalContext';
 import { ProfileScreenType, ProfileType } from '../../utils/enum-type-utils';
 import { BUTTON_CLASS } from './bl';
 
 export function ProfileTypeSelector() {
-    const { configureProfileModal, setConfigureProfileModal } =
+    const { configureProfileModal, setConfigureProfileModal, disabledOptions } =
         useContext(ModalContext);
 
     const profileOptions = [
         {
             name: 'Claim a dm3 Name (dm3 cloud, Optimism, ...)',
             type: ProfileType.DM3_NAME,
+            isEnabled: disabledOptions.profile.dm3.filter((d) => !d.value)
+                .length
+                ? true
+                : false,
         },
         {
             name: 'use your own Name (ENS, GENOME, ...)',
             type: ProfileType.OWN_NAME,
+            isEnabled: disabledOptions.profile.own.filter((d) => !d.value)
+                .length
+                ? true
+                : false,
         },
     ];
 
+    useEffect(() => {
+        const filteredOptions = profileOptions.filter((p) => p.isEnabled);
+        if (filteredOptions.length === 1) {
+            setConfigureProfileModal({
+                ...configureProfileModal,
+                profileOptionSelected: filteredOptions[0].type,
+            });
+        }
+    }, []);
+
     return (
         <div className="mt-4 ms-4 me-4 dm3-prof-select-container">
             <div className="dm3-prof-select-type">
                 Add new dm3 profile - select type
             </div>
 
             <div className="prof-option-container">
-                {profileOptions.map((option, index) => (
-                    <div
-                        key={index}
-                        className="radio d-flex mb-3 width-fit"
-                        onClick={() =>
-                            setConfigureProfileModal({
-                                ...configureProfileModal,
-                                profileOptionSelected: option.type,
-                            })
-                        }
-                    >
-                        <input
-                            type="radio"
-                            name="profile_name"
-                            value={option.type}
-                            checked={
-                                option.type ===
-                                configureProfileModal.profileOptionSelected
-                                    ? true
-                                    : false
+                {profileOptions
+                    .filter((p) => p.isEnabled)
+                    .map((option, index) => (
+                        <div
+                            key={index}
+                            className="radio d-flex mb-3 width-fit"
+                            onClick={() =>
+                                setConfigureProfileModal({
+                                    ...configureProfileModal,
+                                    profileOptionSelected: option.type,
+                                })
                             }
-                            readOnly
-                        />
-                        <label className="name-option radio-label">
-                            {option.name}
-                        </label>
-                    </div>
-                ))}
+                        >
+                            <input
+                                type="radio"
+                                name="profile_name"
+                                value={option.type}
+                                checked={
+                                    option.type ===
+                                    configureProfileModal.profileOptionSelected
+                                        ? true
+                                        : false
+                                }
+                                readOnly
+                            />
+                            <label className="name-option radio-label">
+                                {option.name}
+                            </label>
+                        </div>
+                    ))}
             </div>
             <div className="d-flex justify-content-end me-3 mb-3">
                 <button

diff --git a/packages/messenger-widget/src/components/ConfigureProfile/bl.tsx b/packages/messenger-widget/src/components/ConfigureProfile/bl.tsx
@@ -10,6 +10,7 @@ import { ConfigureCloudNameProfile } from './dm3Names/cloudName/ConfigureCloudNa
 import { ConfigureOptimismNameProfile } from './dm3Names/optimismName/ConfigureOptimismNameProfile';
 import { supportedChains } from '../../utils/common-utils';
 import { removeAlias } from '../../adapters/offchainResolverApi';
+import { PREFERENCES_ITEMS } from '../Preferences/bl';
 
 export const PROFILE_INPUT_FIELD_CLASS =
     'profile-input font-weight-400 font-size-14 border-radius-6 w-100 line-height-24';
@@ -26,9 +27,11 @@ export enum ACTION_TYPE {
 export const openConfigurationModal = (
     setShowProfileConfigurationModal: (show: boolean) => void,
     setShowPreferencesModal: (show: boolean) => void,
+    updatePreferenceSelected: (ticker: PREFERENCES_ITEMS | null) => void,
 ) => {
     setShowProfileConfigurationModal(true);
     setShowPreferencesModal(true);
+    updatePreferenceSelected(PREFERENCES_ITEMS.DM3_PROFILE);
 };
 
 // method to close the profile configuration modal
@@ -160,10 +163,12 @@ export const enum NAME_SERVICES {
 export const namingServices = [
     {
         name: NAME_SERVICES.ENS,
+        key: 'ens',
         chainId: supportedChains.ethereumMainnet,
     },
     {
         name: NAME_SERVICES.GENOME,
+        key: 'gnosis',
         chainId: supportedChains.gnosisMainnet,
     },
 ];
@@ -220,9 +225,11 @@ export const enum DM3_NAME_SERVICES {
 export const dm3NamingServices = [
     {
         name: DM3_NAME_SERVICES.CLOUD,
+        key: 'dm3',
     },
     {
         name: DM3_NAME_SERVICES.OPTIMISM,
+        key: 'optimism',
     },
 ];
 

diff --git a/...ages/messenger-widget/src/components/ConfigureProfile/context/ConfigureProfileContext.tsx b/...ages/messenger-widget/src/components/ConfigureProfile/context/ConfigureProfileContext.tsx
@@ -3,6 +3,7 @@ import { NAME_TYPE } from '../chain/common';
 import { dm3NamingServices, namingServices } from '../bl';
 import { AuthContext } from '../../../context/AuthContext';
 import { DM3ConfigurationContext } from '../../../context/DM3ConfigurationContext';
+import { ModalContext } from '../../../context/ModalContext';
 
 export interface ConfigureProfileContextType {
     existingEnsName: string | null;
@@ -43,13 +44,29 @@ export const ConfigureProfileContextProvider = (props: { children?: any }) => {
 
     const [errorMsg, setErrorMsg] = useState<string>('');
 
+    const { disabledOptions } = useContext(ModalContext);
+
     // DM3 Name service selected
+    // By default, first DM3 name is set from the dropdown which is not disabled
     const [dm3NameServiceSelected, setDm3NameServiceSelected] =
-        useState<string>(dm3NamingServices[0].name);
+        useState<string>(
+            dm3NamingServices.filter(
+                (d) =>
+                    disabledOptions.profile.dm3.filter(
+                        (p) => p.key === d.key && !p.value,
+                    ).length,
+            )[0]?.name,
+        );
 
     // ENS Name service selected
+    // By default, first ENS name is set from the dropdown which is not disabled
     const [namingServiceSelected, setNamingServiceSelected] = useState<string>(
-        namingServices[0].name,
+        namingServices.filter(
+            (n) =>
+                disabledOptions.profile.own.filter(
+                    (p) => p.key === n.key && !p.value,
+                ).length,
+        )[0]?.name,
     );
 
     const { displayName } = useContext(AuthContext);