diff --git a/front/js/components/order.es6 b/front/js/components/order.es6 index 92a0da7c..6e732098 100644 --- a/front/js/components/order.es6 +++ b/front/js/components/order.es6 @@ -1,7 +1,8 @@ (() => { const DOM = { $fancybox: $('.fancybox'), - $formErrorText: $('.js-form-error-text'), + $contactsError: $('.js-contacts-error'), + $privacyPolicyError: $('.js-privacy-policy-error'), $order: $('.js-order-contain'), yandexFormWrapper: '#yandex-form-wrapper', yandexForm: '#yandex-form', @@ -13,6 +14,7 @@ paymentOptions: 'input[name=payment_type]', defaultPaymentOptions: 'input[for=id_payment_type_0]', orderFieldData: $('#order-form-full').data('fields'), + privacyCheckbox: '.js-privacy-checkbox', }; const config = { @@ -161,14 +163,19 @@ return orderInfo; }; - /** - * Return true if form has valid phone & email. - */ - function isValid(customerInfo) { + function isContactsValid(customerInfo) { return helpers.isPhoneValid(customerInfo.phone) && helpers.isEmailValid(customerInfo.email); } + function isPrivacyPolicyAccepted() { + return $(DOM.privacyCheckbox).is(':checked'); + } + + function showFormError($error) { + $error.removeClass('hidden').addClass('shake animated'); + } + function renderYandexForm(formData) { const formHtml = `
@@ -198,8 +205,13 @@ event.preventDefault(); const orderInfo = getOrderInfo(); - if (!isValid(orderInfo)) { - DOM.$formErrorText.removeClass('hidden').addClass('shake animated'); + if (!isContactsValid(orderInfo)) { + showFormError(DOM.$contactsError); + return; + } + + if (!isPrivacyPolicyAccepted()) { + showFormError(DOM.$privacyPolicyError); return; } diff --git a/front/less/common/variables.less b/front/less/common/variables.less index 6466913e..c0fbc3aa 100644 --- a/front/less/common/variables.less +++ b/front/less/common/variables.less @@ -104,6 +104,7 @@ @c-price-border-color: #dddddd; @c-search-area: #616161; +@c-privacy-check: #A0A0A0; @c-stock-in: #54bf5f; @c-stock-out: #ffd180; @c-stuff-link-border: #BEC3C8; diff --git a/front/less/pages/order.less b/front/less/pages/order.less index 42cd9251..975f7dab 100644 --- a/front/less/pages/order.less +++ b/front/less/pages/order.less @@ -123,6 +123,40 @@ div.info { width: 145px; } +.privacy-policy-form { + position: relative; + line-height: 1.8; + margin: 0 0 15px; + color: @c-privacy-check; + font-size: @f-size-base - 4; + + input { + border: none; + background: @c-privacy-check; + color: @c-privacy-check; + cursor: pointer; + + &:checked { + border: transparent; + box-shadow: 0 1px 1px transparent inset; + opacity: 1; + } + } + + label { + a { + color: @c-privacy-check; + } + + cursor: pointer; + width: 83%; + + .Q(@sm; { + width: auto; + }); + } +} + .payment-types-form { position: relative; } diff --git a/templates/ecommerce/order/table_form.html b/templates/ecommerce/order/table_form.html index 3cf1cc09..31d0f84f 100644 --- a/templates/ecommerce/order/table_form.html +++ b/templates/ecommerce/order/table_form.html @@ -82,11 +82,25 @@

Оформление заказа

{% include 'ecommerce/order/payment_types.html' %}
+ {% comment %} @todo #816:30m Test privacy policy agreement.{% endcomment %} + + {% comment %} @todo #816:30m Make the checkbox to the same color as its text.{% endcomment %} +
+ +
ФОРМА ЗАКАЗА
- + +