From 79d5005d6b3da13a7b5042179b81b7d39eaa7dd9 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 29 Sep 2025 21:46:23 +0100 Subject: [PATCH 1/2] added custom template and template dropdown menu --- src/components/products/AddTemplate.jsx | 108 +++++++++++++++ src/components/products/CustomTemplates.jsx | 8 +- .../subscription_view/SubscriptionViewCom.jsx | 128 +++++++++++++++--- src/services/siteServices.js | 16 +++ 4 files changed, 235 insertions(+), 25 deletions(-) create mode 100644 src/components/products/AddTemplate.jsx diff --git a/src/components/products/AddTemplate.jsx b/src/components/products/AddTemplate.jsx new file mode 100644 index 0000000..9bd8b70 --- /dev/null +++ b/src/components/products/AddTemplate.jsx @@ -0,0 +1,108 @@ +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(25, 'must not exceed 25 characters'), +}); + +export default function AddTemplate() { + + 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) => ( +
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+ + {customTemplate.error && + <> +
+

{customTemplate.error.message}

+
+ + } + {customTemplate.isSuccess && + <> +
+

{'Template Added'}

+
+ + } +
+
+
+ )} + + ) +} diff --git a/src/components/products/CustomTemplates.jsx b/src/components/products/CustomTemplates.jsx index b33b2f4..4268715 100644 --- a/src/components/products/CustomTemplates.jsx +++ b/src/components/products/CustomTemplates.jsx @@ -7,6 +7,7 @@ import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper' import Icons from '../Icons' import { getCustomTemplate } from '../../services/siteServices' import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString' +import AddTemplate from './AddTemplate' export default function CustomTemplates() { @@ -51,9 +52,10 @@ export default function CustomTemplates() {
- Add New Custom Template - - +
+ Add New Custom Template +
+
{ isError ? diff --git a/src/components/subscription_view/SubscriptionViewCom.jsx b/src/components/subscription_view/SubscriptionViewCom.jsx index 8db7abd..1aa212e 100644 --- a/src/components/subscription_view/SubscriptionViewCom.jsx +++ b/src/components/subscription_view/SubscriptionViewCom.jsx @@ -1,11 +1,12 @@ import {useLocation, useNavigate, Link} from 'react-router-dom' -import { useQuery } from '@tanstack/react-query' +import { useQuery, useMutation } from '@tanstack/react-query' import { FaCaretDown } from "react-icons/fa"; import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' -import {useEffect} from 'react'; +import {useEffect, useState} from 'react'; import RouteLinks from '../../RouteLinks'; -import { getSubscriptionsView } from '../../services/siteServices' +import { getSubscriptionsView, updateTemplate } from '../../services/siteServices' import queryKeys from '../../services/queryKeys' +import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'; export default function SubscriptionViewCom() { @@ -13,6 +14,20 @@ export default function SubscriptionViewCom() { const {state} = useLocation() const navigate = useNavigate() + const [reqStatus, setReqStatus] = useState({loading: false, type: '', error: false, success: false}) + + const [values, setValues] = useState({custom_id: '', template_uid: ''}) + + const handleValueChange = ({target:{name, value}}) => { + if(name == 'custom_template'){ + setValues(prev => ({...prev, custom_id: value})) + }else if (name == 'template') { + setValues(prev => ({...prev, template_uid: value})) + }else{ + setValues(prev => ({...prev})) + } + } + useEffect(() => { if (!state?.subscriptionUID) { navigate(RouteLinks.homePage, {replace: true}) @@ -33,7 +48,44 @@ export default function SubscriptionViewCom() { staleTime: 0 //0 mins }) const subscriptionViewData = data?.data // ACCOUNT VIEW DATA - console.log('subscriptionViewData', subscriptionViewData) + const customTemplates = subscriptionViewData?.available_custom_templates + const availableTemplates = subscriptionViewData?.available_templates + const selectedSubscription = subscriptionViewData?.subscription + // console.log('subscriptionViewData', subscriptionViewData) + + + 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})) + }, + onSettled: () => { + setTimeout(()=>{ + setReqStatus({loading: false, type: '', error: false, success: false}) + }, 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 + } + console.log('req', reqData) + templateUpdate.mutate(reqData) + } + return (
@@ -47,28 +99,57 @@ export default function SubscriptionViewCom() {

{error.message}

: <> -
- -
- Repeat the Subscription at the top - -
+
+ + + + + + + + + +
+
+
{getDateTimeFromDateString(selectedSubscription?.added)}
+
+ 		+
+
{selectedSubscription?.product_id}
+
+ 		+
+
{selectedSubscription?.internal_url} +
Template : {selectedSubscription?.product_template} +
Custom : {selectedSubscription?.custom_template} +
+
+ 		+
+
{selectedSubscription?.status}
+
+
-
-
- + {availableTemplates && availableTemplates.map(item => ( + + ))}
- +
- + {(reqStatus.type == 'template' && (reqStatus.error || reqStatus.success)) && +

{reqStatus.success ? 'Template updated' : 'Unable to complete request, try again'}

+ }
@@ -76,22 +157,25 @@ export default function SubscriptionViewCom() {
-
-
- + {customTemplates && customTemplates.map(item => ( + + ))}
- +
- + {(reqStatus.type == 'custom_template' && (reqStatus.error || reqStatus.success)) && +

{reqStatus.success ? 'Template updated' : 'Unable to complete request, try again'}

+ }
} - -
) } \ No newline at end of file diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 11c4bc8..1e4e790 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -104,6 +104,22 @@ export const getProductsTemplate = (reqData) => { return getAuxEnd(`/products-templates`, postData) } +// FUNCTION TO UPDATE TEMPLATE +export const updateTemplate = (reqData) => { + let postData = { + ...reqData + } + return postAuxEnd('/template/set-template', postData, false) +} + +// FUNCTION TO ADD CUSTOM TEMPLATE +export const addCustomTemplate = (reqData) => { + let postData = { + ...reqData + } + return postAuxEnd('/template/custom-add', postData, false) +} + // FUNCTION TO GET CUSTOM TEMPLATE DATA export const getCustomTemplate = (reqData) => { const postData = { ...reqData } From 65f4aafc68b0a59f9038470e9a9f30078b072e40 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Mon, 29 Sep 2025 22:04:52 +0100 Subject: [PATCH 2/2] add template layout fix --- src/components/products/AddTemplate.jsx | 54 ++++++++++++------------- 1 file changed, 26 insertions(+), 28 deletions(-) diff --git a/src/components/products/AddTemplate.jsx b/src/components/products/AddTemplate.jsx index 9bd8b70..7f874fc 100644 --- a/src/components/products/AddTemplate.jsx +++ b/src/components/products/AddTemplate.jsx @@ -52,37 +52,35 @@ export default function AddTemplate() {
-
-
-
- - -
-
- - -
+
+
+ + +
+
+ +
-
+
+ className='px-4 h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Add'}
{customTemplate.error &&