FileMaster

Edit File: Congratulations.vue

<template>
  <div
    :style="cssVars"
    class="am-fs__main-content am-fs__congrats"
    :class="[{'am-fs-sb-atc' : checkScreen}, props.globalClass]"
  >
    <div class="am-fs__congrats-main">
      <img :src="baseUrls.wpAmeliaPluginURL+'/v3/src/assets/img/congratulations/congratulations.svg'" :alt="labelsDisplay('congratulations')" />
      <p class="am-fs__congrats-main-heading">
        {{ labelsDisplay('congratulations') }}
      </p>
      <span v-if="bookableType === 'appointment'">{{labelsDisplay('appointment_id')}} #981543</span>

<div class="am-fs__congrats-info" :class="{'am-fs__congrats-info-mobile' : checkScreen}">
      <div class="am-fs__congrats-info-customer">
        <component :is="componentTypes[bookableType]"></component>
        <div>
          <span>
            {{labelsDisplay('congrats_total_amount')}}:
          </span>
          <span>
            1081.00$ - On-site
          </span>
        </div>
        <div class="am-fs__congrats-info-customer-border">
          <span>{{ labelsDisplay('your_name_colon') }}:</span>
          <span>Jon Doe</span>
        </div>
        <div>
          <span>{{ labelsDisplay('email_address_colon') }}:</span>
          <span>support@ameliatms.com</span>
        </div>
        <div>
          <span>{{ labelsDisplay('phone_number_colon') }}:</span>
          <span>0000000000</span>
        </div>
      </div>
    </div>
  </div>
</template>

let props = defineProps({
  globalClass: {
    type: String,
    default: ''
  }
})

let baseUrls = inject('baseUrls')

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

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

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

return computedLabel.value
}

let bookableType = inject('bookableType')
const componentTypes = {
  appointment: markRaw(AppointmentInfoService),
  package: markRaw(PackageInfoService),
}

let cWidth = inject('containerWidth', 0)
let checkScreen = computed(() => cWidth.value < 540)

let amColors = inject('amColors')

const cssVars = computed(() => {
  if (checkScreen.value) {
    return  {
      '--am-c-atc-text-op40': useColorTransparency(amColors.value.colorMainText, 0.4),
      '--am-c-atc-heading-text-op40': useColorTransparency(amColors.value.colorSbText, 0.4),
      '--am-c-atc-text-op30': useColorTransparency(amColors.value.colorMainText, 0.3),
      '--am-c-atc-text': amColors.value.colorMainText,
      '--am-c-atc-heading-text': amColors.value.colorSbText
    }
  } else {
    return  {
      '--am-c-atc-text-op40': useColorTransparency(amColors.value.colorMainText, 0.4),
      '--am-c-atc-heading-text-op40': useColorTransparency(amColors.value.colorMainHeadingText, 0.4),
      '--am-c-atc-text-op30': useColorTransparency(amColors.value.colorMainText, 0.3),
      '--am-c-atc-text': amColors.value.colorMainText,
      '--am-c-atc-heading-text': amColors.value.colorMainHeadingText
    }
  }
})
</script>

</script>

.am-fs-sb-atc {
    --am-c-sb-bgr-atc: var(--am-c-sb-bgr);
    background-image: linear-gradient(var(--am-c-sb-bgr-atc) 80%, transparent 20%);
  }

.am-fs__congrats {
    &-main {
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: var(--am-font-family);

& > * {
        $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-atc-heading-text);
      }
      &-atc {
        margin-top: 16px
      }
      & span {
        color: var(--am-c-atc-heading-text-op40);
        font-weight: 400;
        font-size: 13px;
        line-height: 18px;
      }
    }
    &-info-mobile {
      padding: 16px;
      margin-top: 24px;
      border-radius: 6px;
      box-shadow: 0 2px 3px 2px rgba(26, 44, 55, 0.1);
    }
    &-info {
      --am-c-atc-main-bgr: var(--am-c-main-bgr);
      background-color: var(--am-c-atc-main-bgr);
      &-customer {
        &-border {
          border-top: 1px solid var(--am-c-atc-text-op30);
          padding-top: 16px;
        }

& > div {
          $count: 20;
          @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;
            }
          }
        }

& div {
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          margin-bottom: 12px;
          line-height: 20px;
          & span {
            color: var(--am-c-atc-text-op40);
          }
          & span:nth-child(2) {
            color: var(--am-c-atc-text);
          }
        }
      }
    }
  }

.am-skeleton-congratz {

&-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 13px;

:first-child {
        width: 52px;
        height: 52px;
        margin-bottom: 9px;
      }

:nth-child(2) {
        height: 28px;
        max-width: 132px;
        margin-bottom: 4px;
      }

:last-child {
        max-width: 148px;
        height: 18px;
      }
    }

&-booking-info {
      & > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

.el-skeleton__item {
          height: 20px;
        }

}

.am-customer-info {
        border-bottom: 1px solid #D1D5D7;
        padding-bottom: 12px;
      }
    }
  }
}
</style>

Back