From c11bac22d8ab29087eb5cdef18ec5dbe37aa5efe Mon Sep 17 00:00:00 2001 From: Gowthaman21 Date: Fri, 2 Jul 2021 20:45:48 +0530 Subject: [PATCH 1/5] Revamped order page --- src/components/pages/profile/orders/index.jsx | 123 +++++++++++------- src/styles/pages/order-page.js | 68 ++++++---- 2 files changed, 118 insertions(+), 73 deletions(-) diff --git a/src/components/pages/profile/orders/index.jsx b/src/components/pages/profile/orders/index.jsx index b571b13..84651ed 100644 --- a/src/components/pages/profile/orders/index.jsx +++ b/src/components/pages/profile/orders/index.jsx @@ -1,37 +1,85 @@ -import React, { useState } from "react"; -import {Container, Table, Row, Col } from "react-bootstrap"; -import {TabBody, TabHead, Tab, Para, StyleStatus} from '../../../../styles/pages/order-page' + import React, { useState } from "react"; +import {Container, Table, Row, Col , Card } from "react-bootstrap"; +import {Tab, Para, StyleStatus , TabData} from '../../../../styles/pages/order-page' import data from "../../../../api/Orders.json" import {Slab} from '../../../../styles/themes/font-styles'; import SideNav from '../SideNav'; import {NavDiv, ProfileLink} from '../../../../styles/pages/profile-page'; +import { MdContentCopy , MdOpenInNew } from 'react-icons/md'; +import Clipboard from 'react-clipboard.js'; function Order() { - - let StatusStyle={ - textAlign: 'center', - verticalAlign: 'middle' - }; const [order, setOrder] = useState(data) - const tabBody = order.map((id) => - - {id.orderRef} - {id.orderDate} - {id.deliveryDate} - ₹.{id.total} - {id.noItems} - {id.payment} - {id.status} - {/* {id.status} */} - - {/* */} - {/* Details
- Reorder */} - + const card = order.map((id) => + + + + + + + Ordered on + Order ID + #{id.orderRef} + + + 21/11/11 + Shipped to Gowthaman + + +
+ + + + + + + Delivered + {id.deliveryDate} + Tracking ID + : + CT040857193IN + + + + + + + + Total + ₹ {id.total} + Tracking URL + : + {add3Dots('https://www.indiapost.gov.in/_layouts/15/DOP.Portal.Tracking/TrackConsignment.aspx' , 22)} + + + + + + No. of Items + {id.noItems} + Payment + : + {id.payment} + + +
+ + ); + function add3Dots(string, limit) + { + var dots = "..."; + if(string.length > limit) + { + string = string.substring(0,limit) + dots; + } + + return string; + } + const tab = order.map((id) =>
@@ -57,14 +105,12 @@ function Order() { {id.status}
- {/* {id.noItems} items - {id.status}
*/}
); return ( - + @@ -73,30 +119,7 @@ function Order() {

Order History

Here are the orders you've placed since your account was created.
- - - - - - - - - - - {/* */} - {/* */} - - - - {tabBody} - -
Order
- Reference		Ordered
- Date		Expected
- Delivery Date		Total
- Price		No. of
- Items		Payment
- Method		StatusInvoice
+ {card}
diff --git a/src/styles/pages/order-page.js b/src/styles/pages/order-page.js index 548229d..b2e71d0 100644 --- a/src/styles/pages/order-page.js +++ b/src/styles/pages/order-page.js @@ -1,30 +1,52 @@ -import styled from "styled-components" -import {Lora , Slab} from '../themes/font-styles' -import {LightShade, DarkShade} from "../themes/color-theme" +import styled, { css } from "styled-components" +import {Lora } from '../themes/font-styles' -export const TabHead= styled.thead` - background-color: ${LightShade}; - font-weight: 700; - font-size: 1.125rem; - font-family: ${Slab}; - color:white; - text-align:center; - vertical-align: middle !important; -`; - -export const TabBody = styled.tbody` - white-space: pre-line; - font-size: 0.9rem; - font-weight:700; - color: ${DarkShade}; - background-color: #fff; - font-family: ${Lora}; - text-align:center; - vertical-align: middle !important; +export const TabData= styled.td` + border:0; + padding:0 !important; + font:0.9rem; + ${props => props.width === "med" && css` + width:13%; + @media (min-width:0px) and (max-width:1020px){ + width: 20%; + } + `} + ${props => props.width === "small" && css` + width:10%; + @media (min-width:0px) and (max-width:1020px){ + width: auto; + } + `} + ${props => props.font === "bold" && css` + font-weight:700; + `} + ${props => props.width === "big" && css` + width:40%; + @media (min-width:1064px) and (max-width:1200px){ + width: 35%; + } + @media (min-width:0px) and (max-width:1064px){ + width: auto; + } + `} + ${props => props.float === "right" && css` + width:74%; + text-align:right; + @media (min-width:0px) and (max-width:900px){ + width: 60%; + } + `} + ${props => props.width === "full" && css` + width:auto; + text-align:right; + `} + ${props => props.width === "auto" && css` + width:auto; + `} `; export const Tab = styled.div` - padding: 20px; + padding: 20px 20px 0; @media (min-width:0px) and (max-width:766px){ padding: 20px 0; } From ae65ab6755ee3cc0d0016afbe0a24bfd6dc356b3 Mon Sep 17 00:00:00 2001 From: Gowthaman21 Date: Fri, 2 Jul 2021 20:46:27 +0530 Subject: [PATCH 2/5] updated style --- src/components/pages/profile/SideNav/index.jsx | 16 +++++++++++++--- src/styles/pages/profile-page.js | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/pages/profile/SideNav/index.jsx b/src/components/pages/profile/SideNav/index.jsx index 9f962ed..110ee53 100644 --- a/src/components/pages/profile/SideNav/index.jsx +++ b/src/components/pages/profile/SideNav/index.jsx @@ -3,12 +3,22 @@ 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); @@ -16,9 +26,9 @@ const SideNav = () =>{ return( - +

Hello,

- Gowthaman M + {userData.name}
My Orders
diff --git a/src/styles/pages/profile-page.js b/src/styles/pages/profile-page.js index bf6c6dc..d8f0a8a 100644 --- a/src/styles/pages/profile-page.js +++ b/src/styles/pages/profile-page.js @@ -49,7 +49,7 @@ export const Links= styled.div` export const NavDiv=styled.div` margin-top:10px; margin-right:-15px; - background-color:#FCF8FB; + background-color:#FDF9FC; border-radius: 5px; box-shadow: 3px 3px 10px 1px rgba(199,173,230,0.77); -webkit-box-shadow: 3px 3px 10px 1px rgba(199,173,230,0.77); From bbddfb4f3ab80c24da9ca5a0e6bbca2557ebe834 Mon Sep 17 00:00:00 2001 From: Gowthaman21 Date: Fri, 2 Jul 2021 20:47:12 +0530 Subject: [PATCH 3/5] Removed warnings --- src/components/pages/profile/orders/details/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/pages/profile/orders/details/index.jsx b/src/components/pages/profile/orders/details/index.jsx index f3687e7..007b4bb 100644 --- a/src/components/pages/profile/orders/details/index.jsx +++ b/src/components/pages/profile/orders/details/index.jsx @@ -51,7 +51,7 @@ const OrderDetails = () => { ); return( - + @@ -133,10 +133,10 @@ const OrderDetails = () => { - URL : {data.trackURL} + URL : {data.trackURL} - + From d98d9903bee0fe288bf3a7ed732914237df3caa2 Mon Sep 17 00:00:00 2001 From: Gowthaman21 Date: Fri, 2 Jul 2021 20:47:44 +0530 Subject: [PATCH 4/5] Added Api functionalies --- .../pages/profile/delivery/index.jsx | 132 ++++++++++++------ src/components/pages/profile/index.jsx | 78 +++++++---- src/services/api/loaded-services.js | 21 ++- 3 files changed, 154 insertions(+), 77 deletions(-) diff --git a/src/components/pages/profile/delivery/index.jsx b/src/components/pages/profile/delivery/index.jsx index df65404..0a0adf5 100644 --- a/src/components/pages/profile/delivery/index.jsx +++ b/src/components/pages/profile/delivery/index.jsx @@ -1,25 +1,50 @@ 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 [fname,setfName]=useState( '' ) + const [lname,setlName]=useState( "" ) + const [phno,setPhno]=useState( "" ) + const [address,setAddress]=useState( "" ) + const [pin,setPin]=useState( "" ) + const [city,setCity]=useState( "" ) + const [state,setState]=useState( "" ) const [err,setErr]=useState("") const [msg,setMsg]=useState("") + function assign(data){ + console.log('data', data) + var name=data.deliveryName.split(" "); + setfName(name[0]) + setlName(name[1]) + setPhno(data.phoneNumber) + setAddress(data.address) + // console.log(data.pincode) + data.pincode === 0 ? setPin("") : setPin(data.pincode) + setCity(data.city) + setState(data.state) + } + + 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"); @@ -63,32 +88,49 @@ const DeliveryInformation = () =>{ document.getElementById('clear').style['display']="none"; document.getElementById('save').style['display']="none"; document.getElementById('edit').style['display']="block"; + let delName=fname+" "+lname; setMsg("Your Address have been Updated!") + console.log('cuid', pin) + let op = ApiPostService(process.env.REACT_APP_DELIVERYUPDATE, { + 'customer': userId.id, + 'phoneNumber': phno , + 'address': address, + 'deliveryName': delName, + 'pincode': pin, + 'nation': 'India', + 'state': state, + 'city': city, + }) + console.log('output',op) } - 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('') - }) + + useEffect(() => { + async function getpin(){ + let a={pin} + 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('') + }) + } + getpin() },[pin]) return ( - + - +

Delivery Information

Clear @@ -96,39 +138,39 @@ const DeliveryInformation = () =>{
-
- setfName(e.target.value)} /> - +
+ setfName(e.target.value)} /> +
-
- setlName(e.target.value)} /> - +
+ setlName(e.target.value)} /> +
-
- setPhno(e.target.value)} /> - +
+ setPhno(e.target.value)} /> +
-
- setAddress(e.target.value)} /> - +
+ setAddress(e.target.value)} /> +
-
- setPin(e.target.value)} /> - +
+ setPin(e.target.value)} /> +
-
- setCity(e.target.value)} /> - +
+ +
-
- setState(e.target.value)} /> - +
+ +
diff --git a/src/components/pages/profile/index.jsx b/src/components/pages/profile/index.jsx index 05a2ff9..0557d1d 100644 --- a/src/components/pages/profile/index.jsx +++ b/src/components/pages/profile/index.jsx @@ -1,30 +1,50 @@ +import React, { useState, useEffect } from 'react' import { Col, Container, Row } from "react-bootstrap"; -import { Links, TabData, Para , NavDiv , ProfileLink} from "../../../styles/pages/profile-page"; +import { Links, TabData, Para, NavDiv, ProfileLink } from "../../../styles/pages/profile-page"; import { Slab } from "../../../styles/themes/font-styles" -import SideNav from './SideNav'; +import SideNav from './SideNav'; import { RiPencilFill } from "react-icons/ri"; import { AiTwotoneShopping } from "react-icons/ai"; -import {IoIosArrowForward} from 'react-icons/io' +import { IoIosArrowForward } from 'react-icons/io' +import { fetchResult, postApi } from '../../../services/api/loaded-services'; +import { Button } from '../../../styles/widgets/widgets'; + const Profile = () => { + const [userData, setUserData] = useState({}) + const [details, setDetails] = useState({}) + useEffect(() => { + async function fetchdata(){ + await postApi("profile") + let res = await fetchResult("profile") + let det = await fetchResult("delivery") + setUserData(res) + setDetails(det) + } + fetchdata() + }, []) return ( - + - - + + -

Personal Information

+

Personal Information

- Name      :Gowthaman M - E-mail     :manogowtham211@gmail.com - Phone     :+91 9003091453 -
- Address  :37/9a, Srinivasa Perumal Koil, 1st street, - Chennai, TamilNadu-600019 + + Name      : {userData.name} + E-mail     : {userData.email} + { details.address!=='' && <> + Phone     : {details.phoneNumber} + Address  : {details.address} , + {details.city},{details.state} -{details.pincode} + } +
+ { details.address==='' && <> } Change Password @@ -32,29 +52,33 @@ const Profile = () => { -
- -

Profile

- - Gowthaman M - manogowtham211@gmail.com - +
+ +

Profile

+ + { userData.name } + { userData.email } +
-

My Orders

-

+

My Orders

+

-
+
-

My Address

+

My Address

- 37/9a, Srinivasa Perumal Koil, 1st street,
Chennai, TamilNadu-600019
9003091453
-
+ { details.address!=='' && + <> + {details.address},
{details.city}, {details.state}-{details.pincode}
{details.phoneNumber}
+
+ + } -

Edit Address

+

Edit Address

diff --git a/src/services/api/loaded-services.js b/src/services/api/loaded-services.js index 3ae1950..9ea5e10 100644 --- a/src/services/api/loaded-services.js +++ b/src/services/api/loaded-services.js @@ -1,24 +1,33 @@ +import { retriveDetails } from "../storage/details"; import { ApiGetService, ApiPostService } from "./api-services"; // Gets all the (get) requests let categories = []; let subcategories = []; +let userData = {}; +let personalDetails={}; async function getApi() { categories = await ApiGetService(process.env.REACT_APP_CATEGORY_GET_URL); } async function postApi(value) { let element; - if (value === "subcategories"){ + if (value === "subcategories") { for (let index = 0; index < categories.length; index++) { element = categories[index]; console.log(element); subcategories = await ApiPostService( process.env.REACT_APP_SUBCATEGORY_POST_URL, - {category : element.name} + { category: element.name } ); } } + if (value === "profile") { + let userId = await retriveDetails() + let userDetails = await ApiPostService(process.env.REACT_APP_PROFILE, { 'customer': userId.id }) + userData = userDetails.data + personalDetails = userDetails.data.personalInfo + } } // Fetches data as per need @@ -30,11 +39,13 @@ const fetchResult = async (item) => { case "subcategories": if (subcategories.length === 0) await postApi("subcategories"); return subcategories; - // case "profile": - // return profile; + case "profile": + return userData; + case 'delivery': + return personalDetails; default: return null; } }; -export { getApi, fetchResult }; +export { getApi, postApi, fetchResult }; From bf0fb14b195f115ea54ecfaa2882837bb63f4b76 Mon Sep 17 00:00:00 2001 From: Gowthaman21 Date: Sat, 3 Jul 2021 21:41:04 +0530 Subject: [PATCH 5/5] removed unanted usestate --- .../pages/profile/delivery/index.jsx | 130 ++++++++++-------- 1 file changed, 69 insertions(+), 61 deletions(-) diff --git a/src/components/pages/profile/delivery/index.jsx b/src/components/pages/profile/delivery/index.jsx index 0a0adf5..42f51de 100644 --- a/src/components/pages/profile/delivery/index.jsx +++ b/src/components/pages/profile/delivery/index.jsx @@ -12,27 +12,38 @@ import { ApiPostService } from "../../../../services/api/api-services"; import { retriveDetails } from "../../../../services/storage/details"; const DeliveryInformation = () =>{ - const [fname,setfName]=useState( '' ) - const [lname,setlName]=useState( "" ) - const [phno,setPhno]=useState( "" ) - const [address,setAddress]=useState( "" ) - const [pin,setPin]=useState( "" ) - const [city,setCity]=useState( "" ) - const [state,setState]=useState( "" ) - 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(" "); - setfName(name[0]) - setlName(name[1]) - setPhno(data.phoneNumber) - setAddress(data.address) - // console.log(data.pincode) - data.pincode === 0 ? setPin("") : setPin(data.pincode) - setCity(data.city) - setState(data.state) + 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() @@ -55,32 +66,26 @@ 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; @@ -88,40 +93,43 @@ const DeliveryInformation = () =>{ document.getElementById('clear').style['display']="none"; document.getElementById('save').style['display']="none"; document.getElementById('edit').style['display']="block"; - let delName=fname+" "+lname; - setMsg("Your Address have been Updated!") - console.log('cuid', pin) + let delName=details.fname+" "+details.lname; let op = ApiPostService(process.env.REACT_APP_DELIVERYUPDATE, { 'customer': userId.id, - 'phoneNumber': phno , - 'address': address, + 'phoneNumber': details.phno , + 'address': details.address, 'deliveryName': delName, - 'pincode': pin, + 'pincode': details.pin, 'nation': 'India', - 'state': state, - 'city': city, - }) - console.log('output',op) + 'state': details.state, + 'city': details.city, + }) + messages('msg','Your Address have been Updated!') } useEffect(() => { async function getpin(){ - let a={pin} - await axios.get(`https://api.postalpincode.in/pincode/`+a.pin) + let a={details} + await axios.get(`https://api.postalpincode.in/pincode/`+a.details.pin) .then((res) => { - // console.log(res); let cy=res.data[0].PostOffice[0] - setCity(cy.District) - setState(cy.State) + setDetails(prevState => ({ + ...prevState, + city: cy.District, + state: cy.State + })); }) .catch((err) => { - // console.log(err) - setCity('') - setState('') + console.log(err) + setDetails(prevState => ({ + ...prevState, + city: '', + state: '' + })); }) } getpin() - },[pin]) + },[details.pin]) return ( @@ -139,13 +147,13 @@ const DeliveryInformation = () =>{
- setfName(e.target.value)} /> +
- setlName(e.target.value)} /> +
@@ -153,30 +161,30 @@ const DeliveryInformation = () =>{
- setPhno(e.target.value)} /> +
- setAddress(e.target.value)} /> +
- setPin(e.target.value)} /> +
- +
- +
- {err} + {msg.err} Save - {msg} + {msg.msg}