From 84e17eeff7b8349819f9367fb65d053c4fa0d927 Mon Sep 17 00:00:00 2001 From: sadmann7 Date: Fri, 15 Dec 2023 22:12:42 +0600 Subject: [PATCH] update list --- .../(checkout)/checkout/[storeId]/page.tsx | 30 +-- .../product/[productId]/loading.tsx | 2 +- src/components/checkout/cart-line-items.tsx | 6 +- src/components/checkout/checkout-shell.tsx | 6 +- src/components/placeholder-image.tsx | 7 +- .../skeletons/product-card-skeleton.tsx | 7 +- src/lib/fetchers/order.ts | 196 +++++++++--------- 7 files changed, 132 insertions(+), 122 deletions(-) diff --git a/src/app/(lobby)/(checkout)/checkout/[storeId]/page.tsx b/src/app/(lobby)/(checkout)/checkout/[storeId]/page.tsx index 6f9aed95f..dbf375dbe 100644 --- a/src/app/(lobby)/(checkout)/checkout/[storeId]/page.tsx +++ b/src/app/(lobby)/(checkout)/checkout/[storeId]/page.tsx @@ -14,6 +14,7 @@ import { cn, formatPrice } from "@/lib/utils" import { Button, buttonVariants } from "@/components/ui/button" import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer" import { ScrollArea } from "@/components/ui/scroll-area" +import { Separator } from "@/components/ui/separator" import { CartLineItems } from "@/components/checkout/cart-line-items" import { CheckoutForm } from "@/components/checkout/checkout-form" import { CheckoutShell } from "@/components/checkout/checkout-shell" @@ -55,7 +56,7 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) { const cartLineItems = await getCart({ storeId }) - const paymentIntent = createPaymentIntent({ + const paymentIntentPromise = createPaymentIntent({ storeId: store.id, items: cartLineItems, }) @@ -119,23 +120,26 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) { Details - + -
-
- Total ( - {cartLineItems.reduce( - (acc, item) => acc + item.quantity, - 0 - )} - ) +
+ +
+
+ Total ( + {cartLineItems.reduce( + (acc, item) => acc + item.quantity, + 0 + )} + ) +
+
{formatPrice(total)}
-
{formatPrice(total)}
@@ -154,7 +158,7 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) { />
diff --git a/src/app/(lobby)/(main)/@modal/(.)preview/product/[productId]/loading.tsx b/src/app/(lobby)/(main)/@modal/(.)preview/product/[productId]/loading.tsx index 0e0fc051e..3d459d42c 100644 --- a/src/app/(lobby)/(main)/@modal/(.)preview/product/[productId]/loading.tsx +++ b/src/app/(lobby)/(main)/@modal/(.)preview/product/[productId]/loading.tsx @@ -7,7 +7,7 @@ export default function ProductModalLoading() { return ( - +
diff --git a/src/components/checkout/cart-line-items.tsx b/src/components/checkout/cart-line-items.tsx index 60cb21adc..ea43f21cc 100644 --- a/src/components/checkout/cart-line-items.tsx +++ b/src/components/checkout/cart-line-items.tsx @@ -23,10 +23,10 @@ export function CartLineItems({ className, ...props }: CartLineItemsProps) { - const Wrapper = isScrollable ? ScrollArea : Slot + const Comp = isScrollable ? ScrollArea : Slot return ( - +
))}
- + ) } diff --git a/src/components/checkout/checkout-shell.tsx b/src/components/checkout/checkout-shell.tsx index 8471d9cfc..483bbeca9 100644 --- a/src/components/checkout/checkout-shell.tsx +++ b/src/components/checkout/checkout-shell.tsx @@ -12,7 +12,7 @@ import { cn } from "@/lib/utils" interface CheckoutShellProps extends React.PropsWithChildren> { storeStripeAccountId: string - paymentIntent: Promise<{ + paymentIntentPromise: Promise<{ clientSecret: string | null }> } @@ -20,7 +20,7 @@ interface CheckoutShellProps export function CheckoutShell({ children, storeStripeAccountId, - paymentIntent, + paymentIntentPromise, className, ...props }: CheckoutShellProps) { @@ -30,7 +30,7 @@ export function CheckoutShell({ ) // Calling createPaymentIntentAction at the client component to avoid stripe authentication error in server action - const { clientSecret } = React.use(paymentIntent) + const { clientSecret } = React.use(paymentIntentPromise) if (!clientSecret) { return ( diff --git a/src/components/placeholder-image.tsx b/src/components/placeholder-image.tsx index 612987691..5098ac760 100644 --- a/src/components/placeholder-image.tsx +++ b/src/components/placeholder-image.tsx @@ -7,10 +7,12 @@ import { Icons } from "@/components/icons" interface PlaceholderImageProps extends React.ComponentPropsWithoutRef { + isSkeleton?: boolean asChild?: boolean } export function PlaceholderImage({ + isSkeleton = false, asChild = false, className, ...props @@ -27,7 +29,10 @@ export function PlaceholderImage({ aria-label="Placeholder" role="img" aria-roledescription="placeholder" - className="flex h-full w-full items-center justify-center" + className={cn( + "flex h-full w-full items-center justify-center", + isSkeleton ? "animate-pulse" : "animate-none" + )} > - + - + - + + ) diff --git a/src/lib/fetchers/order.ts b/src/lib/fetchers/order.ts index e0b35db6f..94caaee16 100644 --- a/src/lib/fetchers/order.ts +++ b/src/lib/fetchers/order.ts @@ -59,104 +59,104 @@ export async function getOrderLineItems( // Temporary workaround for payment_intent.succeeded webhook event not firing in production // TODO: Remove this once the webhook is working - if (input.paymentIntent?.status === "succeeded") { - const cartId = Number(cookies().get("cartId")?.value) - - const cart = await db.query.carts.findFirst({ - columns: { - closed: true, - paymentIntentId: true, - clientSecret: true, - }, - where: eq(carts.id, cartId), - }) - - if (!cart || cart.closed) { - return lineItems - } - - if (!cart.clientSecret || !cart.paymentIntentId) { - return lineItems - } - - const payment = await db.query.payments.findFirst({ - columns: { - storeId: true, - stripeAccountId: true, - }, - where: eq(payments.storeId, input.storeId), - }) - - if (!payment?.stripeAccountId) { - return lineItems - } - - // Create new address in DB - const stripeAddress = input.paymentIntent.shipping?.address - - const newAddress = await db.insert(addresses).values({ - line1: stripeAddress?.line1, - line2: stripeAddress?.line2, - city: stripeAddress?.city, - state: stripeAddress?.state, - country: stripeAddress?.country, - postalCode: stripeAddress?.postal_code, - }) - - if (!newAddress.insertId) throw new Error("No address created.") - - // Create new order in db - await db.insert(orders).values({ - storeId: payment.storeId, - items: input.items as unknown as CheckoutItem[], - quantity: safeParsedItems.data.reduce( - (acc, item) => acc + item.quantity, - 0 - ), - amount: String(Number(input.paymentIntent.amount) / 100), - stripePaymentIntentId: input.paymentIntent.id, - stripePaymentIntentStatus: input.paymentIntent.status, - name: input.paymentIntent.shipping?.name, - email: input.paymentIntent.receipt_email, - addressId: Number(newAddress.insertId), - }) - - // Update product inventory in db - for (const item of safeParsedItems.data) { - const product = await db.query.products.findFirst({ - columns: { - id: true, - inventory: true, - }, - where: eq(products.id, item.productId), - }) - - if (!product) { - return lineItems - } - - const inventory = product.inventory - item.quantity - - if (inventory < 0) { - return lineItems - } - - await db - .update(products) - .set({ - inventory: product.inventory - item.quantity, - }) - .where(eq(products.id, item.productId)) - } - - await db - .update(carts) - .set({ - closed: true, - items: [], - }) - .where(eq(carts.paymentIntentId, cart.paymentIntentId)) - } + // if (input.paymentIntent?.status === "succeeded") { + // const cartId = Number(cookies().get("cartId")?.value) + + // const cart = await db.query.carts.findFirst({ + // columns: { + // closed: true, + // paymentIntentId: true, + // clientSecret: true, + // }, + // where: eq(carts.id, cartId), + // }) + + // if (!cart || cart.closed) { + // return lineItems + // } + + // if (!cart.clientSecret || !cart.paymentIntentId) { + // return lineItems + // } + + // const payment = await db.query.payments.findFirst({ + // columns: { + // storeId: true, + // stripeAccountId: true, + // }, + // where: eq(payments.storeId, input.storeId), + // }) + + // if (!payment?.stripeAccountId) { + // return lineItems + // } + + // // Create new address in DB + // const stripeAddress = input.paymentIntent.shipping?.address + + // const newAddress = await db.insert(addresses).values({ + // line1: stripeAddress?.line1, + // line2: stripeAddress?.line2, + // city: stripeAddress?.city, + // state: stripeAddress?.state, + // country: stripeAddress?.country, + // postalCode: stripeAddress?.postal_code, + // }) + + // if (!newAddress.insertId) throw new Error("No address created.") + + // // Create new order in db + // await db.insert(orders).values({ + // storeId: payment.storeId, + // items: input.items as unknown as CheckoutItem[], + // quantity: safeParsedItems.data.reduce( + // (acc, item) => acc + item.quantity, + // 0 + // ), + // amount: String(Number(input.paymentIntent.amount) / 100), + // stripePaymentIntentId: input.paymentIntent.id, + // stripePaymentIntentStatus: input.paymentIntent.status, + // name: input.paymentIntent.shipping?.name, + // email: input.paymentIntent.receipt_email, + // addressId: Number(newAddress.insertId), + // }) + + // // Update product inventory in db + // for (const item of safeParsedItems.data) { + // const product = await db.query.products.findFirst({ + // columns: { + // id: true, + // inventory: true, + // }, + // where: eq(products.id, item.productId), + // }) + + // if (!product) { + // return lineItems + // } + + // const inventory = product.inventory - item.quantity + + // if (inventory < 0) { + // return lineItems + // } + + // await db + // .update(products) + // .set({ + // inventory: product.inventory - item.quantity, + // }) + // .where(eq(products.id, item.productId)) + // } + + // await db + // .update(carts) + // .set({ + // closed: true, + // items: [], + // }) + // .where(eq(carts.paymentIntentId, cart.paymentIntentId)) + // } return lineItems } catch (err) {