FileMaster

Edit File: Congratulations.vue

<p v-if="type !== 'event'" class="am-congrats__main-heading">
        {{ labelsDisplay('congratulations') }}
      </p>

<p v-if="props.type === 'event'" class="am-congrats__main-heading">
        {{ selectedItem.title }}
      </p>

<span v-if="itemIdLabel">
        {{ itemIdLabel }}
      </span>

// * Import from Vue
import {
  ref,
  computed,
  inject,
  markRaw
} from "vue";

// * Composables
import { useColorTransparency } from "../../../../../assets/js/common/colorManipulation";

// * Component Properties
let props = defineProps({
  type: {
    type: String,
    required: true
  },
  selectedItem: {
    type: Object,
    required: true
  }
})

// * Base Urls
const baseUrls = inject('baseUrls')

// * Customize Object
let amCustomize = inject('customize')

// * Form string recognition
let pageRenderKey = inject('pageRenderKey')

// * Form step string recognition
let stepName = inject('stepName')

// * Language string recognition
let langKey = inject('langKey')

// * Labels
let amLabels = inject('labels')

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

return computedLabel.value
}

// * Template heading string
let itemIdLabel = computed(() => {
  if (props.type === 'appointment') {
    return `${labelsDisplay('appointment_id')} #${props.selectedItem.id}`
  }

if (props.type === 'event') {
    return `${labelsDisplay('event_id')} #${props.selectedItem.id}`
  }

return ''
})

let componentTypes = ref({
  event: markRaw(EventCongratsInfo)
})

// * Fonts
let amFonts = inject('amFonts')

// * Colors
let amColors = inject('amColors')

// * Css Vars
let cssVars = computed(() => {
  return {
    '--am-font-family': amFonts.value.fontFamily,
    '--am-c-congrats-heading-text': amColors.value.colorMainHeadingText,
    '--am-c-congrats-heading-text-op40': useColorTransparency(amColors.value.colorMainHeadingText, 0.4),
    '--am-c-congrats-text': amColors.value.colorMainText,
    '--am-c-congrats-text-op30': useColorTransparency(amColors.value.colorMainText, 0.3),
    '--am-c-congrats-text-op40': useColorTransparency(amColors.value.colorMainText, 0.4),
    '--am-c-congrats-primary': amColors.value.colorPrimary,
  }
})
</script>

& > * {
        $count: 5;
        @for $i from 0 through $count {
          &:nth-child(#{$i + 1}) {
            animation: 600ms cubic-bezier(.45,1,.4,1.2) #{$i*100}ms am-animation-slide-up;
            animation-fill-mode: both;
          }
        }
      }

& img {
        width:54px;
        margin-bottom: 8px;
      }

&-heading {
        margin-bottom: 2px;
        font-weight: 500;
        font-size: 18px;
        line-height: 28px;
        color: var(--am-c-congrats-heading-text);
      }

&-atc {
        margin-top: 16px
      }

& span {
        color: var(--am-c-congrats-heading-text-op40);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.42857;
      }
    }
  }
}
</style>

Back