519 lines
20 KiB
JavaScript
519 lines
20 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import { __ } from '@wordpress/i18n';
|
||
import { isEmpty, pathOr, head } from 'ramda';
|
||
import { klona } from 'klona';
|
||
import { wrap } from 'object-path-immutable';
|
||
import { useForm } from 'react-hook-form';
|
||
|
||
// store
|
||
import { storeSet, useStore, storeGet } from '../../store';
|
||
|
||
// api
|
||
import CompanyService from '../../service/company-service';
|
||
|
||
// tools
|
||
import { isPIVA, isEmail, isEmailPEC } from '../../helpers/validators';
|
||
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
|
||
|
||
// components
|
||
import { Messages } from 'primereact/messages';
|
||
import FormField from '../../components/FormField';
|
||
import { Button } from 'primereact/button';
|
||
import BlockingOverlay from '../../components/BlockingOverlay';
|
||
import { InputText } from 'primereact/inputtext';
|
||
import FileuploadDelega from '../../components/FileuploadDelega';
|
||
import { Toast } from 'primereact/toast';
|
||
import getFormatedFileSizeText from '../../helpers/getFormatedFileSizeText';
|
||
import { defaultMaxFileSize } from '../../configData';
|
||
|
||
const ProfileCompany = () => {
|
||
const isAsyncRequest = useStore().main.isAsyncRequest();
|
||
const chosenCompanyId = useStore().main.chosenCompanyId();
|
||
const companies = useStore().main.companies();
|
||
const infoMsgs = useRef(null);
|
||
const [formInitialData, setFormInitialData] = useState({});
|
||
const [delegaData, setDelegaData] = useState({});
|
||
const [delega, setDelega] = useState([]);
|
||
const { delegaFirstName = '', delegaLastName = '', delegaCodiceFiscale = '' } = delegaData;
|
||
const toast = useRef(null);
|
||
|
||
const {
|
||
control,
|
||
handleSubmit,
|
||
formState: { errors },
|
||
setValue,
|
||
watch,
|
||
reset
|
||
} = useForm({
|
||
defaultValues: useMemo(() => {
|
||
return formInitialData;
|
||
}, [formInitialData]),
|
||
mode: 'onChange'
|
||
});
|
||
const isLegalRepresentant = watch('isLegalRepresentant')
|
||
|
||
const setEmptyValues = () => {
|
||
const formData = {
|
||
cap: '',
|
||
pec: '',
|
||
email: '',
|
||
city: '',
|
||
codiceFiscale: '',
|
||
address: '',
|
||
companyName: ''
|
||
}
|
||
Object.keys(formData).map(k => setValue(k, formData[k]));
|
||
}
|
||
|
||
const onSubmit = (formData) => {
|
||
infoMsgs.current.clear();
|
||
storeSet.main.setAsyncRequest();
|
||
|
||
CompanyService.updateCompany(formData.id, formData, updateCallback, updateError);
|
||
};
|
||
|
||
const updateCallback = (data) => {
|
||
if (data.status === 'SUCCESS') {
|
||
const company = klona(data.data);
|
||
const companies = storeGet.main.companies();
|
||
const existingCompany = head(companies.filter(o => o.id === company.id));
|
||
let newCompanies = [];
|
||
|
||
if (existingCompany) {
|
||
newCompanies = companies.map(o => o.id === company.id ? company : o)
|
||
} else {
|
||
newCompanies = [...companies, company];
|
||
storeSet.main.chosenCompanyId(company.id);
|
||
console.log('set company 3', company.id)
|
||
}
|
||
|
||
storeSet.main.companies(newCompanies);
|
||
|
||
if (toast.current) {
|
||
toast.current.show({
|
||
severity: 'success',
|
||
summary: '',
|
||
detail: __('L\'azienda è stata aggiornata!', 'gepafin')
|
||
});
|
||
}
|
||
}
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const updateError = (data) => {
|
||
set404FromErrorResponse(data);
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const checkVatNumber = (e) => {
|
||
infoMsgs.current.clear();
|
||
const isValid = isPIVA(e.target.value);
|
||
|
||
if (isValid) {
|
||
storeSet.main.setAsyncRequest();
|
||
CompanyService.checkVat(checkVatCallback, errCheckVatCallback, [['vatNumber', e.target.value]])
|
||
} else {
|
||
setEmptyValues();
|
||
}
|
||
}
|
||
|
||
const checkVatCallback = (data) => {
|
||
if (data.status === 'SUCCESS') {
|
||
const resp = data.data.data;
|
||
if (!isEmpty(resp)) {
|
||
const {
|
||
cap, cf, denominazione, piva, indirizzo, comune, dettaglio: { pec }
|
||
} = resp;
|
||
|
||
const formData = {
|
||
cap,
|
||
pec,
|
||
email: pec,
|
||
city: comune,
|
||
codiceFiscale: cf,
|
||
address: indirizzo,
|
||
vatNumber: piva,
|
||
companyName: denominazione
|
||
}
|
||
Object.keys(formData).map(k => setValue(k, formData[k]));
|
||
}
|
||
//setData(getFormattedBandiData(data.data));
|
||
} else {
|
||
setEmptyValues();
|
||
}
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const errCheckVatCallback = (data) => {
|
||
setEmptyValues();
|
||
set404FromErrorResponse(data);
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const setDelegaFieldValue = (value, name) => {
|
||
const newDelegaData = wrap(delegaData).set([name], value).value();
|
||
setDelegaData(newDelegaData)
|
||
}
|
||
|
||
const setDelegaFile = (name, value) => {
|
||
setDelega(value);
|
||
}
|
||
|
||
const getDellegaCallback = (data) => {
|
||
if (data.data) {
|
||
setDelega([data.data]);
|
||
}
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const errDellegaCallback = () => {
|
||
setDelega([]);
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const downloadDelega = () => {
|
||
storeSet.main.setAsyncRequest();
|
||
const data = {
|
||
codiceFiscale: delegaCodiceFiscale,
|
||
firstName: delegaFirstName,
|
||
lastName: delegaLastName
|
||
}
|
||
CompanyService.downloadCompanyDelega(formInitialData.id, data, getDellegaDownloadCallback, errDellegaDownloadCallback)
|
||
}
|
||
|
||
const getDellegaDownloadCallback = (data) => {
|
||
const pdfFile = new Blob([data], { type: 'application/octet-stream' })
|
||
const url = window.URL.createObjectURL(pdfFile);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.setAttribute('download', 'delega.docx');
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
const errDellegaDownloadCallback = () => {
|
||
storeSet.main.unsetAsyncRequest();
|
||
}
|
||
|
||
useEffect(() => {
|
||
const newFormData = klona(formInitialData);
|
||
Object.keys(newFormData).map(v => setValue(v, newFormData[v]));
|
||
}, [formInitialData]);
|
||
|
||
useEffect(() => {
|
||
reset();
|
||
let chosenCompany = {};
|
||
|
||
if (chosenCompanyId) {
|
||
chosenCompany = head(companies.filter(o => o.id === chosenCompanyId));
|
||
}
|
||
|
||
if (!chosenCompany) {
|
||
chosenCompany = pathOr({}, [0], companies);
|
||
}
|
||
|
||
const {
|
||
cap, codiceFiscale, companyName, vatNumber, address, city, pec, email,
|
||
contactName, contactEmail, isLegalRepresentant, id
|
||
} = chosenCompany;
|
||
const companyData = {
|
||
id,
|
||
cap,
|
||
pec,
|
||
email,
|
||
city,
|
||
codiceFiscale,
|
||
address,
|
||
vatNumber,
|
||
companyName,
|
||
contactName,
|
||
contactEmail,
|
||
isLegalRepresentant
|
||
}
|
||
|
||
setFormInitialData(companyData);
|
||
}, [chosenCompanyId, companies]);
|
||
|
||
useEffect(() => {
|
||
if (formInitialData.id) {
|
||
storeSet.main.setAsyncRequest();
|
||
CompanyService.getCompanyDelega(formInitialData.id, getDellegaCallback, errDellegaCallback);
|
||
}
|
||
}, [formInitialData])
|
||
|
||
return (
|
||
<div className="appPage">
|
||
<div className="appPage__pageHeader">
|
||
<h1>{__('Profilo aziendale', 'gepafin')}</h1>
|
||
</div>
|
||
|
||
<div className="appPage__spacer"></div>
|
||
<Messages ref={infoMsgs}/>
|
||
<Toast ref={toast}/>
|
||
|
||
<form id="companyForm" className="appForm" onSubmit={handleSubmit(onSubmit)}>
|
||
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
|
||
<div className="appPageSection">
|
||
<h2>{__('Informazioni aziendali', 'gepafin')}</h2>
|
||
<div className="appForm__cols">
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="companyName"
|
||
label={__('Ragione Sociale', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
placeholder="Nome di azienda"
|
||
/>
|
||
</div>
|
||
|
||
<div className="appForm__cols">
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="vatNumber"
|
||
disabled={true}
|
||
label={__('P.IVA', 'gepafin')}
|
||
onBlurFn={checkVatNumber}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>
|
||
|
||
<FormField
|
||
type="textinput"
|
||
disabled={true}
|
||
fieldName="codiceFiscale"
|
||
label={__('Codice fiscale', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="appForm__cols">
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="pec"
|
||
label={__('Email PEC', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{
|
||
required: __('È obbligatorio', 'gepafin'),
|
||
validate: {
|
||
isEmailPEC
|
||
}
|
||
}}
|
||
/>
|
||
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="email"
|
||
label={__('Email', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{
|
||
required: __('È obbligatorio', 'gepafin'),
|
||
validate: {
|
||
isEmail
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/*<FormField
|
||
type="textinput"
|
||
fieldName="phoneNumber"
|
||
label={__('Telefono', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>*/}
|
||
</div>
|
||
|
||
<div className="appForm__cols">
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="address"
|
||
label={__('Indirizzo', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>
|
||
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="city"
|
||
label={__('Città', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>
|
||
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="cap"
|
||
label={__('CAP', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>
|
||
</div>
|
||
|
||
<div className="appForm__cols">
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="contactName"
|
||
label={__('Nome di referente aziendale', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>
|
||
|
||
<FormField
|
||
type="textinput"
|
||
fieldName="contactEmail"
|
||
label={__('Email di referente aziendale', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{
|
||
required: __('È obbligatorio', 'gepafin'),
|
||
validate: {
|
||
isEmail
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/*<FormField
|
||
type="textinput"
|
||
fieldName="phoneNumber"
|
||
label={__('Telefono', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
config={{ required: __('È obbligatorio', 'gepafin') }}
|
||
/>*/}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="appPageSection">
|
||
<FormField
|
||
type="switch"
|
||
fieldName="isLegalRepresentant"
|
||
label={__('Sei il Rappresentante Legale dell’azienda?', 'gepafin')}
|
||
control={control}
|
||
errors={errors}
|
||
onLabel={__('Si', 'gepafin')}
|
||
offLabel={__('No', 'gepafin')}
|
||
/>
|
||
</div>
|
||
</form>
|
||
|
||
{!isLegalRepresentant
|
||
? <div className="appForm__delegaForm">
|
||
<div className="appForm__delegaFormHeader">
|
||
<legend>{__('Compilazione Delega', 'gepafin')}</legend>
|
||
<p className="appForm__delegaFormText">{__('Per procedere come delegato, compila il form seguente, scarica il documento della delega, fallo firmare dal rappresentante legale e ricaricalo.', 'gepafin')}</p>
|
||
</div>
|
||
|
||
<div className="appForm__cols">
|
||
<div className="appForm__field">
|
||
<label htmlFor="delegaFirstName">
|
||
{__('Nome del rappresentante legale', 'gepafin')}
|
||
<span className="appForm__field--required">*</span>
|
||
</label>
|
||
<InputText
|
||
id="delegaFirstName"
|
||
value={delegaFirstName}
|
||
onChange={(e) => setDelegaFieldValue(e.target.value, 'delegaFirstName')}/>
|
||
</div>
|
||
|
||
<div className="appForm__field">
|
||
<label htmlFor="delegaLastName">
|
||
{__('Cognome del rappresentante legale', 'gepafin')}
|
||
<span className="appForm__field--required">*</span>
|
||
</label>
|
||
<InputText
|
||
id="delegaLastName"
|
||
value={delegaLastName}
|
||
onChange={(e) => setDelegaFieldValue(e.target.value, 'delegaLastName')}/>
|
||
</div>
|
||
|
||
<div className="appForm__field">
|
||
<label htmlFor="delegaCodiceFiscale">
|
||
{__('Codice fiscale del rappresentante legale', 'gepafin')}
|
||
<span className="appForm__field--required">*</span>
|
||
</label>
|
||
<InputText
|
||
id="delegaCodiceFiscale"
|
||
value={delegaCodiceFiscale}
|
||
onChange={(e) => setDelegaFieldValue(e.target.value, 'delegaCodiceFiscale')}/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Button
|
||
disabled={isEmpty(delegaCodiceFiscale) || isEmpty(delegaFirstName) || isEmpty(delegaLastName)}
|
||
onClick={downloadDelega}
|
||
type="button"
|
||
label={__('Genera documento Delega', 'gepafin')}
|
||
icon="pi pi-check" iconPos="right"/>
|
||
</div>
|
||
|
||
<div className="appForm__field">
|
||
<label htmlFor="delega">
|
||
{__('Carica documento Delega Firmato', 'gepafin')}
|
||
<span className="appForm__field--required">*</span>
|
||
{' (.p7m) '}
|
||
{`(max ${getFormatedFileSizeText(defaultMaxFileSize)})`}
|
||
</label>
|
||
<FileuploadDelega
|
||
setDataFn={setDelegaFile}
|
||
fieldName="delega"
|
||
defaultValue={delega}
|
||
accept={['.p7m,application/pkcs7-mime,application/x-pkcs7-mime']}
|
||
chooseLabel={__('Aggiungi documento', 'gepafin')}
|
||
multiple={false}
|
||
doctype="document"
|
||
companyId={formInitialData.id}
|
||
/>
|
||
</div>
|
||
|
||
{/*<div className="appForm__delegaFormActions">
|
||
<Button
|
||
type="button"
|
||
disabled={true}
|
||
outlined
|
||
onClick={() => {
|
||
}}
|
||
label={__('Visualizza delega', 'gepafin')} icon="pi pi-eye" iconPos="right"/>
|
||
<Button
|
||
type="button"
|
||
disabled={true}
|
||
outlined
|
||
onClick={() => {
|
||
}}
|
||
label={__('Sostituisci delega', 'gepafin')} icon="pi pi-sync" iconPos="right"/>
|
||
</div>*/}
|
||
|
||
</div> : <div className="appPage__spacer"></div>}
|
||
|
||
<div className="appPageSection__hr">
|
||
<span>{__('Azioni rapide', 'gepafin')}</span>
|
||
</div>
|
||
|
||
<div className="appPageSection">
|
||
<div className="appPageSection__actions">
|
||
<Button
|
||
form="companyForm"
|
||
/*disabled={isAsyncRequest || emptyValues || values.id}*/
|
||
label={__('Salva modifiche', 'gepafin')}
|
||
icon="pi pi-check" iconPos="right"/>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
)
|
||
|
||
}
|
||
|
||
export default ProfileCompany; |