give / src / DonationForms / resources / app / utilities / useDonationFormPubSub.ts

useDonationFormPubSub.ts in GiveWP – Donation Plugin and Fundraising Platform 4.15.5, at src/DonationForms/resources/app/utilities/useDonationFormPubSub.ts

183 lines 4.9 KB

Raw Download Zip

1	import {RefObject, useEffect} from 'react';
2	import {iframeRef} from '@givewp/form-builder/components/canvas/DesignPreview';
3	import {FormSettings} from '@givewp/form-builder/types';
4	import {FormColors, FormGoal, RequireAtLeastOne} from '@givewp/forms/types';
5
6	/**
7	* Events used in design mode
8	*/
9	export const PREVIEW_EVENTS = {
10	SETTINGS: 'preview:settings',
11	GOAL: 'preview:goal',
12	GOAL_SOURCE: 'preview:goal_source',
13	COLORS: 'preview:colors',
14	CSS: 'preview:css',
15	DESIGN_SETTINGS: 'preview:design-settings',
16	}
17
18	/**
19	* Simple Publish/Subscribe system used for handling form state in preview mode
20	*
21	* @since 3.1.0
22	*/
23	export default function useDonationFormPubSub() {
24
25	const events = {};
26
27	useEffect(() => {
28	addEventListener('message', eventListener, false);
29	return () => removeEventListener('message', eventListener);
30	}, []);
31
32	const getMessage = (message: MessageEvent) => {
33	// handle IframeResizer messages
34	if (typeof message.data === 'string') {
35	if (message.data.includes('[iFrameSizer]message:')) {
36	return JSON.parse(message.data.replace('[iFrameSizer]message:', ''));
37	}
38	}
39
40	return message.data
41	}
42
43	const eventListener = (message: MessageEvent) => {
44	const {event, data} = getMessage(message);
45
46	if (events[event]) {
47
48	const filtered = {};
49	// Allow only primitive values
50	Object.entries(data).forEach(([key, value]) => {
51	if (typeof value !== 'function' && typeof value !== 'object') {
52	filtered[key] = value;
53	}
54	});
55
56	events[event].forEach((callback: (data: any) => void) => {
57	callback(filtered);
58	});
59	}
60	}
61
62	const subscribe = (event: string, callback: Function) => {
63	if (!events[event]) {
64	events[event] = [];
65	}
66
67	events[event].push(callback);
68	}
69
70	const publish = (event: string, data: any, iframeRef: RefObject<any>) => {
71	if (iframeRef.current?.sendMessage) {
72	iframeRef.current.sendMessage({
73	event,
74	data
75	});
76	}
77	}
78
79	const publishSettings = (data: RequireAtLeastOne<FormSettings>) => {
80	publish(PREVIEW_EVENTS.SETTINGS, data, iframeRef)
81	}
82
83
84	const publishDesignSettings = (data: RequireAtLeastOne<FormSettings>) => {
85	publish(PREVIEW_EVENTS.DESIGN_SETTINGS, data, iframeRef)
86	}
87
88	const publishGoal = (data: RequireAtLeastOne<FormGoal>) => {
89	publish(PREVIEW_EVENTS.GOAL, data, iframeRef)
90	}
91
92	/**
93	* @since 4.1.0
94	*/
95	const publishGoalSource = (data: RequireAtLeastOne<FormSettings>) => {
96	publish(PREVIEW_EVENTS.GOAL_SOURCE, data, iframeRef)
97	}
98
99	const publishGoalType = (type: string) => {
100	const isMoney = ['amount', 'amountFromSubscriptions'].includes(type);
101
102	publish(PREVIEW_EVENTS.GOAL, {
103	type,
104	label: type,
105	typeIsCount: !isMoney,
106	typeIsMoney: isMoney,
107	}, iframeRef)
108	}
109
110	const publishColors = (data: RequireAtLeastOne<FormColors>) => {
111	publish(PREVIEW_EVENTS.COLORS, data, iframeRef)
112	}
113
114	const publishCss = (data: {customCss: string} ) => {
115	publish(PREVIEW_EVENTS.CSS, data, iframeRef)
116	}
117
118	const subscribeToSettings = (callback: (data: FormSettings) => void) => {
119	subscribe(PREVIEW_EVENTS.SETTINGS, callback)
120	}
121
122	const subscribeToDesignSettings = (callback: (data) => void) => {
123	subscribe(PREVIEW_EVENTS.DESIGN_SETTINGS, callback)
124	}
125
126	const subscribeToGoal = (callback: (data: FormGoal) => void) => {
127	subscribe(PREVIEW_EVENTS.GOAL, callback)
128	}
129
130	/**
131	* @since 4.1.0
132	*/
133	const subscribeToGoalSource = (callback: (data: 'campaign' \| 'form') => void) => {
134	subscribe(PREVIEW_EVENTS.GOAL, callback)
135	}
136
137	const subscribeToColors = (callback: (data: FormColors) => void) => {
138	subscribe(PREVIEW_EVENTS.COLORS, callback)
139	}
140
141	const subscribeToCss = (callback: (data: {customCss: string}) => void) => {
142	subscribe(PREVIEW_EVENTS.CSS, callback)
143	}
144
145	/**
146	* Unsubscribe from event
147	*
148	* @param event
149	*/
150	const unsubscribe = (event: string) => {
151	if (events[event]) {
152	delete events[event];
153	}
154	}
155
156	/**
157	* Unsubscribe from all event
158	*/
159	const unsubscribeAll = () => {
160	for (const key in PREVIEW_EVENTS) {
161	delete events[key];
162	}
163	}
164
165	return {
166	unsubscribe,
167	unsubscribeAll,
168	publishGoal,
169	publishGoalSource,
170	publishGoalType,
171	publishColors,
172	publishCss,
173	publishSettings,
174	publishDesignSettings,
175	subscribeToGoal,
176	subscribeToGoalSource,
177	subscribeToColors,
178	subscribeToSettings,
179	subscribeToCss,
180	subscribeToDesignSettings
181	}
182	}
183