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

ameliabooking / v3 / src / views / admin / customize / steps / StepForm / common / StepCardLayout.vue

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

StepCard.vue 3 days ago StepCardLayout.vue 3 days ago

StepCardLayout.vue

226 lines

1	<template>
2	<div
3	ref="stepCardLayoutRef"
4	class="am-fs-scl"
5	:class="[props.customClass, { 'am-oxvisible': bringingAnyoneVisibility \|\| packagesVisibility }]"
6	:style="cssVars"
7	>
8	<AmAlert
9	v-if="alertMessage"
10	type="error"
11	class="am-fs-scl__alert"
12	:closable="false"
13	:show-border="true"
14	:title="alertMessage"
15	/>
16	<div class="am-fs-scl__filters" :class="responsiveClass">
17	<slot name="filters" />
18	</div>
19	<div class="am-fs-scl__content">
20	<slot />
21	</div>
22
23	<!-- Bringing Anyone with you -->
24	<AmSlidePopup :visibility="bringingAnyoneVisibility" class="am-fs__init__bringing">
25	<p class="am-fs__popup-x">
26	<AmeliaIconClose />
27	</p>
28	<BringingAnyone />
29	<template #footer>
30	<AmButton
31	category="secondary"
32	:type="amCustomize[pageRenderKey].bringingAnyone.options.secondaryButton.buttonType"
33	>
34	{{ labelsDisplay('bringing_no', 'bringingAnyone') }}
35	</AmButton>
36	<AmButton
37	:type="amCustomize[pageRenderKey].bringingAnyone.options.primaryButton.buttonType"
38	>
39	{{ labelsDisplay('bringing_yes', 'bringingAnyone') }}
40	</AmButton>
41	</template>
42	</AmSlidePopup>
43	<!--/ Bringing Anyone with you -->
44
45	<!-- Packages Popup -->
46	<AmSlidePopup :visibility="packagesVisibility" :style="cssPackage">
47	<p class="am-fs__popup-x">
48	<span class="am-icon-close"></span>
49	</p>
50	<div class="am-fs__ps-popup">
51	<div
52	v-if="amCustomize[pageRenderKey].packageStep.options.heading.visibility"
53	class="am-fs__ps-popup__heading"
54	>
55	{{ labelsDisplay('package_heading', 'packageStep') }}
56	</div>
57	<PackageStep></PackageStep>
58	<div class="am-fs__ps-popup__or">
59	{{ labelsDisplay('separator_or', 'packageStep') }}
60	</div>
61	</div>
62
63	<template #footer>
64	<AmButton
65	class="am-fs__ps-popup__btn"
66	:class="`am-fs__ps-popup__btn${checkScreen ? '-mobile' : ''}`"
67	category="primary"
68	size="medium"
69	:type="amCustomize[pageRenderKey].packageStep.options.primaryButton.buttonType"
70	:suffix="pill"
71	>
72	{{ labelsDisplay('continue_without_package', 'packageStep') }}
73	</AmButton>
74	</template>
75	</AmSlidePopup>
76	<!--/ Packages Popup -->
77	</div>
78	</template>
79
80	<script setup>
81	// * Import from Vue
82	import { computed, inject, ref, watchEffect } from 'vue'
83
84	// * Import components
85	import AmButton from '../../../../../_components/button/AmButton.vue'
86	import AmSlidePopup from '../../../../../_components/slide-popup/AmSlidePopup.vue'
87	import AmAlert from '../../../../../_components/alert/AmAlert.vue'
88	import AmeliaIconClose from '../../../../../_components/icons/IconClose.vue'
89	import BringingAnyone from '../BringingAnyone.vue'
90	import PackageStep from '../PackageStep.vue'
91
92	// * Composables
93	import { useColorTransparency } from '../../../../../../assets/js/common/colorManipulation'
94	import { useElementSize } from '@vueuse/core'
95	import { useResponsiveClass } from '../../../../../../assets/js/common/responsive'
96
97	// * Props
98	const props = defineProps({
99	customClass: {
100	type: [String, Array],
101	default: '',
102	},
103	cardSelected: {
104	type: Boolean,
105	default: false,
106	},
107	allowPopup: {
108	type: Boolean,
109	default: false,
110	},
111	})
112
113	// * Step Card Layout reference
114	const stepCardLayoutRef = ref(null)
115	// * Component width
116	const { width: componentWidth } = useElementSize(stepCardLayoutRef)
117	// * Responsive class
118	const responsiveClass = computed(() => {
119	return useResponsiveClass(componentWidth.value)
120	})
121
122	// * Amelia Settings
123	const amSettings = inject('settings')
124
125	let subStepName = inject('subStepName')
126	let pageRenderKey = inject('pageRenderKey')
127	let amCustomize = inject('customize')
128
129	let langKey = inject('langKey')
130
131	let amLabels = inject('labels')
132
133	// * Label computed function
134	function labelsDisplay(label, stepKey) {
135	let computedLabel = computed(() => {
136	return amCustomize.value[pageRenderKey.value][stepKey].translations &&
137	amCustomize.value[pageRenderKey.value][stepKey].translations[label] &&
138	amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value]
139	? amCustomize.value[pageRenderKey.value][stepKey].translations[label][langKey.value]
140	: amLabels[label]
141	})
142
143	return computedLabel.value
144	}
145
146	// * Bringing anyone with you pop up visibility
147	let bringingAnyoneVisibility = computed(() => {
148	return subStepName.value === 'bringingAnyone'
149	})
150
151	let packagesVisibility = computed(() => {
152	return subStepName.value === 'packageStep'
153	})
154
155	let pill = {
156	template: `<div class="am-fs__ps-pill">$60 USD</div>`,
157	}
158
159	let alertMessage = ref('')
160
161	watchEffect(() => {
162	if (props.cardSelected) {
163	alertMessage.value = ''
164	}
165	})
166
167	defineExpose({
168	stepCardLayoutRef,
169	})
170
171	// * Global colors
172	let amColors = inject('amColors')
173	let cssPackage = computed(() => {
174	return {
175	'--am-c-ps-text-op60': useColorTransparency(amColors.value.colorMainText, 0.6),
176	'--am-c-ps-text-op20': useColorTransparency(amColors.value.colorMainText, 0.2),
177	}
178	})
179
180	let cssVars = computed(() => {
181	return {
182	'--am-c-primary': amColors.value.colorPrimary,
183	'--am-c-primary-op05': useColorTransparency(amColors.value.colorPrimary, 0.05),
184	'--am-c-main-bgr': amColors.value.colorMainBgr,
185	'--am-c-main-heading-text': amColors.value.colorMainHeadingText,
186	'--am-c-main-text': amColors.value.colorMainText,
187	'--am-c-main-text-op70': useColorTransparency(amColors.value.colorMainText, 0.7),
188	'--am-c-inp-border': amColors.value.colorInpBorder,
189	'--am-c-scroll-op30': useColorTransparency(amColors.value.colorPrimary, 0.3),
190	'--am-c-scroll-op10': useColorTransparency(amColors.value.colorPrimary, 0.1),
191	}
192	})
193
194	// Container Width
195	let cWidth = inject('containerWidth', 0)
196	let checkScreen = computed(() => cWidth.value < 560 \|\| cWidth.value - 240 < 520)
197	</script>
198
199	<style lang="scss">
200	// scl - Step Card Layout
201	#amelia-app-backend-new #amelia-container {
202	.am-fs-scl {
203	display: flex;
204	flex-direction: column;
205	gap: 16px;
206
207	&__filters {
208	display: flex;
209	flex-direction: row;
210	gap: 16px;
211
212	&.am-rw-360 {
213	flex-direction: column;
214	}
215	}
216
217	&__content {
218	display: flex;
219	flex-direction: column;
220	flex-wrap: wrap;
221	gap: 8px;
222	}
223	}
224	}
225	</style>
226