From efe6ecf00530e5aef4980028cea8071b552983d0 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 7 Sep 2021 10:25:24 +0700 Subject: [PATCH] :sparkles: feat: Account Page --- .../AccountPage/AccountPage.module.scss | 22 +++ .../account/AccountPage/AccountPage.tsx | 134 ++++++++++++++++++ .../account/AccountPage/assets/avatar.png | Bin 0 -> 4653 bytes .../AccountInfomation.module.scss | 49 +++++++ .../AccountInfomation/AccountInfomation.tsx | 50 +++++++ .../EditInfoModal/EditInfoModal.module.scss | 67 +++++++++ .../EditInfoModal/EditInfoModal.tsx | 52 +++++++ .../OrderInformation.module.scss | 16 +++ .../OrderInformation/OrderInformation.tsx | 68 +++++++++ .../components/TabPane/TabPane.module.scss | 23 +++ .../components/TabPane/TabPane.tsx | 20 +++ 11 files changed, 501 insertions(+) create mode 100644 src/components/modules/account/AccountPage/AccountPage.module.scss create mode 100644 src/components/modules/account/AccountPage/AccountPage.tsx create mode 100644 src/components/modules/account/AccountPage/assets/avatar.png create mode 100644 src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss create mode 100644 src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx create mode 100644 src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss create mode 100644 src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx create mode 100644 src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss create mode 100644 src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx create mode 100644 src/components/modules/account/AccountPage/components/TabPane/TabPane.module.scss create mode 100644 src/components/modules/account/AccountPage/components/TabPane/TabPane.tsx diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss new file mode 100644 index 000000000..a3e3f1525 --- /dev/null +++ b/src/components/modules/account/AccountPage/AccountPage.module.scss @@ -0,0 +1,22 @@ +@import '../../../../styles/utilities'; + +.accountPage { + @apply flex spacing-horizontal; + background-color: #F5F4F2; + margin-top: -3.2rem; + padding-bottom: 3.2rem; + + .pageLeft { + padding-top: 5.6rem; + margin-right: 12.4rem; + + .accNavi{ + margin-top: 3.8rem; + } + } + + .pageRight { + padding-top: 5.6rem; + width: 100%; + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx new file mode 100644 index 000000000..5f3749a28 --- /dev/null +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -0,0 +1,134 @@ +import React, { useEffect, useState } from "react" +import s from './AccountPage.module.scss' + +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' + +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"], + totalPrice : 1000 + } + ] + + 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"], + totalPrice : 1000 + } + ] + + 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"], + totalPrice : 1000 + } + ] + + const account = { + name: "vu duong", + email: "vuduong@gmail.com", + address: "234 Dien Bien Phu Bis, Dakao ward, District 1, 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); + } + + const [modalVisible, setModalVisible] = useState(false); + + function showEditForm() { + setModalVisible(true); + } + + function closeModal() { + setModalVisible(false); + } + + return ( + <> +
+
+ Account +
+ +
+
+ +
+ + + + {/* Thieu cai favorite */} + {/* */} +
+ + +
+ + + ) +} + +export default AccountPage \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/assets/avatar.png b/src/components/modules/account/AccountPage/assets/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..b12cabed409308fc3b03e6be2642524c1b886bb3 GIT binary patch literal 4653 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 literal 0 HcmV?d00001 diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss new file mode 100644 index 000000000..6e5e0c325 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss @@ -0,0 +1,49 @@ +@import '../../../../../../styles/utilities'; + +.accountInfomation { + transition: opacity 6s; + + .avatar { + height: 22rem; + width: 22rem; + border-radius: 50%; + margin-bottom: 4rem; + } + + .accountName { + @apply heading-3 font-heading; + } + + .horizontalSeparator{ + border: 1px solid var(--disabled); + max-width: 39.2rem; + min-width: 30rem; + margin-top: 2.4rem; + margin-bottom: 2.4rem; + } + + .shippingInfo { + @apply heading-3 font-heading; + } + + .accountAddress { + max-width: 31rem; + min-width: none; + } + + .editInfoBtn { + @apply text-center font-bold; + margin-top: 2.4rem; + margin-bottom: 2.4rem; + padding: .8rem 1.6rem; + color: #141414; + border: 1px solid #141414; + max-width: 8.8rem; + border-radius: 25%; + + &:hover { + @apply cursor-pointer; + background-color: #FBFBFB; + } + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx new file mode 100644 index 000000000..b2961c8df --- /dev/null +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -0,0 +1,50 @@ +import React, { useState } from "react" +import s from './AccountInfomation.module.scss' + +import Image from "next/image" +import avatar from '../../assets/avatar.png'; + +interface AccountInfomationProps { + account: {name: string, email: string, address: string, postalCode: string, phoneNumber: string}; + active: boolean; + clickShowEditForm: ()=>void; +} + +const AccountInfomation = ({ account, active=false, clickShowEditForm } : AccountInfomationProps) => { + return ( +
+ { + active &&
+
+ avatar +
+ +
+ {account.name} +
+
+ {account.email} +
+ +
+ +
Shipping Infomation
+ +
+ {account.address + `, ${account.postalCode}`} +
+ +
+ {account.phoneNumber} +
+ +
Edit
+
+ } + + +
+ ) +} + +export default AccountInfomation \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss new file mode 100644 index 000000000..e9431f32a --- /dev/null +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss @@ -0,0 +1,67 @@ +@import '../../../../../../styles/utilities'; + +.editInfoModal { + .input { + @apply bg-white; + margin-bottom: 1.6rem; + width: 100%; + border: 2px solid #EBEBEB; + border-radius: .8rem; + padding: 1.6rem; + } + + .inputState { + @apply bg-white; + margin-bottom: 1.6rem; + margin-right: 1.6rem; + border: 2px solid #EBEBEB; + border-radius: .8rem; + padding: 1.6rem; + } + + .inputPostalCode { + @apply bg-white; + margin-bottom: 1.6rem; + border: 2px solid #EBEBEB; + border-radius: .8rem; + padding: 1.6rem; + } + + .inputPhoneNumber { + @apply bg-white; + margin-bottom: 4rem; + width: 100%; + border: 2px solid #EBEBEB; + border-radius: .8rem; + padding: 1.6rem; + } + + .buttons { + @apply flex; + + .buttonCancel { + @apply bg-white text-center font-bold; + color: #141414; + border: 1px solid #141414; + border-radius: 2.5rem; + padding: 1.6rem; + margin-right: 1.6rem; + + &:hover { + @apply cursor-pointer; + } + } + + .buttonSave { + @apply text-center font-bold; + background-color: var(--primary); + color: white; + border-radius: 2.5rem; + padding: 1.6rem; + + &:hover { + @apply cursor-pointer; + } + } + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx new file mode 100644 index 000000000..2d593c97e --- /dev/null +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -0,0 +1,52 @@ +import classNames from "classnames" +import React from "react" +import s from './EditInfoModal.module.scss' + +import {ModalCommon, MenuDropdown} from '../../../../../common' + +interface EditInfoModalProps { + visible: boolean; + closeModal: () => void; +} + +const EditInfoModal = ({ visible = false, closeModal }: EditInfoModalProps) => { + + function saveInfo() { + console.log("saved !!!"); + + closeModal(); + } + + const options = [ + {name: "hihi"}, + {name: "hihi"}, + {name: "hihi"} + ] + + return ( + +
+
+
+
+
+ +
+ {/* */} + + {/* */} + +
+ +
+ +
+
Cancel
+
Save
+
+
+ + ) +} + +export default EditInfoModal \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss new file mode 100644 index 000000000..90b0450bf --- /dev/null +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss @@ -0,0 +1,16 @@ +@import '../../../../../../styles/utilities'; + +.orderInformation { + .title { + @apply heading-3 font-heading; + margin-top: 1.6rem; + } + + .tabs { + margin-top: 3.2rem; + } + + .tabPanes { + margin-top: 2.4rem; + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx new file mode 100644 index 000000000..3dce97570 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -0,0 +1,68 @@ +import React, {useState} from "react" +import s from './OrderInformation.module.scss' + +import { TabCommon } from '../../../../../common' +import TabPane from '../../components/TabPane/TabPane' +import DeliveryItem from '../../../DeliveryItem/DeliveryItem' + + +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, active=true } : OrderInformationProps) => { + const [activeTabPane, setActiveTabPane] = useState("waiting"); + + function changeTabPane(tab: string) { + setActiveTabPane(tab); + } + + return ( +
+ { + active &&
+
Order Information
+ +
+ + +
+ + { + waiting.map((order, i) => { + return ( + + ) + }) + } + + + { + delivering.map((order, i) => { + return ( + + ) + }) + } + + + { + delivered.map((order, i) => { + return ( + + ) + }) + } + +
+
+
+ } +
+ ) +} + +export default OrderInformation \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/TabPane/TabPane.module.scss b/src/components/modules/account/AccountPage/components/TabPane/TabPane.module.scss new file mode 100644 index 000000000..6904a6acb --- /dev/null +++ b/src/components/modules/account/AccountPage/components/TabPane/TabPane.module.scss @@ -0,0 +1,23 @@ +@import '../../../../../../styles/utilities'; + +.tabPane { + @apply hidden; + animation-duration: 0.6s; + animation-name: appear; + @keyframes appear { + from { + margin-left: 100%; + width: 200%; + } + + to { + margin-left: 0%; + width: 100%; + } + } + + + &.active { + @apply block; + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/TabPane/TabPane.tsx b/src/components/modules/account/AccountPage/components/TabPane/TabPane.tsx new file mode 100644 index 000000000..3b39291b7 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/TabPane/TabPane.tsx @@ -0,0 +1,20 @@ +import classNames from "classnames" +import React from "react" +import s from './TabPane.module.scss' + +interface TabPaneProps { + active: string; + children?: React.ReactNode; +} + +const TabPane = ({ active="", children } : TabPaneProps) => { + return ( +
+ {children} +
+ ) +} + +export default TabPane \ No newline at end of file