@popsure/dirty-swan 0.28.0-beta.2 → 0.28.0-beta.4

package/dist/index.js

@@ -3366,20 +3366,20 @@ var Input = require$$0__default['default'].forwardRef(function (_a, ref) {
             error && (jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-red-500 w100 " + styles$n.error }, { children: error }), void 0))] }), void 0));
 });
 
-var GERMANY_ALPHA_CODE = 'DE'; // default country can be cumbersome for new country implementation
+var GERMANY_ALPHA_CODE = 'DE';
 var ManualAddressEntry = function (_a) {
-    var address = _a.address, onAddressChange = _a.onAddressChange;
+    var address = _a.address, onAddressChange = _a.onAddressChange, placeholders = _a.placeholders;
     var handleInputChange = function (event) {
         var _a;
         onAddressChange(__assign(__assign(__assign({}, address), (_a = {}, _a[event.target.name] = event.target.value, _a)), ((address === null || address === void 0 ? void 0 : address.country)
             ? { country: address.country }
             : { country: GERMANY_ALPHA_CODE })));
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: "Street", value: (address === null || address === void 0 ? void 0 : address.street) || '', name: "street", onChange: handleInputChange }, void 0),
-                    jsxRuntime.jsx(Input, { className: "wmx2 " + styles$o['house-number-input'], "data-cy": "autocomplete-house-number", placeholder: "House Number", value: (address === null || address === void 0 ? void 0 : address.houseNumber) || '', name: "houseNumber", onChange: handleInputChange }, void 0)] }), void 0),
-            jsxRuntime.jsx(Input, { className: "mt16", "data-cy": "autocomplete-additional-info", placeholder: "Additional information (C/O, appartment\u2026)", value: (address === null || address === void 0 ? void 0 : address.additionalInformation) || '', name: "additionalInformation", onChange: handleInputChange }, void 0),
-            jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 mt16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-postcode", placeholder: "Postcode", value: (address === null || address === void 0 ? void 0 : address.postcode) || '', name: "postcode", onChange: handleInputChange }, void 0),
-                    jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-city", placeholder: "City", value: (address === null || address === void 0 ? void 0 : address.city) || '', name: "city", onChange: handleInputChange }, void 0)] }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.street, value: (address === null || address === void 0 ? void 0 : address.street) || '', name: "street", onChange: handleInputChange }, void 0),
+                    jsxRuntime.jsx(Input, { className: "wmx2 " + styles$o['house-number-input'], "data-cy": "autocomplete-house-number", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.houseNumber, value: (address === null || address === void 0 ? void 0 : address.houseNumber) || '', name: "houseNumber", onChange: handleInputChange }, void 0)] }), void 0),
+            jsxRuntime.jsx(Input, { className: "mt16", "data-cy": "autocomplete-additional-info", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.additionalInformation, value: (address === null || address === void 0 ? void 0 : address.additionalInformation) || '', name: "additionalInformation", onChange: handleInputChange }, void 0),
+            jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 mt16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-postcode", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.postcode, value: (address === null || address === void 0 ? void 0 : address.postcode) || '', name: "postcode", onChange: handleInputChange }, void 0),
+                    jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-city", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.city, value: (address === null || address === void 0 ? void 0 : address.city) || '', name: "city", onChange: handleInputChange }, void 0)] }), void 0)] }, void 0));
 };
 
 function _extends() {
@@ -3672,11 +3672,11 @@ var styles$m = {"suggestionList":"dynamic-module_suggestionList__2YcUi","appear-
 styleInject(css_248z$n);
 
 var DynamicAddressEntry = function (_a) {
-    var isGeometryEnabled = _a.isGeometryEnabled, initialAddress = _a.address, onAddressChange = _a.onAddressChange, onGeometryChange = _a.onGeometryChange;
-    var _b = usePlacesAutocomplete({
+    var isGeometryEnabled = _a.isGeometryEnabled, initialAddress = _a.address, onAddressChange = _a.onAddressChange, onGeometryChange = _a.onGeometryChange, _b = _a.manualAddressEntryText, manualAddressEntryText = _b === void 0 ? "Search for address" : _b;
+    var _c = usePlacesAutocomplete({
         debounce: 400,
-        defaultValue: initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.street,
-    }), ready = _b.ready, value = _b.value, _c = _b.suggestions, status = _c.status, data = _c.data, setValue = _b.setValue, clearSuggestions = _b.clearSuggestions;
+        defaultValue: (initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.street) ? (initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.street) + " " + (initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.houseNumber) : '',
+    }), ready = _c.ready, value = _c.value, _d = _c.suggestions, status = _d.status, data = _d.data, setValue = _c.setValue, clearSuggestions = _c.clearSuggestions;
     var handleInput = function (e) {
         setValue(e.target.value);
     };
@@ -3713,7 +3713,7 @@ var DynamicAddressEntry = function (_a) {
             return (jsxRuntime.jsxs("li", __assign({ onClick: handleSelect(suggestion), className: styles$m.suggestionItem }, { children: [jsxRuntime.jsx("span", __assign({ className: "fw-bold pr8" }, { children: main_text }), void 0), ' ', jsxRuntime.jsx("small", { children: secondary_text }, void 0)] }), place_id));
         });
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsxRuntime.jsx(Input, { className: "w100", id: "autocomplete", "data-cy": "autocomplete", type: "text", placeholder: "Search for address", disabled: !ready, onChange: handleInput, value: value }, void 0),
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsxRuntime.jsx(Input, { className: "w100", id: "autocomplete", "data-cy": "autocomplete", type: "text", placeholder: manualAddressEntryText, disabled: !ready, onChange: handleInput, value: value }, void 0),
                 status === 'OK' && (jsxRuntime.jsx("ul", __assign({ className: styles$m.suggestionList }, { children: renderSuggestions() }), void 0))] }), void 0) }, void 0));
 };
 
@@ -4073,31 +4073,27 @@ function useJsApiLoader(_a) {
                 setLoadError(error);
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return { isLoaded: isLoaded, loadError: loadError };
 }
 
 var AutoCompleteAddress = function (_a) {
-    var _b = _a.mapId, mapId = _b === void 0 ? 'map' : _b, apiKey = _a.apiKey, initialAddress = _a.initialAddress, _c = _a.staticVersion, staticVersion = _c === void 0 ? !!process.env.STORYBOOK_STATIC : _c, onAddressChange = _a.onAddressChange, manualAddressEntryTexts = _a.manualAddressEntryTexts;
+    var _b = _a.mapId, mapId = _b === void 0 ? 'map' : _b, apiKey = _a.apiKey, address = _a.address, _c = _a.staticVersion, staticVersion = _c === void 0 ? !!process.env.STORYBOOK_STATIC : _c, onAddressChange = _a.onAddressChange, manualAddressEntryTexts = _a.manualAddressEntryTexts, placeholders = _a.placeholders;
     var _d = require$$0.useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = require$$0.useState(initialAddress), address = _e[0], setAddress = _e[1];
-    var _f = require$$0.useState(undefined), geometry = _f[0], setGeometry = _f[1];
-    var _g = require$$0.useState(!!initialAddress), manualAddressEntry = _g[0], setManualAddressEntry = _g[1];
+    var _e = require$$0.useState(undefined), geometry = _e[0], setGeometry = _e[1];
+    var _f = require$$0.useState(!!address), manualAddressEntry = _f[0], setManualAddressEntry = _f[1];
     // you can read more about it here:
     // https://github.com/JustFly1984/react-google-maps-api/blob/develop/packages/react-google-maps-api/src/useJsApiLoader.md
-    var _h = useJsApiLoader({
+    var _g = useJsApiLoader({
         googleMapsApiKey: apiKey,
-    }), hasLoadedGoogleAPI = _h.isLoaded, loadGoogleAPIError = _h.loadError;
+    }), hasLoadedGoogleAPI = _g.isLoaded, loadGoogleAPIError = _g.loadError;
     var isGeometryEnabled = !staticVersion;
     var handleModeSwitch = function (event) {
         setManualAddressEntry(event.currentTarget.dataset.value === 'true');
     };
-    var handleAddressChange = function (address) {
-        setAddress(address);
-        onAddressChange(address);
-    };
     var handleDynamicAddress = function (address) {
-        handleAddressChange(address);
+        onAddressChange(address);
         setManualAddressEntry(true);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4115,7 +4111,7 @@ var AutoCompleteAddress = function (_a) {
         });
     }, 1000), [lodash_debounce]);
     var handleManualAddress = function (address) {
-        handleAddressChange(address);
+        onAddressChange(address);
         if (isGeometryEnabled) {
             setIsLoading(true);
             updateMapGeometry(address);
@@ -4124,7 +4120,7 @@ var AutoCompleteAddress = function (_a) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isGeometryEnabled && address && (jsxRuntime.jsx(GoogleMapsWrapper, { mapId: mapId, hasLoadedGoogleAPI: hasLoadedGoogleAPI, geometry: geometry, isLoading: isLoading }, void 0) // this can be composable <AutocompleteAddress>{({geometry} ) => <GoogleMapsWrapper geometry={geometry}>}
             ),
             loadGoogleAPIError && jsxRuntime.jsx("p", { children: "Google API is not responding." }, void 0),
-            hasLoadedGoogleAPI && (jsxRuntime.jsx("div", __assign({ className: "wmx8" }, { children: manualAddressEntry || loadGoogleAPIError ? (jsxRuntime.jsx(ManualAddressEntry, { address: address, onAddressChange: handleManualAddress }, void 0)) : (jsxRuntime.jsx(DynamicAddressEntry, { address: address, onAddressChange: handleDynamicAddress, isGeometryEnabled: isGeometryEnabled, onGeometryChange: setGeometry }, void 0)) }), void 0)),
+            hasLoadedGoogleAPI && (jsxRuntime.jsx("div", __assign({ className: "wmx8" }, { children: manualAddressEntry || loadGoogleAPIError ? (jsxRuntime.jsx(ManualAddressEntry, { address: address, onAddressChange: handleManualAddress, placeholders: placeholders }, void 0)) : (jsxRuntime.jsx(DynamicAddressEntry, { address: address, onAddressChange: handleDynamicAddress, isGeometryEnabled: isGeometryEnabled, onGeometryChange: setGeometry, manualAddressEntryText: placeholders === null || placeholders === void 0 ? void 0 : placeholders.manualAddressEntry }, void 0)) }), void 0)),
             manualAddressEntry ? (jsxRuntime.jsxs("div", __assign({ className: "p-p mt8" }, { children: [(manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.preText) || 'Or ',
                     jsxRuntime.jsx("button", __assign({ className: "p-a bg-transparent fw-bold c-pointer", onClick: handleModeSwitch, "data-value": 'false', type: "button" }, { children: (manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.cta) || 'Enter address dynamically' }), void 0)] }), void 0)) : (jsxRuntime.jsxs("div", __assign({ className: "p-p mt8" }, { children: [(manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.preText) || 'Or ',
                     jsxRuntime.jsx("button", __assign({ className: "p-a bg-transparent fw-bold c-pointer", onClick: handleModeSwitch, "data-value": 'true', type: "button" }, { children: (manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.cta) || 'Enter address manually' }), void 0)] }), void 0))] }, void 0));