@oneblink/apps-react 2.11.0-beta.5 → 2.11.0-beta.6

package/dist/form-elements/FormElementLocation.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import useBooleanState from '../hooks/useBooleanState';
 import useIsOffline from '../hooks/useIsOffline';
-import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
+import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api';
 import geolocation from '@blinkmobile/geolocation';
 import queryString from 'query-string';
 import OnLoading from '../components/renderer/OnLoading';
@@ -166,6 +166,9 @@ const LocationImage = React.memo(function LocationImage({ location, }) {
 });
 const LocationPicker = React.memo(function SummaryResult({ location, onChange, }) {
     const googleMapsApiKey = useGoogleMapsApiKeyKey();
+    const { isLoaded } = useJsApiLoader({
+        googleMapsApiKey: googleMapsApiKey !== null && googleMapsApiKey !== void 0 ? googleMapsApiKey : '',
+    });
     const [map, setMap] = React.useState(null);
     const center = React.useMemo(() => {
         return {
@@ -183,22 +186,20 @@ const LocationPicker = React.memo(function SummaryResult({ location, onChange, }
             zoom: map.getZoom(),
         });
     }, [location.latitude, location.longitude, map, onChange]);
-    return (React.createElement("figure", { className: "ob-figure" },
-        React.createElement(LoadScript, { googleMapsApiKey: googleMapsApiKey || '' },
-            React.createElement(GoogleMap, { onLoad: (map) => setMap(map), onUnmount: () => setMap(null), mapContainerStyle: {
-                    height: 300,
-                }, center: center, zoom: location.zoom, onZoomChanged: onZoomChanged },
-                React.createElement(Marker, { animation: google.maps.Animation.DROP, position: center, draggable: true, onDragEnd: (e) => {
-                        if (!e.latLng) {
-                            return;
-                        }
-                        const { lat, lng } = e.latLng.toJSON();
-                        onChange({
-                            latitude: lat,
-                            longitude: lng,
-                            zoom: location.zoom,
-                        });
-                    } })))));
+    return (React.createElement("figure", { className: "ob-figure" }, isLoaded && (React.createElement(GoogleMap, { onLoad: (map) => setMap(map), onUnmount: () => setMap(null), mapContainerStyle: {
+            height: 300,
+        }, center: center, zoom: location.zoom, onZoomChanged: onZoomChanged },
+        React.createElement(Marker, { animation: google.maps.Animation.DROP, position: center, draggable: true, onDragEnd: (e) => {
+                if (!e.latLng) {
+                    return;
+                }
+                const { lat, lng } = e.latLng.toJSON();
+                onChange({
+                    latitude: lat,
+                    longitude: lng,
+                    zoom: location.zoom,
+                });
+            } })))));
 });
 export default React.memo(FormElementLocation);
 //# sourceMappingURL=FormElementLocation.js.map

package/dist/form-elements/FormElementLocation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACtE,OAAO,WAAW,MAAM,0BAA0B,CAAA;AAClD,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,SAAS,MAAM,kCAAkC,CAAA;AACxD,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,sBAAsB,MAAM,8BAA8B,CAAA;AAEjE,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAkBvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAA4B,EAAE,EAAE;IAChE,IAAI,QAAQ,EAAE;QACZ,OAAO,GAAG,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAA;KACpD;AACH,CAAC,CAAA;AAED,SAAS,kBAAkB,CAAC,KAAc;IACxC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QACvC,OAAM;KACP;IAED,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAgC,CAAA;IACtE,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;QACjE,OAAM;KACP;IAED,OAAO;QACL,QAAQ;QACR,SAAS;QACT,IAAI,EAAE,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc;KACvD,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,CAAA;AACrB,MAAM,cAAc,GAAG,EAAE,CAAA;AACzB,MAAM,MAAM,GAAG,gDAAgD,CAAA;AAC/D,SAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,GAClE,eAAe,CAAC,KAAK,CAAC,CAAA;IAExB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,SAAS,CAAC,CAAA;IAC7E,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrC,kBAAkB,EAAE,CAAA;QACpB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAC5B,WAAW,CAAC,SAAS,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE3C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,kBAAkB,EAAE,CAAA;QACpB,WAAW,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAA;IAE/B,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC5C,kBAAkB,EAAE,CAAA;QAEpB,IAAI,QAAQ,EAAE;YACZ,OAAM;SACP;QAED,IAAI,eAAe,GAAG,IAAI,CAAA;QAC1B,IAAI;YACF,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,kBAAkB,EAAE,CAAA;YACrD,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;SAChC;QAAC,OAAO,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CACX,2DAA2D,EAC3D,GAAG,CACJ,CAAA;YACD,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAA;SAC7B;gBAAS;YACR,WAAW,CAAC,kBAAkB,CAAC,eAAe,IAAI,aAAa,EAAE,CAAC,CAAC,CAAA;SACpE;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAElC,MAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,oBAAoB,CAAA;IAE3D,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,EAAE,CAAA;QACZ,kBAAkB,EAAE,CAAA;QACpB,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAEjE,2BAA2B;IAC3B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,QAAQ,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAA;QAC1C,IAAI,QAAQ,EAAE;YACZ,WAAW,CAAC,QAAQ,CAAC,CAAA;SACtB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,SAAS;gBACtB,oBAAC,eAAe,IACd,MAAM,EAAE,oBAAoB,EAC5B,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,GACrB;gBAEF,6BAAK,SAAS,EAAC,yCAAyC,IACrD,oBAAoB,CAAC,CAAC,CAAC,CACtB;oBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2HAA2H,EACrI,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAGnB;oBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gIAAgI,EAC1I,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,CAAC,QAAQ,cAGhC,CACR,CACJ,CAAC,CAAC,CAAC,CACF;oBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wIAAwI,EAClJ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAGnB;oBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,gHAAgH,EAC1H,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,OAAO,CAAC,QAAQ,aAGnB,CACR,CACJ,CACG,CACF;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,eAAe,CAAC,EAC1D,SAAS,EACT,MAAM,EACN,QAAQ,EACR,QAAQ,GAMT;IACC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,IAAI,SAAS,EAAE;QACb,OAAO,CACL,gCAAQ,SAAS,EAAC,WAAW;YAC3B,6BAAK,SAAS,EAAC,gBAAgB;gBAC7B,oBAAC,SAAS,IAAC,KAAK,SAAa,CACzB,CACC,CACV,CAAA;KACF;IAED,IAAI,SAAS,EAAE;QACb,OAAO,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,CAAA;KACjE;IAED,IAAI,MAAM,EAAE;QACV,IAAI,CAAC,QAAQ,EAAE;YACb,+EAA+E;YAC/E,6EAA6E;YAC7E,eAAe;YACf,0CAA0C;YAC1C,MAAM,IAAI,KAAK,CACb,0DAA0D,CAC3D,CAAA;SACF;QAED,OAAO,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;KAClE;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAA;KAC7C;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAC,CAAA;AAEF,SAAS,8BAA8B,CAAC,EACtC,QAAQ,GAGT;IACC,OAAO,CACL,gCAAQ,SAAS,EAAC,WAAW;QAC3B,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,4BAAI,SAAS,EAAC,YAAY,gCAA+B;YACxD,QAAQ,CACL,CACC,CACV,CAAA;AACH,CAAC;AAED,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,iBAAiB,CAAC,EAC9D,QAAQ,EACR,MAAM,GAIP;IACC,IAAI,MAAM,EAAE;QACV,IAAI,QAAQ,EAAE;YACZ,oFAAoF;YACpF,OAAO,CACL,oBAAC,8BAA8B;gBAC7B;;oBACY,yCAAc;kFAEtB,CAC2B,CAClC,CAAA;SACF;QAED,wFAAwF;QACxF,OAAO,CACL,oBAAC,8BAA8B;YAC7B;;gBACqD,wCAAa;gBAAC,GAAG;6CAElE,CAC2B,CAClC,CAAA;KACF;IAED,kDAAkD;IAClD,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,oBAAC,8BAA8B;YAC7B,4BAAI,SAAS,EAAC,kCAAkC,eAAc;YAC9D;gBACE,+BAAI,QAAQ,CAAC,QAAQ,CAAK,CACxB;YACJ,4BAAI,SAAS,EAAC,mCAAmC,gBAAe;YAChE;gBACE,+BAAI,QAAQ,CAAC,SAAS,CAAK,CACzB,CAC2B,CAClC,CAAA;KACF;IAED,6EAA6E;IAC7E,OAAO,IAAI,CAAA;AACb,CAAC,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,EACtD,QAAQ,GAGT;IACC,MAAM,gBAAgB,GAAG,sBAAsB,EAAE,CAAA;IAEjD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACnC,MAAM,MAAM,GAAG,GAAG,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,SAAS,EAAE,CAAA;QAC3D,MAAM,OAAO,GAAG;YACd,GAAG,EAAE,gBAAgB;YACrB,IAAI,EAAE,GAAG,SAAS,IAAI,SAAS,EAAE;YACjC,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,MAAM;YACN,OAAO,EAAE,aAAa,MAAM,EAAE;SAC/B,CAAA;QACD,OAAO,GAAG,MAAM,IAAI,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAA;IACtD,CAAC,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,gCAAQ,SAAS,EAAC,WAAW;QAC3B,6BACE,SAAS,EAAC,kBAAkB,EAC5B,GAAG,EAAE,sBAAsB,QAAQ,CAAC,QAAQ,cAAc,QAAQ,CAAC,SAAS,YAAY,EACxF,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,SAAS,GAChB,CACK,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,aAAa,CAAC,EACvD,QAAQ,EACR,QAAQ,GAIT;IACC,MAAM,gBAAgB,GAAG,sBAAsB,EAAE,CAAA;IAEjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,IAAI,CAAC,CAAA;IAElE,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAChC,OAAO;YACL,GAAG,EAAE,QAAQ,CAAC,QAAQ;YACtB,GAAG,EAAE,QAAQ,CAAC,SAAS;SACxB,CAAA;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;IAE3C,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,GAAG,EAAE;YACR,OAAM;SACP;QAED,QAAQ,CAAC;YACP,QAAQ,EAAE,QAAQ,CAAC,QAAQ;YAC3B,SAAS,EAAE,QAAQ,CAAC,SAAS;YAC7B,IAAI,EAAE,GAAG,CAAC,OAAO,EAAE;SACpB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE1D,OAAO,CACL,gCAAQ,SAAS,EAAC,WAAW;QAC3B,oBAAC,UAAU,IAAC,gBAAgB,EAAE,gBAAgB,IAAI,EAAE;YAClD,oBAAC,SAAS,IACR,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,EAC5B,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAC7B,iBAAiB,EAAE;oBACjB,MAAM,EAAE,GAAG;iBACZ,EACD,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,aAAa,EAAE,aAAa;gBAE5B,oBAAC,MAAM,IACL,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EACrC,QAAQ,EAAE,MAAM,EAChB,SAAS,QACT,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE;4BACb,OAAM;yBACP;wBACD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,CAAA;wBACtC,QAAQ,CAAC;4BACP,QAAQ,EAAE,GAAG;4BACb,SAAS,EAAE,GAAG;4BACd,IAAI,EAAE,QAAQ,CAAC,IAAI;yBACpB,CAAC,CAAA;oBACJ,CAAC,GACO,CACA,CACD,CACN,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'\nimport geolocation from '@blinkmobile/geolocation'\nimport queryString from 'query-string'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.LocationElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<Coords>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Coords = {\n  latitude: number\n  longitude: number\n  zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n  if (location) {\n    return `${location.latitude},${location.longitude}`\n  }\n}\n\nfunction parseLocationValue(value: unknown): Coords | undefined {\n  if (!value || typeof value !== 'object') {\n    return\n  }\n\n  const { latitude, longitude, zoom } = value as Record<string, unknown>\n  if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n    return\n  }\n\n  return {\n    latitude,\n    longitude,\n    zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n  }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\nfunction FormElementLocation({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n    useBooleanState(false)\n\n  const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n  const onClear = React.useCallback(() => {\n    hideLocationPicker()\n    onChange(element, undefined)\n    setLocation(undefined)\n  }, [element, hideLocationPicker, onChange])\n\n  const onCancel = React.useCallback(() => {\n    hideLocationPicker()\n    setLocation(parseLocationValue(value))\n  }, [hideLocationPicker, value])\n\n  const onLocate = React.useCallback(async () => {\n    showLocationPicker()\n\n    if (location) {\n      return\n    }\n\n    let currentLocation = null\n    try {\n      const result = await geolocation.getCurrentPosition()\n      currentLocation = result.coords\n    } catch (err) {\n      console.error(\n        'Error while attempting to find the users current location',\n        err,\n      )\n      Sentry.captureException(err)\n    } finally {\n      setLocation(parseLocationValue(currentLocation || defaultCoords()))\n    }\n  }, [location, showLocationPicker])\n\n  const isLoadingLocation = !location && isLocationPickerOpen\n\n  const onConfirm = React.useCallback(() => {\n    setIsDirty()\n    hideLocationPicker()\n    onChange(element, location)\n  }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n  // SET DEFAULT/PREFILL DATA\n  React.useEffect(() => {\n    const newValue = parseLocationValue(value)\n    if (newValue) {\n      setLocation(newValue)\n    }\n  }, [value])\n\n  return (\n    <div className=\"cypress-location-element\">\n      <FormElementLabelContainer\n        className=\"ob-location\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <LocationDisplay\n            isOpen={isLocationPickerOpen}\n            isLoading={isLoadingLocation}\n            location={location}\n            onChange={setLocation}\n          />\n\n          <div className=\"buttons ob-buttons ob-location__buttons\">\n            {isLocationPickerOpen ? (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n                  onClick={onCancel}\n                  disabled={element.readOnly}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button\"\n                  onClick={onConfirm}\n                  disabled={element.readOnly || !location}\n                >\n                  Confirm\n                </button>\n              </>\n            ) : (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n                  onClick={onClear}\n                  disabled={element.readOnly}\n                >\n                  Clear\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n                  onClick={onLocate}\n                  disabled={element.readOnly}\n                >\n                  Locate\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n  isLoading,\n  isOpen,\n  location,\n  onChange,\n}: {\n  isLoading: boolean\n  isOpen: boolean\n  location: Coords | undefined\n  onChange: (location: Coords) => void\n}) {\n  const isOffline = useIsOffline()\n\n  if (isLoading) {\n    return (\n      <figure className=\"ob-figure\">\n        <div className=\"figure-content\">\n          <OnLoading small></OnLoading>\n        </div>\n      </figure>\n    )\n  }\n\n  if (isOffline) {\n    return <LocationIsOffline location={location} isOpen={isOpen} />\n  }\n\n  if (isOpen) {\n    if (!location) {\n      // There is no location to display while user is attempting to pick a location.\n      // This should never happen, if loading has finished a default should be set.\n      // Fail fast!!!\n      // https://en.wikipedia.org/wiki/Fail-fast\n      throw new Error(\n        'Default location was not set for \"location\" form element',\n      )\n    }\n\n    return <LocationPicker location={location} onChange={onChange} />\n  }\n\n  if (location) {\n    return <LocationImage location={location} />\n  }\n\n  return null\n})\n\nfunction LocationIsOfflineFigureContent({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <figure className=\"ob-figure\">\n      <div className=\"figure-content has-text-centered\">\n        <h4 className=\"title is-4\">You are currently offline</h4>\n        {children}\n      </div>\n    </figure>\n  )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n  location,\n  isOpen,\n}: {\n  location: Coords | undefined\n  isOpen: boolean\n}) {\n  if (isOpen) {\n    if (location) {\n      // If user is offline and attempting to pick a location and there is one set already\n      return (\n        <LocationIsOfflineFigureContent>\n          <p>\n            Click the <b>Confirm</b> button below to set the location to your\n            current position.\n          </p>\n        </LocationIsOfflineFigureContent>\n      )\n    }\n\n    // If user is offline and attempting to pick a location and there is one nothing set yet\n    return (\n      <LocationIsOfflineFigureContent>\n        <p>\n          We could not find your current location. Click the <b>Cancel</b>{' '}\n          button below to try again.\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // If user is offline and has confirmed a location\n  if (location) {\n    return (\n      <LocationIsOfflineFigureContent>\n        <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n        <p>\n          <b>{location.latitude}</b>\n        </p>\n        <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n        <p>\n          <b>{location.longitude}</b>\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // User is offline with no location set and not attempting to pick a location\n  return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n  location,\n}: {\n  location: Coords\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const staticUrl = React.useMemo(() => {\n    const center = `${location.latitude},${location.longitude}`\n    const queries = {\n      key: googleMapsApiKey,\n      size: `${mapHeight}x${mapHeight}`,\n      zoom: location.zoom,\n      center,\n      markers: `color:red|${center}`,\n    }\n    return `${apiUrl}?${queryString.stringify(queries)}`\n  }, [googleMapsApiKey, location])\n\n  return (\n    <figure className=\"ob-figure\">\n      <img\n        className=\"ob-location__map\"\n        alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n        src={staticUrl}\n        height={mapHeight}\n        width={mapHeight}\n      />\n    </figure>\n  )\n})\n\nconst LocationPicker = React.memo(function SummaryResult({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const [map, setMap] = React.useState<google.maps.Map | null>(null)\n\n  const center = React.useMemo(() => {\n    return {\n      lat: location.latitude,\n      lng: location.longitude,\n    }\n  }, [location.latitude, location.longitude])\n\n  const onZoomChanged = React.useCallback(() => {\n    if (!map) {\n      return\n    }\n\n    onChange({\n      latitude: location.latitude,\n      longitude: location.longitude,\n      zoom: map.getZoom(),\n    })\n  }, [location.latitude, location.longitude, map, onChange])\n\n  return (\n    <figure className=\"ob-figure\">\n      <LoadScript googleMapsApiKey={googleMapsApiKey || ''}>\n        <GoogleMap\n          onLoad={(map) => setMap(map)}\n          onUnmount={() => setMap(null)}\n          mapContainerStyle={{\n            height: 300,\n          }}\n          center={center}\n          zoom={location.zoom}\n          onZoomChanged={onZoomChanged}\n        >\n          <Marker\n            animation={google.maps.Animation.DROP}\n            position={center}\n            draggable\n            onDragEnd={(e) => {\n              if (!e.latLng) {\n                return\n              }\n              const { lat, lng } = e.latLng.toJSON()\n              onChange({\n                latitude: lat,\n                longitude: lng,\n                zoom: location.zoom,\n              })\n            }}\n          ></Marker>\n        </GoogleMap>\n      </LoadScript>\n    </figure>\n  )\n})\n\nexport default React.memo(FormElementLocation)\n"]}
+{"version":3,"file":"FormElementLocation.js","sourceRoot":"","sources":["../../src/form-elements/FormElementLocation.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport useBooleanState from '../hooks/useBooleanState'\nimport useIsOffline from '../hooks/useIsOffline'\nimport { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'\nimport geolocation from '@blinkmobile/geolocation'\nimport queryString from 'query-string'\nimport OnLoading from '../components/renderer/OnLoading'\nimport defaultCoords from '../services/defaultCoordinates'\nimport useGoogleMapsApiKeyKey from '../hooks/useGoogleMapsApiKey'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.LocationElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<Coords>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\ntype Coords = {\n  latitude: number\n  longitude: number\n  zoom?: number\n}\n\nexport const stringifyLocation = (location: Coords | undefined) => {\n  if (location) {\n    return `${location.latitude},${location.longitude}`\n  }\n}\n\nfunction parseLocationValue(value: unknown): Coords | undefined {\n  if (!value || typeof value !== 'object') {\n    return\n  }\n\n  const { latitude, longitude, zoom } = value as Record<string, unknown>\n  if (typeof latitude !== 'number' || typeof longitude !== 'number') {\n    return\n  }\n\n  return {\n    latitude,\n    longitude,\n    zoom: typeof zoom === 'number' ? zoom : initialMapZoom,\n  }\n}\n\nconst mapHeight = 300\nconst initialMapZoom = 15\nconst apiUrl = 'https://maps.googleapis.com/maps/api/staticmap'\nfunction FormElementLocation({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [isLocationPickerOpen, showLocationPicker, hideLocationPicker] =\n    useBooleanState(false)\n\n  const [location, setLocation] = React.useState<Coords | undefined>(undefined)\n  const onClear = React.useCallback(() => {\n    hideLocationPicker()\n    onChange(element, undefined)\n    setLocation(undefined)\n  }, [element, hideLocationPicker, onChange])\n\n  const onCancel = React.useCallback(() => {\n    hideLocationPicker()\n    setLocation(parseLocationValue(value))\n  }, [hideLocationPicker, value])\n\n  const onLocate = React.useCallback(async () => {\n    showLocationPicker()\n\n    if (location) {\n      return\n    }\n\n    let currentLocation = null\n    try {\n      const result = await geolocation.getCurrentPosition()\n      currentLocation = result.coords\n    } catch (err) {\n      console.error(\n        'Error while attempting to find the users current location',\n        err,\n      )\n      Sentry.captureException(err)\n    } finally {\n      setLocation(parseLocationValue(currentLocation || defaultCoords()))\n    }\n  }, [location, showLocationPicker])\n\n  const isLoadingLocation = !location && isLocationPickerOpen\n\n  const onConfirm = React.useCallback(() => {\n    setIsDirty()\n    hideLocationPicker()\n    onChange(element, location)\n  }, [element, hideLocationPicker, location, onChange, setIsDirty])\n\n  // SET DEFAULT/PREFILL DATA\n  React.useEffect(() => {\n    const newValue = parseLocationValue(value)\n    if (newValue) {\n      setLocation(newValue)\n    }\n  }, [value])\n\n  return (\n    <div className=\"cypress-location-element\">\n      <FormElementLabelContainer\n        className=\"ob-location\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"control\">\n          <LocationDisplay\n            isOpen={isLocationPickerOpen}\n            isLoading={isLoadingLocation}\n            location={location}\n            onChange={setLocation}\n          />\n\n          <div className=\"buttons ob-buttons ob-location__buttons\">\n            {isLocationPickerOpen ? (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__cancel ob-location__button ob-location__button-cancel cypress-cancel-location-button\"\n                  onClick={onCancel}\n                  disabled={element.readOnly}\n                >\n                  Cancel\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__confirm ob-location__button ob-location__button-confirm cypress-confirm-location-button\"\n                  onClick={onConfirm}\n                  disabled={element.readOnly || !location}\n                >\n                  Confirm\n                </button>\n              </>\n            ) : (\n              <>\n                <button\n                  type=\"button\"\n                  className=\"is-light button ob-button ob-button__clear ob-button-clear ob-location__button ob-location__button-clear cypress-clear-location-button\"\n                  onClick={onClear}\n                  disabled={element.readOnly}\n                >\n                  Clear\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button\"\n                  onClick={onLocate}\n                  disabled={element.readOnly}\n                >\n                  Locate\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nconst LocationDisplay = React.memo(function LocationDisplay({\n  isLoading,\n  isOpen,\n  location,\n  onChange,\n}: {\n  isLoading: boolean\n  isOpen: boolean\n  location: Coords | undefined\n  onChange: (location: Coords) => void\n}) {\n  const isOffline = useIsOffline()\n\n  if (isLoading) {\n    return (\n      <figure className=\"ob-figure\">\n        <div className=\"figure-content\">\n          <OnLoading small></OnLoading>\n        </div>\n      </figure>\n    )\n  }\n\n  if (isOffline) {\n    return <LocationIsOffline location={location} isOpen={isOpen} />\n  }\n\n  if (isOpen) {\n    if (!location) {\n      // There is no location to display while user is attempting to pick a location.\n      // This should never happen, if loading has finished a default should be set.\n      // Fail fast!!!\n      // https://en.wikipedia.org/wiki/Fail-fast\n      throw new Error(\n        'Default location was not set for \"location\" form element',\n      )\n    }\n\n    return <LocationPicker location={location} onChange={onChange} />\n  }\n\n  if (location) {\n    return <LocationImage location={location} />\n  }\n\n  return null\n})\n\nfunction LocationIsOfflineFigureContent({\n  children,\n}: {\n  children: React.ReactNode\n}) {\n  return (\n    <figure className=\"ob-figure\">\n      <div className=\"figure-content has-text-centered\">\n        <h4 className=\"title is-4\">You are currently offline</h4>\n        {children}\n      </div>\n    </figure>\n  )\n}\n\nconst LocationIsOffline = React.memo(function LocationIsOffline({\n  location,\n  isOpen,\n}: {\n  location: Coords | undefined\n  isOpen: boolean\n}) {\n  if (isOpen) {\n    if (location) {\n      // If user is offline and attempting to pick a location and there is one set already\n      return (\n        <LocationIsOfflineFigureContent>\n          <p>\n            Click the <b>Confirm</b> button below to set the location to your\n            current position.\n          </p>\n        </LocationIsOfflineFigureContent>\n      )\n    }\n\n    // If user is offline and attempting to pick a location and there is one nothing set yet\n    return (\n      <LocationIsOfflineFigureContent>\n        <p>\n          We could not find your current location. Click the <b>Cancel</b>{' '}\n          button below to try again.\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // If user is offline and has confirmed a location\n  if (location) {\n    return (\n      <LocationIsOfflineFigureContent>\n        <h3 className=\"title is-3 ob-location__latitude\">Latitude</h3>\n        <p>\n          <b>{location.latitude}</b>\n        </p>\n        <h3 className=\"title is-3 ob-location__longitude\">Longitude</h3>\n        <p>\n          <b>{location.longitude}</b>\n        </p>\n      </LocationIsOfflineFigureContent>\n    )\n  }\n\n  // User is offline with no location set and not attempting to pick a location\n  return null\n})\n\nconst LocationImage = React.memo(function LocationImage({\n  location,\n}: {\n  location: Coords\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const staticUrl = React.useMemo(() => {\n    const center = `${location.latitude},${location.longitude}`\n    const queries = {\n      key: googleMapsApiKey,\n      size: `${mapHeight}x${mapHeight}`,\n      zoom: location.zoom,\n      center,\n      markers: `color:red|${center}`,\n    }\n    return `${apiUrl}?${queryString.stringify(queries)}`\n  }, [googleMapsApiKey, location])\n\n  return (\n    <figure className=\"ob-figure\">\n      <img\n        className=\"ob-location__map\"\n        alt={`map with center at ${location.latitude} latitude, ${location.longitude} longitude`}\n        src={staticUrl}\n        height={mapHeight}\n        width={mapHeight}\n      />\n    </figure>\n  )\n})\n\nconst LocationPicker = React.memo(function SummaryResult({\n  location,\n  onChange,\n}: {\n  location: Coords\n  onChange: (newLocation: Coords) => void\n}) {\n  const googleMapsApiKey = useGoogleMapsApiKeyKey()\n\n  const { isLoaded } = useJsApiLoader({\n    googleMapsApiKey: googleMapsApiKey ?? '',\n  })\n  const [map, setMap] = React.useState<google.maps.Map | null>(null)\n\n  const center = React.useMemo(() => {\n    return {\n      lat: location.latitude,\n      lng: location.longitude,\n    }\n  }, [location.latitude, location.longitude])\n\n  const onZoomChanged = React.useCallback(() => {\n    if (!map) {\n      return\n    }\n\n    onChange({\n      latitude: location.latitude,\n      longitude: location.longitude,\n      zoom: map.getZoom(),\n    })\n  }, [location.latitude, location.longitude, map, onChange])\n\n  return (\n    <figure className=\"ob-figure\">\n      {isLoaded && (\n        <GoogleMap\n          onLoad={(map) => setMap(map)}\n          onUnmount={() => setMap(null)}\n          mapContainerStyle={{\n            height: 300,\n          }}\n          center={center}\n          zoom={location.zoom}\n          onZoomChanged={onZoomChanged}\n        >\n          <Marker\n            animation={google.maps.Animation.DROP}\n            position={center}\n            draggable\n            onDragEnd={(e) => {\n              if (!e.latLng) {\n                return\n              }\n              const { lat, lng } = e.latLng.toJSON()\n              onChange({\n                latitude: lat,\n                longitude: lng,\n                zoom: location.zoom,\n              })\n            }}\n          ></Marker>\n        </GoogleMap>\n      )}\n    </figure>\n  )\n})\n\nexport default React.memo(FormElementLocation)\n"]}

package/dist/hooks/useConditionalLogic.d.ts

@@ -1,6 +1,7 @@
 import { FormTypes } from '@oneblink/types';
-import { FormElementsConditionallyShown, FormSubmissionModel } from '../types/form';
+import { conditionalLogicService } from '@oneblink/sdk-core';
+import { FormSubmissionModel } from '../types/form';
 export default function useConditionalLogic(definition: FormTypes.Form, submission: FormSubmissionModel): {
     conditionalLogicError: Error | undefined;
-    formElementsConditionallyShown: FormElementsConditionallyShown;
+    formElementsConditionallyShown: conditionalLogicService.FormElementsConditionallyShown;
 };

package/dist/hooks/useFormElementDateFromTo.d.ts

@@ -1,7 +1,7 @@
 import { FormTypes } from '@oneblink/types';
 export default function useFormElementDateFromTo(element: FormTypes.FormElementWithDate): {
-    fromDate: string | {} | undefined;
+    fromDate: string | undefined;
     fromDaysOffset: number | undefined;
-    toDate: string | {} | undefined;
+    toDate: string | undefined;
     toDaysOffset: number | undefined;
 };

package/dist/hooks/useFormElementDateFromTo.js

@@ -1,34 +1,27 @@
 import * as React from 'react';
-import { submissionService } from '@oneblink/sdk-core';
+import getDateRangeConfiguration from '../services/getDateRangeConfiguration';
 import useFormSubmissionModel from './useFormSubmissionModelContext';
 export default function useFormElementDateFromTo(element) {
     const { formSubmissionModel, elements } = useFormSubmissionModel();
-    const { fromDate, fromDaysOffset } = React.useMemo(() => {
-        if (element.fromDateElementId) {
-            const fromDateValue = submissionService.getRootElementValueById(element.fromDateElementId, elements, formSubmissionModel);
-            if (fromDateValue) {
-                return {
-                    fromDate: fromDateValue,
-                    fromDaysOffset: element.fromDateDaysOffset,
-                };
-            }
-        }
-        return {
-            fromDate: element.fromDate,
-            fromDaysOffset: element.fromDate === 'NOW' ? element.fromDateDaysOffset : undefined,
-        };
-    }, [element, elements, formSubmissionModel]);
-    const { toDate, toDaysOffset } = React.useMemo(() => {
-        if (element.toDateElementId) {
-            const toDateValue = submissionService.getRootElementValueById(element.toDateElementId, elements, formSubmissionModel);
-            if (toDateValue) {
-                return { toDate: toDateValue, toDaysOffset: element.toDateDaysOffset };
-            }
-        }
-        return {
-            toDate: element.toDate,
-            toDaysOffset: element.toDate === 'NOW' ? element.toDateDaysOffset : undefined,
-        };
+    const [fromDate, fromDaysOffset] = React.useMemo(() => {
+        return getDateRangeConfiguration({
+            referenceFormElementId: element.fromDateElementId,
+            date: element.fromDate,
+            daysOffset: element.fromDateDaysOffset,
+        }, elements, formSubmissionModel);
+    }, [
+        element.fromDate,
+        element.fromDateDaysOffset,
+        element.fromDateElementId,
+        elements,
+        formSubmissionModel,
+    ]);
+    const [toDate, toDaysOffset] = React.useMemo(() => {
+        return getDateRangeConfiguration({
+            referenceFormElementId: element.toDateElementId,
+            date: element.toDate,
+            daysOffset: element.toDateDaysOffset,
+        }, elements, formSubmissionModel);
     }, [
         element.toDate,
         element.toDateDaysOffset,

package/dist/hooks/useFormElementDateFromTo.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormElementDateFromTo.js","sourceRoot":"","sources":["../../src/hooks/useFormElementDateFromTo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AAGpE,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,OAAsC;IAEtC,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAElE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtD,IAAI,OAAO,CAAC,iBAAiB,EAAE;YAC7B,MAAM,aAAa,GAAG,iBAAiB,CAAC,uBAAuB,CAC7D,OAAO,CAAC,iBAAiB,EACzB,QAAQ,EACR,mBAAmB,CACpB,CAAA;YACD,IAAI,aAAa,EAAE;gBACjB,OAAO;oBACL,QAAQ,EAAE,aAAa;oBACvB,cAAc,EAAE,OAAO,CAAC,kBAAkB;iBAC3C,CAAA;aACF;SACF;QACD,OAAO;YACL,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAC1B,cAAc,EACZ,OAAO,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;SACtE,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAE5C,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAClD,IAAI,OAAO,CAAC,eAAe,EAAE;YAC3B,MAAM,WAAW,GAAG,iBAAiB,CAAC,uBAAuB,CAC3D,OAAO,CAAC,eAAe,EACvB,QAAQ,EACR,mBAAmB,CACpB,CAAA;YACD,IAAI,WAAW,EAAE;gBACf,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC,gBAAgB,EAAE,CAAA;aACvE;SACF;QACD,OAAO;YACL,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,YAAY,EACV,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;SAClE,CAAA;IACH,CAAC,EAAE;QACD,OAAO,CAAC,MAAM;QACd,OAAO,CAAC,gBAAgB;QACxB,OAAO,CAAC,eAAe;QACvB,QAAQ;QACR,mBAAmB;KACpB,CAAC,CAAA;IAEF,OAAO;QACL,QAAQ;QACR,cAAc;QACd,MAAM;QACN,YAAY;KACb,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport { submissionService } from '@oneblink/sdk-core'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\n\nexport default function useFormElementDateFromTo(\n  element: FormTypes.FormElementWithDate,\n) {\n  const { formSubmissionModel, elements } = useFormSubmissionModel()\n\n  const { fromDate, fromDaysOffset } = React.useMemo(() => {\n    if (element.fromDateElementId) {\n      const fromDateValue = submissionService.getRootElementValueById(\n        element.fromDateElementId,\n        elements,\n        formSubmissionModel,\n      )\n      if (fromDateValue) {\n        return {\n          fromDate: fromDateValue,\n          fromDaysOffset: element.fromDateDaysOffset,\n        }\n      }\n    }\n    return {\n      fromDate: element.fromDate,\n      fromDaysOffset:\n        element.fromDate === 'NOW' ? element.fromDateDaysOffset : undefined,\n    }\n  }, [element, elements, formSubmissionModel])\n\n  const { toDate, toDaysOffset } = React.useMemo(() => {\n    if (element.toDateElementId) {\n      const toDateValue = submissionService.getRootElementValueById(\n        element.toDateElementId,\n        elements,\n        formSubmissionModel,\n      )\n      if (toDateValue) {\n        return { toDate: toDateValue, toDaysOffset: element.toDateDaysOffset }\n      }\n    }\n    return {\n      toDate: element.toDate,\n      toDaysOffset:\n        element.toDate === 'NOW' ? element.toDateDaysOffset : undefined,\n    }\n  }, [\n    element.toDate,\n    element.toDateDaysOffset,\n    element.toDateElementId,\n    elements,\n    formSubmissionModel,\n  ])\n\n  return {\n    fromDate,\n    fromDaysOffset,\n    toDate,\n    toDaysOffset,\n  }\n}\n"]}
+{"version":3,"file":"useFormElementDateFromTo.js","sourceRoot":"","sources":["../../src/hooks/useFormElementDateFromTo.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,yBAAyB,MAAM,uCAAuC,CAAA;AAC7E,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AAGpE,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,OAAsC;IAEtC,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAElE,MAAM,CAAC,QAAQ,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACpD,OAAO,yBAAyB,CAC9B;YACE,sBAAsB,EAAE,OAAO,CAAC,iBAAiB;YACjD,IAAI,EAAE,OAAO,CAAC,QAAQ;YACtB,UAAU,EAAE,OAAO,CAAC,kBAAkB;SACvC,EACD,QAAQ,EACR,mBAAmB,CACpB,CAAA;IACH,CAAC,EAAE;QACD,OAAO,CAAC,QAAQ;QAChB,OAAO,CAAC,kBAAkB;QAC1B,OAAO,CAAC,iBAAiB;QACzB,QAAQ;QACR,mBAAmB;KACpB,CAAC,CAAA;IAEF,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAChD,OAAO,yBAAyB,CAC9B;YACE,sBAAsB,EAAE,OAAO,CAAC,eAAe;YAC/C,IAAI,EAAE,OAAO,CAAC,MAAM;YACpB,UAAU,EAAE,OAAO,CAAC,gBAAgB;SACrC,EACD,QAAQ,EACR,mBAAmB,CACpB,CAAA;IACH,CAAC,EAAE;QACD,OAAO,CAAC,MAAM;QACd,OAAO,CAAC,gBAAgB;QACxB,OAAO,CAAC,eAAe;QACvB,QAAQ;QACR,mBAAmB;KACpB,CAAC,CAAA;IAEF,OAAO;QACL,QAAQ;QACR,cAAc;QACd,MAAM;QACN,YAAY;KACb,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport getDateRangeConfiguration from '../services/getDateRangeConfiguration'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { FormTypes } from '@oneblink/types'\n\nexport default function useFormElementDateFromTo(\n  element: FormTypes.FormElementWithDate,\n) {\n  const { formSubmissionModel, elements } = useFormSubmissionModel()\n\n  const [fromDate, fromDaysOffset] = React.useMemo(() => {\n    return getDateRangeConfiguration(\n      {\n        referenceFormElementId: element.fromDateElementId,\n        date: element.fromDate,\n        daysOffset: element.fromDateDaysOffset,\n      },\n      elements,\n      formSubmissionModel,\n    )\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.fromDateElementId,\n    elements,\n    formSubmissionModel,\n  ])\n\n  const [toDate, toDaysOffset] = React.useMemo(() => {\n    return getDateRangeConfiguration(\n      {\n        referenceFormElementId: element.toDateElementId,\n        date: element.toDate,\n        daysOffset: element.toDateDaysOffset,\n      },\n      elements,\n      formSubmissionModel,\n    )\n  }, [\n    element.toDate,\n    element.toDateDaysOffset,\n    element.toDateElementId,\n    elements,\n    formSubmissionModel,\n  ])\n\n  return {\n    fromDate,\n    fromDaysOffset,\n    toDate,\n    toDaysOffset,\n  }\n}\n"]}

package/dist/hooks/useFormValidation.js

@@ -1,5 +1,21 @@
 import * as React from 'react';
 import { validateSubmission, generateValidationSchema, } from '../services/form-validation';
+function stripFormElementsWithoutName(formElements) {
+    return formElements.reduce((memo, formElement) => {
+        switch (formElement.type) {
+            case 'page':
+            case 'section': {
+                return [
+                    ...memo,
+                    ...stripFormElementsWithoutName(formElement.elements),
+                ];
+            }
+            default: {
+                return [...memo, formElement];
+            }
+        }
+    }, []);
+}
 export default function useFormValidation(pages) {
     const [elementIdsWithLookupsExecuted, setElementIdsWithLookupsExecuted] = React.useState([]);
     const executedLookup = React.useCallback((element) => {
@@ -15,9 +31,12 @@ export default function useFormValidation(pages) {
             return currentElementIdsWithLookupsExecuted.filter((elementId) => elementId !== element.id);
         });
     }, []);
+    const formElementsWithoutName = React.useMemo(() => {
+        return stripFormElementsWithoutName(pages);
+    }, [pages]);
     const validationSchema = React.useMemo(() => {
-        return generateValidationSchema(pages, elementIdsWithLookupsExecuted);
-    }, [pages, elementIdsWithLookupsExecuted]);
+        return generateValidationSchema(formElementsWithoutName, elementIdsWithLookupsExecuted);
+    }, [formElementsWithoutName, elementIdsWithLookupsExecuted]);
     const handleValidate = React.useCallback((submission, formElementsConditionallyShown) => {
         return validateSubmission(validationSchema, submission, formElementsConditionallyShown);
     }, [validationSchema]);

package/dist/hooks/useFormValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAMpC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAA8C,EAAE,EAAE;YACjD,IAAI,oCAAoC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBAC7D,OAAO,oCAAoC,CAAA;aAC5C;YACD,OAAO,CAAC,GAAG,oCAAoC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;QAC9D,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAAoC,EAAE,EAAE;YACvC,OAAO,oCAAoC,CAAC,MAAM,CAChD,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CACxC,CAAA;QACH,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,CAAC,CAAA;IACvE,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAA;IAE1C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA+B,EAC/B,8BAA8D,EAC9D,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,CAC/B,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,cAAc;QACd,mBAAmB;QACnB,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n  validateSubmission,\n  generateValidationSchema,\n} from '../services/form-validation'\nimport {\n  FormElementsConditionallyShown,\n  FormSubmissionModel,\n} from '../types/form'\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n  const [elementIdsWithLookupsExecuted, setElementIdsWithLookupsExecuted] =\n    React.useState<string[]>([])\n\n  const executedLookup = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted: string[]) => {\n          if (currentElementIdsWithLookupsExecuted.includes(element.id)) {\n            return currentElementIdsWithLookupsExecuted\n          }\n          return [...currentElementIdsWithLookupsExecuted, element.id]\n        },\n      )\n    },\n    [],\n  )\n  const executeLookupFailed = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted) => {\n          return currentElementIdsWithLookupsExecuted.filter(\n            (elementId) => elementId !== element.id,\n          )\n        },\n      )\n    },\n    [],\n  )\n\n  const validationSchema = React.useMemo(() => {\n    return generateValidationSchema(pages, elementIdsWithLookupsExecuted)\n  }, [pages, elementIdsWithLookupsExecuted])\n\n  const handleValidate = React.useCallback(\n    (\n      submission: FormSubmissionModel,\n      formElementsConditionallyShown: FormElementsConditionallyShown,\n    ) => {\n      return validateSubmission(\n        validationSchema,\n        submission,\n        formElementsConditionallyShown,\n      )\n    },\n    [validationSchema],\n  )\n\n  return {\n    executedLookup,\n    executeLookupFailed,\n    validate: handleValidate,\n  }\n}\n"]}
+{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAMpC,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE;YACxB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;aACF;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;aAC9B;SACF;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAA8C,EAAE,EAAE;YACjD,IAAI,oCAAoC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBAC7D,OAAO,oCAAoC,CAAA;aAC5C;YACD,OAAO,CAAC,GAAG,oCAAoC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;QAC9D,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAAoC,EAAE,EAAE;YACvC,OAAO,oCAAoC,CAAC,MAAM,CAChD,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CACxC,CAAA;QACH,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAC7B,uBAAuB,EACvB,6BAA6B,CAC9B,CAAA;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAA;IAE5D,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA+B,EAC/B,8BAA8D,EAC9D,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,CAC/B,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,cAAc;QACd,mBAAmB;QACnB,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n  validateSubmission,\n  generateValidationSchema,\n} from '../services/form-validation'\nimport {\n  FormElementsConditionallyShown,\n  FormSubmissionModel,\n} from '../types/form'\n\nfunction stripFormElementsWithoutName(\n  formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n  return formElements.reduce<FormTypes.FormElementWithName[]>(\n    (memo, formElement) => {\n      switch (formElement.type) {\n        case 'page':\n        case 'section': {\n          return [\n            ...memo,\n            ...stripFormElementsWithoutName(formElement.elements),\n          ]\n        }\n        default: {\n          return [...memo, formElement]\n        }\n      }\n    },\n    [],\n  )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n  const [elementIdsWithLookupsExecuted, setElementIdsWithLookupsExecuted] =\n    React.useState<string[]>([])\n\n  const executedLookup = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted: string[]) => {\n          if (currentElementIdsWithLookupsExecuted.includes(element.id)) {\n            return currentElementIdsWithLookupsExecuted\n          }\n          return [...currentElementIdsWithLookupsExecuted, element.id]\n        },\n      )\n    },\n    [],\n  )\n  const executeLookupFailed = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted) => {\n          return currentElementIdsWithLookupsExecuted.filter(\n            (elementId) => elementId !== element.id,\n          )\n        },\n      )\n    },\n    [],\n  )\n\n  const formElementsWithoutName = React.useMemo(() => {\n    return stripFormElementsWithoutName(pages)\n  }, [pages])\n\n  const validationSchema = React.useMemo(() => {\n    return generateValidationSchema(\n      formElementsWithoutName,\n      elementIdsWithLookupsExecuted,\n    )\n  }, [formElementsWithoutName, elementIdsWithLookupsExecuted])\n\n  const handleValidate = React.useCallback(\n    (\n      submission: FormSubmissionModel,\n      formElementsConditionallyShown: FormElementsConditionallyShown,\n    ) => {\n      return validateSubmission(\n        validationSchema,\n        submission,\n        formElementsConditionallyShown,\n      )\n    },\n    [validationSchema],\n  )\n\n  return {\n    executedLookup,\n    executeLookupFailed,\n    validate: handleValidate,\n  }\n}\n"]}

package/dist/services/form-validation.d.ts

@@ -2,8 +2,8 @@ import { FormTypes } from '@oneblink/types';
 import { FormElementsConditionallyShown, FormElementsValidation, FormSubmissionModel } from '../types/form';
 export declare const lookupValidationMessage = "Lookup is required";
 type ValidateJSSchema = Record<string, unknown>;
-export declare function validateSubmission(schema: ValidateJSSchema, submission: FormSubmissionModel, formElementsConditionallyShown: FormElementsConditionallyShown): FormElementsValidation | undefined;
-export declare function generateValidationSchema(elements: FormTypes.FormElement[], elementIdsWithLookupsExecuted: string[]): ValidateJSSchema;
+export declare function generateValidationSchema(elements: FormTypes.FormElementWithName[], elementIdsWithLookupsExecuted: string[]): ValidateJSSchema;
+export declare function validateSubmission(schema: ValidateJSSchema, submission: FormSubmissionModel | undefined, formElementsConditionallyShown: FormElementsConditionallyShown | undefined): FormElementsValidation | undefined;
 export declare function checkFileNameIsValid(formElement: FormTypes.FilesElement, fileName: string): boolean;
 export declare function checkFileNameExtensionIsValid(formElement: FormTypes.FilesElement, fileName: string): boolean;
 export declare function checkSectionValidity(element: FormTypes.PageElement | FormTypes.SectionElement, formElementsValidation: FormElementsValidation | undefined): boolean;