Skip to content

Commit a662a5c

Browse files
emnlpstrsebbalex
emnlpstr
authored and
sebbalex
committed
fix: form assistenza ux and ui elements (#347)
* progress * progress * assistenza form fixed * fix lint * fix form data from SF Co-authored-by: emnlpstr <[email protected]>
1 parent 2bdb9bc commit a662a5c

File tree

6 files changed

+96
-30
lines changed

6 files changed

+96
-30
lines changed

‎src/components/HeroVideo.jsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,19 +79,16 @@ export const HeroVideo = () => {
7979
Trascrizione del video
8080
</AccordionHeader>
8181
<AccordionBody active={collapseOpen}>
82-
Intro<br></br>
8382
PA digitale 2026 è il punto di accesso alle risorse previste dal PNRR per la transizione digitale della PA.
8483
<br></br>
8584
<br></br>
86-
Descrizione passaggi registrazione<br></br>
8785
Registrare la tua amministrazione è semplice:<br></br>● se sei un rappresentante legale di un Ente o un suo
8886
incaricato, puoi accedere alla piattaforma con identità digitale SPID o CIE.<br></br>● Inserisci la tua
8987
email istituzionale, e attiva il profilo dell’amministrazione indicando il nome della PA o il codice IPA.
9088
<br></br>● Verifica i dati del tuo Ente: se c’è qualche incongruenza nei dati, modificali direttamente su
9189
IPA.<br></br>● La conferma di registrazione avverrà cliccando sul link di verifica che riceverai alla PEC
9290
del tuo Ente.<br></br>
9391
<br></br>
94-
Chiusura<br></br>
9592
Ora puoi candidare la tua amministrazione agli avvisi pubblici per renderla più digitale, sicura ed
9693
efficiente.
9794
</AccordionBody>

‎src/layouts/AssistenzaPage.jsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,7 @@ export const AssistenzaPage = () => {
490490
const orgId = {
491491
dev: '00D3N0000004K3l',
492492
collaudo: '00D3N0000008lSz',
493+
prod: '00D7Q000001NvsR',
493494
};
494495

495496
const {
@@ -560,7 +561,7 @@ export const AssistenzaPage = () => {
560561
<Row>
561562
<Col xs="12">
562563
<form
563-
action="https://padigitale2026--collaudo.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8"
564+
action="https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8"
564565
method="POST"
565566
className={classes.formMessage}
566567
id="assistance-form"
@@ -570,10 +571,10 @@ export const AssistenzaPage = () => {
570571
<input
571572
type="hidden"
572573
name="captcha_settings"
573-
value={`{"keyname":"COLLTEST","fallback":"true","orgId":"${orgId.collaudo}","ts":""}`}
574+
value={`{"keyname":"reCAPTCHA_prod","fallback":"true","orgId":"${orgId.prod}","ts":""}`}
574575
/>
575576
<input type="hidden" name="debug" value={1} />
576-
<input type="hidden" name="orgid" value={orgId.collaudo} />
577+
<input type="hidden" name="orgid" value={orgId.prod} />
577578
<Row className="mt-5">
578579
<Col xs={12} md={6} lg={4}>
579580
<Input
@@ -582,8 +583,8 @@ export const AssistenzaPage = () => {
582583
maxLength="80"
583584
aria-describedby="mandatory-label"
584585
type="email"
585-
id="00N3N00000GYuAx"
586-
name="00N3N00000GYuAx"
586+
id="00N7Q000007qqu1"
587+
name="00N7Q000007qqu1"
587588
aria-required="true"
588589
onInvalid={customInvalid}
589590
required={true}
@@ -596,8 +597,8 @@ export const AssistenzaPage = () => {
596597
maxLength="40"
597598
aria-describedby="mandatory-label"
598599
type="text"
599-
id="00N3N00000GYuAr"
600-
name="00N3N00000GYuAr"
600+
id="00N7Q000007qqts"
601+
name="00N7Q000007qqts"
601602
pattern="^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$"
602603
onInvalid={customInvalid}
603604
onChange={handleChangeTel}
@@ -614,7 +615,7 @@ export const AssistenzaPage = () => {
614615
<Select
615616
id="argument-select"
616617
inputId="argument-select-input"
617-
dataRefer="00N3N00000GYuAm"
618+
dataRefer="00N7Q000007qqtk"
618619
options={selectArgument}
619620
onChange={handleArgument}
620621
placeholder={selectPlaceholder}
@@ -625,8 +626,8 @@ export const AssistenzaPage = () => {
625626
/>
626627
<select
627628
className="d-none"
628-
id="00N3N00000GYuAm"
629-
name="00N3N00000GYuAm"
629+
id="00N7Q000007qqtk"
630+
name="00N7Q000007qqtk"
630631
title="Argomento"
631632
required={true}
632633
onInvalid={customInvalid}
@@ -680,7 +681,7 @@ export const AssistenzaPage = () => {
680681
</Row>
681682
<input type="hidden" id="external" name="external" value="1" />
682683
<input type="hidden" name="origin" value="Area pubblica" />
683-
<input type="hidden" name="recordType" value="0123N000003LK6m" />
684+
<input type="hidden" name="recordType" value="0127Q0000001c35" />
684685
<input type="hidden" id="priority" name="priority" value="Medium" />
685686
<input type="hidden" name="debug" value="1" />
686687
<input type="hidden" name="debugEmail" value="[email protected]" />

‎src/layouts/CreaProfiloPage.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,8 @@ export const CreaProfiloPage = () => {
200200
<h4 className={classes.titleUpdate}>Attiva il profilo della tua PA: identità digitale e dati IPA</h4>
201201
<div className={classes.subtitleUpdate}>
202202
<strong>Per partecipare agli avvisi</strong> è necessario che il{' '}
203-
<strong>rappresentante legale di un'amministrazione presente su IPA</strong> (Indice dei domini digitali
204-
della Pubblica Amministrazione), o una persona incaricata,{' '}
203+
<strong>rappresentante legale di un'amministrazione presente su IPA</strong> (Indice dei domicili
204+
digitali della Pubblica Amministrazione), o una persona incaricata,{' '}
205205
<strong>avvii la procedura di attivazione della PA sulla piattaforma</strong>.
206206
</div>
207207
</Col>
@@ -236,6 +236,8 @@ export const CreaProfiloPage = () => {
236236
<a
237237
href="https://www.indicepa.gov.it/ipa-portale/consultazione/indirizzo-sede/ricerca-ente"
238238
className="d-inline-flex align-items-center"
239+
target="_blank"
240+
rel="noreferrer"
239241
>
240242
IPA <img src="/assets/external-link.svg" alt="" />
241243
</a>

‎src/layouts/FaqPage.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable max-lines-per-function */
12
/* eslint-disable react/no-unescaped-entities */
23
/* eslint-disable react-hooks/exhaustive-deps */
34
/* eslint-disable no-undef */
@@ -159,6 +160,42 @@ export const FaqPage = () => {
159160
}
160161
}, [filterId, getNewQuestions, getQuestionsMobile, inputValue]);
161162

163+
useEffect(() => {
164+
const sectionArr = document.querySelectorAll('.question-section');
165+
166+
const observerHandler = (entries) => {
167+
const changeActive = (id) => {
168+
const sideMenuActive = document.querySelector(`.sidebar-wrapper .list-item.active`);
169+
const sideMenuRefer = document.querySelector(`.sidebar-wrapper .list-item[data-id=${id}]`);
170+
171+
sideMenuActive.classList.remove('active');
172+
sideMenuRefer.classList.add('active');
173+
};
174+
175+
entries.forEach((entry) => {
176+
if (entry.intersectionRatio > 0.6 && entry.intersectionRatio < 0.7) {
177+
changeActive(entry.target.id);
178+
}
179+
});
180+
};
181+
182+
const scrollHandler = () => {
183+
const options = {
184+
root: null,
185+
rootMargin: '0px',
186+
threshold: [0.6, 0.8],
187+
trackVisibility: true,
188+
delay: 200,
189+
};
190+
191+
const observer = new IntersectionObserver(observerHandler, options);
192+
sectionArr.forEach((section) => {
193+
observer.observe(section);
194+
});
195+
};
196+
window.addEventListener('scroll', scrollHandler);
197+
}, []);
198+
162199
const resetInput = () => {
163200
setInputValue('');
164201
const searchInput = document.querySelector('#faq-search');

‎src/layouts/UpdatesPage.jsx‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable sonarjs/no-identical-functions */
12
/* eslint-disable react/no-unescaped-entities */
23
/* eslint-disable max-lines-per-function */
34
/* eslint-disable sonarjs/cognitive-complexity */
@@ -283,8 +284,11 @@ const query = graphql`
283284
`;
284285

285286
export const UpdatesPage = () => {
286-
const [selectValue] = useState(null);
287+
const [selectValue, setSelectValue] = useState(false);
288+
const [inputValue, setInputValue] = useState(false);
287289
const [enteState] = useState('');
290+
const [formValidate, setFormValidate] = useState(false);
291+
288292
const {
289293
site: {
290294
siteMetadata: { apiUrl },
@@ -299,9 +303,24 @@ export const UpdatesPage = () => {
299303

300304
const classes = useStyles();
301305

302-
useEffect(() => {}, [selectValue]);
306+
useEffect(() => {
307+
const inputArr = document.querySelectorAll('#updates-form [data-form="true"]');
303308

304-
const onSubmit = async (data, event) => {
309+
const inputHandler = () => {
310+
const currentInputArr = document.querySelectorAll('#updates-form [data-form="true"]');
311+
const inputValue = Array.prototype.slice.call(currentInputArr).every((input) => input.value !== '');
312+
console.log('every', inputValue);
313+
if (inputValue) {
314+
setInputValue(true);
315+
}
316+
};
317+
318+
inputArr.forEach((input) => {
319+
input.addEventListener('input', inputHandler);
320+
});
321+
}, []);
322+
323+
const onSubmit = async (data) => {
305324
console.log(data);
306325
Object.keys(data).map(function (key) {
307326
if (data[key] === undefined) {
@@ -368,11 +387,6 @@ export const UpdatesPage = () => {
368387
.then(() => {
369388
spinner.classList.add('hidden');
370389
announce('Invio in corso');
371-
event.target.reset();
372-
const selectArr = document.querySelectorAll('.select [class$="-singleValue"]');
373-
selectArr.forEach((singleValue) => (singleValue.innerHTML = ''));
374-
const inputArr = document.querySelectorAll('#updates-form input');
375-
inputArr.forEach((input) => (input.value = ''));
376390
});
377391
};
378392

@@ -388,6 +402,19 @@ export const UpdatesPage = () => {
388402
announce('Pagina caricata ' + content.name);
389403
}, []);
390404

405+
const onChangeSelectHandler = (e) => {
406+
if (e.value !== '') {
407+
setSelectValue(true);
408+
} else {
409+
setSelectValue(false);
410+
}
411+
};
412+
413+
useEffect(() => {
414+
inputValue && selectValue ? setFormValidate(true) : setFormValidate(false);
415+
console.log('formValidate', formValidate);
416+
}, [selectValue, inputValue, formValidate]);
417+
391418
const {
392419
selectRepresent,
393420
selectInQuanto,
@@ -464,6 +491,7 @@ export const UpdatesPage = () => {
464491
type="text"
465492
id="address"
466493
aria-required="true"
494+
data-form="true"
467495
autocomplete="email"
468496
{...field}
469497
className="mb-0"
@@ -483,12 +511,12 @@ export const UpdatesPage = () => {
483511
control={control}
484512
name="representative"
485513
rules={{ required: true }}
486-
render={({ field: { onChange, value } }) => (
514+
render={({ field: { onChangeSelect, value } }) => (
487515
<Select
488516
value={value}
489517
id="represent-select"
490518
inputId="represent-select-input"
491-
onChange={onChange}
519+
onChange={(onChangeSelect, onChangeSelectHandler)}
492520
onFocus={onFocus}
493521
options={selectRepresent}
494522
placeholder={selectPlaceholder}
@@ -568,6 +596,7 @@ export const UpdatesPage = () => {
568596
aria-required="true"
569597
aria-labelledby={errors.ente && 'error-enteName'}
570598
aria-invalid={errors.ente && 'true'}
599+
data-form="true"
571600
{...field}
572601
id="enteName"
573602
/>
@@ -594,12 +623,12 @@ export const UpdatesPage = () => {
594623
message: requiredLabel,
595624
},
596625
}}
597-
render={({ field: { onChange, value } }) => (
626+
render={({ field: { onChangeSelect, value } }) => (
598627
<Select
599628
value={value}
600629
id="enteSelect"
601630
inputId="enteSelect-input"
602-
onChange={onChange}
631+
onChange={onChangeSelect}
603632
options={selectInQuanto}
604633
aria-describedby="mandatory-label"
605634
placeholder={selectPlaceholder}
@@ -626,7 +655,7 @@ export const UpdatesPage = () => {
626655
</a>
627656
</p>
628657
<div className={`${classes.submitContainer} d-flex mt-5`}>
629-
<Button color="primary" type="submit" form="updates-form">
658+
<Button color="primary" type="submit" form="updates-form" disabled={!formValidate ? true : false}>
630659
{sendButtonLabel}
631660
</Button>
632661
<img className={classes.spinner} src="/assets/spinner.gif" alt=""></img>

‎src/layouts/support/Hero.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const HeroSupport = ({ title, subtitle, isFaq }) => {
8989
<a href="/supporto">Supporto</a>
9090
</BreadcrumbItem>
9191
<BreadcrumbItem active className={classes.breadcrumbItemActive}>
92-
<a href="/supporto/faq">FAQ</a>
92+
<a href="/supporto/faq">Domande frequenti</a>
9393
</BreadcrumbItem>
9494
</Breadcrumb>
9595
:

0 commit comments

Comments
 (0)