react-native-salespanda 0.7.6 → 0.7.7

package/src/screens/Tabs/HomeScreen.tsx

@@ -0,0 +1,379 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+  Image,
+  FlatList,
+  Dimensions,
+} from 'react-native';
+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;
+  imageUrl?: string | null;
+  onPress?: () => void;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ imageUrl, onPress }) => {
+  return (
+    <TouchableOpacity
+      style={styles.menuItem}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      {imageUrl ? (
+        <Image source={{ uri: imageUrl }} style={styles.menuItemImage} />
+      ) : (
+        <Loader message="" />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const HomeScreen: React.FC = () => {
+  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;
+    link?: string | null;
+  };
+
+  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,
+            link: item.link ?? null,
+          }))
+        : [],
+    [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);
+
+  const handleMomentumScrollEnd = (e: any) => {
+    const offsetX = e.nativeEvent.contentOffset.x;
+    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 (
+            !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) {
+          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 =
+          bannerItems.length > 0 ? (prev + 1) % bannerItems.length : 0;
+        if (flatListRef.current) {
+          try {
+            flatListRef.current.scrollToIndex({ index: next, animated: true });
+          } catch {
+            // ignore scroll failures
+          }
+        }
+        return next;
+      });
+    }, 2500);
+    return () => {
+      clearInterval(id);
+    };
+  }, [bannerItems.length]);
+
+  return (
+    <SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
+      <View style={styles.container}>
+        <TabsHeader title="Home" />
+
+        <View style={styles.contentWrapper}>
+          {loading || isHomeFetching || !homeData ? (
+            <Loader overlay message="Loading home data..." />
+          ) : null}
+
+          <View style={styles.carouselContainer}>
+            <FlatList
+              ref={flatListRef}
+              data={bannerItems}
+              keyExtractor={(item, idx) => `${item.title || 'banner'}-${idx}`}
+              renderItem={({ item }) => (
+                <TouchableOpacity activeOpacity={0.9} onPress={() => {}}>
+                  <Image
+                    source={{ uri: item.image }}
+                    style={[styles.carouselImage, { width: screenWidth }]}
+                  />
+                </TouchableOpacity>
+              )}
+              horizontal
+              pagingEnabled
+              showsHorizontalScrollIndicator={false}
+              onMomentumScrollEnd={handleMomentumScrollEnd}
+              getItemLayout={(_, index) => ({
+                length: screenWidth,
+                offset: screenWidth * index,
+                index,
+              })}
+            />
+            <View style={styles.carouselIndicatorsOverlay}>
+              {bannerItems.map((_, idx) => (
+                <View
+                  key={idx}
+                  style={[
+                    styles.indicator,
+                    idx === activeIndex ? styles.activeIndicator : null,
+                  ]}
+                />
+              ))}
+            </View>
+          </View>
+
+          <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}
+
+            {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>
+  );
+};
+
+export default HomeScreen;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  scrollView: {
+    flex: 1,
+    backgroundColor: Colors.white,
+  },
+  scrollContent: {
+    paddingBottom: verticalScale(24),
+  },
+  carouselContainer: {
+    width: '100%',
+    backgroundColor: Colors.white,
+    position: 'relative',
+  },
+  carouselImage: {
+    height: verticalScale(155),
+    resizeMode: 'contain',
+    backgroundColor: Colors.white,
+  },
+  carouselIndicatorsOverlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: verticalScale(20),
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  indicator: {
+    width: scale(8),
+    height: scale(8),
+    borderRadius: moderateScale(4),
+    backgroundColor: Colors.divider,
+    marginHorizontal: scale(4),
+  },
+  activeIndicator: {
+    backgroundColor: Colors.white,
+    width: scale(24),
+  },
+  menuGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingTop: scale(8),
+    paddingBottom: verticalScale(16),
+    justifyContent: 'flex-start',
+    alignSelf: 'center',
+    width: '100%',
+  },
+  menuItem: {
+    width: '29.5%',
+    aspectRatio: 1,
+    borderRadius: moderateScale(16),
+    marginBottom: moderateVerticalScale(8),
+    marginHorizontal: scale(6),
+    overflow: 'hidden',
+  },
+  iconContainer: {
+    width: scale(50),
+    height: scale(50),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(8),
+  },
+  iconText: {
+    fontSize: moderateScale(24),
+  },
+  menuItemImage: {
+    width: '100%',
+    height: '100%',
+    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/screens/Tabs/NotificationsScreen.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../../constants/Colors';
+import TabsHeader from '../../components/TabsHeader';
+
+const NotificationsScreen: React.FC = () => {
+  return (
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
+      <TabsHeader title="Notifications" />
+      <ScrollView style={styles.scrollView} />
+    </SafeAreaView>
+  );
+};
+
+export default NotificationsScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  scrollView: {
+    flex: 1,
+  },
+});

package/src/screens/contentliberary/contentliberary.tsx

@@ -0,0 +1,268 @@
+import { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TextInput,
+  FlatList,
+  Image,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const { width } = Dimensions.get('window');
+const categories = [
+  'All',
+  'Co-Branded',
+  'Videos',
+  'Reel',
+  'Social',
+  'Brochure',
+  'Leaflet',
+];
+const greetingsData = [
+  {
+    id: '1',
+    title: 'Happy Diwali!',
+    tags: ['Video', 'Co-branded'],
+    image:
+      'https://img.freepik.com/premium-vector/poster-festival-lights-diwali_1287372-756.jpg?w=1060',
+  },
+  {
+    id: '2',
+    title: 'Happy Diwali!',
+    tags: ['Video', 'Co-branded'],
+    image:
+      'https://img.freepik.com/premium-vector/poster-festival-lights-diwali_1287372-756.jpg?w=1060',
+  },
+];
+export default function DashboardScreen() {
+  const [selectedCat, setSelectedCat] = useState('All');
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <SafeAreaView>
+        {/* Header */}
+        <View style={styles.headerRow}>
+          <TouchableOpacity>
+            <FeatherIcon name="arrow-left" size={24} color="#000" />
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>Content Library</Text>
+          <TouchableOpacity>
+            <FeatherIcon name="heart" size={24} color="#000" />
+          </TouchableOpacity>
+        </View>
+        {/* Search Bar */}
+        <View style={styles.searchBox}>
+          <FeatherIcon name="search" size={18} color="#999" />
+          <TextInput
+            placeholder="Search by content name, tags"
+            placeholderTextColor="#999"
+            style={styles.input}
+          />
+        </View>
+        {/* Category Tabs */}
+        <View style={styles.categoryContainer}>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            {categories.map((cat, index) => {
+              const isActive = selectedCat === cat;
+              return (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => setSelectedCat(cat)}
+                  style={styles.tabItem}
+                >
+                  <Text
+                    style={[styles.tabText, isActive && styles.activeTabText]}
+                  >
+                    {cat}
+                  </Text>
+                  {/* Yellow bottom line */}
+                  {isActive ? (
+                    <View style={styles.activeLine} />
+                  ) : (
+                    <View style={{ height: 3 }} />
+                  )}
+                </TouchableOpacity>
+              );
+            })}
+          </ScrollView>
+        </View>
+        {/* Greetings Section */}
+        <View style={styles.sectionHeader}>
+          <Text style={styles.sectionTitle}>Greetings (9)</Text>
+          <TouchableOpacity>
+            <Text style={styles.seeAll}>See all</Text>
+          </TouchableOpacity>
+        </View>
+        <FlatList
+          data={greetingsData}
+          keyExtractor={(item) => item.id}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          renderItem={({ item }) => <Card item={item} />}
+        />
+      </SafeAreaView>
+    </ScrollView>
+  );
+}
+function Card({ item }: any) {
+  return (
+    <View style={styles.card}>
+      <Image source={{ uri: item.image }} style={styles.cardImage} />
+      {/* Heart button */}
+      <TouchableOpacity style={styles.cardHeart}>
+        <FeatherIcon name="heart" size={18} color="#fff" />
+      </TouchableOpacity>
+      {/* Tags */}
+      <View style={styles.tagRow}>
+        {item.tags.map((t: string, i: number) => (
+          <View key={i} style={styles.tag}>
+            <Text style={styles.tagText}>{t}</Text>
+          </View>
+        ))}
+      </View>
+      {/* Title + Share */}
+      <View style={styles.cardFooter}>
+        <Text numberOfLines={1} style={styles.cardTitle}>
+          {item.title}
+        </Text>
+        <TouchableOpacity
+          style={{ flexDirection: 'row', alignItems: 'center' }}
+        >
+          <Text style={styles.shareText}>Share</Text>
+          <FeatherIcon name="chevron-right" size={16} color="#ff9900" />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: '#fff',
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginLeft: -120, // shifts title closer to back icon like screenshot
+  },
+  searchBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    marginTop: 10,
+  },
+  input: {
+    marginLeft: 8,
+    flex: 1,
+    fontSize: 14,
+  },
+  categoryContainer: {
+    marginTop: 18,
+    paddingBottom: 6,
+    borderBottomWidth: 1,
+    borderColor: '#e4e4e4',
+  },
+  tabItem: {
+    marginRight: 24,
+    alignItems: 'center',
+  },
+  tabText: {
+    fontSize: 15,
+    color: '#666',
+    marginBottom: 6,
+  },
+  activeTabText: {
+    color: '#000',
+    fontWeight: '600',
+  },
+  activeLine: {
+    height: 3,
+    width: 25,
+    backgroundColor: '#fbbf24', // exact yellow underline
+    borderRadius: 2,
+  },
+  sectionHeader: {
+    marginTop: 20,
+    marginBottom: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  seeAll: {
+    color: '#ff9900',
+    fontWeight: '600',
+  },
+  card: {
+    width: width * 0.7,
+    marginRight: 16,
+    borderRadius: 14,
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+    elevation: 2,
+  },
+  cardImage: {
+    width: '100%',
+    height: 160,
+  },
+  cardHeart: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    padding: 6,
+    borderRadius: 20,
+  },
+  tagRow: {
+    flexDirection: 'row',
+    marginTop: 6,
+    marginLeft: 8,
+  },
+  tag: {
+    backgroundColor: '#fff',
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 6,
+    marginRight: 6,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  tagText: {
+    fontSize: 10,
+    color: '#444',
+  },
+  cardFooter: {
+    padding: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cardTitle: {
+    width: '60%',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  shareText: {
+    color: '#ff9900',
+    fontWeight: '600',
+    marginRight: 4,
+  },
+});