From 9a385a3f14fba5bf89d77a46f97b1072b3c82437 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Mon, 13 Sep 2021 14:59:37 +0700 Subject: [PATCH 1/6] :ambulance: hotfix: Account Page --- .../AccountNavigation.module.scss | 51 ++++++++++--- .../AccountNavigation/AccountNavigation.tsx | 9 ++- .../AccountNavigationItem.module.scss | 17 ----- .../AccountNavigationItem.module.scss | 46 ++++++++++++ .../AccountNavigationItem.tsx | 0 .../account/AccountPage/AccountPage.tsx | 6 +- .../EditInfoModal/EditInfoModal.module.scss | 32 ++------ .../EditInfoModal/EditInfoModal.tsx | 74 ++++++++----------- .../OrderInformation.module.scss | 2 + .../OrderInformation/OrderInformation.tsx | 1 - .../IdAndStatus/IdAndStatus.module.scss | 37 ---------- 11 files changed, 131 insertions(+), 144 deletions(-) delete mode 100644 src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss create mode 100644 src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss rename src/components/modules/account/AccountNavigation/components/{ => AccountNavigationItem}/AccountNavigationItem.tsx (100%) diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss index 8bece6668..eb255a3b4 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.module.scss @@ -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; + } } } \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx index 013b4cbf1..a8da59211 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -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 }) } -
) } diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss deleted file mode 100644 index 10037cdc7..000000000 --- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.module.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss new file mode 100644 index 000000000..07952e6d8 --- /dev/null +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.tsx similarity index 100% rename from src/components/modules/account/AccountNavigation/components/AccountNavigationItem.tsx rename to src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.tsx diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index a5a0ef79d..3b0948c40 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -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); diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss index be1384ab7..fb67ab24c 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss @@ -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 { diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx index d2be8b1a1..5f88df01b 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -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 (
-
- {setName(e.target.value)}} /> +
+
-
- {setEmail(e.target.value)}} /> -
-
- {setAddress(e.target.value)}}/> -
-
- {setCity(e.target.value)}} /> -
-
-
- - - -
- - {setPostalCode(e.target.value)}} /> +
+ +
+ +
+
-
- {setPhoneNumber(e.target.value)}} /> +
+ +
+ + +
+
+ +
+ +
+ +
+
+ +
+
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss index 0096a67d7..cfa30c6ad 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.module.scss @@ -8,6 +8,8 @@ .tabs { margin-top: 3.2rem; + width: 100%; + border-bottom: black; .blank { margin-bottom: 2.4rem; diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx index 76985b9fd..98f305b9e 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -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) => { diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss index d50ecd115..bc0d692b3 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss @@ -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; From 24bacba766506c6d9eec5135eeddd8819e6b7251 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 14 Sep 2021 18:18:06 +0700 Subject: [PATCH 2/6] :sparkles: feat: change active tab from query in page account :%s --- .../AccountNavigation/AccountNavigation.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx index a8da59211..91f827636 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -3,17 +3,40 @@ import s from './AccountNavigation.module.scss' import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem' import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane' +import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" +import { useRouter } from "next/router" interface AccountNavigationProps { defaultActiveIndex: number; children: React.ReactNode } +const getTabIndex = (tab?: string): number => { + switch (tab) { + case ACCOUNT_TAB.CUSTOMER_INFO: + return 0; + case ACCOUNT_TAB.ORDER: + return 1; + case ACCOUNT_TAB.FAVOURITE: + return 2; + default: + return 0 + } +} + const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => { + const router = useRouter() + const [active, setActive] = useState(defaultActiveIndex) const sliderRef = useRef(null); const headerRef = useRef(null) + useEffect(() => { + const query = router.query[QUERY_KEY.TAB] as string + const index = getTabIndex(query) + setActive(index) + }, [router.query[QUERY_KEY.TAB]]) + const onTabClick = (index: number) => { setActive(index) } From eab45e229c0e4b37f59785c0a2c252cb06f498e8 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 18:38:33 +0700 Subject: [PATCH 3/6] :ambulance: fix Account Page --- next-env.d.ts | 3 + .../common/TabCommon/TabCommon.module.scss | 2 +- .../AccountPage/AccountPage.module.scss | 2 + .../account/AccountPage/AccountPage.tsx | 5 +- .../AccountInfomation.module.scss | 1 + .../AccountInfomation/AccountInfomation.tsx | 40 +++++----- .../EditInfoModal/EditInfoModal.module.scss | 27 +------ .../EditInfoModal/EditInfoModal.tsx | 6 +- .../FavouriteProducts.module.scss | 5 ++ .../FavouriteProducts/FavouriteProducts.tsx | 20 +++++ .../OrderInformation/OrderInformation.tsx | 74 +++++++++---------- .../DeliveryItem/DeliveryItem.module.scss | 3 +- .../IdAndStatus/IdAndStatus.module.scss | 6 +- .../components/IdAndStatus/IdAndStatus.tsx | 6 +- .../components/ReOrder/ReOrder.module.scss | 7 +- .../TotalPrice/TotalPrice.module.scss | 6 +- 16 files changed, 101 insertions(+), 112 deletions(-) create mode 100644 src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss create mode 100644 src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx diff --git a/next-env.d.ts b/next-env.d.ts index c6643fda1..9bc3dd46b 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,3 +1,6 @@ /// /// /// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss index d8b5d0f9a..ff90e8979 100644 --- a/src/components/common/TabCommon/TabCommon.module.scss +++ b/src/components/common/TabCommon/TabCommon.module.scss @@ -7,7 +7,7 @@ .tabList { @apply flex; position: relative; - border-bottom: 2px solid #FBFBFB; + border-bottom: 2px solid #EBEBEB; padding: 0.8rem 0; &.center{ margin: auto; diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss index 3f8307750..5eece6c80 100644 --- a/src/components/modules/account/AccountPage/AccountPage.module.scss +++ b/src/components/modules/account/AccountPage/AccountPage.module.scss @@ -6,6 +6,8 @@ margin-top: -3.2rem; padding-top: 3.2rem; padding-bottom: 3.2rem; + min-height: 70rem; + @screen md { padding-left: 3.2rem; diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index 3b0948c40..c463b056a 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -5,9 +5,12 @@ import { HeadingCommon, TabPane } from "src/components/common" import AccountNavigation from '../AccountNavigation/AccountNavigation' import AccountInfomation from "./components/AccountInfomation/AccountInfomation" +import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts" import OrderInfomation from './components/OrderInformation/OrderInformation' import EditInfoModal from './components/EditInfoModal/EditInfoModal' +import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; + const waiting = [ { id: "NO 123456", @@ -74,7 +77,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { - {/* */} +
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss index 442dae2eb..466dc3127 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss @@ -38,6 +38,7 @@ .shippingInfo { @apply heading-3 font-heading; + margin-bottom: .8rem; } .accountAddress { diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx index f24b36216..dac651fea 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -21,34 +21,30 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => { return (
- { -
-
- avatar -
+
+ avatar +
-
- {account.name} -
-
- {account.email} -
+
+ {account.name} +
+
+ {account.email} +
-
+
-
Shipping Infomation
+
Shipping Infomation
-
- {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`} -
+
+ {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`} +
-
- {account.phoneNumber} -
+
+ {account.phoneNumber} +
-
Edit
-
- } +
Edit
) } diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss index fb67ab24c..1215ac2a3 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss @@ -32,30 +32,7 @@ } .buttons { - @apply flex; - - .buttonCancel { - @apply bg-white text-center font-bold custom-border-radius-lg; - color: #141414; - border: 1px solid #141414; - padding: 1.6rem; - margin-right: 1.6rem; - width: 100%; - - &:hover { - @apply cursor-pointer; - } - } - - .buttonSave { - @apply text-center font-bold custom-border-radius-lg; - background-color: var(--primary); - color: white; - padding: 1.6rem; - width: 100%; - &:hover { - @apply cursor-pointer; - } - } + @apply grid grid-cols-2; + grid-gap: 1.6rem; } } \ 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 index 5f88df01b..4f1b8296b 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -1,7 +1,7 @@ import React from "react" import s from './EditInfoModal.module.scss' -import { ModalCommon, Inputcommon, SelectCommon } from '../../../../../common' +import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common' interface EditInfoModalProps { accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string}; @@ -58,8 +58,8 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
-
Cancel
-
Save
+ Cancel + Save
diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss new file mode 100644 index 000000000..e6eef3499 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss @@ -0,0 +1,5 @@ +@import '../../../../../../styles/utilities'; + +.favouriteProducts { + +} \ No newline at end of file diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx new file mode 100644 index 000000000..f88605242 --- /dev/null +++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx @@ -0,0 +1,20 @@ +import React from "react" +import s from './FavouriteProducts.module.scss' +import {ProductList} from '../../../../../common' +import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard' + + +interface FavouriteProductsProps { + products: ProductCardProps[]; +} + +const FavouriteProducts = ({ products } : FavouriteProductsProps) => { + + return ( +
+ +
+ ) +} + +export default FavouriteProducts \ 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 index 98f305b9e..211cebe3b 100644 --- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx +++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx @@ -16,48 +16,44 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr return (
- { -
-
Order Information
+
Order Information
-
- - -
- { - waiting.map((order, i) => { - return ( - - ) - }) - } - +
+ + +
+ { + waiting.map((order, i) => { + return ( + + ) + }) + } + - -
- { - delivering.map((order, i) => { - return ( - - ) - }) - } - + +
+ { + delivering.map((order, i) => { + return ( + + ) + }) + } + - -
- { - delivered.map((order, i) => { - return ( - - ) - }) - } - - -
-
- } + +
+ { + delivered.map((order, i) => { + return ( + + ) + }) + } + + +
) } diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss index b83b77fd3..44cc3a5c9 100644 --- a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss +++ b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss @@ -1,9 +1,8 @@ @import '../../../../styles/utilities'; .deliveryItem { - @apply flex bg-white items-center custom-border-radius; + @apply flex bg-white items-center shape-common; margin-bottom: 1.6rem; - border: 1px solid var(--primary) } .separator { diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss index bc0d692b3..5e8cbdd83 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss @@ -2,11 +2,7 @@ .idAndStatus { @apply items-center; - padding: 2.4rem 0 2.4rem 1rem; - - @screen md { - padding: 2.4rem 0 2.4rem 1.2rem; - } + padding: 2.4rem 0 2.4rem 1.2rem; @screen lg { padding: 2.4rem 0 2.4rem 2.4rem; diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx index 841dd530f..578c94f97 100644 --- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx +++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx @@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss' interface IdAndStatusProps { id?: string; - status: "waiting" | "delivering" | "delivered"; + status: "Waiting" | "Delivering" | "Delivered"; } -const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => { +const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => { return (
@@ -16,7 +16,7 @@ const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
{status} + })}> {status.charAt(0).toUpperCase() + status.slice(1)}
) diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss index b46b528e1..ce36380da 100644 --- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss +++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss @@ -3,14 +3,9 @@ .reOrder { @apply text-white custom-border-radius hidden font-bold; padding: .4rem .6rem; - margin-right: 1rem; + margin-right: 1.2rem; background-color: var(--primary); - @screen md { - padding: .4rem .6rem; - margin-right: 1.2rem; - } - @screen lg { padding: .8rem 1.2rem; margin-right: 2.4rem; diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss index 9a4f795b3..e987f30c1 100644 --- a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss +++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss @@ -2,11 +2,7 @@ .totalPrice { margin-left: auto; - margin-right: 1rem; - - @screen md { - margin-right: 1.2rem; - } + margin-right: 1.2rem; @screen lg { margin-right: 2.4rem; From c20150902e77cee4261bb707327714905e9a6a63 Mon Sep 17 00:00:00 2001 From: sonnguyenkieio Date: Tue, 14 Sep 2021 19:08:05 +0700 Subject: [PATCH 4/6] :ambulance: fix Account Page --- .../AccountNavigationItem.module.scss | 4 ++-- .../AccountInfomation.module.scss | 21 +++++++++++++------ .../EditInfoModal/EditInfoModal.module.scss | 1 + 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss index 07952e6d8..8725597cf 100644 --- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss @@ -1,7 +1,7 @@ @import '../../../../../../styles/utilities'; .accountNavigationItem { - @apply custom-border-radius; + @apply shape-common; width: fit-content; padding: 1.2rem 1.6rem 1.2rem 0rem; @@ -12,7 +12,7 @@ } &.active { - @apply custom-border-radius font-bold; + @apply shape-common font-bold; background-color: var(--primary); color: white; padding: 1.2rem 1.6rem 1.2rem 1.6rem; diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss index 466dc3127..6e8150f1b 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss @@ -1,13 +1,11 @@ @import '../../../../../../styles/utilities'; .accountInfomation { - @apply flex justify-center items-center; - text-align: center; + @apply block text-center; margin-top: 1.6rem; @screen md { - @apply block; - text-align: left; + @apply text-left; margin-top: 0; } @@ -32,8 +30,13 @@ border: 1px solid var(--disabled); max-width: 39.2rem; min-width: 30rem; + margin: auto; margin-top: 2.4rem; margin-bottom: 2.4rem; + + @screen md { + margin-left: 0; + } } .shippingInfo { @@ -42,8 +45,14 @@ } .accountAddress { - max-width: 31rem; - min-width: none; + margin: auto; + max-width: 28rem; + + @screen md { + max-width: 31rem; + min-width: none; + margin-left: 0; + } } .editInfoBtn { diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss index 1215ac2a3..20acd257b 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss @@ -17,6 +17,7 @@ @apply bg-white cursor-pointer; border: white; margin-right: 0.8rem; + height: fit-content; } .inputPostalCode { From cda96f21e3b7ac2960828c1e01e35e1ce6f3beb7 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 15 Sep 2021 09:35:04 +0700 Subject: [PATCH 5/6] :art: styles: change query tab logic in acc page :%s --- .../AccountNavigation/AccountNavigation.tsx | 26 ++---------- .../account/AccountPage/AccountPage.tsx | 41 +++++++++++++++++-- 2 files changed, 42 insertions(+), 25 deletions(-) diff --git a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx index 91f827636..4fd534148 100644 --- a/src/components/modules/account/AccountNavigation/AccountNavigation.tsx +++ b/src/components/modules/account/AccountNavigation/AccountNavigation.tsx @@ -1,41 +1,23 @@ import React, { useRef, useEffect, Children, ReactElement, PropsWithChildren, useState, cloneElement } from "react" import s from './AccountNavigation.module.scss' - import AccountNavigationItem from './components/AccountNavigationItem/AccountNavigationItem' import {TabPaneProps} from '../../../common/TabCommon/components/TabPane/TabPane' -import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" -import { useRouter } from "next/router" interface AccountNavigationProps { defaultActiveIndex: number; children: React.ReactNode } -const getTabIndex = (tab?: string): number => { - switch (tab) { - case ACCOUNT_TAB.CUSTOMER_INFO: - return 0; - case ACCOUNT_TAB.ORDER: - return 1; - case ACCOUNT_TAB.FAVOURITE: - return 2; - default: - return 0 - } -} - const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationProps) => { - const router = useRouter() - const [active, setActive] = useState(defaultActiveIndex) const sliderRef = useRef(null); const headerRef = useRef(null) useEffect(() => { - const query = router.query[QUERY_KEY.TAB] as string - const index = getTabIndex(query) - setActive(index) - }, [router.query[QUERY_KEY.TAB]]) + if (defaultActiveIndex !== undefined) { + setActive(defaultActiveIndex) + } + }, [defaultActiveIndex]) const onTabClick = (index: number) => { setActive(index) diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index c463b056a..47f5cf955 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import s from './AccountPage.module.scss' import { HeadingCommon, TabPane } from "src/components/common" @@ -10,12 +10,19 @@ import OrderInfomation from './components/OrderInformation/OrderInformation' import EditInfoModal from './components/EditInfoModal/EditInfoModal' import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; +import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" +import { useRouter } from "next/router" const waiting = [ { id: "NO 123456", products: ["Tomato", "Fish", "Pork", "Onion"], totalPrice : 1000 + }, + { + id: "NO 123457", + products: ["Tomato", "Fish", "Pork", "Onion"], + totalPrice : 1000 } ] @@ -24,6 +31,11 @@ const delivering = [ id: "NO 123456", products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], totalPrice : 1000 + }, + { + id: "NO 123457", + products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], + totalPrice : 1000 } ] @@ -32,6 +44,11 @@ const delivered = [ id: "NO 123456", products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], totalPrice : 1000 + }, + { + id: "NO 123457", + products: ["Tomato", "Fish", "Pork", "Onion", "Tomato", "Fish", "Pork", "Onion"], + totalPrice : 1000 } ] @@ -48,12 +65,30 @@ let account = { interface AccountPageProps { defaultActiveContent?: "info" | "orders" | "favorites" } +const getTabIndex = (tab?: string): number => { + switch (tab) { + case ACCOUNT_TAB.CUSTOMER_INFO: + return 0; + case ACCOUNT_TAB.ORDER: + return 1; + case ACCOUNT_TAB.FAVOURITE: + return 2; + default: + return 0 + } +} const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { - - const [activeTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) + const router = useRouter() + const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) const [modalVisible, setModalVisible] = useState(false); + useEffect(() => { + const query = router.query[QUERY_KEY.TAB] as string + const index = getTabIndex(query) + setActiveTab(index) + }, [router.query[QUERY_KEY.TAB]]) + function showModal() { setModalVisible(true); } From 407acb7415ccd322eb9856f054a2e3e3151c5997 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 15 Sep 2021 09:38:18 +0700 Subject: [PATCH 6/6] :art: styles: fix style active tab in acc page :%s --- .../AccountNavigationItem/AccountNavigationItem.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss index 8725597cf..6ae8f42e2 100644 --- a/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss +++ b/src/components/modules/account/AccountNavigation/components/AccountNavigationItem/AccountNavigationItem.module.scss @@ -1,7 +1,6 @@ @import '../../../../../../styles/utilities'; .accountNavigationItem { - @apply shape-common; width: fit-content; padding: 1.2rem 1.6rem 1.2rem 0rem; @@ -17,12 +16,13 @@ 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; + clip-path: none; } }