Page MenuHomePhabricator
Files F3382733

D5559.id18303.diff
No OneTemporary
Actions

D5559.id18303.diff
View Options

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 @@
</TouchableOpacity>
);
}
- let staffUserHasBeenLoggedInIndicator = null;
- if (this.props.staffCanSee && this.props.staffUserHasBeenLoggedIn) {
- staffUserHasBeenLoggedInIndicator = (
- <TouchableOpacity style={styles.button} activeOpacity={0.6}>
- <Text style={styles.buttonText}>STAFF HAS BEEN LOGGED IN</Text>
- </TouchableOpacity>
- );
- }
if (this.state.mode === 'siwe') {
panel = (
@@ -504,7 +492,7 @@
const opacityStyle = { opacity: this.buttonOpacity };
buttons = (
<Animated.View style={[styles.buttonContainer, opacityStyle]}>
- {staffUserHasBeenLoggedInIndicator}
+ <LoggedOutStaffInfo />
{siweButton}
<TouchableOpacity
onPress={this.onPressLogIn}
@@ -673,8 +661,6 @@
const loggedIn = useSelector(isLoggedIn);
const dimensions = useSelector(derivedDimensionsInfoSelector);
const splashStyle = useSelector(splashStyleSelector);
- const { staffUserHasBeenLoggedIn } = useContext(StaffContext);
- const staffCanSee = useStaffCanSee();
const dispatch = useDispatch();
return (
@@ -689,8 +675,6 @@
dimensions={dimensions}
splashStyle={splashStyle}
dispatch={dispatch}
- staffUserHasBeenLoggedIn={staffUserHasBeenLoggedIn}
- staffCanSee={staffCanSee}
/>
);
});
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,121 @@
+// @flow
+
+import * as React 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 } = React.useContext(StaffContext);
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+
+ const checkIcon = React.useMemo(
+ () => (
+ <SWMansionIcon
+ name="check-circle"
+ size={20}
+ color={colors.vibrantGreenButton}
+ />
+ ),
+ [colors.vibrantGreenButton],
+ );
+ const crossIcon = React.useMemo(
+ () => (
+ <SWMansionIcon
+ name="cross-circle"
+ size={20}
+ color={colors.vibrantRedButton}
+ />
+ ),
+ [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 = (
+ <View>
+ <View style={styles.infoBadge}>
+ <View style={styles.cell}>
+ {__DEV__ ? checkIcon : crossIcon}
+ <Text style={isDevBuildStyle}>__DEV__</Text>
+ </View>
+ <View style={styles.cell}>
+ {isStaffRelease ? checkIcon : crossIcon}
+ <Text style={isStaffReleaseStyle}>isStaffRelease</Text>
+ </View>
+ <View style={styles.cell}>
+ {staffUserHasBeenLoggedIn ? checkIcon : crossIcon}
+ <Text style={hasStaffUserLoggedInStyle}>
+ staffUserHasBeenLoggedIn
+ </Text>
+ </View>
+ </View>
+ </View>
+ );
+ }
+
+ 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;

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 11:40 AM (20 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2596604
Default Alt Text
D5559.id18303.diff (6 KB)

Event Timeline