Skip to content

Commit

Permalink
Add payout details and request functionality to account payouts
Browse files Browse the repository at this point in the history 
 • Implement AccountTitle and AccountContent components for better layout structure in payout pages
 • Add payout request form and action to create payout requests
 • Introduce Skeleton component for loading states in payout account and balance components
 • Reorganize payout logs table, adding order view and adjusting column order
 • Include new payout request route and action to handle payout creation
  • Loading branch information
@jamalsoueidan
jamalsoueidan committed Apr 1, 2024
1 parent 67d560f commit f8e8e3e
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 168 deletions.
35 changes: 20 additions & 15 deletions app/routes/($locale).account.payouts.$id.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {Await, useLoaderData} from '@remix-run/react';
import {format} from 'date-fns';
import {da} from 'date-fns/locale';
import {Suspense} from 'react';
import {AccountContent} from '~/components/account/AccountContent';
import {AccountTitle} from '~/components/account/AccountTitle';
import {getBookingShopifyApi} from '~/lib/api/bookingShopifyApi';
import type {
CustomerPayoutGetResponse,
Expand Down Expand Up @@ -46,10 +48,16 @@ export default function AccountPayoutsId() {
const data = useLoaderData<typeof loader>();

return (
<Stack align="flex-start">
<Payout data={data.payout} />
<PayoutLogs data={data.payoutLogs} />
</Stack>
<>
<AccountTitle linkBack="../" heading="Visning af udbetaling" />

<AccountContent>
<Stack align="flex-start">
<Payout data={data.payout} />
<PayoutLogs data={data.payoutLogs} />
</Stack>
</AccountContent>
</>
);
}

Expand All @@ -62,10 +70,11 @@ const PayoutLogs = ({data}: {data: Promise<CustomerPayoutLogResponse>}) => {
<Table>
<Table.Thead>
<Table.Tr>
<Table.Th>#</Table.Th>
<Table.Th>Type</Table.Th>
<Table.Th>Title</Table.Th>
<Table.Th>Dato</Table.Th>
<Table.Th>Beløb</Table.Th>
<Table.Th>Dato</Table.Th>
</Table.Tr>
</Table.Thead>

Expand All @@ -74,18 +83,14 @@ const PayoutLogs = ({data}: {data: Promise<CustomerPayoutLogResponse>}) => {
{payload.results.map((payout, index) => {
return (
<Table.Tr key={payout._id}>
<Table.Td>Vis order</Table.Td>
{isShipping(payout.referenceDocument) ? (
<>
<Table.Td>Forsendelse</Table.Td>
<Table.Td>
{payout.referenceDocument.origin.name} -{' '}
{payout.referenceDocument.destination.name}
</Table.Td>
<Table.Td>
{format(new Date(payout.orderCreatedAt), 'PPPP', {
locale: da,
})}
</Table.Td>
<Table.Td>
{payout.referenceDocument.cost.value} DKK
</Table.Td>
Expand All @@ -96,16 +101,16 @@ const PayoutLogs = ({data}: {data: Promise<CustomerPayoutLogResponse>}) => {
<Table.Td>
{payout.referenceDocument.title}
</Table.Td>
<Table.Td>
{format(new Date(payout.orderCreatedAt), 'PPPP', {
locale: da,
})}
</Table.Td>
<Table.Td>
{payout.referenceDocument.price} DKK
</Table.Td>
</>
)}
<Table.Td>
{format(new Date(payout.orderCreatedAt), 'PPPP', {
locale: da,
})}
</Table.Td>
</Table.Tr>
);
})}
Expand Down
156 changes: 85 additions & 71 deletions app/routes/($locale).account.payouts._index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
Button,
Card,
SimpleGrid,
Skeleton,
Stack,
Table,
Text,
Expand All @@ -13,6 +14,8 @@ import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {format} from 'date-fns';
import {da} from 'date-fns/locale';
import {Suspense} from 'react';
import {AccountContent} from '~/components/account/AccountContent';
import {AccountTitle} from '~/components/account/AccountTitle';
import {getBookingShopifyApi} from '~/lib/api/bookingShopifyApi';
import type {
CustomerPayoutAccountGetResponse,
Expand Down Expand Up @@ -42,72 +45,78 @@ export default function AccountPayoutsIndex() {
const data = useLoaderData<typeof loader>();

return (
<Stack gap="xl">
<SimpleGrid cols={{base: 1, sm: 2, md: 3}}>
<PayoutAccount payoutAccount={data.payoutAccount} />
<PayoutBalance payoutBalance={data.payoutBalance} />
</SimpleGrid>
<>
<AccountTitle heading="Udbetalinger" />

<div>
<Title order={3}>Historik</Title>
<Text c="dimmed">Listen af alle udbetalinger der er foretagt</Text>
</div>
<AccountContent>
<Stack gap="xl">
<SimpleGrid cols={{base: 1, sm: 2}}>
<PayoutAccount payoutAccount={data.payoutAccount} />
<PayoutBalance payoutBalance={data.payoutBalance} />
</SimpleGrid>

<Suspense fallback={<>Henter udbetalingshistorik...</>}>
<Await resolve={data.payouts}>
{({payload}) => {
return (
<Table.ScrollContainer minWidth={500}>
<Table>
<Table.Thead>
<Table.Tr>
<Table.Th>Dato</Table.Th>
<Table.Th>Status</Table.Th>
<Table.Th>Beløb</Table.Th>
<Table.Th>-</Table.Th>
</Table.Tr>
</Table.Thead>
<div>
<Title order={3}>Historik</Title>
<Text c="dimmed">Listen af alle udbetalinger der er foretagt</Text>
</div>

{payload.totalCount > 0 ? (
<Table.Tbody>
{payload.results.map((payout) => (
<Table.Tr key={payout.date}>
<Table.Td>
{format(new Date(), 'yyyy-MM-dd', {locale: da})}
</Table.Td>
<Table.Td>
<Badge color="green">{payout.status}</Badge>
</Table.Td>
<Table.Td>{payout.amount} DKK</Table.Td>
<Table.Td>
<Button
variant="default"
size="sm"
component={Link}
to={`${payout._id}`}
>
Vis detailjer
</Button>
</Table.Td>
<Suspense fallback={<>Henter udbetalingshistorik...</>}>
<Await resolve={data.payouts}>
{({payload}) => {
return (
<Table.ScrollContainer minWidth={500}>
<Table>
<Table.Thead>
<Table.Tr>
<Table.Th>Dato</Table.Th>
<Table.Th>Status</Table.Th>
<Table.Th>Beløb</Table.Th>
<Table.Th align="right"></Table.Th>
</Table.Tr>
))}
</Table.Tbody>
) : (
<Table.Tbody>
<Table.Tr>
<Table.Td colSpan={4}>
Der er ikke oprettet udbetalinger endnu!
</Table.Td>
</Table.Tr>
</Table.Tbody>
)}
</Table>
</Table.ScrollContainer>
);
}}
</Await>
</Suspense>
</Stack>
</Table.Thead>

{payload.totalCount > 0 ? (
<Table.Tbody>
{payload.results.map((payout) => (
<Table.Tr key={payout.date}>
<Table.Td>
{format(new Date(), 'yyyy-MM-dd', {locale: da})}
</Table.Td>
<Table.Td>
<Badge color="green">{payout.status}</Badge>
</Table.Td>
<Table.Td>{payout.amount} DKK</Table.Td>
<Table.Td align="right">
<Button
variant="default"
size="sm"
component={Link}
to={`${payout._id}`}
>
Vis detailjer
</Button>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
) : (
<Table.Tbody>
<Table.Tr>
<Table.Td colSpan={4}>
Der er ikke oprettet udbetalinger endnu!
</Table.Td>
</Table.Tr>
</Table.Tbody>
)}
</Table>
</Table.ScrollContainer>
);
}}
</Await>
</Suspense>
</Stack>
</AccountContent>
</>
);
}

Expand All @@ -117,17 +126,22 @@ const PayoutBalance = ({
payoutBalance: Promise<CustomerPayoutBalanceResponse>;
}) => {
return (
<Suspense fallback={<>asd</>}>
<Suspense fallback={<Skeleton height="100%" width="100%" />}>
<Await resolve={payoutBalance}>
{({payload}) => {
return (
<Card withBorder>
<Stack gap="xs">
<Title order={3}>Balance</Title>
<Text>Total: {payload.totalAmount} DKK</Text>
<Text>Kørsel: {payload.totalShippingAmount} DKK</Text>
<Text>Behandlinger: {payload.totalLineItems}</Text>
</Stack>
<Card withBorder component={Stack} gap="xs" align="flex-start">
<Title order={3}>Balance</Title>
<Text>Total: {payload.totalAmount} DKK</Text>
<Text>Kørsel: {payload.totalShippingAmount} DKK</Text>
<Text>Behandlinger: {payload.totalLineItems}</Text>
{payload.totalAmount > 0 ? (
<Form method="post" action="request">
<Button type="submit" variant="light">
Send anmodning
</Button>
</Form>
) : null}
</Card>
);
}}
Expand All @@ -142,7 +156,7 @@ const PayoutAccount = ({
payoutAccount: Promise<CustomerPayoutAccountGetResponse>;
}) => {
return (
<Suspense fallback={<>asd</>}>
<Suspense fallback={<Skeleton height="100%" width="100%" />}>
<Await resolve={payoutAccount}>
{({payload}) => {
return (
Expand Down
Loading

0 comments on commit f8e8e3e

Please sign in to comment.