create-gufran-expo-app 2.0.3 → 2.0.5

package/template/src/screens/raffles/RafflesScreen.tsx

@@ -1,495 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  StatusBar,
-  Platform,
-  TouchableOpacity,
-  Image,
-  FlatList,
-  Share
-} from 'react-native';
-import { RafflesScreenProps } from '../../types/navigation';
-import { Strings, theme } from '../../constants';
-import { moderateScale } from '../../utils/scaling';
-import { Fonts } from '../../constants/Fonts';
-import SVG from '../../assets/icons';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Button, TextInput } from '../../components/common';
-import { useInfiniteRaffles, mainService } from '../../services/mainServices';
-import Images from '../../assets/images';
-import { useFocusEffect } from '@react-navigation/native';
-
-export const RafflesScreen: React.FC<RafflesScreenProps> = ({ navigation, route }) => {
-  const { selectedClub, selectedMember: initialSelectedMember } = route?.params ?? {};
-
-  const memberId = initialSelectedMember?.id;
-  const clubId = selectedClub?.id;
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const {
-    data,
-    isLoading,
-    isError,
-    refetch,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    isRefetching,
-  } = useInfiniteRaffles(memberId, clubId, 10, searchQuery);
-
-
-  useFocusEffect(
-    React.useCallback(() => {
-      refetch();
-    }, [])
-  );
-
-
-  // Flatten API pages into a single array
-  const raffles = useMemo(() => {
-    const pages = data?.pages ?? [];
-    const flat = pages.flatMap((page: any) => {
-      const payload = page?.data;
-      if (Array.isArray(payload?.data)) return payload.data;
-      if (Array.isArray(payload)) return payload;
-      return [];
-    });
-    return flat;
-  }, [data]);
-
-  const renderRaffleCard = ({ item }: { item: any }) => {
-    const title = item?.title || item?.raffleTitle || 'Raffle';
-    const prizePool = item?.totalPricePoolAmount || '$0.00';
-    const drawDate = item?.drawDate || '';
-    const heroBanner = item?.heroBanner || item?.bannerImage || item?.bannerImageUrl || item?.image || '';
-    const referralSales = item?.totalSales || item?.totalSales || 0;
-    const raffleId = item?.raffleId || 0;
-
-    const onRaffleCardPress = () => {
-      navigation.navigate('RaffleDetails', {
-        selectedClub,
-        selectedMember: selectedClub?.selectedMember,
-        raffleId: raffleId,
-      });
-    }
-
-
-    const createNavigationData = () => {
-      const navigationData = {
-        selectedClub: selectedClub,
-        selectedMember: selectedClub?.selectedMember,
-        raffleId: raffleId,
-        raffleTitle: title,
-      };
-      console.log('Navigation data being passed:', navigationData);
-      return navigationData;
-    };
-
-    return (
-      <TouchableOpacity style={styles.cardContainer}
-        onPress={onRaffleCardPress}>
-        {!!heroBanner ? (
-          <Image source={{ uri: heroBanner }} style={styles.cardBanner} resizeMode="cover" />
-        ) : (
-
-          <View style={{}}>
-            <Image source={Images.clubDefauldImage} style={{ width: '100%', height: moderateScale(150) }} />
-          </View>
-        )
-        }
-        <View>
-          <Text style={styles.cardTitle}>{title}</Text>
-          <View style={styles.prizeContainer}>
-            <Text style={styles.prizeLabel}>Prize Pool: <Text style={{ fontFamily: Fonts.outfitSemiBold }}>${prizePool}</Text></Text>
-            <Text style={styles.drawDetails}>Draw Date: {drawDate}</Text>
-          </View>
-          <View style={styles.actionsRow}>
-            <Button
-              title="Refer to Friends"
-              onPress={async () => {
-                try {
-                  const response = await mainService.getReferralCode({
-                    raffleId: raffleId,
-                    memberId: memberId || 0,
-                  });
-
-                  const responseData = response?.data?.data;
-                  const referralCode = responseData?.referralCode || '';
-                  const clubCode = responseData?.clubCode || '';
-                  const clubName = responseData?.clubName || 'ClubYakka';
-
-                  const appLink = 'dummy url'; // Replace with actual app link
-                  const shareMessage =
-                    `Join the ${title} raffle on ClubYakka app!
-
-Use my referral code: "${referralCode}" when buying tickets
-
-Steps to buy:
-1. Ensure you have ${clubName} club already joined or if not, find it with club code: "${clubCode}" to join it
-2. Continue as desired member in Club Dashboard
-3. Click Raffle section and find raffle: "${title}"
-4. When buying raffle tickets, apply my code: "${referralCode}"
-5. Purchase raffle tickets and WIN!
-6. Click the link to open the app: ${appLink}`;
-
-                  Share.share(
-                    {
-                      message: shareMessage,
-                      url: appLink,
-                      title: `${clubName} Raffle on ClubYakka`
-                    },
-                    {
-                      dialogTitle: `Share ${title} Raffle`,
-                      subject: `Join ${title} on ClubYakka`
-                    }
-                  );
-                } catch (error) {
-                  console.error('Failed to get referral code:', error);
-                }
-              }}
-              variant="outline"
-              textStyle={styles.referButtonText}
-              style={{ flex: 0.55, borderColor: theme.colors.blue }}
-              size="small"
-            />
-            <Button
-              title="View"
-              onPress={onRaffleCardPress}
-              variant="outline"
-              textStyle={styles.viewButtonText}
-              style={{ flex: 0.4, borderColor: theme.colors.blue, backgroundColor: theme.colors.blue }}
-              size="small"
-            />
-          </View>
-          <TouchableOpacity style={styles.referralRow}
-            onPress={() => { navigation.navigate('MyReferralMembers', createNavigationData()) }}
-          >
-            <View style={styles.referralIconWrapper}>
-              <SVG.ReferralMembers width={moderateScale(25)} height={moderateScale(25)} />
-            </View>
-            <Text style={styles.referralLabel}>My Referral Members</Text>
-            <View style={styles.referralBadge}>
-              <Text style={styles.referralBadgeText}>{referralSales}</Text>
-            </View>
-          </TouchableOpacity>
-        </View>
-      </TouchableOpacity>
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <StatusBar
-        barStyle="light-content"
-        backgroundColor={theme.colors.blue}
-        translucent={Platform.OS === 'android' ? true : false}
-      />
-      {Platform.OS === 'ios' && <View style={styles.statusBarBackground} />}
-      <SafeAreaView style={styles.header}>
-        <View style={styles.headerTopRow}>
-          <TouchableOpacity onPress={() => navigation.goBack()}>
-            <SVG.arrowLeft_white width={moderateScale(25)} height={moderateScale(25)} />
-          </TouchableOpacity>
-          <View style={styles.clubInfoWrapper}>
-            <View style={styles.userConSty}>
-              {!!selectedClub?.clubImage ? (
-                <Image source={{ uri: selectedClub?.clubImage }} style={styles.userDetailsSty} resizeMode="cover" />
-              ) : (
-                <View style={styles.placeholderLogoHeader}>
-                  <SVG.UsersIcon width={moderateScale(20)} height={moderateScale(20)} />
-                </View>
-              )}
-            </View>
-            <Text style={styles.userNameSty}>{selectedClub?.clubName || 'Unknown Club'}</Text>
-          </View>
-        </View>
-        <View style={styles.titleWrapper}>
-          <Text style={styles.headerTitle}>Raffles</Text>
-        </View>
-        <View style={styles.addMemberContainer} />
-
-        <View style={styles.content}>
-          <View style={styles.searchContainer}>
-            <TextInput
-              placeholder="Search here"
-              placeholderTextColor={theme.colors.textSecondary}
-              value={searchQuery}
-              onChangeText={setSearchQuery}
-              autoCapitalize="none"
-              returnKeyType="search"
-              leftIcon={SVG.search}
-              leftIconStyle={{ marginLeft: moderateScale(10), width: moderateScale(18), height: moderateScale(18) }}
-              variant="outlined"
-              maxLength={30}
-            />
-          </View>
-          <FlatList
-            data={raffles}
-            keyExtractor={(item) => item.id}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={styles.listContent}
-            renderItem={renderRaffleCard}
-            onEndReachedThreshold={0.5}
-            onEndReached={() => {
-              if (hasNextPage && !isFetchingNextPage) {
-                fetchNextPage();
-              }
-            }}
-            refreshing={isRefetching}
-            onRefresh={refetch}
-            ListEmptyComponent={
-              <View style={styles.emptyState}>
-                <Text style={styles.emptyStateTitle}>No raffles found</Text>
-                <Text style={styles.emptyStateSubtitle}>
-                  Try a different name or check back later for more raffles.
-                </Text>
-              </View>
-            }
-            ListFooterComponent={
-              isFetchingNextPage ? (
-                <View style={{ paddingVertical: theme.spacing.lg }}>
-                  <Text style={{ textAlign: 'center', color: theme.colors.textSecondary, fontFamily: Fonts.outfitRegular }}>
-                    Loading more...
-                  </Text>
-                </View>
-              ) : null
-            }
-          />
-        </View>
-      </SafeAreaView>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: theme.colors.blue,
-  },
-  statusBarBackground: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: Platform.OS === 'ios' ? 44 : 0, // Status bar height for iOS
-    backgroundColor: theme.colors.blue,
-    zIndex: 1000,
-  },
-  header: {
-    flex: 1,
-    backgroundColor: theme.colors.blue,
-  },
-  userConSty: {
-    marginHorizontal: moderateScale(10),
-    width: moderateScale(30),
-    height: moderateScale(30),
-    borderRadius: moderateScale(15),
-    borderWidth: 1.5,
-    borderColor: theme.colors.imageBorder,
-    backgroundColor: theme.colors.background,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  headerTopRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: theme.spacing.lg,
-  },
-  clubInfoWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  headerTitle: {
-    marginTop: moderateScale(10),
-    fontFamily: Fonts.outfitMedium,
-    fontSize: moderateScale(22),
-    color: theme.colors.white,
-  },
-  titleWrapper: {
-    paddingHorizontal: theme.spacing.lg,
-  },
-  content: {
-    flex: 1,
-    backgroundColor: theme.colors.background,
-    paddingTop: theme.spacing.md,
-    borderTopLeftRadius: moderateScale(30),
-    borderTopRightRadius: moderateScale(30),
-  },
-  userDetailsSty: {
-    width: moderateScale(30),
-    height: moderateScale(30),
-    borderRadius: moderateScale(15),
-  },
-  placeholderLogoHeader: {
-    width: moderateScale(20),
-    height: moderateScale(20),
-    borderRadius: moderateScale(10),
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  userNameSty: {
-    marginTop: moderateScale(5),
-    color: theme.colors.white,
-    fontFamily: Fonts.outfitMedium,
-    fontSize: moderateScale(15)
-  },
-  addMemberContainer: {
-    backgroundColor: theme.colors.blue,
-    paddingHorizontal: theme.spacing.lg,
-    paddingBottom: theme.spacing.md,
-  },
-  listContent: {
-    paddingHorizontal: theme.spacing.lg,
-    paddingBottom: theme.spacing.xl,
-  },
-  searchContainer: {
-    marginHorizontal: theme.spacing.lg,
-    marginBottom: theme.spacing.md,
-  },
-
-  cardContainer: {
-    padding: theme.spacing.md,
-    backgroundColor: theme.colors.lightLavenderGray,
-    borderRadius: theme.borderRadius.lg,
-    marginBottom: theme.spacing.lg,
-    shadowColor: theme.colors.black,
-    shadowOpacity: 0.1,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
-    elevation: 4,
-    overflow: 'hidden',
-  },
-  cardBanner: {
-    width: '100%',
-    height: moderateScale(150),
-    borderRadius: theme.borderRadius.lg
-  },
-  cardTitle: {
-    fontFamily: Fonts.outfitMedium,
-    fontSize: theme.typography.fontSize.md,
-    color: theme.colors.DarkGray,
-    marginVertical: theme.spacing.sm,
-  },
-  prizeContainer: {
-    backgroundColor: theme.colors.white,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: theme.spacing.md,
-    borderRadius: theme.borderRadius.lg,
-  },
-  prizeLabel: {
-    fontFamily: Fonts.outfitRegular,
-    fontSize: theme.typography.fontSize.lg,
-    color: theme.colors.appleGreen,
-  },
-  prizeValue: {
-    fontFamily: Fonts.outfitSemiBold,
-    fontSize: theme.typography.fontSize.md,
-    color: theme.colors.appleGreen,
-  },
-  drawDetails: {
-    fontFamily: Fonts.outfitRegular,
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.textSecondary,
-  },
-  actionsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginVertical: theme.spacing.md,
-  },
-  secondaryAction: {
-    flex: 1,
-    borderRadius: theme.borderRadius.xl,
-    borderWidth: 1,
-    borderColor: theme.colors.blue,
-    paddingVertical: theme.spacing.sm,
-    marginRight: theme.spacing.sm,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  secondaryActionText: {
-    fontFamily: Fonts.outfitMedium,
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.blue,
-  },
-  primaryAction: {
-    flex: 1,
-    borderRadius: theme.borderRadius.xl,
-    backgroundColor: theme.colors.blue,
-    paddingVertical: theme.spacing.sm,
-    marginLeft: theme.spacing.sm,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  primaryActionText: {
-    fontFamily: Fonts.outfitSemiBold,
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.white,
-  },
-  referralRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: theme.spacing.sm,
-    paddingHorizontal: theme.spacing.sm,
-    borderBottomLeftRadius: theme.borderRadius.lg,
-    borderBottomRightRadius: theme.borderRadius.lg,
-    backgroundColor: theme.colors.white,
-  },
-  referralIconWrapper: {
-    width: moderateScale(32),
-    height: moderateScale(32),
-    borderRadius: moderateScale(16),
-    backgroundColor: theme.colors.white,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: theme.spacing.xs,
-  },
-  referralLabel: {
-    flex: 1,
-    fontFamily: Fonts.outfitRegular,
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.blue,
-  },
-  referralBadge: {
-    minWidth: moderateScale(32),
-    height: moderateScale(32),
-    borderRadius: moderateScale(16),
-    backgroundColor: theme.colors.appleGreen,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: theme.spacing.xs,
-  },
-  referralBadgeText: {
-    fontFamily: Fonts.outfitSemiBold,
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.white,
-  },
-  emptyState: {
-    alignItems: 'center',
-    paddingVertical: theme.spacing.xl,
-  },
-  emptyStateTitle: {
-    fontFamily: Fonts.outfitMedium,
-    fontSize: theme.typography.fontSize.lg,
-    color: theme.colors.DarkGray,
-    marginBottom: theme.spacing.xs,
-  },
-  emptyStateSubtitle: {
-    fontFamily: Fonts.outfitRegular,
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.textSecondary,
-    textAlign: 'center',
-    paddingHorizontal: theme.spacing.lg,
-  },
-  referButtonText: {
-    color: theme.colors.blue,
-    fontWeight: theme.typography.fontWeight.semibold,
-  },
-  viewButtonText: {
-    color: theme.colors.white,
-    fontWeight: theme.typography.fontWeight.semibold,
-  },
-
-});