made contests gtm growl and updated growl functionality

hicommonwealth · Nov 13, 2024 · 6c07e57 · 6c07e57
1 parent 8e75e7e
commit 6c07e57
Show file tree

Hide file tree

Showing 3 changed files with 284 additions and 23 deletions.
diff --git a/packages/commonwealth/client/assets/img/contestsGTMGrowlImage.svg b/packages/commonwealth/client/assets/img/contestsGTMGrowlImage.svg
diff --git a/packages/commonwealth/client/scripts/views/Sublayout.tsx b/packages/commonwealth/client/scripts/views/Sublayout.tsx
@@ -8,6 +8,7 @@ import app from 'state';
 import useSidebarStore from 'state/ui/sidebar';
 import { SublayoutHeader } from 'views/components/SublayoutHeader';
 import { Sidebar } from 'views/components/sidebar';
+import contestsGTMGrowlImage from '../../assets/img/contestsGTMGrowlImage.svg';
 import useNecessaryEffect from '../hooks/useNecessaryEffect';
 import useStickyHeader from '../hooks/useStickyHeader';
 import { useAuthModalStore, useWelcomeOnboardModal } from '../state/ui/modals';
@@ -17,6 +18,7 @@ import { AdminOnboardingSlider } from './components/AdminOnboardingSlider';
 import { Breadcrumbs } from './components/Breadcrumbs';
 import MobileNavigation from './components/MobileNavigation';
 import AuthButtons from './components/SublayoutHeader/AuthButtons';
+import { CWGrowlTemplate } from './components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate';
 import { UserTrainingSlider } from './components/UserTrainingSlider';
 import CollapsableSidebarButton from './components/sidebar/CollapsableSidebarButton';
 import { AuthModal, AuthModalType } from './modals/AuthModal';
@@ -173,6 +175,15 @@ const Sublayout = ({ children, isInsideCommunity }: SublayoutProps) => {
             )}
             {children}
           </div>
+          <CWGrowlTemplate
+            headerText="Ignite Your Community with Weekly Contests"
+            bodyText="Supercharge engagement with real rewards! Common Contests spark
+            creativity and bring your community's best ideas to life!"
+            buttonText="Learn More"
+            buttonLink="https://commonwealth.im/common/discussion/25536-Weighted%20Voting%20and%20Contest%20FAQs"
+            growlImage={contestsGTMGrowlImage}
+            extraText="Spark creativity and foster connections within your community."
+          />
         </div>
         <WelcomeOnboardModal
           isOpen={isWelcomeOnboardModalOpen}

diff --git a/...nwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx b/...nwealth/client/scripts/views/components/SublayoutHeader/GrowlTemplate/CWGrowlTemplate.tsx
@@ -11,19 +11,25 @@ import './CWGrowlTemplate.scss';
 const LOCALSTORAGE_GROWL_TEMPLATE_KEY = 'GrowlTemplateHidden';
 
 interface CWGrowlTemplateProps {
+  discordLink?: boolean;
   headerText: string;
   bodyText: string;
   buttonText: string;
   buttonLink: string;
   growlImage: string;
+  extraText?: string;
 }
 
+//CWGrowlTemplate should be placed in Sublayout.tsx when used
+
 export const CWGrowlTemplate = ({
+  discordLink = false,
   headerText,
   bodyText,
   buttonText,
   buttonLink,
   growlImage,
+  extraText,
 }: CWGrowlTemplateProps) => {
   const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();
 
@@ -71,29 +77,45 @@ export const CWGrowlTemplate = ({
               window.open(buttonLink, '_blank');
             }}
           />
-          <CWText type="b2" fontWeight="regular" isCentered className="body">
-            Have more feedback? Reach out to us on Discord!
-          </CWText>
-          <a
-            href="https://discord.com/channels/799041511165394986/1099034105997426709"
-            target="_blank"
-            rel="noreferrer"
-            style={{ textDecoration: 'none' }}
-          >
-            <CWText
-              type="b1"
-              fontWeight="link"
-              isCentered
-              className="discordLink"
-            >
-              Open Discord
-              <CWIcon
-                iconName="arrowSquareOut"
-                iconSize="medium"
-                className="icon"
-              />
-            </CWText>
-          </a>
+          {discordLink && (
+            <>
+              <CWText
+                type="b2"
+                fontWeight="regular"
+                isCentered
+                className="body"
+              >
+                Have more feedback? Reach out to us on Discord!
+              </CWText>
+              <a
+                href="https://discord.com/channels/799041511165394986/1099034105997426709"
+                target="_blank"
+                rel="noreferrer"
+                style={{ textDecoration: 'none' }}
+              >
+                <CWText
+                  type="b1"
+                  fontWeight="link"
+                  isCentered
+                  className="discordLink"
+                >
+                  Open Discord
+                  <CWIcon
+                    iconName="arrowSquareOut"
+                    iconSize="medium"
+                    className="icon"
+                  />
+                </CWText>
+              </a>
+            </>
+          )}
+          {extraText && extraText.length > 0 && (
+            <div>
+              <CWText type="b2" fontWeight="medium" isCentered className="body">
+                {extraText}
+              </CWText>
+            </div>
+          )}
         </div>
         <div className="checkboxContainer">
           <CWCheckbox