Add default value for checkout fields

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

site/components/checkout/PaymentMethodView/PaymentMethodView.tsx

@@ -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" />

site/components/checkout/ShippingView/ShippingView.tsx

@@ -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>