PR feedback: Formatting, translations for generic error page, general…

… feedback

packages/react-sdk/src/contexts/CorbadoContext.tsx

@@ -4,17 +4,18 @@ import type {
   AuthMethodsListError,
   CompleteLoginWithEmailOTPError,
   CompleteSignupWithEmailOTPError,
-  CorbadoAppParams, GetProjectConfigError,
+  CorbadoAppParams,
+  GetProjectConfigError,
   InitLoginWithEmailOTPError,
   InitSignUpWithEmailOTPError,
   LoginWithPasskeyError,
   NonRecoverableError,
   RecoverableError,
   SignUpWithPasskeyError,
 } from '@corbado/web-core';
+import type { CorbadoApp } from '@corbado/web-core';
 import { createContext, type PropsWithChildren } from 'react';
 import type { Result } from 'ts-results';
-import {CorbadoApp} from "@corbado/web-core";
 
 export type AppProviderParams = PropsWithChildren<CorbadoAppParams>;
 

packages/react-sdk/src/contexts/CorbadoProvider.tsx

@@ -1,6 +1,6 @@
 import type { SessionUser } from '@corbado/types';
-import type { NonRecoverableError} from '@corbado/web-core';
-import {CorbadoApp} from '@corbado/web-core';
+import type { NonRecoverableError } from '@corbado/web-core';
+import { CorbadoApp } from '@corbado/web-core';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 

packages/react-sdk/src/index.ts

@@ -1,7 +1,7 @@
 import {
   InvalidEmailError,
-  InvalidPasskeyError,
   InvalidFullnameError,
+  InvalidPasskeyError,
   NoPasskeyAvailableError,
   PasskeyChallengeCancelledError,
   UnknownUserError,

packages/react/src/components/EmailOtpScreenWrapper.tsx

@@ -1,13 +1,13 @@
 import type { FC, FormEvent, ReactNode } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import useFlowHandler from '../hooks/useFlowHandler';
 import { Body } from './Body';
 import { Button } from './Button';
 import { Header } from './Header';
 import { IconLink } from './IconLink';
 import { Gmail, Outlook, Yahoo } from './icons';
 import { OtpInputGroup } from './OtpInputGroup';
-import useFlowHandler from '../hooks/useFlowHandler';
 
 export interface EmailOtpScreenProps {
   header: ReactNode;
@@ -30,7 +30,6 @@ export const EmailOtpScreenWrapper: FC<EmailOtpScreenProps> = ({
 }) => {
   const [otp, setOTP] = useState<string>('');
   const { currentUserState } = useFlowHandler();
-  const [isOtpValid] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const submitButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -91,7 +90,7 @@ export const EmailOtpScreenWrapper: FC<EmailOtpScreenProps> = ({
         ref={submitButtonRef}
         variant='primary'
         isLoading={loading}
-        disabled={!isOtpValid || loading}
+        disabled={!loading}
       >
         {verificationButtonText}
       </Button>

packages/react/src/contexts/FlowHandlerContext.ts

@@ -14,18 +14,16 @@ export interface FlowHandlerContextProps {
   currentScreen: ScreenNames;
   currentUserState: UserState;
   initialized: boolean;
-  navigateNext: (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => Promise<void>;
   navigateBack: () => ScreenNames;
   changeFlow: (flowType: FlowType) => void;
-  emitEvent: (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => Promise<void>;
+  emitEvent: (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => Promise<void> | undefined;
 }
 
 export const initialContext: FlowHandlerContextProps = {
   currentFlow: LoginFlowNames.PasskeyLoginWithEmailOTPFallback,
   currentScreen: CommonScreens.Start,
   currentUserState: {},
   initialized: false,
-  navigateNext: () => Promise.resolve(),
   navigateBack: () => CommonScreens.Start,
   changeFlow: () => void 0,
   emitEvent: () => Promise.reject(),

packages/react/src/contexts/FlowHandlerProvider.tsx

@@ -27,13 +27,13 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
       ? LoginFlowNames.PasskeyLoginWithEmailOTPFallback
       : SignUpFlowNames.PasskeySignupWithEmailOTPFallback,
   );
-  const initialized = useRef(false);
+  const [initialized, setInitialized] = useState(false);
   const onScreenChangeCbId = useRef<number>(0);
   const onFlowChangeCbId = useRef<number>(0);
   const onUserStateChangeCbId = useRef<number>(0);
 
   useEffect(() => {
-    if (initialized.current) {
+    if (initialized) {
       return;
     }
 
@@ -55,7 +55,7 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
       void flowHandler.init(corbadoApp);
 
       setFlowHandler(flowHandler);
-      initialized.current = true;
+      setInitialized(true);
     })();
 
     return () => {
@@ -66,20 +66,13 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
   }, []);
 
   useEffect(() => {
-    if (!initialized.current || !user) {
+    if (!initialized || !user) {
       return;
     }
 
     flowHandler?.updateUser(user);
   }, [initialized, user]);
 
-  const navigateNext = useCallback(
-    async (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => {
-      (await flowHandler?.navigateNext(event, eventOptions)) ?? CommonScreens.End;
-    },
-    [flowHandler],
-  );
-
   const navigateBack = useCallback(() => {
     return flowHandler?.navigateBack() ?? CommonScreens.Start;
   }, [flowHandler]);
@@ -93,7 +86,7 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
 
   const emitEvent = useCallback(
     (event?: FlowHandlerEvents, eventOptions?: FlowHandlerEventOptions) => {
-      return flowHandler!.handleStateUpdate(event, eventOptions);
+      return flowHandler?.handleStateUpdate(event, eventOptions);
     },
     [flowHandler],
   );
@@ -103,21 +96,12 @@ export const FlowHandlerProvider: FC<PropsWithChildren<Props>> = ({ children, ..
       currentFlow,
       currentScreen,
       currentUserState,
-      initialized: initialized.current,
-      navigateNext,
+      initialized,
       navigateBack,
       changeFlow,
       emitEvent,
     }),
-    [
-      currentFlow,
-      currentScreen,
-      currentUserState,
-      initialized.current,
-      navigateNext,
-      navigateBack,
-      changeFlow,
-    ],
+    [currentFlow, currentScreen, currentUserState, initialized, navigateBack, changeFlow],
   );
 
   return <FlowHandlerContext.Provider value={contextValue}>{children}</FlowHandlerContext.Provider>;

packages/react/src/flows/PasskeyLoginWithEmailOTPFallbackFlow.tsx

@@ -3,8 +3,8 @@ import { PasskeyLoginWithEmailOtpFallbackScreens } from '@corbado/shared-ui';
 import { EmailOTP } from '../screens/login/EmailOTP';
 import { InitiateLogin } from '../screens/login/InitiateLogin';
 import { PasskeyAppend } from '../screens/login/PasskeyAppend';
-import { PasskeyError } from '../screens/login/PasskeyError';
 import { PasskeyBenefits } from '../screens/login/PasskeyBenefits';
+import { PasskeyError } from '../screens/login/PasskeyError';
 
 export const PasskeyLoginWithEmailOTPFallbackFlow = {
   [PasskeyLoginWithEmailOtpFallbackScreens.Start]: InitiateLogin,

packages/react/src/screens/ErrorBoundary.tsx

@@ -2,6 +2,7 @@ import type { NonRecoverableError, RecoverableError } from '@corbado/web-core';
 import React from 'react';
 
 import NonRecoverableErrorComponent from './errors/NonRecoverableError';
+import NonRecoverableErrorForCustomer from './errors/NonRecoverableErrorForCustomer';
 
 export type ErrorBoundaryProps = React.PropsWithChildren<{
   globalError: NonRecoverableError | undefined;
@@ -29,26 +30,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
 
   render() {
     if ((this.props.globalError || this.state.error) && !this.props.isDevMode) {
-      return (
-        <div className='error-page'>
-          <div className='prod-error-container'>
-            <div className='prod-error-title'>Something went wrong</div>
-            <div className='prod-error-details'>
-              <div className='prod-error-apology'>We’re sorry that our service is currently not available.</div>
-              <div>
-                Please try again in a few moments and if the issue persists
-                {this.props.customerSupportEmail ? `, please contact ${this.props.customerSupportEmail}.` : '.'}
-              </div>
-            </div>
-            <button
-              className='prod-error-button'
-              onClick={() => window.location.reload()}
-            >
-              Refresh page
-            </button>
-          </div>
-        </div>
-      );
+      return <NonRecoverableErrorForCustomer customerSupportEmail={this.props.customerSupportEmail} />;
     }
 
     if (this.props.globalError) {

packages/react/src/screens/ScreenFlow.tsx

@@ -3,11 +3,11 @@ import { CommonScreens } from '@corbado/shared-ui';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { Spinner } from '../components';
 import type { ScreenMap } from '../flows';
 import { flowScreensMap } from '../flows';
 import useFlowHandler from '../hooks/useFlowHandler';
 import { ErrorBoundary } from './ErrorBoundary';
-import {LoadingScreen} from "./LoadingScreen";
 
 interface ScreenFlowProps {
   isDevMode: boolean;
@@ -39,7 +39,7 @@ export const ScreensFlow: FC<ScreenFlowProps> = ({ isDevMode, customerSupportEma
       isDevMode={isDevMode}
       customerSupportEmail={customerSupportEmail}
     >
-      {initialized ? ScreenComponent ? <ScreenComponent /> : <EndComponent /> : <LoadingScreen />}
+      {initialized ? ScreenComponent ? <ScreenComponent /> : <EndComponent /> : <Spinner />}
     </ErrorBoundary>
   );
 };

packages/react/src/screens/errors/NonRecoverableErrorForCustomer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const NonRecoverableErrorForCustomer = (customerSupportEmail: { customerSupportEmail: string }) => {
+  const { t } = useTranslation('translation', { keyPrefix: 'authenticationFlows.unexpectedError' });
+  return (
+    <div className='error-page'>
+      <div className='prod-error-container'>
+        <div className='prod-error-title'>{t('header')}</div>
+        <div className='prod-error-details'>
+          <div className='prod-error-apology'>{t('body_introduction')}</div>
+          <div>
+            {customerSupportEmail
+              ? t('body_explanationCustomerSupport', customerSupportEmail)
+              : t('body_explanationNoCustomerSupport')}
+          </div>
+        </div>
+        <button
+          className='prod-error-button'
+          onClick={() => window.location.reload()}
+        >
+          {t('cta')}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default NonRecoverableErrorForCustomer;

packages/react/src/screens/login/EmailOTP.tsx

@@ -8,7 +8,6 @@ import useFlowHandler from '../../hooks/useFlowHandler';
 
 export const EmailOTP = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'authenticationFlows.login.emailOtp' });
-  const { t: tErrors } = useTranslation('translation', { keyPrefix: 'errors' });
   const { emitEvent, currentUserState } = useFlowHandler();
 
   const header = t('header');
@@ -19,7 +18,6 @@ export const EmailOTP = () => {
       {t('body_text2')}
     </>
   );
-  const validationError = tErrors('serverError_invalidOtp');
   const verificationButtonText = t('button_verify');
   const backButtonText = t('button_back');
 
@@ -38,7 +36,6 @@ export const EmailOTP = () => {
     () => ({
       header,
       body,
-      validationError,
       verificationButtonText,
       backButtonText,
       onVerificationButtonClick: handleOTPVerification,
@@ -51,7 +48,6 @@ export const EmailOTP = () => {
       handleCancel,
       header,
       body,
-      validationError,
       verificationButtonText,
       backButtonText,
     ],

packages/react/src/screens/signup/EmailOTP.tsx

@@ -24,9 +24,9 @@ export const EmailOTP = () => {
   const handleCancel = useCallback(() => emitEvent(FlowHandlerEvents.SecondaryButton), []);
 
   const handleOTPVerification: EmailOtpScreenProps['onVerificationButtonClick'] = useCallback(
-    (otp: string, setLoading) => {
+    async (otp: string, setLoading) => {
       setLoading(true);
-      return emitEvent(FlowHandlerEvents.PrimaryButton, { emailOTPCode: otp });
+      await emitEvent(FlowHandlerEvents.PrimaryButton, { emailOTPCode: otp });
     },
     [],
   );

packages/react/src/screens/signup/PasskeyWelcome.tsx

@@ -1,10 +1,10 @@
+import { FlowHandlerEvents } from '@corbado/shared-ui';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type { PasskeyScreensWrapperProps } from '../../components';
 import { PasskeyScreensWrapper } from '../../components';
 import useFlowHandler from '../../hooks/useFlowHandler';
-import { FlowHandlerEvents } from '@corbado/shared-ui';
 
 export const PasskeyWelcome = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'authenticationFlows.signup.passkeySuccess' });

packages/shared-ui/package.json

@@ -30,12 +30,10 @@
   "bugs": {
     "url": "https://github.com/corbado/javascript/issues"
   },
-  "dependencies": {
-    "i18next": "23.5.1",
-    "@corbado/web-core": "*"
-  },
   "devDependencies": {
+    "i18next": "23.5.1",
     "@corbado/types": "*",
+    "@corbado/web-core": "*",
     "@svgr/webpack": "^8.1.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",