diff --git a/package.json b/package.json index b2f5e5abb3..0c5458f05e 100644 --- a/package.json +++ b/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", diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json index 977219fbf2..2027f7c84f 100644 --- a/src/i18n/en-US.json +++ b/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 personal account will be transferred to a team account.", "termsPageListItem2": "This change is permanent and irrevocable.", diff --git a/src/script/module/action/TeamAction.ts b/src/script/module/action/TeamAction.ts index bd6fa65612..49ce3138a5 100644 --- a/src/script/module/action/TeamAction.ts +++ b/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); + }; } diff --git a/src/script/page/migration/TermsAcknowledgement.tsx b/src/script/page/migration/TermsAcknowledgement.tsx index 814c3faca3..a36f26b787 100644 --- a/src/script/page/migration/TermsAcknowledgement.tsx +++ b/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 ( +
+ +
+ ); + } return (
@@ -66,7 +91,7 @@ export const TermsAcknowledgement = () => {
)} {t('termsPageHeader')} - {t('termsPageHeader')} + {t('termsPageSubHeader', {email: inviterEmail})}
{t('termsPageListHeader')}
-
-
+
+
{t('termsPageAccountManagerHeader')}
{t('termsPageAccountManagerText')}
diff --git a/src/script/page/migration/styles.ts b/src/script/page/migration/styles.ts index a7da3efff7..cb23f6ca18 100644 --- a/src/script/page/migration/styles.ts +++ b/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', diff --git a/yarn.lock b/yarn.lock index 90b3ee95da..5ed2edc2f6 100644 --- a/yarn.lock +++ b/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