Symfony Profiler

{% extends 'AtechNetCoreBundle/base.html.twig' %}
{% import "AtechNetCoreBundle/macros.html.twig" as macros %}
{% import "AtechNetCoreBundle/input-macros.html.twig" as inputMacros %}
{% block content %}
{% set defaultLocale = app.request.session.get('defaultLocale') %}
<div class="main-content">
<div class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
{% endfor %}
</ul>
<div class="account-page mb-5">
<div class="row mb-5">
{% if isLoggedIn %}
<div class="col-md-3">
{{ macros.printAccountMenu('claims', commissionCount) }}
</div>
{% endif %}
<div class="col-md-9 ps-md-3">
<h1>{{ heading_title }}</h1>
{% if not isLoggedIn %}
<p>{{ 'If you have an account, please login first in order to process yout claim successfully.' | trans }}</p>
{% elseif (orderItemId == 0) %}
<p>{{ 'You can easily select what product you want to claim by selecting the order from your {link_start}Orders list{link_end}, opening the order and clicking on claim on the specific order item.' | trans({'link_start':'<a href="' ~ path('customer_orders') ~ '">','link_end':'</a>'}) | raw }}</p>
{% endif %}
{{ form_start(form, {'attr':{'enctype':'multipart/form-data'}}) }}
{% if isLoggedIn %}
<div class="alert alert-warning" role="alert">
{{ 'Please check that your address is filled out correctly.' | trans }}
</div>
{% endif %}
<div class="row">
<div class="col-sm-12 mt-4 mb-2">
<h2>{{ 'Customer info' | trans }}</h2>
</div>
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.firstName, {'cols': "col-12"}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.lastName, {'cols': "col-12"}) -}}
</div>
<div class="row">
{{- inputMacros.inputGroup(form.businessName, {'cols': "col-12"}) -}}
</div>
{% if app.request.locale == 'en' %}
<div class="row">
{{- inputMacros.inputGroup(form.country, {'cols': "col-12"}) -}}
</div>
{% endif %}
<div class="row required">
{{- inputMacros.inputGroup(form.street, {'cols': "col-12"}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.city, {'cols': "col-12"}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.zip, {'cols': "col-12"}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.phone, {
'cols': "col-12",
'isGroup': true,
'groupLeftContent': defaultLocale != 'en' ? callingCountryCode : false
}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.email, {'cols': "col-12"}) -}}
</div>
<div class="row ">
<div class="col-sm-12 mt-4">
<h2>{{ 'Address (place of item pickup)' | trans }}</h2>
</div>
</div>
{% if defaultLocale != 'en' %}
<div class="radio-buttons">
<div class="radio-wrapper">
<input class="form-check-input" type="radio" name="delivery_type" value="packeta" id="delivery-packeta" checked>
<label for="delivery-packeta">
<div class="radio-circle"></div>
<div class="method-label-text">
<span>{{ 'Claim packeta label'|trans }}{{ deliveryPrice ? ' ('~ 'Free'|trans|lower ~')' : '' }}</span>
</div>
</label>
</div>
<div class="row">
{{- inputMacros.inputGroup(form.incomingPacketaBranchLabel, {
'cols': "col-12",
'isGroup': true,
'hintText': 'Packeta plus info'|trans
}) -}}
{{- form_widget(form.incomingPacketaBranchId) -}}
</div>
<div class="radio-wrapper">
<input class="form-check-input" type="radio" name="delivery_type" value="gls" id="delivery-courier">
<label for="delivery-courier">
<div class="radio-circle"></div>
<div class="method-label-text">
<span>{{ 'Claim courier label'|trans }}{% if deliveryPrice %}, {{ deliveryPrice[domainId] }} {{ currency }}{% endif %}</span>
</div>
</label>
<small id="gls-return-address" class="hint-text mt-1 ms-2">
{{ 'Return address'|trans }}: furbify s.r.o. Osada Reviczkého 38, Kolárovo 946 03, {{ 'Slovakia' | trans }}
</small>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-sm-12 mt-4 mb-2">
<h2>{{ 'Order info' | trans }}</h2>
</div>
</div>
<div class="row required">
<div class="has-validation mb-3">
<div class="form-floating w-100">
<input type="text" id="customer_claim_order_id" name="customer_claim[order_id]" required="required" class="form-control valid" placeholder="..." aria-required="true" aria-invalid="false" value="{{ orderNumber is defined and orderNumber ? orderNumber : '' }}">
<label class="form-label" for="customer_claim_order_id">{{'Order ID' | trans}}: 202XXXXXX</label>
</div>
</div>
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.boughtDate, {'cols': "col-12"}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.invoiceCode, {'cols': "col-12"}) -}}
</div>
<div class="row">
{{- inputMacros.inputGroup(form.productType, {'cols': "col-12"}) -}}
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.productTitle, {'cols': "col-12"}) -}}
</div>
<div class="row">
{{- inputMacros.inputGroup(form.serialNumber, {'cols': "col-12", 'hintText': '('~'not required'|trans ~ ')'}) -}}
</div>
<div class="row">
<div class="col-sm-12 mt-4 mb-2">
<h2>{{ 'Other' | trans }}</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 mb-3">
<label for="claim-medias">{{ 'Photo upload' | trans }} <span>({{ 'not required' | trans }}, {{ 'maximum {count} images' | trans ({'count':3}) }})</span></label>
<input type="file" id="claim-medias" name="claimMedias[]" class="form-control" accept="image/png, image/jpeg, image/jpg" multiple>
</div>
</div>
<div class="row required">
{{- inputMacros.inputGroup(form.customerNote, {'cols': "col-12"}) -}}
</div>
<div class="mt-2 google-recaptcha">
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="{{ app.request.server.get('APP_ENV') == 'dev' ? '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' : '6LcgtrsUAAAAAKfbqtsyv3O06NjYslER3UcqCwJS'}}"></div>
</div>
<div class="buttons clearfix mt-4 mb-3 add-claim-button">
<p class="red-text">{{ 'Please check field "Im not a robot"' | trans }}</p>
<button type="submit" class="btn btn-primary" disabled="disabled">{{ 'Save' | trans }}</button> {% if isLoggedIn %}<a href="{{ path('customer_claims') }}" class="btn btn-link" style="color:#007bff">{{ 'Back' | trans }}</a>{% endif %}
</div>
{{ form_end(form) }}
</div>
</div>
</div>
{{ include(template_from_string(contentBottom)) }}
</div>
</div>
{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<style>
.required label::after {
content: " *";
color: red;
}
#customer_claim_customerNote {
height: unset;
}
.form-check {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
margin-bottom: 8px;
padding-left: 0;
}
.form-check:hover {
cursor: pointer;
}
.form-check-label {
margin-left: 10px;
}
.input-group-text.packeta-icon:hover {
cursor: pointer;
}
</style>
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% set locale = app.request.locale %}
{% set defaultLocale = app.request.session.get('defaultLocale') %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
{% if locale != 'en' %}
<script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.' ~ ( locale == 'cz' ? 'cs' : locale ) ~ '.min.js') }}"></script>
{% endif %}
<script src="https://www.google.com/recaptcha/api.js?hl={{ locale == 'cz' ? 'cs' : locale }}" async defer></script>
{% if defaultLocale != 'en' %}
<script src="https://widget.packeta.com/v6/www/js/library.js"></script>
{% endif %}
<script src="{{ asset('theme/js/jquery.validate.js') }}"></script>
<script>
{% if defaultLocale != 'en' %}
const packetaApiKey = '{{ packetaApiKey }}';
function packetaModalDialog(div) {
Packeta.Widget.pick(packetaApiKey, showSelectedCarrierPickupPoint.bind(div), {
country: '{{ shippingCountry }}',
language: "{{ locale == 'cz' ? 'cs' : locale }}",
livePickupPoint: true
});
}
function showSelectedCarrierPickupPoint(point) {
hidePacketaErrorMessage();
if (point) {
let pointId = point.id;
let pickupPointAddress = point ? point.city + " - " + point.zip + ", " + point.street : "";
$('#customer_claim_incomingPacketaBranchId').val(pointId);
$('#customer_claim_incomingPacketaBranchLabel').val(pickupPointAddress);
document.getElementById('customer_claim_incomingPacketaBranchLabel').classList.remove('error');
}
};
function showPacketaErrorMessage(message)
{
$('#packeta-error-message').html(message).removeClass('hide');
}
function hidePacketaErrorMessage()
{
$('#packeta-error-message').addClass('hide');
}
$('#customer_claim_incomingPacketaBranchLabel').click(function(){
packetaModalDialog(document.getElementById('packeta-modal'));
});
document.getElementById('delivery-courier').addEventListener('click', () => {
document.getElementById('customer_claim_incomingPacketaBranchLabel').value = '';
document.getElementById('customer_claim_incomingPacketaBranchId').value = '';
document.getElementById('customer_claim_incomingPacketaBranchLabel').classList.remove('error');
document.getElementById('customer_claim_incomingPacketaBranchLabel').disabled = true;
});
document.getElementById('delivery-packeta').addEventListener('click', () => {
document.getElementById('customer_claim_incomingPacketaBranchLabel').disabled = false;
});
$('form[name="customer_claim"').on('submit', (e) => {
if ($('#delivery-packeta').prop('checked')) {
if (document.getElementById('customer_claim_incomingPacketaBranchLabel').value == '' || document.getElementById('customer_claim_incomingPacketaBranchId').value == '') {
e.preventDefault();
document.getElementById('customer_claim_incomingPacketaBranchLabel').classList.add('error');
scrollToElementWithId('customer_claim_email');
}
} else if ($('#delivery-courier').prop('checked') == false) {
e.preventDefault();
}
});
document.querySelector('.input-group-text.packeta-icon').addEventListener('click', () => {
if (!document.getElementById('customer_claim_incomingPacketaBranchLabel').disabled) {
$('#customer_claim_incomingPacketaBranchLabel').click();
}
})
// show/hide return address info if GLS was selected
const glsReturnAddress = document.getElementById('gls-return-address')
const showGlsReturnAddress = show => glsReturnAddress.hidden = !show;
const handleDeliveryTypeChange = e => showGlsReturnAddress(e.target.value === 'gls')
document.getElementsByName('delivery_type').forEach(dt => dt.addEventListener('change', handleDeliveryTypeChange));
showGlsReturnAddress(document.getElementById('delivery-courier').checked); // on page load
{% endif %}
let isValidOrderNumber = {{ orderNumber is defined and orderNumber ? 'true' : 'false' }};
let recaptchaIsValid = false;
$('#customer_claim_boughtDate').datepicker({
format: 'yyyy-mm-dd',
language: "{{ locale == 'cz' ? 'cs' : locale }}"
});
function recaptchaCallback() {
recaptchaIsValid = true;
if(isValidOrderNumber){
$('.add-claim-button button').removeAttr('disabled');
}
}
let inputPhone = document.getElementById('customer_claim_phone');
if ( inputPhone != null ) {
inputPhone.addEventListener('keyup', () => {
inputPhone.classList.remove('is-invalid');
let feedback = inputPhone.parentElement.querySelector('.invalid-feedback');
if ( !checkPhoneNumber(inputPhone.value, '{{ defaultLocale }}') ) {
if ( feedback == null ) {
feedback = document.createElement('div');
feedback.classList.add('invalid-feedback');
feedback.innerHTML = '{{ 'Invalid phone number' | trans | raw }}';
inputPhone.parentElement.appendChild(feedback);
}
inputPhone.classList.add('is-invalid');
}
});
}
$.validator.addMethod("phoneFormat", function(value, element) {
return checkPhoneNumber(value, '{{ defaultLocale }}');
}, "{{ 'Invalid phone number' | trans | raw }}");
let checkoutForm = $('form[name="customer_claim"]').validate({
errorPlacement: function(error, element) {
$('.invalid-feedback > label', element.parent().parent()).remove();
$('.invalid-feedback', element.parent().parent()).append(error);
$('.invalid-feedback', element.parent().parent()).css('display', 'block');
},
rules: {
"customer_claim[firstName]": {
required: true,
minlength: 2,
maxlength: 64
},
"customer_claim[lastName]": {
required: true,
minlength: 2,
maxlength: 64
},
"customer_claim[zip]": {
required: true,
minlength: 2,
maxlength: 8
},
"customer_claim[city]": {
required: true,
minlength: 2,
maxlength: 64
},
"customer_claim[street]": {
required: true,
minlength: 2,
maxlength: 128
},
"customer_claim[phone]": {
required: true,
minlength: 2,
maxlength: 18
},
"customer_claim[email]": {
required: true,
minlength: 2,
maxlength: 64
},
"customer_claim[businessName]": {
maxlength: 64
},
"customer_claim[productTitle]": {
required: true,
maxlength: 128
},
"customer_claim[serialNumber]": {
maxlength: 64
},
"customer_claim[invoiceCode]": {
maxlength: 32
}
}
});
const orderNumberCheck = '{{ path("ajax_check_order_number") }}';
$('#customer_claim_order_id').on('change', function (){
$.post(orderNumberCheck, {
orderNumber: this.value
}).done(function (response){
if (response.success === false){
alert(response.message);
}else{
isValidOrderNumber = true;
if(recaptchaIsValid){
$('.add-claim-button button').removeAttr('disabled');
}
}
});
});
</script>
{% endblock %}
{% block title %}{{ heading_title }} | {{ parent() }}{% endblock %}
{% block robots %}
{% if
( domainId in [ const('Domain::DOMAIN_ID_RT_SK'), const('Domain::DOMAIN_ID_WS_SK') ] and app.request.locale != 'sk' ) or
( domainId in [ const('Domain::DOMAIN_ID_RT_HU'), const('Domain::DOMAIN_ID_WS_HU') ] and app.request.locale != 'hu' ) or
( domainId in [ const('Domain::DOMAIN_ID_RT_CZ'), const('Domain::DOMAIN_ID_WS_CZ') ] and app.request.locale != 'cz' ) or
( domainId in [ const('Domain::DOMAIN_ID_RT_EU'), const('Domain::DOMAIN_ID_WS_EU') ] and app.request.locale != 'en' )
%}
<meta name="robots" content="noindex, nofollow, noarchive">
{% else %}
<meta name="robots" content="noindex">
{% endif %}
{% endblock %}
{% block header %}
{{ include(template_from_string(header)) }}
{% endblock %}
{% block footer %}
{{ include(template_from_string(footer)) }}
{% endblock %}

templates/AtechNetCoreBundle/Customer/claimsNew.html.twig line 1