Skip to content

Commit

Permalink
update list
Browse files Browse the repository at this point in the history
  • Loading branch information
@sadmann7
sadmann7 committed Dec 15, 2023
1 parent b3daed2 commit 84e17ee
Show file tree
Hide file tree
Showing 7 changed files with 132 additions and 122 deletions.
30 changes: 17 additions & 13 deletions src/app/(lobby)/(checkout)/checkout/[storeId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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,
})
Expand Down Expand Up @@ -119,23 +120,26 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) {
Details
</Button>
</DrawerTrigger>
<DrawerContent className="flex h-[80%] flex-col space-y-5 bg-zinc-50 py-8 text-zinc-950">
<DrawerContent className="mx-auto flex h-[82%] w-full max-w-4xl flex-col space-y-6 border pb-6 pt-8">
<CartLineItems
items={cartLineItems}
variant="minimal"
isEditable={false}
className="container max-w-6xl"
className="container h-full flex-1 pr-8"
/>
<div className="container flex max-w-6xl pr-6 font-medium">
<div className="flex-1">
Total (
{cartLineItems.reduce(
(acc, item) => acc + item.quantity,
0
)}
)
<div className="container space-y-4 pr-8">
<Separator />
<div className="flex font-medium">
<div className="flex-1">
Total (
{cartLineItems.reduce(
(acc, item) => acc + item.quantity,
0
)}
)
</div>
<div>{formatPrice(total)}</div>
</div>
<div>{formatPrice(total)}</div>
</div>
</DrawerContent>
</Drawer>
Expand All @@ -154,7 +158,7 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) {
/>
</div>
<CheckoutShell
paymentIntent={paymentIntent}
paymentIntentPromise={paymentIntentPromise}
storeStripeAccountId={store.stripeAccountId}
className="h-full w-full flex-1 bg-white pb-12 pt-10 lg:flex-initial lg:pl-12 lg:pt-16"
>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(lobby)/(main)/@modal/(.)preview/product/[productId]/loading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function ProductModalLoading() {
return (
<DialogShell className="flex flex-col gap-2 overflow-visible sm:flex-row">
<Skeleton className="absolute right-10 top-4 h-4 w-4" />
<PlaceholderImage ratio={16 / 9} className="rounded-none" />
<PlaceholderImage ratio={16 / 9} className="rounded-none" isSkeleton />
<div className="w-full space-y-8 p-6 sm:p-10">
<div className="space-y-2.5">
<Skeleton className="h-7 w-1/2" />
Expand Down
6 changes: 3 additions & 3 deletions src/components/checkout/cart-line-items.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export function CartLineItems({
className,
...props
}: CartLineItemsProps) {
const Wrapper = isScrollable ? ScrollArea : Slot
const Comp = isScrollable ? ScrollArea : Slot

return (
<Wrapper className="h-full">
<Comp className="h-full">
<div
className={cn(
"flex w-full flex-col gap-5",
Expand Down Expand Up @@ -112,6 +112,6 @@ export function CartLineItems({
</div>
))}
</div>
</Wrapper>
</Comp>
)
}
6 changes: 3 additions & 3 deletions src/components/checkout/checkout-shell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ import { cn } from "@/lib/utils"
interface CheckoutShellProps
extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>> {
storeStripeAccountId: string
paymentIntent: Promise<{
paymentIntentPromise: Promise<{
clientSecret: string | null
}>
}

export function CheckoutShell({
children,
storeStripeAccountId,
paymentIntent,
paymentIntentPromise,
className,
...props
}: CheckoutShellProps) {
Expand All @@ -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 (
Expand Down
7 changes: 6 additions & 1 deletion src/components/placeholder-image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import { Icons } from "@/components/icons"

interface PlaceholderImageProps
extends React.ComponentPropsWithoutRef<typeof AspectRatio> {
isSkeleton?: boolean
asChild?: boolean
}

export function PlaceholderImage({
isSkeleton = false,
asChild = false,
className,
...props
Expand All @@ -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"
)}
>
<Icons.placeholder
className="h-9 w-9 text-muted-foreground"
Expand Down
7 changes: 4 additions & 3 deletions src/components/skeletons/product-card-skeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,16 @@ export function ProductCardSkeleton({
>
<CardHeader className="border-b p-0">
<AspectRatio ratio={4 / 3}>
<PlaceholderImage asChild className="rounded-none" />
<PlaceholderImage className="rounded-none" isSkeleton asChild />
</AspectRatio>
</CardHeader>
<CardContent className="space-y-1.5 p-4">
<CardContent className="space-y-2.5 p-4">
<Skeleton className="h-4 w-1/2" />
<Skeleton className="h-4 w-1/6" />
</CardContent>
<CardFooter className="p-4 pt-1">
<CardFooter className="space-x-2 p-4 pt-1.5">
<Skeleton className="h-8 w-full" />
<Skeleton className="h-8 w-8 shrink-0" />
</CardFooter>
</Card>
)
Expand Down
196 changes: 98 additions & 98 deletions src/lib/fetchers/order.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

1 comment on commit 84e17ee

@vercel
Copy link

@vercel vercel bot commented on 84e17ee Dec 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

skateshop – ./

skateshop.sadmn.com
skateshop-git-main-sadmann7.vercel.app
skateshop-sadmann7.vercel.app
skateshop13.vercel.app

Please sign in to comment.