File: //home/arjun/projects/buyercall/buyercall/assets/vue/widgets/PartnershipSettings/index.vue
<template>
<div>
<div class="spinner-main">
<Loader :loading="loading"> </Loader>
</div>
<template v-if="!loading && partnerData">
<button
v-show="isMobileView"
type="button"
class="btn btn-sm px-3 font-size-16 hamburg-profile-mobile-btn"
@click="mobileTabModalShow = true"
>
<i class="fa fa-fw fa-bars"></i>
</button>
<!-- Partner Settings -->
<div class="row d-flex justify-content-between">
<div class="col-md-3" v-show="!isMobileView">
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<profile-tab
v-for="(tabSection, index) in computedTabSections"
:key="index"
:index="index"
:detail="tabSection"
@selectTabIndex="setSelectedTabIndex"
:selectedTabIndex="selectedTabIndex"
></profile-tab>
</div>
</div>
</div>
</div>
</div>
<div :class="rightSectionClassName">
<partnership-setting
:testImages="testImages"
:partnerData="partnerData"
@formSubmit="onPartnershipSettingsUpdate"
:partnershipSettingUpdateLoading="partnershipSettingUpdateLoading"
@toast="$toast.open($event)"
v-if="showSection('PARTNERSHIP_SETTINGS')"
></partnership-setting>
<white-label
@formSubmit="onPartnershipWhitelabelUpdate"
:partnerData="partnerData"
:partnershipWhiteLabelUpdateLoading="
partnershipWhiteLabelUpdateLoading
"
v-if="showSection('WHITE_LABEL')"
></white-label>
<!-- Partnership Users -->
<partner-notify-users
:partnerSettings="partnerData"
:deletePartnerNotificationUserLoading="
deletePartnerNotificationUserLoading
"
@deletePartnerNotificationUser="deletePartnerNotificationUser"
:updatePartnerNotificationUsersLoading="
updatePartnerNotificationUsersLoading
"
:notificationUserModalClose="notificationUserModalClose"
@resetModalClose="notificationUserModalClose = false"
:partnerUsers="partnerUsers"
@updatePartnerNotificationUsers="updatePartnerNotificationUsers"
v-if="showSection('USER_TABLE')"
></partner-notify-users>
<!-- Partnership Usage -->
<partnership-usage
:usage="partnerData.usage"
v-if="showSection('PARTNERSHIP_USAGE')"
></partnership-usage>
</div>
</div>
<b-modal
v-show="isMobileView"
v-model="mobileTabModalShow"
dialog-class="modal-dialog-slideout"
:hide-footer="true"
content-class="rounded-0"
>
<template #modal-header>
<button
type="button"
class="btn btn-primary"
@click="mobileTabModalShow = false"
>
<i class="bx bx-left-arrow-alt font-size-16 align-middle me-2"></i>
Close
</button>
</template>
<div class="row justify-content-center">
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<profile-tab
v-for="(tabSection, index) in computedTabSections"
:key="index"
:index="index"
:detail="tabSection"
@selectTabIndex="setSelectedTabIndex"
:selectedTabIndex="selectedTabIndex"
></profile-tab>
</div>
</div>
</div>
</div>
</b-modal>
</template>
</div>
</template>
<script>
import Loader from '../../components/Loader/loader.vue';
import PartnershipService from '../../service/partnershipSettingsService';
import PartnershipSetting from './PartnershipSetting.vue';
import PartnershipUsers from './PartnershipUsers.vue';
import PartnershipUsage from './PartnershipUsage.vue';
import PartnershipAccountRestriction from './PartnershipAccountRestriction.vue';
import PartnershipAccountClosure from './PartnershipAccountClosure.vue';
import { toastConfig } from '../../utils/util';
import ProfileTab from '../ProfileSettings/ProfileTab.vue';
import WhiteLabel from './WhiteLabel.vue';
import PartnerNotifyUsers from './PartnerNotifyUsers.vue';
import { BModal } from 'bootstrap-vue-next';
export default {
components: {
PartnershipSetting,
PartnershipUsers,
PartnershipUsage,
PartnershipAccountRestriction,
PartnershipAccountClosure,
Loader,
ProfileTab,
WhiteLabel,
PartnerNotifyUsers,
BModal
},
props: {},
data() {
return {
loading: false,
testImages: _vue_images_config,
partnerData: null,
deactivatePartnerUserLoading: false,
remoteAccessPartnerUserLoading: false,
accountRestrictionSubmitLoading: false,
closePartnershipAcccountLoading: false,
partnershipSettingUpdateLoading: false,
partnershipWhiteLabelUpdateLoading: false,
updatePartnerNotificationUsersLoading: false,
resendInvitationLoading: false,
getPartnerUsersLoading: false,
notificationUserModalClose: false,
deletePartnerNotificationUserLoading: false,
partnerUsers: [],
tabSections: [
{
label: 'Partnership Settings',
description:
"Manage the partnership's information and white-label configuration",
icon: 'bx-brightness',
tabsToShow: ['PARTNERSHIP_SETTINGS', 'WHITE_LABEL'],
},
{
label: 'Support Ticket Notification Users',
description: 'Manage the notification users',
icon: 'bx-user',
tabsToShow: ['USER_TABLE'],
},
{
label: 'Partnership Usage',
description: 'Review the partnership usage statistics',
icon: 'bxs-color-fill',
tabsToShow: ['PARTNERSHIP_USAGE'],
},
],
selectedTabIndex: 0,
windowWidth: window.innerWidth,
mobileTabModalShow: false,
};
},
mounted() {
this.getPartnershipDetails();
this.getPartnerUsers();
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
});
},
beforeDestroy() {
window.removeEventListener('resize', this.onResize);
},
computed: {
rightSectionClassName() {
if (this.isMobileView) {
return 'col-md-12';
}
return 'col-md-9';
},
isMobileView() {
if (this.windowWidth < 991) {
return true;
}
return false;
},
computedTabSections() {
let tabSections = [...this.tabSections];
return tabSections;
},
},
methods: {
triggerNotificationUserModalClose() {
this.notificationUserModalClose = true;
},
updatePartnerNotificationUsers(postData) {
this.updatePartnerNotificationUsersLoading = true;
PartnershipService.updatePartnerNotificationUsers(postData)
.then(({ data: { success, message, data } }) => {
if (success) {
this.updatePartnerNotificationUsersLoading = false;
this.$toast.open(toastConfig.toastSuccess(message));
this.getPartnershipDetails();
this.triggerNotificationUserModalClose();
} else {
this.$toast.open(toastConfig.toastError(message));
this.updatePartnerNotificationUsersLoading = false;
}
})
.catch((e) => {
this.updatePartnerNotificationUsersLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while updating partner notification users!',
),
);
});
},
deletePartnerNotificationUser(userId) {
this.deletePartnerNotificationUserLoading = true;
PartnershipService.deletePartnerNotificationUser(userId)
.then(({ data: { success, message, data } }) => {
if (success) {
this.deletePartnerNotificationUserLoading = false;
this.$toast.open(toastConfig.toastSuccess(message));
this.getPartnershipDetails();
} else {
this.$toast.open(toastConfig.toastError(message));
this.deletePartnerNotificationUserLoading = false;
}
})
.catch((e) => {
this.deletePartnerNotificationUserLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while removing partner notification user!',
),
);
});
},
getPartnerUsers() {
this.getPartnerUsersLoading = true;
PartnershipService.getPartnerUsers()
.then(({ data: { success, message, data } }) => {
if (success) {
this.getPartnerUsersLoading = false;
this.partnerUsers = data;
} else {
this.$toast.open(toastConfig.toastError(message));
this.getPartnerUsersLoading = false;
this.partnerUsers = [];
}
})
.catch((e) => {
this.getPartnerUsersLoading = false;
this.partnerUsers = [];
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while fetching partner users!',
),
);
});
},
onPartnershipWhitelabelUpdate(postData) {
this.partnershipWhiteLabelUpdateLoading = true;
PartnershipService.updatePartnerWhitelabelSettings({ data: postData })
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.partnershipWhiteLabelUpdateLoading = false;
this.getPartnershipDetails();
location.reload(true);
} else {
this.$toast.open(toastConfig.toastError(message));
this.partnershipWhiteLabelUpdateLoading = false;
}
})
.catch((e) => {
this.partnershipWhiteLabelUpdateLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while update white label settings!',
),
);
});
},
onResize() {
this.windowWidth = window.innerWidth;
},
setSelectedTabIndex(index) {
this.selectedTabIndex = index;
if (this.isMobileView) {
this.mobileTabModalShow = false;
}
},
showSection(label) {
const tabsToShow =
this.computedTabSections[this.selectedTabIndex].tabsToShow;
if (_.includes(tabsToShow, label)) {
return true;
}
return false;
},
getPartnershipDetails() {
this.loading = true;
PartnershipService.getPartnerSettings()
.then(({ data: { success, message, data } }) => {
if (success) {
// this.$toast.open(toastConfig.toastSuccess(message));
this.loading = false;
this.partnerData = data;
} else {
this.$toast.open(toastConfig.toastError(message));
this.loading = false;
this.partnerData = null;
}
})
.catch((e) => {
this.loading = false;
this.partnerData = null;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while fetching partnership details!',
),
);
});
},
deactivatePartnerUser(userId) {
this.deactivatePartnerUserLoading = true;
PartnershipService.deactivatePartnerUser(this.selectedPartner, userId)
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.deactivatePartnerUserLoading = false;
this.getPartnershipDetails();
} else {
this.$toast.open(toastConfig.toastError(message));
this.deactivatePartnerUserLoading = false;
}
})
.catch((e) => {
this.deactivatePartnerUserLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while deactivating partner user!',
),
);
});
},
remoteAcccessPartnerUser(userId) {
this.remoteAccessPartnerUserLoading = true;
PartnershipService.remoteAcccessPartnerUser(this.selectedPartner, userId)
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.remoteAccessPartnerUserLoading = false;
location.href = '/settings';
} else {
this.$toast.open(toastConfig.toastError(message));
this.remoteAccessPartnerUserLoading = false;
}
})
.catch((e) => {
this.remoteAccessPartnerUserLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while trying to remote access!',
),
);
});
},
onAccountRestrictionUpdate(postData) {
this.accountRestrictionSubmitLoading = true;
PartnershipService.updatePartnershipAccountRestrictions({
...postData,
partnerID: this.selectedPartner,
})
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.accountRestrictionSubmitLoading = false;
this.getPartnershipDetails();
} else {
this.$toast.open(toastConfig.toastError(message));
this.accountRestrictionSubmitLoading = false;
}
})
.catch((e) => {
this.accountRestrictionSubmitLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while trying to update account restriction!',
),
);
});
},
closePartnershipAccount() {
this.closePartnershipAcccountLoading = true;
PartnershipService.closePartnershipAccount(this.selectedPartner)
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.closePartnershipAcccountLoading = false;
this.$emit('accountClosed');
} else {
this.$toast.open(toastConfig.toastError(message));
this.closePartnershipAcccountLoading = false;
}
})
.catch((e) => {
this.closePartnershipAcccountLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while trying to close account!',
),
);
});
},
resendUserInvitation(userId) {
this.resendInvitationLoading = true;
PartnershipService.resendUserInvitation(this.selectedPartner, userId)
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.resendInvitationLoading = false;
} else {
this.$toast.open(toastConfig.toastError(message));
this.resendInvitationLoading = false;
}
})
.catch((e) => {
this.resendInvitationLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while resending invitation!',
),
);
});
},
onPartnershipSettingsUpdate(postData) {
this.partnershipSettingUpdateLoading = true;
PartnershipService.updatePartnerSettings(postData)
.then(({ data: { success, message } }) => {
if (success) {
this.$toast.open(toastConfig.toastSuccess(message));
this.partnershipSettingUpdateLoading = false;
this.getPartnershipDetails();
location.reload(true);
} else {
this.$toast.open(toastConfig.toastError(message));
this.partnershipSettingUpdateLoading = false;
}
})
.catch((e) => {
this.partnershipSettingUpdateLoading = false;
console.log('error', e);
this.$toast.open(
toastConfig.toastError(
'Something went wrong while update partership settings!',
),
);
});
},
},
};
</script>