@kiwicom/smart-faq/src/shared/StaticFAQ/ArticleFeedback/ScreenFeedback.js

// @flow

import * as React from 'react';
import Heading from '@kiwicom/orbit-components/lib/Heading';
import Button from '@kiwicom/orbit-components/lib/Button';
import ChoiceGroup from '@kiwicom/orbit-components/lib/ChoiceGroup';
import Radio from '@kiwicom/orbit-components/lib/Radio';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import { Consumer as IntlConsumer } from '@kiwicom/nitro/lib/services/intl/context';

import screenList from './screenList';
import commentTypeList from './commentTypeList';
import Box from '../../../SmartFAQ/common/Box';

type Props = {|
  changeScreen: (nextScreen: $Values<typeof screenList>) => void,
  handleCommentTypeChange: string => void,
  commentType: string,
|};

const labelMap = {
  [commentTypeList.DONT_LIKE]: __(
    'smartfaq.article_feedback.radio_group.dont_like_label',
  ),
  [commentTypeList.CONFUSING]: __(
    'smartfaq.article_feedback.radio_group.confusing_label',
  ),
  [commentTypeList.NOT_ACCURATE]: __(
    'smartfaq.article_feedback.radio_group.not_accurate_label',
  ),
  [commentTypeList.DOESNT_ANSWER]: __(
    'smartfaq.article_feedback.radio_group.doesnt_answer_label',
  ),
};

class ScreenFeedback extends React.Component<Props> {
  handleChange = (event: SyntheticEvent<HTMLInputElement>) => {
    const { target } = event;
    if (!(target instanceof window.HTMLInputElement)) return;

    this.props.handleCommentTypeChange(target.value);
  };

  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
    e.preventDefault();
    this.props.changeScreen(screenList.ADDITIONAL_FEEDBACK);
  };

  render() {
    const { commentType } = this.props;

    return (
      <Box
        border="none"
        borderRadius="4px"
        backgroundColor="#f5f7f9"
        padding="16px"
      >
        <form onSubmit={this.handleSubmit}>
          <Stack>
            <Heading type="title3">
              <Translate t="smartfaq.article_feedback.radio_group.title" />
            </Heading>
            <ChoiceGroup onChange={this.handleChange}>
              <>
                {Object.entries(labelMap).map(([labelKey, label]) => (
                  <IntlConsumer key={labelKey}>
                    {intl => (
                      <Radio
                        label={intl.translate(String(label))}
                        value={labelKey}
                        checked={commentType === labelKey}
                        onChange={this.handleChange}
                        dataTest="articleFeedbackOptions"
                      />
                    )}
                  </IntlConsumer>
                ))}
              </>
            </ChoiceGroup>
            <Button submit disabled={!commentType}>
              <Translate t="smartfaq.article_feedback.additional_feedback.submit_button" />
            </Button>
          </Stack>
        </form>
      </Box>
    );
  }
}

export default ScreenFeedback;