Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
45ba601c11 | ||
|
CHIEFSOFT\ameye
|
0f65bc24b0 | ||
 ameye
|
c9048cdbd3 | ||
|
victorAnumudu
|
77c01683ae | ||
|
CHIEFSOFT\ameye
|
94f6e55a7d | ||
|
ameye
|
14f9b83f12 | ||
|
victorAnumudu
|
b31650e5f7 | ||
|
victorAnumudu
|
e508e7cffa | ||
|
ameye
|
79ff004077 |
@@ -24,6 +24,7 @@ export default function CountrySettings(){
|
||||
staleTime: 0 // 0 mins
|
||||
})
|
||||
const countryData = data?.data?.country_data // COUNTRY LIST
|
||||
// console.log('countryData', countryData)
|
||||
|
||||
|
||||
const statusChange = useMutation({
|
||||
@@ -48,7 +49,7 @@ export default function CountrySettings(){
|
||||
const handleStatusChange = (event, details) => {
|
||||
setSelected(event.target.id)
|
||||
const name = event.target.name
|
||||
const val = name.toLowerCase() == 'STATUS' ? details.status : details.signup
|
||||
const val = name.toUpperCase() == 'STATUS' ? details.status : details.signup
|
||||
const reqData = {
|
||||
'val_type': name.toUpperCase(),
|
||||
'country_uid': details?.country_uid,
|
||||
@@ -66,13 +67,15 @@ export default function CountrySettings(){
|
||||
|
||||
<>
|
||||
{/* status === 'pending' */}
|
||||
{isFetching ?
|
||||
{status === 'pending' ?
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
: isError ?
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
:
|
||||
<TableWrapper data={countryData} itemsPerPage={20}>
|
||||
{({ data }) => (
|
||||
// <TableWrapper data={countryData} itemsPerPage={20}>
|
||||
// {({ data }) => (
|
||||
// )}
|
||||
// </TableWrapper>
|
||||
<>
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
@@ -92,7 +95,7 @@ export default function CountrySettings(){
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data && data.length > 0) ? data?.map((item, index) => (
|
||||
{(countryData && countryData.length > 0) ? countryData?.map((item, index) => (
|
||||
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div className="text-left">
|
||||
@@ -167,14 +170,7 @@ export default function CountrySettings(){
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</TableWrapper>
|
||||
}
|
||||
{/* {(isFetching && status != 'pending') &&
|
||||
<div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
|
||||
<p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
|
||||
</div>
|
||||
} */}
|
||||
</>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
||||
import {Formik, Form} from 'formik'
|
||||
import * as Yup from "yup";
|
||||
// import InputText from '../InputText'
|
||||
import {updateProduct} from '../../services/siteServices'
|
||||
// import queryKeys from '../../services/queryKeys';
|
||||
|
||||
|
||||
// To get the validation schema
|
||||
const validationSchema = Yup.object().shape({
|
||||
details: Yup.string().required("details text is required").min(6, 'must be upto 6 characters').max(500, 'must not exceed 500 characters'),
|
||||
sale_text: Yup.string().required("sales text is required").min(6, 'must be upto 6 characters').max(500, 'must not exceed 500 characters'),
|
||||
});
|
||||
|
||||
export default function ProductDetails({productDetails}) {
|
||||
|
||||
const initialValues = {
|
||||
details: productDetails?.details,
|
||||
sale_text: productDetails?.sale_text,
|
||||
};
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const productUpdate = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return updateProduct(fields)
|
||||
},
|
||||
onSuccess: () => {
|
||||
// queryClient.refetchQueries({
|
||||
// queryKey: [...queryKeys.custom_template],
|
||||
// // type: 'active',
|
||||
// // exact: true,
|
||||
// })
|
||||
},
|
||||
onSettled: ()=>{
|
||||
setTimeout(()=>{
|
||||
productUpdate.reset()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
|
||||
//FUNCTION TO HANDLE ADD TEMPLATE
|
||||
const handleSubmit = (values, helper) => {
|
||||
const reqData = {
|
||||
details: values.details,
|
||||
product_detail_id: productDetails?.product_detail_id,
|
||||
product_id: productDetails?.product_id,
|
||||
sale_text: values.sale_text,
|
||||
}
|
||||
productUpdate.mutate(reqData)
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(props) => (
|
||||
<Form>
|
||||
<div
|
||||
className='flex flex-col w-full bg-white dark:bg-black-box text-black-body dark:text-white-body rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
|
||||
<div className='w-full flex flex-col gap-4'>
|
||||
<div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
|
||||
<label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.details && props.touched.details) && 'text-red-500'}`}>
|
||||
Details
|
||||
</label>
|
||||
<textarea
|
||||
className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
|
||||
rows={4}
|
||||
id='details'
|
||||
placeholder='Enter your description text here ...'
|
||||
name='details'
|
||||
value={props.values.details}
|
||||
onChange={props.handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
|
||||
<label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.sale_text && props.touched.sale_text) && 'text-red-500'}`}>
|
||||
Sales Text
|
||||
</label>
|
||||
<textarea
|
||||
className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
|
||||
rows={4}
|
||||
id='sale_text'
|
||||
placeholder='Enter your description text here ...'
|
||||
name='sale_text'
|
||||
value={props.values.sale_text}
|
||||
onChange={props.handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='h-10 my-5 text-end'>
|
||||
<button type='submit' disabled={productUpdate.isPending}
|
||||
className='px-4 h-full bg-primary text-white font-bold rounded-md'>{productUpdate.isPending ? 'loading...' : 'Update'}</button>
|
||||
</div>
|
||||
|
||||
{productUpdate.error &&
|
||||
<>
|
||||
<div className="w-full text-center">
|
||||
<p className='text-red-500 text-sm'>{productUpdate.error.message}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{productUpdate.isSuccess &&
|
||||
<>
|
||||
<div className="w-full text-center">
|
||||
<p className='text-emerald-500 text-sm'>{'Product Details Updated'}</p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)
|
||||
}
|
||||
@@ -1,122 +1,173 @@
|
||||
import {useEffect, useState} from 'react';
|
||||
import {useLocation, useNavigate} from 'react-router-dom'
|
||||
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
||||
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
|
||||
import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
import { getProductView } from "../../services/siteServices";
|
||||
import ProductDetails from './ProductDetails';
|
||||
import RouteLinks from './../../RouteLinks'
|
||||
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
|
||||
|
||||
export default function ProductView() {
|
||||
|
||||
const {state} = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
useEffect(() => {
|
||||
if (!state?.productID) {
|
||||
navigate(RouteLinks.homePage, {replace: true})
|
||||
}
|
||||
}, [])
|
||||
|
||||
const {data, isFetching, status, isError, error} = useQuery({
|
||||
queryKey: queryKeys.product_view,
|
||||
queryFn: () => {
|
||||
const reqData = {
|
||||
// page,
|
||||
// ...filterData
|
||||
product_id : state?.productID
|
||||
}
|
||||
return getProductView(reqData)
|
||||
},
|
||||
staleTime: 0 // 0 mins
|
||||
})
|
||||
const productConfig = data?.data?.product_configuration // PRODUCT CONFIG
|
||||
const productDetails = data?.data?.product_details // PRODUCT DETAILS
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title='Product View [ProductID]' paths={['Dashboard', 'Product View']}/>
|
||||
<BreadcrumbCom title={`Product View [${state?.productID}]`} paths={['Dashboard', 'Product View']}/>
|
||||
{isFetching ?
|
||||
<>
|
||||
<p className='text-slate-800'>Loading...</p>
|
||||
</>
|
||||
: isError ?
|
||||
<p className='text-red-500'>{error.message}</p>
|
||||
:
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<p className='text-lg dark:text-white-light'>Product Configuration</p>
|
||||
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
||||
|
||||
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2" style={{width: '150px'}}>
|
||||
Item
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
{productConfig?.product_id}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<table className="py-2 w-full text-sm">
|
||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||
<tr>
|
||||
<th scope="col" className="px-2 py-2" style={{width: '150px'}}>
|
||||
Item
|
||||
</th>
|
||||
<th scope="col" className="px-2">
|
||||
Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
{productConfig?.description}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
Status
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
{productConfig?.status}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
Added
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
{getDateTimeFromDateString(productConfig?.added)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
Banner
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
{productConfig?.banner}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
UID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
{productConfig?.uid}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
P000008
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
<p className='text-lg'>Product Details</p>
|
||||
<ProductDetails productDetails={productDetails} />
|
||||
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
P000008
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
P000008
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
P000008
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
P000008
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||
<td className="px-2 py-2">
|
||||
<div
|
||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||
<div className="text-left">
|
||||
ProductID
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
P000008
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className='box bg-[aliceblue] dark:bg-black-box text-black-body dark:text-white-body'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -138,7 +138,7 @@ export default function ProductsCom() {
|
||||
|
||||
<div
|
||||
className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
|
||||
<Link to={`/product-view/${item?.product_id}`}>
|
||||
<Link to={`/product-view/${item?.product_id}`} state={{productID: item?.product_id}}>
|
||||
<Icons name='eye'/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -23,6 +23,7 @@ const queryKeys = {
|
||||
subscriptions_view: ['subscriptions_view'],
|
||||
users_admin: ['users_admin'],
|
||||
country_list: ['country_list'],
|
||||
product_view: ['product_view'],
|
||||
}
|
||||
|
||||
export default queryKeys
|
||||
@@ -68,6 +68,12 @@ export const getCountry = (reqData) => {
|
||||
return getAuxEnd(`/country`, postData)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PRODUCT VIEW lIST
|
||||
export const getProductView = (reqData) => {
|
||||
const postData = { ...reqData }
|
||||
return getAuxEnd(`/product-view`, postData)
|
||||
}
|
||||
|
||||
// FUNCTION TO SET COUNTRY
|
||||
export const setCountry = (reqData) => {
|
||||
let postData = {
|
||||
@@ -142,6 +148,14 @@ export const addCustomTemplate = (reqData) => {
|
||||
return postAuxEnd('/template/custom-add', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO ADD CUSTOM TEMPLATE
|
||||
export const updateProduct = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/product-update', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET CUSTOM TEMPLATE DATA
|
||||
export const getCustomTemplate = (reqData) => {
|
||||
const postData = { ...reqData }
|
||||
|
||||
Reference in New Issue
Block a user