app/components/Layout/Dialog/Trial/StopConfirmation.vue

<template>
  <LazyLayoutDialog :show="show" theme="danger">
    <template #dialogType>{{ $t('important') }}</template>
    <template #dialogTitle
      >{{ $t('you_want_to_stop_your_premium_trial_period') }} ?
    </template>
    <template #dialogText>
      <v-card-text class="text">
        <p>
          {{ $t('stop_trial_period_warning_1a') }}
          {{
            $t(
              organizationProfile.productBeforeTrial ??
                'stop_trial_missing_version_label',
            )
          }}, {{ $t('stop_trial_period_warning_1b') }}
        </p>
        <p>
          <strong>{{ $t('stop_trial_period_warning_2') }}</strong>
        </p>
        <ul>
          <li>{{ $t('stop_trial_period_warning_3') }}</li>
          <li>{{ $t('stop_trial_period_warning_4') }}</li>
          <li>{{ $t('stop_trial_period_warning_5') }}</li>
        </ul>
        <p>{{ $t('stop_trial_period_warning_6') }}</p>
      </v-card-text>
    </template>
    <template #dialogBtn>
      <v-btn class="mr-4 submitBtn theme-neutral-strong" @click="closeDialog">
        {{ $t('cancel') }}
      </v-btn>
      <v-btn class="mr-4 submitBtn theme-danger" @click="stopTrial">
        {{ $t('stop_trial') }}
      </v-btn>
    </template>
  </LazyLayoutDialog>
</template>

<script setup lang="ts">
import { useOrganizationProfileStore } from '~/stores/organizationProfile'

defineProps({
  show: {
    type: Boolean,
    required: false,
    default: false,
  },
})

const organizationProfile = useOrganizationProfileStore()

const emit = defineEmits(['closeDialog', 'stopTrial'])

const closeDialog = () => {
  emit('closeDialog')
}
const stopTrial = () => {
  emit('stopTrial')
}
</script>

<style scoped lang="scss">
.text {
  p {
    margin-bottom: 10px;
  }

  ul {
    padding-left: 20px;
    margin-bottom: 10px;
  }
}
</style>