mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
module account
This commit is contained in:
@@ -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 s from './AccountNavigation.module.scss'
|
||||||
|
|
||||||
import AccountNavigationItem from './components/AccountNavigationItem'
|
import AccountNavigationItem from './components/AccountNavigationItem'
|
||||||
|
|
||||||
interface AccountNavigationProps {
|
interface AccountNavigationProps {
|
||||||
setAccountActive: ()=>void;
|
items: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void}[];
|
||||||
setOrderActive: ()=>void;
|
defaultActiveIndex: number;
|
||||||
setFavActive: ()=>void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const AccountNavigation = ({ setAccountActive, setOrderActive, setFavActive } : AccountNavigationProps) => {
|
const AccountNavigation = ({ items, defaultActiveIndex } : AccountNavigationProps) => {
|
||||||
const active = "active", unActive = "";
|
|
||||||
|
|
||||||
const [item1Active, setItem1Active] = useState(unActive);
|
const sliderRef = useRef<HTMLDivElement>(null);
|
||||||
const [item2Active, setItem2Active] = useState(active);
|
|
||||||
const [item3Active, setItem3Active] = useState(unActive);
|
|
||||||
|
|
||||||
const item1 = useRef<HTMLDivElement>(null);
|
function slide(index: number) {
|
||||||
const item2 = useRef<HTMLDivElement>(null);
|
const previousItem = items[index].ref.current;
|
||||||
const item3 = useRef<HTMLDivElement>(null);
|
const slider = sliderRef.current;
|
||||||
const slider = useRef<HTMLDivElement>(null);
|
if (previousItem && slider) {
|
||||||
|
const top = previousItem.offsetTop;
|
||||||
function slide(ref: RefObject<HTMLDivElement>) {
|
slider.style.top = top.toString()+"px";
|
||||||
const top = ref.current.offsetTop;
|
}
|
||||||
slider.current.style.top = top.toString()+"px";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleItem1():void {
|
const handleClick = (item: {ref: RefObject<HTMLDivElement>, active: boolean, itemName: string, onClick: (tabIndex: number)=>void},
|
||||||
setItem1Active(active);
|
index: number) => {
|
||||||
setAccountActive();
|
slide(index);
|
||||||
|
item.onClick(index);
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
slide(item2);
|
slide(defaultActiveIndex);
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={s.accountNavigation}>
|
<section className={s.accountNavigation}>
|
||||||
<div ref={item1}>
|
{
|
||||||
<AccountNavigationItem onClick={toggleItem1} active={item1Active}>Customer Information</AccountNavigationItem>
|
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>
|
||||||
<div ref={item2}>
|
)
|
||||||
<AccountNavigationItem onClick={toggleItem2} active={item2Active}>Your Orders</AccountNavigationItem>
|
})
|
||||||
</div>
|
}
|
||||||
<div ref={item3}>
|
<div ref={sliderRef} className={s.slider}></div>
|
||||||
<AccountNavigationItem onClick={toggleItem3} active={item3Active}>Favourites</AccountNavigationItem>
|
|
||||||
</div>
|
|
||||||
<div ref={slider} className={s.slider}></div>
|
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@@ -13,6 +13,5 @@
|
|||||||
&.active {
|
&.active {
|
||||||
background-color: #FBFBFB;
|
background-color: #FBFBFB;
|
||||||
border-radius: 0 1.6rem 1.6rem 0;
|
border-radius: 0 1.6rem 1.6rem 0;
|
||||||
// border-left: 2px solid var(--primary);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
@@ -1,18 +1,17 @@
|
|||||||
import React, { RefObject } from "react";
|
import React from "react";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import s from './AccountNavigationItem.module.scss'
|
import s from './AccountNavigationItem.module.scss'
|
||||||
|
|
||||||
interface AccountNavigationItemProps {
|
interface AccountNavigationItemProps {
|
||||||
children?: string;
|
children?: string;
|
||||||
active?: string;
|
active?: boolean;
|
||||||
target?: string;
|
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AccountNavigationItem = ({ children, active="", onClick } : AccountNavigationItemProps) => {
|
const AccountNavigationItem = ({ children, active, onClick } : AccountNavigationItemProps) => {
|
||||||
return (
|
return (
|
||||||
<div onClick={onClick} className={classNames(s.accountNavigationItem, {
|
<div onClick={onClick} className={classNames(s.accountNavigationItem, {
|
||||||
[s[active]]:active
|
[s.active]:active
|
||||||
})}>
|
})}>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
@@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from "react"
|
import React, { useRef, useState } from "react"
|
||||||
import s from './AccountPage.module.scss'
|
import s from './AccountPage.module.scss'
|
||||||
|
|
||||||
import AccountNavigation from '../AccountNavigation/AccountNavigation'
|
import AccountNavigation from '../AccountNavigation/AccountNavigation'
|
||||||
@@ -7,11 +7,6 @@ import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
|
|||||||
import OrderInfomation from './components/OrderInformation/OrderInformation'
|
import OrderInfomation from './components/OrderInformation/OrderInformation'
|
||||||
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
|
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
|
||||||
|
|
||||||
interface AccountPageProps {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const AccountPage = ({} : AccountPageProps) => {
|
|
||||||
const waiting = [
|
const waiting = [
|
||||||
{
|
{
|
||||||
id: "NO 123456",
|
id: "NO 123456",
|
||||||
@@ -46,31 +41,16 @@ const AccountPage = ({} : AccountPageProps) => {
|
|||||||
phoneNumber: "(+84) 937 937 195"
|
phoneNumber: "(+84) 937 937 195"
|
||||||
}
|
}
|
||||||
|
|
||||||
const [accountInfoActive, setAccountInfoActive] = useState(false);
|
interface AccountPageProps {
|
||||||
const [orderInfoActive, setOrderInfoActive] = useState(true);
|
defaultActiveContent?: "info" | "orders" | "favorites"
|
||||||
const [favoritesActive, setFavoritesActive] = useState(false);
|
|
||||||
|
|
||||||
function accountActive() {
|
|
||||||
setAccountInfoActive(true);
|
|
||||||
setOrderInfoActive(false);
|
|
||||||
setFavoritesActive(false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function orderActive() {
|
const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
|
||||||
setAccountInfoActive(false);
|
|
||||||
setOrderInfoActive(true);
|
|
||||||
setFavoritesActive(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function favActive() {
|
|
||||||
setAccountInfoActive(false);
|
|
||||||
setOrderInfoActive(false);
|
|
||||||
setFavoritesActive(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState(defaultActiveContent==="info"? 0 : defaultActiveContent==="orders"? 1 : 2)
|
||||||
const [modalVisible, setModalVisible] = useState(false);
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
|
|
||||||
function showEditForm() {
|
function showModal() {
|
||||||
setModalVisible(true);
|
setModalVisible(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,19 +58,29 @@ const AccountPage = ({} : AccountPageProps) => {
|
|||||||
setModalVisible(false);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<section className={s.accountPage}>
|
<section className={s.accountPage}>
|
||||||
<div className={s.pageLeft}>
|
<div className={s.pageLeft}>
|
||||||
<HeadingCommon>Account</HeadingCommon>
|
<HeadingCommon>Account</HeadingCommon>
|
||||||
<div className={s.accNavi}>
|
<div className={s.accNavi}>
|
||||||
<AccountNavigation setAccountActive={accountActive} setOrderActive={orderActive} setFavActive={favActive} />
|
<AccountNavigation items={accNavItems} defaultActiveIndex={activeTab} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={s.pageRight}>
|
<div className={s.pageRight}>
|
||||||
<AccountInfomation active={accountInfoActive} account={account} showEditForm={showEditForm} />
|
<AccountInfomation active={activeTab === 0} account={account} onClick={showModal} />
|
||||||
<OrderInfomation active={orderInfoActive} waiting={waiting} delivering={delivering} delivered={delivered} />
|
<OrderInfomation active={activeTab === 1} waiting={waiting} delivering={delivering} delivered={delivered} />
|
||||||
|
|
||||||
{/* Thieu cai favorite */}
|
{/* Thieu cai favorite */}
|
||||||
{/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}
|
{/* <FavoriteProduct active={favoritesActive} favProducts={favProducts} /> */}
|
||||||
|
@@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from "react"
|
import React from "react"
|
||||||
import s from './AccountInfomation.module.scss'
|
import s from './AccountInfomation.module.scss'
|
||||||
|
|
||||||
import Image from "next/image"
|
import Image from "next/image"
|
||||||
@@ -7,13 +7,15 @@ import avatar from '../../assets/avatar.png';
|
|||||||
interface AccountInfomationProps {
|
interface AccountInfomationProps {
|
||||||
account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
|
account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
|
||||||
active: boolean;
|
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
|
// need to handle call back when edit account information
|
||||||
|
|
||||||
|
const showEditForm = () => onClick()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={s.accountInfomation}>
|
<section className={s.accountInfomation}>
|
||||||
{
|
{
|
||||||
|
Reference in New Issue
Block a user