Fold: Refund Form

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-fold">
    <div class="c-fold__summary">
        <p class="c-fold__summary-text"><strong>Hai avuto problemi con questo parcheggio?</strong> Puoi fare una richiesta di rimborso fino alle [ore] del [giorno] </p>
        <button class="c-button c-button--ghost js-btn-fold-toggle" data-show-text="Richiedi rimborso" data-hide-text="Annulla" aria-expanded="false" aria-controls="fold-details">Richiedi rimborso</button>
    </div>

    <div id="fold-details" class="c-fold__details" aria-hidden="true">
        <div>
            <h2 class="u-typo-level-3 u-typo-weight-bold u-mb-space-8">Hai bisogno di richiedere un rimborso per questo ordine?</h2>
            <p>Come riportato nelle <a href="#">condizioni di vendita</a>, entro 6 mesi dal mancato ingresso nel parcheggio hai <strong>diritto ad un riaccredito se rientri in uno dei seguenti casi</strong>:</p>
            <ul class="c-list--bulleted u-mt-space-8">
                <li>Doppio pagamento (es. online + telepedaggio) </li>
                <li>Malfunzionamento impianti</li>
                <li>Chiusura dell’aeroporto</li>
                <li>Volo cancellato o dirottato in partenza su altro scalo.</li>
            </ul>
        </div>
        <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-52">
                        <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-52">
                            <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-52">
                        <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-52">
                            <span class="u-visuallyhidden">Malfunzionamento di impianti od apparecchiature dell&#x27;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-14">
                        <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-14">
                            <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-refund">

                            Richiedi il rimborso

                        </button></div>
                    <div><button type="button" class="c-button c-button--as-link js-btn-close-fold" id="btn-cancel-form-request">

                            Annulla

                        </button></div>
                </div>
            </div>

        </div>
    </div>

</div>

<div class="c-dialog js-fr-dialogmodal c-dialog--medium" id="confirmation-dialog-refund">
    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="confirmation-dialog-refund-dialog-title">
        <div role="document">

            <img src="../../images/svgs/stk_MyBLQ.svg" class="c-dialog__img" alt="">
            <p class="c-dialog__title" id="confirmation-dialog-refund-dialog-title" aria-hidden="true">Confermi la richiesta di rimborso?</p>
            <div class="c-dialog__text c-dialog__text--centered">
                <p>Se la tua richiesta verrà accettata, ti verranno riaccreditati 10 € <strong>entro 60 giorni</strong> sullo stesso metodo di pagamento utilizzato per l’acquisto. L'esito della tua richiesta ti sarà comunicato al tuo indirizzo email [mail profilo myblq].</p>
                <p>Vuoi procedere?</p>
            </div>
            <div class="u-centered u-mt-space-16">
                <button type="button" class="c-button c-button--submit">

                    Sì, procedo

                </button>
                <div class="u-mt-space-16"><button type="button" class="c-button c-button--as-link u-color-night-100">

                        No, rivedo le informazioni

                    </button></div>
            </div>

            <button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
                <svg class="c-icon c-icon--32">
                    <use xlink:href="#ic_close_black_24px"></use>
                </svg> </button>
        </div>
    </div>
</div>


        <div class="c-fold{{#if modifier}} {{modifier}}{{/if}}">
  <div class="c-fold__summary">
    <p class="c-fold__summary-text">{{{ summary-text }}}</p>
    <button 
      class="c-button c-button--ghost js-btn-fold-toggle" 
      data-show-text="Richiedi rimborso" 
      data-hide-text="Annulla"
      aria-expanded="false"
      aria-controls="fold-details"
    >Richiedi rimborso</button>
  </div>

  <div id="fold-details" class="c-fold__details" aria-hidden="true">
    <div>
      <h2 class="u-typo-level-3 u-typo-weight-bold u-mb-space-8">Hai bisogno di richiedere un rimborso per questo ordine?</h2>
      <p>Come riportato nelle <a href="#">condizioni di vendita</a>, entro 6 mesi dal mancato ingresso nel parcheggio hai <strong>diritto ad un riaccredito se rientri in uno dei seguenti casi</strong>:</p>
      <ul class="c-list--bulleted u-mt-space-8">
        <li>Doppio pagamento (es. online + telepedaggio) </li>
        <li>Malfunzionamento impianti</li>
        <li>Chiusura dell’aeroporto</li>
        <li>Volo cancellato o dirottato in partenza su altro scalo.</li>
      </ul>
    </div>
    {{ render "@voucher-main-form" voucher-main-form merge=true }}
  </div>

</div>

{{!-- DIALOG --}}
{{#> @dialog confirmation-dialog }}
  <img src="{{ path '/images/svgs/stk_MyBLQ.svg' }}" class="c-dialog__img" alt="">
  <p class="c-dialog__title" id="{{ id }}-{{ dialog-labelledby }}" aria-hidden="true">{{ title }}</p>
  <div class="c-dialog__text c-dialog__text--centered">
    <p>Se la tua richiesta verrà accettata, ti verranno riaccreditati 10 € <strong>entro 60 giorni</strong> sullo stesso metodo di pagamento utilizzato per l’acquisto. L'esito della tua richiesta ti sarà comunicato al tuo indirizzo email [mail profilo myblq].</p>
    <p>Vuoi procedere?</p>
  </div>
  <div class="u-centered u-mt-space-16">
    {{> @button btn-confirm }}
    <div class="u-mt-space-16">{{> @button btn-cancel }}</div>
  </div>
{{/@dialog}}
{{!-- END DIALOG --}}


        
            
            {
  "summary-text": "<strong>Hai avuto problemi con questo parcheggio?</strong> Puoi fare una richiesta di rimborso fino alle [ore] del [giorno] ",
  "upsell-items": [
    {
      "item": {
        "name": "Lavaggio autovettura",
        "price-item": [
          {
            "label": "Prezzo min.",
            "value": "8,00 €"
          },
          {
            "label": "Prezzo max.",
            "value": "24,00 €"
          }
        ]
      }
    },
    {
      "item": {
        "name": "Pulitura interni",
        "price-item": [
          {
            "label": "Prezzo max.",
            "value": "24,00 €"
          }
        ]
      }
    }
  ],
  "footer-text": "Il pagamento di questi servizi avverrà solo una volta che ne avrai usufruito. Potrai pagarli presso il Presidio Parcheggi al piano terra del P2, prima del ritiro della tua auto",
  "voucher-main-form": {
    "btn-submit": {
      "opens-dialog": "confirmation-dialog-refund"
    },
    "btn-cancel": {
      "type": "button",
      "text": "Annulla",
      "modifier": "c-button--as-link js-btn-close-fold"
    }
  },
  "confirmation-dialog": {
    "modifier": "c-dialog--medium",
    "id": "confirmation-dialog-refund",
    "dialog-labelledby": "dialog-title",
    "title": "Confermi la richiesta di rimborso?",
    "btn-confirm": {
      "name": "default",
      "type": "button",
      "text": "Sì, procedo",
      "modifier": "c-button--submit"
    },
    "btn-cancel": {
      "name": "default",
      "type": "button",
      "text": "No, rivedo le informazioni",
      "modifier": "c-button--as-link u-color-night-100"
    }
  }
}

File:

Content:


                                .c-fold {
  background-color: secondary(basic-white, 100);
  padding: remify(16px);
  border-radius: 0 0 remify(20px) remify(20px);
  color: primary(night, 100);
  border: remify(1px) solid primary(night, 20);
  border-top: none;
}

.c-fold__summary {
  display: flex;
  gap: remify(16px);
  flex-direction: column;
  align-items: flex-start;

  @include min-screen(bp(tablet)) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

}

.c-fold .js-btn-fold-toggle,
.c-fold .c-fold__summary-cta,
.c-fold .c-button--ghost.c-fold__summary-cta {
  color: currentColor;
  flex-shrink: 0;
  @include font-scale(level-1-5, semibold);
  padding: remify(4px) remify(12px);
  border-radius: remify(8px);
}

.c-fold .c-fold__summary-cta {
  padding: 0;
}

.c-fold__details {
  display: none;
  flex-direction: column;
  gap: remify(16px);
  margin-top: remify(24px);

  @include min-screen(bp(tablet)) {
    gap: remify(32px);
    margin-top: remify(32px);
  }

}

.c-fold__details-items {
  display: flex;
  flex-direction: column;
  gap: remify(16px);
}

.c-fold__summary-text {
  color: primary(night, 100);
  @include font-scale(level-1-5);
}

.c-fold .c-voucher-main-form {
  padding: 0;
}

/*------------------------------------*\
  Modifier: c-fold--result
\*------------------------------------*/
.c-fold--result {

  .c-fold__summary {
    justify-content: initial;
    gap: remify(16px) remify(8px);
  }

  .refund-result {
    display: flex;
    align-items: center;
    gap: remify(4px);
  }

}

URL: /components/raw/fold/_fold.scss
Filesystem Path: src/views/02-molecules/fold/_fold.scss
Size: 1.5 KB

Content:


                                document.addEventListener('DOMContentLoaded', () => {
  // Find all fold containers and set them up
  const foldContainers = document.querySelectorAll('.c-fold');

  foldContainers.forEach(container => {
    // Find the essential parts of the component
    const toggleButton = container.querySelector('.js-btn-fold-toggle');
    const detailsSection = container.querySelector('.c-fold__details');
    
    // Find the optional close button
    const closeButton = container.querySelector('.js-btn-close-fold');

    // If there's no toggle button or details section, this isn't a valid fold component
    if (!toggleButton || !detailsSection) {
      return;
    }

    // Get button texts from data attributes
    const showText = toggleButton.dataset.showText;
    const hideText = toggleButton.dataset.hideText;

    // --- STATE MANAGEMENT FUNCTIONS ---

    const openDetails = () => {
      detailsSection.style.display = 'flex';
      toggleButton.textContent = hideText;
      toggleButton.setAttribute('aria-expanded', 'true');
      detailsSection.setAttribute('aria-hidden', 'false');
    };

    const closeDetails = () => {
      detailsSection.style.display = 'none';
      toggleButton.textContent = showText;
      toggleButton.setAttribute('aria-expanded', 'false');
      detailsSection.setAttribute('aria-hidden', 'true');
    };
    
    // --- INITIAL STATE ---
    
    // Start with the details section closed
    closeDetails();

    // --- EVENT LISTENERS ---

    // 1. Toggle Button (Open/Close)
    const toggleFoldHandler = (event) => {
      event.preventDefault();
      const isHidden = detailsSection.style.display === 'none';
      if (isHidden) {
        openDetails();
      } else {
        closeDetails();
      }
    };

    toggleButton.addEventListener('click', toggleFoldHandler);
    toggleButton.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        toggleFoldHandler(event);
      }
    });

    // 2. Optional Close Button (Close Only)
    if (closeButton) {
      const closeFoldHandler = (event) => {
        event.preventDefault();
        closeDetails();
      };

      closeButton.addEventListener('click', closeFoldHandler);
      closeButton.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          closeFoldHandler(event);
        }
      });
    }
  });
});

URL: /components/raw/fold/fold.js
Filesystem Path: src/views/02-molecules/fold/fold.js
Size: 2.4 KB

Handle: @fold--refund-form
Preview:
- With layout
- Component only
Filesystem Path: src/views/02-molecules/fold/fold--refund-form.hbs
References (3): @voucher-main-form, @dialog, @button

No notes defined.