Ggtcf

im having some issues getting the current or changed postcode from checkout input postcode and also trying to fired again the method from my component "getKiosPoints".

Basically the work flow is to check if a postcode is filled in the input, and if it is use it to make a call to a API to get the locations.

This works fine when the page is loaded with the information of postcode filled.

The problem is to get the postcode when is changed in the page, and than fire the method 'getKiospoints' with the postcoded that was inserted.

I was using the "quote.shippingAddress._latestValue.postcode" or the "quote.shippingAddress().postcode", but the problem is since is going to get in the storage, i always get the previous postcoded and not the actual that was just inserted.

Here is my code:

define([
 'jquery',
 'ko',
 'Magento_Checkout/js/model/quote',
 'uiComponent'
], function ($,ko,quote,Component) 
 'use strict';

 var listLocations = ko.observableArray([]);



 $(document).on('change',"[name='postcode']",function()
 console.log("what postcalcode");
 console.log(quote.shippingAddress().postcode);
 );



 return Component.extend(
 defaults: 
 template: 'Cloud_Vasp/checkout/shipping/pickup-points'
 ,
 getCode: function()
 return 'cloud_vasp_cloud_vasp';
 ,
 initObservable: function () 
 this._super();

 this.selectedMethod = ko.computed(function() 
 var method = quote.shippingMethod();
 var selectedMethod = method != null ? method.carrier_code + '_' + method.method_code : null;
 return selectedMethod;
 , this);

 return this;
 ,
 getKiosPoints: function () 

 var postalCode = quote.shippingAddress._latestValue.postcode;

 console.log(postalCode);
 $.ajax
 (
 type: "POST",
 beforeSend: function (xhr) 
 xhr.setRequestHeader('Authorization', 'Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDc');
 ,
 url: '...api/va.pt/GetServiceDeliveryPoints',
 dataType: 'json',
 contentType: 'application/json',

 async: true,
 //json object to sent to the authentication url
 data: JSON.stringify(
 "PostalCodeOrLocality": postalCode

 ),
 success: function (data) 
 if(data.statusCode == 200)

 var locations = data.response;
 listLocations(data.response);


 //return locations;
 
 ,
 error: function( jqXhr, textStatus, errorThrown )
 return errorThrown;
 
 )

 return listLocations;


 
 );
);

Am i missing something?

I have another suggestion. You can use onepage.html and apply the following code :-

require(
 [
 'jquery',
 'Magento_Checkout/js/model/quote',
 'Magento_Checkout/js/model/shipping-service',
 'Magento_Checkout/js/model/shipping-rate-registry',
 'Magento_Checkout/js/model/shipping-rate-processor/new-address',
 'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
 'Magento_Customer/js/model/customer'
 ],
 function ($, quote, shippingService, rateRegistry, defaultProcessor, customerAddressProcessor, customer) 

 $(document).on('change',"#shipping-new-address-form [name='postcode']",function(e)

 var elementValue = $(this).val();
 //Apply your code here

 );

);