@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/google.mjs

@@ -0,0 +1,637 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { APIProvider, ColorScheme, ControlPosition, Map, MapControl, useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
+import Home from "../icons/home.mjs";
+import LoaderIcon from "../icons/loader.mjs";
+import InputText from "../input-text.mjs";
+import Button from "../shared/button.mjs";
+import { getLocation, toAddressPayload } from "./lib/geo.mjs";
+let timeout;
+const InputGoogleAutocomplete = ({
+  fields = ["displayName", "formattedAddress", "location", "addressComponents"],
+  includedPrimaryTypes,
+  minLength = 3,
+  onAddressChange,
+  onChange,
+  onSelect,
+  placeholder = "Start typing...",
+  value
+}) => {
+  const onSelectRef = useRef(onSelect);
+  const onAddressChangeRef = useRef(onAddressChange);
+  useEffect(() => {
+    onSelectRef.current = onSelect;
+    onAddressChangeRef.current = onAddressChange;
+  }, [onSelect, onAddressChange]);
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const containerRef = useRef(null);
+  const sessionTokenRef = useRef(null);
+  const selectedValueRef = useRef(null);
+  const [googleLoaded, setGoogleLoaded] = useState(false);
+  const [internalValue, setInternalValue] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (document.querySelector("#google-maps-script")) {
+      if (window.google) {
+        queueMicrotask(() => setGoogleLoaded(true));
+      }
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = "google-maps-script";
+    script.src = "https://maps.googleapis.com/maps/api/js?key=" + app.credentials.googleApiKey + "&libraries=places";
+    script.async = true;
+    script.defer = true;
+    script.onload = () => setGoogleLoaded(true);
+    document.head.appendChild(script);
+  }, [app.credentials.googleApiKey]);
+  useEffect(() => {
+    if (!googleLoaded) return;
+    let cancelled = false;
+    (async () => {
+      const places = await window.google.maps.importLibrary("places");
+      if (cancelled) return;
+      sessionTokenRef.current = new places.AutocompleteSessionToken();
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [googleLoaded]);
+  useEffect(() => {
+    if (!googleLoaded || !currentValue || currentValue.length < minLength) {
+      return;
+    }
+    if (currentValue === selectedValueRef.current) {
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      const places = await window.google.maps.importLibrary("places");
+      const request = {
+        input: currentValue,
+        sessionToken: sessionTokenRef.current
+      };
+      if (includedPrimaryTypes == null ? void 0 : includedPrimaryTypes.length) {
+        request.includedPrimaryTypes = includedPrimaryTypes;
+      }
+      const { suggestions: results } = await places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
+      if (cancelled) return;
+      setSuggestions(results || []);
+      setOpen(true);
+    }, 200);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [currentValue, googleLoaded, minLength, includedPrimaryTypes]);
+  useEffect(() => {
+    const handler = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  const handleChange = (next) => {
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange == null ? void 0 : onChange(next);
+    if (!next || next.length < minLength) {
+      setSuggestions([]);
+      setOpen(false);
+    }
+  };
+  const selectSuggestion = async (suggestion) => {
+    var _a;
+    const prediction = suggestion == null ? void 0 : suggestion.placePrediction;
+    if (!prediction) return;
+    const place = prediction.toPlace();
+    await place.fetchFields({
+      fields
+    });
+    (_a = onSelectRef.current) == null ? void 0 : _a.call(onSelectRef, place);
+    if (onAddressChangeRef.current) {
+      onAddressChangeRef.current(toAddressPayload((place == null ? void 0 : place.addressComponents) ?? [], place == null ? void 0 : place.formattedAddress));
+    }
+    selectedValueRef.current = (place == null ? void 0 : place.formattedAddress) || "";
+    if (!isControlled) {
+      setInternalValue((place == null ? void 0 : place.formattedAddress) || "");
+    }
+    setSuggestions([]);
+    setOpen(false);
+    const places = await window.google.maps.importLibrary("places");
+    sessionTokenRef.current = new places.AutocompleteSessionToken();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        ref: containerRef,
+        className: "relative w-full"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          InputText,
+          {
+            ...{
+              onChange: handleChange,
+              onFocus: () => suggestions.length > 0 && setOpen(true),
+              placeholder,
+              value: currentValue || ""
+            }
+          }
+        ),
+        open && suggestions.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ...{
+              className: "absolute z-20 top-full left-0 right-0 mt-1 bg-white border border-gray rounded overflow-hidden divide-y divide-gray shadow-lg"
+            },
+            children: suggestions.map((suggestion, key) => {
+              var _a, _b, _c;
+              const prediction = suggestion == null ? void 0 : suggestion.placePrediction;
+              const main = ((_a = prediction == null ? void 0 : prediction.mainText) == null ? void 0 : _a.toString()) || ((_b = prediction == null ? void 0 : prediction.text) == null ? void 0 : _b.toString()) || "";
+              const secondary = ((_c = prediction == null ? void 0 : prediction.secondaryText) == null ? void 0 : _c.toString()) || "";
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    justify: "start",
+                    onClick: () => selectSuggestion(suggestion),
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ...{
+                        className: "block w-full text-left px-3 py-2 hover:bg-gray-light"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("p", { children: main }),
+                        secondary && /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            ...{
+                              className: "text-sm text-gray-dark"
+                            },
+                            children: secondary
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ) }, key);
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+const InputMapNavigatorButton = ({
+  onError,
+  onSuccess
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "flex items-center justify-center w-full aspect-video bg-gray-light"
+      },
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...{
+            icon: Home,
+            inline: true,
+            onClick: () => getLocation({
+              onError,
+              onSuccess: ({ lat, lng }) => onSuccess({
+                coordinates: [lng, lat]
+              })
+            }),
+            size: "small",
+            variant: "secondary"
+          },
+          children: "Turn on location services"
+        }
+      )
+    }
+  );
+};
+const InputMapHome = ({
+  onError,
+  onSuccess
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "p-4"
+      },
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...{
+            "aria-label": "Go to my location",
+            inline: true,
+            onClick: () => getLocation({
+              onError,
+              onSuccess: ({ lat, lng }) => onSuccess({
+                coordinates: [lng, lat]
+              })
+            }),
+            variant: "link"
+          },
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...{
+                className: "flex items-center justify-center w-10 h-10 bg-white border rounded-full"
+              },
+              children: /* @__PURE__ */ jsx(
+                Home,
+                {
+                  ...{
+                    className: "w-4 h-4"
+                  }
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const InputMapCircle = ({
+  coordinates,
+  onCircleChanged,
+  radius
+}) => {
+  const map = useMap();
+  const circleRef = useRef(null);
+  useEffect(
+    () => {
+      if (!map || circleRef.current) return;
+      circleRef.current = new window.google.maps.Circle({
+        draggable: true,
+        editable: true,
+        fillColor: "#000000",
+        fillOpacity: 0.35,
+        map,
+        strokeColor: "#000000",
+        strokeOpacity: 0.8,
+        strokeWeight: 2
+      });
+      return () => {
+        if (circleRef.current) {
+          circleRef.current.setMap(null);
+          circleRef.current = null;
+        }
+      };
+    },
+    [map]
+  );
+  useEffect(
+    () => {
+      const circle = circleRef.current;
+      if (circle && coordinates) {
+        circle.setCenter({
+          lng: coordinates == null ? void 0 : coordinates[0],
+          lat: coordinates == null ? void 0 : coordinates[1]
+        });
+      }
+    },
+    [coordinates]
+  );
+  useEffect(
+    () => {
+      const circle = circleRef.current;
+      if (circle && radius) {
+        circle.setRadius(radius);
+      }
+    },
+    [radius]
+  );
+  const onEventChange = useCallback(
+    (values) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(
+        () => {
+          onCircleChanged(values);
+        },
+        500
+      );
+    },
+    [onCircleChanged]
+  );
+  useEffect(
+    () => {
+      const circle = circleRef.current;
+      if (!circle) return;
+      const gme = window.google.maps.event;
+      const radiusListener = gme.addListener(
+        circle,
+        "radius_changed",
+        () => onEventChange({
+          coordinates,
+          radius: circle.getRadius()
+        })
+      );
+      const centerListener = gme.addListener(
+        circle,
+        "center_changed",
+        () => {
+          const { lat, lng } = circle.getCenter();
+          onEventChange({
+            coordinates: [
+              lng(),
+              lat()
+            ],
+            radius
+          });
+        }
+      );
+      return () => {
+        gme.removeListener(radiusListener);
+        gme.removeListener(centerListener);
+      };
+    },
+    [coordinates, onEventChange, radius]
+  );
+  return null;
+};
+const InputMapControlPlaces = ({
+  onError,
+  onSuccess
+}) => {
+  const [placeAutocomplete, setPlaceAutocomplete] = useState(null);
+  const ref = useRef(null);
+  const places = useMapsLibrary("places");
+  useEffect(
+    () => {
+      if (!places || !ref.current) return;
+      const autoComplete = new places.PlaceAutocompleteElement();
+      autoComplete.id = "google-autocomplete";
+      autoComplete.classList.add("relative", "w-full", "h-full");
+      queueMicrotask(() => setPlaceAutocomplete(autoComplete));
+    },
+    [places]
+  );
+  useEffect(
+    () => {
+      if (!placeAutocomplete) return;
+      ref.current.appendChild(placeAutocomplete);
+      placeAutocomplete.addEventListener(
+        "gmp-select",
+        async (event) => {
+          var _a, _b;
+          try {
+            const place = event == null ? void 0 : event.placePrediction.toPlace();
+            await place.fetchFields({
+              fields: [
+                "location"
+              ]
+            });
+            const coordinates = [
+              (_a = place == null ? void 0 : place.location) == null ? void 0 : _a.lng(),
+              (_b = place == null ? void 0 : place.location) == null ? void 0 : _b.lat()
+            ].filter(Boolean);
+            if ((coordinates == null ? void 0 : coordinates.length) > 0) {
+              onSuccess({
+                coordinates
+              });
+            }
+          } catch (error) {
+            onError(error);
+          }
+        }
+      );
+    },
+    [onError, onSuccess, placeAutocomplete]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "m-4 bg-white h-10 w-[200px]",
+        ref
+      }
+    }
+  );
+};
+const InputMap = ({
+  onChange,
+  onError = () => {
+  },
+  value
+}) => {
+  var _a, _b, _c, _d;
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const [loading, setLoading] = useState(true);
+  const [zoom, setZoom] = useState((value == null ? void 0 : value.zoom) || 13);
+  const radius = (value == null ? void 0 : value.radius) || 800;
+  const onZoomChanged = useCallback(
+    ({ detail }) => {
+      setZoom(detail.zoom);
+      clearTimeout(timeout);
+      timeout = setTimeout(
+        () => {
+          onChange({
+            ...value,
+            zoom: detail.zoom
+          });
+        },
+        500
+      );
+    },
+    [onChange, value]
+  );
+  const input = ({
+    label,
+    value: value2
+  }) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "text-xs text-gray-dark"
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { children: label }),
+        /* @__PURE__ */ jsx(
+          InputText,
+          {
+            ...{
+              className: "h-8 p-1.5",
+              readOnly: true,
+              disabled: true,
+              value: value2
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "relative w-full"
+      },
+      children: [
+        loading && /* @__PURE__ */ jsx(
+          LoaderIcon,
+          {
+            ...{
+              className: "w-6 h-6"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          APIProvider,
+          {
+            ...{
+              apiKey: app.credentials.googleApiKey,
+              onError,
+              onLoad: () => setLoading(false)
+            },
+            children: [
+              !loading && (value == null ? void 0 : value.coordinates) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: "w-full h-full bg-white border border-gray overflow-hidden rounded"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      MapControl,
+                      {
+                        ...{
+                          position: ControlPosition.TOP_LEFT
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          InputMapHome,
+                          {
+                            ...{
+                              onError,
+                              onSuccess: (object) => onChange({
+                                ...object,
+                                radius,
+                                zoom
+                              })
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      MapControl,
+                      {
+                        ...{
+                          position: ControlPosition.TOP_RIGHT
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          InputMapControlPlaces,
+                          {
+                            ...{
+                              onError,
+                              onSuccess: (object) => onChange({
+                                ...object,
+                                radius,
+                                zoom
+                              })
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Map,
+                      {
+                        ...{
+                          center: {
+                            lng: (_a = value == null ? void 0 : value.coordinates) == null ? void 0 : _a[0],
+                            lat: (_b = value == null ? void 0 : value.coordinates) == null ? void 0 : _b[1]
+                          },
+                          className: "w-full aspect-[4/3]",
+                          colorScheme: ColorScheme.LIGHT,
+                          disableDefaultUI: true,
+                          onZoomChanged,
+                          zoom
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          InputMapCircle,
+                          {
+                            ...{
+                              coordinates: value == null ? void 0 : value.coordinates,
+                              onCircleChanged: (object) => onChange({
+                                ...object,
+                                zoom
+                              }),
+                              radius
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        ...{
+                          className: "flex items-center space-x-2 bg-gray-light p-2"
+                        },
+                        children: [
+                          input({
+                            label: "Lng",
+                            value: (_c = value == null ? void 0 : value.coordinates) == null ? void 0 : _c[0]
+                          }),
+                          input({
+                            label: "Lat",
+                            value: (_d = value == null ? void 0 : value.coordinates) == null ? void 0 : _d[1]
+                          }),
+                          input({
+                            label: "Radius",
+                            value: radius || ""
+                          })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              !loading && !(value == null ? void 0 : value.coordinates) && /* @__PURE__ */ jsx(
+                InputMapNavigatorButton,
+                {
+                  ...{
+                    onError,
+                    onSuccess: (object) => onChange({
+                      ...object,
+                      radius,
+                      zoom
+                    })
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  InputGoogleAutocomplete,
+  InputMap
+};