@shellapps/experience-react 1.1.0 → 1.3.0

package/dist/index.mjs

@@ -103,10 +103,527 @@ var ErrorBoundary = class extends React2.Component {
 };
 ErrorBoundary.contextType = ExperienceContext;
 
+// src/FeedbackButton.tsx
+import { useState, useEffect as useEffect2, useCallback, useRef as useRef2, useContext } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TYPE_META = {
+  "bug": { icon: "\u{1F41B}", label: "Bug Report", color: "#ef4444" },
+  "feature-request": { icon: "\u{1F4A1}", label: "Feature Request", color: "#8b5cf6" },
+  "comment": { icon: "\u{1F4AC}", label: "Comment", color: "#3b82f6" },
+  "praise": { icon: "\u{1F389}", label: "Praise", color: "#10b981" }
+};
+var STATUS_LABELS = {
+  "new": "\u{1F195} New",
+  "acknowledged": "\u{1F440} Acknowledged",
+  "in-progress": "\u{1F527} In Progress",
+  "resolved": "\u2705 Resolved",
+  "wont-fix": "\u{1F6AB} Won't Fix"
+};
+function FeedbackButton({
+  position = "bottom-right",
+  label = "Feedback",
+  color = "#6366f1",
+  hidden = false,
+  apiUrl,
+  authToken
+}) {
+  const experience = useContext(ExperienceContext);
+  const [isOpen, setIsOpen] = useState(false);
+  const [view, setView] = useState("list");
+  const [selectedType, setSelectedType] = useState("comment");
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [items, setItems] = useState([]);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [replies, setReplies] = useState([]);
+  const [replyText, setReplyText] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [screenshot, setScreenshot] = useState(null);
+  const panelRef = useRef2(null);
+  const baseUrl = apiUrl || experience?.config?.apiUrl || "https://experience.shellapps.com";
+  const appId = experience?.config?.appId || "";
+  const headers = useCallback(() => {
+    const h = { "Content-Type": "application/json" };
+    if (authToken) h["Authorization"] = `Bearer ${authToken}`;
+    return h;
+  }, [authToken]);
+  useEffect2(() => {
+    if (experience) {
+      experience.openFeedback = () => setIsOpen(true);
+    }
+    return () => {
+      if (experience) delete experience.openFeedback;
+    };
+  }, [experience]);
+  useEffect2(() => {
+    if (isOpen && view === "list") {
+      loadFeedback();
+    }
+  }, [isOpen, view]);
+  const loadFeedback = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(
+        `${baseUrl}/api/v1/feedback?appId=${appId}&limit=20`,
+        { headers: headers() }
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setItems(data.items || []);
+      }
+    } catch {
+    }
+    setLoading(false);
+  };
+  const loadDetail = async (item) => {
+    setSelectedItem(item);
+    setView("detail");
+    try {
+      const res = await fetch(
+        `${baseUrl}/api/v1/feedback/${item._id}`,
+        { headers: headers() }
+      );
+      if (res.ok) {
+        const data = await res.json();
+        setReplies(data.replies || []);
+      }
+    } catch {
+    }
+  };
+  const captureScreenshot = async () => {
+    try {
+      const html2canvas = window.html2canvas;
+      if (!html2canvas) return;
+      const canvas = await html2canvas(document.body, { scale: 0.5, logging: false });
+      setScreenshot(canvas.toDataURL("image/jpeg", 0.6));
+    } catch {
+    }
+  };
+  const submit = async () => {
+    if (!title.trim() || !content.trim()) return;
+    setSubmitting(true);
+    try {
+      const ctx = {
+        userAgent: navigator.userAgent,
+        url: window.location.href,
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        locale: navigator.language,
+        referrer: document.referrer || void 0
+      };
+      const res = await fetch(`${baseUrl}/api/v1/feedback`, {
+        method: "POST",
+        headers: headers(),
+        body: JSON.stringify({
+          appId,
+          type: selectedType,
+          title: title.trim(),
+          content: content.trim(),
+          context: ctx,
+          screenshot: screenshot || void 0
+        })
+      });
+      if (res.ok) {
+        setTitle("");
+        setContent("");
+        setScreenshot(null);
+        setView("list");
+        loadFeedback();
+      }
+    } catch {
+    }
+    setSubmitting(false);
+  };
+  const submitReply = async () => {
+    if (!replyText.trim() || !selectedItem) return;
+    try {
+      const res = await fetch(`${baseUrl}/api/v1/feedback/${selectedItem._id}/reply`, {
+        method: "POST",
+        headers: headers(),
+        body: JSON.stringify({ content: replyText.trim() })
+      });
+      if (res.ok) {
+        const reply = await res.json();
+        setReplies((prev) => [...prev, reply]);
+        setReplyText("");
+      }
+    } catch {
+    }
+  };
+  const vote = async (id) => {
+    try {
+      await fetch(`${baseUrl}/api/v1/feedback/${id}/vote`, {
+        method: "POST",
+        headers: headers(),
+        body: JSON.stringify({ type: "upvote" })
+      });
+      loadFeedback();
+    } catch {
+    }
+  };
+  const posStyles = {
+    "bottom-right": { bottom: 20, right: 20 },
+    "bottom-left": { bottom: 20, left: 20 },
+    "top-right": { top: 20, right: 20 },
+    "top-left": { top: 20, left: 20 }
+  };
+  const panelPos = {
+    "bottom-right": { bottom: 70, right: 20 },
+    "bottom-left": { bottom: 70, left: 20 },
+    "top-right": { top: 70, right: 20 },
+    "top-left": { top: 70, left: 20 }
+  };
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    !hidden && /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          position: "fixed",
+          ...posStyles[position],
+          zIndex: 99999,
+          background: color,
+          color: "#fff",
+          border: "none",
+          borderRadius: 28,
+          padding: "10px 20px",
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: "pointer",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          display: "flex",
+          alignItems: "center",
+          gap: 6
+        },
+        children: [
+          "\u{1F4AC} ",
+          label
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: panelRef,
+        style: {
+          position: "fixed",
+          ...panelPos[position],
+          zIndex: 1e5,
+          width: 380,
+          maxHeight: 520,
+          background: "#fff",
+          borderRadius: 12,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          fontSize: 14,
+          color: "#1f2937"
+        },
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                padding: "14px 16px",
+                background: color,
+                color: "#fff",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600 }, children: view === "new" ? "New Feedback" : view === "detail" ? "Feedback" : "Feedback" }),
+                /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
+                  view !== "list" && /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: () => {
+                        setView("list");
+                        setSelectedItem(null);
+                      },
+                      style: { background: "none", border: "none", color: "#fff", cursor: "pointer", fontSize: 14 },
+                      children: "\u2190 Back"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      onClick: () => setIsOpen(false),
+                      style: { background: "none", border: "none", color: "#fff", cursor: "pointer", fontSize: 18 },
+                      children: "\u2715"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { style: { flex: 1, overflow: "auto", padding: 16 }, children: [
+            view === "list" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: () => setView("new"),
+                  style: {
+                    width: "100%",
+                    padding: "10px",
+                    background: color,
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: 8,
+                    cursor: "pointer",
+                    fontWeight: 600,
+                    marginBottom: 12
+                  },
+                  children: "+ New Feedback"
+                }
+              ),
+              loading ? /* @__PURE__ */ jsx3("p", { style: { textAlign: "center", color: "#9ca3af" }, children: "Loading\u2026" }) : items.length === 0 ? /* @__PURE__ */ jsx3("p", { style: { textAlign: "center", color: "#9ca3af" }, children: "No feedback yet" }) : items.map((item) => /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  onClick: () => loadDetail(item),
+                  style: {
+                    padding: 10,
+                    borderRadius: 8,
+                    border: "1px solid #e5e7eb",
+                    marginBottom: 8,
+                    cursor: "pointer"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4 }, children: [
+                      /* @__PURE__ */ jsxs2("span", { children: [
+                        TYPE_META[item.type]?.icon,
+                        " ",
+                        /* @__PURE__ */ jsx3("strong", { children: item.title })
+                      ] }),
+                      item.type === "feature-request" && /* @__PURE__ */ jsxs2(
+                        "button",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            vote(item._id);
+                          },
+                          style: {
+                            background: "none",
+                            border: "1px solid #d1d5db",
+                            borderRadius: 4,
+                            padding: "2px 6px",
+                            cursor: "pointer",
+                            fontSize: 12
+                          },
+                          children: [
+                            "\u25B2 ",
+                            item.vote_count
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: "#6b7280" }, children: [
+                      STATUS_LABELS[item.status],
+                      " \xB7 ",
+                      item.reply_count,
+                      " replies \xB7 ",
+                      new Date(item.created_at).toLocaleDateString()
+                    ] })
+                  ]
+                },
+                item._id
+              ))
+            ] }),
+            view === "new" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 12 }, children: Object.entries(TYPE_META).map(
+                ([type, meta]) => /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    onClick: () => setSelectedType(type),
+                    style: {
+                      padding: 8,
+                      borderRadius: 8,
+                      border: `2px solid ${selectedType === type ? meta.color : "#e5e7eb"}`,
+                      background: selectedType === type ? `${meta.color}10` : "#fff",
+                      cursor: "pointer",
+                      fontSize: 13,
+                      textAlign: "center"
+                    },
+                    children: [
+                      meta.icon,
+                      " ",
+                      meta.label
+                    ]
+                  },
+                  type
+                )
+              ) }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  placeholder: "Title",
+                  value: title,
+                  onChange: (e) => setTitle(e.target.value),
+                  style: {
+                    width: "100%",
+                    padding: 8,
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db",
+                    marginBottom: 8,
+                    fontSize: 14,
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "textarea",
+                {
+                  placeholder: "Describe your feedback\u2026",
+                  value: content,
+                  onChange: (e) => setContent(e.target.value),
+                  rows: 4,
+                  style: {
+                    width: "100%",
+                    padding: 8,
+                    borderRadius: 6,
+                    border: "1px solid #d1d5db",
+                    marginBottom: 8,
+                    fontSize: 14,
+                    resize: "vertical",
+                    boxSizing: "border-box"
+                  }
+                }
+              ),
+              window.html2canvas && /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  onClick: captureScreenshot,
+                  style: {
+                    background: "none",
+                    border: "1px solid #d1d5db",
+                    borderRadius: 6,
+                    padding: "6px 10px",
+                    cursor: "pointer",
+                    fontSize: 12,
+                    marginBottom: 8,
+                    color: screenshot ? "#10b981" : "#6b7280"
+                  },
+                  children: [
+                    "\u{1F4F7} ",
+                    screenshot ? "Screenshot captured \u2713" : "Capture screenshot"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  onClick: submit,
+                  disabled: submitting || !title.trim() || !content.trim(),
+                  style: {
+                    width: "100%",
+                    padding: 10,
+                    background: submitting ? "#9ca3af" : color,
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: 8,
+                    cursor: submitting ? "default" : "pointer",
+                    fontWeight: 600
+                  },
+                  children: submitting ? "Submitting\u2026" : "Submit"
+                }
+              )
+            ] }),
+            view === "detail" && selectedItem && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
+                /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: TYPE_META[selectedItem.type]?.color, fontWeight: 600, marginBottom: 4 }, children: [
+                  TYPE_META[selectedItem.type]?.icon,
+                  " ",
+                  TYPE_META[selectedItem.type]?.label
+                ] }),
+                /* @__PURE__ */ jsx3("h3", { style: { margin: "0 0 4px", fontSize: 16 }, children: selectedItem.title }),
+                /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: "#6b7280", marginBottom: 8 }, children: [
+                  STATUS_LABELS[selectedItem.status],
+                  " \xB7 ",
+                  new Date(selectedItem.created_at).toLocaleDateString()
+                ] }),
+                /* @__PURE__ */ jsx3("p", { style: { margin: 0, lineHeight: 1.5 }, children: selectedItem.content })
+              ] }),
+              /* @__PURE__ */ jsx3("hr", { style: { border: "none", borderTop: "1px solid #e5e7eb", margin: "12px 0" } }),
+              /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
+                /* @__PURE__ */ jsxs2("strong", { style: { fontSize: 13 }, children: [
+                  "Replies (",
+                  replies.length,
+                  ")"
+                ] }),
+                replies.map((r) => /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      padding: 8,
+                      marginTop: 8,
+                      borderRadius: 6,
+                      background: r.author_type === "developer" ? "#eff6ff" : "#f9fafb",
+                      borderLeft: `3px solid ${r.author_type === "developer" ? "#3b82f6" : "#d1d5db"}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2("div", { style: { fontSize: 11, color: "#6b7280", marginBottom: 2 }, children: [
+                        r.author_type === "developer" ? "\u{1F6E0}\uFE0F Developer" : "\u{1F464} You",
+                        r.author_name ? ` \xB7 ${r.author_name}` : "",
+                        " \xB7 ",
+                        new Date(r.created_at).toLocaleDateString()
+                      ] }),
+                      /* @__PURE__ */ jsx3("div", { style: { fontSize: 13 }, children: r.content })
+                    ]
+                  },
+                  r._id
+                ))
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6 }, children: [
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    placeholder: "Write a reply\u2026",
+                    value: replyText,
+                    onChange: (e) => setReplyText(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") submitReply();
+                    },
+                    style: {
+                      flex: 1,
+                      padding: 8,
+                      borderRadius: 6,
+                      border: "1px solid #d1d5db",
+                      fontSize: 13
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: submitReply,
+                    disabled: !replyText.trim(),
+                    style: {
+                      padding: "8px 12px",
+                      background: color,
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: 6,
+                      cursor: "pointer",
+                      fontSize: 13
+                    },
+                    children: "Send"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
 // src/hooks.ts
-import { useContext, useState, useCallback, useMemo } from "react";
+import { useContext as useContext2, useState as useState2, useCallback as useCallback2, useMemo, useEffect as useEffect3 } from "react";
 function useExperience() {
-  const ctx = useContext(ExperienceContext);
+  const ctx = useContext2(ExperienceContext);
   if (!ctx) throw new Error("useExperience must be used within ExperienceProvider");
   return ctx;
 }
@@ -121,28 +638,107 @@ function useFlag(flagName, defaultValue) {
   const experience = useExperience();
   return experience.getFlag(flagName, defaultValue);
 }
+var translationCache = {};
+var fetchPromises = /* @__PURE__ */ new Map();
 function useTranslation() {
-  const [locale, setLocaleState] = useState(
-    typeof navigator !== "undefined" ? navigator.language?.split("-")[0] || "en" : "en"
-  );
-  const t = useCallback((key, params) => {
-    let result = key;
+  const experience = useExperience();
+  const config = experience.config || {};
+  const appId = config.appId || "";
+  const apiBaseUrl = config.apiUrl || config.baseUrl || "https://experience-api.shellapps.com";
+  const [locale, setLocaleState] = useState2(() => {
+    if (typeof window === "undefined") return "en";
+    const saved = localStorage.getItem(`exp_locale_${appId}`);
+    if (saved) return saved;
+    return navigator.language?.split("-")[0] || "en";
+  });
+  const [translations, setTranslations] = useState2(() => {
+    if (translationCache[locale]) return translationCache[locale];
+    if (typeof window !== "undefined") {
+      try {
+        const cached = localStorage.getItem(`exp_translations_${appId}_${locale}`);
+        if (cached) {
+          const parsed = JSON.parse(cached);
+          translationCache[locale] = parsed;
+          return parsed;
+        }
+      } catch {
+      }
+    }
+    return {};
+  });
+  const [locales, setLocales] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const fetchTranslations = useCallback2(async (loc) => {
+    if (!appId) return {};
+    const cacheKey = `${appId}_${loc}`;
+    const existing = fetchPromises.get(cacheKey);
+    if (existing) return existing;
+    const promise = (async () => {
+      try {
+        const res = await fetch(`${apiBaseUrl}/api/v1/translations/${appId}/${loc}`);
+        if (!res.ok) return {};
+        const data = await res.json();
+        translationCache[loc] = data;
+        if (typeof window !== "undefined") {
+          try {
+            localStorage.setItem(`exp_translations_${appId}_${loc}`, JSON.stringify(data));
+          } catch {
+          }
+        }
+        return data;
+      } catch {
+        return {};
+      } finally {
+        fetchPromises.delete(cacheKey);
+      }
+    })();
+    fetchPromises.set(cacheKey, promise);
+    return promise;
+  }, [appId, apiBaseUrl]);
+  useEffect3(() => {
+    if (!appId) return;
+    fetch(`${apiBaseUrl}/api/v1/translations/${appId}/locales`).then((res) => res.ok ? res.json() : { locales: [] }).then((data) => setLocales(data.locales || [])).catch(() => {
+    });
+  }, [appId, apiBaseUrl]);
+  useEffect3(() => {
+    if (!appId) return;
+    if (translationCache[locale]) {
+      setTranslations(translationCache[locale]);
+      return;
+    }
+    setIsLoading(true);
+    fetchTranslations(locale).then((data) => {
+      setTranslations(data);
+      setIsLoading(false);
+    });
+  }, [locale, appId, fetchTranslations]);
+  const t = useCallback2((key, params) => {
+    let result = translations[key] ?? key;
+    if (result.includes("||") && params && "count" in params) {
+      const parts = result.split("||");
+      const count = Number(params.count);
+      result = count === 1 ? parts[0] ?? result : parts[1] ?? result;
+    }
     if (params) {
       for (const [k, v] of Object.entries(params)) {
         result = result.replace(new RegExp(`\\{\\{${k}\\}\\}`, "g"), String(v));
       }
     }
     return result;
-  }, []);
-  const setLocale = useCallback((newLocale) => {
+  }, [translations]);
+  const setLocale = useCallback2((newLocale) => {
     setLocaleState(newLocale);
-  }, []);
-  return { t, locale, setLocale, locales: [] };
+    if (typeof window !== "undefined") {
+      localStorage.setItem(`exp_locale_${appId}`, newLocale);
+    }
+  }, [appId]);
+  return { t, locale, setLocale, locales, isLoading };
 }
 export {
   ErrorBoundary,
   ExperienceContext,
   ExperienceProvider,
+  FeedbackButton,
   useExperience,
   useFlag,
   useTrack,