common
1 month ago
BringingAnyone.vue
1 month ago
CartStep.vue
1 month ago
Congratulations.vue
1 month ago
DateTimeStep.vue
1 month ago
EmployeeStep.vue
1 month ago
Extras.vue
1 month ago
InfoStep.vue
1 month ago
InitStep.vue
1 month ago
LocationStep.vue
1 month ago
PackageAppointmentsListStep.vue
1 month ago
PackageAppointmentsStep.vue
1 month ago
PackageInfoStep.vue
1 month ago
PackageStep.vue
1 month ago
PaymentStep.vue
1 month ago
RecurringStep.vue
1 month ago
RecurringSummary.vue
1 month ago
ServiceStep.vue
1 month ago
BringingAnyone.vue
263 lines
| 1 | <template> |
| 2 | <div class="am-fs__bringing" :style="cssVars"> |
| 3 | <div class="am-fs__bringing-main"> |
| 4 | <div |
| 5 | v-if="inPopup && amCustomize[pageRenderKey].bringingAnyone.options.heading.visibility" |
| 6 | class="am-fs__bringing-heading" |
| 7 | > |
| 8 | {{ labelsDisplay('bringing_anyone_title') }} |
| 9 | </div> |
| 10 | <div class="am-fs__bringing-content"> |
| 11 | <span class="am-fs__bringing-content-left"> |
| 12 | <span class="am-icon-users"></span> |
| 13 | <span class="am-fs__bringing-content-text">{{ |
| 14 | labelsDisplay( |
| 15 | amSettings.appointments.bringingAnyoneLogic === 'additional' |
| 16 | ? 'bringing_people' |
| 17 | : 'bringing_people_total', |
| 18 | ) |
| 19 | }}</span> |
| 20 | </span> |
| 21 | <AmInputNumber v-model="persons" :min="options.min" :max="options.max" size="small" /> |
| 22 | </div> |
| 23 | <div |
| 24 | v-if="amCustomize[pageRenderKey].bringingAnyone.options.info.visibility" |
| 25 | class="am-fs__bringing-message" |
| 26 | > |
| 27 | {{ |
| 28 | labelsDisplay( |
| 29 | amSettings.appointments.bringingAnyoneLogic === 'additional' |
| 30 | ? 'add_people' |
| 31 | : 'add_people_total', |
| 32 | ) |
| 33 | }} |
| 34 | </div> |
| 35 | </div> |
| 36 | |
| 37 | <div |
| 38 | v-if=" |
| 39 | features.customPricing && |
| 40 | amCustomize[pageRenderKey].bringingAnyone.options.bringingPrice.visibility |
| 41 | " |
| 42 | class="am-fs__bringing-main" |
| 43 | > |
| 44 | <div class="am-fs__bringing-content-price"> |
| 45 | <span class="am-fs__bringing-content-price-left"> |
| 46 | <span class="am-icon-service"></span> |
| 47 | <span class="am-fs__bringing-content-text"> |
| 48 | {{ labelsDisplay('bringing_price') }} |
| 49 | </span> |
| 50 | </span> |
| 51 | <p |
| 52 | v-for="(item, index) in [ |
| 53 | { from: 1, to: 3, prices: [30, 30] }, |
| 54 | { from: 4, to: 6, prices: [25, 25] }, |
| 55 | { from: 7, to: 9, prices: [20, 20] }, |
| 56 | ]" |
| 57 | :key="index" |
| 58 | class="am-fs__bringing-content-text am-fs__bringing-content-price-text" |
| 59 | :class="{ |
| 60 | 'am-fs__bringing-content-price-text-selected': index === 1, |
| 61 | }" |
| 62 | > |
| 63 | <span class="am-icon-users"></span> |
| 64 | <span>{{ item.from }} - {{ item.to }}</span> |
| 65 | <span>{{ |
| 66 | item.prices[0] === item.prices[1] |
| 67 | ? useFormattedPrice(item.prices[0]) |
| 68 | : useFormattedPrice(item.prices[0]) + ' - ' + useFormattedPrice(item.prices[1]) |
| 69 | }}</span> |
| 70 | </p> |
| 71 | </div> |
| 72 | </div> |
| 73 | </div> |
| 74 | </template> |
| 75 | |
| 76 | <script setup> |
| 77 | import AmInputNumber from '../../../../_components/input-number/AmInputNumber.vue' |
| 78 | |
| 79 | import { ref, computed, inject } from 'vue' |
| 80 | import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation' |
| 81 | import { useFormattedPrice } from '../../../../../assets/js/common/formatting' |
| 82 | import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js' |
| 83 | |
| 84 | const amSettings = inject('settings') |
| 85 | |
| 86 | let { inPopup } = inject('inPopup', { |
| 87 | inPopup: { |
| 88 | value: true, |
| 89 | }, |
| 90 | }) |
| 91 | |
| 92 | // * Features |
| 93 | let features = inject('features') |
| 94 | |
| 95 | let langKey = inject('langKey') |
| 96 | let amLabels = inject('labels') |
| 97 | |
| 98 | let pageRenderKey = inject('pageRenderKey') |
| 99 | const { amCustomize } = useReactiveCustomize() |
| 100 | |
| 101 | // * Plugin Licence |
| 102 | let licence = inject('licence') |
| 103 | |
| 104 | // * Label computed function |
| 105 | function labelsDisplay(label) { |
| 106 | let computedLabel = computed(() => { |
| 107 | return amCustomize.value[pageRenderKey.value].bringingAnyone.translations && |
| 108 | amCustomize.value[pageRenderKey.value].bringingAnyone.translations[label] && |
| 109 | amCustomize.value[pageRenderKey.value].bringingAnyone.translations[label][langKey.value] |
| 110 | ? amCustomize.value[pageRenderKey.value].bringingAnyone.translations[label][langKey.value] |
| 111 | : amLabels[label] |
| 112 | }) |
| 113 | |
| 114 | return computedLabel.value |
| 115 | } |
| 116 | |
| 117 | /** |
| 118 | * Computed properties for "Bringing anyone with you" functionality |
| 119 | * @type {ComputedRef<*|boolean>} |
| 120 | */ |
| 121 | let options = ref({ |
| 122 | min: amSettings.appointments.bringingAnyoneLogic === 'additional' ? 0 : 1, |
| 123 | max: 5, |
| 124 | }) |
| 125 | let persons = ref(1) |
| 126 | |
| 127 | // * Global colors |
| 128 | let amColors = inject('amColors') |
| 129 | let cssVars = computed(() => { |
| 130 | return { |
| 131 | '--am-bringing-color-border': useColorTransparency(amColors.value.colorMainText, 0.25), |
| 132 | '--am-bringing-color-text-opacity60': useColorTransparency(amColors.value.colorMainText, 0.6), |
| 133 | '--am-c-ps-primary': amColors.value.colorPrimary, |
| 134 | '--am-c-ps-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.1), |
| 135 | } |
| 136 | }) |
| 137 | </script> |
| 138 | |
| 139 | <script> |
| 140 | export default { |
| 141 | name: 'BringingAnyone', |
| 142 | key: 'bringingAnyone', |
| 143 | sidebarData: { |
| 144 | label: 'bringing_anyone', |
| 145 | icon: 'users-plus', |
| 146 | stepSelectedData: [], |
| 147 | finished: false, |
| 148 | selected: false, |
| 149 | }, |
| 150 | } |
| 151 | </script> |
| 152 | |
| 153 | <style lang="scss"> |
| 154 | @mixin bringing-anyone-block { |
| 155 | .am-fs__bringing { |
| 156 | &-main { |
| 157 | margin: 0 0 32px 0; |
| 158 | } |
| 159 | |
| 160 | &-heading { |
| 161 | display: block; |
| 162 | width: 100%; |
| 163 | font-size: 16px; |
| 164 | font-weight: 500; |
| 165 | line-height: 1.5; |
| 166 | color: var(--am-c-main-text); |
| 167 | margin: 0 0 4px 0; |
| 168 | } |
| 169 | |
| 170 | &-content-persons { |
| 171 | display: flex; |
| 172 | |
| 173 | &-text { |
| 174 | margin: 0 0 0 8px; |
| 175 | } |
| 176 | } |
| 177 | |
| 178 | &-content-price { |
| 179 | display: block; |
| 180 | background-color: var(--am-c-ps-primary-op10); |
| 181 | |
| 182 | &-left { |
| 183 | margin-bottom: 5px; |
| 184 | |
| 185 | .am-icon-service { |
| 186 | margin-right: 5px; |
| 187 | } |
| 188 | } |
| 189 | |
| 190 | &-text { |
| 191 | padding: 3px; |
| 192 | border: 1px solid var(--am-bringing-color-border); |
| 193 | border-radius: 8px; |
| 194 | display: inline-block; |
| 195 | margin: 3px 0 0 3px; |
| 196 | |
| 197 | span { |
| 198 | margin: 3px; |
| 199 | } |
| 200 | |
| 201 | &-selected { |
| 202 | border-color: var(--am-c-ps-primary); |
| 203 | background-color: #ffffff; |
| 204 | } |
| 205 | |
| 206 | span:nth-child(3) { |
| 207 | color: var(--am-c-ps-primary); |
| 208 | font-weight: bold; |
| 209 | } |
| 210 | } |
| 211 | } |
| 212 | |
| 213 | &-content { |
| 214 | display: flex; |
| 215 | } |
| 216 | |
| 217 | &-content, |
| 218 | &-content-price { |
| 219 | align-items: center; |
| 220 | justify-content: space-between; |
| 221 | padding: 12px 16px; |
| 222 | margin: 0 0 4px 0; |
| 223 | border: 1px solid var(--am-bringing-color-border); |
| 224 | border-radius: 8px; |
| 225 | |
| 226 | &-left { |
| 227 | display: flex; |
| 228 | align-items: center; |
| 229 | |
| 230 | .am-icon-users { |
| 231 | font-size: 24px; |
| 232 | line-height: 1; |
| 233 | color: var(--am-c-main-text); |
| 234 | } |
| 235 | } |
| 236 | |
| 237 | &-text { |
| 238 | font-size: 14px; |
| 239 | font-weight: 400; |
| 240 | line-height: 1.43; |
| 241 | color: var(--am-c-main-text); |
| 242 | } |
| 243 | |
| 244 | .am-input-number { |
| 245 | max-width: 100px; |
| 246 | } |
| 247 | } |
| 248 | |
| 249 | &-message { |
| 250 | font-size: 14px; |
| 251 | font-weight: 400; |
| 252 | line-height: 1.43; |
| 253 | color: var(--am-bringing-color-text-opacity60); |
| 254 | } |
| 255 | } |
| 256 | } |
| 257 | |
| 258 | // Admin |
| 259 | #amelia-app-backend-new { |
| 260 | @include bringing-anyone-block; |
| 261 | } |
| 262 | </style> |
| 263 |