@hedia/recommendation-screen 2.1.75 → 2.2.0-alpha.1

package/dist/src/RecommendationScreen.js

@@ -0,0 +1,522 @@
+import React from "react";
+import { AppState, BackHandler, Dimensions, LogBox, ScrollView, StatusBar, StyleSheet, View, } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { colors } from "./utils/Constants";
+import ForecastInfoBar from "./components/ForecastInfoBar";
+import Header from "./components/Header";
+import InfoBars, { infoStyles } from "./components/InfoBars";
+import RecentInsulin from "./components/RecentInsulin";
+import RecommendedCarbs from "./components/RecommendedCarbs";
+import RecommendedInsulin from "./components/RecommendedInsulin";
+import Remeasure from "./components/Remeasure";
+import * as Calculator from "@hedia/recommendation-calculator";
+import { Milliseconds, } from "@hedia/types";
+import { I18nProvider } from "@lingui/react";
+import Emotion from "./components/mood/Emotion";
+import SaveButton from "./components/SaveButton";
+import { t } from "@lingui/macro";
+import Activity from "./components/activity/Activity";
+import LimitationMessage from "./components/LimitationMessage";
+import RecommendationModal from "./components/RecommendationModal";
+import TwoOptionModal, { modalStyle } from "./components/TwoOptionModal";
+import { changeLanguage, i18n } from "./locale/i18nUtils";
+import { Testing } from "./types/enum";
+import { Messages } from "./utils/AttentionMessages";
+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`]);
+/**
+ * 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 default class RecommendationScreen extends React.Component {
+    /** Reference to the timer that prompts the user to make a new calculation after 15 minutes. */
+    timer;
+    /**
+     * 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.
+     */
+    suggestedCarbs;
+    /**
+     * 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.
+     */
+    hasError = false;
+    /** The timestamp when the current recommendation was made. For determining if the recommendation is too old and should be hidden from the user. */
+    recommendationDate;
+    /**
+     * 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.
+     */
+    scrollView;
+    /**
+     * A reference to the eventSubscription that'll be returned by AppState.addEventListener().
+     * It'll allow us to later remove the subscription.
+     */
+    appStateSubscription;
+    /**
+     * A reference to the eventSubscription that'll be returned by BackHandler.addEventListener().
+     * It'll allow us to later remove the subscription.
+     */
+    backHandlerSubscription;
+    /**
+     * 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.
+     * 	- 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 showExitModal, showLimitationMessage, showTimeoutModal to be false.
+     * 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) {
+        super(props);
+        try {
+            validateParams(props);
+            this.recommendationDate = new Date(global.Date.now());
+            changeLanguage(props.language);
+            const { recentBoluses } = props.calculatorParams;
+            const { bolus, carbRecommendation, activityReduction, wasLimited, activeInsulin } = Calculator.calculateRecommendation(props.calculatorParams);
+            this.suggestedCarbs = carbRecommendation;
+            this.state = {
+                remeasureTime: this.getBGLevelRemeasurementReminder(),
+                isRecommendationDisplayed: recentBoluses?.length !== 0,
+                insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
+                wasLimited,
+                activityReduction,
+                carbRecommendation,
+                activeInsulin,
+                enteredCarbs: null,
+                enteredInsulin: null,
+                selectedMood: null,
+                recommendationModal: wasLimited || !!Math.round(carbRecommendation) || !!this.getBGLevelAttentionMessage(),
+                showExitModal: false,
+                showLimitationMessage: false,
+                showTimeoutModal: false,
+            };
+            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.
+     */
+    componentDidMount() {
+        if (!this.hasError) {
+            this.appStateSubscription = AppState.addEventListener(`change`, this.handleAppStateChange);
+            this.backHandlerSubscription = BackHandler.addEventListener(`hardwareBackPress`, this.onBackHandlerPress);
+        }
+    }
+    /**
+     * 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.
+     */
+    componentWillUnmount() {
+        if (this.timer !== undefined) {
+            clearTimeout(this.timer);
+        }
+        this.appStateSubscription?.remove();
+        this.backHandlerSubscription?.remove();
+    }
+    /**
+     * 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.
+     */
+    handleAppStateChange = (nextAppState) => {
+        const time = this.recommendationDate.getTime();
+        const isOlderThan15Minutes = global.Date.now() - time > Milliseconds.Minute * 15;
+        if (nextAppState === `active` && isOlderThan15Minutes) {
+            this.showTimeoutModal();
+        }
+    };
+    /**
+     * Steps:
+     * 1. Set the showTimeoutModal state variable to be true. Use a callback function to call the showBolusBar prop callback function with false as argument when the state has been updated.
+     * */
+    showTimeoutModal = () => {
+        this.setState({ showTimeoutModal: true }, () => this.props.showBolusBar(!this.state.showTimeoutModal));
+    };
+    /**
+     * 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.
+     */
+    recalculateInsulin = (calculatorParams) => {
+        const { bolus, wasLimited, activityReduction } = Calculator.calculateRecommendation(calculatorParams);
+        this.setState({
+            insulinRecommendation: Utils.roundValue(bolus, this.props.injectionMethod),
+            enteredInsulin: null,
+            wasLimited,
+            activityReduction,
+            showLimitationMessage: 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. When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+     * 2. Else:
+     *  	- Call the exitCallback prop callback function.
+     */
+    onExit = () => {
+        if (this.state.isRecommendationDisplayed) {
+            this.setState({ showExitModal: true }, () => this.props.showBolusBar(!this.state.showExitModal));
+        }
+        else {
+            this.props.exitCallback();
+        }
+    };
+    /**
+     * Callback to be executed by the back handler listener.
+     *
+     * Steps:
+     * 1. Call the onExist method
+     * 2. Return true so that the default behaviour is overwritten.
+     */
+    onBackHandlerPress = () => {
+        this.onExit();
+        return true;
+    };
+    /**
+     * Hide the modal that shows attention messages.
+     *
+     * Steps:
+     * 1. Set the recommendationModal state variable to false.
+     */
+    hideAttentionModal = () => {
+        this.setState({ recommendationModal: false });
+    };
+    /**
+     * Hide the modal that shows attention messages.
+     *
+     * Steps:
+     * 1. Set the showLimitationMessage state variable to false.
+     */
+    hideLimitationMessage = () => {
+        this.setState({ showLimitationMessage: false });
+    };
+    /**
+     * Hide the exit modal. To be used when the user closes the modal directly or in some way exits the recommendation screen.
+     *
+     * Steps:
+     * 1. Set the showExitModal state variable to false.
+     *    When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showExitModal state variable as argument.
+     */
+    hideExitModal = () => {
+        this.setState({ showExitModal: false }, () => this.props.showBolusBar(!this.state.showExitModal));
+    };
+    /**
+     * Hide the modal that warns the user that their recommendation is old.
+     *
+     * Steps:
+     * 1. Set the showTimeoutModal state variable to false.
+     * 	  When the state has been updated, call the showBolusBar prop callback function with the inverse value of the showTimeoutModal state variable as argument.
+     */
+    hideTimeoutModal = () => {
+        this.setState({ showTimeoutModal: false }, () => this.props.showBolusBar(!this.state.showTimeoutModal));
+    };
+    /**
+     * 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.
+     */
+    updateRemeasureTime = (remeasureTime) => {
+        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. 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.
+     */
+    handleNoRecentInsulin = () => {
+        this.setState({ isRecommendationDisplayed: true }, () => {
+            setTimeout(() => {
+                this.scrollView?.scrollToEnd({ animated: 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.
+     */
+    updateCarbRecommendation = (enteredCarbs) => {
+        const providedCarbs = this.props.calculatorParams.carbohydrates;
+        this.setState({ enteredCarbs }, () => {
+            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.
+     */
+    removeCarbRecommendation = () => {
+        this.setState({ enteredCarbs: null, carbRecommendation: null }, () => 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.
+     */
+    declineCarbRecommendation = () => {
+        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.
+     */
+    acceptCarbRecommendation = () => {
+        this.hideAttentionModal();
+        this.props.carbRecommendationAnswer(true);
+    };
+    /**
+     * Handles what happens when the user hits the “close calculation”-button on the exit modal.
+     *
+     * Steps:
+     * 1. If the showExitModal state variable is true then call the hideExitModal() method. Otherwise, call the hideTimeoutModal() method
+     * 2. Call the closeCalculationCallback prop callback function.
+     */
+    closeCalculation = () => {
+        this.state.showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
+        this.props.closeCalculationCallback();
+    };
+    /**
+     * Close the current recommendation and start a new bolus calculation.
+     *
+     * Steps:
+     * 1. Call the hideTimeoutModal() method.
+     * 2. Call the restartCalculation prop callback function.
+     */
+    restartCalculation = () => {
+        this.hideTimeoutModal();
+        this.props.restartCalculation();
+    };
+    /**
+     * 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.
+     */
+    handleMoodSelected = (selectedMood) => {
+        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.
+     */
+    updateInsulinRecommendation = (enteredInsulin) => {
+        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. If showExitModal is true then call the hideExitModal() method. otherwise call the hideTimeoutModal() method.
+     * 5. 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.
+     */
+    handleTransfer = () => {
+        const { enteredCarbs, enteredInsulin, insulinRecommendation, remeasureTime, showExitModal, selectedMood } = this.state;
+        const carbs = { suggested: this.suggestedCarbs, entered: enteredCarbs };
+        const insulin = { suggested: insulinRecommendation, entered: enteredInsulin };
+        showExitModal ? this.hideExitModal() : this.hideTimeoutModal();
+        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.
+     */
+    getBGLevelAttentionMessage = () => {
+        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.
+     */
+    getBGLevelRemeasurementReminder = () => {
+        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.
+     */
+    getLimitationAttentionMessage = () => {
+        const { wasLimited, activityReduction } = this.state;
+        return getLimitationMessage(wasLimited, activityReduction);
+    };
+    /** Render a JSX element for displaying the insulin recommendation screen. */
+    render() {
+        if (this.hasError) {
+            return <View style={containerStyles.container}/>;
+        }
+        const { activeInsulin, activityReduction, carbRecommendation: carbRecommendationProp, enteredCarbs, enteredInsulin, insulinRecommendation, isRecommendationDisplayed, recommendationModal, remeasureTime, selectedMood, showExitModal, showLimitationMessage, showTimeoutModal, } = this.state;
+        const { BloodGlucose: BGValueTestID, BloodKetone: BKValueTestID, ActiveInsulin: ActiveInsulinValueTestID, ForecastedGlucose: FGValueTestID, } = InfoBarTestIds.Value;
+        const { ActiveInsulin: ActiveInsulinUnitTestID, BloodGlucose: BGUnitTestID, BloodKetone: BKUnitTestID, ForecastedGlucose: FGUnitTestID, } = InfoBarTestIds.Unit;
+        const carbRecommendation = carbRecommendationProp !== null ? Math.round(carbRecommendationProp) : null;
+        const recommendedCarbs = enteredCarbs ?? carbRecommendation;
+        const isModalOpen = showExitModal || showLimitationMessage || showTimeoutModal;
+        const { activityDisplayProps, bloodGlucoseUnit, bloodKetoneUnit, calculatorParams, currentBKL, injectionMethod, language, onRecentInsulinYes, forecastedGlucose, forecastedTime, } = this.props;
+        const { activity, currentBGL, carbohydrates: providedCarbs } = calculatorParams;
+        const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
+        const displayedBKL = currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
+        return (<I18nProvider language={language} i18n={i18n}>
+				<KeyboardAwareScrollView scrollEnabled={!isModalOpen} style={containerStyles.container}>
+					<StatusBar backgroundColor={colors.darkBlue}/>
+					<ScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} style={containerStyles.container} ref={(view) => {
+                if (view !== null) {
+                    this.scrollView = view;
+                }
+            }}>
+						<Header exitCallback={this.onExit}/>
+						<InfoBars label={i18n._(t `Active Insulin`)} value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null} unit={i18n._(t `units`)} showNullAsDash={false} testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}/>
+						{forecastedGlucose ? (<ForecastInfoBar label={i18n._(t `Forecasted Glucose`)} value={forecastedGlucose} unit={bloodGlucoseUnit} forecastedTime={forecastedTime} testID={{ unitID: FGUnitTestID, valueID: FGValueTestID }}/>) : (<InfoBars label={i18n._(t `Blood Glucose Level`)} value={displayedBGL} unit={bloodGlucoseUnit} showNullAsDash={true} testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}/>)}
+						<InfoBars label={i18n._(t `Blood Ketone Level`)} value={displayedBKL} unit={bloodKetoneUnit} showNullAsDash={true} testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}/>
+						<View style={containerStyles.calcContainer}>
+							<View style={containerStyles.calcMargin}>
+								<View style={containerStyles.calcBorder}>
+									<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
+								</View>
+							</View>
+						</View>
+						{activity && activityDisplayProps && (<Activity activity={activity} activityType={activityDisplayProps.activityType} activityTitle={activityDisplayProps.activityTitle} activityReduction={activityReduction}/>)}
+						<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={remeasureTime}/>
+						{!isRecommendationDisplayed ? (<RecentInsulin onRecentInsulinYes={onRecentInsulinYes} onRecentInsulinNo={this.handleNoRecentInsulin}/>) : (<RecommendedInsulin injectionMethod={injectionMethod} insulinRecommendation={insulinRecommendation} enteredInsulin={enteredInsulin} activityReduction={activityReduction} updateRecommendedInsulin={this.updateInsulinRecommendation}/>)}
+						<Emotion moodSelected={this.handleMoodSelected} currentMood={selectedMood}/>
+						<SaveButton visible={isRecommendationDisplayed} transfer={this.handleTransfer}/>
+						<RecommendationModal isVisible={recommendationModal} suggestedCarbohydrates={carbRecommendationProp} attentionMessage={this.getBGLevelAttentionMessage()} limitationMessage={this.getLimitationAttentionMessage()} onClickOkButton={this.hideAttentionModal} onAcceptCarbohydrates={this.acceptCarbRecommendation} onDeclineCarbohydrates={this.declineCarbRecommendation}/>
+					</ScrollView>
+					{/* Modals */}
+					{showExitModal && (<TwoOptionModal title={i18n._(t `Save data before closing?`)} message={i18n._(t `Your saved data will be used for future calculations.`)} textFirstOption={i18n._(t `Save to logbook`)} textSecondOption={i18n._(t `Close calculation`)} isCancelable={true} rowAsButtonLayout={true} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>)}
+					{showLimitationMessage && (<View style={modalStyle.container}>
+							<LimitationMessage limitationMessage={this.getLimitationAttentionMessage()} onPressNextButton={this.hideLimitationMessage}/>
+						</View>)}
+					{showTimeoutModal &&
+                (isRecommendationDisplayed ? (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={i18n._(t `Yes, save to logbook`)} textSecondOption={i18n._(t `No, return to dashboard`)} rowAsButtonLayout={false} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={i18n._(t `Start new calculation`)} textSecondOption={i18n._(t `Return to dashboard`)} rowAsButtonLayout={false} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>))}
+				</KeyboardAwareScrollView>
+			</I18nProvider>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+const containerStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: colors.darkBlue,
+    },
+    calcContainer: {
+        flex: 1,
+    },
+    calcMargin: {
+        flex: 1,
+        marginBottom: 0,
+        marginHorizontal: width / 17,
+        marginVertical: `3%`,
+    },
+    calcBorder: {
+        ...infoStyles.border,
+    },
+});

package/dist/src/assets/assets/icons/Edit.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+
+const EditIcon = (props: SvgProps) => (
+	<Svg width="17" height="17" viewBox="0 0 17 17" fill="none" {...props}>
+		<Path
+			fillRule="evenodd"
+			clip-rule="evenodd"
+			d="M5.66373 11.2399L5.97672 9.34945L10.659 4.66714L12.2365 6.2446L7.55418 10.9269L5.66373 11.2399Z"
+			fill="#fff"
+		/>
+		<Path
+			opacity="0.6"
+			fillRule="evenodd"
+			clip-rule="evenodd"
+			d="M8.521 16.125C12.8357 16.125 16.3335 12.6272 16.3335 8.3125C16.3335 3.99778 12.8357 0.5 8.521 0.5C4.20627 0.5 0.708496 3.99778 0.708496 8.3125C0.708496 12.6272 4.20627 16.125 8.521 16.125Z"
+			stroke="#fff"
+			strokeWidth="2"
+		/>
+	</Svg>
+);
+export default EditIcon;

package/dist/src/assets/assets/icons/X.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+
+const XIcon = (props: SvgProps) => (
+	<Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z"
+			fill={"#8388C8"}
+		/>
+	</Svg>
+);
+export default XIcon;

package/dist/src/assets/icons/Edit.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const EditIcon: (props: SvgProps) => JSX.Element;
+export default EditIcon;

package/dist/src/assets/icons/Edit.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+const EditIcon = (props) => (<Svg width="17" height="17" viewBox="0 0 17 17" fill="none" {...props}>
+		<Path fillRule="evenodd" clip-rule="evenodd" d="M5.66373 11.2399L5.97672 9.34945L10.659 4.66714L12.2365 6.2446L7.55418 10.9269L5.66373 11.2399Z" fill="#fff"/>
+		<Path opacity="0.6" fillRule="evenodd" clip-rule="evenodd" d="M8.521 16.125C12.8357 16.125 16.3335 12.6272 16.3335 8.3125C16.3335 3.99778 12.8357 0.5 8.521 0.5C4.20627 0.5 0.708496 3.99778 0.708496 8.3125C0.708496 12.6272 4.20627 16.125 8.521 16.125Z" stroke="#fff" strokeWidth="2"/>
+	</Svg>);
+export default EditIcon;

package/dist/src/assets/icons/X.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const XIcon: (props: SvgProps) => JSX.Element;
+export default XIcon;

package/dist/src/assets/icons/X.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+const XIcon = (props) => (<Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<Path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill={"#8388C8"}/>
+	</Svg>);
+export default XIcon;