Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit d452f150 by Jyotsna
Options

vendor business details form ui

1 parent 3c81ef95
Expand all
Inline Side-by-side
Showing 6 changed files with 31 additions and 16 deletions
components/user/MyProfile.js
...@@ -32,8 +32,8 @@ const MyProfile = () => { ...@@ -32,8 +32,8 @@ const MyProfile = () => {
country: Yup.string().required('Country is required'), country: Yup.string().required('Country is required'),
state: Yup.string().required('State is required'), state: Yup.string().required('State is required'),
city: Yup.string().required('City is required'), city: Yup.string().required('City is required'),
address_line1: Yup.string().required('Address Line1 is required'), addressLine1: Yup.string().required('Address Line1 is required'),
address_line2: Yup.string().required('Adrress Line2 is required') addressLine2: Yup.string().required('Adrress Line2 is required')
}) })
) )
}); });
...@@ -75,7 +75,7 @@ const MyProfile = () => { ...@@ -75,7 +75,7 @@ const MyProfile = () => {
<h2>My Profile</h2> <h2>My Profile</h2>
<Table className='abc'> <Table className='abc'>
<thead> <thead>
<tr> <tr>
<th>1</th> <th>1</th>
...@@ -113,7 +113,7 @@ const MyProfile = () => { ...@@ -113,7 +113,7 @@ const MyProfile = () => {
<td>33</td> <td>33</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table>
<div className="bg-white border-div"> <div className="bg-white border-div">
<Formik <Formik
initialValues={{ profile_image: null }} initialValues={{ profile_image: null }}
...@@ -158,14 +158,16 @@ const MyProfile = () => { ...@@ -158,14 +158,16 @@ const MyProfile = () => {
}} }}
> >
<div className="d-flex align-items-center justify-content-between"> <div className="d-flex align-items-center justify-content-between">
<div className="col-lg-8 d-flex align-items-center"> <div className="col-lg-6 d-flex align-items-center">
<img src="/images/user/user-big.jpg" layout="fill" className="image-fluid me-4" /> <span className="image-container me-4">
<Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
</span>
<p className="username">John Doe</p> <p className="username">John Doe</p>
</div> </div>
<div className="col-lg-2"> <div className="col-lg-4">
<label className="custom-file-input" htmlFor="file-upload"> <label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload</p> <p className="mb-0">Upload Profile Photo</p>
<img src="/images/user/icon-upload.svg" layout="fill" className="image-fluid pb-1" /> <Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
</label> </label>
<input <input
type="file" type="file"
...@@ -174,6 +176,10 @@ const MyProfile = () => { ...@@ -174,6 +176,10 @@ const MyProfile = () => {
onChange={handleProfileUploadChange} onChange={handleProfileUploadChange}
// onBlur={handleBlur} // onBlur={handleBlur}
style={{ display: "none" }} style={{ display: "none" }}
onClick={event => {
const { target = {} } = event || {};
target.value = "";
}}
/> />
{errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)} {errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</div> </div>
...@@ -417,12 +423,12 @@ const MyProfile = () => { ...@@ -417,12 +423,12 @@ const MyProfile = () => {
<label>Address Line 1</label> <label>Address Line 1</label>
<input <input
type="text" type="text"
name="address_line1" name="addressLine1"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.address_line1} value={values.addressLine1}
/> />
{errors.address_line1 && touched.address_line1 && (<span className="form-error">{errors.address_line1}</span>)} {errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
</div> </div>
</div> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 offset-lg-1 col-lg-5">
...@@ -430,12 +436,12 @@ const MyProfile = () => { ...@@ -430,12 +436,12 @@ const MyProfile = () => {
<label>Address Line 2</label> <label>Address Line 2</label>
<input <input
type="text" type="text"
name="address_line2" name="addressLine2"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.address_line2} value={values.addressLine2}
/> />
{errors.address_line2 && touched.address_line2 && (<span className="form-error">{errors.address_line2}</span>)} {errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
</div> </div>
</div> </div>
</div> </div>
......
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"react-bootstrap-typeahead": "^6.0.0", "react-bootstrap-typeahead": "^6.0.0",
"react-datepicker": "^4.8.0", "react-datepicker": "^4.8.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0", "react-image-gallery": "^1.3.0",
"react-js-pagination": "^3.0.3", "react-js-pagination": "^3.0.3",
"react-multi-carousel": "^2.8.2", "react-multi-carousel": "^2.8.2",
......
public/images/vendor/attachment.svg 0 → 100644
<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 11.5V6C10 3.79086 8.2091 2 6 2C3.79086 2 2 3.79086 2 6V11.5C2 15.0899 4.91015 18 8.5 18C12.0899 18 15 15.0899 15 11.5V2H17V11.5C17 16.1944 13.1944 20 8.5 20C3.80558 20 0 16.1944 0 11.5V6C0 2.68629 2.68629 0 6 0C9.3137 0 12 2.68629 12 6V11.5C12 13.433 10.433 15 8.5 15C6.567 15 5 13.433 5 11.5V6H7V11.5C7 12.3284 7.6716 13 8.5 13C9.3284 13 10 12.3284 10 11.5Z" fill="black"/>
</svg>
yarn.lock
...@@ -2408,6 +2408,11 @@ ...@@ -2408,6 +2408,11 @@
"resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz" "resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
"version" "3.2.0" "version" "3.2.0"
"react-icons@^5.0.1":
"integrity" "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw=="
"resolved" "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz"
"version" "5.0.1"
"react-image-gallery@^1.3.0": "react-image-gallery@^1.3.0":
"integrity" "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==" "integrity" "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA=="
"resolved" "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz" "resolved" "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz"
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!