| 1 | <template> |
| 2 | <n-card |
| 3 | class="license-checkout-response" |
| 4 | size="large" |
| 5 | :class="type" |
| 6 | content-class="flex flex-col items-center gap-5" |
| 7 | > |
| 8 | <template v-if="type === 'success'"> |
| 9 | <Icon :name="CheckIcon" class="text-success" :size="100" /> |
| 10 | <h1 class="text-center">Congratulations!</h1> |
| 11 | <p class="text-center">Your checkout was successful, and your license will be updated soon.</p> |
| 12 | <n-spin v-if="loadingLicense" :size="24" /> |
| 13 | <h4 v-if="license"> |
| 14 | {{ license }} |
| 15 | </h4> |
| 16 | </template> |
| 17 | <template v-if="type === 'error'"> |
| 18 | <Icon :name="ErrorIcon" class="text-error" :size="100" /> |
| 19 | <h1 class="text-center">Checkout canceled</h1> |
| 20 | </template> |
| 21 | <div> |
| 22 | <n-button @click="routeLicense().navigate()"> |
| 23 | <template #icon> |
| 24 | <Icon :name="LicenseIcon" /> |
| 25 | </template> |
| 26 | View license |
| 27 | </n-button> |
| 28 | </div> |
| 29 | </n-card> |
| 30 | </template> |
| 31 | |
| 32 | <script setup lang="ts"> |
| 33 | import type { LicenseKey } from "@/types/license.d" |
| 34 | import { NButton, NCard, NSpin, useMessage } from "naive-ui" |
| 35 | import { onBeforeMount, ref, toRefs } from "vue" |
| 36 | import Api from "@/api" |
| 37 | import Icon from "@/components/common/Icon.vue" |
| 38 | import { useNavigation } from "@/composables/useNavigation" |
| 39 | |
| 40 | const props = defineProps<{ type: "success" | "error"; data?: { email?: string } }>() |
| 41 | const { type, data } = toRefs(props) |
| 42 | |
| 43 | const ErrorIcon = "majesticons:exclamation-line" |
| 44 | const LicenseIcon = "carbon:license" |
| 45 | const CheckIcon = "carbon:checkmark-outline" |
| 46 | const { routeLicense } = useNavigation() |
| 47 | const message = useMessage() |
| 48 | const loadingLicense = ref(false) |
| 49 | const license = ref<LicenseKey | null>(null) |
| 50 | |
| 51 | function getLicense(email: string) { |
| 52 | loadingLicense.value = true |
| 53 | |
| 54 | Api.license |
| 55 | .retrieveLicenseByEmail(email) |
| 56 | .then(res => { |
| 57 | if (res.data.success) { |
| 58 | license.value = res.data?.license_key |
| 59 | } else { |
| 60 | message.warning(res.data?.message || "An error occurred. Please try again later.") |
| 61 | } |
| 62 | }) |
| 63 | .catch(err => { |
| 64 | if (err.response.status !== 404) { |
| 65 | message.error(err.response?.data?.message || "An error occurred. Please try again later.") |
| 66 | } |
| 67 | }) |
| 68 | .finally(() => { |
| 69 | loadingLicense.value = false |
| 70 | }) |
| 71 | } |
| 72 | |
| 73 | onBeforeMount(() => { |
| 74 | if (data.value?.email) { |
| 75 | getLicense(data.value.email) |
| 76 | } |
| 77 | }) |
| 78 | </script> |