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

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

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

InitStep.vue

355 lines

1	<template>
2	<div v-if="!loading" class="am-fs__init">
3	<el-form
4	ref="initFormRef"
5	:model="initFormData"
6	:rules="rules"
7	label-position="top"
8	class="am-fs__init-form"
9	>
10	<template v-for="item in amCustomize[pageRenderKey][stepName].order" :key="item.id">
11	<component :is="formFields[item.id]"></component>
12	</template>
13	</el-form>
14
15	<!-- Bringing Anyone with you -->
16	<AmSlidePopup :visibility="bringingAnyoneVisibility">
17	<p class="am-fs__popup-x">
18	<span class="am-icon-close"></span>
19	</p>
20	<BringingAnyone></BringingAnyone>
21	<template #footer>
22	<AmButton
23	category="secondary"
24	:type="amCustomize[pageRenderKey].bringingAnyone.options.secondaryButton.buttonType"
25	>
26	{{ labelsDisplay('bringing_no', 'bringingAnyone') }}
27	</AmButton>
28	<AmButton
29	:type="amCustomize[pageRenderKey].bringingAnyone.options.primaryButton.buttonType"
30	>
31	{{ labelsDisplay('bringing_yes', 'bringingAnyone') }}
32	</AmButton>
33	</template>
34	</AmSlidePopup>
35	<!--/ Bringing Anyone with you -->
36
37	<!-- Packages Popup -->
38	<AmSlidePopup :visibility="packagesVisibility" :style="cssPackage">
39	<p class="am-fs__popup-x">
40	<span class="am-icon-close"></span>
41	</p>
42	<div class="am-fs__ps-popup">
43	<div
44	v-if="amCustomize[pageRenderKey].packageStep.options.heading.visibility"
45	class="am-fs__ps-popup__heading"
46	>
47	{{ labelsDisplay('package_heading', 'packageStep') }}
48	</div>
49	<PackageStep></PackageStep>
50	<div class="am-fs__ps-popup__or">
51	{{ labelsDisplay('separator_or', 'packageStep') }}
52	</div>
53	</div>
54
55	<template #footer>
56	<AmButton
57	class="am-fs__ps-popup__btn"
58	:class="`am-fs__ps-popup__btn${checkScreen ? '-mobile' : ''}`"
59	category="primary"
60	size="medium"
61	:type="amCustomize[pageRenderKey].packageStep.options.primaryButton.buttonType"
62	:suffix="pill"
63	>
64	{{ labelsDisplay('continue_without_package', 'packageStep') }}
65	</AmButton>
66	</template>
67	</AmSlidePopup>
68	<!--/ Packages Popup -->
69	</div>
70	</template>
71
72	<script setup>
73	import AmSlidePopup from '../../../../_components/slide-popup/AmSlidePopup.vue'
74	import AmButton from '../../../../_components/button/AmButton.vue'
75
76	// * Import SubSteps
77	import BringingAnyone from './BringingAnyone.vue'
78	import PackageStep from './PackageStep.vue'
79
80	// * Import Fields
81	import ServiceFormField from '../../fields/ServiceFormField.vue'
82	import LocationFormField from '../../fields/LocationFormField.vue'
83	import EmployeeFormField from '../../fields/EmployeeFormField.vue'
84	import { ref, provide, markRaw, inject, defineComponent, computed } from 'vue'
85
86	// * Import composables
87	import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js'
88	import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation'
89
90	const amSettings = inject('settings')
91
92	// * Plugin Licence
93	let licence = inject('licence')
94
95	let loading = inject('loading')
96
97	let langKey = inject('langKey')
98	let amLabels = inject('labels')
99
100	let stepName = inject('stepName')
101	let subStepName = inject('subStepName')
102	let pageRenderKey = inject('pageRenderKey')
103	const { amCustomize } = useReactiveCustomize()
104
105	// * Label computed function
106	function labelsDisplay(label, stepKey) {
107	let computedLabel = computed(() => {
108	return amCustomize.value[pageRenderKey.value][stepKey].translations &&
109	amCustomize.value[pageRenderKey.value][stepKey].translations[label] &&
110	amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value]
111	? amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value]
112	: amLabels[label]
113	})
114
115	return computedLabel.value
116	}
117
118	// * Form data
119	let initFormData = ref({
120	service: null,
121	location: null,
122	employee: null,
123	})
124	provide('formData', initFormData)
125
126	// * Form validation rules
127	let rules = computed(() => {
128	return {
129	service: [
130	{
131	required: true,
132	message: labelsDisplay('please_select_service', 'initStep'),
133	trigger: ['blur', 'change'],
134	},
135	],
136	location: [
137	{
138	required: amCustomize.value[pageRenderKey.value][stepName.value].options.location.required,
139	message: labelsDisplay('please_select_location', 'initStep'),
140	trigger: ['blur', 'change'],
141	},
142	],
143	employee: [
144	{
145	required: amCustomize.value[pageRenderKey.value][stepName.value].options.employee.required,
146	message: labelsDisplay('please_select_employee', 'initStep'),
147	trigger: ['blur', 'change'],
148	},
149	],
150	}
151	})
152
153	// * Form Fields Array
154	let formFields = ref({
155	service: markRaw(ServiceFormField),
156	location: !licence.isLite && !licence.isStarter ? markRaw(LocationFormField) : null,
157	employee: !licence.isLite ? markRaw(EmployeeFormField) : null,
158	})
159
160	// * Step contains slide popups
161	let inPopup = ref(true)
162	provide('inPopup', { inPopup })
163
164	// * Bringing Anyone With You
165	let bringingAnyoneVisibility = computed(() => {
166	return subStepName.value === 'bringingAnyone'
167	})
168
169	// * Packages sugestion
170	let packagesVisibility = computed(() => {
171	return subStepName.value === 'packageStep'
172	})
173
174	let pill = defineComponent({
175	template: `<div class="am-fs__ps-pill">$60 USD</div>`,
176	})
177
178	// * Global colors
179	let amColors = inject('amColors')
180	let cssPackage = computed(() => {
181	return {
182	'--am-c-ps-text-op60': useColorTransparency(amColors.value.colorMainText, 0.6),
183	'--am-c-ps-text-op20': useColorTransparency(amColors.value.colorMainText, 0.2),
184	}
185	})
186
187	// Container Width
188	let cWidth = inject('containerWidth', 0)
189	let checkScreen = computed(() => cWidth.value < 560 \|\| cWidth.value - 240 < 520)
190	</script>
191
192	<script>
193	export default {
194	name: 'InitStep',
195	key: 'initStep',
196	sidebarData: {
197	label: 'service_selection',
198	icon: 'service',
199	stepSelectedData: [],
200	finished: false,
201	selected: false,
202	},
203	}
204	</script>
205
206	<style lang="scss">
207	#amelia-app-backend-new {
208	#amelia-container {
209	.am-fs {
210	&__main {
211	&-inner {
212	overflow: hidden;
213	}
214	}
215
216	&__init {
217	&.am-fs__main-content {
218	padding-top: 48px;
219	}
220
221	&-form {
222	&__item {
223	$count: 3;
224	@for $i from 0 through $count {
225	&:nth-child(#{$i + 1}) {
226	animation: 600ms
227	cubic-bezier(0.45, 1, 0.4, 1.2)
228	#{$i *
229	100}ms
230	am-animation-slide-up;
231	animation-fill-mode: both;
232	}
233	}
234	}
235
236	&__label {
237	display: inline-block;
238	font-family: var(--am-font-family);
239	font-weight: 500;
240	margin-bottom: 4px;
241	}
242
243	.el-form-item {
244	&__label {
245	color: var(--am-c-main-text);
246	line-height: unset;
247	padding: 0;
248
249	&:before {
250	color: var(--am-c-error);
251	}
252	}
253
254	&__error {
255	color: var(--am-c-error);
256	}
257	}
258	}
259	}
260
261	&__popup-x {
262	position: absolute;
263	top: 16px;
264	right: 16px;
265	cursor: pointer;
266	color: var(--am-c-main-text);
267	margin: 0;
268	}
269
270	&__ps {
271	&-popup {
272	position: relative;
273
274	&__heading {
275	font-size: 14px;
276	font-weight: 400;
277	line-height: 1.42857;
278	text-align: center;
279	color: var(--am-c-main-text);
280	margin: 0 0 16px;
281	padding: 20px 6px 0 0;
282	max-height: 40px;
283	overflow-x: hidden;
284
285	// Main Scroll styles
286	&::-webkit-scrollbar {
287	width: 6px;
288	}
289
290	&::-webkit-scrollbar-thumb {
291	border-radius: 6px;
292	background: var(--am-c-scroll-op30);
293	}
294
295	&::-webkit-scrollbar-track {
296	border-radius: 6px;
297	background: var(--am-c-scroll-op10);
298	}
299	}
300
301	&__or {
302	display: flex;
303	flex-direction: row;
304	font-weight: 400;
305	font-size: 14px;
306	line-height: 20px;
307	margin: 20px 0;
308	color: var(--am-c-ps-text-op60);
309
310	&:before,
311	&:after {
312	content: '';
313	flex: 1 1;
314	border-bottom: 1px solid var(--am-c-ps-text-op20);
315	margin: auto;
316	}
317
318	&:before {
319	margin-right: 10px;
320	}
321
322	&:after {
323	margin-left: 10px;
324	}
325	}
326
327	&__btn {
328	--am-h-btn: 56px;
329	--am-fs-btn: 14px;
330	width: 100%;
331	justify-content: space-between;
332
333	&-mobile {
334	--am-fs-btn: 12px;
335	--am-h-btn: 56px;
336	}
337	}
338	}
339
340	&-pill {
341	display: inline-block;
342	font-size: 14px;
343	font-weight: 500;
344	line-height: 1;
345	color: var(--am-c-btn-prim);
346	background-color: var(--am-c-btn-prim-text);
347	border-radius: 12px;
348	padding: 5px 8px;
349	}
350	}
351	}
352	}
353	}
354	</style>
355