From 80b5df6283c78e753eb7a414a6cf7991fbc07eb8 Mon Sep 17 00:00:00 2001
From: Rostislav Dugin <rostislav.dugin@outlook.com>
Date: Fri, 27 Mar 2026 22:50:08 +0300
Subject: [PATCH] FIX (billing): Fix UI units

---
 frontend/src/constants.ts                              | 2 +-
 frontend/src/features/billing/ui/BillingComponent.tsx  | 6 +++---
 frontend/src/features/billing/ui/PriceActionBar.tsx    | 4 ++--
 frontend/src/features/billing/ui/PurchaseComponent.tsx | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index f5aca05..3cb80ab 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -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',
 );
 
diff --git a/frontend/src/features/billing/ui/BillingComponent.tsx b/frontend/src/features/billing/ui/BillingComponent.tsx
index 073e1ca..6bb0229 100644
--- a/frontend/src/features/billing/ui/BillingComponent.tsx
+++ b/frontend/src/features/billing/ui/BillingComponent.tsx
@@ -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>
                 )}
diff --git a/frontend/src/features/billing/ui/PriceActionBar.tsx b/frontend/src/features/billing/ui/PriceActionBar.tsx
index 502589d..dfc3a7a 100644
--- a/frontend/src/features/billing/ui/PriceActionBar.tsx
+++ b/frontend/src/features/billing/ui/PriceActionBar.tsx
@@ -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>
 
diff --git a/frontend/src/features/billing/ui/PurchaseComponent.tsx b/frontend/src/features/billing/ui/PurchaseComponent.tsx
index 3844204..f6960b3 100644
--- a/frontend/src/features/billing/ui/PurchaseComponent.tsx
+++ b/frontend/src/features/billing/ui/PurchaseComponent.tsx
@@ -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