Merge branch 'born-private-complete' into 'main'

Born Private complete

See merge request web/clients!23093

Author: MargeBot

applications/account/src/app/content/PublicAppInteractive.tsx

@@ -21,6 +21,8 @@ import { replaceUrl } from '@proton/shared/lib/helpers/browser';
 import { FlagProvider } from '@proton/unleash/proxy';
 import noop from '@proton/utils/noop';
 
+import bornPrivateActivatePage from '../../pages/born-private.activate';
+import bornPrivateRecoveryPage from '../../pages/born-private.recovery';
 import forgotUsernamePage from '../../pages/forgot-username';
 import resetPasswordPage from '../../pages/reset-password';
 import locales from '../locales';
@@ -51,6 +53,8 @@ import SignInWithAnotherDeviceContainer from '../public/signInWithAnotherDevice/
 import ResetPasswordContainer from '../reset/ResetPasswordContainer';
 import SignupInviteContainer from '../signup/SignupInviteContainer';
 import { getSignupMeta } from '../signup/signupPagesJson';
+import Activation from '../signupCtx/flows/bornPrivate/activation/Activation';
+import Recovery from '../signupCtx/flows/bornPrivate/recovery/Recovery';
 import SingleSignupContainer from '../single-signup/SingleSignupContainer';
 import { extraThunkArguments } from '../store/public-thunk';
 import type useLocationWithoutLocale from '../useLocationWithoutLocale';
@@ -392,6 +396,19 @@ const PublicAppInteractive = ({
                                                 />
                                             </UnAuthenticated>
                                         </Route>
+                                        <Route path={SSO_PATHS.BORN_PRIVATE_ACTIVATE}>
+                                            <UnAuthenticated>
+                                                <Activation
+                                                    metaTags={bornPrivateActivatePage()}
+                                                    onLogin={handleLogin}
+                                                />
+                                            </UnAuthenticated>
+                                        </Route>
+                                        <Route path={SSO_PATHS.BORN_PRIVATE_RECOVERY}>
+                                            <UnAuthenticated>
+                                                <Recovery metaTags={bornPrivateRecoveryPage()} />
+                                            </UnAuthenticated>
+                                        </Route>
                                         <Route
                                             path={[
                                                 SSO_PATHS.SIGNUP,
@@ -414,8 +431,8 @@ const PublicAppInteractive = ({
                                                 SSO_PATHS.MEET_SIGNUP_B2B,
                                                 SSO_PATHS.PORKBUN_SIGNUP,
                                                 SSO_PATHS.PORKBUN_SIGN_IN,
-                                                SSO_PATHS.FIRST_EMAIL,
                                                 SSO_PATHS.GREENLAND_SIGNUP,
+                                                SSO_PATHS.BORN_PRIVATE,
                                             ]}
                                         >
                                             <SingleSignupSwitchContainer

applications/account/src/app/content/SingleSignupSwitchContainer.tsx

@@ -57,7 +57,7 @@ const SingleSignupSwitchContainer = ({
     const renderContextSignup =
         searchParams.get('mode') === 'ctx' ||
         location.pathname === SSO_PATHS.START ||
-        location.pathname === SSO_PATHS.FIRST_EMAIL ||
+        location.pathname === SSO_PATHS.BORN_PRIVATE ||
         location.pathname === SSO_PATHS.MEET_SIGNUP ||
         location.pathname === SSO_PATHS.GREENLAND_SIGNUP ||
         isReferral;

applications/account/src/app/content/theme/getThemeFromLocation.ts

@@ -51,7 +51,8 @@ export const getThemeFromLocation = (
         location.pathname === SSO_PATHS.DOCS_SIGNUP ||
         location.pathname === SSO_PATHS.VPN_SIGNUP ||
         location.pathname === SSO_PATHS.LUMO_SIGNUP ||
-        location.pathname === SSO_PATHS.MEET_SIGNUP
+        location.pathname === SSO_PATHS.MEET_SIGNUP ||
+        location.pathname.startsWith(SSO_PATHS.BORN_PRIVATE)
     ) {
         return {
             LightTheme: ThemeTypes.Storefront,

applications/account/src/app/signupCtx/SignupCtxRouter.tsx

@@ -2,13 +2,12 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 
 import { PaymentsContextOptimisticProvider } from '@proton/payments/ui';
 import { SSO_PATHS } from '@proton/shared/lib/constants';
-import { useFlag } from '@proton/unleash/useFlag';
 
 import { cachedPlans } from '../defaultPlans';
 import type { BaseSignupContextProps } from './context/SignupContext';
+import EmailReservationSignup from './flows/bornPrivate/emailReservation/EmailReservationSignup';
 import DrivePricing from './flows/drive/DrivePricing';
 import DriveSignup from './flows/drive/DriveSignup';
-import FirstEmailReservationFlowSignup from './flows/firstEmailReservation/FirstEmailReservationFlow';
 import GenericStartSignup from './flows/genericStart/GenericStartSignup';
 import GreenlandSignup from './flows/greenland/GreenlandSignup';
 import MeetB2CSignup from './flows/meet/MeetB2CSignup';
@@ -45,9 +44,17 @@ const GenericSignupController = (props: BaseSignupContextProps) => {
     );
 };
 
-const SignupCtxRouter = (props: BaseSignupContextProps) => {
-    const firstEmailEnabled = useFlag('FirstEmail');
+const EmailReservationController = () => {
+    return (
+        <Switch>
+            <Route>
+                <EmailReservationSignup />
+            </Route>
+        </Switch>
+    );
+};
 
+const SignupCtxRouter = (props: BaseSignupContextProps) => {
     return (
         <PaymentsContextOptimisticProvider preload={false} authenticated={false} cachedPlans={cachedPlans}>
             <Switch>
@@ -63,19 +70,17 @@ const SignupCtxRouter = (props: BaseSignupContextProps) => {
                 <Route path={SSO_PATHS.MEET_SIGNUP}>
                     <MeetB2CSignup {...props} />
                 </Route>
-                {firstEmailEnabled && (
-                    <Route path={SSO_PATHS.FIRST_EMAIL}>
-                        <FirstEmailReservationFlowSignup {...props} />
-                    </Route>
-                )}
                 <Route path={SSO_PATHS.GREENLAND_SIGNUP}>
                     <GreenlandSignup {...props} />
                 </Route>
+                <Route path={SSO_PATHS.BORN_PRIVATE}>
+                    <EmailReservationController />
+                </Route>
                 <Route>
                     <GenericSignupController {...props} />
                 </Route>
-            </Switch>
-        </PaymentsContextOptimisticProvider>
+            </Switch >
+        </PaymentsContextOptimisticProvider >
     );
 };
 

applications/account/src/app/signupCtx/containers/username/useEmailInput.tsx

@@ -23,6 +23,9 @@ interface Props {
     emailReadOnly?: boolean;
     emailDisabled?: boolean;
     emailLabelHidden?: boolean;
+
+    usernameLabelHidden?: boolean;
+    usernameLabel?: string;
 }
 
 const useEmailInput = ({
@@ -34,6 +37,8 @@ const useEmailInput = ({
     emailLabelHidden,
     bigger,
     inputClassName,
+    usernameLabelHidden,
+    usernameLabel,
 }: Props) => {
     const anchorRef = useRef<HTMLButtonElement | null>(null);
     const accountDataContext = useAccountFormDataContext();
@@ -156,7 +161,7 @@ const useEmailInput = ({
                                 bigger={bigger}
                                 ref={refs.username}
                                 id="username"
-                                label={c('Signup label').t`Username`}
+                                label={usernameLabelHidden ? undefined : usernameLabel || c('Signup label').t`Username`}
                                 error={errors.username}
                                 inputClassName="email-input-field"
                                 suffix={(() => {

applications/account/src/app/signupCtx/context/accountData/AccountFormDataContext.tsx

@@ -370,8 +370,8 @@ const getErrorAssistDetails = (
     const emailAssistError = getAssistVisible(inputStates.email) ? errorDetails.email : undefined;
     const emailAlreadyUsed = Boolean(
         emailAssistError &&
-            asyncStates.email.error &&
-            getApiError(asyncStates.email.error)?.code === API_CUSTOM_ERROR_CODES.ALREADY_USED
+        asyncStates.email.error &&
+        getApiError(asyncStates.email.error)?.code === API_CUSTOM_ERROR_CODES.ALREADY_USED
     );
 
     return {

applications/account/src/app/signupCtx/flows/bornPrivate/activation/Activation.tsx

@@ -0,0 +1,41 @@
+import { Redirect, useLocation } from 'react-router-dom';
+
+import { CircleLoader } from '@proton/atoms/CircleLoader/CircleLoader';
+import type { OnLoginCallback } from '@proton/components/containers/app/interface';
+import { SSO_PATHS } from '@proton/shared/lib/constants';
+import { useFlagsStatus } from '@proton/unleash/proxy';
+import { useFlag } from '@proton/unleash/useFlag';
+
+import { type MetaTags, useMetaTags } from '../../../../useMetaTags';
+import ActivationForm from './ActivationForm';
+import { decodeActivationParams } from './helpers/activationHelpers';
+
+interface ActivationProps {
+    onLogin: OnLoginCallback;
+    metaTags: MetaTags;
+}
+
+const Activation = ({ onLogin, metaTags }: ActivationProps) => {
+    useMetaTags(metaTags);
+    const location = useLocation();
+    const { flagsReady } = useFlagsStatus();
+    const isBornPrivateActivationRecoveryEnabled = useFlag('BornPrivateActivationRecovery');
+
+    if (!flagsReady) {
+        return (
+            <div className="flex items-center justify-center h-full w-full">
+                <CircleLoader size="large" />
+            </div>
+        );
+    }
+
+    if (!isBornPrivateActivationRecoveryEnabled) {
+        return <Redirect to={SSO_PATHS.LOGIN} />;
+    }
+
+    const prefilledParams = decodeActivationParams(location.hash);
+
+    return <ActivationForm prefilledParams={prefilledParams} onLogin={onLogin} />;
+};
+
+export default Activation;