feat(team-invitation): add inviter email in terms acceptance page [WP…

…B-12142] (#5100)

* feat(team-invitation): add inviter email in terms acceptance page [WPB-12142]

* updated api-client version

package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@wireapp/api-client": "27.9.0",
+    "@wireapp/api-client": "27.10.0",
     "@wireapp/commons": "5.2.13",
     "@wireapp/react-ui-kit": "9.26.1",
     "core-js": "3.39.0",

src/i18n/en-US.json

@@ -112,7 +112,7 @@
     "confirmPageHeader": "Join your team",
     "confirmPageSubHeader": "To ensure a secure transfer and prevent unauthorized access, please enter the password of your personal account again.",
     "termsPageHeader": "Join your team",
-    "termsPageSubHeader": "You’re about to join the team.",
+    "termsPageSubHeader": "You’re about to join the team managed by {{email}}.",
     "termsPageListHeader": "Things to know",
     "termsPageListItem1": "Your <b>personal account will be transferred</b> to a team account.",
     "termsPageListItem2": "<b>This change is permanent</b> and irrevocable.",

src/script/module/action/TeamAction.ts

@@ -36,4 +36,8 @@ export class TeamAction {
   acceptInvitation = async (payload: {code: string; password: string}) => {
     return this.apiClient.api.teams.invitation.acceptInvitation(payload);
   };
+
+  getInvitationInfo = async (code: string) => {
+    return this.apiClient.api.teams.invitation.getInvitationFromCode(code);
+  };
 }

src/script/page/migration/TermsAcknowledgement.tsx

@@ -23,6 +23,7 @@ import {
   Checkbox,
   COLOR_V2,
   Link,
+  Loading,
   Logo,
   QUERY,
   QueryKeys,
@@ -36,27 +37,51 @@ import {
   termsContentHeaderCss,
   termsListCss,
   termsListItemCss,
-  termsContentGrayBox,
-  termsContentGrayBoxContent,
+  termsContentWarningBox,
+  termsContentWarningBoxContent,
   termsContentBlueBox,
   termsContentBlueBoxContent,
   buttonCss,
   termsCheckboxLabelCss,
+  loginContainerCss,
 } from './styles';
 import {ShieldIcon} from './ShieldIcon';
 import {OutlinedCheckIcon} from './OutlinedCheckIcon';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {EXTERNAL_ROUTE, ROUTE} from 'script/route';
 import {useTranslation} from 'react-i18next';
 import MarkupTranslation from 'script/component/MarkupTranslation';
+import {useActionContext} from 'script/module/action';
+import {getTeamInvitationCode} from './utils';
 
 export const TermsAcknowledgement = () => {
   const navigate = useNavigate();
+  const {teamAction} = useActionContext();
   const {t} = useTranslation('migration');
   const isTablet = useMatchMedia(QUERY[QueryKeys.TABLET_DOWN]);
+  const code = getTeamInvitationCode();
+  const [loading, setLoading] = useState(true);
   const [isMigrationAccepted, setIsMigrationAccepted] = useState(false);
   const [isTermOfUseAccepted, setIsTermOfUseAccepted] = useState(false);
+  const [inviterEmail, setInviterEmail] = useState('');
+
+  useEffect(() => {
+    teamAction
+      .getInvitationInfo(code)
+      .then(res => {
+        setInviterEmail(res.created_by_email);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div css={loginContainerCss}>
+        <Loading style={{margin: 'auto'}} />
+      </div>
+    );
+  }
 
   return (
     <div css={termsContainerCss}>
@@ -66,7 +91,7 @@ export const TermsAcknowledgement = () => {
         </div>
       )}
       <Text css={headerCss}>{t('termsPageHeader')}</Text>
-      <Text css={termsSubHeaderCss}>{t('termsPageHeader')}</Text>
+      <Text css={termsSubHeaderCss}>{t('termsPageSubHeader', {email: inviterEmail})}</Text>
       <div css={{margin: '2rem', textAlign: 'left'}}>
         <Bold css={termsContentHeaderCss}>{t('termsPageListHeader')}</Bold>
         <ul css={termsListCss}>
@@ -87,8 +112,8 @@ export const TermsAcknowledgement = () => {
           </li>
         </ul>
       </div>
-      <div css={termsContentGrayBox}>
-        <div css={termsContentGrayBoxContent}>
+      <div css={termsContentWarningBox}>
+        <div css={termsContentWarningBoxContent}>
           <ShieldIcon /> <b css={{marginLeft: '1.5rem'}}>{t('termsPageAccountManagerHeader')}</b>
           <div css={{marginTop: '1rem'}}>{t('termsPageAccountManagerText')}</div>
         </div>

src/script/page/migration/styles.ts

@@ -107,13 +107,15 @@ export const termsListItemCss: CSSObject = {
   },
 };
 
-export const termsContentGrayBox: CSSObject = {
-  background: COLOR_V2.GRAY_20,
+export const termsContentWarningBox: CSSObject = {
+  background: COLOR_V2.AMBER_DARK_50,
+  border: '1px solid',
+  borderColor: COLOR_V2.AMBER_DARK_600,
   padding: '1rem',
   borderRadius: '1rem',
   margin: '0 2rem',
 };
-export const termsContentGrayBoxContent: CSSObject = {
+export const termsContentWarningBoxContent: CSSObject = {
   fontSize: '1.25rem',
   lineHeight: '1.75rem',
   color: COLOR_V2.GRAY_90,
@@ -123,8 +125,8 @@ export const termsContentGrayBoxContent: CSSObject = {
 };
 
 export const termsContentBlueBox: CSSObject = {
-  background: COLOR_V2.BLUE_LIGHT_50,
-  padding: '1rem',
+  background: COLOR_V2.GRAY_20,
+  padding: '0.75rem',
   borderRadius: '1rem',
   margin: '1rem 0',
   display: 'flex',

yarn.lock

@@ -4114,9 +4114,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wireapp/api-client@npm:27.9.0":
-  version: 27.9.0
-  resolution: "@wireapp/api-client@npm:27.9.0"
+"@wireapp/api-client@npm:27.10.0":
+  version: 27.10.0
+  resolution: "@wireapp/api-client@npm:27.10.0"
   dependencies:
     "@wireapp/commons": ^5.2.13
     "@wireapp/priority-queue": ^2.1.11
@@ -4131,7 +4131,7 @@ __metadata:
     tough-cookie: 4.1.4
     ws: 8.18.0
     zod: 3.23.8
-  checksum: 5e9f6aaf4bdf8da5977cc314ba95a0ee4f9231430f3db31d4c1c38e30839df3a05e07562330e8c6ce2a749b452c8698bf2f5944e975101e6f1bacca30748b5ad
+  checksum: f3059d1c543f15b9274290d38af90cd8d6c91db768c85976026251f303c8a411df2b31e531d48e6c03ea8b9df2b1f5729d328d2090a8e6dc3f7f9382b5bf92b4
   languageName: node
   linkType: hard
 
@@ -14144,7 +14144,7 @@ __metadata:
     "@types/webpack-env": 1.18.5
     "@typescript-eslint/eslint-plugin": 8.13.0
     "@typescript-eslint/parser": 7.17.0
-    "@wireapp/api-client": 27.9.0
+    "@wireapp/api-client": 27.10.0
     "@wireapp/commons": 5.2.13
     "@wireapp/copy-config": 2.2.10
     "@wireapp/eslint-config": 1.4.0