@jescon-technologies/react-native-ui-kit 0.0.12 → 0.0.14

package/src/Screens/Login.tsx

@@ -0,0 +1,331 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  StatusBar,
+  Text,
+  Image,
+  Platform,
+  TouchableOpacity,
+  Dimensions,
+  StyleSheet,
+  ScrollView,
+  TouchableWithoutFeedback,
+  Linking,
+  BackHandler,
+} from 'react-native';
+import RNFetchBlob from 'react-native-blob-util';
+import { Global } from '../../../../../src/Common/Global';
+import RNExitApp from 'react-native-exit-app';
+import HView from '@jescon-technologies/react-native-ui-kit/src/Hoc/HView';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import { HIcons, useNavigation, normalize, isNU, Loader } from '@jescon-technologies/react-native-ui-kit';
+
+// Type definitions for props
+interface LoginProps {
+  // Add any props that might be passed to this component
+  // For example:
+  // route?: any;
+  // navigation?: any;
+}
+
+// Type for the HView component's loader callback
+type LoaderCallback = (val: boolean | undefined) => void;
+
+// Interface for footer icon item (if needed later)
+interface FooterIconItem {
+  displaytext: string;
+  color: string;
+  iconname: string;
+}
+
+/**
+ * Login Component
+ *
+ * Handles the main login screen functionality of the application
+ *
+ * @param {LoginProps} props - Component props passed from parent
+ * @returns {React.ReactElement} Rendered login screen
+ */
+function Login(props: LoginProps): React.ReactElement {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const navigation = useNavigation();
+
+  // Handle back button press to exit app
+  useEffect(() => {
+    const backAction = (): boolean => {
+      RNExitApp.exitApp();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction,
+    );
+
+    return () => backHandler.remove();
+  }, [navigation]);
+
+  /**
+   * Get file extension from filename
+   * @param {string} filename - The file name to extract extension from
+   * @returns {string | undefined} - The file extension
+   */
+  const getExtention = (filename: string): string | undefined => {
+    return /[.]/.exec(filename) ? /[^.]+$/.exec(filename)?.[0] : undefined;
+  };
+
+  /**
+   * Downloads an image from URL to device storage
+   */
+  const downloadImage = (): void => {
+    let date = new Date();
+    let image_URL = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
+    let ext = getExtention(image_URL);
+    ext = '.' + ext?.[0];
+
+    const { config, fs } = RNFetchBlob;
+    let PictureDir = fs.dirs.PictureDir;
+
+    let options = {
+      fileCache: true,
+      addAndroidDownloads: {
+        useDownloadManager: true,
+        notification: true,
+        path: PictureDir + '/image_' + Math.floor(date.getTime() + date.getSeconds() / 2) + ext,
+        description: 'Image',
+      },
+    };
+
+    config(options)
+      .fetch('GET', image_URL)
+      .then((res: any) => {
+        console.log('res -> ', JSON.stringify(res));
+        alert('Image Downloaded Successfully.');
+      });
+  };
+
+  const hospitalBgImage: string = Global.HospitalData?.bgimage || 'https://i.ibb.co/jvj0wdH/Adams-Neilson.jpg';
+
+  return (
+    <View style={styles.container}>
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={Platform.OS === 'ios' ? 'light-content' : 'dark-content'} />
+
+      <TouchableWithoutFeedback>
+        <View style={styles.container}>
+          {/* App Title */}
+          <Text
+            style={[
+              styles.titleText,
+              {
+                paddingHorizontal: 30,
+                textShadowColor: Global.AppTheme.primary_color,
+                textShadowOffset: { width: normalize(5), height: normalize(5) },
+                textShadowRadius: normalize(15),
+                textAlign: 'center',
+              },
+            ]}
+          >
+            {'HOMES'}
+          </Text>
+
+          <ScrollView keyboardShouldPersistTaps="handled">
+            <View style={styles.contentContainer}>
+              {/* Header Image */}
+              <View>
+                <Image
+                  style={styles.headerImage}
+                  source={{ uri: hospitalBgImage }}
+                />
+
+                {/* Customer Service Button */}
+                <TouchableOpacity
+                  style={styles.customerServiceButton}
+                  onPress={() => Linking.openURL(`tel:${Global.HospitalData?.customercare}`)}
+                >
+                  <HIcons.AntDesign
+                    name="customerservice"
+                    color="#fff"
+                    size={normalize(17)}
+                  />
+                </TouchableOpacity>
+              </View>
+
+              {/* Login Form */}
+              <View style={styles.bottomView}>
+                <HView
+                  component={'LoginLayout'}
+                  loader={(val: boolean | undefined): void | null =>
+                    val === undefined ? null : setIsLoading(val)
+                  }
+                />
+              </View>
+            </View>
+
+            {/* Company Logo Section */}
+            <View style={styles.companyLogoSection}>
+              <TouchableOpacity
+                onPress={() => Linking.openURL('http://jescontechnologies.com/')}
+                style={styles.footer_container}
+              >
+                <View style={styles.companyinfo_container}>
+                  <Image
+                    style={styles.companyLogo}
+                    source={{ uri: 'https://i.ibb.co/dkNbcDN/jesconnewlogo.jpg' }}
+                  />
+                  <Image
+                    style={styles.company_icon}
+                    source={{ uri: `${APIURL}insurancefile/getCommonFile/image/companyaddress_transparent.png` }}
+                  />
+                </View>
+              </TouchableOpacity>
+            </View>
+          </ScrollView>
+
+          {/* App Version Display */}
+          <View style={styles.versionContainer}>
+            {Platform.OS !== 'ios' && (
+              <Text style={styles.versionText}>
+                {Global.CodePushVersion}
+              </Text>
+            )}
+            <Text style={styles.versionText}>
+              {isNU(Global.version) ? `V ${Global.version}` : null}
+            </Text>
+          </View>
+
+          {/* Footer Icons - Commented out for now */}
+          {/* <View style={styles.footerIconsContainer}>
+            <View style={styles.footerIconsRow}>
+              {data?.loginfootericons?.map((item: FooterIconItem, i: number) => (
+                <CVectorIcon
+                  key={i}
+                  data={{
+                    disabled: false,
+                    displaytext: item.displaytext,
+                    fontcolor: item.color,
+                    fontWeight: 'bold',
+                    size: 12,
+                    iconname: item.iconname,
+                    iconcolor: item.color,
+                    iconsize: 22,
+                    functionid: 'DF01',
+                  }}
+                  callBack={(val: any) =>
+                    val === undefined
+                      ? null
+                      : props.navigation.navigate('WebPage', { data: item })
+                  }
+                />
+              ))}
+            </View>
+          </View> */}
+
+          {/* Loading Indicator */}
+          {isLoading && <Loader displaytext={true} />}
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+}
+
+export default Login;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    marginBottom: Platform.OS !== 'web' ? normalize(100) : normalize(50),
+  },
+  titleText: {
+    position: 'absolute',
+    top: Dimensions.get('screen').height * 0.05,
+    alignSelf: 'center',
+    color: '#fff',
+    zIndex: 1,
+    elevation: 5,
+    fontWeight: 'bold',
+    fontSize: normalize(40),
+  },
+  headerImage: {
+    height: Dimensions.get('screen').height * 0.25,
+    width: '100%',
+    opacity: 0.7,
+  },
+  customerServiceButton: {
+    position: 'absolute',
+    top: normalize(60),
+    right: normalize(20),
+    backgroundColor: Global.AppTheme.primary_color,
+    padding: normalize(5),
+    borderRadius: 1000,
+  },
+  bottomView: {
+    backgroundColor: '#fff',
+    opacity: 0.95,
+    marginTop: normalize(-50),
+    borderRadius: normalize(20),
+    marginHorizontal: normalize(7),
+    paddingHorizontal: normalize(15),
+  },
+  companyLogoSection: {
+    position: Platform.OS !== 'web' ? 'absolute' : undefined,
+    bottom: normalize(50),
+    backgroundColor: '#fff',
+  },
+  footer_container: {
+    marginBottom: '1%',
+    alignItems: 'center',
+    width: '100%',
+  },
+  companyinfo_container: {
+    flexDirection: 'row',
+    height: normalize(45),
+    width: '100%',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  companyLogo: {
+    width: '47%',
+    height: '100%',
+    borderRadius: 0,
+    margin: 5,
+    resizeMode: 'cover',
+  },
+  company_icon: {
+    width: '47%',
+    height: '100%',
+    borderRadius: 0,
+    margin: 5,
+    resizeMode: 'contain',
+  },
+  versionContainer: {
+    position: 'absolute',
+    bottom: 0,
+    zIndex: 1,
+    alignSelf: 'center',
+  },
+  versionText: {
+    color: Global.AppTheme.secondary_color,
+    fontSize: normalize(10),
+    alignSelf: 'center',
+    fontWeight: 'bold',
+  },
+  footerIconsContainer: {
+    position: 'absolute',
+    bottom: 0,
+    backgroundColor: '#fff',
+    width: '100%',
+    height: normalize(45),
+    justifyContent: 'center',
+  },
+  footerIconsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: normalize(15),
+  },
+});