notify new users of credits (#274)

Author: nuwandavek

web/src/components/common/Notify.tsx

@@ -1,6 +1,7 @@
-import { Text, VStack, HStack, Box, Icon } from '@chakra-ui/react';
+import { Text, VStack, HStack, Box, Icon, IconButton } from '@chakra-ui/react';
 import { BiSolidInfoCircle } from 'react-icons/bi';
-import React from 'react';
+import { IoClose } from 'react-icons/io5';
+import React, { useState } from 'react';
 
 interface NotifyProps {
   children?: React.ReactNode;
@@ -11,12 +12,21 @@ interface NotifyProps {
 export const Notify = ({ 
   children, 
   title = "Heads Up!",
-  notificationType = "info" 
+  notificationType = "info",
 }: NotifyProps) => {
+  const [isVisible, setIsVisible] = useState(true);
   const bgColor = 'white'
   const borderColor = notificationType === 'info' ? 'minusxGreen.800' : notificationType === 'warning' ? 'orange.500' : 'red.600'
   const iconColor = notificationType === 'info' ? 'minusxGreen.800' : notificationType === 'warning' ? 'orange.500' : 'red.600';
 
+  const handleDismiss = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <Box
       bg={bgColor}
@@ -28,22 +38,35 @@ export const Notify = ({
       w="full"
     >
       <VStack align="flex-start" spacing={2} w="full">
-        <HStack spacing={2} align="center">
-          {
-            notificationType === 'warning' ? 
-              <Icon as={BiSolidInfoCircle} size={16} color={"orange.500"} /> :
-            notificationType === 'error' ? 
-              <Icon as={BiSolidInfoCircle} size={16} color={"red.600"} /> : 
-            <Icon as={BiSolidInfoCircle} size={16} color={"minusxGreen.800"} />
-          }
-          <Text 
-            fontSize="sm" 
-            fontWeight="semibold" 
-            m={0}
-            color={iconColor}
-          >
-            {title}
-          </Text>
+        <HStack spacing={2} align="center" justify="space-between" w="full">
+          <HStack spacing={2} align="center">
+            {
+              notificationType === 'warning' ? 
+                <Icon as={BiSolidInfoCircle} size={16} color={"orange.500"} /> :
+              notificationType === 'error' ? 
+                <Icon as={BiSolidInfoCircle} size={16} color={"red.600"} /> : 
+              <Icon as={BiSolidInfoCircle} size={16} color={"minusxGreen.800"} />
+            }
+            <Text 
+              fontSize="sm" 
+              fontWeight="semibold" 
+              m={0}
+              color={iconColor}
+            >
+              {title}
+            </Text>
+          </HStack>
+          {notificationType != 'error' && (
+            <IconButton
+              aria-label="Dismiss notification"
+              icon={<IoClose />}
+              size="sm"
+              variant="ghost"
+              color="gray.500"
+              onClick={handleDismiss}
+              _hover={{ bg: notificationType === 'info' ? 'minusxGreen.800' : notificationType === 'warning' ? 'orange.500' : 'red.600', color: 'white' }}
+            />
+          )}
         </HStack>
         {children && (
           <Text 

web/src/components/common/TaskUI.tsx

@@ -106,9 +106,13 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
   const credits = useSelector((state: RootState) => state.billing.credits)
   const infoLoaded = useSelector((state: RootState) => state.billing.infoLoaded)
   const analystMode = useSelector((state: RootState) => state.settings.analystMode)
+  const proUser = useSelector((state: RootState) => state.billing.isSubscribed)
+  const enterpriseUser = useSelector((state: RootState) => state.billing.isEnterpriseCustomer)
 
   const creditsExhausted = () => (credits <= 0 && infoLoaded)
   const creditsLow = () => (credits <= LOW_CREDITS_THRESHOLD && infoLoaded)
+  // approx check if this is a new user
+  const newUserProxy = () => (credits >= 200 && infoLoaded) && !proUser && !enterpriseUser && messages.length < 2
   const lastThread = () => (thread === totalThreads - 1)
 
   const relevantTables = toolContext.relevantTables || []
@@ -461,6 +465,16 @@ const TaskUI = forwardRef<HTMLTextAreaElement>((_props, ref) => {
                 }
             };
         }
+        if (newUserProxy()) {
+            return {
+                inputBox: true,
+                alert: {
+                    message: "Welcome to MinusX! Since we like you so much, we are giving you **250 free credits** this week to try out the product! Happy querying!",
+                    type: "info",
+                    title: "Bonus credits, yay!"
+                }
+            };
+        }
 
         // 3. All cases when the input box should be enabled, and no alert shown
         return {