<commit_before>import {
  Box,
  Button,
  color,
  Flex,
  Input,
  Serif,
  TextArea,
} from "@artsy/palette"
import { SendFeedbackSearchResultsMutation } from "__generated__/SendFeedbackSearchResultsMutation.graphql"
import { ContextProps } from "Artsy"
import { withContext } from "Artsy/SystemContext"
import React from "react"
import { commitMutation, graphql } from "react-relay"
import styled from "styled-components"

interface State {
  submitted: boolean
  message: string
  name: string
  email: string
}

class SendFeedbackForm extends React.Component<ContextProps, State> {
  state = {
    submitted: false,
    message: null,
    name: null,
    email: null,
  }

  handleClick() {
    const { user, relayEnvironment } = this.props
    const { message, name, email } = this.state
    if (!message) return
    if (!user && !name && !email) return

    commitMutation<SendFeedbackSearchResultsMutation>(relayEnvironment, {
      mutation: graphql`
        mutation SendFeedbackSearchResultsMutation(
          $input: SendFeedbackMutationInput!
        ) {
          sendFeedback(input: $input) {
            feedbackOrError {
              ... on SendFeedbackMutationSuccess {
                feedback {
                  message
                }
              }
              ... on SendFeedbackMutationFailure {
                mutationError {
                  type
                  message
                  detail
                }
              }
            }
          }
        }
      `,
      variables: {
        input: { message, email, name },
      },
      optimisticUpdater: () => {
        this.setState({
          submitted: true,
        })
      },
    })
  }

  renderPersonalInfoInputs() {
    return (
      <LoggedOutInputContainer mt={2} alignContent="space-between">
        <Box mr={1} width="50%">
          <Input
            placeholder="Your name"
            onChange={({ currentTarget: { value: name } }) => {
              this.setState({ name })
            }}
          />
        </Box>
        <Box width="50%">
          <Input
            placeholder="Email address"
            onChange={({ currentTarget: { value: email } }) => {
              this.setState({ email })
            }}
          />
        </Box>
      </LoggedOutInputContainer>
    )
  }

  renderFeedbackTextArea() {
    return (
      <FeedbackTextAreaContainer mt={2}>
        <TextArea
          onChange={({ value: message }) => {
            this.setState({ message })
          }}
          placeholder="Your comments here"
        />
      </FeedbackTextAreaContainer>
    )
  }

  render() {
    const { user } = this.props

    return (
      <Box bg={color("black5")} p={3} mt={3}>
        <FeedbackContainer
          flexDirection="column"
          alignItems="center"
          justifyContent="center"
          width="100%"
        >
          <Box textAlign="center">
            <Serif size="4">Your feedback is important to us.</Serif>
          </Box>
          <Box>
            <Serif size="2">
              Tell us how we can improve and help you find what you are looking
              for.
            </Serif>
          </Box>
          {!user ? this.renderPersonalInfoInputs() : null}
          {this.renderFeedbackTextArea()}
          <Button
            onClick={() => {
              this.handleClick()
            }}
          >
            Submit
          </Button>
        </FeedbackContainer>
      </Box>
    )
  }
}

const FeedbackContainer = styled(Flex)`
  min-height: 212px;
`

const FeedbackTextAreaContainer = styled(Box)`
  width: 484px;
`

const LoggedOutInputContainer = styled(Flex)`
  width: 484px;
`

export const SendFeedback = withContext(SendFeedbackForm)<commit_msg>[SearchResults] Add validation/error message to form inputs for sending feedback<commit_after>import {
  Box,
  Button,
  color,
  Flex,
  Input,
  Serif,
  TextArea,
} from "@artsy/palette"
import { SendFeedbackSearchResultsMutation } from "__generated__/SendFeedbackSearchResultsMutation.graphql"
import { ContextProps } from "Artsy"
import { withContext } from "Artsy/SystemContext"
import React from "react"
import { commitMutation, graphql } from "react-relay"
import styled from "styled-components"

interface Inputs {
  message: string
  name: string
  email: string
}

interface State extends Inputs {
  submitted: boolean
  triggeredValidation: boolean
}

class SendFeedbackForm extends React.Component<ContextProps, State> {
  state = {
    submitted: false,
    message: null,
    name: null,
    email: null,
    triggeredValidation: false,
  }

  handleClick() {
    const { user, relayEnvironment } = this.props
    const { message, name, email } = this.state
    if (!message) return
    if (!user && !(name && email)) return

    commitMutation<SendFeedbackSearchResultsMutation>(relayEnvironment, {
      mutation: graphql`
        mutation SendFeedbackSearchResultsMutation(
          $input: SendFeedbackMutationInput!
        ) {
          sendFeedback(input: $input) {
            feedbackOrError {
              ... on SendFeedbackMutationSuccess {
                feedback {
                  message
                }
              }
              ... on SendFeedbackMutationFailure {
                mutationError {
                  type
                  message
                  detail
                }
              }
            }
          }
        }
      `,
      variables: {
        input: { message, email, name },
      },
      optimisticUpdater: () => {
        this.setState({
          submitted: true,
        })
      },
    })
  }

  renderPersonalInfoInputs() {
    const { name, email, triggeredValidation } = this.state
    return (
      <LoggedOutInputContainer mt={2} alignContent="space-between">
        <Box mr={1} width="50%">
          <Input
            placeholder="<NAME>"
            onChange={({ currentTarget: { value } }) => {
              this.setState({ name: value })
            }}
            required
            error={
              !name && triggeredValidation ? "Cannot leave field blank" : ""
            }
          />
        </Box>
        <Box width="50%">
          <Input
            placeholder="Email address"
            onChange={({ currentTarget: { value } }) => {
              this.setState({ email: value })
            }}
            required
            error={
              !email && triggeredValidation ? "Cannot leave field blank" : ""
            }
          />
        </Box>
      </LoggedOutInputContainer>
    )
  }

  renderFeedbackTextArea() {
    const { message, triggeredValidation } = this.state
    return (
      <FeedbackTextAreaContainer mt={2}>
        <TextArea
          onChange={({ value }) => {
            this.setState({ message: value })
          }}
          placeholder="Your comments here"
          required
          error={
            !message && triggeredValidation ? "Cannot leave field blank" : ""
          }
        />
      </FeedbackTextAreaContainer>
    )
  }

  render() {
    const { user } = this.props

    return (
      <Box bg={color("black5")} p={3} mt={3}>
        <FeedbackContainer
          flexDirection="column"
          alignItems="center"
          justifyContent="center"
          width="100%"
        >
          <Box textAlign="center">
            <Serif size="4">Your feedback is important to us.</Serif>
          </Box>
          <Box>
            <Serif size="2">
              Tell us how we can improve and help you find what you are looking
              for.
            </Serif>
          </Box>
          {!user ? this.renderPersonalInfoInputs() : null}
          {this.renderFeedbackTextArea()}
          <Button
            onClick={() => {
              this.setState({ triggeredValidation: true }, () =>
                this.handleClick()
              )
            }}
          >
            Submit
          </Button>
        </FeedbackContainer>
      </Box>
    )
  }
}

const FeedbackContainer = styled(Flex)`
  min-height: 212px;
`

const FeedbackTextAreaContainer = styled(Box)`
  width: 484px;
`

const LoggedOutInputContainer = styled(Flex)`
  width: 484px;
`

export const SendFeedback = withContext(SendFeedbackForm)
{'fraction_non_alphanumeric': 0.10946781428051885, 'fraction_numerical': 0.005818887137834889, 'mean_word_length': 1.73269294468367, 'pattern_counts': {'":': 0, '<': 58, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6877965', 'n_tokens_mistral': 2269, 'n_tokens_neox': 2227, 'n_words': 504}