crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🚑 hotfix: Account Page

Browse Source
This commit is contained in:
sonnguyenkieio 2021-09-13 14:59:37 +07:00
parent d99abb51e9
commit 9a385a3f14
11 changed files with 131 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/modules/account/AccountNavigation/AccountNavigation.module.scss
View File

@ -1,27 +1,54 @@
@import '../../../../styles/utilities';
.accountNavigation {
@apply flex;
@apply relative;
width: 100%;
@screen md {
@apply flex;
width: 100%;
}
.slider {
@apply inline-block;
width: 0.2rem;
height: 4.8rem;
border-radius: 3px;
background-color: var(--primary);
position: absolute;
left: 11.2rem;
transition: all .2s linear;
@apply hidden;
@screen md {
@apply inline-block;
width: 0.2rem;
height: 4.8rem;
border-radius: 3px;
background-color: var(--primary);
position: absolute;
left: 0;
top: 450;
transition: all .2s linear;
}
}
.tabList {
margin-top: 3.8rem;
margin-right: 12.4rem;
@apply flex;
@screen md {
@apply block;
margin-right: 0rem;
}
@screen lg {
@apply block;
margin-right: 4.8rem;
}
@screen xl {
@apply block;
margin-right: 12.4rem;
}
}
.tabBody {
margin-top: -4.7rem;
width: 100%;
@screen md {
margin-top: -8.6rem;
}
}
}

9
src/components/modules/account/AccountNavigation/AccountNavigation.tsx
View File

@ -1,7 +1,7 @@
import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react"
import s from './AccountNavigation.module.scss'
import AccountNavigationItem from './components/AccountNavigationItem'
import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem'
import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane'
interface AccountNavigationProps {
@ -21,10 +21,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
function slide(index: number) {
const active = headerRef.current?.children.item(index)?.getBoundingClientRect()
const header = headerRef.current?.getBoundingClientRect()
const firstEl = headerRef.current?.children.item(0)?.getBoundingClientRect()
const current = sliderRef.current
if (current && active && header) {
const top = active.top;
if (current && active && header && firstEl) {
const firstElTop = firstEl.top
const top = active.top - firstElTop;
current.style.top = top.toString()+"px";
}
}
@ -63,7 +65,6 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
})
}
</div>
<div ref={slider} className={s.slider}></div>
</section>
)
}

17
src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss
View File

@ -1,17 +0,0 @@
@import '../../../../../styles/utilities';
.accountNavigationItem {
width: 28rem;
padding: 1.2rem 0 1.2rem 1.6rem;
margin-bottom: 1.2rem;
&:hover {
@apply cursor-pointer;
}
&.active {
background-color: #FBFBFB;
border-radius: 0 1.6rem 1.6rem 0;
}
}

46
src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss Normal file
View File

@ -0,0 +1,46 @@
@import '../../../../../../styles/utilities';
.accountNavigationItem {
@apply custom-border-radius;
width: fit-content;
padding: 1.2rem 1.6rem 1.2rem 0rem;
margin-bottom: 1.2rem;
&:hover {
@apply cursor-pointer;
}
&.active {
@apply custom-border-radius font-bold;
background-color: var(--primary);
color: white;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
margin-right: 1.6rem;
@screen md {
@apply font-normal;
background-color: #FBFBFB;
border-radius: 0 1.6rem 1.6rem 0;
color: #3D3D3D;
}
}
@screen md {
max-width: 24rem;
min-width: 22rem;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
@screen lg {
max-width: 26rem;
min-width: 23rem;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
@screen xl {
max-width: 28rem;
min-width: 24rem;
padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
}

0
src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx → src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.tsx
View File

6
src/components/modules/account/AccountPage/AccountPage.tsx
View File

@ -1,12 +1,12 @@
import React, { useState } from "react"
import s from './AccountPage.module.scss'
import { HeadingCommon, TabPane } from "src/components/common"
import AccountNavigation from '../AccountNavigation/AccountNavigation'
import HeadingCommon from '../../../common/HeadingCommon/HeadingCommon'
import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
import OrderInfomation from './components/OrderInformation/OrderInformation'
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane"
const waiting = [
{
@ -46,7 +46,7 @@ interface AccountPageProps {
defaultActiveContent?: "info" | "orders" | "favorites"
}
const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
const [modalVisible, setModalVisible] = useState(false);

32
src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
View File

@ -5,50 +5,30 @@
@apply bg-white;
margin-bottom: 1.6rem;
width: 100%;
border: 2px solid #EBEBEB;
border-radius: .8rem;
padding: 1.6rem;
}
.inputDisable {
margin-bottom: 1.6rem;
width: 100%;
border: 2px solid #EBEBEB;
border-radius: .8rem;
padding: 1.6rem;
background-color: #EBEBEB;
color: #CCCCCC;
}
.inputStateWrapper {
@apply bg-white;
margin-bottom: 1.6rem;
margin-right: 1.6rem;
border: 2px solid #EBEBEB;
border-radius: .8rem;
padding: 1.6rem;
.inputState {
@apply bg-white cursor-pointer;
border: white;
}
.inputState {
@apply bg-white cursor-pointer;
border: white;
margin-right: 0.8rem;
}
.inputPostalCode {
@apply bg-white;
margin-bottom: 1.6rem;
border: 2px solid #EBEBEB;
border-radius: .8rem;
padding: 1.6rem;
margin-left: 0.8rem;
}
.inputPhoneNumber {
@apply bg-white;
margin-bottom: 4rem;
width: 100%;
border: 2px solid #EBEBEB;
border-radius: .8rem;
padding: 1.6rem;
margin-top: 1.6rem;
}
.buttons {

74
src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
View File

@ -1,10 +1,7 @@
import classNames from "classnames"
import React, { useState } from "react"
import React from "react"
import s from './EditInfoModal.module.scss'
import {ModalCommon, MenuDropdown} from '../../../../../common'
import {ButtonCommon} from '../../../../../common'
import { ModalCommon, Inputcommon, SelectCommon } from '../../../../../common'
interface EditInfoModalProps {
accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
@ -14,14 +11,6 @@ interface EditInfoModalProps {
const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoModalProps) => {
const [name, setName] = useState(accountInfo.name);
const [email, setEmail] = useState(accountInfo.email);
const [address, setAddress] = useState(accountInfo.address);
const [state, setState] = useState(accountInfo.state);
const [city, setCity] = useState(accountInfo.city);
const [postalCode, setPostalCode] = useState(accountInfo.postalCode);
const [phoneNumber, setPhoneNumber] = useState(accountInfo.phoneNumber);
function saveInfo() {
console.log("saved !!!");
@ -29,46 +18,43 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
}
const states = [
{name: "D1", onClick: () => {setState("D1")}},
{name: "D2", onClick: () => {setState("D2")}},
{name: "D3", onClick: () => {setState("D3")}}
{name: "District 1", value: "D1"},
{name: "District 2", value: "D2"},
{name: "District 3", value: "D3"}
]
return (
<ModalCommon onClose={closeModal} visible={visible} title="Edit Infomation">
<section className={s.editInfoModal}>
<div>
<input className={s.input} type="text" name="name" placeholder="Name"
value={name} onChange={e => {setName(e.target.value)}} />
<div className={s.input}>
<Inputcommon placeholder="Name" value={accountInfo.name} type="text" />
</div>
<div>
<input className={s.inputDisable} type="text" name="email" placeholder="Email"
value={email} onChange={e => {setEmail(e.target.value)}} />
</div>
<div>
<input className={s.input} type="text" name="address" placeholder="Address"
value={address} onChange={e => {setAddress(e.target.value)}}/>
</div>
<div>
<input className={s.input} type="text" name="city" placeholder="City"
value={city} onChange={e => {setCity(e.target.value)}} />
</div>
<div className="flex">
<div className={s.inputStateWrapper}>
<MenuDropdown options={states} isHasArrow={true} >
<input className={s.inputState} type="text" name="state" placeholder="State"
value={state} disabled />
</MenuDropdown>
</div>
<input className={s.inputPostalCode} type="text" name="postalCode" placeholder="Postal code"
value={postalCode} onChange={e => {setPostalCode(e.target.value)}} />
<div className={s.inputDisable}>
<Inputcommon placeholder="Email" value={accountInfo.email} type="email" />
</div>
<div className={s.input}>
<Inputcommon placeholder="Address" value={accountInfo.address} type="text" />
</div>
<div>
<input className={s.inputPhoneNumber} type="text" name="phoneNumber" placeholder="Phone number"
value={phoneNumber} onChange={e => {setPhoneNumber(e.target.value)}} />
<div className={s.input}>
<Inputcommon placeholder="City" value={accountInfo.city} type="text" />
</div>
<div className="flex">
<div className={s.inputState}>
<SelectCommon type="custom" placeholder="State" option={states} />
</div>
<div className={s.inputPostalCode}>
<Inputcommon placeholder="Postal code" value={accountInfo.postalCode} type="text" />
</div>
</div>
<div className={s.inputPhoneNumber}>
<Inputcommon placeholder="Phone number" value={accountInfo.phoneNumber} type="text" />
</div>
<div className={s.buttons}>

2
src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss
View File

@ -8,6 +8,8 @@
.tabs {
margin-top: 3.2rem;
width: 100%;
border-bottom: black;
.blank {
margin-bottom: 2.4rem;

1
src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
View File

@ -10,7 +10,6 @@ interface OrderInformationProps {
waiting: {id: string, products: string[], totalPrice: number}[],
delivering: {id: string, products: string[], totalPrice: number}[],
delivered: {id: string, products: string[], totalPrice: number}[],
// active?: boolean
}
const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationProps) => {

37
src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
View File

@ -1,42 +1,5 @@
@import '../../../../../../styles/utilities';
.idAndStatus {
@apply items-center;
padding: 2.4rem 0 2.4rem 1rem;
@screen md {
padding: 2.4rem 0 2.4rem 1.2rem;
}
@screen lg {
padding: 2.4rem 0 2.4rem 2.4rem;
}
.id {
@apply font-bold;
margin-bottom: .8rem;
}
.deliveryStatus {
@apply font-bold text-white;
font-size: 1.2rem;
line-height: 2rem;
padding: 0 .8rem;
border-radius: 0.5rem;
width: fit-content;
&.waiting {
background-color: #D9A645;
}
&.delivering {
background-color: var(--info-dark);
}
&.delivered {
background-color: var(--primary);
}
}
}@import '../../../../../../styles/utilities';
.idAndStatus {
@apply items-center;
padding: 2.4rem 0 2.4rem 1rem;