✨ feat: Account Page

src/components/modules/account/AccountPage/AccountPage.tsx

@@ -13,16 +13,6 @@ interface AccountPageProps {
 
 const AccountPage = ({} : AccountPageProps) => {
     const waiting = [
-        {
-            id: "NO 123456",
-            products: ["Tomato", "Fish", "Pork", "Onion"],
-            totalPrice : 1000
-        },
-        {
-            id: "NO 123456",
-            products: ["Tomato", "Fish", "Pork", "Onion"],
-            totalPrice : 1000
-        },
         {
             id: "NO 123456",
             products: ["Tomato", "Fish", "Pork", "Onion"],
@@ -31,16 +21,6 @@ const AccountPage = ({} : AccountPageProps) => {
     ]
 
     const delivering = [
-        {
-            id: "NO 123456",
-            products: ["Tomato", "Fish", "Pork", "Onion"],
-            totalPrice : 1000
-        },
-        {
-            id: "NO 123456",
-            products: ["Tomato", "Fish", "Pork", "Onion"],
-            totalPrice : 1000
-        },
         {
             id: "NO 123456",
             products: ["Tomato", "Fish", "Pork", "Onion"],
@@ -49,16 +29,6 @@ const AccountPage = ({} : AccountPageProps) => {
     ]
 
     const delivered = [
-        {
-            id: "NO 123456",
-            products: ["Tomato", "Fish", "Pork", "Onion"],
-            totalPrice : 1000
-        },
-        {
-            id: "NO 123456",
-            products: ["Tomato", "Fish", "Pork", "Onion"],
-            totalPrice : 1000
-        },
         {
             id: "NO 123456",
             products: ["Tomato", "Fish", "Pork", "Onion"],
@@ -66,10 +36,12 @@ const AccountPage = ({} : AccountPageProps) => {
         }
     ]
 
-    const account = {
+    let account = {
         name: "vu duong",
         email: "vuduong@gmail.com",
-        address: "234 Dien Bien Phu Bis, Dakao ward, District 1, HCMC",
+        address: "234 Dien Bien Phu Bis, Dakao ward",
+        state: "District 1",
+        city: "HCMC",
         postalCode: "700000",
         phoneNumber: "(+84) 937 937 195"
     }
@@ -117,7 +89,7 @@ const AccountPage = ({} : AccountPageProps) => {
                 </div>
                 
                 <div className={s.pageRight}>
-                    <AccountInfomation active={accountInfoActive} account={account} clickShowEditForm={showEditForm}  />
+                    <AccountInfomation active={accountInfoActive} account={account} showEditForm={showEditForm}  />
                     <OrderInfomation active={orderInfoActive} waiting={waiting} delivering={delivering} delivered={delivered} />
 
                     {/* Thieu cai favorite */}
@@ -126,7 +98,7 @@ const AccountPage = ({} : AccountPageProps) => {
 
                 
             </section>
-            <EditInfoModal closeModal={closeModal} visible={modalVisible} />
+            <EditInfoModal accountInfo={account} closeModal={closeModal} visible={modalVisible} />
         </>
     )
 }

src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx

@@ -5,12 +5,15 @@ import Image from "next/image"
 import avatar from '../../assets/avatar.png';
 
 interface AccountInfomationProps {
-    account: {name: string, email: string, address: string, postalCode: string, phoneNumber: string};
+    account: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
     active: boolean;
-    clickShowEditForm: ()=>void;
+    showEditForm: () => void;
 }
 
-const AccountInfomation = ({ account, active=false, clickShowEditForm } : AccountInfomationProps) => {
+const AccountInfomation = ({ account, active=false, showEditForm } : AccountInfomationProps) => {
+
+    // need to handle call back when edit account information 
+
     return (
         <section className={s.accountInfomation}>
             {
@@ -31,14 +34,14 @@ const AccountInfomation = ({ account, active=false, clickShowEditForm } : Accoun
                     <div className={s.shippingInfo}>Shipping Infomation</div>
 
                     <div className={s.accountAddress}>
-                        {account.address + `, ${account.postalCode}`}  
+                        {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`}  
                     </div>
 
                     <div className={s.accountPhoneNumber}>
                         {account.phoneNumber}  
                     </div>
 
-                    <div onClick={clickShowEditForm} className={s.editInfoBtn}>Edit</div>
+                    <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
                 </div>
             }
 

src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss

@@ -10,13 +10,28 @@
         padding: 1.6rem;
     }
 
-    .inputState {
+    .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;
+        }
     }
 
     .inputPostalCode {
@@ -43,9 +58,10 @@
             @apply bg-white text-center font-bold;
             color: #141414;
             border: 1px solid #141414;
-            border-radius: 2.5rem;
+            border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
             padding: 1.6rem;
             margin-right: 1.6rem;
+            width: 100%;
             
             &:hover {
                 @apply cursor-pointer;
@@ -56,9 +72,9 @@
             @apply text-center font-bold;
             background-color: var(--primary);
             color: white;
-            border-radius: 2.5rem;
+            border-radius: 40% 30% 35% 20%/ 65% 55% 45% 50%;
             padding: 1.6rem;
-
+            width: 100%;
             &:hover {
                 @apply cursor-pointer;
             }

src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx

@@ -1,15 +1,24 @@
 import classNames from "classnames"
-import React from "react"
+import React, { useState } from "react"
 import s from './EditInfoModal.module.scss'
 
 import {ModalCommon, MenuDropdown} from '../../../../../common'
 
 interface EditInfoModalProps {
+    accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
     visible: boolean;
     closeModal: () => void;
 }
 
-const EditInfoModal = ({ visible = false, closeModal }: 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 !!!");
@@ -17,28 +26,48 @@ const EditInfoModal = ({ visible = false, closeModal }: EditInfoModalProps) => {
         closeModal();
     }
 
-    const options = [
+    const states = [
-        {name: "hihi"},
+        {name: "D1", onClick: () => {setState("D1")}},
-        {name: "hihi"},
+        {name: "D2", onClick: () => {setState("D2")}},
-        {name: "hihi"}
+        {name: "D3", onClick: () => {setState("D3")}}
     ]
 
     return (
         <ModalCommon onClose={closeModal} visible={visible} title="Edit Infomation">
             <section className={s.editInfoModal}>
-                <div><input className={s.input} type="text" name="" placeholder="Name" /></div>
-                <div><input className={s.input} type="text" name="" placeholder="Email" /></div>
-                <div><input className={s.input} type="text" name="" placeholder="Address" /></div>
-                <div><input className={s.input} type="text" name="" placeholder="City" /></div>
-
                 <div>
-                    {/* <MenuDropdown options={options} isHasArrow={false} > */}
+                    <input className={s.input} type="text" name="name" placeholder="Name"
-                        <input className={s.inputState} type="text" name="" placeholder="State" />
+                        value={name} onChange={e => {setName(e.target.value)}} />
-                    {/* </MenuDropdown> */}
+                </div>
-                    <input className={s.inputPostalCode} type="text" name="" placeholder="hehe" />
+                <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>
                 
-                <div><input className={s.inputPhoneNumber} type="text" name="" placeholder="Phone number" /></div>
+                <div>
+                    <input className={s.inputPhoneNumber} type="text" name="phoneNumber" placeholder="Phone number"
+                        value={phoneNumber} onChange={e => {setPhoneNumber(e.target.value)}} />
+                </div>
 
                 <div className={s.buttons}>
                     <div onClick={closeModal} className={s.buttonCancel}>Cancel</div>

src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react"
+import React, {useRef, useState, RefObject} from "react"
 import s from './OrderInformation.module.scss'
 
 import { TabCommon } from '../../../../../common'
@@ -14,12 +14,31 @@ interface OrderInformationProps {
 }
 
 const OrderInformation = ({ waiting, delivering, delivered, active=true } : OrderInformationProps) => {
-    const [activeTabPane, setActiveTabPane] = useState("waiting");
 
-    function changeTabPane(tab: string) {
+    const [activeTab, setActiveTab] = useState(0);
-        setActiveTabPane(tab);
+    const [activeTabPane, setActiveTabPane] = useState("waiting");
+    const slider = useRef<HTMLDivElement>(null);
+
+    function slide(ref: RefObject<HTMLLIElement>) {
+        const width = ref.current.offsetWidth;
+        const left = ref.current.offsetLeft; 
+               
+        slider.current.style.width = (width-48).toString()+"px";
+        slider.current.style.left = left.toString()+"px";
     }
 
+    function onTabClick(tabIndex: number, tabPane: string) {
+        setActiveTab(tabIndex);
+        setActiveTabPane(tabPane);
+        slide(tabs[tabIndex].ref)
+    }
+
+    const tabs = [
+        {ref: useRef<HTMLLIElement>(null), tabName: "Wait for comfirmation", active: activeTab === 0, onClick: () => onTabClick(0, "waiting") },
+        {ref: useRef<HTMLLIElement>(null), tabName: "Delivering", active: activeTab === 1, onClick: () => onTabClick(1, "delivering") },
+        {ref: useRef<HTMLLIElement>(null), tabName: "Delivered", active: activeTab === 2, onClick: () => onTabClick(2, "delivered") },
+    ]
+
     return (
         <section className={s.orderInformation}>
             {
@@ -27,7 +46,7 @@ const OrderInformation = ({ waiting, delivering, delivered, active=true } : Orde
                     <div className={s.title}>Order Information</div>
 
                     <div className={s.tabs}>
-                        <TabCommon changeTabPane={changeTabPane} />
+                        <TabCommon tabs={tabs} defaultActiveTab={activeTab} sliderRef={slider} slideToTab={slide} />
         
                         <div className={s.tabPanes}>
                             <TabPane active={activeTabPane==="waiting" ? `active` : ""}>