...
Instead of showing only Name of options in dropdown it will now be shown as Name (Code). This will require another update in find query in common/models/customer-portal-parts/address-node-api-helper.js → getAddressNodeData (mentioned above in backend changes).
...
Customer Portal changes
Changes in src/components/address/create-address.tsx
General Function to be called whenever any option from rendered dropdown is selected, it make call to api api/CustomerPortal/fetchGeneralAddressCode
...
| Code Block |
|---|
const renderStateBox = () => {
if (isAddressMappingAllowed) {
return (
<AutoComplete
value={newAddress.state}
className={classes.stateInput}
dropdownClassName={classes.pincodeInputDropdown}
options={
localityStatesList.map((state: any) => {
return {
label: state.name,
value: state.code,
};
})
}
onSearch={loadStatesList}
onSelect={(e) => saveAddressUsingAddressHierarchy(e, 'state')}
onChange={(value) => updateAddressFieldWithValidations('state', value)}
style={{ textAlign: 'left' }}
disabled={disableState}
allowClear
>
<Input
className={classes.autoCompleteInputBox}
allowClear
placeholder={t('address_state')}
/>
</AutoComplete>
);
}
return (
<Select
value={newAddress.state}
className={classes.stateInput}
dropdownClassName={classes.pincodeInputDropdown}
onChange={(e: any) => updateAddressFieldWithValidations('state', e)}
placeholder={t('address_state')}
options={
localityStatesList.map((state: any) => {
return {
label: state.name,
value: state.name,
};
})
}
onSelect={(e) => saveAddressUsingAddressHierarchy(e, 'state')}
onSearch={loadStatesList}
disabled={disableState}
showSearch
allowClear
/>
);
};
|
Changes in src/network/pickup.api.ts
| Code Block |
|---|
//api to fetch states list
export const FETCH_STATES_LIST = '/api/CustomerPortal/addressManagement/getAddressNodeData?type=State';
//api to fetch nodes value based on address hierarchy (new dev api)
export const FETCH_ADDRESS_FROM_ADDRESS_HIERARCHY = '/api/CustomerPortal/fetchGeneralAddressCode';
export const fetchAddressUsingAddressHierarchy = (params: any) => {
return POST(`${API_BASE_URL}${FETCH_ADDRESS_FROM_ADDRESS_HIERARCHY}`, params);
};
//exporting functions to fetch nodes' list to be called from create-address.tsx file on entering sompething in inpit fileds (> 3chars)
export const fetchCountriesList = (params: any) => {
return GET(`${API_BASE_URL}${FETCH_COUNTRIES_NODE_DATA}`,
{ isDataSearchApplied: true, searchQuery: params, sortResult: true });
};
export const fetchCitiesList = (params: any) => {
return GET(`${API_BASE_URL}${FETCH_CITIES_LIST}`,
{ isDataSearchApplied: true, searchQuery: params, sortResult: true });
};
export const fetchStatesList = (params: any) => {
return GET(`${API_BASE_URL}${FETCH_STATES_LIST}`,
{ isDataSearchApplied: true, searchQuery: params, sortResult: true });
}; |
changes in src/network/api.constants.ts
| Code Block |
|---|
export const FETCH_STATES_LIST = '/api/CustomerPortal/addressManagement/getAddressNodeData?type=State'; export const FETCH_COUNTRIES_NODE_DATA = '/api/CustomerPortal/addressManagement/getAddressNodeData?type=Country'; export const FETCH_ADDRESS_FROM_ADDRESS_HIERARCHY = '/api/CustomerPortal/fetchGeneralAddressCode'; |