FileMaster

Edit File: BringingAnyone.vue

<template>
  <div class="am-fs__bringing" :style="cssVars">
    <div class="am-fs__bringing-main">
      <div v-if="inPopup && amCustomize[pageRenderKey].bringingAnyone.options.heading.visibility" class="am-fs__bringing-heading">
        {{labelsDisplay('bringing_anyone_title')}}
      </div>
      <div class="am-fs__bringing-content">
        <span class="am-fs__bringing-content-left">
          <span class="am-icon-users"></span>
          <span class="am-fs__bringing-content-text">{{labelsDisplay(amSettings.appointments.bringingAnyoneLogic === 'additional' ? 'bringing_people' : 'bringing_people_total')}}</span>
        </span>
        <AmInputNumber v-model="persons" :min="options.min" :max="options.max" size="small"/>
      </div>
      <div v-if="amCustomize[pageRenderKey].bringingAnyone.options.info.visibility" class="am-fs__bringing-message">
        {{labelsDisplay(amSettings.appointments.bringingAnyoneLogic === 'additional' ? 'add_people' : 'add_people_total')}}
      </div>
    </div>

<div
      v-if="!licence.isStarter && !licence.isStarter && amCustomize[pageRenderKey].bringingAnyone.options.bringingPrice.visibility"
      class="am-fs__bringing-main"
    >
      <div class="am-fs__bringing-content-price">
        <span class="am-fs__bringing-content-price-left">
          <span class="am-icon-service"></span>
          <span class="am-fs__bringing-content-text">
            {{labelsDisplay('bringing_price')}}
          </span>
        </span>
        <p
          v-for="(item, index) in [{from: 1, to: 3, prices: [30, 30]}, {from: 4, to: 6, prices: [25, 25]}, {from: 7, to: 9, prices: [20, 20]}]"
          :key="index"
          class="am-fs__bringing-content-text am-fs__bringing-content-price-text"
          :class="{'am-fs__bringing-content-price-text-selected': index === 1}"
        >
          <span class="am-icon-users"></span>
          <span>{{item.from}} - {{item.to}}</span>
          <span>{{item.prices[0] === item.prices[1] ? useFormattedPrice(item.prices[0]) : useFormattedPrice(item.prices[0])  + ' - ' + useFormattedPrice(item.prices[1])}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

import { ref, computed, inject } from "vue";
import { useColorTransparency } from "../../../../../assets/js/common/colorManipulation";
import { useFormattedPrice } from "../../../../../assets/js/common/formatting";

const amSettings = inject('settings')

let { inPopup } = inject('inPopup', {
  inPopup: {
    value: true
  }
})

let langKey = inject('langKey')
let amLabels = inject('labels')

let pageRenderKey = inject('pageRenderKey')
let amCustomize = inject('customize')

// * Plugin Licence
let licence = inject('licence')

// * Label computed function
function labelsDisplay (label) {
  let computedLabel = computed(() => {
    return amCustomize.value[pageRenderKey.value].bringingAnyone.translations
    && amCustomize.value[pageRenderKey.value].bringingAnyone.translations[label]
    && amCustomize.value[pageRenderKey.value].bringingAnyone.translations[label][langKey.value]
      ? amCustomize.value[pageRenderKey.value].bringingAnyone.translations[label][langKey.value]
      : amLabels[label]
  })

return computedLabel.value
}

/**
 * Computed properties for "Bringing anyone with you" functionality
 * @type {ComputedRef<*|boolean>}
 */
let options = ref({
  min: amSettings.appointments.bringingAnyoneLogic === 'additional' ? 0 : 1,
  max: 5
})
let persons = ref( 1)

// * Global colors
let amColors = inject('amColors');
let cssVars = computed(() => {
  return {
    '--am-bringing-color-border': useColorTransparency(amColors.value.colorMainText, 0.25),
    '--am-bringing-color-text-opacity60': useColorTransparency(amColors.value.colorMainText, 0.6),
    '--am-c-ps-primary': amColors.value.colorPrimary,
    '--am-c-ps-primary-op10': useColorTransparency(amColors.value.colorPrimary, 0.1),
  }
})
</script>

&-heading {
      display: block;
      width: 100%;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--am-c-main-text);
      margin: 0 0 4px 0;
    }

&-content-persons {
      display: flex;

&-text {
        margin: 0 0 0 8px;
      }
    }

&-content-price {
      display: block;
      background-color: var(--am-c-ps-primary-op10);

&-left {
        margin-bottom: 5px;

.am-icon-service {
          margin-right: 5px;
        }
      }

&-text {
        padding: 3px;
        border: 1px solid var(--am-bringing-color-border);
        border-radius: 8px;
        display: inline-block;
        margin: 3px 0 0 3px;

span {
          margin: 3px;
        }

&-selected {
          border-color: var(--am-c-ps-primary);
          background-color: #FFFFFF;
        }

span:nth-child(3) {
          color: var(--am-c-ps-primary);
          font-weight: bold;
        }
      }
    }

&-content {
      display: flex;
    }

&-content, &-content-price {
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      margin: 0 0 4px 0;
      border: 1px solid var(--am-bringing-color-border);
      border-radius: 8px;

&-left {
        display: flex;
        align-items: center;

.am-icon-users {
          font-size: 24px;
          line-height: 1;
          color: var(--am-c-main-text);
        }
      }

&-text {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.43;
        color: var(--am-c-main-text);
      }

.am-input-number {
        max-width: 100px;
      }
    }

&-message {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.43;
      color: var(--am-bringing-color-text-opacity60);
    }
  }
}

// Admin
#amelia-app-backend-new {
  @include bringing-anyone-block;
}
</style>

Back