first commit

services/web/frontend/js/features/settings/components/emails/reconfirmation-info/reconfirmation-info-prompt-text.tsx

@@ -0,0 +1,48 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { Institution } from '../../../../../../../types/institution'
+
+type ReconfirmationInfoPromptTextProps = {
+  primary: boolean
+  institutionName: Institution['name']
+}
+
+function ReconfirmationInfoPromptText({
+  primary,
+  institutionName,
+}: ReconfirmationInfoPromptTextProps) {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <Trans
+        i18nKey="are_you_still_at"
+        values={{
+          institutionName,
+        }}
+        shouldUnescape
+        tOptions={{ interpolation: { escapeValue: true } }}
+        components={
+          /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+          [<strong />]
+        }
+      />{' '}
+      <Trans
+        i18nKey="please_reconfirm_institutional_email"
+        components={
+          /* eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key */
+          [<span />]
+        }
+      />{' '}
+      <a
+        href="/learn/how-to/Institutional_Email_Reconfirmation"
+        target="_blank"
+      >
+        {t('learn_more')}
+      </a>
+      <br />
+      {primary ? <i>{t('need_to_add_new_primary_before_remove')}</i> : null}
+    </>
+  )
+}
+
+export default ReconfirmationInfoPromptText

services/web/frontend/js/features/settings/components/emails/reconfirmation-info/reconfirmation-info-success.tsx

@@ -0,0 +1,31 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { Institution } from '../../../../../../../types/institution'
+
+type ReconfirmationInfoSuccessProps = {
+  institution: Institution
+  className?: string
+}
+
+function ReconfirmationInfoSuccess({
+  institution,
+  className,
+}: ReconfirmationInfoSuccessProps) {
+  const { t } = useTranslation()
+
+  return (
+    <div className={className}>
+      <div>
+        <Trans
+          i18nKey="your_affiliation_is_confirmed"
+          values={{ institutionName: institution.name }}
+          shouldUnescape
+          tOptions={{ interpolation: { escapeValue: true } }}
+          components={[<strong />]} // eslint-disable-line react/jsx-key
+        />{' '}
+        {t('thank_you_exclamation')}
+      </div>
+    </div>
+  )
+}
+
+export default ReconfirmationInfoSuccess