|
|
|
@@ -4,7 +4,7 @@ import { FaCaretDown } from "react-icons/fa";
|
|
|
|
|
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
|
|
|
|
import {useEffect, useState} from 'react';
|
|
|
|
|
import RouteLinks from '../../RouteLinks';
|
|
|
|
|
import { getSubscriptionsView, updateTemplate } from '../../services/siteServices'
|
|
|
|
|
import { getSubscriptionsView, updateTemplate, updateCustomTemplate } from '../../services/siteServices'
|
|
|
|
|
import queryKeys from '../../services/queryKeys'
|
|
|
|
|
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
|
|
|
|
|
|
|
|
|
@@ -51,41 +51,65 @@ export default function SubscriptionViewCom() {
|
|
|
|
|
const customTemplates = subscriptionViewData?.available_custom_templates
|
|
|
|
|
const availableTemplates = subscriptionViewData?.available_templates
|
|
|
|
|
const selectedSubscription = subscriptionViewData?.subscription
|
|
|
|
|
// console.log('subscriptionViewData', subscriptionViewData)
|
|
|
|
|
const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
|
|
|
|
|
const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
|
|
|
|
|
// // console.log('subscriptionViewData', subscriptionViewData, currentCustomTem, currentTemplate)
|
|
|
|
|
|
|
|
|
|
// useEffect(()=>{
|
|
|
|
|
// if(data){
|
|
|
|
|
// const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
|
|
|
|
|
// const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
|
|
|
|
|
// setValues({custom_id: currentCustomTem || '', template_uid: currentTemplate || ''})
|
|
|
|
|
// }
|
|
|
|
|
// },[data])
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const templateUpdate = useMutation({
|
|
|
|
|
mutationFn: (fields) => {
|
|
|
|
|
setReqStatus(prev => ({...prev, loading: true}))
|
|
|
|
|
return updateTemplate(fields)
|
|
|
|
|
},
|
|
|
|
|
onError: (error) => {
|
|
|
|
|
setReqStatus(prev => ({...prev, loading: false, error: true}))
|
|
|
|
|
},
|
|
|
|
|
onSuccess: (res) => {
|
|
|
|
|
setReqStatus(prev => ({...prev, loading: false, error: false, success: true}))
|
|
|
|
|
},
|
|
|
|
|
// onError: (error) => {
|
|
|
|
|
// },
|
|
|
|
|
// onSuccess: (res) => {
|
|
|
|
|
// },
|
|
|
|
|
onSettled: () => {
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
setReqStatus({loading: false, type: '', error: false, success: false})
|
|
|
|
|
templateUpdate.reset()
|
|
|
|
|
}, 3000)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const handleUpdateTemplate = ({target:{name}}) => {
|
|
|
|
|
setReqStatus({loading: false, type: name, error: false, success: false})
|
|
|
|
|
const reqData = {Subscrtiption_uid: state?.subscriptionUID}
|
|
|
|
|
if(name == 'template'){
|
|
|
|
|
reqData.template_uid = values.template_uid
|
|
|
|
|
}else if (name == 'custom_template'){
|
|
|
|
|
reqData.custom_id = values.custom_id
|
|
|
|
|
}else{
|
|
|
|
|
return
|
|
|
|
|
const customTemplateUpdate = useMutation({
|
|
|
|
|
mutationFn: (fields) => {
|
|
|
|
|
return updateCustomTemplate(fields)
|
|
|
|
|
},
|
|
|
|
|
// onError: (error) => {
|
|
|
|
|
// },
|
|
|
|
|
// onSuccess: (res) => {
|
|
|
|
|
// },
|
|
|
|
|
onSettled: () => {
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
customTemplateUpdate.reset()
|
|
|
|
|
}, 3000)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const handleUpdateTemplate = () => {
|
|
|
|
|
const reqData = {
|
|
|
|
|
subscrtiption_uid: state?.subscriptionUID,
|
|
|
|
|
template_uid: values.template_uid
|
|
|
|
|
}
|
|
|
|
|
console.log('req', reqData)
|
|
|
|
|
templateUpdate.mutate(reqData)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleUpdateCustomTemplate = () => {
|
|
|
|
|
const reqData = {
|
|
|
|
|
subscrtiption_uid: state?.subscriptionUID,
|
|
|
|
|
custom_id: values.custom_id
|
|
|
|
|
}
|
|
|
|
|
customTemplateUpdate.mutate(reqData)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='w-full flex flex-col gap-8'>
|
|
|
|
@@ -137,7 +161,7 @@ export default function SubscriptionViewCom() {
|
|
|
|
|
<label className='font-medium'>Assign Template</label>
|
|
|
|
|
<div className='flex flex-col xs:flex-row md:items-center gap-2'>
|
|
|
|
|
<div className='w-full h-10 relative overflow-hidden rounded-md'>
|
|
|
|
|
<select name='template' value={values.template_uid} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
|
|
|
|
|
<select name='template' value={currentTemplate || values.template_uid} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
|
|
|
|
|
<option value=''>None</option>
|
|
|
|
|
{availableTemplates && availableTemplates.map(item => (
|
|
|
|
|
<option key={item?.template_uid} value={item?.template_uid}>{`${item?.product_id}-${item?.provision_name}`}</option>
|
|
|
|
@@ -145,11 +169,9 @@ export default function SubscriptionViewCom() {
|
|
|
|
|
</select>
|
|
|
|
|
<FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
|
|
|
|
|
</div>
|
|
|
|
|
<button name='template' onClick={handleUpdateTemplate} disabled={(reqStatus.loading || !values.template_uid)} className={`rounded-md p-2 bg-primary text-white text-center ${(reqStatus.loading || !values.template_uid) && 'opacity-50'}`}>Update</button>
|
|
|
|
|
<button name='template' onClick={handleUpdateTemplate} disabled={(templateUpdate.isPending || !values.template_uid)} className={`rounded-md p-2 bg-primary text-white text-center ${(templateUpdate.isPending || !values.template_uid) && 'opacity-50'}`}>Update</button>
|
|
|
|
|
</div>
|
|
|
|
|
{(reqStatus.type == 'template' && (reqStatus.error || reqStatus.success)) &&
|
|
|
|
|
<p className={`p-2 mt-4 ${reqStatus.success ? 'text-emerald-500' : 'text-red-500'}`}>{reqStatus.success ? 'Template updated' : 'Unable to complete request, try again'}</p>
|
|
|
|
|
}
|
|
|
|
|
<p className={`p-2 mt-4 ${templateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{templateUpdate.isSuccess ? 'Template updated' : templateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -159,7 +181,7 @@ export default function SubscriptionViewCom() {
|
|
|
|
|
<label className='font-medium'>Assign Custom Template</label>
|
|
|
|
|
<div className='flex flex-col xs:flex-row md:items-center gap-2'>
|
|
|
|
|
<div className='w-full h-10 relative overflow-hidden rounded-md'>
|
|
|
|
|
<select name='custom_template' value={values.custom_id} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
|
|
|
|
|
<select name='custom_template' value={currentCustomTem || values.custom_id} onChange={handleValueChange} className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
|
|
|
|
|
<option value=''>None</option>
|
|
|
|
|
{customTemplates && customTemplates.map(item => (
|
|
|
|
|
<option key={item?.custom_id} value={item?.custom_id}>{`${item?.custom_id}-${item?.provision_name}`}</option>
|
|
|
|
@@ -167,11 +189,9 @@ export default function SubscriptionViewCom() {
|
|
|
|
|
</select>
|
|
|
|
|
<FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2' />
|
|
|
|
|
</div>
|
|
|
|
|
<button name='custom_template' onClick={handleUpdateTemplate} disabled={(reqStatus.loading || !values.custom_id)} className={`rounded-md p-2 bg-primary text-white text-center ${(reqStatus.loading || !values.custom_id) && 'opacity-50'}`}>Update</button>
|
|
|
|
|
<button name='custom_template' onClick={handleUpdateCustomTemplate} disabled={(customTemplateUpdate.isPending || !values.custom_id)} className={`rounded-md p-2 bg-primary text-white text-center ${(customTemplateUpdate.isPending || !values.custom_id) && 'opacity-50'}`}>Update</button>
|
|
|
|
|
</div>
|
|
|
|
|
{(reqStatus.type == 'custom_template' && (reqStatus.error || reqStatus.success)) &&
|
|
|
|
|
<p className={`p-2 mt-4 ${reqStatus.success ? 'text-emerald-500' : 'text-red-500'}`}>{reqStatus.success ? 'Template updated' : 'Unable to complete request, try again'}</p>
|
|
|
|
|
}
|
|
|
|
|
<p className={`p-2 mt-4 ${customTemplateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{customTemplateUpdate.isSuccess ? 'Custom Template updated' : customTemplateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
victorAnumudu
ameye