add trial info

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');

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>
+    );
+};

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

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>
     );
 };