#816 Add privacy policy agreement to order page. (#840)

* Add privacy policy agreement to order page. * Create todo to test privacy policy agreement and make the checkbox the same color as its text
fidals · May 2, 2019 · 27ffe12 · 27ffe12 · 0pdd · May 2, 2019
1 parent 609223f
commit 27ffe12
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 8 deletions.
diff --git 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 = `
       <form action="${formData.yandex_kassa_link}" method="POST" id="yandex-form">
@@ -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
@@ -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
@@ -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
@@ -82,11 +82,25 @@ <h1>Оформление заказа</h1>
         <div class="payment-types-form">
           {% include 'ecommerce/order/payment_types.html' %}
         </div>
+        {% comment %} @todo #816:30m Test privacy policy agreement.{% endcomment %}
+
+        {% comment %} @todo #816:30m Make the checkbox to the same color as its text.{% endcomment %}
+        <div class="privacy-policy-form">
+          <label>
+            <input class="js-privacy-checkbox" type="checkbox" required checked>
+            Я согласен на <a href="/media/privacy-policy.pdf">обработку персональных данных</a>
+          </label>
+        </div>
       </div>
 
       <div class="order-user-info">
         <div class="order-info-header text-center">ФОРМА ЗАКАЗА</div>
-        <p class="error-msg hidden js-form-error-text">Введите ваш телефон и почтовый адрес</p>
+        <p class="error-msg hidden js-contacts-error">
+          Введите ваш телефон, почтовый адрес.
+        </p>
+        <p class="error-msg hidden js-privacy-policy-error">
+          Примите соглашение на обработку персональных данных.
+        </p>
 
         <div class="order-form-right form-horizontal">
           <div class="form-group">