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

package/dist/src/components/RecommendationModal.js

@@ -0,0 +1,226 @@
+import { t } from "@lingui/macro";
+import * as React from "react";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import ReactNativeModal from "react-native-modal";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import LimitationMessage from "./LimitationMessage";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+const { RecommendationModalTestIds } = Testing.Id;
+/**
+ * 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 {
+    /**
+     * 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) {
+        super(props);
+        this.state = {
+            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.
+     */
+    onPressNextButton = () => {
+        const { attentionMessage, suggestedCarbohydrates } = this.props;
+        const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
+        return isPageVisible ? 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.
+     */
+    recommendationButtons = () => {
+        return (<View style={stylesModal.recommendationButtonsContainer}>
+				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
+					<TextRegular style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</TextRegular>
+				</TouchableOpacity>
+				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
+					<TextRegular style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</TextRegular>
+				</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
+     */
+    recommendCarbohydrates = (suggestedCarbohydrates) => {
+        const displayCarbs = Math.round(suggestedCarbohydrates);
+        return (<React.Fragment>
+				<View style={stylesModal.innerView}>
+					<View style={stylesModal.recommendationRow}>
+						<TextRegular style={stylesModal.recommendEatingText}>
+							{i18n._(t `We recommend eating an additional:`)}
+						</TextRegular>
+					</View>
+					<View style={stylesModal.suggestedContainer}>
+						<TextRegular style={stylesModal.textCenter}>
+							<TextBold style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>
+								{`${displayCarbs} `}
+							</TextBold>
+							<TextRegular style={stylesModal.carbohydrateText}>
+								{i18n._(t `grams of carbohydrates`)}
+							</TextRegular>
+						</TextRegular>
+					</View>
+					<View style={stylesModal.recommendationRow}>
+						<TextRegular style={stylesModal.recommendEatingText}>
+							{i18n._(t `Instead of taking insulin`)}
+						</TextRegular>
+					</View>
+				</View>
+				<View style={stylesModal.addToCalculationContainer}>
+					<TextRegular style={stylesModal.addToCalculation}>
+						{i18n._(t `Would you like to add this to your current calculation?`)}
+					</TextRegular>
+					{this.recommendationButtons()}
+				</View>
+			</React.Fragment>);
+    };
+    /**
+     * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
+     */
+    secondPage = () => {
+        const { attentionMessage, suggestedCarbohydrates } = this.props;
+        const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
+        return (<React.Fragment>
+				<View style={stylesModal.container}>
+					<View style={stylesModal.titleContainer}>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
+					</View>
+					<TextRegular style={stylesModal.textMessage}>{attentionMessage}</TextRegular>
+					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
+				</View>
+				{willRecommendCarbs ? null : (<View style={stylesModal.containerAcceptButton}>
+						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
+							<TextRegular style={stylesModal.buttonText}>{i18n._(t `OK`)}</TextRegular>
+						</TouchableOpacity>
+					</View>)}
+			</React.Fragment>);
+    };
+    /**
+     * @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.
+     */
+    firstPage = () => {
+        const { limitationMessage } = this.props;
+        return <LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
+    };
+    /**
+     * @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.
+     */
+    render() {
+        const { isVisible } = this.props;
+        const { firstPageVisible } = this.state;
+        return (<ReactNativeModal isVisible={isVisible} style={stylesModal.modalStyle}>
+				{firstPageVisible ? this.firstPage() : this.secondPage()}
+			</ReactNativeModal>);
+    }
+}
+const { height, width } = Dimensions.get(`screen`);
+const buttonHeight = height / 20;
+const buttonWidth = width / 2.5;
+const buttonFontSize = width / 22;
+const buttonBorderRadius = height / 30;
+const buttonBorderWidth = height / 500;
+const sugestionFontSize = width / 19;
+const recommendEatingFontSize = height / 45;
+const textFontSize = width / 20;
+const titleFontSize = width / 13;
+/** @internal */
+export const stylesModal = StyleSheet.create({
+    modalStyle: {
+        margin: 0,
+        backgroundColor: colors.darkBlue,
+    },
+    container: {
+        flex: 4,
+        justifyContent: `center`,
+        paddingHorizontal: `4%`,
+    },
+    containerAcceptButton: {
+        flex: 1,
+        justifyContent: `flex-start`,
+    },
+    titleContainer: { marginBottom: `5%` },
+    recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
+    textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
+    textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
+    buttonText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
+    addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
+    innerView: {
+        alignContent: `center`,
+        paddingVertical: `5%`,
+        paddingHorizontal: `3%`,
+        marginTop: `5%`,
+        borderRadius: height / 80,
+        borderWidth: height / 300,
+        borderColor: colors.teal,
+    },
+    suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
+    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
+    textCenter: { textAlign: `center` },
+    recommendEatingText: {
+        color: colors.dustyBlue,
+        fontSize: recommendEatingFontSize,
+        textAlign: `center`,
+    },
+    carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
+    addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
+    recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
+    affirmativeCarbsText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
+    negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsButton: {
+        marginTop: `2%`,
+        borderRadius: buttonBorderRadius,
+        borderWidth: buttonBorderWidth,
+        borderColor: colors.teal,
+        width: buttonWidth,
+        height: buttonHeight,
+        alignSelf: `center`,
+        justifyContent: `center`,
+        marginRight: `2%`,
+    },
+    negativeCarbsButton: {
+        marginTop: `2%`,
+        borderRadius: buttonBorderRadius,
+        borderWidth: buttonBorderWidth,
+        borderColor: `white`,
+        width: buttonWidth,
+        height: buttonHeight,
+        alignSelf: `center`,
+        justifyContent: `center`,
+        marginLeft: `2%`,
+    },
+    okButton: {
+        marginTop: `6%`,
+        borderRadius: buttonBorderRadius,
+        borderWidth: buttonBorderWidth,
+        borderColor: colors.teal,
+        width: buttonWidth,
+        height: buttonHeight,
+        alignSelf: `center`,
+        justifyContent: `center`,
+    },
+});

package/{lib/typescript → dist/src}/components/RecommendedCarbs.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { Testing } from "../types/enum";
-declare const RecommendedCarbsTestIds: typeof Testing.Id.RecommendedCarbsTestIds;
 export interface ICalculationRow {
     label: string;
     value: string;
@@ -93,5 +92,3 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
      */
     render(): JSX.Element;
 }
-export {};
-//# sourceMappingURL=RecommendedCarbs.d.ts.map

package/dist/src/components/RecommendedCarbs.js

@@ -0,0 +1,251 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import EditIcon from "../assets/icons/Edit";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { CarbohydrateLimitError } from "../utils/RecommendationError";
+import Icon from "./Icon";
+import { infoStyles } from "./InfoBars";
+import InvisibleNumberInput from "./InvisibleNumberInput";
+import LineSeparator from "./LineSeparator";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+const { RecommendedCarbsTestIds } = Testing.Id;
+/**
+ * The contents of the RecommendedCarbs component may vary quite a bit depending on data that was entered by the user
+ * and on the result of the recommendation calculation.
+ * For instance the part of the component that displays any recommendation of eating additional carbohydrates
+ * (composed by the renderRecommendedCarbs() method) will only be visible if it is actually recommended that the user eats additional carbohydrates.
+ */
+export default class RecommendedCarbs extends React.Component {
+    /** Initialise the state partialInput variable with undefined */
+    state = {
+        partialInput: undefined,
+    };
+    /**
+     * Function taking no arguments and returning no value.
+     * Will be bound to the function that activates input for InvisibleNumberInput when that component has been mounted.
+     */
+    callbackInput;
+    /**
+     * Handle what should happen when the additional carbohydrates amount has been pressed.
+     *  Uses the InvisibleNumberInput child component to enable the user to input the amount of additional carbohydrates that they are taking.
+     */
+    showTextInput = () => {
+        this.callbackInput?.();
+    };
+    /**
+     * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+     *
+     * Steps:
+     * 1. Save partialInput argument to the partialInput state variable.
+     * @param partialInput The contents of the input field.
+     */
+    handlePartialInput = (partialInput) => {
+        this.setState({
+            partialInput,
+        });
+    };
+    /**
+     * Handle what happens when input in the InvisibleNumberInput child component is completed.
+     *
+     * Steps:
+     * 1. If the carbs argument is greater than or equal to 0:
+     * 	- If the carbs argument is greater than 300:
+     * 		- Set the partialInput state variable to the value of the recommemdedCarbs prop.
+     * 		- Return - An alert message with the message of CarbohydrateLimitError() and with an OK button for closing it.
+     * 	- Use carbs as argument to call the changedRecommendedCarbs prop callback function.
+
+     * @param carbs The numerical value of the input field at completion.
+     * @returns void
+     */
+    handleChangedCarbs = (carbs) => {
+        if (carbs >= 0) {
+            if (carbs > 300) {
+                this.setState({ partialInput: this.props.recommendedCarbs });
+                return Alert.alert(i18n._(t `Attention`), CarbohydrateLimitError().message, [
+                    {
+                        text: i18n._(t `OK`),
+                    },
+                ]);
+            }
+            this.props.changedRecommendedCarbs(carbs);
+        }
+    };
+    /**
+     * Render the section of the component that displays the extra carbs that the user should eat
+     * and allows the user to change the contents to indicate how many extra carbs they are actually going to eat.
+     *
+     * Steps:
+     * 1. Set a variable named shownCarbs to the partialInput state if it is set, or to the recommendedCarbs prop rounded to the nearest integer otherwise.
+     * 2. Set a variable named totalCarbs to the sum of the enteredCarbs prop and shownCarbs rounded to the nearest integer.
+     * 3. Compose and return a JSX element consisting of the following sub-components
+     * 	- A cancel button to remove recommended carbs from the calculation - When tapped, call the removeRecommendedCarbs prop callback function.
+     * 	- The text from the shownCarbs variable from step 1 - When tapped, call the showTextInput() method.
+     * 	- Use renderRow() to display the value of totalCarbs.
+     * 	- InvisibleNumberInput for showing the keyboard to enable the user to enter a number.
+     */
+    renderRecommendedCarbs = () => {
+        const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
+        const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
+        return (<>
+				<LineSeparator color={colors.fadeBlue}/>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
+							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
+						</TouchableOpacity>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</TextBold>
+					</View>
+				</View>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</TextBold>
+					</View>
+					<View style={calculationStyles.valueUnitContainer}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
+							<View style={calculationStyles.valueContainer}>
+								<TextBold testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: colors.teal }}>
+									{shownCarbs}
+								</TextBold>
+							</View>
+							<View style={[calculationStyles.unitContainer]}>
+								<View style={calculationStyles.editIconContainer}>
+									<EditIcon />
+								</View>
+								<TextRegular style={{ ...calculationStyles.units, color: colors.teal }}>
+									{i18n._(t `grams`)}
+								</TextRegular>
+							</View>
+						</TouchableOpacity>
+					</View>
+				</View>
+				<LineSeparator color={colors.fadeBlue}/>
+				{this.renderRow({
+                label: i18n._(t `Total`),
+                value: totalCarbs.toString(),
+                units: i18n._(t `grams`),
+            }, RecommendedCarbsTestIds.TotalCarbs)}
+				<InvisibleNumberInput testID={RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
+			</>);
+    };
+    /**
+     * Display a row of information for the user. Specifically used to display the amount of carbohydrates that the user has entered.
+     * @param row The values to display
+     * @param testID Id used for component testing
+     * @returns A JSX element to display 3 strings on the screen: label, value, and a unit.
+     */
+    renderRow = (row, testID) => {
+        return (<View style={calculationStyles.borderContainer}>
+				<View style={calculationStyles.rowContainer}>
+					<TextBold style={calculationStyles.rowLabel}>{row.label}</TextBold>
+				</View>
+				<View style={calculationStyles.valueUnitContainer}>
+					<View style={calculationStyles.valueContainer}>
+						<TextBold testID={testID} style={calculationStyles.value}>
+							{row.value}
+						</TextBold>
+					</View>
+					<View style={calculationStyles.unitContainer}>
+						<TextRegular style={calculationStyles.units}>{row.units}</TextRegular>
+					</View>
+				</View>
+			</View>);
+    };
+    /**
+     * Steps:
+     * 1. Convert the recommendedCarbs prop to a number and save that as a variable named carbs.
+     * 2. Use renderRow() to display the user’s entered amount of carbohydrates
+     * 3. If carbs is not a NaN-value and it is positive, call renderRecommendedCarbs() to display the carbohydrate recommendation.
+     */
+    render() {
+        const carbs = Number(this.props.recommendedCarbs);
+        return (<>
+				<View style={calculationStyles.foodTitleContainer}>
+					<TextBold style={infoStyles.label}>{i18n._(t `Food`)}</TextBold>
+					<TextRegular style={calculationStyles.foodUnitsLabel}>
+						{`(${i18n._(t `Carbohydrates`)})`}
+					</TextRegular>
+				</View>
+				{this.renderRow({
+                label: i18n._(t `Entered`),
+                value: this.props.enteredCarbs,
+                units: i18n._(t `grams`),
+            }, RecommendedCarbsTestIds.EnteredCarbs)}
+				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
+			</>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+const calculationStyles = StyleSheet.create({
+    borderContainer: {
+        ...infoStyles.borderContainer,
+        alignItems: `center`,
+    },
+    foodTitleContainer: {
+        flex: infoStyles.borderContainer.flex,
+        flexDirection: infoStyles.borderContainer.flexDirection,
+        paddingHorizontal: infoStyles.borderContainer.paddingHorizontal,
+        alignItems: `center`,
+        paddingVertical: `2%`,
+    },
+    foodUnitsLabel: {
+        ...infoStyles.units,
+        color: colors.fadeBlue,
+        paddingLeft: `1%`,
+    },
+    rowContainer: {
+        flex: 7,
+    },
+    rowLabel: {
+        color: `white`,
+        fontSize: width / 25,
+    },
+    enteredContainer: {
+        flex: 3,
+        alignItems: `flex-end`,
+    },
+    entered: {
+        color: `white`,
+        fontSize: width / 23,
+    },
+    valueUnitContainer: {
+        ...infoStyles.valueUnitContainer,
+    },
+    valueContainer: {
+        ...infoStyles.valueContainer,
+    },
+    value: {
+        ...infoStyles.value,
+    },
+    unitContainer: {
+        ...infoStyles.unitContainer,
+    },
+    units: {
+        ...infoStyles.units,
+    },
+    editIconContainer: {
+        paddingLeft: `20%`,
+    },
+    recommendedContainer: {
+        flex: 7,
+        flexDirection: `row`,
+    },
+    recommendedLabel: {
+        color: colors.teal,
+        fontSize: width / 25,
+        alignSelf: `center`,
+    },
+    removeRecommended: {
+        justifyContent: `center`,
+        marginRight: `1%`,
+        marginTop: `1%`,
+    },
+    removeRecommendedIcon: {
+        color: colors.teal,
+        fontSize: width / 20,
+        paddingBottom: `0.5%`,
+    },
+});

package/{lib/typescript → dist/src}/components/RecommendedInsulin.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { UserSettings } from "@hedia/types";
+import React from "react";
 export interface IProps {
     /** The amount of insulin in units to display to the user as a recommendation. */
     insulinRecommendation: number;
@@ -82,4 +82,3 @@ export default class RecommendedInsulin extends React.Component<IProps, IState>
      */
     render: () => JSX.Element;
 }
-//# sourceMappingURL=RecommendedInsulin.d.ts.map

package/dist/src/components/RecommendedInsulin.js

@@ -0,0 +1,180 @@
+import { BolusCalculator } from "@hedia/types";
+import { t } from "@lingui/macro";
+import React from "react";
+import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import EditIcon from "../assets/icons/Edit";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { Messages } from "../utils/AttentionMessages";
+import { colors } from "../utils/Constants";
+import { Utils } from "../utils/Utils";
+import InvisibleNumberInput from "./InvisibleNumberInput";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+const { RecommendedInsulinTestIds } = Testing.Id;
+const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
+/** Input field for displaying the entered amount of insulin (which defaults to HDA’s recommendation) and allowing the user to edit it. */
+export default class RecommendedInsulin extends React.Component {
+    /** Initialise the state partialInput variable with undefined */
+    state = {
+        partialInput: undefined,
+    };
+    /**
+     *  Function taking no arguments and returning no value.
+     *  Will be bound to the function that activates input for InvisibleNumberInput when that component has been mounted.
+     */
+    callbackInput;
+    /**
+     * Called immediately after updating occurs. Not called for the initial render.
+     * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+     *
+     * Steps:
+     * 1. If the value of the enteredInsulin prop was changed, set the partialInput state variable to the new value.
+     * @param prevProps The previous component props
+     */
+    componentDidUpdate(prevProps) {
+        const { enteredInsulin } = this.props;
+        if (prevProps.enteredInsulin !== enteredInsulin) {
+            this.setState({ partialInput: enteredInsulin?.toString() });
+        }
+    }
+    /**
+     * Handle what should happen when the InsulinRecommendation component has been pressed.
+     * Uses the InvisibleNumberInput child component to enable the user to input the amount of insulin that hey are taking.
+     *
+     * Steps:
+     * 1. Call the callbackInput() member method.
+     */
+    handleOnPress = () => {
+        this.callbackInput?.();
+    };
+    /**
+     * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+     *
+     * Steps:
+     * 1. Assign a new local variable, replacedZero, with the value of the insulin argument string
+     * except for the first character if insulin is longer than 1 character and starts with a '0' but doesn’t start with ‘0.’.
+     * Otherwise set it to insulin. This would be better handled by converting it to a number: replacedZero = Number(insulin);
+     * 2. Save replacedZero to the partialInput state variable.
+     * 3. Return replacedZero
+     * @param insulin  The contents of the input field.
+     * @returns The partially cleaned input.
+     */
+    updatePartially = (insulin) => {
+        const replacedZero = insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
+        this.setState({
+            partialInput: replacedZero,
+        });
+        return replacedZero;
+    };
+    /**
+     * Handle what happens when input in the InvisibleNumberInput child component is completed.
+     *
+     * Steps:
+     * 1. Get the rounded insulin amount using the value argument and the injectionMethod prop as arguments for the Utils.roundValue() function.
+     * 2. Get the adjusted safety insulin limit (due to activity) by multiplying the activity reduction factor (which is 1 minus the activityReduction prop) with the SAFETY_INSULIN_LIMIT constant.
+     * 3. If the rounded value exceeds the adjusted safety threshold:
+     * 	- Call the updatePartially() method with the adjusted safety threshold to set the insulin amount to the capped value.
+     * 	- Return an Alert with a message about the insulin limit.
+     * 4. Call the updatePartially() method with the rounded value to set the entered insulin value.
+     * 5. Call the updateRecommendedInsulin callback function prop with rounded as the argument to report back the updated insulin amount to the parent RecommendationScreen component.
+     * @param value The numerical value of the input field at completion.
+     */
+    handleUpdatedInsulin = (value) => {
+        const rounded = Utils.roundValue(value, this.props.injectionMethod);
+        // https://hedia.atlassian.net/browse/HDA-795
+        const limited = (1 - (this.props.activityReduction ?? 0)) * SAFETY_INSULIN_LIMIT;
+        if (rounded > limited) {
+            this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
+            this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
+            return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
+                {
+                    text: i18n._(t `OK`),
+                },
+            ]);
+        }
+        this.updatePartially(`${rounded}`);
+        this.props.updateRecommendedInsulin(rounded);
+    };
+    /**
+     * Render a JSX element to display the insulin input field with the current insulin amount value
+     * and using an InvisibleNumberInput component to enable input when the insulin amount is tapped.
+     */
+    render = () => {
+        const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
+        const { container, editText, title, recommendedContainer, valueContainer, value, units, editButton } = styles;
+        return (<>
+				<TouchableOpacity testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
+					<LinearGradient style={container} colors={[colors.purple, colors.blue]} useAngle={true} angle={315}>
+						<TextBold style={title}>{i18n._(t `Recommended amount of insulin`)}</TextBold>
+						<View style={recommendedContainer}>
+							<View style={valueContainer}>
+								<TextBold style={value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
+									{shownInsulin}
+								</TextBold>
+								<TextRegular style={units}>{i18n._(t `Units`)}</TextRegular>
+							</View>
+							<View testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon} style={editButton}>
+								<EditIcon />
+								<TextRegular style={editText}>{i18n._(t `Edit`)}</TextRegular>
+							</View>
+						</View>
+					</LinearGradient>
+				</TouchableOpacity>
+
+				<InvisibleNumberInput testID={RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
+			</>);
+    };
+}
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
+    container: {
+        marginHorizontal: width / 17,
+        marginTop: width / 35,
+        borderRadius: 5,
+        paddingTop: width / 30,
+    },
+    title: {
+        fontFamily: `Poppins-Bold`,
+        fontSize: width / 28,
+        lineHeight: width / 19,
+        color: `white`,
+        textAlign: `center`,
+        paddingHorizontal: width / 12,
+    },
+    recommendedContainer: {
+        marginHorizontal: width / 12,
+        alignContent: `center`,
+    },
+    valueContainer: {
+        flexDirection: `row`,
+        justifyContent: `center`,
+    },
+    value: {
+        fontFamily: `Poppins-Bold`,
+        color: `white`,
+        fontSize: width / 6,
+        lineHeight: width / 4,
+        marginLeft: width / 15,
+    },
+    units: {
+        alignSelf: `flex-end`,
+        color: `white`,
+        fontSize: width / 28,
+        paddingBottom: `8%`,
+        marginLeft: width / 100,
+    },
+    editButton: {
+        position: `absolute`,
+        flexDirection: `row`,
+        right: width / 20,
+        top: width / 16,
+    },
+    editText: {
+        fontSize: width / 28,
+        color: `white`,
+        opacity: 0.8,
+        marginLeft: width / 80,
+    },
+});