import React, { useState, useEffect } from 'react' import { ValidatorForm, TextValidator, SelectValidator, } from 'react-material-ui-form-validator' import { Button, Grid, FormControlLabel, Checkbox, Typography, MenuItem, Tooltip, Switch, } from '@material-ui/core' import { updateMerchant, detailMerchant } from 'app/apis/Functions/merchant' import { showLoading, hideLoading } from 'app/redux/actions/loadingAction' import { toast } from 'react-toastify' import { Breadcrumb, SimpleCard } from 'app/components' import { Link, useHistory, useLocation } from 'react-router-dom' import { trimObject } from 'app/config/Function' import { connect } from 'react-redux' import { useTranslation } from 'react-i18next' import { dropdownListSupplier } from 'app/apis/Functions/dropdown' const SimpleForm = (props) => { const [state, setState] = useState({}) const history = useHistory() const [isStore, setIsStore] = useState(false) const [invoice, setInvoice] = useState(false) const [payment, setPayment] = useState(false) const [isAuto, setAuto] = useState(false) const [listDrop, setListDrop] = useState([]) const [isInvoiceAuto, setInvoiceAuto] = useState(false) const { t } = useTranslation() const location = useLocation() useEffect(() => { getData() getDataDropdown() }, []) const getDataDropdown = async () => { props.showLoading() const res = await dropdownListSupplier({}) props.hideLoading() if (res.data.code == 200 && res.data.data) { const newList = res.data.data.map((e) => { return { ...e, name: e.supplier_name, id: e.supplier_code } }) setListDrop(newList) } else if (res.data.code == 401) { setTimeout(() => { history.push('/') }, 100) } else { toast.error('Lấy giữ liệu thất bại !', { theme: 'colored', }) } } useEffect(() => { if (!invoice) { setState({ ...state, hddt_tax_code: '', hddt_username: '', hddt_password: '', hddt_character: '', }) } }, [invoice]) useEffect(() => { if (!payment) { setState({ ...state, qr_merchant_code: '', qr_api_key: '', qr_secret_key: '', }) } }, [payment]) const getData = async () => { props.showLoading() const res = await detailMerchant(location.state, {}) props.hideLoading() if (res.data.code == 200 && res.data.data) { console.log(res.data.data) setState({ ...res.data.data, publish_invoce_time: `${res.data.data?.publish_invoce_time}`, }) setInvoice(res.data.data?.is_connect_hddt) setPayment(res.data.data?.is_connect_qr) setIsStore(res.data.data?.is_admin_store) setAuto(res.data.data?.is_hddt_nomal) setInvoiceAuto(res.data.data?.is_invoice_auto) } else if (res.data.code == 401) { setTimeout(() => { history.push('/') }, 100) } else { toast.error(t(res.data.error), { theme: 'colored', }) } } const handleSubmit = async (event) => { const newValue = trimObject(state) props.showLoading() const res = await updateMerchant({ ...newValue, is_admin_store: isStore, is_connect_hddt: invoice, is_connect_qr: payment, is_hddt_nomal: isAuto, is_invoice_auto: isInvoiceAuto, }) props.hideLoading() if (res.data.code == 200) { history.push('/merchant') if (res.data.code == 200) { toast.success('Cập nhật pháp nhân thành công!', { theme: 'colored', }) } } else { toast.error(t(res.data.error), { theme: 'colored', }) } } const handleChange = (event) => { event.persist() setState({ ...state, [event.target.name]: event.target.value, }) } const { merchant_name, tax_code, address, email, phone_number, representative, username, hddt_tax_code, hddt_username, hddt_password, hddt_character, qr_merchant_code, qr_api_key, qr_secret_key, hddt_sign_code, hddt_account, hddt_acpass, hddt_base_url, inv_pattern, inv_serial, publish_invoce_time, supplier_code, } = state return ( <div className="m-sm-30"> <div className="mb-sm-30"> <div className="mb-sm-30"> <Breadcrumb routeSegments={[ { name: 'Danh sách pháp nhân', path: '/merchant', }, { name: 'Cập nhật pháp nhân' }, ]} /> </div> <SimpleCard> <ValidatorForm onSubmit={handleSubmit} onError={() => null}> <Grid container spacing={3}> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tên pháp nhân *" onChange={handleChange} type="text" name="merchant_name" value={merchant_name || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mã số thuế *" onChange={handleChange} type="text" name="tax_code" value={tax_code || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Địa chỉ *" onChange={handleChange} type="text" name="address" value={address || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Email *" onChange={handleChange} type="text" name="email" value={email || ''} validators={['required', 'isEmail']} errorMessages={[ 'Không được để trống trường này', 'Email không hợp lệ', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tên người đại diện *" onChange={handleChange} type="text" name="representative" value={representative || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Số điện thoại liên hệ *" onChange={handleChange} type="text" name="phone_number" value={phone_number || ''} validators={[ 'required', 'isNumber', 'minStringLength:10', 'maxStringLength:15', ]} errorMessages={[ 'Không được để trống trường này', 'Trường này phải nhập số ', 'Số điện thoại phải có ít nhất 10 chữ số', 'Số điện thoại nhiều nhất chỉ có 15 chữ số', ]} /> </Grid> <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" disabled={true} label="Tên đăng nhập *" onChange={handleChange} type="text" name="username" value={username || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> <Grid lg={12} md={12} sm={12} xs={12} item> <FormControlLabel className="min-w-288" control={ <Checkbox size="small" color="primary" onChange={(event) => { console.log( event.target.checked ) setIsStore(event.target.checked) }} checked={isStore} /> } label="Pháp nhân là chủ cửa hàng" /> </Grid> <Grid lg={12} md={12} sm={12} xs={12} item> <Typography variant="h6"> Thông tin tích hợp </Typography> </Grid> <Grid lg={12} md={12} sm={12} xs={12} item> <FormControlLabel className="min-w-288" control={ <Checkbox size="small" name={'he1'} color="primary" onChange={(event) => { setInvoice(event.target.checked) }} checked={invoice} /> } label="Tích hợp hóa đơn" /> </Grid> {invoice ? ( <Grid xs={6} sm={6} item> <SelectValidator variant={'outlined'} label={'Đơn vị cung cấp'} className="mb-4 w-full" value={supplier_code || ''} displayEmpty name="supplier_code" onChange={handleChange} > {listDrop.map((e) => ( <MenuItem value={e.id}> {e.name} </MenuItem> ))} </SelectValidator> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mã số thuế hoá đơn" onChange={handleChange} type="text" name="hddt_tax_code" value={hddt_tax_code || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tài khoản hoá đơn" onChange={handleChange} type="text" name="hddt_username" value={hddt_username || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mật khẩu hoá đơn" onChange={handleChange} type="text" name="hddt_password" value={hddt_password || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Chữ ký hoá đơn" onChange={handleChange} type="text" name="hddt_character" value={hddt_character || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Loại chữ ký số" onChange={handleChange} type="text" name="hddt_sign_code" value={hddt_sign_code || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Tài khoản Admin hoá đơn điện tử" onChange={handleChange} type="text" name="hddt_account" value={hddt_account || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mật khẩu Admin hoá đơn điện tử" onChange={handleChange} type="text" name="hddt_acpass" value={hddt_acpass || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Đường dẫn api" onChange={handleChange} type="text" name="hddt_base_url" value={hddt_base_url || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mẫu hoá đơn" onChange={handleChange} type="text" name="inv_pattern" value={inv_pattern || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Ký hiệu hoá đơn" onChange={handleChange} type="text" name="inv_serial" value={inv_serial || ''} /> </Grid> ) : null} {invoice ? ( <Grid lg={6} md={6} sm={12} xs={12} item> <Tooltip title="Cho phép chỉnh sửa thông tin giao dịch trước khi phát hành"> <FormControlLabel className="min-w-288" control={ <Checkbox size="small" color="primary" onChange={(event) => { setAuto( event.target.checked ) }} checked={isAuto} value={isAuto} /> } label="Cho phép chỉnh sửa thông tin giao dịch trước khi phát hành" /> </Tooltip> </Grid> ) : null} {invoice ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Độ trễ phát hành hoá đơn" onChange={handleChange} type="text" name="publish_invoce_time" value={publish_invoce_time || ''} /> </Grid> ) : null} {invoice ? ( <Grid item lg={12} md={12} sm={12} xs={12} style={{ paddingTop: 20, }} > <Switch onChange={(event) => { setInvoiceAuto(event.target.checked) }} checked={isInvoiceAuto} color="primary" size="medium" /> <span style={{ fontSize: 18, marginLeft: 20, marginTop: 5, }} > Cho phép xuất hóa đơn tự động </span> </Grid> ) : null} <Grid lg={12} md={12} sm={12} xs={12} item> <FormControlLabel className="min-w-288" control={ <Checkbox size="small" color="primary" name={'he2'} onChange={(event) => { setPayment(event.target.checked) }} checked={payment} /> } label="Tích hợp thanh toán" /> </Grid> {payment ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mã QR code *" onChange={handleChange} type="text" name="qr_merchant_code" value={qr_merchant_code || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> ) : null} {payment ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="API QR key *" onChange={handleChange} type="text" name="qr_api_key" value={qr_api_key || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> ) : null} {payment ? ( <Grid item lg={6} md={6} sm={12} xs={12}> <TextValidator variant="outlined" className="mb-4 w-full" label="Mật khẩu QR *" onChange={handleChange} type="text" name="qr_secret_key" value={qr_secret_key || ''} validators={['required']} errorMessages={[ 'Không được để trống trường này', ]} /> </Grid> ) : null} </Grid> <Grid container justify={'flex-end'}> <Button style={{ marginRight: 20, }} color="inherit" variant="contained" onClick={() => { history.goBack() }} > <span className="capitalize">Quay lại</span> </Button> <Button color="primary" variant="contained" type="submit" > <span className="capitalize">Cập nhật</span> </Button> </Grid> </ValidatorForm> </SimpleCard> </div> </div> ) } const mapStateToProps = (state) => { return {} } export default connect(mapStateToProps, { showLoading, hideLoading })( SimpleForm )