Check In: Assigned License Plate

Reviewed

HTML
View
Context
Assets
Info
Notes


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

    <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 class="c-check-in__product-info">
                    <a href="#" class="c-link c-link--spaceless">
                        Mappa
                        <svg class="c-icon c-icon--16">
                            <use xlink:href="#ic_open_in_new_24px"></use>
                        </svg></a> <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-label="Apri la modale per consultare la mappa del parcheggio" aria-controls="dialog-p1-info">

                        Info
                        <svg class="c-icon--16">
                            <use xlink:href="#ic-info-serif"></use>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="c-check-in__price">
                <p class="initial-price">40,00 €</p>
                <p class="final-price">20,00 €</p>
            </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="block-booking-data">
                    <p><strong>Dati prenotazione</strong></p>
                    <div class="c-pictogram">
                        <span class="c-pictogram__icon">
                            <svg class="c-icon--24">
                                <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>

            <div class="c-check-in__cta">
                <div class="assigned">
                    <span class="c-rounded-label c-rounded-label--positive c-rounded-label--small" aria-label="">
                        <svg class="c-icon c-icon--16">
                            <use xlink:href="#ic_check_black_24px"></use>
                        </svg>
                        Intestato
                    </span> <button type="button" class="c-button c-button--as-link btn-reset-style js-btn-checkin-panel-open">

                        Modifica dati

                    </button>
                </div>
                <div>
                    <button type="button" class="c-button c-button--ghost btn-delete js-fr-dialogmodal-open" aria-label="Elimina" aria-controls="dialog-parking-item-deletion">

                        <span>Elimina</span>
                        <svg class="c-icon--16">
                            <use xlink:href="#ic-trash"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="c-check-in__panel js-checkin-panel">
            <div class="c-check-in-form">

                <div grid="grid" class="c-form c-form--label-bottom-less">
                    <div grid="12">
                        <input type="checkbox" id="use-account-data" name="use-account-data" class="u-visuallyhidden " role="group" aria-label="use-account-data">

                        <label for="use-account-data" class="">
                            Usa i dati del tuo account
                        </label>
                    </div>
                    <div grid="6@md">
                        <label for="name-text-field" class="" aria-label="">

                            Nome <span class="required-marker" aria-hidden="true">*</span>

                            <input id="name-text-field" type="text" class="" placeholder="" value="" aria-describedby="name-text-note">

                            <p class="c-field__note " id="name-text-note">
                                Inserisci il nome dell’intestatario della prenotazione
                            </p>

                        </label>

                    </div>
                    <div grid="6@md">
                        <label for="surname-text-field" class="" aria-label="">

                            Cognome <span class="required-marker" aria-hidden="true">*</span>

                            <input id="surname-text-field" type="text" class="" placeholder="" value="" aria-describedby="surname-text-note">

                            <p class="c-field__note " id="surname-text-note">
                                Inserisci il cognome dell’intestatario della prenotazione
                            </p>

                        </label>

                    </div>
                    <div grid="6@md">
                        <label for="phone-text-field" class="" aria-label="">

                            Telefono

                            <input id="phone-text-field" type="tel" class="" placeholder="" value="" aria-describedby="phone-text-note">

                            <p class="c-field__note " id="phone-text-note">
                                Inserisci il numero di telefono sul quale sarà possibile contattarti
                            </p>

                        </label>

                    </div>
                    <div grid="6@md">
                        <label for="email-text-field" class="" aria-label="">

                            Email

                            <input id="email-text-field" type="email" class="" placeholder="" value="" aria-describedby="email-text-note">

                            <p class="c-field__note " id="email-text-note">
                                Inserisci l'indirizzo email sul quale sarà possibile contattarti
                            </p>

                        </label>

                        <div class="u-mt-space-8"><input type="checkbox" id="send-confirmation-email" name="send-confirmation-email" class="u-visuallyhidden " role="group" aria-label="send-confirmation-email">

                            <label for="send-confirmation-email" class="">
                                Invia a questa mail la conferma della prenotazione
                            </label>
                        </div>
                    </div>
                    <div grid="6@md">
                        <div class="edit-license-plate">
                            <div class="u-fg--1">
                                <label for="license-plate-field" class="" aria-label="">

                                    Targa

                                    <div class="input-license-plate">
                                        <input id="license-plate-field" type="text" class="input-license-plate" placeholder="" value="AB12345" aria-describedby="license-plate-note" readonly>
                                    </div>

                                    <div class="c-field__note " id="license-plate-note">
                                        La targa deve rispettare lo <button type="button" class="c-button c-button--as-link js-fr-dialogmodal-open" aria-controls="dialog-license-plate-info"><strong>standard europeo</strong></button> (es. AA000AA)
                                    </div>

                                </label>

                                <div class="c-dialog js-fr-dialogmodal " id="dialog-license-plate-info">
                                    <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-license-plate-info-title">
                                        <div role="document">

                                            <p class="c-dialog__title" id="dialog-license-plate-info-title" aria-hidden="true">
                                                La targa deve rispettare lo standard europeo
                                            </p>

                                            <p><strong>La targa deve rispettare lo standard europeo</strong></p>
                                            <p>Il formato standard per le targhe automobilistiche europee include una striscia blu sul lato sinistro che mostra il simbolo dell'UE (un cerchio di 12 stelle) e il codice del paese dello stato membro. Il resto della targa presenta una serie di caratteri unici per ogni autoveicolo, con questi standard:</p>
                                            <ul class='c-list--bulleted u-mt-space-8'>
                                                <li>lunghezza minima 5</li>
                                                <li>lunghezza massima 10</li>
                                                <li>numeri 0-9</li>
                                                <li>lettere A-Z</li>
                                            </ul>

                                            <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>
                            <button type="button" class="c-button c-button--as-link edit-license-plate-btn js-fr-dialogmodal-open" aria-controls="dialog-add-license-plate">

                                Modifica targa

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

                <div class="c-check-in-form__footer">
                    <div class="c-check-in-form__actions">
                        <button type="button" class="c-button c-button--submit">

                            Conferma

                        </button> <button type="button" class="c-button c-button--ghost js-btn-checkin-panel-close">

                            Annulla

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

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

    <div class="c-dialog js-fr-dialogmodal " id="dialog-add-license-plate">
        <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-add-license-plate-dialog-title">
            <div role="document">

                <p class="c-dialog__title" id="dialog-add-license-plate-dialog-title">Aggiungi un nuovo autoveicolo</p>

                <div class="u-mt-space-56">
                    <div class="c-form c-form--license-plate">
                        <div grid="grid">
                            <div grid="6@md"><label for="license-plate-field" class="" aria-label="">

                                    Targa

                                    <div class="input-license-plate">
                                        <input id="license-plate-field" type="text" class="input-license-plate" placeholder="" value="" aria-describedby="license-plate-note">
                                    </div>

                                    <div class="c-field__note " id="license-plate-note">
                                        La targa deve rispettare lo standard europeo (es. AA000AA)
                                    </div>

                                </label>

                            </div>
                            <div grid="6@md"><label for="car-name" class="" aria-label="">

                                    Nome autoveicolo

                                    <input id="car-name" type="text" class="" placeholder="" value="" aria-describedby="car-name-note">

                                    <p class="c-field__note " id="car-name-note">
                                        Nei prossimi acquisti ti aiuterà a ricordare quale autoautoveicolo hai salvato
                                    </p>

                                </label>

                            </div>
                        </div>
                        <div class="u-mt-space-24">
                            <div class="c-highlight ">
                                <p><strong>La targa deve rispettare lo standard europeo</strong>
                                <p>
                                <p>Il formato standard per le targhe automobilistiche europee include una striscia blu sul lato sinistro che mostra il simbolo dell'UE (un cerchio di 12 stelle) e il codice del paese dello stato membro. Il resto della targa presenta una serie di caratteri unici per ogni veicolo.</p>
                            </div>
                        </div>
                        <div class="u-mt-space-24">
                            <input type="checkbox" id="checkbox-save-car" name="save-car" class="u-visuallyhidden " role="group" aria-label="checkbox-save-car">

                            <label for="checkbox-save-car" class="">
                                [Testo per salvataggio targa]
                            </label>
                        </div>
                    </div>
                </div>

                <div class="c-dialog__actions">
                    <button type="button" class="c-button c-button--submit">

                        Salva

                    </button> <button type="button" class="c-button c-button--ghost">

                        Annulla

                    </button>
                </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-dialog js-fr-dialogmodal c-dialog--small" id="dialog-parking-item-deletion">
        <div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-parking-item-deletion-dialog-title">
            <div role="document">
                <p class="c-dialog__title" id="dialog-parking-item-deletion-dialog-title" aria-hidden="true">Vuoi eliminare il parcheggio dal carrello?</p>

                <div class="c-dialog__text">
                    Questa operazione non può essere annullata
                </div>

                <div class="c-dialog__actions">
                    <button type="button" class="c-button c-button--danger">

                        Elimina parcheggio

                    </button> <button type="button" class="c-button c-button--ghost">

                        Annulla

                    </button>
                </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 class="c-check-in c-check-in--assigned{{#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 class="c-check-in__product-info">
          {{> @link product.lookOnMap }}
          {{> @button product.lookOnDetails }}
        </div>
      </div>
      {{!-- End Product --}}
      
      {{!-- Price --}}
      <div class="c-check-in__price">
        <p class="initial-price">{{ price.initial }}</p>
        <p class="final-price">{{ price.final }}</p>
      </div>
      {{!-- End Price --}}
    
      {{!-- 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="block-booking-data">
          <p><strong>Dati prenotazione</strong></p>
          {{> @pictogram booking-data.name }}
          {{#if booking-data.license-plate}}
          {{> @pictogram booking-data.license-plate }}
          {{else}}
            {{> @button--as-link booking-data.btn-license-place-shortcut }}
          {{/if}}
        </div>
      </div>
      {{!-- End Details --}}
    
      {{!-- Cta --}}
      <div class="c-check-in__cta">
        <div class="assigned">
          {{> @rounded-label label-assigned }}
          {{> @button--as-link btn-edit-data }}
        </div>
        <div>
          {{#each cta}}
            {{> @button }}
          {{/each}}
        </div>
      </div>
      {{!-- End Cta --}}
    </div>
    {{!-- END SUMMARY --}}
  
    {{!-- PANEL --}}
    <div class="c-check-in__panel js-checkin-panel">
      {{ render panelComponent.name panelComponent.instance merge=true }}
    </div>
    {{!-- END PANEL --}}
  </div>

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

  {{#if edit-license-plate-dialog }}
  {{ render "@dialog--add-license-plate" }}
  {{/if}}

  {{#if choice-license-plate-multiple-dialog }}
  {{ render "@dialog--choice-license-plate-multiple" }}
  {{/if}}
  {{> @dialog--deletion dialog-parking-item-deletion }}

</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": "<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"
      }
    ]
  },
  "booking-data": {
    "name": {
      "icon": {
        "symbol": "ic_assigned_user_24px",
        "class": "c-icon--24"
      },
      "text": "Mario Rossi"
    },
    "license-plate": {
      "icon": {
        "symbol": "ic_directions_car_black_24px",
        "class": "c-icon--24"
      },
      "text": "EB531LM"
    }
  },
  "panelComponent": {
    "name": "@check-in-form--registered-user-license-plate",
    "instance": "check-in-form-registered-user-license-plate"
  },
  "edit-license-plate-dialog": true
}

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--assigned-license-plate
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/check-in/check-in--assigned.hbs
References (9): @link, @button, @pictogram, @button--as-link, @rounded-label, @fold, @dialog--add-license-plate, @dialog--choice-license-plate-multiple, @dialog--deletion
Referenced by (2): @page-parking-assignment-multiple, @page-parking-assignment-multiple--validation

No notes defined.