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

package/src/Screens/Splash.tsx

@@ -0,0 +1,782 @@
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  View,
+  StatusBar,
+  Text,
+  Image,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  BackHandler,
+  Modal,
+  Dimensions,
+  Platform,
+  StyleSheet,
+} from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import RNExitApp from 'react-native-exit-app';
+import RNFS from 'react-native-fs';
+import { Global } from '../../../../../src/Common/Global';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import ApkInstaller from 'react-native-installer';
+import { HIcons, useNavigation, NetworkServiceCall, CBackHandler, normalize, isNU, isNUQ, notifyMessage } from '@jescon-technologies/react-native-ui-kit';
+// Type definitions
+interface ThemeColor {
+  primary_color: string;
+  secondary_color: string;
+  text_color: string;
+  heading_text_color: string;
+  bg_button: string;
+  icon_color: string;
+  selected_color: string;
+  blur_color: string;
+  error_color: string;
+}
+
+interface HospitalData {
+  APIP: string;
+  PortNumber: string;
+  ApiLink: string;
+  ApiVersion: string;
+  ValidationStatus: boolean;
+  hospitalInfo?: any;
+}
+
+interface InstallationData {
+  key: string;
+  hospitaldata: HospitalData;
+}
+
+interface VersionCheckResponse {
+  version: string;
+  bundleUrl: string;
+  apkUrl?: string;
+  descriptions: string;
+}
+
+interface NetworkResponse {
+  httpstatus: number;
+  data?: any;
+}
+
+interface ValidationResponse {
+  ValidationStatus: boolean;
+  hospitalInfo?: any;
+}
+
+interface SplashProps {
+  // Add any props if needed, otherwise empty
+}
+
+const ThemeColors: ThemeColor[] = [
+  {
+    primary_color: '#094485',
+    secondary_color: 'black',
+    text_color: '#fff',
+    heading_text_color: 'darkblue',
+    bg_button: '#fff',
+    icon_color: 'darkblue',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: 'black',
+    secondary_color: 'black',
+    text_color: '#fff',
+    heading_text_color: 'black',
+    bg_button: 'black',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#00008B',
+    secondary_color: 'black',
+    text_color: '#fff',
+    heading_text_color: '#00008B',
+    bg_button: '#fff',
+    icon_color: '#00008B',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#e54495',
+    secondary_color: 'black',
+    text_color: '#fff',
+    heading_text_color: '#fc5dac',
+    bg_button: '#fff',
+    icon_color: '#fc5dac',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: 'purple',
+    secondary_color: 'purple',
+    text_color: '#fff',
+    heading_text_color: 'purple',
+    bg_button: 'purple',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#0d910d',
+    secondary_color: '#0d910d',
+    text_color: '#fff',
+    heading_text_color: '#0d910d',
+    bg_button: '#fff',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#f70404',
+    secondary_color: '#f70404',
+    text_color: '#fff',
+    heading_text_color: '#f70404',
+    bg_button: '#fff',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#3489a8',
+    secondary_color: '#3489a8',
+    text_color: '#fff',
+    heading_text_color: '#3489a8',
+    bg_button: '#fff',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: 'grey',
+    secondary_color: 'grey',
+    text_color: '#fff',
+    heading_text_color: 'grey',
+    bg_button: '#fff',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#bab10e',
+    secondary_color: '#bab10e',
+    text_color: '#fff',
+    heading_text_color: '#bab10e',
+    bg_button: '#fff',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+  {
+    primary_color: '#9e331e',
+    secondary_color: '#9e331e',
+    text_color: '#fff',
+    heading_text_color: '#9e331e',
+    bg_button: '#fff',
+    icon_color: '#fff',
+    selected_color: '#d7ffbc',
+    blur_color: 'rgba(255,255,255,0.6)',
+    error_color: '#D32F2F',
+  },
+];
+
+export default function Splash(props: SplashProps): React.JSX.Element {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [backHandler, setBackHandler] = useState<boolean>(false);
+  const [refresh, setRefresh] = useState<number>(0);
+  const [progress, setProgress] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [showText, setShowText] = useState<string | undefined>();
+  const [updateVersion, setUpdateVersion] = useState<string | undefined>();
+  const [retry, setRetry] = useState<boolean>(false);
+  const navigation = useNavigation();
+
+  useEffect((): void => {
+    if (process.env.NODE_ENV === 'development') {
+      getData();
+    } else {
+      if (Platform.OS === 'android') {
+        getApiVersionCheck();
+      } else if (Platform.OS === 'web') {
+        // Electron production logic
+        getData();
+      } else {
+        // Web / iOS production
+        getData();
+      }
+    }
+  }, []);
+
+  useEffect((): (() => void) | void => {
+    if (Platform.OS === 'web') return;
+
+    const backAction = (): boolean => {
+      RNExitApp.exitApp();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+    return () => backHandler.remove();
+  }, []);
+
+  const isValidUrl = (string: string): boolean => {
+    try {
+      new URL(string);
+      return true;
+    } catch (err) {
+      return false;
+    }
+  };
+
+  const goBackFunction = (showText: string | undefined, retry: boolean, isLoading: boolean): void => {
+    if (isNU(showText) && !retry && isLoading) {
+      RNExitApp.exitApp();
+    }
+  };
+
+  const getApiVersionCheck = (): void => {
+    setIsLoading(true);
+    setShowText(undefined);
+    setUpdateVersion(undefined);
+    setRetry(false);
+    setProgress(null);
+
+    const buttonapi = APIURL + 'invget/invcommonget/rnbundleversioncheck ' + Global.hospitalcode;
+    console.log('getApiVersionCheck buttonapi ', JSON.stringify(buttonapi));
+
+    NetworkServiceCall('get', buttonapi).then(function (response: NetworkResponse): void {
+      if (
+        response.httpstatus === 200 &&
+        isNU(response.data) &&
+        isNUQ(response.data.version) &&
+        isNUQ(response.data.bundleUrl) &&
+        isValidUrl(response.data.bundleUrl) &&
+        isNU(response.data.descriptions)
+      ) {
+        if (Global.version === response.data.version) {
+          getData();
+        } else {
+          setUpdateVersion(response.data.version);
+          downloadBundleWithProgress(
+            (p: number) => setProgress(p),
+            response.data.apkUrl,
+            response.data.version,
+            response.data.descriptions,
+          );
+        }
+      } else {
+        setIsLoading(false);
+        setRetry(true);
+        notifyMessage('Network Error.Please try again.', 2);
+      }
+    });
+  };
+
+  const downloadBundleWithProgress = async (
+    onProgressUpdate: (percentage: number) => void,
+    url: string,
+    newversion: string,
+    desc: string
+  ): Promise<boolean> => {
+    return new Promise((resolve, reject) => {
+      const downloadDest = `${RNFS.ExternalDirectoryPath}/update.apk`;
+      const download = RNFS.downloadFile({
+        fromUrl: url,
+        toFile: downloadDest,
+        progressInterval: 500,
+        progress: (res: RNFS.DownloadProgressCallbackResult) => {
+          const percentage = Math.floor((res.bytesWritten / res.contentLength) * 100);
+          console.log(`[OTA] Download progress: ${percentage}%`);
+          onProgressUpdate?.(percentage);
+        },
+      });
+
+      download.promise
+        .then(async (res: RNFS.DownloadResult): Promise<void> => {
+          console.log('[OTA] Download complete! Moving file...');
+          try {
+            ApkInstaller.install(downloadDest);
+            console.log('[OTA] File moved to final destination!');
+            setShowText(desc);
+            resolve(true);
+            RNExitApp.exitApp();
+          } catch (moveErr: any) {
+            console.warn('[OTA] Failed to move file:', moveErr.message);
+            reject(moveErr);
+            setRetry(true);
+          }
+        })
+        .catch((err: Error): void => {
+          console.warn('[OTA] Download failed:', err.message);
+          reject(err);
+          setRetry(true);
+        });
+    });
+  };
+
+  const removeValue = async (): Promise<void> => {
+    try {
+      await AsyncStorage.removeItem(Global.asyncStorageAppKey);
+    } catch (e) {
+      // remove error
+    }
+  };
+
+  const getLoginPageData = (object: HospitalData, key: string): void => {
+    setLoading(true);
+    let buttonapi = 'http://' + object.APIP + ':' + object.PortNumber + '/' + object.ApiLink + " '" + 'His@amala' + "'," + object.ApiVersion;
+    console.log('getLoginPageData buttonpai ', JSON.stringify(buttonapi));
+    NetworkServiceCall('get', buttonapi, '').then(function (response: NetworkResponse): void {
+      console.log('Response ', JSON.stringify(response));
+      if (response.httpstatus === 200) {
+        if (object.ValidationStatus === true) {
+          Global.HospitalData = response.data.hospitalInfo;
+          Global.InstallationKey = key;
+          navigation.navigate('Login', { data: response.data });
+          setLoading(false);
+        } else {
+          setBackHandler(false);
+          notifyMessage('Install validation failed...', 3);
+          setLoading(false);
+        }
+      } else {
+        setBackHandler(false);
+        notifyMessage('Network Error... ', 4);
+        setLoading(false);
+      }
+    });
+  };
+
+  const getValidation = (otp: string): void => {
+    const buttonapi = 'http://his.amalaims.org:9090/hislicensevalidation/licensedata/licensevalidation\'his@amala\'';
+    console.log('getValidation buttonapi', buttonapi);
+
+    setLoading(true);
+    NetworkServiceCall('get', buttonapi, '').then(function (response: NetworkResponse): void {
+      console.log('getValidation response @@@@@@@@@@@', JSON.stringify(response));
+
+      if (response.httpstatus === 200) {
+        if (response.data?.ValidationStatus === true) {
+          setBackHandler(false);
+          storeData(otp, response.data);
+          getLoginPageData(response.data, otp);
+        } else {
+          setLoading(false);
+          setBackHandler(false);
+          notifyMessage('Validation Failed...Please enter right key', 3);
+        }
+      } else {
+        setLoading(false);
+        notifyMessage('Network Error... ', 4);
+      }
+    });
+  };
+
+  const storeData = async (value: string, response: HospitalData): Promise<void> => {
+    try {
+      const newValue: InstallationData = {
+        key: value,
+        hospitaldata: response,
+      };
+      const jsonValue = JSON.stringify(newValue);
+      await AsyncStorage.setItem(Global.asyncStorageAppKey, jsonValue);
+    } catch (e) {
+      // saving error
+    }
+  };
+
+  const setTheme = async (item: ThemeColor): Promise<void> => {
+    try {
+      const jsonValue = JSON.stringify(item);
+      await AsyncStorage.setItem(Global.asyncStorageThemeKey, jsonValue);
+      Global.AppTheme = item;
+      setRefresh(refresh + 1);
+    } catch (e) {
+      // saving error
+    }
+    removeValue();
+    setBackHandler(false);
+  };
+
+  const getStorageItem = async (key: string): Promise<string | null> => {
+    if (Platform.OS === 'web' || Platform.OS === 'windows' || Platform.OS === 'macos') {
+      // Check if we're in Electron
+      if (window && window.process && window.process.type === 'renderer') {
+        // For Electron renderer process
+        console.log('Getting from localStorage for key (Electron):', key);
+        return localStorage.getItem(key);
+      }
+      return localStorage.getItem(key);
+    } else {
+      const AsyncStorageModule = require('@react-native-async-storage/async-storage').default;
+      return await AsyncStorageModule.getItem(key);
+    }
+  };
+
+  const getData = async (): Promise<void> => {
+    try {
+      const jsonValue = await getStorageItem(Global.asyncStorageAppKey);
+      console.log('Retrieved value:', jsonValue);
+
+      if (!jsonValue) {
+        return getValidation(Global.preinstallationkey);
+      }
+
+      const InstallationData: InstallationData = JSON.parse(jsonValue);
+      console.log('installation', JSON.stringify(InstallationData));
+
+      setBackHandler(false);
+      return getLoginPageData(InstallationData.hospitaldata, InstallationData.key);
+    } catch (e) {
+      console.error('Error in getData:', e);
+      return getValidation(Global.preinstallationkey);
+    }
+  };
+
+  const renderUpdateModal = (): React.JSX.Element => (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={isLoading}
+      onRequestClose={() => goBackFunction(showText, retry, isLoading)}
+      style={styles.modal}
+    >
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          {retry ? (
+            <View style={styles.retryContainer}>
+              <TouchableOpacity
+                onPress={getApiVersionCheck}
+                style={styles.retryButton}
+              >
+                <HIcons.MaterialCommunityIcons
+                  name={'reload'}
+                  color={'red'}
+                  size={normalize(30)}
+                  style={styles.retryIcon}
+                />
+                <Text style={styles.retryText}>Retry</Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <View style={styles.downloadContainer}>
+              {!showText && (
+                <Image
+                  style={styles.downloadGif}
+                  source={{ uri: APIURL + 'file/getCommonFile/image/transfer.gif' }}
+                />
+              )}
+              {!showText && (
+                <Text style={styles.progressText}>
+                  {isNU(progress) ? `${progress} % Downloading` : null}
+                </Text>
+              )}
+              {showText && (
+                <View style={styles.descriptionContainer}>
+                  <Text style={styles.descriptionText}>
+                    {showText}
+                  </Text>
+                </View>
+              )}
+              {updateVersion && (
+                <Text style={styles.versionText}>
+                  <Text style={styles.versionLabel}>Latest Version: </Text>
+                  {updateVersion}
+                </Text>
+              )}
+            </View>
+          )}
+          {!showText && (
+            <View>
+              <Text style={styles.currentVersionText}>
+                <Text style={styles.versionLabel}>Current Version: </Text>
+                {Global.version}
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+
+  const renderThemeSelector = (): React.JSX.Element => (
+    <View style={styles.themeContainer}>
+      <Text style={[styles.themeLabel, { color: Global.AppTheme.text_color }]}>
+        Choose Theme:
+      </Text>
+      <View style={styles.themeRow}>
+        {ThemeColors.map((item: ThemeColor, i: number) => (
+          <TouchableOpacity
+            key={i}
+            onPress={() => setTheme(item)}
+            style={styles.themeButton}
+          >
+            <HIcons.FontAwesome
+              name="circle"
+              color={item.primary_color}
+              size={normalize(20)}
+            />
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+
+  const renderSocialIcons = (): React.JSX.Element => (
+    <View style={styles.socialContainer}>
+      {(['facebook', 'web', 'linkedin'] as const).map((item, i: number) => (
+        <TouchableOpacity
+          key={i}
+          onPress={removeValue}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <HIcons.MaterialCommunityIcons
+            name={item}
+            color={Global.AppTheme.text_color}
+            size={normalize(15)}
+          />
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+
+  const renderAppLogo = (): React.JSX.Element => (
+    <TouchableOpacity onPress={() => setBackHandler(false)}>
+      <View style={styles.logoContainer}>
+        <Image
+          style={styles.logo}
+          source={require('../../../../../android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png')}
+        />
+        <Text style={styles.appName}>
+          {Global.SplashHeading || 'HOMES'}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+
+  const renderCompanyInfo = (): React.JSX.Element => (
+    <View style={styles.companyContainer}>
+      <Text style={styles.fromText}>from,</Text>
+      <Text style={styles.companyName}>JESCON TECHNOLOGIES PVT LTD</Text>
+
+      {renderSocialIcons()}
+
+      {Platform.OS !== 'ios' && (
+        <View style={styles.versionContainer}>
+          <Text style={styles.codePushVersion}>
+            {Global.CodePushVersion}
+          </Text>
+        </View>
+      )}
+
+      <Text style={styles.versionText}>
+        {isNU(Global.version) ? `V ${Global.version}` : null}
+      </Text>
+
+      <TouchableOpacity
+        disabled={loading}
+        onPress={() => Platform.OS === 'android' ? getApiVersionCheck() : getData()}
+        style={styles.refreshButton}
+      >
+        <HIcons.FontAwesome name={'refresh'} color={'#fff'} size={normalize(25)} />
+        <Text style={styles.refreshText}>Refresh</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={[styles.container, { backgroundColor: Global.AppTheme.primary_color }]}
+    >
+      <StatusBar
+        backgroundColor={Global.AppTheme.primary_color}
+        barStyle={Platform.OS === 'ios' ? 'dark-content' : 'light-content'}
+      />
+
+      {isLoading && renderUpdateModal()}
+
+      {renderAppLogo()}
+      {renderCompanyInfo()}
+      {renderThemeSelector()}
+
+      {backHandler && (
+        <CBackHandler
+          type={1}
+          close={(val: boolean) => val && setBackHandler(val)}
+          callBack={(val: string) => val && getValidation(val)}
+        />
+      )}
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // Modal Styles
+  modal: {
+    alignSelf: 'center',
+    padding: 0,
+  },
+  modalContainer: {
+    height: Dimensions.get('window').height,
+    width: Dimensions.get('screen').width,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: normalize(50),
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    elevation: 5,
+    borderColor: 'grey',
+    borderRadius: 3,
+    alignItems: 'center',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    height: Dimensions.get('screen').height * 0.2,
+    minWidth: Dimensions.get('screen').width * 0.8,
+  },
+  retryContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  retryButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  retryIcon: {
+    marginHorizontal: normalize(8),
+  },
+  retryText: {
+    fontSize: normalize(12),
+    fontWeight: 'bold',
+    color: 'red',
+  },
+  downloadContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  downloadGif: {
+    width: normalize(150),
+    height: normalize(100),
+  },
+  progressText: {
+    color: 'black',
+  },
+  descriptionContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  descriptionText: {
+    color: '#cf1818',
+    fontSize: normalize(12),
+    textAlign: 'center',
+  },
+  versionText: {
+    color: Global.AppTheme.primary_color,
+    fontSize: normalize(10),
+  },
+  currentVersionText: {
+    color: Global.AppTheme.primary_color,
+    fontSize: normalize(10),
+  },
+  versionLabel: {
+    color: 'black',
+    fontSize: normalize(10),
+  },
+  // Logo Styles
+  logoContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  logo: {
+    width: normalize(70),
+    height: normalize(70),
+    resizeMode: 'contain',
+    borderRadius: normalize(30),
+  },
+  appName: {
+    color: Global.AppTheme.text_color,
+    fontWeight: 'bold',
+    fontSize: normalize(25),
+    textAlign: 'center',
+  },
+  // Company Info Styles
+  companyContainer: {
+    paddingTop: normalize(40),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fromText: {
+    color: Global.AppTheme.text_color,
+    paddingBottom: normalize(8),
+  },
+  companyName: {
+    color: Global.AppTheme.text_color,
+    fontWeight: 'bold',
+    fontSize: normalize(16),
+  },
+  versionContainer: {
+    alignItems: 'center',
+  },
+  codePushVersion: {
+    color: 'white',
+    fontSize: normalize(16),
+    paddingTop: normalize(20),
+  },
+  refreshButton: {
+    marginTop: normalize(20),
+    alignItems: 'center',
+  },
+  refreshText: {
+    color: '#fff',
+    fontSize: normalize(7),
+  },
+  // Social HIcons Styles
+  socialContainer: {
+    flexDirection: 'row',
+    width: normalize(90),
+    paddingTop: normalize(10),
+    justifyContent: 'space-between',
+  },
+  // Theme Selector Styles
+  themeContainer: {
+    paddingTop: normalize(50),
+    alignSelf: 'flex-start',
+    paddingHorizontal: normalize(20),
+  },
+  themeLabel: {
+    paddingBottom: normalize(2),
+    fontSize: normalize(14),
+    fontWeight: '500',
+  },
+  themeRow: {
+    flexDirection: 'row',
+    paddingTop: normalize(4),
+    alignItems: 'center',
+    flexWrap: 'wrap',
+  },
+  themeButton: {
+    paddingLeft: normalize(10),
+    paddingBottom: normalize(5),
+  },
+});