@saasquatch/component-environment 1.0.0-3 → 1.0.0-4

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@saasquatch/component-environment",
-  "version": "1.0.0-3",
+  "version": "1.0.0-4",
   "description": "Environment and contexts for SaaSquatch components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "files": [
+    "dist/"
+  ],
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",
     "test": "echo \"Error: no test specified\" && exit 1"

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [1.0.0] - 2022-06-16
-
-Initial version.
-
-[unreleased]: https://github.com/saasquatch/program-tools/compare/component-environment@1.0.0...HEAD
-[1.0.0]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fcomponent-environment%401.0.0

package/src/contexts/LocaleContext.ts

@@ -1,50 +0,0 @@
-import { ContextProvider } from "dom-context";
-import { LOCALE_CONTEXT_NAME } from "../types";
-import { debug as _debug } from "../debug";
-
-const debug = (...args: any[]) => _debug(LOCALE_CONTEXT_NAME, ...args);
-
-/**
- * Lazily start the locale context provider. If it already exists, the existing provider is
- * returned. This function is safe to call multiple times.
- *
- * @returns The global locale context provider
- */
-export function lazilyStartLocaleContext() {
-  let globalProvider = window.squatchLocale;
-
-  if (!globalProvider) {
-    debug("Creating locale context provider");
-
-    globalProvider = new ContextProvider<string | undefined>({
-      element: document.documentElement,
-      initialState:
-        window.widgetIdent?.locale || navigator.language.replace("-", "_"),
-      contextName: LOCALE_CONTEXT_NAME,
-    }).start();
-
-    window.squatchLocale = globalProvider;
-  }
-
-  return globalProvider;
-}
-
-/**
- * Overide the globally defined Locale context
- *
- * @param locale the new locale used by the user
- */
-export function setLocale(locale?: string) {
-  const globalProvider = lazilyStartLocaleContext();
-  if (globalProvider.context !== locale) {
-    debug(`Setting locale context value [${locale}]`);
-    globalProvider.context = locale;
-  }
-}
-
-/**
- * Get the current value of the locale context
- */
-export function getLocale() {
-  return window.squatchLocale?.context;
-}

package/src/contexts/ProgramContext.ts

@@ -1,50 +0,0 @@
-import { ContextProvider } from "dom-context";
-import { PROGRAM_CONTEXT_NAME } from "../types";
-import { debug as _debug } from "../debug";
-
-const debug = (...args: any[]) => _debug(PROGRAM_CONTEXT_NAME, ...args);
-
-/**
- * Lazily start the program context provider. If it already exists, the existing provider is
- * returned. This function is safe to call multiple times.
- *
- * @returns The global program context provider
- */
-export function lazilyStartProgramContext() {
-  let globalProvider = window.squatchProgramId;
-
-  if (!globalProvider) {
-    debug("Creating program context provider");
-
-    // Lazily creates a global provider
-    globalProvider = new ContextProvider<string | undefined>({
-      element: document.documentElement,
-      initialState: window.widgetIdent?.programId || undefined,
-      contextName: PROGRAM_CONTEXT_NAME,
-    }).start();
-
-    window.squatchProgramId = globalProvider;
-  }
-
-  return globalProvider;
-}
-
-/**
- * Overide the globally defined Program ID context
- *
- * @param programId the new programID used by the user, or undefined if logged out
- */
-export function setProgramId(programId: string | undefined) {
-  const globalProvider = lazilyStartProgramContext();
-  if (globalProvider.context !== programId) {
-    debug(`Setting program context value [${programId}]`);
-    globalProvider.context = programId;
-  }
-}
-
-/**
- * Get the current value of the program context
- */
-export function getProgramId() {
-  return window.squatchLocale?.context;
-}

package/src/contexts/UserIdentityContext.ts

@@ -1,164 +0,0 @@
-import decode from "jwt-decode";
-import { ContextProvider } from "dom-context";
-import { equal } from "@wry/equality";
-import { getEnvironmentSDK } from "../environment";
-import {
-  USER_CONTEXT_NAME,
-  UserIdentity,
-  DecodedSquatchJWT,
-  DecodedWidgetAPIJWT,
-} from "../types";
-import { startUserContextListenerForLocale } from "../listeners";
-import { debug as _debug } from "../debug";
-
-const debug = (...args: any[]) => _debug(USER_CONTEXT_NAME, ...args);
-
-/**
- * Lazily start the user context provider. If it already exists, the existing provider is
- * returned. This function is safe to call multiple times.
- *
- * @returns The global user context provider
- */
-export function lazilyStartUserContext() {
-  let globalProvider = window.squatchUserIdentity;
-
-  if (!globalProvider) {
-    debug("Creating user context provider");
-
-    // Lazily creates a global provider
-    globalProvider = new ContextProvider<UserIdentity | undefined>({
-      element: document.documentElement,
-      initialState: _getInitialValue(),
-      contextName: USER_CONTEXT_NAME,
-    }).start();
-
-    window.squatchUserIdentity = globalProvider;
-    startUserContextListenerForLocale();
-  }
-
-  return globalProvider;
-}
-
-function isDecodedSquatchJWT(decoded: any): decoded is DecodedSquatchJWT {
-  return decoded.user && decoded.user.id && decoded.user.accountId;
-}
-
-function isDecodedWidgetAPIJWT(decoded: any): decoded is DecodedWidgetAPIJWT {
-  return decoded.sub && /.*:.*@.*:users/.test(decoded.sub);
-}
-
-/**
- * Extract a user identity from a JWT
- *
- * @param jwt The JWT to extract a user identity from
- * @returns The user identity or undefined if the JWT is not valid
- */
-export function userIdentityFromJwt(jwt?: string): UserIdentity | undefined {
-  if (!jwt) return undefined;
-
-  try {
-    const decoded = decode<DecodedSquatchJWT | DecodedWidgetAPIJWT>(jwt);
-    const exp = decoded.exp;
-
-    let userId: string | undefined = undefined;
-    let accountId: string | undefined = undefined;
-
-    if (isDecodedWidgetAPIJWT(decoded)) {
-      // Pull the accountId and userId from the subject and Base64-decode them
-      // NOTE: This is to support classic theme engine widget token generation
-      const matches = decoded.sub.match(/(.*):(.*)@(.*):users/);
-      if (matches?.[1]) accountId = atob(matches[1]);
-      if (matches?.[2]) userId = atob(matches[2]);
-    } else if (isDecodedSquatchJWT(decoded)) {
-      accountId = decoded.user.accountId;
-      userId = decoded.user.id;
-    }
-
-    if (!userId || !accountId) {
-      return undefined;
-    }
-
-    // Check if the JWT has expired
-    if (exp && Date.now() >= exp * 1000) {
-      return undefined;
-    }
-
-    return {
-      id: userId,
-      accountId: accountId,
-      jwt,
-    };
-  } catch (e) {
-    // Invalid JWT
-    return undefined;
-  }
-}
-
-function _getInitialValue(): UserIdentity | undefined {
-  const sdk = getEnvironmentSDK();
-  switch (sdk.type) {
-    case "SquatchAndroid":
-    case "SquatchJS2":
-      return {
-        id: sdk.widgetIdent.userId,
-        accountId: sdk.widgetIdent.accountId,
-        jwt: sdk.widgetIdent.token,
-      };
-    case "SquatchPortal":
-      // Portals can have the jwt provided as a URL parameter, so look for that first
-      const searchParams = new URLSearchParams(document.location.search);
-      if (searchParams.has("jwt")) {
-        return userIdentityFromJwt(searchParams.get("jwt")!);
-      }
-
-      // Look for user identity in local storage
-      const stored = localStorage.getItem(USER_CONTEXT_NAME);
-      if (!stored) return undefined;
-      try {
-        const potentialUserIdent = JSON.parse(stored) as UserIdentity;
-        const identity = userIdentityFromJwt(potentialUserIdent.jwt);
-        if (identity) {
-          return {
-            ...potentialUserIdent, // for any stored managedIdentity fields
-            ...identity,
-          };
-        }
-        return undefined;
-      } catch (e) {
-        // Not valid JSON
-        return undefined;
-      }
-    case "SquatchAdmin":
-    case "None":
-      // Not logged in for admin portal / none default case
-      return undefined;
-  }
-}
-
-/**
- * Overide the globally defined user context, and persists the user identity in local storage
- *
- * @param identity the new identity of the user, or undefined if logged out
- */
-export function setUserIdentity(identity?: UserIdentity) {
-  const globalProvider = lazilyStartUserContext();
-
-  if (!equal(globalProvider.context, identity)) {
-    debug(`Setting user context value [${JSON.stringify(identity)}]`);
-    globalProvider.context = identity;
-  }
-
-  // Portals store identity in local storage
-  if (identity && getEnvironmentSDK().type === "SquatchPortal") {
-    localStorage.setItem(USER_CONTEXT_NAME, JSON.stringify(identity));
-  } else if (!identity) {
-    localStorage.removeItem(USER_CONTEXT_NAME);
-  }
-}
-
-/**
- * Get the current value of the user context
- */
-export function getUserIdentity() {
-  return window.squatchUserIdentity?.context;
-}

package/src/debug.ts

@@ -1,7 +0,0 @@
-const debugEnabled = localStorage.getItem("debug");
-
-export function debug(ns: string, ...args: any[]) {
-  if (debugEnabled) {
-    console.debug(`sq:environment:${ns}`, ...args);
-  }
-}

package/src/environment.ts

@@ -1,114 +0,0 @@
-import {
-  Environment,
-  EnvironmentSDK,
-  EngagementMedium,
-  DEFAULT_MEDIUM,
-} from "./types";
-
-/**
- * Get the type of environment that this widget is being rendered in
- *
- * Should never return null.
- */
-export function getEnvironment(): Environment {
-  return getEnvironmentSDK().type;
-}
-
-/**
- * Get the SDK for interacting with the host environment
- */
-export function getEnvironmentSDK(): EnvironmentSDK {
-  //@ts-ignore
-  if (window["SquatchAndroid"]) {
-    return {
-      type: "SquatchAndroid",
-      //@ts-ignore
-      android: window["SquatchAndroid"] as SquatchAndroid,
-      //@ts-ignore
-      widgetIdent: window["widgetIdent"],
-    };
-  }
-
-  //@ts-ignore
-  if (window["SquatchPortal"]) {
-    return {
-      type: "SquatchPortal",
-      //@ts-ignore
-      env: window["SquatchPortal"],
-    };
-  }
-
-  //@ts-ignore
-  if (window["SquatchAdmin"]) {
-    return {
-      type: "SquatchAdmin",
-      //@ts-ignore
-      adminSDK: window["SquatchAdmin"] as SquatchAdmin,
-    };
-  }
-
-  // Vanilla components mutates `widgetIdent` for portal, causing boilerplate to render as SquatchJS2
-  if (window["widgetIdent"] && window["widgetIdent"]?.env !== "demo") {
-    return {
-      type: "SquatchJS2",
-      //@ts-ignore
-      api: window.frameElement?.["squatchJsApi"],
-      //@ts-ignore
-      widgetIdent: window["widgetIdent"],
-    };
-  }
-
-  return {
-    type: "None",
-  };
-}
-
-export function isDemo() {
-  const sdk = getEnvironmentSDK();
-  return sdk.type === "None" || sdk.type === "SquatchAdmin";
-}
-
-// Fake tenant alias in demo mode
-const FAKE_TENANT = "demo";
-
-export function getTenantAlias(): string {
-  const sdk = getEnvironmentSDK();
-  switch (sdk.type) {
-    case "SquatchAndroid":
-    case "SquatchJS2":
-      return sdk.widgetIdent.tenantAlias;
-    case "SquatchAdmin":
-    case "None":
-      return FAKE_TENANT;
-    case "SquatchPortal":
-      return sdk.env.tenantAlias;
-  }
-}
-
-const DEFAULT_DOMAIN = "https://app.referralsaasquatch.com";
-export function getAppDomain(): string {
-  const sdk = getEnvironmentSDK();
-  switch (sdk.type) {
-    case "SquatchAndroid":
-    case "SquatchJS2":
-      return sdk.widgetIdent.appDomain;
-    case "SquatchPortal":
-      return sdk.env?.appDomain || DEFAULT_DOMAIN;
-    case "SquatchAdmin":
-    case "None":
-      return DEFAULT_DOMAIN;
-  }
-}
-
-export function getEngagementMedium(): EngagementMedium {
-  const sdk = getEnvironmentSDK();
-  switch (sdk.type) {
-    case "SquatchJS2":
-      return sdk.widgetIdent.engagementMedium || DEFAULT_MEDIUM;
-    case "SquatchAndroid":
-    case "SquatchPortal":
-    case "SquatchAdmin":
-    case "None":
-      return DEFAULT_MEDIUM;
-  }
-}

package/src/fetchLocale.ts

@@ -1,58 +0,0 @@
-import { getAppDomain, getTenantAlias } from "./environment";
-import { getUserIdentity } from "./contexts/UserIdentityContext";
-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 {
-  data: {
-    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",
-          Authorization: `Bearer ${getUserIdentity()?.jwt}`,
-        },
-        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).data.viewer.locale || undefined;
-  } catch (e) {
-    debug(`Failed to fetch locale for current user`, (e as Error).message);
-    return undefined;
-  }
-}

package/src/index.ts

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

package/src/listeners.ts

@@ -1,52 +0,0 @@
-import { ContextListener } from "dom-context";
-import { USER_CONTEXT_NAME, LOCALE_CONTEXT_NAME } from "./types";
-import { UserIdentity } from "./types";
-import { lazilyStartLocaleContext } from "./contexts/LocaleContext";
-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) => {
-    const localeProvider = lazilyStartLocaleContext();
-    const defaultLocale =
-      window.widgetIdent?.locale || navigator.language.replace("-", "_");
-
-    let newLocale;
-    if (next) {
-      debug("User context changed, refetching locale");
-      const locale = await fetchLocale();
-      if (localeProvider.context !== locale) {
-        debug(`New value fetched from GraphQL [${locale}]`);
-        newLocale = locale || defaultLocale;
-      }
-    } else {
-      newLocale = defaultLocale;
-    }
-
-    debug(`Setting locale context to [${newLocale}]`);
-    localeProvider.context = newLocale;
-  },
-});
-
-export function startUserContextListenerForLocale() {
-  debug("Starting user context listener for locale updates");
-  userContextListenerForLocale.start();
-}

package/src/types.ts

@@ -1,173 +0,0 @@
-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

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