crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 15:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add default value for checkout fields

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe 2022-05-11 16:41:19 +07:00
parent 250e03feef
commit 50109be01f
2 changed files with 68 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
site/components/checkout/PaymentMethodView/PaymentMethodView.tsx
View File

@ -7,6 +7,7 @@ import { useUI } from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
import s from './PaymentMethodView.module.css'
import { useCheckoutContext } from '../context'
interface Form extends HTMLFormElement {
cardHolder: HTMLInputElement
@ -25,6 +26,7 @@ interface Form extends HTMLFormElement {
const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI()
const addCard = useAddCard()
const { cardFields } = useCheckoutContext()
async function handleSubmit(event: React.ChangeEvent<Form>) {
event.preventDefault()
@ -53,12 +55,21 @@ const PaymentMethodView: FC = () => {
<div>
<div className={s.fieldset}>
<label className={s.label}>Cardholder Name</label>
<input name="cardHolder" className={s.input} />
<input
name="cardHolder"
className={s.input}
defaultValue={cardFields.cardHolder}
/>
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-7')}>
<label className={s.label}>Card Number</label>
<input name="cardNumber" className={s.input} />
<input
name="cardNumber"
className={s.input}
defaultValue={cardFields.cardNumber}
required
/>
</div>
<div className={cn(s.fieldset, 'col-span-3')}>
<label className={s.label}>Expires</label>
@ -66,11 +77,18 @@ const PaymentMethodView: FC = () => {
name="cardExpireDate"
className={s.input}
placeholder="MM/YY"
defaultValue={cardFields.cardExpireDate}
required
/>
</div>
<div className={cn(s.fieldset, 'col-span-2')}>
<label className={s.label}>CVC</label>
<input name="cardCvc" className={s.input} />
<input
name="cardCvc"
className={s.input}
defaultValue={cardFields.cardCvc}
required
/>
</div>
</div>
<hr className="border-accent-2 my-6" />

55
site/components/checkout/ShippingView/ShippingView.tsx
View File

@ -7,6 +7,7 @@ import SidebarLayout from '@components/common/SidebarLayout'
import useAddAddress from '@framework/customer/address/use-add-item'
import s from './ShippingView.module.css'
import { useCheckoutContext } from '../context'
interface Form extends HTMLFormElement {
cardHolder: HTMLInputElement
@ -25,6 +26,7 @@ interface Form extends HTMLFormElement {
const ShippingView: FC = () => {
const { setSidebarView } = useUI()
const addAddress = useAddAddress()
const { addressFields } = useCheckoutContext()
async function handleSubmit(event: React.ChangeEvent<Form>) {
event.preventDefault()
@ -66,40 +68,77 @@ const ShippingView: FC = () => {
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input name="firstName" className={s.input} />
<input
name="firstName"
className={s.input}
defaultValue={addressFields.firstName}
required
/>
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input name="lastName" className={s.input} />
<input
name="lastName"
className={s.input}
defaultValue={addressFields.lastName}
required
/>
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input name="company" className={s.input} />
<input
name="company"
className={s.input}
defaultValue={addressFields.company}
/>
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input name="streetNumber" className={s.input} />
<input
name="streetNumber"
className={s.input}
defaultValue={addressFields.streetNumber}
required
/>
</div>
<div className={s.fieldset}>
<label className={s.label}>
Apartment, Suite, Etc. (Optional)
</label>
<input name="apartments" className={s.input} />
<input
name="apartments"
className={s.input}
defaultValue={addressFields.apartments}
/>
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input name="zipCode" className={s.input} />
<input
name="zipCode"
className={s.input}
defaultValue={addressFields.zipCode}
required
/>
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input name="city" className={s.input} />
<input
name="city"
className={s.input}
defaultValue={addressFields.city}
required
/>
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select name="country" className={s.select}>
<select
name="country"
className={s.select}
defaultValue={addressFields.country}
>
<option>Hong Kong</option>
</select>
</div>