Merge pull request #195 from vtex-apps/hotfix/googleform

Hotfix/googleform

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+
+### Fixed
+
+- Major change in the google address form function
+
 ## [0.10.1] - 2023-04-27
 
 ### Fixed

checkout-ui-custom/src/_js/_customAddressForm.js

@@ -42,6 +42,8 @@ class fnsCustomAddressForm {
     this.validate = true
 
     this.gPlacesAutocomplete = ''
+
+    this.firstAttempt = false
   }
 
   loadScript() {
@@ -384,54 +386,41 @@ class fnsCustomAddressForm {
 
     $('body').addClass('js-v-custom-is-loading')
 
-    fetch(
-      `/api/checkout/pub/orderForm/${_this.orderForm.orderFormId}/attachments/shippingData`,
-      {
-        credentials: 'include',
-        headers: {
-          accept: 'application/json, text/javascript, */*; q=0.01',
-          'cache-control': 'no-cache',
-          'content-type': 'application/json; charset=UTF-8',
-          pragma: 'no-cache',
-          'sec-fetch-mode': 'cors',
-          'sec-fetch-site': 'same-origin',
-          'x-requested-with': 'XMLHttpRequest',
+    const shippingInfo = {
+      selectedAddresses: [
+        {
+          addressType: 'residential',
+          receiverName: '',
+          isDisposable: true,
+          postalCode: _postalCode,
+          city: _city,
+          state: _state,
+          country: _country,
+          street: _street,
+          number: _number || '',
+          neighborhood: _neighborhood,
+          complement: _complement,
+          reference: null,
+          geoCoordinates: geoCoordinates || [],
+          addressQuery: _addressQuery,
         },
-        referrerPolicy: 'no-referrer-when-downgrade',
-        body: JSON.stringify({
-          selectedAddresses: [
-            {
-              addressType: 'residential',
-              receiverName: '',
-              addressId: '',
-              isDisposable: true,
-              postalCode: _postalCode,
-              city: _city,
-              state: _state,
-              country: _country,
-              geoCoordinates,
-              street: _street,
-              number: _number || '',
-              neighborhood: _neighborhood,
-              complement: _complement,
-              reference: null,
-              addressQuery: _addressQuery,
-            },
-          ],
-          clearAddressIfPostalCodeNotFound: false,
-        }),
-        method: 'POST',
-        mode: 'cors',
-      }
-    )
-      .then(response => response.json())
-      .then(function (data) {
-        if (data.error) {
-          $('body').removeClass('js-v-custom-is-loading')
-          // eslint-disable-next-line no-alert
-          alert(`Something went wrong: ${data.error.message}`)
-        } else {
-          window.vtexjs.checkout.getOrderForm().done(function () {
+      ],
+      clearAddressIfPostalCodeNotFound: false,
+    }
+
+    window.vtexjs.checkout.sendAttachment('shippingData', {}).done(function () {
+      $('button.vtex-front-messages-close-all.close').trigger('click')
+      $('.vtex-omnishipping-1-x-warning').hide()
+      _this.firstAttempt = true
+
+      window.vtexjs.checkout
+        .sendAttachment('shippingData', shippingInfo)
+        .done(function (orderForm) {
+          if (orderForm.error) {
+            $('body').removeClass('js-v-custom-is-loading')
+            // eslint-disable-next-line no-alert
+            alert(`Something went wrong: ${orderForm.error.message}`)
+          } else {
             _this.updateAddress(
               _country,
               _postalCode,
@@ -449,9 +438,15 @@ class fnsCustomAddressForm {
             _this.orderForm = window.vtexjs.checkout.orderForm
             $('body').removeClass('js-v-custom-is-loading')
             _this.triggerAddressValidation()
-          })
-        }
-      })
+          }
+        })
+        .fail(function (error) {
+          $('body').removeClass(_this.BodyFormClasses.join(' '))
+          _this.orderForm = window.vtexjs.checkout.orderForm
+          $('body').removeClass('js-v-custom-is-loading')
+          alert(`Something went wrong: ${error}`)
+        })
+    })
   }
 
   getRegions(country) {
@@ -534,7 +529,7 @@ class fnsCustomAddressForm {
                 : 'Street address or P.O. Box'
             }</label><input required autocomplete="none" id="v-custom-ship-street" type="text" name="v-custom-street" class="input-xlarge" data-hj-whitelist="true" value="${
       shippingData.address &&
-      shippingData.address.street !== null &&
+      null !== shippingData.address.street &&
       !isPickupPoint
         ? shippingData.address.street
         : ''
@@ -655,23 +650,13 @@ class fnsCustomAddressForm {
       $('.orderform-template-holder #shipping-data').append(form)
     }
 
-    if (orderForm.canEditData) {
-      $('body').removeClass('v-custom-addressForm-on')
-    }
-
     if (
       $('#shipping-option-pickup-in-point').hasClass(
         'vtex-omnishipping-1-x-deliveryOptionActive'
       )
     ) {
       $('body').removeClass('v-custom-addressForm-on')
-    } else if (
-      !$('body').hasClass('v-custom-addressForm-on') &&
-      shippingData.selectedAddresses.length == 0
-    ) {
-      $('body').addClass('v-custom-addressForm-on')
     }
-
     this.googleForm()
     this.updateGoogleForm(country[1].toLowerCase())
 
@@ -936,6 +921,7 @@ class fnsCustomAddressForm {
       if (
         (orderForm.shippingData.address === null ||
           orderForm.shippingData.address.addressType === 'search') &&
+        !_this.firstAttempt &&
         $('.vtex-omnishipping-1-x-deliveryOptionActive').attr('id') ===
           'shipping-option-delivery'
       ) {
@@ -959,11 +945,24 @@ class fnsCustomAddressForm {
       })
   }
 
+  loadingAddress(orderForm) {
+    if (
+      ~window.location.hash.indexOf('#/shipping') &&
+      orderForm.shippingData.availableAddresses.length &&
+      orderForm.shippingData.address == null
+    ) {
+      $('body').addClass('js-v-custom-is-loadAddress')
+    } else {
+      $('body').removeClass('js-v-custom-is-loadAddress')
+    }
+  }
+
   events() {
     const _this = this
 
     $(window).on('orderFormUpdated.vtex', function (evt, orderForm) {
       _this.checkFirstLogin(orderForm)
+      _this.loadingAddress(orderForm)
     })
   }
 

checkout-ui-custom/src/_scss/_components/_customAddressForm.scss

@@ -1,6 +1,36 @@
 
 
 
+#shipping-data .accordion-group.shipping-data:after {
+  opacity: 0;
+  transition: all ease 0.3s;
+}
+.js-v-custom-is-loadAddress {
+  .vtex-omnishipping-1-x-warning {
+    display: none !important;
+  }
+
+  #shipping-data .accordion-group.shipping-data:after {
+    content: "";
+    display: block;
+    opacity: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 20px;
+    z-index: 2;
+    margin:0 0 20px 0;
+    border-radius: 3px;
+    @extend %loading-shimmer;
+  }
+
+  #postalCode-finished-loading + .mb5 {
+    display: none !important;
+  }
+
+}
+
+
 .vcustom--vtex-omnishipping-1-x-address {
   display: none;
 }

checkout-ui-custom/src/_scss/_components/_payment.scss

@@ -392,7 +392,7 @@
 		  width: 100% !important;
 		  padding: 0;
 			min-height: initial;
-			
+
 			iframe {
 				margin:0;
 			}
@@ -635,10 +635,10 @@
 				> * {
 					width:100%;
 					order: 1;
-					
+
 					//&:not(#postalCode-finished-loading),
 					//&:not(.vtex-omnishipping-1-x-geolocation) {margin:0 0 20px 0;}
-					
+
 					&.vtex-omnishipping-1-x-addressFormPart1 {order: 1;}
 					&.vtex-omnishipping-1-x-addressForm { order: 2; }
 					&.vtex-omnishipping-1-x-deliveryGroup { order: 4; }
@@ -846,7 +846,7 @@
   		position: relative;
   		top:0;
 		}
-		
+
 		.cart-items {
 			> .v-custom-indexed-item {display:none !important;}
 		}
@@ -1198,7 +1198,7 @@
 #app-container {
 	min-height: 100vh;
 	background: #FFF;
-	
+
 
 	input[type=text],
 	input[type=tel],
@@ -1330,7 +1330,6 @@
 		.PostalCode {order:5;}
 	}
 
-	
+
 
 }
-