InfoStep.vue — Booking for Appointments and Events Calendar – Amelia 2.4.4

ameliabooking / v3 / src / views / admin / customize / steps / StepForm / InfoStep.vue

ameliabooking / v3 / src / views / admin / customize / steps / StepForm Last commit date

InfoStep.vue

302 lines

1	<template>
2	<div class="am-fs__main-content am-fs__info">
3	<!-- Social Buttons -->
4	<div v-if="features.googleSocialLogin \|\| features.facebookSocialLogin">
5	<div class="am-fs__info-social-wrapper">
6	<div class="am-fs__info-social-wrapper__label">
7	{{ labelsDisplay('auto_fill_your_details') }}
8	</div>
9	<div class="am-fs__info-social-wrapper__social-buttons">
10	<img
11	v-if="features.googleSocialLogin"
12	:src="baseUrls.wpAmeliaPluginURL + '/v3/src/assets/img/icons/google.svg'"
13	alt="Google"
14	/>
15	<img
16	v-if="features.facebookSocialLogin"
17	:src="baseUrls.wpAmeliaPluginURL + '/v3/src/assets/img/icons/facebook.svg'"
18	alt="Facebook"
19	/>
20	</div>
21	</div>
22
23	<!-- Social Divider -->
24	<div class="am-fs__info-social-divider">
25	<span class="par-sm">{{ labelsDisplay('or_enter_details_below') }}</span>
26	</div>
27	<!-- /Social Divider -->
28	</div>
29	<!-- Social Buttons -->
30
31	<el-form
32	ref="infoFormRef"
33	:model="infoFormData"
34	:rules="rules"
35	label-position="top"
36	class="am-fs__info-form"
37	:class="{ 'am-fs__info-form-mobile': checkScreen }"
38	>
39	<template v-for="item in amCustomize[pageRenderKey].infoStep.order" :key="item.id">
40	<component :is="formFields[item.id]"></component>
41	</template>
42
43	<el-form-item
44	v-if="
45	amSettings.featuresIntegrations.mailchimp.enabled &&
46	amSettings.mailchimp.subscribeFieldVisible &&
47	amCustomize[pageRenderKey].infoStep.options.email.visibility
48	"
49	class="am-fs__info-form__item am-subscribe"
50	>
51	<AmCheckbox
52	:value="amSettings.mailchimp.checkedByDefault"
53	:label="labelsDisplay('subscribe_to_mailing_list')"
54	>
55	</AmCheckbox>
56	</el-form-item>
57	</el-form>
58	</div>
59	</template>
60
61	<script setup>
62	import FirstNameFormField from '../../fields/FirstNameFormField.vue'
63	import LastNameFormField from '../../fields/LastNameFormField.vue'
64	import EmailFormField from '../../fields/EmailFormField.vue'
65	import PhoneFormField from '../../fields/PhoneFormField.vue'
66	import AmCheckbox from '../../../../_components/checkbox/AmCheckbox.vue'
67	import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js'
68
69	import { ref, inject, provide, computed, markRaw } from 'vue'
70
71	let langKey = inject('langKey')
72	let amLabels = inject('labels')
73
74	let pageRenderKey = inject('pageRenderKey')
75	const { amCustomize } = useReactiveCustomize()
76
77	// * Features
78	let features = inject('features')
79
80	// * Plugin Licence
81	let licence = inject('licence')
82
83	let baseUrls = inject('baseUrls')
84
85	// * Label computed function
86	function labelsDisplay(label) {
87	let computedLabel = computed(() => {
88	return amCustomize.value[pageRenderKey.value].infoStep.translations &&
89	amCustomize.value[pageRenderKey.value].infoStep.translations[label] &&
90	amCustomize.value[pageRenderKey.value].infoStep.translations[label][langKey.value]
91	? amCustomize.value[pageRenderKey.value].infoStep.translations[label][langKey.value]
92	: amLabels[label]
93	})
94
95	return computedLabel.value
96	}
97
98	// Container Width
99	let cWidth = inject('containerWidth', 0)
100	let checkScreen = computed(() => cWidth.value < 560 \|\| cWidth.value - 240 < 520)
101
102	// * Amelia Settings
103	const amSettings = inject('settings')
104
105	/**
106	* Form Block start
107	*/
108	// * Form reference
109	let infoFormRef = ref(null)
110
111	let infoFormData = ref({
112	firstName: '',
113	lastName: '',
114	email: '',
115	phone: '',
116	})
117	provide('infoFormData', infoFormData)
118
119	// * Form validation rules
120	let rules = computed(() => {
121	return {
122	firstName: [
123	{
124	required: true,
125	message: labelsDisplay('enter_first_name_warning'),
126	trigger: ['blur', 'submit'],
127	},
128	],
129	lastName: [
130	{
131	required: amCustomize.value[pageRenderKey.value].infoStep.options.lastName.required,
132	message: labelsDisplay('enter_last_name_warning'),
133	trigger: ['blur', 'submit'],
134	},
135	],
136	email: [
137	{
138	required: amCustomize.value[pageRenderKey.value].infoStep.options.email.required,
139	message: labelsDisplay('enter_valid_email_warning'),
140	trigger: ['blur', 'submit'],
141	},
142	],
143	phone: [
144	{
145	required: amCustomize.value[pageRenderKey.value].infoStep.options.phone.required,
146	message: labelsDisplay('enter_phone_warning'),
147	trigger: ['blur', 'submit'],
148	},
149	],
150	}
151	})
152
153	// * Form Fields Object
154	let formFields = ref({
155	firstName: markRaw(FirstNameFormField),
156	lastName: markRaw(LastNameFormField),
157	email: markRaw(EmailFormField),
158	phone: markRaw(PhoneFormField),
159	})
160	</script>
161
162	<script>
163	export default {
164	name: 'InfoStep',
165	key: 'infoStep',
166	sidebarData: {
167	label: 'info_step',
168	icon: 'user',
169	stepSelectedData: [],
170	finished: false,
171	selected: false,
172	},
173	}
174	</script>
175
176	<style lang="scss">
177	#amelia-app-backend-new #amelia-container {
178	.am-fs {
179	&__main {
180	&-content.am-fs__info {
181	padding-top: 40px;
182	}
183
184	&-inner {
185	overflow: hidden;
186	}
187	}
188
189	&__info {
190	&-social-wrapper {
191	display: flex;
192	align-items: center;
193	flex-direction: column;
194	width: 100%;
195	margin-bottom: 24px;
196	gap: 24px;
197
198	&__label {
199	font-weight: 500;
200	font-size: 15px;
201	}
202
203	&__social-buttons {
204	display: flex;
205	align-items: center;
206	justify-content: center;
207	width: 100%;
208	gap: 24px;
209
210	img {
211	border: 1px solid #d1d5d7;
212	padding: 8px;
213	border-radius: 4px;
214	height: 40px;
215	width: 40px;
216	}
217	}
218	}
219
220	&-social-divider {
221	align-items: center;
222	display: flex;
223	margin-bottom: 24px;
224
225	// Before & After
226	&:before,
227	&:after {
228	background: var(--shade-250, #d1d5d7);
229	content: '';
230	height: 1px;
231	width: 100%;
232	}
233
234	span {
235	flex: none;
236	font-size: 15px;
237	font-style: normal;
238	font-weight: 400;
239	line-height: 24px;
240	color: var(--shade-500, #808a90);
241	margin-left: 8px;
242	margin-right: 8px;
243	}
244	}
245	&-form {
246	display: flex;
247	flex-wrap: wrap;
248	justify-content: space-between;
249
250	.el-form-item {
251	width: calc(50% - 12px);
252	$count: 4;
253	@for $i from 0 through $count {
254	&:nth-child(#{$i + 1}) {
255	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
256	animation-fill-mode: both;
257	}
258	}
259
260	&.am-subscribe {
261	width: 100%;
262	.el-checkbox {
263	&__input {
264	height: 32px;
265	line-height: 32px;
266	align-items: center;
267	}
268
269	&__label {
270	line-height: 32px;
271	padding: 0;
272	align-items: center;
273	}
274	}
275	}
276	}
277
278	&-mobile {
279	gap: 12px 6px;
280	.el-form-item {
281	width: 100%;
282	}
283	}
284
285	&__label {
286	display: inline-block;
287	color: var(--am-c-main-text);
288	font-family: var(--am-font-family);
289	font-weight: 500;
290	margin-bottom: 4px;
291	}
292
293	.el-form-item__label {
294	line-height: unset;
295	padding: 0;
296	}
297	}
298	}
299	}
300	}
301	</style>
302