%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div :class="['searchwp-settings', 'searchwp-settings-support' ]">
<div class="searchwp-settings-view-header">
<h1>{{ 'SearchWP Support' | i18n }}</h1>
</div>
<div class="searchwp-settings-support-help">
<MetaBox
v-if="activeLicense"
class="searchwp-support-ticket"
:active="true"
:label="'Support' | i18n"
:id="'searchwp-support-ticket'"
>
<template v-slot:heading>
<span>{{ 'Get Help' | i18n }}</span>
<span>
<Tag> </Tag>
</span>
</template>
<template v-slot:content>
<div class="searchwp-support-ticket-inside">
<iframe ref="iframe" :src="ticketUrl + '&license=' + licenseKey"></iframe>
</div>
</template>
</MetaBox>
<MetaBox
class="searchwp-support-system-info"
:active="true"
:label="'Support' | i18n"
:id="'searchwp-support-system-info'"
>
<template v-slot:heading>
<span>{{ 'System Information' | i18n }}</span>
<span>
<Tag> </Tag>
</span>
</template>
<template v-slot:content>
<div class="inside">
<p class="description">{{ '_system_information_note' | i18n }}</p>
<SystemInfo></SystemInfo>
</div>
</template>
</MetaBox>
</div>
<div class="searchwp-settings-support-license">
<MetaBox
class="searchwp-support-license-manager"
:active="true"
:label="'License' | i18n"
:id="'searchwp-support-license-manager'"
>
<template v-slot:heading>
<span>{{ 'License' | i18n }}</span>
<span>
<Tag v-if="activeLicense" :type="'success'">{{ 'Active' | i18n }}</Tag>
<Tag v-else :type="'error'">{{ 'Inactive' | i18n }}</Tag>
</span>
</template>
<template v-slot:content>
<div :class="['inside', updatingLicense ? 'searchwp-settings-support-license-updating' : '' ]">
<div class="searchwp-settings-support-license-key">
<input type="text" v-model="licenseKey" :disabled="activeLicense">
<button v-if="!activeLicense" class="button" @click="activateLicense">{{ 'Activate' | i18n }}</button>
<button v-else class="button" @click="deactivateLicense">{{ 'Deactivate' | i18n }}</button>
</div>
<p v-if="licenseRemaining.length" class="description">{{ licenseRemaining }}</p>
<div v-if="!activeLicense" class="searchwp-support-license-inactive-info">
<Notice
:type="'error'"
:icon="'dashicons dashicons-warning'"
:message="'_inactive_license_note' | i18n">
</Notice>
<component :is="i18nInactiveLicenseInfo"></component>
</div>
</div>
</template>
</MetaBox>
</div>
</div>
</template>
<script>
import Tag from './Tag.vue';
import Notice from './Notice.vue';
import MetaBox from './MetaBox.vue';
import { __ } from './../helpers.js';
import cloneDeep from 'lodash.clonedeep';
import SystemInfo from './Systeminfo.vue';
export default {
name: 'Support',
components: {
MetaBox,
Notice,
Tag,
SystemInfo
},
computed: {
activeLicense: function() {
return 'valid' === this.licenseStatus;
},
i18nInactiveLicenseInfo: function() {
return {
template: '<div>' + __('_inactive_license_info') + '</div>'
}
}
},
watch: {
activeLicense: function(isActive, wasActive) {
if (isActive) {
jQuery('.searchwp-settings-nav-tab-support .dashicons').hide();
} else {
jQuery('.searchwp-settings-nav-tab-support .dashicons').show();
}
}
},
methods: {
activateLicense: function() {
let vm = this;
vm.updatingLicense = true;
jQuery.post(ajaxurl, {
_ajax_nonce: _SEARCHWP.nonce,
action: _SEARCHWP.prefix + 'license_activate',
license_key: vm.licenseKey
}, function(response) {
vm.updatingLicense = false;
if (response.success && 'valid'===response.data.status) {
vm.licenseNote = '';
vm.licenseKey = response.data.key;
vm.licenseStatus = response.data.status;
vm.licenseExpiration = response.data.expires;
vm.licenseRemaining = response.data.remaining;
} else if (response.success) {
vm.licenseNote = response.data;
} else {
vm.licenseNote = __('_license_activation_problem');
}
});
},
deactivateLicense: function() {
let vm = this;
vm.updatingLicense = true;
jQuery.post(ajaxurl, {
_ajax_nonce: _SEARCHWP.nonce,
action: _SEARCHWP.prefix + 'license_deactivate',
license_key: vm.licenseKey
}, function(response) {
vm.updatingLicense = false;
if (response.success) {
if ('deactivated'===response.data.status) {
vm.licenseNote = '';
vm.licenseStatus = response.data.status;
vm.licenseExpiration = response.data.expires;
vm.licenseRemaining = '';
} else {
vm.licenseNote = response.data;
}
} else {
vm.licenseNote = __('_license_deactivation_problem');
}
});
},
updateTicketHeight: function(event) {
if (event.origin === "https://searchwp.com") {
let newHeight = parseInt(event.data, 10);
if ( newHeight < 300 ) {
newHeight = 300;
}
this.$refs.iframe.style.height = newHeight + 'px';
}
}
},
beforeMount() {
window.addEventListener('message', this.updateTicketHeight, false);
},
beforeDestroy() {
window.removeEventListener('message', this.updateTicketHeight);
},
data() {
return {
updatingLicense: false,
licenseNote: '',
ticketUrl: _SEARCHWP.ticket_url,
licenseKey: _SEARCHWP.license.key ? _SEARCHWP.license.key : '',
licenseStatus: _SEARCHWP.license.status ? _SEARCHWP.license.status : '',
licenseExpiration: _SEARCHWP.license.expires ? _SEARCHWP.license.expires : '',
licenseRemaining: _SEARCHWP.license.remaining ? _SEARCHWP.license.remaining : ''
}
}
}
</script>
<style lang="scss">
@import './../global.scss';
.searchwp-settings-support {
.searchwp-settings-view-header {
width: 100%;
}
.searchwp-meta-box-heading__label {
span + span {
display: flex;
align-items: center;
}
.searchwp-tag {
margin-left: auto;
}
}
}
.searchwp-settings-support-help {
flex: 1;
.searchwp-tag {
visibility: hidden;
}
.searchwp-support-ticket + .searchwp-support-system-info {
margin-top: 1.5em;
}
.searchwp-support-ticket-inside {
padding-left: 0.1em;
}
.inside {
padding-top: 0.5em;
}
iframe {
display: block;
width: 100%;
}
}
.searchwp-settings-support-items {
display: flex;
justify-content: space-between;
width: 100%;
}
.searchwp-settings-support-ticket {
flex: 1;
}
.searchwp-settings-support-license {
width: 34em;
padding-left: 1.5em;
.searchwp-settings-support-license-key {
display: flex;
padding-top: 0.5em;
input {
display: block;
width: 100%;
margin-right: 1em;
font-family: monospace;
}
}
p.description {
padding-top: 0.2em;
padding-left: 4px; // Visual offset.
}
}
.searchwp-support-license-inactive-info {
padding-top: 1.5em;
}
.searchwp-settings-support-license-updating {
position: relative;
&:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: wait;
background: rgba(255, 255, 255, 0.5);
}
}
@media screen and (max-width:1280px) {
.searchwp-settings-support .searchwp-settings-view-header {
order: 1;
}
.searchwp-settings-support-license {
order: 2;
width: 100%;
padding-left: 0;
margin-bottom: 1.5em;
}
.searchwp-settings-support-help {
flex: auto;
width: 100%;
order: 3;
}
}
</style>
Zerion Mini Shell 1.0