Skip to content

Commit

Permalink
clients/sales: polish sales page
Browse files Browse the repository at this point in the history
  • Loading branch information
emilwidlund committed Dec 17, 2024
1 parent c621c2f commit bb58644
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { formatCurrencyAndAmount } from '@polarkit/lib/money'
import { Separator } from '@radix-ui/react-dropdown-menu'
import Markdown from 'markdown-to-jsx'
import Link from 'next/link'
import { FormattedDateTime } from 'polarkit/components/ui/atoms'
import { FormattedDateTime, Pill } from 'polarkit/components/ui/atoms'
import Button from 'polarkit/components/ui/atoms/button'
import ShadowBox from 'polarkit/components/ui/atoms/shadowbox'
import React, { PropsWithChildren } from 'react'
Expand All @@ -23,25 +23,28 @@ interface OrderProductItemProps {
}

const OrderProductItem = ({ product }: OrderProductItemProps) => {


return (
<div className="flex bg-gray-100 dark:bg-polar-800 flex-row items-center gap-6 border border-gray-200 dark:border-polar-700 rounded-3xl p-4">
<div className="flex bg-white dark:bg-polar-800 flex-row items-center gap-6 border border-gray-200 dark:border-polar-700 rounded-3xl p-4">
<ProductThumbnail product={product} size="medium" />
<div className="flex flex-col gap-2">
<h3 className="text-xl">{product.name}</h3>
{product.description && (
<div
className={twMerge(
'prose dark:prose-invert dark:text-polar-500 flex-shrink leading-normal text-gray-500',
'max-w-96 truncate',
)}
>
<Markdown options={markdownOptionsJustText}>
{product.description}
</Markdown>
</div>
<div className='flex flex-row items-center gap-x-4'>
<h3 className="text-xl">{product.name}</h3>
{product.is_archived && (
<Pill color='gray'>Archived</Pill>
)}
</div>
{product.description && (
<div
className={twMerge(
'prose dark:prose-invert dark:text-polar-500 flex-shrink leading-normal text-gray-500',
'max-w-96 truncate',
)}
>
<Markdown options={markdownOptionsJustText}>
{product.description}
</Markdown>
</div>
)}
</div>
</div>
)
Expand All @@ -64,7 +67,6 @@ const ClientPage: React.FC<ClientPageProps> = ({
return null
}


return (
<DashboardBody
title={
Expand All @@ -76,18 +78,18 @@ const ClientPage: React.FC<ClientPageProps> = ({
className='gap-y-8'
contextView={<CustomerModal customer={order.customer} />}
>
<ShadowBox className="flex flex-col gap-8">
<ShadowBox className="flex flex-col bg-gray-100 gap-8">
<OrderProductItem product={product} />
<div className="flex flex-row gap-4">
<Link href={`/dashboard/${organization.slug}/products/${product.id}`}>
{!product.is_archived && <Link href={`/dashboard/${organization.slug}/products/${product.id}`}>
<Button>View Product</Button>
</Link>
</Link>}
<Link href={`/dashboard/${organization.slug}/sales?product_id=${product.id}`}>
<Button variant="secondary">All Product Orders</Button>
<Button variant="secondary" className='bg-gray-300 hover:bg-gray-200'>All Product Orders</Button>
</Link>
</div>
</ShadowBox>
<ShadowBox className="flex flex-col gap-8">
<ShadowBox className="flex flex-col gap-8 bg-gray-100">
<h2 className="text-xl">Order Details</h2>
<div className="flex flex-col gap-1">
<DetailRow title="Order ID">
Expand Down Expand Up @@ -137,7 +139,7 @@ const ClientPage: React.FC<ClientPageProps> = ({
</ShadowBox>

{(customFields?.items?.length ?? 0) > 0 && (
<ShadowBox className="flex flex-col gap-8">
<ShadowBox className="flex flex-col gap-8 bg-gray-100">
<h3 className="text-lg">Custom Fields</h3>
<div className="flex flex-col gap-2">
{customFields?.items?.map((field) => (
Expand Down
4 changes: 2 additions & 2 deletions clients/apps/web/src/components/Products/EditProductPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -273,9 +273,9 @@ export const EditProductPage = ({
>
Save Product
</Button>
<Button variant="destructive" size="lg" onClick={showArchiveModal}>
{!product.is_archived && <Button variant="secondary" size="lg" onClick={showArchiveModal}>
Archive
</Button>
</Button>}
</div>
</div>
</DashboardBody>
Expand Down
10 changes: 5 additions & 5 deletions clients/apps/web/src/components/Widgets/OrdersWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -78,25 +78,25 @@ export const OrdersWidget = ({ className }: OrdersWidgetProps) => {
]

return (
<Link
<div
className={twMerge('hidden h-80 md:block', className)}
href={`/dashboard/${org.slug}/sales`}
>
{(orders.data?.items.length ?? 0) > 0 ? (
<div className="relative h-full">
{orders.data?.items
?.slice()
.reverse()
.map((order, index) => (
<div
<Link
key={order.id}
href={`/dashboard/${org.slug}/sales/${order.id}`}
className={twMerge(
stackingClassNames[index],
'rounded-4xl dark:bg-polar-900 dark:border-polar-700 peer absolute w-full border border-white transition-all duration-300 will-change-transform hover:z-10 hover:scale-100 peer-hover:opacity-0',
)}
>
<OrderCard order={order} />
</div>
</Link>
))}
</div>
) : (
Expand All @@ -108,6 +108,6 @@ export const OrdersWidget = ({ className }: OrdersWidgetProps) => {
<h3>No orders found</h3>
</Card>
)}
</Link>
</div>
)
}

0 comments on commit bb58644

Please sign in to comment.