From d9b138b5fa603d2e5b5250360d35e415d20b4794 Mon Sep 17 00:00:00 2001
From: Maigo Erit <maigo.erit@gmail.com>
Date: Tue, 5 Oct 2021 00:02:34 +0300
Subject: [PATCH] add trial info

---
 client/src/components/Paywall/Paywall.tsx      |  2 +-
 client/src/components/Paywall/TrialInfo.tsx    | 18 ++++++++++++++++++
 client/src/components/Paywall/UserProvider.tsx |  9 +++++++--
 .../src/components/Settings/SettingsForm.tsx   |  2 ++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Paywall/TrialInfo.tsx

diff --git a/client/src/components/Paywall/Paywall.tsx b/client/src/components/Paywall/Paywall.tsx
index 5035fdf5..da281ba0 100644
--- a/client/src/components/Paywall/Paywall.tsx
+++ b/client/src/components/Paywall/Paywall.tsx
@@ -87,7 +87,7 @@ const AddSubsciptionButton: React.FC<any> = () => {
         try {
             setIsLoading(true);
 
-            const product = products?.find(product => product.active);
+            const product = products?.find(item => item.active);
 
             if (!product) {
                 console.error('No product found');
diff --git a/client/src/components/Paywall/TrialInfo.tsx b/client/src/components/Paywall/TrialInfo.tsx
new file mode 100644
index 00000000..f84da7c5
--- /dev/null
+++ b/client/src/components/Paywall/TrialInfo.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { UserContext } from './UserProvider';
+import { CardBox } from '../CardBox';
+
+export const TrialInfo: React.FC<any> = () => {
+    const { hasTrial, trialDays } = React.useContext(UserContext);
+
+    if (!hasTrial) {
+        return null;
+    }
+
+    return (
+        <CardBox title="Trial" divider>
+            You have {Math.max(trialDays, 0)} days of <b>Premium</b> left.
+        </CardBox>
+    );
+};
diff --git a/client/src/components/Paywall/UserProvider.tsx b/client/src/components/Paywall/UserProvider.tsx
index ef38c02d..b5d9594d 100644
--- a/client/src/components/Paywall/UserProvider.tsx
+++ b/client/src/components/Paywall/UserProvider.tsx
@@ -20,6 +20,7 @@ type UserState = {
     subscriptionsLoading: boolean;
     hasSubscription: boolean;
     hasTrial: boolean;
+    trialDays: number;
 };
 
 const noUserState = {
@@ -30,11 +31,13 @@ const noUserState = {
     subscriptionsLoading: false,
     hasSubscription: getSubscriptionFromLocalStorage(),
     hasTrial: getTrialFromLocalStorage(),
+    trialDays: 0,
 };
 
 const UserContext = createContext<UserState>(noUserState);
 
 const UserProvider = ({ children }: any) => {
+    const [trialDays, setTrialDays] = useState(0);
     const [hasTrial, setHasTrial] = useState(getTrialFromLocalStorage());
     const [hasSubscription, setHasSubscription] = useState(getSubscriptionFromLocalStorage());
     const [user, loading, error] = useAuthState(auth);
@@ -58,8 +61,9 @@ const UserProvider = ({ children }: any) => {
             const now = moment();
             const TRIAL_DAYS = 7;
 
-            const trialing = now.diff(beginDate, 'days') <= TRIAL_DAYS;
-
+            const daysLeft = now.diff(beginDate, 'days');
+            const trialing = daysLeft <= TRIAL_DAYS;
+            setTrialDays(daysLeft);
             setHasTrial(trialing);
             setTrialToLocalStorage(trialing);
         };
@@ -92,6 +96,7 @@ const UserProvider = ({ children }: any) => {
         subscriptionsLoading,
         hasSubscription,
         hasTrial,
+        trialDays,
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/client/src/components/Settings/SettingsForm.tsx b/client/src/components/Settings/SettingsForm.tsx
index 530122b2..4025cb64 100644
--- a/client/src/components/Settings/SettingsForm.tsx
+++ b/client/src/components/Settings/SettingsForm.tsx
@@ -4,6 +4,7 @@ import { AppForm } from './AppForm';
 import { WorkForm } from './WorkForm';
 import { VStack } from '@chakra-ui/react';
 import { Subscriptions } from '../Paywall/Subscriptions';
+import { TrialInfo } from '../Paywall/TrialInfo';
 
 export const SettingsForm = () => {
     return (
@@ -14,6 +15,7 @@ export const SettingsForm = () => {
 
             <AnalyserForm />
             <Subscriptions />
+            <TrialInfo />
         </VStack>
     );
 };