diff --git a/src/components/products/ProductDetails.jsx b/src/components/products/ProductDetails.jsx new file mode 100644 index 0000000..c8eb989 --- /dev/null +++ b/src/components/products/ProductDetails.jsx @@ -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 ( + + {(props) => ( +
+
+
+
+ +