Addon: Parking

Reviewed

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-addon c-addon--benefit parking">

    <div class="c-addon__features">
        <p class="c-addon__title">Parcheggio + Lounge</p>
        <p class="c-addon__subtitle">Scopri i vantaggi di prenotare e pagare online!</p>
        <p class="c-addon__body">Ti serve un parcheggio? Cerca e aggiungi un parcheggio alla tua Vip Lounge, <strong>paga online e risparmia il 20% sul tuo ingresso in VIP Lounge!</strong></p>
    </div>

    <div class="c-addon__interaction">
        <div class="c-addon__what" aria-hidden="true">
            <img src="../../images/svgs/p1-2.svg" alt="Parcheggio P1 P2" width="60">
            <img src="../../images/svgs/p3.svg" alt="Parcheggio P3" width="60">
            <img src="../../images/svgs/p4.svg" alt="Parcheggio P4" width="60">
        </div>
        <div class="c-addon__action">
            <button type="button" class="c-button c-button--adding js-fr-dialogmodal-open" aria-controls="dialog-parking-form">

                Aggiungi parcheggio

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

    <div class="c-addon__voucher">
        <div class="c-highlight c-highlight--small">
            <p>Hai a disposizione <strong>[1] voucher parcheggio</strong>, approfittane!</p>
        </div>
    </div>

</div>

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

            <p class="c-dialog__title c-dialog__text--centered" id="dialog-parking-form-title">Acquista il tuo parcheggio!</p>

            <p class="c-dialog__text c-dialog__text--centered">

                Indicaci le date e l’orario del tuo prossimo parcheggio, acquistalo e ottieni il 20% di sconto sul tuo ingresso Vip Lounge.
                <br><br>
            </p>

            <div class="c-form c-form--parkings">

                <div class="c-form__el c-form__el--icon">
                    <svg class="c-icon c-icon--32">
                        <use xlink:href="#entrata-parcheggio-24px"></use>
                    </svg>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="entrance-date" class="is-datepicker" aria-label="Scegli la data">

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

                        <input id="entrance-date" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="entrance-date-note">

                        <p class="c-field__note " id="entrance-date-note">
                            Seleziona la data di entrata al parcheggio
                        </p>

                    </label>

                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="entrance-time" class="" aria-label="">
                        Ore <span class="required-marker" aria-hidden="true">*</span>
                        <select id="entrance-time" class="" aria-describedby="entrance-time-note">
                            <option value="" disabled selected>00:00</option>
                            <option value="option-1">20:00</option>
                            <option value="option-2">20:15</option>
                            <option value="option-3">20:30</option>
                            <option value="option-4">20:45</option>
                        </select>
                        <em class="c-field__note " id="entrance-time-note">
                            Seleziona l'ora di ingresso al parcheggio
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--icon">
                    <svg class="c-icon c-icon--32">
                        <use xlink:href="#uscita-parcheggio-24px"></use>
                    </svg>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="exit-date" class="is-datepicker" aria-label="Scegli la data">

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

                        <input id="exit-date" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="exit-date-note">

                        <p class="c-field__note " id="exit-date-note">
                            Seleziona la data di uscita dal parcheggio
                        </p>

                    </label>

                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="exit-time" class="" aria-label="">
                        Ore <span class="required-marker" aria-hidden="true">*</span>
                        <select id="exit-time" class="" aria-describedby="exit-time-note">
                            <option value="" disabled selected>00:00</option>
                            <option value="option-1">20:00</option>
                            <option value="option-2">20:15</option>
                            <option value="option-3">20:30</option>
                            <option value="option-4">20:45</option>
                        </select>
                        <em class="c-field__note " id="exit-time-note">
                            Seleziona l'ora di uscita dal parcheggio
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--cal">
                    <label for="select-conventions" class="" aria-label="">
                        Convenzione:
                        <select id="select-conventions" class="" aria-describedby="select-conventions-note">
                            <option value="" disabled selected>Hai una convenzione?</option>
                            <option value="option-1">Alba Tour</option>
                            <option value="option-2">Alpitour</option>
                            <option value="option-3">Brixia Viaggi</option>
                            <option value="option-4">Club Med</option>
                            <option value="option-5">Domina Travel</option>
                            <option value="option-6">In Viaggi</option>
                            <option value="option-7">Marsupio Group</option>
                            <option value="option-8">Smeg S.p.A.</option>
                            <option value="option-9">Viaggi Idea</option>
                        </select>
                        <em class="c-field__note " id="select-conventions-note">
                            Seleziona un'opzione dal menù a tendina
                        </em>
                    </label>
                </div>

                <div class="c-form__el c-form__el--sel">
                    <label for="file-number" class="" aria-label="">

                        Numero pratica

                        <input id="file-number" type="text" class="" placeholder="es. AA46923757" value="" aria-describedby="file-number-note">

                        <p class="c-field__note " id="file-number-note">
                            Inserisci il numero di pratica della convenzione
                        </p>

                    </label>

                </div>

                <p class="c-dialog__text">
                    <strong>AVVISO IMPORTANTE</strong><br>
                    1) Per avvalersi della convenzione e della tariffa scontata, è indispensabile, al rientro dal viaggio, prima di pagare e di ritirare l'auto, consegnare il voucher del Tour Operator o mostrare la tessera di accreditamento alla cassa del <a href="#"><strong>Presidio Parcheggi</strong></a>.
                    <br><br>
                    2) La mancata o ritardata consegna del voucher o visione della tessera di accreditamento, ovvero dopo aver pagato la sosta alle casse automatiche o alle colonne di uscita, implica la perdita del diritto di avvalersi della tariffa scontata e l'applicazione della tariffa standard senza possibilità di rimborso.
                    <br><br>

                    <input type="checkbox" id="conventions-terms" name="accespt" class="u-visuallyhidden " role="group" aria-label="conventions-terms">

                    <label for="conventions-terms" class="terms-conditions">
                        <strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>
                    </label>
                </p>
                <div class="c-form__el c-form__el--cta">
                    <button type="submit" class="c-button c-button--submit">

                        Cerca parcheggio

                    </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-addon {{ modifier }}">
  
  <div class="c-addon__features">
    <p class="c-addon__title">{{{ title }}}</p>
    <p class="c-addon__subtitle">{{{ subtitle }}}</p>
    <p class="c-addon__body">{{{ body }}}</p>
  </div>

  <div class="c-addon__interaction">
    <div class="c-addon__what" aria-hidden="true">
      <img src="{{ path '/images/svgs/p1-2.svg' }}" alt="Parcheggio P1 P2" width="60">
      <img src="{{ path '/images/svgs/p3.svg' }}" alt="Parcheggio P3" width="60">
      <img src="{{ path '/images/svgs/p4.svg' }}" alt="Parcheggio P4" width="60">
    </div>
    <div class="c-addon__action">
      {{> @button btn }}
    </div>
  </div>

  {{#if voucher-highlight}}
  <div class="c-addon__voucher">
    {{> @highlight voucher-highlight }}
  </div>
  {{/if}}

</div>

{{ render "@dialog--parking-form" }}


        
            
            {
  "name": "adding",
  "status": "reviewed",
  "addon-name": "Lavaggio autovettura",
  "features": [
    {
      "title": "Da",
      "description": "€ 8,00"
    },
    {
      "title": "a",
      "description": "€ 12,00"
    }
  ],
  "tooltip": {
    "tooltip_aria_label": "Espandi le informazioni nascoste",
    "tooltip_exposed_icon": "ic_info_black_24px",
    "tooltip_exposed_text": null,
    "tooltip_position_class": "c-tooltip__bubble--down",
    "bubble_text": "Qui va il contenuto aggiuntivo"
  },
  "btn": {
    "type": "button",
    "text": "Aggiungi parcheggio",
    "modifier": "c-button--adding js-fr-dialogmodal-open",
    "aria-label": null,
    "opens-dialog": "dialog-parking-form"
  },
  "modifier": "c-addon--benefit parking",
  "title": "Parcheggio + Lounge",
  "subtitle": "Scopri i vantaggi di prenotare e pagare online!",
  "body": "Ti serve un parcheggio? Cerca e aggiungi un parcheggio alla tua Vip Lounge, <strong>paga online e risparmia il 20% sul tuo ingresso in VIP Lounge!</strong>",
  "voucher-highlight": {
    "modifier": "c-highlight--small",
    "text": "<p>Hai a disposizione <strong>[1] voucher parcheggio</strong>, approfittane!</p>"
  }
}

File:

Content:


                                $park-item-bp: bp(phone-l);

.c-addon {
  background-color: #fff;
  border: 1px solid primary(night, 20);
  padding: remify(24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: remify(16px);

  @include max-screen( bp(phone-p) ) {
    flex-wrap: wrap;
  }

  main & {
    grid-column: full;

    @include min-screen( $base-page-width ) {
      grid-column: main;
    }
    
  }

  [grid~=grid] & {
    grid-column: initial;
  }

  .c-product--recap ~ & {
    margin-bottom: 0;
    border-radius: 0;

    @include min-screen( $base-page-width ) {
      border-radius: remify(4px);
    }
  }

}

.c-addon__voucher {
  margin-top: remify(32px);
  flex: 1 0 100%;
  
  .c-highlight {
    display: inline-block;
  }
}

.c-addon__what {
  color: primary(night, 100);
  @include font-scale(level-1-5);
  flex-shrink: 1;
  flex-grow: 1;
  // margin-bottom: remify(16px);

  @include min-screen( $base-page-width ) {
    margin-bottom: 0;
  }

  .c-addon__title {
    @include font-scale(level-2, bold);

    .c-tooltip { vertical-align: sub;}
  }
}

.c-addon__features {
  display: flex;
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: remify(250px);
  justify-content: flex-end;
  // margin-left: remify(48px);

  @include max-screen( bp(phone-p) ) {
    flex-basis: remify(180px);
    justify-content: flex-start;
  }
}

.c-addon__feature {
  margin-right: remify(24px);
  min-width: remify(80px);



  & > * {
    display: block;
    text-align: center;
  }

  .title {
    text-transform: uppercase;
    font-size: 75%;
  }

  .description {
    @include font-scale(level-4, bold);
    line-height: remify(20px);
    white-space: nowrap;
  }

}

.c-addon__action {
  flex-basis: 15%;
  flex-grow: 0;
  flex-shrink: 1;
  text-align: center;
}

/*------------------------------------*\
  Addon Benefit Modifier
\*------------------------------------*/

.c-addon--benefit {
  
  background: primary(night, 100);

  .c-addon__what {
    display: none;

    @include min-screen ( bp(tablet-p) ) {
      display: block;
      flex-basis: auto;
    }

    @include min-screen ( remify(1280px) ) {
      position: relative;
      left: remify(-50px);
    }

  }

  .c-addon__features {
    display: block;
    flex: auto;
    text-align: center;

    @include min-screen ( bp(tablet-p) ) {
      flex: 1 0 remify(500px);
      text-align: left;
    }

    p {
      color: #fff;
      font-weight: fw(light);
      margin-bottom: remify(24px);

      @include min-screen ( bp(tablet-p) ) {
        font-size: 150%;
        line-height: remify(32px);
      }

      small {
        font-size: remify(12px);
      }

    }

  }

  .c-addon__action {
    flex: 1 0 remify(100px);
    
    span {
      font-size: remify(12px);
      text-transform: uppercase;
      color: #fff;

      &.barred {
        font-size: remify(16px);
        text-decoration: line-through;
      }

    }

    strong {
      font-size: remify(24px);
      line-height: 1;
      color: #fff;
      margin-bottom: remify(16px);
    }

    // button {

    //   &:not(.c-button--qty button) {
    //     margin: 0 auto remify(8px);
    //   }

    // }

    .c-button--adding {

      .js-available & {
        display: block;
      }

      .no-js & {
        display: none;
      }

    }

    .c-button--qty {

      .js-available & {
        display: none;
      }

      .no-js & {
        display: block;
      }

    }

    .c-button {
      // margin-left: auto;
      // margin-right: auto;
      width: 100%;
      max-width: remify(250px);
    }

    .price {
      display: none;
      & > * {
        display: block;
        text-align: center;
      }
    }

    // a {
    //   color: #fff;
    //   text-decoration: underline;
    //   font-size: 75%;

    //   @include min-screen ( bp(tablet-p) ) {
    //     font-size: 100%;
    //   }

    // }

  }

  .c-product--payed.qrcode & {
    margin-bottom: 0;

    @include min-screen( $park-item-bp ) {
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: remify(16px);
    }
  }

  .c-product--payed.telepass & {
    margin-bottom: 0;

    @include min-screen( $park-item-bp ) {
      width: 85%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: remify(16px);
    }
  }

}

/*------------------------------------*\
  Addon Single Price Modifier
\*------------------------------------*/

.c-addon--single-price {

  .c-addon__features {
    
    @include min-screen(remify(811px)) {
      justify-content: flex-end;
    }

  }
  
}

/*------------------------------------*\
  Addon Benefit Parking Modifier
\*------------------------------------*/

.c-addon--benefit.parking {
  display: block;

  @include min-screen(bp(tablet-p)) {
    display: flex;
    flex-wrap: wrap;
  }

  p {
    margin-bottom: 0;
  }

  .c-addon__title {
    @include font-scale(level-4, bold);
    margin-bottom: 0;
  }

  .c-addon__subtitle {
    @include font-scale(level-3, light);
    margin-bottom: remify(8px);
  }

  .c-addon__body {
    @include font-scale(level-2, regular);
  }

  .c-addon__features {
    text-align: left;

    @include max-screen ( bp(tablet-p) ) {
      margin-bottom: remify(24px);
    }
  }

  .c-addon__what {
    display: flex;
    margin-bottom: remify(24px);

    @include min-screen ( bp(tablet-p) ) {
      flex-grow: 0;
      justify-content: space-between;
      left: initial;
    }

    img {
      margin-right: remify(8px);
    }

    .placeholder {
      display: inline-block;
      width: remify(60px);
      height: remify(60px);
      border: 1px dashed #fff;
      border-radius: remify(4px);
      flex: 0 0 auto;
    }

  }

  .c-addon__action {
    text-align: left;
  }

}

/*------------------------------------*\
  Addon Modify Modifier
\*------------------------------------*/

.c-addon--modify {
  background-color: primary(sky, 20);
  display: block;
  padding: remify(16px) remify(48px);
  border-bottom: 1px solid #fff;
  border-radius: 0;

    @include min-screen(bp(tablet)) {
      display: flex;
    }

  & > * {
    margin-bottom: 0;
    margin-right: 0;
  }

  &:last-child {
    border-radius: 0 0 remify(12px) remify(12px);
  }
  .c-folding & {
    margin-bottom: 0;
  }

  .c-addon__what {
    display: block;
    color: secondary(text, 100);
    font-size: remify(16px);
    margin-bottom: remify(16px);
    text-align: center;
    
    @include min-screen(bp(tablet)) {
      flex-basis: remify(440px);
      display: flex;
      margin-bottom: remify(0px);
      text-align: left;
    }
    
    span { 
      color: primary(night, 100); 
      font-weight: fw(bold);
      display: inline-block;
      margin-right: remify(8px);
    }

  }
  
  .c-addon__features {
    flex-basis: remify(100px);
    flex-grow: 1;
    
    @include min-screen(bp(phablet)) {
      justify-content: flex-end;
    }

    a {
      // margin-left: remify(16px);
    }
  }

  .c-addon__action {
    color: primary(night, 100); 
    font-weight: fw(bold);
    flex-grow: 1
  }

}

/*------------------------------------*\
  Addon Discounts Modifier
\*------------------------------------*/

.c-addon--discounts {

  @include bg-gradient-t2b(#fff, primary(sky, 20));
  padding: remify(24px);
  color: primary(night, 100);

  @include min-screen(bp(tablet-p)) {
    flex-wrap: nowrap;
  }

  .value {
   @include font-scale(level-3, bold);
  }

  .text {
    @include font-scale(level-1);
   }

  .c-folding & {

    // margin-left: remify(16px);
    // margin-right: remify(16px);

    @include min-screen(bp(tablet-p)) {
      position: relative;
      max-width: remify(950px);
      left: 50%;
      transform: translateX(-50%);
      top: remify(40px);
      z-index: 10;
      margin-top: remify(-40px);
    }
  }

  .intro-text {
    margin-right: 0;

    @include min-screen(bp(tablet-p)) {
      margin-bottom: 0;
      flex: 0 1 remify(200px);
    }

    p {
     @include font-scale(level-2);
    }

    a {
      display: block;
      color: currentColor;
      margin-top: remify(16px);
      @include font-scale(level-1, bold);
    }

  }

  .list {
    margin-bottom: 0;

    @include min-screen(bp(tablet-p)) {
      display: flex;
    }

    li {
      display: flex;
      align-items: center;
      margin-bottom: remify(16px);

      &:last-child {
        margin-bottom: 0;
        @include min-screen(bp(tablet-p)) {
          margin-right: 0;
        }
      }

      @include min-screen(bp(tablet-p)) {
        margin-bottom: 0;
        margin-right: remify(16px);
      }

    }

    img {
      margin-right: remify(16px);
      width: remify(54px);
      height: remify(54px);
    }

  }

}

/*------------------------------------*\
  MBL Modifier
\*------------------------------------*/
.c-addon--mbl {
  flex-direction: column;
  gap: remify(16px);
  background-color: primary(sky, 20);
  justify-content: initial;
  align-items: flex-start;

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

  .c-addon__inner {
    display: flex;
    gap: remify(16px);
  }

  .c-addon__features {
    flex-direction: column;
    gap: remify(8px);
    color: primary(night, 100);
    flex: initial;
    align-self: flex-start;
  }

  .c-addon__title {
    @include font-scale(level-4, bold);
  }

  .c-addon__subtitle {
    @include font-scale(level-3, light);
  }

  .c-addon__body {
    @include font-scale(level-2);
  }

  .c-addon__interaction {
    @include min-screen(bp(tablet)) {
      margin-left: auto;
    }
  }

  .c-addon__image {
    display: none;
    
    @include min-screen(bp(tablet)) {
      display: block;
      margin-right: remify(24px);
    }

    @include min-screen(bp(tablet-p)) {
      margin-right: remify(48px);
    }
    
    img {
      min-width: remify(90px);
    }
  }

  .c-addon__list {
    margin-top: remify(8px);
    background-color: secondary(basic-white, 100);
    border-radius: remify(12px);
    padding: remify(16px);
    font-weight: fw(semibold);
  }

}

URL: /components/raw/addon/_addon.scss
Filesystem Path: src/views/03-organisms/addon/_addon.scss
Size: 10 KB

Content:


                                (function($) {

  var $qtyBtnTrigger = $('.js-enable-qty-trigger');
  var $qtyBtn = $('.js-btn-qty');
  var $priceCtrl = $('.js-mbl-price-ctrl');

  $qtyBtnTrigger.click(function(){
    $(this).hide();
    $qtyBtn.css({'display': 'flex', 'justify-content': 'space-around'});
    $qtyBtn.find('.minus').focus();
    $priceCtrl.show();
  });


  /********
   !!! 
   THIS PART IS NOW 
   in file _ src/views/01-atoms/ctas/button/button--qty.js _ 
   leave here commented for future references
   !!!
  ********/
  
  // // MANAGE BUTTON/INPUT ADD/REMOVE VIP LOUNGE
  // var qtyValue = $('#vip_lounge_qty');
  // var addBtn = $('.js-toggle-add');
  // var removeBtn = $('.js-toggle-remove');
  // var icon = $('#icon_toggle_lounge');
  // var parkTooltip = $('#tooltip_toggle_lounge');

  // // increase value
  // addBtn.click(function() {
  //   $(removeBtn).prop('disabled', false);
  //   $(parkTooltip).removeClass('active');
  //   $(icon).addClass('active');
  //   $(qtyValue).val(function(i, oldval) {
  //     return ++oldval;
  //   })
  // });

  // // decrease value
  // removeBtn.click(function() {
  //   $(qtyValue).val(function(i, oldval) {
    
  //   if (oldval >= 1) {
  //     if (oldval <= 1) {
  //       $(removeBtn).prop('disabled', true);
  //       $(parkTooltip).addClass('active');
  //       $(icon).removeClass('active');
  //     }
  //     return --oldval;
  //   }

  //   })
  // });
})(jQuery);

URL: /components/raw/addon/addon.js
Filesystem Path: src/views/03-organisms/addon/addon.js
Size: 1.4 KB

Handle: @addon--parking
Preview:
- With layout
- Component only
Filesystem Path: src/views/03-organisms/addon/addon--parking.hbs
References (3): @button, @highlight, @dialog--parking-form
Referenced by (3): @page-parking-vouchers-list, @page-mbl-thanks-cross-sell, @page-only-mbl-thank-you

No notes defined.