mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
refactor(subscription): extract DeviceTopupSheet from god page
Move the buy-devices sheet (190 lines of inline JSX + its useQuery + useMutation) into src/components/subscription/sheets/DeviceTopupSheet.tsx. Parent passes shared state (purchaseOptions, devicesToAdd, ids); the sheet self-owns the device-price query and purchase mutation, so the query only fires when the sheet is actually open. Subscription.tsx: 2671 → 2477 lines (−194).
This commit is contained in:
c0mrade
254
src/components/subscription/sheets/DeviceTopupSheet.tsx
Normal file
254
src/components/subscription/sheets/DeviceTopupSheet.tsx
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { subscriptionApi } from '../../../api/subscription';
|
||||||
|
import { getErrorMessage } from '../../../utils/subscriptionHelpers';
|
||||||
|
import InsufficientBalancePrompt from '../../InsufficientBalancePrompt';
|
||||||
|
import type { PurchaseOptions, Subscription } from '../../../types';
|
||||||
|
|
||||||
|
// ──────────────────────────────────────────────────────────────────
|
||||||
|
// Buy-devices sheet. Self-owns its devicePrice query + purchase mutation;
|
||||||
|
// parent only passes the subscription / id / open state and the shared
|
||||||
|
// purchaseOptions (which it already holds for sibling sheets and balance
|
||||||
|
// gating).
|
||||||
|
//
|
||||||
|
// Extracted from Subscription.tsx to drop ~190 lines from the god page.
|
||||||
|
// ──────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface DeviceTopupSheetProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpen: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
subscription: Subscription;
|
||||||
|
subscriptionId: number | undefined;
|
||||||
|
devicesToAdd: number;
|
||||||
|
onDevicesToAddChange: (n: number) => void;
|
||||||
|
purchaseOptions: PurchaseOptions | undefined;
|
||||||
|
isDark: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DeviceTopupSheet({
|
||||||
|
open,
|
||||||
|
onOpen,
|
||||||
|
onClose,
|
||||||
|
subscription,
|
||||||
|
subscriptionId,
|
||||||
|
devicesToAdd,
|
||||||
|
onDevicesToAddChange,
|
||||||
|
purchaseOptions,
|
||||||
|
isDark,
|
||||||
|
}: DeviceTopupSheetProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const formatPrice = (kopeks: number) => {
|
||||||
|
const rubles = kopeks / 100;
|
||||||
|
return rubles % 1 === 0 ? `${rubles} ₽` : `${rubles.toFixed(2)} ₽`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { data: devicePriceData } = useQuery({
|
||||||
|
queryKey: ['device-price', devicesToAdd, subscriptionId],
|
||||||
|
queryFn: () => subscriptionApi.getDevicePrice(devicesToAdd, subscriptionId),
|
||||||
|
enabled: open && !!subscription,
|
||||||
|
});
|
||||||
|
|
||||||
|
const devicePurchaseMutation = useMutation({
|
||||||
|
mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd, subscriptionId),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['device-price'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['balance'] });
|
||||||
|
onClose();
|
||||||
|
onDevicesToAddChange(1);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!open) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={onOpen}
|
||||||
|
className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium text-dark-100">
|
||||||
|
{t('subscription.additionalOptions.buyDevices')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-sm text-dark-400">
|
||||||
|
{t('subscription.additionalOptions.currentDeviceLimit', {
|
||||||
|
count: subscription.device_limit,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
className="h-5 w-5 text-dark-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth={2}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
|
||||||
|
>
|
||||||
|
<div className="mb-4 flex items-center justify-between">
|
||||||
|
<h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-sm text-dark-400 hover:text-dark-200"
|
||||||
|
aria-label={t('common.close', 'Close')}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{devicePriceData?.available === false ? (
|
||||||
|
<div className="py-4 text-center text-sm text-dark-400">
|
||||||
|
{devicePriceData.reason || t('subscription.additionalOptions.devicesUnavailable')}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{/* Device counter */}
|
||||||
|
<div className="flex items-center justify-center gap-6">
|
||||||
|
<button
|
||||||
|
onClick={() => onDevicesToAddChange(Math.max(1, devicesToAdd - 1))}
|
||||||
|
disabled={devicesToAdd <= 1}
|
||||||
|
className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
|
||||||
|
aria-label={t('subscription.additionalOptions.decrementDevices', 'Уменьшить')}
|
||||||
|
>
|
||||||
|
-
|
||||||
|
</button>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-4xl font-bold text-dark-100">{devicesToAdd}</div>
|
||||||
|
<div className="text-sm text-dark-500">
|
||||||
|
{t('subscription.additionalOptions.devicesUnit')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => onDevicesToAddChange(devicesToAdd + 1)}
|
||||||
|
disabled={
|
||||||
|
devicePriceData?.max_device_limit
|
||||||
|
? (devicePriceData.current_device_limit || 0) + devicesToAdd >=
|
||||||
|
devicePriceData.max_device_limit
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
|
||||||
|
aria-label={t('subscription.additionalOptions.incrementDevices', 'Увеличить')}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{devicePriceData?.max_device_limit && (
|
||||||
|
<div className="text-center text-sm text-dark-400">
|
||||||
|
{t('subscription.additionalOptions.currentDeviceLimit', {
|
||||||
|
count: devicePriceData.current_device_limit || subscription.device_limit,
|
||||||
|
})}{' '}
|
||||||
|
/{' '}
|
||||||
|
{t('subscription.additionalOptions.maxDevices', {
|
||||||
|
count: devicePriceData.max_device_limit,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Price info */}
|
||||||
|
{devicePriceData?.available && devicePriceData.price_per_device_label && (
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="mb-2 text-sm text-dark-400">
|
||||||
|
{devicePriceData.discount_percent &&
|
||||||
|
devicePriceData.discount_percent > 0 &&
|
||||||
|
devicePriceData.original_price_per_device_kopeks ? (
|
||||||
|
<span>
|
||||||
|
<span className="text-dark-500 line-through">
|
||||||
|
{formatPrice(devicePriceData.original_price_per_device_kopeks)}
|
||||||
|
</span>
|
||||||
|
<span className="mx-1">{devicePriceData.price_per_device_label}</span>
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
devicePriceData.price_per_device_label
|
||||||
|
)}
|
||||||
|
/{t('subscription.perDevice').replace('/ ', '')} (
|
||||||
|
{t('subscription.days', { count: devicePriceData.days_left })})
|
||||||
|
</div>
|
||||||
|
{devicePriceData.discount_percent && devicePriceData.discount_percent > 0 && (
|
||||||
|
<div className="mb-2">
|
||||||
|
<span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
|
||||||
|
-{devicePriceData.discount_percent}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{devicePriceData.total_price_kopeks === 0 ? (
|
||||||
|
<div className="text-2xl font-bold text-success-400">
|
||||||
|
{t('subscription.switchTariff.free')}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-2xl font-bold text-accent-400">
|
||||||
|
{devicePriceData.discount_percent &&
|
||||||
|
devicePriceData.discount_percent > 0 &&
|
||||||
|
devicePriceData.base_total_price_kopeks && (
|
||||||
|
<span className="mr-2 text-lg text-dark-500 line-through">
|
||||||
|
{formatPrice(devicePriceData.base_total_price_kopeks)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{devicePriceData.total_price_label}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Insufficient balance */}
|
||||||
|
{devicePriceData?.available &&
|
||||||
|
purchaseOptions &&
|
||||||
|
devicePriceData.total_price_kopeks &&
|
||||||
|
devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks && (
|
||||||
|
<InsufficientBalancePrompt
|
||||||
|
missingAmountKopeks={
|
||||||
|
devicePriceData.total_price_kopeks - purchaseOptions.balance_kopeks
|
||||||
|
}
|
||||||
|
compact
|
||||||
|
onBeforeTopUp={async () => {
|
||||||
|
await subscriptionApi.saveDevicesCart(devicesToAdd, subscriptionId);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => devicePurchaseMutation.mutate()}
|
||||||
|
disabled={
|
||||||
|
devicePurchaseMutation.isPending ||
|
||||||
|
!devicePriceData?.available ||
|
||||||
|
!!(
|
||||||
|
devicePriceData?.total_price_kopeks &&
|
||||||
|
purchaseOptions &&
|
||||||
|
devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="btn-primary w-full py-3"
|
||||||
|
>
|
||||||
|
{devicePurchaseMutation.isPending ? (
|
||||||
|
<span className="flex items-center justify-center gap-2">
|
||||||
|
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
t('subscription.additionalOptions.buy')
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{devicePurchaseMutation.isError && (
|
||||||
|
<div className="text-center text-sm text-error-400">
|
||||||
|
{getErrorMessage(devicePurchaseMutation.error)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -27,6 +27,7 @@ import {
|
|||||||
getFlagEmoji,
|
getFlagEmoji,
|
||||||
} from '../utils/subscriptionHelpers';
|
} from '../utils/subscriptionHelpers';
|
||||||
import Twemoji from 'react-twemoji';
|
import Twemoji from 'react-twemoji';
|
||||||
|
import { DeviceTopupSheet } from '../components/subscription/sheets/DeviceTopupSheet';
|
||||||
|
|
||||||
/** Isolated countdown so 1s interval doesn't re-render the whole page */
|
/** Isolated countdown so 1s interval doesn't re-render the whole page */
|
||||||
const CountdownTimer = memo(function CountdownTimer({
|
const CountdownTimer = memo(function CountdownTimer({
|
||||||
@@ -362,26 +363,7 @@ export default function Subscription() {
|
|||||||
}, []);
|
}, []);
|
||||||
useCloseOnSuccessNotification(handleCloseAllModals);
|
useCloseOnSuccessNotification(handleCloseAllModals);
|
||||||
|
|
||||||
// Device price query
|
// (device price + purchase moved into <DeviceTopupSheet>)
|
||||||
const { data: devicePriceData } = useQuery({
|
|
||||||
queryKey: ['device-price', devicesToAdd, subscriptionId],
|
|
||||||
queryFn: () => subscriptionApi.getDevicePrice(devicesToAdd, subscriptionId),
|
|
||||||
enabled: showDeviceTopup && !!subscription,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Device purchase mutation
|
|
||||||
const devicePurchaseMutation = useMutation({
|
|
||||||
mutationFn: () => subscriptionApi.purchaseDevices(devicesToAdd, subscriptionId),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['device-price'] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['balance'] });
|
|
||||||
setShowDeviceTopup(false);
|
|
||||||
setDevicesToAdd(1);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Device reduction info query
|
// Device reduction info query
|
||||||
const { data: deviceReductionInfo } = useQuery({
|
const { data: deviceReductionInfo } = useQuery({
|
||||||
@@ -1537,193 +1519,17 @@ export default function Subscription() {
|
|||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{/* Buy Devices */}
|
{/* Buy Devices */}
|
||||||
{!showDeviceTopup ? (
|
<DeviceTopupSheet
|
||||||
<button
|
open={showDeviceTopup}
|
||||||
onClick={() => setShowDeviceTopup(true)}
|
onOpen={() => setShowDeviceTopup(true)}
|
||||||
className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
|
onClose={() => setShowDeviceTopup(false)}
|
||||||
>
|
subscription={subscription}
|
||||||
<div className="flex items-center justify-between">
|
subscriptionId={subscriptionId}
|
||||||
<div>
|
devicesToAdd={devicesToAdd}
|
||||||
<div className="font-medium text-dark-100">
|
onDevicesToAddChange={setDevicesToAdd}
|
||||||
{t('subscription.additionalOptions.buyDevices')}
|
purchaseOptions={purchaseOptions}
|
||||||
</div>
|
isDark={isDark}
|
||||||
<div className="mt-1 text-sm text-dark-400">
|
/>
|
||||||
{t('subscription.additionalOptions.currentDeviceLimit', {
|
|
||||||
count: subscription.device_limit,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
className="h-5 w-5 text-dark-400"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth={2}
|
|
||||||
>
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
|
|
||||||
>
|
|
||||||
<div className="mb-4 flex items-center justify-between">
|
|
||||||
<h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowDeviceTopup(false)}
|
|
||||||
className="text-sm text-dark-400 hover:text-dark-200"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Check if completely unavailable (no subscription, price not set, etc.) */}
|
|
||||||
{devicePriceData?.available === false ? (
|
|
||||||
<div className="py-4 text-center text-sm text-dark-400">
|
|
||||||
{devicePriceData.reason ||
|
|
||||||
t('subscription.additionalOptions.devicesUnavailable')}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Device selector - show even at max limit */}
|
|
||||||
<div className="flex items-center justify-center gap-6">
|
|
||||||
<button
|
|
||||||
onClick={() => setDevicesToAdd(Math.max(1, devicesToAdd - 1))}
|
|
||||||
disabled={devicesToAdd <= 1}
|
|
||||||
className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
|
|
||||||
>
|
|
||||||
-
|
|
||||||
</button>
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-4xl font-bold text-dark-100">{devicesToAdd}</div>
|
|
||||||
<div className="text-sm text-dark-500">
|
|
||||||
{t('subscription.additionalOptions.devicesUnit')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() => setDevicesToAdd(devicesToAdd + 1)}
|
|
||||||
disabled={
|
|
||||||
devicePriceData?.max_device_limit
|
|
||||||
? (devicePriceData.current_device_limit || 0) + devicesToAdd >=
|
|
||||||
devicePriceData.max_device_limit
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Show limit info when at or near max */}
|
|
||||||
{devicePriceData?.max_device_limit && (
|
|
||||||
<div className="text-center text-sm text-dark-400">
|
|
||||||
{t('subscription.additionalOptions.currentDeviceLimit', {
|
|
||||||
count: devicePriceData.current_device_limit || subscription.device_limit,
|
|
||||||
})}{' '}
|
|
||||||
/{' '}
|
|
||||||
{t('subscription.additionalOptions.maxDevices', {
|
|
||||||
count: devicePriceData.max_device_limit,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Price info - only when available */}
|
|
||||||
{devicePriceData?.available && devicePriceData.price_per_device_label && (
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="mb-2 text-sm text-dark-400">
|
|
||||||
{/* Show original price with strikethrough if discount */}
|
|
||||||
{devicePriceData.discount_percent &&
|
|
||||||
devicePriceData.discount_percent > 0 &&
|
|
||||||
devicePriceData.original_price_per_device_kopeks ? (
|
|
||||||
<span>
|
|
||||||
<span className="text-dark-500 line-through">
|
|
||||||
{formatPrice(devicePriceData.original_price_per_device_kopeks)}
|
|
||||||
</span>
|
|
||||||
<span className="mx-1">{devicePriceData.price_per_device_label}</span>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
devicePriceData.price_per_device_label
|
|
||||||
)}
|
|
||||||
/{t('subscription.perDevice').replace('/ ', '')} (
|
|
||||||
{t('subscription.days', { count: devicePriceData.days_left })})
|
|
||||||
</div>
|
|
||||||
{/* Discount badge */}
|
|
||||||
{devicePriceData.discount_percent &&
|
|
||||||
devicePriceData.discount_percent > 0 && (
|
|
||||||
<div className="mb-2">
|
|
||||||
<span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
|
|
||||||
-{devicePriceData.discount_percent}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{/* Total price - show as free if 100% discount or 0 */}
|
|
||||||
{devicePriceData.total_price_kopeks === 0 ? (
|
|
||||||
<div className="text-2xl font-bold text-success-400">
|
|
||||||
{t('subscription.switchTariff.free')}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="text-2xl font-bold text-accent-400">
|
|
||||||
{/* Show original total with strikethrough if discount */}
|
|
||||||
{devicePriceData.discount_percent &&
|
|
||||||
devicePriceData.discount_percent > 0 &&
|
|
||||||
devicePriceData.base_total_price_kopeks && (
|
|
||||||
<span className="mr-2 text-lg text-dark-500 line-through">
|
|
||||||
{formatPrice(devicePriceData.base_total_price_kopeks)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{devicePriceData.total_price_label}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{devicePriceData?.available &&
|
|
||||||
purchaseOptions &&
|
|
||||||
devicePriceData.total_price_kopeks &&
|
|
||||||
devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks && (
|
|
||||||
<InsufficientBalancePrompt
|
|
||||||
missingAmountKopeks={
|
|
||||||
devicePriceData.total_price_kopeks - purchaseOptions.balance_kopeks
|
|
||||||
}
|
|
||||||
compact
|
|
||||||
onBeforeTopUp={async () => {
|
|
||||||
await subscriptionApi.saveDevicesCart(devicesToAdd, subscriptionId);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => devicePurchaseMutation.mutate()}
|
|
||||||
disabled={
|
|
||||||
devicePurchaseMutation.isPending ||
|
|
||||||
!devicePriceData?.available ||
|
|
||||||
!!(
|
|
||||||
devicePriceData?.total_price_kopeks &&
|
|
||||||
purchaseOptions &&
|
|
||||||
devicePriceData.total_price_kopeks > purchaseOptions.balance_kopeks
|
|
||||||
)
|
|
||||||
}
|
|
||||||
className="btn-primary w-full py-3"
|
|
||||||
>
|
|
||||||
{devicePurchaseMutation.isPending ? (
|
|
||||||
<span className="flex items-center justify-center gap-2">
|
|
||||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
t('subscription.additionalOptions.buy')
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{devicePurchaseMutation.isError && (
|
|
||||||
<div className="text-center text-sm text-error-400">
|
|
||||||
{getErrorMessage(devicePurchaseMutation.error)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Reduce Devices */}
|
{/* Reduce Devices */}
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user