From 02dbdc825b4168e3c09a716c82621905815604d5 Mon Sep 17 00:00:00 2001 From: maksim hodasevich <47758224+dogfrogfog@users.noreply.github.com> Date: Fri, 6 Sep 2024 20:43:36 +0200 Subject: [PATCH] add order page (#123) --- proto | 2 +- src/api/proto-http/common/index.ts | 11 +- src/api/proto-http/frontend/index.ts | 11 +- src/app/order/[uuid]/V0GenUi.tsx | 290 +++++++++++++++++++++++++++ src/app/order/[uuid]/page.tsx | 21 ++ 5 files changed, 314 insertions(+), 21 deletions(-) create mode 100644 src/app/order/[uuid]/V0GenUi.tsx create mode 100644 src/app/order/[uuid]/page.tsx diff --git a/proto b/proto index 44dc1f2d..982eed10 160000 --- a/proto +++ b/proto @@ -1 +1 @@ -Subproject commit 44dc1f2d12439a9542dbf61b6c2994686dc6c078 +Subproject commit 982eed109c9a6942c08aadb794dea82d962dedfe diff --git a/src/api/proto-http/common/index.ts b/src/api/proto-http/common/index.ts index 9668b065..36bfa296 100644 --- a/src/api/proto-http/common/index.ts +++ b/src/api/proto-http/common/index.ts @@ -81,7 +81,6 @@ export type ArchiveItemInsert = { }; export type Address = { - id: number | undefined; addressInsert: AddressInsert | undefined; }; @@ -96,9 +95,6 @@ export type AddressInsert = { }; export type Buyer = { - id: number | undefined; - billingAddressId: number | undefined; - shippingAddressId: number | undefined; buyerInsert: BuyerInsert | undefined; }; @@ -357,7 +353,6 @@ export type PaymentMethodNameEnum = | "PAYMENT_METHOD_NAME_ENUM_USDT_SHASTA"; // Payment represents the payment table export type Payment = { - id: number | undefined; createdAt: wellKnownTimestamp | undefined; modifiedAt: wellKnownTimestamp | undefined; paymentInsert: PaymentInsert | undefined; @@ -392,7 +387,6 @@ export type PromoCodeInsert = { // PromoCode represents the promo_code table export type PromoCode = { - id: number | undefined; promoCodeInsert: PromoCodeInsert | undefined; }; @@ -410,7 +404,7 @@ export type ShipmentCarrier = { // Shipment represents the shipment table export type Shipment = { - id: number | undefined; + cost: googletype_Decimal | undefined; createdAt: wellKnownTimestamp | undefined; updatedAt: wellKnownTimestamp | undefined; carrierId: number | undefined; @@ -458,13 +452,10 @@ export type OrderFull = { export type Order = { id: number | undefined; uuid: string | undefined; - buyerId: number | undefined; placed: wellKnownTimestamp | undefined; modified: wellKnownTimestamp | undefined; - paymentId: number | undefined; totalPrice: googletype_Decimal | undefined; orderStatusId: number | undefined; - shipmentId: number | undefined; promoId: number | undefined; }; diff --git a/src/api/proto-http/frontend/index.ts b/src/api/proto-http/frontend/index.ts index a9cf5095..8a94f476 100644 --- a/src/api/proto-http/frontend/index.ts +++ b/src/api/proto-http/frontend/index.ts @@ -439,13 +439,10 @@ export type common_OrderFull = { export type common_Order = { id: number | undefined; uuid: string | undefined; - buyerId: number | undefined; placed: wellKnownTimestamp | undefined; modified: wellKnownTimestamp | undefined; - paymentId: number | undefined; totalPrice: googletype_Decimal | undefined; orderStatusId: number | undefined; - shipmentId: number | undefined; promoId: number | undefined; }; @@ -467,7 +464,6 @@ export type common_OrderItem = { // Payment represents the payment table export type common_Payment = { - id: number | undefined; createdAt: wellKnownTimestamp | undefined; modifiedAt: wellKnownTimestamp | undefined; paymentInsert: common_PaymentInsert | undefined; @@ -475,7 +471,7 @@ export type common_Payment = { // Shipment represents the shipment table export type common_Shipment = { - id: number | undefined; + cost: googletype_Decimal | undefined; createdAt: wellKnownTimestamp | undefined; updatedAt: wellKnownTimestamp | undefined; carrierId: number | undefined; @@ -486,7 +482,6 @@ export type common_Shipment = { // PromoCode represents the promo_code table export type common_PromoCode = { - id: number | undefined; promoCodeInsert: common_PromoCodeInsert | undefined; }; @@ -501,14 +496,10 @@ export type common_PromoCodeInsert = { }; export type common_Buyer = { - id: number | undefined; - billingAddressId: number | undefined; - shippingAddressId: number | undefined; buyerInsert: common_BuyerInsert | undefined; }; export type common_Address = { - id: number | undefined; addressInsert: common_AddressInsert | undefined; }; diff --git a/src/app/order/[uuid]/V0GenUi.tsx b/src/app/order/[uuid]/V0GenUi.tsx new file mode 100644 index 00000000..9e6cd825 --- /dev/null +++ b/src/app/order/[uuid]/V0GenUi.tsx @@ -0,0 +1,290 @@ +"use client"; + +import { useHeroContext } from "@/components/contexts/HeroContext"; + +// Define the types based on the provided data structure +type OrderData = { + order: { + id: number; + uuid: string; + placed: string; + modified: string; + totalPrice: { value: string }; + orderStatusId: number; + promoId: number; + }; + orderItems: Array<{ + id: number; + orderId: number; + thumbnail: string; + productName: string; + productPrice: string; + productPriceWithSale: string; + productSalePercentage: string; + productBrand: string; + slug: string; + color: string; + categoryId: number; + sku: string; + }>; + payment: { + createdAt: string; + modifiedAt: string; + paymentInsert: { + paymentMethod: string; + transactionId: string; + transactionAmount: { value: string }; + transactionAmountPaymentCurrency: { value: string }; + payer: string; + payee: string; + isTransactionDone: boolean; + }; + }; + shipment: { + cost: { value: string }; + createdAt: string; + updatedAt: string; + carrierId: number; + trackingCode: string; + shippingDate: string; + estimatedArrivalDate: string; + }; + promoCode: { + promoCodeInsert: { + code: string; + freeShipping: boolean; + discount: { value: string }; + expiration: string; + allowed: boolean; + voucher: boolean; + }; + }; + buyer: { + buyerInsert: { + firstName: string; + lastName: string; + email: string; + phone: string; + receivePromoEmails: boolean; + }; + }; + billing: { + addressInsert: { + country: string; + state: string; + city: string; + addressLineOne: string; + addressLineTwo: string; + company: string; + postalCode: string; + }; + }; + shipping: { + addressInsert: { + country: string; + state: string; + city: string; + addressLineOne: string; + addressLineTwo: string; + company: string; + postalCode: string; + }; + }; +}; + +export default function OrderPage({ orderData }: { orderData: OrderData }) { + const { dictionary } = useHeroContext(); + + if (!orderData) return null; + + const { + order, + orderItems, + payment, + shipment, + promoCode, + buyer, + billing, + shipping, + } = orderData; + + const statusName = dictionary?.orderStatuses?.find( + (v) => v.id === order?.orderStatusId, + ); + + return ( +
+

Order Details

+ +
+

Order Summary

+
+
+

+ Order ID: {order.id} +

+

+ UUID: {order.uuid} +

+

+ Total Price: ${order.totalPrice.value} +

+
+
+

+ Placed: {order.placed} +

+

+ Modified: {order.modified} +

+

+ Status: {statusName?.name} +

+
+
+
+ +
+

Order Items

+
+ + + + + + + + + + + + {orderItems.map((item) => ( + + + + + + + + ))} + +
ProductPriceSale PriceBrandSKU
+
+ {item.productName} + {item.productName} +
+ 		${item.productPrice}${item.productPriceWithSale}{item.productBrand}{item.sku}
+
+
+ +
+
+

Payment Information

+

+ Method: {payment.paymentInsert.paymentMethod} +

+

+ Transaction ID:{" "} + {payment.paymentInsert.transactionId || "N/A"} +

+

+ Amount: $ + {payment.paymentInsert.transactionAmount.value} +

+

+ Status:{" "} + {payment.paymentInsert.isTransactionDone ? "Completed" : "Pending"} +

+
+ +
+

Shipment Details

+

+ Cost: ${shipment.cost.value} +

+

+ Carrier ID: {shipment.carrierId} +

+

+ Tracking Code: {shipment.trackingCode || "N/A"} +

+

+ Estimated Arrival:{" "} + {shipment.estimatedArrivalDate !== "0001-01-01T00:00:00Z" + ? shipment.estimatedArrivalDate + : "Not available"} +

+
+ +
+

Buyer Information

+

+ Name: {buyer.buyerInsert.firstName}{" "} + {buyer.buyerInsert.lastName} +

+

+ Email: {buyer.buyerInsert.email} +

+

+ Phone: {buyer.buyerInsert.phone} +

+

+ Promo Emails:{" "} + {buyer.buyerInsert.receivePromoEmails ? "Yes" : "No"} +

+
+ +
+

Promo Code

+

+ Code: {promoCode.promoCodeInsert.code || "N/A"} +

+

+ Free Shipping:{" "} + {promoCode.promoCodeInsert.freeShipping ? "Yes" : "No"} +

+

+ Discount: $ + {promoCode.promoCodeInsert.discount.value} +

+

+ Expiration:{" "} + {promoCode.promoCodeInsert.expiration !== "0001-01-01T00:00:00Z" + ? promoCode.promoCodeInsert.expiration + : "N/A"} +

+
+
+ +
+
+

Billing Address

+

{billing.addressInsert.company}

+

{billing.addressInsert.addressLineOne}

+

{billing.addressInsert.addressLineTwo}

+

+ {billing.addressInsert.city}, {billing.addressInsert.state}{" "} + {billing.addressInsert.postalCode} +

+

{billing.addressInsert.country}

+
+ +
+

Shipping Address

+

{shipping.addressInsert.company}

+

{shipping.addressInsert.addressLineOne}

+

{shipping.addressInsert.addressLineTwo}

+

+ {shipping.addressInsert.city}, {shipping.addressInsert.state}{" "} + {shipping.addressInsert.postalCode} +

+

{shipping.addressInsert.country}

+
+
+
+ ); +} diff --git a/src/app/order/[uuid]/page.tsx b/src/app/order/[uuid]/page.tsx new file mode 100644 index 00000000..fa5fc2f7 --- /dev/null +++ b/src/app/order/[uuid]/page.tsx @@ -0,0 +1,21 @@ +import { serviceClient } from "@/lib/api"; + +import V0GenUi from "./V0GenUi"; + +interface Props { + params: { + uuid: string; + }; +} + +export default async function OrderPage({ params }: Props) { + const { uuid } = params; + + const response = await serviceClient.GetOrderByUUID({ orderUuid: uuid }); + + return ( +
+ +
+ ); +}