MOVU Components

Booking Cart: Payment Method With Voucher 

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-5 col-md-4">
            <div class="booking-cart" style="margin-top: 32px;">

                <div class="dismiss">
                    <i class="material-icons">close</i>
                </div>

                <div class="card-body">
                    <div class="provider-logo-tablet-holder">
                        <div class="provider-logo provider-logo-tablet"></div>
                    </div>
                    <div class="card-row">
                        <div class="card-column">
                            <h4>service:</h4>
                            <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
                        </div>
                        <div class="card-column">
                            <div class="provider-logo"></div>
                        </div>
                    </div>
                    <div class="divider-line"></div>
                    <div class="card-row card-row-column">
                        <div class="card-sub-row">
                            <div class="card-cell strong">Moving boxes</div>
                            <div class="card-cell strong">CHF 105.–</div>
                        </div>
                    </div>
                    <div class="divider-line"></div>
                    <div class="card-row card-row-column">
                        <div class="card-sub-row">
                            <div class="card-cell strong">Amount</div>
                            <div class="card-cell strong scratched">CHF 2040.–</div>
                        </div>
                        <div class="card-sub-row">
                            <div class="card-cell danger strong">Summerdiscount</div>
                            <div class="card-cell danger strong">- CHF 210.–</div>
                        </div>

                        <div class="card-sub-row">
                            <div class="card-cell danger strong">Voucher -30%</div>
                            <div class="card-cell danger strong">- CHF 549.–</div>
                        </div>

                    </div>
                    <div class="total-price-row card-row">
                        <div class="total-price-description">
                            <h3>Total</h3>
                            <div class="total-price-vat small">incl. VAT</div>
                        </div>
                        <h1 class="total-price-value">CHF 1830.–</h1>
                    </div>
                    <div class="instalment-box">
                        <div class="instalment-text">Payment by instalment</div>
                        <div class="instalment-price">3x CHF 523.-</div>
                    </div>
                    <div class="card-row floating-price no-padding-bottom">
                        <div>
                            <div class="card-cell strong">All-Risk moving insurance</div>
                            <div class="insurance-price-desc">separate invoice</div>
                        </div>
                        <div class="card-cell strong">CHF 69.–</div>
                    </div>
                    <div class="visible-xs">
                        <div class="divider-line movu-spacing-16-top"></div>
                        <div class="voucher-holder">

                            <div class="movu-booking-voucher movu-box-shadow e-2 ">
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="movu-booking-voucher-header">

                                            <h3 class="voucher-title">Voucher added <span class="discount-percentage">-30%</span></h3>
                                            <span class="material-icons show-more">expand_more</span>
                                            <span class="material-icons code-applied-icon">done</span>

                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <div class="movu-booking-voucher-body" style="display: none;">

                                            <div class="voucher-code-applied-content">
                                                <a href="#" class="remove-discount-link">
                                                    <span class="material-icons remove-discount">close</span>
                                                </a>
                                                <span class="discount-code-value">0123456789012</span>
                                                <h3 class="total-price-with-discount-code">-549 CHF.–</h3>
                                            </div>

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

                        </div>
                    </div>
                    <div class="card-row card-row-block">
                        <movu-button primary text="Order summary" cta custom_class='button-full-width'></movu-button>
                    </div>
                    <div class="small text-center movu-padding-16-bottom movu-padding-16-left movu-padding-16-right">
                        You can review and confirm your order in the next step
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-5 col-md-4">
      <div class="booking-cart" style="margin-top: 32px;">
        {% if dismissable %}
        <div class="dismiss">
          <i class="material-icons">close</i>
        </div>
        {% endif %}
        {% if page == 'offer-details' %}
          <div class="card-body card-body-hidden-xs">
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            <div class="card-row card-row-block">
              <movu-button primary text="Continue" cta custom_class='button-full-width'></movu-button>
            </div>
          </div>
          <div class="card-body card-body-visible-xs">
            <div class="total-price-row-inline">
              <div class="total-price-info">
                <div class="total-price-value">CHF 1830.–</div>
                <div class="total-price-description">Total <span class="total-price-vat small">incl. VAT</span></div>
              </div>
              <div class="button-holder">
                <movu-button primary text="Continue" cta></movu-button>
              </div>
            </div>
          </div>
        {% endif %}
        {% if page == 'additional-products' %}
          <div class="card-body">
            <div class="provider-logo-tablet-holder">
              <div class="provider-logo provider-logo-tablet"></div>
            </div>
            <div class="card-row">
              <div class="card-column">
                <h4>service:</h4>
                <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
              </div>
              <div class="card-column">
                <div class="provider-logo"></div>
              </div>
            </div>
            <div class="divider-line"></div>
            {% if editableItems %}
            <div class="card-row floating-price">
              <div>
                <div class="card-cell strong with-close"><i class="material-icons close-icon">close</i>Moving boxes</div>
                <movu-counter-spinner small steps="5" custom_class="light movu-spacing-36-left movu-spacing-8-top"></movu-counter-spinner>
              </div>
              <div>
                <div class="card-cell strong">CHF 105.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            {% endif %}
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Amount</div>
                <div class="card-cell strong scratched">CHF 2040.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">- CHF 210.–</div>
              </div>
            </div>
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            {% if editableItems %}
            <div class="card-row floating-price no-padding-bottom">
              <div>
                <div class="card-cell strong with-close"><i class="material-icons close-icon">close</i>All-Risk moving insurance</div>
                <div class="insurance-price-desc with-close">separate invoice</div>
              </div>
              <div class="card-cell strong">CHF 69.–</div>
            </div>
            {% endif %}
            <div class="card-row card-row-block">
              <movu-button primary text="Payment method" cta custom_class='button-full-width'></movu-button>
            </div>
            {% if moreInfo %}
              <div class="free-cancelation-box">
                <div class="small valid-until">Free cancelation until June 23, 2020</div>
                <div class="small">You can cancel your booked service free of charge up to 20 days before the service date.</div>
                <movu-button flat text="More information" cta></movu-button>
              </div>
            {% endif %}
          </div>
        {% endif %}
        {% if page == 'payment-method' %}
          <div class="card-body">
            <div class="provider-logo-tablet-holder">
              <div class="provider-logo provider-logo-tablet"></div>
            </div>
            <div class="card-row">
              <div class="card-column">
                <h4>service:</h4>
                <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
              </div>
              <div class="card-column">
                <div class="provider-logo"></div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Moving boxes</div>
                <div class="card-cell strong">CHF 105.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Amount</div>
                <div class="card-cell strong scratched">CHF 2040.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">- CHF 210.–</div>
              </div>
              {% if voucher %}
                <div class="card-sub-row">
                  <div class="card-cell danger strong">Voucher -30%</div>
                  <div class="card-cell danger strong">- CHF 549.–</div>
                </div>
              {% endif %}
            </div>
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            <div class="instalment-box">
              <div class="instalment-text">Payment by instalment</div>
              <div class="instalment-price">3x CHF 523.-</div>
            </div>
            <div class="card-row floating-price no-padding-bottom">
              <div>
                <div class="card-cell strong">All-Risk moving insurance</div>
                <div class="insurance-price-desc">separate invoice</div>
              </div>
              <div class="card-cell strong">CHF 69.–</div>
            </div>
            <div class="visible-xs">
              <div class="divider-line movu-spacing-16-top"></div>
               <div class="voucher-holder">
                  {% if voucher %}
                    {% render '@booking-voucher', { voucherCodeApplied: true, discountPercentage: '-30%', voucherTitle: 'Voucher added' } %}
                  {% else %}
                    {% render '@booking-voucher', { voucherTitle: 'Add voucher' } %}
                 {% endif %}
               </div>
            </div>
            <div class="card-row card-row-block">
              <movu-button primary text="Order summary" cta custom_class='button-full-width'></movu-button>
            </div>
            <div class="small text-center movu-padding-16-bottom movu-padding-16-left movu-padding-16-right">
              You can review and confirm your order in the next step
            </div>
          </div>
        {% endif %}
        {% if page == 'order-summary' %}
          <div class="card-body">
            <div class="provider-logo-tablet-holder">
              <div class="provider-logo provider-logo-tablet"></div>
            </div>
            <div class="card-row">
              <div class="card-column">
                <h4>service:</h4>
                <div class="service-type">Moving & Cleaning <i class="material-icons">edit</i></div>
              </div>
              <div class="card-column">
                <div class="provider-logo"></div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong">Moving boxes</div>
                <div class="card-cell strong">CHF 105.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong capitalize">Moving</div>
                <div class="card-cell strong scratched">CHF 1100.–</div>
              </div>
              <div class="card-sub-row no-padding-top">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">CHF 1000.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-column">
              <div class="card-sub-row">
                <div class="card-cell strong capitalize">Cleaning</div>
                <div class="card-cell strong scratched">CHF 990.–</div>
              </div>
              <div class="card-sub-row no-padding-top">
                <div class="card-cell danger strong">Summerdiscount</div>
                <div class="card-cell danger strong">CHF 900.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
              <div class="card-sub-row">
                <div class="card-cell">Additional service</div>
                <div class="card-cell">CHF 56.–</div>
              </div>
            </div>
            {% if voucher %}
              <div class="divider-line"></div>
              <div class="card-row">
                <div class="card-sub-row">
                  <div class="card-cell danger strong">Voucher -30%</div>
                  <div class="card-cell danger strong">- CHF 549.–</div>
                </div>
              </div>
            {% endif %}
            <div class="total-price-row card-row">
              <div class="total-price-description">
                <h3>Total</h3>
                <div class="total-price-vat small">incl. VAT</div>
              </div>
              <h1 class="total-price-value">CHF 1830.–</h1>
            </div>
            <div class="card-row floating-price">
              <div>
                <div class="card-cell strong">All-Risk moving insurance</div>
                <div class="insurance-price-desc">separate invoice</div>
              </div>
              <div class="card-cell strong">CHF 69.–</div>
            </div>
            <div class="divider-line"></div>
            <div class="card-row card-row-block no-padding-bottom">
              {% render '@checkbox--checked', { checkboxText: "I agree to the <a href='#'>Terms and Conditions</a> of Sholler Umzüge AG."}, true %}
            </div>
            <div class="card-row card-row-block">
              <movu-button primary text="Confirm payment" cta custom_class='button-full-width'></movu-button>
            </div>
            <div class="trust-box">
              <div class="small">Protected by</div>
              <div class="comodo-icon">
                {% render '@comodo-icon' %}
              </div>
              <div class="ekomi-icon">
                {% render '@ekomi-icon' %}
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
 
{
  "dismissable": true,
  "page": "payment-method",
  "voucher": true
}

No notes defined.