common
3 days ago
BringingAnyone.vue
3 days ago
CartStep.vue
3 days ago
Congratulations.vue
3 days ago
DateTimeStep.vue
3 days ago
EmployeeStep.vue
3 days ago
Extras.vue
3 days ago
InfoStep.vue
3 days ago
InitStep.vue
3 days ago
LocationStep.vue
3 days ago
PackageAppointmentsListStep.vue
3 days ago
PackageAppointmentsStep.vue
3 days ago
PackageInfoStep.vue
3 days ago
PackageStep.vue
3 days ago
PaymentStep.vue
3 days ago
RecurringStep.vue
3 days ago
RecurringSummary.vue
3 days ago
ServiceStep.vue
3 days ago
PackageStep.vue
337 lines
| 1 | <template> |
| 2 | <div |
| 3 | class="am-fs__ps" |
| 4 | :class="[props.globalClass, { 'am-fs__ps-popup': inPopup }]" |
| 5 | :style="cssVars" |
| 6 | > |
| 7 | <template v-for="pack in packages" :key="pack.id"> |
| 8 | <div |
| 9 | class="am-fs__ps-item" |
| 10 | :class="{ |
| 11 | 'am-fs__ps-item__selected': selected === pack.name && !inPopup, |
| 12 | }" |
| 13 | @click="clickedCard(pack.name)" |
| 14 | > |
| 15 | <div class="am-fs__ps-item__info"> |
| 16 | <p class="am-fs__ps-name"> |
| 17 | {{ pack.name }} |
| 18 | </p> |
| 19 | <div class="am-fs__ps-price__wrapper"> |
| 20 | <p class="am-fs__ps-discount"> |
| 21 | {{ `${labelsDisplay('discount_save')} 10%` }} |
| 22 | </p> |
| 23 | <p class="am-fs__ps-price">90$</p> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="am-fs__ps-item__services"> |
| 27 | <span v-for="book in pack.bookable" :key="book.id" class="am-fs__ps-item__services-inner"> |
| 28 | {{ `${book.serviceName} x ${book.quantity}` }} |
| 29 | </span> |
| 30 | </div> |
| 31 | </div> |
| 32 | </template> |
| 33 | </div> |
| 34 | </template> |
| 35 | |
| 36 | <script setup> |
| 37 | import { inject, computed, ref } from 'vue' |
| 38 | import { useColorTransparency } from '../../../../../assets/js/common/colorManipulation.js' |
| 39 | import { useReactiveCustomize } from '../../../../../assets/js/admin/useReactiveCustomize.js' |
| 40 | |
| 41 | let props = defineProps({ |
| 42 | globalClass: { |
| 43 | type: String, |
| 44 | default: '', |
| 45 | }, |
| 46 | }) |
| 47 | |
| 48 | let { inPopup } = inject('inPopup', { |
| 49 | inPopup: ref(false), |
| 50 | }) |
| 51 | |
| 52 | let selected = ref(false) |
| 53 | let packages = [ |
| 54 | { |
| 55 | id: 1, |
| 56 | name: 'Package 1', |
| 57 | bookable: [ |
| 58 | { |
| 59 | serviceName: 'Service 1', |
| 60 | quantity: 5, |
| 61 | }, |
| 62 | { |
| 63 | serviceName: 'Service 2', |
| 64 | quantity: 3, |
| 65 | }, |
| 66 | { |
| 67 | serviceName: 'Service 3', |
| 68 | quantity: 7, |
| 69 | }, |
| 70 | ], |
| 71 | }, |
| 72 | { |
| 73 | id: 2, |
| 74 | name: 'Package 2', |
| 75 | bookable: [ |
| 76 | { |
| 77 | serviceName: 'Service 1', |
| 78 | quantity: 5, |
| 79 | }, |
| 80 | { |
| 81 | serviceName: 'Service 2', |
| 82 | quantity: 3, |
| 83 | }, |
| 84 | { |
| 85 | serviceName: 'Service 3', |
| 86 | quantity: 7, |
| 87 | }, |
| 88 | ], |
| 89 | }, |
| 90 | { |
| 91 | id: 3, |
| 92 | name: 'Package 3', |
| 93 | bookable: [ |
| 94 | { |
| 95 | serviceName: 'Service 1', |
| 96 | quantity: 5, |
| 97 | }, |
| 98 | { |
| 99 | serviceName: 'Service 2', |
| 100 | quantity: 3, |
| 101 | }, |
| 102 | { |
| 103 | serviceName: 'Service 3', |
| 104 | quantity: 7, |
| 105 | }, |
| 106 | ], |
| 107 | }, |
| 108 | { |
| 109 | id: 4, |
| 110 | name: 'Package 4', |
| 111 | bookable: [ |
| 112 | { |
| 113 | serviceName: 'Service 1', |
| 114 | quantity: 5, |
| 115 | }, |
| 116 | { |
| 117 | serviceName: 'Service 2', |
| 118 | quantity: 3, |
| 119 | }, |
| 120 | { |
| 121 | serviceName: 'Service 3', |
| 122 | quantity: 7, |
| 123 | }, |
| 124 | ], |
| 125 | }, |
| 126 | { |
| 127 | id: 5, |
| 128 | name: 'Package 5', |
| 129 | bookable: [ |
| 130 | { |
| 131 | serviceName: 'Service 1', |
| 132 | quantity: 5, |
| 133 | }, |
| 134 | { |
| 135 | serviceName: 'Service 2', |
| 136 | quantity: 3, |
| 137 | }, |
| 138 | { |
| 139 | serviceName: 'Service 3', |
| 140 | quantity: 7, |
| 141 | }, |
| 142 | ], |
| 143 | }, |
| 144 | ] |
| 145 | |
| 146 | function clickedCard(name) { |
| 147 | selected.value = name |
| 148 | } |
| 149 | |
| 150 | let langKey = inject('langKey') |
| 151 | let amLabels = inject('labels') |
| 152 | |
| 153 | let pageRenderKey = inject('pageRenderKey') |
| 154 | const { amCustomize } = useReactiveCustomize() |
| 155 | |
| 156 | // * Label computed function |
| 157 | function labelsDisplay(label) { |
| 158 | let computedLabel = computed(() => { |
| 159 | return amCustomize.value[pageRenderKey.value].packageStep.translations && |
| 160 | amCustomize.value[pageRenderKey.value].packageStep.translations[label] && |
| 161 | amCustomize.value[pageRenderKey.value].packageStep.translations[label][langKey.value] |
| 162 | ? amCustomize.value[pageRenderKey.value].packageStep.translations[label][langKey.value] |
| 163 | : amLabels[label] |
| 164 | }) |
| 165 | |
| 166 | return computedLabel.value |
| 167 | } |
| 168 | |
| 169 | // * Global colors |
| 170 | let amColors = inject('amColors') |
| 171 | let cssVars = computed(() => { |
| 172 | return { |
| 173 | '--am-c-ps-text': amColors.value.colorMainText, |
| 174 | '--am-c-ps-text-op60': useColorTransparency(amColors.value.colorMainText, 0.6), |
| 175 | '--am-c-ps-text-op20': useColorTransparency(amColors.value.colorMainText, 0.2), |
| 176 | '--am-c-ps-text-op06': useColorTransparency(amColors.value.colorMainText, 0.06), |
| 177 | '--am-c-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.1), |
| 178 | '--am-c-scroll-op30': useColorTransparency(amColors.value.colorPrimary, 0.3), |
| 179 | '--am-c-scroll-op10': useColorTransparency(amColors.value.colorPrimary, 0.1), |
| 180 | '--am-c-success-op10': useColorTransparency(amColors.value.colorSuccess, 0.1), |
| 181 | } |
| 182 | }) |
| 183 | </script> |
| 184 | |
| 185 | <script> |
| 186 | export default { |
| 187 | name: 'PackagesStep', |
| 188 | key: 'packageStep', |
| 189 | sidebarData: { |
| 190 | label: 'package_selection', |
| 191 | icon: 'pack-check', |
| 192 | stepSelectedData: [], |
| 193 | finished: false, |
| 194 | selected: false, |
| 195 | }, |
| 196 | } |
| 197 | </script> |
| 198 | |
| 199 | <style lang="scss"> |
| 200 | #amelia-app-backend-new { |
| 201 | #amelia-container { |
| 202 | .am-fs { |
| 203 | &__ps { |
| 204 | display: flex; |
| 205 | flex-direction: column; |
| 206 | justify-content: space-between; |
| 207 | width: 100%; |
| 208 | |
| 209 | &.am-fs__ps-popup { |
| 210 | max-height: 296px; |
| 211 | overflow-x: hidden; |
| 212 | padding-right: 6px; |
| 213 | } |
| 214 | |
| 215 | // Main Scroll styles |
| 216 | &::-webkit-scrollbar { |
| 217 | width: 6px; |
| 218 | } |
| 219 | |
| 220 | &::-webkit-scrollbar-thumb { |
| 221 | border-radius: 6px; |
| 222 | background: var(--am-c-scroll-op30); |
| 223 | } |
| 224 | |
| 225 | &::-webkit-scrollbar-track { |
| 226 | border-radius: 6px; |
| 227 | background: var(--am-c-scroll-op10); |
| 228 | } |
| 229 | |
| 230 | &-item { |
| 231 | --am-c-ps-bgr: transparent; |
| 232 | --am-c-ps-text: var(--am-c-ps-text-op60); |
| 233 | --am-c-ps-border: var(--am-c-ps-text-op20); |
| 234 | --am-c-ps-shadow: var(--am-c-ps-text-op06); |
| 235 | |
| 236 | width: 100%; |
| 237 | padding: 12px; |
| 238 | margin-bottom: 12px; |
| 239 | background-color: var(--am-c-ps-bgr); |
| 240 | border: 1px solid var(--am-c-ps-border); |
| 241 | border-radius: 8px; |
| 242 | box-shadow: 0 1px 1px var(--am-c-ps-shadow); |
| 243 | box-sizing: border-box; |
| 244 | cursor: pointer; |
| 245 | |
| 246 | &.am-fs__ps-item__selected { |
| 247 | --am-c-ps-text: var(--am-c-main-text); |
| 248 | --am-c-ps-border: var(--am-c-primary); |
| 249 | } |
| 250 | |
| 251 | &:last-child { |
| 252 | margin-bottom: 0; |
| 253 | } |
| 254 | |
| 255 | &__info { |
| 256 | display: flex; |
| 257 | flex-direction: row; |
| 258 | align-items: center; |
| 259 | justify-content: space-between; |
| 260 | margin: 0 0 4px; |
| 261 | } |
| 262 | |
| 263 | &__services { |
| 264 | display: flex; |
| 265 | flex-direction: row; |
| 266 | flex-wrap: wrap; |
| 267 | |
| 268 | &-inner { |
| 269 | display: inline-flex; |
| 270 | flex-direction: row; |
| 271 | flex-wrap: nowrap; |
| 272 | font-size: 13px; |
| 273 | font-weight: 400; |
| 274 | line-height: 1.3846; |
| 275 | align-items: center; |
| 276 | justify-content: center; |
| 277 | color: var(--am-c-ps-text); |
| 278 | |
| 279 | &::before { |
| 280 | content: ''; |
| 281 | display: inline-flex; |
| 282 | width: 4px; |
| 283 | height: 4px; |
| 284 | border-radius: 50%; |
| 285 | background-color: var(--am-c-ps-text); |
| 286 | margin: 0 6px; |
| 287 | } |
| 288 | |
| 289 | &:first-child { |
| 290 | &::before { |
| 291 | content: unset; |
| 292 | } |
| 293 | } |
| 294 | } |
| 295 | } |
| 296 | } |
| 297 | |
| 298 | &-name { |
| 299 | font-size: 15px; |
| 300 | font-weight: 500; |
| 301 | line-height: 1.6; |
| 302 | color: var(--am-c-main-text); |
| 303 | margin: 0; |
| 304 | } |
| 305 | |
| 306 | &-price { |
| 307 | color: var(--am-c-primary); |
| 308 | background-color: var(--am-c-primary-op10); |
| 309 | |
| 310 | &__wrapper { |
| 311 | display: flex; |
| 312 | flex-direction: row; |
| 313 | |
| 314 | & > p { |
| 315 | font-size: 14px; |
| 316 | font-weight: 400; |
| 317 | line-height: 1; |
| 318 | text-align: center; |
| 319 | vertical-align: middle; |
| 320 | padding: 5px 8px; |
| 321 | margin: 0 0 0 8px; |
| 322 | border-radius: 12px; |
| 323 | } |
| 324 | } |
| 325 | } |
| 326 | |
| 327 | &-discount { |
| 328 | color: var(--am-c-success); |
| 329 | background-color: var(--am-c-success-op10); |
| 330 | margin: 0; |
| 331 | } |
| 332 | } |
| 333 | } |
| 334 | } |
| 335 | } |
| 336 | </style> |
| 337 |