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

module account

Browse Source
This commit is contained in:
sonnguyenkieio 2021-09-09 14:28:25 +07:00
parent 5248adcd95
commit 6895539540
5 changed files with 89 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,72 +1,49 @@
import React, { useState, useRef, RefObject, useEffect } from "react"
import React, { useRef, RefObject, useEffect } from "react"
import s from './AccountNavigation.module.scss'
import AccountNavigationItem from './components/AccountNavigationItem'
interface AccountNavigationProps {
setAccountActive: ()=>void;
setOrderActive: ()=>void;
setFavActive: ()=>void;
items: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void}[];
defaultActiveIndex: number;
}
const AccountNavigation = ({ setAccountActive, setOrderActive, setFavActive } : AccountNavigationProps) => {
const active = "active", unActive = "";
const AccountNavigation = ({ items, defaultActiveIndex } : AccountNavigationProps) => {
const [item1Active, setItem1Active] = useState(unActive);
const [item2Active, setItem2Active] = useState(active);
const [item3Active, setItem3Active] = useState(unActive);
const sliderRef = useRef<HTMLDivElement>(null);
const item1 = useRef<HTMLDivElement>(null);
const item2 = useRef<HTMLDivElement>(null);
const item3 = useRef<HTMLDivElement>(null);
const slider = useRef<HTMLDivElement>(null);
function slide(ref: RefObject<HTMLDivElement>) {
const top = ref.current.offsetTop;
slider.current.style.top = top.toString()+"px";
function slide(index: number) {
const previousItem = items[index].ref.current;
const slider = sliderRef.current;
if (previousItem && slider) {
const top = previousItem.offsetTop;
slider.style.top = top.toString()+"px";
}
}
function toggleItem1():void {
setItem1Active(active);
setAccountActive();
setItem2Active(unActive);
setItem3Active(unActive);
slide(item1);
}
function toggleItem2():void {
setItem2Active(active);
setOrderActive();
setItem1Active(unActive);
setItem3Active(unActive);
slide(item2);
}
function toggleItem3():void {
setItem3Active(active);
setFavActive();
setItem1Active(unActive);
setItem2Active(unActive);
slide(item3);
const handleClick = (item: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void},
index: number) => {
slide(index);
item.onClick(index);
}
useEffect(() => {
slide(item2);
slide(defaultActiveIndex);
}, [])
return (
<section className={s.accountNavigation}>
<div ref={item1}>
<AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
</div>
<div ref={item2}>
<AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
</div>
<div ref={item3}>
<AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
</div>
<div ref={slider} className={s.slider}></div>
{
items.map((item, i) => {
return (
<div key={item.itemName} ref={item.ref}>
<AccountNavigationItem onClick={() => {handleClick(item, i)}} active={item.active}>{item.itemName}</AccountNavigationItem>
</div>
)
})
}
<div ref={sliderRef} className={s.slider}></div>
</section>
)
}

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

@ -13,6 +13,5 @@
&.active {
background-color: #FBFBFB;
border-radius: 0 1.6rem 1.6rem 0;
// border-left: 2px solid var(--primary);
}
}

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

@ -1,18 +1,17 @@
import React, { RefObject } from "react";
import React from "react";
import classNames from "classnames";
import s from './AccountNavigationItem.module.scss'
interface AccountNavigationItemProps {
children?: string;
active?: string;
target?: string;
active?: boolean;
onClick: () => void;
}
const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
const AccountNavigationItem = ({ children, active, onClick } : AccountNavigationItemProps) => {
return (
<div onClick={onClick} className={classNames(s.accountNavigationItem, {
[s[active]]:active
[s.active]:active
})}>
{children}
</div>

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"
import React, { useRef, useState } from "react"
import s from './AccountPage.module.scss'
import AccountNavigation from '../AccountNavigation/AccountNavigation'
@ -7,70 +7,50 @@ import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
import OrderInfomation from './components/OrderInformation/OrderInformation'
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
interface AccountPageProps {
const waiting = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
const delivering = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
const delivered = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
let account = {
name: "vu duong",
email: "vuduong@gmail.com",
address: "234 Dien Bien Phu Bis, Dakao ward",
state: "District 1",
city: "HCMC",
postalCode: "700000",
phoneNumber: "(+84) 937 937 195"
}
const AccountPage = ({} : AccountPageProps) => {
const waiting = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
const delivering = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
const delivered = [
{
id: "NO 123456",
products: ["Tomato", "Fish", "Pork", "Onion"],
totalPrice : 1000
}
]
let account = {
name: "vu duong",
email: "vuduong@gmail.com",
address: "234 Dien Bien Phu Bis, Dakao ward",
state: "District 1",
city: "HCMC",
postalCode: "700000",
phoneNumber: "(+84) 937 937 195"
}
const [accountInfoActive, setAccountInfoActive] = useState(false);
const [orderInfoActive, setOrderInfoActive] = useState(true);
const [favoritesActive, setFavoritesActive] = useState(false);
function accountActive() {
setAccountInfoActive(true);
setOrderInfoActive(false);
setFavoritesActive(false);
}
function orderActive() {
setAccountInfoActive(false);
setOrderInfoActive(true);
setFavoritesActive(false);
}
function favActive() {
setAccountInfoActive(false);
setOrderInfoActive(false);
setFavoritesActive(true);
}
interface AccountPageProps {
defaultActiveContent?: "info" | "orders" | "favorites"
}
const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
const [activeTab, setActiveTab] = useState(defaultActiveContent==="info"? 0 : defaultActiveContent==="orders"? 1 : 2)
const [modalVisible, setModalVisible] = useState(false);
function showEditForm() {
function showModal() {
setModalVisible(true);
}
@ -78,19 +58,29 @@ const AccountPage = ({} : AccountPageProps) => {
setModalVisible(false);
}
const changeTab = (tabIndex: number) => {
setActiveTab(tabIndex);
}
const accNavItems = [
{ref: useRef<HTMLDivElement>(null), active: activeTab===0, itemName: "Customer Information", onClick: changeTab},
{ref: useRef<HTMLDivElement>(null), active: activeTab===1, itemName: "Your Orders", onClick: changeTab},
{ref: useRef<HTMLDivElement>(null), active: activeTab===2, itemName: "Favorites", onClick: changeTab}
]
return (
<>
<section className={s.accountPage}>
<div className={s.pageLeft}>
<HeadingCommon>Account</HeadingCommon>
<div className={s.accNavi}>
<AccountNavigation setAccountActive={accountActive} setOrderActive={orderActive} setFavActive={favActive} />
<AccountNavigation items={accNavItems} defaultActiveIndex={activeTab} />
</div>
</div>
<div className={s.pageRight}>
<AccountInfomation active={accountInfoActive} account={account} showEditForm={showEditForm} />
<OrderInfomation active={orderInfoActive} waiting={waiting} delivering={delivering} delivered={delivered} />
<AccountInfomation active={activeTab === 0} account={account} onClick={showModal} />
<OrderInfomation active={activeTab === 1} waiting={waiting} delivering={delivering} delivered={delivered} />
{/* Thieu cai favorite */}
{/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}

8
src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"
import React from "react"
import s from './AccountInfomation.module.scss'
import Image from "next/image"
@ -7,13 +7,15 @@ import avatar from '../../assets/avatar.png';
interface AccountInfomationProps {
account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
active: boolean;
showEditForm: () => void;
onClick: () => void;
}
const AccountInfomation = ({ account, active=false, showEditForm } : AccountInfomationProps) => {
const AccountInfomation = ({ account, active=false, onClick } : AccountInfomationProps) => {
// need to handle call back when edit account information
const showEditForm = () => onClick()
return (
<section className={s.accountInfomation}>
{