ordering-ui-external 14.1.57 → 14.1.58

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 +27 -27
  2. package/_modules/themes/callcenterOriginal/src/components/AddressForm/styles.js +11 -13
  3. package/package.json +1 -1
  4. package/src/themes/callcenterOriginal/src/components/AddressForm/index.js +123 -113
  5. package/src/themes/callcenterOriginal/src/components/AddressForm/styles.js +6 -8
package/_modules/themes/callcenterOriginal/src/components/AddressForm/index.js CHANGED
@@ -36,7 +36,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
36
36
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
37
37
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
38
38
  var AddressFormUI = function AddressFormUI(props) {
39
- var _addressState$address, _ref, _formState$changes$ad, _formState$changes, _addressState$address2, _addressState$address3, _configState$configs, _addressState$address4, _formState$changes$lo, _formState$changes2, _businessesList$busin, _configState$configs2, _configState$configs3, _configState$configs4, _configState$configs5, _address$location5, _address$location6, _orderState$options6;
39
+ var _addressState$address, _ref, _formState$changes$ad, _formState$changes, _addressState$address2, _addressState$address3, _configState$configs, _addressState$address4, _formState$changes$lo, _formState$changes2, _businessesList$busin, _configState$configs2, _configState$configs3, _configState$configs4, _configState$configs5, _addressState$address12, _formState$changes28, _formState$changes29, _address$location5, _address$location6, _orderState$options6;
40
40
  var addressesList = props.addressesList,
41
41
  googleMapsControls = props.googleMapsControls,
42
42
  formState = props.formState,
@@ -512,13 +512,13 @@ var AddressFormUI = function AddressFormUI(props) {
512
512
  style: {
513
513
  marginBottom: '10px'
514
514
  }
515
- })), showTabs && /*#__PURE__*/_react.default.createElement(_styles.TabsContainer, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
515
+ })), showTabs && !(addressState !== null && addressState !== void 0 && (_addressState$address12 = addressState.address) !== null && _addressState$address12 !== void 0 && _addressState$address12.location || formState !== null && formState !== void 0 && (_formState$changes28 = formState.changes) !== null && _formState$changes28 !== void 0 && _formState$changes28.location || formState !== null && formState !== void 0 && (_formState$changes29 = formState.changes) !== null && _formState$changes29 !== void 0 && _formState$changes29.verified) && /*#__PURE__*/_react.default.createElement(_styles.TabsContainer, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tabs, null, /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
516
516
  onClick: function onClick() {
517
517
  return setTabSelected('general');
518
518
  },
519
519
  active: tabSelected === 'general',
520
520
  borderBottom: true
521
- }, t('DEFAULT', 'Default')), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
521
+ }, t('STANDARD', 'Standard')), /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
522
522
  onClick: function onClick() {
523
523
  return setTabSelected('country');
524
524
  },
@@ -531,10 +531,10 @@ var AddressFormUI = function AddressFormUI(props) {
531
531
  },
532
532
  autoComplete: "off"
533
533
  }, inputNames.map(function (field) {
534
- var _address$location3, _address$location4, _formState$result3, _formState$result4, _formState$changes$ad5, _formState$changes28, _configState$configs6, _addressState$address12, _formState$changes29, _theme$colors, _addressState$address13, _formState$changes30, _addressState$address14, _formState$changes31, _addressState$address15, _formState$changes32, _addressState$address16, _formState$changes33, _addressState$address17, _formState$changes34, _addressState$address18, _formState$changes35, _addressState$address19, _formState$changes36, _addressState$address20, _formState$changes37, _addressState$address21, _formState$changes38, _addressState$address22, _formState$changes39, _addressState$address23, _formState$changes40, _theme$images, _ref10, _formState$changes$fi2, _formState$changes41, _addressState$address24, _ref11, _formState$changes$ad6, _formState$changes42;
534
+ var _address$location3, _address$location4, _formState$result3, _formState$result4, _formState$changes$ad5, _formState$changes30, _configState$configs6, _addressState$address13, _formState$changes31, _theme$colors, _addressState$address14, _formState$changes32, _addressState$address15, _formState$changes33, _addressState$address16, _formState$changes34, _addressState$address17, _formState$changes35, _addressState$address18, _formState$changes36, _addressState$address19, _formState$changes37, _addressState$address20, _formState$changes38, _addressState$address21, _formState$changes39, _addressState$address22, _formState$changes40, _addressState$address23, _formState$changes41, _addressState$address24, _formState$changes42, _addressState$address25, _formState$changes43, _theme$images, _ref10, _formState$changes$fi2, _formState$changes44, _addressState$address26, _ref11, _formState$changes$ad6, _formState$changes45;
535
535
  return showField && showField(field.name) && (field.name === 'address' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
536
536
  key: field.name
537
- }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !showSpreadForm && /*#__PURE__*/_react.default.createElement(_styles.AddressWrap, {
537
+ }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.AddressWrap, {
538
538
  className: "google-control",
539
539
  showTabs: showTabs
540
540
  }, /*#__PURE__*/_react.default.createElement(_styles.WrapAddressInput, null, !selectedFromAutocomplete && (address === null || address === void 0 ? void 0 : address.address) && (!(address !== null && address !== void 0 && (_address$location3 = address.location) !== null && _address$location3 !== void 0 && _address$location3.lat) || !(address !== null && address !== void 0 && (_address$location4 = address.location) !== null && _address$location4 !== void 0 && _address$location4.lng)) && /*#__PURE__*/_react.default.createElement(_styles.AddressMarkContainer, null, /*#__PURE__*/_react.default.createElement("p", null, t('PLEASE_SELECT_GOOGLE_MAPS_ADDRESS', 'Please select an address given by google maps.'))), /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GoogleAutocompleteInput, {
@@ -557,10 +557,10 @@ var AddressFormUI = function AddressFormUI(props) {
557
557
  childRef: function childRef(ref) {
558
558
  googleInputRef.current = ref;
559
559
  },
560
- 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$changes28 = formState.changes) === null || _formState$changes28 === void 0 ? void 0 : _formState$changes28.address) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressValue,
560
+ 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$changes30 = formState.changes) === null || _formState$changes30 === void 0 ? void 0 : _formState$changes30.address) !== null && _formState$changes$ad5 !== void 0 ? _formState$changes$ad5 : addressValue,
561
561
  autoComplete: "new-field",
562
562
  countryCode: (configState === null || configState === void 0 || (_configState$configs6 = configState.configs) === null || _configState$configs6 === void 0 || (_configState$configs6 = _configState$configs6.country_autocomplete) === null || _configState$configs6 === void 0 ? void 0 : _configState$configs6.value) || '*'
563
- }))), !(addressState !== null && addressState !== void 0 && (_addressState$address12 = addressState.address) !== null && _addressState$address12 !== void 0 && _addressState$address12.location || formState !== null && formState !== void 0 && (_formState$changes29 = formState.changes) !== null && _formState$changes29 !== void 0 && _formState$changes29.location) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
563
+ }))), !(addressState !== null && addressState !== void 0 && (_addressState$address13 = addressState.address) !== null && _addressState$address13 !== void 0 && _addressState$address13.location || formState !== null && formState !== void 0 && (_formState$changes31 = formState.changes) !== null && _formState$changes31 !== void 0 && _formState$changes31.location) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
564
564
  showTabs: showTabs
565
565
  }, /*#__PURE__*/_react.default.createElement(_styles.SmsClient, null, /*#__PURE__*/_react.default.createElement("p", null, t('CAN_NOT_FIND_ADDRESS', 'Can\'t find address?'), ' '), /*#__PURE__*/_react.default.createElement("a", {
566
566
  style: {
@@ -571,17 +571,18 @@ var AddressFormUI = function AddressFormUI(props) {
571
571
  onClick: function onClick() {
572
572
  return handleSendSmsToCustomer();
573
573
  }
574
- }, t('SEND_SMS_TO_CUSTOMER', 'Send SMS to customer')))), ((addressState === null || addressState === void 0 || (_addressState$address13 = addressState.address) === null || _addressState$address13 === void 0 ? void 0 : _addressState$address13.location) || (formState === null || formState === void 0 || (_formState$changes30 = formState.changes) === null || _formState$changes30 === void 0 ? void 0 : _formState$changes30.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
574
+ }, t('SEND_SMS_TO_CUSTOMER', 'Send SMS to customer')))), ((addressState === null || addressState === void 0 || (_addressState$address14 = addressState.address) === null || _addressState$address14 === void 0 ? void 0 : _addressState$address14.location) || (formState === null || formState === void 0 || (_formState$changes32 = formState.changes) === null || _formState$changes32 === void 0 ? void 0 : _formState$changes32.location)) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {
575
575
  showMap: showMap || !showSpreadForm,
576
576
  notUseCustomerInfo: notUseCustomerInfo,
577
577
  addFormRestrictions: addFormRestrictions,
578
- showTabs: showTabs
579
- }, !showMap && /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.GeoAlt, {
578
+ showTabs: showTabs,
579
+ hasAddress: showTabs && ((addressState === null || addressState === void 0 || (_addressState$address15 = addressState.address) === null || _addressState$address15 === void 0 ? void 0 : _addressState$address15.location) || (formState === null || formState === void 0 || (_formState$changes33 = formState.changes) === null || _formState$changes33 === void 0 ? void 0 : _formState$changes33.location))
580
+ }, /*#__PURE__*/_react.default.createElement("section", null, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.GeoAlt, {
580
581
  style: {
581
582
  fontSize: 25,
582
583
  marginRight: 5
583
584
  }
584
- }), ((addressState === null || addressState === void 0 || (_addressState$address14 = addressState.address) === null || _addressState$address14 === void 0 ? void 0 : _addressState$address14.address) || (formState === null || formState === void 0 || (_formState$changes31 = formState.changes) === null || _formState$changes31 === void 0 ? void 0 : _formState$changes31.address)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address15 = addressState.address) === null || _addressState$address15 === void 0 ? void 0 : _addressState$address15.address) || (formState === null || formState === void 0 || (_formState$changes32 = formState.changes) === null || _formState$changes32 === void 0 ? void 0 : _formState$changes32.address), ', '), ((addressState === null || addressState === void 0 || (_addressState$address16 = addressState.address) === null || _addressState$address16 === void 0 ? void 0 : _addressState$address16.country) || (formState === null || formState === void 0 || (_formState$changes33 = formState.changes) === null || _formState$changes33 === void 0 ? void 0 : _formState$changes33.country)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address17 = addressState.address) === null || _addressState$address17 === void 0 ? void 0 : _addressState$address17.country) || (formState === null || formState === void 0 || (_formState$changes34 = formState.changes) === null || _formState$changes34 === void 0 ? void 0 : _formState$changes34.country), ', '), ((addressState === null || addressState === void 0 || (_addressState$address18 = addressState.address) === null || _addressState$address18 === void 0 ? void 0 : _addressState$address18.address_notes) || (formState === null || formState === void 0 || (_formState$changes35 = formState.changes) === null || _formState$changes35 === void 0 ? void 0 : _formState$changes35.address_notes)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address19 = addressState.address) === null || _addressState$address19 === void 0 ? void 0 : _addressState$address19.address_notes) || (formState === null || formState === void 0 || (_formState$changes36 = formState.changes) === null || _formState$changes36 === void 0 ? void 0 : _formState$changes36.address_notes), ', '), ((addressState === null || addressState === void 0 || (_addressState$address20 = addressState.address) === null || _addressState$address20 === void 0 ? void 0 : _addressState$address20.internal_number) || (formState === null || formState === void 0 || (_formState$changes37 = formState.changes) === null || _formState$changes37 === void 0 ? void 0 : _formState$changes37.internal_number)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address21 = addressState.address) === null || _addressState$address21 === void 0 ? void 0 : _addressState$address21.internal_number) || (formState === null || formState === void 0 || (_formState$changes38 = formState.changes) === null || _formState$changes38 === void 0 ? void 0 : _formState$changes38.internal_number), ', '), ((addressState === null || addressState === void 0 || (_addressState$address22 = addressState.address) === null || _addressState$address22 === void 0 ? void 0 : _addressState$address22.zipcode) || (formState === null || formState === void 0 || (_formState$changes39 = formState.changes) === null || _formState$changes39 === void 0 ? void 0 : _formState$changes39.zipcode)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address23 = addressState.address) === null || _addressState$address23 === void 0 ? void 0 : _addressState$address23.zipcode) || (formState === null || formState === void 0 || (_formState$changes40 = formState.changes) === null || _formState$changes40 === void 0 ? void 0 : _formState$changes40.zipcode), ', '), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("a", {
585
+ }), ((addressState === null || addressState === void 0 || (_addressState$address16 = addressState.address) === null || _addressState$address16 === void 0 ? void 0 : _addressState$address16.address) || (formState === null || formState === void 0 || (_formState$changes34 = formState.changes) === null || _formState$changes34 === void 0 ? void 0 : _formState$changes34.address)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address17 = addressState.address) === null || _addressState$address17 === void 0 ? void 0 : _addressState$address17.address) || (formState === null || formState === void 0 || (_formState$changes35 = formState.changes) === null || _formState$changes35 === void 0 ? void 0 : _formState$changes35.address), ', '), ((addressState === null || addressState === void 0 || (_addressState$address18 = addressState.address) === null || _addressState$address18 === void 0 ? void 0 : _addressState$address18.country) || (formState === null || formState === void 0 || (_formState$changes36 = formState.changes) === null || _formState$changes36 === void 0 ? void 0 : _formState$changes36.country)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address19 = addressState.address) === null || _addressState$address19 === void 0 ? void 0 : _addressState$address19.country) || (formState === null || formState === void 0 || (_formState$changes37 = formState.changes) === null || _formState$changes37 === void 0 ? void 0 : _formState$changes37.country), ', '), ((addressState === null || addressState === void 0 || (_addressState$address20 = addressState.address) === null || _addressState$address20 === void 0 ? void 0 : _addressState$address20.address_notes) || (formState === null || formState === void 0 || (_formState$changes38 = formState.changes) === null || _formState$changes38 === void 0 ? void 0 : _formState$changes38.address_notes)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address21 = addressState.address) === null || _addressState$address21 === void 0 ? void 0 : _addressState$address21.address_notes) || (formState === null || formState === void 0 || (_formState$changes39 = formState.changes) === null || _formState$changes39 === void 0 ? void 0 : _formState$changes39.address_notes), ', '), ((addressState === null || addressState === void 0 || (_addressState$address22 = addressState.address) === null || _addressState$address22 === void 0 ? void 0 : _addressState$address22.internal_number) || (formState === null || formState === void 0 || (_formState$changes40 = formState.changes) === null || _formState$changes40 === void 0 ? void 0 : _formState$changes40.internal_number)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address23 = addressState.address) === null || _addressState$address23 === void 0 ? void 0 : _addressState$address23.internal_number) || (formState === null || formState === void 0 || (_formState$changes41 = formState.changes) === null || _formState$changes41 === void 0 ? void 0 : _formState$changes41.internal_number), ', '), ((addressState === null || addressState === void 0 || (_addressState$address24 = addressState.address) === null || _addressState$address24 === void 0 ? void 0 : _addressState$address24.zipcode) || (formState === null || formState === void 0 || (_formState$changes42 = formState.changes) === null || _formState$changes42 === void 0 ? void 0 : _formState$changes42.zipcode)) && /*#__PURE__*/_react.default.createElement("span", null, (addressState === null || addressState === void 0 || (_addressState$address25 = addressState.address) === null || _addressState$address25 === void 0 ? void 0 : _addressState$address25.zipcode) || (formState === null || formState === void 0 || (_formState$changes43 = formState.changes) === null || _formState$changes43 === void 0 ? void 0 : _formState$changes43.zipcode), ', '), /*#__PURE__*/_react.default.createElement("br", null), !showMap && /*#__PURE__*/_react.default.createElement("a", {
585
586
  style: {
586
587
  textDecoration: 'underline',
587
588
  color: 'blue',
@@ -595,12 +596,22 @@ var AddressFormUI = function AddressFormUI(props) {
595
596
  textDecoration: 'underline',
596
597
  color: 'blue',
597
598
  cursor: 'pointer',
598
- marginLeft: 20
599
+ marginLeft: !showMap ? 20 : 0
599
600
  },
600
601
  onClick: function onClick() {
601
602
  return setEditSpreadAddress(!editSpreadAddress);
602
603
  }
603
- }, t('EDIT_ADDRESS', 'Edit Address'))), locationChange && showMap && /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GoogleMapsMap, {
604
+ }, t('EDIT_ADDRESS', 'Edit Address')), showMap && !editSpreadAddress && /*#__PURE__*/_react.default.createElement("a", {
605
+ style: {
606
+ textDecoration: 'underline',
607
+ color: 'blue',
608
+ cursor: 'pointer',
609
+ marginLeft: showSpreadForm ? 20 : 0
610
+ },
611
+ onClick: function onClick() {
612
+ return openStreetView();
613
+ }
614
+ }, t('OPEN_STREET_VIEW', 'Open Street view'))), locationChange && showMap && /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.GoogleMapsMap, {
604
615
  useMapWithBusinessZones: true,
605
616
  deactiveAlerts: true,
606
617
  avoidFitBounds: true,
@@ -613,23 +624,12 @@ var AddressFormUI = function AddressFormUI(props) {
613
624
  maxLimitLocation: parseInt(maxLimitLocation, 10),
614
625
  businessZones: businessZones,
615
626
  fallbackIcon: (_theme$images = theme.images) === null || _theme$images === void 0 || (_theme$images = _theme$images.dummies) === null || _theme$images === void 0 ? void 0 : _theme$images.businessLogo
616
- }), showMap && !editSpreadAddress && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSpreadForm && /*#__PURE__*/_react.default.createElement(_styles.StreetViewText, {
617
- style: {
618
- top: '0'
619
- },
620
- onClick: function onClick() {
621
- return setEditSpreadAddress(!editSpreadAddress);
622
- }
623
- }, t('EDIT_ADDRESS', 'Edit Address')), /*#__PURE__*/_react.default.createElement(_styles.StreetViewText, {
624
- onClick: function onClick() {
625
- return openStreetView();
626
- }
627
- }, t('OPEN_STREET_VIEW', 'Open Street view')))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
627
+ })))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
628
628
  key: field.name
629
629
  }, field.name !== 'address_notes' ? /*#__PURE__*/_react.default.createElement(_Inputs.Input, {
630
630
  className: field.name,
631
631
  placeholder: t(field.name.toUpperCase(), field.code),
632
- value: (_ref10 = (_formState$changes$fi2 = (_formState$changes41 = formState.changes) === null || _formState$changes41 === void 0 ? void 0 : _formState$changes41[field.name]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : (_addressState$address24 = addressState.address) === null || _addressState$address24 === void 0 ? void 0 : _addressState$address24[field.name]) !== null && _ref10 !== void 0 ? _ref10 : '',
632
+ value: (_ref10 = (_formState$changes$fi2 = (_formState$changes44 = formState.changes) === null || _formState$changes44 === void 0 ? void 0 : _formState$changes44[field.name]) !== null && _formState$changes$fi2 !== void 0 ? _formState$changes$fi2 : (_addressState$address26 = addressState.address) === null || _addressState$address26 === void 0 ? void 0 : _addressState$address26[field.name]) !== null && _ref10 !== void 0 ? _ref10 : '',
633
633
  onChange: function onChange(e) {
634
634
  formMethods.setValue(field.name, e.target.value);
635
635
  handleChangeInput({
@@ -644,7 +644,7 @@ var AddressFormUI = function AddressFormUI(props) {
644
644
  }) : /*#__PURE__*/_react.default.createElement(_Inputs.TextArea, {
645
645
  rows: 4,
646
646
  placeholder: t('ADDRESS_NOTES', 'Address Notes'),
647
- value: (_ref11 = (_formState$changes$ad6 = (_formState$changes42 = formState.changes) === null || _formState$changes42 === void 0 ? void 0 : _formState$changes42.address_notes) !== null && _formState$changes$ad6 !== void 0 ? _formState$changes$ad6 : addressState.address.address_notes) !== null && _ref11 !== void 0 ? _ref11 : '',
647
+ value: (_ref11 = (_formState$changes$ad6 = (_formState$changes45 = formState.changes) === null || _formState$changes45 === void 0 ? void 0 : _formState$changes45.address_notes) !== null && _formState$changes$ad6 !== void 0 ? _formState$changes$ad6 : addressState.address.address_notes) !== null && _ref11 !== void 0 ? _ref11 : '',
648
648
  onChange: function onChange(e) {
649
649
  formMethods.setValue('address_notes', e.target.value);
650
650
  handleChangeInput({
package/_modules/themes/callcenterOriginal/src/components/AddressForm/styles.js CHANGED
@@ -22,10 +22,7 @@ var FormControl = exports.FormControl = _styledComponents.default.form(_template
22
22
  var _props$theme;
23
23
  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: 15px;\n "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-right: 15px;\n "])));
24
24
  });
25
- var AddressWrap = exports.AddressWrap = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 50%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: absolute;\n top: ", ";\n right: 0px;\n padding-right: 20px;\n button {\n height: 41px;\n right: 25px;\n border: none;\n width: 25px;\n position: absolute;\n z-index: 1000;\n\n ", "\n\n svg {\n font-size: 18px;\n }\n }\n"])), function (_ref) {
26
- var showTabs = _ref.showTabs;
27
- return showTabs ? '110px' : '70px';
28
- }, function (props) {
25
+ var AddressWrap = exports.AddressWrap = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n button {\n height: 41px;\n right: 25px;\n border: none;\n width: 25px;\n position: absolute;\n z-index: 1000;\n\n ", "\n\n svg {\n font-size: 18px;\n }\n }\n"])), function (props) {
29
26
  var _props$theme2;
30
27
  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n left: 25px;\n right: initial;\n "])));
31
28
  });
@@ -41,23 +38,24 @@ var WrapAddressInput = exports.WrapAddressInput = _styledComponents.default.div(
41
38
  var AddressTagSection = exports.AddressTagSection = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n width: 100%;\n margin: 10px 0px;\n display: flex;\n justify-content: space-between;\n\n button {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 46px;\n height: 46px;\n border: none;\n color: #B1BCCC;\n\n img {\n width: 25px;\n height: 25px;\n }\n\n span {\n display: flex;\n justify-content: center;\n align-items: center;\n\n svg {\n font-size: 30px;\n }\n }\n }\n\n button.active {\n color: ", ";\n }\n"])), function (props) {
42
39
  return props.theme.colors.primary;
43
40
  });
44
- var WrapperMap = exports.WrapperMap = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n z-index: 100;\n width: 48%;\n position: absolute;\n top: ", ";\n right: 0;\n padding-top: ", ";\n padding-right: 20px;\n height: ", ";\n\n > div {\n position: relative !important;\n width: 100% !important;\n height: 100% !important;\n border-radius: 15px;\n }\n"])), function (_ref2) {
45
- var showTabs = _ref2.showTabs;
46
- return showTabs ? '150px' : '105px';
41
+ var WrapperMap = exports.WrapperMap = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n z-index: 100;\n width: 48%;\n position: absolute;\n top: ", ";\n right: 0;\n padding-top: ", ";\n padding-right: 20px;\n height: ", ";\n\n > div {\n position: relative !important;\n width: 100% !important;\n height: 100% !important;\n border-radius: 15px;\n }\n"])), function (_ref) {
42
+ var showTabs = _ref.showTabs,
43
+ hasAddress = _ref.hasAddress;
44
+ return hasAddress ? '55px' : showTabs ? '105px' : '50px';
47
45
  }, function (props) {
48
46
  return props.showMap ? '30px' : 0;
49
- }, function (_ref3) {
50
- var notUseCustomerInfo = _ref3.notUseCustomerInfo;
47
+ }, function (_ref2) {
48
+ var notUseCustomerInfo = _ref2.notUseCustomerInfo;
51
49
  return notUseCustomerInfo ? '370px' : '480px';
52
50
  });
53
51
  var WrapperSkeleton = exports.WrapperSkeleton = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: 10px;\n\n span {\n width: 100%;\n }\n"])));
54
- var AddressMarkContainer = exports.AddressMarkContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n background: #FFE69C;\n border: 1px solid #FFF3CD;\n display: flex;\n padding: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n position: absolute;\n top: 50px;\n width: max-content;\n p {\n margin: 0;\n color: #664D03;\n font-size: 12px;\n }\n\n ", "\n"])), function (_ref4) {
55
- var blue = _ref4.blue;
52
+ var AddressMarkContainer = exports.AddressMarkContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n background: #FFE69C;\n border: 1px solid #FFF3CD;\n display: flex;\n padding: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n position: absolute;\n top: 50px;\n width: max-content;\n p {\n margin: 0;\n color: #664D03;\n font-size: 12px;\n }\n\n ", "\n"])), function (_ref3) {
53
+ var blue = _ref3.blue;
56
54
  return blue && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n background-color: #CFF4FC;\n border: 1px solid #9EEAF9;\n p {\n color: #055160;\n }\n "])));
57
55
  });
58
- var StreetViewText = exports.StreetViewText = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n position: absolute;\n right: 35px;\n top: 30px;\n text-decoration: underline;\n color: ", ";\n z-index: 9999;\n cursor: pointer;\n"])), function (_ref5) {
56
+ var StreetViewText = exports.StreetViewText = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n position: absolute;\n right: 35px;\n top: 30px;\n text-decoration: underline;\n color: ", ";\n z-index: 9999;\n cursor: pointer;\n"])), function (_ref4) {
59
57
  var _theme$colors;
60
- var theme = _ref5.theme;
58
+ var theme = _ref4.theme;
61
59
  return theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary;
62
60
  });
63
61
  var WithoutAddressContainer = exports.WithoutAddressContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n justify-content: center;\n p {\n margin-bottom: 0;\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-external",
3
- "version": "14.1.57",
3
+ "version": "14.1.58",
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
@@ -31,7 +31,7 @@ import {
31
31
  WrapperMap,
32
32
  WrapperSkeleton,
33
33
  AddressMarkContainer,
34
- StreetViewText,
34
+ // StreetViewText,
35
35
  WithoutAddressContainer,
36
36
  SmsClient,
37
37
  TabsContainer
@@ -421,11 +421,11 @@ const AddressFormUI = (props) => {
421
421
  <Skeleton height={50} count={5} style={{ marginBottom: '10px' }} />
422
422
  </WrapperSkeleton>
423
423
  )}
424
- {showTabs && (
424
+ {showTabs && !(addressState?.address?.location || formState?.changes?.location || formState?.changes?.verified) && (
425
425
  <TabsContainer>
426
426
  <Tabs>
427
427
  <Tab onClick={() => setTabSelected('general')} active={tabSelected === 'general'} borderBottom>
428
- {t('DEFAULT', 'Default')}
428
+ {t('STANDARD', 'Standard')}
429
429
  </Tab>
430
430
  <Tab onClick={() => setTabSelected('country')} active={tabSelected === 'country'} borderBottom>
431
431
  {t('ADVANCED', 'Advanced')}
@@ -442,10 +442,10 @@ const AddressFormUI = (props) => {
442
442
  autoComplete='off'
443
443
  >
444
444
  {inputNames.map(field => showField && showField(field.name) && (
445
- field.name === 'address' ? (
446
- <React.Fragment key={field.name}>
447
- <>
448
- {!showSpreadForm && (
445
+ field.name === 'address'
446
+ ? (
447
+ <React.Fragment key={field.name}>
448
+ <>
449
449
  <AddressWrap className='google-control' showTabs={showTabs}>
450
450
  <WrapAddressInput>
451
451
  {!selectedFromAutocomplete && address?.address && (!address?.location?.lat || !address?.location?.lng) && (
@@ -480,31 +480,30 @@ const AddressFormUI = (props) => {
480
480
  />
481
481
  </WrapAddressInput>
482
482
  </AddressWrap>
483
- )}
484
- {!(addressState?.address?.location || formState?.changes?.location) && (
485
- <WrapperMap showTabs={showTabs}>
486
- <SmsClient>
487
- <p>
488
- {t('CAN_NOT_FIND_ADDRESS', 'Can\'t find address?')}{' '}
489
- </p>
490
- <a
491
- style={{ textDecoration: 'underline', color: theme?.colors?.primary, cursor: 'pointer' }}
492
- onClick={() => handleSendSmsToCustomer()}
493
- >
494
- {t('SEND_SMS_TO_CUSTOMER', 'Send SMS to customer')}
495
- </a>
496
- </SmsClient>
497
- </WrapperMap>
498
- )}
499
- {(addressState?.address?.location || formState?.changes?.location) && (
500
- <WrapperMap
501
- showMap={showMap || !showSpreadForm}
502
- notUseCustomerInfo={notUseCustomerInfo}
503
- addFormRestrictions={addFormRestrictions}
504
- showTabs={showTabs}
505
- >
506
-
507
- {!showMap && (
483
+ {!(addressState?.address?.location || formState?.changes?.location) && (
484
+ <WrapperMap showTabs={showTabs}>
485
+ <SmsClient>
486
+ <p>
487
+ {t('CAN_NOT_FIND_ADDRESS', 'Can\'t find address?')}{' '}
488
+ </p>
489
+ <a
490
+ style={{ textDecoration: 'underline', color: theme?.colors?.primary, cursor: 'pointer' }}
491
+ onClick={() => handleSendSmsToCustomer()}
492
+ >
493
+ {t('SEND_SMS_TO_CUSTOMER', 'Send SMS to customer')}
494
+ </a>
495
+ </SmsClient>
496
+ </WrapperMap>
497
+ )}
498
+ {(addressState?.address?.location || formState?.changes?.location) && (
499
+ <WrapperMap
500
+ showMap={showMap || !showSpreadForm}
501
+ notUseCustomerInfo={notUseCustomerInfo}
502
+ addFormRestrictions={addFormRestrictions}
503
+ showTabs={showTabs}
504
+ hasAddress={showTabs && (addressState?.address?.location || formState?.changes?.location)}
505
+ >
506
+
508
507
  <section>
509
508
  <GeoAlt style={{ fontSize: 25, marginRight: 5 }} />
510
509
  {(addressState?.address?.address || formState?.changes?.address) && (
@@ -523,85 +522,94 @@ const AddressFormUI = (props) => {
523
522
  <span>{addressState?.address?.zipcode || formState?.changes?.zipcode}{', '}</span>
524
523
  )}
525
524
  <br />
526
- <a
527
- style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer' }}
528
- onClick={() => setShowMap(!showMap)}
529
- >
530
- {t('SHOW_MAP', 'Show Map')}
531
- </a>
525
+ {!showMap && (
526
+ <a
527
+ style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer' }}
528
+ onClick={() => setShowMap(!showMap)}
529
+ >
530
+ {t('SHOW_MAP', 'Show Map')}
531
+ </a>
532
+ )}
532
533
  {showSpreadForm && (
533
534
  <a
534
- style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer', marginLeft: 20 }}
535
+ style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer', marginLeft: !showMap ? 20 : 0 }}
535
536
  onClick={() => setEditSpreadAddress(!editSpreadAddress)}
536
537
  >
537
538
  {t('EDIT_ADDRESS', 'Edit Address')}
538
539
  </a>
539
540
  )}
541
+ {showMap && !editSpreadAddress && (
542
+ <a
543
+ style={{ textDecoration: 'underline', color: 'blue', cursor: 'pointer', marginLeft: showSpreadForm ? 20 : 0 }}
544
+ onClick={() => openStreetView()}
545
+ >
546
+ {t('OPEN_STREET_VIEW', 'Open Street view')}
547
+ </a>
548
+ )}
540
549
  </section>
541
- )}
542
550
 
543
- {locationChange && showMap && (
544
- <GoogleMapsMap
545
- useMapWithBusinessZones
546
- deactiveAlerts
547
- avoidFitBounds
548
- apiKey={googleMapsApiKey}
549
- location={locationChange}
550
- locations={businessesList?.businesses}
551
- mapControls={googleMapsControls}
552
- handleChangeAddressMap={handleChangeAddress}
553
- setErrors={setMapErrors}
554
- maxLimitLocation={parseInt(maxLimitLocation, 10)}
555
- businessZones={businessZones}
556
- fallbackIcon={theme.images?.dummies?.businessLogo}
557
- />
558
- )}
559
- {showMap && !editSpreadAddress && (
560
- <>
561
- {showSpreadForm && (
562
- <StreetViewText style={{ top: '0' }} onClick={() => setEditSpreadAddress(!editSpreadAddress)}>
563
- {t('EDIT_ADDRESS', 'Edit Address')}
564
- </StreetViewText>
565
- )}
566
- <StreetViewText onClick={() => openStreetView()}>
567
- {t('OPEN_STREET_VIEW', 'Open Street view')}
568
- </StreetViewText>
569
- </>
570
- )}
571
- </WrapperMap>
572
- )}
573
- </>
574
-
575
- </React.Fragment>
576
- ) : (
577
- <React.Fragment key={field.name}>
578
- {field.name !== 'address_notes' ? (
579
- <Input
580
- className={field.name}
581
- placeholder={t(field.name.toUpperCase(), field.code)}
582
- value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
583
- onChange={(e) => {
584
- formMethods.setValue(field.name, e.target.value)
585
- handleChangeInput({ target: { name: field.name, value: e.target.value } })
586
- }}
587
- autoComplete='new-field'
588
- maxLength={30}
589
- />
590
- ) : (
591
- <TextArea
592
- rows={4}
593
- placeholder={t('ADDRESS_NOTES', 'Address Notes')}
594
- value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
595
- onChange={(e) => {
596
- formMethods.setValue('address_notes', e.target.value)
597
- handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
598
- }}
599
- autoComplete='new-field'
600
- maxLength={250}
601
- />
602
- )}
603
- </React.Fragment>
604
- )
551
+ {locationChange && showMap && (
552
+ <GoogleMapsMap
553
+ useMapWithBusinessZones
554
+ deactiveAlerts
555
+ avoidFitBounds
556
+ apiKey={googleMapsApiKey}
557
+ location={locationChange}
558
+ locations={businessesList?.businesses}
559
+ mapControls={googleMapsControls}
560
+ handleChangeAddressMap={handleChangeAddress}
561
+ setErrors={setMapErrors}
562
+ maxLimitLocation={parseInt(maxLimitLocation, 10)}
563
+ businessZones={businessZones}
564
+ fallbackIcon={theme.images?.dummies?.businessLogo}
565
+ />
566
+ )}
567
+ {/* {showMap && !editSpreadAddress && (
568
+ <>
569
+ {showSpreadForm && (
570
+ <StreetViewText style={{ top: '0' }} onClick={() => setEditSpreadAddress(!editSpreadAddress)}>
571
+ {t('EDIT_ADDRESS', 'Edit Address')}
572
+ </StreetViewText>
573
+ )}
574
+ </>
575
+ )} */}
576
+ </WrapperMap>
577
+ )}
578
+ </>
579
+
580
+ </React.Fragment>
581
+ )
582
+ : (
583
+ <React.Fragment key={field.name}>
584
+ {field.name !== 'address_notes'
585
+ ? (
586
+ <Input
587
+ className={field.name}
588
+ placeholder={t(field.name.toUpperCase(), field.code)}
589
+ value={formState.changes?.[field.name] ?? addressState.address?.[field.name] ?? ''}
590
+ onChange={(e) => {
591
+ formMethods.setValue(field.name, e.target.value)
592
+ handleChangeInput({ target: { name: field.name, value: e.target.value } })
593
+ }}
594
+ autoComplete='new-field'
595
+ maxLength={30}
596
+ />
597
+ )
598
+ : (
599
+ <TextArea
600
+ rows={4}
601
+ placeholder={t('ADDRESS_NOTES', 'Address Notes')}
602
+ value={formState.changes?.address_notes ?? addressState.address.address_notes ?? ''}
603
+ onChange={(e) => {
604
+ formMethods.setValue('address_notes', e.target.value)
605
+ handleChangeInput({ target: { name: 'address_notes', value: e.target.value } })
606
+ }}
607
+ autoComplete='new-field'
608
+ maxLength={250}
609
+ />
610
+ )}
611
+ </React.Fragment>
612
+ )
605
613
  ))}
606
614
 
607
615
  {!formState.loading && formState.error && <p style={{ color: '#c10000' }}>{formState.error}</p>}
@@ -647,17 +655,19 @@ const AddressFormUI = (props) => {
647
655
  disabled={formState.loading}
648
656
  color='primary'
649
657
  >
650
- {!formState.loading ? (
651
- <>
652
- {
653
- isEditing || (!auth && orderState.options?.address?.address)
654
- ? t('SAVE_AND_CONTINUE', 'Save and continue')
655
- : t('ADD_ADDRESS', 'Add address')
656
- }
657
- </>
658
- ) : (
659
- t('LOADING', 'Loading')
660
- )}
658
+ {!formState.loading
659
+ ? (
660
+ <>
661
+ {
662
+ isEditing || (!auth && orderState.options?.address?.address)
663
+ ? t('SAVE_AND_CONTINUE', 'Save and continue')
664
+ : t('ADD_ADDRESS', 'Add address')
665
+ }
666
+ </>
667
+ )
668
+ : (
669
+ t('LOADING', 'Loading')
670
+ )}
661
671
  </Button>
662
672
  )}
663
673
  </FormActions>
package/src/themes/callcenterOriginal/src/components/AddressForm/styles.js CHANGED
@@ -85,9 +85,11 @@ export const FormControl = styled.form`
85
85
 
86
86
  .internal_number {
87
87
  width: 45%;
88
- ${props => props.theme?.rtl ? css`
88
+ ${props => props.theme?.rtl
89
+ ? css`
89
90
  margin-left: 15px;
90
- ` : css`
91
+ `
92
+ : css`
91
93
  margin-right: 15px;
92
94
  `}
93
95
  }
@@ -102,14 +104,10 @@ export const FormControl = styled.form`
102
104
  `
103
105
 
104
106
  export const AddressWrap = styled.div`
105
- width: 50%;
107
+ width: 100%;
106
108
  display: flex;
107
109
  justify-content: space-between;
108
110
  align-items: center;
109
- position: absolute;
110
- top: ${({ showTabs }) => showTabs ? '110px' : '70px'};
111
- right: 0px;
112
- padding-right: 20px;
113
111
  button {
114
112
  height: 41px;
115
113
  right: 25px;
@@ -201,7 +199,7 @@ export const WrapperMap = styled.div`
201
199
  z-index: 100;
202
200
  width: 48%;
203
201
  position: absolute;
204
- top: ${({ showTabs }) => showTabs ? '150px' : '105px'};
202
+ top: ${({ showTabs, hasAddress }) => hasAddress ? '55px' : showTabs ? '105px' : '50px'};
205
203
  right: 0;
206
204
  padding-top: ${props => props.showMap ? '30px' : 0};
207
205
  padding-right: 20px;