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

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

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

Congratulations.vue

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