Merge pull request #90 from TON-42/lmangall/various-improvements-befo…

…re-AMA

Various improvements before AMA

src/App.tsx

@@ -43,7 +43,7 @@ const AppContent: React.FC = () => {
   const handleOnboardClose = () => {
     setShowOnboardUserB(false);
     setShowOnboardUserN(false);
-    setCurrentTab("chats");
+    // setCurrentTab("chats");     Commented out so it does not redirect to chats (due to new home)
   };
 
   const getBackendUrl = (): string => {

src/components/Home.tsx

@@ -3,13 +3,48 @@ import HomeCard from "./HomeCard";
 import {useUserContext} from "../utils/utils";
 import logo from "../assets/logo_whitebackground.png";
 
+const backendUrl = import.meta.env.VITE_BACKEND_URL;
+
 const Home: React.FC = () => {
-  const {user, setCurrentTab} = useUserContext();
+  const {user, setCurrentTab, updateUserBalance} = useUserContext();
   const balance = user.words ? user.words : 0;
 
-  const handleClaimClick = () => {
-    // Handle the claim button click
-    // Add endpoint to do post request -> talk with Daniils
+  const handleClaimClick = async () => {
+    const lastClaimTimestamp = localStorage.getItem("lastClaimTimestamp");
+    const now = new Date().getTime();
+
+    if (
+      lastClaimTimestamp &&
+      now - parseInt(lastClaimTimestamp) < 24 * 60 * 60 * 1000
+    ) {
+      alert("You can only claim points once every 24 hours.");
+      return;
+    }
+
+    try {
+      const response = await fetch(`${backendUrl}/claim-daily-points`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          user_id: user.id,
+          points: 10,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      const result = await response.json();
+      console.log("Points successfully claimed:", result);
+      // Update user balance or handle the result accordingly
+      updateUserBalance(10); // Add points to user's balance
+      localStorage.setItem("lastClaimTimestamp", now.toString());
+    } catch (error) {
+      console.error("Error claiming daily points:", error);
+    }
   };
 
   const handleQuestClick = () => {

src/components/Quest.tsx

@@ -16,29 +16,24 @@ const Quest: React.FC = () => {
     <div className='flex flex-col p-4'>
       {!showInitialQuest ? (
         <>
-          <h1 className='text-4xl font-bold mb-8'>Quest</h1>
-          <Text className='font-medium mb-4'>
-            Quests for content creation coming soon!
-          </Text>
+          <h1 className='text-4xl font-bold mb-4'>Quests</h1>
           <Text className='text-7xl mb-4'>🚀</Text>
           <Text className='font-small mb-8'>
-            <br />
-            <br />
-            When Clients come to ChatPay with a request for a specific type of
+            When ChatGPT comes to ChatPay with a request for a specific type of
             content, <br />
-            We will share it and you will be able to make even more money by
-            creating specific content for their needs.
+            we share it with you and you can earn some points by creating
+            specific content for their needs.
             <br />
             <br />
-            Just watch out our socials!
+            Watch out our socials for quests announcements!
             <br />
           </Text>
           <div className='flex flex-col space-y-1'>
             <CustomCard
               header='Nice to meet you'
               subheader='In this quest we want to know a little more about you'
               points={1000}
-              iconSrc={photoUrl || "./emoji/standin_person.png"}
+              iconSrc={photoUrl || "./emoji/walking.png"}
               buttonText='Go'
               buttonMode='filled'
               buttonOnClick={handleOpenFirstQuest}
@@ -48,7 +43,17 @@ const Quest: React.FC = () => {
               header='Crypto know'
               subheader='This quest is coming soon. Check back later!'
               points={3400}
-              iconSrc='./emoji/writing-hand.png'
+              iconSrc='./emoji/writing_hand.png'
+              buttonText='Go'
+              buttonMode='filled'
+              isActive={false}
+              buttonOnClick={() => {}}
+            />
+            <CustomCard
+              header='Audio'
+              subheader='This quest is coming soon. Check back later!'
+              points={6800}
+              iconSrc='./emoji/microphone.png'
               buttonText='Go'
               buttonMode='filled'
               isActive={false}

src/components/Quests/01InitialQuest.tsx

@@ -1,9 +1,11 @@
 import React, {useState} from "react";
 import {Text, Input, Button} from "@telegram-apps/telegram-ui";
+import {useUserContext} from "../../utils/utils";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
 const InitialQuest: React.FC = () => {
+  const {user, updateUserBalance} = useUserContext();
   const [mothertongue, setMothertongue] = useState("");
   const [age, setAge] = useState("");
   const [languagesSpoken, setLanguagesSpoken] = useState("");
@@ -31,6 +33,8 @@ const InitialQuest: React.FC = () => {
         },
         body: JSON.stringify({
           title: questTitle,
+          points: 1000,
+          user_id: user.id,
           data: {
             mothertongue,
             age,
@@ -43,25 +47,28 @@ const InitialQuest: React.FC = () => {
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
-      // Handle success response
       const result = await response.json();
       console.log("Data successfully submitted:", result);
+
+      // Update the user balance in the context
+      updateUserBalance(1000);
     } catch (error) {
-      // Handle error response
+      // TODO: Handle error response => have to be enhanced with custom error
       console.error("Error submitting data:", error);
     }
   };
 
   return (
     <div className='flex flex-col p-4'>
-      <h1 className='text-4xl font-bold mb-8'>{questTitle}</h1>
+      <h1 className='text-4xl font-bold mb-4'>{questTitle}</h1>
       <Text className='font-medium mb-4'>
-        In this quest we want to know a little more about you
+        With this quest we are curious about you
       </Text>
       <Text className='text-7xl mb-4'>🚀</Text>
       <Text className='font-small mb-4'>
-        These questions are mostly to create metadata on the content that you
-        will create <br />
+        These questions will help creating metadata on the content that you will
+        create in the later quests
+        <br />
       </Text>
       <div className='grid grid-cols-1 divide-y'>
         <div className='py-4'>

src/components/UserContext.tsx

@@ -22,6 +22,13 @@ const UserProvider: React.FC<{children: ReactNode}> = ({children}) => {
   const [currentTab, setCurrentTab] = useState<string>("home");
   const [error, setError] = useState<CustomError | null>(null);
 
+  const updateUserBalance = (points: number) => {
+    setUser(prevUser => ({
+      ...prevUser,
+      words: (prevUser.words || 0) + points,
+    }));
+  };
+
   useEffect(() => {
     const fetchUserData = async () => {
       try {
@@ -64,6 +71,7 @@ const UserProvider: React.FC<{children: ReactNode}> = ({children}) => {
         setIsLoggedIn,
         currentTab,
         setCurrentTab,
+        updateUserBalance,
       }}
     >
       {children}

src/stories/App.stories.tsx

@@ -47,6 +47,7 @@ const MockUserProvider: React.FC<UserProviderProps> = ({children}) => {
         setIsLoggedIn,
         currentTab,
         setCurrentTab,
+        updateUserBalance: () => {},
       }}
     >
       {children}

src/stories/Home.stories.tsx

@@ -47,6 +47,7 @@ const MockUserProvider: React.FC<UserProviderProps> = ({children}) => {
         setIsLoggedIn,
         currentTab,
         setCurrentTab,
+        updateUserBalance: () => {},
       }}
     >
       {children}

src/types/types.d.ts

@@ -46,6 +46,7 @@ export interface UserContextProps {
   setIsLoggedIn: React.Dispatch<React.SetStateAction<boolean>>;
   currentTab: string;
   setCurrentTab: React.Dispatch<React.SetStateAction<string>>;
+  updateUserBalance: (points: number) => void;
 }
 
 // Define the TelegramUser interface with required Telegram-specific properties