WIP: length validation

boldcommerce · Jul 4, 2017 · 2541364 · 2541364
1 parent 570f412
commit 2541364
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 8 deletions.
diff --git a/Model/OrderCommentConfigProvider.php b/Model/OrderCommentConfigProvider.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Bold\OrderComment\Model;
+
+use Magento\Checkout\Model\ConfigProviderInterface;
+
+class OrderCommentConfigProvider implements ConfigProviderInterface
+{
+    public function getConfig()
+    {
+        return [
+            'max_length' => 360,
+        ];
+    }
+
+}
diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
+    <system>
+        <section id="sales">
+            <group id="ordercomments" translate="label" type="text" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="0">
+                <label>Order Comment</label>
+                <field id="max_length" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0" canRestore="1">
+                    <label>Maximum length in characters</label>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>
diff --git a/etc/frontend/di.xml b/etc/frontend/di.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="Magento\Checkout\Model\CompositeConfigProvider">
+        <arguments>
+            <argument name="configProviders" xsi:type="array">
+                <item name="ordercomments_config_provider" xsi:type="object">Bold\OrderComment\Model\OrderCommentConfigProvider</item>
+            </argument>
+        </arguments>
+    </type>
+</config>
diff --git a/view/frontend/web/css/source/_module.less b/view/frontend/web/css/source/_module.less
@@ -0,0 +1,5 @@
+._error {
+  .order-comment-form__characters {
+    color: @checkout-field-validation__border-color;
+  }
+}
diff --git a/view/frontend/web/js/model/checkout/order-comment-validator.js b/view/frontend/web/js/model/checkout/order-comment-validator.js
@@ -5,9 +5,11 @@ define(
         'Magento_Checkout/js/model/quote',
         'Magento_Checkout/js/model/url-builder',
         'mage/url',
-        'Magento_Checkout/js/model/error-processor'
+        'Magento_Checkout/js/model/error-processor',
+        'Magento_Ui/js/model/messageList',
+        'mage/translate'
     ],
-    function ($, customer, quote, urlBuilder, urlFormatter, errorProcessor) {
+    function ($, customer, quote, urlBuilder, urlFormatter, errorProcessor, messageContainer, __) {
         'use strict';
 
         return {
@@ -21,9 +23,15 @@ define(
                 var isCustomer = customer.isLoggedIn();
                 var form = $('.payment-method input[name="payment[method]"]:checked').parents('.payment-method').find('form.order-comment-form');
 
+                var comment = form.find('.input-text.order-comment').val();
+                if (comment.length > this.getMaxLength()) {
+                    messageContainer.addErrorMessage({ message: __("Comment is too long") });
+                    return false;
+                }
+
                 var quoteId = quote.getQuoteId();
-                var url;
 
+                var url;
                 if (isCustomer) {
                     url = urlBuilder.createUrl('/carts/mine/set-order-comment', {})
                 } else {
@@ -33,7 +41,7 @@ define(
                 var payload = {
                     cartId: quoteId,
                     orderComment: {
-                        comment: form.find('.input-text.order-comment').val()
+                        comment: comment
                     }
                 };
 
@@ -62,6 +70,9 @@ define(
                 );
 
                 return result;
+            },
+            getMaxLength: function () {
+                return window.checkoutConfig.max_length;
             }
         };
     }

diff --git a/view/frontend/web/js/view/checkout/order-comment-block.js b/view/frontend/web/js/view/checkout/order-comment-block.js
@@ -1,14 +1,26 @@
 define(
     [
         'jquery',
-        'uiComponent'
+        'uiComponent',
+        'knockout'
     ],
-    function ($, Component) {
+    function ($, Component, ko) {
         'use strict';
 
         return Component.extend({
             defaults: {
                 template: 'Bold_OrderComment/checkout/order-comment-block'
+            },
+            initialize: function() {
+                this._super();
+                var self = this;
+                this.comment = ko.observable("");
+                this.remainingCharacters = ko.computed(function(){
+                    return self.getMaxLength() - self.comment().length;
+                });
+            },
+            getMaxLength: function () {
+                return window.checkoutConfig.max_length;
             }
         });
     }

diff --git a/view/frontend/web/template/checkout/order-comment-block.html b/view/frontend/web/template/checkout/order-comment-block.html
@@ -8,12 +8,13 @@
     <div class="payment-option-content" data-role="content">
         <form class="form form-discount order-comment-form">
             <div class="payment-option-inner">
-                <div class="field">
+                <div class="field" data-bind="css: { _error : remainingCharacters() < 0}">
                     <label class="label">
                         <span data-bind="i18n: 'Enter comment'"></span>
                     </label>
                     <div class="control">
-                        <textarea class="input-text order-comment" name="comment-code" rows="4" data-bind="attr:{placeholder: $t('Enter your comment...')} " ></textarea>
+                        <textarea class="input-text order-comment" name="comment-code" rows="4" data-bind="value:comment,valueUpdate: 'afterkeydown',attr:{placeholder: $t('Enter your comment...')} " ></textarea>
+                        <p>Remaining characters: <span class="order-comment-form__characters" data-bind="text: remainingCharacters"></span></p>
                     </div>
                 </div>
             </div>