<div class="c-voucher-main-form">
<div class="c-voucher-main-form__reasons">
<p class="u-typo-level-3 u-typo-weight-bold u-color-night-120">Indica il motivo della tua richiesta</p>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-double-payment-94">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">Ho pagato per errore due volte lo stesso parcheggio</p>
</div>
<label class="c-selection__label" for="voucher-reason-double-payment-94">
<span class="u-visuallyhidden">Ho pagato per errore due volte lo stesso parcheggio</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset">
<p class="u-typo-level-2 u-typo-weight-bold u-mb-space-32">Per procedere al rimborso carica la seconda ricevuta del pagamento.</p>
<div class="c-form">
<div class="c-voucher-partial-form__control">
<label for="input-payment-receipt" class="is-positive" aria-label="">
Ricevuta di pagamento <span class="required-marker" aria-hidden="true">*</span>
<input id="input-payment-receipt" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>
<p class="c-field__note " id="file-note">
File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
</p>
</label>
<p class="c-field__note" id="" aria-hidden="true">
</p>
</div>
<div class="c-voucher-partial-form__control">
<label for="double-payment-textarea-field" class="" aria-label="">
Info aggiuntive:
<textarea id="double-payment-textarea-field" placeholder="" class="" rows="5" aria-describedby="double-payment-textarea-note"></textarea>
<em class="c-field__note " id="double-payment-textarea-note">
Massimo 500 caratteri
</em>
</label>
</div>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-malfunction-34">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">Malfunzionamento di impianti od apparecchiature dell'Aeroporto di Bologna</p>
</div>
<label class="c-selection__label" for="voucher-reason-malfunction-34">
<span class="u-visuallyhidden">Malfunzionamento di impianti od apparecchiature dell'Aeroporto di Bologna</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<div class="c-voucher-partial-form__control">
<label for="malfunction-textarea-field" class="" aria-label="">
Descrivi il malfunzionamento: <span class="required-marker" aria-hidden="true">*</span>
<textarea id="malfunction-textarea-field" placeholder="" class="" rows="5" required aria-required="true" aria-describedby="malfunction-textarea-note"></textarea>
<em class="c-field__note " id="malfunction-textarea-note">
Massimo 500 caratteri
</em>
</label>
</div>
<p class="u-typo-level-2 u-mt-space-32 u-mb-space-16">Se hai della documentazione a supporto della tua richiesta, puoi caricarla qui:</p>
<div class="c-voucher-partial-form__control">
<label for="input-file-malfunction" class="is-positive" aria-label="">
Carica file (facoltativo)
<input id="input-file-malfunction" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>
<p class="c-field__note " id="file-note">
File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
</p>
</label>
<p class="c-field__note" id="" aria-hidden="true">
</p>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-airport-issue-40">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">L’Aeroporto di Bologna era chiuso</p>
</div>
<label class="c-selection__label" for="voucher-reason-airport-issue-40">
<span class="u-visuallyhidden">L’Aeroporto di Bologna era chiuso</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<div class="c-voucher-partial-form__control">
<label for="malfunction-textarea-field" class="" aria-label="">
Maggiori dettagli:
<textarea id="malfunction-textarea-field" placeholder="" class="" rows="5" aria-describedby="malfunction-textarea-note"></textarea>
<em class="c-field__note " id="malfunction-textarea-note">
Massimo 500 caratteri
</em>
</label>
</div>
<p class="u-typo-level-2 u-mt-space-32 u-mb-space-16">Se hai della documentazione a supporto della tua richiesta, puoi caricarla qui:</p>
<div class="c-voucher-partial-form__control">
<label for="input-file-malfunction" class="is-positive" aria-label="">
Carica file (facoltativo)
<input id="input-file-malfunction" type="file" class="" placeholder="" value="" aria-describedby="file-note" multiple>
<p class="c-field__note " id="file-note">
File accettati: .pdf, .png, .jpg. Dimensione massima 3MB
</p>
</label>
<p class="c-field__note" id="" aria-hidden="true">
</p>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__option">
<div class="c-selection c-selection--expandable">
<input class="c-selection__radio u-visuallyhidden" type="radio" name="voucher-reason" id="voucher-reason-flight-31">
<div class="text-container">
<div class="c-selection__input"></div>
<p class="c-selection__text">Il mio volo aereo è stato cancellato o dirottato su altro scalo</p>
</div>
<label class="c-selection__label" for="voucher-reason-flight-31">
<span class="u-visuallyhidden">Il mio volo aereo è stato cancellato o dirottato su altro scalo</span>
</label>
<div class="c-selection__fold">
<div class="c-voucher-partial-form">
<div class="c-voucher-partial-form__fieldset c-form">
<p class="u-typo-level-2 u-mb-space-32">Inserisci il codice del volo.</p>
<div grid="grid">
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
<label for="input-departure-date" class="is-datepicker" aria-label="Scegli la data di partenza del volo">
Data di partenza <span class="required-marker" aria-hidden="true">*</span>
<input id="input-departure-date" type="date" class="" placeholder="" value="">
</label>
</div>
</div>
<div grid="6@sm">
<div class="c-voucher-partial-form__control">
<label for="input-flight-number" class="" aria-label="">
Numero volo <span class="required-marker" aria-hidden="true">*</span>
<input id="input-flight-number" type="text" class="" placeholder="" value="">
</label>
</div>
</div>
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-main-form__footer">
<div class="c-voucher-main-form__actions">
<div><button type="button" class="c-button c-button--submit js-fr-dialogmodal-open" aria-controls="confirmation-dialog">
Richiedi il rimborso
</button></div>
<div><button type="button" class="c-button c-button--as-link" id="btn-cancel-form-request">
Annulla richiesta
</button></div>
</div>
</div>
</div>
<div class="c-voucher-main-form{{#if modifier}} {{ modifier }}{{/if}}">
{{!-- VOUCHER REASONS --}}
<div class="c-voucher-main-form__reasons">
<p class="u-typo-level-3 u-typo-weight-bold u-color-night-120">Indica il motivo della tua richiesta</p>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-double-payment }}
{{ render "@voucher-partial-form--double-payment" }}
{{/@selection--expandable}}
</div>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-malfunction }}
{{ render "@voucher-partial-form--malfunction" }}
{{/@selection--expandable}}
</div>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-airport-issue }}
{{ render "@voucher-partial-form--malfunction" closed-airport merge=true }}
{{/@selection--expandable}}
</div>
<div class="c-voucher-main-form__option">
{{#> @selection--expandable selection-flight }}
{{ render "@voucher-partial-form--flight" }}
{{/@selection--expandable}}
</div>
</div>
{{!-- END VOUCHER REASONS --}}
<div class="c-voucher-main-form__footer">
<div class="c-voucher-main-form__actions">
<div>{{> @button btn-submit }}</div>
<div>{{> @button btn-cancel }}</div>
</div>
</div>
</div>
{
"selection-double-payment": {
"text": "Ho pagato per errore due volte lo stesso parcheggio",
"input": {
"id": "voucher-reason-double-payment",
"name": "voucher-reason"
}
},
"selection-malfunction": {
"text": "Malfunzionamento di impianti od apparecchiature dell'Aeroporto di Bologna",
"input": {
"id": "voucher-reason-malfunction",
"name": "voucher-reason"
}
},
"selection-airport-issue": {
"text": "L’Aeroporto di Bologna era chiuso",
"closed-airport": {
"textarea": {
"label_message": "Maggiori dettagli:",
"atom-textarea": {
"required": false
}
}
},
"input": {
"id": "voucher-reason-airport-issue",
"name": "voucher-reason"
}
},
"selection-flight": {
"text": "Il mio volo aereo è stato cancellato o dirottato su altro scalo",
"input": {
"id": "voucher-reason-flight",
"name": "voucher-reason"
}
},
"btn-submit": {
"type": "button",
"text": "Richiedi il rimborso",
"modifier": "c-button--submit js-fr-dialogmodal-open",
"opens-dialog": "confirmation-dialog"
},
"btn-cancel": {
"type": "button",
"text": "Annulla richiesta",
"modifier": "c-button--as-link",
"id": "btn-cancel-form-request"
}
}
.c-voucher-main-form {
background-color: secondary(basic-white, 100);
padding: remify(16px);
border-radius: remify(8px);
display: flex;
flex-direction: column;
gap: remify(24px);
@include min-screen(bp(tablet)) {
padding: remify(24px);
}
}
.c-voucher-main-form__reasons {
display: flex;
flex-direction: column;
gap: remify(16px);
}
.c-voucher-main-form__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: remify(24px);
}
/*------------------------------------*\
Modifier: c-voucher-main-form--minimal
\*------------------------------------*/
.c-voucher-main-form--minimal {
background-color: transparent;
padding: 0;
}
No notes defined.