strapi-plugin-hubspot 0.2.1 → 0.4.0

package/dist/_chunks/HubspotPropertyInput-Cv77QiS6.mjs

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { u as useIntl, o as objectLabel } from "./objectLabels-CJTKZ4vT.mjs";
+import { Field, Flex, Loader, Combobox, ComboboxOption, Button, Typography, Link } from "@strapi/design-system";
+import { useFetchClient, useField } from "@strapi/strapi/admin";
+import { P as PLUGIN_ID, g as getTranslation } from "./index-BudHTwSw.mjs";
+const HubspotPropertyInput = React.forwardRef(
+  ({ name, value, onChange, attribute, disabled, error, required, label, hint, labelAction }, ref) => {
+    const intl = useIntl();
+    const { formatMessage } = intl;
+    const { get } = useFetchClient();
+    const [schema, setSchema] = React.useState(null);
+    const [loadError, setLoadError] = React.useState("");
+    const objectFieldName = attribute?.options?.objectField || "hsObject";
+    const siblingPath = React.useMemo(
+      () => name.replace(/[^.]+$/, objectFieldName),
+      [name, objectFieldName]
+    );
+    const siblingField = useField(siblingPath);
+    const selectedObject = siblingField?.value;
+    const optionsFieldName = attribute?.options?.optionsField || "options";
+    const optionsPath = React.useMemo(
+      () => name.replace(/[^.]+$/, optionsFieldName),
+      [name, optionsFieldName]
+    );
+    const optionsField = useField(optionsPath);
+    const [imported, setImported] = React.useState(false);
+    React.useEffect(() => {
+      let cancelled = false;
+      get(`/${PLUGIN_ID}/properties`).then(({ data }) => {
+        if (!cancelled) setSchema(data);
+      }).catch((err) => {
+        if (cancelled) return;
+        setSchema({ configured: false, properties: [], objects: [], unavailable: [] });
+        setLoadError(
+          err?.response?.data?.error?.message ?? formatMessage({
+            id: getTranslation("picker.load-error"),
+            defaultMessage: "HubSpot properties unavailable"
+          })
+        );
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [get]);
+    const emit = (next) => onChange({ target: { name, value: next ?? "", type: "string" } });
+    const options = React.useMemo(() => {
+      const all = schema?.properties ?? [];
+      const scoped = selectedObject ? all.filter((p) => p.object === selectedObject) : all;
+      const sorted = selectedObject ? [...scoped].sort(
+        (a, b) => (a.group ?? "").localeCompare(b.group ?? "") || a.label.localeCompare(b.label)
+      ) : scoped;
+      const shown = sorted.map((p) => ({
+        value: p.name,
+        label: selectedObject ? `${p.group ? `${p.group} · ` : ""}${p.label} (${p.name})` : `${objectLabel(intl, p.object)} · ${p.label} (${p.name})`
+      }));
+      if (value && !scoped.some((p) => p.name === value)) {
+        const elsewhere = all.find((p) => p.name === value);
+        shown.unshift({
+          value,
+          label: elsewhere ? formatMessage(
+            { id: getTranslation("picker.belongs-to"), defaultMessage: "{property} — belongs to {object}" },
+            { property: value, object: objectLabel(intl, elsewhere.object) }
+          ) : formatMessage(
+            { id: getTranslation("picker.unknown"), defaultMessage: "{property} — unknown to the portal" },
+            { property: value }
+          )
+        });
+      }
+      return shown;
+    }, [schema, selectedObject, value, intl, formatMessage]);
+    const describe = () => {
+      if (loadError) return loadError;
+      if (schema && !schema.configured) {
+        return formatMessage({
+          id: getTranslation("picker.not-configured"),
+          defaultMessage: "No HubSpot API key — free text. Set it in Settings → HubSpot."
+        });
+      }
+      if (selectedObject && schema?.unavailable.some((u) => u.object === selectedObject)) {
+        return formatMessage(
+          {
+            id: getTranslation("picker.object-unavailable"),
+            defaultMessage: "Properties of “{object}” unreadable — missing scope on the token."
+          },
+          { object: objectLabel(intl, selectedObject) }
+        );
+      }
+      return hint;
+    };
+    const crmLink = schema?.portalId && value && schema.properties.some((p) => p.name === value) ? `https://${schema.uiDomain || "app.hubspot.com"}/property-settings/${schema.portalId}/properties?search=${encodeURIComponent(value)}` : null;
+    const selectedProperty = value && schema ? schema.properties.find(
+      (p) => p.name === value && (!selectedObject || p.object === selectedObject)
+    ) : void 0;
+    const importable = selectedProperty?.type === "enumeration" && (selectedProperty.options?.length ?? 0) > 0;
+    React.useEffect(() => setImported(false), [value]);
+    const importOptions = () => {
+      if (!selectedProperty || !optionsField) return;
+      const rows = selectedProperty.options.map((o, i) => ({
+        __temp_key__: `a${i}`,
+        value: o.value,
+        label: o.label ?? o.value
+      }));
+      optionsField.onChange({
+        target: { name: optionsPath, value: rows, type: "json" }
+      });
+      setImported(true);
+    };
+    return /* @__PURE__ */ jsxs(Field.Root, { name, error, hint: describe(), required, children: [
+      /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+      !schema ? /* @__PURE__ */ jsx(Flex, { paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Loader, { small: true, children: formatMessage({
+        id: getTranslation("picker.loading"),
+        defaultMessage: "Loading HubSpot properties…"
+      }) }) }) : schema.configured ? /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          ref,
+          value: value || "",
+          onChange: emit,
+          onClear: () => emit(""),
+          disabled,
+          placeholder: formatMessage({
+            id: getTranslation("picker.placeholder"),
+            defaultMessage: "Search a property…"
+          }),
+          creatable: true,
+          onCreateOption: emit,
+          children: options.map((o) => /* @__PURE__ */ jsx(ComboboxOption, { value: o.value, children: o.label }, o.value))
+        }
+      ) : /* @__PURE__ */ jsx(
+        Field.Input,
+        {
+          ref,
+          value: value || "",
+          onChange: (e) => emit(e.target.value),
+          disabled,
+          placeholder: formatMessage({
+            id: getTranslation("picker.free-placeholder"),
+            defaultMessage: "e.g. hs_role, numberofemployees"
+          })
+        }
+      ),
+      crmLink || importable ? /* @__PURE__ */ jsxs(Flex, { paddingTop: 1, gap: 3, alignItems: "center", wrap: "wrap", children: [
+        importable ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: importOptions, disabled, children: formatMessage(
+          {
+            id: getTranslation("picker.import"),
+            defaultMessage: "Import the {count} options from HubSpot"
+          },
+          { count: selectedProperty?.options.length ?? 0 }
+        ) }) : null,
+        imported ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success600", children: formatMessage({
+          id: getTranslation("picker.imported"),
+          defaultMessage: "Options imported — save to keep them."
+        }) }) : null,
+        crmLink ? /* @__PURE__ */ jsx(Link, { href: crmLink, isExternal: true, children: formatMessage({
+          id: getTranslation("picker.view"),
+          defaultMessage: "View in HubSpot"
+        }) }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+HubspotPropertyInput.displayName = "HubspotPropertyInput";
+export {
+  HubspotPropertyInput as default
+};