<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 class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-voucher.svg" alt="Voucher digitale">
</div>
<div class="c-selection__text">
<strong>Voucher elettronico parcheggi</strong>
<p class="c-selection__extra-text">(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="voucher-54">
<label class="c-selection__label" for="voucher-54">
<span class="u-visuallyhidden"><strong>Voucher elettronico parcheggi</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
<div class="c-selection c-selection--responsive">
<div class="c-selection__img-block">
<img class="c-selection__img" src="/images/svgs/stk-richiesta-rimborso.svg" alt="Riaccredito">
</div>
<div class="c-selection__text">
<strong>Riaccredito su [Carta di Credito]</strong>
<p class="c-selection__extra-text">(Accredito entro 60 giorni dalla richiesta)</p>
</div>
<input class="c-selection__radio u-visuallyhidden" type="radio" name="refund-option" id="credit-back-95">
<label class="c-selection__label" for="credit-back-95">
<span class="u-visuallyhidden"><strong>Riaccredito su [Carta di Credito]</strong></span>
</label>
<div class="c-selection__input"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-voucher-partial-form{{#if modifier}} {{ modifier }}{{/if}}">
{{!-- FIELDSET --}}
<div class="c-voucher-partial-form__fieldset c-form">
<div class="c-voucher-partial-form__control">
{{render "@textarea" textarea merge=true }}
</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">
{{render "@input--file" input-file-upload merge=true }}
</div>
<p class="u-typo-level-1 u-mt-space-32"><sup>*</sup>Campi obbligatori</p>
</div>
{{!-- END FIELDSET --}}
{{!-- SELECTION --}}
<div class="c-voucher-partial-form__selection">
<p class="u-typo-level-2 u-typo-weight-bold u-color-night-120 u-my-space-24">Indica in che modo vuoi essere rimborsato.</p>
<div grid="grid">
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
{{> @selection selection-voucher }}
</div>
</div>
<div grid="6@md">
<div class="c-voucher-partial-form__selection-item">
{{> @selection selection-credit-back }}
</div>
</div>
</div>
</div>
{{!-- END SELECTION --}}
</div>
{
"selection-voucher": {
"modifier": "c-selection--responsive",
"text": "<strong>Voucher elettronico parcheggi</strong>",
"extra-text": "(Spendibile, entro un anno, per il prodotto Parcheggi del nostro e-commerce)",
"img": {
"src": "/images/svgs/stk-voucher.svg",
"alt": "Voucher digitale"
},
"input": {
"id": "voucher",
"name": "refund-option"
}
},
"selection-credit-back": {
"modifier": "c-selection--responsive",
"text": "<strong>Riaccredito su [Carta di Credito]</strong>",
"extra-text": "(Accredito entro 60 giorni dalla richiesta)",
"img": {
"src": "/images/svgs/stk-richiesta-rimborso.svg",
"alt": "Riaccredito"
},
"input": {
"id": "credit-back",
"name": "refund-option"
}
},
"textarea": {
"label_id": "malfunction-textarea-field",
"label_message": "Descrivi il malfunzionamento:",
"label_class": "",
"atom-textarea": {
"id": "malfunction-textarea-field",
"class": "",
"rows": "5",
"placeholder": null,
"required": true,
"hasNote": true,
"describedby": "malfunction-textarea-note"
},
"note_id": "malfunction-textarea-note",
"note_message": "Massimo 500 caratteri",
"note_class": null
},
"input-file-upload": {
"name": "input-file-malfunction",
"label_id": "input-file-malfunction",
"label_message": "Carica file (facoltativo)",
"atom-input": {
"id": "input-file-malfunction",
"required": false
},
"note_message": "File accettati: .pdf, .png, .jpg. Dimensione massima 3MB"
}
}
.c-voucher-partial-form__fieldset {
background-color: primary(sky, 10);
color: primary(night, 120);
padding: remify(24px) remify(16px);
border-radius: remify(12px);
}
.c-voucher-partial-form__selection-item {
height: 100%;
& > .c-selection {
height: 100%;
}
}
No notes defined.