Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gowthaman dev #61

Merged
merged 6 commits into from
Jul 4, 2021
Merged

Gowthaman dev #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c11bac2
Revamped order page
Gowthaman21 Jul 2, 2021
ae65ab6
updated style
Gowthaman21 Jul 2, 2021
bbddfb4
Removed warnings
Gowthaman21 Jul 2, 2021
d98d990
Added Api functionalies
Gowthaman21 Jul 2, 2021
bf0fb14
removed unanted usestate
Gowthaman21 Jul 3, 2021
f11de32
Merge branch 'main' into gowthaman-dev
Shalini-2209 Jul 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/components/pages/profile/SideNav/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,32 @@ import { AiTwotoneShopping } from "react-icons/ai";
import { FiLogOut } from 'react-icons/fi'
import { Button, Col, Modal } from 'react-bootstrap';
import { NavDiv , ProfileLink } from '../../../../styles/pages/profile-page'
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { Slab } from "../../../../styles/themes/font-styles";
import { fetchResult, postApi } from "../../../../services/api/loaded-services";


const SideNav = () =>{
const [show, setShow] = useState(false);
const [userData, setUserData] = useState({})
useEffect(() => {
async function fetchdata(){
await postApi("profile")
let res = await fetchResult("profile")
setUserData(res)
}
fetchdata()
}, [])

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

return(
<Col xs={2} className="d-none d-md-block">
<NavDiv className='px-1 py-2'>
<img style={{ borderRadius: '50%' , width : '50px' , height : '50px' ,float:'left', margin:'0 1rem 0 0.5rem'}} src="https://lh3.googleusercontent.com/a-/AOh14GhwgF6-YeLPhg2KB8rPpU7DxzZXPMZFhuoIq5AIzg=s96-c" />
<img style={{ borderRadius: '50%' , width : '50px' , height : '50px' ,float:'left', margin:'0 1rem 0 0.5rem'}} src={userData.photo} />
<p style={{fontSize:'15px', marginBottom:'0'}}>Hello,</p>
<strong style={{color:'#7D0D80'}}>Gowthaman M</strong>
<strong style={{color:'#7D0D80'}}> {userData.name} </strong>
<hr />
<ProfileLink to='../profile/order'>
<h5 style={{color:'#7D0D80'}} className="pl-1 mx-1"><AiTwotoneShopping className="mx-1 mb-1" size='16' />My Orders</h5>
Expand Down
184 changes: 117 additions & 67 deletions src/components/pages/profile/delivery/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,61 @@
import { useState, useEffect } from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Input, StyledRow , StyledButton , Msg } from "../../../../styles/pages/delivery";
import data from "../../../../api/DeliveryInfo.json";
import axios from "axios";
import { Slab } from "../../../../styles/themes/font-styles";
import { RiPencilFill } from "react-icons/ri";
import { FaEraser , FaSave } from "react-icons/fa";
import SideNav from "../SideNav";
import { NavDiv } from "../../../../styles/pages/profile-page";
import { fetchResult, postApi } from "../../../../services/api/loaded-services";
import { ApiPostService } from "../../../../services/api/api-services";
import { retriveDetails } from "../../../../services/storage/details";

const DeliveryInformation = () =>{
const [fname,setfName]=useState( data.fname )
const [lname,setlName]=useState( data.lname )
const [phno,setPhno]=useState( data.phno )
const [address,setAddress]=useState( data.address )
const [pin,setPin]=useState( data.pin )
const [city,setCity]=useState( data.city )
const [state,setState]=useState( data.state )
const [err,setErr]=useState("")
const [msg,setMsg]=useState("")
const [details,setDetails]= useState(
{ fname:'', lname:'' , phno:'' , address:'' , pin:'' , city:'' ,state:'' }
)
const [msg,setMsg]=useState({ err:'', msg:'' })

const handleChange = e => {
const { name, value } = e.target;
setDetails(prevState => ({
...prevState,
[name]: value
}));
};

function assign(data){
console.log('data', data)
var name=data.deliveryName.split(" ");
var pincode= data.pincode === 0 ? "" : data.pincode
setDetails({
'fname':name[0] ,
'lname': name[1],
'phno':data.phoneNumber ,
'address':data.address,
'pin':pincode,
'city':data.city,
'state':data.state});
}

function messages(name, str){
setMsg(prevState => ({
...prevState,
[name]: str
}));
}

let userId = retriveDetails()

useEffect(() => {
async function fetchdata(){
await postApi("profile")
let det = await fetchResult("delivery")
assign(det)
}
fetchdata()
}, [])
const edit= () =>{
var TextElements = document.getElementsByClassName("info");

Expand All @@ -30,111 +66,125 @@ const DeliveryInformation = () =>{
for (var i = 0, max = TextElements.length; i < max; i++) {
TextElements[i].removeAttribute("readOnly")
}
setErr("")
setMsg("")
messages('err',"")
messages('msg',"")
}
const reset= () =>{
setfName("");
setlName("");
setPhno("");
setAddress("");
setPin("");
setCity("");
setState("");
setDetails({ fname:'', lname:'' , phno:'' , address:'' , pin:'' , city:'' ,state:'' })
}
const save =() =>{
if (fname==="" || lname==="" || phno==='' || address==="" || pin===""|| city==="" || state==="") {
setErr("All fields are required!")
if (details.fname==="" || details.lname==="" || details.phno==='' || details.address==="" || details.pin===""|| details.city==="" || details.state==="") {
messages('err',"All fields are required!")
return;
}
if(phno.length<10 || phno.length>10){
setErr('Enter a valid phone number!')
if(details.phno.length<10 || details.phno.length>10){
messages('err', 'Enter a valid phone number!')
return;
}
if(pin.length<6 || pin.length>6){
setErr('Enter a valid pincode!')
if(details.pin.length<6 || details.pin.length>6){
messages('err', 'Enter a valid pincode!')
return;
}
setErr("")
messages('err','')
var TextElements = document.getElementsByClassName("info");
for (var i = 0, max = TextElements.length; i < max; i++) {
TextElements[i].readOnly = true;
}
document.getElementById('clear').style['display']="none";
document.getElementById('save').style['display']="none";
document.getElementById('edit').style['display']="block";
setMsg("Your Address have been Updated!")
}
let a={pin}
useEffect(async () => {
await axios.get(`https://api.postalpincode.in/pincode/`+a.pin)
.then((res) => {
console.log(res);
let cy=res.data[0].PostOffice[0]
setCity(cy.District)
setState(cy.State)
})
.catch((err) => {
console.log(err)
setCity('')
setState('')
let delName=details.fname+" "+details.lname;
let op = ApiPostService(process.env.REACT_APP_DELIVERYUPDATE, {
'customer': userId.id,
'phoneNumber': details.phno ,
'address': details.address,
'deliveryName': delName,
'pincode': details.pin,
'nation': 'India',
'state': details.state,
'city': details.city,
})
},[pin])
messages('msg','Your Address have been Updated!')
}

useEffect(() => {
async function getpin(){
let a={details}
await axios.get(`https://api.postalpincode.in/pincode/`+a.details.pin)
.then((res) => {
let cy=res.data[0].PostOffice[0]
setDetails(prevState => ({
...prevState,
city: cy.District,
state: cy.State
}));
})
.catch((err) => {
console.log(err)
setDetails(prevState => ({
...prevState,
city: '',
state: ''
}));
})
}
getpin()
},[details.pin])

return (
<Container fluid style={{clear: 'both', overflow: 'hidden', marginTop:'5%'}}>
<Container fluid style={{clear: 'both', overflow: 'hidden', marginTop:'9%'}}>
<Row>

<SideNav />

<Col lg={10} md={10} xs={12} style={{overflow:'hidden'}}>
<NavDiv type="main" mobile="diff">
<NavDiv type="main" mobile="diff" style={{paddingTop:'1.5em'}}>
<h2 style={{textAlign:"center", fontFamily:Slab, color:"purple", textTransform:'uppercase' }}>Delivery Information</h2>
<hr style={{width: '70%', margin:"auto"}} />
<StyledButton className='form-control' onClick={reset} style={{display:'none', backgroundColor:'#FFB400', border:'none'}} id="clear">Clear<FaEraser className="mx-1 mb-1" size='16' /></StyledButton>
<StyledButton className='form-control' onClick={edit} style={{backgroundColor:'#0058E6', border:'none'}} id="edit">Edit<RiPencilFill className="mx-1 mb-1" size='16' /></StyledButton>
<br />
<StyledRow style={{clear:'both'}}>
<Col lg={5} xs={7} md={5}>
<div class="form-floating mb-3">
<Input width="full" type="text" className="form-control info" id="floatingInput" value={fname} readOnly onChange={e=>setfName(e.target.value)} />
<label for="floatingInput">First Name</label>
<div className="form-floating mb-3">
<Input width="full" type="text" className="form-control info" id="firstName" value={details.fname} readOnly onChange={handleChange} name="fname" />
<label htmlFor="firstName">First Name</label>
</div>
</Col>
<Col lg={5} xs={5} md={5}>
<div class="form-floating mb-3">
<Input style={{width:'80%'}} type="text" className="form-control info" id="floatingInput" value={lname} readOnly onChange={e=>setlName(e.target.value)} />
<label for="floatingInput">Last Name</label>
<div className="form-floating mb-3">
<Input style={{width:'80%'}} type="text" className="form-control info" id="lasttName" value={details.lname} readOnly onChange={handleChange} name='lname'/>
<label htmlFor="lasttName">Last Name</label>
</div>
</Col>
</StyledRow>
<StyledRow>
<Col>
<div class="form-floating mb-3">
<Input type="number" className="form-control info" id="floatingInput" value={phno} readOnly onChange={e=>setPhno(e.target.value)} />
<label for="floatingInput">Phone Number</label>
<div className="form-floating mb-3">
<Input type="number" className="form-control info" id="phone" value={details.phno} readOnly onChange={handleChange} name='phno' />
<label htmlFor="phone">Phone Number</label>
</div>
<div class="form-floating mb-3">
<Input type="text" className="form-control info" id="floatingInput" value={address} readOnly onChange={e=>setAddress(e.target.value)} />
<label for="floatingInput">Address</label>
<div className="form-floating mb-3">
<Input type="text" className="form-control info" id="address" value={details.address} readOnly onChange={handleChange} name='address' />
<label htmlFor="address">Address</label>
</div>
<div class="form-floating mb-3">
<Input type="number" className="form-control info" id="floatingInput" value={pin} readOnly onChange={e=>setPin(e.target.value)} />
<label for="floatingInput">PinCode</label>
<div className="form-floating mb-3">
<Input type="number" className="form-control info" id="pin" value={details.pin} readOnly onChange={handleChange} name='pin' />
<label htmlFor="pin">PinCode</label>
</div>
<div class="form-floating mb-3">
<Input type="text" className="form-control info" id="floatingInput" value={city} readOnly onChange={e=>setCity(e.target.value)} />
<label for="floatingInput">District</label>
<div className="form-floating mb-3">
<Input type="text" className="form-control info" id="district" value={details.city} readOnly name='district' />
<label htmlFor="district">District</label>
</div>
<div class="form-floating mb-3">
<Input type="text" className="form-control info" id="floatingInput" value={state} readOnly onChange={e=>setState(e.target.value)} />
<label for="floatingInput">State</label>
<div className="form-floating mb-3">
<Input type="text" className="form-control info" id="state" value={details.state} readOnly name='state' />
<label htmlFor="state">State</label>
</div>
</Col>
</StyledRow>
<Msg type='err' style={{color:'#F83535'}}>{err}</Msg>
<Msg type='err' style={{color:'#F83535'}}>{msg.err}</Msg>
<StyledButton className='form-control ' onClick={save} style={{display:'none', backgroundColor:'#00A550' }} type='save' id="save">Save<FaSave className="mx-1 mb-1" size='16' /></StyledButton>
<Msg style={{marginLeft:'16rem', color:'#00A550'}}>{msg}</Msg>
<Msg style={{marginLeft:'16rem', color:'#00A550'}}>{msg.msg}</Msg>
<br />
</NavDiv>
</Col>
Expand Down
Loading