From 2e081ac2c97a1b5e963e4157402df818c31754e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= Date: Wed, 27 Sep 2023 01:29:05 +0200 Subject: [PATCH] change address refacto --- .../theme/core/address/addressController.js | 16 ++++ .../changeAddressCountryHandler.js} | 32 +++++--- _dev/js/theme/core/address/index.js | 10 ++- .../address/request/updateAddressRequest.js | 80 +++++++++++++++++++ .../frontAPI/address/updateAddressAction.js | 32 -------- _dev/js/theme/frontAPI/apiAction.js | 2 - 6 files changed, 121 insertions(+), 51 deletions(-) create mode 100644 _dev/js/theme/core/address/addressController.js rename _dev/js/theme/core/address/{countryAddressChange.js => handler/changeAddressCountryHandler.js} (70%) create mode 100644 _dev/js/theme/core/address/request/updateAddressRequest.js delete mode 100644 _dev/js/theme/frontAPI/address/updateAddressAction.js diff --git a/_dev/js/theme/core/address/addressController.js b/_dev/js/theme/core/address/addressController.js new file mode 100644 index 00000000..6940e528 --- /dev/null +++ b/_dev/js/theme/core/address/addressController.js @@ -0,0 +1,16 @@ +import useEvent from '../../components/event/useEvent'; +import changeAddressCountryHandler from './handler/changeAddressCountryHandler'; + +const { on } = useEvent(); + +const addressController = () => { + const init = () => { + on(document, 'change', '.js-country', changeAddressCountryHandler); + }; + + return { + init, + }; +}; + +export default addressController; diff --git a/_dev/js/theme/core/address/countryAddressChange.js b/_dev/js/theme/core/address/handler/changeAddressCountryHandler.js similarity index 70% rename from _dev/js/theme/core/address/countryAddressChange.js rename to _dev/js/theme/core/address/handler/changeAddressCountryHandler.js index 040468d3..aab53bda 100644 --- a/_dev/js/theme/core/address/countryAddressChange.js +++ b/_dev/js/theme/core/address/handler/changeAddressCountryHandler.js @@ -1,12 +1,15 @@ import prestashop from 'prestashop'; -import parseToHtml from '@js/theme/utils/parseToHtml'; -import useAlertToast from '@js/theme/components/useAlertToast'; -import useEvent from '@js/theme/components/event/useEvent'; +import useAlertToast from '../../../components/useAlertToast'; +import parseToHtml from '../../../utils/parseToHtml'; +import updateAddressRequest from '../request/updateAddressRequest'; const { danger } = useAlertToast(); -const { on } = useEvent(); -const handleAddressChange = async () => { +/** + * Change address country handler + * @returns {Promise} + */ +const changeAddressCountryHandler = async () => { const DOMSelectors = { addressFormWrapperSelector: '.js-address-form', countrySelectSelector: '.js-country', @@ -29,11 +32,18 @@ const handleAddressChange = async () => { formInputs, } = getDOMAddressElements(); const url = addressForm.dataset?.refreshUrl; - const idCountry = countrySelect.value; - const idAddress = addressForm.dataset?.idAddress; + const idCountry = Number.parseInt(countrySelect.value, 10); + const idAddress = Number.parseInt(addressForm.dataset?.idAddress, 10); + + const payload = { + id_address: idAddress, + id_country: idCountry, + }; + + const { getRequest } = updateAddressRequest(url, payload); try { - const data = await prestashop.frontAPI.updateAddress(url, idAddress, idCountry); + const data = await getRequest(); const inputsValue = []; @@ -70,8 +80,4 @@ const handleAddressChange = async () => { } }; -const countryAddressChange = () => { - on(document, 'change', '.js-country', handleAddressChange); -}; - -export default countryAddressChange; +export default changeAddressCountryHandler; diff --git a/_dev/js/theme/core/address/index.js b/_dev/js/theme/core/address/index.js index 78057205..0f8aaa4d 100644 --- a/_dev/js/theme/core/address/index.js +++ b/_dev/js/theme/core/address/index.js @@ -1,6 +1,8 @@ -import $ from 'jquery'; -import countryAddressChange from '@js/theme/core/address/countryAddressChange'; +import addressController from './addressController'; +import DOMReady from '../../utils/DOMReady'; -$(() => { - countryAddressChange(); +const { init } = addressController(); + +DOMReady(() => { + init(); }); diff --git a/_dev/js/theme/core/address/request/updateAddressRequest.js b/_dev/js/theme/core/address/request/updateAddressRequest.js new file mode 100644 index 00000000..83b3644d --- /dev/null +++ b/_dev/js/theme/core/address/request/updateAddressRequest.js @@ -0,0 +1,80 @@ +import useHttpRequest from '../../../components/http/useHttpRequest'; +import useHttpController from '../../../components/http/useHttpController'; +import useHttpPayloadDefinition from '../../../components/http/useHttpPayloadDefinition'; + +const { dispatch, abortAll } = useHttpController(); + +/** + * @typedef ServerResponse + * @type {object} + * @property {string} address_form - new address form html content + */ + +/** + * Update listing facets request + * @param url {string} - new url with from-xhr param + * @param payload {object} - payload for request + * @param payload.id_country {int} - country id + * @param payload.id_address {int} - address id + * @example + * const url = 'address-form.com/url'; // url to update address form + * const payload = { + * id_address: 1, + * id_country: 1, + * } + * const { getRequest } = updateAddressRequest(url, payload); + * + * try { + * const resp = await getRequest(); + * } catch (error) { + * console.error(error); + * } + * @returns {{getRequest: (function(): Promise)}} + */ +const updateAddressRequest = (url, payload) => { + const { request, controller } = useHttpRequest(url); + + const payloadDefinition = { + id_country: { + type: 'int', + required: true, + }, + id_address: { + type: 'int', + required: true, + }, + }; + + const { validatePayload } = useHttpPayloadDefinition(payload, payloadDefinition); + + const validationErrors = validatePayload(); + + if (validationErrors.length) { + throw Error(validationErrors.join(',\n')); + } + + const getRequest = () => new Promise((resolve, reject) => { + abortAll(); + + dispatch(request, controller)(() => request + .query(payload) + .post() + .json((resp) => { + resolve(resp); + }) + .catch((e) => { + // IF ABORTED + if (e instanceof DOMException) { + return; + } + + reject(e); + })); + }); + + return { + getRequest, + }; +}; + +export default updateAddressRequest; diff --git a/_dev/js/theme/frontAPI/address/updateAddressAction.js b/_dev/js/theme/frontAPI/address/updateAddressAction.js deleted file mode 100644 index 66d04291..00000000 --- a/_dev/js/theme/frontAPI/address/updateAddressAction.js +++ /dev/null @@ -1,32 +0,0 @@ -import useHttpRequest from '@js/theme/components/http/useHttpRequest'; -import useHttpController from '@js/theme/components/http/useHttpController'; - -const { dispatch, abortAll } = useHttpController(); - -const updateAddressAction = (url, idAddress, idCountry) => new Promise((resolve, reject) => { - abortAll(); - - const { request, controller } = useHttpRequest(url, {}); - - const payload = { - id_address: idAddress, - id_country: idCountry, - }; - - dispatch(request, controller)(() => request - .query(payload) - .post() - .json((resp) => { - resolve(resp); - }) - .catch((e) => { - // IF ABORTED - if (e instanceof DOMException) { - return; - } - - reject(); - })); -}); - -export default updateAddressAction; diff --git a/_dev/js/theme/frontAPI/apiAction.js b/_dev/js/theme/frontAPI/apiAction.js index 7650b102..21f10987 100644 --- a/_dev/js/theme/frontAPI/apiAction.js +++ b/_dev/js/theme/frontAPI/apiAction.js @@ -1,5 +1,4 @@ import updateProductAction from '@js/theme/frontAPI/product/updateProductAction'; -import updateAddressAction from '@js/theme/frontAPI/address/updateAddressAction'; prestashop.frontAPI = {}; @@ -12,4 +11,3 @@ prestashop.addAction = (actionName, actionFunction) => { }; prestashop.addAction('updateProduct', updateProductAction); -prestashop.addAction('updateAddress', updateAddressAction);