Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
b31650e5f7 | ||
|
victorAnumudu
|
e508e7cffa | ||
 ameye
|
79ff004077 |
@@ -0,0 +1,110 @@
|
|||||||
|
import {useMutation, useQueryClient} from '@tanstack/react-query'
|
||||||
|
import {Formik, Form} from 'formik'
|
||||||
|
import * as Yup from "yup";
|
||||||
|
import InputText from '../InputText'
|
||||||
|
import {addCustomTemplate} from '../../services/siteServices'
|
||||||
|
import queryKeys from '../../services/queryKeys';
|
||||||
|
|
||||||
|
|
||||||
|
const initialValues = {
|
||||||
|
custom_id: "",
|
||||||
|
provision_name: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
// To get the validation schema
|
||||||
|
const validationSchema = Yup.object().shape({
|
||||||
|
custom_id: Yup.string().required("custom_id is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
|
||||||
|
provision_name: Yup.string().required("provision_name is required").min(6, 'must be upto 6 characters').max(200, 'must not exceed 200 characters'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function ProductDetails() {
|
||||||
|
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
|
||||||
|
const customTemplate = useMutation({
|
||||||
|
mutationFn: (fields) => {
|
||||||
|
if (!fields.custom_id || !fields.provision_name) {
|
||||||
|
throw new Error('Please provide all fields marked *')
|
||||||
|
}
|
||||||
|
return addCustomTemplate(fields)
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.refetchQueries({
|
||||||
|
queryKey: [...queryKeys.custom_template],
|
||||||
|
// type: 'active',
|
||||||
|
// exact: true,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
//FUNCTION TO HANDLE ADD TEMPLATE
|
||||||
|
const handleSubmit = (values, helper) => {
|
||||||
|
// customTemplate.mutate(values)
|
||||||
|
};
|
||||||
|
|
||||||
|
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.custom_id && props.touched.custom_id) && '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='custom_id'
|
||||||
|
placeholder='Enter your description text here ...'
|
||||||
|
name='custom_id'
|
||||||
|
value={props.values.custom_id}
|
||||||
|
handleChange={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.provision_name && props.touched.provision_name) && '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='provision_name'
|
||||||
|
placeholder='Enter your description text here ...'
|
||||||
|
name='provision_name'
|
||||||
|
value={props.values.provision_name}
|
||||||
|
handleChange={props.handleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='h-10 my-5 text-end'>
|
||||||
|
<button type='submit' disabled={customTemplate.isPending}
|
||||||
|
className='px-4 h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Update'}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{customTemplate.error &&
|
||||||
|
<>
|
||||||
|
<div className="w-full text-center">
|
||||||
|
<p className='text-red-500 text-sm'>{customTemplate.error.message}</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
{customTemplate.isSuccess &&
|
||||||
|
<>
|
||||||
|
<div className="w-full text-center">
|
||||||
|
<p className='text-emerald-500 text-sm'>{'Template Added'}</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</Formik>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,121 +1,161 @@
|
|||||||
|
import {useEffect, useState} from 'react';
|
||||||
|
import {useLocation, useNavigate} from 'react-router-dom'
|
||||||
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
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';
|
||||||
|
|
||||||
export default function ProductView() {
|
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 countryData = data?.data // PRODUCT VIEW LIST
|
||||||
|
console.log('DATA', countryData)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='w-full flex flex-col gap-8'>
|
<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']}/>
|
||||||
|
|
||||||
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
<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'>
|
||||||
|
|
||||||
<table className="py-2 w-full text-sm">
|
<table className="py-2 w-full text-sm">
|
||||||
<thead className="py-2 text-sm text-slate-500 text-left">
|
<thead className="py-2 text-sm text-slate-500 text-left">
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" className="px-2 py-2" style={{width: '150px'}}>
|
<th scope="col" className="px-2 py-2" style={{width: '150px'}}>
|
||||||
Item
|
Item
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" className="px-2">
|
<th scope="col" className="px-2">
|
||||||
Value
|
Value
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<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">
|
||||||
|
P000008
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
<tr className="py-2 border-t border-dashed border-slate-300">
|
||||||
<td className="px-2 py-2">
|
<td className="px-2 py-2">
|
||||||
<div
|
<div
|
||||||
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
ProductID
|
ProductID
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-2">
|
<td className="px-2">
|
||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
P000008
|
P000008
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
||||||
|
|
||||||
<tr className="py-2 border-t border-dashed border-slate-300">
|
</div>
|
||||||
<td className="px-2 py-2">
|
</div>
|
||||||
<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'>
|
||||||
|
<p className='text-lg'>Product Details</p>
|
||||||
|
<ProductDetails />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ export default function ProductsCom() {
|
|||||||
|
|
||||||
<div
|
<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'>
|
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'/>
|
<Icons name='eye'/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ const queryKeys = {
|
|||||||
subscriptions_view: ['subscriptions_view'],
|
subscriptions_view: ['subscriptions_view'],
|
||||||
users_admin: ['users_admin'],
|
users_admin: ['users_admin'],
|
||||||
country_list: ['country_list'],
|
country_list: ['country_list'],
|
||||||
|
product_view: ['product_view'],
|
||||||
}
|
}
|
||||||
|
|
||||||
export default queryKeys
|
export default queryKeys
|
||||||
@@ -68,6 +68,12 @@ export const getCountry = (reqData) => {
|
|||||||
return getAuxEnd(`/country`, postData)
|
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
|
// FUNCTION TO SET COUNTRY
|
||||||
export const setCountry = (reqData) => {
|
export const setCountry = (reqData) => {
|
||||||
let postData = {
|
let postData = {
|
||||||
|
|||||||
Reference in New Issue
Block a user