From b8c26f18f8b1ed141c17cf1574693b86cbeeadc3 Mon Sep 17 00:00:00 2001
From: Alexandre Segura <mex.zktk@gmail.com>
Date: Tue, 1 Sep 2020 16:54:15 +0200
Subject: [PATCH] Use form validation for address picker. See #1574.

---
 js/app/cart/components/Cart.js |  3 ++-
 js/app/forms/delivery.js       | 18 +++---------------
 js/app/restaurant/index.js     | 11 +++++++++++
 js/app/utils/address.js        | 25 +++++++++++++++++++++++++
 4 files changed, 41 insertions(+), 16 deletions(-)
 create mode 100644 js/app/utils/address.js

diff --git a/js/app/cart/components/Cart.js b/js/app/cart/components/Cart.js
index 168302bd93..7d964da1f3 100644
--- a/js/app/cart/components/Cart.js
+++ b/js/app/cart/components/Cart.js
@@ -45,7 +45,8 @@ class Cart extends Component {
                   geohash={ '' }
                   key={ this.props.streetAddress }
                   onAddressSelected={ (value, address) => this.props.changeAddress(address) }
-                  disabled={ this.props.isCollectionOnly || this.props.takeaway } />
+                  disabled={ this.props.isCollectionOnly || this.props.takeaway }
+                  required />
                 { this.props.isCollectionEnabled && (
                 <div className="text-center">
                   <Takeaway
diff --git a/js/app/forms/delivery.js b/js/app/forms/delivery.js
index 974fa2691a..3bc95e0293 100644
--- a/js/app/forms/delivery.js
+++ b/js/app/forms/delivery.js
@@ -6,7 +6,7 @@ import _ from 'lodash'
 import AddressBook from '../delivery/AddressBook'
 import DateTimePicker from '../widgets/DateTimePicker'
 import TagsInput from '../widgets/TagsInput'
-import i18n from '../i18n'
+import { validateForm } from '../utils/address'
 
 class DeliveryForm {
   disable() {
@@ -340,21 +340,9 @@ export default function(name, options) {
         const lngInput = document.querySelector(`#${name}_${type}_address [data-address-prop="longitude"]`)
         const streetAddrInput = document.querySelector(`#${name}_${type}_address_newAddress_streetAddress`)
 
-        if (searchInput.validity.valid) {
-          if (_.isEmpty(latInput.value) || _.isEmpty(lngInput.value)
-          || (searchInput.value !== streetAddrInput.value)) {
-            e.preventDefault();
-            searchInput.setCustomValidity(i18n.t('PLEASE_SELECT_ADDRESS'))
-            if (HTMLInputElement.prototype.reportValidity) {
-              searchInput.reportValidity()
-            }
-
-            return true
-          }
-        }
-
-        return false
+        const isValid = validateForm(e, searchInput, latInput, lngInput, streetAddrInput)
 
+        return !isValid
       })
 
     }, false)
diff --git a/js/app/restaurant/index.js b/js/app/restaurant/index.js
index 11229dec2d..c4e9c16e83 100644
--- a/js/app/restaurant/index.js
+++ b/js/app/restaurant/index.js
@@ -14,6 +14,7 @@ import i18n, { getCountry } from '../i18n'
 import { createStoreFromPreloadedState } from '../cart/redux/store'
 import { addItem, addItemWithOptions, queueAddItem } from '../cart/redux/actions'
 import Cart from '../cart/components/Cart'
+import { validateForm } from '../utils/address'
 
 require('gasparesganga-jquery-loading-overlay')
 
@@ -300,6 +301,16 @@ window.initMap = function() {
     }
   }
 
+  $(container).closest('form').on('submit', function (e) {
+
+    const searchInput = document.querySelector('#cart input[type="search"]')
+    const latInput = document.querySelector('#cart_shippingAddress_latitude')
+    const lngInput = document.querySelector('#cart_shippingAddress_longitude')
+    const streetAddrInput = document.querySelector('#cart_shippingAddress_streetAddress')
+
+    validateForm(e, searchInput, latInput, lngInput, streetAddrInput)
+  })
+
   const state = {
     cart,
     restaurant,
diff --git a/js/app/utils/address.js b/js/app/utils/address.js
new file mode 100644
index 0000000000..2559cd7947
--- /dev/null
+++ b/js/app/utils/address.js
@@ -0,0 +1,25 @@
+import _ from 'lodash'
+import i18n from '../i18n'
+
+export const validateForm = (e, searchInput, latInput, lngInput, streetAddrInput) => {
+
+  if (!searchInput.validity.valid) {
+    return
+  }
+
+  const isValidLatLng = !_.isEmpty(latInput.value) && !_.isEmpty(lngInput.value)
+  const isStreetAddressTouched = searchInput.value !== streetAddrInput.value
+
+  if (isStreetAddressTouched || !isValidLatLng) {
+    e.preventDefault();
+
+    searchInput.setCustomValidity(i18n.t('PLEASE_SELECT_ADDRESS'))
+    if (HTMLInputElement.prototype.reportValidity) {
+      searchInput.reportValidity()
+    }
+
+    return false
+  }
+
+  return true
+}