Added valentine growl (#6657)

* Added valentine growl

* Added invite info

packages/commonwealth/client/scripts/state/ui/growl/growl.ts

@@ -0,0 +1,24 @@
+import { createBoundedUseStore } from 'state/ui/utils';
+import { devtools } from 'zustand/middleware';
+import { createStore } from 'zustand/vanilla';
+
+interface GrowlStore {
+  isGrowlHidden: boolean;
+  setIsGrowlHidden: (isGrowlHidden: boolean) => void;
+}
+
+const growlStore = createStore<GrowlStore>()(
+  devtools(
+    (set) => ({
+      isGrowlHidden: false,
+      setIsGrowlHidden: (isGrowlHidden: boolean) => set({ isGrowlHidden }),
+    }),
+    {
+      name: 'growl',
+    },
+  ),
+);
+
+const useGrowlStore = createBoundedUseStore(growlStore);
+
+export default useGrowlStore;

packages/commonwealth/client/scripts/state/ui/growl/index.ts

@@ -0,0 +1,2 @@
+import useGrowlStore from './growl';
+export default useGrowlStore;

packages/commonwealth/client/scripts/views/Sublayout.tsx

@@ -13,6 +13,7 @@ import { SublayoutBanners } from './SublayoutBanners';
 import { SublayoutHeader } from './SublayoutHeader';
 import { AdminOnboardingSlider } from './components/AdminOnboardingSlider';
 import { Breadcrumbs } from './components/Breadcrumbs';
+import { ValentineGrowl } from './components/ValentineGrowl';
 import CollapsableSidebarButton from './components/sidebar/CollapsableSidebarButton';
 
 type SublayoutProps = {
@@ -104,6 +105,7 @@ const Sublayout = ({
             )}
           </div>
         </div>
+        <ValentineGrowl />
       </div>
     </div>
   );

packages/commonwealth/client/scripts/views/components/ValentineGrowl/ValentineGrowl.scss

@@ -0,0 +1,78 @@
+@import '../../../../styles/shared';
+
+.ValentineGrowl {
+  display: flex;
+  flex-direction: column;
+  background-color: $white;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-bottom-left-radius: 0.3125rem;
+  border-bottom-right-radius: 0.3125rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
+
+  .closeButton {
+    align-self: flex-end;
+    cursor: pointer;
+    position: absolute;
+    color: $black;
+    top: 1rem;
+    right: 0rem;
+    z-index: 2;
+
+    &:hover {
+      color: $neutral-400;
+    }
+  }
+
+  .img {
+    width: 320px;
+    height: 192px;
+    margin-bottom: -25px;
+    cursor: default;
+    border-top-left-radius: 0.3125rem;
+    border-top-right-radius: 0.3125rem;
+    overflow: hidden;
+    z-index: 1;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+    gap: 1rem;
+    cursor: default;
+
+    .subtitle-text {
+      margin-top: -12px;
+    }
+
+    .body {
+      color: $neutral-600;
+      letter-spacing: 1px;
+    }
+  }
+
+  .icon {
+    align-self: center;
+    padding-left: 6px;
+  }
+
+  .checkboxContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 1rem;
+
+    .checkbox {
+      cursor: pointer;
+      color: $neutral-400;
+    }
+  }
+}

packages/commonwealth/client/scripts/views/components/ValentineGrowl/ValentineGrowl.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import useGrowlStore from 'state/ui/growl';
+import { CWCheckbox } from 'views/components/component_kit/cw_checkbox';
+import { CWGrowl } from 'views/components/component_kit/cw_growl';
+import { CWIconButton } from 'views/components/component_kit/cw_icon_button';
+import { CWText } from 'views/components/component_kit/cw_text';
+import { CWButton } from '../component_kit/new_designs/cw_button';
+import './ValentineGrowl.scss';
+
+const LOCALSTORAGE_VALENTINE_GROWL_KEY = 'valentineGrowlHidden';
+
+const ValentineGrowl = () => {
+  const { setIsGrowlHidden, isGrowlHidden } = useGrowlStore();
+
+  const [shouldHideGrowlPermanently, setShouldHideGrowlPermanently] =
+    useState(false);
+  const [isDisabled, setIsDisabled] = useState(
+    localStorage.getItem(LOCALSTORAGE_VALENTINE_GROWL_KEY) === 'true' ||
+      isGrowlHidden,
+  );
+
+  const openInviteInCalender = () => {
+    const link = document.createElement('a');
+    link.href = `webcal://${window.location.host}/static/invites/common-community-call.ics`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const handleExit = () => {
+    setIsDisabled(true);
+    setIsGrowlHidden(true);
+
+    if (shouldHideGrowlPermanently) {
+      localStorage.setItem(LOCALSTORAGE_VALENTINE_GROWL_KEY, 'true');
+    }
+  };
+
+  return (
+    <CWGrowl disabled={isDisabled} position="bottom-right">
+      <div className="ValentineGrowl">
+        <CWIconButton
+          iconName="close"
+          iconSize="medium"
+          className="closeButton"
+          onClick={handleExit}
+        />
+        <img
+          src="/static/img/valentineGrowlImage.jpeg"
+          alt=""
+          className="img"
+        />
+        <div className="container">
+          <CWText type="h1" fontWeight="semiBold" isCentered>
+            Join the community call
+          </CWText>
+          <CWText
+            type="b1"
+            fontWeight="regular"
+            isCentered
+            className="subtitle-text"
+          >
+            and receive a POAP 🎁
+          </CWText>
+          <CWText type="b2" fontWeight="regular" isCentered className="body">
+            Get ready for an exclusive announcement from Common!
+            <br />
+            Join us on February 14th at 11am EST for something special just for
+            you!
+          </CWText>
+          <CWButton
+            className="CalenderButton"
+            buttonType="primary"
+            buttonHeight="med"
+            label="Add to calendar"
+            onClick={openInviteInCalender}
+          />
+        </div>
+        <div className="checkboxContainer">
+          <CWCheckbox
+            onChange={() =>
+              setShouldHideGrowlPermanently(!shouldHideGrowlPermanently)
+            }
+            label="Please don't show this again"
+            labelClassName="checkbox"
+          />
+        </div>
+      </div>
+    </CWGrowl>
+  );
+};
+
+export default ValentineGrowl;

packages/commonwealth/client/scripts/views/components/ValentineGrowl/index.ts

@@ -0,0 +1 @@
+export { default as ValentineGrowl } from './ValentineGrowl';

packages/commonwealth/static/invites/common-community-call.ics

@@ -0,0 +1,59 @@
+BEGIN:VCALENDAR
+PRODID:-//Google Inc//Google Calendar 70.9054//EN
+VERSION:2.0
+CALSCALE:GREGORIAN
+METHOD:REQUEST
+BEGIN:VTIMEZONE
+TZID:America/New_York
+X-LIC-LOCATION:America/New_York
+BEGIN:DAYLIGHT
+TZOFFSETFROM:-0500
+TZOFFSETTO:-0400
+TZNAME:EDT
+DTSTART:19700308T020000
+RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU
+END:DAYLIGHT
+BEGIN:STANDARD
+TZOFFSETFROM:-0400
+TZOFFSETTO:-0500
+TZNAME:EST
+DTSTART:19701101T020000
+RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU
+END:STANDARD
+END:VTIMEZONE
+BEGIN:VEVENT
+DTSTART;TZID=America/New_York:20240214T110000
+DTEND;TZID=America/New_York:20240214T120000
+RRULE:FREQ=MONTHLY;BYDAY=2WE
+DTSTAMP:20240207T200456Z
+ORGANIZER;CN=Common Community Calls:mailto:c_296bb058b193669bbe90e7f8ed308f
+ [email protected]
+UID:[email protected]
+ATTENDEE;CUTYPE=INDIVIDUAL;ROLE=REQ-PARTICIPANT;PARTSTAT=NEEDS-ACTION;RSVP=
+ TRUE;[email protected];X-NUM-GUESTS=0:mailto:[email protected]
+X-GOOGLE-CONFERENCE:https://meet.google.com/djv-pydz-vzv
+X-MICROSOFT-CDO-OWNERAPPTID:1203157814
+CLASS:PUBLIC
+CREATED:20240207T181107Z
+DESCRIPTION:Valentines Day&#39\;s Community Call is going to be stacked! We
+ &#39\;ve got a bunch of special announcements that&#39\;ve been in the work
+ s for awhile including: <br><ul><li>An announcement of a new flagship featu
+ re on Common</li><li>Rewards for Common&#39\;s users (you)</li><li>A presen
+ tation from Common&#39\;s CEO on what to expect from Common in 2024</li><li
+ >&amp\; lots of dots (❌🐮)</li></ul><br>The call will be hosted in the Comm
+ on Discord server Stage. Looking forward to seeing you there!\n\n-::~:~::~:
+ ~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~::~:~:
+ :-\nJoin with Google Meet: https://meet.google.com/djv-pydz-vzv\nOr dial: (
+ CA) +1 226-314-7973 PIN: 897489302#\nMore phone numbers: https://tel.meet/d
+ jv-pydz-vzv?pin=2934173653075&hs=7\n\nLearn more about Meet at: https://sup
+ port.google.com/a/users/answer/9282720\n\nPlease do not edit this section.\
+ n-::~:~::~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:~:
+ ~:~:~::~:~::-
+LAST-MODIFIED:20240207T200453Z
+LOCATION:https://discord.com/invite/t9XscHdZrG
+SEQUENCE:2
+STATUS:CONFIRMED
+SUMMARY:Common Community Call
+TRANSP:OPAQUE
+END:VEVENT
+END:VCALENDAR