feat: added alert on profile to notify when a user has content and th…

…e subscription policy is not set, also added the condition to hide the join button on movie details
WatchItDev · Jan 31, 2025 · 111e8ec · 111e8ec
1 parent 31d5a36
commit 111e8ec
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 39 deletions.
diff --git a/src/components/subscribe-to-unlock-card.tsx b/src/components/subscribe-to-unlock-card.tsx
@@ -5,6 +5,7 @@ import { useGetPolicyTerms } from '@src/hooks/use-get-policy-terms.ts';
 import { Address } from 'viem';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
+import { useIsPolicyAuthorized } from '@src/hooks/use-is-policy-authorized.ts';
 
 interface Props {
   post: any;
@@ -18,10 +19,12 @@ export const SubscribeToUnlockCard = ({
   loadingSubscribe,
   post,
 }: Props) => {
+  const ownerAddress = post?.by?.ownedBy?.address as Address
   const { terms } = useGetPolicyTerms(
     GLOBAL_CONSTANTS.SUBSCRIPTION_POLICY_ADDRESS as Address,
-    post?.by?.ownedBy?.address as Address
+    ownerAddress
   );
+  const { isAuthorized } = useIsPolicyAuthorized(GLOBAL_CONSTANTS.SUBSCRIPTION_POLICY_ADDRESS, ownerAddress);
   const durationDays = 30; // a month
   const totalCostWei = terms?.amount ? terms?.amount * BigInt(durationDays) : 0; // Calculate total cost in Wei: DAILY_COST_WEI * durationDays
   const totalCostMMC = ethers.formatUnits(totalCostWei, 18); // Converts Wei to MMC
@@ -50,24 +53,28 @@ export const SubscribeToUnlockCard = ({
           This content is exclusively for members. Become part of our growing community to access
           behind-the-scenes content, exclusive posts, and much more!
         </Typography>
-        <LoadingButton
-          variant="contained"
-          color="primary"
-          sx={{ width: '100%', py: 1.5 }}
-          onClick={onSubscribe}
-          loading={loadingSubscribe}
-          // disabled={subscribeDisabled}
-        >
-          <IconPlayerPlay size={20} style={{ marginRight: 5 }} />
-          Join
-        </LoadingButton>
-        <Box sx={{ mt: 3, borderRadius: 1 }}>
-          <Typography variant="body2" color="textSecondary">
-            Join now for just <strong>{totalCostMMC} MMC/month</strong> and access to{' '}
-            <strong>{post?.by?.stats?.posts}</strong> exclusive posts from{' '}
-            <strong>{post?.by?.metadata?.displayName ?? post?.handle?.localName}!</strong>
-          </Typography>
-        </Box>
+        {isAuthorized && (
+          <>
+            <LoadingButton
+              variant="contained"
+              color="primary"
+              sx={{ width: '100%', py: 1.5 }}
+              onClick={onSubscribe}
+              loading={loadingSubscribe}
+              // disabled={subscribeDisabled}
+            >
+              <IconPlayerPlay size={20} style={{ marginRight: 5 }} />
+              Join
+            </LoadingButton>
+            <Box sx={{ mt: 3, borderRadius: 1 }}>
+              <Typography variant="body2" color="textSecondary">
+                Join now for just <strong>{totalCostMMC} MMC/month</strong> and access to{' '}
+                <strong>{post?.by?.stats?.posts}</strong> exclusive posts from{' '}
+                <strong>{post?.by?.metadata?.displayName ?? post?.handle?.localName}!</strong>
+              </Typography>
+            </Box>
+          </>
+        )}
       </CardContent>
     </Card>
   );

diff --git a/src/sections/publication/view/publication-details-view.tsx b/src/sections/publication/view/publication-details-view.tsx
@@ -33,6 +33,8 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { openLoginModal } from '@redux/auth';
 import { appId, PublicationType, usePublications } from '@lens-protocol/react-web';
+import { useIsPolicyAuthorized } from '@src/hooks/use-is-policy-authorized.ts';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 
 const MAX_LINES = 5;
 
@@ -68,6 +70,7 @@ export default function PublicationDetailsView({ id }: Props) {
     fetching: accessFetchingLoading,
     refetch: refetchAccess,
   } = useHasAccess(ownerAddress);
+  const { isAuthorized } = useIsPolicyAuthorized(GLOBAL_CONSTANTS.SUBSCRIPTION_POLICY_ADDRESS, ownerAddress);
 
   const getMediaUri = (cid: string): string => `${cid}`;
 
@@ -223,26 +226,28 @@ export default function PublicationDetailsView({ id }: Props) {
                     }}
                   />
 
-                  <LoadingButton
-                    variant="contained"
-                    sx={{
-                      color: '#1E1F22',
-                      background: '#FFFFFF',
-                      height: '35px',
-                      bottom: 16,
-                      left: 16,
-                      position: 'absolute',
-                      zIndex: 2,
-                    }}
-                    onClick={handleSubscribe}
-                    // disabled={accessLoading || hasAccess || accessFetchingLoading}
-                    loading={accessLoading || accessFetchingLoading}
-                  >
-                    <IconPlayerPlay fontSize="large" size={18} />
-                    <Typography variant="body2" sx={{ lineHeight: 1, fontWeight: '700', ml: 1 }}>
-                      Join
-                    </Typography>
-                  </LoadingButton>
+                  {isAuthorized && (
+                    <LoadingButton
+                      variant="contained"
+                      sx={{
+                        color: '#1E1F22',
+                        background: '#FFFFFF',
+                        height: '35px',
+                        bottom: 16,
+                        left: 16,
+                        position: 'absolute',
+                        zIndex: 2,
+                      }}
+                      onClick={handleSubscribe}
+                      // disabled={accessLoading || hasAccess || accessFetchingLoading}
+                      loading={accessLoading || accessFetchingLoading}
+                    >
+                      <IconPlayerPlay fontSize="large" size={18} />
+                      <Typography variant="body2" sx={{ lineHeight: 1, fontWeight: '700', ml: 1 }}>
+                        Join
+                      </Typography>
+                    </LoadingButton>
+                  )}
                 </Box>
               )}
 

diff --git a/src/sections/user/view/user-profile-view.tsx b/src/sections/user/view/user-profile-view.tsx
@@ -22,6 +22,10 @@ import { RootState } from '@src/redux/store';
 import { setFollowers, setFollowings } from '@redux/followers';
 import ProfileReferrals from "@src/sections/user/profile-referrals.tsx";
 import useReferrals from "@src/hooks/use-referrals.ts";
+import Alert from '@mui/material/Alert';
+import { useIsPolicyAuthorized } from '@src/hooks/use-is-policy-authorized.ts';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
+import { Address } from 'viem';
 
 // ----------------------------------------------------------------------
 
@@ -47,6 +51,10 @@ const UserProfileView = ({ id }: any) => {
       metadata: { publishedOn: [appId('watchit')] },
     },
   });
+  const { isAuthorized, loading: authorizedLoading } = useIsPolicyAuthorized(
+    GLOBAL_CONSTANTS.SUBSCRIPTION_POLICY_ADDRESS,
+    profile?.ownedBy?.address as Address
+  );
 
   const { invitations: referrals, fetchInvitations, loading: loadingReferrals } = useReferrals();
 
@@ -115,8 +123,20 @@ const UserProfileView = ({ id }: any) => {
     <LoadingScreen />
   );
 
+  const showSubscriptionAlert =
+    sessionData?.authenticated &&
+    sessionData?.profile?.id === profile?.id &&
+    (publications?.length ?? 0) >= 1 &&
+    !isAuthorized &&
+    !authorizedLoading;
+
   return (
     <Container maxWidth={settings.themeStretch ? false : 'lg'} sx={{ overflowX: 'hidden' }}>
+      {showSubscriptionAlert && (
+        <Alert severity="warning" sx={{ mt: 2, mb: -1 }}>
+          Set your subscription prices so users can access your content. Click 'Set Joining Prices' next to your profile picture.
+        </Alert>
+      )}
       <ProfileHeader profile={profile as any}>
         <Tabs
           key={`tabs-${profile?.id}`}