From b71bb22af11e0067c53ed9339e7bb7cc532718c5 Mon Sep 17 00:00:00 2001
From: Monalisha Mishra <mishramonalisha76@gmail.com>
Date: Thu, 19 Sep 2024 18:53:25 +0530
Subject: [PATCH] added preview

---
 src/common/components/ChannelDetailsCard.tsx  |  46 +++--
 src/common/components/CopyButton.tsx          |  30 ++++
 src/common/components/index.ts                |   1 +
 .../components/ChannelDashboardHeader.tsx     |  18 +-
 src/modules/channelDetails/ChannelDetails.tsx |   2 +-
 .../channelDetails/ChannelDetails.utils.ts    |   5 +
 .../components/ChannelDetail.tsx              | 158 ++++++------------
 .../components/ChannelDetailSubscribe.tsx     |  16 +-
 .../channelDetails/components/ChannelList.tsx |  22 ++-
 .../components/ChannelTutorialContent.tsx     | 110 ++++++++++++
 .../components/RecentNotifications.tsx        |  83 +++++++++
 .../components/UserJourneyPreview.tsx         |  30 ++++
 .../components/FeaturedChannelsListItem.tsx   |   2 +-
 13 files changed, 377 insertions(+), 146 deletions(-)
 create mode 100644 src/common/components/CopyButton.tsx
 create mode 100644 src/modules/channelDetails/ChannelDetails.utils.ts
 create mode 100644 src/modules/channelDetails/components/ChannelTutorialContent.tsx
 create mode 100644 src/modules/channelDetails/components/RecentNotifications.tsx
 create mode 100644 src/modules/channelDetails/components/UserJourneyPreview.tsx

diff --git a/src/common/components/ChannelDetailsCard.tsx b/src/common/components/ChannelDetailsCard.tsx
index c369af0345..eb2f01d2c0 100644
--- a/src/common/components/ChannelDetailsCard.tsx
+++ b/src/common/components/ChannelDetailsCard.tsx
@@ -11,7 +11,6 @@ import {
   Box,
   Button,
   CaretDown,
-  Ethereum,
   NotificationMobile,
   ResponsiveProp,
   Skeleton,
@@ -22,6 +21,7 @@ import {
 import { SubscribeChannelDropdown } from 'common/components/SubscribeChannelDropdown';
 import { UnsubscribeChannelDropdown } from 'common/components/UnsubscribeChannelDropdown';
 import { UserSetting } from 'helpers/channel/types';
+import { appConfig } from 'config';
 
 export type ChannelDetailsCardProps = {
   channelDetails: ChannelDetails | undefined;
@@ -42,10 +42,12 @@ const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
   userSettings,
   width,
 }) => {
-  const AliasChain = channelDetails?.alias_blockchain_id && LOGO_ALIAS_CHAIN[+channelDetails.alias_blockchain_id];
-
-  const hasAliasAddress =
-    channelDetails && channelDetails?.alias_address != null && channelDetails?.alias_address != 'NULL';
+  let verifiedAliasChainIds = [
+    appConfig.coreContractChain,
+    ...(channelDetails?.aliases
+      ?.filter((item) => item.is_alias_verified)
+      .map((item) => parseInt(item.alias_blockchain_id)) || []),
+  ];
   return (
     <Box
       display="flex"
@@ -169,16 +171,30 @@ const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
                 </Tooltip>
               )}
 
-              <Ethereum
-                width={16}
-                height={16}
-              />
-
-              {hasAliasAddress && AliasChain && (
-                <AliasChain
-                  width={16}
-                  height={16}
-                />
+              {verifiedAliasChainIds.length > 0 && (
+                <Box
+                  display="flex"
+                  alignItems="center"
+                  margin="spacing-none spacing-none spacing-none spacing-xxxs"
+                >
+                  {verifiedAliasChainIds.map((aliasChainId: number) => {
+                    const LogoComponent = LOGO_ALIAS_CHAIN[aliasChainId];
+                    return LogoComponent ? (
+                      <Box
+                        display="flex"
+                        css={css`
+                          margin-left: -5px;
+                        `}
+                      >
+                        <LogoComponent
+                          key={aliasChainId}
+                          width={16}
+                          height={16}
+                        />
+                      </Box>
+                    ) : null;
+                  })}
+                </Box>
               )}
             </Box>
           </Skeleton>
diff --git a/src/common/components/CopyButton.tsx b/src/common/components/CopyButton.tsx
new file mode 100644
index 0000000000..724c2e470a
--- /dev/null
+++ b/src/common/components/CopyButton.tsx
@@ -0,0 +1,30 @@
+import { Copy, Tooltip, Text, Box } from 'blocks';
+import { copyToClipboard } from 'helpers/UtilityHelper';
+import { FC, useState } from 'react';
+
+type CopyButtonProps = {
+  tooltipTitle: string;
+  content: string;
+};
+
+const CopyButton: FC<CopyButtonProps> = ({ tooltipTitle, content }) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <Tooltip title={tooltipTitle}>
+      <Box
+        cursor="pointer"
+        display="flex"
+        onClick={() => copyToClipboard(content)}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+      >
+        <Copy
+          color={hover ? 'icon-primary' : 'icon-tertiary'}
+          size={12}
+        />
+      </Box>
+    </Tooltip>
+  );
+};
+
+export { CopyButton };
diff --git a/src/common/components/index.ts b/src/common/components/index.ts
index 196eee5103..1e60e3c355 100644
--- a/src/common/components/index.ts
+++ b/src/common/components/index.ts
@@ -6,4 +6,5 @@ export * from './UnsubscribeChannelDropdown';
 export * from './ModalHeader';
 export * from './StakingVariant';
 export * from './TokenFaucet';
+export * from './CopyButton';
 export * from './VerifiedChannelTooltipContent';
diff --git a/src/modules/channelDashboard/components/ChannelDashboardHeader.tsx b/src/modules/channelDashboard/components/ChannelDashboardHeader.tsx
index 8f4aa58e76..837c2a245b 100644
--- a/src/modules/channelDashboard/components/ChannelDashboardHeader.tsx
+++ b/src/modules/channelDashboard/components/ChannelDashboardHeader.tsx
@@ -10,7 +10,7 @@ import {
   KebabMenuHorizontal,
   Menu,
   MenuItem,
-  Skeleton
+  Skeleton,
 } from 'blocks';
 
 import { Alias, ChannelDetails } from 'queries';
@@ -32,7 +32,7 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
   channelDetails,
   setActiveState,
   onActiveNetwork,
-  currentAliasDetails
+  currentAliasDetails,
 }) => {
   const { chainId } = useAccount();
   const isAliasVerified = currentAliasDetails && currentAliasDetails?.is_alias_verified === 0;
@@ -54,7 +54,12 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
 
       {/* Edit Channel and Dropdown only visible on Core network */}
       {onCoreNetwork && (
-        <Box display="flex" height="fit-content" gap="spacing-xxs" justifyContent="center">
+        <Box
+          display="flex"
+          height="fit-content"
+          gap="spacing-xxs"
+          justifyContent="center"
+        >
           <Skeleton isLoading={!channelDetails?.name}>
             <Button
               variant="outline"
@@ -68,7 +73,7 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
 
           <Skeleton isLoading={!channelDetails?.name}>
             <Dropdown
-              trigger="click"
+              trigger="hover"
               overlay={
                 <Menu>
                   <MenuItem
@@ -104,7 +109,10 @@ const ChannelDashboardHeader: FC<ChannelDashboardHeaderProps> = ({
                 cursor="pointer"
                 alignItems="center"
               >
-                <KebabMenuHorizontal size={24} color="icon-primary" />
+                <KebabMenuHorizontal
+                  size={24}
+                  color="icon-primary"
+                />
               </Box>
             </Dropdown>
           </Skeleton>
diff --git a/src/modules/channelDetails/ChannelDetails.tsx b/src/modules/channelDetails/ChannelDetails.tsx
index 910bdc4086..5f79255d17 100644
--- a/src/modules/channelDetails/ChannelDetails.tsx
+++ b/src/modules/channelDetails/ChannelDetails.tsx
@@ -34,7 +34,6 @@ const ChannelDetails: FC = () => {
   //delete old channel page
   return (
     <Box
-      height="90vh"
       width="-webkit-fill-available"
       padding="spacing-md spacing-sm"
       display="flex"
@@ -50,6 +49,7 @@ const ChannelDetails: FC = () => {
         hasMoreData={hasMoreData}
         isLoading={isLoading}
         setSelectedChannelId={setSelectedChannelId}
+        isFetchingNextPage={isFetchingNextPage}
       />
       <ChannelDetail
         channel={selectedChannel}
diff --git a/src/modules/channelDetails/ChannelDetails.utils.ts b/src/modules/channelDetails/ChannelDetails.utils.ts
new file mode 100644
index 0000000000..ab135025e7
--- /dev/null
+++ b/src/modules/channelDetails/ChannelDetails.utils.ts
@@ -0,0 +1,5 @@
+import channelTuts from 'config/channelTuts';
+
+export const getChannelTutorialDetails = (address: string) => {
+  return Object.values(channelTuts).find((tutorial) => tutorial.maintainer === address) || null;
+};
diff --git a/src/modules/channelDetails/components/ChannelDetail.tsx b/src/modules/channelDetails/components/ChannelDetail.tsx
index d30f277906..d259bdf359 100644
--- a/src/modules/channelDetails/components/ChannelDetail.tsx
+++ b/src/modules/channelDetails/components/ChannelDetail.tsx
@@ -2,43 +2,37 @@ import { FC, useState } from 'react';
 
 import { css } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import { NotificationItem, chainNameType } from '@pushprotocol/uiweb';
 
 import { ChannelDetailSubscribe } from './ChannelDetailSubscribe';
-import { Box, Text, Back, Tag, Copy, Skeleton, Tutorial } from 'blocks';
-import { LOGO_ALIAS_CHAIN } from 'common';
+import { RecentNotifications } from './RecentNotifications';
+import { Box, Text, Back, Tag, Skeleton, Tutorial, Tooltip, TickDecoratedCircleFilled } from 'blocks';
+import { CopyButton, LOGO_ALIAS_CHAIN, VerifiedChannelTooltipContent, formatSubscriberCount } from 'common';
 
-import { useBlocksTheme } from 'blocks/Blocks.hooks';
-import { ChannelDetails, useGetChannelNotifications } from 'queries';
+import { ChannelDetails } from 'queries';
 
-import { copyToClipboard, shortenText } from 'helpers/UtilityHelper';
+import { shortenText } from 'helpers/UtilityHelper';
 
 import APP_PATHS from 'config/AppPaths';
 import { appConfig } from 'config';
 
+import { ChannelTutorialContent } from './ChannelTutorialContent';
+import { getChannelTutorialDetails } from '../ChannelDetails.utils';
+
 export type ChannelDetailProps = { channel: ChannelDetails; isLoading: boolean };
 const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
   const [showMore, setShowMore] = useState<boolean>(false);
   const navigate = useNavigate();
-  const { mode } = useBlocksTheme();
-
-  const {
-    data: notificationsData,
-    isLoading: isNotificationsLoading,
-    isSuccess,
-  } = useGetChannelNotifications(channel?.channel, 1, 20);
 
-  const notifications = isNotificationsLoading ? Array(10).fill(0) : notificationsData;
   //fetch channel category
   //notification component doesnot update in sdk
-  //copy color
-  //manage button color
-  let verifiedAliasChainIds =
-    channel?.aliases?.filter((item) => item.is_alias_verified).map((item) => parseInt(item.alias_blockchain_id)) || [];
 
-  if (verifiedAliasChainIds.length > 0) {
-    verifiedAliasChainIds.unshift(appConfig.coreContractChain);
-  }
+  let verifiedAliasChainIds = [
+    appConfig.coreContractChain,
+    ...(channel?.aliases?.filter((item) => item.is_alias_verified).map((item) => parseInt(item.alias_blockchain_id)) ||
+      []),
+  ];
+
+  const tutotrialDetails = getChannelTutorialDetails(channel?.channel);
 
   return (
     <Box
@@ -64,7 +58,10 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
             onClick={() => navigate(APP_PATHS.Channels)}
             cursor="pointer"
           >
-            <Back size={24} />
+            <Back
+              size={24}
+              color="icon-primary"
+            />
           </Box>
           <Box
             display="flex"
@@ -123,6 +120,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
                     <Box
                       display="flex"
                       alignItems="center"
+                      gap="spacing-xxxs"
                     >
                       <Text
                         color="text-primary"
@@ -130,11 +128,24 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
                       >
                         {channel?.name || ''}
                       </Text>
+                      {!!channel?.verified_status && (
+                        <Tooltip overlay={<VerifiedChannelTooltipContent />}>
+                          <Box
+                            cursor="pointer"
+                            display="flex"
+                          >
+                            <TickDecoratedCircleFilled
+                              color="icon-tertiary"
+                              size={18}
+                            />
+                          </Box>
+                        </Tooltip>
+                      )}
                       {verifiedAliasChainIds.length > 0 && (
                         <Box
                           display="flex"
                           alignItems="center"
-                          margin="spacing-none spacing-none spacing-none spacing-xs"
+                          margin="spacing-none spacing-none spacing-none spacing-xxxs"
                         >
                           {verifiedAliasChainIds.map((aliasChainId: number) => {
                             const LogoComponent = LOGO_ALIAS_CHAIN[aliasChainId];
@@ -167,15 +178,11 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
                       >
                         {shortenText(channel?.channel || '', 10, 10) || ''}
                       </Text>
-                      <Box
-                        cursor="pointer"
-                        onClick={() => copyToClipboard(channel?.channel || '')}
-                      >
-                        <Copy
-                          color="icon-tertiary"
-                          size={12}
-                        />
-                      </Box>
+
+                      <CopyButton
+                        tooltipTitle="Copy Address"
+                        content={channel?.channel || ''}
+                      />
                     </Box>
                   </Box>
                 </Skeleton>
@@ -183,28 +190,18 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
                   <Box
                     display="flex"
                     gap="spacing-xs"
+                    css={css`
+                      flex-wrap: wrap;
+                    `}
                   >
                     <Text
                       color="text-tertiary-inverse"
                       variant="c-regular"
                     >
-                      {channel?.subscriber_count} subscribers
+                      {formatSubscriberCount(channel?.subscriber_count)} subscribers
                     </Text>
-                    <Box
-                      display="flex"
-                      gap="spacing-xxxs"
-                    >
-                      <Tutorial
-                        size={16}
-                        color="icon-tertiary"
-                      />
-                      <Text
-                        color="text-tertiary-inverse"
-                        variant="c-regular"
-                      >
-                        Tutotrial
-                      </Text>
-                    </Box>
+
+                    {tutotrialDetails && <ChannelTutorialContent tutotrialDetails={tutotrialDetails} />}
                     <Tag
                       label="Defi"
                       variant="info"
@@ -227,7 +224,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
               color="text-tertiary"
               as="span"
             >
-              {!showMore ? (channel?.info || '').substring(0, 231) : channel?.info || ''}
+              {!showMore ? (channel?.info || '').substring(0, 250) : channel?.info || ''}
             </Text>
             <Text
               display={{ dp: 'none', ml: 'inline' }}
@@ -235,7 +232,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
               color="text-tertiary"
               as="span"
             >
-              {!showMore ? (channel?.info || '').substring(0, 231) : channel?.info || ''}
+              {!showMore ? (channel?.info || '').substring(0, 250) : channel?.info || ''}
             </Text>
             <Box
               as="span"
@@ -265,66 +262,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
           <ChannelDetailSubscribe channel={channel} />
         </Box>
       </Box>
-      <Box
-        display="flex"
-        flexDirection="column"
-        width="100%"
-        overflow="hidden"
-      >
-        <Text
-          color="text-primary"
-          variant="h4-semibold"
-        >
-          Recent Notifications
-        </Text>
-        <Box
-          display="flex"
-          width="100%"
-          flexDirection="column"
-          overflow="auto"
-          justifyContent="flex-start"
-          customScrollbar={true}
-        >
-          {isSuccess && !isNotificationsLoading && !notifications?.length && (
-            <Box
-              display="flex"
-              alignSelf="center"
-              width="fit-content"
-              borderRadius="radius-xl"
-              backgroundColor="surface-secondary"
-              padding="spacing-xxs spacing-sm"
-            >
-              <Text
-                color="text-primary"
-                variant="bs-regular"
-              >
-                {' '}
-                No notifications to show yet
-              </Text>
-            </Box>
-          )}
-          {notifications?.map((item) => {
-            const payload = item?.message?.payload;
-            return (
-              <Skeleton isLoading={isNotificationsLoading}>
-                <Box key={item.payload_id}>
-                  <NotificationItem
-                    notificationTitle={payload?.title}
-                    notificationBody={payload?.body}
-                    cta={payload?.cta}
-                    image={payload?.embed}
-                    app={item?.channel?.name}
-                    icon={item?.channel?.icon}
-                    url={item?.channel?.url}
-                    chainName={item?.source as chainNameType}
-                    theme={mode}
-                  />
-                </Box>
-              </Skeleton>
-            );
-          })}
-        </Box>
-      </Box>
+      <RecentNotifications channelAddress={channel?.channel} />
     </Box>
   );
 };
diff --git a/src/modules/channelDetails/components/ChannelDetailSubscribe.tsx b/src/modules/channelDetails/components/ChannelDetailSubscribe.tsx
index 46372bbb95..03e3ac4d6b 100644
--- a/src/modules/channelDetails/components/ChannelDetailSubscribe.tsx
+++ b/src/modules/channelDetails/components/ChannelDetailSubscribe.tsx
@@ -1,9 +1,12 @@
-import { Box, Button, CaretDown, Skeleton } from 'blocks';
-import { SubscribeChannelDropdown, UnsubscribeChannelDropdown } from 'common';
-import { UserSetting } from 'helpers/channel/types';
+import { FC } from 'react';
+
 import { useAccount } from 'hooks';
 import { ChannelDetails, useGetUserSubscriptions } from 'queries';
-import { FC } from 'react';
+
+import { Button, CaretDown, NotificationMobile, Skeleton } from 'blocks';
+import { SubscribeChannelDropdown, UnsubscribeChannelDropdown } from 'common';
+
+import { UserSetting } from 'helpers/channel/types';
 
 export type ChannelDetailSubscribeProps = {
   channel: ChannelDetails;
@@ -49,12 +52,13 @@ const ChannelDetailSubscribe: FC<ChannelDetailSubscribeProps> = ({ channel }) =>
           userSetting={JSON.parse(userSubscription[0].user_settings) as UserSetting[]}
         >
           <Button
-            variant="outline"
+            variant="secondary"
             size="small"
             block
+            leadingIcon={<NotificationMobile />}
             trailingIcon={<CaretDown />}
           >
-            Manage
+            Subscribed
           </Button>
         </UnsubscribeChannelDropdown>
       )}
diff --git a/src/modules/channelDetails/components/ChannelList.tsx b/src/modules/channelDetails/components/ChannelList.tsx
index 471ad06aae..dc368604be 100644
--- a/src/modules/channelDetails/components/ChannelList.tsx
+++ b/src/modules/channelDetails/components/ChannelList.tsx
@@ -10,6 +10,7 @@ import { ChannelDetails, ChannelsListModelledResponse } from 'queries';
 export type ChannelListProps = {
   channels: Array<ChannelDetails>;
   hasMoreData: boolean;
+  isFetchingNextPage: boolean;
   isLoading: boolean;
   setSelectedChannelId: React.Dispatch<React.SetStateAction<string>>;
   fetchNextPage: (
@@ -22,6 +23,7 @@ const ChannelList: FC<ChannelListProps> = ({
   setSelectedChannelId,
   isLoading,
   hasMoreData,
+  isFetchingNextPage,
 }) => {
   return (
     <Box
@@ -40,14 +42,6 @@ const ChannelList: FC<ChannelListProps> = ({
           fetchNextPage();
         }}
         hasMore={hasMoreData}
-        loader={
-          <Box
-            margin="spacing-xs"
-            key="loader-spinner"
-          >
-            <Spinner />
-          </Box>
-        }
         useWindow={false}
         threshold={150}
       >
@@ -78,6 +72,18 @@ const ChannelList: FC<ChannelListProps> = ({
           ))}
         </Box>
       </InfiniteScroll>
+      {isFetchingNextPage && (
+        <Box
+          justifyContent="center"
+          display="flex"
+          padding="spacing-sm"
+        >
+          <Spinner
+            size="small"
+            variant="primary"
+          />
+        </Box>
+      )}
     </Box>
   );
 };
diff --git a/src/modules/channelDetails/components/ChannelTutorialContent.tsx b/src/modules/channelDetails/components/ChannelTutorialContent.tsx
new file mode 100644
index 0000000000..08ce246fc2
--- /dev/null
+++ b/src/modules/channelDetails/components/ChannelTutorialContent.tsx
@@ -0,0 +1,110 @@
+import { FC, useState } from 'react';
+
+import { Box, Button, Dropdown, ExternalLink, Link, Text, Tutorial } from 'blocks';
+
+import { useBlocksTheme } from 'blocks/Blocks.hooks';
+import { UserJourney } from './UserJourneyPreview';
+import { useDisclosure } from 'common';
+
+export type ChannelTutorialContentProps = { tutotrialDetails: any };
+const ChannelTutorialContent: FC<ChannelTutorialContentProps> = ({ tutotrialDetails }) => {
+  const { mode } = useBlocksTheme();
+  const modalControl = useDisclosure();
+
+  return (
+    <Dropdown
+      trigger="hover"
+      overlay={
+        <Box
+          backgroundColor="surface-secondary"
+          padding="spacing-xs"
+          borderRadius="radius-sm"
+          display="flex"
+          gap="spacing-md"
+          flexDirection="column"
+        >
+          {tutotrialDetails.userjourneyshort && (
+            <Box
+              display="flex"
+              flexDirection="column"
+              gap="spacing-xxs"
+            >
+              <Text
+                color="text-primary"
+                variant="bm-semibold"
+              >
+                Subscribe to enable
+              </Text>
+
+              <Box
+                width="218px"
+                height="142px"
+                borderRadius="radius-xs"
+              >
+                <img
+                  width="100%"
+                  height="100%"
+                  src={`./tuts/${tutotrialDetails?.userjourneyshort}/${tutotrialDetails?.userjourneyshort}_${mode}.png`}
+                  srcSet={`./tuts/${tutotrialDetails?.userjourneyshort}/${tutotrialDetails?.userjourneyshort}_${mode}@2x.png 2x, ./tuts/${tutotrialDetails?.userjourneyshort}/${tutotrialDetails?.userjourneyshort}_${mode}@3x.png 3x`}
+                  alt={`${tutotrialDetails?.userjourneyshort}`}
+                />
+              </Box>
+            </Box>
+          )}
+          <Box
+            display="flex"
+            justifyContent="space-between"
+          >
+            {tutotrialDetails?.userjourneyyoutube && (
+              <Button
+                variant="outline"
+                leadingIcon={<Tutorial color="icon-primary" />}
+                size="small"
+                onClick={() => modalControl.open()}
+              >
+                {' '}
+                User Journey
+              </Button>
+            )}
+            {tutotrialDetails?.article && (
+              <Link
+                to={tutotrialDetails?.article}
+                target="_blank"
+              >
+                <Button
+                  size="small"
+                  variant="outline"
+                  iconOnly={<ExternalLink />}
+                />
+              </Link>
+            )}
+          </Box>
+        </Box>
+      }
+    >
+      <Box
+        display="flex"
+        gap="spacing-xxxs"
+      >
+        <Tutorial
+          size={16}
+          color="icon-tertiary"
+        />
+        <Text
+          color="text-tertiary-inverse"
+          variant="c-regular"
+        >
+          Tutotrial
+        </Text>
+        {modalControl.isOpen && (
+          <UserJourney
+            modalControl={modalControl}
+            videoLink={tutotrialDetails?.userjourneyyoutube}
+          />
+        )}
+      </Box>
+    </Dropdown>
+  );
+};
+
+export { ChannelTutorialContent };
diff --git a/src/modules/channelDetails/components/RecentNotifications.tsx b/src/modules/channelDetails/components/RecentNotifications.tsx
new file mode 100644
index 0000000000..37c582eb85
--- /dev/null
+++ b/src/modules/channelDetails/components/RecentNotifications.tsx
@@ -0,0 +1,83 @@
+import { FC } from 'react';
+
+import { NotificationItem, chainNameType } from '@pushprotocol/uiweb';
+
+import { Box, Skeleton, Text } from 'blocks';
+
+import { useBlocksTheme } from 'blocks/Blocks.hooks';
+import { useGetChannelNotifications } from 'queries';
+
+export type RecentNotificationsProps = { channelAddress: string };
+const RecentNotifications: FC<RecentNotificationsProps> = ({ channelAddress }) => {
+  const { mode } = useBlocksTheme();
+  const {
+    data: notificationsData,
+    isLoading: isNotificationsLoading,
+    isSuccess,
+  } = useGetChannelNotifications(channelAddress, 1, 20);
+
+  const notifications = isNotificationsLoading ? Array(10).fill(0) : notificationsData;
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      width="100%"
+      overflow="hidden"
+    >
+      <Text
+        color="text-primary"
+        variant="h4-semibold"
+      >
+        Recent Notifications
+      </Text>
+      <Box
+        display="flex"
+        width="100%"
+        flexDirection="column"
+        overflow="auto"
+        justifyContent="flex-start"
+        customScrollbar={true}
+      >
+        {isSuccess && !isNotificationsLoading && !notifications?.length && (
+          <Box
+            display="flex"
+            alignSelf="center"
+            width="fit-content"
+            borderRadius="radius-xl"
+            backgroundColor="surface-secondary"
+            padding="spacing-xxs spacing-sm"
+          >
+            <Text
+              color="text-primary"
+              variant="bs-regular"
+            >
+              {' '}
+              No notifications to show yet
+            </Text>
+          </Box>
+        )}
+        {notifications?.map((item) => {
+          const payload = item?.message?.payload;
+          return (
+            <Skeleton isLoading={isNotificationsLoading}>
+              <Box key={item.payload_id}>
+                <NotificationItem
+                  notificationTitle={payload?.title}
+                  notificationBody={payload?.body}
+                  cta={payload?.cta}
+                  image={payload?.embed}
+                  app={item?.channel?.name}
+                  icon={item?.channel?.icon}
+                  url={item?.channel?.url}
+                  chainName={item?.source as chainNameType}
+                  theme={mode}
+                />
+              </Box>
+            </Skeleton>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+export { RecentNotifications };
diff --git a/src/modules/channelDetails/components/UserJourneyPreview.tsx b/src/modules/channelDetails/components/UserJourneyPreview.tsx
new file mode 100644
index 0000000000..d4f04a5cbf
--- /dev/null
+++ b/src/modules/channelDetails/components/UserJourneyPreview.tsx
@@ -0,0 +1,30 @@
+import { Box, Modal } from 'blocks';
+import { ModalResponse } from 'common';
+import { FC } from 'react';
+
+export type UserJourneyProps = { videoLink: string; modalControl: ModalResponse };
+const UserJourney: FC<UserJourneyProps> = ({ videoLink, modalControl }) => {
+  const { isOpen, onClose } = modalControl;
+  return (
+    <Modal
+      size="large"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <Box
+        width="100%"
+        height="100%"
+      >
+        <iframe
+          width="100%"
+          height="100%"
+          src={videoLink}
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
+      </Box>
+    </Modal>
+  );
+};
+
+export { UserJourney };
diff --git a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx
index 475d176edd..7316251754 100644
--- a/src/modules/dashboard/components/FeaturedChannelsListItem.tsx
+++ b/src/modules/dashboard/components/FeaturedChannelsListItem.tsx
@@ -37,7 +37,7 @@ const FeaturedChannelsListItem: FC<FeaturedChannelsListItemProps> = (props) => {
       isSubscribed={isSubscribed}
       isSubscriptionLoading={isSubscriptionLoading}
       handleRefetch={handleRefetch}
-      userSettings={JSON.parse(userSubscription?.[0].user_settings || '[]') as UserSetting[]}
+      userSettings={JSON.parse(userSubscription?.[0]?.user_settings || '[]') as UserSetting[]}
     />
   );
 };