{# MODAL -- USER INFO CHECKOUT #}
{% embed "website/includes/modal.html.twig" with {
'id': 'modal-user-info-checkout',
'title': getLanguage('add_billing_data', 'profile'),
'classes': 'modal-wid',
}%}
{% from 'utils.html.twig' import switch, ico %}
{# IS BRAZIL #}
{% set isBrazilSetup = (getConfig('checkout_default_region') == '1')? false : true %}
{% block title %}
<h3>
<span data-mode-show="create">{{ getLanguage('title_add_new', 'modals') }}</span>
<span data-mode-show="edit">{{ getLanguage('title_edit', 'modals') }}</span>
<span data-mode-show="fix">{{ getLanguage('title_complete', 'modals') }}</span>
</h3>
{% endblock %}
{% block content %}
<form
id="formUserInfoCheckout"
class="form-geral"
data-keep-validator="true"
data-is-brazil-default="{{ isBrazilSetup? 1 : 0 }}"
data-is-brazil-active="{{ isBrazilSetup? 1 : 0 }}"
data-save-action="{{ path('registerUserCheckoutInfo') }}"
data-edit-action="{{ path('editUserCheckoutInfo', { id: null }) }}"
data-save-method="POST"
data-edit-method="PUT">
<div class="cp-cols">
{# NAME #}
<div class="cp cp-2">
<label for="fatura-name">
{{ getLanguage('name', 'profile') }}
<em> *</em>
</label>
<input type="text" id="fatura-name" name="name" placeholder="{{ getLanguage('name_or_company', 'profile') }}" required autofocus="autofocus" maxlength="70">
</div>
{# EMAIL #}
<div class="cp cp-2">
<label for="fatura-email">
E-mail
<em> *</em>
</label>
<input type="email" id="fatura-email" name="email" placeholder="{{ getLanguage('enter_an_email', 'profile') }}" required autofocus="autofocus" maxlength="70">
</div>
{# PHONE #}
<div class="cp cp-4 cp-gd">
<label for="fatura-telephone">
{{ getLanguage('phone', 'profile') }}
<em> *</em>
</label>
<input id="fatura-telephone" type="text" class="intlPhone" name="phone" required>
</div>
{# IS BRAZILIAN #}
<div class="cp cp-pq">
<label for="fatura-country">{{ getLanguage('am_brazilian', 'util') }}</label>
{{ switch({
name: 'country',
id: 'fatura-country',
checked: isBrazilSetup,
attribs: 'class="isBrazil_fatura"',
})}}
</div>
{# DOCUMENT #}
<div class="cp cp-2">
<label for="fatura-document" data-country="{{ isBrazilSetup? 1:'' }}">
{{ getLanguage('document', 'profile') }}<span class="document-type"> (CPF / CNPJ)</span>
<em> *</em>
</label>
<input id="fatura-document" type="text" name="document" required>
</div>
{# ////// ADDRESS ////// #}
{# ZIP CODE | CEP #}
<div class="cp cp-3">
<label for="fatura-zipCode">
{{ getLanguage('zipcode', 'profile') }}
{% if reqAddress %}<em> *</em>{% endif %}
</label>
<input id="fatura-zipCode" type="text" name="zipCode" {{ reqAddress? 'required' }} placeholder="{{ getLanguage('enter_zip_code', 'profile') }}">
</div>
{# STATE #}
<div class="cp cp-3" data-show-brazil>
<label for="fatura-state">
{{ getLanguage('state', 'profile') }}
{% if reqAddress %}<em> *</em>{% endif %}
</label>
<div class="select-wrap">
<select id="fatura-state"
name="state"
request="{{ path('stateList') }}"
save=""
class="custom-select custom-select--search"
{{ reqAddress? 'required' }}>
<option value="">{{ getLanguage('select_state', 'profile') }}</option>
<option value="other">{{ getLanguage('other', 'profile') }}</option>
</select>
<i class="loader">{{ ico('loader-wish') }}</i>
</div>
</div>
{# CITY #}
<div class="cp cp-3" data-show-brazil>
<label for="fatura-city">
{{ getLanguage('city', 'profile') }}
{% if reqAddress %}<em> *</em>{% endif %}
</label>
<div class="select-wrap">
<select id="fatura-city"
name="city"
request="{{ path('cityList') }}"
save=""
class="custom-select custom-select--search"
{{ reqAddress? 'required' }}>
<option value="">{{ getLanguage('select_city', 'profile') }}</option>
<option value="other">{{ getLanguage('other', 'profile') }}</option>
</select>
<i class="loader">{{ ico('loader-wish') }}</i>
</div>
</div>
{# ADDRESS #}
<div class="cp cp-3-2">
<label for="fatura-address">
{{ getLanguage('address', 'profile') }}
{% if reqAddress %}<em data-show-brazil> *</em>{% endif %}
</label>
<input id="fatura-address" type="text" name="address" {{ reqAddress? 'required' }} placeholder="{{ getLanguage('type_your_address', 'profile') }}">
</div>
{# NUMBER #}
<div class="cp cp-3">
<label for="fatura-addressNumber">
{{ getLanguage('number', 'profile') }}
{% if reqAddress %}<em data-show-brazil> *</em>{% endif %}
</label>
<input id="fatura-addressNumber" type="text" name="addressNumber" class="mask-digits" {{ reqAddress? 'required' }} placeholder="{{ getLanguage('type_your_number', 'profile') }}">
</div>
{# COMPLEMENT #}
<div class="cp cp-2">
<label for="fatura-addressComplement">{{ getLanguage('complement', 'profile') }}</label>
<input id="fatura-addressComplement" type="text" name="addressComplement" placeholder="{{ getLanguage('type_your_complement', 'profile') }}" maxlength="110">
</div>
{# NEIGHBORHOOD #}
<div class="cp cp-2">
<label for="fatura-addressNeighborhood">
{{ getLanguage('district', 'profile') }}
{% if reqAddress %}<em> *</em>{% endif %}
</label>
<input id="fatura-addressNeighborhood" type="text" name="addressNeighborhood" {{ reqAddress? 'required' }} placeholder="{{ getLanguage('enter_district', 'profile') }}" maxlength="60">
</div>
{# ////////////////////////////////////////////// #}
{# RECEIVE EMAIL #}
<div class="cp cp-br">
<label>
<input type="checkbox" id="receiveEmail" name="receiveEmail" checked>
{{ getLanguage('receive_email', 'profile') }}
</label>
</div>
</div>
<nav class="actions">
<button type="button" class="js--modal-fecha cancel">{{ getLanguage('cancel', 'profile') }}</button>
<button type="submit" id="btnSaveUserInfoCheckout" class="btn-continuar-peq btn-load">
<span id="modalInfoCheckoutBtnLabel">{{ getLanguage('save', 'modals')|upper }}</span>
<span>{{ getLanguage('wait', 'util') }} … <i class="loader">{{ ico('loader-wish') }}</i></span>
</button>
</nav>
</form>
{% endblock %}
{% endembed %}