leadin / scripts / iframe / useAppEmbedder.ts

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

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