Check In: Static

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-check-in c-check-in--static">

    <div class="c-check-in__wrapper">
        <div class="c-check-in__summary">
            <div class="c-check-in__product">
                <img src="/images/svgs/p1.svg" alt="Parcheggio P1" class="c-check-in__product-img">
            </div>

            <div class="c-check-in__details">

                <div class="block-date">
                    <div class="block-date__item">
                        <p><strong>Entrata</strong></p>
                        <p class="text-value">Dal <strong>15/03/2025</strong></p>
                        <p class="text-value">ore <strong>9:30</strong></p>
                    </div>
                    <div class="block-date__item">
                        <p><strong>Uscita</strong></p>
                        <p class="text-value">Al <strong>16/03/2025</strong></p>
                        <p class="text-value">ore <strong>19:30</strong></p>
                    </div>
                </div>
                <div class="booking-data-container">
                    <div class="block-booking-data">
                        <p><strong>Dati prenotazione</strong></p>
                        <div class="c-pictogram">
                            <span class="c-pictogram__icon">
                                <svg class="c-icon--24 u-color-night-40">
                                    <use xlink:href="#ic_assigned_user_24px"></use>
                                </svg> </span>
                            <p class="c-pictogram__text">Mario Rossi</p>
                        </div>
                        <div class="c-pictogram">
                            <span class="c-pictogram__icon">
                                <svg class="c-icon--24">
                                    <use xlink:href="#ic_directions_car_black_24px"></use>
                                </svg> </span>
                            <p class="c-pictogram__text">EB531LM</p>
                        </div>
                    </div>
                    <div class="block-booking-data">
                        <p><strong>Codice</strong></p>
                        <p>1102935</p>
                        <div><a href="#">
                                Vai alla prenotazione
                                <svg class="c-icon c-icon--24">
                                    <use xlink:href="#ic_chevron_right_black_24px"></use>
                                </svg></a></div>
                    </div>
                </div>
            </div>

            <div class="c-check-in__price">
                <div class="assigned">
                    <span class="c-rounded-label c-rounded-label--grey c-rounded-label--small" aria-label="">

                        <strong>Annullato</strong>
                    </span>
                </div>
                <p class="initial-price">40,00 €</p>
                <p class="final-price">20,00 €</p>
            </div>
        </div>

    </div>

    <div class="c-check-in__fold">
        <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-59">
                                <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-59">
                                    <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-1">
                                <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-1">
                                    <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-42">
                                <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-42">
                                    <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-92">
                                <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-92">
                                    <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>

</div>


        <div class="c-check-in c-check-in--static{{#if modifier}} {{modifier}}{{/if}}">
  
  <div class="c-check-in__wrapper">
    {{!-- SUMMARY --}}
    <div class="c-check-in__summary">
      {{!-- Product --}}
      <div class="c-check-in__product">
        <img src="{{ product.img.src }}" alt="{{ product.img.alt }}" class="c-check-in__product-img">
      </div>
      {{!-- End Product --}}
      
      {{!-- Details --}}
      <div class="c-check-in__details">
        
        <div class="block-date">
          {{#each date}}
          <div class="block-date__item">
            <p><strong>{{ label }}</strong></p>
            <p class="text-value">{{{ day }}}</p>
            <p class="text-value">{{{ time }}}</p>
          </div>
          {{/each}}
        </div>
        <div class="booking-data-container">
          <div class="block-booking-data">
            <p><strong>Dati prenotazione</strong></p>
            {{> @pictogram booking-data.name }}
            {{> @pictogram booking-data.license-plate }}
          </div>
          <div class="block-booking-data">
            <p><strong>Codice</strong></p>
            <p>1102935</p>
            <div>{{> @link booking-detail-cta }}</div>
          </div>
        </div>
      </div>
      {{!-- End Details --}}
    
      {{!-- Price --}}
      <div class="c-check-in__price">
        {{#if rounded-label}}
        <div class="assigned">
          {{> @rounded-label rounded-label }}
        </div>
        {{/if}}
        <p class="initial-price">{{ price.initial }}</p>
        <p class="final-price">{{ price.final }}</p>
      </div>
      {{!-- End Price --}}
    </div>
    {{!-- END SUMMARY --}}
  
  </div>

  {{!-- FOLD --}}
  {{#if has-fold }}
  <div class="c-check-in__fold">
    {{ render has-fold.componentName has-fold.componentInstance merge=true }}
  </div>
  {{/if}}
  {{!-- END FOLD --}}

</div>


        
            
            {
  "product": {
    "img": {
      "src": "/images/svgs/p1.svg",
      "alt": "Parcheggio P1"
    },
    "lookOnMap": {
      "modifier": "c-link c-link--spaceless",
      "text": "Mappa",
      "url": "#",
      "svg": {
        "symbol": "ic_open_in_new_24px",
        "class": "c-icon c-icon--16"
      }
    },
    "lookOnDetails": {
      "type": "button",
      "text": "Info",
      "modifier": "c-button--as-link js-fr-dialogmodal-open",
      "opens-dialog": "dialog-p1-info",
      "aria-label": "Apri la modale per consultare la mappa del parcheggio",
      "svg": {
        "symbol": "ic-info-serif",
        "class": "c-icon--16"
      }
    }
  },
  "price": {
    "initial": "40,00 €",
    "final": "20,00 €"
  },
  "date": [
    {
      "label": "Entrata",
      "day": "Dal <strong>15/03/2025</strong>",
      "time": "ore <strong>9:30</strong>"
    },
    {
      "label": "Uscita",
      "day": "Al <strong>16/03/2025</strong>",
      "time": "ore <strong>19:30</strong>"
    }
  ],
  "cta": [
    {
      "type": "button",
      "text": "Intesta parcheggio",
      "modifier": "c-button--adding btn-assign js-btn-checkin-panel-open"
    },
    {
      "type": "button",
      "text": "<span>Elimina</span>",
      "aria-label": "Elimina",
      "modifier": "c-button--ghost btn-delete js-fr-dialogmodal-open",
      "opens-dialog": "dialog-parking-item-deletion",
      "svg": {
        "symbol": "ic-trash",
        "class": "c-icon--16"
      }
    }
  ],
  "label-assigned": {
    "text": "Intestato",
    "modifier": "c-rounded-label--positive c-rounded-label--small",
    "svg": {
      "symbol": "ic_check_black_24px",
      "class": "c-icon c-icon--16"
    }
  },
  "btn-edit-data": {
    "type": "button",
    "text": "Modifica dati",
    "modifier": "c-button--as-link btn-reset-style js-btn-checkin-panel-open"
  },
  "dialog-parking-item-deletion": {
    "modifier": "c-dialog--small",
    "id": "dialog-parking-item-deletion",
    "dialog-labelledby": "dialog-title",
    "title": "Vuoi eliminare il parcheggio dal carrello?",
    "body-text": "Questa operazione non può essere annullata",
    "actions": [
      {
        "name": "default",
        "type": "button",
        "text": "Elimina parcheggio",
        "modifier": "c-button--danger"
      },
      {
        "name": "default",
        "type": "button",
        "text": "Annulla",
        "modifier": "c-button--ghost"
      }
    ]
  },
  "rounded-label": {
    "text": "<strong>Annullato</strong>",
    "modifier": "c-rounded-label--grey c-rounded-label--small"
  },
  "booking-data": {
    "name": {
      "icon": {
        "symbol": "ic_assigned_user_24px",
        "class": "c-icon--24 u-color-night-40"
      },
      "text": "Mario Rossi"
    },
    "license-plate": {
      "icon": {
        "symbol": "ic_directions_car_black_24px",
        "class": "c-icon--24"
      },
      "text": "EB531LM"
    }
  },
  "booking-detail-cta": {
    "text": "Vai alla prenotazione",
    "url": "#",
    "svg": {
      "symbol": "ic_chevron_right_black_24px",
      "class": "c-icon c-icon--24"
    }
  },
  "has-fold": {
    "componentName": "@fold--refund-form",
    "componentInstance": "fold-refund-form"
  }
}

File:

Content:


                                .c-check-in {
  @include shadow(medium);
  border-radius: remify(20px);
}

.c-check-in__wrapper {
  background-color: secondary(basic-white, 100);
  border: remify(1px) solid primary(night, 20);
  border-radius: remify(20px);
  padding: remify(24px) remify(16px);
}

.c-check-in:has(.c-check-in__fold) {
  .c-check-in__wrapper {
    border-radius: remify(20px) remify(20px) 0 0;
  }
}

.c-check-in__summary {
  display: grid;
  gap: remify(24px) remify(16px);
  grid-template-areas:
    "product price"
    "details details"
    "cta cta";

  @include min-screen(remify(1180px)) {
    grid-template-areas: "product details price cta";
    grid-template-columns: max-content 43% auto remify(260px);
    gap: remify(24px);
  }

}

.c-check-in__product {
  grid-area: product;
  display: flex;
  gap: remify(16px);
  align-items: center;
}

.c-check-in__product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: remify(12px);
  @include font-scale(level-1-5)
}

.c-check-in__price {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;

  .initial-price {
    @include font-scale(level-2);
    color: primary(night, 60);
    text-decoration: line-through;
  }

  .final-price {
    @include font-scale(level-4, bold);
    color: secondary(text, 100);
  }

}

.c-check-in__details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  gap: remify(24px);
  color: secondary(text, 100);

  // @include min-screen(bp(tablet)) {
  //   flex-direction: row;
  // }

  @include min-screen(remify(1180px)) {
    gap: remify(40px);
    flex-direction: row;
  }

  .block-date {
    display: flex;
    justify-content: space-between;
    gap: remify(16px);
    position: relative;

    // @include min-screen(bp(tablet)) {
    //   gap: remify(80px);
    // }

    @include min-screen(remify(1180px)) {
      gap: remify(64px);
      justify-content: initial;
    }

    &:after {
      content: "";
      display: inline-block;
      --s: 1px;
      height: 100%;
      max-height: remify(70px);
      aspect-ratio: 1 / 5;
      clip-path: polygon(0 0, var(--s) 0, 100% 50%, var(--s) 100%, 0 100%, calc(100% - var(--s)) 50%);
      background: primary(sky, 60);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

  }

  // .block-booking-data {
  //   @include min-screen(bp(tablet)) {
  //     flex: 1 0 auto;
  //   }
  // }

  .text-value {
    white-space: nowrap;
  }

  .c-pictogram__icon,
  .c-pictogram__text {
    color: secondary(text, 100);
  }

}

.c-check-in__cta {
  grid-area: cta;
  display: flex;
  align-items: center;
  gap: remify(16px);

  @include min-screen(remify(1180px)) {
    justify-content: flex-end;
  }

  .btn-delete,
  .btn-assign {
    padding: remify(8px) remify(12px);
    border-radius: remify(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: remify(8px);
    @include font-scale(level-1, bold);
    flex: 1;

    @include min-screen(remify(1180px)) {
      @include font-scale(level-2, semibold);
      flex: initial;
      border-radius: remify(12px);
      padding: remify(12px) remify(24px);
    }
  } 

  .btn-delete {

    span {
      @include min-screen(remify(1180px)) {
        display: none;
      }
    }

    @include min-screen(remify(1180px)) {
      width: remify(48px);
      aspect-ratio: 1 / 1;
      padding: 0;
    }

  }

  .c-rounded-label {
    margin: 0;
  }

}

.c-check-in__product-img {
  width: remify(58px);
}

.c-check-in .btn-reset-style {
  &:not(.c-button--disabled) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: remify(4px);
    color: secondary(text, 100);
    text-align: left;

    svg {
      margin: 0;
    }
  }
}

.c-check-in__panel {
  display: none;
  margin-top: remify(16px);
}

/*------------------------------------*\
  Assigned modifier
\*------------------------------------*/
.c-check-in--assigned {
  
  .c-check-in__cta {
    @include max-screen(remify(1180px)) {
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  .assigned {
    display: flex;
    gap: remify(8px);
    flex-wrap: wrap;

    @include min-screen(remify(1180px)) {
      flex-direction: column;
      align-items: center;
    }
  }

}

/*------------------------------------*\
  Error modifier
\*------------------------------------*/
.c-check-in--error {
  .c-check-in__wrapper {
    border-color: status(negative);
  }
}

/*------------------------------------*\
  Opened modifier
\*------------------------------------*/
.c-check-in--opened {

  .c-check-in__panel {
    display: block;
  }

}

/*------------------------------------*\
  Static modifier
\*------------------------------------*/
.c-check-in--static {

  .c-check-in__summary {
    grid-template-areas:
    "product price"
    "details details"
    "cta cta";

    @include min-screen(remify(1180px)) {
      grid-template-areas: "product details price";
      grid-template-columns: remify(60px) auto max-content;
    }

  }

  .booking-data-container {
    display: flex;
    flex-wrap: wrap;
    gap: remify(24px);

    @include min-screen(remify(1180px)) {
      gap: remify(40px);
    }
  }

  .block-booking-data {
    flex: 1 0 auto;
  }

  .assigned {
    margin-bottom: remify(8px);
  }

}

URL: /components/raw/check-in/_check-in.scss
Filesystem Path: src/views/03-organisms/check-in/_check-in.scss
Size: 5.4 KB

Content:


                                document.addEventListener('DOMContentLoaded', function() {
  // Select all check-in components in the page
  const checkInComponents = document.querySelectorAll('.c-check-in');

  checkInComponents.forEach(component => {
    // Find buttons and details div within this specific component
    const openButton = component.querySelector('.js-btn-checkin-panel-open');
    const closeButton = component.querySelector('.js-btn-checkin-panel-close');
    const detailsDiv = component.querySelector('.js-checkin-panel');

    if (openButton && closeButton && detailsDiv) {
      // Handle click on open button
      openButton.addEventListener('click', function() {
        detailsDiv.style.display = 'block';
        openButton.disabled = true;
        openButton.classList.add('c-button--disabled');
      });

      // Handle click on close button
      closeButton.addEventListener('click', function() {
        detailsDiv.style.display = 'none';
        openButton.disabled = false;
        openButton.classList.remove('c-button--disabled');
      });
    }
  });
});

URL: /components/raw/check-in/check-in.js
Filesystem Path: src/views/03-organisms/check-in/check-in.js
Size: 1.1 KB

Handle: @check-in--static
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/check-in/check-in--static.hbs
References (3): @pictogram, @link, @rounded-label
Referenced by (2): @preview-template-check-in-static, @page-order-detail

No notes defined.