leadin / scripts / iframe / useAppEmbedder.ts

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

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