MOVU Components

Billing Information 

<div class="row">
    <div class="col-xs-12">
        <h3 class="regular-size movu-spacing-16-top">Invoice address</h3>
        <p class="small movu-spacing-16-bottom">Please use the address where you are currently registered at. <br>
            The solvency check will be sent to this address.</p>
        <div class="radio-btn-item">
            <div class="form-radio-btn">
                <label class="radio-btn radio two-rows small-padding" for="radio_btn_input">
                    <div class="radio-btn-title-holder">
                        <div class="radio-btn-title-section">
                            <span class="radio-btn-text">Same as service address</span>

                        </div>
                        <div class="small radio-info-text">Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich</div>
                    </div>
                    <input type="radio" hidden class="radio-btn-default" value="radio-btn-name">

                </label>
            </div>

        </div>
        <div class="radio-btn-item">
            <div class="form-radio-btn">
                <label class="radio-btn radio two-rows small-padding" for="radio_btn_input">
                    <div class="radio-btn-title-holder">
                        <div class="radio-btn-title-section">
                            <span class="radio-btn-text">Choose different invoice address</span>
                            <div class="material-icons">edit</div>
                        </div>
                        <div class="small radio-info-text">Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich</div>
                    </div>
                    <input type="radio" hidden class="radio-btn-default" value="radio-btn-name">

                </label>
            </div>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="different-address">
            <div class="row">
                <div class="col-xs-12">
                    <div class="radio-btn-item">
                        <div class="form-radio-btn">
                            <label class="radio-btn radio small-padding private-address" for="radio_btn_input">
                                <div class="radio-btn-title-holder">
                                    <div class="radio-btn-title-section">
                                        <span class="radio-btn-text">Private Address</span>

                                    </div>

                                </div>
                                <input type="radio" hidden class="radio-btn-default" value="radio-btn-name">

                            </label>
                        </div>

                    </div>
                    <div class="radio-btn-item">
                        <div class="form-radio-btn">
                            <label class="radio-btn radio small-padding company-address" for="radio_btn_input">
                                <div class="radio-btn-title-holder">
                                    <div class="radio-btn-title-section">
                                        <span class="radio-btn-text">Company Address</span>

                                    </div>

                                </div>
                                <input type="radio" hidden class="radio-btn-default" value="radio-btn-name">

                            </label>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-lg-6 padding-right-reduced-desktop">
                    <movu-text-input placeholder="Company Name"></movu-text-input>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="radio-btn-item">
                        <div class="form-radio-btn">
                            <label class="radio-btn radio checked" for="radio_btn_input">
                                <div class="radio-btn-title-holder">
                                    <div class="radio-btn-title-section">
                                        <span class="radio-btn-text">Mr</span>

                                    </div>

                                </div>
                                <input type="radio" hidden class="radio-btn-default" value="radio-btn-name">

                            </label>
                        </div>

                    </div>
                    <div class="radio-btn-item">
                        <div class="form-radio-btn">
                            <label class="radio-btn radio" for="radio_btn_input">
                                <div class="radio-btn-title-holder">
                                    <div class="radio-btn-title-section">
                                        <span class="radio-btn-text">Ms</span>

                                    </div>

                                </div>
                                <input type="radio" hidden class="radio-btn-default" value="radio-btn-name">

                            </label>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-lg-6 margin-20-bottom text-size no padding-right-reduced-desktop">
                    <movu-text-input placeholder="First Name"></movu-text-input>
                </div>
                <div class="col-xs-12 col-lg-6 margin-20-bottom text-size padding-left-reduced-desktop">
                    <movu-text-input placeholder="Last Name"></movu-text-input>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <movu-address is_full="true" city_placeholder_txt="City" street_placeholder_txt='Street and No.' zip_placeholder_txt='Zip' sm_size='12'></movu-address>
                </div>
            </div>
            <div class="row cta-holder">
                <div class="btn-primary-wrapper">
                    <movu-button flat text="Ajouter l’adresse" primary></movu-button>
                </div>
                <div class="btn-flat-wrapper">
                    <movu-button flat text="Cancel" right_icon="close" custom_class='cancel-btn'></movu-button>
                </div>
            </div>
        </div>
        <div class="row birthday-row">
            <div class="col-xs-12">
                <h4 class="birthday-title movu-spacing-8-bottom movu-spacing-16-top">Birthday</h4>
                <div class="row">
                    <div class="col-xs-12 col-sm-4 padding-right-reduced-tablet">
                        <movu-dropdown placeholder_text='Day' items='[{"id":"1","name":"Day 1"},{"id":"2","name":"Day 2"}, {"id":"3","name":"Day 3"}]'></movu-dropdown>
                    </div>

                    <div class="col-xs-12 col-sm-4 padding-left-reduced-tablet padding-right-reduced-tablet">
                        <movu-dropdown placeholder_text='Month' items='[{"id":"1","name":"Month 1"},{"id":"2","name":"Month 2"}, {"id":"3","name":"Month 3"}]'></movu-dropdown>
                    </div>

                    <div class="col-xs-12 col-sm-4 padding-left-reduced-tablet">
                        <movu-dropdown placeholder_text='Year' items='[{"id":"1","name":"Year 1"},{"id":"2","name":"Year 2"}, {"id":"3","name":"Year 3"}]'></movu-dropdown>
                    </div>
                </div>

            </div>
        </div>
        <p class="small info-text pull-left">Purchases on invoice are executed by our partner POWERPAY. You will recieve the invoice by email. By clicking "order summary" you accept the General Terms and Conditions from POWERPAY. A valid email address is required.</p>
    </div>
</div>
 
<div class="row">
  <div class="col-xs-12">
    <h3 class="regular-size movu-spacing-16-top">Invoice address</h3>
    <p class="small movu-spacing-16-bottom">Please use the address where you are currently registered at. <br>
    The solvency check will be sent to this address.</p>
    <div class="radio-btn-item">
      {% render '@radio-button', { radioBtnText: 'Same as service address', className: 'radio-btn radio two-rows small-padding', radioBtnDescription: 'Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich'}, true %}
    </div>
    <div class="radio-btn-item">
      {% render '@radio-button--checked', { hasEdit: true, radioBtnText: 'Choose different invoice address', className: 'radio-btn radio two-rows small-padding', radioBtnDescription: 'Mr. Andrej Balint, Universitätstrasse 63, 8006 Zürich'}, true %}
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="different-address">
      <div class="row">
        <div class="col-xs-12">
          <div class="radio-btn-item">
            {% render '@radio-button', { radioBtnText: 'Private Address', className: 'radio-btn radio small-padding private-address'}, true %}
          </div>
          <div class="radio-btn-item">
            {% render '@radio-button--checked', { radioBtnText: 'Company Address', className: 'radio-btn radio small-padding company-address'}, true %}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-lg-6 padding-right-reduced-desktop">
          {% render '@text-input', { textName: 'Company Name', placeholder: 'Company Name', errors: true }, true %}
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="radio-btn-item">
            {% render '@radio-button--checked', { radioBtnText: 'Mr'}, true %}
          </div>
          <div class="radio-btn-item">
            {% render '@radio-button', { radioBtnText: 'Ms'}, true %}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-lg-6 margin-20-bottom text-size no padding-right-reduced-desktop">
          {% render '@text-input', { textName: 'First Name', placeholder: 'First Name', errors: true }, true %}
        </div>
        <div class="col-xs-12 col-lg-6 margin-20-bottom text-size padding-left-reduced-desktop">
          {% render '@text-input', { textName: 'Last Name', placeholder: 'Last Name', errors: true }, true %}
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <movu-address is_full="true" city_placeholder_txt="City" street_placeholder_txt='Street and No.' zip_placeholder_txt='Zip' sm_size='12'></movu-address>
        </div>
      </div>
      <div class="row cta-holder">
          <div class="btn-primary-wrapper">
            <movu-button flat text="Ajouter l’adresse" primary></movu-button>
          </div>
          <div class="btn-flat-wrapper">
            <movu-button flat text="Cancel" right_icon="close" custom_class='cancel-btn'></movu-button>
          </div>
      </div>
    </div>
    <div class="row birthday-row">
      <div class="col-xs-12">
        <h4 class="birthday-title movu-spacing-8-bottom movu-spacing-16-top">Birthday</h4>
        <div class="row">
          <div class="col-xs-12 col-sm-4 padding-right-reduced-tablet">
            <movu-dropdown placeholder_text='Day' items='[{"id":"1","name":"Day 1"},{"id":"2","name":"Day 2"}, {"id":"3","name":"Day 3"}]'></movu-dropdown>
          </div>

          <div class="col-xs-12 col-sm-4 padding-left-reduced-tablet padding-right-reduced-tablet">
            <movu-dropdown placeholder_text='Month' items='[{"id":"1","name":"Month 1"},{"id":"2","name":"Month 2"}, {"id":"3","name":"Month 3"}]'></movu-dropdown>
          </div>

          <div class="col-xs-12 col-sm-4 padding-left-reduced-tablet">
            <movu-dropdown placeholder_text='Year' items='[{"id":"1","name":"Year 1"},{"id":"2","name":"Year 2"}, {"id":"3","name":"Year 3"}]'></movu-dropdown>
          </div>
        </div>

      </div>
    </div>
    <p class="small info-text pull-left">{{ billingInformationInfoText }}</p>
  </div>
</div>
 
{
  "cardTitle": "Billing information",
  "billingInformationInfoText": "Purchases on invoice are executed by our partner POWERPAY. You will recieve the invoice by email. By clicking \"order summary\" you accept the General Terms and Conditions from POWERPAY. A valid email address is required.",
  "errors": true
}

No notes defined.