File size: 1,998 Bytes
de6cac5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import { useEffect, useState } from 'react'
import { getVersion } from '../api/version'
import { getProviders } from '../api/payments'
import { useI18n } from '../i18n'
import type { ProvidersResponse, VersionInfo } from '../types'
/** Non-intrusive footer: environment facts (from /payments/providers) + a version
* line (from /version) so the deployed build is verifiable. No secrets are shown. */
export function AppFooter() {
const { t } = useI18n()
const [version, setVersion] = useState<VersionInfo | null>(null)
const [providers, setProviders] = useState<ProvidersResponse | null>(null)
useEffect(() => {
let live = true
getVersion().then((v) => live && setVersion(v)).catch(() => {})
getProviders().then((p) => live && setProviders(p)).catch(() => {})
return () => {
live = false
}
}, [])
const d = providers?.default
return (
<footer className="app-footer">
<details className="env-panel">
<summary>{t('env.title')}</summary>
<dl className="env-grid">
<dt>{t('env.country')}</dt>
<dd>{t('env.countryValue')}</dd>
<dt>{t('env.currency')}</dt>
<dd className="mono">{d?.currency ?? 'SAR'}</dd>
<dt>{t('env.timezone')}</dt>
<dd className="mono">{d?.timezone ?? 'Asia/Riyadh'}</dd>
<dt>{t('env.languages')}</dt>
<dd>{t('env.languagesValue')}</dd>
<dt>{t('env.provider')}</dt>
<dd>{version?.provider_mode === 'mock' || !version ? t('env.providerValue') : version.provider_mode}</dd>
<dt>{t('env.mode')}</dt>
<dd>{t('env.modeValue')}</dd>
<dt>{t('env.realMoney')}</dt>
<dd>{t('env.no')}</dd>
</dl>
</details>
<p className="version-line mono" dir="ltr">
{version
? `${t('version.prefix')}${version.app_version} 路 ${version.commit} 路 ${version.ui_mode} 路 ${version.provider_mode}`
: t('version.unknown')}
</p>
</footer>
)
}
|