File manager

File manager - Edit - /home/premiey/www/wp-content/plugins/ameliabooking/v3/src/views/public/Parts/Payment/Coupon/Coupon.vue

Back
<template> <div class="am-fs__coupon" :class="{'am-fs__coupon-mobile-s':mobileS}" :style="cssVars" > <span> {{ `${amLabels.coupon}:` }} </span> <AmInput v-model="code" size="small" :class="{'am-fs__coupon-invalid': coupon.limit === 0}" :icon-start="IconCoupon" :icon-end="code && (coupon.discount \|\| coupon.deduction) ? (coupon.limit === 0 ? IconInfoReverse : IconCheck) : ''" @input="clearValidation" ></AmInput> <AmButton size="small" @click="validateCoupon" > {{ amLabels.add_coupon_btn }} </AmButton> </div> <!-- Coupons Used Message --> <el-row v-if="props.bookableType !== 'event'" class="am-coupon-limit" :style="cssVars" > <el-col :sm="2" :xs="4"> <div style="display: inline-block;"> <span class="am-icon-coupon-limit"></span> </div> </el-col> <el-col class="am-coupon-limit-col" :sm="22" :xs="20"> <div class="am-coupon-limit-text"> <strong> {{ amLabels.coupons_used }} </strong> <p> {{ `${amLabels.coupons_used_description} ${coupon.limit}` }} </p> </div> </el-col> </el-row> <!-- /Coupons Used Message --> </template> <script setup> import AmInput from '../../../../_components/input/AmInput.vue' import AmButton from '../../../../_components/button/AmButton.vue' import IconCoupon from '../../../../_components/icons/IconCoupon.vue' import IconCheck from '../../../../_components/icons/IconCheck.vue' import IconInfoReverse from '../../../../_components/icons/IconInfoReverse.vue' // * Import from Vue import { inject, computed, onMounted } from 'vue' // * Axios import httpClient from '../../../../../plugins/axios' // * Composables import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation.js' // * Import from Store import { useStore } from 'vuex' const store = useStore() let props = defineProps({ entityId: { type: [Number, String], required: true }, bookableType: { type: String, required: true, }, bookingsCount: { type: Number, required: true } }) // * Computed labels let amLabels = inject('amLabels') /************ * Coupon * **********/ let coupon = computed(() => store.getters['coupon/getCoupon']) let code = computed({ get: () => store.getters['coupon/getCode'], set: (val) => { store.commit('coupon/setCode', val) } }) onMounted(() => { if (coupon.value.code) { validateCoupon() } }) const emits = defineEmits(['couponApplied']) function clearValidation () { let err = store.getters['coupon/getError'] if (err) { store.commit('coupon/setError', '') } } function validateCoupon () { if (coupon.value.code) { httpClient.post( '/coupons/validate', { code: coupon.value.code, id: props.entityId, type: store.getters['bookableType/getType'], user: { firstName: store.getters['customerInfo/getCustomerFirstName'], lastName: store.getters['customerInfo/getCustomerLastName'], email: store.getters['customerInfo/getCustomerEmail'], }, count: props.bookingsCount } ).then(response => { store.commit('coupon/setCoupon', { code: response.data.data.coupon.code, deduction: response.data.data.coupon.deduction, discount: response.data.data.coupon.discount, limit: response.data.data.limit, }) emits('couponApplied') }).catch(e => { store.commit('coupon/setCoupon', { code: coupon.value.code, deduction: 0, discount: 0, limit: 0, }) let message = e.response.data.message if ('couponUnknown' in e.response.data.data && e.response.data.data.couponUnknown === true) { message = amLabels.coupon_unknown } else if ('couponInvalid' in e.response.data.data && e.response.data.data.couponInvalid === true) { message = amLabels.coupon_invalid } else if ('couponMissing' in e.response.data.data && e.response.data.data.couponMissing === true) { message = amLabels.coupon_missing } store.commit('coupon/setError', message) emits('couponApplied') }) } else { store.commit('coupon/setCoupon', { code: '', deduction: 0, discount: 0, limit: 0, }) } } let cWidth = inject('containerWidth', 0) let mobileS = computed(() => cWidth.value < 340) // Global colors let amColors = inject('amColors'); let cssVars = computed(() => { return { '--am-c-coupon-primary': amColors.value.colorPrimary, '--am-c-coupon-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.10), '--am-c-coupon-primary-op40': useColorTransparency(amColors.value.colorPrimary, 0.40), } }) </script> <script> export default { name: 'CouponCode' } </script> <style lang="scss"> .amelia-v2-booking { #amelia-container { .am-coupon-limit { background-color: var(--am-c-coupon-primary-op10); border: 1px solid var(--am-c-coupon-primary-op40); border-radius: 8px; padding: 10px; &-col { display: flex; justify-content: center; } &-text { display: flex; flex-direction: column; justify-content: space-around; font-size: 13px; div { display: inline-block; padding-top: 6px; padding-bottom: 6px; } p, strong { color: var(--am-c-ps-text); } p { font-weight: 300; } } .am-icon-coupon-limit { font-size: 30px; display: inline-block; margin-right: 2px; vertical-align: middle; margin-bottom: 6px; margin-top: 6px; color: white; background-color: var(--am-c-coupon-primary); border-radius: 50%; } } .am-fs__coupon { width: 100%; display: flex; padding: 0; margin: 16px 0 0; font-size: 14px; font-weight: 400; line-height: 1.42857; gap: 4px; color: var(--am-c-ps-text); white-space: nowrap; align-items: center; .am-icon-info-reverse, .am-icon-check { font-size: 20px; } .am-icon-info-reverse { /* $red-900 / color: var(--am-c-error); } .am-icon-check { / $green-900 / position: absolute; width: 20px; height: 20px; background-color: var(--am-c-success); border-radius: 50%; color: var(--am-c-inp-bgr); &:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .am-icon-coupon { / $shade-900 / color: var(--am-c-inp-text); font-size: 20px; } .am-input { input, input:active, input:focus { padding-left : 32px; } } & > span { margin-right: 3px } &-invalid { input { border: 1.5px solid var(--am-c-error); } } &-mobile-s { display: flex; flex-direction: column; } } .am-fs__coupon-discount { display: flex; justify-content: space-between; font-size: 14px; font-weight: 400; line-height: 1.42857; color: var(--am-c-ps-text); margin-bottom: 12px; & span:nth-child(2) { font-weight: 500; / $green-900 */ color: var(--am-c-success); } } } } </style>

| ver. 1.4 | Github | . | PHP 5.4.45 | Generation time: 0 | proxy | phpinfo | Settings