@embedreach/components 0.1.87 → 0.1.88

package/dist/chunks/index.js

@@ -5887,6 +5887,117 @@ var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
 process.env.NODE_ENV !== "development" ? function() {
   return null;
 } : ReactQueryDevtoolsPanel;
+class InvalidTokenError extends Error {
+}
+InvalidTokenError.prototype.name = "InvalidTokenError";
+function b64DecodeUnicode(str) {
+  return decodeURIComponent(atob(str).replace(/(.)/g, (m4, p2) => {
+    let code = p2.charCodeAt(0).toString(16).toUpperCase();
+    if (code.length < 2) {
+      code = "0" + code;
+    }
+    return "%" + code;
+  }));
+}
+function base64UrlDecode(str) {
+  let output = str.replace(/-/g, "+").replace(/_/g, "/");
+  switch (output.length % 4) {
+    case 0:
+      break;
+    case 2:
+      output += "==";
+      break;
+    case 3:
+      output += "=";
+      break;
+    default:
+      throw new Error("base64 string is not of the correct length");
+  }
+  try {
+    return b64DecodeUnicode(output);
+  } catch (err) {
+    return atob(output);
+  }
+}
+function jwtDecode(token, options) {
+  if (typeof token !== "string") {
+    throw new InvalidTokenError("Invalid token specified: must be a string");
+  }
+  options || (options = {});
+  const pos = options.header === true ? 0 : 1;
+  const part = token.split(".")[pos];
+  if (typeof part !== "string") {
+    throw new InvalidTokenError(`Invalid token specified: missing part #${pos + 1}`);
+  }
+  let decoded;
+  try {
+    decoded = base64UrlDecode(part);
+  } catch (e4) {
+    throw new InvalidTokenError(`Invalid token specified: invalid base64 for part #${pos + 1} (${e4.message})`);
+  }
+  try {
+    return JSON.parse(decoded);
+  } catch (e4) {
+    throw new InvalidTokenError(`Invalid token specified: invalid json for part #${pos + 1} (${e4.message})`);
+  }
+}
+const ErrorFallback = ({ error: error2 }) => /* @__PURE__ */ jsxs("div", { className: "p-6 max-w-lg mx-auto mt-10 bg-white rounded-lg shadow-md", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-start gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-12 w-12 rounded-full bg-red-100 text-red-600 mb-4", children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-6 w-6",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Oops! Something went wrong." })
+  ] }),
+  /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-4", children: "We have encountered a critical error and cannot continue. Please try refreshing the page." }),
+  error2 && /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-50 rounded border border-gray-200", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 font-mono", children: error2.toString() }) })
+] });
+class ErrorBoundary extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(error2) {
+    return { hasError: true, error: error2 };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.error("ErrorBoundary caught an error", error2, errorInfo);
+    this.setState({ errorInfo });
+  }
+  render() {
+    const { fallback, children: children2 } = this.props;
+    const { hasError, error: error2, errorInfo } = this.state;
+    if (hasError) {
+      if (fallback) {
+        return typeof fallback === "function" ? fallback(error2, errorInfo) : fallback;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "p-4 border border-red-300 rounded-md bg-red-50 text-red-800", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-2", children: "Something went wrong" }),
+        /* @__PURE__ */ jsxs("details", { className: "whitespace-pre-wrap text-sm", children: [
+          /* @__PURE__ */ jsx("summary", { children: "See error details" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2", children: error2?.toString() }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2", children: errorInfo?.componentStack })
+        ] })
+      ] });
+    }
+    return children2;
+  }
+}
 function e(e4) {
   function t3(e5, t4) {
     Error.captureStackTrace && Error.captureStackTrace(this, this.constructor), this.message = e5, this.code = t4;
@@ -8077,6 +8188,36 @@ const oe = (e4) => {
   const { ldClient: t3 } = useContext$1(u$1.reactContext);
   return t3;
 };
+const LaunchDarklyProvider = ({
+  children: children2,
+  tenantExternalId,
+  partnerId
+}) => {
+  const key = tenantExternalId && partnerId ? `${tenantExternalId}:${partnerId}` : "anonymous";
+  return /* @__PURE__ */ jsx(
+    D$1,
+    {
+      clientSideID: "67a3c277012e1f09c67de499",
+      context: {
+        kind: "user",
+        key,
+        custom: {
+          tenantExternalId,
+          partnerId
+        }
+      },
+      options: {
+        streaming: false
+      },
+      timeout: 2,
+      reactOptions: {
+        useCamelCaseFlagKeys: false,
+        sendEventsOnFlagRead: true
+      },
+      children: children2
+    }
+  );
+};
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1e6;
 let count$6 = 0;
@@ -35053,6 +35194,7 @@ const configDefaults = {
 };
 const Observability = ({
   tenantExternalId,
+  partnerId,
   debug
 }) => {
   const ldClient = oe();
@@ -35093,7 +35235,8 @@ const Observability = ({
         })
       ],
       resourceAttributes: {
-        ["tenant.externalId"]: tenantExternalId
+        ["tenant.externalId"]: tenantExternalId,
+        ["partner.id"]: partnerId
       }
     });
     sdk.start();
@@ -35114,7 +35257,6 @@ const Observability = ({
 };
 const ReachProvider = ({
   authToken: authToken2,
-  tenantExternalId,
   language,
   children: children2,
   theme: theme2,
@@ -35126,38 +35268,52 @@ const ReachProvider = ({
     }
     return createQueryClient();
   });
-  return /* @__PURE__ */ jsx("div", { "data-reach-root": true, className: "h-full w-full", children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
+  let tenantExternalId;
+  let partnerId;
+  try {
+    const decodedToken = jwtDecode(authToken2);
+    tenantExternalId = decodedToken?.tenantExternalId;
+    partnerId = decodedToken?.partnerId || decodedToken?.platformId;
+    if (!tenantExternalId || !partnerId) {
+      throw new Error("Invalid authentication token");
+    }
+  } catch (error2) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-6 max-w-lg mx-auto mt-10 bg-white rounded-lg shadow-md", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-red-600 mb-4", children: "Authentication Error" }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-700", children: "The provided authentication token is invalid. Please ensure you're using a valid token." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(ErrorFallback, {}), children: /* @__PURE__ */ jsx("div", { "data-reach-root": true, className: "h-full w-full", children: /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
     /* @__PURE__ */ jsxs(
-      D$1,
+      LaunchDarklyProvider,
       {
-        clientSideID: "67a3c277012e1f09c67de499",
-        context: {
-          kind: "user",
-          key: tenantExternalId || "anonymous",
-          custom: {
-            businessId: tenantExternalId
-            // Add any other custom attributes
-          }
-        },
-        options: {
-          streaming: false
-        },
-        timeout: 2,
-        reactOptions: {
-          useCamelCaseFlagKeys: false,
-          sendEventsOnFlagRead: true
-        },
+        tenantExternalId,
+        partnerId,
         children: [
-          /* @__PURE__ */ jsx(Observability, { tenantExternalId, debug }),
-          /* @__PURE__ */ jsx(I18nProvider, { language, initialLanguage: language?.default, children: /* @__PURE__ */ jsx(Provider$1, { initialTheme: theme2, children: /* @__PURE__ */ jsxs(Provider$2, { children: [
-            children2,
-            /* @__PURE__ */ jsx(Toaster, {})
-          ] }) }) })
+          /* @__PURE__ */ jsx(
+            Observability,
+            {
+              tenantExternalId,
+              partnerId,
+              debug
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            I18nProvider,
+            {
+              language,
+              initialLanguage: language?.default,
+              children: /* @__PURE__ */ jsx(Provider$1, { initialTheme: theme2, children: /* @__PURE__ */ jsxs(Provider$2, { children: [
+                children2,
+                /* @__PURE__ */ jsx(Toaster, {})
+              ] }) })
+            }
+          )
         ]
       }
     ),
     debug && /* @__PURE__ */ jsx(ReactQueryDevtools2, {})
-  ] }) });
+  ] }) }) });
 };
 function setRef$3(ref, value) {
   if (typeof ref === "function") {
@@ -45161,16 +45317,14 @@ const BasicLoader = ({
   ] });
 };
 const BlurDiv = ({ children: children2, className: className2 }) => {
-  return /* @__PURE__ */ jsx(
-    motion.div,
-    {
-      initial: { opacity: 0, filter: "blur(8px)" },
-      animate: { opacity: 1, filter: "blur(0px)" },
-      exit: { opacity: 0, filter: "blur(8px)" },
-      transition: { duration: 0.3, ease: "easeInOut" },
-      className: className2,
-      children: children2
-    }
+  return (
+    // <motion.div
+    //   initial={{ opacity: 0, filter: 'blur(8px)' }}
+    //   animate={{ opacity: 1, filter: 'blur(0px)' }}
+    //   exit={{ opacity: 0, filter: 'blur(8px)' }}
+    //   transition={{ duration: 0.3, ease: 'easeInOut' }}
+    //   className={className}>
+    /* @__PURE__ */ jsx("div", { className: className2, children: children2 })
   );
 };
 const IconDefinitions = {

package/dist/index.d.ts

@@ -117,9 +117,8 @@ declare interface LanguageConfig {
  * @interface ReachConfig
  */
 export declare interface ReachConfig {
-    theme?: ThemeConfig;
     authToken: string;
-    tenantExternalId: string;
+    theme?: ThemeConfig;
     /** Event callbacks */
     callbacks?: SDKCallbacks;
     /** Initial feature to load */
@@ -168,7 +167,6 @@ declare type ReauthCallback = () => Promise<string> | void;
 declare interface SDKCallbacks {
     /** Called when reauthentication is required */
     onReauthRequested: ReauthCallback;
-    /** Called when tenant information is requested */
     onTenantInformationRequested?: () => void;
 }