mirror of
https://github.com/vercel/commerce.git
synced 2025-07-26 19:51:23 +00:00
🔨 refactor: checkout
:%s
This commit is contained in:
unknown
@@ -1,23 +0,0 @@
|
||||
import React from 'react'
|
||||
import s from "CheckoutBill.module.scss"
|
||||
interface CheckoutBillProps {
|
||||
|
||||
}
|
||||
|
||||
const CheckoutBill = ({}: CheckoutBillProps) => {
|
||||
return (
|
||||
<div className={s.warpper}>
|
||||
<div className={s.list}>
|
||||
|
||||
</div>
|
||||
<div className={s.promo}>
|
||||
|
||||
</div>
|
||||
<div className={s.price}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckoutBill
|
||||
@@ -1,39 +0,0 @@
|
||||
.warpper{
|
||||
.header{
|
||||
@apply flex justify-between;
|
||||
padding-bottom: 3.2rem;
|
||||
.left{
|
||||
@apply flex items-center;
|
||||
.number{
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
border-radius: 100%;
|
||||
border: 1px solid var(--text-active);
|
||||
color: var(--text-active);
|
||||
@apply flex justify-center items-center font-bold;
|
||||
&.visible{
|
||||
background-color: var(--text-active);
|
||||
border: none;
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.title{
|
||||
padding-left: 2.4rem;
|
||||
@apply font-bold select-none cursor-pointer;
|
||||
color: var(--text-active);
|
||||
}
|
||||
}
|
||||
.edit{
|
||||
@apply font-bold cursor-pointer;
|
||||
text-decoration-line: underline;
|
||||
margin-right: 5.6rem;
|
||||
}
|
||||
}
|
||||
.body{
|
||||
height: 0;
|
||||
@apply overflow-hidden;
|
||||
&.show{
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import classNames from 'classnames'
|
||||
import React from 'react'
|
||||
import s from './CheckoutCollapse.module.scss'
|
||||
interface CheckoutCollapseProps {
|
||||
visible: boolean
|
||||
id: number
|
||||
children: React.ReactNode
|
||||
title: string
|
||||
isEdit: boolean
|
||||
onClose: () => void
|
||||
onOpen: () => void
|
||||
}
|
||||
|
||||
const CheckoutCollapse = ({
|
||||
children,
|
||||
id,
|
||||
title,
|
||||
isEdit,
|
||||
visible,
|
||||
onOpen,
|
||||
onClose,
|
||||
}: CheckoutCollapseProps) => {
|
||||
const handleTitleClick = () => {
|
||||
if(visible){
|
||||
onClose && onClose()
|
||||
}else{
|
||||
onOpen && onOpen()
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className={s.warpper}>
|
||||
<div className={s.header}>
|
||||
<div className={s.left}>
|
||||
<div className={classNames(s.number, { [`${s.visible}`]: visible })}>
|
||||
{id}
|
||||
</div>
|
||||
<div className={s.title} onClick={handleTitleClick}>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
{isEdit && <div className={s.edit}>{'Edit'}</div>}
|
||||
</div>
|
||||
<div className={classNames(s.body, { [`${s.show}`]: visible })}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CheckoutCollapse
|
||||
@@ -1,13 +0,0 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
.warpper{
|
||||
@apply u-form;
|
||||
padding: 0 5.6rem;
|
||||
.bottom{
|
||||
margin-top: 2.4rem;
|
||||
@apply flex justify-between items-center;
|
||||
.note{
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import Link from 'next/link'
|
||||
import React, { useRef } from 'react'
|
||||
import { ButtonCommon, Inputcommon } from 'src/components/common'
|
||||
import InputCommon from 'src/components/common/InputCommon/InputCommon'
|
||||
import s from './CustomerInfoForm.module.scss'
|
||||
interface CustomerInfoFormProps {
|
||||
onConfirm?: ()=>void
|
||||
}
|
||||
|
||||
const CustomerInfoForm = ({}: CustomerInfoFormProps) => {
|
||||
const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null);
|
||||
const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null);
|
||||
|
||||
|
||||
|
||||
const handleConfirmClick = () => {
|
||||
return {
|
||||
name:nameRef?.current?.getValue(),
|
||||
email:emailRef.current?.getValue()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={s.warpper}>
|
||||
<div className={s.body}>
|
||||
<Inputcommon type="text" placeholder="Full Name" ref={nameRef}/>
|
||||
<Inputcommon type="text" placeholder="Email Address" ref={emailRef}/>
|
||||
</div>
|
||||
<div className={s.bottom}>
|
||||
<div className={s.note}>
|
||||
By clicking continue you agree to Casper's{' '}
|
||||
{
|
||||
<Link href="#">
|
||||
<strong>terms and conditions</strong>
|
||||
</Link>
|
||||
}{' '}
|
||||
and{' '}
|
||||
{
|
||||
<Link href="#">
|
||||
<strong>privacy policy </strong>
|
||||
</Link>
|
||||
}
|
||||
.
|
||||
</div>
|
||||
<ButtonCommon onClick={handleConfirmClick}>Continue to Shipping</ButtonCommon>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerInfoForm
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
interface PaymentInfoFormProps {
|
||||
|
||||
}
|
||||
|
||||
const PaymentInfoForm = (props: PaymentInfoFormProps) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentInfoForm
|
||||
@@ -1,36 +0,0 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
.warpper{
|
||||
@apply u-form;
|
||||
padding: 0 5.6rem;
|
||||
.bottom{
|
||||
margin-top: 2.4rem;
|
||||
@apply flex justify-between items-center;
|
||||
.note{
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
>div{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
.method{
|
||||
width: 100%;
|
||||
height: 5.6rem;
|
||||
padding: 1.6rem;
|
||||
border-radius: 0.8rem;
|
||||
@apply flex justify-between items-center border border-solid border-line bg-gray;
|
||||
.left{
|
||||
@apply flex;
|
||||
.name{
|
||||
margin-left: 1.6rem;
|
||||
color: var(--text-active);
|
||||
}
|
||||
}
|
||||
.price{
|
||||
font-weight: bold;
|
||||
color: var(--text-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import React, { useRef } from 'react'
|
||||
import { ButtonCommon, Inputcommon, SelectCommon } from 'src/components/common'
|
||||
import s from './ShippingInfoForm.module.scss'
|
||||
import Link from 'next/link'
|
||||
import { CustomInputCommon } from 'src/utils/type.utils'
|
||||
import { Shipping } from 'src/components/icons'
|
||||
|
||||
interface ShippingInfoFormProps {}
|
||||
|
||||
const option = [
|
||||
{
|
||||
name: 'Hồ Chí Minh',
|
||||
},
|
||||
{
|
||||
name: 'Hà Nội',
|
||||
},
|
||||
]
|
||||
|
||||
const ShippingInfoForm = ({}: ShippingInfoFormProps) => {
|
||||
const addressRef = useRef<CustomInputCommon>(null)
|
||||
const cityRef = useRef<CustomInputCommon>(null)
|
||||
const stateRef = useRef<CustomInputCommon>(null)
|
||||
const codeRef = useRef<CustomInputCommon>(null)
|
||||
const phoneRef = useRef<CustomInputCommon>(null)
|
||||
const handleConfirmClick = () => {
|
||||
return {
|
||||
address: addressRef?.current?.getValue(),
|
||||
city: cityRef.current?.getValue(),
|
||||
state: stateRef?.current?.getValue(),
|
||||
code: codeRef.current?.getValue(),
|
||||
phone: phoneRef?.current?.getValue(),
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={s.warpper}>
|
||||
<div className={s.body}>
|
||||
<Inputcommon
|
||||
type="text"
|
||||
placeholder="Street Address"
|
||||
ref={addressRef}
|
||||
/>
|
||||
<Inputcommon type="text" placeholder="City" ref={cityRef} />
|
||||
<div className={s.line}>
|
||||
<SelectCommon option={option} type="custom" size="large">State</SelectCommon>
|
||||
<Inputcommon type="text" placeholder="Zip Code" ref={codeRef} />
|
||||
</div>
|
||||
<Inputcommon
|
||||
type="text"
|
||||
placeholder="Phone (delivery contact)"
|
||||
ref={phoneRef}
|
||||
/>
|
||||
<div className={s.method}>
|
||||
<div className={s.left}>
|
||||
<div className={s.icon}>
|
||||
<Shipping/>
|
||||
</div>
|
||||
<div className={s.name}>
|
||||
Standard Delivery Method
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.right}>
|
||||
<div className={s.price}>
|
||||
Free
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={s.bottom}>
|
||||
<div className={s.note}>
|
||||
By clicking continue you agree to Casper's{' '}
|
||||
{
|
||||
<Link href="#">
|
||||
<strong>terms and conditions</strong>
|
||||
</Link>
|
||||
}{' '}
|
||||
and{' '}
|
||||
{
|
||||
<Link href="#">
|
||||
<strong>privacy policy </strong>
|
||||
</Link>
|
||||
}
|
||||
.
|
||||
</div>
|
||||
<ButtonCommon onClick={handleConfirmClick}>
|
||||
Continue to Payment
|
||||
</ButtonCommon>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ShippingInfoForm
|
||||
Reference in New Issue
Block a user