mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
Merge pull request #44 from KieIO/m5-sonnguyen-hotfix
🚑 hotfix: Account Page
This commit is contained in:
lytrankieio123
GitHub
commit
b90d7b6e4b
3
next-env.d.ts
vendored
3
next-env.d.ts
vendored
@ -1,3 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,27 +1,54 @@
|
||||
@import '../../../../styles/utilities';
|
||||
|
||||
.accountNavigation {
|
||||
@apply flex;
|
||||
@apply relative;
|
||||
width: 100%;
|
||||
|
||||
@screen md {
|
||||
@apply flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider {
|
||||
@apply hidden;
|
||||
|
||||
@screen md {
|
||||
@apply inline-block;
|
||||
width: 0.2rem;
|
||||
height: 4.8rem;
|
||||
border-radius: 3px;
|
||||
background-color: var(--primary);
|
||||
position: absolute;
|
||||
left: 11.2rem;
|
||||
left: 0;
|
||||
top: 450;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.tabList {
|
||||
margin-top: 3.8rem;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
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 {
|
||||
@ -14,6 +13,12 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const headerRef = useRef<HTMLUListElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (defaultActiveIndex !== undefined) {
|
||||
setActive(defaultActiveIndex)
|
||||
}
|
||||
}, [defaultActiveIndex])
|
||||
|
||||
const onTabClick = (index: number) => {
|
||||
setActive(index)
|
||||
}
|
||||
@ -21,10 +26,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 +70,6 @@ const AccountNavigation = ({ defaultActiveIndex, children } : AccountNavigationP
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div ref={slider} className={s.slider}></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
@import '../../../../../../styles/utilities';
|
||||
|
||||
.accountNavigationItem {
|
||||
width: fit-content;
|
||||
padding: 1.2rem 1.6rem 1.2rem 0rem;
|
||||
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
&:hover {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply shape-common 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;
|
||||
clip-path: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -1,18 +1,28 @@
|
||||
import React, { useState } from "react"
|
||||
import React, { useEffect, 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 FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
|
||||
import OrderInfomation from './components/OrderInformation/OrderInformation'
|
||||
import EditInfoModal from './components/EditInfoModal/EditInfoModal'
|
||||
import TabPane from "src/components/common/TabCommon/components/TabPane/TabPane"
|
||||
|
||||
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
|
||||
}
|
||||
]
|
||||
|
||||
@ -21,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
|
||||
}
|
||||
]
|
||||
|
||||
@ -29,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
|
||||
}
|
||||
]
|
||||
|
||||
@ -45,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 AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
|
||||
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);
|
||||
}
|
||||
@ -74,7 +112,7 @@ const AccountPage = ({defaultActiveContent="orders"} : AccountPageProps) => {
|
||||
<OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
|
||||
</TabPane>
|
||||
<TabPane tabName="Favourite">
|
||||
{/* <FavoriteProduct active={activeTab === 2} favProducts={favProducts} /> */}
|
||||
<FavouriteProducts products={PRODUCT_CART_DATA_TEST} />
|
||||
</TabPane>
|
||||
</AccountNavigation>
|
||||
</section>
|
||||
|
||||
@ -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,17 +30,29 @@
|
||||
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 {
|
||||
@apply heading-3 font-heading;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
|
||||
.accountAddress {
|
||||
margin: auto;
|
||||
max-width: 28rem;
|
||||
|
||||
@screen md {
|
||||
max-width: 31rem;
|
||||
min-width: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.editInfoBtn {
|
||||
|
||||
@ -21,8 +21,6 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
|
||||
|
||||
return (
|
||||
<section className={s.accountInfomation}>
|
||||
{
|
||||
<div>
|
||||
<div className={s.avatar}>
|
||||
<Image src={avatar} alt="avatar" />
|
||||
</div>
|
||||
@ -47,8 +45,6 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
|
||||
</div>
|
||||
|
||||
<div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -5,77 +5,35 @@
|
||||
@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;
|
||||
}
|
||||
margin-right: 0.8rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -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, ButtonCommon } 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,51 +18,48 @@ 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 (
|
||||
<ModalCommon onClose={closeModal} visible={visible} title="Edit Infomation">
|
||||
<section className={s.editInfoModal}>
|
||||
<div>
|
||||
<input className={s.input} type="text" name="name" placeholder="Name"
|
||||
value={name} onChange={e => {setName(e.target.value)}} />
|
||||
<div className={s.input}>
|
||||
<Inputcommon placeholder="Name" value={accountInfo.name} type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<input className={s.inputDisable} type="text" name="email" placeholder="Email"
|
||||
value={email} onChange={e => {setEmail(e.target.value)}} />
|
||||
|
||||
<div className={s.inputDisable}>
|
||||
<Inputcommon placeholder="Email" value={accountInfo.email} type="email" />
|
||||
</div>
|
||||
<div>
|
||||
<input className={s.input} type="text" name="address" placeholder="Address"
|
||||
value={address} onChange={e => {setAddress(e.target.value)}}/>
|
||||
|
||||
<div className={s.input}>
|
||||
<Inputcommon placeholder="Address" value={accountInfo.address} type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<input className={s.input} type="text" name="city" placeholder="City"
|
||||
value={city} onChange={e => {setCity(e.target.value)}} />
|
||||
|
||||
<div className={s.input}>
|
||||
<Inputcommon placeholder="City" value={accountInfo.city} type="text" />
|
||||
</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 className={s.inputState}>
|
||||
<SelectCommon type="custom" placeholder="State" option={states} />
|
||||
</div>
|
||||
|
||||
<input className={s.inputPostalCode} type="text" name="postalCode" placeholder="Postal code"
|
||||
value={postalCode} onChange={e => {setPostalCode(e.target.value)}} />
|
||||
<div className={s.inputPostalCode}>
|
||||
<Inputcommon placeholder="Postal code" value={accountInfo.postalCode} type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input className={s.inputPhoneNumber} type="text" name="phoneNumber" placeholder="Phone number"
|
||||
value={phoneNumber} onChange={e => {setPhoneNumber(e.target.value)}} />
|
||||
<div className={s.inputPhoneNumber}>
|
||||
<Inputcommon placeholder="Phone number" value={accountInfo.phoneNumber} type="text" />
|
||||
</div>
|
||||
|
||||
<div className={s.buttons}>
|
||||
<div onClick={closeModal} className={s.buttonCancel}>Cancel</div>
|
||||
<div onClick={saveInfo} className={s.buttonSave}>Save</div>
|
||||
<ButtonCommon onClick={closeModal} type="light" size="large" >Cancel</ButtonCommon>
|
||||
<ButtonCommon onClick={saveInfo} size="large" >Save</ButtonCommon>
|
||||
</div>
|
||||
</section>
|
||||
</ModalCommon>
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
@import '../../../../../../styles/utilities';
|
||||
|
||||
.favouriteProducts {
|
||||
|
||||
}
|
||||
@ -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 (
|
||||
<section className={s.favouriteProducts}>
|
||||
<ProductList data={products} />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FavouriteProducts
|
||||
@ -8,6 +8,8 @@
|
||||
|
||||
.tabs {
|
||||
margin-top: 3.2rem;
|
||||
width: 100%;
|
||||
border-bottom: black;
|
||||
|
||||
.blank {
|
||||
margin-bottom: 2.4rem;
|
||||
|
||||
@ -10,15 +10,12 @@ 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) => {
|
||||
|
||||
return (
|
||||
<section className={s.orderInformation}>
|
||||
{
|
||||
<div>
|
||||
<div className={s.title}>Order Information</div>
|
||||
|
||||
<div className={s.tabs}>
|
||||
@ -57,8 +54,6 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
|
||||
</TabPane>
|
||||
</TabCommon>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -2,48 +2,7 @@
|
||||
|
||||
.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;
|
||||
|
||||
@screen md {
|
||||
padding: 2.4rem 0 2.4rem 1.2rem;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
padding: 2.4rem 0 2.4rem 2.4rem;
|
||||
|
||||
@ -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 (
|
||||
<div className={s.idAndStatus}>
|
||||
<div className={s.id}>
|
||||
@ -16,7 +16,7 @@ const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
|
||||
</div>
|
||||
<div className={classNames(s.deliveryStatus, {
|
||||
[s[status]]: status
|
||||
})}> {status}
|
||||
})}> {status.charAt(0).toUpperCase() + status.slice(1)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -2,14 +2,9 @@
|
||||
|
||||
.reOrder {
|
||||
@apply text-white custom-border-radius hidden font-bold;
|
||||
padding: .4rem .6rem;
|
||||
margin-right: 1rem;
|
||||
background-color: var(--primary);
|
||||
|
||||
@screen md {
|
||||
padding: .4rem .6rem;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
background-color: var(--primary);
|
||||
|
||||
@screen lg {
|
||||
padding: .8rem 1.2rem;
|
||||
|
||||
@ -2,11 +2,7 @@
|
||||
|
||||
.totalPrice {
|
||||
margin-left: auto;
|
||||
margin-right: 1rem;
|
||||
|
||||
@screen md {
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
margin-right: 2.4rem;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user