Cash payouts GA Frontend Updates

packages/bedrock-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/bedrock-components",
   "title": "Bedrock Components",
-  "version": "1.4.8",
+  "version": "1.5.0-0",
   "description": "Component library that adds advanced logic to your widgets and pages. Built and maintained by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Bedrock.svg",
   "main": "dist/index.cjs.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@raisins/stencil-docs-target": "^1.1.0",
-    "@saasquatch/component-boilerplate": "^1.6.7",
+    "@saasquatch/component-boilerplate": "^1.6.8-0",
     "@saasquatch/dom-context-hooks": "^1.0.5",
     "@saasquatch/stencil-hooks": "^2.0.2",
     "@saasquatch/stencilbook": "^1.0.0",

packages/bedrock-components/src/components/sqb-auth-template-switch/useAuthTemplateSwitch.ts

@@ -5,15 +5,15 @@ import { useTemplateChildren } from '../../utils/useTemplateChildren';
 const debug = debugFn('sq:useAuthTemplateSwitch');
 
 export function useAuthTemplateSwitch() {
-  const authToken = useToken();
+  const token = useToken();
 
   const [container, setContainer] = useState<HTMLDivElement>(undefined);
   const [slot, setSlot] = useState<HTMLDivElement>(undefined);
 
-  if (!authToken) debug('No user identity available');
+  if (!token) debug('No user identity available');
 
   const updateTemplates = useCallback(() => {
-    const isAuth = !!authToken;
+    const isAuth = !!token;
     const templates = slot.querySelectorAll<HTMLTemplateElement>(`template`);
     const template = Array.from(templates).find(t => t.slot === (isAuth ? 'logged-in' : 'logged-out'));
 
@@ -69,7 +69,7 @@ export function useAuthTemplateSwitch() {
         target.style.height = '25px';
       });
     }
-  }, [container, slot, authToken]);
+  }, [container, slot, token]);
 
   useEffect(() => {
     if (!container || !slot) {
@@ -81,7 +81,7 @@ export function useAuthTemplateSwitch() {
     updateTemplates();
 
     return useTemplateChildren({ parent: slot, callback: updateTemplates });
-  }, [slot, container, authToken]);
+  }, [slot, container, token]);
 
   return {
     setSlot,

packages/component-boilerplate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/component-boilerplate",
-  "version": "1.6.7",
+  "version": "1.6.8-0",
   "private": false,
   "description": "Boilerplate for writing web components for the SaaSquatch widget environments",
   "source": "src/index.ts",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@formatjs/intl": "^1.8.2",
-    "@saasquatch/component-environment": "^1.0.8",
+    "@saasquatch/component-environment": "^1.0.9-0",
     "@saasquatch/dom-context-hooks": "^1.0.5",
     "@saasquatch/stencil-hooks": "^2.0.2",
     "@saasquatch/universal-hooks": "^1.0.0",

packages/component-boilerplate/src/hooks/environment/index.ts

@@ -12,6 +12,7 @@ export const useEngagementMedium = getEngagementMedium;
 export {
   getEnvironmentSDK,
   setUserIdentity,
+  setVerificationContext,
   setProgramId,
   isDemo,
   DecodedSquatchJWT,
@@ -20,3 +21,4 @@ export {
 export * from "./useLocale";
 export * from "./useProgramId";
 export * from "./useUserIdentity";
+export * from "./useVerificationContext";

packages/component-boilerplate/src/hooks/environment/useQueryToken.ts

@@ -0,0 +1,9 @@
+import { useUserIdentity } from "./useUserIdentity";
+import { useVerificationContext } from "./useVerificationContext";
+
+export function useQueryToken() {
+  const verificationToken = useVerificationContext()?.token;
+  const userJwt = useUserIdentity()?.jwt;
+
+  return verificationToken || userJwt;
+}

packages/component-boilerplate/src/hooks/environment/useVerificationContext.ts

@@ -0,0 +1,30 @@
+import {
+  checkVerificationToken,
+  isDemo,
+  lazilyStartVerificationContext,
+  setVerificationContext,
+  VERIFICATION_CONTEXT_NAME,
+  VerificationContext,
+} from "@saasquatch/component-environment";
+import { useDomContext } from "@saasquatch/dom-context-hooks";
+import { useHost } from "../useHost";
+
+export function useVerificationContext(): VerificationContext | undefined {
+  lazilyStartVerificationContext();
+  const host = useHost();
+  const context = useDomContext(host, VERIFICATION_CONTEXT_NAME) as
+    | VerificationContext
+    | undefined;
+
+  const valid = checkVerificationToken(context?.token);
+  if (!isDemo() && context && !valid) {
+    setVerificationContext(undefined);
+    return undefined;
+  }
+
+  return context;
+}
+
+export function useVerificationToken() {
+  return useVerificationContext()?.token;
+}

packages/component-boilerplate/src/hooks/graphql/useBaseQuery.ts

@@ -80,12 +80,12 @@ function reducer<T>(
 export function useBaseQuery<T = any>(
   query: GqlType,
   initialState: BaseQueryData<T>,
-  options = { batch: true }
+  options = { batch: true, protected: false }
 ): [
   BaseQueryData<T>,
   (variables: unknown, skipLoading?: boolean) => Promise<T | Error>
 ] {
-  const client = useGraphQLClient();
+  const client = useGraphQLClient({ protected: options.protected });
   const [state, dispatch] = useReducer<BaseQueryData<T>, Action<T>>(
     reducer,
     initialState

packages/component-boilerplate/src/hooks/graphql/useGraphQLClient.ts

@@ -3,6 +3,12 @@ import memoize from "fast-memoize";
 import { BatchedGraphQLClient } from "../../BatchedGraphQLClient";
 import { useAppDomain, useTenantAlias, useToken } from "../environment";
 import { useHost } from "../useHost";
+import { useQueryToken } from "../environment/useQueryToken";
+import { useVerificationContext } from "../environment/useVerificationContext";
+
+type Options = {
+  protected?: boolean;
+};
 
 export const GRAPHQL_CONTEXT = "sq:graphql-client";
 
@@ -23,16 +29,17 @@ function createGraphQlClient(
 
 export const memoizedGraphQLClient = memoize(createGraphQlClient);
 
-function useGraphQLClient(): BatchedGraphQLClient {
+function useGraphQLClient(options?: Options): BatchedGraphQLClient {
   const token = useToken();
+  const verifiedToken = useVerificationContext()?.token;
   const appDomain = useAppDomain();
   const tenantAlias = useTenantAlias();
 
   // Memoization is shared. One client per domain, tenant and token (or null)
   const localClient: BatchedGraphQLClient = memoizedGraphQLClient(
     appDomain,
     tenantAlias,
-    token
+    options?.protected ? verifiedToken : token
   );
   const host = useHost();
   const clientFromContext = useDomContext<BatchedGraphQLClient>(

packages/component-boilerplate/src/hooks/graphql/useQuery.ts

@@ -36,13 +36,14 @@ export function useQuery<T = any>(
   query: GqlType,
   variables: unknown,
   skip?: boolean,
-  options?: { batch?: boolean }
+  options?: { batch?: boolean; protected?: boolean }
 ): QueryData<T> {
   const [state, update] = useBaseQuery<T>(
     query,
     initialQueryState as BaseQueryData<T>,
     {
       batch: true,
+      protected: false,
       ...(options || {}),
     }
   );

packages/component-environment/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/component-environment",
-  "version": "1.0.8",
+  "version": "1.0.9-0",
   "description": "Environment and contexts for SaaSquatch components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

packages/component-environment/src/contexts/UserIdentityContext.ts

@@ -62,6 +62,7 @@ export function userIdentityFromJwt(jwt?: string): UserIdentity | undefined {
 
     let userId: string | undefined = undefined;
     let accountId: string | undefined = undefined;
+    let email: string | undefined = undefined;
 
     if (isDecodedWidgetAPIJWT(decoded)) {
       // Pull the accountId and userId from the subject and Base64-decode them
@@ -72,6 +73,7 @@ export function userIdentityFromJwt(jwt?: string): UserIdentity | undefined {
     } else if (isDecodedSquatchJWT(decoded)) {
       accountId = decoded.user.accountId;
       userId = decoded.user.id;
+      email = decoded.user.email;
     }
 
     if (!userId || !accountId) {
@@ -88,6 +90,7 @@ export function userIdentityFromJwt(jwt?: string): UserIdentity | undefined {
     return {
       id: userId,
       accountId: accountId,
+      email,
       jwt,
     };
   } catch (e) {
@@ -112,6 +115,7 @@ function _getInitialValue(): UserIdentity | undefined {
       return {
         id: sdk.widgetIdent.userId,
         accountId: sdk.widgetIdent.accountId,
+        email: sdk.widgetIdent.email,
         jwt: sdk.widgetIdent.token,
       };
     case "SquatchPortal":