create-gufran-expo-app 2.0.0 → 2.0.2

package/template/src/components/common/ReminderCalendar.tsx

@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    Keyboard,
+    Platform,
+} from 'react-native';
+import { theme } from '../../constants';
+import { moderateScale } from '../../utils/scaling';
+import { Fonts } from '../../constants/Fonts';
+import DatePicker from 'react-native-date-picker';
+
+interface ReminderCalendarProps {
+    onSelectDateTime: (date: Date) => void;
+    selectedDateTime?: Date;
+}
+
+export const ReminderCalendar: React.FC<ReminderCalendarProps> = ({
+    onSelectDateTime,
+    selectedDateTime,
+}) => {
+    // Initialize with minimum 30 minutes from now
+    const getInitialDate = () => {
+        const now = new Date();
+        // Add 30 minutes to current time
+        now.setMinutes(now.getMinutes() + 30);
+        
+        // Round to nearest 30-minute slot
+        const minutes = now.getMinutes();
+        if (minutes < 30) {
+            now.setMinutes(30);
+        } else if (minutes > 30) {
+            now.setMinutes(60);
+        }
+        
+        now.setSeconds(0);
+        now.setMilliseconds(0);
+        return now;
+    };
+
+    // Get minimum date (current time, not 30 minutes ahead)
+    // We'll handle the 30-minute buffer in the validation
+    const getMinimumDate = () => {
+        const now = new Date();
+        now.setSeconds(0);
+        now.setMilliseconds(0);
+        return now;
+    };
+
+    const [date, setDate] = useState(selectedDateTime || getInitialDate());
+    const [minimumDate, setMinimumDate] = useState(getMinimumDate());
+    const [isFutureTime, setIsFutureTime] = useState(true);
+
+    // Check if selected time is at least 30 minutes in the future
+    useEffect(() => {
+        const checkIfFutureTime = () => {
+            const now = new Date();
+            const minimumAllowedTime = new Date(now.getTime() + 30 * 60 * 1000); // 30 minutes from now
+            setIsFutureTime(date >= minimumAllowedTime);
+            
+            // Update minimum date
+            setMinimumDate(getMinimumDate());
+        };
+
+        checkIfFutureTime();
+        // Check every second to update button state and minimum date
+        const interval = setInterval(checkIfFutureTime, 1000);
+
+        return () => clearInterval(interval);
+    }, [date]);
+
+    const handleDateChange = (newDate: Date) => {
+        setDate(newDate);
+        onSelectDateTime(newDate);
+    };
+
+    return (
+        <View style={styles.container}>
+
+            {/* Date Time Picker */}
+            <View style={styles.pickerContainer}>
+                <DatePicker
+                    mode='datetime'
+                    date={date}
+                    minimumDate={minimumDate}
+                    minuteInterval={30}
+                    onDateChange={handleDateChange}
+                />
+            </View>
+
+            {/* Validation Info */}
+            {!isFutureTime && (
+                <Text style={styles.validationText}>
+                    Reminder must be at least 60 minutes in the future
+                </Text>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: theme.spacing.lg,
+    },
+    title: {
+        fontFamily: Fonts.outfitSemiBold,
+        fontSize: theme.typography.fontSize.sm,
+        color: theme.colors.black,
+        marginBottom: theme.spacing.md,
+    },
+    pickerContainer: {
+        alignItems: 'center',
+        borderColor: theme.colors.border,
+        borderRadius: moderateScale(12),
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.md,
+        backgroundColor: theme.colors.background,
+        minHeight: moderateScale(250),
+    },
+    validationText: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: theme.typography.fontSize.xs,
+        color: theme.colors.cancelButton,
+        marginTop: theme.spacing.md,
+        textAlign: 'center',
+    },
+});

package/template/src/components/common/ReminderCardItem.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { theme } from '../../constants';
+import { moderateScale } from '../../utils/scaling';
+import { Fonts } from '../../constants/Fonts';
+import SVG from '../../assets/icons';
+import moment from 'moment';
+
+interface ReminderData {
+    reminderDateTime: string;
+    reminderId?: string | number;
+}
+
+interface ReminderCardItemProps {
+    reminderData: ReminderData;
+    onDelete?: () => void;
+}
+
+export const ReminderCardItem: React.FC<ReminderCardItemProps> = ({
+    reminderData,
+    onDelete,
+}) => {
+
+
+
+    const handleDelete = () => {
+        if (onDelete) {
+            Alert.alert(
+                'Delete Reminder',
+                'Are you sure you want to delete this reminder?',
+                [
+                    {
+                        text: 'Cancel',
+                        onPress: () => { },
+                        style: 'cancel',
+                    },
+                    {
+                        text: 'Delete',
+                        onPress: onDelete,
+                        style: 'destructive',
+                    },
+                ],
+            );
+        }
+    };
+
+    return (
+        <View style={styles.reminderCard}>
+
+            <View style={styles.reminderContent}>
+
+                <Text style={styles.reminderDateTime}>
+                    {moment(reminderData.reminderDateTime).format('DD MMM YYYY, h:mm A')}
+                </Text>
+            </View>
+
+            {onDelete && (
+                <TouchableOpacity
+                    onPress={handleDelete}
+                    hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                >
+                    <SVG.Delete
+                        width={moderateScale(35)}
+                        height={moderateScale(35)}
+                    />
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    reminderCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: theme.colors.surface,
+        borderRadius: theme.borderRadius.lg,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: moderateScale(12),
+        marginTop: theme.spacing.sm,
+    },
+    reminderContent: {
+        flex: 1,
+    },
+    reminderDateTime: {
+        fontFamily: Fonts.outfitMedium,
+        fontSize: theme.typography.fontSize.md,
+        color: theme.colors.black,
+    },
+
+});

package/template/src/components/common/SafeAreaWrapper.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SafeAreaView, StyleSheet, ViewStyle } from 'react-native';
+import { theme } from '../../constants';
+
+interface SafeAreaWrapperProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  backgroundColor?: string;
+}
+
+export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
+  children,
+  style,
+  backgroundColor = theme.colors.background,
+}) => {
+  return (
+    <SafeAreaView style={[styles.container, { backgroundColor }, style]}>
+      {children}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/template/src/components/common/SetReminderModal.tsx

@@ -0,0 +1,308 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, Animated, Dimensions, PanResponder } from 'react-native';
+import DatePicker from 'react-native-date-picker';
+import { Button } from './Button';
+import { theme } from '@constants';
+import { moderateScale } from '@utils/scaling';
+import { Fonts } from '@constants/Fonts';
+
+
+interface SetReminderModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSave: (reminderDateTime: Date) => void;
+    onSuccessClose?: boolean;
+    maxDate?: string;
+}
+
+export const SetReminderModal: React.FC<SetReminderModalProps> = ({
+    visible,
+    onClose,
+    onSave,
+    onSuccessClose = false,
+    maxDate
+}) => {
+
+    const screenHeight = Dimensions.get('window').height;
+    const bottomSheetHeight = screenHeight * 0.6; // 60% of screen height
+    const translateY = useRef(new Animated.Value(bottomSheetHeight)).current;
+
+    // Calculate the minimum allowed date (Current time + 30 min, rounded to nearest 30-min interval)
+    const getCalculatedMinimumDate = () => {
+        const now = new Date();
+        // Add 30 minutes
+        now.setMinutes(now.getMinutes() + 30);
+
+        // Round up to the nearest 30-minute interval (:00 or :30)
+        const minutes = now.getMinutes();
+        if (minutes > 0 && minutes <= 30) {
+            // Round up to :30
+            now.setMinutes(30);
+        } else if (minutes > 30) {
+            // Round up to next hour :00
+            now.setHours(now.getHours() + 1);
+            now.setMinutes(0);
+        }
+
+        now.setSeconds(0);
+        now.setMilliseconds(0);
+        return now;
+    };
+
+    // Initialize with calculated minimum date
+    const getInitialDate = () => {
+        return getCalculatedMinimumDate();
+    };
+
+    // Get minimum date for picker
+    const getMinimumDate = () => {
+        return getCalculatedMinimumDate();
+    };
+
+    const [date, setDate] = useState(getInitialDate());
+    const [minimumDate, setMinimumDate] = useState(getMinimumDate());
+    const [isFutureTime, setIsFutureTime] = useState(true);
+
+    // Convert maxDate string to Date object
+    const getMaximumDate = () => {
+        if (!maxDate) return undefined;
+        const parsedDate = new Date(maxDate);
+        return isNaN(parsedDate.getTime()) ? undefined : parsedDate;
+    };
+
+    // Animate modal on visibility change
+    useEffect(() => {
+        if (visible) {
+            showBottomSheet();
+        }
+    }, [visible]);
+
+    useEffect(() => {
+        if (onSuccessClose) {
+            handleClose();
+        }
+    }, [onSuccessClose]);
+
+    // Check if selected time is valid
+    useEffect(() => {
+        const checkIfFutureTime = () => {
+            const minDate = getCalculatedMinimumDate();
+            setIsFutureTime(date >= minDate);
+
+            // Update minimum date for picker
+            setMinimumDate(minDate);
+        };
+
+        checkIfFutureTime();
+        // Check every second to update button state and minimum date
+        const interval = setInterval(checkIfFutureTime, 1000);
+
+        return () => clearInterval(interval);
+    }, [date]);
+
+    // Bottom sheet animation functions
+    const showBottomSheet = () => {
+        Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: true,
+            tension: 100,
+            friction: 8,
+        }).start();
+    };
+
+    const hideBottomSheet = () => {
+        Animated.timing(translateY, {
+            toValue: bottomSheetHeight,
+            duration: 300,
+            useNativeDriver: true,
+        }).start(() => {
+            translateY.setValue(bottomSheetHeight);
+            onClose();
+        });
+    };
+
+    // PanResponder for swipe gestures
+    const panResponder = useRef(
+        PanResponder.create({
+            onMoveShouldSetPanResponder: (_, gestureState) => {
+                return Math.abs(gestureState.dy) > 5;
+            },
+            onPanResponderGrant: () => {
+                translateY.setOffset((translateY as any)._value);
+                translateY.setValue(0);
+            },
+            onPanResponderMove: (_, gestureState) => {
+                // Only allow downward movement
+                if (gestureState.dy > 0) {
+                    translateY.setValue(gestureState.dy);
+                }
+            },
+            onPanResponderRelease: (_, gestureState) => {
+                translateY.flattenOffset();
+
+                // If swiped down more than 100px or with high velocity, close the modal
+                if (gestureState.dy > 100 || gestureState.vy > 0.5) {
+                    hideBottomSheet();
+                } else {
+                    // Snap back to original position
+                    Animated.spring(translateY, {
+                        toValue: 0,
+                        useNativeDriver: true,
+                        tension: 100,
+                        friction: 8,
+                    }).start();
+                }
+            },
+        })
+    ).current;
+
+    const handleSave = () => {
+        onSave(date);
+    };
+
+    const handleClose = () => {
+        // Reset to next available time slot when closing
+        setDate(getInitialDate());
+        hideBottomSheet();
+    };
+
+    const handleDateChange = (newDate: Date) => {
+        console.log("Selected date:", newDate);
+        console.log("Current time:", new Date());
+
+        // Just set the date, validation will be done by the button enable/disable state
+        setDate(newDate);
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="fade"
+            transparent={true}
+            onRequestClose={handleClose}
+        >
+            <View style={styles.modalOverlay}>
+                <TouchableOpacity
+                    style={styles.modalBackdrop}
+                    activeOpacity={1}
+                    onPress={handleClose}
+                />
+                <Animated.View
+                    style={[
+                        styles.modalContainer,
+                        {
+                            transform: [{ translateY }],
+                        },
+                    ]}
+                >
+                    <View style={styles.dragHandle} {...panResponder.panHandlers} />
+                    <View style={styles.content}>
+                        <Text style={styles.modalTitle}>
+                            Set Reminder
+                        </Text>
+
+                        {/* Date Time Picker */}
+                        <View style={styles.pickerContainer}>
+                            <DatePicker
+                                theme='auto'
+                                mode='datetime'
+                                date={date}
+                                minimumDate={minimumDate}
+                                maximumDate={getMaximumDate()}
+                                minuteInterval={30}
+                                onDateChange={handleDateChange}
+                            />
+                        </View>
+
+                        {/* Save Button */}
+                        <View style={styles.buttonContainer}>
+                            <Button
+                                title='Submit'
+                                onPress={handleSave}
+                                variant="primary"
+                                size="medium"
+                                style={styles.saveButton}
+                                disabled={!isFutureTime}
+                            />
+                        </View>
+                    </View>
+                </Animated.View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+    },
+    modalBackdrop: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    modalContainer: {
+        backgroundColor: theme.colors.white,
+        borderTopLeftRadius: moderateScale(20),
+        borderTopRightRadius: moderateScale(20),
+        paddingHorizontal: theme.spacing.lg,
+        paddingTop: theme.spacing.sm,
+        paddingBottom: theme.spacing.xl,
+        height: '45%',
+        maxHeight: '45%',
+    },
+
+    dragHandle: {
+        width: moderateScale(40),
+        height: moderateScale(4),
+        backgroundColor: theme.colors.border,
+        borderRadius: moderateScale(2),
+        alignSelf: 'center',
+        marginBottom: theme.spacing.sm,
+    },
+    content: {
+        flex: 1,
+    },
+    modalTitle: {
+        fontSize: moderateScale(18),
+        fontFamily: Fonts.outfitSemiBold,
+        color: theme.colors.text,
+    },
+    pickerContainer: {
+        alignItems: 'center',
+        borderColor: theme.colors.border,
+        borderRadius: moderateScale(30),
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        backgroundColor: theme.colors.white,
+        minHeight: moderateScale(50),
+    },
+    dateText: {
+        fontFamily: Fonts.outfitRegular,
+        fontSize: theme.typography.fontSize.md,
+        color: theme.colors.text,
+    },
+    placeholderText: {
+        color: '#9CA3AF',
+    },
+    bottomContainer: {
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.lg,
+        backgroundColor: theme.colors.background,
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.border,
+    },
+    buttonContainer: {
+        marginTop: theme.spacing.md,
+        paddingBottom: theme.spacing.lg,
+    },
+    saveButton: {
+        width: '100%',
+        backgroundColor: theme.colors.blue,
+        paddingVertical: theme.spacing.md,
+    },
+});

package/template/src/components/common/SlowInternet.js

@@ -0,0 +1,57 @@
+import React, { FC } from 'react'
+import { Text, View, ActivityIndicator, StyleSheet, Dimensions } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import SVG from '../../assets/icons'
+import { moderateScale } from '../../utils/scaling'
+import { Fonts } from '../../constants/Fonts'
+
+export const SlowInternet = ({ isLoading, message }) =>
+  isLoading ? (
+    <SafeAreaView style={styles.mainView}>
+      <View style={styles.contentView}>
+        <View style={styles.iconContainer}>
+          <SVG.no_wifi width={moderateScale(50)} height={moderateScale(50)} />
+        </View>
+        <Text style={styles.messageText}>
+          {message}
+        </Text>
+      </View>
+    </SafeAreaView>
+  ) : (
+    <></>
+  )
+
+const styles = StyleSheet.create({
+  mainView: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: '50%',
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  contentView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  messageText: {
+    marginTop: moderateScale(2),
+    fontSize: moderateScale(16),
+    fontFamily:Fonts.outfitBold,
+  }
+})