From f3bd6c280e435193ae30a488aeb2dfd06b866908 Mon Sep 17 00:00:00 2001 From: Jerry Smidt Date: Wed, 18 Dec 2024 14:09:32 +0100 Subject: [PATCH] Bug #59571: cleaner solution to fix shipping address reset * Increase WooCommerce tested-up-to version. --- build/billing-address-autocomplete-intl-frontend.asset.php | 2 +- build/billing-address-autocomplete-intl-frontend.js | 2 +- build/shipping-address-autocomplete-intl-frontend.asset.php | 2 +- build/shipping-address-autocomplete-intl-frontend.js | 2 +- postcode-eu-address-validation.php | 2 +- src/blocks/shipping-address-autocomplete-intl/block.js | 6 +++--- .../address-autocomplete-intl/autocomplete-input.js | 6 ++---- 7 files changed, 10 insertions(+), 12 deletions(-) diff --git a/build/billing-address-autocomplete-intl-frontend.asset.php b/build/billing-address-autocomplete-intl-frontend.asset.php index cba75d2..123e8ed 100644 --- a/build/billing-address-autocomplete-intl-frontend.asset.php +++ b/build/billing-address-autocomplete-intl-frontend.asset.php @@ -1 +1 @@ - array('react', 'wc-blocks-checkout', 'wc-blocks-components', 'wc-blocks-data-store', 'wc-settings', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'd731c98abf11fa805c82'); + array('react', 'wc-blocks-checkout', 'wc-blocks-components', 'wc-blocks-data-store', 'wc-settings', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'f074623598d51b5e4c55'); diff --git a/build/billing-address-autocomplete-intl-frontend.js b/build/billing-address-autocomplete-intl-frontend.js index cb0a570..f567db9 100644 --- a/build/billing-address-autocomplete-intl-frontend.js +++ b/build/billing-address-autocomplete-intl-frontend.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.wc.blocksCheckout,t=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"postcode-eu-address-validation/billing-address-autocomplete-intl","version":"1.0.0","title":"International Address Autocomplete","category":"woocommerce","description":"Autocomplete international addresses using the Postcode.eu API.","example":{},"parent":["woocommerce/checkout-billing-address-block"],"attributes":{"lock":{"type":"object","default":{"remove":true,"move":true}}},"textdomain":"postcode-eu-address-validation"}'),s=window.React,r=window.wp.data,o=window.wc.wcBlocksData,n=window.wp.element,a=window.wc.wcSettings,d=window.wp.i18n,c=window.wc.blocksComponents;var l,i;const u=(0,a.getSetting)("postcode-eu-address-validation_data"),p=(e,t,s)=>{let r=t,o=s;return u.reverseStreetLineCountries.includes(e)&&([r,o]=[o,r]),`${r} ${o}`.trim()};null!==(i=(l=PostcodeNl).addressDetailsCache)&&void 0!==i||(l.addressDetailsCache=new Map);const m=({id:e,addressType:t,address:a,setAddress:l,setAddressDetails:i})=>{const m=(0,n.useRef)(null),E=(0,n.useRef)(a),f=(0,n.useRef)(""),g=(0,n.useRef)(null),[h,_]=(0,n.useState)(!0),[v,w]=(0,n.useState)(null),[A,y]=(0,n.useState)(!1),[C,b]=(0,n.useState)(""),{setValidationErrors:S,clearValidationError:D}=(0,r.useDispatch)(o.VALIDATION_STORE_KEY),{validationError:I,validationErrorId:T}=(0,r.useSelect)((t=>{const s=t(o.VALIDATION_STORE_KEY);return{validationError:s.getValidationError(e),validationErrorId:s.getValidationErrorId(e)}}));(0,n.useEffect)((()=>{E.current=a}),[a]);const k=(0,n.useCallback)((()=>{l({...E.current,address_1:"",city:"",postcode:""}),i(null)}),[l,i]),R=(0,n.useRef)(k),O=(0,n.useCallback)(((s=!0)=>{["address_1","city","postcode"].every((e=>void 0===(0,r.select)(o.VALIDATION_STORE_KEY).getValidationError(`${t}_${e}`)))?D(e):S({[e]:{message:(0,d.__)("Please enter an address and select it.","postcode-eu-address-validation"),hidden:s}})}),[e,D,S]),L=(0,n.useCallback)(((e,t)=>{PostcodeNl.addressDetailsCache.has(e)?t(PostcodeNl.addressDetailsCache.get(e)):g.current.getDetails(e,(s=>{t(s),PostcodeNl.addressDetailsCache.set(e,s)}))}),[]),N=(0,n.useCallback)((e=>{w(!0),L(e.context,(e=>{const{locality:t,street:s,postcode:r,building:o}=e.address;l({...E.current,address_1:p(e.country.iso2Code,s,o),city:t,postcode:r}),i(e),O(!1),w(!1)}))}),[w,l,i,O]),V=(0,n.useCallback)((()=>{m.current.addEventListener("autocomplete-response",(e=>{const t=e.detail.matches;1===t.length&&"Address"===t[0].precision?N(t[0]):O(!0)}),{once:!0}),g.current.search(m.current,{term:f.current,showMenu:!1})}),[N,O]);(0,n.useEffect)((()=>{h&&(_(!1),f.current=["postcode","city","address_1","address_2"].map((e=>E.current[e])).join(" ").trim(),b(f.current),m.current.addEventListener("autocomplete-select",(e=>{b(e.detail.value),e.preventDefault(),"Address"===e.detail.precision&&N(e.detail)})),m.current.addEventListener("autocomplete-search",k),m.current.addEventListener("autocomplete-error",(()=>{w(!1),S({[e]:{message:(0,d.__)("An error has occurred while retrieving address data. Please contact us if the problem persists.","postcode-eu-address-validation"),hidden:!1}})})),m.current.addEventListener("autocomplete-open",(()=>y(!0))),m.current.addEventListener("autocomplete-close",(()=>y(!1))))}),[h,_,b,i,k,w,S,y]),(0,n.useEffect)((()=>{var t,s;if(s=a.country,void 0===u.enabledCountries[s])return void D(e);const n=u.enabledCountries[a.country];null===g.current?(g.current=function(e,t){const s=new PostcodeNl.AutocompleteAddress(e,{autocompleteUrl:u.autocomplete,addressDetailsUrl:u.getDetails,context:t});return s.getSuggestions=function(e,t,s){const r=(new TextEncoder).encode(t),o=Array.from(r,(e=>String.fromCodePoint(e))).join(""),n=this.options.autocompleteUrl.replace("${context}",encodeURIComponent(e)).replace("${term}",encodeURIComponent(btoa(o)));return this.xhrGet(`${n}`,s)},s.getDetails=function(e,t){const s=this.options.addressDetailsUrl.replace("${context}",encodeURIComponent(e));return this.xhrGet(s,t)},s}(m.current,n.iso3),f.current.length>0&&V()):(g.current.reset(),g.current.setCountry(n.iso3),R.current(),b(""));const d=(0,r.select)(o.VALIDATION_STORE_KEY).getValidationError(e);O(null===(t=d?.hidden)||void 0===t||t)}),[a.country,e,D,b]),(0,n.useEffect)((()=>()=>D(e)),[D,e]),(0,n.useEffect)((()=>{null!==v&&m.current.classList.toggle(`${g.current.options.cssPrefix}loading`,v)}),[v]);const $=I?.message&&!I?.hidden;return(0,s.createElement)(c.TextInput,{id:e,required:!0,className:{"has-error":$},ref:m,label:(0,d.__)("Start typing your address or zip/postal code","postcode-eu-address-validation"),value:C,onChange:e=>{O(!0),b(e)},onBlur:()=>!A&&O(!1),"aria-invalid":!0===$,ariaDescribedBy:$&&T?T:null,feedback:(0,s.createElement)(c.ValidationInputError,{propertyName:e,elementId:e}),title:""})},E=({forId:e,onClick:t})=>{const n=(0,r.useSelect)((t=>t(o.VALIDATION_STORE_KEY).getValidationError(e))),{clearValidationError:a}=(0,r.useDispatch)(o.VALIDATION_STORE_KEY);return n&&!n.hidden?(0,s.createElement)("a",{className:"postcode-eu-autofill-intl-bypass-link",onClick:()=>{a(e),t()}},(0,d.__)("Enter an address")):null},f=({addressDetails:e})=>e?.mailLines?(0,s.createElement)("address",{className:"postcode-eu-autofill-address"},e.mailLines.join("\n")):null,g=(0,a.getSetting)("postcode-eu-address-validation_data"),h=({addressType:e,address:t,setAddress:r})=>{const o=(0,n.useRef)(null),[a,d]=(0,n.useState)(null),[c,l]=(0,n.useState)(!1),i=`${e}-intl_autocomplete`;return(0,n.useEffect)((()=>{const t=()=>{const t=document.getElementById(`${e}-address_1`)?.parentElement;return t?.before(o.current),t};if(!t()){const e=new MutationObserver((s=>{s.forEach((()=>{t()&&e.disconnect()}))}));return e.observe(o.current.closest(".wc-block-components-checkout-step__content"),{childList:!0}),()=>e.disconnect()}}),[]),(0,n.useEffect)((()=>{l(Boolean(g.enabledCountries[t.country]))}),[l,t.country]),(0,n.useEffect)((()=>{if("showAll"!==g.displayMode)for(const t of["address_1","postcode","city"]){const s=document.getElementById(`${e}-${t}`)?.parentElement;s&&(s.style.display=c?"none":"")}}),[e,c]),(0,s.createElement)("div",{className:"postcode-eu-autofill-container",ref:o,style:c?{}:{display:"none"}},(0,s.createElement)(m,{id:i,addressType:e,address:t,setAddress:r,setAddressDetails:d}),"showAll"!==g.displayMode&&(0,s.createElement)(E,{forId:i,onClick:()=>{l(!1)}}),(0,s.createElement)(f,{addressDetails:a}))};(0,e.registerCheckoutBlock)({metadata:t,component:()=>{const e=(0,r.useSelect)((e=>e(o.CHECKOUT_STORE_KEY).getUseShippingAsBilling()),[]),{billingAddress:t}=(0,r.useSelect)((e=>e(o.CART_STORE_KEY).getCustomerData()),[]),{setBillingAddress:n}=(0,r.useDispatch)(o.CART_STORE_KEY);return e?null:(0,s.createElement)(h,{addressType:"billing",address:t,setAddress:n})}})})(); \ No newline at end of file +(()=>{"use strict";const e=window.wc.blocksCheckout,t=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"postcode-eu-address-validation/billing-address-autocomplete-intl","version":"1.0.0","title":"International Address Autocomplete","category":"woocommerce","description":"Autocomplete international addresses using the Postcode.eu API.","example":{},"parent":["woocommerce/checkout-billing-address-block"],"attributes":{"lock":{"type":"object","default":{"remove":true,"move":true}}},"textdomain":"postcode-eu-address-validation"}'),s=window.React,r=window.wp.data,o=window.wc.wcBlocksData,n=window.wp.element,a=window.wc.wcSettings,d=window.wp.i18n,c=window.wc.blocksComponents;var l,i;const u=(0,a.getSetting)("postcode-eu-address-validation_data"),p=(e,t,s)=>{let r=t,o=s;return u.reverseStreetLineCountries.includes(e)&&([r,o]=[o,r]),`${r} ${o}`.trim()};null!==(i=(l=PostcodeNl).addressDetailsCache)&&void 0!==i||(l.addressDetailsCache=new Map);const m=({id:e,addressType:t,address:a,setAddress:l,setAddressDetails:i})=>{const m=(0,n.useRef)(null),E=(0,n.useRef)(a),f=(0,n.useRef)(""),g=(0,n.useRef)(null),[h,_]=(0,n.useState)(!0),[v,w]=(0,n.useState)(null),[A,y]=(0,n.useState)(!1),[C,b]=(0,n.useState)(""),{setValidationErrors:S,clearValidationError:D}=(0,r.useDispatch)(o.VALIDATION_STORE_KEY),{validationError:I,validationErrorId:T}=(0,r.useSelect)((t=>{const s=t(o.VALIDATION_STORE_KEY);return{validationError:s.getValidationError(e),validationErrorId:s.getValidationErrorId(e)}}));(0,n.useEffect)((()=>{E.current=a}),[a]);const k=(0,n.useCallback)((()=>{l({...E.current,address_1:"",city:"",postcode:""}),i(null)}),[l,i]),R=(0,n.useCallback)(((s=!0)=>{["address_1","city","postcode"].every((e=>void 0===(0,r.select)(o.VALIDATION_STORE_KEY).getValidationError(`${t}_${e}`)))?D(e):S({[e]:{message:(0,d.__)("Please enter an address and select it.","postcode-eu-address-validation"),hidden:s}})}),[e,D,S]),O=(0,n.useCallback)(((e,t)=>{PostcodeNl.addressDetailsCache.has(e)?t(PostcodeNl.addressDetailsCache.get(e)):g.current.getDetails(e,(s=>{t(s),PostcodeNl.addressDetailsCache.set(e,s)}))}),[]),L=(0,n.useCallback)((e=>{w(!0),O(e.context,(e=>{const{locality:t,street:s,postcode:r,building:o}=e.address;l({...E.current,address_1:p(e.country.iso2Code,s,o),city:t,postcode:r}),i(e),R(!1),w(!1)}))}),[w,l,i,R]),N=(0,n.useCallback)((()=>{m.current.addEventListener("autocomplete-response",(e=>{const t=e.detail.matches;1===t.length&&"Address"===t[0].precision?L(t[0]):R(!0)}),{once:!0}),g.current.search(m.current,{term:f.current,showMenu:!1})}),[L,R]);(0,n.useEffect)((()=>{h&&(_(!1),f.current=["postcode","city","address_1","address_2"].map((e=>E.current[e])).join(" ").trim(),b(f.current),m.current.addEventListener("autocomplete-select",(e=>{b(e.detail.value),e.preventDefault(),"Address"===e.detail.precision&&L(e.detail)})),m.current.addEventListener("autocomplete-search",k),m.current.addEventListener("autocomplete-error",(()=>{w(!1),S({[e]:{message:(0,d.__)("An error has occurred while retrieving address data. Please contact us if the problem persists.","postcode-eu-address-validation"),hidden:!1}})})),m.current.addEventListener("autocomplete-open",(()=>y(!0))),m.current.addEventListener("autocomplete-close",(()=>y(!1))))}),[h,_,b,i,k,w,S,y]),(0,n.useEffect)((()=>{var t,s;if(s=a.country,void 0===u.enabledCountries[s])return void D(e);const n=u.enabledCountries[a.country];null===g.current?(g.current=function(e,t){const s=new PostcodeNl.AutocompleteAddress(e,{autocompleteUrl:u.autocomplete,addressDetailsUrl:u.getDetails,context:t});return s.getSuggestions=function(e,t,s){const r=(new TextEncoder).encode(t),o=Array.from(r,(e=>String.fromCodePoint(e))).join(""),n=this.options.autocompleteUrl.replace("${context}",encodeURIComponent(e)).replace("${term}",encodeURIComponent(btoa(o)));return this.xhrGet(`${n}`,s)},s.getDetails=function(e,t){const s=this.options.addressDetailsUrl.replace("${context}",encodeURIComponent(e));return this.xhrGet(s,t)},s}(m.current,n.iso3),f.current.length>0&&N()):(g.current.reset(),g.current.setCountry(n.iso3),k(),b(""));const d=(0,r.select)(o.VALIDATION_STORE_KEY).getValidationError(e);R(null===(t=d?.hidden)||void 0===t||t)}),[a.country,e,D,b,k]),(0,n.useEffect)((()=>()=>D(e)),[D,e]),(0,n.useEffect)((()=>{null!==v&&m.current.classList.toggle(`${g.current.options.cssPrefix}loading`,v)}),[v]);const V=I?.message&&!I?.hidden;return(0,s.createElement)(c.TextInput,{id:e,required:!0,className:{"has-error":V},ref:m,label:(0,d.__)("Start typing your address or zip/postal code","postcode-eu-address-validation"),value:C,onChange:e=>{R(!0),b(e)},onBlur:()=>!A&&R(!1),"aria-invalid":!0===V,ariaDescribedBy:V&&T?T:null,feedback:(0,s.createElement)(c.ValidationInputError,{propertyName:e,elementId:e}),title:""})},E=({forId:e,onClick:t})=>{const n=(0,r.useSelect)((t=>t(o.VALIDATION_STORE_KEY).getValidationError(e))),{clearValidationError:a}=(0,r.useDispatch)(o.VALIDATION_STORE_KEY);return n&&!n.hidden?(0,s.createElement)("a",{className:"postcode-eu-autofill-intl-bypass-link",onClick:()=>{a(e),t()}},(0,d.__)("Enter an address")):null},f=({addressDetails:e})=>e?.mailLines?(0,s.createElement)("address",{className:"postcode-eu-autofill-address"},e.mailLines.join("\n")):null,g=(0,a.getSetting)("postcode-eu-address-validation_data"),h=({addressType:e,address:t,setAddress:r})=>{const o=(0,n.useRef)(null),[a,d]=(0,n.useState)(null),[c,l]=(0,n.useState)(!1),i=`${e}-intl_autocomplete`;return(0,n.useEffect)((()=>{const t=()=>{const t=document.getElementById(`${e}-address_1`)?.parentElement;return t?.before(o.current),t};if(!t()){const e=new MutationObserver((s=>{s.forEach((()=>{t()&&e.disconnect()}))}));return e.observe(o.current.closest(".wc-block-components-checkout-step__content"),{childList:!0}),()=>e.disconnect()}}),[]),(0,n.useEffect)((()=>{l(Boolean(g.enabledCountries[t.country]))}),[l,t.country]),(0,n.useEffect)((()=>{if("showAll"!==g.displayMode)for(const t of["address_1","postcode","city"]){const s=document.getElementById(`${e}-${t}`)?.parentElement;s&&(s.style.display=c?"none":"")}}),[e,c]),(0,s.createElement)("div",{className:"postcode-eu-autofill-container",ref:o,style:c?{}:{display:"none"}},(0,s.createElement)(m,{id:i,addressType:e,address:t,setAddress:r,setAddressDetails:d}),"showAll"!==g.displayMode&&(0,s.createElement)(E,{forId:i,onClick:()=>{l(!1)}}),(0,s.createElement)(f,{addressDetails:a}))};(0,e.registerCheckoutBlock)({metadata:t,component:()=>{const e=(0,r.useSelect)((e=>e(o.CHECKOUT_STORE_KEY).getUseShippingAsBilling()),[]),{billingAddress:t}=(0,r.useSelect)((e=>e(o.CART_STORE_KEY).getCustomerData()),[]),{setBillingAddress:n}=(0,r.useDispatch)(o.CART_STORE_KEY);return e?null:(0,s.createElement)(h,{addressType:"billing",address:t,setAddress:n})}})})(); \ No newline at end of file diff --git a/build/shipping-address-autocomplete-intl-frontend.asset.php b/build/shipping-address-autocomplete-intl-frontend.asset.php index 4a068c7..b0c0649 100644 --- a/build/shipping-address-autocomplete-intl-frontend.asset.php +++ b/build/shipping-address-autocomplete-intl-frontend.asset.php @@ -1 +1 @@ - array('react', 'wc-blocks-checkout', 'wc-blocks-components', 'wc-blocks-data-store', 'wc-settings', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b952b42411caeb5cd7b2'); + array('react', 'wc-blocks-checkout', 'wc-blocks-components', 'wc-blocks-data-store', 'wc-settings', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'c96756a4f17ef2ed5aab'); diff --git a/build/shipping-address-autocomplete-intl-frontend.js b/build/shipping-address-autocomplete-intl-frontend.js index e8400cf..37ef44d 100644 --- a/build/shipping-address-autocomplete-intl-frontend.js +++ b/build/shipping-address-autocomplete-intl-frontend.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.wc.blocksCheckout,t=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"postcode-eu-address-validation/shipping-address-autocomplete-intl","version":"1.0.0","title":"International Address Autocomplete","category":"woocommerce","description":"Autocomplete international addresses using the Postcode.eu API.","example":{},"parent":["woocommerce/checkout-shipping-address-block"],"attributes":{"lock":{"type":"object","default":{"remove":true,"move":true}}},"textdomain":"postcode-eu-address-validation"}'),s=window.React,r=window.wp.data,o=window.wp.element,n=window.wc.wcBlocksData,a=window.wc.wcSettings,d=window.wp.i18n,c=window.wc.blocksComponents;var i,l;const u=(0,a.getSetting)("postcode-eu-address-validation_data"),p=(e,t,s)=>{let r=t,o=s;return u.reverseStreetLineCountries.includes(e)&&([r,o]=[o,r]),`${r} ${o}`.trim()};null!==(l=(i=PostcodeNl).addressDetailsCache)&&void 0!==l||(i.addressDetailsCache=new Map);const m=({id:e,addressType:t,address:a,setAddress:i,setAddressDetails:l})=>{const m=(0,o.useRef)(null),E=(0,o.useRef)(a),h=(0,o.useRef)(""),f=(0,o.useRef)(null),[g,_]=(0,o.useState)(!0),[v,w]=(0,o.useState)(null),[A,y]=(0,o.useState)(!1),[C,S]=(0,o.useState)(""),{setValidationErrors:D,clearValidationError:I}=(0,r.useDispatch)(n.VALIDATION_STORE_KEY),{validationError:b,validationErrorId:k}=(0,r.useSelect)((t=>{const s=t(n.VALIDATION_STORE_KEY);return{validationError:s.getValidationError(e),validationErrorId:s.getValidationErrorId(e)}}));(0,o.useEffect)((()=>{E.current=a}),[a]);const T=(0,o.useCallback)((()=>{i({...E.current,address_1:"",city:"",postcode:""}),l(null)}),[i,l]),R=(0,o.useRef)(T),O=(0,o.useCallback)(((s=!0)=>{["address_1","city","postcode"].every((e=>void 0===(0,r.select)(n.VALIDATION_STORE_KEY).getValidationError(`${t}_${e}`)))?I(e):D({[e]:{message:(0,d.__)("Please enter an address and select it.","postcode-eu-address-validation"),hidden:s}})}),[e,I,D]),L=(0,o.useCallback)(((e,t)=>{PostcodeNl.addressDetailsCache.has(e)?t(PostcodeNl.addressDetailsCache.get(e)):f.current.getDetails(e,(s=>{t(s),PostcodeNl.addressDetailsCache.set(e,s)}))}),[]),N=(0,o.useCallback)((e=>{w(!0),L(e.context,(e=>{const{locality:t,street:s,postcode:r,building:o}=e.address;i({...E.current,address_1:p(e.country.iso2Code,s,o),city:t,postcode:r}),l(e),O(!1),w(!1)}))}),[w,i,l,O]),V=(0,o.useCallback)((()=>{m.current.addEventListener("autocomplete-response",(e=>{const t=e.detail.matches;1===t.length&&"Address"===t[0].precision?N(t[0]):O(!0)}),{once:!0}),f.current.search(m.current,{term:h.current,showMenu:!1})}),[N,O]);(0,o.useEffect)((()=>{g&&(_(!1),h.current=["postcode","city","address_1","address_2"].map((e=>E.current[e])).join(" ").trim(),S(h.current),m.current.addEventListener("autocomplete-select",(e=>{S(e.detail.value),e.preventDefault(),"Address"===e.detail.precision&&N(e.detail)})),m.current.addEventListener("autocomplete-search",T),m.current.addEventListener("autocomplete-error",(()=>{w(!1),D({[e]:{message:(0,d.__)("An error has occurred while retrieving address data. Please contact us if the problem persists.","postcode-eu-address-validation"),hidden:!1}})})),m.current.addEventListener("autocomplete-open",(()=>y(!0))),m.current.addEventListener("autocomplete-close",(()=>y(!1))))}),[g,_,S,l,T,w,D,y]),(0,o.useEffect)((()=>{var t,s;if(s=a.country,void 0===u.enabledCountries[s])return void I(e);const o=u.enabledCountries[a.country];null===f.current?(f.current=function(e,t){const s=new PostcodeNl.AutocompleteAddress(e,{autocompleteUrl:u.autocomplete,addressDetailsUrl:u.getDetails,context:t});return s.getSuggestions=function(e,t,s){const r=(new TextEncoder).encode(t),o=Array.from(r,(e=>String.fromCodePoint(e))).join(""),n=this.options.autocompleteUrl.replace("${context}",encodeURIComponent(e)).replace("${term}",encodeURIComponent(btoa(o)));return this.xhrGet(`${n}`,s)},s.getDetails=function(e,t){const s=this.options.addressDetailsUrl.replace("${context}",encodeURIComponent(e));return this.xhrGet(s,t)},s}(m.current,o.iso3),h.current.length>0&&V()):(f.current.reset(),f.current.setCountry(o.iso3),R.current(),S(""));const d=(0,r.select)(n.VALIDATION_STORE_KEY).getValidationError(e);O(null===(t=d?.hidden)||void 0===t||t)}),[a.country,e,I,S]),(0,o.useEffect)((()=>()=>I(e)),[I,e]),(0,o.useEffect)((()=>{null!==v&&m.current.classList.toggle(`${f.current.options.cssPrefix}loading`,v)}),[v]);const $=b?.message&&!b?.hidden;return(0,s.createElement)(c.TextInput,{id:e,required:!0,className:{"has-error":$},ref:m,label:(0,d.__)("Start typing your address or zip/postal code","postcode-eu-address-validation"),value:C,onChange:e=>{O(!0),S(e)},onBlur:()=>!A&&O(!1),"aria-invalid":!0===$,ariaDescribedBy:$&&k?k:null,feedback:(0,s.createElement)(c.ValidationInputError,{propertyName:e,elementId:e}),title:""})},E=({forId:e,onClick:t})=>{const o=(0,r.useSelect)((t=>t(n.VALIDATION_STORE_KEY).getValidationError(e))),{clearValidationError:a}=(0,r.useDispatch)(n.VALIDATION_STORE_KEY);return o&&!o.hidden?(0,s.createElement)("a",{className:"postcode-eu-autofill-intl-bypass-link",onClick:()=>{a(e),t()}},(0,d.__)("Enter an address")):null},h=({addressDetails:e})=>e?.mailLines?(0,s.createElement)("address",{className:"postcode-eu-autofill-address"},e.mailLines.join("\n")):null,f=(0,a.getSetting)("postcode-eu-address-validation_data"),g=({addressType:e,address:t,setAddress:r})=>{const n=(0,o.useRef)(null),[a,d]=(0,o.useState)(null),[c,i]=(0,o.useState)(!1),l=`${e}-intl_autocomplete`;return(0,o.useEffect)((()=>{const t=()=>{const t=document.getElementById(`${e}-address_1`)?.parentElement;return t?.before(n.current),t};if(!t()){const e=new MutationObserver((s=>{s.forEach((()=>{t()&&e.disconnect()}))}));return e.observe(n.current.closest(".wc-block-components-checkout-step__content"),{childList:!0}),()=>e.disconnect()}}),[]),(0,o.useEffect)((()=>{i(Boolean(f.enabledCountries[t.country]))}),[i,t.country]),(0,o.useEffect)((()=>{if("showAll"!==f.displayMode)for(const t of["address_1","postcode","city"]){const s=document.getElementById(`${e}-${t}`)?.parentElement;s&&(s.style.display=c?"none":"")}}),[e,c]),(0,s.createElement)("div",{className:"postcode-eu-autofill-container",ref:n,style:c?{}:{display:"none"}},(0,s.createElement)(m,{id:l,addressType:e,address:t,setAddress:r,setAddressDetails:d}),"showAll"!==f.displayMode&&(0,s.createElement)(E,{forId:l,onClick:()=>{i(!1)}}),(0,s.createElement)(h,{addressDetails:a}))};(0,e.registerCheckoutBlock)({metadata:t,component:()=>{const e=(0,r.useSelect)((e=>e(n.CHECKOUT_STORE_KEY).getUseShippingAsBilling()),[]),{shippingAddress:t}=(0,r.useSelect)((e=>e(n.CART_STORE_KEY).getCustomerData()),[]),{setShippingAddress:a,setBillingAddress:d}=(0,r.useDispatch)(n.CART_STORE_KEY),c=(0,o.useCallback)((t=>{a(t),e&&d({...t})}),[e,a,d]);return(0,s.createElement)(g,{addressType:"shipping",address:t,setAddress:c})}})})(); \ No newline at end of file +(()=>{"use strict";const e=window.wc.blocksCheckout,t=JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"postcode-eu-address-validation/shipping-address-autocomplete-intl","version":"1.0.0","title":"International Address Autocomplete","category":"woocommerce","description":"Autocomplete international addresses using the Postcode.eu API.","example":{},"parent":["woocommerce/checkout-shipping-address-block"],"attributes":{"lock":{"type":"object","default":{"remove":true,"move":true}}},"textdomain":"postcode-eu-address-validation"}'),s=window.React,r=window.wp.data,o=window.wp.element,n=window.wc.wcBlocksData,a=window.wc.wcSettings,d=window.wp.i18n,c=window.wc.blocksComponents;var i,l;const u=(0,a.getSetting)("postcode-eu-address-validation_data"),p=(e,t,s)=>{let r=t,o=s;return u.reverseStreetLineCountries.includes(e)&&([r,o]=[o,r]),`${r} ${o}`.trim()};null!==(l=(i=PostcodeNl).addressDetailsCache)&&void 0!==l||(i.addressDetailsCache=new Map);const m=({id:e,addressType:t,address:a,setAddress:i,setAddressDetails:l})=>{const m=(0,o.useRef)(null),E=(0,o.useRef)(a),h=(0,o.useRef)(""),g=(0,o.useRef)(null),[f,_]=(0,o.useState)(!0),[v,w]=(0,o.useState)(null),[A,y]=(0,o.useState)(!1),[C,S]=(0,o.useState)(""),{setValidationErrors:D,clearValidationError:I}=(0,r.useDispatch)(n.VALIDATION_STORE_KEY),{validationError:b,validationErrorId:k}=(0,r.useSelect)((t=>{const s=t(n.VALIDATION_STORE_KEY);return{validationError:s.getValidationError(e),validationErrorId:s.getValidationErrorId(e)}}));(0,o.useEffect)((()=>{E.current=a}),[a]);const T=(0,o.useCallback)((()=>{i({...E.current,address_1:"",city:"",postcode:""}),l(null)}),[i,l]),R=(0,o.useCallback)(((s=!0)=>{["address_1","city","postcode"].every((e=>void 0===(0,r.select)(n.VALIDATION_STORE_KEY).getValidationError(`${t}_${e}`)))?I(e):D({[e]:{message:(0,d.__)("Please enter an address and select it.","postcode-eu-address-validation"),hidden:s}})}),[e,I,D]),O=(0,o.useCallback)(((e,t)=>{PostcodeNl.addressDetailsCache.has(e)?t(PostcodeNl.addressDetailsCache.get(e)):g.current.getDetails(e,(s=>{t(s),PostcodeNl.addressDetailsCache.set(e,s)}))}),[]),L=(0,o.useCallback)((e=>{w(!0),O(e.context,(e=>{const{locality:t,street:s,postcode:r,building:o}=e.address;i({...E.current,address_1:p(e.country.iso2Code,s,o),city:t,postcode:r}),l(e),R(!1),w(!1)}))}),[w,i,l,R]),N=(0,o.useCallback)((()=>{m.current.addEventListener("autocomplete-response",(e=>{const t=e.detail.matches;1===t.length&&"Address"===t[0].precision?L(t[0]):R(!0)}),{once:!0}),g.current.search(m.current,{term:h.current,showMenu:!1})}),[L,R]);(0,o.useEffect)((()=>{f&&(_(!1),h.current=["postcode","city","address_1","address_2"].map((e=>E.current[e])).join(" ").trim(),S(h.current),m.current.addEventListener("autocomplete-select",(e=>{S(e.detail.value),e.preventDefault(),"Address"===e.detail.precision&&L(e.detail)})),m.current.addEventListener("autocomplete-search",T),m.current.addEventListener("autocomplete-error",(()=>{w(!1),D({[e]:{message:(0,d.__)("An error has occurred while retrieving address data. Please contact us if the problem persists.","postcode-eu-address-validation"),hidden:!1}})})),m.current.addEventListener("autocomplete-open",(()=>y(!0))),m.current.addEventListener("autocomplete-close",(()=>y(!1))))}),[f,_,S,l,T,w,D,y]),(0,o.useEffect)((()=>{var t,s;if(s=a.country,void 0===u.enabledCountries[s])return void I(e);const o=u.enabledCountries[a.country];null===g.current?(g.current=function(e,t){const s=new PostcodeNl.AutocompleteAddress(e,{autocompleteUrl:u.autocomplete,addressDetailsUrl:u.getDetails,context:t});return s.getSuggestions=function(e,t,s){const r=(new TextEncoder).encode(t),o=Array.from(r,(e=>String.fromCodePoint(e))).join(""),n=this.options.autocompleteUrl.replace("${context}",encodeURIComponent(e)).replace("${term}",encodeURIComponent(btoa(o)));return this.xhrGet(`${n}`,s)},s.getDetails=function(e,t){const s=this.options.addressDetailsUrl.replace("${context}",encodeURIComponent(e));return this.xhrGet(s,t)},s}(m.current,o.iso3),h.current.length>0&&N()):(g.current.reset(),g.current.setCountry(o.iso3),T(),S(""));const d=(0,r.select)(n.VALIDATION_STORE_KEY).getValidationError(e);R(null===(t=d?.hidden)||void 0===t||t)}),[a.country,e,I,S,T]),(0,o.useEffect)((()=>()=>I(e)),[I,e]),(0,o.useEffect)((()=>{null!==v&&m.current.classList.toggle(`${g.current.options.cssPrefix}loading`,v)}),[v]);const V=b?.message&&!b?.hidden;return(0,s.createElement)(c.TextInput,{id:e,required:!0,className:{"has-error":V},ref:m,label:(0,d.__)("Start typing your address or zip/postal code","postcode-eu-address-validation"),value:C,onChange:e=>{R(!0),S(e)},onBlur:()=>!A&&R(!1),"aria-invalid":!0===V,ariaDescribedBy:V&&k?k:null,feedback:(0,s.createElement)(c.ValidationInputError,{propertyName:e,elementId:e}),title:""})},E=({forId:e,onClick:t})=>{const o=(0,r.useSelect)((t=>t(n.VALIDATION_STORE_KEY).getValidationError(e))),{clearValidationError:a}=(0,r.useDispatch)(n.VALIDATION_STORE_KEY);return o&&!o.hidden?(0,s.createElement)("a",{className:"postcode-eu-autofill-intl-bypass-link",onClick:()=>{a(e),t()}},(0,d.__)("Enter an address")):null},h=({addressDetails:e})=>e?.mailLines?(0,s.createElement)("address",{className:"postcode-eu-autofill-address"},e.mailLines.join("\n")):null,g=(0,a.getSetting)("postcode-eu-address-validation_data"),f=({addressType:e,address:t,setAddress:r})=>{const n=(0,o.useRef)(null),[a,d]=(0,o.useState)(null),[c,i]=(0,o.useState)(!1),l=`${e}-intl_autocomplete`;return(0,o.useEffect)((()=>{const t=()=>{const t=document.getElementById(`${e}-address_1`)?.parentElement;return t?.before(n.current),t};if(!t()){const e=new MutationObserver((s=>{s.forEach((()=>{t()&&e.disconnect()}))}));return e.observe(n.current.closest(".wc-block-components-checkout-step__content"),{childList:!0}),()=>e.disconnect()}}),[]),(0,o.useEffect)((()=>{i(Boolean(g.enabledCountries[t.country]))}),[i,t.country]),(0,o.useEffect)((()=>{if("showAll"!==g.displayMode)for(const t of["address_1","postcode","city"]){const s=document.getElementById(`${e}-${t}`)?.parentElement;s&&(s.style.display=c?"none":"")}}),[e,c]),(0,s.createElement)("div",{className:"postcode-eu-autofill-container",ref:n,style:c?{}:{display:"none"}},(0,s.createElement)(m,{id:l,addressType:e,address:t,setAddress:r,setAddressDetails:d}),"showAll"!==g.displayMode&&(0,s.createElement)(E,{forId:l,onClick:()=>{i(!1)}}),(0,s.createElement)(h,{addressDetails:a}))};(0,e.registerCheckoutBlock)({metadata:t,component:()=>{const e=(0,r.useSelect)((e=>e(n.CHECKOUT_STORE_KEY).getUseShippingAsBilling),[]),{shippingAddress:t}=(0,r.useSelect)((e=>e(n.CART_STORE_KEY).getCustomerData()),[]),{setShippingAddress:a,setBillingAddress:d}=(0,r.useDispatch)(n.CART_STORE_KEY),c=(0,o.useCallback)((t=>{a(t),e()&&d({...t})}),[e,a,d]);return(0,s.createElement)(f,{addressType:"shipping",address:t,setAddress:c})}})})(); \ No newline at end of file diff --git a/postcode-eu-address-validation.php b/postcode-eu-address-validation.php index e53e6be..d7b4211 100644 --- a/postcode-eu-address-validation.php +++ b/postcode-eu-address-validation.php @@ -13,7 +13,7 @@ * Tested up to: 6.7 * Requires PHP: 7.4 * WC requires at least: 4.0 - * WC tested up to: 9.4 + * WC tested up to: 9.5 */ use Automattic\WooCommerce\Utilities\FeaturesUtil; diff --git a/src/blocks/shipping-address-autocomplete-intl/block.js b/src/blocks/shipping-address-autocomplete-intl/block.js index 4b07a2f..157b159 100644 --- a/src/blocks/shipping-address-autocomplete-intl/block.js +++ b/src/blocks/shipping-address-autocomplete-intl/block.js @@ -5,7 +5,7 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data'; import AutocompleteContainer from '../../components/address-autocomplete-intl/container'; const Block = () => { - const useShippingAsBilling = useSelect(select => select(CHECKOUT_STORE_KEY).getUseShippingAsBilling(), []), + const isUseShippingAsBilling = useSelect(select => select(CHECKOUT_STORE_KEY).getUseShippingAsBilling, []), {shippingAddress} = useSelect(select => select(CART_STORE_KEY).getCustomerData(), []), {setShippingAddress, setBillingAddress} = useDispatch(CART_STORE_KEY); @@ -13,13 +13,13 @@ const Block = () => { (values) => { setShippingAddress(values); - if (useShippingAsBilling) + if (isUseShippingAsBilling()) { // Billing address needs to be synced with shipping address after calling `setShippingAddress`. setBillingAddress({...values}); } }, - [useShippingAsBilling, setShippingAddress, setBillingAddress] + [isUseShippingAsBilling, setShippingAddress, setBillingAddress] ); return ( diff --git a/src/components/address-autocomplete-intl/autocomplete-input.js b/src/components/address-autocomplete-intl/autocomplete-input.js index d303039..e0835e4 100644 --- a/src/components/address-autocomplete-intl/autocomplete-input.js +++ b/src/components/address-autocomplete-intl/autocomplete-input.js @@ -75,8 +75,6 @@ const AutocompleteInput = ({id, addressType, address, setAddress, setAddressDeta setAddressDetails(null); }, [setAddress, setAddressDetails]); - const resetAddressRef = useRef(resetAddress); - const validateInput = useCallback( (errorsHidden = true) => { const isValid = ['address_1', 'city', 'postcode'].every((field) => { @@ -231,14 +229,14 @@ const AutocompleteInput = ({id, addressType, address, setAddress, setAddressDeta // Clear address values when switching to supported country. autocompleteInstance.current.reset(); autocompleteInstance.current.setCountry(country.iso3); - resetAddressRef.current(); // Use ref to avoid dependency. + resetAddress(); setValue(''); } const error = selectStore(VALIDATION_STORE_KEY).getValidationError(id); validateInput(error?.hidden ?? true); - }, [address.country, id, clearValidationError, setValue]); + }, [address.country, id, clearValidationError, setValue, resetAddress]); // Remove validation errors when unmounted. useEffect(() => () => clearValidationError(id), [clearValidationError, id]);