Compare commits

...

13 Commits

Author SHA1 Message Date
victorAnumudu b39a7ab58c url display fixed 2025-09-30 20:58:27 +01:00
ameye ad90def3c9 Merge branch 'url-alphanumeric-validator' of MERMS/MermsPanelReactJS into master 2025-09-30 09:54:33 +00:00
CHIEFSOFT\ameye 737430bf04 text transform 2025-09-30 05:38:08 -04:00
CHIEFSOFT\ameye d371ada805 configure url page 2025-09-30 05:21:01 -04:00
CHIEFSOFT\ameye b77f1d6213 display fix 2025-09-28 22:43:39 -04:00
victorAnumudu 64085c6be5 added alphanumeric validation for url name 2025-09-28 06:58:21 +01:00
ameye 3f8b45b6d6 Merge branch 'validation-fix' of MERMS/MermsPanelReactJS into master 2025-09-23 12:06:58 +00:00
victorAnumudu 4b6c927efc fixed validation bug 2025-09-23 05:56:33 +01:00
CHIEFSOFT\ameye 8a8adcbbc7 url name 2025-09-22 19:26:28 -04:00
CHIEFSOFT\ameye 706baadb33 url_name 2025-09-22 19:18:07 -04:00
ameye 58128fdd96 Merge branch 'url-name-payload' of MERMS/MermsPanelReactJS into master 2025-09-22 16:33:02 +00:00
victorAnumudu 14e8b1b01d made url name a required payload 2025-09-22 17:30:49 +01:00
ameye 504bfbcae4 Merge branch 'url-length' of MERMS/MermsPanelReactJS into master 2025-09-22 15:51:46 +00:00
4 changed files with 305 additions and 249 deletions
@@ -112,15 +112,9 @@ const GeneralTab = memo(({
<> <>
{isCustom === true ? {isCustom === true ?
<> <>
{(tabKey === 'template_tab') && <SiteTemplateSelector name={name} data={sortedData} {(tabKey === 'template_tab') && <SiteTemplateSelector name={name} data={sortedData} isCustom={isCustom} productData={productData}/>}
isCustom={isCustom} {(tabKey === 'url_config_tab') && <URLConfiguration name={name} data={sortedData} isCustom={isCustom} productData={productData}/>}
productData={productData}/>} {(tabKey === 'color_scheme_tab') && <ColorStyleConfigure name={name} data={sortedData} isCustom={isCustom} productData={productData}/>}
{(tabKey === 'url_config_tab') && <URLConfiguration name={name} data={sortedData}
isCustom={isCustom}
productData={productData}/>}
{(tabKey === 'color_scheme_tab') && <ColorStyleConfigure name={name} data={sortedData}
isCustom={isCustom}
productData={productData}/>}
</> </>
: :
<div className="page-account-form"> <div className="page-account-form">
@@ -1,14 +1,14 @@
import React, {memo} from 'react' import React, {memo} from 'react'
import getImage from "../../../utils/getImage"; import getImage from "../../../utils/getImage";
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
import queryKeys from '../../../services/queryKeys'; import queryKeys from '../../../services/queryKeys';
import { getProductTemplateData, activateTemplate } from '../../../services/services'; import {getProductTemplateData, activateTemplate} from '../../../services/services';
const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{ const SiteTemplateSelector = memo(({name = 'Full Name', data, productData}) => {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const {data:templateData, isFetching, isError, error} = useQuery({ const {data: templateData, isFetching, isError, error} = useQuery({
queryKey: queryKeys.productTemplateData, queryKey: queryKeys.productTemplateData,
queryFn: () => { queryFn: () => {
let reqData = { let reqData = {
@@ -16,7 +16,7 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
uid: localStorage.getItem('uid'), // USER UID uid: localStorage.getItem('uid'), // USER UID
product_id: productData?.product_id product_id: productData?.product_id
} }
return getProductTemplateData(reqData) return getProductTemplateData(reqData)
}, },
staleTime: 0 staleTime: 0
}) })
@@ -24,16 +24,17 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
const templateResponse = templateData?.data const templateResponse = templateData?.data
const currentTemUID = templateResponse?.current_template_uid const currentTemUID = templateResponse?.current_template_uid
const templates = templateResponse?.templates const templates = templateResponse?.templates
const custom_template_name = templateResponse?.custom_template_name
// console.log('data Template', templateResponse) // console.log('data Template', templateResponse)
// console.log("Page data == ", data) console.log("Page data == ", data)
const handleActivateTemplate = useMutation({ const handleActivateTemplate = useMutation({
mutationFn: (fields) => { mutationFn: (fields) => {
return activateTemplate(fields) return activateTemplate(fields)
}, },
onSuccess: (res) => { onSuccess: (res) => {
if(res?.data?.resultCode != '0'){ if (res?.data?.resultCode != '0') {
throw new Error(res.data.resultDescription) throw new Error(res.data.resultDescription)
} }
queryClient.refetchQueries({ // refetches productProvision API call queryClient.refetchQueries({ // refetches productProvision API call
@@ -41,7 +42,7 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
}) })
}, },
onSettled: () => { onSettled: () => {
setTimeout(()=>{ setTimeout(() => {
handleActivateTemplate.reset() handleActivateTemplate.reset()
}, 3000) }, 3000)
} }
@@ -57,51 +58,57 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
// console.log(reqData) // console.log(reqData)
handleActivateTemplate.mutate(reqData) handleActivateTemplate.mutate(reqData)
} }
if (custom_template_name && custom_template_name != '') {
// This implies we have a custom template , just return here
return <>This product is using a custom template named {custom_template_name} </>
}
return ( return (
<div className="page-account-form"> <div className="page-account-form">
<div className="p-0"> <div className="p-0">
{isFetching ? {isFetching ?
<>
<div className="row">
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</div>
</>
: isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{error?.message}</p>
</div>
</div>
:
<div className="row">
<> <>
{!templates?.length ? <div className="row">
<p>No data Found</p> <div className="col-12">
: <p className='text-mute'>Loading...</p>
templates.map(template => (
<div key={template.template_uid} className="col-xl-6 col-sm-6">
<div className="card card-statistics">
<div className="card-body">
<div className="text-center p-2">
<div className="mb-2">
<img src={getImage('file-icon/svg.png')} alt={template.title} />
</div>
<h4 className="mb-0">{template.title}</h4>
{currentTemUID == template.template_uid ?
<button className="btn btn-light" disabled={true}>Active</button>
:
<button onClick={()=>handleSubmit(template.template_uid)} className="btn btn-primary">Activate</button>
}
</div>
</div>
</div>
</div> </div>
)) </div>
} </>
{/* {Object.entries(data)?.map(([key, value]) => ( : isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{error?.message}</p>
</div>
</div>
:
<div className="row">
<>
{!templates?.length ?
<p>No data Found</p>
:
templates.map(template => (
<div key={template.template_uid} className="col-xl-6 col-sm-6">
<div className="card card-statistics">
<div className="card-body">
<div className="text-center p-2">
<div className="mb-2">
<img src={getImage('file-icon/svg.png')}
alt={template.title}/>
</div>
<h4 className="mb-0">{template.title}</h4>
{currentTemUID == template.template_uid ?
<button className="btn btn-light"
disabled={true}>Active</button>
:
<button onClick={() => handleSubmit(template.template_uid)}
className="btn btn-primary">Activate</button>
}
</div>
</div>
</div>
</div>
))
}
{/* {Object.entries(data)?.map(([key, value]) => (
<div key={key} className="col-xl-6 col-sm-6"> <div key={key} className="col-xl-6 col-sm-6">
<div className="card card-statistics"> <div className="card card-statistics">
<div className="card-body"> <div className="card-body">
@@ -116,24 +123,25 @@ const SiteTemplateSelector = memo(({name='Full Name', data, productData}) =>{
</div> </div>
</div> </div>
))} */} ))} */}
</> </>
<div className="col-12"> <div className="col-12">
<> <>
{handleActivateTemplate.isPending ? {handleActivateTemplate.isPending ?
<p className={'text-center '}>loading...</p> <p className={'text-center '}>loading...</p>
: :
handleActivateTemplate.isError ? handleActivateTemplate.isError ?
<p className={'text-center text-danger'}>{handleActivateTemplate.error.message}</p> <p className={'text-center text-danger'}>{handleActivateTemplate.error.message}</p>
: :
handleActivateTemplate.isSuccess? handleActivateTemplate.isSuccess ?
<p className={'text-center text-success'}>Templated activated successfully</p> <p className={'text-center text-success'}>Templated activated
: successfully</p>
null :
} null
</> }
</div> </>
</div> </div>
</div>
} }
</div> </div>
</div> </div>
@@ -1,40 +1,84 @@
const URLConfiguration = () => { import { Form, Formik } from "formik";
import * as Yup from "yup";
import { useMutation } from '@tanstack/react-query';
import { completePWDReset } from '../../../services/services';
const validationSchema = Yup.object().shape({
url: Yup.string().required("URL is required").matches(/^https?:\/\/[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-]+\.[a-zA-Z]+/, 'Must be like: https://example.mysite.com'),
})
const initialValues = {
url: '',
};
const URLConfiguration = ({productData}) => {
let defaultUrl= 'https://'+productData?.internal_url
// API to set url
const setURL = useMutation({
mutationFn: (fields) => {
return completePWDReset(fields)
},
// onSuccess: (res) => {
// },
// onError: (err) => {
// console.log('err', err)
// }
})
const handleSubmit = (values) => {
let reqData = {
url: values.url
}
console.log('URL', values.url)
// setURL.mutate(reqData)
}
return <> return <>
<div className="card card-statistics"> <div className="card card-statistics">
<div className="card-header"> <div className="card-header">
<div className="card-heading"> <div className="card-heading">
<h4 className="card-title">URL Configuration</h4> <h4 className="card-title">Default URL</h4>
</div>
</div>
<div className="card-body button-list">
<div className="row">
<div className="col-12 mb-2">
<div className="alert alert-primary" role="alert" style={{borderRadius: '10px'}}>
<h3 className="text-white">Default URL</h3>
<p className="text-white">
https://127476.devprov.mermsemr.com
</p>
</div>
</div>
</div>
</div>
</div>
<div className="card card-statistics">
<div className="card-header">
<div className="card-heading">
<h4 className="card-title">Default</h4>
</div> </div>
</div> </div>
<div className="card-body"> <div className="card-body">
<div className="form-group"> <div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label> {/*<label htmlFor="exampleInputEmail1">Email address</label>*/}
<input type="email" className="form-control" id="exampleInputEmail1" <input type="email" className="form-control"
aria-describedby="emailHelp" placeholder="Enter your url"/> aria-describedby="defaultUrlHelp" value={defaultUrl} readOnly={true} />
</div> </div>
<button type="submit" className="btn btn-primary">Submit</button> {/*<button type="submit" className="btn btn-primary">Submit</button>*/}
</div> </div>
</div> </div>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{(props) => {
return (
<Form className='w-full'>
<div className="card card-statistics" style={{backgroundColor:'#7affd92b'}}>
<div className="card-header">
<div className="card-heading">
<h4 className="card-title" style={{textTransform: 'none'}}>Set your own URL</h4>
</div>
</div>
<div className="card-body">
<div className="form-group">
<label htmlFor="exampleInputEmail1">Enter your full URL <span className={`${(props.errors.url && props.touched.url) && 'text-danger'}`}>{props.errors.url}</span></label>
<input value={props.values.url} onChange={props.handleChange} type="text" className="form-control" id="url" aria-describedby="url" placeholder="https://example.mysite.com"/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</div>
</Form>
);
}}
</Formik>
</> </>
} }
@@ -1,7 +1,7 @@
import React, {useEffect, useMemo, useState} from "react"; import React, {useCallback, useEffect, useMemo, useState} from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
// import { useLocation } from "react-router-dom"; // import { useLocation } from "react-router-dom";
// import { Form, Formik } from "formik"; import { Form, Formik } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
import {useMutation, useQuery} from "@tanstack/react-query"; import {useMutation, useQuery} from "@tanstack/react-query";
import getImage from "../../utils/getImage"; import getImage from "../../utils/getImage";
@@ -13,17 +13,19 @@ import {updateUserDetails} from "../../store/UserDetails";
import {useDispatch} from "react-redux"; import {useDispatch} from "react-redux";
// const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
// practice: Yup.string().required("Required"), practice: Yup.string().required("Required"),
// specialization: Yup.string().required("Required"), specialization: Yup.string().when('practice', {
// introduction: Yup.string().min(1, "Minimum 10 characters").max(50, "Maximum 50 characters").required("Required"), is: (value) => typeof value === 'string' && value.trim().length > 0,
// }) then: (schema) => schema.required('Required'),
otherwise: (schema) => schema,
// const initialValues = { }),
// practice: '', introduction: Yup.string().min(1, "Minimum 1 character").max(50, "Maximum 50 characters"),
// specialization: '', url_name: Yup.string().min(6, "Minimum 6 characters").max(16, "Maximum 16 characters").required("Required").matches(
// introduction: '', /^[a-zA-Z0-9]+$/, // Regex for alphanumeric characters
// }; 'Must contain only alphanumeric characters' // Custom error message
),
})
export default function ProfileCompleteCom() { export default function ProfileCompleteCom() {
@@ -35,6 +37,7 @@ export default function ProfileCompleteCom() {
const {state: {redirectLink}} = useLocation() const {state: {redirectLink}} = useLocation()
const [practices, setPractices] = useState([]) const [practices, setPractices] = useState([])
const [specialties, setSpecialties] = useState([])
const [initialValues, setInitialValues] = useState({ const [initialValues, setInitialValues] = useState({
practice: '', practice: '',
@@ -43,21 +46,18 @@ export default function ProfileCompleteCom() {
url_name: '' url_name: ''
}) })
const specialties = useMemo(() => { // FUNCTION TO UPDATE SPECIALITY ARRAY EACH TIME PRACTICE CHANGES const handleUpdateSpecialties = (e) => {
setInitialValues(prev => ({...prev, specialization: ''})) setInitialValues(prev => ({...prev, specialization: ''}))
if (!initialValues.practice) { const specialtiesArr = practices.filter(item => item.practice == e.target.value)[0]?.specialties
return [] setSpecialties(specialtiesArr)
} }
const specialtiesArr = practices.filter(item => item.practice == initialValues.practice)[0]?.specialties
return specialtiesArr
}, [initialValues.practice])
const mutation = useMutation({ const mutation = useMutation({
mutationFn: (fields) => { mutationFn: (fields) => {
const {practice, specialization} = fields const {practice, specialization, url_name} = fields
if (!practice || !specialization) { if (!practice || !specialization || !url_name) {
throw new Error('Please select both practice and specialization fields') throw new Error('Please Select both Practice, Specialization and Enter URL_Name')
} }
return completeProfile(fields) return completeProfile(fields)
}, },
@@ -94,15 +94,11 @@ export default function ProfileCompleteCom() {
} }
}) })
const handlePracticeChange = ({target: {name, value}}) => { const handleCompleteProfile = (values) => { // FUNCTION TO COMPLETE PROFILE
setInitialValues(prev => ({...prev, [name]: value}))
}
const handleCompleteProfile = () => { // FUNCTION TO COMPLETE PROFILE
let reqData = { let reqData = {
token: localStorage.getItem('token'), // USER TOKEN token: localStorage.getItem('token'), // USER TOKEN
uid: localStorage.getItem('uid'), // USER UID uid: localStorage.getItem('uid'), // USER UID
...initialValues ...values
} }
mutation.mutate(reqData) mutation.mutate(reqData)
} }
@@ -146,132 +142,146 @@ export default function ProfileCompleteCom() {
<div className="card-body"> <div className="card-body">
<div className='h-100 row flex-column'> <div className='h-100 row flex-column'>
{/* <div className="row"> */} {/* <div className="row"> */}
<> <Formik
<div className=""> initialValues={initialValues}
<div className="form-group position-relative"> validationSchema={validationSchema}
<label className={`text-black fw-bold control-label`}>Practice :</label> onSubmit={handleCompleteProfile}
<div className="position-relative"> enableReinitialize={true}
{/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control"> >
<option value=''>Select</option> {(props) => {
{practices.map((practice, index)=>( return (
<option key={index} value={practice.practice}>{practice.practice}</option> <Form className='mt-2'>
))} <>
</select> */} <div className="">
<select onChange={handlePracticeChange} name='practice' <div className="form-group position-relative">
value={initialValues.practice} className="form-control"> <label className={`text-black fw-bold control-label`}>Practice : <span className="text-danger">{(props.errors.practice && props.touched.practice) && props.errors.practice}</span></label>
<option value=''>Select</option> <div className="position-relative">
{practices.map((practice, index) => ( {/* <select onChange={props.handleChange} name='practice' value={props.values.practice} className="form-control">
<option key={index} <option value=''>Select</option>
value={practice.practice}>{practice.practice}</option> {practices.map((practice, index)=>(
))} <option key={index} value={practice.practice}>{practice.practice}</option>
</select> ))}
<IoMdArrowDropdown className='position-absolute w-auto' style={{ </select> */}
top: '50%', <select
right: '2px', onChange={(e) => {props.handleChange(e); props.setFieldValue('specialization', ''); handleUpdateSpecialties(e)}}
transform: 'translateY(-50%)' name='practice'
}}/> value={props.values.practice} className="form-control">
</div> <option value=''>Select</option>
</div> {practices.map((practice, index) => (
</div> <option key={index}
value={practice.practice}>{practice.practice}</option>
))}
</select>
<IoMdArrowDropdown className='position-absolute w-auto' style={{
top: '50%',
right: '2px',
transform: 'translateY(-50%)'
}}/>
</div>
</div>
</div>
<div className=""> <div className="">
<div className="form-group"> <div className="form-group">
<label className={`text-black fw-bold control-label`}>Your <label className={`text-black fw-bold control-label`}>Your
Specialization :</label> Specialization : <span className="text-danger">{(props.errors.specialization && props.touched.specialization) && props.errors.specialization}</span></label>
<div className="position-relative"> <div className="position-relative">
<select onChange={handlePracticeChange} name='specialization' <select onChange={props.handleChange} name='specialization'
value={initialValues.specialization} value={props.values.specialization}
className="form-control"> className="form-control">
<option value=''>Select</option> <option value=''>Select</option>
{specialties.map((specialty, index) => ( {specialties.map((specialty, index) => (
<option key={index} value={specialty}>{specialty}</option> <option key={index} value={specialty}>{specialty}</option>
))} ))}
</select> </select>
<IoMdArrowDropdown className='position-absolute w-auto' style={{ <IoMdArrowDropdown className='position-absolute w-auto' style={{
top: '50%', top: '50%',
right: '2px', right: '2px',
transform: 'translateY(-50%)' transform: 'translateY(-50%)'
}}/> }}/>
</div> </div>
</div> </div>
</div> </div>
<div className=""> <div className="">
<div className="form-group position-relative"> <div className="form-group position-relative">
<label className={`text-black fw-bold control-label`}>Other General <label className={`text-black fw-bold control-label`}>Other General Information : <span className="text-danger">{(props.errors.introduction && props.touched.introduction) && props.errors.introduction}</span></label>
Information :</label> <textarea name='introduction' rows={5} style={{resize: 'none'}}
<textarea name='introduction' rows={5} style={{resize: 'none'}} className="form-control" value={props.values.introduction}
className="form-control" value={initialValues.introduction} onChange={props.handleChange}/>
onChange={handlePracticeChange}/> </div>
</div> </div>
</div>
<div className=""> <div className="">
<div className="form-group position-relativ'e"> <div className="form-group position-relativ'e">
{/*<label className={`text-black fw-bold control-label`}>What we use this*/} {/*<label className={`text-black fw-bold control-label`}>What we use this*/}
{/* information for :</label>*/} {/* information for :</label>*/}
<div style={{ <div style={{
fontSize: '14px', fontSize: '14px',
borderRadius: '10px', borderRadius: '10px',
backgroundColor: 'aliceblue', backgroundColor: 'aliceblue',
fontWeight: 'bolder', fontWeight: 'bolder',
padding: '15px' padding: '15px'
}}> }}>
MERMS A.I. agents use the information supplied to help generate MERMS A.I. agents use the information supplied to help generate
useful entries for your product settings. useful entries for your product settings.
</div> </div>
</div> </div>
</div> </div>
<div className=""> <div className="">
<div className="form-group position-relative"> <div className="form-group position-relative">
<label className={`text-black fw-bold control-label`}>URL Name :</label> <label className={`text-black fw-bold control-label`}>URL Name : <span className="text-danger">{(props.errors.url_name && props.touched.url_name) && props.errors.url_name}</span></label>
<div className="position-relative d-flex flex-column flex-xxl-row" style={{gap: '10px'}}> <div className="position-relative d-flex flex-column flex-xxl-row" style={{gap: '10px'}}>
{/* <select onChange={handlePracticeChange} name='url_name' {/* <select onChange={handlePracticeChange} name='url_name'
value={initialValues.url_name} className="form-control"> value={initialValues.url_name} className="form-control">
<option value=''>Select</option> <option value=''>Select</option>
{practices.map((practice, index) => ( {practices.map((practice, index) => (
<option key={index} <option key={index}
value={practice.practice}>{practice.practice}</option> value={practice.practice}>{practice.practice}</option>
))} ))}
</select> </select>
<IoMdArrowDropdown className='position-absolute w-auto' style={{ <IoMdArrowDropdown className='position-absolute w-auto' style={{
top: '50%', top: '50%',
right: '2px', right: '2px',
transform: 'translateY(-50%)' transform: 'translateY(-50%)'
}}/> */} }}/> */}
<input <input
className="form-control" className="form-control"
onChange={handlePracticeChange} name='url_name' onChange={props.handleChange} name='url_name'
value={initialValues.url_name} value={props.values.url_name}
minLength={6} minLength={6}
maxLength={16} maxLength={16}
/> />
<p className="border-radius-10 p-2 border border-warning" <p className="border-radius-10 p-2 border border-warning"
style={{fontSize: "1.0rem"}}>We use the URL Name to form part of style={{fontSize: "1.0rem"}}>We use the URL Name to form part of
your default URL when we configure your default URL when we configure
a new URL for your products. You can always change your product a new URL for your products. You can always change your product
URL. <br/> URL. <br/>
<b>Example : <span style={{color: 'red'}}>url_name</span>.product.mermsemr.com <b>Example : <span style={{color: 'red'}}>url_name</span>.product.mermsemr.com
</b> </b>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
{(mutation.isError || mutation.isSuccess) && {(mutation.isError || mutation.isSuccess) &&
<> <>
<div className=""> <div className="">
<p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p> <p className={`${mutation.isSuccess ? 'text-success' : 'text-danger'}`}>{mutation.isSuccess ? 'Completed successfully, redirecting...' : mutation.error.message}</p>
</div> </div>
</> </>
} }
<div className="mt-auto text-end"> <div className="mt-auto text-end">
<button type='button' onClick={handleCompleteProfile} <button type='submit'
className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button> className="btn btn-primary text-uppercase">{mutation.isPending ? 'loading...' : 'Continue'}</button>
</div> </div>
</> </>
</Form>
);
}}
</Formik>
{/* </div> */} {/* </div> */}
</div> </div>
</div> </div>