react-native-salespanda 0.4.3 → 0.4.5

package/src/screens/Tabs/HomeScreen.tsx

@@ -9,22 +9,42 @@ import {
   FlatList,
   Dimensions,
 } from 'react-native';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { Colors } from '../../constants/Colors';
+import {
+  scale,
+  verticalScale,
+  moderateScale,
+  moderateVerticalScale,
+} from 'react-native-size-matters';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import Loader from '../../components/Loader';
 import TabsHeader from '../../components/TabsHeader';
+import { Colors } from '../../constants/Colors';
+import {
+  useAuthenticateMutation,
+  useLazyGetHomeQuery,
+  useSpssoLoginMutation,
+  loadPersistedTokens,
+  persistTokens,
+  setRuntimeTokens,
+  clearPersistedTokens,
+} from '../../services/api';
+import type { HomeResponse } from '../../services/api';
 
 interface MenuItemProps {
   title: string;
-  icon: string;
+  imageUrl?: string | null;
   onPress?: () => void;
 }
 
-const MenuItem: React.FC<MenuItemProps> = ({ title, icon, onPress }) => {
+const MenuItem: React.FC<MenuItemProps> = ({ title, imageUrl, onPress }) => {
   return (
     <TouchableOpacity style={styles.menuItem} onPress={onPress}>
       <View style={styles.iconContainer}>
-        <Text style={styles.iconText}>{icon}</Text>
+        {imageUrl ? (
+          <Image source={{ uri: imageUrl }} style={styles.menuItemImage} />
+        ) : (
+          <Text style={styles.iconText}>📌</Text>
+        )}
       </View>
       <Text style={styles.menuItemText}>{title}</Text>
     </TouchableOpacity>
@@ -32,14 +52,34 @@ const MenuItem: React.FC<MenuItemProps> = ({ title, icon, onPress }) => {
 };
 
 const HomeScreen: React.FC = () => {
-  const images = [
-    'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop',
-    'https://images.unsplash.com/photo-1482192596544-9eb780fc7f66?q=80&w=1200&auto=format&fit=crop',
-    'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1200&auto=format&fit=crop',
-    'https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1200&auto=format&fit=crop',
-    'https://images.unsplash.com/photo-1460353581641-37baddab0fa2?q=80&w=1200&auto=format&fit=crop',
-    'https://images.unsplash.com/photo-1496302662116-35cc4f36df92?q=80&w=1200&auto=format&fit=crop',
-  ];
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [homeData, setHomeData] = React.useState<
+    HomeResponse['response'] | null
+  >(null);
+
+  type BannerItem = {
+    image: string;
+    title?: string;
+  };
+
+  const [authenticate] = useAuthenticateMutation();
+  const [spssoLogin] = useSpssoLoginMutation();
+  const [triggerHome, { isFetching: isHomeFetching }] = useLazyGetHomeQuery();
+
+  const bannerItems: BannerItem[] = React.useMemo(
+    () =>
+      homeData?.home_banner && homeData.home_banner.length > 0
+        ? homeData.home_banner.map((item) => ({
+            image: item.image,
+            title: item.title ?? undefined,
+          }))
+        : [],
+    [homeData?.home_banner]
+  );
+
+  const menuItems = React.useMemo(() => homeData?.menu ?? [], [homeData?.menu]);
+
   const screenWidth = Dimensions.get('window').width;
   const [activeIndex, setActiveIndex] = React.useState(0);
   const flatListRef = React.useRef<any>(null);
@@ -49,10 +89,92 @@ const HomeScreen: React.FC = () => {
     const index = Math.round(offsetX / screenWidth);
     setActiveIndex(index);
   };
+
+  const loadHomeData = React.useCallback(
+    async (isRetry?: boolean) => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const storedTokens = await loadPersistedTokens();
+        let accessToken = storedTokens.accessToken;
+        let token = storedTokens.token;
+
+        if (!accessToken) {
+          const authResp = await authenticate({}).unwrap();
+          accessToken = authResp.access_token;
+          setRuntimeTokens({ accessToken });
+          await persistTokens({ accessToken });
+        }
+
+        if (!token && accessToken) {
+          const ssoResp = await spssoLogin({
+            access_token: accessToken,
+          }).unwrap();
+          token = ssoResp.token;
+          setRuntimeTokens({ token });
+          await persistTokens({ token });
+        }
+
+        if (!token) {
+          throw new Error('Missing auth token, please try again.');
+        }
+
+        const tokenHeader: string | undefined = token ?? undefined;
+        const homeResp = await triggerHome({
+          tokenOverride: tokenHeader,
+        }).unwrap();
+
+        const isSuccess =
+          homeResp.statusCode === '200' &&
+          homeResp.status?.toLowerCase() === 'success';
+        if (!isSuccess) {
+          const code = homeResp.statusCode;
+
+          // If unauthorized, clear tokens once and retry
+          if (
+            !isRetry &&
+            code &&
+            (code === '1008' || code === '401' || code === '403')
+          ) {
+            await clearPersistedTokens();
+            setRuntimeTokens({ token: null, accessToken: null });
+            await loadHomeData(true);
+            return;
+          }
+
+          throw new Error(homeResp.message || 'Failed to load home data');
+        }
+
+        setHomeData(homeResp.response);
+        setLoading(false);
+      } catch (e: any) {
+        const statusCode = e?.status || e?.data?.statusCode;
+        if (statusCode === 401 || statusCode === 403) {
+          // For unauthorized keep loader spinning (no static fallback)
+          setError(null);
+          return;
+        }
+        setError(
+          e?.data?.message ||
+            e?.message ||
+            'Failed to load home data. Please try again.'
+        );
+        setLoading(false);
+      }
+    },
+    [authenticate, spssoLogin, triggerHome]
+  );
+
+  React.useEffect(() => {
+    loadHomeData();
+  }, [loadHomeData]);
+
   React.useEffect(() => {
     const id = setInterval(() => {
       setActiveIndex((prev) => {
-        const next = (prev + 1) % images.length;
+        const next =
+          bannerItems.length > 0 ? (prev + 1) % bannerItems.length : 0;
         if (flatListRef.current) {
           try {
             flatListRef.current.scrollToIndex({ index: next, animated: true });
@@ -63,23 +185,29 @@ const HomeScreen: React.FC = () => {
         return next;
       });
     }, 2500);
-    return () => clearInterval(id);
-  }, [images.length]);
+    return () => {
+      clearInterval(id);
+    };
+  }, [bannerItems.length]);
 
   return (
     <SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
       <View style={styles.container}>
         <TabsHeader title="Home" />
-        <ScrollView style={styles.scrollView}>
-          {/* Edge-to-edge Image Carousel */}
+
+        <View style={styles.contentWrapper}>
+          {loading || isHomeFetching || !homeData ? (
+            <Loader overlay message="Loading home data..." />
+          ) : null}
+
           <View style={styles.carouselContainer}>
             <FlatList
               ref={flatListRef}
-              data={images}
-              keyExtractor={(_, idx) => `${idx}`}
+              data={bannerItems}
+              keyExtractor={(item, idx) => `${item.title || 'banner'}-${idx}`}
               renderItem={({ item }) => (
                 <Image
-                  source={{ uri: item }}
+                  source={{ uri: item.image }}
                   style={[styles.carouselImage, { width: screenWidth }]}
                 />
               )}
@@ -93,9 +221,8 @@ const HomeScreen: React.FC = () => {
                 index,
               })}
             />
-            {/* Overlay Indicators at bottom of the image */}
             <View style={styles.carouselIndicatorsOverlay}>
-              {images.map((_, idx) => (
+              {bannerItems.map((_, idx) => (
                 <View
                   key={idx}
                   style={[
@@ -107,30 +234,32 @@ const HomeScreen: React.FC = () => {
             </View>
           </View>
 
-          {/* Menu Grid */}
-          <View style={styles.menuGrid}>
-            <MenuItem title="Content Library" icon="📚" />
-            <MenuItem title="DigiCard" icon="�" />
-            <MenuItem title="Leads" icon="🎯" />
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.scrollContent}
+          >
+            {error ? (
+              <>
+                <Text style={styles.errorText}>{error}</Text>
+                <TouchableOpacity onPress={() => loadHomeData()}>
+                  <Text style={styles.retryText}>Tap to retry</Text>
+                </TouchableOpacity>
+              </>
+            ) : null}
 
-            <MenuItem title="Email Campaign" icon="📧" />
-            <MenuItem title="Cadence" icon="⏰" />
-            <MenuItem title="Social Setup" icon="�" />
-
-            <MenuItem title="Quiz,Calculator & Referrals" icon="❓" />
-            <MenuItem title="My Profile" icon="�" />
-
-            <MenuItem title="Microsite Setup" icon="⚙️" />
-            <MenuItem title="My Activity" icon="📊" />
-            <MenuItem title="Internal Communication" icon="💬" />
-
-            <MenuItem title="Help Videos" icon="🎥" />
-            <MenuItem title="Import Gmail" icon="�" />
-            <MenuItem title="Proposal" icon="📋" />
-
-            <MenuItem title="Courses" icon="🎓" />
-          </View>
-        </ScrollView>
+            {menuItems.length > 0 ? (
+              <View style={styles.menuGrid}>
+                {menuItems.map((item) => (
+                  <MenuItem
+                    key={item.title}
+                    title={item.title}
+                    imageUrl={item.image}
+                  />
+                ))}
+              </View>
+            ) : null}
+          </ScrollView>
+        </View>
       </View>
     </SafeAreaView>
   );
@@ -151,20 +280,24 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.white,
   },
+  scrollContent: {
+    paddingBottom: verticalScale(24),
+  },
   carouselContainer: {
     width: '100%',
-    backgroundColor: Colors.white, // subtle backplate for image load
+    backgroundColor: Colors.white,
     position: 'relative',
   },
   carouselImage: {
-    height: verticalScale(200),
-    resizeMode: 'cover',
+    height: verticalScale(155),
+    resizeMode: 'contain',
+    backgroundColor: Colors.white,
   },
   carouselIndicatorsOverlay: {
     position: 'absolute',
     left: 0,
     right: 0,
-    bottom: verticalScale(12),
+    bottom: verticalScale(20),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -183,30 +316,28 @@ const styles = StyleSheet.create({
   menuGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    padding: scale(8),
-    justifyContent: 'space-between',
+    paddingTop: scale(8),
+    paddingBottom: verticalScale(16),
+    justifyContent: 'flex-start',
+    alignSelf: 'center',
+    width: '94%',
   },
   menuItem: {
-    width: '31%',
+    width: '29.5%',
     aspectRatio: 1,
     backgroundColor: Colors.lightblue,
     borderRadius: moderateScale(16),
-    padding: scale(12),
-    marginBottom: verticalScale(12),
+    padding: moderateScale(12),
+    marginBottom: moderateVerticalScale(8),
+    marginHorizontal: scale(6),
     alignItems: 'center',
     justifyContent: 'center',
-    shadowColor: Colors.black,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.1,
-    shadowRadius: 0.5,
     borderWidth: 1,
     borderColor: Colors.border,
   },
   iconContainer: {
     width: scale(50),
     height: scale(50),
-    borderRadius: moderateScale(25),
-    backgroundColor: Colors.divider,
     justifyContent: 'center',
     alignItems: 'center',
     marginBottom: verticalScale(8),
@@ -214,10 +345,38 @@ const styles = StyleSheet.create({
   iconText: {
     fontSize: moderateScale(24),
   },
+  menuItemImage: {
+    width: scale(40),
+    height: scale(40),
+    borderRadius: moderateScale(20),
+    resizeMode: 'cover',
+  },
   menuItemText: {
     fontSize: moderateScale(11),
     textAlign: 'center',
     color: Colors.black,
     fontWeight: '500',
   },
+  statusText: {
+    fontSize: moderateScale(12),
+    color: Colors.black,
+    paddingHorizontal: scale(12),
+    paddingTop: verticalScale(8),
+  },
+  errorText: {
+    fontSize: moderateScale(12),
+    color: 'red',
+    paddingHorizontal: scale(12),
+    paddingTop: verticalScale(4),
+  },
+  retryText: {
+    fontSize: moderateScale(12),
+    color: Colors.primary,
+    paddingHorizontal: scale(12),
+    paddingTop: verticalScale(6),
+  },
+  contentWrapper: {
+    flex: 1,
+    position: 'relative',
+  },
 });

package/src/services/api.ts

@@ -0,0 +1,173 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+const BASE_URL = 'https://app.sptestmfp.com/';
+const DEFAULT_CLIENT_ID = 'vPUz1fFucjlNAV8rujFg7AfGbS3Ay/4=';
+const DEFAULT_AGENT_ID = '3pYw3fp0iTwOge6wjf4i+Fm7QBbx';
+const TOKENS_KEY = '@salespanda/sdk/tokens';
+
+export type RuntimeTokens = {
+  token: string | null;
+  accessToken: string | null;
+};
+
+export type AuthenticateResponse = {
+  statusCode: string;
+  status: string;
+  message: string;
+  expire_datetime?: string;
+  access_token: string;
+};
+
+export type SsoLoginResponse = {
+  statusCode: string;
+  status: string;
+  message: string;
+  token: string;
+  response?: unknown;
+};
+
+export type HomeMenuItem = {
+  title: string;
+  desciption?: string | null;
+  image?: string | null;
+  banner_image?: string | null;
+  page_key?: string | null;
+  link?: string | null;
+};
+
+export type HomeBannerItem = {
+  title?: string | null;
+  desciption?: string | null;
+  image: string;
+  page_key?: string | null;
+  link?: string | null;
+  user_type?: string | null;
+  app_page?: number;
+};
+
+export type HomeResponse = {
+  statusCode: string;
+  status: string;
+  message: string;
+  response: {
+    menu: HomeMenuItem[];
+    home_banner: HomeBannerItem[];
+    [key: string]: unknown;
+  };
+};
+
+let runtimeTokens: RuntimeTokens = {
+  token: null,
+  accessToken: null,
+};
+
+export const setRuntimeTokens = (tokens: Partial<RuntimeTokens>) => {
+  runtimeTokens = { ...runtimeTokens, ...tokens };
+};
+
+export const getRuntimeTokens = (): RuntimeTokens => runtimeTokens;
+
+export const loadPersistedTokens = async (): Promise<RuntimeTokens> => {
+  try {
+    const stored = await AsyncStorage.getItem(TOKENS_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored) as RuntimeTokens;
+      runtimeTokens = {
+        token: parsed.token || null,
+        accessToken: parsed.accessToken || null,
+      };
+      return runtimeTokens;
+    }
+  } catch {
+    // ignore storage failures
+  }
+  return { token: null, accessToken: null };
+};
+
+export const persistTokens = async (tokens: Partial<RuntimeTokens>) => {
+  const next = { ...runtimeTokens, ...tokens };
+  runtimeTokens = next;
+  try {
+    await AsyncStorage.setItem(TOKENS_KEY, JSON.stringify(next));
+  } catch {
+    // ignore storage failures
+  }
+};
+
+export const clearPersistedTokens = async () => {
+  runtimeTokens = { token: null, accessToken: null };
+  try {
+    await AsyncStorage.removeItem(TOKENS_KEY);
+  } catch {
+    // ignore storage failures
+  }
+};
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: BASE_URL,
+  prepareHeaders: (headers) => {
+    if (runtimeTokens.token) {
+      headers.set('Token', runtimeTokens.token);
+    }
+    return headers;
+  },
+});
+
+export const salespandaApi = createApi({
+  reducerPath: 'salespandaApi',
+  baseQuery,
+  endpoints: (builder) => ({
+    authenticate: builder.mutation<
+      AuthenticateResponse,
+      { agent_id?: string; clientId?: string }
+    >({
+      query: ({ agent_id = DEFAULT_AGENT_ID, clientId }) => ({
+        url: 'framework/api/authenticate',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Client-Id': clientId || DEFAULT_CLIENT_ID,
+        },
+        body: { agent_id },
+      }),
+    }),
+    spssoLogin: builder.mutation<
+      SsoLoginResponse,
+      { access_token: string; app_version?: string }
+    >({
+      query: ({ access_token, app_version = '1.0' }) => ({
+        url: 'framework/api/spssologin',
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: { app_version, access_token },
+      }),
+    }),
+    getHome: builder.query<
+      HomeResponse,
+      { app_version?: string; tokenOverride?: string }
+    >({
+      query: ({ app_version = '5.0.1', tokenOverride } = {}) => ({
+        url: 'manager/apis/V2/app-home-screen.php',
+        method: 'POST',
+        headers: tokenOverride
+          ? {
+              'Token': tokenOverride,
+              'Content-Type': 'application/json',
+            }
+          : {
+              'Content-Type': 'application/json',
+            },
+        body: { app_version },
+      }),
+    }),
+  }),
+});
+
+export const {
+  useAuthenticateMutation,
+  useSpssoLoginMutation,
+  useLazyGetHomeQuery,
+} = salespandaApi;

package/src/services/authService.ts

@@ -0,0 +1,75 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  clearPersistedTokens,
+  getRuntimeTokens,
+  setRuntimeTokens,
+} from './api';
+
+const USER_KEY = '@salespanda/sdk/user';
+
+export type AuthUser = {
+  id?: string;
+  name?: string;
+  email?: string;
+  phone?: string;
+  raw?: unknown;
+};
+
+let runtimeUser: AuthUser | null = null;
+
+export const login = async (
+  user?: AuthUser,
+  token?: string,
+  accessToken?: string
+) => {
+  if (token) {
+    setRuntimeTokens({ token });
+  }
+  if (accessToken) {
+    setRuntimeTokens({ accessToken });
+  }
+  if (user) {
+    runtimeUser = user;
+    try {
+      await AsyncStorage.setItem(USER_KEY, JSON.stringify(user));
+    } catch {
+      // ignore storage failures
+    }
+  }
+};
+
+export const logout = async () => {
+  runtimeUser = null;
+  await clearPersistedTokens();
+  try {
+    await AsyncStorage.removeItem(USER_KEY);
+  } catch {
+    // ignore storage failures
+  }
+};
+
+export const isAuthenticated = (): boolean => {
+  const tokens = getRuntimeTokens();
+  return Boolean(tokens.token || tokens.accessToken);
+};
+
+export const getCurrentUser = async (): Promise<AuthUser | null> => {
+  if (runtimeUser) {
+    return runtimeUser;
+  }
+  try {
+    const stored = await AsyncStorage.getItem(USER_KEY);
+    if (stored) {
+      runtimeUser = JSON.parse(stored) as AuthUser;
+      return runtimeUser;
+    }
+  } catch {
+    // ignore storage failures
+  }
+  return null;
+};
+
+export const getCurrentToken = (): string | null => {
+  const tokens = getRuntimeTokens();
+  return tokens.token || tokens.accessToken;
+};

package/src/store/index.ts

@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { setupListeners } from '@reduxjs/toolkit/query';
+import { salespandaApi } from '../services/api';
+
+export const store = configureStore({
+  reducer: {
+    [salespandaApi.reducerPath]: salespandaApi.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(salespandaApi.middleware),
+});
+
+setupListeners(store.dispatch);
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;