<section className=“profile-section”>
<div className=“container multistep-form”>
<div id=“progress-form” className=“m-3 p-3 progress-form”>
<h2 className=“text-center py-4”>Profile Information</h2>
{
successMessage && <div className=“alert alert-success row” role=“alert”>
{successMessage}
</div>
}
{/* Form Progress */}
<div className=“d-flex align-items-start mb-3 sm:mb-5 progress-form__tabs” role=“tablist”>
<button id=“progress-form__tab-1” className=“flex-1 px-0 pt-2 progress-form__tabs-item” type=“button” role=“tab” aria-controls=“progress-form__panel-1” aria-selected={(activeTab == “personal” ? “true” : “false”)} onClick={() => clickTab(“personal”)}>
<span className=“d-block step” aria-hidden=“true”>Personal Information</span>
</button>
<button id=“progress-form__tab-2” className=“flex-1 px-0 pt-2 progress-form__tabs-item” type=“button” role=“tab” aria-controls=“progress-form__panel-2” aria-selected={(activeTab == “gallery” ? “true” : “false”)} tabindex=“-1” aria-disabled=“true” onClick={() => clickTab(“gallery”)}>
<span className=“d-block step” aria-hidden=“true”>Profile & Gallery Image
</span>
</button>
<button id=“progress-form__tab-3” className=“flex-1 px-0 pt-2 progress-form__tabs-item” type=“button” role=“tab” aria-controls=“progress-form__panel-3” aria-selected={(activeTab == “tags” ? “true” : “false”)} tabindex=“-1” aria-disabled=“true” onClick={() => clickTab(“tags”)}>
<span className=“d-block step” aria-hidden=“true”>Categories & Tags
</span>
</button>
</div>
{/* / End Form Progress */}
{/* Step 1 */}
<section id=“progress-form__panel-1” role=“tabpanel” aria-labelledby=“progress-form__tab-1” tabindex=“0” hidden={(activeTab == “personal” ? false : true)}>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“first-name” data-required=“true”> First name </label>
<input id=“first-name” type=“text” name=“first-name” autocomplete=“given-name” value={userInfo?.firstname} onChange={(e) => handleChange(“firstname”, e.target.value)} required/>
{
errors.firstname && <span style={{color: “red”, fontSize: 12}}>{errors.firstname}</span>
}
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“last-name” data-required=“true”> Last name </label>
<input id=“last-name” type=“text” name=“last-name” autocomplete=“family-name” onChange={(e) => handleChange(“lastname”, e.target.value)} value={userInfo?.lastname}/>
{
errors.lastname && <span style={{color: “red”, fontSize: 12}}>{errors.lastname}</span>
}
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“email-address” data-required=“true”> Email address </label>
<input id=“email-address” disabled type=“email” name=“email-address” autocomplete=“email” inputmode=“email” value={userInfo?.email}/>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“phone-number” data-required=“true”> Phone number </label>
<input id=“phone-number” disabled type=“tel” name=“phone-number” autocomplete=“tel” inputmode=“tel” value={userInfo?.mobile}/>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“building”> Building </label>
<input id=“building” type=“text” name=“building” value={userInfo?.building} onChange={(e) => handleChange(“building”, e.target.value)}/>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“street”> Street </label>
<input id=“street” type=“text” name=“street” value={userInfo?.street} onChange={(e) => handleChange(“street”, e.target.value)}/>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“landmark”> Landmark </label>
<input id=“landmark” type=“text” name=“landmark” value={userInfo?.landmark} onChange={(e) => handleChange(“landmark”, e.target.value)}/>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“area”> Area </label>
<input id=“area” type=“text” name=“area” value={userInfo?.area} onChange={(e) => handleChange(“area”, e.target.value)}/>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“state”> State </label>
<select
className=“form-control”
onChange={e => onSelectState(e.target.value)} // … and update the state variable on any change!
>
<option value=“” disabled selected={userInfo?.state ? false : true}>Select your option</option>
{
states && states.map((stateData, idx) => {
return <option key={idx} selected={(stateData?.name == userInfo?.state) ? true : false} value={stateData?.state_id}>{stateData?.name}</option>
})
}
</select>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“city”> City </label>
<select
className=“form-control”
onChange={e => handleChange(“city”, e.target.value)} // … and update the state variable on any change!
>
<option value=“” disabled selected>Select your option</option>
{
cities && cities.map((cityData, idx) => {
return <option selected={(cityData?.name == userInfo?.city) ? true : false} key={idx} value={cityData?.name}>{cityData?.name}</option>
})
}
</select>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“pincode”> Pincode </label>
<input id=“pincode” type=“text” name=“pincode” value={userInfo?.pincode} onChange={(e) => handleChange(“pincode”, e.target.value)}/>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“country”> Country </label>
<input id=“country” type=“text” name=“country” value={userInfo?.country} onChange={(e) => handleChange(“country”, e.target.value)}/>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“website”> Website </label>
<input id=“website” type=“text” name=“website” value={userInfo?.website} onChange={(e) => handleChange(“website”, e.target.value)}/>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“company”> Company </label>
<input id=“company” type=“text” name=“company” value={userInfo?.company} onChange={(e) => handleChange(“company”, e.target.value)}/>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“opening”> Opening Time </label>
<input id=“opening_time” type=“text” name=“opening_time” value={userInfo?.opening_time} onChange={(e) => handleChange(“opening_time”, e.target.value)} placeholder=’00:00 AM’/>
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“closing”> Closing Time </label>
<input id=“closing_time” type=“text” name=“closing_time” value={userInfo?.closing_time} onChange={(e) => handleChange(“closing_time”, e.target.value)} placeholder=’23:00 PM’/>
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“fb_link”> Facebook Link </label>
<input id=“fb_link” type=“text” name=“fb_link” value={userInfo?.fb_link} onChange={(e) => handleChange(“fb_link”, e.target.value)} />
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“insta_link”> Instagram Link </label>
<input id=“insta_link” type=“text” name=“insta_link” value={userInfo?.insta_link} onChange={(e) => handleChange(“insta_link”, e.target.value)} />
</div>
</div>
<div className=“sm:d-grid sm:grid-col-2 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“youtube_link”> Youtube Link </label>
<input id=“youtube_link” type=“text” name=“youtube_link” value={userInfo?.youtube_link} onChange={(e) => handleChange(“youtube_link”, e.target.value)} />
</div>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“whatsapp_number”> Whatsapp Number </label>
<input id=“whatsapp_number” type=“text” name=“whatsapp_number” value={userInfo?.whatsapp_number} onChange={(e) => handleChange(“whatsapp_number”, e.target.value)} />
</div>
</div>
<div className=“sm:d-grid sm:grid-col-12 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“description”> Profile Description </label>
<Editor
containerProps={{ style: { resize: ‘vertical’ } }}
value={userInfo?.description}
onChange={e => handleChange(“description”, e.target.value)}
/>
</div>
</div>
<div className=“d-flex align-items-center justify-center sm:justify-end mt-4 sm:mt-5”>
<button type=“button” onClick={() => updatePersonalInfo()} data-action=“next” className=“blue-btn”> Save </button>
<button type=“button” data-action=“next” className=“mt-1 sm:mt-0 button–simple grey-btn” onClick={() => clickTab(‘gallery’)}> Next </button>
</div>
</section>
{/* / End Step 1 */}
{/* Step 2 */}
<section id=“progress-form__panel-2” role=“tabpanel” aria-labelledby=“progress-form__tab-2” tabindex=“0” hidden={(activeTab == “gallery” ? false : true)}>
<div className=“sm:d-grid sm:grid-col-3 sm:mt-3”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“formFile” className=“form-label”>Upload Profile Image</label>
<input className=“form-control form-control-lg” type=“file” id=“formFile” onChange={handleProfileChange} ref={profileImgRef}/>
{
profilefileError && <span style={{color: “red”, fontSize: 12}}>{profilefileError}</span>
}
</div>
{
avatar && <div className=“sm:d-grid sm:grid-col-3 sm:mt-10”>
<img style={{width: 100}} src={(avatar ? process.env.PROFILE_PATH + “/” + avatar : “/images/no-image.jpg”)} alt={avatar} />
</div>
}
</div>
<br />
<div className=“sm:d-grid sm:grid-col-3 sm:mt-10”>
<div className=“mt-3 sm:mt-0 form__field”>
<label for=“formFile” className=“form-label”>Upload Gallery Image</label>
<input className=“form-control form-control-lg” multiple type=“file” id=“formFile” onChange={handleGalleryChange} ref={galleryImgRef}/>
{
fileError && <span style={{color: “red”, fontSize: 12}}>{fileError}</span>
}
</div>
</div>
<div className=“gallery-section”>
<div className=“gallery-flex”>
<div className=“row”>
{
(galleryImages && galleryImages.length == 0) && <div className=“col-12 col-md-3 col-lg-3 col-xxl-3”>
No Images Available.
</div>
}
{
(galleryImages && galleryImages.length > 0) && galleryImages?.map((v,k) => {
if (v?.url) {
return (
<div style={{marginRight: 40}} key={“gallery-div-“+k} className=“col-12 col-md-3 col-lg-3 col-xxl-3”>
<Link href=“#” onClick={() => deleteGallery(v?._id)}><img style={{width: 20, height: 20, position: “relative”, left: 100, right:0, backgroundColor: “#000”}} src=“/images/delete_img.png” /></Link>
<img style={{width: 100, marginRight: 20 }} key={“gallery”+k} src={process.env.GALLERY_PATH+“/”+v?.url} />
</div>
)
}
})
}
</div>
</div>
{/*<div className=”add-button”>
<button>Add Photo </button>
</div>*/}
</div>
<div className=“d-flex sm:flex-row align-items-center justify-center sm:justify-end mt-4 sm:mt-5”>
<button onClick={() => saveImage()} type=“button” data-action=“next” className=“blue-btn”> Save </button>
<button type=“button” className=“mt-1 sm:mt-0 button–simple grey-btn” data-action=“prev” onClick={() => clickTab(“personal”)}> Back </button>
<button type=“button” data-action=“next” className=“mt-1 sm:mt-0 button–simple grey-btn” onClick={() => clickTab(“tags”)}> Next </button>
</div>
</section>
{/* / End Step 2 */}
{/* Step 3 */}
<section id=“progress-form__panel-3” role=“tabpanel” aria-labelledby=“progress-form__tab-3” tabindex=“0” hidden={(activeTab == “tags” ? false : true)}>
<div className=“sm:d-grid sm:grid-col-10 sm:mt-3”>
<div className=“row”>
<div className=“form-group col-md-6”>
<label>Category</label>
<select
className=“form-control”
value={category}
onChange={e => onSelectCategory(e.target.value, e.target.getAttribute(‘label’))} // … and update the state variable on any change!
>
<option value=“” disabled selected>Select your option</option>
{
categories && categories.map((cat, idx) => {
return <option key={idx} value={cat?._id} selected={(cat?.category_name == categoryName ? true : false)}>{cat?.category_name}</option>
})
}
</select>
{
errors.category && <span style={{color: “red”, fontSize: 12}}>{errors.category}</span>
}
</div>
{
(subCategories && subCategories.length > 0) && <div className=“form-group col-md-6”>
<label>Sub Category</label>
<Select
value={subCategory}
onChange={onSelectSubCategory}
isMulti
placeholder=“Select your option”
options={subCategories}
/>
{
errors?.subCategory && <span style={{color: “red”, fontSize: 12}}>{errors.subCategory}</span>
}
</div>
}
</div>
</div>
<div className=“row”>
<div className=“form-group col-md-6”>
<label>Tags</label>
<ReactTags
delimiters={delimiters}
tags={tags}
handleDelete={handleDelete}
handleAddition={handleAddition}
handleDrag={handleDrag}
handleTagClick={handleTagClick}
inputFieldPosition=“inline”
allowDeleteFromEmptyInput={false}
autocomplete
allowUnique
/>
</div>
</div>
<div className=“d-flex sm:flex-row align-items-center justify-center sm:justify-end mt-4 sm:mt-5”>
<button type=“button” className=“mt-1 sm:mt-0 button–simple grey-btn” data-action=“prev” onClick={() => clickTab(“gallery”)}> Back </button>
<button type=“button” className=“blue-btn” onClick={() => updatePersonalInfo()}> Save </button>
</div>
</section>
{/* / End Step 3 */}
</div>
</div>
</section>
Please follow and like us:
