leadin / scripts / iframe / useAppEmbedder.ts

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

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