User settings page

src/components/ChannelDetails.js

@@ -29,6 +29,7 @@ import { appConfig } from 'config';
 import { device } from 'config/Globals';
 import { CHANNEL_TYPE } from 'helpers/UtilityHelper';
 import { getDateFromTimestamp, nextDaysDateFromTimestamp, timeRemaining } from 'helpers/TimerHelper';
+import APP_PATHS from 'config/AppPaths';
 
 
 const DATE_FORMAT = 'DD MMM, YYYY';
@@ -147,7 +148,7 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired,
   };
 
   const navigateToNotifSettings = () => {
-    navigate('/channel/settings');
+    navigate(APP_PATHS.ChannelSettings);
   };
 
   return (
@@ -317,13 +318,15 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired,
               <ChannelInfoHeader
                 title="Notification Settings"
                 description="Customize notification preferences for users"
-                Button={<ManageSettingsButton onClick={() => navigateToNotifSettings()} />}
+                Button={<ManageSettingsButton onClick={navigateToNotifSettings} />}
               />
               <ChannelInfoList
                 account={account}
                 isAddress={false}
                 items={channelSettings}
                 isLoading={false}
+                onClickEmptyListButton={navigateToNotifSettings}
+                emptyListButtonTitle='Add Setting'
               />
             </DelegateContainer>
           </Section>

src/components/Dropdown.tsx

@@ -1,6 +1,7 @@
 // React + Web3 Essentials
 import { shortenText } from 'helpers/UtilityHelper';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 // External Packages
 import styled, { useTheme } from 'styled-components';
@@ -15,6 +16,7 @@ export type DropdownValueType = {
   icon: string,
   textColor?: string,
   function: () => void,
+  to?: string; // Add the 'to' property for navigation
 }
 
 type DropdownProps = {
@@ -118,7 +120,7 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
                 cursor="pointer"
               />
             )}
-            {!dropdownValue?.link && dropdownValue?.function && (
+            {!dropdownValue?.to && !dropdownValue?.link && dropdownValue?.function && (
               <Span
                 width="max-content"
                 color={getTextColor(dropdownValue)}
@@ -130,6 +132,21 @@ function Dropdown({ dropdownValues, textColor, iconFilter, hoverBGColor }: Dropd
                 {dropdownValue.title}
               </Span>
             )}
+            {dropdownValue?.to && (
+              <Link to={dropdownValue.to} style={{ textDecoration: 'none' }}>
+                {/* You can customize the Link as needed */}
+                <Span
+                  width="max-content"
+                  color={getTextColor(dropdownValue)}
+                  margin="8px 10px"
+                  weight="400"
+                  size="15px"
+                  cursor="pointer"
+                >
+                  {dropdownValue.title}
+                </Span>
+              </Link>
+            )}
             {dropdownValue?.link && (
               <A
                 width="max-content"

src/components/InboxComponent.js

@@ -12,6 +12,7 @@ import SpamBox from 'segments/spam';
 
 // Internal Configs
 import GLOBALS from 'config/Globals';
+import APP_PATHS from 'config/AppPaths';
 
 const InboxComponent = ({isSpam}) => {
   const [showInbox, setShowInbox] = useState(!isSpam);
@@ -34,10 +35,10 @@ const InboxComponent = ({isSpam}) => {
     <Container>
       <NavBoxHolder>
         <NavHolder>
-          <NavTitleButton isActive={showInbox} onClick={()=>handleToggle('/inbox')}>
+          <NavTitleButton isActive={showInbox} onClick={()=>handleToggle(APP_PATHS.Inbox)}>
             Inbox
           </NavTitleButton>
-          <NavTitleButton isActive={!showInbox} onClick={()=>handleToggle('/spam')}>
+          <NavTitleButton isActive={!showInbox} onClick={()=>handleToggle(APP_PATHS.Spam)}>
             Spam
           </NavTitleButton>
         </NavHolder>

src/components/SendNotifications.tsx

@@ -40,6 +40,7 @@ import PreviewNotif from './PreviewNotif';
 // Internal Configs
 import { appConfig } from 'config';
 import { useAccount, useDeviceWidthCheck } from 'hooks';
+import APP_PATHS from 'config/AppPaths';
 
 // Constants
 const CORE_CHAIN_ID = appConfig.coreContractChain;
@@ -180,7 +181,7 @@ function SendNotifications() {
   }, [channelSettings]);  
 
   const openManageSettings = () => {
-    const newPageUrl = '/channels'; // Replace with the URL of the manage settings later
+    const newPageUrl = APP_PATHS.Channels; // Replace with the URL of the manage settings later
 
     // Use window.open() to open the URL in a new tab
     window.open(newPageUrl, '_blank');
@@ -189,7 +190,7 @@ function SendNotifications() {
   useEffect(() => {
     if (canSend !== 1) {
       const url = window.location.origin;
-      window.location.replace(`${url}/#/channels`);
+      window.location.replace(`${url}${APP_PATHS.Channels}`);
     }
   });
 

src/components/ViewChannelItem.js

@@ -1066,7 +1066,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser }) {
               <>
                 {isOwner && <OwnerButton disabled>Owner</OwnerButton>}
                 {!isOwner && (
-                  <ManageNotifSettingDropdown>
+                  <ManageNotifSettingDropdown centerOnMobile={true}>
                     <UnsubscribeButton
                       onClick={() => {}}
                       disabled={txInProgress}

src/components/channel/ChannelButtons.tsx

@@ -10,6 +10,10 @@ interface ChannelButtonProps {
   onClick: () => void;
 }
 
+interface ModifySettingsButtonProps extends ChannelButtonProps {
+  title?: string;
+}
+
 export const AddDelegateButton = ({ onClick }: ChannelButtonProps) => {
   return (
     <ChannelButton onClick={onClick}>
@@ -28,10 +32,10 @@ export const ManageSettingsButton = ({ onClick }: ChannelButtonProps) => {
   );
 };
 
-export const ModifySettingsButton = ({ onClick }: ChannelButtonProps) => {
+export const ModifySettingsButton = ({ onClick, title }: ModifySettingsButtonProps) => {
   return (
     <ChannelButtonWhite onClick={onClick}>
-      <TransparentButtonText>Modify Settings</TransparentButtonText>
+      <TransparentButtonText>{title ? title : 'Modify Settings'}</TransparentButtonText>
     </ChannelButtonWhite>
   );
 };

src/components/channel/ChannelInfoList.tsx

@@ -9,42 +9,40 @@ import { useNavigate } from 'react-router-dom';
 import { Item } from 'primaries/SharedStyling';
 import DelegateInfo from 'components/DelegateInfo';
 import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
-import Icon from 'assets/navigation/receiveNotifOffIcon.svg';
-import { ImageV2 } from 'components/reusables/SharedStylingV2';
-import { ModifySettingsButton } from './ChannelButtons';
 import DelegateSettingsDropdown, { ChannelDropdownOption } from './DelegateSettingsDropdown';
+import EmptyNotificationSettings from './EmptyNotificationSettings';
 
 // Internal Configs
 import { device } from 'config/Globals';
 import { ChannelSetting } from 'helpers/channel/types';
 
-const isOwner = (account: string, delegate: string) => {
-  return account.toLowerCase() === delegate.toLowerCase();
-};
-
-type ChannelInfoListProps =
-  | {
-      isAddress: true;
-      items: string[];
-      isLoading: boolean;
-      account: string;
-      style?: CSSProperties;
-      addressDropdownOptions: Array<ChannelDropdownOption>;
-    }
-  | {
-      isAddress: false;
-      items: Array<ChannelSetting>;
-      isLoading: boolean;
-      account: string;
-      style?: CSSProperties;
-      settingsDropdownOptions?: Array<ChannelDropdownOption>;
-    };
+// Types
+interface ChannelInfoListCommonProps {
+  isLoading: boolean;
+  account: string;
+  style?: CSSProperties;
+}
+
+interface AddressListOptions extends ChannelInfoListCommonProps {
+  isAddress: true;
+  items: string[];
+  addressDropdownOptions: Array<ChannelDropdownOption>;
+}
+
+interface SettingListOptions extends ChannelInfoListCommonProps {
+  isAddress: false;
+  items: Array<ChannelSetting>;
+  isLoading: boolean;
+  settingsDropdownOptions?: Array<ChannelDropdownOption>;
+  onClickEmptyListButton: () => void;
+  emptyListButtonTitle: string;
+}
+
+type ChannelInfoListProps = AddressListOptions | SettingListOptions;
 
 const ChannelInfoList = (props: ChannelInfoListProps) => {
-  const navigate = useNavigate();
-
-  const handleNavigateToModifySettings = () => {
-    navigate(`/channel/settings`);
+  const isOwner = (account: string, delegate: string) => {
+    return account.toLowerCase() === delegate.toLowerCase();
   };
 
   return (
@@ -112,20 +110,13 @@ const ChannelInfoList = (props: ChannelInfoListProps) => {
                   </div>
                 );
               })}
-            {props.items && props.items.length === 0 && !props.isAddress && (
-              <EmptyNotificationSetting>
-                <NotifIcon
-                  src={Icon}
-                  alt="No Settings"
-                  width="24px"
-                  height="24px"
-                />
-                <EmptyNotificationTitle>No settings added</EmptyNotificationTitle>
-                <EmptyNotificationDesc>
-                  Add settings for users to customize their notification preferences.
-                </EmptyNotificationDesc>
-                <ModifySettingsButton onClick={handleNavigateToModifySettings} />
-              </EmptyNotificationSetting>
+            {props.items && props.items.length === 0 && props.isAddress === false && (
+              <EmptyNotificationSettings
+                title="No settings added"
+                description="Add settings for users to customize their notification preferences."
+                onClick={props.onClickEmptyListButton}
+                buttonTitle={props.emptyListButtonTitle}
+              />
             )}
           </>
         )}
@@ -161,36 +152,6 @@ const NotificationSettingName = styled.span`
     props.theme.scheme === 'light' ? props.theme.default.color : props.theme.default.secondaryColor};
 `;
 
-const EmptyNotificationSetting = styled.div`
-  border-top: ${(props) => `1px solid ${props.theme.default.borderColor}`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin-bottom: 16px;
-`;
-
-const EmptyNotificationTitle = styled.div`
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  letter-spacing: 0em;
-  text-align: left;
-  color: ${(props) => props.theme.default.color};
-`;
-
-const EmptyNotificationDesc = styled.div`
-  margin-top: 1px;
-  margin-bottom: 16px;
-  color: ${(props) => props.theme.default.secondaryColor};
-`;
-
-const NotifIcon = styled(ImageV2)`
-  color: ${(props) => props.theme.default.color};
-  margin-top: 32px;
-  margin-bottom: 12px;
-`;
-
 const Divider = styled.div`
   background-color: ${(props) => props.theme.default.border};
   height: 1px;

src/components/channel/EmptyNotificationSettings.tsx

@@ -0,0 +1,76 @@
+// React + Web3 Essentials
+import React from 'react';
+
+// External Packages
+import styled from 'styled-components';
+
+// Internal Components
+import Icon from 'assets/navigation/receiveNotifOffIcon.svg';
+import { ImageV2 } from 'components/reusables/SharedStylingV2';
+import { ModifySettingsButton } from './ChannelButtons';
+
+// Types
+interface EmptyNotificationSettingsProps {
+  onClick: () => void;
+  title: string;
+  description: string;
+  buttonTitle?: string;
+  showTopBorder?: boolean;
+}
+
+const EmptyNotificationSettings = ({
+  description,
+  onClick,
+  title,
+  buttonTitle,
+  showTopBorder = true,
+}: EmptyNotificationSettingsProps) => {
+  return (
+    <EmptyNotificationSetting showTopBorder={showTopBorder}>
+      <NotifIcon
+        src={Icon}
+        alt="No Settings"
+        width="24px"
+        height="24px"
+      />
+      <EmptyNotificationTitle>{title}</EmptyNotificationTitle>
+      <EmptyNotificationDesc>{description}</EmptyNotificationDesc>
+      <ModifySettingsButton
+        onClick={onClick}
+        title={buttonTitle}
+      />
+    </EmptyNotificationSetting>
+  );
+};
+
+export default EmptyNotificationSettings;
+
+const EmptyNotificationSetting = styled.div<{ showTopBorder: boolean }>`
+  border-top: ${(props) => props.showTopBorder && `1px solid ${props.theme.default.borderColor}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+
+const EmptyNotificationTitle = styled.div`
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+  color: ${(props) => props.theme.default.color};
+`;
+
+const EmptyNotificationDesc = styled.div`
+  margin-top: 1px;
+  margin-bottom: 16px;
+  color: ${(props) => props.theme.default.secondaryColor};
+`;
+
+const NotifIcon = styled(ImageV2)`
+  color: ${(props) => props.theme.default.color};
+  margin-top: 32px;
+  margin-bottom: 12px;
+`;

src/components/channel/NotificationSettings.tsx

@@ -251,6 +251,8 @@ function NotificationSettings() {
         isAddress={false}
         isLoading={isLoadingSettings}
         items={settings}
+        onClickEmptyListButton={showAddSettingModal}
+        emptyListButtonTitle='Add Setting'
         settingsDropdownOptions={[
           {
             icon: <PiPencilSimpleBold />,