From a5e995fbe0ca9ae72c706d50e25314ac99081821 Mon Sep 17 00:00:00 2001 From: paolosantarsiero Date: Mon, 30 Dec 2024 01:18:53 +0100 Subject: [PATCH] feat: change price by product variation --- .npmrc | 1 + app/checkout/page.tsx | 246 +- app/product/[name]/page.tsx | 3 +- app/search/layout.tsx | 7 +- components/cart/cart-item.tsx | 66 + components/cart/modal.tsx | 51 +- components/product/product-description.tsx | 1 - lib/woocomerce/storeApi.ts | 29 + package.json | 2 + pnpm-lock.yaml | 2869 +++++++++++++++++++- 10 files changed, 3212 insertions(+), 63 deletions(-) create mode 100644 .npmrc create mode 100644 components/cart/cart-item.tsx diff --git a/.npmrc b/.npmrc new file mode 100644 index 000000000..cb1588719 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +public-hoist-pattern[]=*@nextui-org/* \ No newline at end of file diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx index 599e897b5..c8ff4bb97 100644 --- a/app/checkout/page.tsx +++ b/app/checkout/page.tsx @@ -1,9 +1,247 @@ -export default async function CheckoutPage(props: { params: Promise<{ id: number }> }) { - const params = await props.params; +'use client'; + +import { useCart } from 'components/cart/cart-context'; +import CartItemView from 'components/cart/cart-item'; +import { OrderPayload } from 'lib/woocomerce/storeApi'; +import { useState } from 'react'; + +export default function CheckoutPage() { + const { cart } = useCart(); + + const initialState: OrderPayload = { + shipping_address: { + first_name: '', + last_name: '', + company: '', + address_1: '', + address_2: '', + city: '', + state: '', + postcode: '', + country: '' + }, + billing_address: { + first_name: '', + last_name: '', + company: '', + email: '', + phone: '', + address_1: '', + address_2: '', + city: '', + state: '', + postcode: '', + country: '' + }, + payment_method: '', + payment_data: [] + }; + const [formData, setFormData] = useState(initialState); + const handleChangeShipping = (e: React.ChangeEvent) => { + setFormData((prev) => ({ + ...prev, + shipping_address: { ...prev.shipping_address, [e.target.name]: e.target.value } + })); + }; + + const handleChangeBilling = (e: React.ChangeEvent) => { + setFormData((prev) => ({ + ...prev, + billing_address: { ...prev.billing_address, [e.target.name]: e.target.value } + })); + }; return ( -
-

Checkout

+
+
+

Checkout

+
+
    + {cart && + cart.items?.length && + cart.items + .sort((a, b) => a.name.localeCompare(b.name)) + .map((item, i) => { + return ( +
  • + +
    • + ); + })} +
+ +

Shipping info

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+
+

Billing info

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+

Payment

+
+
); } diff --git a/app/product/[name]/page.tsx b/app/product/[name]/page.tsx index 38e6c236d..5fdd4ce97 100644 --- a/app/product/[name]/page.tsx +++ b/app/product/[name]/page.tsx @@ -94,13 +94,14 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
+

{product.name}

{variations && ( )} - +
diff --git a/app/search/layout.tsx b/app/search/layout.tsx index 2788af264..050eba61a 100644 --- a/app/search/layout.tsx +++ b/app/search/layout.tsx @@ -7,12 +7,13 @@ export default function SearchLayout({ children }: { children: React.ReactNode } return ( <>
-
+
+ +
{children}
-
- +