<commit_before>import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import _ from 'lodash/fp'
import moment from 'moment'
import * as R from 'ramda'
import { useState, React } from 'react'
import * as Yup from 'yup'

import ImagePopper from 'src/components/ImagePopper'
import { FeatureButton } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import { H3, Info3 } from 'src/components/typography'
import {
  OVERRIDE_AUTHORIZED,
  OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'
import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'
import { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'
import { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'
import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'
import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'
import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'
import { URI } from 'src/utils/apollo'
import { ifNotNull } from 'src/utils/nullCheck'

import styles from './CustomerData.styles.js'
import { EditableCard } from './components'
import { getName } from './helper.js'

const useStyles = makeStyles(styles)

const imageWidth = 165
const imageHeight = 45
const popupImageWidth = 360
const popupImageHeight = 240

const Photo = ({ show, src }) => {
  const classes = useStyles({ width: imageWidth })

  return (
    <>
      {show ? (
        <ImagePopper
          src={src}
          width={imageWidth}
          height={imageHeight}
          popupWidth={popupImageWidth}
          popupHeight={popupImageHeight}
        />
      ) : (
        <div className={classes.photoWrapper}>
          <CrossedCameraIcon />
        </div>
      )}
    </>
  )
}

const CustomerData = ({ customer, updateCustomer }) => {
  const classes = useStyles()
  const [listView, setListView] = useState(false)

  const idData = R.path(['idCardData'])(customer)
  const rawExpirationDate = R.path(['expirationDate'])(idData)
  const country = R.path(['country'])(idData)
  const rawDob = R.path(['dateOfBirth'])(idData)

  const sanctions = R.path(['sanctions'])(customer)
  const sanctionsAt = R.path(['sanctionsAt'])(customer)
  const sanctionsDisplay = !sanctionsAt
    ? 'Not checked yet'
    : sanctions
    ? 'Passed'
    : 'Failed'

  const customEntries = [] // get customer custom entries

  const isEven = elem => elem % 2 === 0

  const getVisibleCards = _.filter(
    elem => !_.isEmpty(elem.data) || !_.isNil(elem.children)
  )

  const getAvailableFields = _.filter(({ value }) => value !== '')

  const schemas = {
    idScan: Yup.object().shape({
      name: Yup.string(),
      idNumber: Yup.string(),
      birthDate: Yup.string(),
      age: Yup.string(),
      gender: Yup.string(),
      state: Yup.string(),
      expirationDate: Yup.string()
    }),
    usSsn: Yup.object().shape({
      usSsn: Yup.string()
    })
  }

  const idScanElements = [
    {
      name: 'name',
      label: 'Name',<commit_msg>fix: custom entries value<commit_after>import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import _ from 'lodash/fp'
import moment from 'moment'
import * as R from 'ramda'
import { useState, React } from 'react'
import * as Yup from 'yup'

import ImagePopper from 'src/components/ImagePopper'
import { FeatureButton } from 'src/components/buttons'
import { TextInput } from 'src/components/inputs/formik'
import { H3, Info3 } from 'src/components/typography'
import {
  OVERRIDE_AUTHORIZED,
  OVERRIDE_REJECTED
} from 'src/pages/Customers/components/propertyCard'
import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'
import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'
import { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/comet.svg'
import { ReactComponent as CustomerListViewReversedIcon } from 'src/styling/icons/circle buttons/customer-list-view/white.svg'
import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle buttons/customer-list-view/zodiac.svg'
import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'
import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'
import { URI } from 'src/utils/apollo'
import { ifNotNull } from 'src/utils/nullCheck'

import styles from './CustomerData.styles.js'
import { EditableCard } from './components'
import { getName } from './helper.js'

const useStyles = makeStyles(styles)

const imageWidth = 165
const imageHeight = 45
const popupImageWidth = 360
const popupImageHeight = 240

const Photo = ({ show, src }) => {
  const classes = useStyles({ width: imageWidth })

  return (
    <>
      {show ? (
        <ImagePopper
          src={src}
          width={imageWidth}
          height={imageHeight}
          popupWidth={popupImageWidth}
          popupHeight={popupImageHeight}
        />
      ) : (
        <div className={classes.photoWrapper}>
          <CrossedCameraIcon />
        </div>
      )}
    </>
  )
}

const CustomerData = ({ customer, updateCustomer }) => {
  const classes = useStyles()
  const [listView, setListView] = useState(false)

  const idData = R.path(['idCardData'])(customer)
  const rawExpirationDate = R.path(['expirationDate'])(idData)
  const country = R.path(['country'])(idData)
  const rawDob = R.path(['dateOfBirth'])(idData)

  const sanctions = R.path(['sanctions'])(customer)
  const sanctionsAt = R.path(['sanctionsAt'])(customer)
  const sanctionsDisplay = !sanctionsAt
    ? 'Not checked yet'
    : sanctions
    ? 'Passed'
    : 'Failed'

  const customEntries = null // get customer custom entries

  const isEven = elem => elem % 2 === 0

  const getVisibleCards = _.filter(
    elem => !_.isEmpty(elem.data) || !_.isNil(elem.children)
  )

  const getAvailableFields = _.filter(({ value }) => value !== '')

  const schemas = {
    idScan: Yup.object().shape({
      name: Yup.string(),
      idNumber: Yup.string(),
      birthDate: Yup.string(),
      age: Yup.string(),
      gender: Yup.string(),
      state: Yup.string(),
      expirationDate: Yup.string()
    }),
    usSsn: Yup.object().shape({
      usSsn: Yup.string()
    })
  }

  const idScanElements = [
    {
      name: 'name',
      label: 'Name',
{'fraction_non_alphanumeric': 0.13187608569774176, 'fraction_numerical': 0.004342790966994789, 'mean_word_length': 3.606, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 25, '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': '5102999', 'n_tokens_mistral': 2201, 'n_tokens_neox': 2142, 'n_words': 501}