{"version":3,"file":"static/js/570.146164cc.chunk.js","mappings":"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","sources":["views/riwayat/tanya-tim.js"],"sourcesContent":["import { useEffect, useState, useRef } from \"react\";\r\nimport { Link, useLocation, useNavigate } from \"react-router-dom\";\r\nimport { getDetailRiwayatOrder, getDataHelpDesk, createQuestionHelpDesk } from \"../../services/API\";\r\nimport LoadingAlert from \"../../component/alert/loadingAlert\";\r\nimport ScrollToBottom from 'react-scroll-to-bottom';\r\nimport useDetectKeyboardOpen from \"use-detect-keyboard-open\";\r\n\r\nfunction Chat() {\r\n    const [dataRiwayatOrder, setDataRiwayatOrder] = useState([])\r\n    const [dataChat, setDataChat] = useState([])\r\n    const [message, setMessage] = useState('')\r\n    const [loading, setLoading] = useState(true)\r\n    const [inputKey, setInputKey] = useState(0)\r\n    const [keyboardHeight, setKeyboardHeight] = useState(0)\r\n    const maxRows = 1\r\n    const location = useLocation()\r\n    const navigate = useNavigate()\r\n    const textareaRef = useRef(null)\r\n\r\n    useEffect(() => {\r\n        getDataRiwayatOrder()\r\n\r\n        if('virtualKeyboard' in navigator) {\r\n            navigator.virtualKeyboard.overlaysContent = true\r\n    \r\n            navigator.virtualKeyboard.addEventListener(\"geometrychange\", (event) => {\r\n                const { x, y, width, height } = event.target.boundingRect;\r\n                setKeyboardHeight(height)\r\n            })\r\n        }\r\n    }, []); \r\n\r\n    const getDataRiwayatOrder = async () => {\r\n        setLoading(true)\r\n        const res = await getDetailRiwayatOrder(location.state?.id)\r\n        const response = await getDataHelpDesk(res.data.requestNo)\r\n        setLoading(false)\r\n        if (res.status === 200 && response.status === 200) {\r\n            setDataRiwayatOrder(res.data)\r\n            setDataChat(response.data.Table)\r\n        }\r\n    }\r\n\r\n    const getNameRequestType = () => {\r\n        if (dataRiwayatOrder && dataRiwayatOrder.requestd) {\r\n            return dataRiwayatOrder.requestd.map((item) => item.namarequesttype).join(\", \")\r\n        } else {\r\n            return \"\"\r\n        }\r\n    }\r\n    const clearInput = () => {\r\n        setMessage('')\r\n    }\r\n\r\n    const createFormattedDate = () => {\r\n        const currentDate = new Date();\r\n        console.log(currentDate)\r\n        const year = currentDate.getFullYear();\r\n        const month = String(currentDate.getMonth() + 1).padStart(2, '0');\r\n        const date = String(currentDate.getDate()).padStart(2, '0');\r\n        const hours = String(currentDate.getHours()).padStart(2, '0');\r\n        const minutes = String(currentDate.getMinutes()).padStart(2, '0');\r\n        const seconds = String(currentDate.getSeconds()).padStart(2, '0');\r\n        const milliseconds = String(currentDate.getMilliseconds()).padStart(3, '0');\r\n\r\n        return `${year}-${month}-${date}T${hours}:${minutes}:${seconds}.${milliseconds}`;\r\n    }\r\n\r\n    const formatDate = (val) => {\r\n        var date = new Date(val)\r\n\r\n        var day = date.getDate().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })\r\n        var month = (date.getMonth() + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })\r\n        var year = date.getFullYear().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })\r\n        var hours = date.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })\r\n        var minutes = date.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })\r\n        var ampm = (date.getHours() >= 12) ? 'PM' : 'AM'\r\n        \r\n        hours = (hours % 12 === 0) ? 12 : hours % 12\r\n        return `${ day }/${ month }/${ year } ${ hours }:${ minutes } ${ ampm }`\r\n    }\r\n\r\n    const handleGoBack = (e) => {\r\n        e.preventDefault()\r\n        \r\n        navigate(-1)\r\n    }\r\n\r\n\r\n    const submit = async (e) => {\r\n        e.preventDefault()\r\n\r\n        let isValid = true\r\n\r\n        if (message === \"\"){\r\n            isValid = false\r\n        }\r\n\r\n    \r\n\r\n        if(isValid) {\r\n            const trimmedMessage = message.trim()\r\n            if(trimmedMessage !== '') {\r\n                const newMessage = {\r\n                    type: 'Tanya',\r\n                    Description: message,\r\n                    CreateDate: createFormattedDate()\r\n                }\r\n\r\n            \r\n\r\n                setDataChat([...dataChat, newMessage]) \r\n                // chatRef.current.scrollTop = chatRef.current.scrollHeight\r\n\r\n                try {\r\n                    const res = await createQuestionHelpDesk({\r\n                        UserId: localStorage.getItem('id'),\r\n                        tRequestId: dataRiwayatOrder.requestNo,\r\n                        type: 'Tanya',\r\n                        Description: message,\r\n                        UserAgent: ''\r\n                    })\r\n        \r\n                    if(res.status === 200 && res.data.includes('Succes submit Tanya Jawab')) {\r\n                        setMessage('')\r\n                        textareaRef.current.value = ''\r\n                        clearInput()\r\n                        setInputKey(prevKey => prevKey + 1)\r\n                    }\r\n                } catch (error) {\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    const isKeyboardOpen = useDetectKeyboardOpen()\r\n\r\n    return (\r\n        <>\r\n            <div className=\"responsive-bar\">\r\n                <Link className=\"list-items\" onClick={handleGoBack}>\r\n                    <i className=\"fa fa-arrow-left me-3\" style={{fontSize: 16, color:'#014C90'}}></i>\r\n                    <strong className=\"title-icare\" style={{fontSize: 18, borderBottom:'3px solid #014C90'}}>Tim Support iCare</strong>\r\n                </Link>\r\n            </div> \r\n            <div className=\"card shadow border-0 py-3 px-4 rounded-4\">\r\n                <div className=\"card-body row chat-container rounded-3 p-0\">\r\n                    <div className=\"col-md-3 col-12 header text-center py-md-5 py-2\" style={{borderRight: '3px solid #014C90'}}>\r\n                        <h5 style={{color: '#014C90', fontWeight: 'bold'}}>{dataRiwayatOrder?.namarequest}</h5>\r\n                        <p className=\"m-md-1 m-0 small\">{formatDate(dataRiwayatOrder?.createdate)}</p>\r\n                        <p className=\"m-md-1 m-0 small\">{dataRiwayatOrder?.requestNo}</p>\r\n                        <p className=\"m-md-1 m-0 small\">EQ : {dataRiwayatOrder?.equipment}</p>\r\n                        <p className=\"m-md-1 m-0 small\">{getNameRequestType()}</p>\r\n                    </div>\r\n                    <div className={ `col-md-9 col-12 chat-responsive mb-3 mb-md-0 p-0 ${ isKeyboardOpen ? 'keyboard-opened' : '' }` } style={{backgroundColor: '#bfbfbf', bottom: keyboardHeight}}>\r\n                        <div style={{position: 'relative', height: '100%'}}>\r\n                            <div className=\"card-chat\">\r\n                                <ScrollToBottom className=\"card-body-chat px-3 py-2\">\r\n                                {\r\n                                    dataChat?.map((value,key) => (\r\n                                        <div className={value.type === \"Tanya\" ? 'question-display' : 'answer-display'} key={key}>\r\n                                            <p className=\"mb-0 small\">{value.Description}</p> \r\n                                            <p className=\"time mb-0\" style={{fontSize: '10px'}}>{value.CreateDate.split('T')[1].slice(0, 5)}</p>\r\n                                        </div>\r\n                                    )) \r\n                                }\r\n                                </ScrollToBottom>\r\n                            </div>\r\n                            <div className=\"input-chat\">\r\n                                <textarea className=\"text-area small\" defaultValue={message}ref={textareaRef} onChange={(e) => setMessage(e.target.value)}></textarea> \r\n                                <button onClick={submit}>\r\n                                    <i className=\"fa fa-paper-plane\"></i>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <LoadingAlert visible={loading} customClass=\"col-md-2 col-8\" />\r\n        </>\r\n    )\r\n}\r\n\r\nexport default Chat"],"names":["dataRiwayatOrder","setDataRiwayatOrder","useState","dataChat","setDataChat","message","setMessage","loading","setLoading","inputKey","setInputKey","keyboardHeight","setKeyboardHeight","location","useLocation","navigate","useNavigate","textareaRef","useRef","useEffect","getDataRiwayatOrder","navigator","virtualKeyboard","overlaysContent","addEventListener","event","x","y","width","height","target","boundingRect","async","_location$state","res","getDetailRiwayatOrder","state","id","response","getDataHelpDesk","data","requestNo","status","Table","createFormattedDate","currentDate","Date","console","log","getFullYear","String","getMonth","padStart","getDate","getHours","getMinutes","getSeconds","getMilliseconds","isKeyboardOpen","useDetectKeyboardOpen","_jsxs","_Fragment","children","_jsx","className","Link","onClick","e","preventDefault","style","fontSize","color","borderBottom","borderRight","fontWeight","namarequest","val","date","day","toLocaleString","minimumIntegerDigits","useGrouping","month","year","hours","formatDate","createdate","equipment","requestd","map","item","namarequesttype","join","backgroundColor","bottom","position","ScrollToBottom","value","key","type","Description","CreateDate","split","slice","defaultValue","ref","onChange","isValid","trim","newMessage","createQuestionHelpDesk","UserId","localStorage","getItem","tRequestId","UserAgent","includes","current","prevKey","error","LoadingAlert","visible","customClass"],"sourceRoot":""}