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

package/src/RecommendationScreen.tsx

@@ -0,0 +1,854 @@
+import React from "react";
+import { AppState, AppStateStatus, LogBox, NativeEventSubscription, StyleSheet, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+
+import * as Calculator from "@hedia/recommendation-calculator";
+import {
+	BloodGlucoseUnit,
+	BloodKetonesUnit,
+	BolusCalculator,
+	Languages,
+	Logbook,
+	Milliseconds,
+	UserSettings,
+} from "@hedia/types";
+
+import Activity from "./components/activity/Activity";
+import ExitModal from "./components/ExitModal";
+import InfoBars from "./components/InfoBars";
+import Emotion from "./components/mood/Emotion";
+import RecentInsulin from "./components/RecentInsulin";
+import RecommendationModal from "./components/RecommendationModal";
+import RecommendedCarbs from "./components/RecommendedCarbs";
+import RecommendedInsulin from "./components/RecommendedInsulin";
+import Remeasure from "./components/Remeasure";
+import { FONTS } from "./components/styles/fonts";
+import Text from "./components/Text";
+import TimeoutModal from "./components/TimeoutModal";
+import TransferToLogbook from "./components/TransferToLogbook";
+import { changeLocale, t } from "./locales/translate";
+import { ExitModalActions, Testing, TimeoutModalActions } from "./types/enum";
+import { IActivityDisplayProps } from "./types/types";
+import { Messages } from "./utils/AttentionMessages";
+import { colors } from "./utils/Constants";
+import { RecommendationError } from "./utils/RecommendationError";
+import { getAttentionMessage, getBGLevel, getLimitationMessage, getReminder } from "./utils/RecommendationUtils";
+import { Utils } from "./utils/Utils";
+import { validateParams } from "./utils/Validations";
+
+const { InfoBarTestIds, RecommendationScreenTestIds } = Testing.Id;
+
+// Ignoring long timer warnings
+// https://github.com/facebook/react-native/issues/12981#issuecomment-652745831
+LogBox.ignoreLogs([`Setting a timer`]);
+
+/** Represents both a suggestion by HDA and an actual amount of either insulin or carbohydrates. */
+export interface IResult {
+	/** The suggested amount (of insulin in units or carbohydrates in grams) */
+	suggested: number;
+	/** The actual amount (of insulin in units or carbohydrates in grams) */
+	entered: number | null;
+}
+
+export interface IRecommendationProps {
+	/** The blood glucose measurement unit that the user prefers. */
+	bloodGlucoseUnit: BloodGlucoseUnit;
+	/** The user’s preferred language. */
+	language: keyof typeof Languages;
+	/** The user’s preferred default reminder time in hours when they enter carbohydrates or an activity. */
+	userReminder: number;
+	/** The values needed to make an insulin recommendation calculation. */
+	calculatorParams: BolusCalculator.Types.IRecommendationParams;
+	/** Indicates which method the user uses to inject insulin and thus how insulin amounts should be rounded. */
+	injectionMethod: UserSettings.Enums.InjectionMethod;
+	/** The user’s entered current blood ketones value. Null if no blood ketones value was entered. */
+	currentBKL: number | null;
+	/** The blood ketones measurement unit that the user prefers. Null if the user hasn’t selected a preferred blood ketones unit. */
+	bloodKetoneUnit: BloodKetonesUnit | null;
+	/** The latest logbook entry (if any) from the last 6 hours. */
+	latestLogbookFrom6Hours: Logbook.Types.ILogbookEntry | null;
+	/** The properties of the entered activity that are not used for making the calculation itself, but will be used on the recommendation screen. */
+	activityDisplayProps: IActivityDisplayProps | null;
+	/** Should the exit modal be displayed or not */
+	showExitModal: boolean;
+
+	/**
+	 * Callback function taking a single boolean argument and returning nothing.
+	 * To be called when the user decides on a presented carbohydrate recommendation.
+	 * @param carbRecommendationAnswer Whether the user chose to accept (true) or reject (false) the carbohydrate recommendation.
+	 */
+	carbRecommendationAnswer(carbRecommendationAnswer: boolean): void;
+	/**
+	 * Callback function without arguments or return values.
+	 * To be called if the user decides to exit the recommendation screen without transferring any of the data to the logbook.
+	 * The unsaved logbook data shall be cleared.
+	 */
+	closeCalculationCallback(): void;
+	/**
+	 *  Callback function without arguments or return values.
+	 * To be called if the user closes the recommendation screen by tapping the cancel button in the header.
+	 */
+	exitCallback(): void;
+	/**
+	 * Callback function without arguments or return values.
+	 * To be called if the user taps “Yes” when asked if they have taken insulin recently.
+	 * Should allow the user to enter when they injected insulin and how much.
+	 */
+	onRecentInsulinYes(): void;
+	/**
+	 * Callback function without arguments or return values.
+	 * To be called if the user taps “No” when asked if they have taken insulin recently.
+	 * Should allow the user to enter when they injected insulin and how much.
+	 */
+	onRecentInsulinNo(): void;
+	/**
+	 * Callback function without arguments or return values.
+	 * To be called if the user taps “No” when asked if they have taken insulin recently, making the recommendation visible.
+	 * Should display insulin recommendation.
+	 */
+	onRecommendationDisplayed(): void;
+	/**
+	 * To be called when the “Transfer to Logbook” button is pressed.
+	 * @param carbs The suggested and entered amount of carbohydrates.
+	 * @param insulin The suggested and entered amount of insulin.
+	 * @param reminder The amount of time in hours until the user should get a reminder to measure their BGL again.
+	 * @param recommendationDate The date and time when the recommendation calculation was made.
+	 * @param mood The mood the user has selected
+	 */
+	transferToLogbook(
+		carbs: IResult,
+		insulin: IResult,
+		reminder: number,
+		recommendationDate: Date,
+		mood: Logbook.Enums.MoodEnum | null,
+	): void;
+	/**
+	 * Callback function taking a single argument of type RecommendationError.
+	 * To be called in case a serious issue with the validity of input data is detected.
+	 * @param error The detected error.
+	 */
+	onError(error: RecommendationError | Error): void;
+	/**
+	 * Callback function taking no arguments.
+	 * To be called if the user chooses to restart the calculation.
+	 */
+	restartCalculation(): void;
+	/**
+	 * Callback function without arguments or return values.
+	 */
+	hideExitModal(): void;
+	/**
+	 * Callback function without arguments or return values.
+	 * To be called if the user taps "No, return to dahsboard" when asked after 15 mins of inactivity.
+	 */
+	onReturnToDashboard(): void;
+	/**
+	 * Callback function without arguments or return values.
+	 * To be called if the user taps “Yes, save to logbook” when asked after 15 mins of inactivity.
+	 */
+	onSaveToLogbook(): void;
+}
+
+interface IState {
+	/** The time in hours in hours until a reminder notification will be sent to the user. If 0 then no notification will be sent. */
+	remeasureTime: number;
+	/**
+	 * If true then the user will see the insulin input field with their recommendation.
+	 * Otherwise, the user will be presented with a card that asks them whether they have taken bolus insulin within the last 4 hours
+	 */
+	isRecommendationDisplayed: boolean;
+	/** The suggested amount of insulin. */
+	insulinRecommendation: number;
+	/** The fraction by which the recommendation was multiplied to get the reduced amount */
+	activityReduction: number | null;
+	/**  Indicates whether or not the insulin recommendation was limited by the maximum threshold. */
+	wasLimited: boolean;
+	/** The suggested amount of additional carbs. */
+	carbRecommendation: number | null;
+	/** The amount of IOB that was estimated during the recommendation calculation. */
+	activeInsulin: number;
+	/** The mood that is currently selected or null if no mood is selected. */
+	selectedMood: Logbook.Enums.MoodEnum | null;
+	/** The amount of carbs that are being shown in the additional carbs input field. */
+	enteredCarbs: number | null;
+	/** The current insulin value in the insulin recommendation/input field. */
+	enteredInsulin: number | null;
+	/** Indicates whether or not the modal for displaying warnings and other special messages should be visible. */
+	recommendationModal: boolean;
+	/**
+	 * Keeps track of whether or not the exit modal should be displayed.
+	 * The exit modal prompts the user to consider saving the calculation to a logbook entry before closing the recommendation screen.
+	 */
+	showExitModal: boolean;
+	/** Keeps track of action taken in the exit modal. */
+	exitModalAction: ExitModalActions | null;
+	/**  Keeps track of whether or not only the limitation page of the recommendation modal should be visible. */
+	onlyShowLimitationMessage: boolean;
+	/** Keeps track of whether or not a message about the recommendation being too old should be displayed. */
+	showTimeoutModal: boolean;
+	/** Keeps track of action taken in the timout modal. */
+	timeoutModalAction: TimeoutModalActions | null;
+}
+
+/**
+ * The RecommendationScreen is the React component that passes relevant inputs to the recommendation calculation module and presents
+ * the resulting recommendation along with related messages or warnings to the user.
+ * The RecommendationScreen component accepts properties with the user’s settings/preferences and other inputs needed for calculating a recommendation.
+ * @noInheritDoc
+ */
+export class RecommendationScreen extends React.Component<IRecommendationProps, IState> {
+	/** Reference to the timer that prompts the user to make a new calculation after 15 minutes. */
+	private readonly timer!: ReturnType<typeof setTimeout>;
+	/**
+	 * The carbohydrate recommendation for the user.
+	 * This value is saved in a member variable because we want to store it unmodified if the logbook entry
+	 * gets saved regardless of what other changes were made on the recommendation screen.
+	 */
+	private readonly suggestedCarbs!: number;
+	/**
+	 * A guard against displaying wrong or dangerous information to the user.
+	 * If an error has occurred, this variable will be set to true and an empty placeholder will be rendered instead of the normal recommendation screen.
+	 */
+	private readonly hasError: boolean = false;
+	/** The timestamp when the current recommendation was made. For determining if the recommendation is too old and should be hidden from the user. */
+	private readonly recommendationDate!: Date;
+	/**
+	 * A reference to the screens scrollview allowing us to programmatically scroll the screen in the handleNoRecentInsulin() method.
+	 * The member is initiated without a value but will be set as soon as the component is being rendered.
+	 */
+	private scrollView?: KeyboardAwareScrollView;
+
+	/**
+	 * A reference to the eventSubscription that'll be returned by AppState.addEventListener().
+	 * It'll allow us to later remove the subscription.
+	 */
+	private appStateSubscription?: NativeEventSubscription;
+
+	/**
+	 * Steps:
+	 * 1. Call the super() method with the props.
+	 * 2. Execute the following steps and if an exception is thrown, catch it, set the hasError member variable to true and call the onError callback prop with the caught exception as argument:
+	 * 	- Call the validateParams() method with the props as argument
+	 * 	- Set the recommendationDate member to the current date and time
+	 * 	- Set the language by using the language prop as argument for calling changeLanguage()
+	 * 	- Unpack recentBoluses from the calculatorParams prop.
+	 * 	- Use the calculatorParams prop as argument for calling calculateRecommendation() and unpack all of the resulting values.
+	 * 	- Call the onRecommendationDisplayed() callback prop if the recommendation is visible
+	 * 	- Copy the carbRecommendation to the suggestedCarbs member variable.
+	 * 	- Set the following state variables:
+	 * 		- Set remeasureTime to the return value from calling the getBGLevelRemeasurementReminder() method.
+	 * 		- Set isRecommendationDisplayed to be false if the length of recentBoluses is 0 or false otherwise.
+	 * 		- Set insulinRecommendation to be the bolus insulin recommendation rounded using roundValue().
+	 * 		- Set wasLimited to the wasLimited return value from calling calculateRecommendation() above.
+	 * 		- Set activityReduction to the reduction returned from the calculation result.
+	 * 		- Set carbRecommendation to the recommendation returned from the calculation result.
+	 * 		- Set activeInsulin to the estimation returned from the calculation result.
+	 * 		- Set enteredCarbs, enteredInsulin, selectedMood to null.
+	 * 		- Set recommendationModal to be true if wasLimited is true or if carbRecommendation after being rounded is truthy or if the return value from calling the getBGLevelAttentionMessage() method is truthy.
+	 * 		- Set onlyShowLimitationMessage, showTimeoutModal to be false.
+	 *		- Set showExitModal with the value of the showExitModal prop.
+	 * 3. Start a 15 minute timer assigned to the timer member variable using the setTimeout() function. When the timer expires, call the showTimeoutModal() method.
+	 * @param props The data required to initialise the Recommendation Screen
+	 */
+	constructor(props: IRecommendationProps) {
+		super(props);
+		try {
+			validateParams(props);
+			changeLocale(props.language);
+			this.recommendationDate = new Date();
+
+			const { recentBoluses } = props.calculatorParams;
+			const { bolus, carbRecommendation, activityReduction, wasLimited, activeInsulin } =
+				Calculator.calculateRecommendation(props.calculatorParams);
+
+			this.suggestedCarbs = carbRecommendation;
+
+			const isRecommendationDisplayed = recentBoluses?.length !== 0;
+			if (isRecommendationDisplayed) {
+				this.props.onRecommendationDisplayed();
+			}
+
+			this.state = {
+				remeasureTime: this.getBGLevelRemeasurementReminder(),
+				isRecommendationDisplayed,
+				insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
+				wasLimited,
+				activityReduction,
+				carbRecommendation,
+				activeInsulin,
+				enteredCarbs: null,
+				enteredInsulin: null,
+				selectedMood: null,
+				recommendationModal:
+					wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
+				onlyShowLimitationMessage: false,
+				showExitModal: props.showExitModal,
+				showTimeoutModal: false,
+				timeoutModalAction: null,
+				exitModalAction: null,
+			};
+
+			this.timer = setTimeout(this.showTimeoutModal, Milliseconds.Minute * 15);
+		} catch (error) {
+			this.hasError = true;
+			props.onError(error);
+		}
+	}
+
+	/**
+	 * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+	 *
+	 * Steps:
+	 * 1. If there is no error, create a listener to call the handleAppStateChange() method when the app state changes.
+	 */
+	public componentDidMount(): void {
+		if (!this.hasError) {
+			this.appStateSubscription = AppState.addEventListener(`change`, this.handleAppStateChange);
+		}
+	}
+
+	/**
+	 * Called immediately before a component is destroyed.
+	 * Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
+	 *
+	 * Clear the 15 minute timer that was set in the constructor during initialisation so it doesn't keep running and gets triggered after the recommendation screen was closed.
+	 *
+	 * Steps:
+	 * 1. Call clearTimeout on the timer member variable.
+	 * 2. Remove the listener for app state changes that was set by the componentDidMount() method.
+	 */
+	public componentWillUnmount(): void {
+		if (this.timer !== undefined) {
+			clearTimeout(this.timer);
+		}
+		this.appStateSubscription?.remove();
+	}
+
+	/**
+	 * Called immediately after updating occurs. This method is not called for the initial render.
+	 * Use this as an opportunity to operate on the DOM when the component has been updated.
+	 * Steps:
+	 * 1. If the showExitModal prop is true and it was false before, call the onExit() method.
+	 * @param showExitModal The previous showExitModal props of the component.
+	 */
+	public componentDidUpdate({ showExitModal }: IRecommendationProps): void {
+		if (this.props.showExitModal && showExitModal !== this.props.showExitModal) {
+			this.onExit();
+		}
+	}
+
+	/**
+	 * Steps:
+	 * 1. Evaluate a boolean called isOlderThan15Minutes to indicate whether the recommendationDate member variable represents a time more than 15 minutes ago.
+	 * 2. If nextAppState is ‘active’ and isOlderThan15Minutes is true then call the showTimeoutModal() method.
+	 * @param nextAppState The new state of the app.
+	 */
+	public handleAppStateChange = (nextAppState: AppStateStatus): void => {
+		const time = this.recommendationDate.getTime();
+		const isOlderThan15Minutes = new Date().getTime() - time > Milliseconds.Minute * 15;
+		if (nextAppState === `active` && isOlderThan15Minutes) {
+			this.showTimeoutModal();
+		}
+	};
+
+	/**
+	 * Steps:
+	 * 1. Set the showTimeoutModal state variable to be true.
+	 * */
+	public showTimeoutModal = (): void => {
+		this.setState({ showTimeoutModal: true });
+	};
+
+	/**
+	 * Make a new insulin calculation and set the result to be displayed to the user.
+	 *
+	 * Steps:
+	 * 1. Use calculatorParams as an argument for calling calculateRecommendation(). Unpack bolus, wasLimited, and activityReduction from the result.
+	 * 2. Set the following state variables:
+	 * 	- Set insulinRecommendation to the bolus rounded using the roundValue() function.
+	 * 	- Set enteredInsulin to be undefined.
+	 * 	- Set wasLimited to be the value returned from the insulin calculator.
+	 * 	- Set activityReduction to be the value returned from the insulin calculator.
+	 * 	- Set showLimitationMessage to be the wasLimited value returned from the insulin calculator.
+	 * @param calculatorParams The input values for the bolus calculator itself.
+	 */
+	public recalculateInsulin = (calculatorParams: BolusCalculator.Types.IRecommendationParams): void => {
+		const { bolus, wasLimited, activityReduction } = Calculator.calculateRecommendation(calculatorParams);
+		this.setState({
+			insulinRecommendation: Utils.roundValue(bolus, this.props.injectionMethod),
+			enteredInsulin: null,
+			wasLimited,
+			activityReduction,
+			onlyShowLimitationMessage: wasLimited,
+		});
+	};
+
+	/**
+	 * Handle presses on the exit button in the header bar.
+	 *
+	 * Steps:
+	 * 1. If the insulin recommendation is being displayed (the isRecommendationDisplayed state variable is true):
+	 *  	- Set the showExitModal state variable to true.
+	 * 2. Else:
+	 *  	- Call the exitCallback prop callback function.
+	 */
+	public onExit = (): void => {
+		if (this.state?.isRecommendationDisplayed) {
+			this.setState({ showExitModal: true });
+		} else {
+			this.props.exitCallback();
+		}
+	};
+
+	/**
+	 * Hide the modal that shows attention messages.
+	 *
+	 * Steps:
+	 * 1. Set the recommendationModal state variable to false.
+	 */
+	public hideAttentionModal = (): void => {
+		this.setState({ recommendationModal: false, onlyShowLimitationMessage: false });
+	};
+
+	/**
+	 * Handle presses on the transfer button in the exit modal.
+	 */
+	public onPressTransferExitModal = (): void => {
+		this.setState({ showExitModal: false, exitModalAction: ExitModalActions.Transfer });
+	};
+
+	/**
+	 * Handle presses on the close calculation button in the exit modal.
+	 */
+	public onPressCloseExitModal = (): void => {
+		this.setState({ showExitModal: false, exitModalAction: ExitModalActions.CloseCalculation });
+	};
+
+	/**
+	 * Handle presses on the hide button in the exit modal.
+	 */
+	public onPressHideExitModal = (): void => {
+		this.setState({ showExitModal: false, exitModalAction: ExitModalActions.Hide });
+	};
+
+	/**
+	 * Call the chosen modal action on the didHide modal callback .
+	 */
+	public onExitModalDidHide = () => {
+		switch (this.state.exitModalAction) {
+			case ExitModalActions.Transfer:
+				this.handleTransfer();
+				break;
+			case ExitModalActions.CloseCalculation:
+				this.props.closeCalculationCallback();
+				break;
+			case ExitModalActions.Hide:
+				this.props.hideExitModal();
+				break;
+		}
+	};
+
+	/**
+	 * Handle presses on the close calculation button in the timeout modal.
+	 */
+	public onPressCloseCalculationTimeoutModal = (): void => {
+		this.setState({ showTimeoutModal: false, timeoutModalAction: TimeoutModalActions.CloseCalculation });
+	};
+
+	/**
+	 * Handle presses on the restart calculation button in the timeout modal.
+	 */
+	public onPressRestartCalculationTimeoutModal = (): void => {
+		this.setState({ showTimeoutModal: false, timeoutModalAction: TimeoutModalActions.RestartCalculation });
+	};
+
+	/**
+	 * Handle presses on the transfer button in the timeout modal.
+	 */
+	public onPressTransferTimeoutModal = (): void => {
+		this.setState({ showTimeoutModal: false, timeoutModalAction: TimeoutModalActions.Transfer });
+	};
+
+	/**
+	 * Call the chosen modal action on the didHide modal callback .
+	 */
+	public onTimeoutModalDidHide = () => {
+		switch (this.state.timeoutModalAction) {
+			case TimeoutModalActions.RestartCalculation:
+				this.props.restartCalculation();
+				break;
+			case TimeoutModalActions.Transfer:
+				this.props.onSaveToLogbook();
+				this.handleTransfer();
+				break;
+			case TimeoutModalActions.CloseCalculation:
+				this.props.onReturnToDashboard();
+				this.props.closeCalculationCallback();
+				break;
+		}
+	};
+
+	/**
+	 * Used as a callback function for the Remeasure component to update the state when the remeasure time slider’s value changes.
+	 *
+	 * Steps:
+	 * 1. Set the remeasureTime state variable to the value of the remeasureTime argument.
+	 * @param remeasureTime The number of hours for which to wait before reminding the user to measure their BGL again. 0 indicates that the user should not be reminded.
+	 */
+	public updateRemeasureTime = (remeasureTime: number): void => {
+		this.setState({ remeasureTime });
+	};
+
+	/**
+	 * Handle what happens if the user taps “No” to the question about injecting insulin within the last 4 hours.
+	 * The card that prompts the user to answer if they have injected insulin within the last 4 hours shall be hidden and
+	 * the screen shall automatically be scrolled to the bottom so the user can see the now visible “Transfer to logbook” button.
+	 *
+	 * Steps:
+	 * 1. Set the isRecommendationDisplayed state variable to be true.
+	 * 2. Call the onRecommendationDisplayed prop callback function.
+	 * 3. As a callback to the setState() method, define a new anonymous function that calls setTimeout() with a duration of 0 milliseconds.
+	 *    When the time expires, call the scrollToEnd() method of the scrollView member, with the animated argument set to true.
+	 *    This ensures that the scroll event happens after all other events that get queued to happen at the same time,
+	 *    so all relevant elements are visible on the screen and the scroll happens reliably.
+	 */
+	public handleNoRecentInsulin = (): void => {
+		this.props.onRecentInsulinNo();
+		this.setState({ isRecommendationDisplayed: true }, (): void => {
+			this.props.onRecommendationDisplayed();
+			setTimeout((): void => {
+				this.scrollView?.scrollToEnd(true);
+			}, 0);
+		});
+	};
+
+	/**
+	 * Handle what happens when the user changes the content of the additional carbohydrates input field.
+	 *
+	 * Steps:
+	 * 1. Set the enteredCarbs state variable to the value of the enteredCarbs argument.
+	 * 2. As a callback to the setState() method, define a new anonymous function that calls the recalculateInsulin() function using
+	 *    a copy of the calculatorParams prop where the carbohydrates property has been overwritten to be
+	 *    the sum of the carbohydrates property of the calculatorParams prop and the enteredCarbs argument.
+	 * @param enteredCarbs The amount of carbohydrates in grams that has been entered in the additional carbohydrates input field.
+	 */
+	public updateCarbRecommendation = (enteredCarbs: number): void => {
+		const providedCarbs = this.props.calculatorParams.carbohydrates;
+		this.setState({ enteredCarbs }, (): void => {
+			this.recalculateInsulin({ ...this.props.calculatorParams, carbohydrates: providedCarbs + enteredCarbs });
+		});
+	};
+
+	/**
+	 * Handle what happens when the cross button by the additional carbohydrates button is tapped.
+	 *
+	 * Steps:
+	 * 1. Set both the enteredCarbs and the carbRecommendation state variables to null.
+	 * 2. As a callback to the setState() method, define a new anonymous function that calls the recalculateInsulin() function using a copy of the calculatorParams prop.
+	 */
+	public removeCarbRecommendation = (): void => {
+		this.setState({ enteredCarbs: null, carbRecommendation: null }, (): void =>
+			this.recalculateInsulin({ ...this.props.calculatorParams }),
+		);
+	};
+
+	/**
+	 * Handle what happens when the user is recommended to eat additional carbohydrates but taps the decline button.
+	 *
+	 * Steps:
+	 * 1. Call the hideAttentionModal() method.
+	 * 2. Call the removeCarbRecommendation() method.
+	 * 3. Call the carbRecommendationAnswer() prop callback function with false as argument.
+	 */
+	public declineCarbRecommendation = (): void => {
+		this.hideAttentionModal();
+		this.removeCarbRecommendation();
+		this.props.carbRecommendationAnswer(false);
+	};
+
+	/**
+	 * Handle what happens when the user is recommended to eat additional carbohydrates and they tap the accept button.
+	 *
+	 * Steps:
+	 * 1. Call the hideAttentionModal() method.
+	 * 2. Call the carbRecommendationAnswer() prop callback function with true as argument.
+	 */
+	public acceptCarbRecommendation = (): void => {
+		this.hideAttentionModal();
+		this.props.carbRecommendationAnswer(true);
+	};
+
+	/**
+	 * Used as a callback function for the Emotion component to update the state when a mood icon is tapped.
+	 *
+	 * Steps:
+	 * 1. Set the selectedMood state variable to the value of the selectedMood argument.
+	 * @param selectedMood he mood that should be selected going forward or null if no mood should be selected.
+	 */
+	public handleMoodSelected = (selectedMood: IState["selectedMood"]): void => {
+		this.setState({ selectedMood });
+	};
+
+	/**
+	 * Handle what happens when the user changes the content of the insulin input field.
+	 *
+	 * Steps:
+	 * 1. Set the enteredInsulin state variable to the value of the enteredInsulin argument.
+	 * @param enteredInsulin The amount of insulin (in units) that has been entered in the insulin input field.
+	 */
+	public updateInsulinRecommendation = (enteredInsulin: number): void => {
+		this.setState({ enteredInsulin });
+	};
+
+	/**
+	 * Handle what happens when the “Transfer to Logbook” button is pressed.
+	 * Namely, the entered data should be saved in a logbook entry and the recommendation screen should be closed.
+	 *
+	 * Steps:
+	 * 1. Unpack the enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, and showExitModal state variables
+	 * 2. Create an IResult object called carbs consisting of suggestedCarbs and enteredCarbs.
+	 * 3. Create an IResult object called Insulin consisting of insulinRecommendation and enteredInsulin.
+	 * 4. Call the transferToLogbook prop callback function with the following arguments:
+	 * 	- Set the carbs argument to the carbs IResult object.
+	 * 	- Set the insulin argument to the insulin IResult object.
+	 * 	- Set the reminder argument to the remeasureTime state variable.
+	 * 	- Set the recommendationDate argument to the recommendationDate member variable.
+	 */
+	public handleTransfer = (): void => {
+		const { enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, selectedMood } = this.state;
+		const carbs: IResult = { suggested: this.suggestedCarbs, entered: enteredCarbs };
+		const insulin: IResult = { suggested: insulinRecommendation, entered: enteredInsulin };
+
+		this.props.transferToLogbook(carbs, insulin, remeasureTime, this.recommendationDate, selectedMood);
+	};
+
+	/**
+	 * Get the attention message that should be displayed for the user to draw their attention to noteworthy circumstances regarding their current blood glucose level.
+	 *
+	 * Steps:
+	 * 1. Unpack calculatorParams and latestLogbookFrom6Hours from the props.
+	 * 2. Unpack currentBGL and activity from calculatorparams.
+	 * 3. Get bgLevel, the categorisation of the blood glucose level, by calling the getBGLevel() function with the currentBGL and latestLogbookFrom6Hours as arguments.
+	 * 4. Return the attention message that is returned when calling getAttentionMessage() using bgLevel and activity as arguments.
+	 * @returns A string describing what the user needs to be aware of regarding their current blood glucose level.
+	 * If there is nothing noteworthy, null will be returned instead.
+	 */
+	public getBGLevelAttentionMessage = (): string | null => {
+		const { calculatorParams, latestLogbookFrom6Hours } = this.props;
+		const { currentBGL, activity } = calculatorParams;
+		const bgLevel = getBGLevel(currentBGL, latestLogbookFrom6Hours);
+		return getAttentionMessage(bgLevel, activity);
+	};
+
+	/**
+	 * Get the initial value for the remeasurement reminder time slider depending on the user’s entered information.
+	 *
+	 * Steps:
+	 * 1. Unpack calculatorParams, userReminder, and latestLogbookFrom6Hours from the props.
+	 * 2. Unpack currentBGL, activity,  and carbohydrates from calculatorParams.
+	 * 3. Get bgLevel, the categorisation of the blood glucose level, by calling the getBGLevel() function with the currentBGL and latestLogbookFrom6Hours as arguments.
+	 * 4. Return the attention message that is returned when calling getReminder() using bgLevel, carbohydrates, userReminder, and activity as arguments.
+	 * @returns The time interval in hours that should be used as the initial value for the remeasurement reminder time slider.
+	 */
+	public getBGLevelRemeasurementReminder = (): number => {
+		const { calculatorParams, userReminder, latestLogbookFrom6Hours } = this.props;
+		const { currentBGL, activity, carbohydrates } = calculatorParams;
+		const bgLevel = getBGLevel(currentBGL, latestLogbookFrom6Hours);
+
+		return getReminder(bgLevel, carbohydrates, userReminder, activity);
+	};
+
+	/**
+	 * Get the attention message that should be displayed to the user to let them know that the insulin recommendation that
+	 * is being displayed to them was limited by the maximum insulin threshold.
+	 *
+	 * Steps:
+	 * 1. Unpack the wasLimited and activityReduction state variables.
+	 * 2. Return the result from calling getLimitationMessage() with wasLimited and activityReduction as arguments.
+	 * @returns A message to inform the user how the insulin recommendation was limited. If there is no limitation attention message, null will be returned instead.
+	 */
+	public getLimitationAttentionMessage = (): string | null => {
+		const { wasLimited, activityReduction } = this.state;
+
+		return getLimitationMessage(wasLimited, activityReduction);
+	};
+
+	/** Render a JSX element for displaying the insulin recommendation screen. */
+	public render(): JSX.Element {
+		if (this.hasError) {
+			return <View style={styles.container} />;
+		}
+
+		const {
+			activeInsulin,
+			recommendationModal,
+			carbRecommendation: carbRecommendationProp,
+			enteredCarbs,
+			enteredInsulin,
+			insulinRecommendation,
+			activityReduction,
+			isRecommendationDisplayed,
+		} = this.state;
+
+		const {
+			BloodGlucose: BGValueTestID,
+			BloodKetone: BKValueTestID,
+			ActiveInsulin: ActiveInsulinValueTestID,
+		} = InfoBarTestIds.Value;
+		const {
+			ActiveInsulin: ActiveInsulinUnitTestID,
+			BloodGlucose: BGUnitTestID,
+			BloodKetone: BKUnitTestID,
+		} = InfoBarTestIds.Unit;
+
+		const carbRecommendation = carbRecommendationProp !== null ? Math.round(carbRecommendationProp) : null;
+		const recommendedCarbs = enteredCarbs ?? carbRecommendation;
+		const foodBorderColor = recommendedCarbs !== null && recommendedCarbs > 0 ? colors.teal : colors.dustyDarkBlue;
+
+		const { calculatorParams, bloodGlucoseUnit, currentBKL, bloodKetoneUnit } = this.props;
+		const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
+		const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
+		const displayedBKL =
+			currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
+		return (
+			<>
+				<KeyboardAwareScrollView
+					testID={RecommendationScreenTestIds.RecommendationScrollView}
+					enableResetScrollToCoords={false}
+					style={styles.container}
+					ref={(view): void => {
+						if (view !== null) {
+							this.scrollView = view;
+						}
+					}}
+				>
+					<Text style={styles.header}>{t(`Insulin recommendation`)}</Text>
+					<InfoBars
+						label={t(`Active Insulin`)}
+						value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null}
+						unit={t(`units`)}
+						showNullAsDash={false}
+						testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}
+					/>
+					<InfoBars
+						label={t(`Blood Glucose Level`)}
+						value={displayedBGL}
+						unit={this.props.bloodGlucoseUnit}
+						showNullAsDash={true}
+						testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}
+					/>
+					<InfoBars
+						label={t(`Blood Ketone Level`)}
+						value={displayedBKL}
+						unit={this.props.bloodKetoneUnit}
+						showNullAsDash={true}
+						testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}
+					/>
+					<View style={[styles.carbsBorder, { borderColor: foodBorderColor }]}>
+						<RecommendedCarbs
+							enteredCarbs={`${providedCarbs}`}
+							changedRecommendedCarbs={this.updateCarbRecommendation}
+							recommendedCarbs={`${recommendedCarbs}`}
+							removeRecommendedCarbs={this.removeCarbRecommendation}
+						/>
+					</View>
+					{this.props.calculatorParams.activity && this.props.activityDisplayProps && (
+						<Activity
+							activity={this.props.calculatorParams.activity}
+							activityType={this.props.activityDisplayProps.activityType}
+							activityTitle={this.props.activityDisplayProps.activityTitle}
+							activityReduction={activityReduction}
+						/>
+					)}
+					<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={this.state.remeasureTime} />
+					{!isRecommendationDisplayed ? (
+						<RecentInsulin
+							onRecentInsulinYes={this.props.onRecentInsulinYes}
+							onRecentInsulinNo={this.handleNoRecentInsulin}
+						/>
+					) : (
+						<RecommendedInsulin
+							injectionMethod={this.props.injectionMethod}
+							insulinRecommendation={insulinRecommendation}
+							enteredInsulin={enteredInsulin}
+							activityReduction={activityReduction}
+							updateRecommendedInsulin={this.updateInsulinRecommendation}
+						/>
+					)}
+					<TransferToLogbook visible={isRecommendationDisplayed} transfer={this.handleTransfer} />
+					<Emotion moodSelected={this.handleMoodSelected} currentMood={this.state.selectedMood} />
+					<RecommendationModal
+						isVisible={recommendationModal || this.state.onlyShowLimitationMessage}
+						onlyShowLimitationMessage={this.state.onlyShowLimitationMessage}
+						suggestedCarbohydrates={carbRecommendationProp}
+						attentionMessage={this.getBGLevelAttentionMessage()}
+						limitationMessage={this.getLimitationAttentionMessage()}
+						onClickOkButton={this.hideAttentionModal}
+						onAcceptCarbohydrates={this.acceptCarbRecommendation}
+						onDeclineCarbohydrates={this.declineCarbRecommendation}
+					/>
+				</KeyboardAwareScrollView>
+
+				<ExitModal
+					isVisible={this.state.showExitModal}
+					title={t(`Save data before closing?`)}
+					message={t(`Your saved data will be used for future calculations.`)}
+					textFirstOption={t(`Save to logbook`)}
+					textSecondOption={t(`Close calculation`)}
+					firstOption={this.onPressTransferExitModal}
+					secondOption={this.onPressCloseExitModal}
+					onClose={this.onPressHideExitModal}
+					onModalHide={this.onExitModalDidHide}
+				/>
+
+				{isRecommendationDisplayed ? (
+					<TimeoutModal
+						isVisible={this.state.showTimeoutModal}
+						title={Messages.TimeoutPrompTitle()}
+						message={Messages.TimeoutRecommendationVisible(this.recommendationDate)}
+						textFirstOption={t(`Yes, save to logbook`)}
+						textSecondOption={t(`No, return to dashboard`)}
+						firstOption={this.onPressTransferTimeoutModal}
+						secondOption={this.onPressCloseCalculationTimeoutModal}
+						onModalHide={this.onTimeoutModalDidHide}
+					/>
+				) : (
+					<TimeoutModal
+						isVisible={this.state.showTimeoutModal}
+						title={Messages.TimeoutPrompTitle()}
+						message={Messages.TimeoutRecommendationNotVisible()}
+						textFirstOption={t(`Start new calculation`)}
+						textSecondOption={t(`Return to dashboard`)}
+						firstOption={this.onPressRestartCalculationTimeoutModal}
+						secondOption={this.onPressCloseCalculationTimeoutModal}
+						onModalHide={this.onTimeoutModalDidHide}
+					/>
+				)}
+			</>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		paddingHorizontal: 18,
+		backgroundColor: colors.darkBlue,
+	},
+	limitationModalContainer: {
+		...StyleSheet.absoluteFillObject,
+		justifyContent: `center`,
+		backgroundColor: colors.transparentBlack,
+	},
+	carbsBorder: {
+		borderWidth: 1,
+		borderRadius: 5,
+		padding: 16,
+	},
+	header: {
+		...FONTS.Poppins.medium_Base,
+		color: colors.dustyBlue,
+		marginBottom: 22,
+		textAlign: `center`,
+	},
+});