ordering-ui-external 14.1.56 → 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.
- package/_modules/themes/callcenterOriginal/src/components/AddressForm/index.js +27 -27
- package/_modules/themes/callcenterOriginal/src/components/AddressForm/styles.js +11 -13
- package/_modules/themes/callcenterOriginal/src/components/PhoneAutocomplete/index.js +2 -2
- package/_modules/themes/callcenterOriginal/src/components/UserFormDetails/index.js +3 -2
- package/package.json +1 -1
- package/src/themes/callcenterOriginal/src/components/AddressForm/index.js +123 -113
- package/src/themes/callcenterOriginal/src/components/AddressForm/styles.js +6 -8
- package/src/themes/callcenterOriginal/src/components/PhoneAutocomplete/index.js +1 -1
- package/src/themes/callcenterOriginal/src/components/UserFormDetails/index.js +2 -1
|
@@ -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('
|
|
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$
|
|
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,
|
|
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$
|
|
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$
|
|
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$
|
|
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
|
-
|
|
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$
|
|
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'))
|
|
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
|
-
})
|
|
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$
|
|
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$
|
|
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({
|
|
@@ -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:
|
|
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 (
|
|
45
|
-
var showTabs =
|
|
46
|
-
|
|
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 (
|
|
50
|
-
var 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 (
|
|
55
|
-
var 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 (
|
|
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 =
|
|
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"])));
|
|
@@ -259,9 +259,9 @@ var PhoneAutocompleteUI = function PhoneAutocompleteUI(props) {
|
|
|
259
259
|
deleteUserCustomer(true);
|
|
260
260
|
};
|
|
261
261
|
var handleOnPaste = function handleOnPaste(e) {
|
|
262
|
-
var _e$clipboardData, _e$clipboardData$getD;
|
|
262
|
+
var _e$clipboardData, _e$clipboardData$getD, _e$clipboardData$getD2;
|
|
263
263
|
var regex = /\D/;
|
|
264
|
-
var textCellphone = e === null || e === void 0 || (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 || (_e$clipboardData$getD = _e$clipboardData.getData) === null || _e$clipboardData$getD === void 0
|
|
264
|
+
var textCellphone = e === null || e === void 0 || (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 || (_e$clipboardData$getD = _e$clipboardData.getData) === null || _e$clipboardData$getD === void 0 || (_e$clipboardData$getD = _e$clipboardData$getD.call(_e$clipboardData, 'text')) === null || _e$clipboardData$getD === void 0 || (_e$clipboardData$getD2 = _e$clipboardData$getD.replace) === null || _e$clipboardData$getD2 === void 0 ? void 0 : _e$clipboardData$getD2.call(_e$clipboardData$getD, /[^0-9]/g, '');
|
|
265
265
|
var value = parseInt(textCellphone);
|
|
266
266
|
if (!regex.test(value) && (textCellphone === null || textCellphone === void 0 ? void 0 : textCellphone.length) >= 7 && !optSelected) {
|
|
267
267
|
getUsers(value);
|
|
@@ -14,7 +14,7 @@ var _reactPhoneNumberInput = require("react-phone-number-input");
|
|
|
14
14
|
var _styles = require("./styles");
|
|
15
15
|
var _Inputs = require("../../styles/Inputs");
|
|
16
16
|
var _Buttons = require("../../styles/Buttons");
|
|
17
|
-
var _InputPhoneNumber = require("
|
|
17
|
+
var _InputPhoneNumber = require("../InputPhoneNumber");
|
|
18
18
|
var _Confirm = require("../Confirm");
|
|
19
19
|
var _utils = require("../../../../../utils");
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -337,7 +337,8 @@ var UserFormDetailsUI = exports.UserFormDetailsUI = function UserFormDetailsUI(p
|
|
|
337
337
|
value: userPhoneNumber,
|
|
338
338
|
setValue: handleChangePhoneNumber,
|
|
339
339
|
handleIsValid: setIsValidPhoneNumber,
|
|
340
|
-
disabled: !isEdit
|
|
340
|
+
disabled: !isEdit,
|
|
341
|
+
useProfileFormStyle: true
|
|
341
342
|
})), !confirmDataLayout && /*#__PURE__*/_react.default.createElement(_styles.Divider, null), (_props$afterMidElemen = props.afterMidElements) === null || _props$afterMidElemen === void 0 ? void 0 : _props$afterMidElemen.map(function (MidElement, i) {
|
|
342
343
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
343
344
|
key: i
|
package/package.json
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('
|
|
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
|
-
|
|
447
|
-
|
|
448
|
-
|
|
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
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
</
|
|
496
|
-
</
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
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
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
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
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
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
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
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>
|
|
@@ -85,9 +85,11 @@ export const FormControl = styled.form`
|
|
|
85
85
|
|
|
86
86
|
.internal_number {
|
|
87
87
|
width: 45%;
|
|
88
|
-
${props => props.theme?.rtl
|
|
88
|
+
${props => props.theme?.rtl
|
|
89
|
+
? css`
|
|
89
90
|
margin-left: 15px;
|
|
90
|
-
`
|
|
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:
|
|
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 }) =>
|
|
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;
|
|
@@ -189,7 +189,7 @@ const PhoneAutocompleteUI = (props) => {
|
|
|
189
189
|
|
|
190
190
|
const handleOnPaste = (e) => {
|
|
191
191
|
const regex = /\D/
|
|
192
|
-
const textCellphone = e?.clipboardData?.getData?.('text')
|
|
192
|
+
const textCellphone = e?.clipboardData?.getData?.('text')?.replace?.(/[^0-9]/g, '')
|
|
193
193
|
const value = parseInt(textCellphone)
|
|
194
194
|
if (!regex.test(value) && textCellphone?.length >= 7 && !optSelected) {
|
|
195
195
|
getUsers(value)
|
|
@@ -16,7 +16,7 @@ import {
|
|
|
16
16
|
|
|
17
17
|
import { Input } from '../../styles/Inputs'
|
|
18
18
|
import { Button } from '../../styles/Buttons'
|
|
19
|
-
import { InputPhoneNumber } from '
|
|
19
|
+
import { InputPhoneNumber } from '../InputPhoneNumber'
|
|
20
20
|
import { Alert } from '../Confirm'
|
|
21
21
|
import { sortInputFields } from '../../../../../utils'
|
|
22
22
|
|
|
@@ -336,6 +336,7 @@ export const UserFormDetailsUI = (props) => {
|
|
|
336
336
|
setValue={handleChangePhoneNumber}
|
|
337
337
|
handleIsValid={setIsValidPhoneNumber}
|
|
338
338
|
disabled={!isEdit}
|
|
339
|
+
useProfileFormStyle
|
|
339
340
|
/>
|
|
340
341
|
</InputPhoneNumberWrapper>
|
|
341
342
|
)}
|