feat(web): add flag for planner feature (#1111)

* feat(web): add Flask icon and beta button functionality to sidebar

* fix(web): hide PostHog beta feature button to avoid duplication

* fix(web): update beta button identifier and remove redundant styles

Author: tyler-dane

packages/web/src/App.tsx

@@ -76,6 +76,8 @@ export const App = () => {
               capture_unhandled_rejections: true,
               capture_console_errors: true,
             },
+            opt_in_site_apps: true,
+            person_profiles: "always",
           }}
         >
           {wrappedChildren}

packages/web/src/common/constants/posthog.constants.ts

@@ -0,0 +1 @@
+export const PH_ID_BETA_BUTTON = "early-access-button"; // this needs to match the id of the button in the PostHog dashboard

packages/web/src/components/GlobalStyle/styled.ts

@@ -41,4 +41,4 @@ export const GlobalStyle = createGlobalStyle`
       background-color: ${theme.color.panel.scrollbarActive};
     }
   }
-`;
+  `;

packages/web/src/components/Icons/Flask.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { Flask } from "@phosphor-icons/react";
+import { iconStyles } from "./styled";
+
+export const FlaskIcon = styled(Flask)`
+  ${iconStyles}
+`;

packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import { PH_ID_BETA_BUTTON } from "@web/common/constants/posthog.constants";
 import { theme } from "@web/common/styles/theme";
 import { getMetaKey } from "@web/common/utils/shortcut/shortcut.util";
 import { CalendarIcon } from "@web/components/Icons/Calendar";
 import { CommandIcon } from "@web/components/Icons/Command";
+import { FlaskIcon } from "@web/components/Icons/Flask";
 import { SpinnerIcon } from "@web/components/Icons/Spinner";
 import { TodoIcon } from "@web/components/Icons/Todo";
 import { Text } from "@web/components/Text";
@@ -82,6 +84,12 @@ export const SidebarIconRow = () => {
             }
           />
         </TooltipWrapper>
+        <TooltipWrapper description="Early Access">
+          <FlaskIcon
+            id={PH_ID_BETA_BUTTON}
+            color={theme.color.text.darkPlaceholder}
+          />
+        </TooltipWrapper>
         {gCalImport.importing ? (
           <TooltipWrapper description="Importing your calendar events in the background">
             <SpinnerIcon disabled />

packages/web/src/views/Calendar/components/TodayButton/TodayButton.tsx

@@ -1,6 +1,11 @@
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import React from "react";
 import { StyledTodayButton } from "./styled";
 
 export const TodayButton = () => {
+  const isPlannerEnabled = useFeatureFlagEnabled("experiment_planner");
+
+  isPlannerEnabled && console.log("planner enabled");
+
   return <StyledTodayButton title="Today">Today</StyledTodayButton>;
 };