@saasquatch/component-environment 1.0.0-0

package/src/fetchLocale.ts

@@ -0,0 +1,52 @@
+import { getAppDomain, getTenantAlias } from "./environment";
+import { LOCALE_CONTEXT_NAME } from "./types";
+import { debug as _debug } from "./debug";
+
+const debug = (...args: any[]) => _debug(LOCALE_CONTEXT_NAME, ...args);
+
+const GET_LOCALE = `
+  query {
+    viewer {
+      ... on User {
+        locale
+      }
+    }
+  }
+`;
+
+interface GetLocaleResponse {
+  viewer: {
+    locale: string | null;
+  };
+}
+
+export async function fetchLocale(): Promise<string | undefined> {
+  debug("Fetching locale from GraphQL for current user");
+
+  try {
+    const result = await fetch(
+      `${getAppDomain()}/api/v1/${getTenantAlias()}/graphql`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          query: GET_LOCALE,
+        }),
+      }
+    );
+
+    if (!result.ok) {
+      throw new Error("Failed to fetch locale");
+    }
+
+    const json = await result.json();
+    if (json.errors) {
+      throw new Error(JSON.stringify(json.errors, null, 2));
+    }
+
+    return (json as GetLocaleResponse).viewer.locale || undefined;
+  } catch (e) {
+    debug(`Failed to fetch locale for current user`, (e as Error).message);
+    return undefined;
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./environment";
+export * from "./contexts/UserIdentityContext";
+export * from "./contexts/LocaleContext";
+export * from "./contexts/ProgramContext";

package/src/listeners.ts

@@ -0,0 +1,51 @@
+import equal from "@wry/equality";
+import { ContextListener, ListenerConnectionStatus } from "dom-context";
+import { USER_CONTEXT_NAME, LOCALE_CONTEXT_NAME } from "./types";
+import { UserIdentity } from "./types";
+import { lazilyStartLocaleContext } from "./contexts/LocaleContext";
+import { lazilyStartUserContext } from "./contexts/UserIdentityContext";
+import { fetchLocale } from "./fetchLocale";
+import { debug as _debug } from "./debug";
+
+const debug = (...args: any[]) => _debug(LOCALE_CONTEXT_NAME, ...args);
+
+const userContextListenerDiv = (() => {
+  const id = "__environment_context_listener";
+  let div = document.getElementById(id);
+  if (!div) {
+    div = document.createElement("div");
+    div.id = id;
+    document.documentElement.appendChild(div);
+  }
+  return div;
+})();
+
+// Listens to user changes and refetches the locale from GraphQL
+const userContextListenerForLocale = new ContextListener<
+  UserIdentity | undefined
+>({
+  contextName: USER_CONTEXT_NAME,
+  element: userContextListenerDiv,
+  onChange: async (next) => {
+    if (next) {
+      const userProvider = lazilyStartUserContext();
+      if (!equal(userProvider.context, next)) {
+        debug("User context changed, refetching locale");
+        const locale = await fetchLocale();
+        const localeProvider = lazilyStartLocaleContext();
+        if (localeProvider.context !== locale) {
+          debug(`New value fetched from GraphQL [${locale}]`);
+          localeProvider.context =
+            locale ||
+            window.widgetIdent?.locale ||
+            navigator.language.replace("-", "_");
+        }
+      }
+    }
+  },
+});
+
+export function startUserContextListenerForLocale() {
+  debug("Starting user context listener for locale updates");
+  userContextListenerForLocale.start();
+}

package/src/types.ts

@@ -0,0 +1,173 @@
+import type { ContextProvider } from "dom-context";
+
+declare global {
+  interface Window {
+    SquatchPortal?: PortalEnv;
+    widgetIdent?: WidgetIdent;
+    squatchUserIdentity?: ContextProvider<UserIdentity | undefined>;
+    squatchLocale?: ContextProvider<string | undefined>;
+    squatchProgramId?: ContextProvider<string | undefined>;
+  }
+}
+
+export type UserContextName = "sq:user-identity";
+export type LocaleContextName = "sq:locale";
+export type ProgramContextName = "sq:program-id";
+
+export const USER_CONTEXT_NAME: UserContextName = "sq:user-identity" as const;
+export const LOCALE_CONTEXT_NAME: LocaleContextName = "sq:locale" as const;
+export const PROGRAM_CONTEXT_NAME: ProgramContextName =
+  "sq:program-id" as const;
+
+/**
+ * The value stored in the UserContext
+ */
+export type UserIdentity = {
+  id: string;
+  accountId: string;
+  jwt?: string;
+  managedIdentity?: {
+    email: string;
+    emailVerified: boolean;
+    sessionData?: { [key: string]: any };
+  };
+};
+
+export type UserId = {
+  id: string;
+  accountId: string;
+};
+
+export interface DecodedSquatchJWT {
+  exp?: number;
+  user: {
+    accountId: string;
+    id: string;
+  };
+}
+
+// NOTE: Classic theme-engine JWT's do not have a typical payload,
+// they have a sub in the form base64(accountId):base64(userId)@tenantAlias:users
+export interface DecodedWidgetAPIJWT {
+  exp?: number;
+  sub: string;
+}
+
+export type EngagementMedium = "EMBED" | "POPUP";
+export const DEFAULT_MEDIUM: EngagementMedium = "EMBED" as const;
+
+/**
+ * Provided by the SaaSquatch GraphQL backend when a widget is rendered.
+ *
+ * Source: https://github.com/saasquatch/saasquatch/blob/805e51284f818f8656b6458bcee6181f378819d3/packages/saasquatch-core/app/saasquatch/controllers/api/widget/WidgetApi.java
+ *
+ */
+export interface WidgetIdent {
+  tenantAlias: string;
+  appDomain: string;
+  token: string;
+  userId: string;
+  accountId: string;
+  locale?: string;
+  engagementMedium?: "POPUP" | "EMBED";
+  programId?: string;
+  env?: string;
+}
+
+/**
+ * Portal env doesn't include User Id
+ */
+export type PortalEnv = Pick<
+  WidgetIdent,
+  "tenantAlias" | "appDomain" | "programId"
+>;
+
+/**
+ * An interface for interacting with the SaaSquatch Admin Portal.
+ *
+ * Used for rendering widgets in a preview/demo mode.
+ */
+export interface SquatchAdmin {
+  /**
+   * Provides a way of providing user feedback when a widget is rendered in the SaaSquatch admin portal
+   *
+   * @param text
+   */
+  showMessage(text: string): void;
+}
+
+/**
+ * Type for the Javascript environment added by https://github.com/saasquatch/squatch-android
+ *
+ * Should exist as `window.SquatchAndroid`
+ */
+export interface SquatchAndroid {
+  /**
+   *
+   * @param shareLink
+   * @param messageLink fallback URL to redirect to if the app is not installed
+   */
+  shareOnFacebook(shareLink: string, messageLink: string): void;
+
+  /**
+   * Shows a native Android toast
+   *
+   * @param text
+   */
+  showToast(text: string): void;
+}
+
+/**
+ * An interface provided by Squatch.js V2 for widgets.
+ *
+ * See: https://github.com/saasquatch/squatch-js/blob/8f2b218c9d55567e0cc12d27d635a5fb545e6842/src/widgets/Widget.ts#L47
+ *
+ */
+export interface SquatchJS2 {
+  /**
+   * Opens the current popup widget (if loaded as a popup)
+   */
+  open?: () => void;
+
+  /**
+   * Closes the current popup widget (if loaded as a popup)
+   */
+  close?: () => void;
+
+  /**
+   * DEPRECATED used to update user details from inside the widget.
+   *
+   * Should no longer be used. Replace with natively using the GraphQL API and re-rendering locally. Will be removed in a future version of Squatch.js
+   *
+   * @deprecated
+   */
+  reload(
+    userDetails: { email: string; firstName: string; lastName: string },
+    jwt: string
+  ): void;
+}
+
+export type Environment = EnvironmentSDK["type"];
+
+export type EnvironmentSDK =
+  | {
+      type: "SquatchJS2";
+      api: SquatchJS2;
+      widgetIdent: WidgetIdent;
+    }
+  | {
+      type: "SquatchAndroid";
+      android: SquatchAndroid;
+      widgetIdent: WidgetIdent;
+    }
+  | {
+      type: "SquatchPortal";
+      env: PortalEnv;
+    }
+  | {
+      type: "SquatchAdmin";
+      adminSDK: SquatchAdmin;
+    }
+  | {
+      type: "None";
+    };

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "include": ["src/**/*"]
+}