mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
refactor(subscription): extract DeviceReductionSheet from god page
Move the reduce-devices sheet (~170 lines of inline JSX + its useQuery + useMutation + seeding useEffect) into src/components/subscription/sheets/DeviceReductionSheet.tsx. Parent passes the shared targetDeviceLimit state (also used by the revoke flow earlier) plus open/close + ids; the sheet owns the reduction-info query and the reduce mutation, so neither fires until the sheet is open. Subscription.tsx: 2477 → 2288 lines (−189).
This commit is contained in:
c0mrade
235
src/components/subscription/sheets/DeviceReductionSheet.tsx
Normal file
235
src/components/subscription/sheets/DeviceReductionSheet.tsx
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import { subscriptionApi } from '../../../api/subscription';
|
||||||
|
import { getErrorMessage } from '../../../utils/subscriptionHelpers';
|
||||||
|
|
||||||
|
// ──────────────────────────────────────────────────────────────────
|
||||||
|
// Reduce-devices sheet. Self-owns the reduction-info query + mutation;
|
||||||
|
// parent passes shared state (target limit + setter + ids + open flag).
|
||||||
|
//
|
||||||
|
// Extracted from Subscription.tsx to keep one cohesive feature in
|
||||||
|
// one file (~170 lines off the god page).
|
||||||
|
// ──────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface DeviceReductionSheetProps {
|
||||||
|
open: boolean;
|
||||||
|
onOpen: () => void;
|
||||||
|
onClose: () => void;
|
||||||
|
subscriptionPresent: boolean;
|
||||||
|
subscriptionId: number | undefined;
|
||||||
|
targetDeviceLimit: number;
|
||||||
|
onTargetDeviceLimitChange: (n: number) => void;
|
||||||
|
isDark: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DeviceReductionSheet({
|
||||||
|
open,
|
||||||
|
onOpen,
|
||||||
|
onClose,
|
||||||
|
subscriptionPresent,
|
||||||
|
subscriptionId,
|
||||||
|
targetDeviceLimit,
|
||||||
|
onTargetDeviceLimitChange,
|
||||||
|
isDark,
|
||||||
|
}: DeviceReductionSheetProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { data: deviceReductionInfo } = useQuery({
|
||||||
|
queryKey: ['device-reduction-info', subscriptionId],
|
||||||
|
queryFn: () => subscriptionApi.getDeviceReductionInfo(subscriptionId),
|
||||||
|
enabled: open && subscriptionPresent,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Seed the target limit once the info comes back.
|
||||||
|
useEffect(() => {
|
||||||
|
if (deviceReductionInfo && open) {
|
||||||
|
onTargetDeviceLimitChange(
|
||||||
|
Math.max(
|
||||||
|
deviceReductionInfo.min_device_limit,
|
||||||
|
deviceReductionInfo.current_device_limit - 1,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// onTargetDeviceLimitChange is a setter from the parent and stable
|
||||||
|
// enough; intentionally narrow deps to avoid clobbering user input.
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [deviceReductionInfo, open]);
|
||||||
|
|
||||||
|
const reduceMutation = useMutation({
|
||||||
|
mutationFn: () => subscriptionApi.reduceDevices(targetDeviceLimit, subscriptionId),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['device-reduction-info', subscriptionId] });
|
||||||
|
onClose();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
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.reduceDevices')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-sm text-dark-400">
|
||||||
|
{t('subscription.additionalOptions.reduceDevicesDescription')}
|
||||||
|
</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.additionalOptions.reduceDevicesTitle')}
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-sm text-dark-400 hover:text-dark-200"
|
||||||
|
aria-label={t('common.close', 'Close')}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{deviceReductionInfo?.available === false ? (
|
||||||
|
<div className="py-4 text-center text-sm text-dark-400">
|
||||||
|
{deviceReductionInfo.reason || t('subscription.additionalOptions.reduceUnavailable')}
|
||||||
|
</div>
|
||||||
|
) : deviceReductionInfo ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-center gap-6">
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
onTargetDeviceLimitChange(
|
||||||
|
Math.max(
|
||||||
|
Math.max(
|
||||||
|
deviceReductionInfo.min_device_limit,
|
||||||
|
deviceReductionInfo.connected_devices_count,
|
||||||
|
),
|
||||||
|
targetDeviceLimit - 1,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={
|
||||||
|
targetDeviceLimit <=
|
||||||
|
Math.max(
|
||||||
|
deviceReductionInfo.min_device_limit,
|
||||||
|
deviceReductionInfo.connected_devices_count,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
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">{targetDeviceLimit}</div>
|
||||||
|
<div className="text-sm text-dark-500">
|
||||||
|
{t('subscription.additionalOptions.devicesUnit')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
onTargetDeviceLimitChange(
|
||||||
|
Math.min(deviceReductionInfo.current_device_limit - 1, targetDeviceLimit + 1),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={targetDeviceLimit >= deviceReductionInfo.current_device_limit - 1}
|
||||||
|
className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
|
||||||
|
aria-label={t('subscription.additionalOptions.incrementDevices', 'Увеличить')}
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1 text-center text-sm text-dark-400">
|
||||||
|
<div>
|
||||||
|
{t('subscription.additionalOptions.currentDeviceLimit', {
|
||||||
|
count: deviceReductionInfo.current_device_limit,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{t('subscription.additionalOptions.minDeviceLimit', {
|
||||||
|
count: deviceReductionInfo.min_device_limit,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{t('subscription.additionalOptions.connectedDevices', {
|
||||||
|
count: deviceReductionInfo.connected_devices_count,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{deviceReductionInfo.connected_devices_count > deviceReductionInfo.min_device_limit && (
|
||||||
|
<div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
|
||||||
|
{t('subscription.additionalOptions.disconnectDevicesFirst', {
|
||||||
|
count: deviceReductionInfo.connected_devices_count,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-sm text-dark-400">
|
||||||
|
{t('subscription.additionalOptions.newDeviceLimit', {
|
||||||
|
count: targetDeviceLimit,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => reduceMutation.mutate()}
|
||||||
|
disabled={
|
||||||
|
reduceMutation.isPending ||
|
||||||
|
targetDeviceLimit >= deviceReductionInfo.current_device_limit ||
|
||||||
|
targetDeviceLimit < deviceReductionInfo.min_device_limit ||
|
||||||
|
targetDeviceLimit < deviceReductionInfo.connected_devices_count
|
||||||
|
}
|
||||||
|
className="btn-primary w-full py-3"
|
||||||
|
>
|
||||||
|
{reduceMutation.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" />
|
||||||
|
{t('subscription.additionalOptions.reducing')}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
t('subscription.additionalOptions.reduce')
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{reduceMutation.isError && (
|
||||||
|
<div className="text-center text-sm text-error-400">
|
||||||
|
{getErrorMessage(reduceMutation.error)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center justify-center py-4">
|
||||||
|
<span className="h-5 w-5 animate-spin rounded-full border-2 border-accent-400/30 border-t-accent-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -28,6 +28,7 @@ import {
|
|||||||
} from '../utils/subscriptionHelpers';
|
} from '../utils/subscriptionHelpers';
|
||||||
import Twemoji from 'react-twemoji';
|
import Twemoji from 'react-twemoji';
|
||||||
import { DeviceTopupSheet } from '../components/subscription/sheets/DeviceTopupSheet';
|
import { DeviceTopupSheet } from '../components/subscription/sheets/DeviceTopupSheet';
|
||||||
|
import { DeviceReductionSheet } from '../components/subscription/sheets/DeviceReductionSheet';
|
||||||
|
|
||||||
/** 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({
|
||||||
@@ -364,37 +365,7 @@ export default function Subscription() {
|
|||||||
useCloseOnSuccessNotification(handleCloseAllModals);
|
useCloseOnSuccessNotification(handleCloseAllModals);
|
||||||
|
|
||||||
// (device price + purchase moved into <DeviceTopupSheet>)
|
// (device price + purchase moved into <DeviceTopupSheet>)
|
||||||
|
// (device reduction info + mutation moved into <DeviceReductionSheet>)
|
||||||
// Device reduction info query
|
|
||||||
const { data: deviceReductionInfo } = useQuery({
|
|
||||||
queryKey: ['device-reduction-info', subscriptionId],
|
|
||||||
queryFn: () => subscriptionApi.getDeviceReductionInfo(subscriptionId),
|
|
||||||
enabled: showDeviceReduction && !!subscription,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Initialize target device limit when reduction info loads
|
|
||||||
useEffect(() => {
|
|
||||||
if (deviceReductionInfo && showDeviceReduction) {
|
|
||||||
setTargetDeviceLimit(
|
|
||||||
Math.max(
|
|
||||||
deviceReductionInfo.min_device_limit,
|
|
||||||
deviceReductionInfo.current_device_limit - 1,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}, [deviceReductionInfo, showDeviceReduction]);
|
|
||||||
|
|
||||||
// Device reduction mutation
|
|
||||||
const deviceReductionMutation = useMutation({
|
|
||||||
mutationFn: () => subscriptionApi.reduceDevices(targetDeviceLimit, subscriptionId),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['subscription', subscriptionId] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['subscriptions-list'] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['devices', subscriptionId] });
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['device-reduction-info', subscriptionId] });
|
|
||||||
setShowDeviceReduction(false);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Traffic packages query
|
// Traffic packages query
|
||||||
const { data: trafficPackages } = useQuery({
|
const { data: trafficPackages } = useQuery({
|
||||||
@@ -1533,176 +1504,16 @@ export default function Subscription() {
|
|||||||
|
|
||||||
{/* Reduce Devices */}
|
{/* Reduce Devices */}
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
{!showDeviceReduction ? (
|
<DeviceReductionSheet
|
||||||
<button
|
open={showDeviceReduction}
|
||||||
onClick={() => setShowDeviceReduction(true)}
|
onOpen={() => setShowDeviceReduction(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={() => setShowDeviceReduction(false)}
|
||||||
>
|
subscriptionPresent={!!subscription}
|
||||||
<div className="flex items-center justify-between">
|
subscriptionId={subscriptionId}
|
||||||
<div>
|
targetDeviceLimit={targetDeviceLimit}
|
||||||
<div className="font-medium text-dark-100">
|
onTargetDeviceLimitChange={setTargetDeviceLimit}
|
||||||
{t('subscription.additionalOptions.reduceDevices')}
|
isDark={isDark}
|
||||||
</div>
|
/>
|
||||||
<div className="mt-1 text-sm text-dark-400">
|
|
||||||
{t('subscription.additionalOptions.reduceDevicesDescription')}
|
|
||||||
</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.additionalOptions.reduceDevicesTitle')}
|
|
||||||
</h3>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowDeviceReduction(false)}
|
|
||||||
className="text-sm text-dark-400 hover:text-dark-200"
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{deviceReductionInfo?.available === false ? (
|
|
||||||
<div className="py-4 text-center text-sm text-dark-400">
|
|
||||||
{deviceReductionInfo.reason ||
|
|
||||||
t('subscription.additionalOptions.reduceUnavailable')}
|
|
||||||
</div>
|
|
||||||
) : deviceReductionInfo ? (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Device limit selector */}
|
|
||||||
<div className="flex items-center justify-center gap-6">
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setTargetDeviceLimit(
|
|
||||||
Math.max(
|
|
||||||
Math.max(
|
|
||||||
deviceReductionInfo.min_device_limit,
|
|
||||||
deviceReductionInfo.connected_devices_count,
|
|
||||||
),
|
|
||||||
targetDeviceLimit - 1,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
disabled={
|
|
||||||
targetDeviceLimit <=
|
|
||||||
Math.max(
|
|
||||||
deviceReductionInfo.min_device_limit,
|
|
||||||
deviceReductionInfo.connected_devices_count,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
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">
|
|
||||||
{targetDeviceLimit}
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-dark-500">
|
|
||||||
{t('subscription.additionalOptions.devicesUnit')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setTargetDeviceLimit(
|
|
||||||
Math.min(
|
|
||||||
deviceReductionInfo.current_device_limit - 1,
|
|
||||||
targetDeviceLimit + 1,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
disabled={
|
|
||||||
targetDeviceLimit >= deviceReductionInfo.current_device_limit - 1
|
|
||||||
}
|
|
||||||
className="btn-secondary flex h-12 w-12 items-center justify-center !p-0 text-2xl"
|
|
||||||
>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Info */}
|
|
||||||
<div className="space-y-1 text-center text-sm text-dark-400">
|
|
||||||
<div>
|
|
||||||
{t('subscription.additionalOptions.currentDeviceLimit', {
|
|
||||||
count: deviceReductionInfo.current_device_limit,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{t('subscription.additionalOptions.minDeviceLimit', {
|
|
||||||
count: deviceReductionInfo.min_device_limit,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{t('subscription.additionalOptions.connectedDevices', {
|
|
||||||
count: deviceReductionInfo.connected_devices_count,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Warning if connected devices block reduction */}
|
|
||||||
{deviceReductionInfo.connected_devices_count >
|
|
||||||
deviceReductionInfo.min_device_limit && (
|
|
||||||
<div className="rounded-lg bg-warning-500/10 p-3 text-center text-sm text-warning-400">
|
|
||||||
{t('subscription.additionalOptions.disconnectDevicesFirst', {
|
|
||||||
count: deviceReductionInfo.connected_devices_count,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* New limit preview */}
|
|
||||||
<div className="text-center">
|
|
||||||
<div className="text-sm text-dark-400">
|
|
||||||
{t('subscription.additionalOptions.newDeviceLimit', {
|
|
||||||
count: targetDeviceLimit,
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={() => deviceReductionMutation.mutate()}
|
|
||||||
disabled={
|
|
||||||
deviceReductionMutation.isPending ||
|
|
||||||
targetDeviceLimit >= deviceReductionInfo.current_device_limit ||
|
|
||||||
targetDeviceLimit < deviceReductionInfo.min_device_limit ||
|
|
||||||
targetDeviceLimit < deviceReductionInfo.connected_devices_count
|
|
||||||
}
|
|
||||||
className="btn-primary w-full py-3"
|
|
||||||
>
|
|
||||||
{deviceReductionMutation.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" />
|
|
||||||
{t('subscription.additionalOptions.reducing')}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
t('subscription.additionalOptions.reduce')
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{deviceReductionMutation.isError && (
|
|
||||||
<div className="text-center text-sm text-error-400">
|
|
||||||
{getErrorMessage(deviceReductionMutation.error)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center py-4">
|
|
||||||
<span className="h-5 w-5 animate-spin rounded-full border-2 border-accent-400/30 border-t-accent-400" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Buy Traffic */}
|
{/* Buy Traffic */}
|
||||||
|
|||||||
Reference in New Issue
Block a user