Merge pull request #9899 from hicommonwealth/israel.9852.growl-for-al…

…l-overview-page added All/Overview page growl and updated growl template
hicommonwealth · Nov 14, 2024 · b1e9fc4 · b1e9fc4
2 parents 113e3b7 + db2edca
commit b1e9fc4
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 58 deletions.
diff --git a/packages/commonwealth/client/scripts/views/Sublayout.tsx b/packages/commonwealth/client/scripts/views/Sublayout.tsx
@@ -183,6 +183,7 @@ const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => {
             buttonLink="https://commonwealth.im/common/discussion/25536-Weighted%20Voting%20and%20Contest%20FAQs"
             growlImage={contestsGTMGrowlImage}
             extraText="Spark creativity and foster connections within your community."
+            growlType="contests"
           />
         </div>
         <WelcomeOnboardModal

diff --git a/...wealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss b/...wealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.scss
@@ -24,6 +24,9 @@
     &:hover {
       color: $neutral-400;
     }
+    &.noGrowlImage {
+      margin-right: 10px;
+    }
   }
 
   .img {

diff --git a/...nwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx b/...nwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx
@@ -8,19 +8,18 @@ import { CWText } from 'views/components/component_kit/cw_text';
 import { CWButton } from '../../component_kit/new_designs/CWButton';
 import './CWGrowlTemplate.scss';
 
-const LOCALSTORAGE_GROWL_TEMPLATE_KEY = 'GrowlTemplateHidden';
-
 interface CWGrowlTemplateProps {
   discordLink?: boolean;
-  headerText: string;
-  bodyText: string;
-  buttonText: string;
-  buttonLink: string;
-  growlImage: string;
+  headerText?: string;
+  bodyText?: string;
+  buttonText?: string;
+  buttonLink?: string;
+  growlImage?: string;
   extraText?: string;
+  growlType: string;
 }
 
-//CWGrowlTemplate should be placed in Sublayout.tsx when used
+//CWGrowlTemplate should be placed in Sublayout.tsx when used for general announcements
 
 export const CWGrowlTemplate = ({
   discordLink = false,
@@ -30,23 +29,28 @@ export const CWGrowlTemplate = ({
   buttonLink,
   growlImage,
   extraText,
+  growlType,
 }: CWGrowlTemplateProps) => {
   const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();
 
   const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] =
     useState(false);
 
   const [isDisabled, setIsDisabled] = useState(
-    localStorage.getItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY) === 'true' ||
-      isGrowlHidden,
+    localStorage.getItem(
+      `LOCALSTORAGE_GROWL_TEMPLATE_${growlType.toUpperCase()}_KEY`,
+    ) === 'true' || isGrowlHidden,
   );
 
   const handleExit = () => {
     setIsDisabled(true);
     setIsGrowlHidden(true);
 
     if (shouldHideGrowlPermanently) {
-      localStorage.setItem(LOCALSTORAGE_GROWL_TEMPLATE_KEY, 'true');
+      localStorage.setItem(
+        `LOCALSTORAGE_GROWL_TEMPLATE_${growlType.toUpperCase()}_KEY`,
+        'true',
+      );
     }
   };
 
@@ -56,27 +60,29 @@ export const CWGrowlTemplate = ({
         <CWIconButton
           iconName="close"
           iconSize="medium"
-          className="closeButton"
+          className={`closeButton ${!growlImage ? 'noGrowlImage' : ''}`}
           onClick={handleExit}
         />
-        <img src={growlImage} alt="" className="img" />
+        {growlImage && <img src={growlImage} alt="" className="img" />}
         <div className="container">
           <CWText type="h2" fontWeight="bold" isCentered>
             {headerText}
           </CWText>
           <CWText type="b1" fontWeight="medium" isCentered className="body">
             {bodyText}
           </CWText>
-          <CWButton
-            className="CalenderButton"
-            buttonType="primary"
-            buttonHeight="med"
-            label={buttonText}
-            onClick={(e) => {
-              e.preventDefault();
-              window.open(buttonLink, '_blank');
-            }}
-          />
+          {buttonLink && (
+            <CWButton
+              className="CalenderButton"
+              buttonType="primary"
+              buttonHeight="med"
+              label={buttonText}
+              onClick={(e) => {
+                e.preventDefault();
+                window.open(buttonLink, '_blank');
+              }}
+            />
+          )}
           {discordLink && (
             <>
               <CWText

diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx b/packages/commonwealth/client/scripts/views/pages/discussions/DiscussionsPage.tsx
@@ -37,6 +37,7 @@ import useCommunityContests from 'views/pages/CommunityManagement/Contests/useCo
 import { isContestActive } from 'views/pages/CommunityManagement/Contests/utils';
 import useTokenMetadataQuery from '../../../state/api/tokens/getTokenMetadata';
 import { AdminOnboardingSlider } from '../../components/AdminOnboardingSlider';
+import { CWGrowlTemplate } from '../../components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate';
 import { UserTrainingSlider } from '../../components/UserTrainingSlider';
 import { CWText } from '../../components/component_kit/cw_text';
 import CWIconButton from '../../components/component_kit/new_designs/CWIconButton';
@@ -359,41 +360,51 @@ const DiscussionsPage = ({ topicName }: DiscussionsPageProps) => {
               );
 
               return (
-                <ThreadCard
-                  key={thread?.id + '-' + thread.readOnly}
-                  thread={thread}
-                  canReact={
-                    disabledReactPermissionTooltipText
-                      ? !disabledReactPermissionTooltipText
-                      : !disabledActionsTooltipText
-                  }
-                  canComment={
-                    disabledCommentPermissionTooltipText
-                      ? !disabledCommentPermissionTooltipText
-                      : !disabledActionsTooltipText
-                  }
-                  onEditStart={() => navigate(`${discussionLink}?isEdit=true`)}
-                  onStageTagClick={() => {
-                    navigate(`/discussions?stage=${thread.stage}`);
-                  }}
-                  threadHref={`${getScopePrefix()}${discussionLink}`}
-                  onBodyClick={() => {
-                    const scrollEle =
-                      document.getElementsByClassName('Body')[0];
-                    localStorage[`${communityId}-discussions-scrollY`] =
-                      scrollEle.scrollTop;
-                  }}
-                  onCommentBtnClick={() =>
-                    navigate(`${discussionLink}?focusComments=true`)
-                  }
-                  disabledActionsTooltipText={
-                    disabledCommentPermissionTooltipText ||
-                    disabledReactPermissionTooltipText ||
-                    disabledActionsTooltipText
-                  }
-                  hideRecentComments
-                  editingDisabled={isThreadTopicInContest}
-                />
+                <>
+                  <ThreadCard
+                    key={thread?.id + '-' + thread.readOnly}
+                    thread={thread}
+                    canReact={
+                      disabledReactPermissionTooltipText
+                        ? !disabledReactPermissionTooltipText
+                        : !disabledActionsTooltipText
+                    }
+                    canComment={
+                      disabledCommentPermissionTooltipText
+                        ? !disabledCommentPermissionTooltipText
+                        : !disabledActionsTooltipText
+                    }
+                    onEditStart={() =>
+                      navigate(`${discussionLink}?isEdit=true`)
+                    }
+                    onStageTagClick={() => {
+                      navigate(`/discussions?stage=${thread.stage}`);
+                    }}
+                    threadHref={`${getScopePrefix()}${discussionLink}`}
+                    onBodyClick={() => {
+                      const scrollEle =
+                        document.getElementsByClassName('Body')[0];
+                      localStorage[`${communityId}-discussions-scrollY`] =
+                        scrollEle.scrollTop;
+                    }}
+                    onCommentBtnClick={() =>
+                      navigate(`${discussionLink}?focusComments=true`)
+                    }
+                    disabledActionsTooltipText={
+                      disabledCommentPermissionTooltipText ||
+                      disabledReactPermissionTooltipText ||
+                      disabledActionsTooltipText
+                    }
+                    hideRecentComments
+                    editingDisabled={isThreadTopicInContest}
+                  />
+                  <CWGrowlTemplate
+                    headerText="Attention!"
+                    bodyText="'Overview' page has been merged with the 'All' page"
+                    buttonText="test"
+                    growlType="discussion"
+                  />
+                </>
               );
             }}
             endReached={() => {