feat: ✨ premium GC (#399)

Left-on-Read · Sep 26, 2022 · 971f6d9 · 971f6d9
1 parent ae957ac
commit 971f6d9
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 42 deletions.
diff --git a/app/src/components/Dashboard/ChartTabs.tsx b/app/src/components/Dashboard/ChartTabs.tsx
@@ -25,7 +25,6 @@ import { SharedQueryFilters } from '../../analysis/queries/filters/sharedQueryFi
 import { GroupChatFilters } from '../../constants/filters';
 import { logEvent } from '../../utils/analytics';
 import { EngagementScoreChart } from '../Graphs/EngagementScore/EngagementScoreChart';
-import { RespondReminders } from '../Graphs/RespondReminders';
 import { SentimentOverTimeChart } from '../Graphs/SentimentOverTimeChart';
 import { SentVsReceivedChart } from '../Graphs/SentVsReceivedChart';
 import { TextsOverTimeChart } from '../Graphs/TextsOverTimeChart';
@@ -34,7 +33,6 @@ import { TopFriendsChart } from '../Graphs/TopFriendsChart';
 import { TopSentimentFriendsChart } from '../Graphs/TopSentimentFriendsChart';
 import { TotalSentimentChart } from '../Graphs/TotalSentimentChart';
 import { WordOrEmojiCountChart } from '../Graphs/WordOrEmojiCountChart';
-import { MessageScheduler } from '../Productivity/MessageScheduler';
 import { useGlobalContext } from './GlobalContext';
 import { GroupChatTab } from './GroupChatTab';
 import { SIDEBAR_WIDTH } from './SideNavbar';
@@ -293,34 +291,22 @@ export function ChartTabs({ filters }: { filters: SharedQueryFilters }) {
                 icon={FiArrowUpCircle}
                 filters={filters}
               />
+              <EngagementScoreChart
+                title={titleFormatter({
+                  titleName: 'Engagement Score ™',
+                  filters,
+                })}
+                description={descriptionFormatter({
+                  description: `Measures how "good" of a texter you are`,
+                  filters,
+                })}
+                icon={FiRadio}
+                filters={filters}
+              />
             </Stack>
           </TabPanel>
         </TabPanels>
       </Tabs>
     </div>
   );
 }
-
-export function EngagementCharts() {
-  // TODO(Danilowicz): This needs to be refactored and be props
-  // { filters }: { filters: SharedQueryFilters }
-  const filters = {};
-  return (
-    <Stack direction="column" spacing={40}>
-      <RespondReminders />
-      <MessageScheduler />
-      <EngagementScoreChart
-        title={titleFormatter({
-          titleName: 'Engagement Score ™',
-          filters,
-        })}
-        description={descriptionFormatter({
-          description: `Measures how "good" of a texter you are`,
-          filters,
-        })}
-        icon={FiRadio}
-        filters={filters}
-      />
-    </Stack>
-  );
-}
diff --git a/app/src/components/Dashboard/Dashboard.tsx b/app/src/components/Dashboard/Dashboard.tsx
@@ -1,11 +1,12 @@
-import { Box } from '@chakra-ui/react';
+import { Box, Stack } from '@chakra-ui/react';
 import Store from 'electron-store';
 import { useState } from 'react';
 
+import { RespondReminders } from '../Graphs/RespondReminders';
 import { SettingsPage } from '../Pages/SettingsPage';
 import { GoldContext } from '../Premium/GoldContext';
+import { MessageScheduler } from '../Productivity/MessageScheduler';
 import { AnalyticsPage } from './AnalyticsPage';
-import { EngagementCharts } from './ChartTabs';
 import { SIDEBAR_WIDTH, SideNavbar, TPages } from './SideNavbar';
 
 const store = new Store();
@@ -44,7 +45,10 @@ export function Dashboard({ onRefresh }: { onRefresh: () => void }) {
           {activePage === 'Productivity' && (
             // TODO(Danilowicz): Should make a shared container
             <Box style={{ padding: '70px 36px 36px 36px' }}>
-              <EngagementCharts />
+              <Stack direction="column" spacing={40}>
+                <RespondReminders />
+                <MessageScheduler />
+              </Stack>
             </Box>
           )}
           {activePage === 'Settings' && <SettingsPage />}

diff --git a/app/src/components/Dashboard/GroupChatTab.tsx b/app/src/components/Dashboard/GroupChatTab.tsx
@@ -111,6 +111,7 @@ export function GroupChatTab({ filters }: { filters: SharedQueryFilters }) {
         filters={{ ...filters, groupChatName: selectedGroupChat.value }}
         mode="GIVES"
         colorByContactName={colorByContactName}
+        isPremiumGraph
       />
 
       <GroupChatReactionsChart
@@ -119,6 +120,7 @@ export function GroupChatTab({ filters }: { filters: SharedQueryFilters }) {
         filters={{ ...filters, groupChatName: selectedGroupChat.value }}
         mode="GETS"
         colorByContactName={colorByContactName}
+        isPremiumGraph
       />
 
       <GroupChatActivityOverTimeChart
@@ -127,6 +129,7 @@ export function GroupChatTab({ filters }: { filters: SharedQueryFilters }) {
         icon={FiCompass}
         filters={{ ...filters, groupChatName: selectedGroupChat.value }}
         colorByContactName={colorByContactName}
+        isPremiumGraph
       />
     </>
   );

diff --git a/app/src/components/Graphs/GroupChats/GroupChatActivityOverTimeChart.tsx b/app/src/components/Graphs/GroupChats/GroupChatActivityOverTimeChart.tsx
@@ -240,12 +240,14 @@ export function GroupChatActivityOverTimeChart({
   icon,
   filters,
   colorByContactName,
+  isPremiumGraph,
 }: {
   title: string[];
   description: string;
   icon: IconType;
   filters: SharedGroupChatTabQueryFilters;
   colorByContactName: Record<string, string>;
+  isPremiumGraph?: boolean;
 }) {
   const [isShareOpen, setIsShareOpen] = useState<boolean>(false);
 
@@ -266,6 +268,7 @@ export function GroupChatActivityOverTimeChart({
         icon={icon}
         setIsShareOpen={setIsShareOpen}
         showGroupChatShareButton
+        isPremiumGraph={isPremiumGraph}
       >
         <GroupChatActivityOverTimeBody
           title={title}

diff --git a/app/src/components/Graphs/GroupChats/GroupChatReactionsChart.tsx b/app/src/components/Graphs/GroupChats/GroupChatReactionsChart.tsx
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { Spinner } from '@chakra-ui/react';
+import { Icon, Spinner, Tooltip } from '@chakra-ui/react';
 import { Context } from 'chartjs-plugin-datalabels';
 import { ipcRenderer } from 'electron';
 import log from 'electron-log';
 import { useEffect, useRef, useState } from 'react';
 import { Bar } from 'react-chartjs-2';
 import { IconType } from 'react-icons';
+import { FiInfo } from 'react-icons/fi';
 
 import { SharedGroupChatTabQueryFilters } from '../../../analysis/queries/filters/sharedGroupChatTabFilters';
 import { GroupChatReactions } from '../../../analysis/queries/GroupChats/GroupChatReactionsQuery';
@@ -323,13 +324,15 @@ export function GroupChatReactionsChart({
   loadingOverride,
   mode,
   colorByContactName,
+  isPremiumGraph,
 }: {
   title: string[];
   icon: IconType;
   filters: SharedGroupChatTabQueryFilters;
   loadingOverride?: boolean;
   mode: 'GIVES' | 'GETS';
   colorByContactName: Record<string, string>;
+  isPremiumGraph?: boolean;
 }) {
   const [isShareOpen, setIsShareOpen] = useState<boolean>(false);
 
@@ -351,16 +354,18 @@ export function GroupChatReactionsChart({
         icon={icon}
         setIsShareOpen={setIsShareOpen}
         showGroupChatShareButton
-        // tooltip={
-        //   <Tooltip
-        //     label="Reactions where added in iOS 10 in September 2016. If nothing is showing, your group chat may be too old!"
-        //     fontSize="md"
-        //   >
-        //     <span>
-        //       <Icon as={FiInfo} color="gray.500" />
-        //     </span>
-        //   </Tooltip>
-        // }
+        isPremiumGraph={!!isPremiumGraph}
+        description={`Who ${mode.toLocaleLowerCase()} the most hahas, loves, likes, dislikes...`}
+        tooltip={
+          <Tooltip
+            label="Reactions where added in iOS 10 in September 2016. If nothing is showing, your group chat may be too old!"
+            fontSize="md"
+          >
+            <span>
+              <Icon as={FiInfo} color="gray.500" />
+            </span>
+          </Tooltip>
+        }
       >
         <GroupChatReactionsBody
           title={title}

diff --git a/app/src/components/Pages/SettingsPage.tsx b/app/src/components/Pages/SettingsPage.tsx
@@ -257,11 +257,11 @@ export function SettingsPage() {
           <ContactUs />
         </SettingsCard>
         <SettingsCard
-          title={isPremium ? 'Gold is unlocked' : 'Get Left on Read Gold'}
+          title={isPremium ? 'Gold is unlocked 🎉' : 'Get Left on Read Gold'}
           icon={FiAward}
           description={
             isPremium
-              ? 'Thank you supporting Left on Read!'
+              ? 'Thank you supporting Left on Read! ❤️'
               : 'Unlock filtering, new graphs, and more!'
           }
         >