diff --git a/public/emoji/microphone.png b/public/emoji/microphone.png new file mode 100644 index 0000000..7018165 Binary files /dev/null and b/public/emoji/microphone.png differ diff --git a/public/emoji/standin_person.png b/public/emoji/standin_person.png deleted file mode 100644 index 4684c2b..0000000 Binary files a/public/emoji/standin_person.png and /dev/null differ diff --git a/public/emoji/walking.png b/public/emoji/walking.png new file mode 100644 index 0000000..56df032 Binary files /dev/null and b/public/emoji/walking.png differ diff --git a/public/emoji/writing-hand.png b/public/emoji/writing_hand.png similarity index 99% rename from public/emoji/writing-hand.png rename to public/emoji/writing_hand.png index 4359dd1..087b9dc 100644 Binary files a/public/emoji/writing-hand.png and b/public/emoji/writing_hand.png differ diff --git a/src/App.tsx b/src/App.tsx index 9a38626..5017dad 100644 --- a/src/App.tsx +++ b/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 => { diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 66989ae..41ab7bb 100644 --- a/src/components/Home.tsx +++ b/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 = () => { diff --git a/src/components/Quest.tsx b/src/components/Quest.tsx index 5caf4e1..fd4e85d 100644 --- a/src/components/Quest.tsx +++ b/src/components/Quest.tsx @@ -16,21 +16,16 @@ const Quest: React.FC = () => {
{!showInitialQuest ? ( <> -

Quest

- - Quests for content creation coming soon! - +

Quests

🚀 -
-
- 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,
- 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.

- Just watch out our socials! + Watch out our socials for quests announcements!
@@ -38,7 +33,7 @@ const Quest: React.FC = () => { 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={() => {}} + /> + { + 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 (
-

{questTitle}

+

{questTitle}

- In this quest we want to know a little more about you + With this quest we are curious about you 🚀 - These questions are mostly to create metadata on the content that you - will create
+ These questions will help creating metadata on the content that you will + create in the later quests +
diff --git a/src/components/UserContext.tsx b/src/components/UserContext.tsx index 3e03a04..639599f 100644 --- a/src/components/UserContext.tsx +++ b/src/components/UserContext.tsx @@ -22,6 +22,13 @@ const UserProvider: React.FC<{children: ReactNode}> = ({children}) => { const [currentTab, setCurrentTab] = useState("home"); const [error, setError] = useState(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} diff --git a/src/stories/App.stories.tsx b/src/stories/App.stories.tsx index 184309e..d741844 100644 --- a/src/stories/App.stories.tsx +++ b/src/stories/App.stories.tsx @@ -47,6 +47,7 @@ const MockUserProvider: React.FC = ({children}) => { setIsLoggedIn, currentTab, setCurrentTab, + updateUserBalance: () => {}, }} > {children} diff --git a/src/stories/Home.stories.tsx b/src/stories/Home.stories.tsx index 811954e..f06a1d7 100644 --- a/src/stories/Home.stories.tsx +++ b/src/stories/Home.stories.tsx @@ -47,6 +47,7 @@ const MockUserProvider: React.FC = ({children}) => { setIsLoggedIn, currentTab, setCurrentTab, + updateUserBalance: () => {}, }} > {children} diff --git a/src/types/types.d.ts b/src/types/types.d.ts index 0e9d3f5..7661de2 100644 --- a/src/types/types.d.ts +++ b/src/types/types.d.ts @@ -46,6 +46,7 @@ export interface UserContextProps { setIsLoggedIn: React.Dispatch>; currentTab: string; setCurrentTab: React.Dispatch>; + updateUserBalance: (points: number) => void; } // Define the TelegramUser interface with required Telegram-specific properties