refactor: change layout and add select form shipping

app/[page]/layout.tsx

@@ -1,12 +1,9 @@
-import Footer from 'components/layout/footer';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <div className="w-full">
         <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
       </div>
-      <Footer />
     </>
   );
 }

app/checkout/page.tsx

@@ -1,13 +1,29 @@
 'use client';
 
+import { Accordion, AccordionItem, Checkbox } from '@nextui-org/react';
 import { useCart } from 'components/cart/cart-context';
 import CartItemView from 'components/cart/cart-item';
+import Price from 'components/price';
 import ShippingForm from 'components/shipping/form';
 import { OrderPayload } from 'lib/woocomerce/storeApi';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { z } from 'zod';
+
+const shippingSchema = z.object({
+  first_name: z.string().min(3),
+  last_name: z.string().min(3),
+  address_1: z.string().min(3),
+  address_2: z.string().optional(),
+  city: z.string().min(3),
+  state: z.string().min(3),
+  postcode: z.string().min(3),
+  country: z.string().min(3)
+});
 
 export default function CheckoutPage() {
   const { cart } = useCart();
+  const router = useRouter();
 
   const initialState: OrderPayload = {
     shipping_address: {
@@ -38,6 +54,7 @@ export default function CheckoutPage() {
     payment_data: []
   };
   const [formData, setFormData] = useState(initialState);
+  const [sameBilling, setSameBilling] = useState(true);
   const handleChangeShipping = (e: any) => {
     setFormData(e);
   };
@@ -48,12 +65,40 @@ export default function CheckoutPage() {
 
   return (
     <section className="mx-auto grid h-full gap-4 px-4 pb-4">
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
       <p>Checkout</p>
+      <form
+        action={() => {
+          try {
+            console.log(formData);
+            shippingSchema.parse(formData.shipping_address);
+          } catch (error) {
+            console.log(error);
+          }
+        }}
+        className="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black"
+      >
+        <div className="flew-row col-span-4 row-span-2 flex">
+          <Accordion defaultExpandedKeys={['1']} className="text-white md:w-2/3">
+            <AccordionItem key="1" title="Shipping Info" className="text-white">
+              <ShippingForm className="p-4" handleChangeAction={handleChangeShipping} />
+              <Checkbox onValueChange={(v) => setSameBilling(v)} className="mt-2">
+                Use same address for billing?
+              </Checkbox>
+            </AccordionItem>
+            <AccordionItem key="2" title="Billing Info" className="text-white">
+              <ShippingForm className="p-4" handleChangeAction={handleChangeBilling} />
+            </AccordionItem>
+            <AccordionItem key="3" title="Payment" className="text-white">
               <div className="flex flex-col justify-between overflow-hidden p-1">
-          <ul className="flex-grow overflow-auto py-4">
+                <h2 className="mt-2 text-2xl font-bold">Payment</h2>
-            {cart &&
+              </div>
-              cart.items?.length &&
+            </AccordionItem>
+          </Accordion>
+
+          {cart && (
+            <div className="ms-4 flex flex-col justify-between overflow-hidden md:w-1/3">
+              <ul className="flex-grow overflow-auto">
+                {cart.items?.length &&
                   cart.items
                     .sort((a, b) => a.name.localeCompare(b.name))
                     .map((item, i) => {
@@ -67,22 +112,27 @@ export default function CheckoutPage() {
                       );
                     })}
               </ul>
+              <div className="mb-3 flex items-center justify-between pb-4 pt-4 dark:border-neutral-700">
+                <p>Total</p>
+                <Price
+                  className="text-right text-base text-black dark:text-white"
+                  amount={cart?.totals?.total_price}
+                  needSplit
+                  currencyCode={cart?.totals.currency_code}
+                />
               </div>
             </div>
-
+          )}
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <ShippingForm title="Shippping Info" handleChangeAction={handleChangeShipping} />
-      </div>
-
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <ShippingForm title="Billing Info" handleChangeAction={handleChangeBilling} />
-      </div>
-
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <div className="flex flex-col justify-between overflow-hidden p-1">
-          <h2 className="mt-2 text-2xl font-bold">Payment</h2>
         </div>
+        <div className="flex justify-center gap-4">
+          <button className="rounded-md bg-indigo-500 p-2 text-white" onClick={() => router.back()}>
+            Back
+          </button>
+          <button type="submit" className="rounded-md bg-indigo-500 p-2 text-white">
+            Next
+          </button>
         </div>
+      </form>
     </section>
   );
 }

app/error.tsx

@@ -2,7 +2,7 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
       <h2 className="text-xl font-bold">Oh no!</h2>
       <p className="my-2">
         There was an issue with our storefront. This could be a temporary issue, please try your

app/layout.tsx

@@ -1,4 +1,5 @@
 import { CartProvider } from 'components/cart/cart-context';
+import Footer from 'components/layout/footer';
 import { Navbar } from 'components/layout/navbar';
 import { NextAuthProvider } from 'components/next-session-provider';
 import { WelcomeToast } from 'components/welcome-toast';
@@ -48,6 +49,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
               <WelcomeToast />
             </main>
           </CartProvider>
+          <Footer />
         </NextAuthProvider>
       </body>
     </html>

app/page.tsx

@@ -1,6 +1,5 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
-import Footer from 'components/layout/footer';
 
 export const metadata = {
   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
@@ -14,7 +13,6 @@ export default async function HomePage() {
     <>
       <ThreeItemGrid />
       <Carousel />
-      <Footer />
     </>
   );
 }

app/product/[name]/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { AddToCart } from 'components/cart/add-to-cart';
-import Footer from 'components/layout/footer';
 import { Gallery } from 'components/product/gallery';
 import { ProductProvider } from 'components/product/product-context';
 import { ProductDescription } from 'components/product/product-description';
@@ -77,7 +76,7 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
             <Suspense
               fallback={
@@ -116,7 +115,6 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
           </div>
         </div>
       </div>
-      <Footer />
     </ProductProvider>
   );
 }

app/profile/page.tsx

@@ -28,8 +28,9 @@ export default function ProfilePage() {
   }, []);
 
   return (
-    <section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
+    <section className="mx-auto mt-4 grid max-w-screen-2xl gap-4 px-4 pb-4">
       <h1 className="text-2xl font-bold">Profile</h1>
+      <div className="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black">
         <h2 className="text-2xl font-bold">Info</h2>
         {customer && (
           <div>
@@ -84,7 +85,10 @@ export default function ProfilePage() {
 
                 <div className="mt-4">
                   <Link href={`/profile/orders`}>
-                  <button type="button" className="w-full rounded-md bg-indigo-500 p-3 text-white">
+                    <button
+                      type="button"
+                      className="w-full rounded-md bg-indigo-500 p-3 text-white"
+                    >
                       Orders
                     </button>
                   </Link>
@@ -96,6 +100,7 @@ export default function ProfilePage() {
             </div>
           </div>
         )}
+      </div>
     </section>
   );
 }

app/search/layout.tsx

@@ -1,4 +1,3 @@
-import Footer from 'components/layout/footer';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
 import { Suspense } from 'react';
@@ -7,7 +6,7 @@ import ChildrenWrapper from './children-wrapper';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
         <div className="order-first w-full flex-none md:max-w-[150px]">
           <FilterList list={sorting} title="Sort by" />
         </div>
@@ -18,7 +17,6 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         </div>
         <div className="order-none flex-none md:order-last md:w-[100px]"></div>
       </div>
-      <Footer />
     </>
   );
 }

components/cart/modal.tsx

@@ -64,7 +64,7 @@ export default function CartModal() {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">My Cart</p>
                 <button aria-label="Close cart" onClick={closeCart}>

components/layout/footer-menu.tsx

@@ -23,7 +23,7 @@ export function FooterMenuItem({ item }: { item: Menu }) {
       <Link
         href={item.path}
         className={clsx(
-          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300',
+          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
           {
             'text-black dark:text-neutral-300': active
           }

components/layout/footer.tsx

@@ -36,9 +36,9 @@ export default async function Footer() {
 
   return (
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
         <div>
-          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
+          <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
             <LogoSquare size="sm" />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>

components/layout/navbar/mobile-menu.tsx

@@ -39,7 +39,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
       <button
         onClick={openMobileMenu}
         aria-label="Open mobile menu"
-        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white"
+        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
       >
         <Bars3Icon className="h-4" />
       </button>

components/layout/navbar/search.tsx

@@ -16,7 +16,7 @@ export default function Search() {
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
-        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 md:text-sm dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400 md:text-sm"
       />
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <MagnifyingGlassIcon className="h-4" />

components/layout/search/filter/index.tsx

@@ -32,7 +32,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
     <>
       <nav>
         {title ? (
-          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
+          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
             {title}
           </h3>
         ) : null}

components/shipping/form.tsx

@@ -1,12 +1,19 @@
 'use client';
+import { Avatar, Select, SelectItem } from '@nextui-org/react';
+import clsx from 'clsx';
 import { Shipping } from 'lib/woocomerce/models/shipping';
 import { useState } from 'react';
+import countriesJson from '../../types/countries.json';
+
+export const countries = countriesJson as { country: string; flag_base64: string }[];
 
 export default function ShippingForm({
+  className,
   title,
   handleChangeAction
 }: {
-  title: string;
+  className?: string;
+  title?: string;
   handleChangeAction?: (data: Shipping) => void;
 }) {
   const initialState: Shipping = {
@@ -31,15 +38,14 @@ export default function ShippingForm({
   };
 
   return (
-    <div className="flex flex-col justify-between overflow-hidden p-1">
+    <div className={clsx('flex flex-col gap-4', className)}>
-      <form className="flex flex-col gap-4">
+      {title && <h2 className="mt-2 text-2xl font-bold">{title}</h2>}
-        <h2 className="mt-2 text-2xl font-bold">{title}</h2>
       <div className="mt-4">
         <label
           htmlFor="address_1"
           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
         >
-            Address
+          Address <span className="text-red-500">*</span>
         </label>
         <input
           type="text"
@@ -47,6 +53,7 @@ export default function ShippingForm({
           value={formData.address_1}
           onChange={onChange}
           className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
         />
       </div>
       <div className="mt-4">
@@ -54,7 +61,7 @@ export default function ShippingForm({
           htmlFor="city"
           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
         >
-            City
+          City <span className="text-red-500">*</span>
         </label>
         <input
           type="text"
@@ -62,6 +69,7 @@ export default function ShippingForm({
           value={formData.city}
           onChange={onChange}
           className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
         />
       </div>
       <div className="mt-4">
@@ -69,7 +77,7 @@ export default function ShippingForm({
           htmlFor="state"
           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
         >
-            State
+          State <span className="text-red-500">*</span>
         </label>
         <input
           type="text"
@@ -77,6 +85,7 @@ export default function ShippingForm({
           value={formData.state}
           onChange={onChange}
           className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
         />
       </div>
       <div className="mt-4">
@@ -84,7 +93,7 @@ export default function ShippingForm({
           htmlFor="postcode"
           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
         >
-            Postcode
+          Postcode <span className="text-red-500">*</span>
         </label>
         <input
           type="text"
@@ -92,6 +101,7 @@ export default function ShippingForm({
           value={formData.postcode}
           onChange={onChange}
           className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
         />
       </div>
       <div className="mt-4">
@@ -99,17 +109,31 @@ export default function ShippingForm({
           htmlFor="country"
           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
         >
-            Country
+          Country <span className="text-red-500">*</span>
         </label>
-          <input
+        <div>
-            type="text"
+          <Select
+            className="max-w-xs"
+            isRequired
             name="country"
             value={formData.country}
-            onChange={onChange}
+            onChange={(event) =>
-            className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+              onChange({ target: { name: 'country', value: event.target.value } })
-          />
+            }
+          >
+            {countries.map((item) => (
+              <SelectItem
+                key={item.country}
+                startContent={
+                  <Avatar alt={item.country + '-img'} className="h-6 w-6" src={item.flag_base64} />
+                }
+              >
+                {item.country}
+              </SelectItem>
+            ))}
+          </Select>
+        </div>
       </div>
-      </form>
     </div>
   );
 }

tailwind.config.ts

@@ -38,6 +38,7 @@ const config: Config = {
   future: {
     hoverOnlyWhenSupported: true
   },
+  darkMode: 'class',
   plugins: [
     require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),

types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: any;
+  export default value;
+}