ordering-ui-external 10.10.15 → 10.10.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/_modules/themes/callcenterOriginal/src/components/AddressForm/index.js +13 -6
  2. package/_modules/themes/five/src/components/AddressForm/index.js +14 -7
  3. package/package.json +1 -1
  4. package/src/themes/callcenterOriginal/src/components/AddressForm/index.js +14 -3
  5. package/src/themes/five/src/components/AddressForm/index.js +17 -6
package/_modules/themes/callcenterOriginal/src/components/AddressForm/index.js CHANGED
@@ -97,6 +97,7 @@ var AddressFormUI = function AddressFormUI(props) {
97
97
  firstLocationNoEdit = _useState10[0],
98
98
  setFirstLocationNoEdit = _useState10[1];
99
99
  var isEditing = !!((_addressState$address3 = addressState.address) !== null && _addressState$address3 !== void 0 && _addressState$address3.id);
100
+ var googleInputRef = (0, _react.useRef)();
100
101
  var _useState11 = (0, _react.useState)(isEditing ? addressState === null || addressState === void 0 || (_addressState$address4 = addressState.address) === null || _addressState$address4 === void 0 ? void 0 : _addressState$address4.location : (_formState$changes$lo = (_formState$changes2 = formState.changes) === null || _formState$changes2 === void 0 ? void 0 : _formState$changes2.location) !== null && _formState$changes$lo !== void 0 ? _formState$changes$lo : null),
101
102
  _useState12 = _slicedToArray(_useState11, 2),
102
103
  locationChange = _useState12[0],
@@ -310,13 +311,16 @@ var AddressFormUI = function AddressFormUI(props) {
310
311
  });
311
312
  };
312
313
  var handleChangeAddress = function handleChangeAddress(address) {
314
+ var _googleInputRef$curre;
313
315
  if (address !== null && address !== void 0 && address.address) {
314
316
  getBusinessDeliveryZones(address === null || address === void 0 ? void 0 : address.location);
315
317
  }
316
318
  setState(_objectSpread(_objectSpread({}, state), {}, {
317
319
  selectedFromAutocomplete: true
318
320
  }));
319
- updateChanges(address);
321
+ updateChanges(_objectSpread(_objectSpread({}, address), {}, {
322
+ address: googleInputRef === null || googleInputRef === void 0 || (_googleInputRef$curre = googleInputRef.current) === null || _googleInputRef$curre === void 0 ? void 0 : _googleInputRef$curre.value
323
+ }));
320
324
  };
321
325
  var setMapErrors = function setMapErrors(errKey) {
322
326
  setAlertState({
@@ -456,7 +460,7 @@ var AddressFormUI = function AddressFormUI(props) {
456
460
  key: i
457
461
  }, props));
458
462
  }), inputNames.map(function (field) {
459
- var _configState$configs5, _addressState$address12, _formState$changes26, _businessesList$busin, _theme$images, _ref9, _formState$changes$fi2, _formState$changes27, _addressState$address13, _ref10, _formState$changes$ad5, _formState$changes28;
463
+ var _formState$result3, _formState$result4, _formState$changes$ad5, _formState$changes26, _configState$configs5, _addressState$address12, _formState$changes27, _businessesList$busin, _theme$images, _ref9, _formState$changes$fi2, _formState$changes28, _addressState$address13, _ref10, _formState$changes$ad6, _formState$changes29;
460
464
  return showField && showField(field.name) && (field.name === 'address' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
461
465
  key: field.name
462
466
  }, /*#__PURE__*/_react.default.createElement(_styles.AddressWrap, {
@@ -478,7 +482,10 @@ var AddressFormUI = function AddressFormUI(props) {
478
482
  });
479
483
  setAddressValue(e.target.value);
480
484
  },
481
- value: addressValue,
485
+ childRef: function childRef(ref) {
486
+ googleInputRef.current = ref;
487
+ },
488
+ defaultValue: formState !== null && formState !== void 0 && (_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.result ? formState === null || formState === void 0 || (_formState$result4 = formState.result) === null || _formState$result4 === void 0 || (_formState$result4 = _formState$result4.result) === null || _formState$result4 === void 0 ? void 0 : _formState$result4.address : (_formState$changes$ad5 = formState === null || formState === void 0 || (_formState$changes26 = formState.changes) === null || _formState$changes26 === void 0 ? void 0 : _formState$changes26.address) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressValue,
482
489
  autoComplete: "new-field",
483
490
  countryCode: (configState === null || configState === void 0 || (_configState$configs5 = configState.configs) === null || _configState$configs5 === void 0 || (_configState$configs5 = _configState$configs5.country_autocomplete) === null || _configState$configs5 === void 0 ? void 0 : _configState$configs5.value) || '*'
484
491
  })), /*#__PURE__*/_react.default.createElement(_GoogleGpsButton.GoogleGpsButton, {
@@ -491,7 +498,7 @@ var AddressFormUI = function AddressFormUI(props) {
491
498
  onError: setMapErrors,
492
499
  IconButton: _reactBootstrapIcons.GeoAlt,
493
500
  IconLoadingButton: _CgSearchLoading.default
494
- })), locationChange && ((addressState === null || addressState === void 0 || (_addressState$address12 = addressState.address) === null || _addressState$address12 === void 0 ? void 0 : _addressState$address12.location) || (formState === null || formState === void 0 || (_formState$changes26 = formState.changes) === null || _formState$changes26 === void 0 ? void 0 : _formState$changes26.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
501
+ })), locationChange && ((addressState === null || addressState === void 0 || (_addressState$address12 = addressState.address) === null || _addressState$address12 === void 0 ? void 0 : _addressState$address12.location) || (formState === null || formState === void 0 || (_formState$changes27 = formState.changes) === null || _formState$changes27 === void 0 ? void 0 : _formState$changes27.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
495
502
  isEnableContinueButton: isEnableContinueButton,
496
503
  notUseCustomerInfo: notUseCustomerInfo
497
504
  }, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GoogleMapsMap, {
@@ -514,7 +521,7 @@ var AddressFormUI = function AddressFormUI(props) {
514
521
  }, field.name !== 'address_notes' ? /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
515
522
  className: field.name,
516
523
  placeholder: t(field.name.toUpperCase(), field.code),
517
- value: (_ref9 = (_formState$changes$fi2 = (_formState$changes27 = formState.changes) === null || _formState$changes27 === void 0 ? void 0 : _formState$changes27[field.name]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : (_addressState$address13 = addressState.address) === null || _addressState$address13 === void 0 ? void 0 : _addressState$address13[field.name]) !== null && _ref9 !== void 0 ? _ref9 : '',
524
+ value: (_ref9 = (_formState$changes$fi2 = (_formState$changes28 = formState.changes) === null || _formState$changes28 === void 0 ? void 0 : _formState$changes28[field.name]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : (_addressState$address13 = addressState.address) === null || _addressState$address13 === void 0 ? void 0 : _addressState$address13[field.name]) !== null && _ref9 !== void 0 ? _ref9 : '',
518
525
  onChange: function onChange(e) {
519
526
  formMethods.setValue(field.name, e.target.value);
520
527
  handleChangeInput({
@@ -529,7 +536,7 @@ var AddressFormUI = function AddressFormUI(props) {
529
536
  }) : /*#__PURE__*/_react.default.createElement(_Inputs.TextArea, {
530
537
  rows: 4,
531
538
  placeholder: t('ADDRESS_NOTES', 'Address Notes'),
532
- value: (_ref10 = (_formState$changes$ad5 = (_formState$changes28 = formState.changes) === null || _formState$changes28 === void 0 ? void 0 : _formState$changes28.address_notes) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressState.address.address_notes) !== null && _ref10 !== void 0 ? _ref10 : '',
539
+ value: (_ref10 = (_formState$changes$ad6 = (_formState$changes29 = formState.changes) === null || _formState$changes29 === void 0 ? void 0 : _formState$changes29.address_notes) !== null && _formState$changes$ad6 !== void 0 ? _formState$changes$ad6 : addressState.address.address_notes) !== null && _ref10 !== void 0 ? _ref10 : '',
533
540
  onChange: function onChange(e) {
534
541
  formMethods.setValue('address_notes', e.target.value);
535
542
  handleChangeInput({
package/_modules/themes/five/src/components/AddressForm/index.js CHANGED
@@ -98,6 +98,7 @@ var AddressFormUI = function AddressFormUI(props) {
98
98
  _useState8 = _slicedToArray(_useState7, 2),
99
99
  addressValue = _useState8[0],
100
100
  setAddressValue = _useState8[1];
101
+ var googleInputRef = (0, _react.useRef)();
101
102
  var _useState9 = (0, _react.useState)({
102
103
  value: null
103
104
  }),
@@ -308,10 +309,13 @@ var AddressFormUI = function AddressFormUI(props) {
308
309
  });
309
310
  };
310
311
  var handleChangeAddress = function handleChangeAddress(address) {
312
+ var _googleInputRef$curre;
311
313
  setState(_objectSpread(_objectSpread({}, state), {}, {
312
314
  selectedFromAutocomplete: true
313
315
  }));
314
- updateChanges(address);
316
+ updateChanges(_objectSpread(_objectSpread({}, address), {}, {
317
+ address: googleInputRef === null || googleInputRef === void 0 || (_googleInputRef$curre = googleInputRef.current) === null || _googleInputRef$curre === void 0 ? void 0 : _googleInputRef$curre.value
318
+ }));
315
319
  };
316
320
  var setMapErrors = function setMapErrors(errKey) {
317
321
  setAlertState({
@@ -450,7 +454,7 @@ var AddressFormUI = function AddressFormUI(props) {
450
454
  key: i
451
455
  }, props));
452
456
  }), inputNames.map(function (field) {
453
- var _configState$configs5, _addressState$address12, _formState$changes26, _ref9, _formState$changes$fi2, _formState$changes27, _addressState$address13, _ref10, _formState$changes$ad5, _formState$changes28;
457
+ var _formState$result3, _formState$result4, _formState$changes$ad5, _formState$changes26, _configState$configs5, _addressState$address12, _formState$changes27, _ref9, _formState$changes$fi2, _formState$changes28, _addressState$address13, _ref10, _formState$changes$ad6, _formState$changes29;
454
458
  return showField && showField(field.name) && (field.name === 'address' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
455
459
  key: field.name
456
460
  }, /*#__PURE__*/_react.default.createElement(_styles.AddressWrap, {
@@ -472,8 +476,11 @@ var AddressFormUI = function AddressFormUI(props) {
472
476
  });
473
477
  setAddressValue(e.target.value);
474
478
  },
475
- value: addressValue,
476
- autoComplete: "new-field",
479
+ childRef: function childRef(ref) {
480
+ googleInputRef.current = ref;
481
+ },
482
+ defaultValue: formState !== null && formState !== void 0 && (_formState$result3 = formState.result) !== null && _formState$result3 !== void 0 && _formState$result3.result ? formState === null || formState === void 0 || (_formState$result4 = formState.result) === null || _formState$result4 === void 0 || (_formState$result4 = _formState$result4.result) === null || _formState$result4 === void 0 ? void 0 : _formState$result4.address : (_formState$changes$ad5 = formState === null || formState === void 0 || (_formState$changes26 = formState.changes) === null || _formState$changes26 === void 0 ? void 0 : _formState$changes26.address) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressValue,
483
+ autoComplete: "new-password",
477
484
  countryCode: (configState === null || configState === void 0 || (_configState$configs5 = configState.configs) === null || _configState$configs5 === void 0 || (_configState$configs5 = _configState$configs5.country_autocomplete) === null || _configState$configs5 === void 0 ? void 0 : _configState$configs5.value) || '*'
478
485
  })), /*#__PURE__*/_react.default.createElement(_GoogleGpsButton.GoogleGpsButton, {
479
486
  className: "gps-button",
@@ -485,7 +492,7 @@ var AddressFormUI = function AddressFormUI(props) {
485
492
  onError: setMapErrors,
486
493
  IconButton: _reactBootstrapIcons.GeoAlt,
487
494
  IconLoadingButton: _CgSearchLoading.default
488
- })), !isHideMap && locationChange && ((addressState === null || addressState === void 0 || (_addressState$address12 = addressState.address) === null || _addressState$address12 === void 0 ? void 0 : _addressState$address12.location) || (formState === null || formState === void 0 || (_formState$changes26 = formState.changes) === null || _formState$changes26 === void 0 ? void 0 : _formState$changes26.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GoogleMapsMap, {
495
+ })), !isHideMap && locationChange && ((addressState === null || addressState === void 0 || (_addressState$address12 = addressState.address) === null || _addressState$address12 === void 0 ? void 0 : _addressState$address12.location) || (formState === null || formState === void 0 || (_formState$changes27 = formState.changes) === null || _formState$changes27 === void 0 ? void 0 : _formState$changes27.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GoogleMapsMap, {
489
496
  apiKey: googleMapsApiKey,
490
497
  location: locationChange,
491
498
  fixedLocation: !isEditing ? firstLocationNoEdit.value : null,
@@ -499,7 +506,7 @@ var AddressFormUI = function AddressFormUI(props) {
499
506
  }, (isRequiredField(field.name) || showFieldWithTheme(field.name)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, field.name !== 'address_notes' ? /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
500
507
  className: field.name,
501
508
  placeholder: t(field.name.toUpperCase(), field.code),
502
- value: (_ref9 = (_formState$changes$fi2 = (_formState$changes27 = formState.changes) === null || _formState$changes27 === void 0 ? void 0 : _formState$changes27[field.name]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : (_addressState$address13 = addressState.address) === null || _addressState$address13 === void 0 ? void 0 : _addressState$address13[field.name]) !== null && _ref9 !== void 0 ? _ref9 : '',
509
+ value: (_ref9 = (_formState$changes$fi2 = (_formState$changes28 = formState.changes) === null || _formState$changes28 === void 0 ? void 0 : _formState$changes28[field.name]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : (_addressState$address13 = addressState.address) === null || _addressState$address13 === void 0 ? void 0 : _addressState$address13[field.name]) !== null && _ref9 !== void 0 ? _ref9 : '',
503
510
  onChange: function onChange(e) {
504
511
  formMethods.setValue(field.name, e.target.value);
505
512
  handleChangeInput({
@@ -514,7 +521,7 @@ var AddressFormUI = function AddressFormUI(props) {
514
521
  }) : /*#__PURE__*/_react.default.createElement(_Inputs.TextArea, {
515
522
  rows: 3,
516
523
  placeholder: t('ADDRESS_NOTES', 'Address Notes'),
517
- value: (_ref10 = (_formState$changes$ad5 = (_formState$changes28 = formState.changes) === null || _formState$changes28 === void 0 ? void 0 : _formState$changes28.address_notes) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressState.address.address_notes) !== null && _ref10 !== void 0 ? _ref10 : '',
524
+ value: (_ref10 = (_formState$changes$ad6 = (_formState$changes29 = formState.changes) === null || _formState$changes29 === void 0 ? void 0 : _formState$changes29.address_notes) !== null && _formState$changes$ad6 !== void 0 ? _formState$changes$ad6 : addressState.address.address_notes) !== null && _ref10 !== void 0 ? _ref10 : '',
518
525
  onChange: function onChange(e) {
519
526
  formMethods.setValue('address_notes', e.target.value);
520
527
  handleChangeInput({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "10.10.15",
3
+ "version": "10.10.16",
4
4
  "description": "Ordering UI Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
package/src/themes/callcenterOriginal/src/components/AddressForm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react'
1
+ import React, { useState, useEffect, useRef } from 'react'
2
2
  import Skeleton from 'react-loading-skeleton'
3
3
  import CgSearchLoading from '@meronex/icons/cg/CgSearchLoading'
4
4
  import {
@@ -68,6 +68,7 @@ const AddressFormUI = (props) => {
68
68
  const [addressValue, setAddressValue] = useState(formState.changes?.address ?? addressState.address?.address ?? '')
69
69
  const [firstLocationNoEdit, setFirstLocationNoEdit] = useState({ value: null })
70
70
  const isEditing = !!addressState.address?.id
71
+ const googleInputRef = useRef()
71
72
 
72
73
  const [locationChange, setLocationChange] = useState(
73
74
  isEditing
@@ -244,7 +245,10 @@ const AddressFormUI = (props) => {
244
245
  ...state,
245
246
  selectedFromAutocomplete: true
246
247
  })
247
- updateChanges(address)
248
+ updateChanges({
249
+ ...address,
250
+ address: googleInputRef?.current?.value
251
+ })
248
252
  }
249
253
 
250
254
  const setMapErrors = (errKey) => {
@@ -403,7 +407,14 @@ const AddressFormUI = (props) => {
403
407
  handleChangeInput({ target: { name: 'address', value: e.target.value } })
404
408
  setAddressValue(e.target.value)
405
409
  }}
406
- value={addressValue}
410
+ childRef={(ref) => {
411
+ googleInputRef.current = ref
412
+ }}
413
+ defaultValue={
414
+ formState?.result?.result
415
+ ? formState?.result?.result?.address
416
+ : formState?.changes?.address ?? addressValue
417
+ }
407
418
  autoComplete='new-field'
408
419
  countryCode={configState?.configs?.country_autocomplete?.value || '*'}
409
420
  />
package/src/themes/five/src/components/AddressForm/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState, useEffect } from 'react'
1
+ import React, { useState, useEffect, useRef } from 'react'
2
2
  import Skeleton from 'react-loading-skeleton'
3
3
  import CgSearchLoading from '@meronex/icons/cg/CgSearchLoading'
4
4
  import {
@@ -68,6 +68,7 @@ const AddressFormUI = (props) => {
68
68
  const [addressTag, setAddressTag] = useState(addressState?.address?.tag)
69
69
  const [alertState, setAlertState] = useState({ open: false, content: [] })
70
70
  const [addressValue, setAddressValue] = useState(formState.changes?.address ?? addressState.address?.address ?? '')
71
+ const googleInputRef = useRef()
71
72
  const [firstLocationNoEdit, setFirstLocationNoEdit] = useState({ value: null })
72
73
  const isEditing = !!addressState.address?.id
73
74
  const isChew = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
@@ -240,7 +241,10 @@ const AddressFormUI = (props) => {
240
241
  ...state,
241
242
  selectedFromAutocomplete: true
242
243
  })
243
- updateChanges(address)
244
+ updateChanges({
245
+ ...address,
246
+ address: googleInputRef?.current?.value
247
+ })
244
248
  }
245
249
 
246
250
  const setMapErrors = (errKey) => {
@@ -308,8 +312,8 @@ const AddressFormUI = (props) => {
308
312
  lng: formState?.changes?.location?.lng?.toFixed(5)
309
313
  }
310
314
  if (
311
- prevLocation?.lat !== newLocation?.lat &&
312
- prevLocation?.lng !== newLocation?.lng
315
+ prevLocation?.lat !== newLocation?.lat &&
316
+ prevLocation?.lng !== newLocation?.lng
313
317
  ) {
314
318
  setLocationChange(formState?.changes?.location)
315
319
  }
@@ -406,8 +410,15 @@ const AddressFormUI = (props) => {
406
410
  handleChangeInput({ target: { name: 'address', value: e.target.value } })
407
411
  setAddressValue(e.target.value)
408
412
  }}
409
- value={addressValue}
410
- autoComplete='new-field'
413
+ childRef={(ref) => {
414
+ googleInputRef.current = ref
415
+ }}
416
+ defaultValue={
417
+ formState?.result?.result
418
+ ? formState?.result?.result?.address
419
+ : formState?.changes?.address ?? addressValue
420
+ }
421
+ autoComplete='new-password'
411
422
  countryCode={configState?.configs?.country_autocomplete?.value || '*'}
412
423
  />
413
424
  </WrapAddressInput>