@hedia/recommendation-screen 2.1.42 → 2.1.43-alpha.0

package/dist/src/components/RecommendationModal.js

@@ -1,11 +1,13 @@
 import { t } from "@lingui/macro";
 import * as React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+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 { BORDER_COLOUR_TEAL } 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.
@@ -24,99 +26,105 @@ export default class RecommendationModal extends React.Component {
      */
     constructor(props) {
         super(props);
-        /**
-         * 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.
-         */
-        this.onPressNextButton = () => {
-            const { attentionMessage, suggestedCarbohydrates } = this.props;
-            const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
-            return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
+        this.state = {
+            firstPageVisible: !!this.props.limitationMessage,
         };
-        /**
-         * @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.
-         */
-        this.recommendationButtons = () => {
-            return (<View style={stylesModal.recommendationButtonsContainer}>
+    }
+    /**
+     * 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}>
-					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</Text>
+					<TextRegular style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</TextRegular>
 				</TouchableOpacity>
 				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
-					<Text style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</Text>
+					<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
-         */
-        this.recommendCarbohydrates = (suggestedCarbohydrates) => {
-            const displayCarbs = Math.round(suggestedCarbohydrates);
-            return (<React.Fragment>
+    };
+    /**
+     * 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}>
-						<Text style={stylesModal.recommendEatingText}>
+						<TextRegular style={stylesModal.recommendEatingText}>
 							{i18n._(t `We recommend eating an additional:`)}
-						</Text>
+						</TextRegular>
 					</View>
 					<View style={stylesModal.suggestedContainer}>
-						<Text style={stylesModal.textCenter}>
-							<Text style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>{`${displayCarbs} `}</Text>
-							<Text style={stylesModal.carbohydrateText}>{i18n._(t `grams of carbohydrates`)}</Text>
-						</Text>
+						<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}>
-						<Text style={stylesModal.recommendEatingText}>{i18n._(t `Instead of taking insulin`)}</Text>
+						<TextRegular style={stylesModal.recommendEatingText}>
+							{i18n._(t `Instead of taking insulin`)}
+						</TextRegular>
 					</View>
 				</View>
 				<View style={stylesModal.addToCalculationContainer}>
-					<Text style={stylesModal.addToCalculation}>
+					<TextRegular style={stylesModal.addToCalculation}>
 						{i18n._(t `Would you like to add this to your current calculation?`)}
-					</Text>
+					</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.
-         */
-        this.secondPage = () => {
-            const { attentionMessage, suggestedCarbohydrates } = this.props;
-            const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
-            return (<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}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
 					</View>
-					<Text style={stylesModal.textMessage}>{attentionMessage}</Text>
+					<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}>
-							<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
+							<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.
-         */
-        this.firstPage = () => {
-            const { limitationMessage } = this.props;
-            return <LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
-        };
-        this.state = {
-            firstPageVisible: !!this.props.limitationMessage,
-        };
-    }
+    };
+    /**
+     * @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.
@@ -170,7 +178,7 @@ export const stylesModal = StyleSheet.create({
         borderColor: BORDER_COLOUR_TEAL,
     },
     suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
-    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize, fontWeight: `bold` },
+    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
     textCenter: { textAlign: `center` },
     recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
     carbohydrateText: { color: `white`, fontSize: sugestionFontSize },

package/dist/src/components/RecommendedCarbs.js

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import React from "react";
-import { Alert, Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
@@ -9,6 +9,8 @@ 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
@@ -17,101 +19,104 @@ const { RecommendedCarbsTestIds } = Testing.Id;
  * (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 {
-    constructor() {
-        super(...arguments);
-        /** Initialise the state partialInput variable with undefined */
-        this.state = {
-            partialInput: undefined,
-        };
-        /**
-         * 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.
-         */
-        this.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.
-         */
-        this.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
-         */
-        this.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);
+    /** 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`),
+                    },
+                ]);
             }
-        };
-        /**
-         * 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.
-         */
-        this.renderRecommendedCarbs = () => {
-            const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
-            const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
-            return (<React.Fragment>
+            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 (<React.Fragment>
 				<LineSeparator color={BORDER_COLOUR_GREY}/>
 				<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>
-						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</TextBold>
 					</View>
 				</View>
 				<View style={calculationStyles.borderContainer}>
 					<View style={calculationStyles.recommendedContainer}>
-						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</Text>
+						<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}>
-								<Text testID={RecommendedCarbsTestIds.RecommendedCarbs} style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}>
+								<TextRegular testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: BORDER_COLOUR_TEAL }}>
 									{shownCarbs}
-								</Text>
+								</TextRegular>
 							</View>
 							<View style={[calculationStyles.unitContainer]}>
 								<View style={calculationStyles.editIconContainer}>
 									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
 								</View>
-								<Text style={[calculationStyles.units, { color: BORDER_COLOUR_TEAL }]}>
+								<TextRegular style={{ ...calculationStyles.units, color: BORDER_COLOUR_TEAL }}>
 									{i18n._(t `grams`)}
-								</Text>
+								</TextRegular>
 							</View>
 						</TouchableOpacity>
 					</View>
@@ -124,31 +129,30 @@ export default class RecommendedCarbs extends React.Component {
             }, 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}/>
 			</React.Fragment>);
-        };
-        /**
-         * 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.
-         */
-        this.renderRow = (row, testID) => {
-            return (<View style={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
+    };
+    /**
+     * 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, { paddingVertical: `1%` }]}>
 				<View style={calculationStyles.rowContainer}>
-					<Text style={calculationStyles.rowLabel}>{row.label}</Text>
+					<TextBold style={calculationStyles.rowLabel}>{row.label}</TextBold>
 				</View>
 				<View style={calculationStyles.valueUnitContainer}>
 					<View style={calculationStyles.valueContainer}>
-						<Text testID={testID} style={calculationStyles.value}>
+						<TextRegular testID={testID} style={calculationStyles.value}>
 							{row.value}
-						</Text>
+						</TextRegular>
 					</View>
 					<View style={calculationStyles.unitContainer}>
-						<Text style={calculationStyles.units}>{row.units}</Text>
+						<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.
@@ -159,14 +163,16 @@ export default class RecommendedCarbs extends React.Component {
         const carbs = Number(this.props.recommendedCarbs);
         return (<React.Fragment>
 				<View style={calculationStyles.foodTitleContainer}>
-					<Text style={infoStyles.label}>{i18n._(t `Food`)}</Text>
-					<Text style={calculationStyles.foodUnitsLabel}>{`(${i18n._(t `Carbohydrates`)})`}</Text>
+					<TextRegular style={infoStyles.label}>{i18n._(t `Food`)}</TextRegular>
+					<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)}
+                label: i18n._(t `Entered`),
+                value: this.props.enteredCarbs,
+                units: i18n._(t `grams`),
+            }, RecommendedCarbsTestIds.EnteredCarbs)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
 			</React.Fragment>);
     }
@@ -194,7 +200,6 @@ const calculationStyles = StyleSheet.create({
     rowLabel: {
         color: `white`,
         fontSize: Dimensions.get(`screen`).width / 25,
-        fontWeight: `bold`,
     },
     enteredContainer: {
         flex: 3,
@@ -236,7 +241,6 @@ const calculationStyles = StyleSheet.create({
         color: BORDER_COLOUR_TEAL,
         fontSize: Dimensions.get(`screen`).width / 25,
         alignSelf: `center`,
-        fontWeight: `bold`,
     },
     removeRecommended: {
         justifyContent: `center`,