<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 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-97">
                        <label class="c-selection__label" for="voucher-97">
                            <span class="u-visuallyhidden">&lt;strong&gt;Voucher elettronico parcheggi&lt;/strong&gt;</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-62">
                        <label class="c-selection__label" for="credit-back-62">
                            <span class="u-visuallyhidden">&lt;strong&gt;Riaccredito su [Carta di Credito]&lt;/strong&gt;</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">
    <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">
        {{render "@input--file" input-file-upload merge=true }}
      </div>
      <div class="c-voucher-partial-form__control">
        {{render "@textarea" textarea merge=true }}
      </div>
    </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"
    }
  },
  "input-file-upload": {
    "name": "input-payment-receipt",
    "label_id": "input-payment-receipt",
    "label_message": "Ricevuta di pagamento",
    "atom-input": {
      "id": "input-payment-receipt"
    },
    "note_message": "File accettati: .pdf, .png, .jpg. Dimensione massima 3MB"
  },
  "textarea": {
    "label_id": "double-payment-textarea-field",
    "label_message": "Info aggiuntive:",
    "label_class": "",
    "atom-textarea": {
      "id": "double-payment-textarea-field",
      "class": "",
      "rows": "5",
      "placeholder": null,
      "required": false,
      "hasNote": true,
      "describedby": "double-payment-textarea-note"
    },
    "note_id": "double-payment-textarea-note",
    "note_message": "Massimo 500 caratteri",
    "note_class": null
  }
}
  • Content:
    .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%;
      }
    
    }
  • URL: /components/raw/voucher-partial-form/_voucher-partial-form.scss
  • Filesystem Path: src/views/03-organisms/voucher-partial-form/_voucher-partial-form.scss
  • Size: 280 Bytes

No notes defined.