const Recover = ({translate}) => (
<div className={theme.fullHeightContainer}>
<Title
title={translate('webcam_permissions.access_denied')}
subTitle={translate('webcam_permissions.recover_access')}
/>
<div className={theme.thickWrapper}>
<div className={style.instructions}>
<span className={style.recovery}>{translate('webcam_permissions.recovery')}</span>
<p className={style.instructionsTitle}>{translate('webcam_permissions.follow_steps')}</p>
<ol className={style.steps}>
{
['grant_access', 'refresh_page'].map(key =>
<li key={key} className={style.step}>
{translate(`webcam_permissions.${key}`)}
</li>
)
}
</ol>
</div>
</div>
<div className={theme.thickWrapper}>
<Button
className={style.button}
variants={["primary"]}
onClick={preventDefaultOnClick(() => window.location.reload())}
>
{translate('webcam_permissions.refresh')}
</Button>
</div>
</div>
)
const Permissions = ({onNext, translate}) => (
<div className={style.container}>
<Title title={translate('webcam_permissions.allow_access')} />
<div className={theme.thickWrapper}>
{translate('webcam_permissions.enable_webcam_for_selfie')}
<div className={style.image}>
<p>{translate('webcam_permissions.click_allow')}</p>
<div className={style.graphic}>
<span className={style.allow}>{translate('webcam_permissions.allow')}</span>
</div>
</div>
<Collapsible trigger={translate('webcam_permissions.why')} className={style.reasons}>
<p className={style.reason}>{translate('webcam_permissions.if_denied')}</p>
</Collapsible>
<Button
variants={["centered", "primary"]}
onClick={preventDefaultOnClick(onNext)}
>
{translate('webcam_permissions.enable_webcam')}
</Button>
</div>
</div>
)