PaymentStep.vue — Booking for Appointments and Events Calendar – Amelia 2.4.6

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

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

PaymentStep.vue

341 lines

1	<template>
2	<div :class="props.globalClass" :style="cssVars">
3	<div class="am-fs__payments">
4	<div class="am-fs__payments-heading">
5	<span class="am-fs__payments-heading-main">
6	{{ labelsDisplay('summary') }}
7	</span>
8	</div>
9
10	<div class="am-fs__payments-price">
11	<component :is="componentTypes[bookableType]" :payment-gateway="paymentGateway"></component>
12	</div>
13
14	<AmCheckbox
15	v-if="paymentGateway !== 'onSite' && features.depositPayment"
16	v-model="paymentDeposit"
17	class="am-fs__payments-full"
18	:label="labelsDisplay('full_amount_consent')"
19	:class="{ 'am-fs__payments-full-checked': paymentDeposit }"
20	>
21	</AmCheckbox>
22
23	<p v-if="!licence.isLite && !licence.isStarter" class="am-fs__payments-method">
24	{{ labelsDisplay('payment_method') }}
25	</p>
26	<div v-if="!licence.isLite && !licence.isStarter" class="am-fs__payments-main">
27	<div class="am-fs__payments-main-cards">
28	<div
29	v-for="(available, gateway) in availablePayments"
30	:key="gateway"
31	class="am-fs__payments-main-button"
32	:class="{
33	'am-fs__payments-main-button_selected': paymentGateway === gateway,
34	}"
35	@click="setPaymentGateway(gateway)"
36	>
37	<img
38	:src="baseUrls.wpAmeliaPluginURL + '/v3/src/assets/img/icons/' + gateway + '.svg'"
39	:alt="gateway"
40	/>
41	<div>
42	<p>
43	{{
44	gateway === 'onSite'
45	? labelsDisplay('on_site')
46	: paymentsBtnText.filter((item) => item.key === gateway)[0].text
47	}}
48	</p>
49	</div>
50	</div>
51	</div>
52	</div>
53	<div class="am-fs__payments-sentence">
54	<p>
55	{{
56	paymentGateway === 'onSite'
57	? labelsDisplay('payment_onsite_sentence')
58	: paymentGateway === 'mollie' \|\| paymentGateway === 'wc'
59	? labelsDisplay('payment_wc_mollie_sentence')
60	: ''
61	}}
62	</p>
63	</div>
64	</div>
65	</div>
66	</template>
67
68	<script setup>
69	import AmCheckbox from '../../../../_components/checkbox/AmCheckbox.vue'
70	import AppointmentInfo from '../parts/AppointmentInfo.vue'
71	import PaymentPackageInfo from '../parts/PaymentPackageInfo.vue'
72	import { inject, ref, markRaw, computed } from 'vue'
73	import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation'
74	import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js'
75
76	let props = defineProps({
77	globalClass: {
78	type: String,
79	default: '',
80	},
81	})
82
83	// * Plugin Licence
84	let licence = inject('licence')
85
86	// * Features
87	let features = inject('features')
88
89	let bookableType = inject('bookableType')
90
91	let baseUrls = inject('baseUrls')
92
93	let langKey = inject('langKey')
94	let amLabels = inject('labels')
95
96	let pageRenderKey = inject('pageRenderKey')
97	const { amCustomize } = useReactiveCustomize()
98
99	// * Payment Part
100	const componentTypes = {
101	appointment: markRaw(AppointmentInfo),
102	package: markRaw(PaymentPackageInfo),
103	}
104
105	let paymentDeposit = ref(false)
106
107	const availablePayments = {
108	onSite: true,
109	stripe: true,
110	payPal: true,
111	razorpay: true,
112	}
113
114	let paymentGateway = ref('onSite')
115
116	function setPaymentGateway(gateway) {
117	paymentGateway.value = gateway
118	}
119
120	// * Label computed function
121	function labelsDisplay(label) {
122	let computedLabel = computed(() => {
123	return amCustomize.value[pageRenderKey.value].paymentStep.translations &&
124	amCustomize.value[pageRenderKey.value].paymentStep.translations[label] &&
125	amCustomize.value[pageRenderKey.value].paymentStep.translations[label][langKey.value]
126	? amCustomize.value[pageRenderKey.value].paymentStep.translations[label][langKey.value]
127	: amLabels[label]
128	})
129
130	return computedLabel.value
131	}
132
133	// * Colors
134	let amColors = inject('amColors')
135	const cssVars = computed(() => {
136	return {
137	'--am-c-ps-price-bgr': useColorTransparency(amColors.value.colorBtnPrim, 0.05),
138	'--am-c-ps-total-price': amColors.value.colorBtnPrim,
139	'--am-c-ps-text-op50': useColorTransparency(amColors.value.colorMainText, 0.5),
140	'--am-c-ps-text-op25': useColorTransparency(amColors.value.colorMainText, 0.25),
141	'--am-c-ps-text-op20': useColorTransparency(amColors.value.colorMainText, 0.2),
142	'--am-c-ps-text-op06': useColorTransparency(amColors.value.colorMainText, 0.06),
143	'--am-c-ps-primary': amColors.value.colorPrimary,
144	'--am-c-ps-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.1),
145	'--am-c-ps-primary-op06': useColorTransparency(amColors.value.colorPrimary, 0.06),
146	}
147	})
148
149	let paymentsBtnText = []
150
151	Object.keys(availablePayments).forEach((key) => {
152	paymentsBtnText.push({ key, text: getPaymentBtnString(key) })
153	})
154
155	function getPaymentBtnString(key) {
156	switch (key) {
157	case 'onSite':
158	return amLabels['on_site']
159	case 'payPal':
160	return amLabels['payment_paypal']
161	case 'stripe':
162	return amLabels['stripe']
163	case 'razorpay':
164	return amLabels['razorpay']
165	case 'mollie':
166	return amLabels['on_line']
167	default:
168	return ''
169	}
170	}
171	</script>
172
173	<script>
174	export default {
175	name: 'PaymentStep',
176	key: 'paymentStep',
177	sidebarData: {
178	label: 'payment_step',
179	icon: 'payment',
180	stepSelectedData: [],
181	finished: false,
182	selected: false,
183	},
184	}
185	</script>
186
187	<style lang="scss">
188	#amelia-app-backend-new #amelia-container {
189	--am-c-ps-text: var(--am-c-main-text);
190	--am-c-ps-border: var(--am-c-inp-border);
191
192	.am-fs__main-content.am-fs__payments {
193	padding-top: 0;
194	}
195
196	.am-fs__payments {
197	& > * {
198	$count: 6;
199	@for $i from 0 through $count {
200	&:nth-child(#{$i + 1}) {
201	animation: 600ms cubic-bezier(0.45, 1, 0.4, 1.2) #{$i * 100}ms am-animation-slide-up;
202	animation-fill-mode: both;
203	}
204	}
205	}
206
207	&-heading {
208	font-size: 15px;
209	font-style: normal;
210	font-weight: 500;
211	line-height: 1.6;
212	color: var(--am-c-ps-text);
213	margin-bottom: 4px;
214	}
215
216	&-price {
217	border: 1px solid var(--am-c-ps-text-op20);
218	border-radius: 8px;
219	padding: 16px;
220	margin-bottom: 16px;
221	}
222
223	&-sentence {
224	display: flex;
225	justify-content: center;
226	margin-top: 2px;
227	p {
228	display: inline-flex;
229	font-size: 14px;
230	font-weight: 500;
231	line-height: 1.42857;
232	color: var(--am-c-pay-text-op60);
233	}
234	}
235
236	&-full {
237	color: var(--am-c-ps-text);
238	border: 1px solid var(--am-c-ps-text-op25);
239	border-radius: 8px;
240	box-shadow: 0 1px 1px var(--am-c-ps-text-op06);
241	box-sizing: border-box;
242	padding: 12px;
243	margin-bottom: 16px;
244
245	&-checked {
246	border: 1px solid var(--am-c-ps-primary);
247	background: var(--am-c-ps-primary-op10);
248
249	&:after {
250	transform: rotate(45deg) scaleY(1);
251	}
252	}
253
254	.el-checkbox {
255	&__input {
256	height: 32px;
257	line-height: 32px;
258	align-items: center;
259	}
260
261	&__label {
262	line-height: 32px;
263	align-items: center;
264	}
265	}
266	}
267
268	&-method {
269	font-size: 18px;
270	font-weight: 500;
271	line-height: 1.55555;
272	color: var(--am-c-ps-text);
273	margin-bottom: 8px;
274	}
275
276	&-error {
277	position: absolute;
278	top: 5px;
279	}
280
281	&-main {
282	&-cards {
283	display: flex;
284	flex-wrap: wrap;
285	gap: 6px;
286	}
287
288	&-button {
289	display: flex;
290	align-items: center;
291	gap: 2px;
292	width: 108px;
293	border: 1px solid var(--am-c-ps-text-op25);
294	border-radius: 8px;
295	box-shadow: 0 1px 1px var(--am-c-ps-text-op06);
296	box-sizing: border-box;
297	padding: 12px;
298	cursor: pointer;
299	flex-direction: column;
300	justify-items: center;
301	height: fit-content;
302
303	img {
304	height: 24px;
305	width: 24px;
306	}
307
308	div {
309	p {
310	font-weight: 500;
311	font-size: 15px;
312	line-height: 24px;
313	color: var(--am-c-ps-text);
314	margin: 0;
315	text-align: center;
316	word-break: break-all;
317	}
318	span {
319	font-size: 12px;
320	font-weight: 400;
321	line-height: 1.66666;
322	color: var(--am-c-ps-text-op50);
323	}
324	}
325
326	&_selected {
327	background: var(--am-c-ps-primary-op10);
328	border: 1px solid var(--am-c-ps-primary);
329	box-sizing: border-box;
330	box-shadow: 0 1px 1px var(--am-c-ps-primary-op06);
331	}
332	}
333	}
334	// pm - payment method
335	&-pm {
336	margin-top: 24px;
337	}
338	}
339	}
340	</style>
341