https://pharmaserve.com/wp-content/plugins/wp-pharmacywire-v5/PWCo…?ver=5.8.1.redirect-cart.ov20260724d

1import { onMounted, ref } from 'vue'
2import { usePwUserStore } from 'pw-user-store'
3export const PwCreateAccountSubmit = {
4	template: '#pwCreateAccountSubmit',
5	setup() {
6		const pwUserStore = usePwUserStore()
7		const createAccountForm = ref(null)
8		const showEmailField = ref(true)
9		const showPasswordField = ref(true)
10		const formErrorContainer = ref(null)
11
12		// Function to handle displaying error messages
13		const displayErrorMessages = (messageArray, errorResponse) => {
14			if (Array.isArray(messageArray) && messageArray.length > 0) {
15				const errorMessages = messageArray
16					.filter(Boolean)
17					.map(msg => {
18						// Extract the message from the nested structure
19						let errorText = 'An error occurred'
20
21						if (typeof msg === 'string') {
22							errorText = msg
23						} else if (msg.content && msg.content.value) {
24							errorText = msg.content.value
25						} else if (typeof msg === 'object') {
26							// Try to get some meaningful info if possible
27							errorText = JSON.stringify(msg)
28						}
29
30						// Decode HTML entities
31						const decodedText = errorText
32							.replace(/&/g, '&')
33							.replace(/&lt;/g, '<')
34							.replace(/&gt;/g, '>')
35							.replace(/&#039;/g, "'")
36							.replace(/&quot;/g, '"')
37							.replace(/&#038;/g, '&')
38
39						return decodedText
40					})
41
42				errorResponse.innerHTML = '<ul>' + errorMessages
43					.map(msg => `<li class="create-account-e2">${msg}</li>`)
44					.join('') + '</ul>'
45			} else {
46				errorResponse.innerHTML = '<span class="create-account-e2">An error occurred. Please try again.</span>'
47			}
48		}
49
50		const submitCreateAccount = (event) => {
51			event.preventDefault()
52
53			// Hide the error container at the start of the submission
54			if (formErrorContainer) {
55				formErrorContainer.value.style.display = 'none'
56			}
57
58			// Get the form and use Foundation Abide's validation
59			const form = createAccountForm.value
60			const $form = window.jQuery(form)
61
62			// Check if Foundation Abide plugin is available
63			if (!$form.data('zfPlugin')) {
64				// Initialize if not already done
65				new Foundation.Abide($form)
66			}
67
68			if (form && form.checkValidity()) {
69				pwUserStore.createPatient(event)
70					.then((response) => {
71						if (response.status === 'success') {
72							// remove error container from DOM, don't just hide it
73							if (formErrorContainer) {
74								formErrorContainer.value.remove()
75							}
76
77							const currentUrl = new URL(window.location.href)
78							currentUrl.searchParams.set('registration', 'success')
79							window.location.href = currentUrl.toString()
80						} else {
81							// Show the error container if the response indicates failure
82							if (formErrorContainer) {
83								formErrorContainer.value.style.display = 'block'
84								const errorResponse = formErrorContainer.value.querySelector('.error-response')
85								displayErrorMessages(response.messages, errorResponse)
86							}
87						}
88					})
89					.catch((error) => {
90						console.error(error)
91						if (formErrorContainer) {
92							formErrorContainer.value.style.display = 'block'
93							const errorResponse = formErrorContainer.value.querySelector('.error-response')
94							if (errorResponse) {
95								const messages = error?.response?.data?.messages
96								displayErrorMessages(messages, errorResponse)
97							}
98						}
99					})
100			} else {
101				console.log('Form is invalid')
102				if (formErrorContainer) {
103					formErrorContainer.value.style.display = 'block'
104					const errorResponse = formErrorContainer.value.querySelector('.error-response')
105					if (errorResponse) {
106						errorResponse.textContent = 'Please review the form fields and fix any errors.'
107					}
108				}
109			}
110		}
111
112		const initializeAbide = () => {
113			createAccountForm.value = document.querySelector('.create-account-form')
114			if (createAccountForm.value) {
115				// Ensure Foundation is loaded
116				if (typeof Foundation === 'undefined') {
117					console.error('Foundation is not loaded.')
118					return
119				}
120
121				// Wrap the form element in jQuery for Foundation compatibility
122				const $form = window.jQuery(createAccountForm.value)
123
124				// Check if the Abide plugin is already initialized
125				if (!$form.data('zfPlugin')) {
126					// Manually initialize the Abide plugin
127					new Foundation.Abide($form)
128				}
129
130				// Reinitialize the Abide plugin
131				Foundation.reInit('abide')
132			} else {
133				console.warn('Create account form not found in the DOM.')
134			}
135		}
136
137		onMounted(() => {
138			if (document.readyState === 'complete') {
139				// If the page is already fully loaded
140				initializeAbide()
141			} else {
142				// Wait for the DOMContentLoaded event
143				document.addEventListener('DOMContentLoaded', initializeAbide)
144			}
145		})
146
147		return {
148			createAccountForm,
149			showEmailField,
150			showPasswordField,
151			submitCreateAccount,
152			formErrorContainer,
153		}
154	}
155}