Channels Subscription Issue

.github/workflows/preview.yml

@@ -11,7 +11,7 @@ on:
 concurrency: preview-${{ github.ref }}
 jobs:
   deploy-preview:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - name: Set up environment variables
         run: |

src/modules/channelDetails/ChannelDetails.tsx

@@ -1,20 +1,28 @@
+import { css } from 'styled-components';
 import { FC, useEffect, useState } from 'react';
-
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { useGetChannelDetails, useGetChannelslist } from 'queries';
 
 import { ChannelDetail } from './components/ChannelDetail';
 import { ChannelList } from './components/ChannelList';
 import { Box } from 'blocks';
+import { ProfileModalVisibilityType } from 'common';
 
 import { isAddress } from 'ethers/lib/utils';
 import APP_PATHS from 'config/AppPaths';
 
+import UnlockProfileWrapper, { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfileWrapper';
+
 const ChannelDetails: FC = () => {
   const { id } = useParams();
   const navigate = useNavigate();
   const [selectedChannelId, setSelectedChannelId] = useState<string>(id || '');
+  // State to handle the profile modal
+  const [profileModalVisibility, setProfileModalVisibility] = useState<ProfileModalVisibilityType>({
+    isVisible: false,
+    channel_id: null,
+  });
 
   const { data, fetchNextPage, hasNextPage, isLoading, isFetchingNextPage } = useGetChannelslist({
     pageSize: 15,
@@ -55,7 +63,34 @@ const ChannelDetails: FC = () => {
         <ChannelDetail
           channel={selectedChannel}
           isLoading={isLoading}
+          onChangeProfileModalVisibility={(data) => setProfileModalVisibility(data)}
+          profileModalVisibility={profileModalVisibility}
         />
+
+        {/* Render Unlock profile modal if the profile is not enabled */}
+        {profileModalVisibility?.isVisible && (
+          <Box
+            display="flex"
+            justifyContent="center"
+            width="-webkit-fill-available"
+            alignItems="center"
+            css={css`
+              z-index: 99999;
+            `}
+          >
+            <UnlockProfileWrapper
+              type={UNLOCK_PROFILE_TYPE.MODAL}
+              showConnectModal={true}
+              onClose={() =>
+                setProfileModalVisibility({
+                  isVisible: false,
+                  channel_id: null,
+                })
+              }
+              description="Unlock your profile to proceed."
+            />
+          </Box>
+        )}
       </Box>
     )
   );

src/modules/channelDetails/components/ChannelDetail.tsx

@@ -10,6 +10,7 @@ import { Box, Text, Back, Tag, Skeleton, Tooltip, TickDecoratedCircleFilled } fr
 import {
   CopyButton,
   LOGO_ALIAS_CHAIN,
+  ProfileModalVisibilityType,
   VerifiedChannelTooltipContent,
   channelCategoriesMap,
   formatSubscriberCount,
@@ -24,8 +25,18 @@ import { appConfig } from 'config';
 
 // import { getChannelTutorialDetails } from '../ChannelDetails.utils';
 
-export type ChannelDetailProps = { channel: ChannelDetails; isLoading: boolean };
-const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
+export type ChannelDetailProps = {
+  channel: ChannelDetails;
+  isLoading: boolean;
+  onChangeProfileModalVisibility: (value: ProfileModalVisibilityType) => void;
+  profileModalVisibility: ProfileModalVisibilityType;
+};
+const ChannelDetail: FC<ChannelDetailProps> = ({
+  channel,
+  isLoading,
+  onChangeProfileModalVisibility,
+  profileModalVisibility,
+}) => {
   const [showMore, setShowMore] = useState<boolean>(false);
   const navigate = useNavigate();
   const isInfoMore = (channel?.info || '').length > 250;
@@ -232,7 +243,11 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
               </Box>
             </Box>
             <Box display={{ initial: 'inline', ml: 'none' }}>
-              <ChannelDetailSubscribe channel={channel} />
+              <ChannelDetailSubscribe
+                channel={channel}
+                onChangeProfileModalVisibility={onChangeProfileModalVisibility}
+                profileModalVisibility={profileModalVisibility}
+              />
             </Box>
           </Box>
         </Box>

src/modules/channelDetails/components/ChannelDetailSubscribe.tsx

@@ -4,15 +4,21 @@ import { useAccount } from 'hooks';
 import { ChannelDetails, useGetUserSubscriptions } from 'queries';
 
 import { Button, CaretDown, NotificationMobile, Skeleton } from 'blocks';
-import { SubscribeChannelDropdown, UnsubscribeChannelDropdown } from 'common';
+import { ProfileModalVisibilityType, SubscribeChannelDropdown, UnsubscribeChannelDropdown } from 'common';
 
 import { UserSetting } from 'helpers/channel/types';
 
 export type ChannelDetailSubscribeProps = {
   channel: ChannelDetails;
+  onChangeProfileModalVisibility?: (value: ProfileModalVisibilityType) => void;
+  profileModalVisibility?: ProfileModalVisibilityType;
 };
 
-const ChannelDetailSubscribe: FC<ChannelDetailSubscribeProps> = ({ channel }) => {
+const ChannelDetailSubscribe: FC<ChannelDetailSubscribeProps> = ({
+  channel,
+  onChangeProfileModalVisibility,
+  profileModalVisibility,
+}) => {
   const { wallet } = useAccount();
 
   const isWalletConnected = !!wallet?.accounts?.length;
@@ -28,12 +34,15 @@ const ChannelDetailSubscribe: FC<ChannelDetailSubscribeProps> = ({ channel }) =>
   const handleRefetch = () => {
     refetchUserSubscription();
   };
+
   return (
     <Skeleton isLoading={isSubscriptionLoading}>
       {channel && !isSubscribed && (
         <SubscribeChannelDropdown
           channelDetails={channel}
           onSuccess={handleRefetch}
+          onChangeProfileModalVisibility={onChangeProfileModalVisibility}
+          profileModalVisibility={profileModalVisibility}
         >
           <Button
             variant="tertiary"
@@ -49,6 +58,8 @@ const ChannelDetailSubscribe: FC<ChannelDetailSubscribeProps> = ({ channel }) =>
         <UnsubscribeChannelDropdown
           channelDetail={channel}
           onSuccess={handleRefetch}
+          onChangeProfileModalVisibility={onChangeProfileModalVisibility}
+          profileModalVisibility={profileModalVisibility}
           userSetting={JSON.parse(userSubscription[0].user_settings) as UserSetting[]}
         >
           <Button

src/modules/channelDetails/components/ChannelList.tsx

@@ -17,7 +17,7 @@ export type ChannelListProps = {
   isLoading: boolean;
   setSelectedChannelId: React.Dispatch<React.SetStateAction<string>>;
   fetchNextPage: (
-    options?: FetchNextPageOptions | undefined
+    options?: FetchNextPageOptions | undefined,
   ) => Promise<InfiniteQueryObserverResult<InfiniteData<ChannelsListModelledResponse, unknown>, Error>>;
 };
 const ChannelList: FC<ChannelListProps> = ({