overleaf/services/web/frontend/js/features/subscription/components/dashboard/personal-subscription-recurly-sync-email.tsx
ilkin-overleaf 9f95c7c2ab Merge pull request #11919 from overleaf/ii-react-subscription-dash-user-email-not-matching-recurly-email
[web] Subscription dash user email not matching recurly email section - react migration

GitOrigin-RevId: 8d89dbc804694afffea2a92cebdeb5d4e9389810
2023-03-01 09:02:47 +00:00

58 lines
1.9 KiB
TypeScript

import { useTranslation, Trans } from 'react-i18next'
import { useSubscriptionDashboardContext } from '../../context/subscription-dashboard-context'
import { FormGroup, Alert } from 'react-bootstrap'
import getMeta from '../../../../utils/meta'
import useAsync from '../../../../shared/hooks/use-async'
import { postJSON } from '../../../../infrastructure/fetch-json'
function PersonalSubscriptionRecurlySyncEmail() {
const { t } = useTranslation()
const { personalSubscription } = useSubscriptionDashboardContext()
const userEmail = getMeta('ol-usersEmail') as string
const { isLoading, isSuccess, runAsync } = useAsync()
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
runAsync(postJSON('/user/subscription/account/email'))
}
if (!personalSubscription || !('recurly' in personalSubscription)) return null
const recurlyEmail = personalSubscription.recurly.account.email
if (!userEmail || recurlyEmail === userEmail) return null
return (
<>
<form onSubmit={handleSubmit}>
<FormGroup>
{isSuccess ? (
<Alert bsStyle="success">{t('recurly_email_updated')}</Alert>
) : (
<>
<p>
<Trans
i18nKey="recurly_email_update_needed"
components={[<em />, <em />]} // eslint-disable-line react/jsx-key
values={{ recurlyEmail, userEmail }}
/>
</p>
<div>
<button
className="btn btn-primary"
type="submit"
disabled={isLoading}
>
{isLoading ? <>{t('updating')}</> : t('update')}
</button>
</div>
</>
)}
</FormGroup>
</form>
<hr />
</>
)
}
export default PersonalSubscriptionRecurlySyncEmail