@fto-consult/expo-ui 1.4.16 → 1.5.1

package/babel.config.alias.js

@@ -81,5 +81,22 @@ module.exports = (opts)=>{
     }
     ///le chemin racine du projet expo-ui
     r["$expo-ui-root-path"] = r["$expo-ui-root"]= path.resolve(expo,"..");
+
+    const HelpScreen = path.resolve(r["$escreens"],"Help");
+    /*** alias des termsOfUses */
+    if(!r.$TermsOfUses){
+        r.$TermsOfUses = path.resolve(HelpScreen,"TermsOfUses","content")
+    }
+    /*** alias des privacyPolicy */
+    if(!r.$PrivacyPolicy){
+        r.$PrivacyPolicy = path.resolve(HelpScreen,"PrivacyPolicy","content")
+    }
+    ///on génère les librairies open sources utilisées par l'application
+    const root = path.resolve(r.$src,"..");
+    const outputPath = path.resolve(HelpScreen,"openLibraries.js");
+    require("./find-licenses")({
+        paths : [root,r["$expo-ui-root-path"]],
+        outputPath
+    });
     return r;
 }

package/find-licenses.js

@@ -1,6 +1,4 @@
 const path = require('path');
-const dir = path.resolve(__dirname);
-let filePath = path.resolve(dir,"src/help/openLibraries.js")
 let isObj = x => x && typeof x == 'object';
 const fs = require('fs')
 let openLibraries = {};
@@ -15,57 +13,81 @@ function isValidUrl(str) {
     return !!pattern.test(str);
   }
 
-const  loopPackages = (packages,_path)=>{
+const  loopPackages = (packages,projectPath)=>{
     if(!isObj(packages)) return;
-    let p = path.resolve(_path,"node_modules");
+    let p = path.resolve(projectPath,"node_modules");
     for(let i in packages){
         let packagePath = path.resolve(p,i,"package.json");
         if(fs.existsSync(packagePath)){
-            let package = require(packagePath);
-            if(!isObj(package) || !package.name) return;
-            let op = {};
-            openLibraries[package.name] = op;
-            if(package.version){
-                op.version = package.version;
-            }
-            if(isValidUrl(package.homepage)){
-                op.url = package.homepage
-            } else if(isValidUrl(package.repository)) {
-                op.url = package.repository;
-            } else if(isObj(package.repository) && package.repository.url){
-                op.url = package.repository.url;
-            }
-            if(package.license || package.licence){
-                op.license = typeof package.license =="string"? package.license : typeof package.licence =="string"? package.licence : "";
+            try {
+                let package = require(packagePath);
+                if(!isObj(package) || !package.name) return;
+                let op = {};
+                openLibraries[package.name] = op;
+                if(package.version){
+                    op.version = package.version;
+                }
+                if(isValidUrl(package.homepage)){
+                    op.url = package.homepage
+                } else if(isValidUrl(package.repository)) {
+                    op.url = package.repository;
+                } else if(isObj(package.repository) && package.repository.url){
+                    op.url = package.repository.url;
+                }
+                if(package.license || package.licence){
+                    op.license = typeof package.license =="string"? package.license : typeof package.licence =="string"? package.licence : "";
+                }
+            } catch(e){
+                console.log(e," looking for package dep")
             }
         }
     }
 }
 
-const findLicences = (_path)=> new Promise((resolve,reject)=>{
-    let pD = path.resolve(_path,"package.json");
-    if(fs.existsSync(pD)){
-        let packages = require(pD);
-        if(isObj(packages)){
-            loopPackages(packages.devDependencies,_path);
-            loopPackages(packages.dependencies,_path);
+const findLicences = (projectPath)=> {
+    if(projectPath && typeof projectPath =='string' && fs.existsSync(projectPath)){
+        const packagePath = path.resolve(projectPath,"package.json");
+        if(fs.existsSync(packagePath)){
+            const packages = require(packagePath);
+            if(isObj(packages)){                
+                loopPackages(packages.devDependencies,projectPath);
+                loopPackages(packages.dependencies,projectPath);
+            }
         }
     }
-    resolve(openLibraries);
-})
-const parentPath = require("./parent-package");
-Promise.all([
-    parentPath ? path.resolve(path.dirname(parentPath)): findLicences(dir),
-]).then(()=>{
-    let s = Object.keys(openLibraries).sort((a,b)=>{
-        if (a.toLowerCase() < b.toLowerCase()) return -1;
-        if (a.toLowerCase() > b.toLowerCase()) return 1;
-        return 0;
-    });
-    let content = {};
-    for(let i in  s){
-        content[s[i]] = openLibraries[s[i]]
+}
+module.exports = (options)=>{
+    options = typeof options =='string'? {path:options} : typeof options =='object' && options ? options : {};
+    if(!options || typeof options !='object'){
+        options = {};
+    }
+    const {outputPath} = options;
+    const outputDir = outputPath && typeof outputPath =='string' && path.dirname(outputPath) || '';
+    if(outputDir && fs.existsSync(outputDir)){
+        openLibraries = {};
+        if(Array.isArray(options.paths)){
+            options.paths.map((p)=>{
+                if(p && typeof p =='string' && fs.existsSync(p)){
+                    findLicences(p)
+                }
+            })
+        } else {
+            findLicences(options.path)
+        }
+        const s = Object.keys(openLibraries).sort((a,b)=>{
+            if (a.toLowerCase() < b.toLowerCase()) return -1;
+            if (a.toLowerCase() > b.toLowerCase()) return 1;
+            return 0;
+        });
+        const content = {};
+        for(let i in  s){
+            content[s[i]] = openLibraries[s[i]]
+        }
+        fs.writeFileSync(outputPath, "module.exports = "+JSON.stringify(content)+";");
+    } else {
+        return ({
+            error : true,
+            message : "Le chemin du fichier output est innexistant. veuillez spécifier un chemin de fichier existant dans lequel seront générées les licences utilisées pour le développement de l'application"
+        });
     }
-    content = "export default "+JSON.stringify(content);
-    fs.writeFileSync(filePath, content)
-});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.4.16",
+  "version": "1.5.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.7.14",
+    "@fto-consult/common": "^1.7.15",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.2.0",

package/src/App.js

@@ -90,7 +90,7 @@ setDeviceIdRef.current = ()=>{
     showPrompt({
       title : 'ID unique pour l\'appareil',
       maxLength :  30,
-      defaultValue : appConfig.getDeviceName(),
+      defaultValue : appConfig.getDeviceId(),
       yes : 'Définir',
       placeholder : isMobileNative()? "":'Entrer une valeur unique sans espace SVP',
       no : 'Annuler',

package/src/auth/Login.js

@@ -19,6 +19,7 @@ import ScreenWithoutAuthContainer from "$escreen/ScreenWithoutAuthContainer";
 import {getTitle} from "$escreens/Auth/utils";
 import {isWeb} from "$cplatform";
 import ProviderSelector from "./ProviderSelector";
+import { ScrollView } from "react-native";
 
 import getLoginProps from "$getLoginProps";
 const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
@@ -34,7 +35,6 @@ export default function LoginComponent(props){
     const previousButtonRef = React.useRef(null);
     const dialogProviderRef = React.useRef(null);
     const backgroundColor = theme.colors.surface;
-    const Wrapper = withPortal ? ScreenWithoutAuthContainer  : View;
     const _getForm = x=> getForm(formName);
     const isMounted = React.useIsMounted();
     
@@ -86,7 +86,7 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const {header,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+    const {header,withScrollView:customWithScrollView,children,initialize,contentTop,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,mutateData,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
         setState,
         state,
@@ -170,8 +170,9 @@ export default function LoginComponent(props){
             setState({...state,step:step+1,data})
         }
     }
-    
-    const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle} : { style:styles.wrapper};
+    const withScrollView = typeof customWithScrollView =='boolean'? customWithScrollView : true;
+    const Wrapper = withPortal ? ScreenWithoutAuthContainer  : withScrollView ? ScrollView: View;
+    const wrapperProps = withPortal ? {appBarProps,authRequired:false,title:loginTitle,withScrollView} : { style:styles.wrapper};
     return <Wrapper testID = {testID+"_Wrapper" }{...wrapperProps}>
         <DialogProvider ref={dialogProviderRef}/>
         <Surface style={[styles.container,{backgroundColor}]} testID={testID}>

package/src/components/Dialog/Dialog.js

@@ -12,7 +12,7 @@ import AppBarDialog from "./AppBarDialog";
 import DialogActions from "./DialogActions";
 import DialogTitle from './DialogTitle';
 import {MAX_WIDTH,SCREEN_INDENT,MIN_HEIGHT} from "./utils";
-import {isMobileOrTabletMedia} from "$cplatform/dimensions"; 
+import {isMobileOrTabletMedia,isMobileMedia} from "$cplatform/dimensions"; 
 import Platform,{isMobileNative} from "$cplatform";
 import Portal from "$ecomponents/Portal";
 import Icon,{BACK_ICON} from "$ecomponents/Icon";
@@ -162,13 +162,14 @@ const DialogComponent = React.forwardRef((props,ref)=>{
     const testID = defaultStr(modalProps.testID,"RN_DialogComponent");
     const maxHeight = getMaxHeight(),maxWidth = getMaxWidth();
     const backgroundColor = theme.surfaceBackgroundColor;
-    borderRadius = fullScreen || !isMobileNative() || isPreloader ? 0 : typeof borderRadius =='number'? borderRadius : 7*theme.roundness;
+    borderRadius = fullScreen  || !(isMobileNative() || isMobileMedia()) || isPreloader ? 0 : typeof borderRadius =='number'? borderRadius : 5*theme.roundness;
     const fullScreenStyle = fullScreen ? {width:dimensions.width,height:dimensions.height,marginHorizontal:0,paddingHorizontal:0}: {
         maxWidth,
         maxHeight,
         borderRadius,
-        paddingTop : borderRadius,
-        paddingBottom : borderRadius,
+        paddingLeft : borderRadius,
+        paddingRight : borderRadius,
+        paddingVertical : borderRadius?10:0,
     };
     const alertContentStyle = isAlert ? {paddingHorizontal:15} : null;
     content = <Surface ref={contentRef} testID = {testID+"_Content11"} {...contentProps} style={[fullScreen? {flex:1}:{maxWidth,maxHeight:maxHeight-Math.min(SCREEN_INDENT*2+50,100)},isPreloader && {paddingHorizontal:10},{backgroundColor},alertContentStyle,contentProps.style]}>

package/src/components/Logo/Logo.js

@@ -53,7 +53,7 @@ const styles = StyleSheet.create({
         justifyContent : "center",
         alignItems : "center",
         flexDirection : "row",
-        height,
+        maxHeight:height,
         width,
     },
     logoImage : {

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -11,7 +11,7 @@ import APP from "$capp";
 import AppBar,{createAppBarRef} from "$elayouts/AppBar";
 import ErrorBoundary from "$ecomponents/ErrorBoundary";
 import Portal from "$ecomponents/Portal";
-import theme from "$theme";
+import theme,{StyleProp} from "$theme";
 import StatusBar from "$ecomponents/StatusBar";
 
 const getDefaultTitle = (nTitle,returnStr)=>{
@@ -168,11 +168,11 @@ const styles = StyleSheet.create({
 MainScreenScreenWithOrWithoutAuthContainer.propTypes = {
   children: PropTypes.any,
   withScrollView : PropTypes.bool,
-  style:PropTypes.object,
+  style:StyleProp,
   appBarProps : PropTypes.object,
   elevation : PropTypes.number,
   //appBar : PropTypes.bool,
-  contentContainerStyle : PropTypes.object,
+  contentContainerStyle : StyleProp,
   withFab : PropTypes.bool,
   withDrawer : PropTypes.bool,//si l'on doit afficher un drawer dans le contenu
   fabProps : PropTypes.object,

package/src/navigation/Drawer/ProfilAvatar/index.js

@@ -14,6 +14,7 @@ import {navigate} from "$cnavigation";
 import theme from "$theme";
 import {isMobileNative} from "$cplatform";
 import appConfig from "$capp/config";
+import Preloader from "$preloader";
 const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>{
     let u = defaultObj(Auth.getLoggedUser());
     const deviceNameRef = React.useRef(null);
@@ -46,7 +47,10 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                 label : i18n.lang("logout",'Déconnexion'),
                 icon : "logout",
                 onPress : (a)=>{
-                    closeDrawer(Auth.signOut);
+                    closeDrawer(()=>{
+                        Preloader.open("Déconnexion en cours...");
+                        Auth.signOut().finally(Preloader.close)
+                    });
                 }
             }
         ];

package/src/navigation/Drawer/items/index.js

@@ -7,6 +7,7 @@ import "$cutils";
 import APP from "$capp";
 ///les items du drawer
 import items from "$drawerItems";
+import { screenName as aboutScreenName} from "$escreens/Help/About";
 
 export const getItems = (force)=>{
     const name = APP.getName();
@@ -25,16 +26,18 @@ export const getItems = (force)=>{
             r.push(item);
         }
     })
+    r.push({divider:true});
     r.push({
         key : 'dataHelp',
         label : 'Aide',
         section : true,
         divider : false,
         items : [
-            /*{
-                icon : 'timeline-help',
-                label : name+", Mises à jour",
-            },*/
+            {
+                icon : 'help',
+                label : 'A propos de '+name,
+                routeName : aboutScreenName,
+            }
         ]
     });
     return r;

package/src/screens/Help/About.js

@@ -0,0 +1,137 @@
+import Logo from "$ecomponents/Logo";
+import Link from "$ecomponents/Link";
+import Icon from "$ecomponents/Icon";
+import Divider from "$ecomponents/Divider";
+import PrivacyPolicyLink from "./PrivacyPolicy/Link";
+import TermsOfUsesLink from "./TermsOfUses/Link";
+import {isNativeDesktop,isAndroid,isIos} from "$platform";
+import Expandable from "$ecomponents/Expandable";
+import React from "$react";
+import Screen from "$screen";
+import getDevicesInfos from "./getDevicesInfos";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+import {defaultStr} from "$utils";
+import theme from "$theme";
+import APP from "$app";
+import AutoLink from "$ecomponents/AutoLink";
+import Grid from "$ecomponents/Grid";
+import getReleaseText from "./getReleaseText";
+import appConfig from "$capp/config";
+let openLibraries = null;
+try {
+    openLibraries = require("./openLibraries");
+} catch{
+    openLibraries = null;
+}
+export default function HelpScreen(props){
+    const deviceInfo = getDevicesInfos();
+    let icon = undefined, iconText = undefined;
+    let device = APP.DEVICE;
+    let operatingSystem  = defaultStr(device.operatingSystem).toLowerCase();
+    let isLaptop = device.isLaptop;
+    if(isLaptop){
+        icon = "laptop";
+        iconText = "un ordinateur portable"
+    }
+    if(isAndroid()){
+        icon = "android";
+        iconText = "un téléphone Android";
+    } else if(isIos()){
+        icon = "apple-ios";
+        iconText = "un iphone";
+    } else if(isNativeDesktop() && operatingSystem){
+        if(!isLaptop){
+            icon = "desktop-classic";
+            iconText = "un ordinateur de bureau";    
+        }
+        if(operatingSystem.contains("linux")){
+            if(!isLaptop){
+                icon = "linux";
+            }
+            iconText += " sur lequel est installé une distribution linux";
+        } else if(operatingSystem.contains("windows")){
+            icon = isLaptop ? "laptop" : "windows";
+            iconText += (isLaptop?" window":"")+ " sur lequel est installé le système windows";
+        } else {
+            icon = isLaptop ? "laptop" : "desktop-classic";
+            iconText += " Mac os";
+        }
+    }
+    const gridPadding = 5;
+    const gridStyles = [{width:40,padding:gridPadding},{width:'60%',padding:gridPadding},{width:60,padding:gridPadding},{width:60,padding:gridPadding}];
+    const borderStyle = {borderColor:theme.colors.divider,borderWidth:1,justifyContent:'space-between'};
+    const testID = defaultStr(props.testID,"RN_HelpAboutScreenComponent")
+    return <Screen  withScrollView title={title} {...props} testID={testID+"_Screen"}>
+        <View testID={testID+"_Container"} style={[theme.styles.alignItemsCenter,theme.styles.justifyContentCenter,theme.styles.flex1,theme.styles.w100,theme.styles.p1]}>
+            <Logo  testID={testID+"_Logo"} style={{marginRight:10}}/>
+            {getReleaseText()}
+            <Divider testID={testID+"_Divider1"} style={[theme.styles.mv1]}/>
+            <View testID={testID+"_IconText"} style = {[theme.styles.row]}>
+                {icon && iconText ? <Icon name={icon} primary title={"Ce périférique est "+iconText} /> : null}
+            </View>
+            <View testID={testID+"_DeviceInfos"} style={theme.styles.pb2}>
+                {deviceInfo}
+            </View>
+            <View testID={testID}>
+                <Label testID={testID+"_CopyRight"} style={theme.styles.p05}>{appConfig.copyright}</Label>
+                {appConfig.devMail? <AutoLink testID={testID+"_Email"} style={[theme.styles.row]}
+                    email = {appConfig.devMail} 
+                >
+                    <Label>Nous contacter : </Label>
+                    <Label primary textBold>{appConfig.devMail}</Label>
+                </AutoLink>:null}
+                <TermsOfUsesLink testID={testID+"_TemrsOfUsesLink"} style={theme.styles.mv05} children="CONTRAT DE LICENCE."/>
+                <PrivacyPolicyLink testID={testID+"_PrivacyPolicyLink"} style={theme.styles.mv05} children="POLITIQUE DE CONFIDENTIALITE."/>
+                <Link routeName={"releaseNotes"}>
+                    <Label primary textBold style={theme.styles.mv05} >{appConfig.name+", Notes de mise à jour."}</Label>
+                </Link>
+            </View>
+            {Object.size(openLibraries,true) ? <View style={[theme.styles.w100]}>
+                <Expandable
+                    testID={testID+"_OpenLibraries"}
+                    title = {"A propos des librairies tiers"}
+                    titleProps = {{style:theme.styles.ph1}}
+                    style = {{backgroundColor:'transparent'}}
+                >
+                    <View testID={testID+"_OpenLibraries_Header"} style={[theme.styles.row,theme.styles.flexWrap]}>
+                        <Label testID={testID+"_OpenLibraries_HeaderLabel"} primary textBold>{appConfig.name+"   "}</Label>
+                        <Label>est bâti sur un ensemble d'outils et librairies open Source</Label>
+                    </View>
+                    <View testID={testID+"_OpenLibrariesContent"} style={[theme.styles.w100,theme.styles.pv1]}>
+                        <Grid.Row style={borderStyle}>
+                            <Label style={gridStyles[0]} textBold>#</Label>
+                            <Label style={gridStyles[1]} textBold>Librairie/Outil</Label>
+                            <Label style={gridStyles[2]} textBold>Version</Label>
+                            <Label style={gridStyles[3]} textBold>Licence</Label>
+                        </Grid.Row>
+                        {Object.mapToArray(openLibraries,(lib,i,_i)=>{
+                            return <Grid.Row key={i} style={borderStyle}>
+                                <Label style={gridStyles[0]}>
+                                    {_i.formatNumber()}
+                                </Label>
+                                <AutoLink style={gridStyles[1]} url={lib.url}>
+                                    <Label splitText>{i}</Label>
+                                </AutoLink>
+                                <AutoLink style={gridStyles[2]}>
+                                    <Label splitText numberOfLines={2}>{defaultStr(lib.version)}</Label>
+                                </AutoLink>
+                                <AutoLink url={lib.licenseUrl} style={gridStyles[3]}>
+                                    <Label splitText>{lib.license}</Label>
+                                </AutoLink>
+                            </Grid.Row>
+                        })}
+                    </View>
+                </Expandable>
+            </View>: null}
+        </View>
+    </Screen>  
+}   
+
+export const title = HelpScreen.title = "A propos";
+
+export const screenName = HelpScreen.screenName = "Help/About";
+
+HelpScreen.AuthRequired = false;
+
+HelpScreen.Modal = true;

package/src/screens/Help/HashTag.js

@@ -0,0 +1,61 @@
+import templates from "$ecomponents/Form/Fields/sprintfSelectors";
+import Icon from "$ecomponents/Icon";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+import Screen from "$screen";
+import Br from "$ecomponents/Br";
+import Grid from "$ecomponents/Grid";
+import theme from "$theme";
+
+export default function HashTagHelpScreen (props){
+    const icon = <Icon name="format-header-pound" primary textBold cursorPointer/>;
+    const rowStyle = [{width:150}];
+    const borderStyle = {borderWidth:1,borderColor:theme.colors.divider};
+    return <Screen withScrollView {...props}>
+        <View style={[theme.styles.p1,theme.styles.w100]}>
+            <Label primary textBold>
+                Rubrique d'aide SALITE relative aux HashTags.
+            </Label>
+            <View>
+                <Label>
+                    Les hashtag permettent de créer des liens vers les documents de stocks, ventes, achats, .... dans un contenu de type chaine de caractère.
+                </Label>
+                <Label>
+                    Ils peuvent être insérés dans de tout type de champ portant l'icone ci-dessous à droite
+                </Label>
+                {icon} 
+                <Label>
+                    A chaque fois que vous rencontrez un champ de texte portant cette icone, il est possible d'insérer un hastag lors de la saisie des informations du champ de type texte.
+                    Pour insérer un hastag, il suffit tout simplement d'insérer dans le texte l'une des valeur du code situé dans le tableau suivant et de cliquer
+                    sur l'icone en question où d'éffectuer la combinaison des touches clavier : ctr+m
+                </Label>
+                <Br/>
+                <Label primary textBold>Liste des code hashtag suppportés par l'application</Label>
+                <Br/>
+            </View>
+            <View style={[theme.styles.w100]}>
+                <Grid.Row style={[borderStyle]}>
+                    <Label textBold style={[rowStyle[0]]}>Code</Label>
+                    <Label textBold>Signification</Label>
+                </Grid.Row>
+                {
+                    Object.mapToArray(templates,(t,i)=>{
+                        if(isObj(t)){
+                            t = defaultStr(t.desc,t.title);
+                        }
+                        if(!isNonNullString(t)) return null;
+                        return <Grid.Row style={[borderStyle]} key={i}>
+                            <Label primary textBold style={[rowStyle[0]]}>{i}</Label>
+                            <Label splitText numberOfLines={3}>{t}</Label>
+                        </Grid.Row>
+                    })
+                }
+            </View>
+        </View>
+    </Screen>
+}
+
+export const screenName = HashTagHelpScreen.screenName = "Help/Hashtag";
+export const title = HashTagHelpScreen.title = "Hashtags : Aide".toUpperCase();
+
+HashTagHelpScreen.Modal = true;

package/src/screens/Help/PrivacyPolicy/Link.js

@@ -0,0 +1,22 @@
+import Link from "$ecomponents/Link";
+import {PRIVACY_POLICY} from "./routes";
+import theme from "$theme";
+import {StyleSheet} from "react-native";
+import title from "./title";
+import {defaultObj} from "$utils";
+import Label from "$ecomponents/Label";
+export default function(props){
+    const {style,...rest} = props;
+    return <Link routeName={PRIVACY_POLICY}>
+        <Label {...defaultObj(rest)} style={[{color:theme.colors.primary},styles.content,style]}>
+            {props.children || title}
+        </Label>
+    </Link>
+}
+
+const styles = StyleSheet.create({
+     content : {
+        textDecorationLine:'underline',
+        fontWeight : 'bold',
+     }
+})

package/src/screens/Help/PrivacyPolicy/content.js

@@ -0,0 +1,13 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import Label from "$components/Label";
+
+export default function ContentPrivacy (){
+    return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
+        Pour définir modifier le contenu de la police de sécurité, il suffit de déclarer dans les alias, l'alias 
+        $PrivacyPolicy prointant dans un fichier javascript dans lequel vous exportez par défaut, soit un composant React
+        où encore un élément react valide, qui remplacera ledit contenu
+    </Label>
+}

package/src/screens/Help/PrivacyPolicy/index.js

@@ -0,0 +1,39 @@
+import {PRIVACY_POLICY} from "./routes";
+import title from "./title"
+import  Screen  from "$screen";
+import Link from "./Link";
+import Content from "$PrivacyPolicy";
+import {getScreenProps} from "$cnavigation";
+import React from "$react";
+
+export default function PrivacyPolicy(p){
+    const props = getScreenProps(p);
+    return <Screen 
+        {...props}
+        withDrawer = {false}
+        appBarProps  = {extendObj({},{
+            backAction : false,
+            title,
+            actions : [{
+                text : "Accepter",
+                icon : "check",
+                onPress : ({goBack})=>{
+                    goBack && goBack();
+                }
+            }],
+        }, props.appBarProps)}
+    >
+        {React.isComponent(Content)? <Content {...props}/> : React.isValidElement(Content)? Content : null}
+    </Screen>
+}
+
+
+PrivacyPolicy.screenName = PRIVACY_POLICY;
+
+PrivacyPolicy.authRequired = false;
+
+PrivacyPolicy.Modal = true;
+
+PrivacyPolicy.title = title;
+
+PrivacyPolicy.Link = Link;

package/src/screens/Help/PrivacyPolicy/routes.js

@@ -0,0 +1 @@
+export const PRIVACY_POLICY = "PRIVACY_POLICY";

package/src/screens/Help/PrivacyPolicy/title.js

@@ -0,0 +1 @@
+export default 'POLITIQUE DE CONFIDENTIALITE';

package/src/screens/Help/TermsOfUses/Link.js

@@ -0,0 +1,12 @@
+import Link from "$ecomponents/Link";
+import {TERMS_OF_USES} from "./routes";
+import theme from "$theme";
+import title from "./title";
+import Label from "$ecomponents/Label";
+export default function(props){
+    return <Link routeName={TERMS_OF_USES}>
+        <Label {...props} style={[props.style,{color:theme.colors.primary,fontWeight:'bold',textDecorationLine:'underline'}]}>
+            {props.children || title}
+        </Label>
+    </Link>
+}

package/src/screens/Help/TermsOfUses/content.js

@@ -0,0 +1,13 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import Label from "$components/Label";
+
+export default function ContentTermsOfUses (){
+    return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>
+        Pour définir modifier le contenu de la police de sécurité, il suffit de déclarer dans les alias, l'alias 
+        $TermsOfUses prointant dans un fichier javascript dans lequel vous exportez par défaut, soit un composant React
+        où encore un élément react valide, qui remplacera ledit contenu
+    </Label>
+}

package/src/screens/Help/TermsOfUses/index.js

@@ -0,0 +1,41 @@
+import {TERMS_OF_USES} from "./routes";
+import title from "./title";
+import Screen from "$screen";
+import Link from "./Link";
+import Content from "$TermsOfUses";
+import {getScreenProps} from "$cnavigation";
+import {extendObj} from "$utils";
+import React from "$react";
+
+export default function TermsOfUses(p){
+    const props = getScreenProps(p);
+    return <Screen 
+        {...props}
+        withDrawer = {false}
+        appBarProps  = {extendObj({},{
+            backAction : false,
+            title,
+            actions : [{
+                text : "Accepter",
+                icon : "check",
+                onPress : ({goBack})=>{
+                    goBack && goBack();
+                }
+            }],
+        }, props.appBarProps)}
+    >
+        {React.isComponent(Content)? <Content {...props}/> : React.isValidElement(Content)? Content : null}
+    </Screen>
+}
+
+
+TermsOfUses.screenName = TERMS_OF_USES;
+
+TermsOfUses.authRequired = false;
+
+TermsOfUses.Modal = true;
+
+TermsOfUses.Link = Link;
+
+TermsOfUses.title = title;
+

package/src/screens/Help/TermsOfUses/routes.js

@@ -0,0 +1 @@
+export const TERMS_OF_USES = "TERMS_OF_USES";

package/src/screens/Help/TermsOfUses/title.js

@@ -0,0 +1 @@
+export default  "CONTRAT DE LICENCE DU LOGICIEL"

package/src/screens/Help/deviceProps.js

@@ -0,0 +1,14 @@
+export default  {
+    computerName : "Nom de l'ordinateur",
+    operatingSystem : "Système d'exploitation",
+    osVersion : "Version",
+    model : "Model", //le model du device
+    platform : "Plateforme", 
+    computerUserName : "Utilisateur connecté au système",
+    uuid : "Unique id",
+    deviceId : "ID du poste de travail",
+    id : "Id application", //le bundle id de l'application
+    name : "Nom de l'application", //display name of the app
+    version : "Version de l'application",
+    storageUsage : "Stockage",
+};

package/src/screens/Help/getDevicesInfos.js

@@ -0,0 +1,31 @@
+import appConfig from "$capp/config";
+import deviceProps from "./deviceProps";
+import Label from "$ecomponents/Label";
+import theme from "$theme";
+import View from "$ecomponents/View";
+
+export default  (infos,force)=>{
+    infos = defaultObj(infos);
+    infos.deviceId = appConfig.deviceId;
+    const deviceInfo = [];
+    force = force !== undefined ? force : true;
+    Object.map(deviceProps,(info,p)=>{
+        if(!(p in infos)){
+            infos[p] = appConfig.get(p) || undefined;
+        }
+        if((infos[p])){
+            let _info = infos[p];
+            if(_info == 'unknown' || !_info) return null;
+            const testID = 'RN_DeviceInfo_'+p;
+            deviceInfo.push(
+                <View testID={testID} textBold key={p} style={[theme.styles.row,theme.styles.w100]}>
+                    <Label testID = {testID+"_Label"} textBold>{info+" : "}</Label>
+                    <Label testID = {testID+"_Value"} primary textBold>
+                        {_info}
+                    </Label>
+                </View>
+            )
+        }
+    })
+    return deviceInfo;
+}

package/src/screens/Help/getReleaseText.js

@@ -0,0 +1,10 @@
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
+import theme from "$theme";
+import appConfig from "$app/config";
+export default function getReleaseLabel(){
+    return <View style={[theme.styles.row]}>
+        <Label style={[{color:theme.colors.text,fontSize:16}]}>Version </Label>
+        <Label style={[{color:theme.colors.primary,fontWeight:'bold',fontSize:18}]}>{appConfig.version} </Label>
+    </View>;
+}

package/src/screens/Help/index.js

@@ -0,0 +1,8 @@
+import TermsOfUses from "./TermsOfUses"
+import PrivacyPolicy from "./PrivacyPolicy";
+import About from "./About";
+export default [
+    TermsOfUses,
+    PrivacyPolicy,
+    About,
+]

package/src/screens/mainScreens.js

@@ -1,4 +1,6 @@
 import Auth from "./Auth";
+import Help  from "./Help";
 export default  [
     ...Auth,
+    ...Help,
 ]