@hedia/recommendation-screen 2.1.73 → 2.1.74-alpha.0

package/src/components/InvisibleNumberInput.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import { EmitterSubscription, Keyboard, StyleSheet, TextInput } from "react-native";
+
+export interface IProps {
+	/** The initial value to put in the input field. */
+	startValue?: string;
+	/** The precision with which the content of the input field may be displayed */
+	decimalPlaces: number;
+	/** Whether or not the clean method should be used on the content every time it is changed */
+	cleanPartialInput: boolean;
+	/** Whether or not negative values can be entered. */
+	negativeAllowed: boolean;
+	/** Max length of the content in the input field. */
+	maxLength?: number;
+	/** Test id used for component testing */
+	testID: string;
+	/** Callback function taking a function as argument - For passing a reference for the input field’s to the parent component. */
+	visible(toggle: () => void): void;
+	/** Callback function taking a number argument - To be called when the user finishes editing the invisible text field with the final numerical value as argument. */
+	onEnd?(value: number): void;
+	/** Callback function taking a string as input and not returning anything - To be called every time the content in the input field changes. */
+	partialInput?(value: string): void;
+}
+
+export interface IState {
+	/** For storing the value of the text input so it is available for handling in onEndEdit() when editing the text input ends. */
+	value: string;
+}
+
+/**
+ * InvisibleNumberInput is used to enable numerical input by the user without displaying a traditional input field on the screen.
+ * Since the input field is made invisible and thus can’t be tapped directly by the user we need to be able to call
+ * its focus() method from the parent component in order to activate the input field and show the keyboard.
+ * We do this by defining a function that calls the input field’s focus() method inside the InvisibleNumberInput component when it has been mounted.
+ * This function is then passed to the parent by giving it as the argument for a callback function named visible.
+ */
+export default class InvisibleNumberInput extends React.Component<IProps, IState> {
+	keyboardDidHideSubscription: EmitterSubscription | null = null;
+	inputRef: React.RefObject<TextInput> | null = null;
+	constructor(props: IProps) {
+		super(props);
+		this.inputRef = React.createRef<TextInput>();
+	}
+
+	/** Initialise the state value variable with `0` */
+	public state: IState = {
+		value: `0`,
+	};
+
+	/**
+	 * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+	 * Perform various initialisation steps:
+	 * 1. Set the value state of the component to the startValue prop (or to '0' if it is undefined)
+	 * 2. Call the visible callback function using an anonymous function as argument. The anonymous function shall do the following:
+	 * 	- Set the value state of the InvisibleNumberInput component to the startValue prop (or to '0' if it is undefined)
+	 * 	- Return the value from calling the focus() method on the input field.
+	 */
+	public componentDidMount(): void {
+		this.keyboardDidHideSubscription = Keyboard.addListener(`keyboardDidHide`, this.callOnTextInputsBlur);
+		this.setState({
+			value: this.props.startValue ?? `0`,
+		});
+		this.props.visible((): void => {
+			this.setState({
+				value: this.props.startValue ?? `0`,
+			});
+			return this.inputRef?.current?.focus();
+		});
+	}
+
+	/**
+	 * Call the blur method on the TextInput component.
+	 */
+	public callOnTextInputsBlur = (): void => {
+		this.inputRef?.current?.blur();
+	};
+
+	/**
+	 * Sanitise a user-entered value by removing invalid characters
+	 *
+	 * Steps:
+	 * 1. Use regular expressions to make the following manipulations to the text argument in the defined order and save the result to a local string variable named replaced.
+	 * 	- Replace any commas with periods
+	 * 	- Remove any characters that comes after two groups of zero or more digits separated by a period.
+	 * 2. Define a function named round that rounds a given string that contains a number to have the amount of decimals given by the decimalPlaces prop. Return the result as a string.
+	 * 3. If the value of the replaced variable from step 1 is not a NaN (not a number) when converted to a Number type then use the round function defined in step 2 on replaced and return the result
+	 * 4. (If the NaN-check from step 2 didn’t fail) return the string '0'.
+
+	 * @param text The string input to clean up
+	 * @returns A string with the cleaned text.
+	 */
+	public cleanInput = (text: string): string => {
+		const replaced = text.replace(/,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+		const round = (value: string): string => {
+			const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
+			const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
+			return rounded.toFixed(this.props.decimalPlaces);
+		};
+		if (!isNaN(Number(replaced))) {
+			return round(replaced);
+		}
+		return `0`;
+	};
+
+	/**
+	 * Handle what happens when the text in the input field is being changed.
+	 * That includes cleaning the text a little and then saving the value and potentially calling a callback function.
+	 *
+	 * Steps:
+	 * 1. If the cleanPartialInput prop is true, use the cleanInput() method to to clean the content of the text argument and save it to a variable named cleaned.
+	 *    Otherwise just replace any commas in the text argument with periods and save the result to the same variable.
+	 * 2. Remove repeated periods from the text in the cleaned variable and save the the result in a new variable named replacedSeparator.
+	 * 3. Set the value state of the component to replacedSeparator.
+	 * 4. If the partialInput callback function prop is defined, call it with replacedSeparator as argument.
+	 * @param text The updated text in the input field
+	 */
+	public handleOnChangeText = (text: string): void => {
+		const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/,/g, `.`);
+		let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+		if (!this.props.negativeAllowed) {
+			replacedSeparator = replacedSeparator.replace(/[^0-9.]/g, ``);
+		}
+		this.setState({
+			value: `${replacedSeparator}`,
+		});
+		this.props.partialInput?.(`${replacedSeparator}`);
+	};
+
+	/**
+	 * Handle what should happen when the user finish editing the input field.
+	 *
+	 * Steps:
+	 * 1. Use the cleanInput() method on the value state and store the result in a variable named cleaned.
+	 * 2. If the onEnd prop is not null, then convert the value of cleaned to a number and use it as an argument to call the onEnd prop function.
+	 */
+	public onEndEdit = (): void => {
+		const cleaned = this.cleanInput(this.state.value);
+		this.props.onEnd?.(Number(cleaned));
+	};
+
+	/**
+	 * @returns JSX element to display a TextInput field with the component’s value state as its value
+	 * and the handleOnChangeText() and onEndEdit() methods as the textInput’s onChangeText and onEndEditing respectively.
+	 */
+	public render(): JSX.Element {
+		const { testID } = this.props;
+		return (
+			<TextInput
+				testID={testID}
+				value={this.state.value}
+				ref={this.inputRef}
+				style={inputStyles.input}
+				keyboardType={`numeric`}
+				returnKeyType={`done`}
+				onChangeText={this.handleOnChangeText}
+				onEndEditing={this.onEndEdit}
+				maxLength={this.props.maxLength}
+				selectTextOnFocus
+			/>
+		);
+	}
+}
+
+const inputStyles = StyleSheet.create({
+	input: {
+		width: 1,
+		height: 1,
+		opacity: 0,
+	},
+});

package/src/components/LineSeparator.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+export interface IProps {
+	/** The color that the line should have. */
+	borderBottomColor: string;
+	/** The marginTop of the line. */
+	marginTop?: number;
+	/** The marginBottom of the line. */
+	marginBottom?: number;
+}
+
+/** Display a horizontal line for visually separating elements in the user interface. */
+export default class LineSeparator extends React.Component<IProps> {
+	/** @return JSX element for displaying a thin horizontal line in the given color. */
+	public render(): JSX.Element {
+		return (
+			<React.Fragment>
+				<View style={[lineSeparatorStyles.lineStyle, { ...this.props }]} />
+			</React.Fragment>
+		);
+	}
+}
+
+const lineSeparatorStyles = StyleSheet.create({
+	lineStyle: {
+		borderBottomWidth: 1,
+	},
+});

package/src/components/RecentInsulin.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+
+import { t } from "../locales/translate";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { FONTS } from "./styles/fonts";
+import Text from "./Text";
+
+export interface IProps {
+	/** Callback function taking no arguments and returning no value - To be called if the user presses the “Yes” button. */
+	onRecentInsulinYes(): void;
+	/**  Callback function taking no arguments and returning no value - To be called if the user presses the “No” button. */
+	onRecentInsulinNo(): void;
+}
+
+/** Display a card that prompts the user to recall if they injected insulin recently. */
+export default class RecentInsulin extends React.Component<IProps> {
+	/**
+	 *
+	 * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours?
+	 * Along with two buttons labeled “Yes” and “No” respectively.
+	 * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
+	 * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
+	 */
+	public render = (): JSX.Element => {
+		return (
+			<View style={recentInsulinStyles.container}>
+				<View style={recentInsulinStyles.textContainer}>
+					<Text style={recentInsulinStyles.recommended}>{t(`Recommended amount of insulin`)}</Text>
+					<Text style={recentInsulinStyles.takenInsulin}>
+						{t(`Have you taken insulin within the last 4 hours?`)}
+					</Text>
+				</View>
+				<View style={recentInsulinStyles.buttonContainer}>
+					<TouchableOpacity
+						testID={Testing.Id.RecentInsulinTestIds.Yes}
+						onPress={this.props.onRecentInsulinYes}
+						style={recentInsulinStyles.yesButton}
+					>
+						<Text style={recentInsulinStyles.yesNoText}>{t(`Yes`)}</Text>
+					</TouchableOpacity>
+					<TouchableOpacity
+						testID={Testing.Id.RecentInsulinTestIds.No}
+						onPress={this.props.onRecentInsulinNo}
+						style={recentInsulinStyles.noButton}
+					>
+						<Text style={recentInsulinStyles.yesNoText}>{t(`No`)}</Text>
+					</TouchableOpacity>
+				</View>
+			</View>
+		);
+	};
+}
+
+const recentInsulinStyles = StyleSheet.create({
+	container: {
+		minHeight: 220,
+		backgroundColor: colors.deepPurple,
+		borderRadius: 5,
+		marginBottom: 32,
+		paddingHorizontal: 16,
+		paddingTop: 16,
+		paddingBottom: 50,
+	},
+	textContainer: {
+		justifyContent: `center`,
+		alignItems: `center`,
+		marginBottom: 32,
+	},
+	recommended: {
+		...FONTS.Poppins.medium_Base,
+		color: colors.white,
+		textAlign: `center`,
+		marginBottom: 2,
+	},
+	takenInsulin: {
+		...FONTS.Poppins.regular_SM,
+		color: colors.white,
+		textAlign: `center`,
+	},
+	buttonContainer: {
+		flexDirection: `row`,
+		justifyContent: `center`,
+	},
+	yesButton: {
+		flex: 1,
+		borderRadius: 50,
+		minWidth: 127,
+		marginLeft: 30,
+		marginRight: 12,
+		backgroundColor: colors.teal,
+	},
+	noButton: {
+		flex: 1,
+		borderRadius: 50,
+		minWidth: 127,
+		marginRight: 30,
+		marginLeft: 12,
+		backgroundColor: colors.teal,
+	},
+	yesNoText: {
+		...FONTS.Poppins.bold_Base,
+		textAlign: `center`,
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+		color: colors.black,
+	},
+});

package/src/components/RecommendationModal.tsx

@@ -0,0 +1,319 @@
+import * as React from "react";
+import { SafeAreaView, ScrollView, StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import ReactNativeModal from "react-native-modal";
+
+import { t } from "../locales/translate";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { FONTS } from "./styles/fonts";
+import Text from "./Text";
+
+const { RecommendationModalTestIds } = Testing.Id;
+
+export interface IModalProps {
+	/** Whether or not the modal should currently be displayed on the screen */
+	isVisible: boolean;
+	/** The amount of additional carbohydrates that is being recommended for the user in grams. */
+	suggestedCarbohydrates: number | null;
+	/** A message to display to the user to inform them in natural language about special recommendations or warnings from HDA. */
+	attentionMessage: string | null;
+	/** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
+	limitationMessage: string | null;
+	/**
+	 * If true then the modal will only display the limitation message and not the attention message.
+	 */
+	onlyShowLimitationMessage: boolean;
+	/** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
+	onClickOkButton(): void;
+	/**
+	 * Callback function taking no arguments and returning no value.
+	 * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
+	 */
+	onAcceptCarbohydrates(): void;
+	/**
+	 * Callback function taking no arguments and returning no value.
+	 * Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
+	 */
+	onDeclineCarbohydrates(): void;
+}
+export interface IModalState {
+	/** If true then the first page will be displayed, otherwise the second page will be displayed. */
+	firstPageVisible: boolean;
+}
+
+/**
+ * Popup modal for displaying information messages or warnings to the user if necessary.
+ * The modal has two “pages” with different content that it is able to display.
+ * The first page is for informing the user if their insulin recommendation was limited by the maximum insulin safety limit.
+ * This page will only be displayed if the recommendation was actually limited.
+ * The second page is for displaying a general attention message that may contain instructions for the user,
+ * and for letting the user know if they are being recommended eating additional carbohydrates.
+ */
+export default class RecommendationModal extends React.Component<IModalProps, IModalState> {
+	/**
+	 * Steps:
+	 * 1. Call the super() method with the props.
+	 * 2. Set the firstPageVisible state variable true if the limitationMessage prop is truthy.
+	 * @param props The class props
+	 */
+	constructor(props: IModalProps) {
+		super(props);
+		this.state = {
+			firstPageVisible: !!this.props.limitationMessage,
+		};
+	}
+
+	/*
+	 * Steps:
+	 * 1. Set the firstPageVisible state variable true if the limitationMessage prop was updated.
+	 */
+	public componentDidUpdate(prevProps: Readonly<IModalProps>): void {
+		if (prevProps.limitationMessage !== this.props.limitationMessage) {
+			this.setState({ firstPageVisible: !!this.props.limitationMessage });
+		}
+	}
+
+	/**
+	 * Handle what happens when the “next” button is pressed.
+	 *
+	 * Steps:
+	 * 1. Unpack attentionMessage and suggestedCarbohydrates from the props object.
+	 * 2. Define isPageVisible to be true if either attentionMessage or suggestedCarbohydrates is truthy.
+	 * 3. If isPageVisible is true then set the firstPageVisible state variable to false. Otherwise call the onClickOkButton prop callback function.
+	 */
+	public onPressNextButton = (): void => {
+		const { attentionMessage, suggestedCarbohydrates } = this.props;
+		const isSecondPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
+		return isSecondPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
+	};
+
+	/**
+	 * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
+	 * If the accept button is pressed the onAcceptCarbohydrates prop callback function shall be called.
+	 * If the accept button is pressed the onDeclineCarbohydrates prop callback function shall be called.
+	 */
+	public recommendationButtons = (): JSX.Element => {
+		return (
+			<View style={stylesModal.recommendationButtonsContainer}>
+				<TouchableOpacity
+					testID={RecommendationModalTestIds.AcceptCarbs}
+					style={[stylesModal.button, { marginRight: 12 }]}
+					onPress={this.props.onAcceptCarbohydrates}
+				>
+					<Text style={stylesModal.carbsButtonText}>{t(`OK`)}</Text>
+				</TouchableOpacity>
+				<TouchableOpacity
+					testID={RecommendationModalTestIds.DeclineCarbs}
+					style={[stylesModal.button, { marginLeft: 12 }]}
+					onPress={this.props.onDeclineCarbohydrates}
+				>
+					<Text style={stylesModal.carbsButtonText}>{t(`NO`)}</Text>
+				</TouchableOpacity>
+			</View>
+		);
+	};
+
+	/**
+	 * Compose a JSX element for displaying a recommendation of additional carbohydrates (the value of the suggestedCarbohydrates prop rounded to the nearest integer)
+	 * to the user in a way that explains what to do with the suggestion.
+	 * @param suggestedCarbohydrates the recommended additional carbohydrates
+	 */
+	public recommendCarbohydrates = (suggestedCarbohydrates: number): JSX.Element => {
+		const displayCarbs = Math.round(suggestedCarbohydrates);
+
+		return (
+			<React.Fragment>
+				<View style={stylesModal.innerView}>
+					<Text style={stylesModal.recommendEatingText}>{t(`We recommend eating an additional:`)}</Text>
+					<Text style={stylesModal.textCenter}>
+						<Text style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>
+							{`${displayCarbs} `}
+						</Text>
+						<Text style={stylesModal.carbohydrateText}>{t(`grams of carbohydrates`)}</Text>
+					</Text>
+					<Text style={stylesModal.recommendEatingText}>{t(`Instead of taking insulin`)}</Text>
+				</View>
+				<Text style={stylesModal.addToCalculation}>
+					{t(`Would you like to add this to your current calculation?`)}
+				</Text>
+				{this.recommendationButtons()}
+			</React.Fragment>
+		);
+	};
+
+	/**
+	 * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
+	 */
+	public secondPage = (): JSX.Element => {
+		const { attentionMessage, suggestedCarbohydrates } = this.props;
+		const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
+
+		return (
+			<>
+				<View style={stylesModal.container}>
+					<Text style={stylesModal.textTittleMessage}>{t(`Attention`)}</Text>
+					{attentionMessage && <Text style={stylesModal.textMessage}>{attentionMessage}</Text>}
+					{willRecommendCarbs && this.recommendCarbohydrates(suggestedCarbohydrates)}
+				</View>
+				{!willRecommendCarbs && (
+					<TouchableOpacity
+						testID={RecommendationModalTestIds.OkButton}
+						style={stylesModal.okButton}
+						onPress={this.props.onClickOkButton}
+					>
+						<Text style={stylesModal.buttonText}>{t(`OK`)}</Text>
+					</TouchableOpacity>
+				)}
+			</>
+		);
+	};
+
+	/**
+	 * @returns JSX element for displaying the “first” page of the recommendation modal.
+	 * The first page consists of a limitation message rendered using a LimitationMessage component.
+	 */
+	public firstPage = (): JSX.Element => {
+		const { limitationMessage } = this.props;
+		return (
+			<React.Fragment>
+				<Text style={stylesModal.textTittleMessage}>{t(`Attention`)}</Text>
+				<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
+				<TouchableOpacity
+					testID={Testing.Id.RecommendationModalTestIds.LimitationOkButton}
+					style={stylesModal.okButton}
+					onPress={this.props.onlyShowLimitationMessage ? this.props.onClickOkButton : this.onPressNextButton}
+				>
+					<Text style={stylesModal.buttonText}>{t(`OK`)}</Text>
+				</TouchableOpacity>
+			</React.Fragment>
+		);
+	};
+
+	/**
+	 * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.
+	 * If the firstPageVisible state variable is true then use firstPage() to render the first page.
+	 * Otherwise use secondPage() to render the second page.
+	 */
+	public render(): JSX.Element {
+		const { isVisible } = this.props;
+		const { firstPageVisible } = this.state;
+		return (
+			<ReactNativeModal
+				isVisible={isVisible}
+				style={stylesModal.modalStyle}
+				backdropColor={colors.darkBlue}
+				backdropOpacity={1}
+				animationIn={`fadeIn`}
+				animationOut={`fadeOut`}
+			>
+				<StatusBar backgroundColor={colors.darkBlue} />
+				<SafeAreaView style={stylesModal.safe}>
+					<ScrollView contentContainerStyle={stylesModal.scrollViewContainer}>
+						{firstPageVisible ? this.firstPage() : this.secondPage()}
+					</ScrollView>
+				</SafeAreaView>
+			</ReactNativeModal>
+		);
+	}
+}
+
+/** @internal */
+export const stylesModal = StyleSheet.create({
+	safe: {
+		backgroundColor: colors.darkBlue,
+	},
+	modalStyle: {
+		margin: 0,
+	},
+	scrollViewContainer: {
+		flexGrow: 1,
+		justifyContent: `center`,
+	},
+	container: {
+		justifyContent: `center`,
+	},
+	textTittleMessage: {
+		...FONTS.Poppins.bold_3XL,
+		color: colors.white,
+		textAlign: `center`,
+	},
+	textMessage: {
+		...FONTS.Poppins.regular_Base,
+		color: colors.white,
+		textAlign: `center`,
+		marginHorizontal: 30,
+		marginTop: 8,
+	},
+	buttonText: {
+		...FONTS.Poppins.bold_Base,
+		color: colors.white,
+		textAlign: `center`,
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+	},
+	innerView: {
+		alignContent: `center`,
+		borderRadius: 8,
+		backgroundColor: colors.purple,
+		paddingVertical: 24,
+		marginHorizontal: 30,
+		marginTop: 24,
+		marginBottom: 36,
+	},
+	suggestedCarbs: {
+		...FONTS.Poppins.bold_XL,
+		color: colors.white,
+	},
+	textCenter: {
+		...FONTS.Poppins.regular_Base,
+		textAlign: `center`,
+		paddingHorizontal: 26.5,
+	},
+	recommendEatingText: {
+		...FONTS.Poppins.regular_Base,
+		color: colors.white,
+		textAlign: `center`,
+		paddingHorizontal: 15,
+		marginBottom: 8,
+	},
+	carbohydrateText: {
+		...FONTS.Poppins.bold_Base,
+		color: colors.white,
+	},
+	addToCalculation: {
+		...FONTS.Poppins.regular_Base,
+		color: colors.white,
+		textAlign: `center`,
+		marginBottom: 16,
+		marginHorizontal: 50,
+	},
+	recommendationButtonsContainer: {
+		justifyContent: `center`,
+		flexDirection: `row`,
+		paddingHorizontal: 47,
+	},
+	carbsButtonText: {
+		...FONTS.Poppins.bold_Base,
+		color: colors.white,
+		textAlign: `center`,
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+	},
+	button: {
+		borderRadius: 50,
+		borderWidth: 1,
+		borderColor: colors.white,
+		alignSelf: `center`,
+		minWidth: 127,
+	},
+	okButton: {
+		backgroundColor: colors.darkBlue,
+		justifyContent: `flex-start`,
+		marginTop: 24,
+		borderRadius: 50,
+		borderWidth: 1,
+		borderColor: colors.white,
+		alignSelf: `center`,
+		minWidth: 127,
+	},
+});