| 1 |
import { useGlobalStore } from '@agent/state/global'; |
| 2 |
import { humanTimeDiff } from '@wordpress/date'; |
| 3 |
import { useEffect, useState } from '@wordpress/element'; |
| 4 |
import { __, sprintf } from '@wordpress/i18n'; |
| 5 |
import { error, Icon } from '@wordpress/icons'; |
| 6 |
|
| 7 |
export const UsageMessage = ({ onReady }) => { |
| 8 |
const { retryAfter, isChatAvailable } = useGlobalStore(); |
| 9 |
const [time, setTime] = useState(null); |
| 10 |
|
| 11 |
useEffect(() => { |
| 12 |
if (!retryAfter) return; |
| 13 |
const interval = setInterval(() => { |
| 14 |
if (isChatAvailable()) onReady(); |
| 15 |
setTime(() => |
| 16 |
humanTimeDiff(new Date(Number(retryAfter) + 45_000), new Date()), |
| 17 |
); |
| 18 |
}, 1000); |
| 19 |
return () => clearInterval(interval); |
| 20 |
}, [isChatAvailable, retryAfter, onReady]); |
| 21 |
|
| 22 |
if (!retryAfter || !time) return; |
| 23 |
return ( |
| 24 |
<div className="flex gap-2 rounded-lg bg-gray-100 p-3 text-sm text-gray-900"> |
| 25 |
<Icon icon={error} className="flex-none" /> |
| 26 |
<div className="grow"> |
| 27 |
<div> |
| 28 |
{sprintf( |
| 29 |
// translators: %s is a human-readable time difference, e.g. "2 hours from now" |
| 30 |
__( |
| 31 |
'You have reached your daily messages limit. Your limit will reset in %s.', |
| 32 |
'extendify-local', |
| 33 |
), |
| 34 |
time, |
| 35 |
)} |
| 36 |
</div> |
| 37 |
</div> |
| 38 |
</div> |
| 39 |
); |
| 40 |
}; |
| 41 |
|
