@hedia/recommendation-screen 2.1.33 → 2.1.34-alpha.0

package/src/components/RecommendationModal.d.ts

@@ -1,207 +0,0 @@
-import * as React from "react";
-export interface IModalProps {
-    /** Whether or not the modal should currently be displayed on the screen */
-    isVisible: boolean;
-    /** The amount of additional carbohydrates that is being recommended for the user in grams. */
-    suggestedCarbohydrates: number | null;
-    /** A message to display to the user to inform them in natural language about special recommendations or warnings from HDA. */
-    attentionMessage: string | null;
-    /** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
-    limitationMessage: string | null;
-    /** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
-    onClickOkButton(): void;
-    /**
-     *  Callback function taking no arguments and returning no value.
-     * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
-     */
-    onAcceptCarbohydrates(): void;
-    /**
-     * Callback function taking no arguments and returning no value.
-     *  Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
-     */
-    onDeclineCarbohydrates(): void;
-}
-export interface IModalState {
-    /** If true then the first page will be displayed, otherwise the second page will be displayed. */
-    firstPageVisible: boolean;
-}
-/**
- * Popup modal for displaying information messages or warnings to the user if necessary.
- * The modal has two “pages” with different content that it is able to display.
- * The first page is for informing the user if their insulin recommendation was limited by the maximum insulin safety limit.
- * This page will only be displayed if the recommendation was actually limited.
- * The second page is for displaying a general attention message that may contain instructions for the user,
- * and for letting the user know if they are being recommended eating additional carbohydrates.
- */
-export default class RecommendationModal extends React.Component<IModalProps, IModalState> {
-    /**
-     * Steps:
-     * 1. Call the super() method with the props.
-     * 2. Set the firstPageVisible state variable true if the limitationMessage prop is truthy.
-     * @param props The class props
-     */
-    constructor(props: IModalProps);
-    /**
-     * 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: () => void;
-    /**
-     * @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: () => JSX.Element;
-    /**
-     * 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: number) => JSX.Element;
-    /**
-     * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
-     */
-    secondPage: () => JSX.Element;
-    /**
-     * @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: () => JSX.Element;
-    /**
-     * @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(): JSX.Element;
-}
-/** @internal */
-export declare const stylesModal: {
-    modalStyle: {
-        margin: number;
-    };
-    container: {
-        flex: number;
-        backgroundColor: string;
-        justifyContent: "center";
-        paddingHorizontal: string;
-    };
-    containerAcceptButton: {
-        flex: number;
-        backgroundColor: string;
-        justifyContent: "flex-start";
-    };
-    titleContainer: {
-        marginBottom: string;
-    };
-    recommendationRow: {
-        justifyContent: "center";
-        alignContent: "center";
-        marginBottom: string;
-    };
-    textTittleMessage: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    textMessage: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    buttonText: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    addToCalculationContainer: {
-        justifyContent: "flex-start";
-        marginVertical: string;
-    };
-    innerView: {
-        alignContent: "center";
-        paddingVertical: string;
-        paddingHorizontal: string;
-        marginTop: string;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-    };
-    suggestedContainer: {
-        justifyContent: "center";
-        flexDirection: "row";
-        marginBottom: string;
-    };
-    suggestedCarbs: {
-        color: string;
-        fontSize: number;
-        fontWeight: "bold";
-    };
-    textCenter: {
-        textAlign: "center";
-    };
-    recommendEatingText: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    carbohydrateText: {
-        color: string;
-        fontSize: number;
-    };
-    addToCalculation: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    recommendationButtonsContainer: {
-        justifyContent: "center";
-        flexDirection: "row";
-        margin: string;
-    };
-    affirmativeCarbsText: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    negativeCarbsText: {
-        color: string;
-        fontSize: number;
-        textAlign: "center";
-    };
-    affirmativeCarbsButton: {
-        marginTop: string;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-        width: number;
-        height: number;
-        alignSelf: "center";
-        justifyContent: "center";
-        marginRight: string;
-    };
-    negativeCarbsButton: {
-        marginTop: string;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-        width: number;
-        height: number;
-        alignSelf: "center";
-        justifyContent: "center";
-        marginLeft: string;
-    };
-    okButton: {
-        marginTop: string;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-        width: number;
-        height: number;
-        alignSelf: "center";
-        justifyContent: "center";
-    };
-};

package/src/components/RecommendationModal.js

@@ -1,213 +0,0 @@
-import { t } from "@lingui/macro";
-import * as React from "react";
-import { Dimensions, StyleSheet, Text, 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";
-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);
-        /**
-         * 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();
-        };
-        /**
-         * @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}>
-				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} accessibilityLabel="yesButtonModal" style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
-					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</Text>
-				</TouchableOpacity>
-				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} accessibilityLabel="noButtonModal" style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
-					<Text style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</Text>
-				</TouchableOpacity>
-			</View>);
-        };
-        /**
-         * Compose a JSX element for displaying a recommendation of additional carbohydrates (the value of the suggestedCarbohydrates prop rounded to the nearest integer)
-         * to the user in a way that explains what to do with the suggestion.
-         * @param suggestedCarbohydrates the recommended additional carbohydrates
-         */
-        this.recommendCarbohydrates = (suggestedCarbohydrates) => {
-            const displayCarbs = Math.round(suggestedCarbohydrates);
-            return (<React.Fragment>
-				<View style={stylesModal.innerView}>
-					<View style={stylesModal.recommendationRow}>
-						<Text style={stylesModal.recommendEatingText}>
-							{i18n._(t `We recommend eating an additional:`)}
-						</Text>
-					</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>
-					</View>
-					<View style={stylesModal.recommendationRow}>
-						<Text style={stylesModal.recommendEatingText}>{i18n._(t `Instead of taking insulin`)}</Text>
-					</View>
-				</View>
-				<View style={stylesModal.addToCalculationContainer}>
-					<Text style={stylesModal.addToCalculation}>
-						{i18n._(t `Would you like to add this to your current calculation?`)}
-					</Text>
-					{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>
-				<View style={stylesModal.container}>
-					<View style={stylesModal.titleContainer}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
-					</View>
-					<Text style={stylesModal.textMessage}>{attentionMessage}</Text>
-					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
-				</View>
-				{willRecommendCarbs ? null : (<View style={stylesModal.containerAcceptButton}>
-						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} accessibilityLabel="okayButtonModal" style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
-							<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
-						</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 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 },
-    container: {
-        flex: 4,
-        backgroundColor: `rgba(30, 35, 87, 0.9)`,
-        justifyContent: `center`,
-        paddingHorizontal: `4%`,
-    },
-    containerAcceptButton: {
-        flex: 1,
-        backgroundColor: `rgba(30, 35, 87, 0.9)`,
-        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: BORDER_COLOUR_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: BORDER_COLOUR_TEAL,
-    },
-    suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
-    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize, fontWeight: `bold` },
-    textCenter: { textAlign: `center` },
-    recommendEatingText: { color: `#C5D0E7`, 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: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
-    negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
-    affirmativeCarbsButton: {
-        marginTop: `2%`,
-        borderRadius: buttonBorderRadius,
-        borderWidth: buttonBorderWidth,
-        borderColor: BORDER_COLOUR_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: BORDER_COLOUR_TEAL,
-        width: buttonWidth,
-        height: buttonHeight,
-        alignSelf: `center`,
-        justifyContent: `center`,
-    },
-});

package/src/components/RecommendedCarbs.d.ts

@@ -1,94 +0,0 @@
-import React from "react";
-import { Testing } from "../types/enum";
-export interface ICalculationRow {
-    label: string;
-    value: string;
-    units: string;
-}
-export interface IProps {
-    /** The amount of carbs in grams that was recommended to and accepted by the user. */
-    recommendedCarbs?: string;
-    /** The amount of carbs in grams that the user entered on the food screen. */
-    enteredCarbs: string;
-    /** Callback function that doesn’t accept any arguments and doesn’t return anything - To be called every time the “remove additional carbs” button has been pressed. */
-    removeRecommendedCarbs(): void;
-    /**
-     * Callback function that takes a single number as argument and doesn’t return anything.
-     * Function to be called when the entered carbohydrate value is changed by the user. The new value should be given as argument
-     */
-    changedRecommendedCarbs(value: number): void;
-}
-export interface IState {
-    /** The internal value of the input field. */
-    partialInput?: string;
-}
-/**
- * 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<IProps, IState> {
-    /** Initialise the state partialInput variable with undefined */
-    state: IState;
-    /**
-     * 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?: () => void;
-    /**
-     * 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: () => void;
-    /**
-     * 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: string) => void;
-    /**
-     * 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: number) => void;
-    /**
-     * 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: () => JSX.Element;
-    /**
-     * 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: ICalculationRow, testID: Testing.Id.RecommendedCarbsTestIds) => JSX.Element;
-    /**
-     * 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(): JSX.Element;
-}