91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="subscription-status-container u-flex u-flex__justify--between">
|
|||
|
|
<span class="text is-small u-mr--12">{{subscriptionExpirationLabel}}</span>
|
|||
|
|
<span class="text is-small is-semibold u-flex u-flex__align--center status" :class="status">{{subscriptionStatusLabel}}</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
import { format } from 'date-fns';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'SubscriptionStatus',
|
|||
|
|
components: {},
|
|||
|
|
props: {
|
|||
|
|
status: {
|
|||
|
|
type: String
|
|||
|
|
},
|
|||
|
|
expiresDate: {
|
|||
|
|
type: String
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
subscriptionStatusLabel () {
|
|||
|
|
switch (this.status) {
|
|||
|
|
case 'requested':
|
|||
|
|
return 'In progress';
|
|||
|
|
case 'active':
|
|||
|
|
return 'Active';
|
|||
|
|
case 'expired':
|
|||
|
|
return 'Expired';
|
|||
|
|
default:
|
|||
|
|
return 'Unknown';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
subscriptionExpirationLabel () {
|
|||
|
|
if (this.status === 'requested') {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
if (this.expiresDate && this.expiresDate !== '') {
|
|||
|
|
// Format to a safer date format (Safari, IE)
|
|||
|
|
const expiresDateSafe = this.expiresDate.replace(/-/g, '/');
|
|||
|
|
return `Expires at ${format(new Date(expiresDateSafe), 'MMM DD, YYYY')}`;
|
|||
|
|
}
|
|||
|
|
return 'Doesn’t expire';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import 'new-dashboard/styles/variables';
|
|||
|
|
.subscription-status-container {
|
|||
|
|
background-color: $blue--100;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 12px 24px 12px 16px;
|
|||
|
|
.status {
|
|||
|
|
&:after {
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
margin-left: 4px;
|
|||
|
|
border-radius: 100%;
|
|||
|
|
}
|
|||
|
|
&.active {
|
|||
|
|
color: $green--400;
|
|||
|
|
&:after {
|
|||
|
|
background-color: $green--400;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&.requested {
|
|||
|
|
color: $yellow--800;
|
|||
|
|
&::after {
|
|||
|
|
background-color: $yellow--800;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&.expired {
|
|||
|
|
color: $red--600;
|
|||
|
|
&::after {
|
|||
|
|
background-color: $red--600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|