FIX (billing): Fix UI units

This commit is contained in:
Rostislav Dugin
2026-03-27 22:50:08 +03:00
parent 67556a0db1
commit 80b5df6283
4 changed files with 9 additions and 9 deletions

View File

@@ -34,7 +34,7 @@ export const APP_VERSION = (import.meta.env.VITE_APP_VERSION as string) || 'dev'
export const IS_CLOUD =
window.__RUNTIME_CONFIG__?.IS_CLOUD === 'true' || import.meta.env.VITE_IS_CLOUD === 'true';
export const CLOUD_PRICE_PER_GB = Number(
export const CLOUD_PRICE_PER_GB_CENTS = Number(
window.__RUNTIME_CONFIG__?.CLOUD_PRICE_PER_GB || import.meta.env.VITE_CLOUD_PRICE_PER_GB || '0',
);

View File

@@ -3,7 +3,7 @@ import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { CLOUD_PRICE_PER_GB } from '../../../constants';
import { CLOUD_PRICE_PER_GB_CENTS } from '../../../constants';
import {
type Invoice,
InvoiceStatus,
@@ -179,7 +179,7 @@ export const BillingComponent = ({ database, isCanManageDBs }: Props) => {
subscription.status === SubscriptionStatus.Canceled);
const isTrial = subscription?.status === SubscriptionStatus.Trial;
const monthlyPrice = subscription ? subscription.storageGb * CLOUD_PRICE_PER_GB : 0;
const monthlyPrice = subscription ? subscription.storageGb * CLOUD_PRICE_PER_GB_CENTS : 0;
const invoiceColumns: ColumnsType<Invoice> = [
{
@@ -290,7 +290,7 @@ export const BillingComponent = ({ database, isCanManageDBs }: Props) => {
{!isTrial && (
<span className="text-2xl font-bold dark:text-white">
${monthlyPrice.toFixed(2)}
${(monthlyPrice / 100).toFixed(2)}
<span className="text-sm font-normal text-gray-500">/mo</span>
</span>
)}

View File

@@ -33,12 +33,12 @@ export function PriceActionBar({
<div className="mt-4 flex items-center gap-4 border-t border-[#ffffff20] pt-4">
<div className="flex-1">
<p className="text-2xl font-bold">
${monthlyPrice.toFixed(2)}
${(monthlyPrice / 100).toFixed(2)}
<span className="text-base font-medium text-gray-400">/mo</span>
</p>
{isChangeFlow && !isSameStorage && (
<p className="text-xs text-gray-400">Currently ${currentPrice.toFixed(2)}/mo</p>
<p className="text-xs text-gray-400">Currently ${(currentPrice / 100).toFixed(2)}/mo</p>
)}
</div>

View File

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
import { usePurchaseFlow } from '../hooks/usePurchaseFlow';
import { CLOUD_PRICE_PER_GB } from '../../../constants';
import { CLOUD_PRICE_PER_GB_CENTS } from '../../../constants';
import { SubscriptionStatus } from '../../../entity/billing';
import {
BACKUPS_COMPRESSION_RATIO,
@@ -43,7 +43,7 @@ export function PurchaseComponent({ databaseId, onSubscriptionChanged, onClose }
const approximateDbSize = singleBackupSizeGb * BACKUPS_COMPRESSION_RATIO;
const backupsFit = Math.floor(newStorageGb / singleBackupSizeGb);
const gfs = distributeGfs(backupsFit);
const monthlyPrice = newStorageGb * CLOUD_PRICE_PER_GB;
const monthlyPrice = newStorageGb * CLOUD_PRICE_PER_GB_CENTS;
const { subscription } = flow;
@@ -61,7 +61,7 @@ export function PurchaseComponent({ databaseId, onSubscriptionChanged, onClose }
const isUpgrade = isChangeFlow && newStorageGb > subscription.storageGb;
const isDowngrade = isChangeFlow && newStorageGb < subscription.storageGb;
const isSameStorage = isChangeFlow && newStorageGb === subscription.storageGb;
const currentPrice = subscription ? subscription.storageGb * CLOUD_PRICE_PER_GB : 0;
const currentPrice = subscription ? subscription.storageGb * CLOUD_PRICE_PER_GB_CENTS : 0;
const modalTitle = isPurchaseFlow
? subscription.status === SubscriptionStatus.Canceled