add version details to account tab

src/components/Profile/LoginView.tsx

@@ -6,11 +6,12 @@
  */
 
 import { makeRedirectUri } from "expo-auth-session";
+import Constants from "expo-constants";
 import * as Linking from 'expo-linking';
 import * as WebBrowser from 'expo-web-browser';
 import { maybeCompleteAuthSession } from "expo-web-browser";
 import React, { useState } from "react";
-import { ActivityIndicator, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
 import { useAuth } from "../../data/Auth/AuthContext";
 import { BaseStackNavigationProp } from "../../navigation/BaseStackNavigator";
@@ -48,6 +49,7 @@ const LoginView : React.FC<{navigation: BaseStackNavigationProp}> = ({navigation
     const loginMessageState = "";
     const [loginMessage, setLoginMessage] = useState<string>(loginMessageState);
     const [legalCollapsed, toggleLegal] = useState<boolean>(true)
+    const [aboutCollapsed, toggleAbout] = useState<boolean>(true)
     /**
      * @type {boolean} 
      * React state holding the error state of the component.
@@ -83,6 +85,10 @@ const LoginView : React.FC<{navigation: BaseStackNavigationProp}> = ({navigation
         toggleLegal(!legalCollapsed)
     }
 
+    const openAbout = () => {
+        toggleAbout(!aboutCollapsed)
+    }
+
     return (
         <UnauthorizedLayout>
             {!loginMessage ?
@@ -96,13 +102,27 @@ const LoginView : React.FC<{navigation: BaseStackNavigationProp}> = ({navigation
                     <View style={{width: '100%'}}>
                         <Separator color="#E0E0E0" />
                         <GenericButton text="Legal" style={{justifyContent: 'center', alignItems: 'center', padding: 20, width: '100%', }} onPress={openLegal}/>
-                        <Separator color="#E0E0E0" />
                         <Collapsible collapsed={legalCollapsed} style={{borderColor: '#E0E0E0', borderBottomWidth: 1, borderRightWidth: 1, borderLeftWidth: 1, justifyContent: 'center', alignItems: 'center', padding: 20}} >
                             <BrowserLink style={{marginBottom: 20}} text="Mobile app third-party licenses" route="mobile-tpl"/>
                             <BrowserLink text="API third-party licenses" route="api-tpl"/>
                         </Collapsible>
                     </View>
                     <Separator color="#D3D3D3" />
+                    <View style={{width: '100%'}}>
+                        <Separator color="#E0E0E0" />
+                        <GenericButton text="About" style={{justifyContent: 'center', alignItems: 'center', padding: 20, width: '100%', }} onPress={openAbout}/>
+                        <Separator color="#E0E0E0" />
+                        <Collapsible collapsed={aboutCollapsed} style={{borderColor: '#E0E0E0', borderBottomWidth: 1, borderRightWidth: 1, borderLeftWidth: 1, justifyContent: 'center', alignItems: 'center', padding: 20}} >                            
+                            <View>
+                                <Text>{Platform.OS == "android" ? "Google Play" : Platform.OS == 'ios' ? "App Store" : null} version: {Constants.nativeAppVersion}</Text>
+                                <Text></Text>
+                            </View>
+                            <View>
+                                <Text>OTA version: {Constants.manifest.releaseId}</Text>
+                            </View>
+                        </Collapsible>
+                    </View>
+                    <Separator color="#D3D3D3" />
                     <GenericButton text="Provide feedback" style={{justifyContent: 'center', alignItems: 'center', padding: 20, width: '100%', }} onPress={openFeedback}/>
                 </View>
             </View> :

src/components/Profile/ProfileSections.tsx

@@ -10,6 +10,7 @@ import React, { useState } from "react"
 import { View } from "react-native"
 import { UserProfile } from "../../data/profiles"
 import { RegisterCredsValues } from "../../utils/RegistrationUtils"
+import { ProfileAbout } from './ProfileSections/ProfileAbout'
 import { ProfileInformation } from "./ProfileSections/ProfileInformation"
 import { ProfileLegal } from "./ProfileSections/ProfileLegal"
 import { ProfilePrefs } from "./ProfileSections/ProfilePrefs"
@@ -29,6 +30,17 @@ interface ProfileSectionsProps {
     deleteAccountStatus: string
 }
 
+type SectionName = "information" | "legal" | "prefs" | "subscription" | "skills" | "about" | 'none'
+
+interface SectionsCollapseState {
+    info: boolean,
+    prefs: boolean,
+    legal: boolean,
+    subscription: boolean,
+    skills: boolean,
+    about: boolean
+}
+
 export const ProfileSections: React.FC<ProfileSectionsProps> = ({
     profile, 
     toggleTipsAsync, 
@@ -41,56 +53,28 @@ export const ProfileSections: React.FC<ProfileSectionsProps> = ({
     deleteAccount,
     deleteAccountStatus
 }) => {
+    const [collapsed, setCollapsed] = useState<SectionsCollapseState>({info: true, prefs: true, legal: true, subscription: true, skills: true, about: true})
     const [infoCollapsed, toggleInfo] = useState<boolean>(true)
     const [skillsCollapsed, toggleSkills] = useState<boolean>(true)
     const [prefsCollapsed, togglePrefs] = useState<boolean>(true)
     const [subscriptionCollapsed, toggleSubscription] = useState<boolean>(true)
     const [legalCollapsed, toggleLegal] = useState<boolean>(true)
 
-    const openInfo = () => {
-        toggleInfo(!infoCollapsed)
-        if (!skillsCollapsed) toggleSkills(true)
-        if (!prefsCollapsed) togglePrefs(true)
-        if (!subscriptionCollapsed) toggleSubscription(!subscriptionCollapsed)
-        if (!legalCollapsed) toggleLegal(true)
-    }
-
-    const openSkills = () => {
-        toggleSkills(!skillsCollapsed)
-        if (!infoCollapsed) toggleInfo(true)
-        if (!prefsCollapsed) togglePrefs(true)
-        if (!subscriptionCollapsed) toggleSubscription(!subscriptionCollapsed)
-        if (!legalCollapsed) toggleLegal(true)
-    }
-
-    const openPrefs = () => {
-        togglePrefs(!prefsCollapsed)
-        if (!infoCollapsed) toggleInfo(true)
-        if (!skillsCollapsed) toggleSkills(true)
-        if (!subscriptionCollapsed) toggleSubscription(!subscriptionCollapsed)
-        if (!legalCollapsed) toggleLegal(true)
-    }
-
-    const openSubscription = () => {
-        toggleSubscription(!subscriptionCollapsed)
-        if (!infoCollapsed) toggleInfo(true)
-        if (!skillsCollapsed) toggleSkills(true)
-        if (!prefsCollapsed) togglePrefs(true)
-        if (!legalCollapsed) toggleLegal(true)
+    const toggleSection = (section: SectionName) => {
+        Object.keys(collapsed).forEach(key => {
+            if (key === section) {
+                setCollapsed({...collapsed, [key]: !collapsed[key]})
+            }
+            else {
+                setCollapsed({...collapsed, [key]: true})
+            }
+        })
     }
-
     const openFeedback = () => {
+        toggleSection('none')
         Linking.openURL('mailto:dev@clicknpush.ca')
     }
 
-    const openLegal = () => {
-        toggleLegal(!legalCollapsed)
-        if (!infoCollapsed) toggleInfo(true)
-        if (!subscriptionCollapsed) toggleSubscription(true)
-        if (!skillsCollapsed) toggleSkills(true)
-        if (!prefsCollapsed) togglePrefs(true)
-    }
-
     return (
         <View>
             <ProfileInformation 
@@ -102,14 +86,14 @@ export const ProfileSections: React.FC<ProfileSectionsProps> = ({
                 resetChangePassword={resetChangePassword} 
                 changePasswordStatus={changePasswordStatus} 
                 changePassword={changePassword} 
-                openInfo={openInfo} 
+                openInfo={() => toggleSection('information')} 
                 infoCollapsed={infoCollapsed} 
                 email={profile?.email} 
                 username={profile?.username} />
             {/* <ProfileSkills openSkills={openSkills} skillsCollapsed={skillsCollapsed} /> */}
-            <ProfilePrefs openPrefs={openPrefs} showTips={profile?.show_tips} prefsCollapsed={prefsCollapsed} toggleTipsAsync={toggleTipsAsync} />
-            <ProfileSubscription openSubscription={openSubscription} subscriptionCollapsed={subscriptionCollapsed} />
-            <ProfileLegal openLegal={openLegal} legalCollapsed={legalCollapsed} />
+            <ProfilePrefs openPrefs={() => toggleSection('prefs')} showTips={profile?.show_tips} prefsCollapsed={collapsed.prefs} toggleTipsAsync={toggleTipsAsync} />
+            <ProfileSubscription openSubscription={() => toggleSection('subscription')} subscriptionCollapsed={collapsed.subscription} />
+            <ProfileLegal openLegal={() => toggleSection('legal')} legalCollapsed={collapsed.legal} />
             <ProfileSectionHeader isCollapsed={true} collapseToggleMethod={openFeedback} title="Provide feedback"/>
         </View>
     )

src/components/Profile/ProfileSections/ProfileAbout.tsx

@@ -0,0 +1,30 @@
+/* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ * Proprietary and confidential
+ * Written and maintained by the Click & Push Development team 
+ * <dev@clicknpush.ca>, January 2022
+ */
+
+import React from "react"
+import { Button, Platform, Text, View } from "react-native"
+import { GlobalStyles } from "../../../utils/GlobalUtils"
+import { ProfileSection } from "./ProfileSection"
+import Constants from "expo-constants"
+
+interface ProfileAboutProps {
+    openAbout: () => void
+    aboutCollapsed: boolean
+}
+
+export const ProfileAbout: React.FC<ProfileAboutProps> = ({aboutCollapsed, openAbout}) => {
+    return (
+        <ProfileSection isCollapsed={aboutCollapsed} collapseToggleMethod={openAbout} title="About">
+            <View>
+                <Text>{Platform.OS == "android" ? "Google Play" : Platform.OS == 'ios' ? "App Store" : null} version: {Constants.nativeAppVersion}</Text>
+            </View>
+            <View>
+                <Text>OTA version: {Constants.manifest.releaseId}</Text>
+            </View>
+        </ProfileSection>
+    )
+}