Merge branch 'oles-disable-e2ee' into 'main'

MargeBot · MargeBot · commit 25168a8673b0 · 2026-06-12T08:03:39.000Z
Disable OLES addresses' E2EE before the migration is completed

See merge request web/clients!25564
diff --git a/packages/activation/src/oles/components/MigrationAssistant/MigratingModal.tsx b/packages/activation/src/oles/components/MigrationAssistant/MigratingModal.tsx
@@ -10,9 +10,31 @@ import { LazyLottie } from '../LazyLottie';
 
 import './MigratingModal.scss';
 
-const MigratingModal = () => {
+type ModalVariant = 'migrating' | 'completing';
+
+const MigratingModal = ({ variant }: { variant: ModalVariant }) => {
     useBeforeUnload(true);
 
+    const variantConfigs: Record<
+        ModalVariant,
+        { title: string; subtitle: string; getAnimationData: () => Promise<{ default: object }> }
+    > = {
+        migrating: {
+            title: c('BOSS').t`Creating accounts. Going private`,
+            subtitle: c('BOSS')
+                .t`We’re creating your accounts and importing your data now. Every email, every event is yours alone. Visible to your team only. Not us, not anyone else.`,
+            getAnimationData: () => import('../../animations/fileTransfer.json'),
+        },
+        completing: {
+            title: c('BOSS').t`Going private`,
+            subtitle: c('BOSS')
+                .t`We’re switching on end-to-end encryption for everyone. Every email, every event is now yours alone. Visible to your team only. Not us, not anyone else.`,
+            getAnimationData: () => import('../../animations/fileTransfer.json'),
+        },
+    };
+
+    const { title, subtitle, getAnimationData } = variantConfigs[variant];
+
     return (
         <ModalTwo
             open
@@ -22,18 +44,12 @@ const MigratingModal = () => {
         >
             <ModalTwoContent>
                 <div className="text-center pt-12 pb-6">
-                    <LazyLottie
-                        autoPlay
-                        getAnimationData={() => import('../../animations/fileTransfer.json')}
-                        loop={true}
-                        className="px-12"
-                    />
+                    <LazyLottie autoPlay getAnimationData={getAnimationData} loop={true} className="px-12" />
                     <h2 className="text-center text-lg text-semibold mt-6 mb-4">
-                        {c('BOSS').t`Creating accounts. Going private`}
+                        {title}
                         <EllipsisLoader />
                     </h2>
-                    <p className="m-0 color-weak">{c('BOSS')
-                        .t`We’re creating your accounts and importing your data now. Every email, every event is yours alone. Visible to your team only. Not us, not anyone else.`}</p>
+                    <p className="m-0 color-weak">{subtitle}</p>
                     <p className="color-danger flex items-center justify-center gap-2">
                         <IcInfoCircle />
                         {c('BOSS').t`Please don’t close or refresh this window.`}
diff --git a/packages/activation/src/oles/components/MigrationAssistant/MigrationAssistant.tsx b/packages/activation/src/oles/components/MigrationAssistant/MigrationAssistant.tsx
@@ -297,7 +297,7 @@ const MigrationAssistant: FC<StepComponentProps> = ({ model, onNext }) => {
                 />
             )}
 
-            {migrating && <MigratingModal />}
+            {migrating && <MigratingModal variant="migrating" />}
         </div>
     );
 };
diff --git a/packages/activation/src/oles/components/MigrationFlow.tsx b/packages/activation/src/oles/components/MigrationFlow.tsx
@@ -7,13 +7,10 @@ import { CircleLoader } from '@proton/atoms/CircleLoader/CircleLoader';
 import { Href } from '@proton/atoms/Href/Href';
 import EllipsisLoader from '@proton/components/components/loader/EllipsisLoader';
 import useModalState from '@proton/components/components/modalTwo/useModalState';
-import { useSilentApi } from '@proton/components/hooks/useSilentApi';
 import usePrevious from '@proton/hooks/usePrevious';
 import { useDispatch } from '@proton/redux-shared-store/sharedProvider';
-import { getDomainRegistrar } from '@proton/shared/lib/api/domains';
 import { getEmailParts } from '@proton/shared/lib/helpers/email';
 import { getKnowledgeBaseUrl } from '@proton/shared/lib/helpers/url';
-import type { DomainRegistrar } from '@proton/shared/lib/interfaces';
 
 import { ApiImporterOrganizationState } from '../../api/api.interface';
 import { EASY_SWITCH_FEATURES, OAUTH_PROVIDER } from '../../interface';
@@ -46,7 +43,6 @@ const SETUP_DEFAULTS: MigrationConfiguration = {
 };
 
 const MigrationFlow = () => {
-    const api = useSilentApi();
     const dispatch = useDispatch();
     const [customDomains] = useCustomDomains();
     const [importerOrganizations] = useImporterOrganizations();
@@ -105,18 +101,6 @@ const MigrationFlow = () => {
         update: onUpdate,
     };
 
-    useEffect(() => {
-        void (async () => {
-            if (!domain) {
-                onUpdate({ domainRegistrarId: undefined });
-                return;
-            }
-
-            const { RegistrarID } = await api<DomainRegistrar>(getDomainRegistrar(domain.ID));
-            onUpdate({ domainRegistrarId: RegistrarID ?? undefined });
-        })();
-    }, [domain]);
-
     const prevModelState = usePrevious(model.state);
     useEffect(() => {
         if (
diff --git a/packages/activation/src/oles/components/MigrationSetup/MigrationSetup.tsx b/packages/activation/src/oles/components/MigrationSetup/MigrationSetup.tsx
@@ -3,12 +3,20 @@ import React, { type FC, useEffect, useState } from 'react';
 import { c } from 'ttag';
 
 import { Button } from '@proton/atoms/Button/Button';
+import { useSilentApi } from '@proton/components/hooks/useSilentApi';
 import { IcCheckmarkCircleFilled } from '@proton/icons/icons/IcCheckmarkCircleFilled';
 import { IcChevronDownFilled } from '@proton/icons/icons/IcChevronDownFilled';
 import { IcChevronUpFilled } from '@proton/icons/icons/IcChevronUpFilled';
 import { IcExclamationCircle } from '@proton/icons/icons/IcExclamationCircle';
+import { getDomainRegistrar } from '@proton/shared/lib/api/domains';
 import { SECOND } from '@proton/shared/lib/constants';
-import { DKIM_STATE, DMARC_STATE, SPF_STATE, VERIFY_STATE } from '@proton/shared/lib/interfaces/Domain';
+import {
+    DKIM_STATE,
+    DMARC_STATE,
+    type DomainRegistrar,
+    SPF_STATE,
+    VERIFY_STATE,
+} from '@proton/shared/lib/interfaces/Domain';
 import clsx from '@proton/utils/clsx';
 import noop from '@proton/utils/noop';
 
@@ -172,6 +180,7 @@ const MigrationNavigationListStepButton = ({
 };
 
 const MigrationSetup: FC<MigrationSetupProps> = ({ model, onSubmit }) => {
+    const api = useSilentApi();
     const [providerUsers, , refreshProviderUsers] = useProviderUsers(model.domainName);
     const [state, setState] = useState<MigrationSetupState>({
         currentStep: model.importerOrganizationId ? 'migrate-accounts' : 'configure-migration',
@@ -220,6 +229,18 @@ const MigrationSetup: FC<MigrationSetupProps> = ({ model, onSubmit }) => {
         return () => clearTimeout(timer);
     }, [hasIncompleteUsers, hasInactiveUsers, refreshProviderUsers]);
 
+    useEffect(() => {
+        void (async () => {
+            if (!model.domain) {
+                model.update({ domainRegistrarId: undefined });
+                return;
+            }
+
+            const { RegistrarID } = await api<DomainRegistrar>(getDomainRegistrar(model.domain.ID));
+            model.update({ domainRegistrarId: RegistrarID ?? undefined });
+        })();
+    }, [model.domain]);
+
     const stepConfigs: Record<StepId, StepConfig> = {
         'configure-migration': {
             text: c('BOSS').t`Configure migration`,
diff --git a/packages/activation/src/oles/components/MigrationSetup/StepFinal.tsx b/packages/activation/src/oles/components/MigrationSetup/StepFinal.tsx
@@ -2,27 +2,30 @@ import { type FC, useState } from 'react';
 
 import { c } from 'ttag';
 
-import { patchOrganizationImporter } from '@proton/activation/src/api/api';
-import { type ApiImporterOrganization, ApiImporterOrganizationState } from '@proton/activation/src/api/api.interface';
+import { ApiImporterOrganizationState } from '@proton/activation/src/api/api.interface';
 import { Banner } from '@proton/atoms/Banner/Banner';
 import { Button } from '@proton/atoms/Button/Button';
-import Checkbox from '@proton/components/components/input/Checkbox';
-import { useSilentApi } from '@proton/components/hooks/useSilentApi';
+import {
+    BorderedContainer,
+    BorderedContainerItem,
+} from '@proton/components/components/BorderedStackedGroup/BorderedContainer';
 import useLoading from '@proton/hooks/useLoading';
 import { IcExclamationCircleFilled } from '@proton/icons/icons/IcExclamationCircleFilled';
+import { useDispatch } from '@proton/redux-shared-store/sharedProvider';
 import { BRAND_NAME } from '@proton/shared/lib/constants';
 import { MX_STATE } from '@proton/shared/lib/interfaces';
 
+import { completeMigration } from '../../thunk';
 import type { MigrationModel } from '../../types';
 import { useProviderUsers } from '../../useProviderUsers';
-import { LazyLottie } from '../LazyLottie';
+import MigratingModal from '../MigrationAssistant/MigratingModal';
 import DNSGroupRecords, { type DNSGroup } from './DNSGroupRecords';
 import type { StepComponentProps } from './MigrationSetup';
 
 const StepFinal: FC<StepComponentProps> = ({ model: migrationConfiguration }) => {
     const model = migrationConfiguration as MigrationModel;
+    const dispatch = useDispatch();
 
-    const api = useSilentApi();
     const [providerUsers] = useProviderUsers(model.domainName);
     const [loading, withLoading] = useLoading();
     const [confirmed, setConfirmed] = useState(false);
@@ -32,14 +35,14 @@ const StepFinal: FC<StepComponentProps> = ({ model: migrationConfiguration }) =>
             return;
         }
 
-        await api<ApiImporterOrganization>(
-            patchOrganizationImporter(model.importerOrganizationId!, {
-                State: ApiImporterOrganizationState.COMPLETED,
+        const { State: state } = await dispatch(
+            completeMigration({
+                importerOrganizationId: model.importerOrganizationId,
+                providerUsers: providerUsers ?? [],
             })
-        )
-            .then(({ State }) => State)
-            .catch(() => model.state)
-            .then((state) => model.update({ state }));
+        ).unwrap();
+
+        model.update({ state });
     };
 
     const handleSaveAndExit = () => withLoading(handleFinalize());
@@ -94,7 +97,7 @@ const StepFinal: FC<StepComponentProps> = ({ model: migrationConfiguration }) =>
                         size="medium"
                         className="rounded-lg"
                     >
-                        {c('Action').t`Save & exit`}
+                        {c('Action').t`Save & finish`}
                     </Button>
                 </div>
             </div>
@@ -119,26 +122,30 @@ const StepFinal: FC<StepComponentProps> = ({ model: migrationConfiguration }) =>
                 {c('BOSS')
                     .t`You're almost done, you need to configure your domain to receive your emails directly on ${BRAND_NAME}. Once confirmed, your team will stop receiving new emails on Gmail and the migration will be completed.`}
             </p>
-            <LazyLottie
-                style={{ padding: '0 10rem' }}
-                autoPlay
-                getAnimationData={() => import('../../animations/providerSwitch.json')}
-                loop={true}
-            />
             <p className="color-weak">{c('BOSS')
                 .t`Copy the below code and paste it in the DNS section of your domain host.`}</p>
             <DNSGroupRecords group={group} />
-            <Checkbox
-                id="confirm-mx-records"
-                className="items-center text-normal"
-                checked={confirmed}
-                onChange={(e) => setConfirmed(e.target.checked)}
-            >
-                <div className="px-2">
-                    <p className="m-0">{c('Label').t`Confirm MX records added`}</p>
-                    <span className="color-weak text-sm">{c('Info').t`Required to proceed to the next step`}</span>
-                </div>
-            </Checkbox>
+            <BorderedContainer className="mb-4 mt-2">
+                <BorderedContainerItem
+                    className="flex flex-row flex-nowrap items-center gap-2 justify-space-between"
+                    paddingClassName="py-2 px-5"
+                >
+                    <div>
+                        <p className="m-0 text-semibold">{c('Label').t`Confirm MX records added`}</p>
+                        <span className="color-weak text-sm">{c('Info').t`Required to complete the migration`}</span>
+                    </div>
+
+                    <Button
+                        disabled={confirmed}
+                        color="norm"
+                        className="text-semibold rounded-lg"
+                        size="medium"
+                        onClick={() => setConfirmed(true)}
+                    >{c('BOSS').t`Confirm`}</Button>
+                </BorderedContainerItem>
+            </BorderedContainer>
+
+            {loading && <MigratingModal variant="completing" />}
         </div>
     );
 };
diff --git a/packages/activation/src/oles/thunk.ts b/packages/activation/src/oles/thunk.ts
