Skip to content

Commit 8818410

Browse files
pieterbeulquepieterbeulque
authored
Avoid using AmountLabel when no interval is involved (#7646)
1 parent 7be86e8 commit 8818410

File tree

8 files changed

+26
-113
lines changed

8 files changed

+26
-113
lines changed

‎clients/apps/web/src/components/Customer/CustomerContextView.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useMetrics } from '@/hooks/queries/metrics'
22
import { api } from '@/utils/client'
33
import { CONFIG } from '@/utils/config'
4+
import { formatAccountingFriendlyCurrency } from '@/utils/formatters'
45
import { schemas } from '@polar-sh/client'
56
import Avatar from '@polar-sh/ui/components/atoms/Avatar'
67
import Button from '@polar-sh/ui/components/atoms/Button'
@@ -12,7 +13,6 @@ import Link from 'next/link'
1213
import { useCallback, useState } from 'react'
1314
import { InlineModal } from '../Modal/InlineModal'
1415
import { useModal } from '../Modal/useModal'
15-
import AmountLabel from '../Shared/AmountLabel'
1616
import { DetailRow } from '../Shared/DetailRow'
1717
import { toast } from '../Toast/use-toast'
1818
import { CustomerStatBox } from './CustomerStatBox'
@@ -87,13 +87,10 @@ export const CustomerContextView = ({
8787
</Link>
8888
<div className="flex flex-row justify-between gap-4">
8989
<CustomerStatBox title="Cumulative Revenue">
90-
<AmountLabel
91-
amount={
92-
metrics.data?.periods[metrics.data.periods.length - 1]
93-
.cumulative_revenue ?? 0
94-
}
95-
currency="USD"
96-
/>
90+
{formatAccountingFriendlyCurrency(
91+
metrics.data?.periods[metrics.data.periods.length - 1]
92+
.cumulative_revenue ?? 0,
93+
)}
9794
</CustomerStatBox>
9895
<CustomerStatBox title="First Seen">
9996
<FormattedDateTime datetime={customer.created_at} />

‎clients/apps/web/src/components/Customer/CustomerPage.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,6 @@ export const CustomerPage: React.FC<CustomerPageProps> = ({
231231
original.amount && original.currency ? (
232232
<AmountLabel
233233
amount={original.amount}
234-
currency={original.currency}
235234
interval={original.recurring_interval}
236235
intervalCount={original.recurring_interval_count}
237236
/>
@@ -289,12 +288,8 @@ export const CustomerPage: React.FC<CustomerPageProps> = ({
289288
{
290289
header: 'Amount',
291290
accessorKey: 'amount',
292-
cell: ({ row: { original } }) => (
293-
<AmountLabel
294-
amount={original.net_amount}
295-
currency={original.currency}
296-
/>
297-
),
291+
cell: ({ row: { original } }) =>
292+
formatCurrency(original.net_amount),
298293
},
299294
{
300295
header: '',

‎clients/apps/web/src/components/CustomerPortal/CurrentPeriodOverview.tsx‎

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useCustomerSubscriptionChargePreview } from '@/hooks/queries/customerPortal'
2+
import { formatCurrency } from '@/utils/formatters'
23
import { Client, schemas } from '@polar-sh/client'
34
import { getThemePreset } from '@polar-sh/ui/hooks/theming'
45
import { twMerge } from 'tailwind-merge'
56
import ProductPriceLabel from '../Products/ProductPriceLabel'
6-
import AmountLabel from '../Shared/AmountLabel'
77

88
interface CurrentPeriodOverviewProps {
99
subscription: schemas['CustomerSubscription']
@@ -112,11 +112,7 @@ export const CurrentPeriodOverview = ({
112112
{meter.meter.name}
113113
</span>
114114
<span className="font-medium">
115-
<AmountLabel
116-
amount={meter.amount}
117-
currency={subscription.currency}
118-
minimumFractionDigits={meter.amount % 100 === 0 ? 0 : 2}
119-
/>
115+
{formatCurrency(meter.amount)}
120116
</span>
121117
</div>
122118
))}
@@ -127,45 +123,23 @@ export const CurrentPeriodOverview = ({
127123
{(hasTaxes || hasDiscount) && (
128124
<div className="dark:text-polar-500 mb-1.5 flex items-center justify-between text-gray-500">
129125
<span>Subtotal</span>
130-
<span>
131-
<AmountLabel
132-
amount={subscriptionPreview.subtotal_amount}
133-
currency={subscription.currency}
134-
minimumFractionDigits={
135-
subscriptionPreview.subtotal_amount % 100 === 0 ? 0 : 2
136-
}
137-
/>
138-
</span>
126+
<span>{formatCurrency(subscriptionPreview.subtotal_amount)}</span>
139127
</div>
140128
)}
141129

142130
{hasDiscount && (
143131
<div className="dark:text-polar-500 mb-1 flex items-center justify-between text-gray-500">
144132
<span>Discount</span>
145133
<span>
146-
<AmountLabel
147-
amount={-1 * subscriptionPreview.discount_amount}
148-
currency={subscription.currency}
149-
minimumFractionDigits={
150-
subscriptionPreview.discount_amount % 100 === 0 ? 0 : 2
151-
}
152-
/>
134+
{formatCurrency(-1 * subscriptionPreview.discount_amount)}
153135
</span>
154136
</div>
155137
)}
156138

157139
{hasTaxes && (
158140
<div className="dark:text-polar-500 mb-1 flex items-center justify-between text-gray-500">
159141
<span>Taxes</span>
160-
<span>
161-
<AmountLabel
162-
amount={subscriptionPreview.tax_amount}
163-
currency={subscription.currency}
164-
minimumFractionDigits={
165-
subscriptionPreview.tax_amount % 100 === 0 ? 0 : 2
166-
}
167-
/>
168-
</span>
142+
<span>{formatCurrency(subscriptionPreview.tax_amount)}</span>
169143
</div>
170144
)}
171145

@@ -175,13 +149,7 @@ export const CurrentPeriodOverview = ({
175149
</span>
176150
<span className="text-lg font-semibold">
177151
{subscriptionPreview ? (
178-
<AmountLabel
179-
amount={subscriptionPreview.total_amount}
180-
currency={subscription.currency}
181-
minimumFractionDigits={
182-
subscriptionPreview.total_amount % 100 === 0 ? 0 : 2
183-
}
184-
/>
152+
formatCurrency(subscriptionPreview.total_amount)
185153
) : (
186154
<span className="dark:bg-polar-700 animate-pulse rounded-md bg-gray-50 text-gray-500/0 dark:text-gray-400">
187155
Loading…

‎clients/apps/web/src/components/CustomerPortal/CustomerPortalSubscription.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@ const CustomerPortalSubscription = ({
170170
subscription.amount && subscription.currency ? (
171171
<AmountLabel
172172
amount={subscription.amount}
173-
currency={subscription.currency}
174173
interval={subscription.recurring_interval}
175174
intervalCount={subscription.recurring_interval_count}
176175
/>

‎clients/apps/web/src/components/Products/ProductPriceLabel.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ function isSeatBasedPrice(
1515
return price.amount_type === 'seat_based'
1616
}
1717

18-
const ProductPriceLabel: React.FC<ProductPriceLabelProps> = ({ product }) => {
18+
const ProductPriceLabel: React.FC<ProductPriceLabelProps> = ({
19+
product,
20+
}: ProductPriceLabelProps) => {
1921
const staticPrice = product.prices.find(({ amount_type }) =>
2022
['fixed', 'custom', 'free', 'seat_based'].includes(amount_type),
2123
)
@@ -28,7 +30,6 @@ const ProductPriceLabel: React.FC<ProductPriceLabelProps> = ({ product }) => {
2830
return (
2931
<AmountLabel
3032
amount={staticPrice.price_amount}
31-
currency={staticPrice.price_currency}
3233
interval={
3334
isLegacyRecurringPrice(staticPrice)
3435
? staticPrice.recurring_interval
@@ -54,7 +55,6 @@ const ProductPriceLabel: React.FC<ProductPriceLabelProps> = ({ product }) => {
5455
)}
5556
<AmountLabel
5657
amount={firstTier.price_per_seat}
57-
currency={staticPrice.price_currency}
5858
interval={product.recurring_interval || undefined}
5959
/>
6060
<span className="dark:text-polar-500 text-xs text-gray-500">

‎clients/apps/web/src/components/Shared/AmountLabel.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1+
import { formatCurrency } from '@/utils/formatters'
12
import { schemas } from '@polar-sh/client'
2-
import { formatCurrencyAndAmount } from '@polar-sh/ui/lib/money'
33
import { useMemo } from 'react'
44

55
interface AmountLabelProps {
66
amount: number
7-
currency: string
87
interval?: schemas['SubscriptionRecurringInterval']
98
intervalCount?: number | null
10-
minimumFractionDigits?: number
119
}
1210

1311
const ordinalRules = new Intl.PluralRules('en', { type: 'ordinal' })
@@ -29,11 +27,9 @@ const ordinal = (number: number): string => {
2927

3028
const AmountLabel: React.FC<AmountLabelProps> = ({
3129
amount,
32-
currency,
3330
interval,
3431
intervalCount,
35-
minimumFractionDigits = 0,
36-
}) => {
32+
}: AmountLabelProps) => {
3733
const intervalDisplay = useMemo(() => {
3834
if (!interval) {
3935
return ''
@@ -59,7 +55,7 @@ const AmountLabel: React.FC<AmountLabelProps> = ({
5955

6056
return (
6157
<div className="flex flex-row items-baseline gap-x-1">
62-
{formatCurrencyAndAmount(amount, currency, minimumFractionDigits)}
58+
{formatCurrency(amount)}
6359
<span className="text-[max(12px,0.5em)]">{intervalDisplay}</span>
6460
</div>
6561
)

‎clients/apps/web/src/components/Subscriptions/CustomerSubscriptionDetails.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,8 @@ const CustomerSubscriptionDetails = ({
143143
)}
144144
<AmountLabel
145145
amount={subscription.amount}
146-
currency={subscription.currency}
147146
interval={subscription.recurring_interval}
148147
intervalCount={subscription.recurring_interval_count}
149-
minimumFractionDigits={subscription.amount % 100 === 0 ? 0 : 2}
150148
/>
151149
</span>
152150
) : (

‎clients/apps/web/src/components/Subscriptions/UpcomingChargeCard.tsx‎

Lines changed: 7 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
'use client'
22

3-
import AmountLabel from '@/components/Shared/AmountLabel'
43
import { DetailRow } from '@/components/Shared/DetailRow'
54
import { useSubscriptionChargePreview } from '@/hooks/queries/subscriptions'
5+
import { formatCurrency } from '@/utils/formatters'
66
import { schemas } from '@polar-sh/client'
77
import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
88

@@ -77,11 +77,7 @@ const UpcomingChargeCard = ({
7777
isCancelingAtPeriodEnd ? (
7878
<span className="text-gray-500">Canceled</span>
7979
) : (
80-
<AmountLabel
81-
amount={subscription.amount || 0}
82-
currency={subscription.currency}
83-
minimumFractionDigits={2}
84-
/>
80+
formatCurrency(subscription.amount || 0)
8581
)
8682
}
8783
/>
@@ -96,13 +92,7 @@ const UpcomingChargeCard = ({
9692
<DetailRow
9793
key={meter.id}
9894
label={meter.meter.name}
99-
value={
100-
<AmountLabel
101-
amount={meter.amount}
102-
currency={subscription.currency}
103-
minimumFractionDigits={2}
104-
/>
105-
}
95+
value={formatCurrency(meter.amount)}
10696
/>
10797
))}
10898
</>
@@ -122,15 +112,7 @@ const UpcomingChargeCard = ({
122112
{(hasTaxes || hasDiscount) && (
123113
<DetailRow
124114
label="Subtotal"
125-
value={
126-
<AmountLabel
127-
amount={chargePreview.subtotal_amount}
128-
currency={subscription.currency}
129-
minimumFractionDigits={
130-
chargePreview.subtotal_amount % 100 === 0 ? 0 : 2
131-
}
132-
/>
133-
}
115+
value={formatCurrency(chargePreview.subtotal_amount)}
134116
valueClassName="dark:text-polar-500 text-gray-500"
135117
labelClassName="dark:text-polar-500 text-gray-500"
136118
/>
@@ -139,15 +121,7 @@ const UpcomingChargeCard = ({
139121
{hasDiscount && (
140122
<DetailRow
141123
label="Discount"
142-
value={
143-
<AmountLabel
144-
amount={-1 * chargePreview.discount_amount}
145-
currency={subscription.currency}
146-
minimumFractionDigits={
147-
chargePreview.discount_amount % 100 === 0 ? 0 : 2
148-
}
149-
/>
150-
}
124+
value={formatCurrency(-1 * chargePreview.discount_amount)}
151125
valueClassName="dark:text-polar-500 text-gray-500"
152126
labelClassName="dark:text-polar-500 text-gray-500"
153127
/>
@@ -156,15 +130,7 @@ const UpcomingChargeCard = ({
156130
{hasTaxes && (
157131
<DetailRow
158132
label="Taxes"
159-
value={
160-
<AmountLabel
161-
amount={chargePreview.tax_amount}
162-
currency={subscription.currency}
163-
minimumFractionDigits={
164-
chargePreview.tax_amount % 100 === 0 ? 0 : 2
165-
}
166-
/>
167-
}
133+
value={formatCurrency(chargePreview.tax_amount)}
168134
valueClassName="dark:text-polar-500 text-gray-500"
169135
labelClassName="dark:text-polar-500 text-gray-500"
170136
/>
@@ -179,13 +145,7 @@ const UpcomingChargeCard = ({
179145
.join(' ')}
180146
value={
181147
<span className="text-lg font-semibold">
182-
<AmountLabel
183-
amount={chargePreview.total_amount}
184-
currency={subscription.currency}
185-
minimumFractionDigits={
186-
chargePreview.total_amount % 100 === 0 ? 0 : 2
187-
}
188-
/>
148+
{formatCurrency(chargePreview.total_amount)}
189149
</span>
190150
}
191151
valueClassName="font-medium"

0 commit comments

Comments
 (0)