ivyforms / frontend / src / stores / useConfirmationSettingBuilder.ts

useConfirmationSettingBuilder.ts in The Innovative Form Builder – IvyForms 0.1.2, at frontend/src/stores/useConfirmationSettingBuilder.ts

275 lines 7.9 KB

Raw Download Zip

1	import { defineStore } from 'pinia'
2	import { ref } from 'vue'
3	import { useLabels } from '@/composables/useLabels'
4	import IvyMessage from '@/views/_components/message/ivyMessage.ts'
5
6	export const useConfirmationSettingBuilder = defineStore('confirmationSettingBuilder', () => {
7	const allConfirmations = ref([])
8	const id = ref<number \| null>(null)
9	const formId = ref<number \| null>(null)
10	const type = ref<string \| null>('successMessage')
11	const status = ref(true)
12	const showForm = ref(false)
13	const message = ref<string \| null>('')
14	const url = ref<string \| null>('')
15	const page = ref<string \| null>('')
16	const isEditing = ref(false)
17
18	const { getLabel } = useLabels()
19	// Load existing confirmation if confirmation id is provided
20	const loadConfirmation = async (confirmationId: number) => {
21	try {
22	const response = await fetch(`/wp-json/ivyforms/v1/confirmation/${confirmationId}`, {
23	method: 'GET',
24	headers: {
25	'Content-Type': 'application/json',
26	// eslint-disable-next-line no-undef
27	'X-WP-Nonce': wpIvyApiSettings.nonce,
28	},
29	})
30
31	const result = await response.json()
32
33	if (response.ok && response.status == 200 && result.data.data) {
34	id.value = confirmationId
35	formId.value = result.data.data.formId
36	type.value = result.data.data.type \|\| 'successMessage'
37	status.value = result.data.data.status \|\| false
38	showForm.value = result.data.data.showForm \|\| false
39	message.value = result.data.data.message \|\| ''
40	url.value = result.data.data.url \|\| ''
41	page.value = result.data.data.page \|\| ''
42	isEditing.value = true
43	} else {
44	IvyMessage({
45	message: `${getLabel('failed_to_load_confirmation')} ${result.message}`,
46	type: 'error',
47	})
48	}
49	} catch (error) {
50	IvyMessage({
51	message: `${getLabel('failed_to_load_confirmation')} ${error}`,
52	type: 'error',
53	})
54	}
55	}
56
57	// Fetch all confirmations
58	const fetchAllConfirmations = async (formIdValue: number) => {
59	try {
60	const response = await fetch(`/wp-json/ivyforms/v1/confirmations/${formIdValue}`, {
61	method: 'GET',
62	headers: {
63	'Content-Type': 'application/json',
64	// eslint-disable-next-line no-undef
65	'X-WP-Nonce': wpIvyApiSettings.nonce,
66	},
67	})
68
69	const result = await response.json()
70
71	if (response.ok && response.status == 200 && result.data) {
72	id.value = result.data[0][0].id
73	formId.value = result.data[0][0].formId
74	type.value = result.data[0][0].type \|\| 'successMessage'
75	status.value = result.data[0][0].status \|\| false
76	showForm.value = result.data[0][0].showForm \|\| false
77	message.value = result.data[0][0].message \|\| ''
78	url.value = result.data[0][0].url \|\| ''
79	page.value = result.data[0][0].page \|\| ''
80	isEditing.value = true
81	} else {
82	IvyMessage({
83	message: `${getLabel('failed_to_fetch_confirmation')} ${result.message}`,
84	type: 'error',
85	})
86	}
87	} catch (error) {
88	IvyMessage({
89	message: `${getLabel('failed_to_fetch_confirmation')} ${error}`,
90	type: 'error',
91	})
92	}
93	}
94
95	// Reset confirmation to default values
96	const resetConfirmation = () => {
97	id.value = null
98	formId.value = null
99	type.value = ''
100	status.value = true
101	showForm.value = false
102	message.value = ''
103	url.value = ''
104	page.value = ''
105	isEditing.value = false
106	}
107
108	// Create a new confirmation
109	const createConfirmation = async () => {
110	const confirmationData = {
111	formId: formId.value ?? null,
112	type: type.value \|\| '',
113	status: status.value \|\| false,
114	showForm: showForm.value \|\| false,
115	message: message.value \|\| '',
116	url: url.value \|\| '',
117	page: page.value \|\| '',
118	}
119
120	try {
121	const response = await fetch('/wp-json/ivyforms/v1/confirmation/add/', {
122	method: 'POST',
123	headers: {
124	'Content-Type': 'application/json',
125	// eslint-disable-next-line no-undef
126	'X-WP-Nonce': wpIvyApiSettings.nonce,
127	},
128	body: JSON.stringify(confirmationData),
129	})
130
131	const result = await response.json()
132
133	if (response.ok) {
134	id.value = result.data.data.id
135	allConfirmations.value.push(result.data)
136	IvyMessage({
137	message: getLabel('create_confirmation'),
138	type: 'success',
139	})
140	} else {
141	IvyMessage({
142	message: `${getLabel('failed_to_create_confirmation')} ${result.message}`,
143	type: 'error',
144	})
145	}
146	} catch (error) {
147	IvyMessage({
148	message: `${getLabel('create_error_confirmation')} ${error}`,
149	type: 'error',
150	})
151	}
152	}
153
154	// Update confirmation data
155	const updateConfirmation = async (confirmationId, data) => {
156	try {
157	const response = await fetch(`/wp-json/ivyforms/v1/confirmation/update/${confirmationId}/`, {
158	method: 'POST',
159	headers: {
160	'Content-Type': 'application/json',
161	// eslint-disable-next-line no-undef
162	'X-WP-Nonce': wpIvyApiSettings.nonce,
163	},
164	body: JSON.stringify(data),
165	})
166
167	const result = await response.json()
168
169	if (response.ok) {
170	IvyMessage({
171	message: getLabel('update_confirmation'),
172	type: 'success',
173	})
174	} else {
175	IvyMessage({
176	message: `${getLabel('creating_error_confirmation')} ${result.message}`,
177	type: 'error',
178	})
179	}
180	} catch (error) {
181	IvyMessage({
182	message: `${getLabel('failed_to_update_confirmation')} ${error}`,
183	type: 'error',
184	})
185	}
186	}
187
188	// Duplicate confirmation
189	const duplicateConfirmation = async (id: number) => {
190	try {
191	const response = await fetch(`/wp-json/ivyforms/v1/confirmation/duplicate/${id}/`, {
192	method: 'POST',
193	headers: {
194	'Content-Type': 'application/json',
195	// eslint-disable-next-line no-undef
196	'X-WP-Nonce': wpIvyApiSettings.nonce,
197	},
198	})
199	const result = await response.json()
200	if (response.ok) {
201	IvyMessage({
202	message: getLabel('updating_duplicated_confirmation'),
203	type: 'success',
204	})
205	allConfirmations.value.push(result.data)
206	} else {
207	IvyMessage({
208	message: `${getLabel('failed_to_duplicate_confirmation')} ${result.message}`,
209	type: 'error',
210	})
211	}
212	} catch (error) {
213	IvyMessage({
214	message: `${getLabel('error_duplicate_confirmation')} ${error}`,
215	type: 'error',
216	})
217	}
218	}
219
220	// Delete confirmation
221	const deleteConfirmation = async (id) => {
222	try {
223	const response = await fetch(`/wp-json/ivyforms/v1/confirmation/delete/${id}/`, {
224	method: 'POST',
225	headers: {
226	'Content-Type': 'application/json',
227	// eslint-disable-next-line no-undef
228	'X-WP-Nonce': wpIvyApiSettings.nonce,
229	},
230	body: JSON.stringify({ id }),
231	})
232
233	const result = await response.json()
234
235	if (response.ok) {
236	IvyMessage({
237	message: getLabel('delete_confirmation'),
238	type: 'success',
239	})
240	allConfirmations.value = allConfirmations.value.filter((item) => item.id !== id)
241	} else {
242	IvyMessage({
243	message: `${getLabel('failed_to_delete_confirmation')} ${result.message}`,
244	type: 'error',
245	})
246	}
247	} catch (error) {
248	IvyMessage({
249	message: `${getLabel('error_delete_confirmation')} ${error}`,
250	type: 'error',
251	})
252	}
253	}
254
255	return {
256	allConfirmations,
257	id,
258	formId,
259	type,
260	status,
261	showForm,
262	message,
263	url,
264	page,
265	isEditing,
266	fetchAllConfirmations,
267	resetConfirmation,
268	createConfirmation,
269	updateConfirmation,
270	deleteConfirmation,
271	loadConfirmation,
272	duplicateConfirmation,
273	}
274	})
275