Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(console): Billing seat bugs #2779

Merged
merged 4 commits into from
Nov 30, 2023
Merged

fix(console): Billing seat bugs #2779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8163ab8
fix(console): Billing seat bugs
Cosmin-Parvulescu Nov 30, 2023
fd5129f
Refactor billing display logic and retrieve upcoming invoices
Cosmin-Parvulescu Nov 30, 2023
0e1074c
Removed sorting and refactored upcoming invoice values source of truth
Cosmin-Parvulescu Nov 30, 2023
7a9acc3
Add max members check in acceptIdentityGroupMemberInvitation
Cosmin-Parvulescu Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
230 changes: 105 additions & 125 deletions apps/console/app/routes/__layout/billing/groups/$groupID.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,6 @@ export default () => {

const hydrated = useHydrated()

const [invoiceSort, setInvoiceSort] = useState<'asc' | 'desc'>('desc')

const group = groups.find((g) => g.URN === groupURN)

return (
Expand Down Expand Up @@ -417,37 +415,13 @@ export default () => {
<thead className="bg-gray-50 rounded-t-lg">
<tr className="rounded-t-lg">
<th className="px-6 py-3 text-left rounded-tl-lg">
<button
className="flex flex-row gap-2"
onClick={() => {
setInvoiceSort(
invoiceSort === 'desc' ? 'asc' : 'desc'
)
}}
<Text
size="xs"
weight="medium"
className="uppercase text-gray-500"
>
<Text
size="xs"
weight="medium"
className="uppercase text-gray-500"
>
Date
</Text>

<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.00005 2.40002C8.21222 2.40002 8.41571 2.48431 8.56573 2.63434L10.9657 5.03434C11.2782 5.34676 11.2782 5.85329 10.9657 6.16571C10.6533 6.47813 10.1468 6.47813 9.83436 6.16571L8.00005 4.3314L6.16573 6.16571C5.85331 6.47813 5.34678 6.47813 5.03436 6.16571C4.72194 5.85329 4.72194 5.34676 5.03436 5.03434L7.43436 2.63434C7.58439 2.48431 7.78788 2.40002 8.00005 2.40002ZM5.03436 9.83434C5.34678 9.52192 5.85331 9.52192 6.16573 9.83434L8.00005 11.6687L9.83436 9.83434C10.1468 9.52192 10.6533 9.52192 10.9657 9.83434C11.2782 10.1468 11.2782 10.6533 10.9657 10.9657L8.56573 13.3657C8.25331 13.6781 7.74678 13.6781 7.43436 13.3657L5.03436 10.9657C4.72194 10.6533 4.72194 10.1468 5.03436 9.83434Z"
fill="#9CA3AF"
/>
</svg>
</button>
Date
</Text>
</th>
<th className="px-6 py-3 text-left">
<Text
Expand All @@ -471,109 +445,115 @@ export default () => {
</thead>

<tbody className="border-t border-gray-200">
{invoices
.sort((a, b) =>
invoiceSort === 'desc'
? b.timestamp - a.timestamp
: a.timestamp - b.timestamp
)
.map((invoice, idx) => (
<tr
key={idx}
className={`${
idx === invoices.length - 1 ? '' : 'border-b'
} border-gray-200`}
>
<td className="px-6 py-3">
{hydrated && (
<div className="flex flex-row items-center space-x-3">
<Text size="sm" className="gray-500">
{hydrated &&
new Date(invoice.timestamp).toLocaleString(
'default',
{
day: '2-digit',
month: 'short',
year: 'numeric',
}
)}
{invoices.map((invoice, idx) => (
<tr
key={idx}
className={`${
idx === invoices.length - 1 ? '' : 'border-b'
} border-gray-200`}
>
<td className="px-6 py-3">
{hydrated && (
<div className="flex flex-row items-center space-x-3">
<Text size="sm">
{hydrated &&
new Date(invoice.timestamp).toLocaleString(
'default',
{
day: '2-digit',
month: 'short',
year: 'numeric',
}
)}
</Text>

{(invoice.status === 'open' ||
invoice.status === 'uncollectible') && (
<div
className="rounded-xl bg-yellow-200 flex
flex-row items-center space-x-1 p-1"
>
<IoWarningOutline className="text-black w-4 h-4" />
<Text size="xs" className="text-black">
Payment Error
</Text>
</div>
)}
</div>
)}
</td>

<td className="px-6 py-3">
<Text size="sm" className="">
$
{invoice.amount < 0
? '0.00'
: invoice.amount.toFixed(2)}
{invoice.status !== 'scheduled' &&
invoice.amount < 0 && (
<Text
size="xs"
className="text-gray-500"
type="span"
>
{' '}
(current credit: $
{(-1 * invoice.amount).toFixed(2)})
</Text>
)}
</Text>
</td>

{(invoice.status === 'open' ||
invoice.status === 'uncollectible') && (
<div
className="rounded-xl bg-yellow-200 flex
flex-row items-center space-x-1 p-1"
>
<IoWarningOutline className="text-black w-4 h-4" />
<Text size="xs" className="text-black">
Payment Error
</Text>
</div>
)}
</div>
)}
</td>

<td className="px-6 py-3">
<Text size="sm" className="gray-500">
{invoice.amount < 0 ? '-' : ''}$
{invoice.amount < 0
? (invoice.amount * -1).toFixed(2)
: invoice.amount.toFixed(2)}
</Text>
</td>

<td className="px-6 py-3">
<Text size="xs" className="test-gray-500">
{invoice.status && _.startCase(invoice.status)}
</Text>
{invoice.status === 'paid' && (
<td className="px-6 py-3">
<Text size="xs">
{invoice.status && _.startCase(invoice.status)}
</Text>
{invoice.status === 'paid' && (
<a
href={invoice.url}
target="_blank"
rel="noreferrer"
>
<Text size="xs" className="text-indigo-500">
View Invoice
</Text>
</a>
)}
{(invoice.status === 'open' ||
invoice.status === 'uncollectible') && (
<div className="flex flex-row space-x-2">
<a
href={invoice.url}
target="_blank"
rel="noreferrer"
>
<Text size="xs" className="text-indigo-500">
View Invoice
Update Payment
</Text>
</a>
)}
{(invoice.status === 'open' ||
invoice.status === 'uncollectible') && (
<div className="flex flex-row space-x-2">
<a
href={invoice.url}
target="_blank"
rel="noreferrer"
>
<Text size="xs" className="text-indigo-500">
Update Payment
</Text>
</a>
<button
type="button"
onClick={() => {
submit(
{
invoice_id: invoice.id,
},
{
method: 'post',
action: 'billing/cancel',
}
)
}}
>
<Text size="xs" className="text-red-500">
Cancel Payment
</Text>
</button>
</div>
)}
</td>
</tr>
))}
<button
type="button"
onClick={() => {
submit(
{
invoice_id: invoice.id,
},
{
method: 'post',
action: 'billing/cancel',
}
)
}}
>
<Text size="xs" className="text-red-500">
Cancel Payment
</Text>
</button>
</div>
)}
</td>
</tr>
))}
</tbody>
</table>
</main>
Expand Down
Loading
Loading