@opexa/portal-components 0.0.37 → 0.0.38
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.
|
@@ -6,11 +6,11 @@ import { createContext, useContext, useState } from 'react';
|
|
|
6
6
|
import invariant from 'tiny-invariant';
|
|
7
7
|
import { toaster } from '../../client/utils/index.js';
|
|
8
8
|
import { ArrowLeftIcon, CheckCircleIcon, CheckIcon, XIcon } from '../../icons/index.js';
|
|
9
|
+
import uploadId from '../../images/capture-id-banner.png';
|
|
10
|
+
import selfie from '../../images/capture-selfie-banner.png';
|
|
9
11
|
import { AlertDialog, Button, Checkbox, Field, Progress } from '../../ui/index.js';
|
|
10
|
-
import selfie from './selfie.png';
|
|
11
|
-
import uploadId from './upload-id.png';
|
|
12
12
|
function useVerificationCapture() {
|
|
13
|
-
const [step, setStep_] = useState(
|
|
13
|
+
const [step, setStep_] = useState(1);
|
|
14
14
|
function setStep(step) {
|
|
15
15
|
setStep_(step);
|
|
16
16
|
if (step === 4) {
|
|
@@ -37,11 +37,11 @@ export function VerificationCapture() {
|
|
|
37
37
|
}
|
|
38
38
|
function Step1() {
|
|
39
39
|
const context = useVerificationCaptureContext();
|
|
40
|
-
return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", children: [_jsx(Image, { src: uploadId, alt: "", className: "h-auto w-full" }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Upload front side of your ID"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "Don't edit image of your ID"] })] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => context.setStep(2), children: "Continue" }) })] })] }));
|
|
40
|
+
return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Prepare to upload your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", children: [_jsx(Image, { src: uploadId, alt: "", className: "h-auto w-full", width: 800, height: 400 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Upload front side of your ID"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "Don't edit image of your ID"] })] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => context.setStep(2), children: "Continue" }) })] })] }));
|
|
41
41
|
}
|
|
42
42
|
function Step2() {
|
|
43
43
|
const context = useVerificationCaptureContext();
|
|
44
|
-
return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", children: [_jsx(Image, { src: selfie, alt: "", className: "h-auto w-full" }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Face and ID must be clearly visible"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "No hats, sunglasses, or masks"] })] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => context.setStep(3), children: "Continue" }) })] })] }));
|
|
44
|
+
return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mt-2xl text-center text-2xl font-semibold", children: "Take a selfie holding your ID" }), _jsxs("div", { className: "border-border-secondary bg-bg-primary-alt shadow-xs mt-6 rounded-2xl border", children: [_jsxs("div", { className: "px-4 py-5", children: [_jsx(Image, { src: selfie, alt: "", className: "h-auto w-full", width: 800, height: 400 }), _jsxs("ul", { className: "mt-2xl space-y-3", children: [_jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Face and ID must be clearly visible"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(CheckIcon, { className: "text-text-featured-icon-light-success size-6" }), "Take a photo in a well lit room"] }), _jsxs("li", { className: "text-text-secondary-700 flex items-center gap-lg", children: [_jsx(XIcon, { className: "text-text-featured-icon-light-error size-6" }), "No hats, sunglasses, or masks"] })] })] }), _jsx("div", { className: "border-border-secondary border-t px-xl py-lg", children: _jsx(Button, { size: "sm", onClick: () => context.setStep(3), children: "Continue" }) })] })] }));
|
|
45
45
|
}
|
|
46
46
|
function Step3() {
|
|
47
47
|
const context = useVerificationCaptureContext();
|
|
Binary file
|
|
Binary file
|