Feature/membership UI

context/AppContextProvider.tsx

@@ -84,7 +84,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
 
         if (res.status === 200) {
           setAuthToken(res.data?.token);
-          setCurrentUser(res.data.user);
+          setCurrentUser({ ...res.data.user, token: res.data.token });
           logger.info('User authenticated successfully.');
           setTimeout(() => {
             setIsSigningInUser(false); // hide the splash screen after the delay

src/app/[locale]/membership/page.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import MembershipScreen from "@/components/shared/membership/membershipScreen";
+
+interface MembershipPageProps {}
+
+const MembershipPage: React.FC<MembershipPageProps> = () => {
+  return <MembershipScreen />;
+};
+
+export default MembershipPage;

src/components/shared/membership/membershipScreen.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+import { useContext } from "react";
+import { AppContext } from "../../../../context/AppContextProvider";
+import { checkAndAutoLoginUser } from "@/utils/auth";
+import { IMembership } from "../../../constants/types";
+
+const MembershipScreen = () => {
+  const router = useRouter();
+  const { currentUser, autoLoginUser } = useContext(AppContext);
+  const [membershipData, setMembershipData] = useState<IMembership | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const membershipOptions = [
+    { value: "Casual", label: "Casual" },
+    { value: "Member", label: "Member" },
+    { value: "Green", label: "Green" },
+    { value: "Gold", label: "Gold" },
+    { value: "Double Gold", label: "Double Gold" },
+    { value: "Triple Gold", label: "Triple Gold" },
+  ];
+
+  const [selectedMembership, setSelectedMembership] = useState<string>("");
+
+  useEffect(() => {
+    const fetchMembershipData = async () => {
+      if (currentUser) {
+        try {
+          console.log("Authorization Header:", `Bearer ${currentUser?.token || "MISSING"}`);
+
+          const response = await axios.get(
+            `http://localhost:8001/api/v1/membership/membership-status/${currentUser.pi_uid}`,
+            {
+              headers: {
+                Authorization: `Bearer ${currentUser.token || ""}`,
+              },
+            }
+          );
+          setMembershipData(response.data); // Ensure response.data matches IMembership
+        } catch (error) {
+          console.error("Error fetching membership data:", error);
+        } finally {
+          setLoading(false);
+        }
+      } else {
+        setLoading(false);
+      }
+    };
+
+    // Ensure user is logged in
+    checkAndAutoLoginUser(currentUser, autoLoginUser);
+    fetchMembershipData();
+  }, [currentUser, autoLoginUser, router]);
+
+  if (loading) {
+    return <p className="text-center text-gray-600 mt-10">Loading...</p>;
+  }
+
+  if (!membershipData) {
+    return <p className="text-center text-gray-600 mt-10">No membership data available.</p>;
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto p-6">
+      <h1 className="text-2xl font-bold text-center text-gray-600 mb-6">Membership</h1>
+
+      <div className="mb-5">
+        <h2 className="text-base font-bold text-gray-700">Current Member Class:</h2>
+        <p className="text-gray-600 text-sm mt-1">
+          {membershipData.membership_class || "Casual"}
+        </p>
+      </div>
+
+      <div className="mb-5">
+        <h2 className="text-base font-bold text-gray-700">Subscribe To New Membership:</h2>
+        <p className="text-gray-600 text-sm mt-1"> 
+          Or buy a single mappi. <br/> 
+          Select from drop-down to go to Pi Wallet.</p>
+      </div>
+
+      <div className="mb-5">
+        <h2 className="text-base font-semibold text-gray-700">Membership Latest End Date:</h2>
+        <p className="text-gray-600 text-sm mt-1">
+          {membershipData.membership_expiration
+            ? new Date(membershipData.membership_expiration).toLocaleString()
+            : "No active membership"}
+        </p>
+      </div>
+
+      <div className="mb-5">
+        <h2></h2>
+      </div>
+
+      <div className="mb-5">
+        <h2 className="text-base font-semibold text-gray-700">Mappi allowance remaning:</h2>
+        <p className="text-gray-600 text-sm mt-1">{membershipData.mappi_balance || 0}</p>
+      </div>
+    </div>
+  );
+};
+
+export default MembershipScreen;

src/components/shared/sidebar/sidebar.tsx

@@ -341,6 +341,24 @@ function Sidebar(props: any) {
               />
           </div>
 
+           {/* membership screen */}
+           <div className='mb-2'>
+            <Button
+                label={t('Membership')}
+                styles={{
+                  color: '#ffc153',
+                  width: '100%',
+                  padding: '10px',
+                  borderRadius: '10px',
+                  fontSize: '18px' 
+                }}
+                onClick={() => {
+                  router.push(`/${locale}/membership`);
+                  props.setToggleDis(false); // Close sidebar on click
+                }}
+              />
+          </div>
+
           {/* user settings form fields */}
           <div className="flex flex-col justify-items-center mx-auto text-center gap-1">
             <Input

src/constants/types.ts

@@ -1,7 +1,10 @@
+import { MembershipType } from "../enum/MembershipTypes";
+
 export interface IUser {
   pi_uid: string;
   pi_username: string;
   user_name: string;
+  token: string;
 }
 
 export interface IUserSettings {
@@ -61,6 +64,14 @@ export interface ReviewInt {
   image: string;
 }
 
+export interface IMembership extends Document {
+  pi_uid: string;
+  membership_class: MembershipType;
+  mappi_balance: number;
+  membership_expiration: Date | null;
+  mappi_used_to_date: number;
+}
+
 export enum DeviceLocationType {
   Automatic = 'auto',
   GPS = 'deviceGPS',

src/enum/MembershipTypes.ts

@@ -0,0 +1,8 @@
+export enum MembershipType {
+    Casual = "Casual",
+    Member = "Member",
+    Green = "Green",
+    Gold = "Gold",
+    DoubleGold = "Double Gold",
+    TripleGold = "Triple Gold",
+  }