leadin / scripts / iframe / useAppEmbedder.ts

useAppEmbedder.ts in HubSpot All-In-One Marketing – Forms, Popups, Live Chat 11.1.21, at scripts/iframe/useAppEmbedder.ts

234 lines 5.6 KB

Raw Download Zip

1	import { useEffect } from 'react';
2	import Raven from '../lib/Raven';
3
4	import {
5	accountName,
6	adminUrl,
7	connectionStatus,
8	deviceId,
9	hubspotBaseUrl,
10	leadinQueryParams,
11	locale,
12	plugins,
13	portalDomain,
14	portalEmail,
15	portalId,
16	reviewSkippedDate,
17	refreshToken,
18	impactLink,
19	theme,
20	lastAuthorizeTime,
21	lastDeauthorizeTime,
22	lastDisconnectTime,
23	leadinPluginVersion,
24	phpVersion,
25	wpVersion,
26	contentEmbed,
27	requiresContentEmbedScope,
28	refreshTokenError,
29	LeadinConfig,
30	} from '../constants/leadinConfig';
31	import { App, AppIframe } from './constants';
32	import { messageMiddleware } from './messageMiddleware';
33	import { resizeWindow, useIframeNotRendered } from '../utils/iframe';
34
35	type PartialLeadinConfig = Pick<
36	LeadinConfig,
37	\| 'accountName'
38	\| 'adminUrl'
39	\| 'connectionStatus'
40	\| 'deviceId'
41	\| 'plugins'
42	\| 'portalDomain'
43	\| 'portalEmail'
44	\| 'portalId'
45	\| 'reviewSkippedDate'
46	\| 'refreshToken'
47	\| 'impactLink'
48	\| 'theme'
49	\| 'trackConsent'
50	\| 'lastAuthorizeTime'
51	\| 'lastDeauthorizeTime'
52	\| 'lastDisconnectTime'
53	\| 'leadinPluginVersion'
54	\| 'phpVersion'
55	\| 'wpVersion'
56	\| 'contentEmbed'
57	\| 'requiresContentEmbedScope'
58	\| 'refreshTokenError'
59	>;
60
61	type AppIntegrationConfig = Pick<LeadinConfig, 'adminUrl'>;
62
63	const getIntegrationConfig = (): AppIntegrationConfig => {
64	return {
65	adminUrl: leadinQueryParams.adminUrl,
66	};
67	};
68
69	/**
70	* A modified version of the original leadinConfig that is passed to some integrated apps.
71	*
72	* Important:
73	* Try not to add new fields here.
74	* This config is already too large and broad in scope.
75	* It tightly couples the apps that use it with the WordPress plugin.
76	* Consider instead passing new required fields as new entry to PluginAppOptions or app-specific options.
77	*/
78	type AppLeadinConfig = {
79	admin: string;
80	company: string;
81	email: string;
82	firstName: string;
83	irclickid: string;
84	justConnected: string;
85	lastName: string;
86	mpid: string;
87	nonce: string;
88	websiteName: string;
89	} & PartialLeadinConfig;
90
91	const getLeadinConfig = (): AppLeadinConfig => {
92	const utm_query_params = Object.keys(leadinQueryParams)
93	.filter(x => /^utm/.test(x))
94	.reduce(
95	(p: { [key: string]: string }, c: string) => ({
96	[c]: leadinQueryParams[c],
97	...p,
98	}),
99	{}
100	);
101	return {
102	accountName,
103	admin: leadinQueryParams.admin,
104	adminUrl,
105	company: leadinQueryParams.company,
106	connectionStatus,
107	deviceId,
108	email: leadinQueryParams.email,
109	firstName: leadinQueryParams.firstName,
110	irclickid: leadinQueryParams.irclickid,
111	justConnected: leadinQueryParams.justConnected,
112	lastName: leadinQueryParams.lastName,
113	lastAuthorizeTime,
114	lastDeauthorizeTime,
115	lastDisconnectTime,
116	leadinPluginVersion,
117	mpid: leadinQueryParams.mpid,
118	nonce: leadinQueryParams.nonce,
119	phpVersion,
120	plugins,
121	portalDomain,
122	portalEmail,
123	portalId,
124	reviewSkippedDate,
125	theme,
126	trackConsent: leadinQueryParams.trackConsent,
127	websiteName: leadinQueryParams.websiteName,
128	wpVersion,
129	contentEmbed,
130	requiresContentEmbedScope,
131	refreshTokenError,
132	...utm_query_params,
133	};
134	};
135
136	const getAppOptions = (app: App, createRoute = false) => {
137	const {
138	IntegratedAppOptions,
139	FormsAppOptions,
140	LiveChatAppOptions,
141	PluginAppOptions,
142	}: any = window;
143	let options;
144	switch (app) {
145	case App.Plugin:
146	options = new PluginAppOptions().setLeadinConfig(getLeadinConfig());
147	break;
148	case App.PluginSettings:
149	options = new PluginAppOptions()
150	.setLeadinConfig(getLeadinConfig())
151	.setPluginSettingsInit();
152	break;
153	case App.Forms:
154	options = new FormsAppOptions().setIntegratedAppConfig(
155	getIntegrationConfig()
156	);
157	if (createRoute) {
158	options = options.setCreateFormAppInit();
159	}
160	break;
161	case App.LiveChat:
162	options = new LiveChatAppOptions();
163	if (createRoute) {
164	options = options.setCreateLiveChatAppInit();
165	}
166	break;
167	default:
168	options = new IntegratedAppOptions();
169	}
170
171	return options;
172	};
173
174	export default function useAppEmbedder(
175	app: App,
176	createRoute: boolean,
177	container: HTMLElement \| null
178	) {
179	console.info(
180	'HubSpot plugin - starting app embedder for:',
181	AppIframe[app],
182	container
183	);
184	const iframeNotRendered = useIframeNotRendered(AppIframe[app]);
185
186	useEffect(() => {
187	const { IntegratedAppEmbedder }: any = window;
188
189	if (IntegratedAppEmbedder) {
190	const options = getAppOptions(app, createRoute)
191	.setLocale(locale)
192	.setDeviceId(deviceId)
193	.setRefreshToken(refreshToken);
194
195	const embedder = new IntegratedAppEmbedder(
196	AppIframe[app],
197	portalId,
198	hubspotBaseUrl,
199	resizeWindow,
200	refreshToken ? '' : impactLink
201	).setOptions(options);
202
203	embedder.subscribe(messageMiddleware(embedder));
204	embedder.attachTo(container, true);
205	embedder.postStartAppMessage(); // lets the app know all all data has been passed to it
206
207	(window as any).embedder = embedder;
208	}
209	}, []);
210
211	if (iframeNotRendered) {
212	console.error('HubSpot plugin Iframe not rendered', {
213	portalId,
214	container,
215	appName: AppIframe[app],
216	hasIntegratedAppEmbedder: !!(window as any).IntegratedAppEmbedder,
217	});
218	Raven.captureException(new Error('Leadin Iframe not rendered'), {
219	fingerprint: ['USE_APP_EMBEDDER', 'IFRAME_SETUP_ERROR'],
220	extra: {
221	portalId,
222	container,
223	app,
224	hubspotBaseUrl,
225	impactLink,
226	appName: AppIframe[app],
227	hasRefreshToken: !!refreshToken,
228	},
229	});
230	}
231
232	return iframeNotRendered;
233	}
234