Congratulations.vue — Booking for Appointments and Events Calendar – Amelia 2.4.8

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

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

Congratulations.vue

278 lines

1	<template>
2	<div
3	:style="cssVars"
4	class="am-fs__main-content am-fs__congrats"
5	:class="[{ 'am-fs-sb-atc': checkScreen }, props.globalClass]"
6	>
7	<div class="am-fs__congrats-main">
8	<img
9	:src="baseUrls.wpAmeliaPluginURL + '/v3/src/assets/img/congratulations/congratulations.svg'"
10	:alt="labelsDisplay('congratulations')"
11	/>
12	<p class="am-fs__congrats-main-heading">
13	{{ labelsDisplay('congratulations') }}
14	</p>
15	<span v-if="bookableType === 'appointment'"
16	>{{ labelsDisplay('appointment_id') }} #981543</span
17	>
18
19	<AddToCalendar
20	v-if="checkScreen"
21	:calendar-string="labelsDisplay('add_to_calendar')"
22	class="am-fs__congrats-main-atc"
23	></AddToCalendar>
24	</div>
25
26	<div class="am-fs__congrats-info" :class="{ 'am-fs__congrats-info-mobile': checkScreen }">
27	<div class="am-fs__congrats-info-customer">
28	<component :is="componentTypes[bookableType]"></component>
29	<div>
30	<span> {{ labelsDisplay('congrats_total_amount') }}: </span>
31	<span> 1081.00$ - On-site </span>
32	</div>
33	<div class="am-fs__congrats-info-customer-border">
34	<span>{{ labelsDisplay('your_name_colon') }}:</span>
35	<span>Jon Doe</span>
36	</div>
37	<div>
38	<span>{{ labelsDisplay('email_address_colon') }}:</span>
39	<span>{{ supportEmail }}</span>
40	</div>
41	<div>
42	<span>{{ labelsDisplay('phone_number_colon') }}:</span>
43	<span>0000000000</span>
44	</div>
45	</div>
46	</div>
47	</div>
48	</template>
49
50	<script setup>
51	import AddToCalendar from '../parts/AddToCalendar.vue'
52	import AppointmentInfoService from '../parts/AppointmentInfoService.vue'
53	import PackageInfoService from '../parts/PackageInfoService.vue'
54	import { computed, inject, markRaw } from 'vue'
55	import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation'
56	import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js'
57	import { getSupportEmail } from '../../../../../assets/js/common/whiteLabel.js'
58
59	let props = defineProps({
60	globalClass: {
61	type: String,
62	default: '',
63	},
64	})
65
66	let baseUrls = inject('baseUrls')
67
68	let langKey = inject('langKey')
69	let amLabels = inject('labels')
70
71	let pageRenderKey = inject('pageRenderKey')
72	const { amCustomize } = useReactiveCustomize()
73
74	// * Settings
75	const amSettings = inject('settings')
76	const supportEmail = computed(() => getSupportEmail(amSettings))
77
78	// * Label computed function
79	function labelsDisplay(label) {
80	let computedLabel = computed(() => {
81	return amCustomize.value[pageRenderKey.value].congratulations.translations &&
82	amCustomize.value[pageRenderKey.value].congratulations.translations[label] &&
83	amCustomize.value[pageRenderKey.value].congratulations.translations[label][langKey.value]
84	? amCustomize.value[pageRenderKey.value].congratulations.translations[label][langKey.value]
85	: amLabels[label]
86	})
87
88	return computedLabel.value
89	}
90
91	let bookableType = inject('bookableType')
92	const componentTypes = {
93	appointment: markRaw(AppointmentInfoService),
94	package: markRaw(PackageInfoService),
95	}
96
97	let cWidth = inject('containerWidth', 0)
98	let checkScreen = computed(() => cWidth.value < 540)
99
100	let amColors = inject('amColors')
101
102	const cssVars = computed(() => {
103	if (checkScreen.value) {
104	return {
105	'--am-c-atc-text-op40': useColorTransparency(amColors.value.colorMainText, 0.4),
106	'--am-c-atc-heading-text-op40': useColorTransparency(amColors.value.colorSbText, 0.4),
107	'--am-c-atc-text-op30': useColorTransparency(amColors.value.colorMainText, 0.3),
108	'--am-c-atc-text': amColors.value.colorMainText,
109	'--am-c-atc-heading-text': amColors.value.colorSbText,
110	}
111	} else {
112	return {
113	'--am-c-atc-text-op40': useColorTransparency(amColors.value.colorMainText, 0.4),
114	'--am-c-atc-heading-text-op40': useColorTransparency(
115	amColors.value.colorMainHeadingText,
116	0.4,
117	),
118	'--am-c-atc-text-op30': useColorTransparency(amColors.value.colorMainText, 0.3),
119	'--am-c-atc-text': amColors.value.colorMainText,
120	'--am-c-atc-heading-text': amColors.value.colorMainHeadingText,
121	}
122	}
123	})
124	</script>
125
126	<script>
127	export default {
128	name: 'CongratulationsStep',
129	key: 'congratulations',
130	sidebarData: {
131	label: 'congratulations',
132	icon: 'pennant',
133	selected: true,
134	finished: true,
135	},
136	}
137	</script>
138
139	<style lang="scss">
140	#amelia-app-backend-new #amelia-container {
141	.am-fs__main-content.am-fs__congrats {
142	padding: 16px 16px 16px;
143	height: calc(100% - 56px);
144	margin-top: 0;
145	}
146
147	.am-fs-sb-atc {
148	--am-c-sb-bgr-atc: var(--am-c-sb-bgr);
149	background-image: linear-gradient(var(--am-c-sb-bgr-atc) 80%, transparent 20%);
150	}
151
152	.am-fs__congrats {
153	&-main {
154	margin-top: 22px;
155	display: flex;
156	flex-direction: column;
157	align-items: center;
158	font-family: var(--am-font-family);
159
160	& > * {
161	$count: 5;
162	@for $i from 0 through $count {
163	&:nth-child(#{$i + 1}) {
164	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
165	animation-fill-mode: both;
166	}
167	}
168	}
169
170	& img {
171	width: 54px;
172	margin-bottom: 8px;
173	}
174	&-heading {
175	margin-bottom: 2px;
176	font-weight: 500;
177	font-size: 18px;
178	line-height: 28px;
179	color: var(--am-c-atc-heading-text);
180	}
181	&-atc {
182	margin-top: 16px;
183	}
184	& span {
185	color: var(--am-c-atc-heading-text-op40);
186	font-weight: 400;
187	font-size: 13px;
188	line-height: 18px;
189	}
190	}
191	&-info-mobile {
192	padding: 16px;
193	margin-top: 24px;
194	border-radius: 6px;
195	box-shadow: 0 2px 3px 2px rgba(26, 44, 55, 0.1);
196	}
197	&-info {
198	--am-c-atc-main-bgr: var(--am-c-main-bgr);
199	background-color: var(--am-c-atc-main-bgr);
200	&-customer {
201	&-border {
202	border-top: 1px solid var(--am-c-atc-text-op30);
203	padding-top: 16px;
204	}
205
206	& > div {
207	$count: 20;
208	@for $i from 0 through $count {
209	&:nth-child(#{$i + 1}) {
210	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
211	animation-fill-mode: both;
212	}
213	}
214	}
215
216	& div {
217	display: flex;
218	justify-content: space-between;
219	font-weight: 400;
220	font-size: 14px;
221	margin-bottom: 12px;
222	line-height: 20px;
223	& span {
224	color: var(--am-c-atc-text-op40);
225	}
226	& span:nth-child(2) {
227	color: var(--am-c-atc-text);
228	}
229	}
230	}
231	}
232	}
233
234	.am-skeleton-congratz {
235	&-heading {
236	display: flex;
237	flex-direction: column;
238	align-items: center;
239	margin-bottom: 13px;
240
241	:first-child {
242	width: 52px;
243	height: 52px;
244	margin-bottom: 9px;
245	}
246
247	:nth-child(2) {
248	height: 28px;
249	max-width: 132px;
250	margin-bottom: 4px;
251	}
252
253	:last-child {
254	max-width: 148px;
255	height: 18px;
256	}
257	}
258
259	&-booking-info {
260	& > div {
261	display: flex;
262	justify-content: space-between;
263	margin-bottom: 12px;
264
265	.el-skeleton__item {
266	height: 20px;
267	}
268	}
269
270	.am-customer-info {
271	border-bottom: 1px solid #d1d5d7;
272	padding-bottom: 12px;
273	}
274	}
275	}
276	}
277	</style>
278