Feedback modal

feedbackModal.diff

diff --git src/components/popup/feedbackModal.jsx src/components/popup/feedbackModal.jsx
index 709a23bf..bb79d629 100644
--- src/components/popup/feedbackModal.jsx
+++ src/components/popup/feedbackModal.jsx
@@ -11,6 +11,38 @@ import Button from '../button';
 import Feedback, { DEFAULT } from '../feedback';
 import PopUpHeader from './popUpHeader';
 /** Modal for Feedback of the user */
+
+function FeedbackLabelButton({ code, label, handleClick, selectedLabels }) {
+    function onPress() {
+        return handleClick(code);
+    }
+    return (
+        <View style={styles.labelBtnContainer}>
+            <Button
+                onPress={onPress}
+                style={[
+                    styles.labelBtnStyle,
+                    {
+                        borderColor: selectedLabels[code]
+                            ? Colors.blue
+                            : Colors.shadow,
+                    },
+                ]}
+                textStyle={styles.labelBtnTextStyle}
+            >
+                {label}
+            </Button>
+        </View>
+    );
+}
+
+FeedbackLabelButton.propTypes = {
+    code: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    handleClick: PropTypes.func.isRequired,
+    selectedLabels: PropTypes.object.isRequired,
+};
+
 function FeedbackModal(props) {
     const [selectedLabels, setSelectedLabels] = useState({});
     const [rating, setRating] = useState(DEFAULT.initialRating);
@@ -88,35 +120,18 @@ function FeedbackModal(props) {
                                     styles.verticalPadding_4,
                                 ]}
                             >
-                                {props.labels.map(item => (
-                                    <View
-                                        style={styles.labelBtnContainer}
-                                        key={item.code}
-                                    >
-                                        <Button
-                                            onPress={() =>
-                                                handleSelectedLabels(item.code)
-                                            }
-                                            style={[
-                                                styles.labelBtnStyle,
-                                                {
-                                                    borderColor: selectedLabels[
-                                                        item.code
-                                                    ]
-                                                        ? Colors.blue
-                                                        : Colors.shadow,
-                                                },
-                                            ]}
-                                            textStyle={
-                                                styles.labelBtnTextStyle
-                                            }>
-                                            {item.label}
-                                        </Button>
-                                    </View>
+                                {props.labels.map(({ label, code }) => (
+                                    <FeedbackLabelButton
+                                        key={code}
+                                        code={code}
+                                        label={label}
+                                        selectedLabels={selectedLabels}
+                                        handleClick={handleSelectedLabels}
+                                    />
                                 ))}
                             </View>
                             {rating <= 3 && (
-                                <View>
+                                <>
                                     <Text
                                         style={[
                                             Global.addressText,
@@ -137,7 +152,7 @@ function FeedbackModal(props) {
                                         numberOfLines={4}
                                         style={styles.textInput}
                                     />
-                                </View>
+                                </>
                             )}
                             <Button
                                 style={Global.footerButton}

feedbackModal.jsx

import PropTypes from 'prop-types';
import React, { useCallback, useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import Modal from 'react-native-modal';
import RateImage from '../../assets/svgIcons/Rate.svg';
import { Locales } from '../../config';
import { Colors, Global } from '../../styles';
import { modalStyle } from '../../styles/modalStyle';
import theme from '../../styles/theme';
import Button from '../button';
import Feedback, { DEFAULT } from '../feedback';
import PopUpHeader from './popUpHeader';

function FeedbackLabelButton({ code, label, handleClick, selectedLabels }) {
    function onPress() {
        return handleClick(code);
    }
    return (
        <View style={styles.labelBtnContainer}>
            <Button
                onPress={onPress}
                style={[
                    styles.labelBtnStyle,
                    {
                        borderColor: selectedLabels[code]
                            ? Colors.blue
                            : Colors.shadow,
                    },
                ]}
                textStyle={styles.labelBtnTextStyle}
            >
                {label}
            </Button>
        </View>
    );
}

FeedbackLabelButton.propTypes = {
    code: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    handleClick: PropTypes.func.isRequired,
    selectedLabels: PropTypes.object.isRequired,
};

/** Modal for Feedback of the user */
function FeedbackModal(props) {
    const [selectedLabels, setSelectedLabels] = useState({});
    const [rating, setRating] = useState(DEFAULT.initialRating);
    const [textFeedback, setTextFeedback] = useState('');

    const handleSelectedLabels = code => {
        if (code in selectedLabels) {
            setSelectedLabels({
                ...selectedLabels,
                [code]: !selectedLabels[code],
            });
        } else {
            setSelectedLabels({ ...selectedLabels, [code]: true });
        }
    };

    const handleRating = value => setRating(value);

    const onFeedbackChange = useCallback(feedback => {
        setTextFeedback(feedback);
    }, []);

    const submitFeedback = () => {
        props.sendFeedback({
            orderId: props.orderNumber,
            ratings: rating,
            feedbackLabels: Object.keys(selectedLabels).filter(
                item => !!selectedLabels[item],
            ),
            customerFeedback: textFeedback,
        });
        props.handleClose();
    };

    return (
        <Modal
            style={modalStyle.bottomModal}
            animationType="slide"
            transparent
            isVisible={props.isVisible}
            backdropColor={Colors.backgroundOverlay}
            backdropOpacity={Global.backGroundOpacity}
            onBackdropPress={props.handleClose}
            onSwipeComplete={props.handleClose}
            swipeDirection="down"
        >
            <View style={[modalStyle.modalContent, styles.modalContent]}>
                <PopUpHeader
                    url={RateImage}
                    headerText={Locales.feedback}
                    handleClose={props.handleClose}
                />
                <View style={styles.innerContent}>
                    <View style={styles.row}>
                        <Text style={Global.addressText}>
                            {Locales.feedbackTitle}
                        </Text>
                    </View>
                    <Feedback handleRating={handleRating} />
                    {rating !== DEFAULT.initialRating && (
                        <View style={styles.verticalPadding}>
                            <Text
                                style={[
                                    Global.addressText,
                                    styles.verticalPadding_4,
                                ]}
                            >
                                {rating <= 3
                                    ? Locales.feedbackServiceTitleBad
                                    : Locales.feedbackServiceTitleGood}
                            </Text>
                            <View
                                style={[
                                    styles.wrappedRow,
                                    styles.verticalPadding_4,
                                ]}
                            >
                                {props.labels.map(({ label, code }) => (
                                    <FeedbackLabelButton
                                        key={code}
                                        code={code}
                                        label={label}
                                        selectedLabels={selectedLabels}
                                        handleClick={handleSelectedLabels}
                                    />
                                ))}
                            </View>
                            {rating <= 3 && (
                                <>
                                    <Text
                                        style={[
                                            Global.addressText,
                                            styles.verticalPadding_4,
                                        ]}
                                    >
                                        {Locales.textFeedback}
                                    </Text>

                                    <TextInput
                                        onChangeText={onFeedbackChange}
                                        value={textFeedback}
                                        selectionColor={Colors.blue}
                                        maxLength={100}
                                        autoCorrect={false}
                                        autoCompleteType="off"
                                        multiline
                                        numberOfLines={4}
                                        style={styles.textInput}
                                    />
                                </>
                            )}
                            <Button
                                style={Global.footerButton}
                                onPress={submitFeedback}
                                disabled={rating === DEFAULT.initialRating}
                            >
                                {Locales.submit}
                            </Button>
                        </View>
                    )}
                </View>
            </View>
        </Modal>
    );
}

FeedbackModal.propTypes = {
    handleClose: PropTypes.func.isRequired,
    isVisible: PropTypes.bool.isRequired,
    sendFeedback: PropTypes.func.isRequired,
    orderNumber: PropTypes.string.isRequired,
    labels: PropTypes.array.isRequired,
};

const styles = StyleSheet.create({
    modalContent: {
        paddingBottom: 16,
    },
    innerContent: {
        padding: 8,
    },
    verticalPadding: {
        paddingVertical: 8,
    },
    verticalPadding_4: {
        paddingVertical: 4,
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    wrappedRow: { flexDirection: 'row', flexWrap: 'wrap' },
    labelBtnContainer: { padding: 4, paddingLeft: 0 },
    labelBtnStyle: {
        backgroundColor: Colors.transparent,
        borderColor: Colors.shadow,
    },
    labelBtnTextStyle: {
        color: Colors.blackLabel,
        fontWeight: 'normal',
        fontSize: theme.FONT_SIZE_SMALL,
        fontFamily: theme.FONT_FAMILY,
    },
    textInput: {
        flexGrow: 1,
        textAlign: 'left',
        alignItems: 'stretch',
        justifyContent: 'center',
        height: 80,
        paddingHorizontal: 5,
        borderColor: Colors.grey,
        borderWidth: 1,
        color: Colors.black,
        marginBottom: 10,
    },
});

export default React.memo(FeedbackModal);