diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js --- a/native/account/logged-out-modal.react.js +++ b/native/account/logged-out-modal.react.js @@ -2,7 +2,6 @@ import _isEqual from 'lodash/fp/isEqual'; import * as React from 'react'; -import { useContext } from 'react'; import { View, StyleSheet, @@ -42,14 +41,12 @@ derivedDimensionsInfoSelector, } from '../selectors/dimensions-selectors'; import { splashStyleSelector } from '../splash'; -import { StaffContext } from '../staff/staff-context'; import type { EventSubscription, KeyboardEvent } from '../types/react-native'; import type { ImageStyle } from '../types/styles'; import { runTiming, ratchetAlongWithKeyboardHeight, } from '../utils/animation-utils'; -import { useStaffCanSee } from '../utils/staff-utils'; import { type StateContainer, type StateChange, @@ -58,6 +55,7 @@ import { splashBackgroundURI } from './background-info'; import LogInPanel from './log-in-panel.react'; import type { LogInState } from './log-in-panel.react'; +import LoggedOutStaffInfo from './logged-out-staff-info.react'; import RegisterPanel from './register-panel.react'; import type { RegisterState } from './register-panel.react'; import SIWEPanel from './siwe-panel.react'; @@ -117,8 +115,6 @@ +splashStyle: ImageStyle, // Redux dispatch functions +dispatch: Dispatch, - +staffUserHasBeenLoggedIn: boolean, - +staffCanSee: boolean, ... }; type State = { @@ -468,14 +464,6 @@ ); } - let staffUserHasBeenLoggedInIndicator = null; - if (this.props.staffCanSee && this.props.staffUserHasBeenLoggedIn) { - staffUserHasBeenLoggedInIndicator = ( - - STAFF HAS BEEN LOGGED IN - - ); - } if (this.state.mode === 'siwe') { panel = ( @@ -504,7 +492,7 @@ const opacityStyle = { opacity: this.buttonOpacity }; buttons = ( - {staffUserHasBeenLoggedInIndicator} + {siweButton} ); }); diff --git a/native/account/logged-out-staff-info.react.js b/native/account/logged-out-staff-info.react.js new file mode 100644 --- /dev/null +++ b/native/account/logged-out-staff-info.react.js @@ -0,0 +1,122 @@ +// @flow + +import * as React from 'react'; +import { useContext } from 'react'; +import { Text, View } from 'react-native'; + +import SWMansionIcon from '../components/swmansion-icon.react'; +import { StaffContext } from '../staff/staff-context'; +import { useStyles, useColors } from '../themes/colors'; +import { isStaffRelease, useStaffCanSee } from '../utils/staff-utils'; + +function LoggedOutStaffInfo(): React.Node { + const staffCanSee = useStaffCanSee(); + const { staffUserHasBeenLoggedIn } = useContext(StaffContext); + const styles = useStyles(unboundStyles); + const colors = useColors(); + + const checkIcon = React.useMemo( + () => ( + + ), + [colors.vibrantGreenButton], + ); + const crossIcon = React.useMemo( + () => ( + + ), + [colors.vibrantRedButton], + ); + + const isDevBuildStyle = React.useMemo(() => { + return [ + styles.infoText, + __DEV__ ? styles.infoTextTrue : styles.infoTextFalse, + ]; + }, [styles.infoText, styles.infoTextFalse, styles.infoTextTrue]); + + const isStaffReleaseStyle = React.useMemo(() => { + return [ + styles.infoText, + isStaffRelease ? styles.infoTextTrue : styles.infoTextFalse, + ]; + }, [styles.infoText, styles.infoTextFalse, styles.infoTextTrue]); + + const hasStaffUserLoggedInStyle = React.useMemo(() => { + return [ + styles.infoText, + staffUserHasBeenLoggedIn ? styles.infoTextTrue : styles.infoTextFalse, + ]; + }, [ + staffUserHasBeenLoggedIn, + styles.infoText, + styles.infoTextFalse, + styles.infoTextTrue, + ]); + + let loggedOutStaffInfo = null; + if (staffCanSee || staffUserHasBeenLoggedIn) { + loggedOutStaffInfo = ( + + + + {__DEV__ ? checkIcon : crossIcon} + __DEV__ + + + {isStaffRelease ? checkIcon : crossIcon} + isStaffRelease + + + {staffUserHasBeenLoggedIn ? checkIcon : crossIcon} + + staffUserHasBeenLoggedIn + + + + + ); + } + + return loggedOutStaffInfo; +} + +const unboundStyles = { + cell: { + flexDirection: 'row', + alignItems: 'center', + }, + infoBadge: { + backgroundColor: 'codeBackground', + borderRadius: 6, + justifyContent: 'flex-start', + marginBottom: 10, + marginLeft: 40, + marginRight: 40, + marginTop: 10, + padding: 8, + }, + infoText: { + fontFamily: 'OpenSans-Semibold', + fontSize: 14, + lineHeight: 24, + paddingLeft: 4, + textAlign: 'left', + }, + infoTextFalse: { + color: 'vibrantRedButton', + }, + infoTextTrue: { + color: 'vibrantGreenButton', + }, +}; + +export default LoggedOutStaffInfo;