@go1/go1-embedding-react-sdk 0.0.1

package/README.md

@@ -0,0 +1,175 @@
+# Go1 Embedding React SDK
+
+A react hook to embed a Go1 content view in your site. Includes two-way messaging between your site and the Go1 content view.
+
+## Installation
+
+```sh
+npm install @go1/go1-embedding-react-sdk
+```
+
+## Usage
+
+Import the hook from the library and use it in your functional components.
+
+```tsx
+import { useMemo, useCallback } from "react";
+import { ContentViewProps, useGo1ContentView } from "@go1/go1-embedding-react-sdk";
+
+export function YourHostingComponent() {
+  const onGo1MessageReceived = useCallback(message => {
+    console.log('Received postMessage from Go1');
+    console.log(message);
+  }, []);
+
+  const options = useMemo<ContentViewProps>(() => {
+    return {
+      feature: 'metrics',
+      portalName: 'learning-incorporated-usa',
+      onGo1MessageReceived,
+    };
+  }, []);
+
+  const { sendMessageToGo1, ContentView } = useGo1ContentView(options);
+
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ContentView />
+    </div>
+  );
+}
+```
+
+# APIs
+
+### Types
+
+```typescript
+type OnGo1MessageReceived = (message: Go1Message) => void;
+
+type SendMessageToGo1 = (message: Go1Message) => void;
+
+interface Go1Message {
+  type: string;
+  payload?: any; //optional
+}
+
+interface ThemeInformation {
+  /** Hex string, starting with a #. Example #0437F2 */
+  primaryColor: string;
+}
+
+/**
+ * Used to specify how the feature should appear, or what data it should work with. 
+ * example: 
+ * {
+ *   id: 341134,
+ *   shouldShowHeading: false
+ * }
+ */
+interface FeatureAttributes {
+  [key: string]: number | string
+}
+
+interface InitOptions {
+  feature: string; // 'ai-chat' | 'explore' | 'preview';
+  featureAttributes?: FeatureAttributes; // optional
+  portalName?: string; //optional
+  onGo1MessageReceived?: OnGo1MessageReceived; //optional
+  additionalUserInfo?: any; //optional
+  themeInformation?: ThemeInformation; //optional
+  oneTimeToken?: string; //optional
+}
+```
+
+## Function: `useGo1ContentView`
+
+A react hook that will return
+
+- `sendMessageToGo1`: A function that allows you to send a message to the Go1 content view
+- `ContentView`: A react component to render the Go1 content view
+
+```typescript
+function useGo1ContentView(options: InitOptions): {
+  sendMessageToGo1: SendMessageToGo1;
+  ContentView: () => React.JSX.Element;
+};
+```
+
+### Usage
+
+```typescript
+const onGo1MessageReceived = useCallback(message => {
+  console.log('Received postMessage from Go1');
+  console.log(message);
+}, []);
+
+const options = useMemo<ContentViewProps>(() => {
+  return {
+    feature: 'ai-chat',
+    portalName: 'learning-incorporated-usa',
+    featureAttributes: {
+      id: 32973,
+    },
+    onGo1MessageReceived,
+    additionalUserInfo: {
+      department: 'sales',
+      goals: ['leadership', 'management']
+    },
+    themeInformation: {
+      primaryColor: '#0437F2'
+    },
+    oneTimeToken: '907687a6e81a458190fe4c21f05ee689'
+  };
+}, []);
+
+const { sendMessageToGo1, ContentView } = useGo1ContentView(options);
+
+// now to render the <ContentView>
+```
+
+## Function: `sendMessageToGo1`
+
+Send a message to the Go1 content view. Useful to control the user experience when an event starts on your website and the Go1 content view needs to be aware of it (and potentially perform other actions - this is `feature` dependent.)
+
+```typescript
+function sendMessageToGo1(message: Go1Message): void;
+```
+
+### Usage
+
+```typescript
+const message = {
+  type: "return_to_home_screen",
+};
+sendMessageToGo1(message);
+```
+
+## Function: `onGo1MessageReceived`
+
+Respond to events that have occurred in the Go1 content view. Useful to control the user experience when an event starts in the Go1 content view and your website needs to be aware of it.
+
+### Usage
+
+```typescript
+const onGo1MessageReceived = (message) => {
+  switch (message.type) {
+    case "enrolment_created": {
+      const { userId, courseId } = message.payload;
+      // perform appropriate actions for when a new enrolment is created
+      break;
+    }
+    case "category_favourite_added": {
+      const { userId, category } = message.payload;
+      // perform appropriate actions for when a new category is favourited
+      break;
+    }
+    default:
+      break;
+  }
+};
+```
+
+## Support
+
+https://www.go1.com/developers

package/dist/README.md

@@ -0,0 +1,175 @@
+# Go1 Embedding React SDK
+
+A react hook to embed a Go1 content view in your site. Includes two-way messaging between your site and the Go1 content view.
+
+## Installation
+
+```sh
+npm install @go1/go1-embedding-react-sdk
+```
+
+## Usage
+
+Import the hook from the library and use it in your functional components.
+
+```tsx
+import { useMemo, useCallback } from "react";
+import { ContentViewProps, useGo1ContentView } from "@go1/go1-embedding-react-sdk";
+
+export function YourHostingComponent() {
+  const onGo1MessageReceived = useCallback(message => {
+    console.log('Received postMessage from Go1');
+    console.log(message);
+  }, []);
+
+  const options = useMemo<ContentViewProps>(() => {
+    return {
+      feature: 'metrics',
+      portalName: 'learning-incorporated-usa',
+      onGo1MessageReceived,
+    };
+  }, []);
+
+  const { sendMessageToGo1, ContentView } = useGo1ContentView(options);
+
+  return (
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <ContentView />
+    </div>
+  );
+}
+```
+
+# APIs
+
+### Types
+
+```typescript
+type OnGo1MessageReceived = (message: Go1Message) => void;
+
+type SendMessageToGo1 = (message: Go1Message) => void;
+
+interface Go1Message {
+  type: string;
+  payload?: any; //optional
+}
+
+interface ThemeInformation {
+  /** Hex string, starting with a #. Example #0437F2 */
+  primaryColor: string;
+}
+
+/**
+ * Used to specify how the feature should appear, or what data it should work with. 
+ * example: 
+ * {
+ *   id: 341134,
+ *   shouldShowHeading: false
+ * }
+ */
+interface FeatureAttributes {
+  [key: string]: number | string
+}
+
+interface InitOptions {
+  feature: string; // 'ai-chat' | 'explore' | 'preview';
+  featureAttributes?: FeatureAttributes; // optional
+  portalName?: string; //optional
+  onGo1MessageReceived?: OnGo1MessageReceived; //optional
+  additionalUserInfo?: any; //optional
+  themeInformation?: ThemeInformation; //optional
+  oneTimeToken?: string; //optional
+}
+```
+
+## Function: `useGo1ContentView`
+
+A react hook that will return
+
+- `sendMessageToGo1`: A function that allows you to send a message to the Go1 content view
+- `ContentView`: A react component to render the Go1 content view
+
+```typescript
+function useGo1ContentView(options: InitOptions): {
+  sendMessageToGo1: SendMessageToGo1;
+  ContentView: () => React.JSX.Element;
+};
+```
+
+### Usage
+
+```typescript
+const onGo1MessageReceived = useCallback(message => {
+  console.log('Received postMessage from Go1');
+  console.log(message);
+}, []);
+
+const options = useMemo<ContentViewProps>(() => {
+  return {
+    feature: 'ai-chat',
+    portalName: 'learning-incorporated-usa',
+    featureAttributes: {
+      id: 32973,
+    },
+    onGo1MessageReceived,
+    additionalUserInfo: {
+      department: 'sales',
+      goals: ['leadership', 'management']
+    },
+    themeInformation: {
+      primaryColor: '#0437F2'
+    },
+    oneTimeToken: '907687a6e81a458190fe4c21f05ee689'
+  };
+}, []);
+
+const { sendMessageToGo1, ContentView } = useGo1ContentView(options);
+
+// now to render the <ContentView>
+```
+
+## Function: `sendMessageToGo1`
+
+Send a message to the Go1 content view. Useful to control the user experience when an event starts on your website and the Go1 content view needs to be aware of it (and potentially perform other actions - this is `feature` dependent.)
+
+```typescript
+function sendMessageToGo1(message: Go1Message): void;
+```
+
+### Usage
+
+```typescript
+const message = {
+  type: "return_to_home_screen",
+};
+sendMessageToGo1(message);
+```
+
+## Function: `onGo1MessageReceived`
+
+Respond to events that have occurred in the Go1 content view. Useful to control the user experience when an event starts in the Go1 content view and your website needs to be aware of it.
+
+### Usage
+
+```typescript
+const onGo1MessageReceived = (message) => {
+  switch (message.type) {
+    case "enrolment_created": {
+      const { userId, courseId } = message.payload;
+      // perform appropriate actions for when a new enrolment is created
+      break;
+    }
+    case "category_favourite_added": {
+      const { userId, category } = message.payload;
+      // perform appropriate actions for when a new category is favourited
+      break;
+    }
+    default:
+      break;
+  }
+};
+```
+
+## Support
+
+https://www.go1.com/developers

package/dist/common/constants.d.ts

@@ -0,0 +1 @@
+export declare const GO1_MESSAGE = "go1Message";

package/dist/common/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GO1_MESSAGE = void 0;
+exports.GO1_MESSAGE = 'go1Message';

package/dist/common/types.d.ts

@@ -0,0 +1,29 @@
+export type OnGo1MessageReceived = (message: Go1Message) => void;
+export type SendMessageToGo1 = (message: Go1Message) => void;
+export type IframesMap = {
+    [key: string]: HTMLIFrameElement;
+};
+export interface AdditionalInfoMessage {
+    additionalUserInfo?: any;
+    themeInformation?: ThemeInformation;
+}
+export interface ThemeInformation {
+    primaryColor: string;
+}
+export interface Go1Message {
+    type: string;
+    payload?: any;
+}
+export interface FeatureAttributes {
+    [key: string]: number | string;
+}
+export interface InitOptions {
+    feature: string;
+    iframeParentId: string;
+    featureAttributes?: FeatureAttributes;
+    portalName?: string;
+    onGo1MessageReceived?: OnGo1MessageReceived;
+    additionalUserInfo?: any;
+    themeInformation?: ThemeInformation;
+    oneTimeToken?: string;
+}

package/dist/go1-embedding-react-sdk/src/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { InitOptions, SendMessageToGo1 } from '../../common/types';
+export interface ContentViewProps extends Omit<InitOptions, 'iframeParentId'> {
+    baseURL?: string;
+}
+export declare function useGo1ContentView(props: ContentViewProps): {
+    sendMessageToGo1: SendMessageToGo1;
+    ContentView: (userProps?: React.IframeHTMLAttributes<HTMLIFrameElement>) => React.JSX.Element;
+};

package/dist/go1-embedding-react-sdk/src/index.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGo1ContentView = void 0;
+const React = require("react");
+const react_1 = require("react");
+const constants_1 = require("../../common/constants");
+function useGo1ContentView(props) {
+    const { feature, featureAttributes, portalName, oneTimeToken, onGo1MessageReceived, additionalUserInfo, themeInformation, baseURL, } = props;
+    const iframeRef = (0, react_1.useRef)(null);
+    const url = baseURL || 'https://embedding.go1.com';
+    let { iframeURL, iframeID } = (0, react_1.useMemo)(() => {
+        let iframeURL = new URL(`${url}/${feature}`);
+        if (featureAttributes) {
+            const { id, ...rest } = featureAttributes;
+            if (id) {
+                iframeURL.pathname += `/${id}`;
+            }
+            const entries = Object.entries(rest);
+            for (let [key, value] of entries) {
+                iframeURL.searchParams.append(key, `${value}`);
+            }
+        }
+        if (portalName) {
+            iframeURL.searchParams.append('portal_id', portalName);
+        }
+        if (oneTimeToken) {
+            iframeURL.searchParams.append('oneTimeToken', oneTimeToken);
+        }
+        const iframeID = `go1-iframe-${feature}`;
+        return { iframeURL, iframeID };
+    }, [url, feature, oneTimeToken, portalName, featureAttributes]);
+    const sendMessageToGo1 = (0, react_1.useCallback)((message) => {
+        iframeRef.current?.contentWindow?.postMessage(message, url);
+    }, [url]);
+    const eventListenerInstance = (0, react_1.useCallback)((event) => {
+        const { _type, ...rest } = event.data;
+        if (_type === constants_1.GO1_MESSAGE) {
+            if (rest.type === 'go1_app_initialised') {
+                sendMessageToGo1({
+                    type: 'set_additional_embedding_data',
+                    payload: {
+                        additionalUserInfo,
+                        themeInformation,
+                    },
+                });
+            }
+            else {
+                if (onGo1MessageReceived) {
+                    onGo1MessageReceived(rest);
+                }
+            }
+        }
+    }, [
+        additionalUserInfo,
+        sendMessageToGo1,
+        onGo1MessageReceived,
+        themeInformation,
+    ]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('message', eventListenerInstance);
+        return () => {
+            window.removeEventListener('message', eventListenerInstance);
+        };
+    }, [eventListenerInstance]);
+    const ContentView = (0, react_1.useCallback)((userProps) => {
+        return Go1ContentView(iframeRef, iframeURL, iframeID, userProps);
+    }, [iframeRef, iframeURL, iframeID]);
+    return { sendMessageToGo1, ContentView };
+}
+exports.useGo1ContentView = useGo1ContentView;
+function Go1ContentView(iframeRef, iframeURL, iframeID, userProps) {
+    return (React.createElement("iframe", { id: iframeID, ref: iframeRef, src: iframeURL.toString(), style: { border: 0, width: '100%', height: '100%' }, sandbox: 'allow-popups allow-popups-to-escape-sandbox allow-scripts allow-same-origin allow-forms', ...userProps }));
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@go1/go1-embedding-react-sdk",
+  "version": "0.0.1",
+  "description": "A React library to embed GO1 content into your website.",
+  "main": "dist/go1-embedding-react-sdk/src/index.js",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Go1",
+    "email": "tim.sawtell@go1.com",
+    "url": "https://go1.com"
+  },
+  "keywords": [
+    "@go1/go1-embedding-js-sdk",
+    "Go1"
+  ],
+  "scripts": {
+    "test": "jest"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
+    "jest": "^29.6.1",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  }
+}