text: import React, { useState } from 'react'
  import { useDispatch, useSelector } from 'react-redux'
  import { buttonsKeypad, reduceKeypad } from '@open-tender/js'
  import {
    ModalClose,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Button,
    Keypad,
  } from '@open-tender/components-pos'
  import { closeModal, selectPosName, setPosName } from '../../slices'
  
  const OrderNameModal = () => {
    const dispatch = useDispatch()
    const notes = useSelector(selectPosName)
    const [value, setValue] = useState(notes || '')
  
    const handleSubmit = () => {
      dispatch(setPosName(value))
      dispatch(closeModal())
    }
  
    return (
      <>
        <ModalClose close={() => dispatch(closeModal())} />
        <ModalHeader title="Set name for order" />
        <ModalBody>
          <Keypad
            buttons={buttonsKeypad}
            value={value}
            setValue={setValue}
            reduceValue={reduceKeypad}
            includeSpacebar={true}
            buttonColor="dark"
          />
        </ModalBody>
        <ModalFooter>
          <Button text="Submit" onClick={handleSubmit} color="active" />
        </ModalFooter>
      </>
    )
  }
  
  OrderNameModal.displayName = 'OrderNameModal'
  
  export default OrderNameModal
  