crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

reponsive: checkout info

Browse Source
This commit is contained in:
unknown
2021-09-10 13:50:24 +07:00
parent 0947b79830
commit c712d66fa5
9 changed files with 108 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/CardItemCheckout/CardItemCheckout.module.scss
View File

@@ -1,8 +1,10 @@
.warpper{
max-width: 49.9rem;
max-height: 12rem;
padding:1.6rem 0;
@apply flex items-center;
@screen lg {
max-width: 49.9rem;
}
.image{
width: 13.3rem;
height: 8.8rem;

13
src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss
View File

@@ -1,11 +1,18 @@
.warpper {
max-width: 56.3rem;
padding: 3.2rem;
@apply flex justify-between flex-col border-l-2 border-solid border-line;
padding: 3.2rem;
min-width: 100%;
@screen lg {
max-width: 56.3rem;
@apply flex justify-between flex-col border-l-2 border-solid border-line;
}
.title {
display: none;
font-weight: bold;
font-size: 2rem;
line-height: 2.8rem;
@screen md {
display: block;
}
}
.list {
min-height: 52.8rem;

11
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.module.scss
View File

@@ -3,6 +3,15 @@
padding: 3.2rem;
.title{
margin-bottom: 3.2rem;
@apply flex justify-start items-center
@apply flex justify-between items-center;
.viewCart{
margin-right: 5.6rem;
@apply text-primary font-bold;
display: block;
cursor: pointer;
@screen lg {
display: none;
}
}
}
}

7
src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
View File

@@ -7,9 +7,11 @@ import s from './CheckoutInfo.module.scss'
import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
interface CheckoutInfoProps {}
interface CheckoutInfoProps {
onViewCart:()=>void
}
const CheckoutInfo = ({}: CheckoutInfoProps) => {
const CheckoutInfo = ({onViewCart}: CheckoutInfoProps) => {
const [active, setActive] = useState(1)
const [done, setDone] = useState<number[]>([])
const [info, setInfo] = useState<CheckOutForm>({})
@@ -69,6 +71,7 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
<div className={s.warpper}>
<div className={s.title}>
<Logo />
<div className={s.viewCart} onClick={onViewCart}>View cart</div>
</div>
{formList.map((item) => {
let note = getNote(item.id)

4
src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss
View File

@@ -1,7 +1,9 @@
@import "../../../../../../styles/utilities";
.warpper{
@apply u-form;
padding: 0 5.6rem;
@screen md {
padding: 0 5.6rem;
}
.bottom{
margin-top: 2.4rem;
@apply flex justify-between items-center;

4
src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss
View File

@@ -1,5 +1,7 @@
.wrapper{
padding: 0 5.6rem;
@screen md {
padding: 0 5.6rem;
}
.inner{
padding: 4rem 0;
}

4
src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.module.scss
View File

@@ -2,7 +2,9 @@
.warpper{
@apply u-form;
padding: 0 5.6rem;
@screen md {
padding: 0 5.6rem;
}
.bottom{
margin-top: 2.4rem;
@apply flex justify-between items-center;

50
src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss
View File

@@ -1,10 +1,56 @@
@import "../../../../styles/utilities";
.warrper{
@apply flex;
.right{
min-width: 56.3rem;
display: none;
@screen lg {
display: block;
min-width: 45rem;
}
@screen xl {
min-width: 56.3rem;
}
}
.left{
@apply w-full;
}
.mobile{
@apply hidden;
&.isShow{
@apply block;
@screen lg {
@apply hidden;
}
}
.modal{
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000;
.content{
@apply spacing-horizontal;
margin-top: 3rem;
padding-top: 6.4rem ;
padding-bottom: 5rem;
background-color: white;
overflow: auto;
height: 100%;
border-radius: 2.4rem 2.4rem 0 0;
.head{
@apply flex justify-between;
h3{
@apply heading-3 font-bold;
color:var(--text-base);
}
}
button{
margin-top: 2rem;
width: 100%;
}
}
}
}
}

25
src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx
View File

@@ -1,16 +1,35 @@
import React from 'react'
import classNames from 'classnames'
import React, { useState } from 'react'
import IconHide from 'src/components/icons/IconHide'
import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
import { CheckoutBill, CheckoutInfo } from '..'
import s from "./CheckoutPage.module.scss"
interface CheckoutPageProps {
}
const CheckoutPage = ({}: CheckoutPageProps) => {
const [isShow, setIsShow] = useState(false)
const onClose = () => {
setIsShow(false)
}
const onViewCart =() => {
setIsShow(true)
}
return (
<div className={s.warrper}>
<div className={s.left}><CheckoutInfo/></div>
<div className={s.left}><CheckoutInfo onViewCart = {onViewCart}/></div>
<div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
<div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>
<div className={s.modal}>
<div className={s.content}>
<div className={s.head}>
<h3>Your Cart({CHECKOUT_BILL_DATA.length})</h3>
<div onClick={onClose}><IconHide/></div>
</div>
<CheckoutBill data={CHECKOUT_BILL_DATA}/>
</div>
</div>
</div>
</div>
)
}