mirror of
https://github.com/vercel/commerce.git
synced 2025-06-28 01:11:24 +00:00
refactor: change various files
This commit is contained in:
parent
62b725b7d9
commit
6bc74348f4
1
.gitignore
vendored
1
.gitignore
vendored
@ -36,3 +36,4 @@ yarn-error.log*
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
.env*.local
|
||||
|
@ -1,6 +1,21 @@
|
||||
import { authOptions } from 'lib/auth/config';
|
||||
import { woocommerce } from 'lib/woocomerce/woocommerce';
|
||||
import { getServerSession } from 'next-auth';
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(req: NextRequest) {
|
||||
try {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.user?.store_id) {
|
||||
return NextResponse.json({ error: 'User not logged' }, { status: 401 });
|
||||
}
|
||||
const cart = await woocommerce.get('customers', { id: session?.user.store_id });
|
||||
return NextResponse.json(cart, { status: 200 });
|
||||
} catch (error) {
|
||||
return NextResponse.json({ error: JSON.stringify(error) }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(req: NextRequest) {
|
||||
try {
|
||||
const data = await req.json();
|
||||
|
@ -2,6 +2,7 @@
|
||||
|
||||
import { useCart } from 'components/cart/cart-context';
|
||||
import CartItemView from 'components/cart/cart-item';
|
||||
import ShippingForm from 'components/shipping/form';
|
||||
import { OrderPayload } from 'lib/woocomerce/storeApi';
|
||||
import { useState } from 'react';
|
||||
|
||||
@ -37,18 +38,12 @@ export default function CheckoutPage() {
|
||||
payment_data: []
|
||||
};
|
||||
const [formData, setFormData] = useState(initialState);
|
||||
const handleChangeShipping = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
shipping_address: { ...prev.shipping_address, [e.target.name]: e.target.value }
|
||||
}));
|
||||
const handleChangeShipping = (e: any) => {
|
||||
setFormData(e);
|
||||
};
|
||||
|
||||
const handleChangeBilling = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
billing_address: { ...prev.billing_address, [e.target.name]: e.target.value }
|
||||
}));
|
||||
const handleChangeBilling = (e: any) => {
|
||||
setFormData(e);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -72,169 +67,15 @@ export default function CheckoutPage() {
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<h2 className="mt-2 text-2xl font-bold">Shipping info</h2>
|
||||
<form className="gap-4 md:grid-cols-6 md:grid-rows-2">
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="address_1"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_1"
|
||||
value={formData.shipping_address.address_1}
|
||||
onChange={handleChangeShipping}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="city"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.shipping_address.city}
|
||||
onChange={handleChangeShipping}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="state"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
State
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.shipping_address.state}
|
||||
onChange={handleChangeShipping}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="postcode"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Postcode
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="postcode"
|
||||
value={formData.shipping_address.postcode}
|
||||
onChange={handleChangeShipping}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="country"
|
||||
value={formData.shipping_address.country}
|
||||
onChange={handleChangeShipping}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</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">
|
||||
<div className="flex flex-col justify-between overflow-hidden p-1">
|
||||
<form className="flex flex-col gap-4">
|
||||
<h2 className="mt-2 text-2xl font-bold">Billing info</h2>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="address_1"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_1"
|
||||
value={formData.billing_address.address_1}
|
||||
onChange={handleChangeBilling}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="city"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
value={formData.billing_address.city}
|
||||
onChange={handleChangeBilling}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="state"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
State
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
value={formData.billing_address.state}
|
||||
onChange={handleChangeBilling}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="postcode"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Postcode
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="postcode"
|
||||
value={formData.billing_address.postcode}
|
||||
onChange={handleChangeBilling}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="country"
|
||||
value={formData.billing_address.country}
|
||||
onChange={handleChangeBilling}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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">
|
||||
|
@ -23,7 +23,7 @@ export default function LoginPage() {
|
||||
return (
|
||||
<section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
|
||||
<h1 className="text-2xl font-bold">Login</h1>
|
||||
<div className="flex h-screen w-full max-w-md flex-col">
|
||||
<div className="flex w-full max-w-md flex-col">
|
||||
{error && <p className="text-red-500">{error}</p>}
|
||||
<form onSubmit={handleLogin}>
|
||||
<div className="mt-4">
|
||||
|
@ -1,5 +1,5 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div>
|
||||
@ -7,5 +7,5 @@ export default function NotFound() {
|
||||
<p>Could not find requested resource</p>
|
||||
<Link href="/">Return Home</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
@ -7,6 +7,7 @@ import { Gallery } from 'components/product/gallery';
|
||||
import { ProductProvider } from 'components/product/product-context';
|
||||
import { ProductDescription } from 'components/product/product-description';
|
||||
import { VariantSelector } from 'components/product/variant-selector';
|
||||
import Prose from 'components/prose';
|
||||
import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
|
||||
import { Image } from 'lib/woocomerce/models/base';
|
||||
import { Product, ProductVariations } from 'lib/woocomerce/models/product';
|
||||
@ -91,6 +92,14 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
|
||||
}))}
|
||||
/>
|
||||
</Suspense>
|
||||
<div className="mt-4 text-center text-sm">
|
||||
{product.description ? (
|
||||
<Prose
|
||||
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
|
||||
html={product.description}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="basis-full lg:basis-2/6">
|
||||
|
@ -17,7 +17,7 @@ export default async function OrderPage(props: { params: Promise<{ id: number }>
|
||||
return (
|
||||
<section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
|
||||
<h1 className="text-2xl font-bold">Order</h1>
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="flex flex-col">
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="name"
|
||||
|
@ -13,11 +13,7 @@ export default async function OrdersPage() {
|
||||
<section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
|
||||
<h1 className="text-2xl font-bold">Orders</h1>
|
||||
{orders.map((order) => (
|
||||
<Link
|
||||
href={`/profile/orders/${order.id}`}
|
||||
key={order.id}
|
||||
className="flex h-screen flex-col"
|
||||
>
|
||||
<Link href={`/profile/orders/${order.id}`} key={order.id} className="flex flex-col">
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="name"
|
||||
|
@ -1,156 +1,101 @@
|
||||
'use client';
|
||||
|
||||
import LogoutButton from 'components/button/logout';
|
||||
import { authOptions } from 'lib/auth/config';
|
||||
import { woocommerce } from 'lib/woocomerce/woocommerce';
|
||||
import { getServerSession } from 'next-auth';
|
||||
import ShippingForm from 'components/shipping/form';
|
||||
import { Customer } from 'lib/woocomerce/models/customer';
|
||||
import { Shipping } from 'lib/woocomerce/models/shipping';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default async function LoginPage() {
|
||||
const data = await getServerSession(authOptions);
|
||||
if (!data?.user) {
|
||||
return notFound();
|
||||
}
|
||||
export default function ProfilePage() {
|
||||
const [customer, setCustomer] = useState<Customer | undefined>(undefined);
|
||||
const [shippingAddress, setShippingAddress] = useState<Shipping | undefined>(undefined);
|
||||
|
||||
const customer = await woocommerce.get('customers', { id: data.user.store_id });
|
||||
useEffect(() => {
|
||||
const fetchCustomer = async () => {
|
||||
const data = (await (
|
||||
await fetch('/api/customer', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
).json()) as Customer;
|
||||
setCustomer(data);
|
||||
};
|
||||
|
||||
fetchCustomer();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
|
||||
<h1 className="text-2xl font-bold">Profile</h1>
|
||||
<h2 className="text-2xl font-bold">Info</h2>
|
||||
<img src={customer.avatar_url} alt="avatar" className="h-11 w-11" />
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={customer.first_name}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="lastname"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastname"
|
||||
value={customer.last_name}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={customer.email}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
<h2 className="mt-2 text-2xl font-bold">Shipping info</h2>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="address"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Address
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
value={customer.shipping.address_1}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="city"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
value={customer.shipping.city}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="state"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
State
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="state"
|
||||
value={customer.shipping.state}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="postcode"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Postcode
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="postcode"
|
||||
value={customer.shipping.postcode}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="country"
|
||||
value={customer.shipping.country}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Link href={`/profile/orders`}>
|
||||
<button type="button" className="w-full rounded-md bg-indigo-500 p-3 text-white">
|
||||
Orders
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<LogoutButton />
|
||||
{customer && (
|
||||
<div>
|
||||
<img src={customer.avatar_url} alt="avatar" className="h-11 w-11" />
|
||||
<div className="flex flex-col">
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={customer.first_name}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="lastname"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Cognome
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastname"
|
||||
value={customer.last_name}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={customer.email}
|
||||
className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<ShippingForm title="Shipping Info" handleChangeAction={setShippingAddress} />
|
||||
|
||||
<div className="mt-4">
|
||||
<Link href={`/profile/orders`}>
|
||||
<button type="button" className="w-full rounded-md bg-indigo-500 p-3 text-white">
|
||||
Orders
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<LogoutButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
@ -11,7 +11,7 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
|
||||
<div className="order-first w-full flex-none md:max-w-[150px]">
|
||||
<FilterList list={sorting} title="Sort by" />
|
||||
</div>
|
||||
<div className="order-last min-h-screen w-full md:order-none">
|
||||
<div className="order-last w-full md:order-none">
|
||||
<Suspense>
|
||||
<ChildrenWrapper>{children}</ChildrenWrapper>
|
||||
</Suspense>
|
||||
|
@ -65,7 +65,7 @@ export default function SignUpPage() {
|
||||
return (
|
||||
<section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
|
||||
<h1 className="text-2xl font-bold">Sign up</h1>
|
||||
<div className="flex h-screen justify-center">
|
||||
<div className="flex justify-center">
|
||||
<form onSubmit={handleSignup}>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
|
@ -9,8 +9,7 @@ export default function LogoutButton() {
|
||||
type="button"
|
||||
className="w-full rounded-md bg-indigo-500 p-3 text-white"
|
||||
onClick={() => {
|
||||
signOut({ redirect: false });
|
||||
router.replace('/');
|
||||
signOut({ callbackUrl: '/' });
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
|
@ -101,7 +101,7 @@ export default function CartModal() {
|
||||
className="text-right text-base text-black dark:text-white"
|
||||
amount={cart.totals?.total_price}
|
||||
needSplit
|
||||
currencyCode={'EUR'}
|
||||
currencyCode={cart.totals.currency_code}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
|
||||
@ -114,7 +114,7 @@ export default function CartModal() {
|
||||
className="text-right text-base text-black dark:text-white"
|
||||
amount={cart.totals?.total_price}
|
||||
needSplit
|
||||
currencyCode={'EUR'}
|
||||
currencyCode={cart.totals.currency_code}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -26,10 +26,10 @@ export function ProductDescription({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{product.description ? (
|
||||
{product.short_description ? (
|
||||
<Prose
|
||||
className="mb-6 text-sm leading-tight dark:text-white/[60%]"
|
||||
html={product.description}
|
||||
html={product.short_description}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
|
115
components/shipping/form.tsx
Normal file
115
components/shipping/form.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
'use client';
|
||||
import { Shipping } from 'lib/woocomerce/models/shipping';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ShippingForm({
|
||||
title,
|
||||
handleChangeAction
|
||||
}: {
|
||||
title: string;
|
||||
handleChangeAction?: (data: Shipping) => void;
|
||||
}) {
|
||||
const initialState: Shipping = {
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
address_1: '',
|
||||
address_2: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postcode: '',
|
||||
country: '',
|
||||
company: ''
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(initialState);
|
||||
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newData = { ...formData, [e.target.name]: e.target.value };
|
||||
setFormData(newData);
|
||||
if (handleChangeAction) {
|
||||
handleChangeAction(newData);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-between overflow-hidden p-1">
|
||||
<form className="flex flex-col gap-4">
|
||||
<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
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address_1"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="city"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
City
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="city"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="state"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
State
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="state"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="postcode"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Postcode
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="postcode"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="country"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
Country
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="country"
|
||||
value={formData.country}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -23,13 +23,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
"types/**/*.d.ts",
|
||||
"app/profile/orders/[id]"
|
||||
],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "types/**/*.d.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user