datakeen-session-react 1.1.140-dev.33 → 1.1.140-dev.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/DatakeenSession.js +2 -2
- package/dist/cjs/components/DatakeenSession.js.map +1 -1
- package/dist/cjs/components/selfie/SelfieConfirmation.js +1 -1
- package/dist/cjs/components/selfie/SelfieConfirmation.js.map +1 -1
- package/dist/cjs/components/selfie/Video.js +2 -2
- package/dist/cjs/components/selfie/Video.js.map +1 -1
- package/dist/cjs/components/selfie/selfie-flow/SelfieFlow.js +2 -2
- package/dist/cjs/components/selfie/selfie-flow/SelfieFlow.js.map +1 -1
- package/dist/cjs/components/selfie/selfie-flow/SelfieRecorder.js +10 -6
- package/dist/cjs/components/selfie/selfie-flow/SelfieRecorder.js.map +1 -1
- package/dist/cjs/components/session/Selfie.js +6 -5
- package/dist/cjs/components/session/Selfie.js.map +1 -1
- package/dist/cjs/components/session/SessionContent.js +2 -2
- package/dist/cjs/components/session/SessionContent.js.map +1 -1
- package/dist/cjs/components/template/ConditionNodeHandler.js +4 -0
- package/dist/cjs/components/template/ConditionNodeHandler.js.map +1 -1
- package/dist/cjs/components/template/TemplateNodeRenderer.js +25 -2
- package/dist/cjs/components/template/TemplateNodeRenderer.js.map +1 -1
- package/dist/cjs/hooks/useStepNavigation.js +1 -0
- package/dist/cjs/hooks/useStepNavigation.js.map +1 -1
- package/dist/cjs/index.css.js +1 -1
- package/dist/cjs/services/sessionService.js +20 -0
- package/dist/cjs/services/sessionService.js.map +1 -1
- package/dist/esm/components/DatakeenSession.js +2 -2
- package/dist/esm/components/DatakeenSession.js.map +1 -1
- package/dist/esm/components/selfie/SelfieConfirmation.js +1 -1
- package/dist/esm/components/selfie/SelfieConfirmation.js.map +1 -1
- package/dist/esm/components/selfie/Video.js +2 -2
- package/dist/esm/components/selfie/Video.js.map +1 -1
- package/dist/esm/components/selfie/selfie-flow/SelfieFlow.js +2 -2
- package/dist/esm/components/selfie/selfie-flow/SelfieFlow.js.map +1 -1
- package/dist/esm/components/selfie/selfie-flow/SelfieRecorder.js +10 -6
- package/dist/esm/components/selfie/selfie-flow/SelfieRecorder.js.map +1 -1
- package/dist/esm/components/session/Selfie.js +6 -5
- package/dist/esm/components/session/Selfie.js.map +1 -1
- package/dist/esm/components/session/SessionContent.js +2 -2
- package/dist/esm/components/session/SessionContent.js.map +1 -1
- package/dist/esm/components/template/ConditionNodeHandler.js +4 -0
- package/dist/esm/components/template/ConditionNodeHandler.js.map +1 -1
- package/dist/esm/components/template/TemplateNodeRenderer.js +26 -3
- package/dist/esm/components/template/TemplateNodeRenderer.js.map +1 -1
- package/dist/esm/hooks/useStepNavigation.js +1 -0
- package/dist/esm/hooks/useStepNavigation.js.map +1 -1
- package/dist/esm/index.css.js +1 -1
- package/dist/esm/services/sessionService.js +20 -1
- package/dist/esm/services/sessionService.js.map +1 -1
- package/docs/multi-runs.md +100 -0
- package/package.json +1 -1
|
@@ -54,7 +54,7 @@ var DatakeenSession = function (_a) {
|
|
|
54
54
|
// Session data management
|
|
55
55
|
var _p = useSessionData.useSessionData(sessionId, clientInfo, clientInfoLoaded), session = _p.session, setSession = _p.setSession, loading = _p.loading, setLoading = _p.setLoading, error = _p.error, isExpired = _p.isExpired, userInput = _p.userInput, setUserInput = _p.setUserInput, contactInfo = _p.contactInfo, setContactInfo = _p.setContactInfo, loadSession = _p.loadSession, handleRetrySession = _p.handleRetrySession;
|
|
56
56
|
// Step navigation management
|
|
57
|
-
var _q = useStepNavigation.useStepNavigation(sessionId, session === null || session === void 0 ? void 0 : session.status, session === null || session === void 0 ? void 0 : session.currentStep, session === null || session === void 0 ? void 0 : session.template), step = _q.step, stepObject = _q.stepObject;
|
|
57
|
+
var _q = useStepNavigation.useStepNavigation(sessionId, session === null || session === void 0 ? void 0 : session.status, session === null || session === void 0 ? void 0 : session.currentStep, session === null || session === void 0 ? void 0 : session.template), step = _q.step, stepObject = _q.stepObject, history = _q.history;
|
|
58
58
|
// Load route-specific CSS based on current step
|
|
59
59
|
useStepCSS.useStepCSS(step, session);
|
|
60
60
|
// Template loading logic
|
|
@@ -129,7 +129,7 @@ var DatakeenSession = function (_a) {
|
|
|
129
129
|
if (isExpired) {
|
|
130
130
|
return jsxRuntime.jsx(SessionExpired.default, { onRetry: handleRetrySession });
|
|
131
131
|
}
|
|
132
|
-
return (jsxRuntime.jsx(SessionContent.default, { step: step, loading: loading, session: session, sessionId: sessionId, stepObject: stepObject, userInput: userInput, setUserInput: setUserInput, contactInfo: contactInfo, setContactInfo: setContactInfo }));
|
|
132
|
+
return (jsxRuntime.jsx(SessionContent.default, { step: step, loading: loading, session: session, sessionId: sessionId, stepObject: stepObject, stepHistory: history, userInput: userInput, setUserInput: setUserInput, contactInfo: contactInfo, setContactInfo: setContactInfo }));
|
|
133
133
|
};
|
|
134
134
|
var mobileScrollPadding = showMobilePoweredBy
|
|
135
135
|
? "calc(".concat(poweredByHeight, "px + env(safe-area-inset-bottom, 0px))")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatakeenSession.js","sources":["../../../../src/components/DatakeenSession.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\nimport type { DatakeenSessionProps } from \"../types/session\";\nimport Paper from \"./ui/Paper\";\nimport useIsMobile from \"../hooks/useIsMobile\";\nimport PoweredBy from \"./ui/PoweredBy\";\nimport SessionExpired from \"./session/SessionExpired\";\nimport { useRouteCSS } from \"../hooks/useRouteCSS\";\nimport { DocumentProvider } from \"../context/DocumentContext\";\nimport { ConfigProvider } from \"../context/ConfigContext\";\nimport { setSessionStore } from \"../context/SessionContext\";\n\n// Hooks\nimport { useSessionData } from \"../hooks/useSessionData\";\nimport { useStepNavigation } from \"../hooks/useStepNavigation\";\nimport { useStepCSS } from \"../hooks/useStepCSS\";\nimport { useTemplateLoader } from \"../hooks/useTemplateLoader\";\nimport { useClientInfo } from \"../hooks/useClientInfo\";\nimport { getOrderedJourneySteps } from \"../services/sessionService\";\n\n// Components\nimport NoSessionIdState from \"./states/NoSessionIdState\";\nimport LoadingState from \"./states/LoadingState\";\nimport ErrorState from \"./states/ErrorState\";\nimport SessionContent from \"./session/SessionContent\";\n\n/**\n * DatakeenSession Component\n *\n * The main component of the Datakeen SDK that manages the multi-step verification flow.\n * This component handles the different steps of the session process, including:\n * - Initial welcome screen\n * - User information collection\n * - Country selection for JDI verification\n * - Mobile redirect when selfie is required\n *\n * The component maintains internal state for the current step and user input data,\n * progressing through the verification journey as the user completes each step.\n *\n * @param {DatakeenSessionProps} props - Component props\n * @param {string} props.sessionId - Unique identifier for the verification session\n * @param {SessionConfig} props.sessionConfig - Configuration for the session (e.g., selfie: true)\n * @param {string} props.apiBaseUrl - Optional API base URL for dynamic environment configuration\n * @returns {JSX.Element} A Paper-wrapped container with the appropriate step component based on current state\n */\nconst DatakeenSession = ({\n sessionId,\n sessionConfig,\n apiBaseUrl,\n}: DatakeenSessionProps) => {\n const isMobile = useIsMobile();\n const { info: clientInfo, isLoaded: clientInfoLoaded } = useClientInfo();\n\n // Load base CSS and UI components CSS that are always needed\n useRouteCSS(\"ui-components\");\n\n // Session data management\n const {\n session,\n setSession,\n loading,\n setLoading,\n error,\n isExpired,\n userInput,\n setUserInput,\n contactInfo,\n setContactInfo,\n loadSession,\n handleRetrySession,\n } = useSessionData(sessionId, clientInfo, clientInfoLoaded);\n\n // Step navigation management\n const { step, stepObject } = useStepNavigation(\n sessionId,\n session?.status,\n session?.currentStep,\n session?.template,\n );\n\n // Load route-specific CSS based on current step\n useStepCSS(step, session);\n\n // Template loading logic\n useTemplateLoader(step, sessionId, session, loading, setSession, setLoading);\n\n // Load session data on component mount\n useEffect(() => {\n loadSession();\n }, [sessionId, sessionConfig]);\n\n // Update global session store whenever session data changes\n useEffect(() => {\n const sanitizedSessionForGlobalStore = session\n ? {\n ...session,\n token: \"\",\n userInput: {},\n contactInfo: undefined,\n }\n : null;\n\n setSessionStore({\n session: sanitizedSessionForGlobalStore,\n loading,\n error,\n isExpired,\n userInput: {},\n contactInfo: { email: \"\", phoneNumber: \"\" },\n });\n }, [session, loading, error, isExpired]);\n\n // Handle initial step setting when session loads\n useEffect(() => {\n if (session && session.status === \"ended\") {\n // If session is ended, find the appropriate end step\n const templateNodes = session.template?.nodes || [];\n const endNodeIndex = templateNodes.findIndex(\n (node) => node.type === \"end\",\n );\n\n if (endNodeIndex !== -1) {\n stepObject.setStep(1 + endNodeIndex);\n } else {\n stepObject.setStep(1 + templateNodes.length);\n }\n }\n }, [session, stepObject]);\n\n if (!sessionId) {\n return <NoSessionIdState />;\n }\n\n // PoweredBy de DatakeenSession : uniquement pour les états spéciaux (loading/error/expired)\n // Les pages normales utilisent MobilePageLayout qui gère son propre PoweredBy\n const showMobilePoweredBy = isMobile && (loading || !!error || isExpired);\n const showDesktopPoweredBy = !isMobile && !loading && !error && !isExpired;\n const poweredByRef = useRef<HTMLDivElement | null>(null);\n const [poweredByHeight, setPoweredByHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (typeof window === \"undefined\" || !showMobilePoweredBy) {\n setPoweredByHeight(0);\n return;\n }\n\n const updateHeight = () => {\n if (poweredByRef.current) {\n setPoweredByHeight(poweredByRef.current.offsetHeight);\n }\n };\n\n updateHeight();\n window.addEventListener(\"resize\", updateHeight);\n\n return () => {\n window.removeEventListener(\"resize\", updateHeight);\n };\n }, [showMobilePoweredBy]);\n\n const mobileRootStyle: CSSProperties = {\n [\"--dk-mobile-footer-offset\" as any]: `${poweredByHeight}px`,\n };\n\n const renderSessionContent = () => {\n if (loading) {\n return <LoadingState />;\n }\n\n if (error) {\n return <ErrorState error={error} />;\n }\n\n if (isExpired) {\n return <SessionExpired onRetry={handleRetrySession} />;\n }\n\n return (\n <SessionContent\n step={step}\n loading={loading}\n session={session}\n sessionId={sessionId}\n stepObject={stepObject}\n userInput={userInput}\n setUserInput={setUserInput}\n contactInfo={contactInfo}\n setContactInfo={setContactInfo}\n />\n );\n };\n\n const mobileScrollPadding = showMobilePoweredBy\n ? `calc(${poweredByHeight}px + env(safe-area-inset-bottom, 0px))`\n : \"env(safe-area-inset-bottom, 0px)\";\n\n const currentTemplateNode = useMemo(() => {\n if (!session?.template || step < 1) {\n return null;\n }\n\n const templateIndex = Math.floor(step - 1);\n const orderedSteps = getOrderedJourneySteps(session.template);\n return orderedSteps[templateIndex] || null;\n }, [session?.template, step]);\n\n const shouldUseWideDesktopLayout =\n currentTemplateNode?.type === \"information-input\" &&\n currentTemplateNode.informationType === \"custom\" &&\n (currentTemplateNode.customFields || []).some(\n (field) => field.valueType === \"list\",\n );\n\n const isCaptureStep =\n currentTemplateNode?.type === \"biometric-capture\" ||\n currentTemplateNode?.type === \"selfie-capture\" ||\n currentTemplateNode?.type === \"document-collection\" || // Could be upload, but safer to allow full height\n currentTemplateNode?.type === \"controle-jdi\";\n\n const btnBg = session?.template?.buttonBgColor ?? \"#11E5C5\";\n const btnText = session?.template?.buttonTextColor ?? \"#3C3C40\";\n\n return (\n <ConfigProvider apiBaseUrl={apiBaseUrl}>\n <DocumentProvider>\n <div\n className=\"sdk-session flex-1 flex flex-col\"\n style={\n {\n [\"--dk-btn-bg\" as string]: btnBg,\n [\"--dk-btn-text\" as string]: btnText,\n ...(isMobile\n ? {\n [\"--dk-mobile-scroll-padding\" as string]:\n mobileScrollPadding,\n }\n : undefined),\n } as CSSProperties\n }\n >\n {isMobile ? (\n <div\n className=\"flex h-full w-full flex-col bg-white\"\n style={mobileRootStyle}\n >\n <div\n className={`flex flex-1 min-h-0 flex-col ${isCaptureStep ? \"\" : \"overflow-y-auto\"}`}\n style={{\n paddingBottom: isCaptureStep\n ? \"0\"\n : \"var(--dk-mobile-scroll-padding, env(safe-area-inset-bottom, 0px))\",\n }}\n >\n <div className=\"flex flex-1 flex-col min-h-0\">\n {renderSessionContent()}\n </div>\n </div>\n {showMobilePoweredBy && (\n <div\n className=\"bg-white px-4 pt-3 pb-4 sm:px-6 sm:pt-6 sm:pb-6\"\n style={{\n paddingBottom:\n \"calc(env(safe-area-inset-bottom, 0px) + 0.5rem)\",\n }}\n ref={poweredByRef}\n >\n <PoweredBy\n logo={session?.template?.logo}\n text={session?.template?.logo ? \"par\" : undefined}\n />\n </div>\n )}\n </div>\n ) : (\n <div className=\"flex items-center justify-center w-full min-h-screen bg-gray-100 py-12\">\n <div className=\"flex flex-col items-center justify-center\">\n <Paper\n className={`flex flex-col h-[800px] px-8 py-10 bg-white rounded-2xl shadow-xl z-10 ${shouldUseWideDesktopLayout\n ? \"w-[98vw] max-w-[1500px]\"\n : \"w-[600px]\"\n }`}\n >\n <div className=\"flex-1 w-full h-full overflow-y-auto\">\n {renderSessionContent()}\n </div>\n </Paper>\n {showDesktopPoweredBy && (\n <div className=\"pt-6 text-center\">\n <PoweredBy\n logo={session?.template?.logo}\n text={session?.template?.logo ? \"par\" : undefined}\n />\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n </DocumentProvider>\n </ConfigProvider>\n );\n};\n\nexport default DatakeenSession;\n"],"names":["useIsMobile","useClientInfo","useRouteCSS","useSessionData","useStepNavigation","useStepCSS","useTemplateLoader","useEffect","setSessionStore","_jsx","NoSessionIdState","useRef","useState","useLayoutEffect","LoadingState","ErrorState","SessionExpired","SessionContent","useMemo","getOrderedJourneySteps","ConfigProvider","DocumentProvider","__assign","_jsxs","PoweredBy","Paper"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DatakeenSession.js","sources":["../../../../src/components/DatakeenSession.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\nimport type { DatakeenSessionProps } from \"../types/session\";\nimport Paper from \"./ui/Paper\";\nimport useIsMobile from \"../hooks/useIsMobile\";\nimport PoweredBy from \"./ui/PoweredBy\";\nimport SessionExpired from \"./session/SessionExpired\";\nimport { useRouteCSS } from \"../hooks/useRouteCSS\";\nimport { DocumentProvider } from \"../context/DocumentContext\";\nimport { ConfigProvider } from \"../context/ConfigContext\";\nimport { setSessionStore } from \"../context/SessionContext\";\n\n// Hooks\nimport { useSessionData } from \"../hooks/useSessionData\";\nimport { useStepNavigation } from \"../hooks/useStepNavigation\";\nimport { useStepCSS } from \"../hooks/useStepCSS\";\nimport { useTemplateLoader } from \"../hooks/useTemplateLoader\";\nimport { useClientInfo } from \"../hooks/useClientInfo\";\nimport { getOrderedJourneySteps } from \"../services/sessionService\";\n\n// Components\nimport NoSessionIdState from \"./states/NoSessionIdState\";\nimport LoadingState from \"./states/LoadingState\";\nimport ErrorState from \"./states/ErrorState\";\nimport SessionContent from \"./session/SessionContent\";\n\n/**\n * DatakeenSession Component\n *\n * The main component of the Datakeen SDK that manages the multi-step verification flow.\n * This component handles the different steps of the session process, including:\n * - Initial welcome screen\n * - User information collection\n * - Country selection for JDI verification\n * - Mobile redirect when selfie is required\n *\n * The component maintains internal state for the current step and user input data,\n * progressing through the verification journey as the user completes each step.\n *\n * @param {DatakeenSessionProps} props - Component props\n * @param {string} props.sessionId - Unique identifier for the verification session\n * @param {SessionConfig} props.sessionConfig - Configuration for the session (e.g., selfie: true)\n * @param {string} props.apiBaseUrl - Optional API base URL for dynamic environment configuration\n * @returns {JSX.Element} A Paper-wrapped container with the appropriate step component based on current state\n */\nconst DatakeenSession = ({\n sessionId,\n sessionConfig,\n apiBaseUrl,\n}: DatakeenSessionProps) => {\n const isMobile = useIsMobile();\n const { info: clientInfo, isLoaded: clientInfoLoaded } = useClientInfo();\n\n // Load base CSS and UI components CSS that are always needed\n useRouteCSS(\"ui-components\");\n\n // Session data management\n const {\n session,\n setSession,\n loading,\n setLoading,\n error,\n isExpired,\n userInput,\n setUserInput,\n contactInfo,\n setContactInfo,\n loadSession,\n handleRetrySession,\n } = useSessionData(sessionId, clientInfo, clientInfoLoaded);\n\n // Step navigation management\n const { step, stepObject, history } = useStepNavigation(\n sessionId,\n session?.status,\n session?.currentStep,\n session?.template,\n );\n\n // Load route-specific CSS based on current step\n useStepCSS(step, session);\n\n // Template loading logic\n useTemplateLoader(step, sessionId, session, loading, setSession, setLoading);\n\n // Load session data on component mount\n useEffect(() => {\n loadSession();\n }, [sessionId, sessionConfig]);\n\n // Update global session store whenever session data changes\n useEffect(() => {\n const sanitizedSessionForGlobalStore = session\n ? {\n ...session,\n token: \"\",\n userInput: {},\n contactInfo: undefined,\n }\n : null;\n\n setSessionStore({\n session: sanitizedSessionForGlobalStore,\n loading,\n error,\n isExpired,\n userInput: {},\n contactInfo: { email: \"\", phoneNumber: \"\" },\n });\n }, [session, loading, error, isExpired]);\n\n // Handle initial step setting when session loads\n useEffect(() => {\n if (session && session.status === \"ended\") {\n // If session is ended, find the appropriate end step\n const templateNodes = session.template?.nodes || [];\n const endNodeIndex = templateNodes.findIndex(\n (node) => node.type === \"end\",\n );\n\n if (endNodeIndex !== -1) {\n stepObject.setStep(1 + endNodeIndex);\n } else {\n stepObject.setStep(1 + templateNodes.length);\n }\n }\n }, [session, stepObject]);\n\n if (!sessionId) {\n return <NoSessionIdState />;\n }\n\n // PoweredBy de DatakeenSession : uniquement pour les états spéciaux (loading/error/expired)\n // Les pages normales utilisent MobilePageLayout qui gère son propre PoweredBy\n const showMobilePoweredBy = isMobile && (loading || !!error || isExpired);\n const showDesktopPoweredBy = !isMobile && !loading && !error && !isExpired;\n const poweredByRef = useRef<HTMLDivElement | null>(null);\n const [poweredByHeight, setPoweredByHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (typeof window === \"undefined\" || !showMobilePoweredBy) {\n setPoweredByHeight(0);\n return;\n }\n\n const updateHeight = () => {\n if (poweredByRef.current) {\n setPoweredByHeight(poweredByRef.current.offsetHeight);\n }\n };\n\n updateHeight();\n window.addEventListener(\"resize\", updateHeight);\n\n return () => {\n window.removeEventListener(\"resize\", updateHeight);\n };\n }, [showMobilePoweredBy]);\n\n const mobileRootStyle: CSSProperties = {\n [\"--dk-mobile-footer-offset\" as any]: `${poweredByHeight}px`,\n };\n\n const renderSessionContent = () => {\n if (loading) {\n return <LoadingState />;\n }\n\n if (error) {\n return <ErrorState error={error} />;\n }\n\n if (isExpired) {\n return <SessionExpired onRetry={handleRetrySession} />;\n }\n\n return (\n <SessionContent\n step={step}\n loading={loading}\n session={session}\n sessionId={sessionId}\n stepObject={stepObject}\n stepHistory={history}\n userInput={userInput}\n setUserInput={setUserInput}\n contactInfo={contactInfo}\n setContactInfo={setContactInfo}\n />\n );\n };\n\n const mobileScrollPadding = showMobilePoweredBy\n ? `calc(${poweredByHeight}px + env(safe-area-inset-bottom, 0px))`\n : \"env(safe-area-inset-bottom, 0px)\";\n\n const currentTemplateNode = useMemo(() => {\n if (!session?.template || step < 1) {\n return null;\n }\n\n const templateIndex = Math.floor(step - 1);\n const orderedSteps = getOrderedJourneySteps(session.template);\n return orderedSteps[templateIndex] || null;\n }, [session?.template, step]);\n\n const shouldUseWideDesktopLayout =\n currentTemplateNode?.type === \"information-input\" &&\n currentTemplateNode.informationType === \"custom\" &&\n (currentTemplateNode.customFields || []).some(\n (field) => field.valueType === \"list\",\n );\n\n const isCaptureStep =\n currentTemplateNode?.type === \"biometric-capture\" ||\n currentTemplateNode?.type === \"selfie-capture\" ||\n currentTemplateNode?.type === \"document-collection\" || // Could be upload, but safer to allow full height\n currentTemplateNode?.type === \"controle-jdi\";\n\n const btnBg = session?.template?.buttonBgColor ?? \"#11E5C5\";\n const btnText = session?.template?.buttonTextColor ?? \"#3C3C40\";\n\n return (\n <ConfigProvider apiBaseUrl={apiBaseUrl}>\n <DocumentProvider>\n <div\n className=\"sdk-session flex-1 flex flex-col\"\n style={\n {\n [\"--dk-btn-bg\" as string]: btnBg,\n [\"--dk-btn-text\" as string]: btnText,\n ...(isMobile\n ? {\n [\"--dk-mobile-scroll-padding\" as string]:\n mobileScrollPadding,\n }\n : undefined),\n } as CSSProperties\n }\n >\n {isMobile ? (\n <div\n className=\"flex h-full w-full flex-col bg-white\"\n style={mobileRootStyle}\n >\n <div\n className={`flex flex-1 min-h-0 flex-col ${isCaptureStep ? \"\" : \"overflow-y-auto\"}`}\n style={{\n paddingBottom: isCaptureStep\n ? \"0\"\n : \"var(--dk-mobile-scroll-padding, env(safe-area-inset-bottom, 0px))\",\n }}\n >\n <div className=\"flex flex-1 flex-col min-h-0\">\n {renderSessionContent()}\n </div>\n </div>\n {showMobilePoweredBy && (\n <div\n className=\"bg-white px-4 pt-3 pb-4 sm:px-6 sm:pt-6 sm:pb-6\"\n style={{\n paddingBottom:\n \"calc(env(safe-area-inset-bottom, 0px) + 0.5rem)\",\n }}\n ref={poweredByRef}\n >\n <PoweredBy\n logo={session?.template?.logo}\n text={session?.template?.logo ? \"par\" : undefined}\n />\n </div>\n )}\n </div>\n ) : (\n <div className=\"flex items-center justify-center w-full min-h-screen bg-gray-100 py-12\">\n <div className=\"flex flex-col items-center justify-center\">\n <Paper\n className={`flex flex-col h-[800px] px-8 py-10 bg-white rounded-2xl shadow-xl z-10 ${shouldUseWideDesktopLayout\n ? \"w-[98vw] max-w-[1500px]\"\n : \"w-[600px]\"\n }`}\n >\n <div className=\"flex-1 w-full h-full overflow-y-auto\">\n {renderSessionContent()}\n </div>\n </Paper>\n {showDesktopPoweredBy && (\n <div className=\"pt-6 text-center\">\n <PoweredBy\n logo={session?.template?.logo}\n text={session?.template?.logo ? \"par\" : undefined}\n />\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n </DocumentProvider>\n </ConfigProvider>\n );\n};\n\nexport default DatakeenSession;\n"],"names":["useIsMobile","useClientInfo","useRouteCSS","useSessionData","useStepNavigation","useStepCSS","useTemplateLoader","useEffect","setSessionStore","_jsx","NoSessionIdState","useRef","useState","useLayoutEffect","LoadingState","ErrorState","SessionExpired","SessionContent","useMemo","getOrderedJourneySteps","ConfigProvider","DocumentProvider","__assign","_jsxs","PoweredBy","Paper"],"mappings":"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"}
|
|
@@ -46,7 +46,7 @@ var SelfieConfirmation = function (_a) {
|
|
|
46
46
|
if (!imageUrl) {
|
|
47
47
|
return (jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full bg-white", children: jsxRuntime.jsxs("div", { className: "text-center p-6 max-w-md mx-auto", children: [jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 text-yellow-500", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }) }), jsxRuntime.jsx(Title.default, { className: "text-xl mb-2", children: t("selfie.confirmation.no_display_title", "Impossible d'afficher le selfie") }), jsxRuntime.jsx("p", { className: "mb-6 text-sm text-gray-600", children: t("selfie.confirmation.no_display_desc", "Nous n'avons pas pu traiter correctement votre selfie.") }), jsxRuntime.jsx(Button.default, { variant: "secondary", onClick: onRetake, className: "md:max-w-xs mx-auto", children: t("selfie.confirmation.retake", "Reprendre le selfie") })] }) }));
|
|
48
48
|
}
|
|
49
|
-
return (jsxRuntime.jsx(MobilePageLayout.default, { header: jsxRuntime.jsxs("div", { className: "p-4 text-center bg-white border-b border-gray-100", children: [jsxRuntime.jsx(Title.default, { className: "text-xl md:text-2xl", children: t("selfie.confirmation.title", "Confirmez votre selfie") }), jsxRuntime.jsx(Subtitle.default, { className: "text-xs text-gray-600 mt-2 md:text-sm", children: t("selfie.confirmation.subtitle", "Vérifiez que votre visage est clairement visible") })] }), footer: jsxRuntime.jsx(PageActions.default, { primary: jsxRuntime.jsx(Button.default, { onClick: onConfirm, children: t("selfie.confirmation.confirm", "Confirmer") }), secondary: jsxRuntime.jsx(Button.default, { variant: "secondary", onClick: onRetake, children: t("selfie.confirmation.retake", "Reprendre le selfie") }) }), className: "bg-white", children: jsxRuntime.jsx("div", { className: "px-4 py-6 md:px-8 md:py-8", children: jsxRuntime.jsxs("div", { className: "w-full max-w-md mx-auto space-y-6", children: [jsxRuntime.jsx("div", { className: "w-full bg-white rounded-lg overflow-hidden shadow-md", children: jsxRuntime.jsxs("div", { className: "relative rounded-lg overflow-hidden border-2 border-[#11E5C5]", children: [jsxRuntime.jsx("img", { src: imageUrl, alt: "Selfie captur\u00E9", className: "w-full
|
|
49
|
+
return (jsxRuntime.jsx(MobilePageLayout.default, { header: jsxRuntime.jsxs("div", { className: "p-4 text-center bg-white border-b border-gray-100", children: [jsxRuntime.jsx(Title.default, { className: "text-xl md:text-2xl", children: t("selfie.confirmation.title", "Confirmez votre selfie") }), jsxRuntime.jsx(Subtitle.default, { className: "text-xs text-gray-600 mt-2 md:text-sm", children: t("selfie.confirmation.subtitle", "Vérifiez que votre visage est clairement visible") })] }), footer: jsxRuntime.jsx(PageActions.default, { primary: jsxRuntime.jsx(Button.default, { onClick: onConfirm, children: t("selfie.confirmation.confirm", "Confirmer") }), secondary: jsxRuntime.jsx(Button.default, { variant: "secondary", onClick: onRetake, children: t("selfie.confirmation.retake", "Reprendre le selfie") }) }), className: "bg-white", children: jsxRuntime.jsx("div", { className: "px-4 py-6 md:px-8 md:py-8", children: jsxRuntime.jsxs("div", { className: "w-full max-w-md mx-auto space-y-6", children: [jsxRuntime.jsx("div", { className: "w-full bg-white rounded-lg overflow-hidden shadow-md", children: jsxRuntime.jsxs("div", { className: "relative rounded-lg overflow-hidden border-2 border-[#11E5C5]", children: [jsxRuntime.jsx("img", { src: imageUrl, alt: "Selfie captur\u00E9", className: "w-full max-h-[50vh] object-contain bg-white", onError: function () {
|
|
50
50
|
setError("Impossible d'afficher l'image du selfie");
|
|
51
51
|
} }), jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/30 to-transparent p-3", children: jsxRuntime.jsx("p", { className: "text-white text-xs text-center", children: t("selfie.confirmation.overlay_success", "Selfie capturé avec succès") }) })] }) }), jsxRuntime.jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [jsxRuntime.jsx("h3", { className: "font-medium text-sm mb-3", children: t("selfie.confirmation.checklist_title", "Vérifiez que :") }), jsxRuntime.jsxs("ul", { className: "space-y-2 text-xs text-gray-700", children: [jsxRuntime.jsxs("li", { className: "flex items-start", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-green-500 mr-2 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }), t("selfie.confirmation.check_visible", "Votre visage est bien visible et occupe la majeure partie de l'image")] }), jsxRuntime.jsxs("li", { className: "flex items-start", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-green-500 mr-2 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }), t("selfie.confirmation.check_well_lit", "L'image est nette et bien éclairée")] }), jsxRuntime.jsxs("li", { className: "flex items-start", children: [jsxRuntime.jsx("svg", { className: "w-4 h-4 text-green-500 mr-2 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M5 13l4 4L19 7" }) }), t("selfie.confirmation.check_no_object", "Aucun objet ne cache votre visage (lunettes de soleil, masque, etc.)")] })] })] }), jsxRuntime.jsx("canvas", { ref: canvasRef, style: { display: "none" } })] }) }) }));
|
|
52
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieConfirmation.js","sources":["../../../../../src/components/selfie/SelfieConfirmation.tsx"],"sourcesContent":["/**\n * SelfieConfirmation component\n *\n * Displays the captured selfie and allows the user to confirm or retake it.\n *\n * @param {Object} props - Component props\n * @param {SelfieCaptureData} props.selfieData - The captured selfie data containing media blob and metadata\n * @param {Function} props.onConfirm - Function called when user confirms the selfie\n * @param {Function} props.onRetake - Function called when user wants to retake the selfie\n * @returns {JSX.Element} The selfie confirmation UI component\n */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport Button from \"../ui/Button\";\nimport PageActions from \"../ui/PageActions\";\nimport Title from \"../ui/Title\";\nimport Subtitle from \"../ui/Subtitle\";\nimport MobilePageLayout from \"../ui/MobilePageLayout\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\ninterface SelfieConfirmationProps {\n selfieData: SelfieCaptureData;\n setSelfiePhoto: (photo: string) => void;\n onConfirm: () => void;\n onRetake: () => void;\n}\n\nconst SelfieConfirmation = ({\n selfieData,\n setSelfiePhoto,\n onConfirm,\n onRetake,\n}: SelfieConfirmationProps) => {\n const { t } = useI18n();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState<string | null>(null);\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n\n useEffect(() => {\n setIsLoading(true);\n setError(null);\n\n if (!selfieData?.media) {\n setError(t(\"selfie.confirmation.errors.no_data\", \"Aucune donnée de selfie disponible\"));\n setIsLoading(false);\n return;\n }\n\n // Use pre-captured thumbnail from live video stream\n if (selfieData.thumbnail) {\n setImageUrl(selfieData.thumbnail);\n setSelfiePhoto(selfieData.thumbnail);\n setIsLoading(false);\n return;\n }\n\n // No thumbnail available (should not happen)\n setError(t(\"selfie.confirmation.errors.no_preview\", \"Aucune preview disponible\"));\n setIsLoading(false);\n }, [selfieData, setSelfiePhoto]);\n\n if (isLoading) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6\">\n <div className=\"mb-4 text-gray-700\">\n {t(\"selfie.confirmation.loading\", \"Traitement de votre selfie...\")}\n </div>\n <div className=\"w-12 h-12 border-4 border-[#11E5C5] border-t-transparent rounded-full animate-spin mx-auto\"></div>\n </div>\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-red-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.error_title\", \"Une erreur est survenue\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{error}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n if (!imageUrl) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-yellow-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.no_display_title\", \"Impossible d'afficher le selfie\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{t(\"selfie.confirmation.no_display_desc\", \"Nous n'avons pas pu traiter correctement votre selfie.\")}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n return (\n <MobilePageLayout\n header={\n <div className=\"p-4 text-center bg-white border-b border-gray-100\">\n <Title className=\"text-xl md:text-2xl\">{t(\"selfie.confirmation.title\", \"Confirmez votre selfie\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 mt-2 md:text-sm\">{t(\"selfie.confirmation.subtitle\", \"Vérifiez que votre visage est clairement visible\")}</Subtitle>\n </div>\n }\n footer={\n <PageActions\n primary={\n <Button onClick={onConfirm}>\n {t(\"selfie.confirmation.confirm\", \"Confirmer\")}\n </Button>\n }\n secondary={\n <Button variant=\"secondary\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n }\n />\n }\n className=\"bg-white\"\n >\n <div className=\"px-4 py-6 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n {/* Selfie display with frame */}\n <div className=\"w-full bg-white rounded-lg overflow-hidden shadow-md\">\n <div className=\"relative rounded-lg overflow-hidden border-2 border-[#11E5C5]\">\n <img\n src={imageUrl}\n alt=\"Selfie capturé\"\n className=\"w-full h-64 md:h-80 object-cover bg-white\"\n onError={() => {\n setError(\"Impossible d'afficher l'image du selfie\");\n }}\n />\n {/* Overlay pour améliorer la lisibilité */}\n <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/30 to-transparent p-3\">\n <p className=\"text-white text-xs text-center\">{t(\"selfie.confirmation.overlay_success\", \"Selfie capturé avec succès\")}</p>\n </div>\n </div>\n </div>\n\n {/* Checklist de confirmation */}\n <div className=\"bg-gray-50 p-4 rounded-lg\">\n <h3 className=\"font-medium text-sm mb-3\">{t(\"selfie.confirmation.checklist_title\", \"Vérifiez que :\")}</h3>\n <ul className=\"space-y-2 text-xs text-gray-700\">\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_visible\", \"Votre visage est bien visible et occupe la majeure partie de l'image\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_well_lit\", \"L'image est nette et bien éclairée\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_no_object\", \"Aucun objet ne cache votre visage (lunettes de soleil, masque, etc.)\")}\n </li>\n </ul>\n </div>\n\n {/* Canvas caché utilisé pour le traitement des images */}\n <canvas ref={canvasRef} style={{ display: \"none\" }} />\n </div>\n </div>\n </MobilePageLayout>\n );\n};\n\nexport default SelfieConfirmation;\n"],"names":["useI18n","useState","useRef","useEffect","_jsx","_jsxs","Title","Button","MobilePageLayout","Subtitle","PageActions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelfieConfirmation.js","sources":["../../../../../src/components/selfie/SelfieConfirmation.tsx"],"sourcesContent":["/**\n * SelfieConfirmation component\n *\n * Displays the captured selfie and allows the user to confirm or retake it.\n *\n * @param {Object} props - Component props\n * @param {SelfieCaptureData} props.selfieData - The captured selfie data containing media blob and metadata\n * @param {Function} props.onConfirm - Function called when user confirms the selfie\n * @param {Function} props.onRetake - Function called when user wants to retake the selfie\n * @returns {JSX.Element} The selfie confirmation UI component\n */\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport Button from \"../ui/Button\";\nimport PageActions from \"../ui/PageActions\";\nimport Title from \"../ui/Title\";\nimport Subtitle from \"../ui/Subtitle\";\nimport MobilePageLayout from \"../ui/MobilePageLayout\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\ninterface SelfieConfirmationProps {\n selfieData: SelfieCaptureData;\n setSelfiePhoto: (photo: string) => void;\n onConfirm: () => void;\n onRetake: () => void;\n}\n\nconst SelfieConfirmation = ({\n selfieData,\n setSelfiePhoto,\n onConfirm,\n onRetake,\n}: SelfieConfirmationProps) => {\n const { t } = useI18n();\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState<string | null>(null);\n const [imageUrl, setImageUrl] = useState<string | null>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n\n useEffect(() => {\n setIsLoading(true);\n setError(null);\n\n if (!selfieData?.media) {\n setError(t(\"selfie.confirmation.errors.no_data\", \"Aucune donnée de selfie disponible\"));\n setIsLoading(false);\n return;\n }\n\n // Use pre-captured thumbnail from live video stream\n if (selfieData.thumbnail) {\n setImageUrl(selfieData.thumbnail);\n setSelfiePhoto(selfieData.thumbnail);\n setIsLoading(false);\n return;\n }\n\n // No thumbnail available (should not happen)\n setError(t(\"selfie.confirmation.errors.no_preview\", \"Aucune preview disponible\"));\n setIsLoading(false);\n }, [selfieData, setSelfiePhoto]);\n\n if (isLoading) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6\">\n <div className=\"mb-4 text-gray-700\">\n {t(\"selfie.confirmation.loading\", \"Traitement de votre selfie...\")}\n </div>\n <div className=\"w-12 h-12 border-4 border-[#11E5C5] border-t-transparent rounded-full animate-spin mx-auto\"></div>\n </div>\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-red-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.error_title\", \"Une erreur est survenue\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{error}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n if (!imageUrl) {\n return (\n <div className=\"flex flex-col items-center justify-center h-full bg-white\">\n <div className=\"text-center p-6 max-w-md mx-auto\">\n <div className=\"w-16 h-16 mx-auto mb-4 text-yellow-500\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n </svg>\n </div>\n <Title className=\"text-xl mb-2\">{t(\"selfie.confirmation.no_display_title\", \"Impossible d'afficher le selfie\")}</Title>\n <p className=\"mb-6 text-sm text-gray-600\">{t(\"selfie.confirmation.no_display_desc\", \"Nous n'avons pas pu traiter correctement votre selfie.\")}</p>\n <Button variant=\"secondary\" onClick={onRetake} className=\"md:max-w-xs mx-auto\">\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n </div>\n </div>\n );\n }\n\n return (\n <MobilePageLayout\n header={\n <div className=\"p-4 text-center bg-white border-b border-gray-100\">\n <Title className=\"text-xl md:text-2xl\">{t(\"selfie.confirmation.title\", \"Confirmez votre selfie\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 mt-2 md:text-sm\">{t(\"selfie.confirmation.subtitle\", \"Vérifiez que votre visage est clairement visible\")}</Subtitle>\n </div>\n }\n footer={\n <PageActions\n primary={\n <Button onClick={onConfirm}>\n {t(\"selfie.confirmation.confirm\", \"Confirmer\")}\n </Button>\n }\n secondary={\n <Button variant=\"secondary\" onClick={onRetake}>\n {t(\"selfie.confirmation.retake\", \"Reprendre le selfie\")}\n </Button>\n }\n />\n }\n className=\"bg-white\"\n >\n <div className=\"px-4 py-6 md:px-8 md:py-8\">\n <div className=\"w-full max-w-md mx-auto space-y-6\">\n {/* Selfie display with frame */}\n <div className=\"w-full bg-white rounded-lg overflow-hidden shadow-md\">\n <div className=\"relative rounded-lg overflow-hidden border-2 border-[#11E5C5]\">\n <img\n src={imageUrl}\n alt=\"Selfie capturé\"\n className=\"w-full max-h-[50vh] object-contain bg-white\"\n onError={() => {\n setError(\"Impossible d'afficher l'image du selfie\");\n }}\n />\n {/* Overlay pour améliorer la lisibilité */}\n <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/30 to-transparent p-3\">\n <p className=\"text-white text-xs text-center\">{t(\"selfie.confirmation.overlay_success\", \"Selfie capturé avec succès\")}</p>\n </div>\n </div>\n </div>\n\n {/* Checklist de confirmation */}\n <div className=\"bg-gray-50 p-4 rounded-lg\">\n <h3 className=\"font-medium text-sm mb-3\">{t(\"selfie.confirmation.checklist_title\", \"Vérifiez que :\")}</h3>\n <ul className=\"space-y-2 text-xs text-gray-700\">\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_visible\", \"Votre visage est bien visible et occupe la majeure partie de l'image\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_well_lit\", \"L'image est nette et bien éclairée\")}\n </li>\n <li className=\"flex items-start\">\n <svg\n className=\"w-4 h-4 text-green-500 mr-2 mt-0.5\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M5 13l4 4L19 7\"\n ></path>\n </svg>\n {t(\"selfie.confirmation.check_no_object\", \"Aucun objet ne cache votre visage (lunettes de soleil, masque, etc.)\")}\n </li>\n </ul>\n </div>\n\n {/* Canvas caché utilisé pour le traitement des images */}\n <canvas ref={canvasRef} style={{ display: \"none\" }} />\n </div>\n </div>\n </MobilePageLayout>\n );\n};\n\nexport default SelfieConfirmation;\n"],"names":["useI18n","useState","useRef","useEffect","_jsx","_jsxs","Title","Button","MobilePageLayout","Subtitle","PageActions"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ var SelfieFlow = require('./selfie-flow/SelfieFlow.js');
|
|
|
10
10
|
var VideoResetStyles = require('./VideoResetStyles.js');
|
|
11
11
|
|
|
12
12
|
var Video = function (_a) {
|
|
13
|
-
var setSelfieData = _a.setSelfieData, setStep = _a.setStep, onBack = _a.onBack;
|
|
13
|
+
var setSelfieData = _a.setSelfieData, setStep = _a.setStep, onBack = _a.onBack, btnBg = _a.btnBg, btnText = _a.btnText;
|
|
14
14
|
// Effet pour ajouter la classe au body lorsque le composant est monté
|
|
15
15
|
React.useEffect(function () {
|
|
16
16
|
// Empêcher le scroll sur le body lorsque la capture est active
|
|
@@ -32,7 +32,7 @@ var Video = function (_a) {
|
|
|
32
32
|
setStep(1); // Move to the next step after selfie capture
|
|
33
33
|
}, 300);
|
|
34
34
|
};
|
|
35
|
-
return (jsxRuntime.jsxs("div", { className: "w-full h-full overflow-hidden flex flex-col", children: [jsxRuntime.jsx(VideoResetStyles.default, {}), jsxRuntime.jsx(SelfieFlow.default, { handleSelfie: handleSelfie, onBack: onBack })] }));
|
|
35
|
+
return (jsxRuntime.jsxs("div", { className: "w-full h-full overflow-hidden flex flex-col", children: [jsxRuntime.jsx(VideoResetStyles.default, {}), jsxRuntime.jsx(SelfieFlow.default, { handleSelfie: handleSelfie, onBack: onBack, btnBg: btnBg, btnText: btnText })] }));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
exports.default = Video;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.js","sources":["../../../../../src/components/selfie/Video.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport \"./Video.css\";\nimport \"./VideoFixes.css\";\nimport SelfieFlow from \"./selfie-flow/SelfieFlow\";\nimport VideoResetStyles from \"./VideoResetStyles\";\n\ninterface VideoProps {\n setSelfieData: (selfieData: SelfieCaptureData) => void;\n setStep: (step: number) => void;\n onBack?: () => void;\n}\n\nconst Video = ({ setSelfieData, setStep, onBack }: VideoProps) => {\n // Effet pour ajouter la classe au body lorsque le composant est monté\n useEffect(() => {\n // Empêcher le scroll sur le body lorsque la capture est active\n document.body.classList.add(\"selfie-active\");\n\n // Ajouter une classe pour gérer le plein écran sur mobile\n document.documentElement.classList.add(\"selfie-fullscreen\");\n\n return () => {\n // Nettoyer en enlevant les classes lors du démontage\n document.body.classList.remove(\"selfie-active\");\n document.documentElement.classList.remove(\"selfie-fullscreen\");\n };\n }, []);\n\n const handleSelfie = (e: Event) => {\n const data = (e as CustomEvent<SelfieCaptureData>).detail;\n\n // Attendre un court instant avant de passer à l'écran de confirmation\n // pour donner le temps à l'utilisateur de voir que la capture est terminée\n setTimeout(() => {\n setSelfieData(data);\n setStep(1); // Move to the next step after selfie capture\n }, 300);\n };\n\n return (\n <div className=\"w-full h-full overflow-hidden flex flex-col\">\n <VideoResetStyles />\n <SelfieFlow handleSelfie={handleSelfie} onBack={onBack} />\n </div>\n );\n};\n\nexport default Video;\n"],"names":["useEffect","_jsxs","_jsx","VideoResetStyles","SelfieFlow"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Video.js","sources":["../../../../../src/components/selfie/Video.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport \"./Video.css\";\nimport \"./VideoFixes.css\";\nimport SelfieFlow from \"./selfie-flow/SelfieFlow\";\nimport VideoResetStyles from \"./VideoResetStyles\";\n\ninterface VideoProps {\n setSelfieData: (selfieData: SelfieCaptureData) => void;\n setStep: (step: number) => void;\n onBack?: () => void;\n btnBg?: string;\n btnText?: string;\n}\n\nconst Video = ({ setSelfieData, setStep, onBack, btnBg, btnText }: VideoProps) => {\n // Effet pour ajouter la classe au body lorsque le composant est monté\n useEffect(() => {\n // Empêcher le scroll sur le body lorsque la capture est active\n document.body.classList.add(\"selfie-active\");\n\n // Ajouter une classe pour gérer le plein écran sur mobile\n document.documentElement.classList.add(\"selfie-fullscreen\");\n\n return () => {\n // Nettoyer en enlevant les classes lors du démontage\n document.body.classList.remove(\"selfie-active\");\n document.documentElement.classList.remove(\"selfie-fullscreen\");\n };\n }, []);\n\n const handleSelfie = (e: Event) => {\n const data = (e as CustomEvent<SelfieCaptureData>).detail;\n\n // Attendre un court instant avant de passer à l'écran de confirmation\n // pour donner le temps à l'utilisateur de voir que la capture est terminée\n setTimeout(() => {\n setSelfieData(data);\n setStep(1); // Move to the next step after selfie capture\n }, 300);\n };\n\n return (\n <div className=\"w-full h-full overflow-hidden flex flex-col\">\n <VideoResetStyles />\n <SelfieFlow handleSelfie={handleSelfie} onBack={onBack} btnBg={btnBg} btnText={btnText} />\n </div>\n );\n};\n\nexport default Video;\n"],"names":["useEffect","_jsxs","_jsx","VideoResetStyles","SelfieFlow"],"mappings":";;;;;;;;;;;AAeA,IAAM,KAAK,GAAG,UAAC,EAA8D,EAAA;AAA5D,IAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA;;AAE7D,IAAAA,eAAS,CAAC,YAAA;;QAER,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;;QAG5C,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;QAE3D,OAAO,YAAA;;YAEL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;YAC/C,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC;AAChE,QAAA,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,IAAM,YAAY,GAAG,UAAC,CAAQ,EAAA;AAC5B,QAAA,IAAM,IAAI,GAAI,CAAoC,CAAC,MAAM;;;AAIzD,QAAA,UAAU,CAAC,YAAA;YACT,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,OAAO,CAAC,CAAC,CAAC,CAAC;QACb,CAAC,EAAE,GAAG,CAAC;AACT,IAAA,CAAC;AAED,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,CAC1DC,cAAA,CAACC,wBAAgB,EAAA,EAAA,CAAG,EACpBD,cAAA,CAACE,kBAAU,IAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI,CAAA,EAAA,CACtF;AAEV;;;;"}
|
|
@@ -9,7 +9,7 @@ var InstructionsSelfie = require('./InstructionsSelfie.js');
|
|
|
9
9
|
var SelfieRecorder = require('./SelfieRecorder.js');
|
|
10
10
|
|
|
11
11
|
var SelfieFlow = function (_a) {
|
|
12
|
-
var handleSelfie = _a.handleSelfie, onBack = _a.onBack;
|
|
12
|
+
var handleSelfie = _a.handleSelfie, onBack = _a.onBack, btnBg = _a.btnBg, btnText = _a.btnText;
|
|
13
13
|
var _b = React.useState(-1), internalStep = _b[0], setInternalStep = _b[1]; // Commencer à -1 pour la pré-introduction
|
|
14
14
|
var handleBack = function () {
|
|
15
15
|
if (internalStep > -1) {
|
|
@@ -20,7 +20,7 @@ var SelfieFlow = function (_a) {
|
|
|
20
20
|
onBack();
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
return (jsxRuntime.jsxs("div", { className: "h-full w-full flex flex-col", children: [internalStep === -1 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full", children: jsxRuntime.jsx(SelfiePreIntroduction.default, { onContinue: function () { return setInternalStep(0); }, onBack: handleBack }) })), internalStep === 0 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full", children: jsxRuntime.jsx(InstructionsSelfie.default, { setStep: setInternalStep, onBack: function () { return setInternalStep(-1); } }) })), internalStep === 1 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full overflow-hidden", children: jsxRuntime.jsx(SelfieRecorder.default, { handleSelfie: handleSelfie }) }))] }));
|
|
23
|
+
return (jsxRuntime.jsxs("div", { className: "h-full w-full flex flex-col", children: [internalStep === -1 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full", children: jsxRuntime.jsx(SelfiePreIntroduction.default, { onContinue: function () { return setInternalStep(0); }, onBack: handleBack }) })), internalStep === 0 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full", children: jsxRuntime.jsx(InstructionsSelfie.default, { setStep: setInternalStep, onBack: function () { return setInternalStep(-1); } }) })), internalStep === 1 && (jsxRuntime.jsx("div", { className: "flex-1 flex flex-col h-full overflow-hidden", children: jsxRuntime.jsx(SelfieRecorder.default, { handleSelfie: handleSelfie, btnBg: btnBg, btnText: btnText }) }))] }));
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
exports.default = SelfieFlow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieFlow.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieFlow.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport SelfiePreIntroduction from \"./SelfiePreIntroduction\";\nimport InstructionsSelfie from \"./InstructionsSelfie\";\nimport SelfieRecorder from \"./SelfieRecorder\";\n\ninterface SelfieFlowProps {\n handleSelfie: (e: Event) => void;\n onBack?: () => void;\n}\n\nconst SelfieFlow = ({ handleSelfie, onBack }: SelfieFlowProps) => {\n const [internalStep, setInternalStep] = useState(-1); // Commencer à -1 pour la pré-introduction\n\n const handleBack = () => {\n if (internalStep > -1) {\n setInternalStep(internalStep - 1);\n } else if (internalStep === -1 && onBack) {\n // Si on est à la première étape et qu'on a une fonction de retour parent, l'utiliser\n onBack();\n }\n };\n\n return (\n <div className=\"h-full w-full flex flex-col\">\n {internalStep === -1 && (\n <div className=\"flex-1 flex flex-col h-full\">\n <SelfiePreIntroduction\n onContinue={() => setInternalStep(0)}\n onBack={handleBack}\n />\n </div>\n )}\n {internalStep === 0 && (\n <div className=\"flex-1 flex flex-col h-full\">\n <InstructionsSelfie\n setStep={setInternalStep}\n onBack={() => setInternalStep(-1)}\n />\n </div>\n )}\n {internalStep === 1 && (\n <div className=\"flex-1 flex flex-col h-full overflow-hidden\">\n <SelfieRecorder handleSelfie={handleSelfie} />\n </div>\n )}\n </div>\n );\n};\n\nexport default SelfieFlow;\n"],"names":["useState","_jsxs","_jsx","SelfiePreIntroduction","InstructionsSelfie","SelfieRecorder"],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"SelfieFlow.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieFlow.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport SelfiePreIntroduction from \"./SelfiePreIntroduction\";\nimport InstructionsSelfie from \"./InstructionsSelfie\";\nimport SelfieRecorder from \"./SelfieRecorder\";\n\ninterface SelfieFlowProps {\n handleSelfie: (e: Event) => void;\n onBack?: () => void;\n btnBg?: string;\n btnText?: string;\n}\n\nconst SelfieFlow = ({ handleSelfie, onBack, btnBg, btnText }: SelfieFlowProps) => {\n const [internalStep, setInternalStep] = useState(-1); // Commencer à -1 pour la pré-introduction\n\n const handleBack = () => {\n if (internalStep > -1) {\n setInternalStep(internalStep - 1);\n } else if (internalStep === -1 && onBack) {\n // Si on est à la première étape et qu'on a une fonction de retour parent, l'utiliser\n onBack();\n }\n };\n\n return (\n <div className=\"h-full w-full flex flex-col\">\n {internalStep === -1 && (\n <div className=\"flex-1 flex flex-col h-full\">\n <SelfiePreIntroduction\n onContinue={() => setInternalStep(0)}\n onBack={handleBack}\n />\n </div>\n )}\n {internalStep === 0 && (\n <div className=\"flex-1 flex flex-col h-full\">\n <InstructionsSelfie\n setStep={setInternalStep}\n onBack={() => setInternalStep(-1)}\n />\n </div>\n )}\n {internalStep === 1 && (\n <div className=\"flex-1 flex flex-col h-full overflow-hidden\">\n <SelfieRecorder handleSelfie={handleSelfie} btnBg={btnBg} btnText={btnText} />\n </div>\n )}\n </div>\n );\n};\n\nexport default SelfieFlow;\n"],"names":["useState","_jsxs","_jsx","SelfiePreIntroduction","InstructionsSelfie","SelfieRecorder"],"mappings":";;;;;;;;;;AAYA,IAAM,UAAU,GAAG,UAAC,EAAyD,EAAA;QAAvD,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA;AAClD,IAAA,IAAA,EAAA,GAAkCA,cAAQ,CAAC,EAAE,CAAC,EAA7C,YAAY,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,eAAe,GAAA,EAAA,CAAA,CAAA,CAAgB,CAAC;AAErD,IAAA,IAAM,UAAU,GAAG,YAAA;AACjB,QAAA,IAAI,YAAY,GAAG,EAAE,EAAE;AACrB,YAAA,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC;QACnC;AAAO,aAAA,IAAI,YAAY,KAAK,EAAE,IAAI,MAAM,EAAE;;AAExC,YAAA,MAAM,EAAE;QACV;AACF,IAAA,CAAC;IAED,QACEC,yBAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CACzC,YAAY,KAAK,EAAE,KAClBC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,YAC1CA,cAAA,CAACC,6BAAqB,EAAA,EACpB,UAAU,EAAE,YAAA,EAAM,OAAA,eAAe,CAAC,CAAC,CAAC,CAAA,CAAlB,CAAkB,EACpC,MAAM,EAAE,UAAU,EAAA,CAClB,EAAA,CACE,CACP,EACA,YAAY,KAAK,CAAC,KACjBD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAC1CA,cAAA,CAACE,0BAAkB,EAAA,EACjB,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,YAAA,EAAM,OAAA,eAAe,CAAC,EAAE,CAAC,CAAA,CAAnB,CAAmB,EAAA,CACjC,EAAA,CACE,CACP,EACA,YAAY,KAAK,CAAC,KACjBF,wBAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAC1DA,cAAA,CAACG,sBAAc,EAAA,EAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,EAAA,CAC1E,CACP,CAAA,EAAA,CACG;AAEV;;;;"}
|
|
@@ -17,14 +17,15 @@ var useI18n = require('../../../hooks/useI18n.js');
|
|
|
17
17
|
var unisseyStrings = require('../utils/unisseyStrings.js');
|
|
18
18
|
|
|
19
19
|
var SelfieRecorder = function (_a) {
|
|
20
|
-
var
|
|
20
|
+
var _b;
|
|
21
|
+
var handleSelfie = _a.handleSelfie, _c = _a.onBeginCapture, onBeginCapture = _c === void 0 ? function () { } : _c; _a.isCapturing; var btnBg = _a.btnBg, btnText = _a.btnText;
|
|
21
22
|
var t = useI18n.useI18n().t;
|
|
22
23
|
var recorderRef = React.useRef(null);
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
24
|
+
var _e = React.useState(false), disableButton = _e[0], setDisableButton = _e[1];
|
|
25
|
+
var _f = React.useState(false), recorderReady = _f[0], setRecorderReady = _f[1];
|
|
26
|
+
var _g = React.useState("idle"), recordingState = _g[0], setRecordingState = _g[1];
|
|
26
27
|
var capturedThumbnailRef = React.useRef(null);
|
|
27
|
-
var
|
|
28
|
+
var _h = useLiveFrameCapture.useLiveFrameCapture(), captureFrame = _h.captureFrame, cleanup = _h.cleanup;
|
|
28
29
|
useVideoRecorderStyles.default();
|
|
29
30
|
React.useEffect(function () {
|
|
30
31
|
document.body.classList.add("recording-selfie");
|
|
@@ -152,7 +153,10 @@ var SelfieRecorder = function (_a) {
|
|
|
152
153
|
setRecordingState("processing");
|
|
153
154
|
handleSelfie(enhancedEvent);
|
|
154
155
|
};
|
|
155
|
-
return (jsxRuntime.jsxs("div", { className: "selfie fixed inset-0 z-50 flex flex-col",
|
|
156
|
+
return (jsxRuntime.jsxs("div", { className: "selfie fixed inset-0 z-50 flex flex-col", style: (_b = {},
|
|
157
|
+
_b["--dk-btn-bg"] = btnBg !== null && btnBg !== void 0 ? btnBg : "var(--dk-btn-bg)",
|
|
158
|
+
_b["--dk-btn-text"] = btnText !== null && btnText !== void 0 ? btnText : "var(--dk-btn-text)",
|
|
159
|
+
_b), children: [jsxRuntime.jsxs("div", { className: "p-4 text-center bg-white shrink-0", children: [jsxRuntime.jsx(Title.default, { className: "text-lg md:text-xl mb-1", children: t("selfie.recorder.title") }), jsxRuntime.jsx(Subtitle.default, { className: "text-xs text-gray-600 md:text-sm", children: t("selfie.recorder.subtitle") })] }), jsxRuntime.jsx("div", { className: "video-container flex-1 relative overflow-hidden", children: jsxRuntime.jsx(sdkReact.VideoRecorder, tslib_es6.__assign({ ref: recorderRef, preset: sdkReact.AcquisitionPreset.SELFIE_OPTIMIZED, hideCaptureBtn: true, faceChecker: "enabled", disableDebugMode: true, onRecorderReady: handleRecorderReady, onRecordCompleted: handleRecordCompleted, onRecord: recordStarting, style: { width: "100%", height: "100%" }, className: "video-recorder-no-radius w-full h-full" }, (selfieCaptureUtils.isIOS() && {
|
|
156
160
|
"data-playsinline": "true",
|
|
157
161
|
"data-autoplay": "true",
|
|
158
162
|
"data-muted": "true"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelfieRecorder.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieRecorder.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\";\nimport { AcquisitionPreset, VideoRecorder } from \"@unissey-web/sdk-react\";\nimport Button from \"../../ui/Button\";\nimport Title from \"../../ui/Title\";\nimport Subtitle from \"../../ui/Subtitle\";\nimport useVideoRecorderStyles from \"../hooks/useVideoRecorderStyles\";\nimport { setupVideoElementsObserver } from \"../utils/videoElementStyles\";\nimport { delay, isIOS, waitForVideoFrame, getRecorderVideoElement } from \"../utils/selfieCaptureUtils\";\nimport { useLiveFrameCapture } from \"../hooks/useLiveFrameCapture\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport { getUnisseyStrings } from \"../utils/unisseyStrings\";\n\ninterface SelfieRecorderProps {\n handleSelfie: (e: Event) => void;\n onBeginCapture?: () => void;\n isCapturing?: boolean;\n}\n\ninterface VideoRecorderRef extends HTMLElement {\n capture: () => void;\n}\n\nconst SelfieRecorder = ({\n handleSelfie,\n onBeginCapture = () => { },\n isCapturing = false,\n}: SelfieRecorderProps) => {\n const { t } = useI18n();\n const recorderRef = useRef<VideoRecorderRef | null>(null);\n const [disableButton, setDisableButton] = useState(false);\n const [recorderReady, setRecorderReady] = useState(false);\n const [recordingState, setRecordingState] = useState<\n \"idle\" | \"preparing\" | \"recording\" | \"processing\"\n >(\"idle\");\n const capturedThumbnailRef = useRef<string | null>(null);\n const { captureFrame, cleanup } = useLiveFrameCapture();\n\n useVideoRecorderStyles();\n\n useEffect(() => {\n document.body.classList.add(\"recording-selfie\");\n const cleanupObserver = setupVideoElementsObserver();\n\n // iOS-specific fix: Add required attributes to video elements after mount\n if (isIOS()) {\n const addIOSVideoAttributes = () => {\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder) => {\n // Try to access shadow DOM and video elements\n try {\n const shadowRoot = (recorder as any).shadowRoot;\n if (shadowRoot) {\n const videoElements = shadowRoot.querySelectorAll(\"video\");\n videoElements.forEach((video: HTMLVideoElement) => {\n video.setAttribute(\"playsinline\", \"true\");\n video.setAttribute(\"autoplay\", \"true\");\n video.setAttribute(\"muted\", \"true\");\n // Ensure video plays inline and autoplays\n video.playsInline = true;\n video.autoplay = true;\n video.muted = true;\n });\n }\n } catch (error) {\n console.log(\"Could not access shadow DOM:\", error);\n }\n\n // Also set attributes on the component itself\n recorder.setAttribute(\"playsinline\", \"true\");\n recorder.setAttribute(\"autoplay\", \"true\");\n recorder.setAttribute(\"muted\", \"true\");\n });\n };\n\n // Apply immediately and also after a delay to catch dynamically created elements\n addIOSVideoAttributes();\n const iosTimeout = setTimeout(addIOSVideoAttributes, 500);\n const iosInterval = setInterval(addIOSVideoAttributes, 1000);\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n clearTimeout(iosTimeout);\n clearInterval(iosInterval);\n };\n }\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n };\n }, [cleanup]);\n\n const recordStarting = () => {\n if (!recorderReady || recordingState !== \"idle\") return;\n onBeginCapture();\n setRecordingState(\"preparing\");\n setDisableButton(true);\n\n const triggerCapture = async () => {\n try {\n await waitForVideoFrame(recorderRef.current);\n await delay(200);\n setRecordingState(\"recording\");\n\n // Capture a frame from the live video during recording (after a short delay)\n setTimeout(() => {\n const videoElement = getRecorderVideoElement(recorderRef.current);\n if (videoElement) {\n const thumbnail = captureFrame(videoElement);\n capturedThumbnailRef.current = thumbnail;\n }\n }, 1000); // Capture frame 1 second into recording\n\n recorderRef.current?.capture();\n } catch (error) {\n console.error(\"SelfieRecorder: failed to capture frame\", error);\n setRecordingState(\"idle\");\n setDisableButton(false);\n }\n };\n\n void triggerCapture();\n };\n\n const handleRecorderReady = () => setRecorderReady(true);\n\n const handleRecordCompleted = (e: Event) => {\n const customEvent = e as CustomEvent<{ media?: Blob; metadata?: string }>;\n if (!customEvent.detail?.media || customEvent.detail.media.size === 0) {\n console.error(\"❌ No valid media captured\");\n\n // iOS-specific debugging\n if (isIOS()) {\n console.log(\"🍎 iOS detected - checking video elements for proper attributes\");\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder, index) => {\n console.log(`VideoRecorder ${index}:`, {\n playsinline: recorder.getAttribute(\"playsinline\"),\n autoplay: recorder.getAttribute(\"autoplay\"),\n muted: recorder.getAttribute(\"muted\")\n });\n });\n }\n\n setRecordingState(\"idle\");\n setDisableButton(false);\n return;\n }\n\n // Attach the captured thumbnail to the event\n const enhancedEvent = new CustomEvent('record-completed', {\n detail: {\n media: customEvent.detail.media,\n metadata: customEvent.detail.metadata || '',\n thumbnail: capturedThumbnailRef.current || undefined,\n }\n });\n\n setRecordingState(\"processing\");\n handleSelfie(enhancedEvent);\n };\n\n return (\n <div className=\"selfie fixed inset-0 z-50 flex flex-col\">\n <div className=\"p-4 text-center bg-white shrink-0\">\n <Title className=\"text-lg md:text-xl mb-1\">{t(\"selfie.recorder.title\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 md:text-sm\">{t(\"selfie.recorder.subtitle\")}</Subtitle>\n </div>\n\n <div className=\"video-container flex-1 relative overflow-hidden\">\n <VideoRecorder\n ref={recorderRef as any}\n preset={AcquisitionPreset.SELFIE_OPTIMIZED}\n hideCaptureBtn\n faceChecker=\"enabled\"\n disableDebugMode\n onRecorderReady={handleRecorderReady}\n onRecordCompleted={handleRecordCompleted}\n onRecord={recordStarting}\n style={{ width: \"100%\", height: \"100%\" }}\n className=\"video-recorder-no-radius w-full h-full\"\n {...(isIOS() && {\n \"data-playsinline\": \"true\",\n \"data-autoplay\": \"true\",\n \"data-muted\": \"true\"\n })}\n strings={getUnisseyStrings(t)}\n />\n </div>\n\n <div className=\"shrink-0 bg-white border-t border-gray-200 p-4 md:p-6 relative\" style={{ zIndex: 9999 }}>\n <div className=\"max-w-md mx-auto\">\n <div className=\"text-center text-xs text-gray-400 mt-3\">\n {t(\"selfie.recorder.note\")}\n </div>\n\n <Button\n onClick={recordStarting}\n className=\"w-full py-3 md:py-4 relative selfie-button\"\n disabled={disableButton || !recorderReady}\n >\n {recordingState === \"idle\" && t(\"selfie.recorder.start\")}\n {recordingState === \"preparing\" && t(\"selfie.recorder.preparing\")}\n {recordingState === \"recording\" && (\n <span className=\"flex items-center justify-center\">\n <span className=\"mr-2\">{t(\"selfie.recorder.recording_label\")}</span>\n <span className=\"flex space-x-1 loading-dots\">\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n </span>\n </span>\n )}\n {recordingState === \"processing\" && t(\"selfie.recorder.processing\")}\n </Button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelfieRecorder;\n"],"names":["useI18n","useRef","useState","useLiveFrameCapture","useVideoRecorderStyles","useEffect","setupVideoElementsObserver","isIOS","__awaiter","waitForVideoFrame","delay","getRecorderVideoElement","_jsxs","_jsx","Title","Subtitle","VideoRecorder","__assign","AcquisitionPreset","getUnisseyStrings","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelfieRecorder.js","sources":["../../../../../../src/components/selfie/selfie-flow/SelfieRecorder.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\";\nimport { AcquisitionPreset, VideoRecorder } from \"@unissey-web/sdk-react\";\nimport Button from \"../../ui/Button\";\nimport Title from \"../../ui/Title\";\nimport Subtitle from \"../../ui/Subtitle\";\nimport useVideoRecorderStyles from \"../hooks/useVideoRecorderStyles\";\nimport { setupVideoElementsObserver } from \"../utils/videoElementStyles\";\nimport { delay, isIOS, waitForVideoFrame, getRecorderVideoElement } from \"../utils/selfieCaptureUtils\";\nimport { useLiveFrameCapture } from \"../hooks/useLiveFrameCapture\";\nimport { useI18n } from \"../../../hooks/useI18n\";\nimport { getUnisseyStrings } from \"../utils/unisseyStrings\";\n\ninterface SelfieRecorderProps {\n handleSelfie: (e: Event) => void;\n onBeginCapture?: () => void;\n isCapturing?: boolean;\n btnBg?: string;\n btnText?: string;\n}\n\ninterface VideoRecorderRef extends HTMLElement {\n capture: () => void;\n}\n\nconst SelfieRecorder = ({\n handleSelfie,\n onBeginCapture = () => { },\n isCapturing = false,\n btnBg,\n btnText,\n}: SelfieRecorderProps) => {\n const { t } = useI18n();\n const recorderRef = useRef<VideoRecorderRef | null>(null);\n const [disableButton, setDisableButton] = useState(false);\n const [recorderReady, setRecorderReady] = useState(false);\n const [recordingState, setRecordingState] = useState<\n \"idle\" | \"preparing\" | \"recording\" | \"processing\"\n >(\"idle\");\n const capturedThumbnailRef = useRef<string | null>(null);\n const { captureFrame, cleanup } = useLiveFrameCapture();\n\n useVideoRecorderStyles();\n\n useEffect(() => {\n document.body.classList.add(\"recording-selfie\");\n const cleanupObserver = setupVideoElementsObserver();\n\n // iOS-specific fix: Add required attributes to video elements after mount\n if (isIOS()) {\n const addIOSVideoAttributes = () => {\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder) => {\n // Try to access shadow DOM and video elements\n try {\n const shadowRoot = (recorder as any).shadowRoot;\n if (shadowRoot) {\n const videoElements = shadowRoot.querySelectorAll(\"video\");\n videoElements.forEach((video: HTMLVideoElement) => {\n video.setAttribute(\"playsinline\", \"true\");\n video.setAttribute(\"autoplay\", \"true\");\n video.setAttribute(\"muted\", \"true\");\n // Ensure video plays inline and autoplays\n video.playsInline = true;\n video.autoplay = true;\n video.muted = true;\n });\n }\n } catch (error) {\n console.log(\"Could not access shadow DOM:\", error);\n }\n\n // Also set attributes on the component itself\n recorder.setAttribute(\"playsinline\", \"true\");\n recorder.setAttribute(\"autoplay\", \"true\");\n recorder.setAttribute(\"muted\", \"true\");\n });\n };\n\n // Apply immediately and also after a delay to catch dynamically created elements\n addIOSVideoAttributes();\n const iosTimeout = setTimeout(addIOSVideoAttributes, 500);\n const iosInterval = setInterval(addIOSVideoAttributes, 1000);\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n clearTimeout(iosTimeout);\n clearInterval(iosInterval);\n };\n }\n\n return () => {\n document.body.classList.remove(\"recording-selfie\");\n cleanupObserver();\n cleanup();\n };\n }, [cleanup]);\n\n const recordStarting = () => {\n if (!recorderReady || recordingState !== \"idle\") return;\n onBeginCapture();\n setRecordingState(\"preparing\");\n setDisableButton(true);\n\n const triggerCapture = async () => {\n try {\n await waitForVideoFrame(recorderRef.current);\n await delay(200);\n setRecordingState(\"recording\");\n\n // Capture a frame from the live video during recording (after a short delay)\n setTimeout(() => {\n const videoElement = getRecorderVideoElement(recorderRef.current);\n if (videoElement) {\n const thumbnail = captureFrame(videoElement);\n capturedThumbnailRef.current = thumbnail;\n }\n }, 1000); // Capture frame 1 second into recording\n\n recorderRef.current?.capture();\n } catch (error) {\n console.error(\"SelfieRecorder: failed to capture frame\", error);\n setRecordingState(\"idle\");\n setDisableButton(false);\n }\n };\n\n void triggerCapture();\n };\n\n const handleRecorderReady = () => setRecorderReady(true);\n\n const handleRecordCompleted = (e: Event) => {\n const customEvent = e as CustomEvent<{ media?: Blob; metadata?: string }>;\n if (!customEvent.detail?.media || customEvent.detail.media.size === 0) {\n console.error(\"❌ No valid media captured\");\n\n // iOS-specific debugging\n if (isIOS()) {\n console.log(\"🍎 iOS detected - checking video elements for proper attributes\");\n const videoRecorders = document.querySelectorAll(\"uni-video-recorder\");\n videoRecorders.forEach((recorder, index) => {\n console.log(`VideoRecorder ${index}:`, {\n playsinline: recorder.getAttribute(\"playsinline\"),\n autoplay: recorder.getAttribute(\"autoplay\"),\n muted: recorder.getAttribute(\"muted\")\n });\n });\n }\n\n setRecordingState(\"idle\");\n setDisableButton(false);\n return;\n }\n\n // Attach the captured thumbnail to the event\n const enhancedEvent = new CustomEvent('record-completed', {\n detail: {\n media: customEvent.detail.media,\n metadata: customEvent.detail.metadata || '',\n thumbnail: capturedThumbnailRef.current || undefined,\n }\n });\n\n setRecordingState(\"processing\");\n handleSelfie(enhancedEvent);\n };\n\n return (\n <div\n className=\"selfie fixed inset-0 z-50 flex flex-col\"\n style={{\n [\"--dk-btn-bg\" as string]: btnBg ?? \"var(--dk-btn-bg)\",\n [\"--dk-btn-text\" as string]: btnText ?? \"var(--dk-btn-text)\",\n }}\n >\n <div className=\"p-4 text-center bg-white shrink-0\">\n <Title className=\"text-lg md:text-xl mb-1\">{t(\"selfie.recorder.title\")}</Title>\n <Subtitle className=\"text-xs text-gray-600 md:text-sm\">{t(\"selfie.recorder.subtitle\")}</Subtitle>\n </div>\n\n <div className=\"video-container flex-1 relative overflow-hidden\">\n <VideoRecorder\n ref={recorderRef as any}\n preset={AcquisitionPreset.SELFIE_OPTIMIZED}\n hideCaptureBtn\n faceChecker=\"enabled\"\n disableDebugMode\n onRecorderReady={handleRecorderReady}\n onRecordCompleted={handleRecordCompleted}\n onRecord={recordStarting}\n style={{ width: \"100%\", height: \"100%\" }}\n className=\"video-recorder-no-radius w-full h-full\"\n {...(isIOS() && {\n \"data-playsinline\": \"true\",\n \"data-autoplay\": \"true\",\n \"data-muted\": \"true\"\n })}\n strings={getUnisseyStrings(t)}\n />\n </div>\n\n <div className=\"shrink-0 bg-white border-t border-gray-200 p-4 md:p-6 relative\" style={{ zIndex: 9999 }}>\n <div className=\"max-w-md mx-auto\">\n <div className=\"text-center text-xs text-gray-400 mt-3\">\n {t(\"selfie.recorder.note\")}\n </div>\n\n <Button\n onClick={recordStarting}\n className=\"w-full py-3 md:py-4 relative selfie-button\"\n disabled={disableButton || !recorderReady}\n >\n {recordingState === \"idle\" && t(\"selfie.recorder.start\")}\n {recordingState === \"preparing\" && t(\"selfie.recorder.preparing\")}\n {recordingState === \"recording\" && (\n <span className=\"flex items-center justify-center\">\n <span className=\"mr-2\">{t(\"selfie.recorder.recording_label\")}</span>\n <span className=\"flex space-x-1 loading-dots\">\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n <span className=\"h-1 w-1 bg-white rounded-full\"></span>\n </span>\n </span>\n )}\n {recordingState === \"processing\" && t(\"selfie.recorder.processing\")}\n </Button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default SelfieRecorder;\n"],"names":["useI18n","useRef","useState","useLiveFrameCapture","useVideoRecorderStyles","useEffect","setupVideoElementsObserver","isIOS","__awaiter","waitForVideoFrame","delay","getRecorderVideoElement","_jsxs","_jsx","Title","Subtitle","VideoRecorder","AcquisitionPreset","getUnisseyStrings","Button"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,IAAM,cAAc,GAAG,UAAC,EAMF,EAAA;;QALpB,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,EAAA,GAAA,EAAA,CAAA,cAA0B,CAAA,CAA1B,cAAc,GAAA,EAAA,KAAA,MAAA,GAAG,YAAA,EAAQ,CAAC,GAAA,EAAA,CAAA,eACP,CAAA,KACnB,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA,CACL,OAAO,GAAA,EAAA,CAAA;AAEC,IAAA,IAAA,CAAC,GAAKA,eAAO,EAAE,EAAd;AACT,IAAA,IAAM,WAAW,GAAGC,YAAM,CAA0B,IAAI,CAAC;IACnD,IAAA,EAAA,GAAoCC,cAAQ,CAAC,KAAK,CAAC,EAAlD,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAmB;IACnD,IAAA,EAAA,GAAoCA,cAAQ,CAAC,KAAK,CAAC,EAAlD,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAmB;IACnD,IAAA,EAAA,GAAsCA,cAAQ,CAElD,MAAM,CAAC,EAFF,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAE/B;AACT,IAAA,IAAM,oBAAoB,GAAGD,YAAM,CAAgB,IAAI,CAAC;IAClD,IAAA,EAAA,GAA4BE,uCAAmB,EAAE,EAA/C,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAA0B;AAEvD,IAAAC,8BAAsB,EAAE;AAExB,IAAAC,eAAS,CAAC,YAAA;QACR,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC;AAC/C,QAAA,IAAM,eAAe,GAAGC,6CAA0B,EAAE;;QAGpD,IAAIC,wBAAK,EAAE,EAAE;AACX,YAAA,IAAM,qBAAqB,GAAG,YAAA;gBAC5B,IAAM,cAAc,GAAG,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;AACtE,gBAAA,cAAc,CAAC,OAAO,CAAC,UAAC,QAAQ,EAAA;;AAE9B,oBAAA,IAAI;AACF,wBAAA,IAAM,UAAU,GAAI,QAAgB,CAAC,UAAU;wBAC/C,IAAI,UAAU,EAAE;4BACd,IAAM,aAAa,GAAG,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC;AAC1D,4BAAA,aAAa,CAAC,OAAO,CAAC,UAAC,KAAuB,EAAA;AAC5C,gCAAA,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACzC,gCAAA,KAAK,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC;AACtC,gCAAA,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;;AAEnC,gCAAA,KAAK,CAAC,WAAW,GAAG,IAAI;AACxB,gCAAA,KAAK,CAAC,QAAQ,GAAG,IAAI;AACrB,gCAAA,KAAK,CAAC,KAAK,GAAG,IAAI;AACpB,4BAAA,CAAC,CAAC;wBACJ;oBACF;oBAAE,OAAO,KAAK,EAAE;AACd,wBAAA,OAAO,CAAC,GAAG,CAAC,8BAA8B,EAAE,KAAK,CAAC;oBACpD;;AAGA,oBAAA,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AAC5C,oBAAA,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC;AACzC,oBAAA,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;AACxC,gBAAA,CAAC,CAAC;AACJ,YAAA,CAAC;;AAGD,YAAA,qBAAqB,EAAE;YACvB,IAAM,YAAU,GAAG,UAAU,CAAC,qBAAqB,EAAE,GAAG,CAAC;YACzD,IAAM,aAAW,GAAG,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC;YAE5D,OAAO,YAAA;gBACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC;AAClD,gBAAA,eAAe,EAAE;AACjB,gBAAA,OAAO,EAAE;gBACT,YAAY,CAAC,YAAU,CAAC;gBACxB,aAAa,CAAC,aAAW,CAAC;AAC5B,YAAA,CAAC;QACH;QAEA,OAAO,YAAA;YACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC;AAClD,YAAA,eAAe,EAAE;AACjB,YAAA,OAAO,EAAE;AACX,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,IAAM,cAAc,GAAG,YAAA;AACrB,QAAA,IAAI,CAAC,aAAa,IAAI,cAAc,KAAK,MAAM;YAAE;AACjD,QAAA,cAAc,EAAE;QAChB,iBAAiB,CAAC,WAAW,CAAC;QAC9B,gBAAgB,CAAC,IAAI,CAAC;AAEtB,QAAA,IAAM,cAAc,GAAG,YAAA,EAAA,OAAAC,mBAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,YAAA;;;;;;;AAEnB,wBAAA,OAAA,CAAA,CAAA,YAAMC,oCAAiB,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;;AAA5C,wBAAA,EAAA,CAAA,IAAA,EAA4C;AAC5C,wBAAA,OAAA,CAAA,CAAA,YAAMC,wBAAK,CAAC,GAAG,CAAC,CAAA;;AAAhB,wBAAA,EAAA,CAAA,IAAA,EAAgB;wBAChB,iBAAiB,CAAC,WAAW,CAAC;;AAG9B,wBAAA,UAAU,CAAC,YAAA;4BACT,IAAM,YAAY,GAAGC,0CAAuB,CAAC,WAAW,CAAC,OAAO,CAAC;4BACjE,IAAI,YAAY,EAAE;AAChB,gCAAA,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC;AAC5C,gCAAA,oBAAoB,CAAC,OAAO,GAAG,SAAS;4BAC1C;AACF,wBAAA,CAAC,EAAE,IAAI,CAAC,CAAC;AAET,wBAAA,CAAA,EAAA,GAAA,WAAW,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,EAAE;;;;AAE9B,wBAAA,OAAO,CAAC,KAAK,CAAC,yCAAyC,EAAE,OAAK,CAAC;wBAC/D,iBAAiB,CAAC,MAAM,CAAC;wBACzB,gBAAgB,CAAC,KAAK,CAAC;;;;;aAE1B;QAED,KAAK,cAAc,EAAE;AACvB,IAAA,CAAC;IAED,IAAM,mBAAmB,GAAG,YAAA,EAAM,OAAA,gBAAgB,CAAC,IAAI,CAAC,CAAA,CAAtB,CAAsB;IAExD,IAAM,qBAAqB,GAAG,UAAC,CAAQ,EAAA;;QACrC,IAAM,WAAW,GAAG,CAAqD;QACzE,IAAI,EAAC,CAAA,EAAA,GAAA,WAAW,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,CAAA,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;AACrE,YAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,CAAC;;YAG1C,IAAIJ,wBAAK,EAAE,EAAE;AACX,gBAAA,OAAO,CAAC,GAAG,CAAC,iEAAiE,CAAC;gBAC9E,IAAM,cAAc,GAAG,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;AACtE,gBAAA,cAAc,CAAC,OAAO,CAAC,UAAC,QAAQ,EAAE,KAAK,EAAA;AACrC,oBAAA,OAAO,CAAC,GAAG,CAAC,gBAAA,CAAA,MAAA,CAAiB,KAAK,MAAG,EAAE;AACrC,wBAAA,WAAW,EAAE,QAAQ,CAAC,YAAY,CAAC,aAAa,CAAC;AACjD,wBAAA,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,UAAU,CAAC;AAC3C,wBAAA,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,OAAO;AACrC,qBAAA,CAAC;AACJ,gBAAA,CAAC,CAAC;YACJ;YAEA,iBAAiB,CAAC,MAAM,CAAC;YACzB,gBAAgB,CAAC,KAAK,CAAC;YACvB;QACF;;AAGA,QAAA,IAAM,aAAa,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;AACxD,YAAA,MAAM,EAAE;AACN,gBAAA,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK;AAC/B,gBAAA,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,QAAQ,IAAI,EAAE;AAC3C,gBAAA,SAAS,EAAE,oBAAoB,CAAC,OAAO,IAAI,SAAS;AACrD;AACF,SAAA,CAAC;QAEF,iBAAiB,CAAC,YAAY,CAAC;QAC/B,YAAY,CAAC,aAAa,CAAC;AAC7B,IAAA,CAAC;AAED,IAAA,QACEK,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,yCAAyC,EACnD,KAAK,GAAA,EAAA,GAAA,EAAA;YACH,EAAA,CAAC,aAAuB,IAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,kBAAkB;YACtD,EAAA,CAAC,eAAyB,IAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,GAAI,oBAAoB;AAG9D,YAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAAA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDC,cAAA,CAACC,aAAK,IAAC,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAE,CAAC,CAAC,uBAAuB,CAAC,GAAS,EAC/ED,cAAA,CAACE,gBAAQ,EAAA,EAAC,SAAS,EAAC,kCAAkC,YAAE,CAAC,CAAC,0BAA0B,CAAC,EAAA,CAAY,IAC7F,EAENF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iDAAiD,YAC9DA,cAAA,CAACG,sBAAa,uBACZ,GAAG,EAAE,WAAkB,EACvB,MAAM,EAAEC,0BAAiB,CAAC,gBAAgB,EAC1C,cAAc,EAAA,IAAA,EACd,WAAW,EAAC,SAAS,EACrB,gBAAgB,EAAA,IAAA,EAChB,eAAe,EAAE,mBAAmB,EACpC,iBAAiB,EAAE,qBAAqB,EACxC,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACxC,SAAS,EAAC,wCAAwC,KAC7CV,wBAAK,EAAE,IAAI;AACd,oBAAA,kBAAkB,EAAE,MAAM;AAC1B,oBAAA,eAAe,EAAE,MAAM;AACvB,oBAAA,YAAY,EAAE;AACf,iBAAA,GAAC,EACF,OAAO,EAAEW,gCAAiB,CAAC,CAAC,CAAC,EAAA,CAAA,CAC7B,EAAA,CACE,EAENL,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gEAAgE,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAA,QAAA,EACrGD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CAC/BC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EAAA,QAAA,EACpD,CAAC,CAAC,sBAAsB,CAAC,EAAA,CACtB,EAEND,eAAA,CAACO,cAAM,EAAA,EACL,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,4CAA4C,EACtD,QAAQ,EAAE,aAAa,IAAI,CAAC,aAAa,EAAA,QAAA,EAAA,CAExC,cAAc,KAAK,MAAM,IAAI,CAAC,CAAC,uBAAuB,CAAC,EACvD,cAAc,KAAK,WAAW,IAAI,CAAC,CAAC,2BAA2B,CAAC,EAChE,cAAc,KAAK,WAAW,KAC7BP,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAChDC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,MAAM,EAAA,QAAA,EAAE,CAAC,CAAC,iCAAiC,CAAC,EAAA,CAAQ,EACpED,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAC3CC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+BAA+B,EAAA,CAAQ,EACvDA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+BAA+B,EAAA,CAAQ,EACvDA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+BAA+B,EAAA,CAAQ,CAAA,EAAA,CAClD,CAAA,EAAA,CACF,CACR,EACA,cAAc,KAAK,YAAY,IAAI,CAAC,CAAC,4BAA4B,CAAC,CAAA,EAAA,CAC5D,CAAA,EAAA,CACL,EAAA,CACF,CAAA,EAAA,CACF;AAEV;;;;"}
|
|
@@ -14,11 +14,12 @@ var sessionService = require('../../services/sessionService.js');
|
|
|
14
14
|
* Gère les étapes internes de capture et confirmation du selfie.
|
|
15
15
|
*/
|
|
16
16
|
var Selfie = function (_a) {
|
|
17
|
+
var _b, _c;
|
|
17
18
|
var stepObject = _a.stepObject, sessionId = _a.sessionId, node = _a.node, template = _a.template;
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
19
|
+
var _d = React.useState(0), internalStep = _d[0], setInternalStep = _d[1];
|
|
20
|
+
var _e = React.useState(null), selfieData = _e[0], setSelfieData = _e[1];
|
|
21
|
+
var _f = React.useState(null), selfiePhoto = _f[0], setSelfiePhoto = _f[1];
|
|
22
|
+
var _g = React.useState(false), isTransitioning = _g[0], setIsTransitioning = _g[1];
|
|
22
23
|
var handleConfirmSelfie = function () {
|
|
23
24
|
// Ajouter une transition visuelle avant de passer à l'étape suivante
|
|
24
25
|
setIsTransitioning(true);
|
|
@@ -49,7 +50,7 @@ var Selfie = function (_a) {
|
|
|
49
50
|
// Retourner à l'étape précédente du flow principal
|
|
50
51
|
stepObject.setStep(stepObject.step - 1);
|
|
51
52
|
};
|
|
52
|
-
return (jsxRuntime.jsxs("div", { className: "h-full w-full transition-opacity duration-500 ".concat(isTransitioning ? "opacity-50" : "opacity-100"), children: [internalStep === 0 && (jsxRuntime.jsx(Video.default, { setSelfieData: setSelfieData, setStep: setInternalStep, onBack: handleBackToParent })), internalStep === 1 && selfieData && (jsxRuntime.jsx(SelfieConfirmation.default, { selfieData: selfieData, onConfirm: handleConfirmSelfie, onRetake: handleRetakeSelfie, setSelfiePhoto: setSelfiePhoto })), internalStep === 2 && selfieData && (jsxRuntime.jsx(SelfieProcessing.default, { onProcessingComplete: selfieProcessed, selfieVideo: selfieData, selfiePhoto: selfiePhoto, onRetake: onRetake }))] }));
|
|
53
|
+
return (jsxRuntime.jsxs("div", { className: "h-full w-full transition-opacity duration-500 ".concat(isTransitioning ? "opacity-50" : "opacity-100"), children: [internalStep === 0 && (jsxRuntime.jsx(Video.default, { setSelfieData: setSelfieData, setStep: setInternalStep, onBack: handleBackToParent, btnBg: (_b = template.buttonBgColor) !== null && _b !== void 0 ? _b : "#11E5C5", btnText: (_c = template.buttonTextColor) !== null && _c !== void 0 ? _c : "#3C3C40" })), internalStep === 1 && selfieData && (jsxRuntime.jsx(SelfieConfirmation.default, { selfieData: selfieData, onConfirm: handleConfirmSelfie, onRetake: handleRetakeSelfie, setSelfiePhoto: setSelfiePhoto })), internalStep === 2 && selfieData && (jsxRuntime.jsx(SelfieProcessing.default, { onProcessingComplete: selfieProcessed, selfieVideo: selfieData, selfiePhoto: selfiePhoto, onRetake: onRetake }))] }));
|
|
53
54
|
};
|
|
54
55
|
|
|
55
56
|
exports.default = Selfie;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selfie.js","sources":["../../../../../src/components/session/Selfie.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n SessionTemplate,\n SessionTemplateNode,\n stepObject,\n} from \"../../types/session\";\nimport Video from \"../selfie/Video\";\nimport SelfieConfirmation from \"../selfie/SelfieConfirmation\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport SelfieProcessing from \"../selfie/selfie-flow/SelfieProcessing\";\nimport {\n updateSessionCurrentStep,\n getOrderedJourneySteps,\n} from \"../../services/sessionService\";\n\n/**\n * Composant de gestion du flux selfie.\n * Gère les étapes internes de capture et confirmation du selfie.\n */\nconst Selfie = ({\n stepObject,\n sessionId,\n node,\n template,\n}: {\n stepObject: stepObject;\n sessionId: string;\n node: SessionTemplateNode;\n template: SessionTemplate;\n}) => {\n const [internalStep, setInternalStep] = useState(0);\n const [selfieData, setSelfieData] = useState<SelfieCaptureData | null>(null);\n const [selfiePhoto, setSelfiePhoto] = useState<string | null>(null);\n const [isTransitioning, setIsTransitioning] = useState(false);\n\n const handleConfirmSelfie = () => {\n // Ajouter une transition visuelle avant de passer à l'étape suivante\n setIsTransitioning(true);\n\n // Attendre un peu pour l'animation avant de passer à l'étape suivante\n setTimeout(() => {\n setInternalStep(2); // Passer à l'étape de traitement du selfie\n setIsTransitioning(false);\n }, 500);\n };\n\n const selfieProcessed = (processed: boolean) => {\n // Callback pour indiquer que le selfie a été traité\n if (processed) {\n // Increment currentStep in database immediately after successful analysis\n // This prevents double analysis if the user refreshes the page\n updateSessionCurrentStep(sessionId, stepObject.step + 1).catch((error) => {\n console.error(\"Failed to update current step after successful analysis:\", error);\n });\n stepObject.goToNextStep(node.id, template);\n }\n };\n\n const onRetake = () => {\n setInternalStep(0);\n };\n\n const handleRetakeSelfie = () => {\n setInternalStep(0);\n };\n\n const handleBackToParent = () => {\n // Retourner à l'étape précédente du flow principal\n stepObject.setStep(stepObject.step - 1);\n };\n\n return (\n <div\n className={`h-full w-full transition-opacity duration-500 ${isTransitioning ? \"opacity-50\" : \"opacity-100\"\n }`}\n >\n {internalStep === 0 && (\n <Video\n setSelfieData={setSelfieData}\n setStep={setInternalStep}\n onBack={handleBackToParent}\n />\n )}\n {internalStep === 1 && selfieData && (\n <SelfieConfirmation\n selfieData={selfieData}\n onConfirm={handleConfirmSelfie}\n onRetake={handleRetakeSelfie}\n setSelfiePhoto={setSelfiePhoto}\n />\n )}\n {internalStep === 2 && selfieData && (\n <SelfieProcessing\n onProcessingComplete={selfieProcessed}\n selfieVideo={selfieData}\n selfiePhoto={selfiePhoto}\n onRetake={onRetake}\n />\n )}\n </div>\n );\n};\n\nexport default Selfie;\n"],"names":["useState","updateSessionCurrentStep","_jsxs","_jsx","Video","SelfieConfirmation","SelfieProcessing"],"mappings":";;;;;;;;;;;AAeA;;;AAGG;AACH,IAAM,MAAM,GAAG,UAAC,EAUf,EAAA
|
|
1
|
+
{"version":3,"file":"Selfie.js","sources":["../../../../../src/components/session/Selfie.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport {\n SessionTemplate,\n SessionTemplateNode,\n stepObject,\n} from \"../../types/session\";\nimport Video from \"../selfie/Video\";\nimport SelfieConfirmation from \"../selfie/SelfieConfirmation\";\nimport type { SelfieCaptureData } from \"../../types/selfie\";\nimport SelfieProcessing from \"../selfie/selfie-flow/SelfieProcessing\";\nimport {\n updateSessionCurrentStep,\n getOrderedJourneySteps,\n} from \"../../services/sessionService\";\n\n/**\n * Composant de gestion du flux selfie.\n * Gère les étapes internes de capture et confirmation du selfie.\n */\nconst Selfie = ({\n stepObject,\n sessionId,\n node,\n template,\n}: {\n stepObject: stepObject;\n sessionId: string;\n node: SessionTemplateNode;\n template: SessionTemplate;\n}) => {\n const [internalStep, setInternalStep] = useState(0);\n const [selfieData, setSelfieData] = useState<SelfieCaptureData | null>(null);\n const [selfiePhoto, setSelfiePhoto] = useState<string | null>(null);\n const [isTransitioning, setIsTransitioning] = useState(false);\n\n const handleConfirmSelfie = () => {\n // Ajouter une transition visuelle avant de passer à l'étape suivante\n setIsTransitioning(true);\n\n // Attendre un peu pour l'animation avant de passer à l'étape suivante\n setTimeout(() => {\n setInternalStep(2); // Passer à l'étape de traitement du selfie\n setIsTransitioning(false);\n }, 500);\n };\n\n const selfieProcessed = (processed: boolean) => {\n // Callback pour indiquer que le selfie a été traité\n if (processed) {\n // Increment currentStep in database immediately after successful analysis\n // This prevents double analysis if the user refreshes the page\n updateSessionCurrentStep(sessionId, stepObject.step + 1).catch((error) => {\n console.error(\"Failed to update current step after successful analysis:\", error);\n });\n stepObject.goToNextStep(node.id, template);\n }\n };\n\n const onRetake = () => {\n setInternalStep(0);\n };\n\n const handleRetakeSelfie = () => {\n setInternalStep(0);\n };\n\n const handleBackToParent = () => {\n // Retourner à l'étape précédente du flow principal\n stepObject.setStep(stepObject.step - 1);\n };\n\n return (\n <div\n className={`h-full w-full transition-opacity duration-500 ${isTransitioning ? \"opacity-50\" : \"opacity-100\"\n }`}\n >\n {internalStep === 0 && (\n <Video\n setSelfieData={setSelfieData}\n setStep={setInternalStep}\n onBack={handleBackToParent}\n btnBg={template.buttonBgColor ?? \"#11E5C5\"}\n btnText={template.buttonTextColor ?? \"#3C3C40\"}\n />\n )}\n {internalStep === 1 && selfieData && (\n <SelfieConfirmation\n selfieData={selfieData}\n onConfirm={handleConfirmSelfie}\n onRetake={handleRetakeSelfie}\n setSelfiePhoto={setSelfiePhoto}\n />\n )}\n {internalStep === 2 && selfieData && (\n <SelfieProcessing\n onProcessingComplete={selfieProcessed}\n selfieVideo={selfieData}\n selfiePhoto={selfiePhoto}\n onRetake={onRetake}\n />\n )}\n </div>\n );\n};\n\nexport default Selfie;\n"],"names":["useState","updateSessionCurrentStep","_jsxs","_jsx","Video","SelfieConfirmation","SelfieProcessing"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ var useI18n = require('../../hooks/useI18n.js');
|
|
|
14
14
|
|
|
15
15
|
var SessionContent = function (_a) {
|
|
16
16
|
var _b, _c, _d, _e, _f, _g, _h;
|
|
17
|
-
var step = _a.step, loading = _a.loading, session = _a.session, sessionId = _a.sessionId, stepObject = _a.stepObject, userInput = _a.userInput, setUserInput = _a.setUserInput, contactInfo = _a.contactInfo, setContactInfo = _a.setContactInfo;
|
|
17
|
+
var step = _a.step, loading = _a.loading, session = _a.session, sessionId = _a.sessionId, stepObject = _a.stepObject, stepHistory = _a.stepHistory, userInput = _a.userInput, setUserInput = _a.setUserInput, contactInfo = _a.contactInfo, setContactInfo = _a.setContactInfo;
|
|
18
18
|
var _j = useI18n.useI18n(), setLanguage = _j.setLanguage, currentLanguage = _j.currentLanguage, t = _j.t;
|
|
19
19
|
// If is mobile template, isMobileCapture should be true for document-selection nodes
|
|
20
20
|
var isMobileTemplate = ((_c = (_b = session === null || session === void 0 ? void 0 : session.template) === null || _b === void 0 ? void 0 : _b.platforms) === null || _c === void 0 ? void 0 : _c.mobile) === true;
|
|
@@ -85,7 +85,7 @@ var SessionContent = function (_a) {
|
|
|
85
85
|
return (jsxRuntime.jsx(LoadingState.default, { message: t("loading.document"), subtitle: t("loading.preparing_document") }));
|
|
86
86
|
}
|
|
87
87
|
if (session === null || session === void 0 ? void 0 : session.template) {
|
|
88
|
-
return (jsxRuntime.jsx(TemplateNodeRenderer.default, { session: session, sessionId: sessionId, stepObject: stepObject, templateIndex: step - 1, onContinueOnPC: handleContinueOnPC, userInput: userInput, setUserInput: setUserInput, contactInfo: contactInfo, setContactInfo: setContactInfo, isMobileTemplate: isMobileTemplate }));
|
|
88
|
+
return (jsxRuntime.jsx(TemplateNodeRenderer.default, { session: session, sessionId: sessionId, stepObject: stepObject, stepHistory: stepHistory, templateIndex: step - 1, onContinueOnPC: handleContinueOnPC, userInput: userInput, setUserInput: setUserInput, contactInfo: contactInfo, setContactInfo: setContactInfo, isMobileTemplate: isMobileTemplate }));
|
|
89
89
|
}
|
|
90
90
|
else {
|
|
91
91
|
console.log("❌ SessionContent - No template found, showing fallback");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SessionContent.js","sources":["../../../../../src/components/session/SessionContent.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport StartSession from \"../session/StartSession\";\nimport MobileRedirect from \"../session/MobileRedirect\";\nimport EndFlow from \"../session/EndFlow\";\nimport LoadingState from \"../states/LoadingState\";\nimport TemplateNodeRenderer from \"../template/TemplateNodeRenderer\";\nimport { getOrderedJourneySteps } from \"../../services/sessionService\";\nimport type { SessionData, stepObject } from \"../../types/session\";\nimport type { UserInput } from \"../../types/userInput\";\nimport type { ContactInfo } from \"../../types/contactInfo\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\ninterface SessionContentProps {\n step: number;\n loading: boolean;\n session: SessionData | null;\n sessionId: string;\n stepObject: stepObject;\n userInput: UserInput;\n setUserInput: React.Dispatch<React.SetStateAction<UserInput>>;\n contactInfo: ContactInfo;\n setContactInfo: React.Dispatch<React.SetStateAction<ContactInfo>>;\n}\n\nconst SessionContent: React.FC<SessionContentProps> = ({\n step,\n loading,\n session,\n sessionId,\n stepObject,\n userInput,\n setUserInput,\n contactInfo,\n setContactInfo,\n}) => {\n const { setLanguage, currentLanguage, t } = useI18n();\n // If is mobile template, isMobileCapture should be true for document-selection nodes\n const isMobileTemplate = session?.template?.platforms?.mobile === true;\n const showQRCodeInstructions =\n isMobileTemplate && session?.template?.showQRCode === true;\n const isDesktopAllowed = session?.template?.platforms?.desktop === true;\n\n // Get QR code title and description from Start node\n const startNode = session?.template?.nodes?.find(\n (node: any) => node.type === \"start\"\n );\n const qrCodeTitle = startNode?.qrCodeTitle;\n const qrCodeDescription = startNode?.qrCodeDescription;\n\n // Handle template step progression\n const handleContinueOnPC = () => {\n if (!session?.template) return;\n\n const templateNodes = getOrderedJourneySteps(session.template);\n // When user clicks \"Continue on PC\" from MobileRedirect (step 0.5), go to step 1\n // For other steps, calculate templateIndex normally\n const templateIndex =\n step === 0.5 ? 0 : showQRCodeInstructions ? step - 1.5 : step - 1;\n\n if (templateIndex < templateNodes.length - 1) {\n const nextStep =\n step === 0.5\n ? 1\n : showQRCodeInstructions\n ? templateIndex + 2.5\n : templateIndex + 2;\n stepObject.setStep(nextStep);\n } else {\n // Last step, finish the process\n const endNode = session.template.nodes.find(\n (node: { type: string }) => node.type === \"end\"\n );\n if (endNode) {\n // Continue to the next node which will be the \"end\" node\n stepObject.setStep(\n step === 0.5\n ? 1\n : showQRCodeInstructions\n ? templateIndex + 2.5\n : templateIndex + 2\n );\n } else {\n stepObject.setStep(0);\n }\n }\n };\n\n // Special check: If session is ended, display EndFlow directly\n if (session?.status === \"ended\") {\n return (\n <EndFlow\n sessionId={sessionId}\n sessionStatus={session.status}\n callbackURL={session?.callbackURL}\n />\n );\n }\n\n // Change languages dynamically based on session template\n useEffect(() => {\n if (session?.template?.languages && session.template.languages.length > 0) {\n const language = session.template.languages[0]; // Use the first language\n\n // Check if language is different from current\n if (language !== currentLanguage) {\n setLanguage(language);\n }\n }\n }, []);\n\n // Render step content\n switch (step) {\n case 0:\n return (\n <StartSession\n stepObject={stepObject}\n session={session}\n showQRCodeInstructions={showQRCodeInstructions}\n />\n );\n\n case 0.5:\n // MobileRedirect step - only shown if showQRCodeInstructions is true\n return (\n <MobileRedirect\n sessionId={sessionId}\n onBack={() => stepObject.setStep(0)}\n onContinueOnPC={handleContinueOnPC}\n isDesktopAllowed={isDesktopAllowed}\n title={qrCodeTitle}\n subtitle={qrCodeDescription}\n />\n );\n\n default:\n // From step 1 onwards, use dynamic logic based on template\n if (step >= 1) {\n if (loading) {\n return (\n <LoadingState\n message={t(\"loading.document\")}\n subtitle={t(\"loading.preparing_document\")}\n />\n );\n }\n\n if (session?.template) {\n return (\n <TemplateNodeRenderer\n session={session}\n sessionId={sessionId}\n stepObject={stepObject}\n templateIndex={step - 1}\n onContinueOnPC={handleContinueOnPC}\n userInput={userInput}\n setUserInput={setUserInput}\n contactInfo={contactInfo}\n setContactInfo={setContactInfo}\n isMobileTemplate={isMobileTemplate}\n />\n );\n } else {\n console.log(\n \"❌ SessionContent - No template found, showing fallback\"\n );\n // Fallback if template is not available\n return (\n <div className=\"flex flex-col items-center justify-center h-full p-4 text-center\">\n <div className=\"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4\"></div>\n <h2 className=\"text-xl font-bold text-gray-700 mb-2\">\n {t(\"session_content.preparing_verification\")}\n </h2>\n <p className=\"text-gray-600 mb-4\">\n {t(\"session_content.please_wait\")}\n </p>\n <div className=\"bg-blue-50 border border-blue-200 rounded-lg p-3 mt-4 max-w-xs mx-auto\">\n <p className=\"text-sm text-blue-600\">\n {t(\"session_content.configuring_steps\")}\n </p>\n <button\n onClick={() => window.location.reload()}\n className=\"mt-2 px-3 py-1 bg-blue-600 text-white text-xs rounded\"\n >\n Actualiser si nécessaire\n </button>\n </div>\n </div>\n );\n }\n }\n\n return null;\n }\n};\n\nexport default SessionContent;\n"],"names":["useI18n","getOrderedJourneySteps","_jsx","EndFlow","useEffect","StartSession","MobileRedirect","LoadingState","TemplateNodeRenderer","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SessionContent.js","sources":["../../../../../src/components/session/SessionContent.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport StartSession from \"../session/StartSession\";\nimport MobileRedirect from \"../session/MobileRedirect\";\nimport EndFlow from \"../session/EndFlow\";\nimport LoadingState from \"../states/LoadingState\";\nimport TemplateNodeRenderer from \"../template/TemplateNodeRenderer\";\nimport { getOrderedJourneySteps } from \"../../services/sessionService\";\nimport type { SessionData, stepObject } from \"../../types/session\";\nimport type { UserInput } from \"../../types/userInput\";\nimport type { ContactInfo } from \"../../types/contactInfo\";\nimport { useI18n } from \"../../hooks/useI18n\";\n\ninterface SessionContentProps {\n step: number;\n loading: boolean;\n session: SessionData | null;\n sessionId: string;\n stepObject: stepObject;\n stepHistory: number[];\n userInput: UserInput;\n setUserInput: React.Dispatch<React.SetStateAction<UserInput>>;\n contactInfo: ContactInfo;\n setContactInfo: React.Dispatch<React.SetStateAction<ContactInfo>>;\n}\n\nconst SessionContent: React.FC<SessionContentProps> = ({\n step,\n loading,\n session,\n sessionId,\n stepObject,\n stepHistory,\n userInput,\n setUserInput,\n contactInfo,\n setContactInfo,\n}) => {\n const { setLanguage, currentLanguage, t } = useI18n();\n // If is mobile template, isMobileCapture should be true for document-selection nodes\n const isMobileTemplate = session?.template?.platforms?.mobile === true;\n const showQRCodeInstructions =\n isMobileTemplate && session?.template?.showQRCode === true;\n const isDesktopAllowed = session?.template?.platforms?.desktop === true;\n\n // Get QR code title and description from Start node\n const startNode = session?.template?.nodes?.find(\n (node: any) => node.type === \"start\"\n );\n const qrCodeTitle = startNode?.qrCodeTitle;\n const qrCodeDescription = startNode?.qrCodeDescription;\n\n // Handle template step progression\n const handleContinueOnPC = () => {\n if (!session?.template) return;\n\n const templateNodes = getOrderedJourneySteps(session.template);\n // When user clicks \"Continue on PC\" from MobileRedirect (step 0.5), go to step 1\n // For other steps, calculate templateIndex normally\n const templateIndex =\n step === 0.5 ? 0 : showQRCodeInstructions ? step - 1.5 : step - 1;\n\n if (templateIndex < templateNodes.length - 1) {\n const nextStep =\n step === 0.5\n ? 1\n : showQRCodeInstructions\n ? templateIndex + 2.5\n : templateIndex + 2;\n stepObject.setStep(nextStep);\n } else {\n // Last step, finish the process\n const endNode = session.template.nodes.find(\n (node: { type: string }) => node.type === \"end\"\n );\n if (endNode) {\n // Continue to the next node which will be the \"end\" node\n stepObject.setStep(\n step === 0.5\n ? 1\n : showQRCodeInstructions\n ? templateIndex + 2.5\n : templateIndex + 2\n );\n } else {\n stepObject.setStep(0);\n }\n }\n };\n\n // Special check: If session is ended, display EndFlow directly\n if (session?.status === \"ended\") {\n return (\n <EndFlow\n sessionId={sessionId}\n sessionStatus={session.status}\n callbackURL={session?.callbackURL}\n />\n );\n }\n\n // Change languages dynamically based on session template\n useEffect(() => {\n if (session?.template?.languages && session.template.languages.length > 0) {\n const language = session.template.languages[0]; // Use the first language\n\n // Check if language is different from current\n if (language !== currentLanguage) {\n setLanguage(language);\n }\n }\n }, []);\n\n // Render step content\n switch (step) {\n case 0:\n return (\n <StartSession\n stepObject={stepObject}\n session={session}\n showQRCodeInstructions={showQRCodeInstructions}\n />\n );\n\n case 0.5:\n // MobileRedirect step - only shown if showQRCodeInstructions is true\n return (\n <MobileRedirect\n sessionId={sessionId}\n onBack={() => stepObject.setStep(0)}\n onContinueOnPC={handleContinueOnPC}\n isDesktopAllowed={isDesktopAllowed}\n title={qrCodeTitle}\n subtitle={qrCodeDescription}\n />\n );\n\n default:\n // From step 1 onwards, use dynamic logic based on template\n if (step >= 1) {\n if (loading) {\n return (\n <LoadingState\n message={t(\"loading.document\")}\n subtitle={t(\"loading.preparing_document\")}\n />\n );\n }\n\n if (session?.template) {\n return (\n <TemplateNodeRenderer\n session={session}\n sessionId={sessionId}\n stepObject={stepObject}\n stepHistory={stepHistory}\n templateIndex={step - 1}\n onContinueOnPC={handleContinueOnPC}\n userInput={userInput}\n setUserInput={setUserInput}\n contactInfo={contactInfo}\n setContactInfo={setContactInfo}\n isMobileTemplate={isMobileTemplate}\n />\n );\n } else {\n console.log(\n \"❌ SessionContent - No template found, showing fallback\"\n );\n // Fallback if template is not available\n return (\n <div className=\"flex flex-col items-center justify-center h-full p-4 text-center\">\n <div className=\"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4\"></div>\n <h2 className=\"text-xl font-bold text-gray-700 mb-2\">\n {t(\"session_content.preparing_verification\")}\n </h2>\n <p className=\"text-gray-600 mb-4\">\n {t(\"session_content.please_wait\")}\n </p>\n <div className=\"bg-blue-50 border border-blue-200 rounded-lg p-3 mt-4 max-w-xs mx-auto\">\n <p className=\"text-sm text-blue-600\">\n {t(\"session_content.configuring_steps\")}\n </p>\n <button\n onClick={() => window.location.reload()}\n className=\"mt-2 px-3 py-1 bg-blue-600 text-white text-xs rounded\"\n >\n Actualiser si nécessaire\n </button>\n </div>\n </div>\n );\n }\n }\n\n return null;\n }\n};\n\nexport default SessionContent;\n"],"names":["useI18n","getOrderedJourneySteps","_jsx","EndFlow","useEffect","StartSession","MobileRedirect","LoadingState","TemplateNodeRenderer","_jsxs"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAM,cAAc,GAAkC,UAAC,EAWtD,EAAA;;QAVC,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,cAAc,GAAA,EAAA,CAAA,cAAA;AAER,IAAA,IAAA,EAAA,GAAsCA,eAAO,EAAE,EAA7C,WAAW,GAAA,EAAA,CAAA,WAAA,EAAE,eAAe,GAAA,EAAA,CAAA,eAAA,EAAE,CAAC,GAAA,EAAA,CAAA,CAAc;;AAErD,IAAA,IAAM,gBAAgB,GAAG,CAAA,MAAA,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,0CAAE,MAAM,MAAK,IAAI;AACtE,IAAA,IAAM,sBAAsB,GAC1B,gBAAgB,IAAI,CAAA,MAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,0CAAE,UAAU,MAAK,IAAI;AAC5D,IAAA,IAAM,gBAAgB,GAAG,CAAA,MAAA,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,0CAAE,OAAO,MAAK,IAAI;;AAGvE,IAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,CAC9C,UAAC,IAAS,EAAA,EAAK,OAAA,IAAI,CAAC,IAAI,KAAK,OAAO,CAAA,CAArB,CAAqB,CACrC;IACD,IAAM,WAAW,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,WAAW;IAC1C,IAAM,iBAAiB,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,iBAAiB;;AAGtD,IAAA,IAAM,kBAAkB,GAAG,YAAA;QACzB,IAAI,EAAC,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAA;YAAE;QAExB,IAAM,aAAa,GAAGC,qCAAsB,CAAC,OAAO,CAAC,QAAQ,CAAC;;;QAG9D,IAAM,aAAa,GACjB,IAAI,KAAK,GAAG,GAAG,CAAC,GAAG,sBAAsB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,CAAC;QAEnE,IAAI,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5C,YAAA,IAAM,QAAQ,GACZ,IAAI,KAAK;AACP,kBAAE;AACF,kBAAE;sBACA,aAAa,GAAG;AAClB,sBAAE,aAAa,GAAG,CAAC;AACvB,YAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC;QAC9B;aAAO;;YAEL,IAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CACzC,UAAC,IAAsB,EAAA,EAAK,OAAA,IAAI,CAAC,IAAI,KAAK,KAAK,CAAA,CAAnB,CAAmB,CAChD;YACD,IAAI,OAAO,EAAE;;AAEX,gBAAA,UAAU,CAAC,OAAO,CAChB,IAAI,KAAK;AACP,sBAAE;AACF,sBAAE;0BACA,aAAa,GAAG;AAClB,0BAAE,aAAa,GAAG,CAAC,CACtB;YACH;iBAAO;AACL,gBAAA,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;YACvB;QACF;AACF,IAAA,CAAC;;IAGD,IAAI,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,MAAM,MAAK,OAAO,EAAE;QAC/B,QACEC,cAAA,CAACC,eAAO,EAAA,EACN,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,OAAO,CAAC,MAAM,EAC7B,WAAW,EAAE,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,WAAW,EAAA,CACjC;IAEN;;AAGA,IAAAC,eAAS,CAAC,YAAA;;QACR,IAAI,CAAA,MAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,KAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;AACzE,YAAA,IAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;AAG/C,YAAA,IAAI,QAAQ,KAAK,eAAe,EAAE;gBAChC,WAAW,CAAC,QAAQ,CAAC;YACvB;QACF;IACF,CAAC,EAAE,EAAE,CAAC;;IAGN,QAAQ,IAAI;AACV,QAAA,KAAK,CAAC;AACJ,YAAA,QACEF,cAAA,CAACG,oBAAY,EAAA,EACX,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,sBAAsB,EAAE,sBAAsB,EAAA,CAC9C;AAGN,QAAA,KAAK,GAAG;;AAEN,YAAA,QACEH,cAAA,CAACI,sBAAc,EAAA,EACb,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,cAAM,OAAA,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAArB,CAAqB,EACnC,cAAc,EAAE,kBAAkB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,iBAAiB,EAAA,CAC3B;AAGN,QAAA;;AAEE,YAAA,IAAI,IAAI,IAAI,CAAC,EAAE;gBACb,IAAI,OAAO,EAAE;AACX,oBAAA,QACEJ,cAAA,CAACK,oBAAY,IACX,OAAO,EAAE,CAAC,CAAC,kBAAkB,CAAC,EAC9B,QAAQ,EAAE,CAAC,CAAC,4BAA4B,CAAC,EAAA,CACzC;gBAEN;gBAEA,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;oBACrB,QACEL,eAACM,4BAAoB,EAAA,EACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,IAAI,GAAG,CAAC,EACvB,cAAc,EAAE,kBAAkB,EAClC,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAAA,CAClC;gBAEN;qBAAO;AACL,oBAAA,OAAO,CAAC,GAAG,CACT,wDAAwD,CACzD;;AAED,oBAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kEAAkE,EAAA,QAAA,EAAA,CAC/EP,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+EAA+E,EAAA,CAAO,EACrGA,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,sCAAsC,EAAA,QAAA,EACjD,CAAC,CAAC,wCAAwC,CAAC,EAAA,CACzC,EACLA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,oBAAoB,YAC9B,CAAC,CAAC,6BAA6B,CAAC,GAC/B,EACJO,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wEAAwE,EAAA,QAAA,EAAA,CACrFP,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EACjC,CAAC,CAAC,mCAAmC,CAAC,EAAA,CACrC,EACJA,cAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,YAAA,EAAM,OAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAA,CAAxB,CAAwB,EACvC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,+BAAA,EAAA,CAG1D,CAAA,EAAA,CACL,CAAA,EAAA,CACF;gBAEV;YACF;AAEA,YAAA,OAAO,IAAI;;AAEjB;;;;"}
|