idmission-web-sdk 2.3.174 → 2.3.175-feature-barcode-client-scan-eaf765f
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/components/common/debug.d.ts +3 -0
- package/dist/components/common/debug.d.ts.map +1 -1
- package/dist/components/customer_flows/IdValidation.d.ts +11 -0
- package/dist/components/customer_flows/IdValidation.d.ts.map +1 -1
- package/dist/components/id_capture/BarcodeGuideOverlay.d.ts +23 -0
- package/dist/components/id_capture/BarcodeGuideOverlay.d.ts.map +1 -0
- package/dist/components/id_capture/BarcodeSuccessOverlay.d.ts +8 -0
- package/dist/components/id_capture/BarcodeSuccessOverlay.d.ts.map +1 -0
- package/dist/components/id_capture/DynamsoftBarcodeProvider.d.ts +29 -0
- package/dist/components/id_capture/DynamsoftBarcodeProvider.d.ts.map +1 -0
- package/dist/components/id_capture/DynamsoftLicensePrompt.d.ts +9 -0
- package/dist/components/id_capture/DynamsoftLicensePrompt.d.ts.map +1 -0
- package/dist/components/id_capture/IdCapture.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureGuides.d.ts +5 -1
- package/dist/components/id_capture/IdCaptureGuides.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureModelsProvider.d.ts +8 -0
- package/dist/components/id_capture/IdCaptureModelsProvider.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts +74 -1
- package/dist/components/id_capture/IdCaptureStateProvider.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureSuccess.d.ts +18 -1
- package/dist/components/id_capture/IdCaptureSuccess.d.ts.map +1 -1
- package/dist/components/id_capture/IdCaptureWizard.d.ts +32 -1
- package/dist/components/id_capture/IdCaptureWizard.d.ts.map +1 -1
- package/dist/lib/barcode/AAMVAParser.d.ts +32 -0
- package/dist/lib/barcode/AAMVAParser.d.ts.map +1 -0
- package/dist/lib/barcode/DynamsoftLoader.d.ts +26 -0
- package/dist/lib/barcode/DynamsoftLoader.d.ts.map +1 -0
- package/dist/lib/barcode/DynamsoftTypes.d.ts +128 -0
- package/dist/lib/barcode/DynamsoftTypes.d.ts.map +1 -0
- package/dist/lib/barcode/NativeBarcodeDecoder.d.ts +93 -0
- package/dist/lib/barcode/NativeBarcodeDecoder.d.ts.map +1 -0
- package/dist/lib/camera/cameraStore.d.ts.map +1 -1
- package/dist/lib/models/DocumentDetection.d.ts.map +1 -1
- package/dist/sdk2.cjs.development.js +2677 -522
- package/dist/sdk2.cjs.development.js.map +1 -1
- package/dist/sdk2.cjs.production.js +1 -1
- package/dist/sdk2.cjs.production.js.map +1 -1
- package/dist/sdk2.esm.js +2677 -522
- package/dist/sdk2.esm.js.map +1 -1
- package/dist/sdk2.umd.development.js +2679 -524
- package/dist/sdk2.umd.development.js.map +1 -1
- package/dist/sdk2.umd.production.js +1 -1
- package/dist/sdk2.umd.production.js.map +1 -1
- package/package.json +1 -1
package/dist/sdk2.esm.js
CHANGED
|
@@ -452,16 +452,16 @@ var LoaderButton = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
452
452
|
}, children));
|
|
453
453
|
});
|
|
454
454
|
LoaderButton.displayName = 'LoaderButton';
|
|
455
|
-
var StyledButton = styled.button(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
455
|
+
var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"], ["\n ", "\n\n /*!\n * Ladda\n * http://lab.hakim.se/ladda\n * MIT licensed\n *\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n */\n\n position: relative;\n\n .ladda-spinner {\n position: absolute;\n z-index: 2;\n display: inline-block;\n width: 32px;\n top: 50%;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n }\n .ladda-label {\n position: relative;\n z-index: 3;\n }\n .ladda-progress {\n position: absolute;\n width: 0;\n height: 100%;\n left: 0;\n top: 0;\n background: rgba(0, 0, 0, 0.2);\n display: none;\n transition: 0.1s linear all !important;\n }\n &[data-loading] .ladda-progress {\n display: block;\n }\n\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n\n .ladda-spinner,\n .ladda-label {\n transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;\n }\n &[data-style='zoom-in'],\n &[data-style='zoom-in'] .ladda-spinner,\n &[data-style='zoom-in'] .ladda-label,\n &[data-style='zoom-out'],\n &[data-style='zoom-out'] .ladda-spinner,\n &[data-style='zoom-out'] .ladda-label {\n transition: 0.3s ease all !important;\n }\n &[data-style='expand-right'] .ladda-spinner {\n right: -6px;\n }\n &[data-style='expand-right'][data-size='s'] .ladda-spinner,\n &[data-style='expand-right'][data-size='xs'] .ladda-spinner {\n right: -12px;\n }\n &[data-style='expand-right'][data-loading] {\n padding-right: 56px;\n }\n &[data-style='expand-right'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-right'][data-loading][data-size='s'],\n &[data-style='expand-right'][data-loading][data-size='xs'] {\n padding-right: 40px;\n }\n &[data-style='expand-left'] .ladda-spinner {\n left: 26px;\n }\n &[data-style='expand-left'][data-size='s'] .ladda-spinner,\n &[data-style='expand-left'][data-size='xs'] .ladda-spinner {\n left: 4px;\n }\n &[data-style='expand-left'][data-loading] {\n padding-left: 56px;\n }\n &[data-style='expand-left'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-left'][data-loading][data-size='s'],\n &[data-style='expand-left'][data-loading][data-size='xs'] {\n padding-left: 40px;\n }\n &[data-style='expand-up'] {\n overflow: hidden;\n }\n &[data-style='expand-up'] .ladda-spinner {\n top: -32px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-up'][data-loading] {\n padding-top: 54px;\n }\n &[data-style='expand-up'][data-loading] .ladda-spinner {\n opacity: 1;\n top: 26px;\n margin-top: 0;\n }\n &[data-style='expand-up'][data-loading][data-size='s'],\n &[data-style='expand-up'][data-loading][data-size='xs'] {\n padding-top: 32px;\n }\n &[data-style='expand-up'][data-loading][data-size='s'] .ladda-spinner,\n &[data-style='expand-up'][data-loading][data-size='xs'] .ladda-spinner {\n top: 4px;\n }\n &[data-style='expand-down'] {\n overflow: hidden;\n }\n &[data-style='expand-down'] .ladda-spinner {\n top: 62px;\n left: 50%;\n margin-left: 0;\n }\n &[data-style='expand-down'][data-size='s'] .ladda-spinner,\n &[data-style='expand-down'][data-size='xs'] .ladda-spinner {\n top: 40px;\n }\n &[data-style='expand-down'][data-loading] {\n padding-bottom: 54px;\n }\n &[data-style='expand-down'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='expand-down'][data-loading][data-size='s'],\n &[data-style='expand-down'][data-loading][data-size='xs'] {\n padding-bottom: 32px;\n }\n &[data-style='slide-left'] {\n overflow: hidden;\n }\n &[data-style='slide-left'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-left'] .ladda-spinner {\n left: 100%;\n margin-left: 0;\n }\n &[data-style='slide-left'][data-loading] .ladda-label {\n opacity: 0;\n left: -100%;\n }\n &[data-style='slide-left'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-right'] {\n overflow: hidden;\n }\n &[data-style='slide-right'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-right'] .ladda-spinner {\n right: 100%;\n margin-left: 0;\n left: 16px;\n }\n [dir='rtl'] &[data-style='slide-right'] .ladda-spinner {\n right: auto;\n }\n &[data-style='slide-right'][data-loading] .ladda-label {\n opacity: 0;\n left: 100%;\n }\n &[data-style='slide-right'][data-loading] .ladda-spinner {\n opacity: 1;\n left: 50%;\n }\n &[data-style='slide-up'] {\n overflow: hidden;\n }\n &[data-style='slide-up'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-up'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: 1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-label {\n opacity: 0;\n top: -1em;\n }\n &[data-style='slide-up'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='slide-down'] {\n overflow: hidden;\n }\n &[data-style='slide-down'] .ladda-label {\n position: relative;\n }\n &[data-style='slide-down'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n margin-top: -2em;\n }\n &[data-style='slide-down'][data-loading] .ladda-label {\n opacity: 0;\n top: 1em;\n }\n &[data-style='slide-down'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-top: 0;\n }\n &[data-style='zoom-out'] {\n overflow: hidden;\n }\n &[data-style='zoom-out'] .ladda-spinner {\n left: 50%;\n margin-left: 32px;\n transform: scale(2.5);\n }\n &[data-style='zoom-out'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-out'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(0.5);\n }\n &[data-style='zoom-out'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='zoom-in'] {\n overflow: hidden;\n }\n &[data-style='zoom-in'] .ladda-spinner {\n left: 50%;\n margin-left: -16px;\n transform: scale(0.2);\n }\n &[data-style='zoom-in'] .ladda-label {\n position: relative;\n display: inline-block;\n }\n &[data-style='zoom-in'][data-loading] .ladda-label {\n opacity: 0;\n transform: scale(2.2);\n }\n &[data-style='zoom-in'][data-loading] .ladda-spinner {\n opacity: 1;\n margin-left: 0;\n transform: none;\n }\n &[data-style='contract'] {\n overflow: hidden;\n width: 100px;\n }\n &[data-style='contract'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract'][data-loading] {\n border-radius: 50%;\n width: 52px;\n }\n &[data-style='contract'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n &[data-style='contract-overlay'] {\n overflow: hidden;\n width: 100px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0);\n }\n &[data-style='contract-overlay'] .ladda-spinner {\n left: 50%;\n margin-left: 0;\n }\n &[data-style='contract-overlay'][data-loading] {\n border-radius: 50%;\n width: 52px;\n box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.8);\n }\n &[data-style='contract-overlay'][data-loading] .ladda-label {\n opacity: 0;\n }\n &[data-style='contract-overlay'][data-loading] .ladda-spinner {\n opacity: 1;\n }\n [dir='rtl'] .ladda-spinner > div {\n left: 25% !important;\n }\n"])), function (props) {
|
|
456
456
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
457
457
|
return ((_a = props.theme.buttons) === null || _a === void 0 ? void 0 : _a.style) === 'bootstrap' && "\n border-radius: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n text-transform: none;\n -webkit-appearance: button;\n \n &:not(:disabled),\n &[type='button']:not(:disabled),\n &[type='reset']:not(:disabled),\n &[type='submit']:not(:disabled) {\n cursor: pointer;\n }\n \n &:focus:not(:focus-visible) {\n outline: 0;\n }\n \n --bs-btn-padding-x: 0.75rem;\n --bs-btn-padding-y: 0.375rem;\n --bs-btn-font-family: ;\n --bs-btn-font-size: 1rem;\n --bs-btn-font-weight: 400;\n --bs-btn-line-height: 1.5;\n --bs-btn-color: var(--bs-body-color);\n --bs-btn-bg: transparent;\n --bs-btn-border-width: var(--bs-border-width);\n --bs-btn-border-color: transparent;\n --bs-btn-border-radius: var(--bs-border-radius);\n --bs-btn-hover-border-color: transparent;\n --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),\n 0 1px 1px rgba(0, 0, 0, 0.075);\n --bs-btn-disabled-opacity: 0.65;\n --bs-btn-focus-box-shadow: 0 0 0 0.25rem\n rgba(var(--bs-btn-focus-shadow-rgb), 0.5);\n display: inline-block;\n padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);\n font-family: var(--bs-btn-font-family);\n font-size: var(--bs-btn-font-size);\n font-weight: var(--bs-btn-font-weight);\n line-height: var(--bs-btn-line-height);\n color: var(--bs-btn-color);\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);\n border-radius: var(--bs-btn-border-radius);\n background-color: var(--bs-btn-bg);\n //transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n // border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n \n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n \n &:hover {\n filter: brightness(1.15);\n }\n \n &:focus-visible {\n color: var(--bs-btn-color);\n background-color: var(--bs-btn-bg);\n border-color: var(--bs-btn-border-color);\n outline: 0;\n box-shadow: var(--bs-btn-focus-box-shadow);\n }\n \n &:disabled,\n &.disabled,\n fieldset:disabled & {\n color: var(--bs-btn-disabled-color);\n pointer-events: none;\n background-color: var(--bs-btn-disabled-bg);\n border-color: var(--bs-btn-disabled-border-color);\n opacity: var(--bs-btn-disabled-opacity);\n }\n \n --bs-btn-color: ".concat((_f = (_b = props.$textColor) !== null && _b !== void 0 ? _b : (_e = (_c = props.theme.buttons) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'primary']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : '#fff', ";\n --bs-btn-bg: ").concat((_l = (_g = props.$backgroundColor) !== null && _g !== void 0 ? _g : (_k = (_h = props.theme.buttons) === null || _h === void 0 ? void 0 : _h[(_j = props.$variant) !== null && _j !== void 0 ? _j : 'primary']) === null || _k === void 0 ? void 0 : _k.backgroundColor) !== null && _l !== void 0 ? _l : '#0d6efd', ";\n --bs-btn-border-color: var(--bs-btn-bg);\n --bs-btn-focus-shadow-rgb: 49, 132, 253;\n --bs-btn-active-color: #fff;\n --bs-btn-active-bg: #0a58ca;\n --bs-btn-active-border-color: #0a53be;\n --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n --bs-btn-disabled-color: ").concat((_q = (_m = props.$disabledTextColor) !== null && _m !== void 0 ? _m : (_p = (_o = props.theme.buttons) === null || _o === void 0 ? void 0 : _o.loading) === null || _p === void 0 ? void 0 : _p.textColor) !== null && _q !== void 0 ? _q : '#fff', ";\n --bs-btn-disabled-bg: ").concat((_u = (_r = props.$disabledBackgroundColor) !== null && _r !== void 0 ? _r : (_t = (_s = props.theme.buttons) === null || _s === void 0 ? void 0 : _s.loading) === null || _t === void 0 ? void 0 : _t.backgroundColor) !== null && _u !== void 0 ? _u : 'gray', ";\n --bs-btn-disabled-border-color: ").concat((_v = props.$disabledBackgroundColor) !== null && _v !== void 0 ? _v : '#0d6efd', ";\n \n --bs-btn-padding-y: 14px;\n --bs-btn-padding-x: 1rem;\n --bs-btn-font-size: 18px;\n --bs-btn-border-radius: 4px;\n ");
|
|
458
458
|
});
|
|
459
|
-
var templateObject_1$
|
|
459
|
+
var templateObject_1$V;
|
|
460
460
|
|
|
461
|
-
var ButtonsRow$2 = styled.div(templateObject_1$
|
|
462
|
-
var templateObject_1$
|
|
461
|
+
var ButtonsRow$2 = styled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"], ["\n display: flex;\n gap: 0 15px;\n justify-content: center;\n text-align: left;\n"])));
|
|
462
|
+
var templateObject_1$U;
|
|
463
463
|
|
|
464
|
-
var GuidanceMessageContainerDiv = styled.div(templateObject_1$
|
|
464
|
+
var GuidanceMessageContainerDiv = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"], ["\n position: absolute;\n top: calc(", ");\n ", "\n font-weight: bold;\n width: 100%;\n display: flex;\n padding: 0 10%;\n box-sizing: border-box;\n"])), function (_a) {
|
|
465
465
|
var $top = _a.$top;
|
|
466
466
|
return $top !== null && $top !== void 0 ? $top : '10%';
|
|
467
467
|
}, function (_a) {
|
|
@@ -474,38 +474,38 @@ var GuidanceMessageContainer = function GuidanceMessageContainer(props) {
|
|
|
474
474
|
if (!portalLocation) return element;
|
|
475
475
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
476
476
|
};
|
|
477
|
-
var GuidanceMessage = styled.div(templateObject_2$
|
|
477
|
+
var GuidanceMessage = styled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n margin-left: auto;\n margin-right: auto;\n background: ", ";\n color: ", ";\n border-radius: 8px;\n z-index: 10001;\n padding: 16px 24px;\n font-size: 18px;\n font-weight: bold;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])), function (props) {
|
|
478
478
|
var _a, _b, _c, _d, _e, _f;
|
|
479
479
|
return (_f = (_a = props.$background) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : 'white';
|
|
480
480
|
}, function (props) {
|
|
481
481
|
var _a, _b, _c, _d, _e, _f;
|
|
482
482
|
return (_f = (_a = props.$textColor) !== null && _a !== void 0 ? _a : (_e = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.guidanceMessages) === null || _c === void 0 ? void 0 : _c[(_d = props.$variant) !== null && _d !== void 0 ? _d : 'default']) === null || _e === void 0 ? void 0 : _e.textColor) !== null && _f !== void 0 ? _f : 'black';
|
|
483
483
|
});
|
|
484
|
-
var templateObject_1$
|
|
484
|
+
var templateObject_1$T, templateObject_2$O;
|
|
485
485
|
|
|
486
|
-
var wavesAnimation = keyframes(templateObject_1$
|
|
487
|
-
var progressBarAnimation = keyframes(templateObject_2$
|
|
488
|
-
var dualRingSpinnerAnimation = keyframes(templateObject_3$
|
|
489
|
-
var progressBorderAnimation = keyframes(templateObject_4$
|
|
490
|
-
var templateObject_1$
|
|
486
|
+
var wavesAnimation = keyframes(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n transform: scale3d(1, 1, 1);\n }\n 80% {\n opacity: 1;\n }\n 100% {\n transform: scale3d(2, 2, 1);\n opacity: 0;\n }\n"])));
|
|
487
|
+
var progressBarAnimation = keyframes(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"], ["\n 0% {\n width: 0;\n }\n 100% {\n width: 100%;\n }\n"])));
|
|
488
|
+
var dualRingSpinnerAnimation = keyframes(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
|
|
489
|
+
var progressBorderAnimation = keyframes(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n to {\n stroke-dashoffset: 0;\n }\n"], ["\n to {\n stroke-dashoffset: 0;\n }\n"])));
|
|
490
|
+
var templateObject_1$S, templateObject_2$N, templateObject_3$z, templateObject_4$t;
|
|
491
491
|
|
|
492
|
-
var OverlayContainer = styled.div(templateObject_1$
|
|
492
|
+
var OverlayContainer = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: column;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n background: ", ";\n ", "\n\n z-index: 10000;\n"])), function (props) {
|
|
493
493
|
return props.theme.background ? "".concat(props.theme.background) : "white";
|
|
494
494
|
}, function (props) {
|
|
495
495
|
return props.theme.textColor ? "color: ".concat(props.theme.textColor, ";") : "";
|
|
496
496
|
});
|
|
497
|
-
var OverlayInner$2 = styled.div(templateObject_2$
|
|
497
|
+
var OverlayInner$2 = styled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n width: 100%;\n height: 100%;\n ", "\n"])), function (props) {
|
|
498
498
|
var _a;
|
|
499
499
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
500
500
|
}, function (props) {
|
|
501
501
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
502
502
|
});
|
|
503
|
-
var OverlayImageContainer = styled.div(templateObject_3$
|
|
504
|
-
var OverlayImageRow = styled.div(templateObject_4$
|
|
505
|
-
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$
|
|
506
|
-
var ButtonsColumn = styled.div(templateObject_6$
|
|
507
|
-
var WideButton = styled(LoaderButton)(templateObject_7$
|
|
508
|
-
var WideBorderButton = styled(WideButton)(templateObject_8$
|
|
503
|
+
var OverlayImageContainer = styled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"], ["\n position: relative;\n display: flex;\n flex-grow: 1;\n padding-bottom: 25px;\n overflow: hidden;\n\n & > img,\n & > svg {\n margin: 0 auto;\n width: max-content;\n max-width: 100%;\n max-height: 100%;\n aspect-ratio: initial;\n object-fit: contain;\n display: block;\n }\n"])));
|
|
504
|
+
var OverlayImageRow = styled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"], ["\n display: flex;\n margin: auto;\n\n & > div {\n max-height: calc(100% - 320px);\n\n & > img {\n width: 100%;\n max-height: 100%;\n height: auto;\n object-fit: contain;\n }\n }\n"])));
|
|
505
|
+
var GrayOverlayContainer = styled(OverlayContainer)(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n background: #f7f6fb;\n"], ["\n background: #f7f6fb;\n"])));
|
|
506
|
+
var ButtonsColumn = styled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 15px 0;\n justify-content: center;\n margin-top: 24px;\n"])));
|
|
507
|
+
var WideButton = styled(LoaderButton)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n width: 100%;\n border-radius: 30px;\n"], ["\n width: 100%;\n border-radius: 30px;\n"])));
|
|
508
|
+
var WideBorderButton = styled(WideButton)(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n background: ", ";\n border: 1px solid\n ", ";\n box-sizing: border-box;\n"])), function (props) {
|
|
509
509
|
var _a, _b;
|
|
510
510
|
return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.textColor) !== null && _b !== void 0 ? _b : 'black';
|
|
511
511
|
}, function (props) {
|
|
@@ -515,34 +515,34 @@ var WideBorderButton = styled(WideButton)(templateObject_8$6 || (templateObject_
|
|
|
515
515
|
var _a, _b;
|
|
516
516
|
return (_b = (_a = props.colors) === null || _a === void 0 ? void 0 : _a.borderColor) !== null && _b !== void 0 ? _b : 'var(--idm-color-secondary-500)';
|
|
517
517
|
});
|
|
518
|
-
var LoadingOverlayInner = styled(OverlayInner$2)(templateObject_9$
|
|
519
|
-
var LoadingOverlayHeader = styled.div(templateObject_10$
|
|
518
|
+
var LoadingOverlayInner = styled(OverlayInner$2)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 0;\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 0;\n"])));
|
|
519
|
+
var LoadingOverlayHeader = styled.div(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"], ["\n text-align: ", ";\n display: flex;\n flex-direction: column;\n flex-wrap: nowrap;\n ", "\n padding-bottom: 0;\n"])), function (props) {
|
|
520
520
|
var _a;
|
|
521
521
|
return (_a = props.theme.textAlign) !== null && _a !== void 0 ? _a : 'center';
|
|
522
522
|
}, function (props) {
|
|
523
523
|
return props.theme.padding ? "box-sizing: border-box; padding: ".concat(props.theme.padding, ";") : "";
|
|
524
524
|
});
|
|
525
|
-
var LoadingOverlayGuidanceMessage = styled(GuidanceMessage)(templateObject_11$
|
|
526
|
-
var LoadingOverlayImageContainer = styled(OverlayImageContainer)(templateObject_12$
|
|
525
|
+
var LoadingOverlayGuidanceMessage = styled(GuidanceMessage)(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n"], ["\n padding: 16px 24px;\n margin-top: 16px;\n font-size: 18px;\n font-weight: bold;\n"])));
|
|
526
|
+
var LoadingOverlayImageContainer = styled(OverlayImageContainer)(templateObject_12$5 || (templateObject_12$5 = __makeTemplateObject(["\n padding: 0;\n max-height: 100%;\n pointer-events: none;\n"], ["\n padding: 0;\n max-height: 100%;\n pointer-events: none;\n"])));
|
|
527
527
|
var LoadingOverlayProgressBarBackground = styled.div.attrs({
|
|
528
528
|
className: 'loading-overlay-progress-bar-background'
|
|
529
|
-
})(templateObject_13$
|
|
529
|
+
})(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
530
530
|
var LoadingOverlayProgressBar = styled.span.attrs({
|
|
531
531
|
className: 'loading-overlay-progress-bar'
|
|
532
|
-
})(templateObject_14$
|
|
532
|
+
})(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n display: block;\n width: ", "%;\n height: 100%;\n left: 0;\n top: 0;\n position: absolute;\n"], ["\n display: block;\n width: ", "%;\n height: 100%;\n left: 0;\n top: 0;\n position: absolute;\n"])), function (props) {
|
|
533
533
|
return props.$progress;
|
|
534
534
|
});
|
|
535
535
|
var LoadingOverlayProgressIndicator = styled.span.attrs({
|
|
536
536
|
className: 'loading-overlay-progress-indicator'
|
|
537
|
-
})(templateObject_15$
|
|
538
|
-
var LoadingOverlayButtonsRow = styled(ButtonsRow$2)(templateObject_16$
|
|
539
|
-
var LoadingOverlayLoadingListContainer = styled.div(templateObject_17$
|
|
540
|
-
var LoadingOverlayLoadingList = styled.ul(templateObject_18$
|
|
541
|
-
var LoadingOverlayLoadingListItem = styled.li(templateObject_19$
|
|
542
|
-
var LoadingOverlayProgressContainer = styled.div(templateObject_20$
|
|
543
|
-
var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21$
|
|
544
|
-
var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22$
|
|
545
|
-
var templateObject_1$
|
|
537
|
+
})(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n display: block;\n height: 100%;\n animation: ", " 3s ease-in-out;\n animation-fill-mode: both;\n"], ["\n display: block;\n height: 100%;\n animation: ", " 3s ease-in-out;\n animation-fill-mode: both;\n"])), progressBarAnimation);
|
|
538
|
+
var LoadingOverlayButtonsRow = styled(ButtonsRow$2)(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n min-height: 100px;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 15px 25px;\n min-height: 100px;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n"])));
|
|
539
|
+
var LoadingOverlayLoadingListContainer = styled.div(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: flex;\n position: relative;\n z-index: 2;\n"], ["\n display: flex;\n position: relative;\n z-index: 2;\n"])));
|
|
540
|
+
var LoadingOverlayLoadingList = styled.ul(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"], ["\n display: block;\n margin: auto;\n list-style: none;\n padding: 0;\n"])));
|
|
541
|
+
var LoadingOverlayLoadingListItem = styled.li(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n"], ["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 2px 1.25rem 2px 0;\n line-height: 1rem;\n"])));
|
|
542
|
+
var LoadingOverlayProgressContainer = styled.div(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
543
|
+
var LoadingOverlayCustomLoadingGraphic = styled.img(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n transform-style: preserve-3d;\n"], ["\n transform-style: preserve-3d;\n"])));
|
|
544
|
+
var LoadingOverlayContinueButtonContainer = styled.div(templateObject_22$2 || (templateObject_22$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
545
|
+
var templateObject_1$R, templateObject_2$M, templateObject_3$y, templateObject_4$s, templateObject_5$l, templateObject_6$d, templateObject_7$9, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$5, templateObject_12$5, templateObject_13$5, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2, templateObject_22$2;
|
|
546
546
|
|
|
547
547
|
var GeolocationAccessDeniedOverlay = function GeolocationAccessDeniedOverlay(_a) {
|
|
548
548
|
var accessBlockedImageUrl = _a.accessBlockedImageUrl;
|
|
@@ -768,20 +768,20 @@ var NetworkErrorContent = function NetworkErrorContent(_a) {
|
|
|
768
768
|
onClick: onRetry
|
|
769
769
|
}, retryText))));
|
|
770
770
|
};
|
|
771
|
-
var ErrorContainer = styled.div(templateObject_1$
|
|
772
|
-
var ErrorIcon = styled.div(templateObject_2$
|
|
773
|
-
var Heading$b = styled.h3(templateObject_3$
|
|
774
|
-
var Message$1 = styled.p(templateObject_4$
|
|
775
|
-
var StatusBadge$1 = styled.div(templateObject_5$
|
|
776
|
-
var StatusLabel = styled.span(templateObject_6$
|
|
777
|
-
var StatusValue = styled.span(templateObject_7$
|
|
778
|
-
var DetailsSection = styled.div(templateObject_8$
|
|
779
|
-
var DetailsHeader = styled.div(templateObject_9$
|
|
780
|
-
var DetailsLabel = styled.span(templateObject_10$
|
|
781
|
-
var CopyButton = styled.button(templateObject_11$
|
|
782
|
-
var CodeBlock = styled.pre(templateObject_12$
|
|
783
|
-
var RetryContainer = styled.div(templateObject_13$
|
|
784
|
-
var templateObject_1$
|
|
771
|
+
var ErrorContainer = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 600px;\n width: 100%;\n padding: 24px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 600px;\n width: 100%;\n padding: 24px;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n"])));
|
|
772
|
+
var ErrorIcon = styled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fee2e2;\n color: #dc2626;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 16px;\n"], ["\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background-color: #fee2e2;\n color: #dc2626;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 16px;\n"])));
|
|
773
|
+
var Heading$b = styled.h3(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n margin: 0 0 16px 0;\n font-size: 1.25rem;\n font-weight: 600;\n color: #1f2937;\n text-align: center;\n"], ["\n margin: 0 0 16px 0;\n font-size: 1.25rem;\n font-weight: 600;\n color: #1f2937;\n text-align: center;\n"])));
|
|
774
|
+
var Message$1 = styled.p(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n margin: 0 0 16px 0;\n color: #6b7280;\n text-align: center;\n line-height: 1.5;\n"], ["\n margin: 0 0 16px 0;\n color: #6b7280;\n text-align: center;\n line-height: 1.5;\n"])));
|
|
775
|
+
var StatusBadge$1 = styled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 6px;\n padding: 6px 12px;\n margin-bottom: 20px;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 6px;\n padding: 6px 12px;\n margin-bottom: 20px;\n"])));
|
|
776
|
+
var StatusLabel = styled.span(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 500;\n color: #991b1b;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n"], ["\n font-size: 0.75rem;\n font-weight: 500;\n color: #991b1b;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n"])));
|
|
777
|
+
var StatusValue = styled.span(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 0.875rem;\n font-weight: 600;\n color: #dc2626;\n"], ["\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 0.875rem;\n font-weight: 600;\n color: #dc2626;\n"])));
|
|
778
|
+
var DetailsSection = styled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n width: 100%;\n margin-bottom: 16px;\n"], ["\n width: 100%;\n margin-bottom: 16px;\n"])));
|
|
779
|
+
var DetailsHeader = styled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n"])));
|
|
780
|
+
var DetailsLabel = styled.span(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 500;\n color: #6b7280;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n"], ["\n font-size: 0.75rem;\n font-weight: 500;\n color: #6b7280;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n"])));
|
|
781
|
+
var CopyButton = styled.button(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n background-color: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n padding: 4px 10px;\n font-size: 0.75rem;\n font-weight: 500;\n color: #374151;\n cursor: pointer;\n transition: all 0.15s ease;\n\n &:hover {\n background-color: #e5e7eb;\n border-color: #9ca3af;\n }\n\n &:active {\n background-color: #d1d5db;\n }\n"], ["\n background-color: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n padding: 4px 10px;\n font-size: 0.75rem;\n font-weight: 500;\n color: #374151;\n cursor: pointer;\n transition: all 0.15s ease;\n\n &:hover {\n background-color: #e5e7eb;\n border-color: #9ca3af;\n }\n\n &:active {\n background-color: #d1d5db;\n }\n"])));
|
|
782
|
+
var CodeBlock = styled.pre(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n background-color: #1f2937;\n border-radius: 8px;\n padding: 16px;\n margin: 0;\n overflow-x: auto;\n max-height: 300px;\n overflow-y: auto;\n text-align: left;\n\n code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 0.8125rem;\n line-height: 1.6;\n color: #e5e7eb;\n white-space: pre-wrap;\n word-break: break-word;\n display: block;\n text-align: left;\n }\n"], ["\n background-color: #1f2937;\n border-radius: 8px;\n padding: 16px;\n margin: 0;\n overflow-x: auto;\n max-height: 300px;\n overflow-y: auto;\n text-align: left;\n\n code {\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 0.8125rem;\n line-height: 1.6;\n color: #e5e7eb;\n white-space: pre-wrap;\n word-break: break-word;\n display: block;\n text-align: left;\n }\n"])));
|
|
783
|
+
var RetryContainer = styled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin-top: 24px;\n"], ["\n margin-top: 24px;\n"])));
|
|
784
|
+
var templateObject_1$Q, templateObject_2$L, templateObject_3$x, templateObject_4$r, templateObject_5$k, templateObject_6$c, templateObject_7$8, templateObject_8$7, templateObject_9$5, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4;
|
|
785
785
|
|
|
786
786
|
var SessionIdMissingOverlay = function SessionIdMissingOverlay() {
|
|
787
787
|
return /*#__PURE__*/React__default.createElement(OverlayContainer, null, /*#__PURE__*/React__default.createElement(OverlayInner$2, {
|
|
@@ -3247,6 +3247,11 @@ function processDocumentDetectorPrediction(prediction, thresholds, boundaries) {
|
|
|
3247
3247
|
};
|
|
3248
3248
|
});
|
|
3249
3249
|
}), function (obj) {
|
|
3250
|
+
// Skip boundary filtering for PDF417 - barcodes can be anywhere in frame,
|
|
3251
|
+
// especially during recapture when user zooms in on the barcode
|
|
3252
|
+
if (obj.label === 'PDF417') {
|
|
3253
|
+
return true;
|
|
3254
|
+
}
|
|
3250
3255
|
var _a = obj.box,
|
|
3251
3256
|
xMin = _a.xMin,
|
|
3252
3257
|
yMin = _a.yMin,
|
|
@@ -3408,8 +3413,8 @@ function getFrameDimensions(frame) {
|
|
|
3408
3413
|
return [frameWidth, frameHeight];
|
|
3409
3414
|
}
|
|
3410
3415
|
|
|
3411
|
-
var InvisibleCanvasContainer = styled.div(templateObject_1$
|
|
3412
|
-
var InvisibleCanvas = styled.canvas(templateObject_2$
|
|
3416
|
+
var InvisibleCanvasContainer = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n pointer-events: none;\n user-select: none;\n"])));
|
|
3417
|
+
var InvisibleCanvas = styled.canvas(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
3413
3418
|
function drawToCanvas(canvas, frame, width, height) {
|
|
3414
3419
|
if (!canvas) return;
|
|
3415
3420
|
var ctx = canvas.getContext('2d');
|
|
@@ -3429,7 +3434,7 @@ function clearCanvas(canvas) {
|
|
|
3429
3434
|
var _a;
|
|
3430
3435
|
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, canvas === null || canvas === void 0 ? void 0 : canvas.width, canvas === null || canvas === void 0 ? void 0 : canvas.height);
|
|
3431
3436
|
}
|
|
3432
|
-
var templateObject_1$
|
|
3437
|
+
var templateObject_1$P, templateObject_2$K;
|
|
3433
3438
|
|
|
3434
3439
|
function useFrameLoop(fn, options) {
|
|
3435
3440
|
if (options === void 0) {
|
|
@@ -4786,8 +4791,13 @@ var createCameraStore = function createCameraStore(config) {
|
|
|
4786
4791
|
if (!selectedVideoStreamId) return;
|
|
4787
4792
|
var srcObject = e.currentTarget.srcObject;
|
|
4788
4793
|
if (srcObject.id === selectedVideoStreamId) {
|
|
4794
|
+
var _a = e.currentTarget,
|
|
4795
|
+
videoWidth = _a.videoWidth,
|
|
4796
|
+
videoHeight = _a.videoHeight;
|
|
4789
4797
|
set({
|
|
4790
|
-
videoLoaded: true
|
|
4798
|
+
videoLoaded: true,
|
|
4799
|
+
videoWidth: videoWidth,
|
|
4800
|
+
videoHeight: videoHeight
|
|
4791
4801
|
});
|
|
4792
4802
|
} else {
|
|
4793
4803
|
set({
|
|
@@ -5100,26 +5110,25 @@ var createCameraStore = function createCameraStore(config) {
|
|
|
5100
5110
|
};
|
|
5101
5111
|
var CameraStoreContext = /*#__PURE__*/createContext(undefined);
|
|
5102
5112
|
function CameraStoreProvider(_a) {
|
|
5103
|
-
var _b;
|
|
5104
5113
|
var children = _a.children,
|
|
5105
|
-
|
|
5106
|
-
requestAccessAutomatically =
|
|
5107
|
-
|
|
5108
|
-
preferIphoneContinuityCamera =
|
|
5109
|
-
|
|
5110
|
-
preferFrontFacingCamera =
|
|
5111
|
-
|
|
5112
|
-
maxVideoWidth =
|
|
5114
|
+
_b = _a.requestAccessAutomatically,
|
|
5115
|
+
requestAccessAutomatically = _b === void 0 ? true : _b,
|
|
5116
|
+
_c = _a.preferIphoneContinuityCamera,
|
|
5117
|
+
preferIphoneContinuityCamera = _c === void 0 ? true : _c,
|
|
5118
|
+
_d = _a.preferFrontFacingCamera,
|
|
5119
|
+
preferFrontFacingCamera = _d === void 0 ? false : _d,
|
|
5120
|
+
_e = _a.maxVideoWidth,
|
|
5121
|
+
maxVideoWidth = _e === void 0 ? 1920 : _e,
|
|
5113
5122
|
maxFps = _a.maxFps,
|
|
5114
5123
|
onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
5115
5124
|
onCameraTamperingDetected = _a.onCameraTamperingDetected,
|
|
5116
5125
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
5117
|
-
|
|
5118
|
-
requireMicrophoneAccess =
|
|
5119
|
-
|
|
5120
|
-
classNames =
|
|
5121
|
-
|
|
5122
|
-
verbiage =
|
|
5126
|
+
_f = _a.requireMicrophoneAccess,
|
|
5127
|
+
requireMicrophoneAccess = _f === void 0 ? false : _f,
|
|
5128
|
+
_g = _a.classNames,
|
|
5129
|
+
classNames = _g === void 0 ? {} : _g,
|
|
5130
|
+
_h = _a.verbiage,
|
|
5131
|
+
verbiage = _h === void 0 ? {} : _h;
|
|
5123
5132
|
var videoRef = useRef(null);
|
|
5124
5133
|
var store = useRef(undefined);
|
|
5125
5134
|
store.current || (store.current = createCameraStore({
|
|
@@ -5133,16 +5142,6 @@ function CameraStoreProvider(_a) {
|
|
|
5133
5142
|
onMicrophoneAccessDenied: onMicrophoneAccessDenied,
|
|
5134
5143
|
requireMicrophoneAccess: requireMicrophoneAccess
|
|
5135
5144
|
}));
|
|
5136
|
-
var _k = (_b = videoRef.current) !== null && _b !== void 0 ? _b : {},
|
|
5137
|
-
videoWidth = _k.videoWidth,
|
|
5138
|
-
videoHeight = _k.videoHeight;
|
|
5139
|
-
useEffect(function () {
|
|
5140
|
-
var _a;
|
|
5141
|
-
(_a = store.current) === null || _a === void 0 ? void 0 : _a.setState({
|
|
5142
|
-
videoWidth: videoWidth,
|
|
5143
|
-
videoHeight: videoHeight
|
|
5144
|
-
});
|
|
5145
|
-
}, [videoWidth, videoHeight]);
|
|
5146
5145
|
useEffect(function () {
|
|
5147
5146
|
var _a, _b, _c;
|
|
5148
5147
|
var state = (_a = store.current) === null || _a === void 0 ? void 0 : _a.getState();
|
|
@@ -5231,14 +5230,14 @@ function CameraTamperSeal(_a) {
|
|
|
5231
5230
|
className: classNames.message
|
|
5232
5231
|
}, messageText)));
|
|
5233
5232
|
}
|
|
5234
|
-
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$
|
|
5235
|
-
var StyledOverlayHeading = styled.h3(templateObject_2$
|
|
5233
|
+
var StyledOverlayInner$4 = styled(OverlayInner$2)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
5234
|
+
var StyledOverlayHeading = styled.h3(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
5236
5235
|
function useCameraStore(selector) {
|
|
5237
5236
|
var store = useContext(CameraStoreContext);
|
|
5238
5237
|
if (!store) throw new Error('useCameraStore cannot be used without Provider');
|
|
5239
5238
|
return useStore(store, selector);
|
|
5240
5239
|
}
|
|
5241
|
-
var templateObject_1$
|
|
5240
|
+
var templateObject_1$O, templateObject_2$J;
|
|
5242
5241
|
|
|
5243
5242
|
var DocumentDetectionModelContext = /*#__PURE__*/createContext({
|
|
5244
5243
|
startDocumentDetection: function startDocumentDetection() {
|
|
@@ -6077,9 +6076,9 @@ var onMobile = isMobile();
|
|
|
6077
6076
|
function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocumentCanvas, bestBarcodeCanvas, currentBestBarcodeScore, documentDetectionThresholds, makeBarcodeReadabilityPrediction, barcodeReadabilityThreshold) {
|
|
6078
6077
|
return __awaiter(this, void 0, void 0, function () {
|
|
6079
6078
|
var pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, newBestBarcodeScore, newBestBarcodeDetails, documentCroppedPrediction, processedCroppedPrediction, pdf417Prediction;
|
|
6080
|
-
var _a;
|
|
6081
|
-
return __generator(this, function (
|
|
6082
|
-
switch (
|
|
6079
|
+
var _a, _b;
|
|
6080
|
+
return __generator(this, function (_c) {
|
|
6081
|
+
switch (_c.label) {
|
|
6083
6082
|
case 0:
|
|
6084
6083
|
pdf417PredictionTime = 0;
|
|
6085
6084
|
pdf417PredictionScore = 0;
|
|
@@ -6090,7 +6089,8 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
6090
6089
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
6091
6090
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
6092
6091
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
6093
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
6092
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
6093
|
+
processedBarcodeBoundingBox: undefined
|
|
6094
6094
|
}];
|
|
6095
6095
|
}
|
|
6096
6096
|
/**
|
|
@@ -6100,7 +6100,7 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
6100
6100
|
cropToDetectedObjectBox(lastPredictionCanvas, prediction.bestDocument.box, croppedDocumentCanvas);
|
|
6101
6101
|
return [4 /*yield*/, makeDocumentDetectorPrediction(croppedDocumentCanvas)];
|
|
6102
6102
|
case 1:
|
|
6103
|
-
documentCroppedPrediction =
|
|
6103
|
+
documentCroppedPrediction = _c.sent();
|
|
6104
6104
|
if (!documentCroppedPrediction) {
|
|
6105
6105
|
// error occurred during prediction (error logged by callee)
|
|
6106
6106
|
return [2 /*return*/, {
|
|
@@ -6108,7 +6108,8 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
6108
6108
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
6109
6109
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
6110
6110
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
6111
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
6111
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
6112
|
+
processedBarcodeBoundingBox: undefined
|
|
6112
6113
|
}];
|
|
6113
6114
|
}
|
|
6114
6115
|
processedCroppedPrediction = processDocumentDetectorPrediction(documentCroppedPrediction, documentDetectionThresholds);
|
|
@@ -6138,7 +6139,9 @@ function analyzeBarcodeReadability(prediction, lastPredictionCanvas, croppedDocu
|
|
|
6138
6139
|
pdf417PredictionScore: pdf417PredictionScore,
|
|
6139
6140
|
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
6140
6141
|
newBestBarcodeScore: newBestBarcodeScore,
|
|
6141
|
-
newBestBarcodeDetails: newBestBarcodeDetails
|
|
6142
|
+
newBestBarcodeDetails: newBestBarcodeDetails,
|
|
6143
|
+
// Return processed barcode bounding box for recapture tracking (valid even when not a new best)
|
|
6144
|
+
processedBarcodeBoundingBox: (_b = processedCroppedPrediction === null || processedCroppedPrediction === void 0 ? void 0 : processedCroppedPrediction.bestPDF417) === null || _b === void 0 ? void 0 : _b.box
|
|
6142
6145
|
}];
|
|
6143
6146
|
}
|
|
6144
6147
|
});
|
|
@@ -6229,6 +6232,18 @@ var IdCaptureModelsContext = /*#__PURE__*/createContext({
|
|
|
6229
6232
|
getBestBarcode: function getBestBarcode() {
|
|
6230
6233
|
return null;
|
|
6231
6234
|
},
|
|
6235
|
+
resetBestBarcode: function resetBestBarcode() {
|
|
6236
|
+
return null;
|
|
6237
|
+
},
|
|
6238
|
+
startBarcodeRecapturePhase: function startBarcodeRecapturePhase() {
|
|
6239
|
+
return null;
|
|
6240
|
+
},
|
|
6241
|
+
getInitialCaptureBestBarcode: function getInitialCaptureBestBarcode() {
|
|
6242
|
+
return null;
|
|
6243
|
+
},
|
|
6244
|
+
getRecaptureBestBarcode: function getRecaptureBestBarcode() {
|
|
6245
|
+
return null;
|
|
6246
|
+
},
|
|
6232
6247
|
requiredDocumentType: 'none',
|
|
6233
6248
|
setRequiredDocumentType: function setRequiredDocumentType() {
|
|
6234
6249
|
return null;
|
|
@@ -6288,6 +6303,14 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6288
6303
|
var bestBarcodeScore = useRef(0);
|
|
6289
6304
|
var stopDetection = useRef(0);
|
|
6290
6305
|
var analyzeBarcodeReadability = useBarcodeReadabilityAnalysis();
|
|
6306
|
+
// Barcode recapture tracking - separate canvases for initial and recapture sequences
|
|
6307
|
+
var initialCaptureBarcodeCanvas = useRef(null);
|
|
6308
|
+
var initialCaptureBarcodeDetails = useRef(null);
|
|
6309
|
+
var initialCaptureBarcodeScore = useRef(0);
|
|
6310
|
+
var recaptureBarcodeCanvas = useRef(null);
|
|
6311
|
+
var recaptureBarcodeDetails = useRef(null);
|
|
6312
|
+
var recaptureBarcodeScore = useRef(0);
|
|
6313
|
+
var isRecapturePhase = useRef(false);
|
|
6291
6314
|
var _h = useState('none'),
|
|
6292
6315
|
requiredDocumentType = _h[0],
|
|
6293
6316
|
setRequiredDocumentType = _h[1];
|
|
@@ -6312,10 +6335,10 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6312
6335
|
var _this = this;
|
|
6313
6336
|
onDocumentDetected(function (prediction) {
|
|
6314
6337
|
return __awaiter(_this, void 0, void 0, function () {
|
|
6315
|
-
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult;
|
|
6316
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
6317
|
-
return __generator(this, function (
|
|
6318
|
-
switch (
|
|
6338
|
+
var stopDetectionAtStart, focusPredictionTime, focusScore, focusThresholdMet, pdf417PredictionTime, pdf417PredictionScore, pdf417PredictionThresholdMet, isSinglePage, isRequiredDocumentType, isInRecapturePhase, shouldRunBarcodeAnalysisDuringRecapture, shouldRunBarcodeOnlyAnalysisDuringRecapture, focusPrediction, focusThresholdSet, focusThreshold, barcodeAnalysisResult, barcodeAnalysisResult, startTime, barcodeReadabilityResult;
|
|
6339
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
6340
|
+
return __generator(this, function (_m) {
|
|
6341
|
+
switch (_m.label) {
|
|
6319
6342
|
case 0:
|
|
6320
6343
|
if (!lastPredictionCanvas.current) return [2 /*return*/];
|
|
6321
6344
|
stopDetectionAtStart = stopDetection.current;
|
|
@@ -6329,21 +6352,28 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6329
6352
|
prediction.singlePageDetectionThresholdMet = false;
|
|
6330
6353
|
}
|
|
6331
6354
|
isRequiredDocumentType = requiredDocumentType === 'none' || prediction.detectedDocumentType === requiredDocumentType || ((_a = requiredDocumentType.includes) === null || _a === void 0 ? void 0 : _a.call(requiredDocumentType, prediction.detectedDocumentType)) || allowSinglePageIdCapture && isSinglePage && ((_b = requiredDocumentType.includes) === null || _b === void 0 ? void 0 : _b.call(requiredDocumentType, 'idCardFront'));
|
|
6332
|
-
|
|
6333
|
-
|
|
6355
|
+
isInRecapturePhase = isRecapturePhase.current;
|
|
6356
|
+
shouldRunBarcodeAnalysisDuringRecapture = isInRecapturePhase && isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.bestDocument && prediction.bestPDF417;
|
|
6357
|
+
shouldRunBarcodeOnlyAnalysisDuringRecapture = isInRecapturePhase && !prediction.bestDocument && ((_c = prediction.bestPDF417) === null || _c === void 0 ? void 0 : _c.box);
|
|
6358
|
+
// Debug logging for recapture conditions
|
|
6359
|
+
if (isInRecapturePhase && ((_d = prediction.bestPDF417) === null || _d === void 0 ? void 0 : _d.box)) {
|
|
6360
|
+
log("[IdCaptureModelsProvider] Recapture debug: isRecapture=".concat(isInRecapturePhase, ", bestDocument=").concat(!!prediction.bestDocument, ", bestPDF417=").concat(!!((_e = prediction.bestPDF417) === null || _e === void 0 ? void 0 : _e.box), ", shouldRunBarcodeOnly=").concat(shouldRunBarcodeOnlyAnalysisDuringRecapture, ", shouldRunRelaxed=").concat(shouldRunBarcodeAnalysisDuringRecapture));
|
|
6361
|
+
}
|
|
6362
|
+
if (!(isRequiredDocumentType && prediction.detectedDocumentType !== 'none' && prediction.detectionThresholdMet && prediction.documentInBounds && !prediction.documentTooClose && prediction.documentIsStable)) return [3 /*break*/, 3];
|
|
6363
|
+
focusPrediction = makeFocusPrediction(lastPredictionCanvas.current, (_f = prediction.bestDocument) === null || _f === void 0 ? void 0 : _f.box);
|
|
6334
6364
|
if (focusPrediction) {
|
|
6335
6365
|
focusScore = focusPrediction.score;
|
|
6336
6366
|
focusPredictionTime = focusPrediction.predictionTime;
|
|
6337
6367
|
}
|
|
6338
|
-
focusThresholdSet = (
|
|
6339
|
-
focusThreshold = (
|
|
6368
|
+
focusThresholdSet = (_g = thresholds.focus) === null || _g === void 0 ? void 0 : _g[prediction.detectedDocumentType];
|
|
6369
|
+
focusThreshold = (_h = onMobile ? focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.mobile : focusThresholdSet === null || focusThresholdSet === void 0 ? void 0 : focusThresholdSet.desktop) !== null && _h !== void 0 ? _h : 0;
|
|
6340
6370
|
focusThresholdMet = focusScore >= focusThreshold;
|
|
6341
6371
|
if (!(stopDetectionAtStart === stopDetection.current)) return [3 /*break*/, 2];
|
|
6342
6372
|
if (bestFocusScore.current <= focusScore) {
|
|
6343
6373
|
bestFocusScore.current = focusScore;
|
|
6344
6374
|
drawToCanvas(bestPredictionCanvas.current, lastPredictionCanvas.current);
|
|
6345
6375
|
bestFrameDetails.current = {
|
|
6346
|
-
boundingBox: (
|
|
6376
|
+
boundingBox: (_j = prediction.bestDocument) === null || _j === void 0 ? void 0 : _j.box,
|
|
6347
6377
|
documentType: prediction.detectedDocumentType,
|
|
6348
6378
|
detectionScore: prediction.detectionScore,
|
|
6349
6379
|
focusScore: focusScore
|
|
@@ -6352,7 +6382,7 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6352
6382
|
if (!(enableBarcodeReadabilityModel && prediction.bestDocument && prediction.bestPDF417 && croppedDocumentCanvas.current)) return [3 /*break*/, 2];
|
|
6353
6383
|
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
6354
6384
|
case 1:
|
|
6355
|
-
barcodeAnalysisResult =
|
|
6385
|
+
barcodeAnalysisResult = _m.sent();
|
|
6356
6386
|
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
6357
6387
|
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
6358
6388
|
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
@@ -6362,15 +6392,98 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6362
6392
|
if (barcodeAnalysisResult.newBestBarcodeDetails) {
|
|
6363
6393
|
bestBarcodeDetails.current = barcodeAnalysisResult.newBestBarcodeDetails;
|
|
6364
6394
|
}
|
|
6365
|
-
|
|
6395
|
+
// During recapture phase, also track best barcode separately for recapture sequence
|
|
6396
|
+
if (isRecapturePhase.current && recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6397
|
+
log("[IdCaptureModelsProvider] Recapture tracking: new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6398
|
+
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6399
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
6400
|
+
// is only set when score beats overall best, not just recapture best)
|
|
6401
|
+
recaptureBarcodeDetails.current = {
|
|
6402
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6403
|
+
score: pdf417PredictionScore
|
|
6404
|
+
};
|
|
6405
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
6406
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
6407
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
6408
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
6409
|
+
} else {
|
|
6410
|
+
log("[IdCaptureModelsProvider] Recapture tracking: could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
6411
|
+
}
|
|
6412
|
+
}
|
|
6413
|
+
_m.label = 2;
|
|
6366
6414
|
case 2:
|
|
6415
|
+
return [3 /*break*/, 7];
|
|
6416
|
+
case 3:
|
|
6417
|
+
if (!shouldRunBarcodeAnalysisDuringRecapture) return [3 /*break*/, 6];
|
|
6418
|
+
if (!(enableBarcodeReadabilityModel && croppedDocumentCanvas.current && stopDetectionAtStart === stopDetection.current)) return [3 /*break*/, 5];
|
|
6419
|
+
return [4 /*yield*/, analyzeBarcodeReadability(prediction, lastPredictionCanvas.current, croppedDocumentCanvas.current, bestBarcodeCanvas.current, bestBarcodeScore.current)];
|
|
6420
|
+
case 4:
|
|
6421
|
+
barcodeAnalysisResult = _m.sent();
|
|
6422
|
+
pdf417PredictionTime = barcodeAnalysisResult.pdf417PredictionTime;
|
|
6423
|
+
pdf417PredictionScore = barcodeAnalysisResult.pdf417PredictionScore;
|
|
6424
|
+
pdf417PredictionThresholdMet = barcodeAnalysisResult.pdf417PredictionThresholdMet;
|
|
6425
|
+
if (barcodeAnalysisResult.newBestBarcodeScore) {
|
|
6426
|
+
bestBarcodeScore.current = barcodeAnalysisResult.newBestBarcodeScore;
|
|
6427
|
+
}
|
|
6428
|
+
if (barcodeAnalysisResult.newBestBarcodeDetails) {
|
|
6429
|
+
bestBarcodeDetails.current = barcodeAnalysisResult.newBestBarcodeDetails;
|
|
6430
|
+
}
|
|
6431
|
+
// Track best barcode separately for recapture sequence
|
|
6432
|
+
if (recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6433
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6434
|
+
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6435
|
+
// Create details directly from current prediction (not newBestBarcodeDetails which
|
|
6436
|
+
// is only set when score beats overall best, not just recapture best)
|
|
6437
|
+
recaptureBarcodeDetails.current = {
|
|
6438
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6439
|
+
score: pdf417PredictionScore
|
|
6440
|
+
};
|
|
6441
|
+
// Crop barcode from croppedDocumentCanvas using the processed bounding box
|
|
6442
|
+
// (can't use bestBarcodeCanvas since it's only updated for overall best)
|
|
6443
|
+
if (croppedDocumentCanvas.current && barcodeAnalysisResult.processedBarcodeBoundingBox) {
|
|
6444
|
+
cropToDetectedObjectBox(croppedDocumentCanvas.current, barcodeAnalysisResult.processedBarcodeBoundingBox, recaptureBarcodeCanvas.current, 16);
|
|
6445
|
+
} else {
|
|
6446
|
+
log("[IdCaptureModelsProvider] Recapture tracking (relaxed): could not crop barcode - croppedDocumentCanvas=".concat(!!croppedDocumentCanvas.current, ", processedBarcodeBoundingBox=").concat(!!barcodeAnalysisResult.processedBarcodeBoundingBox));
|
|
6447
|
+
}
|
|
6448
|
+
}
|
|
6449
|
+
_m.label = 5;
|
|
6450
|
+
case 5:
|
|
6451
|
+
return [3 /*break*/, 7];
|
|
6452
|
+
case 6:
|
|
6453
|
+
if (shouldRunBarcodeOnlyAnalysisDuringRecapture) {
|
|
6454
|
+
// During recapture when only PDF417 is detected (no document),
|
|
6455
|
+
// run barcode readability directly on the PDF417 box from the full frame
|
|
6456
|
+
log("[IdCaptureModelsProvider] Barcode-only recapture path: enableBarcodeReadabilityModel=".concat(enableBarcodeReadabilityModel, ", hasCanvas=").concat(!!lastPredictionCanvas.current, ", stopMatch=").concat(stopDetectionAtStart === stopDetection.current));
|
|
6457
|
+
if (enableBarcodeReadabilityModel && lastPredictionCanvas.current && stopDetectionAtStart === stopDetection.current) {
|
|
6458
|
+
startTime = performance.now();
|
|
6459
|
+
barcodeReadabilityResult = makeBarcodeReadabilityPrediction(lastPredictionCanvas.current, prediction.bestPDF417.box);
|
|
6460
|
+
log("[IdCaptureModelsProvider] Barcode-only readability result: ".concat((_k = barcodeReadabilityResult === null || barcodeReadabilityResult === void 0 ? void 0 : barcodeReadabilityResult.score) !== null && _k !== void 0 ? _k : 'null'));
|
|
6461
|
+
if (barcodeReadabilityResult) {
|
|
6462
|
+
pdf417PredictionTime = performance.now() - startTime;
|
|
6463
|
+
pdf417PredictionScore = barcodeReadabilityResult.score;
|
|
6464
|
+
// Track best barcode for recapture sequence
|
|
6465
|
+
if (recaptureBarcodeCanvas.current && pdf417PredictionScore > recaptureBarcodeScore.current) {
|
|
6466
|
+
log("[IdCaptureModelsProvider] Recapture tracking (barcode-only): new best score ".concat(pdf417PredictionScore, " (was ").concat(recaptureBarcodeScore.current, ")"));
|
|
6467
|
+
recaptureBarcodeScore.current = pdf417PredictionScore;
|
|
6468
|
+
recaptureBarcodeDetails.current = {
|
|
6469
|
+
boundingBox: prediction.bestPDF417.box,
|
|
6470
|
+
score: pdf417PredictionScore
|
|
6471
|
+
};
|
|
6472
|
+
// Crop barcode directly from full frame
|
|
6473
|
+
cropToDetectedObjectBox(lastPredictionCanvas.current, prediction.bestPDF417.box, recaptureBarcodeCanvas.current, 16);
|
|
6474
|
+
}
|
|
6475
|
+
}
|
|
6476
|
+
}
|
|
6477
|
+
}
|
|
6478
|
+
_m.label = 7;
|
|
6479
|
+
case 7:
|
|
6367
6480
|
/**
|
|
6368
6481
|
* @note
|
|
6369
6482
|
* This should ALWAYS be called.
|
|
6370
6483
|
* Do not return early from this function unless
|
|
6371
6484
|
* lastPredictionCanvas.current is not set
|
|
6372
6485
|
*/
|
|
6373
|
-
(
|
|
6486
|
+
(_l = onPredictionHandler.current) === null || _l === void 0 ? void 0 : _l.call(onPredictionHandler, _assign(_assign({}, prediction), {
|
|
6374
6487
|
focusScore: focusScore,
|
|
6375
6488
|
focusPredictionTime: focusPredictionTime,
|
|
6376
6489
|
focusThresholdMet: focusThresholdMet,
|
|
@@ -6403,19 +6516,80 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6403
6516
|
canvas: bestBarcodeCanvas.current
|
|
6404
6517
|
});
|
|
6405
6518
|
}, []);
|
|
6519
|
+
var resetBestBarcode = useCallback(function () {
|
|
6520
|
+
// Light-weight reset that only clears barcode tracking without disrupting detection
|
|
6521
|
+
bestBarcodeScore.current = 0;
|
|
6522
|
+
bestBarcodeDetails.current = null;
|
|
6523
|
+
// Also reset recapture tracking so early frames during move-closer window are ignored
|
|
6524
|
+
recaptureBarcodeScore.current = 0;
|
|
6525
|
+
recaptureBarcodeDetails.current = null;
|
|
6526
|
+
// Clear the canvas content but don't recreate it
|
|
6527
|
+
if (bestBarcodeCanvas.current) {
|
|
6528
|
+
var ctx = bestBarcodeCanvas.current.getContext('2d');
|
|
6529
|
+
if (ctx) {
|
|
6530
|
+
ctx.clearRect(0, 0, bestBarcodeCanvas.current.width, bestBarcodeCanvas.current.height);
|
|
6531
|
+
}
|
|
6532
|
+
}
|
|
6533
|
+
if (recaptureBarcodeCanvas.current) {
|
|
6534
|
+
var ctx = recaptureBarcodeCanvas.current.getContext('2d');
|
|
6535
|
+
if (ctx) {
|
|
6536
|
+
ctx.clearRect(0, 0, recaptureBarcodeCanvas.current.width, recaptureBarcodeCanvas.current.height);
|
|
6537
|
+
}
|
|
6538
|
+
}
|
|
6539
|
+
}, []);
|
|
6540
|
+
var startBarcodeRecapturePhase = useCallback(function () {
|
|
6541
|
+
log("[IdCaptureModelsProvider] Starting barcode recapture phase. Initial best score: ".concat(bestBarcodeScore.current));
|
|
6542
|
+
// Snapshot current best barcode to initial capture canvas
|
|
6543
|
+
if (bestBarcodeCanvas.current && initialCaptureBarcodeCanvas.current) {
|
|
6544
|
+
var ctx = initialCaptureBarcodeCanvas.current.getContext('2d');
|
|
6545
|
+
if (ctx) {
|
|
6546
|
+
initialCaptureBarcodeCanvas.current.width = bestBarcodeCanvas.current.width;
|
|
6547
|
+
initialCaptureBarcodeCanvas.current.height = bestBarcodeCanvas.current.height;
|
|
6548
|
+
ctx.drawImage(bestBarcodeCanvas.current, 0, 0);
|
|
6549
|
+
}
|
|
6550
|
+
}
|
|
6551
|
+
initialCaptureBarcodeDetails.current = bestBarcodeDetails.current ? _assign({}, bestBarcodeDetails.current) : null;
|
|
6552
|
+
initialCaptureBarcodeScore.current = bestBarcodeScore.current;
|
|
6553
|
+
// Reset recapture tracking
|
|
6554
|
+
recaptureBarcodeScore.current = 0;
|
|
6555
|
+
recaptureBarcodeDetails.current = null;
|
|
6556
|
+
// Enter recapture phase
|
|
6557
|
+
isRecapturePhase.current = true;
|
|
6558
|
+
}, []);
|
|
6559
|
+
var getInitialCaptureBestBarcode = useCallback(function () {
|
|
6560
|
+
if (!initialCaptureBarcodeDetails.current || !initialCaptureBarcodeCanvas.current) return null;
|
|
6561
|
+
return _assign(_assign({}, initialCaptureBarcodeDetails.current), {
|
|
6562
|
+
canvas: initialCaptureBarcodeCanvas.current
|
|
6563
|
+
});
|
|
6564
|
+
}, []);
|
|
6565
|
+
var getRecaptureBestBarcode = useCallback(function () {
|
|
6566
|
+
if (!recaptureBarcodeDetails.current || !recaptureBarcodeCanvas.current) return null;
|
|
6567
|
+
return _assign(_assign({}, recaptureBarcodeDetails.current), {
|
|
6568
|
+
canvas: recaptureBarcodeCanvas.current
|
|
6569
|
+
});
|
|
6570
|
+
}, []);
|
|
6406
6571
|
var _j = useState(0),
|
|
6407
6572
|
canvasKey = _j[0],
|
|
6408
6573
|
setCanvasKey = _j[1];
|
|
6409
6574
|
var resetBestFrame = useCallback(function () {
|
|
6575
|
+
// During recapture phase, preserve all canvas state to avoid race conditions
|
|
6576
|
+
// that could result in black/empty barcode images on slow devices
|
|
6577
|
+
if (isRecapturePhase.current) {
|
|
6578
|
+
return;
|
|
6579
|
+
}
|
|
6410
6580
|
stopDetection.current += 1;
|
|
6411
|
-
setCanvasKey(function (n) {
|
|
6412
|
-
return n + 1;
|
|
6413
|
-
});
|
|
6414
6581
|
clearDocumentDetectionLastPredictionCanvas();
|
|
6415
6582
|
bestFrameDetails.current = null;
|
|
6416
6583
|
bestFocusScore.current = 0;
|
|
6417
6584
|
bestBarcodeScore.current = 0;
|
|
6418
6585
|
bestBarcodeDetails.current = null;
|
|
6586
|
+
setCanvasKey(function (n) {
|
|
6587
|
+
return n + 1;
|
|
6588
|
+
});
|
|
6589
|
+
initialCaptureBarcodeScore.current = 0;
|
|
6590
|
+
initialCaptureBarcodeDetails.current = null;
|
|
6591
|
+
recaptureBarcodeScore.current = 0;
|
|
6592
|
+
recaptureBarcodeDetails.current = null;
|
|
6419
6593
|
}, [clearDocumentDetectionLastPredictionCanvas]);
|
|
6420
6594
|
useEffect(function () {
|
|
6421
6595
|
if (requiredDocumentType) resetBestFrame();
|
|
@@ -6481,10 +6655,14 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6481
6655
|
bestFrameDetails: bestFrameDetails,
|
|
6482
6656
|
bestBarcodeDetails: bestBarcodeDetails,
|
|
6483
6657
|
getBestBarcode: getBestBarcode,
|
|
6658
|
+
resetBestBarcode: resetBestBarcode,
|
|
6659
|
+
startBarcodeRecapturePhase: startBarcodeRecapturePhase,
|
|
6660
|
+
getInitialCaptureBestBarcode: getInitialCaptureBestBarcode,
|
|
6661
|
+
getRecaptureBestBarcode: getRecaptureBestBarcode,
|
|
6484
6662
|
requiredDocumentType: requiredDocumentType,
|
|
6485
6663
|
setRequiredDocumentType: setRequiredDocumentType
|
|
6486
6664
|
};
|
|
6487
|
-
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, requiredDocumentType]);
|
|
6665
|
+
}, [ready, modelDownloadProgress, modelLoadState, modelWarmingStartedAt, modelError, startDocumentDetection, stopDocumentDetection, load, thresholds, setThresholds, documentDetectionBoundaries, setDocumentDetectionBoundaries, onPredictionMade, detectionTime, focusPredictionTime, barcodeReadabilityPredictionTime, getBestFrame, resetBestFrame, getBestBarcode, resetBestBarcode, startBarcodeRecapturePhase, getInitialCaptureBestBarcode, getRecaptureBestBarcode, requiredDocumentType]);
|
|
6488
6666
|
return /*#__PURE__*/React__default.createElement(IdCaptureModelsContext.Provider, {
|
|
6489
6667
|
value: value
|
|
6490
6668
|
}, /*#__PURE__*/React__default.createElement(InvisibleCanvasContainer, null, /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
@@ -6496,6 +6674,12 @@ function IdCaptureModelsProviderInner(_a) {
|
|
|
6496
6674
|
}), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
6497
6675
|
key: "cd-".concat(canvasKey),
|
|
6498
6676
|
ref: croppedDocumentCanvas
|
|
6677
|
+
}), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
6678
|
+
key: "icb-".concat(canvasKey),
|
|
6679
|
+
ref: initialCaptureBarcodeCanvas
|
|
6680
|
+
}), /*#__PURE__*/React__default.createElement(InvisibleCanvas, {
|
|
6681
|
+
key: "rcb-".concat(canvasKey),
|
|
6682
|
+
ref: recaptureBarcodeCanvas
|
|
6499
6683
|
})), children);
|
|
6500
6684
|
}
|
|
6501
6685
|
function IdCaptureModelsProvider(_a) {
|
|
@@ -6590,6 +6774,8 @@ var initialState$5 = {
|
|
|
6590
6774
|
singlePageDetectionThresholdMet: false,
|
|
6591
6775
|
focusScore: 0,
|
|
6592
6776
|
focusThresholdMet: false,
|
|
6777
|
+
pdf417PredictionScore: 0,
|
|
6778
|
+
pdf417PredictionThresholdMet: false,
|
|
6593
6779
|
isGoodFrame: false,
|
|
6594
6780
|
goodFramesCount: 0,
|
|
6595
6781
|
goodFramesThreshold: 3,
|
|
@@ -6611,30 +6797,47 @@ var initialState$5 = {
|
|
|
6611
6797
|
uploadingDocumentsType: null,
|
|
6612
6798
|
operationStartedAt: null,
|
|
6613
6799
|
captureStartedAt: null,
|
|
6800
|
+
barcodeRecaptureStartedAt: null,
|
|
6801
|
+
initialBarcodeScore: 0,
|
|
6802
|
+
recaptureBarcodeScore: null,
|
|
6803
|
+
barcodeRecaptureThreshold: 0,
|
|
6804
|
+
barcodeRecaptureTimeoutMs: 5000,
|
|
6805
|
+
initialCaptureBarcodeImage: null,
|
|
6806
|
+
recaptureBarcodeImage: null,
|
|
6807
|
+
clientBarcodeScanEnabled: false,
|
|
6808
|
+
clientBarcodeScanActive: false,
|
|
6809
|
+
clientBarcodeDecodeResult: null,
|
|
6810
|
+
nativeBarcodeDecodeResult: null,
|
|
6811
|
+
nativeBarcodeDecoding: false,
|
|
6614
6812
|
dispatch: function dispatch() {
|
|
6615
6813
|
return null;
|
|
6616
6814
|
}
|
|
6617
6815
|
};
|
|
6618
6816
|
var _reducer = function reducer(state, action) {
|
|
6619
6817
|
var _a;
|
|
6818
|
+
var _b, _c;
|
|
6620
6819
|
switch (action.type) {
|
|
6621
6820
|
case 'configureWizard':
|
|
6622
6821
|
{
|
|
6623
|
-
var
|
|
6624
|
-
captureRequirement =
|
|
6625
|
-
precapturedDocuments =
|
|
6626
|
-
allowSinglePageIdCapture =
|
|
6627
|
-
allowIdCardBackToFrontCapture =
|
|
6628
|
-
enableOverrideWrongDocumentTypeDialog =
|
|
6629
|
-
allowOverrideWrongDocumentTypeAfterMs =
|
|
6630
|
-
allowUploadingDocumentsFromStorage =
|
|
6822
|
+
var _d = action.payload,
|
|
6823
|
+
captureRequirement = _d.captureRequirement,
|
|
6824
|
+
precapturedDocuments = _d.precapturedDocuments,
|
|
6825
|
+
allowSinglePageIdCapture = _d.allowSinglePageIdCapture,
|
|
6826
|
+
allowIdCardBackToFrontCapture = _d.allowIdCardBackToFrontCapture,
|
|
6827
|
+
enableOverrideWrongDocumentTypeDialog = _d.enableOverrideWrongDocumentTypeDialog,
|
|
6828
|
+
allowOverrideWrongDocumentTypeAfterMs = _d.allowOverrideWrongDocumentTypeAfterMs,
|
|
6829
|
+
allowUploadingDocumentsFromStorage = _d.allowUploadingDocumentsFromStorage,
|
|
6830
|
+
barcodeRecaptureThreshold = _d.barcodeRecaptureThreshold,
|
|
6831
|
+
barcodeRecaptureTimeoutMs = _d.barcodeRecaptureTimeoutMs;
|
|
6631
6832
|
var newState = _assign(_assign({}, state), {
|
|
6632
6833
|
captureRequirement: captureRequirement,
|
|
6633
6834
|
allowSinglePageIdCapture: allowSinglePageIdCapture !== null && allowSinglePageIdCapture !== void 0 ? allowSinglePageIdCapture : false,
|
|
6634
6835
|
allowIdCardBackToFrontCapture: allowIdCardBackToFrontCapture !== null && allowIdCardBackToFrontCapture !== void 0 ? allowIdCardBackToFrontCapture : false,
|
|
6635
6836
|
enableOverrideWrongDocumentTypeDialog: enableOverrideWrongDocumentTypeDialog,
|
|
6636
6837
|
allowOverrideWrongDocumentTypeAfterMs: allowOverrideWrongDocumentTypeAfterMs,
|
|
6637
|
-
allowUploadingDocumentsFromStorage: allowUploadingDocumentsFromStorage
|
|
6838
|
+
allowUploadingDocumentsFromStorage: allowUploadingDocumentsFromStorage,
|
|
6839
|
+
barcodeRecaptureThreshold: barcodeRecaptureThreshold !== null && barcodeRecaptureThreshold !== void 0 ? barcodeRecaptureThreshold : 0,
|
|
6840
|
+
barcodeRecaptureTimeoutMs: barcodeRecaptureTimeoutMs !== null && barcodeRecaptureTimeoutMs !== void 0 ? barcodeRecaptureTimeoutMs : 5000
|
|
6638
6841
|
});
|
|
6639
6842
|
if (captureRequirement === 'idCardBack') newState.requestedDocumentType = 'idCardBack';
|
|
6640
6843
|
if (captureRequirement === 'passport') newState.requestedDocumentType = 'passport';
|
|
@@ -6691,26 +6894,28 @@ var _reducer = function reducer(state, action) {
|
|
|
6691
6894
|
});
|
|
6692
6895
|
case 'objectsDetected':
|
|
6693
6896
|
{
|
|
6694
|
-
var
|
|
6695
|
-
detectedObjects =
|
|
6696
|
-
detectionThresholdMet =
|
|
6697
|
-
detectedDocumentType =
|
|
6698
|
-
idCardFrontDetectionScore =
|
|
6699
|
-
idCardFrontDetectionThresholdMet =
|
|
6700
|
-
idCardBackDetectionScore =
|
|
6701
|
-
idCardBackDetectionThresholdMet =
|
|
6702
|
-
passportDetectionScore =
|
|
6703
|
-
passportDetectionThresholdMet =
|
|
6704
|
-
singlePageDetectionScore =
|
|
6705
|
-
singlePageDetectionThresholdMet =
|
|
6706
|
-
bestDocument =
|
|
6707
|
-
documentInBounds =
|
|
6708
|
-
documentTooClose =
|
|
6709
|
-
documentIsStable =
|
|
6710
|
-
focusScore =
|
|
6711
|
-
focusThresholdMet =
|
|
6712
|
-
|
|
6713
|
-
|
|
6897
|
+
var _e = action.payload.prediction,
|
|
6898
|
+
detectedObjects = _e.detectedObjects,
|
|
6899
|
+
detectionThresholdMet = _e.detectionThresholdMet,
|
|
6900
|
+
detectedDocumentType = _e.detectedDocumentType,
|
|
6901
|
+
idCardFrontDetectionScore = _e.idCardFrontDetectionScore,
|
|
6902
|
+
idCardFrontDetectionThresholdMet = _e.idCardFrontDetectionThresholdMet,
|
|
6903
|
+
idCardBackDetectionScore = _e.idCardBackDetectionScore,
|
|
6904
|
+
idCardBackDetectionThresholdMet = _e.idCardBackDetectionThresholdMet,
|
|
6905
|
+
passportDetectionScore = _e.passportDetectionScore,
|
|
6906
|
+
passportDetectionThresholdMet = _e.passportDetectionThresholdMet,
|
|
6907
|
+
singlePageDetectionScore = _e.singlePageDetectionScore,
|
|
6908
|
+
singlePageDetectionThresholdMet = _e.singlePageDetectionThresholdMet,
|
|
6909
|
+
bestDocument = _e.bestDocument,
|
|
6910
|
+
documentInBounds = _e.documentInBounds,
|
|
6911
|
+
documentTooClose = _e.documentTooClose,
|
|
6912
|
+
documentIsStable = _e.documentIsStable,
|
|
6913
|
+
focusScore = _e.focusScore,
|
|
6914
|
+
focusThresholdMet = _e.focusThresholdMet,
|
|
6915
|
+
pdf417PredictionScore = _e.pdf417PredictionScore,
|
|
6916
|
+
pdf417PredictionThresholdMet = _e.pdf417PredictionThresholdMet,
|
|
6917
|
+
frameWidth = _e.frameWidth,
|
|
6918
|
+
frameHeight = _e.frameHeight;
|
|
6714
6919
|
var frameCapturedAt = new Date();
|
|
6715
6920
|
var frameCaptureRate = 0;
|
|
6716
6921
|
var goodFramesThreshold = state.goodFramesThreshold;
|
|
@@ -6790,6 +6995,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6790
6995
|
singlePageDetectionThresholdMet: singlePageDetectionThresholdMet,
|
|
6791
6996
|
focusScore: focusScore,
|
|
6792
6997
|
focusThresholdMet: focusThresholdMet,
|
|
6998
|
+
pdf417PredictionScore: pdf417PredictionScore,
|
|
6999
|
+
pdf417PredictionThresholdMet: pdf417PredictionThresholdMet,
|
|
6793
7000
|
isGoodFrame: isGoodFrame,
|
|
6794
7001
|
goodFramesCount: goodFramesCount,
|
|
6795
7002
|
goodFramesThreshold: goodFramesThreshold,
|
|
@@ -6843,7 +7050,21 @@ var _reducer = function reducer(state, action) {
|
|
|
6843
7050
|
});
|
|
6844
7051
|
var remainingRequirements = remainingIdCaptureRequirements(state.captureRequirement, newState.capturedDocuments, state.requestedDocumentType);
|
|
6845
7052
|
if (remainingRequirements.length === 0) {
|
|
6846
|
-
|
|
7053
|
+
// Check if we just captured ID back and need barcode recapture
|
|
7054
|
+
var justCapturedIdBack = action.payload.documentType === 'idCardBack';
|
|
7055
|
+
var barcodeScore = (_c = (_b = state.capturedDocuments.idBarcodeImage) === null || _b === void 0 ? void 0 : _b.barcodeReadabilityScore) !== null && _c !== void 0 ? _c : 0;
|
|
7056
|
+
// Note: We no longer skip recapture when Dynamsoft has decoded a barcode.
|
|
7057
|
+
// This allows the recapture flow to continue and capture a good barcode
|
|
7058
|
+
// image for comparison with native decoder results.
|
|
7059
|
+
var needsBarcodeRecapture = justCapturedIdBack && state.barcodeRecaptureThreshold > 0 && barcodeScore < state.barcodeRecaptureThreshold;
|
|
7060
|
+
if (needsBarcodeRecapture) {
|
|
7061
|
+
// Skip 'complete' and go directly to barcode recapture
|
|
7062
|
+
newState.captureState = 'requestingBetterBarcode';
|
|
7063
|
+
newState.barcodeRecaptureStartedAt = new Date();
|
|
7064
|
+
newState.initialBarcodeScore = barcodeScore;
|
|
7065
|
+
} else {
|
|
7066
|
+
newState.captureState = 'complete';
|
|
7067
|
+
}
|
|
6847
7068
|
} else {
|
|
6848
7069
|
newState.requestedDocumentType = remainingRequirements[0];
|
|
6849
7070
|
if (state.requestedDocumentType === 'idCardFront' && newState.requestedDocumentType === 'idCardBack' || state.requestedDocumentType === 'idCardBack' && newState.requestedDocumentType === 'idCardFront') {
|
|
@@ -6870,8 +7091,8 @@ var _reducer = function reducer(state, action) {
|
|
|
6870
7091
|
case 'documentsCaptured':
|
|
6871
7092
|
{
|
|
6872
7093
|
var newState = _assign({}, state);
|
|
6873
|
-
for (var
|
|
6874
|
-
var doc =
|
|
7094
|
+
for (var _f = 0, _g = action.payload; _f < _g.length; _f++) {
|
|
7095
|
+
var doc = _g[_f];
|
|
6875
7096
|
newState = _reducer(newState, {
|
|
6876
7097
|
type: 'documentCaptured',
|
|
6877
7098
|
payload: doc
|
|
@@ -6921,13 +7142,91 @@ var _reducer = function reducer(state, action) {
|
|
|
6921
7142
|
requestedDocumentType: requestedDocumentType
|
|
6922
7143
|
});
|
|
6923
7144
|
}
|
|
7145
|
+
case 'barcodeRecaptureStarted':
|
|
7146
|
+
return _assign(_assign({}, state), {
|
|
7147
|
+
captureState: 'requestingBetterBarcode',
|
|
7148
|
+
barcodeRecaptureStartedAt: new Date(),
|
|
7149
|
+
initialBarcodeScore: action.payload.initialBarcodeScore,
|
|
7150
|
+
initialCaptureBarcodeImage: action.payload.initialCaptureBarcodeImage,
|
|
7151
|
+
recaptureBarcodeScore: null,
|
|
7152
|
+
recaptureBarcodeImage: null,
|
|
7153
|
+
goodFramesCount: 0,
|
|
7154
|
+
capturing: false
|
|
7155
|
+
});
|
|
7156
|
+
case 'barcodeRecaptureScoreUpdated':
|
|
7157
|
+
return _assign(_assign({}, state), {
|
|
7158
|
+
recaptureBarcodeScore: action.payload.recaptureBarcodeScore
|
|
7159
|
+
});
|
|
7160
|
+
case 'recaptureBarcodeImageCaptured':
|
|
7161
|
+
return _assign(_assign({}, state), {
|
|
7162
|
+
recaptureBarcodeImage: action.payload.recaptureBarcodeImage
|
|
7163
|
+
});
|
|
7164
|
+
case 'barcodeRecaptureCompleted':
|
|
7165
|
+
return _assign(_assign({}, state), {
|
|
7166
|
+
captureState: 'complete',
|
|
7167
|
+
barcodeRecaptureStartedAt: null
|
|
7168
|
+
});
|
|
6924
7169
|
case 'resetWizard':
|
|
6925
7170
|
return _assign(_assign({}, initialState$5), {
|
|
6926
7171
|
dispatch: state.dispatch,
|
|
7172
|
+
// Preserve all configuration values
|
|
7173
|
+
captureRequirement: state.captureRequirement,
|
|
7174
|
+
allowSinglePageIdCapture: state.allowSinglePageIdCapture,
|
|
7175
|
+
allowIdCardBackToFrontCapture: state.allowIdCardBackToFrontCapture,
|
|
7176
|
+
enableOverrideWrongDocumentTypeDialog: state.enableOverrideWrongDocumentTypeDialog,
|
|
7177
|
+
allowOverrideWrongDocumentTypeAfterMs: state.allowOverrideWrongDocumentTypeAfterMs,
|
|
6927
7178
|
allowUploadingDocumentsFromStorage: state.allowUploadingDocumentsFromStorage,
|
|
7179
|
+
barcodeRecaptureThreshold: state.barcodeRecaptureThreshold,
|
|
7180
|
+
barcodeRecaptureTimeoutMs: state.barcodeRecaptureTimeoutMs,
|
|
7181
|
+
clientBarcodeScanEnabled: state.clientBarcodeScanEnabled,
|
|
7182
|
+
// Reset capture-specific state
|
|
6928
7183
|
captureState: state.allowUploadingDocumentsFromStorage ? 'initializing' : 'capturing',
|
|
6929
|
-
|
|
6930
|
-
|
|
7184
|
+
barcodeRecaptureStartedAt: null,
|
|
7185
|
+
initialBarcodeScore: 0,
|
|
7186
|
+
recaptureBarcodeScore: null,
|
|
7187
|
+
initialCaptureBarcodeImage: null,
|
|
7188
|
+
recaptureBarcodeImage: null,
|
|
7189
|
+
clientBarcodeScanActive: false,
|
|
7190
|
+
clientBarcodeDecodeResult: null,
|
|
7191
|
+
nativeBarcodeDecodeResult: null,
|
|
7192
|
+
nativeBarcodeDecoding: false
|
|
7193
|
+
});
|
|
7194
|
+
case 'configureClientBarcodeScan':
|
|
7195
|
+
return _assign(_assign({}, state), {
|
|
7196
|
+
clientBarcodeScanEnabled: action.payload.enabled
|
|
7197
|
+
});
|
|
7198
|
+
case 'clientBarcodeScanStarted':
|
|
7199
|
+
return _assign(_assign({}, state), {
|
|
7200
|
+
clientBarcodeScanActive: true,
|
|
7201
|
+
clientBarcodeDecodeResult: null
|
|
7202
|
+
});
|
|
7203
|
+
case 'clientBarcodeScanStopped':
|
|
7204
|
+
return _assign(_assign({}, state), {
|
|
7205
|
+
clientBarcodeScanActive: false
|
|
7206
|
+
});
|
|
7207
|
+
case 'clientBarcodeDecoded':
|
|
7208
|
+
return _assign(_assign({}, state), {
|
|
7209
|
+
clientBarcodeDecodeResult: action.payload,
|
|
7210
|
+
clientBarcodeScanActive: false
|
|
7211
|
+
});
|
|
7212
|
+
case 'clientBarcodeDecodeReset':
|
|
7213
|
+
return _assign(_assign({}, state), {
|
|
7214
|
+
clientBarcodeDecodeResult: null
|
|
7215
|
+
});
|
|
7216
|
+
case 'nativeBarcodeDecodeStarted':
|
|
7217
|
+
return _assign(_assign({}, state), {
|
|
7218
|
+
nativeBarcodeDecoding: true,
|
|
7219
|
+
nativeBarcodeDecodeResult: null
|
|
7220
|
+
});
|
|
7221
|
+
case 'nativeBarcodeDecoded':
|
|
7222
|
+
return _assign(_assign({}, state), {
|
|
7223
|
+
nativeBarcodeDecoding: false,
|
|
7224
|
+
nativeBarcodeDecodeResult: action.payload
|
|
7225
|
+
});
|
|
7226
|
+
case 'nativeBarcodeDecodeFailed':
|
|
7227
|
+
return _assign(_assign({}, state), {
|
|
7228
|
+
nativeBarcodeDecoding: false,
|
|
7229
|
+
nativeBarcodeDecodeResult: null
|
|
6931
7230
|
});
|
|
6932
7231
|
default:
|
|
6933
7232
|
return state;
|
|
@@ -6983,12 +7282,12 @@ function DebugStatsPane(_a) {
|
|
|
6983
7282
|
if (!portalLocation) return element;
|
|
6984
7283
|
return /*#__PURE__*/createPortal(element, portalLocation);
|
|
6985
7284
|
}
|
|
6986
|
-
var DebugStatsPaneDiv = styled.span(templateObject_1$
|
|
6987
|
-
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$
|
|
7285
|
+
var DebugStatsPaneDiv = styled.span(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"], ["\n font-size: 16px;\n font-family: monospace;\n position: absolute;\n left: 20px;\n bottom: 20px;\n margin-right: 20px;\n padding: 8px;\n color: limegreen;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10002;\n pointer-events: none;\n"])));
|
|
7286
|
+
var ObjectDetectionDebugOverlayDiv = styled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n z-index: 1001;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n max-width: 100%;\n max-height: 100%;\n overflow: hidden;\n pointer-events: none;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
6988
7287
|
var $flipX = _a.$flipX;
|
|
6989
7288
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
6990
7289
|
});
|
|
6991
|
-
var ObjectDetectionDebugBox = styled.div(templateObject_3$
|
|
7290
|
+
var ObjectDetectionDebugBox = styled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"], ["\n font: 10px monospace;\n position: absolute;\n border: 3px solid ", ";\n color: ", ";\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
6992
7291
|
var $color = _a.$color;
|
|
6993
7292
|
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
6994
7293
|
}, function (_a) {
|
|
@@ -6998,7 +7297,11 @@ var ObjectDetectionDebugBox = styled.div(templateObject_3$t || (templateObject_3
|
|
|
6998
7297
|
var $flipX = _a.$flipX;
|
|
6999
7298
|
return $flipX ? 'transform: scaleX(-1);' : '';
|
|
7000
7299
|
});
|
|
7001
|
-
var
|
|
7300
|
+
var ObjectDetectionDebugLabel = styled.span(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n position: absolute;\n top: -1px;\n left: -1px;\n background: ", ";\n color: black;\n font: bold 9px monospace;\n padding: 1px 3px;\n white-space: nowrap;\n transform: translateY(-100%);\n"], ["\n position: absolute;\n top: -1px;\n left: -1px;\n background: ", ";\n color: black;\n font: bold 9px monospace;\n padding: 1px 3px;\n white-space: nowrap;\n transform: translateY(-100%);\n"])), function (_a) {
|
|
7301
|
+
var $color = _a.$color;
|
|
7302
|
+
return $color !== null && $color !== void 0 ? $color : 'green';
|
|
7303
|
+
});
|
|
7304
|
+
var FaceDetectionKeypointMarker = styled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n transform-style: preserve-3d;\n"], ["\n position: absolute;\n width: 4px;\n height: 4px;\n border: 2px solid ", ";\n font: 10px monospace;\n color: ", ";\n border-radius: 50%;\n ", "\n transform-style: preserve-3d;\n"])), function (_a) {
|
|
7002
7305
|
var $color = _a.$color;
|
|
7003
7306
|
return $color !== null && $color !== void 0 ? $color : 'red';
|
|
7004
7307
|
}, function (_a) {
|
|
@@ -7110,7 +7413,9 @@ function IdCaptureDetectedObjectDebugBox(_a) {
|
|
|
7110
7413
|
width: width,
|
|
7111
7414
|
height: height
|
|
7112
7415
|
}
|
|
7113
|
-
}
|
|
7416
|
+
}, /*#__PURE__*/React__default.createElement(ObjectDetectionDebugLabel, {
|
|
7417
|
+
"$color": color
|
|
7418
|
+
}, obj.label, " ", obj.score.toFixed(2)));
|
|
7114
7419
|
}
|
|
7115
7420
|
function SelfieCaptureFaceDebugBox(_a) {
|
|
7116
7421
|
var face = _a.face,
|
|
@@ -7196,7 +7501,7 @@ function SelfieCaptureFaceKeypoint(_a) {
|
|
|
7196
7501
|
}
|
|
7197
7502
|
});
|
|
7198
7503
|
}
|
|
7199
|
-
var templateObject_1$
|
|
7504
|
+
var templateObject_1$N, templateObject_2$I, templateObject_3$w, templateObject_4$q, templateObject_5$j;
|
|
7200
7505
|
|
|
7201
7506
|
function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
7202
7507
|
var _b = _a.classNames,
|
|
@@ -7219,7 +7524,7 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
7219
7524
|
className: classNames.message
|
|
7220
7525
|
}, verbiage.messageText), /*#__PURE__*/React__default.createElement(ButtonContainer, {
|
|
7221
7526
|
className: classNames.buttonContainer
|
|
7222
|
-
}, /*#__PURE__*/React__default.createElement(Button$
|
|
7527
|
+
}, /*#__PURE__*/React__default.createElement(Button$2, {
|
|
7223
7528
|
variant: "positive",
|
|
7224
7529
|
className: classNames.button,
|
|
7225
7530
|
onClick: function onClick() {
|
|
@@ -7229,18 +7534,18 @@ function OverrideWrongDocumentTypeGuidanceDialog(_a) {
|
|
|
7229
7534
|
}
|
|
7230
7535
|
}, verbiage.buttonText))));
|
|
7231
7536
|
}
|
|
7232
|
-
var Container$7 = styled.div(templateObject_1$
|
|
7537
|
+
var Container$7 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"], ["\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n background: ", ";\n color: ", ";\n display: flex;\n z-index: 100001;\n"])), function (props) {
|
|
7233
7538
|
var _a, _b, _c;
|
|
7234
7539
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : '#eed202';
|
|
7235
7540
|
}, function (props) {
|
|
7236
7541
|
var _a, _b, _c;
|
|
7237
7542
|
return (_c = (_b = (_a = props.theme.idCapture) === null || _a === void 0 ? void 0 : _a.overrideWrongDocumentTypeGuidance) === null || _b === void 0 ? void 0 : _b.textColor) !== null && _c !== void 0 ? _c : 'black';
|
|
7238
7543
|
});
|
|
7239
|
-
var InnerContainer = styled.div(templateObject_2$
|
|
7240
|
-
var Message = styled.span(templateObject_3$
|
|
7241
|
-
var ButtonContainer = styled.div(templateObject_4$
|
|
7242
|
-
var Button$
|
|
7243
|
-
var templateObject_1$
|
|
7544
|
+
var InnerContainer = styled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n padding: 16px 24px;\n margin: auto 0;\n width: 100%;\n"])));
|
|
7545
|
+
var Message = styled.span(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: block;\n margin: auto 12px auto 0;\n"], ["\n display: block;\n margin: auto 12px auto 0;\n"])));
|
|
7546
|
+
var ButtonContainer = styled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: flex;\n margin-left: auto;\n"], ["\n display: flex;\n margin-left: auto;\n"])));
|
|
7547
|
+
var Button$2 = styled(LoaderButton)(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n white-space: nowrap;\n margin: auto;\n"], ["\n white-space: nowrap;\n margin: auto;\n"])));
|
|
7548
|
+
var templateObject_1$M, templateObject_2$H, templateObject_3$v, templateObject_4$p, templateObject_5$i;
|
|
7244
7549
|
|
|
7245
7550
|
// This is a simplified version of https://github.com/ZeeCoder/use-resize-observer.
|
|
7246
7551
|
// We have removed all options and made it compliant with React Compiler/React 19.
|
|
@@ -7359,36 +7664,36 @@ function extractSize(entry, sizeType) {
|
|
|
7359
7664
|
}
|
|
7360
7665
|
|
|
7361
7666
|
var IdCapture = function IdCapture(_a) {
|
|
7362
|
-
var _b, _c, _d, _e, _f, _g;
|
|
7667
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
7363
7668
|
var requiredDocumentType = _a.requiredDocumentType,
|
|
7364
|
-
|
|
7365
|
-
thresholds =
|
|
7669
|
+
_k = _a.thresholds,
|
|
7670
|
+
thresholds = _k === void 0 ? defaultIdCaptureThresholds : _k,
|
|
7366
7671
|
guidanceMessage = _a.guidanceMessage,
|
|
7367
7672
|
guidanceSatisfied = _a.guidanceSatisfied,
|
|
7368
7673
|
onCapture = _a.onCapture,
|
|
7369
|
-
|
|
7370
|
-
classNames =
|
|
7371
|
-
|
|
7372
|
-
colors =
|
|
7373
|
-
|
|
7374
|
-
rawVerbiage =
|
|
7375
|
-
|
|
7376
|
-
debugMode =
|
|
7377
|
-
var
|
|
7378
|
-
ref =
|
|
7379
|
-
|
|
7380
|
-
width =
|
|
7381
|
-
|
|
7382
|
-
height =
|
|
7674
|
+
_l = _a.classNames,
|
|
7675
|
+
classNames = _l === void 0 ? {} : _l,
|
|
7676
|
+
_m = _a.colors,
|
|
7677
|
+
colors = _m === void 0 ? {} : _m,
|
|
7678
|
+
_o = _a.verbiage,
|
|
7679
|
+
rawVerbiage = _o === void 0 ? {} : _o,
|
|
7680
|
+
_p = _a.debugMode,
|
|
7681
|
+
debugMode = _p === void 0 ? false : _p;
|
|
7682
|
+
var _q = useResizeObserver(),
|
|
7683
|
+
ref = _q.ref,
|
|
7684
|
+
_r = _q.width,
|
|
7685
|
+
width = _r === void 0 ? 1 : _r,
|
|
7686
|
+
_s = _q.height,
|
|
7687
|
+
height = _s === void 0 ? 1 : _s;
|
|
7383
7688
|
var state = useIdCaptureStore();
|
|
7384
7689
|
var isRearFacing = useCameraStore().isRearFacing;
|
|
7385
|
-
var
|
|
7386
|
-
modelsReady =
|
|
7387
|
-
setThresholds =
|
|
7388
|
-
detectionTime =
|
|
7389
|
-
focusPredictionTime =
|
|
7390
|
-
getBestFrame =
|
|
7391
|
-
getBestBarcode =
|
|
7690
|
+
var _t = useIdCaptureModelsContext(),
|
|
7691
|
+
modelsReady = _t.ready,
|
|
7692
|
+
setThresholds = _t.setThresholds,
|
|
7693
|
+
detectionTime = _t.detectionTime,
|
|
7694
|
+
focusPredictionTime = _t.focusPredictionTime,
|
|
7695
|
+
getBestFrame = _t.getBestFrame,
|
|
7696
|
+
getBestBarcode = _t.getBestBarcode;
|
|
7392
7697
|
useEffect(function () {
|
|
7393
7698
|
return dispatchIdCaptureAction({
|
|
7394
7699
|
type: 'captureInitialized'
|
|
@@ -7413,7 +7718,7 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7413
7718
|
}
|
|
7414
7719
|
});
|
|
7415
7720
|
}, [height, width]);
|
|
7416
|
-
var shouldCapture = state.goodFramesThresholdMet && !state.capturing && timeSince(state.captureStartedAt) >= 3000;
|
|
7721
|
+
var shouldCapture = state.captureState === 'capturing' && state.goodFramesThresholdMet && !state.capturing && timeSince(state.captureStartedAt) >= 3000;
|
|
7417
7722
|
useEffect(function () {
|
|
7418
7723
|
if (!shouldCapture) return;
|
|
7419
7724
|
dispatchIdCaptureAction({
|
|
@@ -7429,10 +7734,11 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7429
7734
|
}
|
|
7430
7735
|
var bestBarcode = getBestBarcode();
|
|
7431
7736
|
if (bestBarcode) {
|
|
7737
|
+
var barcodeImageUrl = bestBarcode.canvas.toDataURL('image/jpeg', 0.95);
|
|
7432
7738
|
dispatchIdCaptureAction({
|
|
7433
7739
|
type: 'barcodeCaptured',
|
|
7434
7740
|
payload: {
|
|
7435
|
-
imageUrl:
|
|
7741
|
+
imageUrl: barcodeImageUrl,
|
|
7436
7742
|
barcodeReadabilityScore: bestBarcode.score
|
|
7437
7743
|
}
|
|
7438
7744
|
});
|
|
@@ -7513,13 +7819,18 @@ var IdCapture = function IdCapture(_a) {
|
|
|
7513
7819
|
"$flipX": !isRearFacing,
|
|
7514
7820
|
scaling: debugScalingDetails
|
|
7515
7821
|
}, state.detectedObjects.map(function (obj, i) {
|
|
7822
|
+
// During barcode recapture, render PDF417 barcodes with green color
|
|
7823
|
+
var isBarcodeRecapture = state.captureState === 'requestingBetterBarcode';
|
|
7824
|
+
var isBarcode = obj.label === 'PDF417';
|
|
7825
|
+
var color = isBarcodeRecapture && isBarcode ? 'green' : undefined;
|
|
7516
7826
|
return /*#__PURE__*/React__default.createElement(IdCaptureDetectedObjectDebugBox, {
|
|
7517
7827
|
key: i,
|
|
7518
7828
|
obj: obj,
|
|
7519
7829
|
scaling: debugScalingDetails,
|
|
7520
|
-
flipX: !isRearFacing
|
|
7830
|
+
flipX: !isRearFacing,
|
|
7831
|
+
color: color
|
|
7521
7832
|
});
|
|
7522
|
-
}))), debugMode && (/*#__PURE__*/React__default.createElement(DebugStatsPane, null, camera ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default.createElement("br", null), modelsReady ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.singlePageDetectionThresholdMet ? '✅' : '❌', " Single Page Score: ", state.singlePageDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u274C Models not ready")))));
|
|
7833
|
+
}))), debugMode && (/*#__PURE__*/React__default.createElement(DebugStatsPane, null, camera ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Camera: ", camera.label, " (", camera.width, "x", camera.height, ")")) : '❌ Camera not ready', /*#__PURE__*/React__default.createElement("br", null), state.frameCaptureRate > 0.75 ? '✅' : '👎', " Frame Rate:", ' ', Math.round((state.frameCaptureRate + Number.EPSILON) * 1000) / 1000, ' ', "fps (", detectionTime, "ms doc detect, ", focusPredictionTime, "ms focus)", /*#__PURE__*/React__default.createElement("br", null), modelsReady ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.detectionThresholdMet ? '✅' : '❌', " Detected Document Type: ", state.detectedDocumentType, /*#__PURE__*/React__default.createElement("br", null), state.idCardFrontDetectionThresholdMet ? '✅' : '❌', " ID Card Front Score: ", state.idCardFrontDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.idCardBackDetectionThresholdMet ? '✅' : '❌', " ID Card Back Score: ", state.idCardBackDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.passportDetectionThresholdMet ? '✅' : '❌', " Passport Score: ", state.passportDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.singlePageDetectionThresholdMet ? '✅' : '❌', " Single Page Score: ", state.singlePageDetectionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.focusThresholdMet ? '✅' : '❌', " Focus Score:", ' ', state.focusScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), state.pdf417PredictionThresholdMet ? '✅' : '❌', " Current Barcode Score: ", state.pdf417PredictionScore.toFixed(3), /*#__PURE__*/React__default.createElement("br", null), getBestBarcode() ? '✅' : '❌', " Best Barcode Score:", ' ', (_j = (_h = getBestBarcode()) === null || _h === void 0 ? void 0 : _h.score.toFixed(3)) !== null && _j !== void 0 ? _j : 'N/A', /*#__PURE__*/React__default.createElement("br", null), state.clientBarcodeDecodeResult ? '✅' : '⏳', " Client Barcode:", ' ', state.clientBarcodeDecodeResult ? "".concat(state.clientBarcodeDecodeResult.format, " (").concat(state.clientBarcodeDecodeResult.text.length, " chars)") : 'Not decoded', /*#__PURE__*/React__default.createElement("br", null), state.documentInBounds ? '✅' : '❌', " Document In Bounds", /*#__PURE__*/React__default.createElement("br", null), state.documentIsStable ? '✅' : '❌', " Document Is Stable", /*#__PURE__*/React__default.createElement("br", null), state.goodFramesThresholdMet ? '✅' : '❌', " Good Frame Count:", ' ', state.goodFramesCount, "/", state.goodFramesThreshold)) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u274C Models not ready")))));
|
|
7523
7834
|
};
|
|
7524
7835
|
var timeSince = function timeSince(t) {
|
|
7525
7836
|
if (!t) return 0;
|
|
@@ -7557,7 +7868,7 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7557
7868
|
className: classNames.image
|
|
7558
7869
|
})), /*#__PURE__*/React__default.createElement("h3", {
|
|
7559
7870
|
className: classNames.heading
|
|
7560
|
-
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(Description$
|
|
7871
|
+
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(Description$5, {
|
|
7561
7872
|
className: classNames.description
|
|
7562
7873
|
}, verbiage.descriptionText), /*#__PURE__*/React__default.createElement(RetryButton$1, {
|
|
7563
7874
|
variant: "warning",
|
|
@@ -7567,13 +7878,13 @@ var CameraAccessDeniedOverlay = function CameraAccessDeniedOverlay(_a) {
|
|
|
7567
7878
|
finished: true
|
|
7568
7879
|
}, verbiage.retryBtnText)));
|
|
7569
7880
|
};
|
|
7570
|
-
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$
|
|
7571
|
-
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$
|
|
7572
|
-
var Description$
|
|
7573
|
-
var RetryButton$1 = styled(LoaderButton)(templateObject_4$
|
|
7574
|
-
var templateObject_1$
|
|
7881
|
+
var StyledOverlayInner$3 = styled(OverlayInner$2)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n max-width: 500px;\n height: auto;\n margin: auto;\n"], ["\n max-width: 500px;\n height: auto;\n margin: auto;\n"])));
|
|
7882
|
+
var StyledOverlayImageContainer$1 = styled(OverlayImageContainer)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n flex-grow: 0;\n"], ["\n flex-grow: 0;\n"])));
|
|
7883
|
+
var Description$5 = styled.p(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n line-height: 1.5;\n margin-bottom: 50px;\n"], ["\n line-height: 1.5;\n margin-bottom: 50px;\n"])));
|
|
7884
|
+
var RetryButton$1 = styled(LoaderButton)(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n width: 200px;\n margin: 0 auto;\n"], ["\n width: 200px;\n margin: 0 auto;\n"])));
|
|
7885
|
+
var templateObject_1$L, templateObject_2$G, templateObject_3$u, templateObject_4$o;
|
|
7575
7886
|
|
|
7576
|
-
var ExitCaptureStyledButton = styled.button(templateObject_1$
|
|
7887
|
+
var ExitCaptureStyledButton = styled.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"], ["\n position: absolute;\n top: 12px;\n right: 12px;\n font-size: 20px;\n width: 32px;\n height: 32px;\n font-family: monospace;\n z-index: 10002;\n border: none;\n border-radius: 4px;\n background: var(--idm-color-secondary-200);\n cursor: pointer;\n padding: 8px;\n box-sizing: border-box;\n display: flex;\n\n &:hover {\n background: #ddd;\n }\n\n & > svg {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n"])));
|
|
7577
7888
|
var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
7578
7889
|
var onClick = _a.onClick,
|
|
7579
7890
|
className = _a.className;
|
|
@@ -7617,7 +7928,7 @@ var ExitCaptureButton = function ExitCaptureButton(_a) {
|
|
|
7617
7928
|
y2: "19.75"
|
|
7618
7929
|
}))));
|
|
7619
7930
|
};
|
|
7620
|
-
var templateObject_1$
|
|
7931
|
+
var templateObject_1$K;
|
|
7621
7932
|
|
|
7622
7933
|
function IdCaptureLoadingGraphic(props) {
|
|
7623
7934
|
var isMobile = window.innerHeight > window.innerWidth;
|
|
@@ -8092,21 +8403,21 @@ function IdCaptureLoadingGraphicMobile(_a) {
|
|
|
8092
8403
|
fill: "white"
|
|
8093
8404
|
}))));
|
|
8094
8405
|
}
|
|
8095
|
-
var LoadingGraphicWrapper = styled.div(templateObject_1$
|
|
8096
|
-
var LoadingGraphicSvg = styled.svg(templateObject_2$
|
|
8406
|
+
var LoadingGraphicWrapper = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n width: 100%;\n height: 100%;\n"])));
|
|
8407
|
+
var LoadingGraphicSvg = styled.svg(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"], ["\n margin: auto;\n transform: scale(\n ", "\n );\n transform-style: preserve-3d;\n transition:\n transform 0.2s linear,\n border-width 0.2s linear;\n border: ", "px solid\n ", ";\n max-height: 80%;\n max-width: 80%;\n"])), function (props) {
|
|
8097
8408
|
return props.$frame > 1 ? 1 : props.$frame === 1 ? 1.25 : 0.75;
|
|
8098
8409
|
}, function (props) {
|
|
8099
8410
|
return props.$frame >= 5 ? 10 : 0;
|
|
8100
8411
|
}, function (props) {
|
|
8101
8412
|
return props.$borderColor;
|
|
8102
8413
|
});
|
|
8103
|
-
var LoadingGraphicCardGroup = styled.g(templateObject_3$
|
|
8414
|
+
var LoadingGraphicCardGroup = styled.g(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
8104
8415
|
return props.$offScreen ? '-500px' : '0';
|
|
8105
8416
|
});
|
|
8106
|
-
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$
|
|
8417
|
+
var LoadingGraphicPhoneGroup = styled.g(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"], ["\n transform: translate(", ", 0);\n transform-style: preserve-3d;\n transition: transform 0.3s linear;\n"])), function (props) {
|
|
8107
8418
|
return props.$offScreen ? '40px' : '0';
|
|
8108
8419
|
});
|
|
8109
|
-
var templateObject_1$
|
|
8420
|
+
var templateObject_1$J, templateObject_2$F, templateObject_3$t, templateObject_4$n;
|
|
8110
8421
|
|
|
8111
8422
|
function LoadingListItemIndicator(_a) {
|
|
8112
8423
|
var _b = _a.state,
|
|
@@ -8375,35 +8686,35 @@ var IdCaptureLoadingOverlayDefault = function IdCaptureLoadingOverlayDefault(_a)
|
|
|
8375
8686
|
}
|
|
8376
8687
|
}, ready ? verbiage.continueText : verbiage.pleaseWaitText))))));
|
|
8377
8688
|
};
|
|
8378
|
-
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$
|
|
8689
|
+
var OverlayInner$1 = styled(LoadingOverlayInner)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n"], ["\n background: ", ";\n color: ", ";\n"])), function (props) {
|
|
8379
8690
|
var _a, _b, _c, _d;
|
|
8380
8691
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : '#ecedf3';
|
|
8381
8692
|
}, function (props) {
|
|
8382
8693
|
var _a, _b, _c, _d;
|
|
8383
8694
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.textColor) !== null && _d !== void 0 ? _d : 'black';
|
|
8384
8695
|
});
|
|
8385
|
-
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$
|
|
8386
|
-
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$
|
|
8387
|
-
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$
|
|
8388
|
-
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$
|
|
8696
|
+
var ContinuityCameraCheckboxContainer$1 = styled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"], ["\n position: absolute;\n bottom: 120px;\n width: 100%;\n display: flex;\n"])));
|
|
8697
|
+
var ContinuityCameraCheckboxInner = styled(GuidanceMessage)(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"], ["\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 12px 18px;\n margin: 0 auto;\n font-size: 14px;\n font-weight: bold;\n background: white;\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 0.1),\n 0 1px 2px -1px rgb(0 0 0 / 0.1);\n"])));
|
|
8698
|
+
var ContinuityCameraCheckbox$1 = styled.input(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
8699
|
+
var ButtonsRow$1 = styled(LoadingOverlayButtonsRow)(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n color: ", ";\n ", "\n"], ["\n color: ", ";\n ", "\n"])), function (props) {
|
|
8389
8700
|
var _a, _b, _c, _d;
|
|
8390
8701
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarTextColor) !== null && _d !== void 0 ? _d : 'white';
|
|
8391
8702
|
}, function (props) {
|
|
8392
8703
|
var _a, _b, _c, _d, _e, _f;
|
|
8393
8704
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
|
|
8394
8705
|
});
|
|
8395
|
-
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$
|
|
8706
|
+
var ProgressBarBackground$1 = styled(LoadingOverlayProgressBarBackground)(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n background: ", ";\n opacity: ", ";\n"], ["\n background: ", ";\n opacity: ", ";\n"])), function (props) {
|
|
8396
8707
|
var _a, _b, _c, _d;
|
|
8397
8708
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-positive-600)';
|
|
8398
8709
|
}, function (props) {
|
|
8399
8710
|
var _a, _b, _c, _d;
|
|
8400
8711
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarBackgroundOpacity) !== null && _d !== void 0 ? _d : 0.75;
|
|
8401
8712
|
});
|
|
8402
|
-
var ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$
|
|
8713
|
+
var ProgressIndicator$1 = styled(LoadingOverlayProgressIndicator)(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n background: ", ";\n"], ["\n background: ", ";\n"])), function (props) {
|
|
8403
8714
|
var _a, _b, _c, _d;
|
|
8404
8715
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarIndicatorColor) !== null && _d !== void 0 ? _d : 'var(--idm-color-primary-500)';
|
|
8405
8716
|
});
|
|
8406
|
-
var ContinueButton$1 = styled(LoaderButton)(templateObject_8$
|
|
8717
|
+
var ContinueButton$1 = styled(LoaderButton)(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n margin: auto;\n white-space: nowrap;\n ", "\n ", "\n \n &:focus-visible {\n ", "\n box-shadow: none;\n }\n\n &.disabled {\n background: ", ";\n color: ", ";\n border: ", ";\n }\n"], ["\n margin: auto;\n white-space: nowrap;\n ", "\n ", "\n \n &:focus-visible {\n ", "\n box-shadow: none;\n }\n\n &.disabled {\n background: ", ";\n color: ", ";\n border: ", ";\n }\n"])), function (props) {
|
|
8407
8718
|
var _a, _b, _c, _d, _e, _f;
|
|
8408
8719
|
return ((_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.progressBarFontSize) ? "font-size: ".concat((_f = (_e = (_d = props.theme) === null || _d === void 0 ? void 0 : _d.idCapture) === null || _e === void 0 ? void 0 : _e.loadingOverlay) === null || _f === void 0 ? void 0 : _f.progressBarFontSize, ";") : '';
|
|
8409
8720
|
}, function (props) {
|
|
@@ -8422,10 +8733,10 @@ var ContinueButton$1 = styled(LoaderButton)(templateObject_8$4 || (templateObjec
|
|
|
8422
8733
|
var _a, _b, _c, _d;
|
|
8423
8734
|
return (_d = (_c = (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.idCapture) === null || _b === void 0 ? void 0 : _b.loadingOverlay) === null || _c === void 0 ? void 0 : _c.continueBtnDisabledBorder) !== null && _d !== void 0 ? _d : 'none';
|
|
8424
8735
|
});
|
|
8425
|
-
var templateObject_1$
|
|
8736
|
+
var templateObject_1$I, templateObject_2$E, templateObject_3$s, templateObject_4$m, templateObject_5$h, templateObject_6$b, templateObject_7$7, templateObject_8$6;
|
|
8426
8737
|
|
|
8427
|
-
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$
|
|
8428
|
-
var ContinuityCameraCheckbox = styled.input(templateObject_2$
|
|
8738
|
+
var ContinuityCameraCheckboxContainer = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n margin-top: 15px;\n margin-bottom: 15px;\n"], ["\n margin-top: 15px;\n margin-bottom: 15px;\n"])));
|
|
8739
|
+
var ContinuityCameraCheckbox = styled.input(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
8429
8740
|
var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
8430
8741
|
var _b, _c, _d, _e;
|
|
8431
8742
|
var onDismissed = _a.onDismissed,
|
|
@@ -8546,7 +8857,7 @@ var IdCaptureLoadingOverlayLegacy = function IdCaptureLoadingOverlayLegacy(_a) {
|
|
|
8546
8857
|
}
|
|
8547
8858
|
}, ready ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : modelDownloadProgress >= 100 ? verbiage.modelsWarmingUpText : "".concat(verbiage.downloadingText, " (").concat(modelDownloadProgress, "%)"))));
|
|
8548
8859
|
};
|
|
8549
|
-
var templateObject_1$
|
|
8860
|
+
var templateObject_1$H, templateObject_2$D;
|
|
8550
8861
|
|
|
8551
8862
|
var components$1 = {
|
|
8552
8863
|
"default": IdCaptureLoadingOverlayDefault,
|
|
@@ -8604,11 +8915,205 @@ var CapturedDocumentImg = function CapturedDocumentImg(_a) {
|
|
|
8604
8915
|
});
|
|
8605
8916
|
};
|
|
8606
8917
|
|
|
8607
|
-
var Card = styled.div(templateObject_1$
|
|
8608
|
-
var FlexCard = styled(Card)(templateObject_2$
|
|
8609
|
-
var templateObject_1$
|
|
8918
|
+
var Card = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"], ["\n background: white;\n border-radius: 8px;\n padding: 24px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n margin: auto;\n max-width: min(500px, 100% - 48px);\n max-height: 100%;\n overflow: auto;\n box-sizing: border-box;\n"])));
|
|
8919
|
+
var FlexCard = styled(Card)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
8920
|
+
var templateObject_1$G, templateObject_2$C;
|
|
8921
|
+
|
|
8922
|
+
/**
|
|
8923
|
+
* Parser for AAMVA (American Association of Motor Vehicle Administrators)
|
|
8924
|
+
* PDF417 barcode data found on US and Canadian driver's licenses.
|
|
8925
|
+
*/
|
|
8926
|
+
// AAMVA field codes to human-readable labels
|
|
8927
|
+
var AAMVA_FIELD_LABELS = {
|
|
8928
|
+
// Required fields
|
|
8929
|
+
DCS: 'Last Name',
|
|
8930
|
+
DAC: 'First Name',
|
|
8931
|
+
DAD: 'Middle Name',
|
|
8932
|
+
DBB: 'Date of Birth',
|
|
8933
|
+
DBC: 'Sex',
|
|
8934
|
+
DAY: 'Eye Color',
|
|
8935
|
+
DAU: 'Height',
|
|
8936
|
+
DAG: 'Street Address',
|
|
8937
|
+
DAI: 'City',
|
|
8938
|
+
DAJ: 'State',
|
|
8939
|
+
DAK: 'ZIP Code',
|
|
8940
|
+
DAQ: 'License Number',
|
|
8941
|
+
DCF: 'Document Discriminator',
|
|
8942
|
+
DCG: 'Country',
|
|
8943
|
+
DDE: 'Last Name Truncation',
|
|
8944
|
+
DDF: 'First Name Truncation',
|
|
8945
|
+
DDG: 'Middle Name Truncation',
|
|
8946
|
+
// Optional fields
|
|
8947
|
+
DBD: 'Document Issue Date',
|
|
8948
|
+
DBA: 'Document Expiration Date',
|
|
8949
|
+
DCD: 'Jurisdiction Restriction Codes',
|
|
8950
|
+
DCB: 'Jurisdiction Endorsement Codes',
|
|
8951
|
+
DCA: 'Vehicle Class',
|
|
8952
|
+
DCE: 'Weight Range',
|
|
8953
|
+
DCL: 'Race/Ethnicity',
|
|
8954
|
+
DCM: 'Standard Vehicle Classification',
|
|
8955
|
+
DCN: 'Standard Endorsement Code',
|
|
8956
|
+
DCO: 'Standard Restriction Code',
|
|
8957
|
+
DCP: 'Jurisdiction Vehicle Class Description',
|
|
8958
|
+
DCQ: 'Jurisdiction Endorsement Code Description',
|
|
8959
|
+
DCR: 'Jurisdiction Restriction Code Description',
|
|
8960
|
+
DDA: 'Compliance Type',
|
|
8961
|
+
DDB: 'Card Revision Date',
|
|
8962
|
+
DDC: 'HAZMAT Endorsement Expiration Date',
|
|
8963
|
+
DDD: 'Limited Duration Document Indicator',
|
|
8964
|
+
DDH: 'Under 18 Until',
|
|
8965
|
+
DDI: 'Under 19 Until',
|
|
8966
|
+
DDJ: 'Under 21 Until',
|
|
8967
|
+
DDK: 'Organ Donor Indicator',
|
|
8968
|
+
DDL: 'Veteran Indicator',
|
|
8969
|
+
DAW: 'Weight (lbs)',
|
|
8970
|
+
DAX: 'Weight (kg)',
|
|
8971
|
+
DAZ: 'Hair Color',
|
|
8972
|
+
DBN: 'Alias/AKA Last Name',
|
|
8973
|
+
DBG: 'Alias/AKA First Name',
|
|
8974
|
+
DBS: 'Alias/AKA Suffix',
|
|
8975
|
+
DCU: 'Name Suffix',
|
|
8976
|
+
DCT: 'First Name Alias',
|
|
8977
|
+
DAH: 'Street Address Line 2',
|
|
8978
|
+
DAL: 'Residence Street Address',
|
|
8979
|
+
DAN: 'Residence City',
|
|
8980
|
+
DAO: 'Residence State',
|
|
8981
|
+
DAP: 'Residence ZIP'
|
|
8982
|
+
};
|
|
8983
|
+
// Sex code mappings
|
|
8984
|
+
var SEX_CODES = {
|
|
8985
|
+
'1': 'Male',
|
|
8986
|
+
'2': 'Female',
|
|
8987
|
+
'9': 'Not Specified'
|
|
8988
|
+
};
|
|
8989
|
+
// Eye color code mappings
|
|
8990
|
+
var EYE_COLOR_CODES = {
|
|
8991
|
+
BLK: 'Black',
|
|
8992
|
+
BLU: 'Blue',
|
|
8993
|
+
BRO: 'Brown',
|
|
8994
|
+
GRY: 'Gray',
|
|
8995
|
+
GRN: 'Green',
|
|
8996
|
+
HAZ: 'Hazel',
|
|
8997
|
+
MAR: 'Maroon',
|
|
8998
|
+
PNK: 'Pink',
|
|
8999
|
+
DIC: 'Dichromatic',
|
|
9000
|
+
UNK: 'Unknown'
|
|
9001
|
+
};
|
|
9002
|
+
// Hair color code mappings
|
|
9003
|
+
var HAIR_COLOR_CODES = {
|
|
9004
|
+
BAL: 'Bald',
|
|
9005
|
+
BLK: 'Black',
|
|
9006
|
+
BLN: 'Blond',
|
|
9007
|
+
BRO: 'Brown',
|
|
9008
|
+
GRY: 'Gray',
|
|
9009
|
+
RED: 'Red/Auburn',
|
|
9010
|
+
SDY: 'Sandy',
|
|
9011
|
+
WHI: 'White',
|
|
9012
|
+
UNK: 'Unknown'
|
|
9013
|
+
};
|
|
9014
|
+
/**
|
|
9015
|
+
* Formats a date string from AAMVA format (MMDDYYYY) to readable format
|
|
9016
|
+
*/
|
|
9017
|
+
function formatDate(value) {
|
|
9018
|
+
if (value.length !== 8) return value;
|
|
9019
|
+
var month = value.substring(0, 2);
|
|
9020
|
+
var day = value.substring(2, 4);
|
|
9021
|
+
var year = value.substring(4, 8);
|
|
9022
|
+
return "".concat(month, "/").concat(day, "/").concat(year);
|
|
9023
|
+
}
|
|
9024
|
+
/**
|
|
9025
|
+
* Formats a value based on its field code
|
|
9026
|
+
*/
|
|
9027
|
+
function formatValue$1(code, value) {
|
|
9028
|
+
// Date fields
|
|
9029
|
+
if (['DBB', 'DBD', 'DBA', 'DDB', 'DDC', 'DDH', 'DDI', 'DDJ'].includes(code)) {
|
|
9030
|
+
return formatDate(value);
|
|
9031
|
+
}
|
|
9032
|
+
// Sex field
|
|
9033
|
+
if (code === 'DBC') {
|
|
9034
|
+
return SEX_CODES[value] || value;
|
|
9035
|
+
}
|
|
9036
|
+
// Eye color
|
|
9037
|
+
if (code === 'DAY') {
|
|
9038
|
+
return EYE_COLOR_CODES[value] || value;
|
|
9039
|
+
}
|
|
9040
|
+
// Hair color
|
|
9041
|
+
if (code === 'DAZ') {
|
|
9042
|
+
return HAIR_COLOR_CODES[value] || value;
|
|
9043
|
+
}
|
|
9044
|
+
// Height - format as feet and inches
|
|
9045
|
+
if (code === 'DAU') {
|
|
9046
|
+
// Format is typically "XXX in" or "FT IN"
|
|
9047
|
+
var match = value.match(/^(\d{3})/);
|
|
9048
|
+
if (match) {
|
|
9049
|
+
var inches = parseInt(match[1], 10);
|
|
9050
|
+
var feet = Math.floor(inches / 12);
|
|
9051
|
+
var remainingInches = inches % 12;
|
|
9052
|
+
return "".concat(feet, "'").concat(remainingInches, "\"");
|
|
9053
|
+
}
|
|
9054
|
+
return value;
|
|
9055
|
+
}
|
|
9056
|
+
// ZIP code - format with hyphen if 9 digits
|
|
9057
|
+
if (code === 'DAK' && value.length === 9) {
|
|
9058
|
+
return "".concat(value.substring(0, 5), "-").concat(value.substring(5));
|
|
9059
|
+
}
|
|
9060
|
+
return value.trim();
|
|
9061
|
+
}
|
|
9062
|
+
/**
|
|
9063
|
+
* Parses AAMVA PDF417 barcode data into structured fields
|
|
9064
|
+
*/
|
|
9065
|
+
function parseAAMVABarcode(rawData) {
|
|
9066
|
+
var result = {
|
|
9067
|
+
fields: [],
|
|
9068
|
+
rawData: rawData
|
|
9069
|
+
};
|
|
9070
|
+
// Clean up the data - remove control characters but keep newlines for parsing
|
|
9071
|
+
// AAMVA uses various separators: \n, \r, record separator (0x1E), etc.
|
|
9072
|
+
// eslint-disable-next-line no-control-regex
|
|
9073
|
+
var controlCharRegex = /[\x00-\x09\x0B\x0C\x0E-\x1F]/g;
|
|
9074
|
+
var cleanData = rawData.replace(controlCharRegex, '\n') // Replace control chars with newlines
|
|
9075
|
+
.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
|
|
9076
|
+
// Split into lines
|
|
9077
|
+
var lines = cleanData.split('\n').filter(function (line) {
|
|
9078
|
+
return line.trim();
|
|
9079
|
+
});
|
|
9080
|
+
// Extract fields using regex - AAMVA fields are 3-letter codes followed by data
|
|
9081
|
+
var fieldRegex = /^([A-Z]{3})(.*)$/;
|
|
9082
|
+
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
|
|
9083
|
+
var line = lines_1[_i];
|
|
9084
|
+
var match = line.match(fieldRegex);
|
|
9085
|
+
if (match) {
|
|
9086
|
+
var code = match[1],
|
|
9087
|
+
rawValue = match[2];
|
|
9088
|
+
var value = rawValue.trim();
|
|
9089
|
+
// Skip empty values and header/version info
|
|
9090
|
+
if (!value || code === 'ANS') continue;
|
|
9091
|
+
var label = AAMVA_FIELD_LABELS[code] || code;
|
|
9092
|
+
var formattedValue = formatValue$1(code, value);
|
|
9093
|
+
result.fields.push({
|
|
9094
|
+
code: code,
|
|
9095
|
+
label: label,
|
|
9096
|
+
value: formattedValue
|
|
9097
|
+
});
|
|
9098
|
+
}
|
|
9099
|
+
}
|
|
9100
|
+
// Try to extract version and jurisdiction from header
|
|
9101
|
+
var headerMatch = rawData.match(/ANSI\s*(\d+)/);
|
|
9102
|
+
if (headerMatch) {
|
|
9103
|
+
result.jurisdictionId = headerMatch[1].substring(0, 6);
|
|
9104
|
+
}
|
|
9105
|
+
return result;
|
|
9106
|
+
}
|
|
8610
9107
|
|
|
8611
9108
|
var imageDisplayOrder = ['idCardFront', 'idCardBack', 'idBarcodeImage', 'passport', 'singlePage', 'idFrontIrImage', 'idBackIrImage', 'idFrontUvImage', 'idBackUvImage'];
|
|
9109
|
+
var downloadImage = function downloadImage(dataUrl, filename) {
|
|
9110
|
+
var link = document.createElement('a');
|
|
9111
|
+
link.href = dataUrl;
|
|
9112
|
+
link.download = filename;
|
|
9113
|
+
document.body.appendChild(link);
|
|
9114
|
+
link.click();
|
|
9115
|
+
document.body.removeChild(link);
|
|
9116
|
+
};
|
|
8612
9117
|
var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
8613
9118
|
var capturedDocuments = _a.capturedDocuments,
|
|
8614
9119
|
onSubmitClick = _a.onSubmitClick,
|
|
@@ -8620,7 +9125,13 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8620
9125
|
_d = _a.verbiage,
|
|
8621
9126
|
rawVerbiage = _d === void 0 ? {} : _d,
|
|
8622
9127
|
_e = _a.debugMode,
|
|
8623
|
-
debugMode = _e === void 0 ? false : _e
|
|
9128
|
+
debugMode = _e === void 0 ? false : _e,
|
|
9129
|
+
initialBarcodeScore = _a.initialBarcodeScore,
|
|
9130
|
+
recaptureBarcodeScore = _a.recaptureBarcodeScore,
|
|
9131
|
+
initialCaptureBarcodeImage = _a.initialCaptureBarcodeImage,
|
|
9132
|
+
recaptureBarcodeImage = _a.recaptureBarcodeImage,
|
|
9133
|
+
clientBarcodeDecodeResult = _a.clientBarcodeDecodeResult,
|
|
9134
|
+
nativeBarcodeDecodeResult = _a.nativeBarcodeDecodeResult;
|
|
8624
9135
|
var submissionStatus = useContext(SubmissionContext).submissionStatus;
|
|
8625
9136
|
var sessionCheckState = useAuthContext()[0].sessionCheckState;
|
|
8626
9137
|
var sessionReady = sessionCheckState === 'PASSED';
|
|
@@ -8632,12 +9143,50 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8632
9143
|
(_a = submitButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
8633
9144
|
}
|
|
8634
9145
|
}, [sessionReady, submissionStatus]);
|
|
9146
|
+
if (debugMode) {
|
|
9147
|
+
log('[IdCaptureSuccess] Debug info:', {
|
|
9148
|
+
debugMode: debugMode,
|
|
9149
|
+
initialBarcodeScore: initialBarcodeScore,
|
|
9150
|
+
recaptureBarcodeScore: recaptureBarcodeScore,
|
|
9151
|
+
shouldShow: debugMode && initialBarcodeScore !== undefined,
|
|
9152
|
+
condition1: debugMode,
|
|
9153
|
+
condition2: initialBarcodeScore !== undefined
|
|
9154
|
+
});
|
|
9155
|
+
}
|
|
8635
9156
|
var verbiage = useTranslations(rawVerbiage, {
|
|
8636
9157
|
headingText: 'ID Capture Successful',
|
|
8637
9158
|
retryText: 'Retry',
|
|
8638
9159
|
submittingText: 'Submitting...',
|
|
8639
9160
|
submitText: 'Done'
|
|
8640
9161
|
});
|
|
9162
|
+
// Parse AAMVA barcode data if available (Dynamsoft/client-side)
|
|
9163
|
+
var parsedBarcodeData = useMemo(function () {
|
|
9164
|
+
if (!(clientBarcodeDecodeResult === null || clientBarcodeDecodeResult === void 0 ? void 0 : clientBarcodeDecodeResult.text)) return null;
|
|
9165
|
+
try {
|
|
9166
|
+
return parseAAMVABarcode(clientBarcodeDecodeResult.text);
|
|
9167
|
+
} catch (_a) {
|
|
9168
|
+
return null;
|
|
9169
|
+
}
|
|
9170
|
+
}, [clientBarcodeDecodeResult]);
|
|
9171
|
+
// Parse AAMVA barcode data from native decoder
|
|
9172
|
+
var parsedNativeBarcodeData = useMemo(function () {
|
|
9173
|
+
if (!(nativeBarcodeDecodeResult === null || nativeBarcodeDecodeResult === void 0 ? void 0 : nativeBarcodeDecodeResult.text)) return null;
|
|
9174
|
+
try {
|
|
9175
|
+
return parseAAMVABarcode(nativeBarcodeDecodeResult.text);
|
|
9176
|
+
} catch (_a) {
|
|
9177
|
+
return null;
|
|
9178
|
+
}
|
|
9179
|
+
}, [nativeBarcodeDecodeResult]);
|
|
9180
|
+
// Compare native vs Dynamsoft results
|
|
9181
|
+
var barcodeComparisonResult = useMemo(function () {
|
|
9182
|
+
if (!(clientBarcodeDecodeResult === null || clientBarcodeDecodeResult === void 0 ? void 0 : clientBarcodeDecodeResult.text) || !(nativeBarcodeDecodeResult === null || nativeBarcodeDecodeResult === void 0 ? void 0 : nativeBarcodeDecodeResult.text)) {
|
|
9183
|
+
return null;
|
|
9184
|
+
}
|
|
9185
|
+
var match = clientBarcodeDecodeResult.text === nativeBarcodeDecodeResult.text;
|
|
9186
|
+
return {
|
|
9187
|
+
match: match
|
|
9188
|
+
};
|
|
9189
|
+
}, [clientBarcodeDecodeResult, nativeBarcodeDecodeResult]);
|
|
8641
9190
|
return /*#__PURE__*/React__default.createElement(GrayOverlayContainer, {
|
|
8642
9191
|
className: classNames.container
|
|
8643
9192
|
}, /*#__PURE__*/React__default.createElement(OverlayInner$2, {
|
|
@@ -8651,6 +9200,7 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8651
9200
|
}, /*#__PURE__*/React__default.createElement(ImageRow, {
|
|
8652
9201
|
className: classNames.imageRow
|
|
8653
9202
|
}, imageDisplayOrder.map(function (name) {
|
|
9203
|
+
var _a, _b, _c, _d, _e, _f;
|
|
8654
9204
|
var doc = capturedDocuments[name];
|
|
8655
9205
|
if (!doc) return null;
|
|
8656
9206
|
return /*#__PURE__*/React__default.createElement(ImageCol$1, {
|
|
@@ -8660,8 +9210,68 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8660
9210
|
image: doc,
|
|
8661
9211
|
className: classNames.image,
|
|
8662
9212
|
alt: doc.documentType
|
|
8663
|
-
}), debugMode && (/*#__PURE__*/React__default.createElement(
|
|
8664
|
-
|
|
9213
|
+
}), debugMode && (/*#__PURE__*/React__default.createElement(DebugInfoContainer, null, name === 'idBarcodeImage' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DebugSection, null, /*#__PURE__*/React__default.createElement(DebugLabel, null, "Document Type:"), /*#__PURE__*/React__default.createElement(DebugValue, null, doc.documentType)), /*#__PURE__*/React__default.createElement(DebugSection, null, /*#__PURE__*/React__default.createElement(DebugLabel, null, "Readability Score:"), /*#__PURE__*/React__default.createElement(ScoreBadge, {
|
|
9214
|
+
"$score": (_a = doc.barcodeReadabilityScore) !== null && _a !== void 0 ? _a : 0,
|
|
9215
|
+
"$type": "readability"
|
|
9216
|
+
}, ((_b = doc.barcodeReadabilityScore) !== null && _b !== void 0 ? _b : 0).toFixed(3))), initialBarcodeScore !== undefined && (recaptureBarcodeScore !== null && recaptureBarcodeScore !== undefined ? (/*#__PURE__*/React__default.createElement(BarcodeComparisonCard, null, /*#__PURE__*/React__default.createElement(ComparisonHeader, null, "\uD83D\uDCCA Barcode Recapture Analysis"), /*#__PURE__*/React__default.createElement(ComparisonRow, null, /*#__PURE__*/React__default.createElement(ComparisonLabel, null, "Initial Capture:"), /*#__PURE__*/React__default.createElement(ComparisonScoreBadge, null, initialBarcodeScore.toFixed(3))), /*#__PURE__*/React__default.createElement(ComparisonRow, null, /*#__PURE__*/React__default.createElement(ComparisonLabel, null, "After Recapture:"), /*#__PURE__*/React__default.createElement(ComparisonScoreBadge, null, recaptureBarcodeScore.toFixed(3))), /*#__PURE__*/React__default.createElement(ComparisonDivider, null), /*#__PURE__*/React__default.createElement(ComparisonRow, null, /*#__PURE__*/React__default.createElement(ComparisonLabel, null, "Improvement:"), /*#__PURE__*/React__default.createElement(ImprovementBadge, {
|
|
9217
|
+
"$improved": recaptureBarcodeScore > initialBarcodeScore
|
|
9218
|
+
}, recaptureBarcodeScore > initialBarcodeScore ? '↑' : '→', ' ', Math.abs(recaptureBarcodeScore - initialBarcodeScore).toFixed(3), ' ', "(", recaptureBarcodeScore > initialBarcodeScore ? 'Better' : 'Same/Worse', ")")), (initialCaptureBarcodeImage || recaptureBarcodeImage) && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ComparisonDivider, null), /*#__PURE__*/React__default.createElement(ComparisonHeader, {
|
|
9219
|
+
style: {
|
|
9220
|
+
marginTop: '0.25rem'
|
|
9221
|
+
}
|
|
9222
|
+
}, "\uD83D\uDD0D Visual Comparison"), /*#__PURE__*/React__default.createElement(BarcodeComparisonImagesContainer, null, initialCaptureBarcodeImage && (/*#__PURE__*/React__default.createElement(BarcodeComparisonImageWrapper, null, /*#__PURE__*/React__default.createElement(BarcodeComparisonImageLabel, null, "Initial Capture"), /*#__PURE__*/React__default.createElement(BarcodeComparisonImage, {
|
|
9223
|
+
src: initialCaptureBarcodeImage,
|
|
9224
|
+
alt: "Initial capture barcode",
|
|
9225
|
+
onDoubleClick: function onDoubleClick() {
|
|
9226
|
+
return downloadImage(initialCaptureBarcodeImage, "barcode-initial-".concat(initialBarcodeScore.toFixed(3), ".jpg"));
|
|
9227
|
+
},
|
|
9228
|
+
title: "Double-click to download"
|
|
9229
|
+
}), /*#__PURE__*/React__default.createElement(BarcodeComparisonScoreLabel, {
|
|
9230
|
+
"$isHigher": initialBarcodeScore >= recaptureBarcodeScore
|
|
9231
|
+
}, initialBarcodeScore.toFixed(3)))), recaptureBarcodeImage && (/*#__PURE__*/React__default.createElement(BarcodeComparisonImageWrapper, null, /*#__PURE__*/React__default.createElement(BarcodeComparisonImageLabel, null, "Recapture"), /*#__PURE__*/React__default.createElement(BarcodeComparisonImage, {
|
|
9232
|
+
src: recaptureBarcodeImage,
|
|
9233
|
+
alt: "Recapture barcode",
|
|
9234
|
+
onDoubleClick: function onDoubleClick() {
|
|
9235
|
+
return downloadImage(recaptureBarcodeImage, "barcode-recapture-".concat(recaptureBarcodeScore.toFixed(3), ".jpg"));
|
|
9236
|
+
},
|
|
9237
|
+
title: "Double-click to download"
|
|
9238
|
+
}), /*#__PURE__*/React__default.createElement(BarcodeComparisonScoreLabel, {
|
|
9239
|
+
"$isHigher": recaptureBarcodeScore > initialBarcodeScore
|
|
9240
|
+
}, recaptureBarcodeScore.toFixed(3))))))))) : (/*#__PURE__*/React__default.createElement(BarcodeComparisonCard, null, /*#__PURE__*/React__default.createElement(ComparisonHeader, null, "\u26A0\uFE0F Recapture Attempted"), /*#__PURE__*/React__default.createElement(ComparisonRow, null, /*#__PURE__*/React__default.createElement(ComparisonLabel, null, "Initial Score:"), /*#__PURE__*/React__default.createElement(ComparisonScoreBadge, null, initialBarcodeScore.toFixed(3))), /*#__PURE__*/React__default.createElement(ComparisonRow, null, /*#__PURE__*/React__default.createElement(ComparisonLabel, null, "Recapture Result:"), /*#__PURE__*/React__default.createElement(ComparisonValue, null, "No barcode found")), initialCaptureBarcodeImage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ComparisonDivider, null), /*#__PURE__*/React__default.createElement(ComparisonHeader, {
|
|
9241
|
+
style: {
|
|
9242
|
+
marginTop: '0.25rem'
|
|
9243
|
+
}
|
|
9244
|
+
}, "\uD83D\uDD0D Barcode Image (kept)"), /*#__PURE__*/React__default.createElement(BarcodeComparisonImagesContainer, {
|
|
9245
|
+
style: {
|
|
9246
|
+
gridTemplateColumns: '1fr'
|
|
9247
|
+
}
|
|
9248
|
+
}, /*#__PURE__*/React__default.createElement(BarcodeComparisonImageWrapper, null, /*#__PURE__*/React__default.createElement(BarcodeComparisonImageLabel, null, "Initial Capture"), /*#__PURE__*/React__default.createElement(BarcodeComparisonImage, {
|
|
9249
|
+
src: initialCaptureBarcodeImage,
|
|
9250
|
+
alt: "Initial capture barcode",
|
|
9251
|
+
onDoubleClick: function onDoubleClick() {
|
|
9252
|
+
return downloadImage(initialCaptureBarcodeImage, "barcode-initial-".concat(initialBarcodeScore.toFixed(3), ".jpg"));
|
|
9253
|
+
},
|
|
9254
|
+
title: "Double-click to download"
|
|
9255
|
+
}), /*#__PURE__*/React__default.createElement(BarcodeComparisonScoreLabel, {
|
|
9256
|
+
"$isHigher": true
|
|
9257
|
+
}, initialBarcodeScore.toFixed(3))))))))))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DebugSection, null, /*#__PURE__*/React__default.createElement(DebugLabel, null, "Document Type:"), /*#__PURE__*/React__default.createElement(DebugValue, null, doc.documentType)), /*#__PURE__*/React__default.createElement(DebugSection, null, /*#__PURE__*/React__default.createElement(DebugLabel, null, "Detection Score:"), /*#__PURE__*/React__default.createElement(ScoreBadge, {
|
|
9258
|
+
"$score": (_c = doc.detectionScore) !== null && _c !== void 0 ? _c : 0,
|
|
9259
|
+
"$type": "detection"
|
|
9260
|
+
}, ((_d = doc.detectionScore) !== null && _d !== void 0 ? _d : 0).toFixed(3))), /*#__PURE__*/React__default.createElement(DebugSection, null, /*#__PURE__*/React__default.createElement(DebugLabel, null, "Focus Score:"), /*#__PURE__*/React__default.createElement(ScoreBadge, {
|
|
9261
|
+
"$score": (_e = doc.focusScore) !== null && _e !== void 0 ? _e : 0,
|
|
9262
|
+
"$type": "focus"
|
|
9263
|
+
}, ((_f = doc.focusScore) !== null && _f !== void 0 ? _f : 0).toFixed(3))), /*#__PURE__*/React__default.createElement(DebugSection, null, /*#__PURE__*/React__default.createElement(DebugLabel, null, "Bounding Box:"), /*#__PURE__*/React__default.createElement(DebugValue, null, JSON.stringify(doc.boundingBox, null, 2))))))));
|
|
9264
|
+
}), (clientBarcodeDecodeResult || nativeBarcodeDecodeResult || !capturedDocuments.idBarcodeImage) && (/*#__PURE__*/React__default.createElement(BarcodeResultsSection, null, !capturedDocuments.idBarcodeImage && (/*#__PURE__*/React__default.createElement(NoPDF417Warning, null, "\u26A0\uFE0F No PDF417 barcode detected during capture")), clientBarcodeDecodeResult && (/*#__PURE__*/React__default.createElement(ClientBarcodeResultCard, null, /*#__PURE__*/React__default.createElement(ClientBarcodeHeader, null, "\u2705 Dynamsoft (", clientBarcodeDecodeResult.format, ")"), parsedBarcodeData && parsedBarcodeData.fields.length > 0 ? (/*#__PURE__*/React__default.createElement(ClientBarcodeFieldsTable, null, /*#__PURE__*/React__default.createElement("tbody", null, parsedBarcodeData.fields.map(function (field) {
|
|
9265
|
+
return /*#__PURE__*/React__default.createElement(ClientBarcodeFieldTableRow, {
|
|
9266
|
+
key: field.code
|
|
9267
|
+
}, /*#__PURE__*/React__default.createElement(ClientBarcodeFieldLabelCell, null, field.label), /*#__PURE__*/React__default.createElement(ClientBarcodeFieldValueCell, null, field.value));
|
|
9268
|
+
})))) : (/*#__PURE__*/React__default.createElement(ClientBarcodeRow, null, /*#__PURE__*/React__default.createElement(ClientBarcodeLabel, null, "Raw Data:"), /*#__PURE__*/React__default.createElement(ClientBarcodeData, null, clientBarcodeDecodeResult.text))))), barcodeComparisonResult && (/*#__PURE__*/React__default.createElement(BarcodeComparisonBadge, {
|
|
9269
|
+
"$match": barcodeComparisonResult.match
|
|
9270
|
+
}, barcodeComparisonResult.match ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u2705 Results Match")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\u26A0\uFE0F Results Differ")))), nativeBarcodeDecodeResult && (/*#__PURE__*/React__default.createElement(NativeBarcodeResultCard, null, /*#__PURE__*/React__default.createElement(NativeBarcodeHeader, null, "\uD83D\uDD0D Native Decode (", nativeBarcodeDecodeResult.method === 'native' ? 'BarcodeDetector API' : 'zxing-js', ")"), parsedNativeBarcodeData && parsedNativeBarcodeData.fields.length > 0 ? (/*#__PURE__*/React__default.createElement(NativeBarcodeFieldsTable, null, /*#__PURE__*/React__default.createElement("tbody", null, parsedNativeBarcodeData.fields.map(function (field) {
|
|
9271
|
+
return /*#__PURE__*/React__default.createElement(NativeBarcodeFieldTableRow, {
|
|
9272
|
+
key: field.code
|
|
9273
|
+
}, /*#__PURE__*/React__default.createElement(NativeBarcodeFieldLabelCell, null, field.label), /*#__PURE__*/React__default.createElement(NativeBarcodeFieldValueCell, null, field.value));
|
|
9274
|
+
})))) : (/*#__PURE__*/React__default.createElement(NativeBarcodeRow, null, /*#__PURE__*/React__default.createElement(NativeBarcodeLabel, null, "Raw Data:"), /*#__PURE__*/React__default.createElement(NativeBarcodeData, null, nativeBarcodeDecodeResult.text))))))))), /*#__PURE__*/React__default.createElement(ButtonsColumn, {
|
|
8665
9275
|
className: classNames.buttonsRow
|
|
8666
9276
|
}, /*#__PURE__*/React__default.createElement(WideButton, {
|
|
8667
9277
|
ref: submitButtonRef,
|
|
@@ -8679,13 +9289,138 @@ var IdCaptureSuccess = function IdCaptureSuccess(_a) {
|
|
|
8679
9289
|
finished: true
|
|
8680
9290
|
}, verbiage.retryText)))));
|
|
8681
9291
|
};
|
|
8682
|
-
var Heading$a = styled.h1(templateObject_1$
|
|
8683
|
-
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$
|
|
8684
|
-
var ImageRow = styled(OverlayImageRow)(templateObject_3$
|
|
8685
|
-
var ImageCol$1 = styled.div(templateObject_4$
|
|
8686
|
-
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$
|
|
8687
|
-
var
|
|
8688
|
-
var
|
|
9292
|
+
var Heading$a = styled.h1(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"], ["\n font-size: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.5rem;\n"])));
|
|
9293
|
+
var ImagesContainer = styled(OverlayImageContainer)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"], ["\n flex-grow: 1;\n overflow-y: auto;\n padding-bottom: 0;\n max-width: 100%;\n"])));
|
|
9294
|
+
var ImageRow = styled(OverlayImageRow)(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"], ["\n max-width: 100%;\n flex-direction: column;\n position: relative;\n width: 100%;\n"])));
|
|
9295
|
+
var ImageCol$1 = styled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"], ["\n width: 450px;\n max-width: 100%;\n max-height: none !important;\n"])));
|
|
9296
|
+
var StyledImage = styled(CapturedDocumentImg)(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n"], ["\n width: 100%;\n border-radius: 12px;\n"])));
|
|
9297
|
+
var DebugInfoContainer = styled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 0.375rem;\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n padding: 0.625rem;\n background: #f8f9fa;\n border-radius: 6px;\n border: 1px solid #e9ecef;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n line-height: 1.35;\n text-align: left;\n"])));
|
|
9298
|
+
var DebugSection = styled.div(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"], ["\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin: 0;\n"])));
|
|
9299
|
+
var DebugLabel = styled.span(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"], ["\n font-weight: 600;\n color: #495057;\n font-size: 0.8125rem;\n flex-shrink: 0;\n width: 110px;\n"])));
|
|
9300
|
+
var DebugValue = styled.span(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"], ["\n color: #212529;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.8125rem;\n"])));
|
|
9301
|
+
var ScoreBadge = styled.span(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: 0.1875rem 0.5rem;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid\n ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n padding: 0.1875rem 0.5rem;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid\n ", ";\n"])), function (_a) {
|
|
9302
|
+
var $score = _a.$score,
|
|
9303
|
+
$type = _a.$type;
|
|
9304
|
+
var thresholds = $type === 'readability' ? {
|
|
9305
|
+
good: 0.5,
|
|
9306
|
+
medium: 0.2
|
|
9307
|
+
} : $type === 'detection' ? {
|
|
9308
|
+
good: 0.7,
|
|
9309
|
+
medium: 0.4
|
|
9310
|
+
} : {
|
|
9311
|
+
good: 0.7,
|
|
9312
|
+
medium: 0.4
|
|
9313
|
+
};
|
|
9314
|
+
if ($score >= thresholds.good) return '#d4edda';
|
|
9315
|
+
if ($score >= thresholds.medium) return '#fff3cd';
|
|
9316
|
+
return '#f8d7da';
|
|
9317
|
+
}, function (_a) {
|
|
9318
|
+
var $score = _a.$score,
|
|
9319
|
+
$type = _a.$type;
|
|
9320
|
+
var thresholds = $type === 'readability' ? {
|
|
9321
|
+
good: 0.5,
|
|
9322
|
+
medium: 0.2
|
|
9323
|
+
} : $type === 'detection' ? {
|
|
9324
|
+
good: 0.7,
|
|
9325
|
+
medium: 0.4
|
|
9326
|
+
} : {
|
|
9327
|
+
good: 0.7,
|
|
9328
|
+
medium: 0.4
|
|
9329
|
+
};
|
|
9330
|
+
if ($score >= thresholds.good) return '#155724';
|
|
9331
|
+
if ($score >= thresholds.medium) return '#856404';
|
|
9332
|
+
return '#721c24';
|
|
9333
|
+
}, function (_a) {
|
|
9334
|
+
var $score = _a.$score,
|
|
9335
|
+
$type = _a.$type;
|
|
9336
|
+
var thresholds = $type === 'readability' ? {
|
|
9337
|
+
good: 0.5,
|
|
9338
|
+
medium: 0.2
|
|
9339
|
+
} : $type === 'detection' ? {
|
|
9340
|
+
good: 0.7,
|
|
9341
|
+
medium: 0.4
|
|
9342
|
+
} : {
|
|
9343
|
+
good: 0.7,
|
|
9344
|
+
medium: 0.4
|
|
9345
|
+
};
|
|
9346
|
+
if ($score >= thresholds.good) return '#c3e6cb';
|
|
9347
|
+
if ($score >= thresholds.medium) return '#ffeaa7';
|
|
9348
|
+
return '#f5c6cb';
|
|
9349
|
+
});
|
|
9350
|
+
var BarcodeComparisonCard = styled.div(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n margin-top: 0.375rem;\n padding: 0.625rem;\n background: #e7f3ff;\n border-radius: 6px;\n border: 1px solid #b3d9ff;\n"], ["\n margin-top: 0.375rem;\n padding: 0.625rem;\n background: #e7f3ff;\n border-radius: 6px;\n border: 1px solid #b3d9ff;\n"])));
|
|
9351
|
+
var ComparisonHeader = styled.div(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n font-size: 0.8125rem;\n font-weight: 700;\n margin-bottom: 0.375rem;\n display: flex;\n align-items: center;\n gap: 0.375rem;\n color: #004085;\n"], ["\n font-size: 0.8125rem;\n font-weight: 700;\n margin-bottom: 0.375rem;\n display: flex;\n align-items: center;\n gap: 0.375rem;\n color: #004085;\n"])));
|
|
9352
|
+
var ComparisonRow = styled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0.25rem;\n gap: 0.75rem;\n font-size: 0.8125rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0.25rem;\n gap: 0.75rem;\n font-size: 0.8125rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
9353
|
+
var ComparisonLabel = styled.span(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n font-weight: 500;\n color: #495057;\n"], ["\n font-weight: 500;\n color: #495057;\n"])));
|
|
9354
|
+
var ComparisonValue = styled.span(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n font-weight: 600;\n color: #212529;\n"], ["\n font-weight: 600;\n color: #212529;\n"])));
|
|
9355
|
+
var ComparisonDivider = styled.hr(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n border: none;\n border-top: 1px solid #b3d9ff;\n margin: 0.375rem 0;\n"], ["\n border: none;\n border-top: 1px solid #b3d9ff;\n margin: 0.375rem 0;\n"])));
|
|
9356
|
+
var ComparisonScoreBadge = styled.span(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: 0.1875rem 0.5rem;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.75rem;\n background: white;\n color: #212529;\n border: 1px solid #dee2e6;\n"], ["\n display: inline-flex;\n align-items: center;\n padding: 0.1875rem 0.5rem;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.75rem;\n background: white;\n color: #212529;\n border: 1px solid #dee2e6;\n"])));
|
|
9357
|
+
var ImprovementBadge = styled.span(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: 0.1875rem 0.5rem;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n padding: 0.1875rem 0.5rem;\n border-radius: 4px;\n font-weight: 600;\n font-size: 0.75rem;\n background: ", ";\n color: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
|
9358
|
+
var $improved = _a.$improved;
|
|
9359
|
+
return $improved ? '#d4edda' : '#e2e3e5';
|
|
9360
|
+
}, function (_a) {
|
|
9361
|
+
var $improved = _a.$improved;
|
|
9362
|
+
return $improved ? '#155724' : '#383d41';
|
|
9363
|
+
}, function (_a) {
|
|
9364
|
+
var $improved = _a.$improved;
|
|
9365
|
+
return $improved ? '#c3e6cb' : '#d6d8db';
|
|
9366
|
+
});
|
|
9367
|
+
var BarcodeComparisonImagesContainer = styled.div(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-top: 0.75rem;\n padding: 0.5rem;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 6px;\n"], ["\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-top: 0.75rem;\n padding: 0.5rem;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 6px;\n"])));
|
|
9368
|
+
var BarcodeComparisonImageWrapper = styled.div(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.375rem;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.375rem;\n"])));
|
|
9369
|
+
var BarcodeComparisonImageLabel = styled.span(templateObject_21$1 || (templateObject_21$1 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 700;\n color: #004085;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding: 0.25rem 0.5rem;\n background: white;\n border-radius: 4px;\n border: 1px solid #b3d9ff;\n"], ["\n font-size: 0.75rem;\n font-weight: 700;\n color: #004085;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n padding: 0.25rem 0.5rem;\n background: white;\n border-radius: 4px;\n border: 1px solid #b3d9ff;\n"])));
|
|
9370
|
+
var BarcodeComparisonImage = styled.img(templateObject_22$1 || (templateObject_22$1 = __makeTemplateObject(["\n width: 100%;\n height: auto;\n border-radius: 6px;\n border: 2px solid #dee2e6;\n background: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition:\n transform 0.15s ease,\n box-shadow 0.15s ease;\n\n &:hover {\n transform: scale(1.02);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n }\n\n &:active {\n transform: scale(0.98);\n }\n"], ["\n width: 100%;\n height: auto;\n border-radius: 6px;\n border: 2px solid #dee2e6;\n background: white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n transition:\n transform 0.15s ease,\n box-shadow 0.15s ease;\n\n &:hover {\n transform: scale(1.02);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n }\n\n &:active {\n transform: scale(0.98);\n }\n"])));
|
|
9371
|
+
var BarcodeComparisonScoreLabel = styled.span(templateObject_23$1 || (templateObject_23$1 = __makeTemplateObject(["\n font-size: 0.8125rem;\n font-weight: 700;\n color: ", ";\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n padding: 0.25rem 0.5rem;\n background: ", ";\n border-radius: 4px;\n border: 1px solid ", ";\n"], ["\n font-size: 0.8125rem;\n font-weight: 700;\n color: ", ";\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n padding: 0.25rem 0.5rem;\n background: ", ";\n border-radius: 4px;\n border: 1px solid ", ";\n"])), function (_a) {
|
|
9372
|
+
var $isHigher = _a.$isHigher;
|
|
9373
|
+
return $isHigher ? '#155724' : '#495057';
|
|
9374
|
+
}, function (_a) {
|
|
9375
|
+
var $isHigher = _a.$isHigher;
|
|
9376
|
+
return $isHigher ? '#d4edda' : 'white';
|
|
9377
|
+
}, function (_a) {
|
|
9378
|
+
var $isHigher = _a.$isHigher;
|
|
9379
|
+
return $isHigher ? '#c3e6cb' : '#dee2e6';
|
|
9380
|
+
});
|
|
9381
|
+
var ClientBarcodeResultCard = styled.div(templateObject_24$1 || (templateObject_24$1 = __makeTemplateObject(["\n margin-top: 0.75rem;\n margin-bottom: 1rem;\n padding: 0.75rem;\n background: #d4edda;\n border-radius: 8px;\n border: 1px solid #c3e6cb;\n text-align: left;\n"], ["\n margin-top: 0.75rem;\n margin-bottom: 1rem;\n padding: 0.75rem;\n background: #d4edda;\n border-radius: 8px;\n border: 1px solid #c3e6cb;\n text-align: left;\n"])));
|
|
9382
|
+
var ClientBarcodeHeader = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n color: #155724;\n"], ["\n font-size: 0.875rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n color: #155724;\n"])));
|
|
9383
|
+
var ClientBarcodeRow = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 0.375rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-bottom: 0.375rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
9384
|
+
var ClientBarcodeLabel = styled.span(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 600;\n color: #155724;\n margin-bottom: 0.125rem;\n"], ["\n font-size: 0.75rem;\n font-weight: 600;\n color: #155724;\n margin-bottom: 0.125rem;\n"])));
|
|
9385
|
+
var ClientBarcodeData = styled.pre(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n font-size: 0.6875rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n color: #155724;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-all;\n max-height: 150px;\n overflow-y: auto;\n"], ["\n font-size: 0.6875rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n color: #155724;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-all;\n max-height: 150px;\n overflow-y: auto;\n"])));
|
|
9386
|
+
var ClientBarcodeFieldsTable = styled.table(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n display: block;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n border-collapse: collapse;\n\n tbody {\n display: table;\n width: 100%;\n }\n"], ["\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n display: block;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n border-collapse: collapse;\n\n tbody {\n display: table;\n width: 100%;\n }\n"])));
|
|
9387
|
+
var ClientBarcodeFieldTableRow = styled.tr(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n border-bottom: 1px solid rgba(21, 87, 36, 0.1);\n\n &:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 480px) {\n display: flex;\n flex-direction: column;\n padding: 0.375rem 0;\n }\n"], ["\n border-bottom: 1px solid rgba(21, 87, 36, 0.1);\n\n &:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 480px) {\n display: flex;\n flex-direction: column;\n padding: 0.375rem 0;\n }\n"])));
|
|
9388
|
+
var ClientBarcodeFieldLabelCell = styled.td(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 600;\n color: #155724;\n padding: 0.375rem 0.75rem 0.375rem 0;\n white-space: nowrap;\n vertical-align: top;\n\n @media (max-width: 480px) {\n padding: 0 0 0.125rem 0;\n white-space: normal;\n }\n"], ["\n font-size: 0.75rem;\n font-weight: 600;\n color: #155724;\n padding: 0.375rem 0.75rem 0.375rem 0;\n white-space: nowrap;\n vertical-align: top;\n\n @media (max-width: 480px) {\n padding: 0 0 0.125rem 0;\n white-space: normal;\n }\n"])));
|
|
9389
|
+
var ClientBarcodeFieldValueCell = styled.td(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n font-size: 0.75rem;\n color: #155724;\n padding: 0.375rem 0;\n word-break: break-word;\n\n @media (max-width: 480px) {\n padding: 0;\n }\n"], ["\n font-size: 0.75rem;\n color: #155724;\n padding: 0.375rem 0;\n word-break: break-word;\n\n @media (max-width: 480px) {\n padding: 0;\n }\n"
|
|
9390
|
+
// Native barcode result styles (blue theme for comparison)
|
|
9391
|
+
])));
|
|
9392
|
+
// Native barcode result styles (blue theme for comparison)
|
|
9393
|
+
var NativeBarcodeResultCard = styled.div(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n margin-top: 0.75rem;\n margin-bottom: 1rem;\n padding: 0.75rem;\n background: #cce5ff;\n border-radius: 8px;\n border: 1px solid #b8daff;\n text-align: left;\n"], ["\n margin-top: 0.75rem;\n margin-bottom: 1rem;\n padding: 0.75rem;\n background: #cce5ff;\n border-radius: 8px;\n border: 1px solid #b8daff;\n text-align: left;\n"])));
|
|
9394
|
+
var NativeBarcodeHeader = styled.div(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n color: #004085;\n"], ["\n font-size: 0.875rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n color: #004085;\n"])));
|
|
9395
|
+
var NativeBarcodeRow = styled.div(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-bottom: 0.375rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-bottom: 0.375rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
9396
|
+
var NativeBarcodeLabel = styled.span(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 600;\n color: #004085;\n margin-bottom: 0.125rem;\n"], ["\n font-size: 0.75rem;\n font-weight: 600;\n color: #004085;\n margin-bottom: 0.125rem;\n"])));
|
|
9397
|
+
var NativeBarcodeData = styled.pre(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n font-size: 0.6875rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n color: #004085;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-all;\n max-height: 150px;\n overflow-y: auto;\n"], ["\n font-size: 0.6875rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n color: #004085;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-all;\n max-height: 150px;\n overflow-y: auto;\n"])));
|
|
9398
|
+
var NativeBarcodeFieldsTable = styled.table(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n display: block;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n border-collapse: collapse;\n\n tbody {\n display: table;\n width: 100%;\n }\n"], ["\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n display: block;\n background: rgba(255, 255, 255, 0.5);\n padding: 0.5rem;\n border-radius: 4px;\n border-collapse: collapse;\n\n tbody {\n display: table;\n width: 100%;\n }\n"])));
|
|
9399
|
+
var NativeBarcodeFieldTableRow = styled.tr(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n border-bottom: 1px solid rgba(0, 64, 133, 0.1);\n\n &:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 480px) {\n display: flex;\n flex-direction: column;\n padding: 0.375rem 0;\n }\n"], ["\n border-bottom: 1px solid rgba(0, 64, 133, 0.1);\n\n &:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 480px) {\n display: flex;\n flex-direction: column;\n padding: 0.375rem 0;\n }\n"])));
|
|
9400
|
+
var NativeBarcodeFieldLabelCell = styled.td(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 600;\n color: #004085;\n padding: 0.375rem 0.75rem 0.375rem 0;\n white-space: nowrap;\n vertical-align: top;\n\n @media (max-width: 480px) {\n padding: 0 0 0.125rem 0;\n white-space: normal;\n }\n"], ["\n font-size: 0.75rem;\n font-weight: 600;\n color: #004085;\n padding: 0.375rem 0.75rem 0.375rem 0;\n white-space: nowrap;\n vertical-align: top;\n\n @media (max-width: 480px) {\n padding: 0 0 0.125rem 0;\n white-space: normal;\n }\n"])));
|
|
9401
|
+
var NativeBarcodeFieldValueCell = styled.td(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n font-size: 0.75rem;\n color: #004085;\n padding: 0.375rem 0;\n word-break: break-word;\n\n @media (max-width: 480px) {\n padding: 0;\n }\n"], ["\n font-size: 0.75rem;\n color: #004085;\n padding: 0.375rem 0;\n word-break: break-word;\n\n @media (max-width: 480px) {\n padding: 0;\n }\n"
|
|
9402
|
+
// Comparison badge showing whether native and Dynamsoft results match
|
|
9403
|
+
])));
|
|
9404
|
+
// Comparison badge showing whether native and Dynamsoft results match
|
|
9405
|
+
var BarcodeComparisonBadge = styled.div(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n margin: 0.5rem 0;\n padding: 0.625rem 1rem;\n border-radius: 8px;\n font-size: 0.875rem;\n font-weight: 700;\n background: ", ";\n color: ", ";\n border: 2px solid ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n margin: 0.5rem 0;\n padding: 0.625rem 1rem;\n border-radius: 8px;\n font-size: 0.875rem;\n font-weight: 700;\n background: ", ";\n color: ", ";\n border: 2px solid ", ";\n"
|
|
9406
|
+
// Container for barcode decode results section
|
|
9407
|
+
])), function (_a) {
|
|
9408
|
+
var $match = _a.$match;
|
|
9409
|
+
return $match ? '#d4edda' : '#fff3cd';
|
|
9410
|
+
}, function (_a) {
|
|
9411
|
+
var $match = _a.$match;
|
|
9412
|
+
return $match ? '#155724' : '#856404';
|
|
9413
|
+
}, function (_a) {
|
|
9414
|
+
var $match = _a.$match;
|
|
9415
|
+
return $match ? '#28a745' : '#ffc107';
|
|
9416
|
+
});
|
|
9417
|
+
// Container for barcode decode results section
|
|
9418
|
+
var BarcodeResultsSection = styled.div(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n width: 450px;\n max-width: 100%;\n margin-top: 1rem;\n flex-shrink: 0;\n"], ["\n width: 450px;\n max-width: 100%;\n margin-top: 1rem;\n flex-shrink: 0;\n"
|
|
9419
|
+
// Warning shown when no PDF417 barcode was detected
|
|
9420
|
+
])));
|
|
9421
|
+
// Warning shown when no PDF417 barcode was detected
|
|
9422
|
+
var NoPDF417Warning = styled.div(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n font-size: 0.875rem;\n font-weight: 600;\n background: #fff3cd;\n color: #856404;\n border: 1px solid #ffc107;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n font-size: 0.875rem;\n font-weight: 600;\n background: #fff3cd;\n color: #856404;\n border: 1px solid #ffc107;\n"])));
|
|
9423
|
+
var templateObject_1$F, templateObject_2$B, templateObject_3$r, templateObject_4$l, templateObject_5$g, templateObject_6$a, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;
|
|
8689
9424
|
|
|
8690
9425
|
function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallback) {
|
|
8691
9426
|
var _this = this;
|
|
@@ -8720,44 +9455,420 @@ function useShowSuccessScreen(skipSuccessScreen, successScreenReady, onDoneCallb
|
|
|
8720
9455
|
return !skipSuccessScreen || skipSuccessScreenResolvedFalse;
|
|
8721
9456
|
}
|
|
8722
9457
|
|
|
8723
|
-
|
|
8724
|
-
|
|
8725
|
-
|
|
8726
|
-
|
|
8727
|
-
|
|
8728
|
-
|
|
8729
|
-
|
|
8730
|
-
|
|
8731
|
-
|
|
9458
|
+
/**
|
|
9459
|
+
* Native barcode decoder that tries browser BarcodeDetector API first,
|
|
9460
|
+
* then falls back to zxing-js for broader compatibility.
|
|
9461
|
+
*
|
|
9462
|
+
* This provides a free alternative to Dynamsoft for PDF417 barcode scanning.
|
|
9463
|
+
*/
|
|
9464
|
+
// CDN URL for zxing-js library
|
|
9465
|
+
var ZXING_CDN_URL = 'https://unpkg.com/@zxing/library@latest';
|
|
9466
|
+
var zxingLoadPromise = null;
|
|
9467
|
+
var zxingInstance = null;
|
|
9468
|
+
var nativeSupportChecked = false;
|
|
9469
|
+
var nativeSupportsFormat = false;
|
|
9470
|
+
/**
|
|
9471
|
+
* Check if the native BarcodeDetector API is available
|
|
9472
|
+
*/
|
|
9473
|
+
function isNativeBarcodeDetectorAvailable() {
|
|
9474
|
+
return typeof window !== 'undefined' && 'BarcodeDetector' in window;
|
|
8732
9475
|
}
|
|
8733
|
-
|
|
8734
|
-
|
|
8735
|
-
|
|
8736
|
-
|
|
8737
|
-
|
|
9476
|
+
/**
|
|
9477
|
+
* Check if the native BarcodeDetector supports PDF417 format
|
|
9478
|
+
*/
|
|
9479
|
+
function checkNativePDF417Support() {
|
|
9480
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9481
|
+
var formats, error_1;
|
|
9482
|
+
return __generator(this, function (_a) {
|
|
9483
|
+
switch (_a.label) {
|
|
9484
|
+
case 0:
|
|
9485
|
+
if (nativeSupportChecked) {
|
|
9486
|
+
return [2 /*return*/, nativeSupportsFormat];
|
|
9487
|
+
}
|
|
9488
|
+
if (!isNativeBarcodeDetectorAvailable()) {
|
|
9489
|
+
nativeSupportChecked = true;
|
|
9490
|
+
nativeSupportsFormat = false;
|
|
9491
|
+
return [2 /*return*/, false];
|
|
9492
|
+
}
|
|
9493
|
+
_a.label = 1;
|
|
9494
|
+
case 1:
|
|
9495
|
+
_a.trys.push([1, 3,, 4]);
|
|
9496
|
+
return [4 /*yield*/, window.BarcodeDetector.getSupportedFormats()];
|
|
9497
|
+
case 2:
|
|
9498
|
+
formats = _a.sent();
|
|
9499
|
+
nativeSupportsFormat = formats.includes('pdf417');
|
|
9500
|
+
nativeSupportChecked = true;
|
|
9501
|
+
log('[NativeBarcodeDecoder] Native BarcodeDetector formats:', formats);
|
|
9502
|
+
log('[NativeBarcodeDecoder] PDF417 supported:', nativeSupportsFormat);
|
|
9503
|
+
return [2 /*return*/, nativeSupportsFormat];
|
|
9504
|
+
case 3:
|
|
9505
|
+
error_1 = _a.sent();
|
|
9506
|
+
warn('[NativeBarcodeDecoder] Error checking native format support:', error_1);
|
|
9507
|
+
nativeSupportChecked = true;
|
|
9508
|
+
nativeSupportsFormat = false;
|
|
9509
|
+
return [2 /*return*/, false];
|
|
9510
|
+
case 4:
|
|
9511
|
+
return [2 /*return*/];
|
|
9512
|
+
}
|
|
9513
|
+
});
|
|
9514
|
+
});
|
|
8738
9515
|
}
|
|
8739
|
-
|
|
8740
|
-
|
|
8741
|
-
|
|
8742
|
-
|
|
8743
|
-
return
|
|
8744
|
-
|
|
8745
|
-
|
|
8746
|
-
|
|
8747
|
-
}
|
|
8748
|
-
|
|
8749
|
-
|
|
8750
|
-
|
|
8751
|
-
|
|
8752
|
-
|
|
8753
|
-
|
|
8754
|
-
|
|
8755
|
-
|
|
8756
|
-
|
|
8757
|
-
|
|
8758
|
-
|
|
8759
|
-
|
|
8760
|
-
|
|
9516
|
+
/**
|
|
9517
|
+
* Load a script from URL
|
|
9518
|
+
*/
|
|
9519
|
+
function loadScript$1(url) {
|
|
9520
|
+
return new Promise(function (resolve, reject) {
|
|
9521
|
+
if (document.querySelector("script[src=\"".concat(url, "\"]"))) {
|
|
9522
|
+
resolve();
|
|
9523
|
+
return;
|
|
9524
|
+
}
|
|
9525
|
+
var script = document.createElement('script');
|
|
9526
|
+
script.src = url;
|
|
9527
|
+
script.async = true;
|
|
9528
|
+
script.onload = function () {
|
|
9529
|
+
return resolve();
|
|
9530
|
+
};
|
|
9531
|
+
script.onerror = function () {
|
|
9532
|
+
return reject(new Error("Failed to load script from ".concat(url)));
|
|
9533
|
+
};
|
|
9534
|
+
document.head.appendChild(script);
|
|
9535
|
+
});
|
|
9536
|
+
}
|
|
9537
|
+
/**
|
|
9538
|
+
* Load zxing-js from CDN
|
|
9539
|
+
*/
|
|
9540
|
+
function loadZXing() {
|
|
9541
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9542
|
+
var _this = this;
|
|
9543
|
+
return __generator(this, function (_a) {
|
|
9544
|
+
if (window.ZXing) {
|
|
9545
|
+
return [2 /*return*/, window.ZXing];
|
|
9546
|
+
}
|
|
9547
|
+
if (zxingLoadPromise) {
|
|
9548
|
+
return [2 /*return*/, zxingLoadPromise];
|
|
9549
|
+
}
|
|
9550
|
+
zxingLoadPromise = function () {
|
|
9551
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
9552
|
+
return __generator(this, function (_a) {
|
|
9553
|
+
switch (_a.label) {
|
|
9554
|
+
case 0:
|
|
9555
|
+
return [4 /*yield*/, loadScript$1(ZXING_CDN_URL)];
|
|
9556
|
+
case 1:
|
|
9557
|
+
_a.sent();
|
|
9558
|
+
if (!window.ZXing) {
|
|
9559
|
+
throw new Error('Failed to load ZXing library from CDN');
|
|
9560
|
+
}
|
|
9561
|
+
log('[NativeBarcodeDecoder] Loaded @zxing/library from CDN');
|
|
9562
|
+
return [2 /*return*/, window.ZXing];
|
|
9563
|
+
}
|
|
9564
|
+
});
|
|
9565
|
+
});
|
|
9566
|
+
}();
|
|
9567
|
+
return [2 /*return*/, zxingLoadPromise];
|
|
9568
|
+
});
|
|
9569
|
+
});
|
|
9570
|
+
}
|
|
9571
|
+
/**
|
|
9572
|
+
* Create a ZXing reader instance configured for PDF417
|
|
9573
|
+
*/
|
|
9574
|
+
function getZXingReader() {
|
|
9575
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9576
|
+
var ZXing, reader;
|
|
9577
|
+
return __generator(this, function (_a) {
|
|
9578
|
+
switch (_a.label) {
|
|
9579
|
+
case 0:
|
|
9580
|
+
if (zxingInstance) {
|
|
9581
|
+
return [2 /*return*/, zxingInstance];
|
|
9582
|
+
}
|
|
9583
|
+
return [4 /*yield*/, loadZXing()
|
|
9584
|
+
// Use the dedicated PDF417 reader class
|
|
9585
|
+
];
|
|
9586
|
+
case 1:
|
|
9587
|
+
ZXing = _a.sent();
|
|
9588
|
+
reader = new ZXing.BrowserPDF417Reader();
|
|
9589
|
+
zxingInstance = reader;
|
|
9590
|
+
return [2 /*return*/, reader];
|
|
9591
|
+
}
|
|
9592
|
+
});
|
|
9593
|
+
});
|
|
9594
|
+
}
|
|
9595
|
+
/**
|
|
9596
|
+
* Decode a barcode using the native BarcodeDetector API
|
|
9597
|
+
*/
|
|
9598
|
+
function decodeWithNative(image) {
|
|
9599
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9600
|
+
var detector, results, result, error_2;
|
|
9601
|
+
return __generator(this, function (_a) {
|
|
9602
|
+
switch (_a.label) {
|
|
9603
|
+
case 0:
|
|
9604
|
+
if (!isNativeBarcodeDetectorAvailable()) {
|
|
9605
|
+
return [2 /*return*/, null];
|
|
9606
|
+
}
|
|
9607
|
+
_a.label = 1;
|
|
9608
|
+
case 1:
|
|
9609
|
+
_a.trys.push([1, 3,, 4]);
|
|
9610
|
+
detector = new window.BarcodeDetector({
|
|
9611
|
+
formats: ['pdf417']
|
|
9612
|
+
});
|
|
9613
|
+
return [4 /*yield*/, detector.detect(image)];
|
|
9614
|
+
case 2:
|
|
9615
|
+
results = _a.sent();
|
|
9616
|
+
if (results.length > 0) {
|
|
9617
|
+
result = results[0];
|
|
9618
|
+
return [2 /*return*/, {
|
|
9619
|
+
text: result.rawValue,
|
|
9620
|
+
format: result.format,
|
|
9621
|
+
method: 'native'
|
|
9622
|
+
}];
|
|
9623
|
+
}
|
|
9624
|
+
return [2 /*return*/, null];
|
|
9625
|
+
case 3:
|
|
9626
|
+
error_2 = _a.sent();
|
|
9627
|
+
warn('[NativeBarcodeDecoder] Native decode error:', error_2);
|
|
9628
|
+
return [2 /*return*/, null];
|
|
9629
|
+
case 4:
|
|
9630
|
+
return [2 /*return*/];
|
|
9631
|
+
}
|
|
9632
|
+
});
|
|
9633
|
+
});
|
|
9634
|
+
}
|
|
9635
|
+
/**
|
|
9636
|
+
* Decode a barcode using zxing-js
|
|
9637
|
+
*/
|
|
9638
|
+
function decodeWithZXing(image) {
|
|
9639
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9640
|
+
var reader, result, text, format, error_3;
|
|
9641
|
+
return __generator(this, function (_a) {
|
|
9642
|
+
switch (_a.label) {
|
|
9643
|
+
case 0:
|
|
9644
|
+
_a.trys.push([0, 7,, 8]);
|
|
9645
|
+
return [4 /*yield*/, getZXingReader()];
|
|
9646
|
+
case 1:
|
|
9647
|
+
reader = _a.sent();
|
|
9648
|
+
result = void 0;
|
|
9649
|
+
if (!(image instanceof HTMLImageElement)) return [3 /*break*/, 3];
|
|
9650
|
+
return [4 /*yield*/, reader.decodeFromImage(image)];
|
|
9651
|
+
case 2:
|
|
9652
|
+
// decodeFromImage takes an image element or undefined + URL
|
|
9653
|
+
result = _a.sent();
|
|
9654
|
+
return [3 /*break*/, 6];
|
|
9655
|
+
case 3:
|
|
9656
|
+
if (!(image instanceof HTMLCanvasElement)) return [3 /*break*/, 5];
|
|
9657
|
+
return [4 /*yield*/, reader.decodeFromCanvas(image)];
|
|
9658
|
+
case 4:
|
|
9659
|
+
result = _a.sent();
|
|
9660
|
+
return [3 /*break*/, 6];
|
|
9661
|
+
case 5:
|
|
9662
|
+
throw new Error('Unsupported image type for ZXing decoder');
|
|
9663
|
+
case 6:
|
|
9664
|
+
text = result.text || result.getText();
|
|
9665
|
+
format = result.getBarcodeFormat().toString();
|
|
9666
|
+
return [2 /*return*/, {
|
|
9667
|
+
text: text,
|
|
9668
|
+
format: format,
|
|
9669
|
+
method: 'zxing'
|
|
9670
|
+
}];
|
|
9671
|
+
case 7:
|
|
9672
|
+
error_3 = _a.sent();
|
|
9673
|
+
// NotFoundException is expected when no barcode is found
|
|
9674
|
+
if (error_3 instanceof Error && error_3.name !== 'NotFoundException' && !error_3.message.includes('No barcode') && !error_3.message.includes('not found')) {
|
|
9675
|
+
warn('[NativeBarcodeDecoder] ZXing decode error:', error_3);
|
|
9676
|
+
}
|
|
9677
|
+
return [2 /*return*/, null];
|
|
9678
|
+
case 8:
|
|
9679
|
+
return [2 /*return*/];
|
|
9680
|
+
}
|
|
9681
|
+
});
|
|
9682
|
+
});
|
|
9683
|
+
}
|
|
9684
|
+
/**
|
|
9685
|
+
* Convert various image sources to HTMLImageElement or HTMLCanvasElement
|
|
9686
|
+
*/
|
|
9687
|
+
function prepareImageForDecoding(source) {
|
|
9688
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
9689
|
+
var canvas, ctx, canvas, ctx, url_1, img_1, canvas, ctx;
|
|
9690
|
+
return __generator(this, function (_a) {
|
|
9691
|
+
switch (_a.label) {
|
|
9692
|
+
case 0:
|
|
9693
|
+
if (!(source instanceof HTMLImageElement)) return [3 /*break*/, 3];
|
|
9694
|
+
if (!!source.complete) return [3 /*break*/, 2];
|
|
9695
|
+
return [4 /*yield*/, new Promise(function (resolve, reject) {
|
|
9696
|
+
source.onload = function () {
|
|
9697
|
+
return resolve();
|
|
9698
|
+
};
|
|
9699
|
+
source.onerror = function () {
|
|
9700
|
+
return reject(new Error('Failed to load image'));
|
|
9701
|
+
};
|
|
9702
|
+
})];
|
|
9703
|
+
case 1:
|
|
9704
|
+
_a.sent();
|
|
9705
|
+
_a.label = 2;
|
|
9706
|
+
case 2:
|
|
9707
|
+
return [2 /*return*/, source];
|
|
9708
|
+
case 3:
|
|
9709
|
+
// If it's a canvas, return it directly
|
|
9710
|
+
if (source instanceof HTMLCanvasElement) {
|
|
9711
|
+
return [2 /*return*/, source];
|
|
9712
|
+
}
|
|
9713
|
+
// If it's a video element, capture a frame to canvas
|
|
9714
|
+
if (source instanceof HTMLVideoElement) {
|
|
9715
|
+
canvas = document.createElement('canvas');
|
|
9716
|
+
canvas.width = source.videoWidth;
|
|
9717
|
+
canvas.height = source.videoHeight;
|
|
9718
|
+
ctx = canvas.getContext('2d');
|
|
9719
|
+
if (!ctx) {
|
|
9720
|
+
throw new Error('Failed to get canvas context');
|
|
9721
|
+
}
|
|
9722
|
+
ctx.drawImage(source, 0, 0);
|
|
9723
|
+
return [2 /*return*/, canvas];
|
|
9724
|
+
}
|
|
9725
|
+
// If it's ImageData, draw to canvas
|
|
9726
|
+
if (source instanceof ImageData) {
|
|
9727
|
+
canvas = document.createElement('canvas');
|
|
9728
|
+
canvas.width = source.width;
|
|
9729
|
+
canvas.height = source.height;
|
|
9730
|
+
ctx = canvas.getContext('2d');
|
|
9731
|
+
if (!ctx) {
|
|
9732
|
+
throw new Error('Failed to get canvas context');
|
|
9733
|
+
}
|
|
9734
|
+
ctx.putImageData(source, 0, 0);
|
|
9735
|
+
return [2 /*return*/, canvas];
|
|
9736
|
+
}
|
|
9737
|
+
if (!(source instanceof Blob)) return [3 /*break*/, 7];
|
|
9738
|
+
url_1 = URL.createObjectURL(source);
|
|
9739
|
+
_a.label = 4;
|
|
9740
|
+
case 4:
|
|
9741
|
+
_a.trys.push([4,, 6, 7]);
|
|
9742
|
+
img_1 = new Image();
|
|
9743
|
+
img_1.crossOrigin = 'anonymous';
|
|
9744
|
+
return [4 /*yield*/, new Promise(function (resolve, reject) {
|
|
9745
|
+
img_1.onload = function () {
|
|
9746
|
+
return resolve();
|
|
9747
|
+
};
|
|
9748
|
+
img_1.onerror = function () {
|
|
9749
|
+
return reject(new Error('Failed to load image from blob'));
|
|
9750
|
+
};
|
|
9751
|
+
img_1.src = url_1;
|
|
9752
|
+
})];
|
|
9753
|
+
case 5:
|
|
9754
|
+
_a.sent();
|
|
9755
|
+
return [2 /*return*/, img_1];
|
|
9756
|
+
case 6:
|
|
9757
|
+
URL.revokeObjectURL(url_1);
|
|
9758
|
+
return [7 /*endfinally*/];
|
|
9759
|
+
case 7:
|
|
9760
|
+
// If it's an ImageBitmap, draw to canvas
|
|
9761
|
+
if (source instanceof ImageBitmap) {
|
|
9762
|
+
canvas = document.createElement('canvas');
|
|
9763
|
+
canvas.width = source.width;
|
|
9764
|
+
canvas.height = source.height;
|
|
9765
|
+
ctx = canvas.getContext('2d');
|
|
9766
|
+
if (!ctx) {
|
|
9767
|
+
throw new Error('Failed to get canvas context');
|
|
9768
|
+
}
|
|
9769
|
+
ctx.drawImage(source, 0, 0);
|
|
9770
|
+
return [2 /*return*/, canvas];
|
|
9771
|
+
}
|
|
9772
|
+
throw new Error('Unsupported image source type');
|
|
9773
|
+
}
|
|
9774
|
+
});
|
|
9775
|
+
});
|
|
9776
|
+
}
|
|
9777
|
+
/**
|
|
9778
|
+
* Decode a PDF417 barcode from an image source.
|
|
9779
|
+
*
|
|
9780
|
+
* Tries native BarcodeDetector API first (if available and supports PDF417),
|
|
9781
|
+
* then falls back to zxing-js.
|
|
9782
|
+
*
|
|
9783
|
+
* @param source - Image source (HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageData, Blob, ImageBitmap)
|
|
9784
|
+
* @param options - Decode options
|
|
9785
|
+
* @returns Decoded barcode result or null if no barcode found
|
|
9786
|
+
*/
|
|
9787
|
+
function decodePDF417(source_1) {
|
|
9788
|
+
return __awaiter(this, arguments, void 0, function (source, options) {
|
|
9789
|
+
var _a, tryNative, _b, fallbackToZXing, _c, preloadZXing, supportsNative, nativeResult, preparedImage, zxingResult;
|
|
9790
|
+
if (options === void 0) {
|
|
9791
|
+
options = {};
|
|
9792
|
+
}
|
|
9793
|
+
return __generator(this, function (_d) {
|
|
9794
|
+
switch (_d.label) {
|
|
9795
|
+
case 0:
|
|
9796
|
+
_a = options.tryNative, tryNative = _a === void 0 ? true : _a, _b = options.fallbackToZXing, fallbackToZXing = _b === void 0 ? true : _b, _c = options.preloadZXing, preloadZXing = _c === void 0 ? false : _c;
|
|
9797
|
+
// Optionally preload zxing in background
|
|
9798
|
+
if (preloadZXing && fallbackToZXing) {
|
|
9799
|
+
loadZXing()["catch"](function () {
|
|
9800
|
+
/* ignore preload errors */
|
|
9801
|
+
});
|
|
9802
|
+
}
|
|
9803
|
+
if (!tryNative) return [3 /*break*/, 3];
|
|
9804
|
+
return [4 /*yield*/, checkNativePDF417Support()];
|
|
9805
|
+
case 1:
|
|
9806
|
+
supportsNative = _d.sent();
|
|
9807
|
+
if (!supportsNative) return [3 /*break*/, 3];
|
|
9808
|
+
return [4 /*yield*/, decodeWithNative(source)];
|
|
9809
|
+
case 2:
|
|
9810
|
+
nativeResult = _d.sent();
|
|
9811
|
+
if (nativeResult) {
|
|
9812
|
+
return [2 /*return*/, nativeResult];
|
|
9813
|
+
}
|
|
9814
|
+
_d.label = 3;
|
|
9815
|
+
case 3:
|
|
9816
|
+
if (!fallbackToZXing) return [3 /*break*/, 6];
|
|
9817
|
+
return [4 /*yield*/, prepareImageForDecoding(source)];
|
|
9818
|
+
case 4:
|
|
9819
|
+
preparedImage = _d.sent();
|
|
9820
|
+
return [4 /*yield*/, decodeWithZXing(preparedImage)];
|
|
9821
|
+
case 5:
|
|
9822
|
+
zxingResult = _d.sent();
|
|
9823
|
+
if (zxingResult) {
|
|
9824
|
+
return [2 /*return*/, zxingResult];
|
|
9825
|
+
}
|
|
9826
|
+
_d.label = 6;
|
|
9827
|
+
case 6:
|
|
9828
|
+
return [2 /*return*/, null];
|
|
9829
|
+
}
|
|
9830
|
+
});
|
|
9831
|
+
});
|
|
9832
|
+
}
|
|
9833
|
+
|
|
9834
|
+
function setCanvasDimensions(canvas, width, height) {
|
|
9835
|
+
var _a;
|
|
9836
|
+
var devicePixelRatio = 1;
|
|
9837
|
+
if (typeof window !== 'undefined') devicePixelRatio = window.devicePixelRatio;
|
|
9838
|
+
canvas.width = width * devicePixelRatio;
|
|
9839
|
+
canvas.height = height * devicePixelRatio;
|
|
9840
|
+
canvas.style.width = width + 'px';
|
|
9841
|
+
canvas.style.height = height + 'px';
|
|
9842
|
+
(_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.scale(devicePixelRatio, devicePixelRatio);
|
|
9843
|
+
}
|
|
9844
|
+
function resetCanvasDimensions(canvas) {
|
|
9845
|
+
canvas.width = 0;
|
|
9846
|
+
canvas.height = 0;
|
|
9847
|
+
canvas.style.width = '0';
|
|
9848
|
+
canvas.style.height = '0';
|
|
9849
|
+
}
|
|
9850
|
+
|
|
9851
|
+
var IdCardGuideImageContainer = styled(IdCardBorder)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n position: relative;\n ", "\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
9852
|
+
return props.$isVisible ? '' : 'opacity: 0;';
|
|
9853
|
+
}, function (props) {
|
|
9854
|
+
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
9855
|
+
});
|
|
9856
|
+
var IdCardGuideImage = styled.img(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"], ["\n max-height: 100%;\n transform-style: preserve-3d;\n ", "\n ", "\n"])), function (props) {
|
|
9857
|
+
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
9858
|
+
}, function (props) {
|
|
9859
|
+
return props.$isInvisible ? 'opacity: 0;' : '';
|
|
9860
|
+
});
|
|
9861
|
+
function IdCardBorder(_a) {
|
|
9862
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
9863
|
+
var children = _a.children,
|
|
9864
|
+
_s = _a.status,
|
|
9865
|
+
status = _s === void 0 ? 'ready' : _s,
|
|
9866
|
+
_t = _a.borderWidth,
|
|
9867
|
+
borderWidth = _t === void 0 ? 20 : _t,
|
|
9868
|
+
_u = _a.borderRadius,
|
|
9869
|
+
borderRadius = _u === void 0 ? 25 : _u,
|
|
9870
|
+
_v = _a.borderColor,
|
|
9871
|
+
borderColor = _v === void 0 ? 'white' : _v,
|
|
8761
9872
|
_w = _a.aspectRatio,
|
|
8762
9873
|
aspectRatio = _w === void 0 ? 1 : _w,
|
|
8763
9874
|
_x = _a.progress,
|
|
@@ -8892,17 +10003,17 @@ function IdCardBorderSvg(_a) {
|
|
|
8892
10003
|
className: isProgressBar ? "idmSdkProgressBorder ".concat(progressPaused ? 'idmSdkProgressPaused' : '') : ''
|
|
8893
10004
|
}));
|
|
8894
10005
|
}
|
|
8895
|
-
var IdCardBorderContainer = styled.div(templateObject_3$
|
|
8896
|
-
var IdCardBorderInner = styled.div(templateObject_4$
|
|
8897
|
-
var SvgOverlay = styled.svg(templateObject_5$
|
|
8898
|
-
var IdCardBorderRect = styled.rect(templateObject_6$
|
|
10006
|
+
var IdCardBorderContainer = styled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: relative;\n margin: auto;\n\n & .idmSdkWaves {\n position: absolute;\n animation: ", " 2s ease-out infinite;\n transform-style: preserve-3d;\n\n &:nth-child(3) {\n animation-delay: 0.66s;\n }\n\n &:nth-child(4) {\n animation-delay: 1.33s;\n }\n }\n"])), wavesAnimation);
|
|
10007
|
+
var IdCardBorderInner = styled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"], ["\n max-height: 100%;\n max-width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n"])));
|
|
10008
|
+
var SvgOverlay = styled.svg(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n"])));
|
|
10009
|
+
var IdCardBorderRect = styled.rect(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"], ["\n &.idmSdkProgressBorder {\n animation: ", " ", "\n ", ";\n }\n\n &.idmSdkProgressPaused {\n animation-play-state: paused;\n }\n"])), progressBorderAnimation, function (props) {
|
|
8899
10010
|
var _a;
|
|
8900
10011
|
return (_a = props.$speed) !== null && _a !== void 0 ? _a : '3s';
|
|
8901
10012
|
}, function (props) {
|
|
8902
10013
|
var _a;
|
|
8903
10014
|
return (_a = props.$fillMode) !== null && _a !== void 0 ? _a : 'forwards';
|
|
8904
10015
|
});
|
|
8905
|
-
var templateObject_1$
|
|
10016
|
+
var templateObject_1$E, templateObject_2$A, templateObject_3$q, templateObject_4$k, templateObject_5$f, templateObject_6$9;
|
|
8906
10017
|
|
|
8907
10018
|
var defaultIdCaptureGuideImages = {
|
|
8908
10019
|
portrait: {
|
|
@@ -9050,7 +10161,7 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9050
10161
|
clearTimeout(timeout);
|
|
9051
10162
|
};
|
|
9052
10163
|
}, []);
|
|
9053
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
10164
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$2, {
|
|
9054
10165
|
"$isLandscape": orientation === 'landscape',
|
|
9055
10166
|
style: {
|
|
9056
10167
|
aspectRatio: aspectRatio
|
|
@@ -9091,15 +10202,15 @@ var IdVideoCaptureFlipIdPrompt = function IdVideoCaptureFlipIdPrompt(_a) {
|
|
|
9091
10202
|
style: imageStyle
|
|
9092
10203
|
})));
|
|
9093
10204
|
};
|
|
9094
|
-
var Wrapper$
|
|
10205
|
+
var Wrapper$2 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n ", "\n\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])), function (props) {
|
|
9095
10206
|
return props.$isLandscape ? 'height: 100%;' : 'height: 100%;';
|
|
9096
10207
|
});
|
|
9097
|
-
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$
|
|
10208
|
+
var FlipImageContainer = styled(IdCardGuideImageContainer)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"], ["\n backface-visibility: hidden;\n transition: transform ", "s;\n transform: ", ";\n transform-style: preserve-3d;\n position: absolute;\n display: block;\n top: 0;\n height: 100%; // todo: branch between desktop and mobile\n"])), function (props) {
|
|
9098
10209
|
return props.$transitionTime;
|
|
9099
10210
|
}, function (props) {
|
|
9100
10211
|
return props.$transforms;
|
|
9101
10212
|
});
|
|
9102
|
-
var templateObject_1$
|
|
10213
|
+
var templateObject_1$D, templateObject_2$z;
|
|
9103
10214
|
|
|
9104
10215
|
var GuideOrientationContext = /*#__PURE__*/createContext({
|
|
9105
10216
|
orientation: 'landscape',
|
|
@@ -9194,7 +10305,7 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9194
10305
|
clearTimeout(timeout);
|
|
9195
10306
|
};
|
|
9196
10307
|
}, []);
|
|
9197
|
-
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
10308
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$1, {
|
|
9198
10309
|
style: {
|
|
9199
10310
|
aspectRatio: imageAspectRatio
|
|
9200
10311
|
},
|
|
@@ -9238,10 +10349,10 @@ var FlipIdPrompt = function FlipIdPrompt(_a) {
|
|
|
9238
10349
|
height: height
|
|
9239
10350
|
})));
|
|
9240
10351
|
};
|
|
9241
|
-
var Wrapper = styled.div(templateObject_1$
|
|
10352
|
+
var Wrapper$1 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"], ["\n align-items: center;\n justify-content: center;\n display: flex;\n position: absolute;\n margin: auto;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n ", ";\n"])), function (props) {
|
|
9242
10353
|
return props.$isMobile ? props.$isLandscape ? 'height: 100%;' : 'width: 80%;' : props.$isLandscape ? 'height: 70%;' : 'width: 82%;';
|
|
9243
10354
|
});
|
|
9244
|
-
var templateObject_1$
|
|
10355
|
+
var templateObject_1$C;
|
|
9245
10356
|
|
|
9246
10357
|
var IdCaptureGuideOverlay = function IdCaptureGuideOverlay(_a) {
|
|
9247
10358
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
@@ -9387,10 +10498,10 @@ var regionClsx = function regionClsx(classNames, which) {
|
|
|
9387
10498
|
return v;
|
|
9388
10499
|
}).join(' ');
|
|
9389
10500
|
};
|
|
9390
|
-
var StyledPageContainer = styled.div(templateObject_1$
|
|
9391
|
-
var GuidesContainer = styled.div(templateObject_2$
|
|
9392
|
-
var GuideCenterRow = styled.div(templateObject_3$
|
|
9393
|
-
var GuideRegion = styled.div(templateObject_4$
|
|
10501
|
+
var StyledPageContainer = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"], ["\n position: relative;\n width: 100%;\n height: 100%;\n z-index: 1000;\n overflow: hidden;\n"])));
|
|
10502
|
+
var GuidesContainer = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n height: 100%;\n"])));
|
|
10503
|
+
var GuideCenterRow = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"], ["\n position: relative;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-items: center;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n min-height: 0;\n flex: 1;\n"])));
|
|
10504
|
+
var GuideRegion = styled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: end;\n width: 100%;\n position: relative;\n z-index: 1000;\n background: ", ";\n color: ", ";\n text-align: center;\n ", "\n ", "\n"])), function (props) {
|
|
9394
10505
|
var _a, _b, _c, _d, _e;
|
|
9395
10506
|
return (_e = (_a = props.$maskColor) !== null && _a !== void 0 ? _a : (_d = (_c = (_b = props.theme) === null || _b === void 0 ? void 0 : _b.idCapture) === null || _c === void 0 ? void 0 : _c.guideOverlay) === null || _d === void 0 ? void 0 : _d.backgroundColor) !== null && _e !== void 0 ? _e : 'rgba(0, 0, 0, 0.5)';
|
|
9396
10507
|
}, function (props) {
|
|
@@ -9401,23 +10512,23 @@ var GuideRegion = styled.div(templateObject_4$g || (templateObject_4$g = __makeT
|
|
|
9401
10512
|
}, function (props) {
|
|
9402
10513
|
return props.$minHeight ? "min-height: ".concat(props.$minHeight, "px;") : "";
|
|
9403
10514
|
});
|
|
9404
|
-
var Spacer = styled(GuideRegion)(templateObject_5$
|
|
9405
|
-
var GuideCenterRegion = styled.div(templateObject_6$
|
|
10515
|
+
var Spacer = styled(GuideRegion)(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: block;\n width: auto;\n"], ["\n display: block;\n width: auto;\n"])));
|
|
10516
|
+
var GuideCenterRegion = styled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"], ["\n ", "\n ", "\n transform-style: preserve-3d;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-height: 100%;\n height: 100%;\n"])), function (props) {
|
|
9406
10517
|
return props.$minWidth ? "min-width: ".concat(props.$minWidth, "px;") : "";
|
|
9407
10518
|
}, function (props) {
|
|
9408
10519
|
return props.$isMirrored ? 'transform: scaleX(-1);' : '';
|
|
9409
10520
|
});
|
|
9410
|
-
var GuideCenterBorder = styled.div(templateObject_7$
|
|
10521
|
+
var GuideCenterBorder = styled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n max-width: 100%;\n position: relative;\n ", "\n"], ["\n box-sizing: border-box;\n border: ", ";\n display: flex;\n flex: 1;\n justify-content: center;\n max-height: 100%;\n min-height: 0;\n max-width: 100%;\n position: relative;\n ", "\n"])), function (props) {
|
|
9411
10522
|
var _a, _b;
|
|
9412
10523
|
return "".concat((_a = props.$borderWidth) !== null && _a !== void 0 ? _a : 4, "px solid ").concat((_b = props.$borderColor) !== null && _b !== void 0 ? _b : 'white');
|
|
9413
10524
|
}, function (props) {
|
|
9414
10525
|
return props.$padding ? "padding: ".concat(props.$padding, "px;") : '';
|
|
9415
10526
|
});
|
|
9416
|
-
var GuideText = styled.span(templateObject_8$
|
|
9417
|
-
var GuideCenterInner = styled.div(templateObject_9$
|
|
10527
|
+
var GuideText = styled.span(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"], ["\n align-content: center;\n margin-top: 12px;\n margin-bottom: 12px;\n"])));
|
|
10528
|
+
var GuideCenterInner = styled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: relative;\n top: 0;\n margin: auto;\n ", "\n max-height: 100%;\n max-width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (props) {
|
|
9418
10529
|
return props.$isLandscape ? 'height: 100%;' : 'width: 90%;';
|
|
9419
10530
|
});
|
|
9420
|
-
var templateObject_1$
|
|
10531
|
+
var templateObject_1$B, templateObject_2$y, templateObject_3$p, templateObject_4$j, templateObject_5$e, templateObject_6$8, templateObject_7$5, templateObject_8$4, templateObject_9$3;
|
|
9421
10532
|
|
|
9422
10533
|
var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
9423
10534
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
@@ -9540,7 +10651,7 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9540
10651
|
ref: wrapperRef,
|
|
9541
10652
|
"$maskColor": maskColor !== null && maskColor !== void 0 ? maskColor : '',
|
|
9542
10653
|
className: classNames.canvasWrapper
|
|
9543
|
-
}, /*#__PURE__*/React__default.createElement(Canvas$
|
|
10654
|
+
}, /*#__PURE__*/React__default.createElement(Canvas$2, {
|
|
9544
10655
|
ref: canvasRef,
|
|
9545
10656
|
className: classNames.canvas
|
|
9546
10657
|
})), /*#__PURE__*/React__default.createElement(IdCaptureGuideOverlay, {
|
|
@@ -9558,11 +10669,174 @@ var IdCaptureFitGuide = function IdCaptureFitGuide(_a) {
|
|
|
9558
10669
|
progress: progress
|
|
9559
10670
|
}));
|
|
9560
10671
|
};
|
|
9561
|
-
var CanvasWrapper$1 = styled.div(templateObject_1$
|
|
10672
|
+
var CanvasWrapper$1 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n z-index: -1;\n"])), function (props) {
|
|
9562
10673
|
return props.$maskColor;
|
|
9563
10674
|
});
|
|
9564
|
-
var Canvas$
|
|
9565
|
-
var templateObject_1$
|
|
10675
|
+
var Canvas$2 = styled.canvas(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
10676
|
+
var templateObject_1$A, templateObject_2$x;
|
|
10677
|
+
|
|
10678
|
+
var PDF417_ASPECT_RATIO = 3 / 1;
|
|
10679
|
+
function BarcodeGuideOverlay(_a) {
|
|
10680
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
10681
|
+
var _l = _a.aspectRatio,
|
|
10682
|
+
aspectRatio = _l === void 0 ? PDF417_ASPECT_RATIO : _l,
|
|
10683
|
+
maskColor = _a.maskColor,
|
|
10684
|
+
_m = _a.cornerColor,
|
|
10685
|
+
cornerColor = _m === void 0 ? 'white' : _m,
|
|
10686
|
+
_o = _a.cornerLength,
|
|
10687
|
+
cornerLength = _o === void 0 ? 40 : _o,
|
|
10688
|
+
_p = _a.cornerWidth,
|
|
10689
|
+
cornerWidth = _p === void 0 ? 4 : _p,
|
|
10690
|
+
padding = _a.padding,
|
|
10691
|
+
_q = _a.borderRadius,
|
|
10692
|
+
borderRadius = _q === void 0 ? 8 : _q,
|
|
10693
|
+
_r = _a.headerText,
|
|
10694
|
+
headerText = _r === void 0 ? 'SCAN THE BARCODE' : _r,
|
|
10695
|
+
_s = _a.instructionText,
|
|
10696
|
+
instructionText = _s === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _s,
|
|
10697
|
+
_t = _a.isSuccess,
|
|
10698
|
+
isSuccess = _t === void 0 ? false : _t,
|
|
10699
|
+
_u = _a.successColor,
|
|
10700
|
+
successColor = _u === void 0 ? '#22c55e' : _u,
|
|
10701
|
+
_v = _a.classNames,
|
|
10702
|
+
classNames = _v === void 0 ? {} : _v;
|
|
10703
|
+
var canvasRef = useRef(null);
|
|
10704
|
+
var _w = useResizeObserver(),
|
|
10705
|
+
wrapperRef = _w.ref,
|
|
10706
|
+
_x = _w.width,
|
|
10707
|
+
wrapperWidth = _x === void 0 ? 1 : _x,
|
|
10708
|
+
_y = _w.height,
|
|
10709
|
+
wrapperHeight = _y === void 0 ? 1 : _y;
|
|
10710
|
+
var theme = useTheme();
|
|
10711
|
+
if (padding === undefined) {
|
|
10712
|
+
padding = isMobile() ? (_d = (_c = (_b = theme.idCapture) === null || _b === void 0 ? void 0 : _b.guideBox) === null || _c === void 0 ? void 0 : _c.mobilePadding) !== null && _d !== void 0 ? _d : 24 : (_g = (_f = (_e = theme.idCapture) === null || _e === void 0 ? void 0 : _e.guideBox) === null || _f === void 0 ? void 0 : _f.desktopPadding) !== null && _g !== void 0 ? _g : 48;
|
|
10713
|
+
}
|
|
10714
|
+
if (maskColor === undefined) {
|
|
10715
|
+
maskColor = (_k = (_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.guideOverlay) === null || _j === void 0 ? void 0 : _j.backgroundColor) !== null && _k !== void 0 ? _k : '#708090';
|
|
10716
|
+
}
|
|
10717
|
+
useEffect(function () {
|
|
10718
|
+
var canvas = canvasRef.current;
|
|
10719
|
+
if (!canvas) return;
|
|
10720
|
+
// Wait for valid dimensions from resize observer
|
|
10721
|
+
if (wrapperWidth <= 1 || wrapperHeight <= 1) return;
|
|
10722
|
+
var boundingWidth = wrapperWidth - padding * 2;
|
|
10723
|
+
var boundingHeight = wrapperHeight - padding * 2;
|
|
10724
|
+
// Start with bounding box dimensions
|
|
10725
|
+
var rectWidth = boundingWidth;
|
|
10726
|
+
var rectHeight = boundingWidth / aspectRatio;
|
|
10727
|
+
// If calculated height exceeds available height, constrain by height instead
|
|
10728
|
+
if (rectHeight > boundingHeight) {
|
|
10729
|
+
rectHeight = boundingHeight;
|
|
10730
|
+
rectWidth = boundingHeight * aspectRatio;
|
|
10731
|
+
}
|
|
10732
|
+
// Center the rectangle
|
|
10733
|
+
var rectX = padding + (boundingWidth - rectWidth) / 2;
|
|
10734
|
+
var rectY = padding + (boundingHeight - rectHeight) / 2;
|
|
10735
|
+
setCanvasDimensions(canvas, wrapperWidth, wrapperHeight);
|
|
10736
|
+
var ctx = canvas.getContext('2d');
|
|
10737
|
+
if (!ctx) return;
|
|
10738
|
+
// Fill with mask color
|
|
10739
|
+
ctx.fillStyle = maskColor;
|
|
10740
|
+
ctx.clearRect(0, 0, wrapperWidth, wrapperHeight);
|
|
10741
|
+
ctx.fillRect(0, 0, wrapperWidth, wrapperHeight);
|
|
10742
|
+
// Create the cutout
|
|
10743
|
+
ctx.beginPath();
|
|
10744
|
+
ctx.roundRect(rectX, rectY, rectWidth, rectHeight, borderRadius);
|
|
10745
|
+
ctx.fillStyle = 'rgba(0,0,0,1)';
|
|
10746
|
+
ctx.globalCompositeOperation = 'destination-out';
|
|
10747
|
+
ctx.fill();
|
|
10748
|
+
ctx.globalCompositeOperation = 'source-over';
|
|
10749
|
+
// Draw corner brackets
|
|
10750
|
+
var color = isSuccess ? successColor : cornerColor;
|
|
10751
|
+
ctx.strokeStyle = color;
|
|
10752
|
+
ctx.lineWidth = cornerWidth;
|
|
10753
|
+
ctx.lineCap = 'round';
|
|
10754
|
+
var effectiveCornerLength = Math.min(cornerLength, rectWidth / 3, rectHeight / 3);
|
|
10755
|
+
// Top-left corner
|
|
10756
|
+
ctx.beginPath();
|
|
10757
|
+
ctx.moveTo(rectX + effectiveCornerLength, rectY);
|
|
10758
|
+
ctx.lineTo(rectX + borderRadius, rectY);
|
|
10759
|
+
ctx.arcTo(rectX, rectY, rectX, rectY + borderRadius, borderRadius);
|
|
10760
|
+
ctx.lineTo(rectX, rectY + effectiveCornerLength);
|
|
10761
|
+
ctx.stroke();
|
|
10762
|
+
// Top-right corner
|
|
10763
|
+
ctx.beginPath();
|
|
10764
|
+
ctx.moveTo(rectX + rectWidth - effectiveCornerLength, rectY);
|
|
10765
|
+
ctx.lineTo(rectX + rectWidth - borderRadius, rectY);
|
|
10766
|
+
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + borderRadius, borderRadius);
|
|
10767
|
+
ctx.lineTo(rectX + rectWidth, rectY + effectiveCornerLength);
|
|
10768
|
+
ctx.stroke();
|
|
10769
|
+
// Bottom-left corner
|
|
10770
|
+
ctx.beginPath();
|
|
10771
|
+
ctx.moveTo(rectX, rectY + rectHeight - effectiveCornerLength);
|
|
10772
|
+
ctx.lineTo(rectX, rectY + rectHeight - borderRadius);
|
|
10773
|
+
ctx.arcTo(rectX, rectY + rectHeight, rectX + borderRadius, rectY + rectHeight, borderRadius);
|
|
10774
|
+
ctx.lineTo(rectX + effectiveCornerLength, rectY + rectHeight);
|
|
10775
|
+
ctx.stroke();
|
|
10776
|
+
// Bottom-right corner
|
|
10777
|
+
ctx.beginPath();
|
|
10778
|
+
ctx.moveTo(rectX + rectWidth, rectY + rectHeight - effectiveCornerLength);
|
|
10779
|
+
ctx.lineTo(rectX + rectWidth, rectY + rectHeight - borderRadius);
|
|
10780
|
+
ctx.arcTo(rectX + rectWidth, rectY + rectHeight, rectX + rectWidth - borderRadius, rectY + rectHeight, borderRadius);
|
|
10781
|
+
ctx.lineTo(rectX + rectWidth - effectiveCornerLength, rectY + rectHeight);
|
|
10782
|
+
ctx.stroke();
|
|
10783
|
+
return function () {
|
|
10784
|
+
resetCanvasDimensions(canvas);
|
|
10785
|
+
};
|
|
10786
|
+
}, [aspectRatio, borderRadius, cornerColor, cornerLength, cornerWidth, isSuccess, maskColor, padding, successColor, wrapperHeight, wrapperWidth]);
|
|
10787
|
+
return /*#__PURE__*/React__default.createElement(Wrapper, {
|
|
10788
|
+
ref: wrapperRef,
|
|
10789
|
+
className: classNames.wrapper
|
|
10790
|
+
}, /*#__PURE__*/React__default.createElement(Canvas$1, {
|
|
10791
|
+
ref: canvasRef,
|
|
10792
|
+
className: classNames.canvas
|
|
10793
|
+
}), /*#__PURE__*/React__default.createElement(TextOverlay, null, /*#__PURE__*/React__default.createElement(HeaderText, {
|
|
10794
|
+
className: classNames.header
|
|
10795
|
+
}, headerText), /*#__PURE__*/React__default.createElement(InstructionText, {
|
|
10796
|
+
className: classNames.instruction
|
|
10797
|
+
}, instructionText)));
|
|
10798
|
+
}
|
|
10799
|
+
var Wrapper = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1;\n"])));
|
|
10800
|
+
var Canvas$1 = styled.canvas(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
10801
|
+
var TextOverlay = styled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n padding-top: 48px;\n pointer-events: none;\n z-index: 2;\n"])));
|
|
10802
|
+
var HeaderText = styled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"], ["\n color: white;\n font-size: 24px;\n font-weight: 700;\n text-align: center;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 16px;\n"])));
|
|
10803
|
+
var InstructionText = styled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"], ["\n color: white;\n font-size: 16px;\n font-weight: 400;\n text-align: center;\n max-width: 300px;\n line-height: 1.4;\n opacity: 0.9;\n"])));
|
|
10804
|
+
var templateObject_1$z, templateObject_2$w, templateObject_3$o, templateObject_4$i, templateObject_5$d;
|
|
10805
|
+
|
|
10806
|
+
function BarcodeSuccessOverlay(_a) {
|
|
10807
|
+
var _b = _a.headerText,
|
|
10808
|
+
headerText = _b === void 0 ? 'Scan Successful!' : _b,
|
|
10809
|
+
_c = _a.processingText,
|
|
10810
|
+
processingText = _c === void 0 ? 'Processing...' : _c,
|
|
10811
|
+
_d = _a.successColor,
|
|
10812
|
+
successColor = _d === void 0 ? '#22c55e' : _d;
|
|
10813
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BarcodeGuideOverlay, {
|
|
10814
|
+
headerText: headerText,
|
|
10815
|
+
instructionText: processingText,
|
|
10816
|
+
isSuccess: true,
|
|
10817
|
+
successColor: successColor
|
|
10818
|
+
}), /*#__PURE__*/React__default.createElement(CheckmarkWrapper, null, /*#__PURE__*/React__default.createElement(CheckmarkCircle, {
|
|
10819
|
+
"$color": successColor
|
|
10820
|
+
}, /*#__PURE__*/React__default.createElement(CheckmarkIcon, {
|
|
10821
|
+
viewBox: "0 0 24 24",
|
|
10822
|
+
fill: "none"
|
|
10823
|
+
}, /*#__PURE__*/React__default.createElement(CheckmarkPath, {
|
|
10824
|
+
d: "M5 13l4 4L19 7",
|
|
10825
|
+
stroke: "white",
|
|
10826
|
+
strokeWidth: "3",
|
|
10827
|
+
strokeLinecap: "round",
|
|
10828
|
+
strokeLinejoin: "round"
|
|
10829
|
+
})))));
|
|
10830
|
+
}
|
|
10831
|
+
var scaleIn = keyframes(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"], ["\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n 50% {\n transform: scale(1.1);\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n"])));
|
|
10832
|
+
var drawCheck = keyframes(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n 0% {\n stroke-dashoffset: 24;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n"], ["\n 0% {\n stroke-dashoffset: 24;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n"])));
|
|
10833
|
+
var CheckmarkWrapper = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n"])));
|
|
10834
|
+
var CheckmarkCircle = styled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"], ["\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n animation: ", " 0.4s ease-out forwards;\n"])), function (props) {
|
|
10835
|
+
return props.$color;
|
|
10836
|
+
}, scaleIn);
|
|
10837
|
+
var CheckmarkIcon = styled.svg(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n width: 48px;\n height: 48px;\n"], ["\n width: 48px;\n height: 48px;\n"])));
|
|
10838
|
+
var CheckmarkPath = styled.path(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"], ["\n stroke-dasharray: 24;\n stroke-dashoffset: 24;\n animation: ", " 0.4s ease-out 0.2s forwards;\n"])), drawCheck);
|
|
10839
|
+
var templateObject_1$y, templateObject_2$v, templateObject_3$n, templateObject_4$h, templateObject_5$c, templateObject_6$7;
|
|
9566
10840
|
|
|
9567
10841
|
function IdCaptureGuides(_a) {
|
|
9568
10842
|
var _b = _a.guideType,
|
|
@@ -9584,7 +10858,15 @@ function IdCaptureGuides(_a) {
|
|
|
9584
10858
|
_k = _a.colors,
|
|
9585
10859
|
colors = _k === void 0 ? {} : _k,
|
|
9586
10860
|
_l = _a.verbiage,
|
|
9587
|
-
rawVerbiage = _l === void 0 ? {} : _l
|
|
10861
|
+
rawVerbiage = _l === void 0 ? {} : _l,
|
|
10862
|
+
_m = _a.isRequestingBetterBarcode,
|
|
10863
|
+
isRequestingBetterBarcode = _m === void 0 ? false : _m,
|
|
10864
|
+
_o = _a.isBarcodeSuccess,
|
|
10865
|
+
isBarcodeSuccess = _o === void 0 ? false : _o,
|
|
10866
|
+
_p = _a.barcodeHeaderText,
|
|
10867
|
+
barcodeHeaderText = _p === void 0 ? 'SCAN THE BARCODE' : _p,
|
|
10868
|
+
_q = _a.barcodeInstructionText,
|
|
10869
|
+
barcodeInstructionText = _q === void 0 ? 'Bring camera closer until the barcode fills the rectangular box.' : _q;
|
|
9588
10870
|
var state = useIdCaptureStore();
|
|
9589
10871
|
var isRearFacing = useCameraStore(function (state) {
|
|
9590
10872
|
return state.isRearFacing;
|
|
@@ -9594,6 +10876,18 @@ function IdCaptureGuides(_a) {
|
|
|
9594
10876
|
capturingText: 'Capturing...',
|
|
9595
10877
|
captureFailedText: 'Capture failed!'
|
|
9596
10878
|
});
|
|
10879
|
+
// Render barcode guide overlays when in barcode recapture state
|
|
10880
|
+
if (isRequestingBetterBarcode) {
|
|
10881
|
+
if (isBarcodeSuccess) {
|
|
10882
|
+
return /*#__PURE__*/React__default.createElement(BarcodeSuccessOverlay, null);
|
|
10883
|
+
}
|
|
10884
|
+
return /*#__PURE__*/React__default.createElement(BarcodeGuideOverlay, {
|
|
10885
|
+
headerText: barcodeHeaderText,
|
|
10886
|
+
instructionText: barcodeInstructionText
|
|
10887
|
+
});
|
|
10888
|
+
}
|
|
10889
|
+
// Client barcode scanning happens silently in the background
|
|
10890
|
+
// during normal ID back capture - no special UI needed here
|
|
9597
10891
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, guideType === 'overlay' && (/*#__PURE__*/React__default.createElement(IdCaptureGuideOverlay, {
|
|
9598
10892
|
images: images,
|
|
9599
10893
|
classNames: classNames,
|
|
@@ -9618,7 +10912,7 @@ function IdCaptureGuides(_a) {
|
|
|
9618
10912
|
})));
|
|
9619
10913
|
}
|
|
9620
10914
|
|
|
9621
|
-
var Spinner = styled.div(templateObject_1$
|
|
10915
|
+
var Spinner = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: ", " 1.2s linear infinite;\n box-sizing: content-box;\n }\n"], ["\n display: inline-block;\n width: ", "px;\n height: ", "px;\n margin: auto;\n\n &:after {\n content: ' ';\n display: block;\n width: ", "px;\n height: ", "px;\n margin: 8px;\n border-radius: 50%;\n border: ", "px solid\n ", ";\n border-color: ", " transparent\n ", " transparent;\n animation: ", " 1.2s linear infinite;\n box-sizing: content-box;\n }\n"])), function (_a) {
|
|
9622
10916
|
var $size = _a.$size;
|
|
9623
10917
|
return $size !== null && $size !== void 0 ? $size : 80;
|
|
9624
10918
|
}, function (_a) {
|
|
@@ -9643,11 +10937,11 @@ var Spinner = styled.div(templateObject_1$w || (templateObject_1$w = __makeTempl
|
|
|
9643
10937
|
var $color = _a.$color;
|
|
9644
10938
|
return $color !== null && $color !== void 0 ? $color : '#888';
|
|
9645
10939
|
}, dualRingSpinnerAnimation);
|
|
9646
|
-
var SpinnerPageContainer = styled.div(templateObject_2$
|
|
10940
|
+
var SpinnerPageContainer = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n"])));
|
|
9647
10941
|
function SpinnerPage() {
|
|
9648
10942
|
return /*#__PURE__*/React__default.createElement(SpinnerPageContainer, null, /*#__PURE__*/React__default.createElement(Spinner, null));
|
|
9649
10943
|
}
|
|
9650
|
-
var templateObject_1$
|
|
10944
|
+
var templateObject_1$x, templateObject_2$u;
|
|
9651
10945
|
|
|
9652
10946
|
var IdCaptureImagePreview = function IdCaptureImagePreview(_a) {
|
|
9653
10947
|
var _b = _a.classNames,
|
|
@@ -9734,11 +11028,11 @@ var SelfieProgressPreview = function SelfieProgressPreview(_a) {
|
|
|
9734
11028
|
onError: onError
|
|
9735
11029
|
})));
|
|
9736
11030
|
};
|
|
9737
|
-
var StyledSpinner = styled(Spinner)(templateObject_1$
|
|
9738
|
-
var ImagePreviewWrapper = styled.div(templateObject_2$
|
|
9739
|
-
var ImagePreviewText = styled.div(templateObject_3$
|
|
9740
|
-
var ImagePreviewImageWrapper = styled.div(templateObject_4$
|
|
9741
|
-
var templateObject_1$
|
|
11031
|
+
var StyledSpinner = styled(Spinner)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"], ["\n position: relative;\n top: 4px;\n left: -3px;\n margin: 0 3px 0 -12px;\n"])));
|
|
11032
|
+
var ImagePreviewWrapper = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"], ["\n position: absolute;\n display: flex;\n flex-direction: column;\n height: 33%;\n bottom: 12px;\n right: 12px;\n"])));
|
|
11033
|
+
var ImagePreviewText = styled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"], ["\n display: block;\n position: absolute;\n top: -32px;\n font:\n 14px -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n Helvetica,\n Arial,\n sans-serif,\n 'Apple Color Emoji',\n 'Segoe UI Emoji',\n 'Segoe UI Symbol';\n color: white;\n text-align: center;\n margin: 0 auto;\n width: 100%;\n"])));
|
|
11034
|
+
var ImagePreviewImageWrapper = styled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"], ["\n position: relative;\n height: calc(100% - 8px);\n padding: 4px;\n border-radius: 4px;\n background: white;\n\n & > img {\n border-radius: 4px;\n width: auto;\n max-height: 100%;\n }\n"])));
|
|
11035
|
+
var templateObject_1$w, templateObject_2$t, templateObject_3$m, templateObject_4$g;
|
|
9742
11036
|
|
|
9743
11037
|
var documentCaptureInitialState = {
|
|
9744
11038
|
documents: [],
|
|
@@ -10084,16 +11378,16 @@ var DocumentCaptureGuideOverlay = function DocumentCaptureGuideOverlay(_a) {
|
|
|
10084
11378
|
ref: canvasRef
|
|
10085
11379
|
}));
|
|
10086
11380
|
};
|
|
10087
|
-
var CanvasWrapper = styled.div(templateObject_1$
|
|
11381
|
+
var CanvasWrapper = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"], ["\n flex-grow: 1;\n background-clip: padding-box;\n box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
|
|
10088
11382
|
return props.$maskColor;
|
|
10089
11383
|
});
|
|
10090
|
-
var Canvas = styled.canvas(templateObject_2$
|
|
10091
|
-
var templateObject_1$
|
|
11384
|
+
var Canvas = styled.canvas(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
11385
|
+
var templateObject_1$v, templateObject_2$s;
|
|
10092
11386
|
|
|
10093
|
-
var CameraFeedWrapper = styled.div(templateObject_1$
|
|
11387
|
+
var CameraFeedWrapper = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
10094
11388
|
return props.$mode === 'snapToGuides' ? "display: flex;\n position: absolute;\n left: ".concat(props.$x, "px;\n top: ").concat(props.$y, "px;\n width: ").concat(props.$w, "px;\n height: ").concat(props.$h, "px;") : "";
|
|
10095
11389
|
});
|
|
10096
|
-
var templateObject_1$
|
|
11390
|
+
var templateObject_1$u;
|
|
10097
11391
|
|
|
10098
11392
|
var CameraVideoTag = function CameraVideoTag(props) {
|
|
10099
11393
|
var _a = useCameraStore(useShallow(function (store) {
|
|
@@ -10123,10 +11417,10 @@ var CameraVideoTag = function CameraVideoTag(props) {
|
|
|
10123
11417
|
"$isRearFacing": isRearFacing
|
|
10124
11418
|
}, props));
|
|
10125
11419
|
};
|
|
10126
|
-
var FullscreenVideoTag = styled.video(templateObject_1$
|
|
11420
|
+
var FullscreenVideoTag = styled.video(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n transform: ", ";\n transform-style: preserve-3d;\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"], ["\n transform: ", ";\n transform-style: preserve-3d;\n min-width: 100%;\n min-height: 100%;\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: 100%;\n object-fit: cover;\n background: black;\n z-index: -2;\n"])), function (props) {
|
|
10127
11421
|
return props.$isRearFacing ? '' : 'scaleX(-1)';
|
|
10128
11422
|
});
|
|
10129
|
-
var templateObject_1$
|
|
11423
|
+
var templateObject_1$t;
|
|
10130
11424
|
|
|
10131
11425
|
var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
10132
11426
|
var _b, _c, _d, _e;
|
|
@@ -10273,21 +11567,21 @@ var DocumentCaptureScreen = function DocumentCaptureScreen(_a) {
|
|
|
10273
11567
|
disabled: !cameraReady || capturing
|
|
10274
11568
|
}, !cameraReady ? verbiage.loadingBtnText : capturing ? verbiage.capturingBtnText : verbiage.captureBtnText))))));
|
|
10275
11569
|
};
|
|
10276
|
-
var CaptureContainer = styled.div(templateObject_1$
|
|
10277
|
-
var HeadingRow = styled.div(templateObject_2$
|
|
11570
|
+
var CaptureContainer = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n"])));
|
|
11571
|
+
var HeadingRow = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n background: ", ";\n text-align: center;\n color: white;\n"], ["\n background: ", ";\n text-align: center;\n color: white;\n"])), function (props) {
|
|
10278
11572
|
return props.$maskColor;
|
|
10279
11573
|
});
|
|
10280
|
-
var Heading$9 = styled.h1(templateObject_3$
|
|
10281
|
-
var FooterRow = styled.div(templateObject_4$
|
|
11574
|
+
var Heading$9 = styled.h1(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n font-size: 22px;\n"], ["\n font-size: 22px;\n"])));
|
|
11575
|
+
var FooterRow = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"], ["\n background: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 0 20px 20px;\n height: auto;\n color: white;\n"])), function (props) {
|
|
10282
11576
|
return props.$maskColor;
|
|
10283
11577
|
});
|
|
10284
|
-
var Instructions = styled.div(templateObject_5$
|
|
11578
|
+
var Instructions = styled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n max-height: ", ";\n overflow-y: auto;\n"], ["\n max-height: ", ";\n overflow-y: auto;\n"])), function (props) {
|
|
10285
11579
|
var _a, _b, _c;
|
|
10286
11580
|
return (_c = (_b = (_a = props.theme.documentCapture) === null || _a === void 0 ? void 0 : _a.instructions) === null || _b === void 0 ? void 0 : _b.maxHeight) !== null && _c !== void 0 ? _c : '8rem';
|
|
10287
11581
|
});
|
|
10288
|
-
var StyledButtonsRow$8 = styled(ButtonsRow$2)(templateObject_6$
|
|
10289
|
-
var PreviewImage = styled.img(templateObject_7$
|
|
10290
|
-
var templateObject_1$
|
|
11582
|
+
var StyledButtonsRow$8 = styled(ButtonsRow$2)(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n padding-top: 20px;\n"], ["\n padding-top: 20px;\n"])));
|
|
11583
|
+
var PreviewImage = styled.img(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n"])));
|
|
11584
|
+
var templateObject_1$s, templateObject_2$r, templateObject_3$l, templateObject_4$f, templateObject_5$b, templateObject_6$6, templateObject_7$4;
|
|
10291
11585
|
|
|
10292
11586
|
var DocumentCaptureWizard = function DocumentCaptureWizard(_a) {
|
|
10293
11587
|
var onSuccess = _a.onSuccess,
|
|
@@ -10511,7 +11805,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
10511
11805
|
className: classNames.inner
|
|
10512
11806
|
}, !silentFallback && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Heading$8, {
|
|
10513
11807
|
className: classNames.heading
|
|
10514
|
-
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(Description$
|
|
11808
|
+
}, verbiage.headingText), /*#__PURE__*/React__default.createElement(Description$4, {
|
|
10515
11809
|
className: classNames.description
|
|
10516
11810
|
}, verbiage.descriptionText))), (images.length > 0 || isProcessing) && (/*#__PURE__*/React__default.createElement(OverlayImageRow, {
|
|
10517
11811
|
className: classNames.imageContainer
|
|
@@ -10558,13 +11852,13 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
|
|
|
10558
11852
|
}
|
|
10559
11853
|
}, verbiage.doneBtnText))))));
|
|
10560
11854
|
};
|
|
10561
|
-
var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$
|
|
10562
|
-
var Heading$8 = styled.h3(templateObject_2$
|
|
10563
|
-
var Description$
|
|
10564
|
-
var Instruction = styled.p(templateObject_4$
|
|
10565
|
-
var ImageCol = styled.div(templateObject_5$
|
|
10566
|
-
var StyledButtonsRow$7 = styled(ButtonsRow$2)(templateObject_6$
|
|
10567
|
-
var templateObject_1$
|
|
11855
|
+
var StyledOverlayInner$2 = styled(OverlayInner$2)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n justify-content: center;\n"], ["\n justify-content: center;\n"])));
|
|
11856
|
+
var Heading$8 = styled.h3(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11857
|
+
var Description$4 = styled.p(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin-bottom: 8px;\n"], ["\n margin-bottom: 8px;\n"])));
|
|
11858
|
+
var Instruction = styled.p(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
11859
|
+
var ImageCol = styled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"], ["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n flex-basis: 0;\n"])));
|
|
11860
|
+
var StyledButtonsRow$7 = styled(ButtonsRow$2)(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n margin-top: 32px;\n"], ["\n margin-top: 32px;\n"])));
|
|
11861
|
+
var templateObject_1$r, templateObject_2$q, templateObject_3$k, templateObject_4$e, templateObject_5$a, templateObject_6$5;
|
|
10568
11862
|
|
|
10569
11863
|
function ScalingCameraFeed() {
|
|
10570
11864
|
var _a = useIdCaptureStore(),
|
|
@@ -10624,7 +11918,7 @@ function IdCaptureOrUploadScreen(_a) {
|
|
|
10624
11918
|
className: classNames.captureWithCameraPanel
|
|
10625
11919
|
}, /*#__PURE__*/React__default.createElement(CameraIcon, {
|
|
10626
11920
|
className: classNames.captureWithCameraIcon
|
|
10627
|
-
}), /*#__PURE__*/React__default.createElement(Button, {
|
|
11921
|
+
}), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10628
11922
|
className: classNames.captureWithCameraButton,
|
|
10629
11923
|
colors: buttonColors,
|
|
10630
11924
|
onClick: function onClick() {
|
|
@@ -10643,7 +11937,7 @@ function IdCaptureOrUploadScreen(_a) {
|
|
|
10643
11937
|
className: classNames.uploadFromStoragePanel
|
|
10644
11938
|
}, /*#__PURE__*/React__default.createElement(UploadIcon, {
|
|
10645
11939
|
className: classNames.uploadFromStorageIcon
|
|
10646
|
-
}), /*#__PURE__*/React__default.createElement(Button, {
|
|
11940
|
+
}), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10647
11941
|
className: classNames.uploadFromStorageButton,
|
|
10648
11942
|
colors: buttonColors,
|
|
10649
11943
|
onClick: function onClick() {
|
|
@@ -10667,7 +11961,7 @@ function IdCaptureOrUploadScreen(_a) {
|
|
|
10667
11961
|
}
|
|
10668
11962
|
}, verbiage.uploadFromStorageText, /*#__PURE__*/React__default.createElement(ArrowIcon, null)))), selectIdTypeModalOpen && (/*#__PURE__*/React__default.createElement(Modal, {
|
|
10669
11963
|
className: classNames.selectIdTypeModal
|
|
10670
|
-
}, /*#__PURE__*/React__default.createElement(Dialog, {
|
|
11964
|
+
}, /*#__PURE__*/React__default.createElement(Dialog$1, {
|
|
10671
11965
|
className: classNames.selectIdTypeDialog
|
|
10672
11966
|
}, /*#__PURE__*/React__default.createElement(ScreenPanel, {
|
|
10673
11967
|
className: classNames.selectPassportTypePanel
|
|
@@ -10675,7 +11969,7 @@ function IdCaptureOrUploadScreen(_a) {
|
|
|
10675
11969
|
className: classNames.selectIdTypeHeading
|
|
10676
11970
|
}, verbiage.selectIdTypeText), /*#__PURE__*/React__default.createElement(PassportIcon, {
|
|
10677
11971
|
className: classNames.selectPassportTypeIcon
|
|
10678
|
-
}), /*#__PURE__*/React__default.createElement(Button, {
|
|
11972
|
+
}), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10679
11973
|
className: classNames.selectPassportTypeButton,
|
|
10680
11974
|
colors: buttonColors,
|
|
10681
11975
|
onClick: function onClick() {
|
|
@@ -10688,7 +11982,7 @@ function IdCaptureOrUploadScreen(_a) {
|
|
|
10688
11982
|
className: classNames.selectIdCardTypePanel
|
|
10689
11983
|
}, /*#__PURE__*/React__default.createElement(IdDocumentIcon, {
|
|
10690
11984
|
className: classNames.selectIdCardTypeIcon
|
|
10691
|
-
}), /*#__PURE__*/React__default.createElement(Button, {
|
|
11985
|
+
}), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10692
11986
|
className: classNames.selectIdCardTypeButton,
|
|
10693
11987
|
colors: buttonColors,
|
|
10694
11988
|
onClick: function onClick() {
|
|
@@ -10733,7 +12027,7 @@ function PassportUploadScreen(_a) {
|
|
|
10733
12027
|
className: classNames.actionsBar
|
|
10734
12028
|
}, /*#__PURE__*/React__default.createElement(CancelUploadTypeButton, {
|
|
10735
12029
|
className: classNames.cancelButton
|
|
10736
|
-
}, verbiage.cancelText), /*#__PURE__*/React__default.createElement(Button, {
|
|
12030
|
+
}, verbiage.cancelText), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10737
12031
|
className: classNames.continueButton,
|
|
10738
12032
|
disabled: !file,
|
|
10739
12033
|
colors: buttonColors,
|
|
@@ -10805,7 +12099,7 @@ function IdDocumentUploadScreen(_a) {
|
|
|
10805
12099
|
className: classNames.actionsBar
|
|
10806
12100
|
}, /*#__PURE__*/React__default.createElement(CancelUploadTypeButton, {
|
|
10807
12101
|
className: classNames.cancelButton
|
|
10808
|
-
}, verbiage.cancelText), /*#__PURE__*/React__default.createElement(Button, {
|
|
12102
|
+
}, verbiage.cancelText), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10809
12103
|
className: classNames.continueButton,
|
|
10810
12104
|
disabled: !idFrontFile || !state.allowSinglePageIdCapture && !idBackFile,
|
|
10811
12105
|
colors: buttonColors,
|
|
@@ -10847,7 +12141,7 @@ function IdDocumentUploadScreen(_a) {
|
|
|
10847
12141
|
function CancelUploadTypeButton(_a) {
|
|
10848
12142
|
var children = _a.children,
|
|
10849
12143
|
className = _a.className;
|
|
10850
|
-
return /*#__PURE__*/React__default.createElement(Button, {
|
|
12144
|
+
return /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10851
12145
|
className: className,
|
|
10852
12146
|
colors: buttonColors,
|
|
10853
12147
|
onClick: function onClick() {
|
|
@@ -10906,7 +12200,7 @@ function FilePickerButton(_a) {
|
|
|
10906
12200
|
setFile(file);
|
|
10907
12201
|
onFileSelected === null || onFileSelected === void 0 ? void 0 : onFileSelected(file);
|
|
10908
12202
|
}
|
|
10909
|
-
}), /*#__PURE__*/React__default.createElement(Button, {
|
|
12203
|
+
}), /*#__PURE__*/React__default.createElement(Button$1, {
|
|
10910
12204
|
className: className,
|
|
10911
12205
|
colors: buttonColors,
|
|
10912
12206
|
onClick: function onClick() {
|
|
@@ -10916,24 +12210,24 @@ function FilePickerButton(_a) {
|
|
|
10916
12210
|
}
|
|
10917
12211
|
}, file ? "".concat(file.name, " (").concat(humanFileSize(file.size), ")") : filePickerLoading ? loadingText : children));
|
|
10918
12212
|
}
|
|
10919
|
-
var ScreenContainer = styled.div(templateObject_1$
|
|
12213
|
+
var ScreenContainer = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n position: relative;\n font-family: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n position: relative;\n font-family: ", ";\n"])), function (props) {
|
|
10920
12214
|
var _a;
|
|
10921
12215
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
10922
12216
|
});
|
|
10923
|
-
var ScreenPanel = styled.div(templateObject_2$
|
|
10924
|
-
var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$
|
|
10925
|
-
var ScreenPanelHeading = styled.h3(templateObject_4$
|
|
10926
|
-
var ScreenActionsBar = styled.div(templateObject_5$
|
|
10927
|
-
var DashedSeparator = styled.div(templateObject_6$
|
|
10928
|
-
var OrWrapper = styled.div(templateObject_7$
|
|
10929
|
-
var UploadIdBackHelpText = styled.p(templateObject_8$
|
|
10930
|
-
var Button = styled(WideBorderButton)(templateObject_9$
|
|
10931
|
-
var Modal = styled.div(templateObject_10$
|
|
10932
|
-
var Dialog = styled.div(templateObject_11$
|
|
12217
|
+
var ScreenPanel = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n flex-grow: 1;\n background: #f7f6fb;\n box-sizing: border-box;\n padding: 40px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n flex-grow: 1;\n background: #f7f6fb;\n box-sizing: border-box;\n padding: 40px;\n"])));
|
|
12218
|
+
var SelectIdCardScreenPanel = styled(ScreenPanel)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n background: white;\n padding: 80px 0;\n\n @media (max-height: 1000px) {\n padding: 40px 0;\n }\n"], ["\n background: white;\n padding: 80px 0;\n\n @media (max-height: 1000px) {\n padding: 40px 0;\n }\n"])));
|
|
12219
|
+
var ScreenPanelHeading = styled.h3(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n margin: 0 0 30px;\n"], ["\n margin: 0 0 30px;\n"])));
|
|
12220
|
+
var ScreenActionsBar = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: end;\n gap: 20px;\n padding: 20px;\n width: 100%;\n box-sizing: border-box;\n border-top: 1px solid #ccc;\n\n @media (max-width: 600px) {\n justify-content: center;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: end;\n gap: 20px;\n padding: 20px;\n width: 100%;\n box-sizing: border-box;\n border-top: 1px solid #ccc;\n\n @media (max-width: 600px) {\n justify-content: center;\n }\n"])));
|
|
12221
|
+
var DashedSeparator = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n width: 100%;\n height: 0;\n border-top: 2px solid #606060;\n border-top-style: dashed;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n height: 0;\n border-top: 2px solid #606060;\n border-top-style: dashed;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
12222
|
+
var OrWrapper = styled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n color: #323232;\n font-weight: bold;\n background: white;\n border-radius: 50%;\n top: -2px;\n position: relative;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n color: #323232;\n font-weight: bold;\n background: white;\n border-radius: 50%;\n top: -2px;\n position: relative;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
12223
|
+
var UploadIdBackHelpText = styled.p(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n color: #323232;\n font-style: italic;\n margin: 30px 0 0;\n"], ["\n color: #323232;\n font-style: italic;\n margin: 30px 0 0;\n"])));
|
|
12224
|
+
var Button$1 = styled(WideBorderButton)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n width: auto;\n font-weight: 500;\n padding-left: 40px;\n padding-right: 40px;\n transition: background-color 0.3s ease;\n background-color: #ffffff;\n white-space: nowrap;\n\n &:disabled,\n &.disabled {\n background-color: #f1f1f1 !important;\n border-color: #dbdbdb !important;\n color: #323232 !important;\n }\n\n &:hover {\n filter: none;\n background-color: #fafafa !important;\n }\n"], ["\n width: auto;\n font-weight: 500;\n padding-left: 40px;\n padding-right: 40px;\n transition: background-color 0.3s ease;\n background-color: #ffffff;\n white-space: nowrap;\n\n &:disabled,\n &.disabled {\n background-color: #f1f1f1 !important;\n border-color: #dbdbdb !important;\n color: #323232 !important;\n }\n\n &:hover {\n filter: none;\n background-color: #fafafa !important;\n }\n"])));
|
|
12225
|
+
var Modal = styled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10000;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 10000;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
|
|
12226
|
+
var Dialog$1 = styled.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n width: 100%;\n max-width: 500px;\n height: 100%;\n max-height: 600px;\n background: white;\n border-radius: 25px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n font-family: ", ";\n //margin: 25px;\n"], ["\n width: 100%;\n max-width: 500px;\n height: 100%;\n max-height: 600px;\n background: white;\n border-radius: 25px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n font-family: ", ";\n //margin: 25px;\n"])), function (props) {
|
|
10933
12227
|
var _a;
|
|
10934
12228
|
return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.fontFamily;
|
|
10935
12229
|
});
|
|
10936
|
-
var ModalCloseButton = styled.button(templateObject_12$
|
|
12230
|
+
var ModalCloseButton = styled.button(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n width: 60px;\n height: 60px;\n background: black;\n color: whitesmoke;\n border-radius: 50%;\n font-size: 32px;\n border: none;\n cursor: pointer;\n margin: 20px 0;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n transition: background 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n padding: 0;\n\n &:hover {\n background: #222;\n color: white;\n }\n"], ["\n width: 60px;\n height: 60px;\n background: black;\n color: whitesmoke;\n border-radius: 50%;\n font-size: 32px;\n border: none;\n cursor: pointer;\n margin: 20px 0;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n transition: background 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n padding: 0;\n\n &:hover {\n background: #222;\n color: white;\n }\n"])));
|
|
10937
12231
|
function XIcon(props) {
|
|
10938
12232
|
return /*#__PURE__*/React__default.createElement("svg", _assign({
|
|
10939
12233
|
width: "25",
|
|
@@ -11124,88 +12418,537 @@ function IdDocumentIcon(props) {
|
|
|
11124
12418
|
style: {
|
|
11125
12419
|
marginBottom: 30
|
|
11126
12420
|
}
|
|
11127
|
-
}, props), /*#__PURE__*/React__default.createElement("path", {
|
|
11128
|
-
d: "M18 41C18 41 18.5 33 24.5 33C30.5 33 31 41 31 41",
|
|
11129
|
-
stroke: "black",
|
|
11130
|
-
strokeWidth: "3",
|
|
11131
|
-
strokeLinecap: "round",
|
|
11132
|
-
strokeLinejoin: "round"
|
|
11133
|
-
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
11134
|
-
x: "2",
|
|
11135
|
-
y: "2",
|
|
11136
|
-
width: "88",
|
|
11137
|
-
height: "58",
|
|
11138
|
-
rx: "6",
|
|
11139
|
-
stroke: "black",
|
|
11140
|
-
strokeWidth: "3"
|
|
11141
|
-
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
11142
|
-
x: "10",
|
|
11143
|
-
y: "15",
|
|
11144
|
-
width: "29",
|
|
11145
|
-
height: "30",
|
|
11146
|
-
rx: "3",
|
|
11147
|
-
stroke: "black",
|
|
11148
|
-
strokeWidth: "3"
|
|
11149
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11150
|
-
d: "M48 17H80",
|
|
11151
|
-
stroke: "black",
|
|
11152
|
-
strokeWidth: "3",
|
|
11153
|
-
strokeLinecap: "round",
|
|
11154
|
-
strokeLinejoin: "round"
|
|
11155
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11156
|
-
d: "M48 35H80",
|
|
11157
|
-
stroke: "black",
|
|
11158
|
-
strokeWidth: "3",
|
|
11159
|
-
strokeLinecap: "round",
|
|
11160
|
-
strokeLinejoin: "round"
|
|
11161
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11162
|
-
d: "M48 44H62",
|
|
11163
|
-
stroke: "black",
|
|
11164
|
-
strokeWidth: "3",
|
|
11165
|
-
strokeLinecap: "round",
|
|
11166
|
-
strokeLinejoin: "round"
|
|
11167
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11168
|
-
d: "M48 26H69",
|
|
11169
|
-
stroke: "black",
|
|
11170
|
-
strokeWidth: "3",
|
|
11171
|
-
strokeLinecap: "round",
|
|
11172
|
-
strokeLinejoin: "round"
|
|
11173
|
-
}), /*#__PURE__*/React__default.createElement("path", {
|
|
11174
|
-
d: "M74 26L80 26",
|
|
11175
|
-
stroke: "black",
|
|
11176
|
-
strokeWidth: "3",
|
|
11177
|
-
strokeLinecap: "round",
|
|
11178
|
-
strokeLinejoin: "round"
|
|
11179
|
-
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
11180
|
-
cx: "24.5",
|
|
11181
|
-
cy: "26.5",
|
|
11182
|
-
r: "6.5",
|
|
11183
|
-
stroke: "black",
|
|
11184
|
-
strokeWidth: "3"
|
|
11185
|
-
}));
|
|
12421
|
+
}, props), /*#__PURE__*/React__default.createElement("path", {
|
|
12422
|
+
d: "M18 41C18 41 18.5 33 24.5 33C30.5 33 31 41 31 41",
|
|
12423
|
+
stroke: "black",
|
|
12424
|
+
strokeWidth: "3",
|
|
12425
|
+
strokeLinecap: "round",
|
|
12426
|
+
strokeLinejoin: "round"
|
|
12427
|
+
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
12428
|
+
x: "2",
|
|
12429
|
+
y: "2",
|
|
12430
|
+
width: "88",
|
|
12431
|
+
height: "58",
|
|
12432
|
+
rx: "6",
|
|
12433
|
+
stroke: "black",
|
|
12434
|
+
strokeWidth: "3"
|
|
12435
|
+
}), /*#__PURE__*/React__default.createElement("rect", {
|
|
12436
|
+
x: "10",
|
|
12437
|
+
y: "15",
|
|
12438
|
+
width: "29",
|
|
12439
|
+
height: "30",
|
|
12440
|
+
rx: "3",
|
|
12441
|
+
stroke: "black",
|
|
12442
|
+
strokeWidth: "3"
|
|
12443
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
12444
|
+
d: "M48 17H80",
|
|
12445
|
+
stroke: "black",
|
|
12446
|
+
strokeWidth: "3",
|
|
12447
|
+
strokeLinecap: "round",
|
|
12448
|
+
strokeLinejoin: "round"
|
|
12449
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
12450
|
+
d: "M48 35H80",
|
|
12451
|
+
stroke: "black",
|
|
12452
|
+
strokeWidth: "3",
|
|
12453
|
+
strokeLinecap: "round",
|
|
12454
|
+
strokeLinejoin: "round"
|
|
12455
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
12456
|
+
d: "M48 44H62",
|
|
12457
|
+
stroke: "black",
|
|
12458
|
+
strokeWidth: "3",
|
|
12459
|
+
strokeLinecap: "round",
|
|
12460
|
+
strokeLinejoin: "round"
|
|
12461
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
12462
|
+
d: "M48 26H69",
|
|
12463
|
+
stroke: "black",
|
|
12464
|
+
strokeWidth: "3",
|
|
12465
|
+
strokeLinecap: "round",
|
|
12466
|
+
strokeLinejoin: "round"
|
|
12467
|
+
}), /*#__PURE__*/React__default.createElement("path", {
|
|
12468
|
+
d: "M74 26L80 26",
|
|
12469
|
+
stroke: "black",
|
|
12470
|
+
strokeWidth: "3",
|
|
12471
|
+
strokeLinecap: "round",
|
|
12472
|
+
strokeLinejoin: "round"
|
|
12473
|
+
}), /*#__PURE__*/React__default.createElement("circle", {
|
|
12474
|
+
cx: "24.5",
|
|
12475
|
+
cy: "26.5",
|
|
12476
|
+
r: "6.5",
|
|
12477
|
+
stroke: "black",
|
|
12478
|
+
strokeWidth: "3"
|
|
12479
|
+
}));
|
|
12480
|
+
}
|
|
12481
|
+
var InlineSvg = styled.svg(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n display: inline;\n"], ["\n display: inline;\n"])));
|
|
12482
|
+
function humanFileSize(bytes, si, dp) {
|
|
12483
|
+
if (si === void 0) {
|
|
12484
|
+
si = false;
|
|
12485
|
+
}
|
|
12486
|
+
if (dp === void 0) {
|
|
12487
|
+
dp = 1;
|
|
12488
|
+
}
|
|
12489
|
+
var thresh = si ? 1000 : 1024;
|
|
12490
|
+
if (Math.abs(bytes) < thresh) {
|
|
12491
|
+
return bytes + ' B';
|
|
12492
|
+
}
|
|
12493
|
+
var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
|
12494
|
+
var u = -1;
|
|
12495
|
+
var r = Math.pow(10, dp);
|
|
12496
|
+
do {
|
|
12497
|
+
bytes /= thresh;
|
|
12498
|
+
++u;
|
|
12499
|
+
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
|
12500
|
+
return bytes.toFixed(dp) + ' ' + units[u];
|
|
12501
|
+
}
|
|
12502
|
+
var templateObject_1$q, templateObject_2$p, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$4, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
|
|
12503
|
+
|
|
12504
|
+
/**
|
|
12505
|
+
* Lazy loader for Dynamsoft Barcode Reader Bundle from CDN
|
|
12506
|
+
* Only loads when client-side barcode scanning is enabled.
|
|
12507
|
+
*/
|
|
12508
|
+
var DYNAMSOFT_CDN_URL = 'https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.min.js';
|
|
12509
|
+
var loadPromise = null;
|
|
12510
|
+
var isInitialized = false;
|
|
12511
|
+
function isDynamsoftLoaded() {
|
|
12512
|
+
return typeof window !== 'undefined' && !!window.Dynamsoft;
|
|
12513
|
+
}
|
|
12514
|
+
function loadScript(url) {
|
|
12515
|
+
return new Promise(function (resolve, reject) {
|
|
12516
|
+
if (document.querySelector("script[src=\"".concat(url, "\"]"))) {
|
|
12517
|
+
resolve();
|
|
12518
|
+
return;
|
|
12519
|
+
}
|
|
12520
|
+
var script = document.createElement('script');
|
|
12521
|
+
script.src = url;
|
|
12522
|
+
script.async = true;
|
|
12523
|
+
script.onload = function () {
|
|
12524
|
+
document.dispatchEvent(new CustomEvent('idmission.dynamsoftLoaded', {
|
|
12525
|
+
detail: {
|
|
12526
|
+
url: url
|
|
12527
|
+
}
|
|
12528
|
+
}));
|
|
12529
|
+
resolve();
|
|
12530
|
+
};
|
|
12531
|
+
script.onerror = function () {
|
|
12532
|
+
reject(new Error("Failed to load Dynamsoft SDK from ".concat(url)));
|
|
12533
|
+
};
|
|
12534
|
+
document.head.appendChild(script);
|
|
12535
|
+
});
|
|
12536
|
+
}
|
|
12537
|
+
function loadDynamsoftSDK() {
|
|
12538
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
12539
|
+
return __generator(this, function (_a) {
|
|
12540
|
+
if (isDynamsoftLoaded()) {
|
|
12541
|
+
return [2 /*return*/, window.Dynamsoft];
|
|
12542
|
+
}
|
|
12543
|
+
if (loadPromise) {
|
|
12544
|
+
return [2 /*return*/, loadPromise];
|
|
12545
|
+
}
|
|
12546
|
+
loadPromise = loadScript(DYNAMSOFT_CDN_URL).then(function () {
|
|
12547
|
+
if (!window.Dynamsoft) {
|
|
12548
|
+
throw new Error('Dynamsoft SDK failed to initialize after loading');
|
|
12549
|
+
}
|
|
12550
|
+
return window.Dynamsoft;
|
|
12551
|
+
});
|
|
12552
|
+
return [2 /*return*/, loadPromise];
|
|
12553
|
+
});
|
|
12554
|
+
});
|
|
12555
|
+
}
|
|
12556
|
+
function initializeDynamsoft(config) {
|
|
12557
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
12558
|
+
var Dynamsoft, licenseValue, orgIdJson, base64;
|
|
12559
|
+
return __generator(this, function (_a) {
|
|
12560
|
+
switch (_a.label) {
|
|
12561
|
+
case 0:
|
|
12562
|
+
return [4 /*yield*/, loadDynamsoftSDK()];
|
|
12563
|
+
case 1:
|
|
12564
|
+
Dynamsoft = _a.sent();
|
|
12565
|
+
if (isInitialized) {
|
|
12566
|
+
return [2 /*return*/, Dynamsoft];
|
|
12567
|
+
}
|
|
12568
|
+
if (config.organizationId) {
|
|
12569
|
+
orgIdJson = JSON.stringify({
|
|
12570
|
+
organizationID: config.organizationId
|
|
12571
|
+
});
|
|
12572
|
+
base64 = btoa(orgIdJson);
|
|
12573
|
+
licenseValue = "DLS2".concat(base64);
|
|
12574
|
+
} else {
|
|
12575
|
+
licenseValue = config.licenseKey;
|
|
12576
|
+
}
|
|
12577
|
+
return [4 /*yield*/, Dynamsoft.License.LicenseManager.initLicense(licenseValue)];
|
|
12578
|
+
case 2:
|
|
12579
|
+
_a.sent();
|
|
12580
|
+
isInitialized = true;
|
|
12581
|
+
document.dispatchEvent(new CustomEvent('idmission.dynamsoftInitialized', {
|
|
12582
|
+
detail: {
|
|
12583
|
+
success: true
|
|
12584
|
+
}
|
|
12585
|
+
}));
|
|
12586
|
+
return [2 /*return*/, Dynamsoft];
|
|
12587
|
+
}
|
|
12588
|
+
});
|
|
12589
|
+
});
|
|
12590
|
+
}
|
|
12591
|
+
|
|
12592
|
+
var STORAGE_KEY = 'idmission_dynamsoft_license';
|
|
12593
|
+
function DynamsoftLicensePrompt(_a) {
|
|
12594
|
+
var onLicenseSubmit = _a.onLicenseSubmit,
|
|
12595
|
+
onCancel = _a.onCancel;
|
|
12596
|
+
var _b = useState(''),
|
|
12597
|
+
licenseKey = _b[0],
|
|
12598
|
+
setLicenseKey = _b[1];
|
|
12599
|
+
// Check for stored license on mount
|
|
12600
|
+
useEffect(function () {
|
|
12601
|
+
var stored = localStorage.getItem(STORAGE_KEY);
|
|
12602
|
+
if (stored) {
|
|
12603
|
+
setLicenseKey(stored);
|
|
12604
|
+
}
|
|
12605
|
+
}, []);
|
|
12606
|
+
var handleSubmit = useCallback(function (e) {
|
|
12607
|
+
e.preventDefault();
|
|
12608
|
+
var trimmedKey = licenseKey.trim();
|
|
12609
|
+
if (trimmedKey) {
|
|
12610
|
+
// Store for future sessions
|
|
12611
|
+
localStorage.setItem(STORAGE_KEY, trimmedKey);
|
|
12612
|
+
onLicenseSubmit(trimmedKey);
|
|
12613
|
+
}
|
|
12614
|
+
}, [licenseKey, onLicenseSubmit]);
|
|
12615
|
+
var handleUseSaved = useCallback(function () {
|
|
12616
|
+
var stored = localStorage.getItem(STORAGE_KEY);
|
|
12617
|
+
if (stored) {
|
|
12618
|
+
onLicenseSubmit(stored);
|
|
12619
|
+
}
|
|
12620
|
+
}, [onLicenseSubmit]);
|
|
12621
|
+
var hasSavedLicense = !!localStorage.getItem(STORAGE_KEY);
|
|
12622
|
+
return /*#__PURE__*/React__default.createElement(Overlay, null, /*#__PURE__*/React__default.createElement(Dialog, null, /*#__PURE__*/React__default.createElement(Title$1, null, "Dynamsoft License Required"), /*#__PURE__*/React__default.createElement(Description$3, null, "Enter your Dynamsoft Barcode Reader license key to enable client-side barcode scanning. The key will be stored in your browser for future sessions."), /*#__PURE__*/React__default.createElement(Form, {
|
|
12623
|
+
onSubmit: handleSubmit
|
|
12624
|
+
}, /*#__PURE__*/React__default.createElement(TextArea, {
|
|
12625
|
+
value: licenseKey,
|
|
12626
|
+
onChange: function onChange(e) {
|
|
12627
|
+
return setLicenseKey(e.target.value);
|
|
12628
|
+
},
|
|
12629
|
+
placeholder: "Paste your Dynamsoft license key here...",
|
|
12630
|
+
rows: 4,
|
|
12631
|
+
autoFocus: true
|
|
12632
|
+
}), /*#__PURE__*/React__default.createElement(ButtonRow, null, onCancel && (/*#__PURE__*/React__default.createElement(CancelButton, {
|
|
12633
|
+
type: "button",
|
|
12634
|
+
onClick: onCancel
|
|
12635
|
+
}, "Skip")), hasSavedLicense && (/*#__PURE__*/React__default.createElement(SavedButton, {
|
|
12636
|
+
type: "button",
|
|
12637
|
+
onClick: handleUseSaved
|
|
12638
|
+
}, "Use Saved Key")), /*#__PURE__*/React__default.createElement(SubmitButton, {
|
|
12639
|
+
type: "submit",
|
|
12640
|
+
disabled: !licenseKey.trim()
|
|
12641
|
+
}, "Activate"))), /*#__PURE__*/React__default.createElement(HelpText, null, "Don't have a license?", ' ', /*#__PURE__*/React__default.createElement(HelpLink, {
|
|
12642
|
+
href: "https://www.dynamsoft.com/customer/license/trialLicense",
|
|
12643
|
+
target: "_blank",
|
|
12644
|
+
rel: "noopener noreferrer"
|
|
12645
|
+
}, "Get a free trial"))));
|
|
12646
|
+
}
|
|
12647
|
+
function getSavedDynamsoftLicense() {
|
|
12648
|
+
if (typeof window === 'undefined') return null;
|
|
12649
|
+
return localStorage.getItem(STORAGE_KEY);
|
|
12650
|
+
}
|
|
12651
|
+
var Overlay = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 1rem;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 1rem;\n"])));
|
|
12652
|
+
var Dialog = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n max-width: 480px;\n width: 100%;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n"], ["\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n max-width: 480px;\n width: 100%;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n"])));
|
|
12653
|
+
var Title$1 = styled.h2(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin: 0 0 0.75rem 0;\n font-size: 1.25rem;\n color: #1a1a1a;\n"], ["\n margin: 0 0 0.75rem 0;\n font-size: 1.25rem;\n color: #1a1a1a;\n"])));
|
|
12654
|
+
var Description$3 = styled.p(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n margin: 0 0 1rem 0;\n font-size: 0.875rem;\n color: #666;\n line-height: 1.5;\n"], ["\n margin: 0 0 1rem 0;\n font-size: 0.875rem;\n color: #666;\n line-height: 1.5;\n"])));
|
|
12655
|
+
var Form = styled.form(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 1rem;\n"])));
|
|
12656
|
+
var TextArea = styled.textarea(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 8px;\n font-size: 0.8125rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n resize: vertical;\n min-height: 80px;\n\n &:focus {\n outline: none;\n border-color: #0066cc;\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n }\n\n &::placeholder {\n color: #999;\n }\n"], ["\n width: 100%;\n box-sizing: border-box;\n padding: 0.75rem;\n border: 1px solid #ddd;\n border-radius: 8px;\n font-size: 0.8125rem;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n resize: vertical;\n min-height: 80px;\n\n &:focus {\n outline: none;\n border-color: #0066cc;\n box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);\n }\n\n &::placeholder {\n color: #999;\n }\n"])));
|
|
12657
|
+
var ButtonRow = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n"], ["\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n"])));
|
|
12658
|
+
var Button = styled.button(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n border-radius: 6px;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n"], ["\n padding: 0.625rem 1.25rem;\n border-radius: 6px;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n"])));
|
|
12659
|
+
var SubmitButton = styled(Button)(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n background: #0066cc;\n color: white;\n border: none;\n\n &:hover:not(:disabled) {\n background: #0052a3;\n }\n"], ["\n background: #0066cc;\n color: white;\n border: none;\n\n &:hover:not(:disabled) {\n background: #0052a3;\n }\n"])));
|
|
12660
|
+
var CancelButton = styled(Button)(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n background: transparent;\n color: #666;\n border: 1px solid #ddd;\n\n &:hover {\n background: #f5f5f5;\n }\n"], ["\n background: transparent;\n color: #666;\n border: 1px solid #ddd;\n\n &:hover {\n background: #f5f5f5;\n }\n"])));
|
|
12661
|
+
var SavedButton = styled(Button)(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n background: #e8f4e8;\n color: #2e7d32;\n border: 1px solid #c8e6c9;\n\n &:hover {\n background: #c8e6c9;\n }\n"], ["\n background: #e8f4e8;\n color: #2e7d32;\n border: 1px solid #c8e6c9;\n\n &:hover {\n background: #c8e6c9;\n }\n"])));
|
|
12662
|
+
var HelpText = styled.p(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n margin: 1rem 0 0 0;\n font-size: 0.8125rem;\n color: #888;\n text-align: center;\n"], ["\n margin: 1rem 0 0 0;\n font-size: 0.8125rem;\n color: #888;\n text-align: center;\n"])));
|
|
12663
|
+
var HelpLink = styled.a(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n color: #0066cc;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"], ["\n color: #0066cc;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n"])));
|
|
12664
|
+
var templateObject_1$p, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$3, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
12665
|
+
|
|
12666
|
+
var DynamsoftBarcodeContext = /*#__PURE__*/createContext({
|
|
12667
|
+
loadState: 'not-started',
|
|
12668
|
+
error: null,
|
|
12669
|
+
lastDecodeResult: null,
|
|
12670
|
+
isScanning: false,
|
|
12671
|
+
startScanning: function startScanning() {},
|
|
12672
|
+
stopScanning: function stopScanning() {},
|
|
12673
|
+
resetDecodeResult: function resetDecodeResult() {}
|
|
12674
|
+
});
|
|
12675
|
+
function DynamsoftBarcodeProvider(_a) {
|
|
12676
|
+
var _this = this;
|
|
12677
|
+
var children = _a.children,
|
|
12678
|
+
organizationId = _a.organizationId,
|
|
12679
|
+
licenseKey = _a.licenseKey,
|
|
12680
|
+
_b = _a.promptForLicense,
|
|
12681
|
+
promptForLicense = _b === void 0 ? false : _b,
|
|
12682
|
+
_c = _a.enabled,
|
|
12683
|
+
enabled = _c === void 0 ? true : _c,
|
|
12684
|
+
onBarcodeDecoded = _a.onBarcodeDecoded,
|
|
12685
|
+
onError = _a.onError;
|
|
12686
|
+
var _d = useState('not-started'),
|
|
12687
|
+
loadState = _d[0],
|
|
12688
|
+
setLoadState = _d[1];
|
|
12689
|
+
var _e = useState(null),
|
|
12690
|
+
error = _e[0],
|
|
12691
|
+
setError = _e[1];
|
|
12692
|
+
var _f = useState(null),
|
|
12693
|
+
lastDecodeResult = _f[0],
|
|
12694
|
+
setLastDecodeResult = _f[1];
|
|
12695
|
+
var _g = useState(false),
|
|
12696
|
+
isScanning = _g[0],
|
|
12697
|
+
setIsScanning = _g[1];
|
|
12698
|
+
var _h = useState(null),
|
|
12699
|
+
promptedLicenseKey = _h[0],
|
|
12700
|
+
setPromptedLicenseKey = _h[1];
|
|
12701
|
+
var _j = useState(false),
|
|
12702
|
+
showLicensePrompt = _j[0],
|
|
12703
|
+
setShowLicensePrompt = _j[1];
|
|
12704
|
+
var readerRef = useRef(null);
|
|
12705
|
+
var scanningRef = useRef(false);
|
|
12706
|
+
var animationFrameRef = useRef(null);
|
|
12707
|
+
var videoRef = useCameraStore().videoRef;
|
|
12708
|
+
// Check for saved license on mount if promptForLicense is enabled
|
|
12709
|
+
useEffect(function () {
|
|
12710
|
+
if (promptForLicense && !organizationId && !licenseKey) {
|
|
12711
|
+
var savedLicense = getSavedDynamsoftLicense();
|
|
12712
|
+
if (savedLicense) {
|
|
12713
|
+
log('[DynamsoftBarcodeProvider] Using saved license from localStorage');
|
|
12714
|
+
setPromptedLicenseKey(savedLicense);
|
|
12715
|
+
} else {
|
|
12716
|
+
log('[DynamsoftBarcodeProvider] No saved license, showing prompt');
|
|
12717
|
+
setShowLicensePrompt(true);
|
|
12718
|
+
}
|
|
12719
|
+
}
|
|
12720
|
+
}, [promptForLicense, organizationId, licenseKey]);
|
|
12721
|
+
// Handle license submission from prompt
|
|
12722
|
+
var handleLicenseSubmit = useCallback(function (key) {
|
|
12723
|
+
log('[DynamsoftBarcodeProvider] License key submitted');
|
|
12724
|
+
setPromptedLicenseKey(key);
|
|
12725
|
+
setShowLicensePrompt(false);
|
|
12726
|
+
}, []);
|
|
12727
|
+
// Handle prompt skip/cancel
|
|
12728
|
+
var handleLicenseCancel = useCallback(function () {
|
|
12729
|
+
log('[DynamsoftBarcodeProvider] License prompt cancelled');
|
|
12730
|
+
setShowLicensePrompt(false);
|
|
12731
|
+
}, []);
|
|
12732
|
+
// Build license config from props or prompted key
|
|
12733
|
+
var licenseConfig = useMemo(function () {
|
|
12734
|
+
if (organizationId) return {
|
|
12735
|
+
organizationId: organizationId
|
|
12736
|
+
};
|
|
12737
|
+
if (licenseKey) return {
|
|
12738
|
+
licenseKey: licenseKey
|
|
12739
|
+
};
|
|
12740
|
+
if (promptedLicenseKey) return {
|
|
12741
|
+
licenseKey: promptedLicenseKey
|
|
12742
|
+
};
|
|
12743
|
+
return null;
|
|
12744
|
+
}, [organizationId, licenseKey, promptedLicenseKey]);
|
|
12745
|
+
// Load and initialize Dynamsoft SDK
|
|
12746
|
+
useEffect(function () {
|
|
12747
|
+
if (!enabled || !licenseConfig) return;
|
|
12748
|
+
if (loadState !== 'not-started') return;
|
|
12749
|
+
var initSDK = function initSDK() {
|
|
12750
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
12751
|
+
var router, err_1, error_1;
|
|
12752
|
+
var _a, _b;
|
|
12753
|
+
return __generator(this, function (_c) {
|
|
12754
|
+
switch (_c.label) {
|
|
12755
|
+
case 0:
|
|
12756
|
+
_c.trys.push([0, 6,, 7]);
|
|
12757
|
+
setLoadState('loading');
|
|
12758
|
+
log('[DynamsoftBarcodeProvider] Loading Dynamsoft SDK from CDN...');
|
|
12759
|
+
return [4 /*yield*/, loadDynamsoftSDK()];
|
|
12760
|
+
case 1:
|
|
12761
|
+
_c.sent();
|
|
12762
|
+
setLoadState('initializing');
|
|
12763
|
+
log('[DynamsoftBarcodeProvider] Initializing Dynamsoft license...');
|
|
12764
|
+
return [4 /*yield*/, initializeDynamsoft(licenseConfig)
|
|
12765
|
+
// Log available Dynamsoft APIs for debugging
|
|
12766
|
+
];
|
|
12767
|
+
case 2:
|
|
12768
|
+
_c.sent();
|
|
12769
|
+
// Log available Dynamsoft APIs for debugging
|
|
12770
|
+
if (window.Dynamsoft) {
|
|
12771
|
+
log('[DynamsoftBarcodeProvider] Available Dynamsoft APIs:', Object.keys(window.Dynamsoft));
|
|
12772
|
+
if (window.Dynamsoft.DBR) {
|
|
12773
|
+
log('[DynamsoftBarcodeProvider] DBR APIs:', Object.keys(window.Dynamsoft.DBR));
|
|
12774
|
+
}
|
|
12775
|
+
if (window.Dynamsoft.CVR) {
|
|
12776
|
+
log('[DynamsoftBarcodeProvider] CVR APIs:', Object.keys(window.Dynamsoft.CVR));
|
|
12777
|
+
}
|
|
12778
|
+
}
|
|
12779
|
+
if (!((_b = (_a = window.Dynamsoft) === null || _a === void 0 ? void 0 : _a.CVR) === null || _b === void 0 ? void 0 : _b.CaptureVisionRouter)) return [3 /*break*/, 4];
|
|
12780
|
+
return [4 /*yield*/, window.Dynamsoft.CVR.CaptureVisionRouter.createInstance()
|
|
12781
|
+
// Store router as our "reader" - we'll use capture() method
|
|
12782
|
+
// PDF417 filtering is done at the result level in decodeFrame()
|
|
12783
|
+
];
|
|
12784
|
+
case 3:
|
|
12785
|
+
router = _c.sent();
|
|
12786
|
+
// Store router as our "reader" - we'll use capture() method
|
|
12787
|
+
// PDF417 filtering is done at the result level in decodeFrame()
|
|
12788
|
+
readerRef.current = router;
|
|
12789
|
+
log('[DynamsoftBarcodeProvider] CaptureVisionRouter instance created');
|
|
12790
|
+
return [3 /*break*/, 5];
|
|
12791
|
+
case 4:
|
|
12792
|
+
throw new Error('Dynamsoft CaptureVisionRouter not available');
|
|
12793
|
+
case 5:
|
|
12794
|
+
setLoadState('ready');
|
|
12795
|
+
log('[DynamsoftBarcodeProvider] Dynamsoft SDK ready');
|
|
12796
|
+
return [3 /*break*/, 7];
|
|
12797
|
+
case 6:
|
|
12798
|
+
err_1 = _c.sent();
|
|
12799
|
+
error_1 = err_1 instanceof Error ? err_1 : new Error('Failed to load Dynamsoft SDK');
|
|
12800
|
+
setError(error_1);
|
|
12801
|
+
setLoadState('error');
|
|
12802
|
+
log('[DynamsoftBarcodeProvider] Error loading Dynamsoft SDK:', error_1);
|
|
12803
|
+
onError === null || onError === void 0 ? void 0 : onError(error_1);
|
|
12804
|
+
return [3 /*break*/, 7];
|
|
12805
|
+
case 7:
|
|
12806
|
+
return [2 /*return*/];
|
|
12807
|
+
}
|
|
12808
|
+
});
|
|
12809
|
+
});
|
|
12810
|
+
};
|
|
12811
|
+
void initSDK();
|
|
12812
|
+
}, [enabled, licenseConfig, loadState, onError]);
|
|
12813
|
+
// Cleanup router on unmount
|
|
12814
|
+
useEffect(function () {
|
|
12815
|
+
return function () {
|
|
12816
|
+
if (readerRef.current) {
|
|
12817
|
+
var router = readerRef.current;
|
|
12818
|
+
router.dispose();
|
|
12819
|
+
readerRef.current = null;
|
|
12820
|
+
}
|
|
12821
|
+
if (animationFrameRef.current) {
|
|
12822
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
12823
|
+
}
|
|
12824
|
+
};
|
|
12825
|
+
}, []);
|
|
12826
|
+
var decodeFrame = useCallback(function () {
|
|
12827
|
+
return __awaiter(_this, void 0, void 0, function () {
|
|
12828
|
+
var video, router, result, items, pdf417Item, decodeResult, otherBarcodes, err_2;
|
|
12829
|
+
return __generator(this, function (_a) {
|
|
12830
|
+
switch (_a.label) {
|
|
12831
|
+
case 0:
|
|
12832
|
+
if (!scanningRef.current) return [2 /*return*/];
|
|
12833
|
+
if (!readerRef.current) return [2 /*return*/];
|
|
12834
|
+
if (!videoRef.current) return [2 /*return*/];
|
|
12835
|
+
video = videoRef.current;
|
|
12836
|
+
if (video.readyState < 2) {
|
|
12837
|
+
// Video not ready, try again
|
|
12838
|
+
animationFrameRef.current = requestAnimationFrame(decodeFrame);
|
|
12839
|
+
return [2 /*return*/];
|
|
12840
|
+
}
|
|
12841
|
+
_a.label = 1;
|
|
12842
|
+
case 1:
|
|
12843
|
+
_a.trys.push([1, 3,, 4]);
|
|
12844
|
+
router = readerRef.current;
|
|
12845
|
+
return [4 /*yield*/, router.capture(video)
|
|
12846
|
+
// Extract barcode results from captured result
|
|
12847
|
+
// The result contains items array with different result types
|
|
12848
|
+
];
|
|
12849
|
+
case 2:
|
|
12850
|
+
result = _a.sent();
|
|
12851
|
+
items = result.items;
|
|
12852
|
+
if (items && items.length > 0) {
|
|
12853
|
+
pdf417Item = items.find(function (item) {
|
|
12854
|
+
var _a;
|
|
12855
|
+
return item.type === 2 && item.text && ((_a = item.formatString) === null || _a === void 0 ? void 0 : _a.toUpperCase().includes('PDF417'));
|
|
12856
|
+
});
|
|
12857
|
+
if (pdf417Item && pdf417Item.text) {
|
|
12858
|
+
decodeResult = {
|
|
12859
|
+
text: pdf417Item.text,
|
|
12860
|
+
format: pdf417Item.formatString || 'PDF417'
|
|
12861
|
+
};
|
|
12862
|
+
log("[DynamsoftBarcodeProvider] PDF417 barcode decoded: ".concat(decodeResult.text.substring(0, 50), "..."));
|
|
12863
|
+
setLastDecodeResult(decodeResult);
|
|
12864
|
+
onBarcodeDecoded === null || onBarcodeDecoded === void 0 ? void 0 : onBarcodeDecoded(decodeResult);
|
|
12865
|
+
// Stop scanning after successful decode
|
|
12866
|
+
scanningRef.current = false;
|
|
12867
|
+
setIsScanning(false);
|
|
12868
|
+
return [2 /*return*/];
|
|
12869
|
+
}
|
|
12870
|
+
otherBarcodes = items.filter(function (item) {
|
|
12871
|
+
var _a;
|
|
12872
|
+
return item.type === 2 && item.text && !((_a = item.formatString) === null || _a === void 0 ? void 0 : _a.toUpperCase().includes('PDF417'));
|
|
12873
|
+
});
|
|
12874
|
+
if (otherBarcodes.length > 0) {
|
|
12875
|
+
log("[DynamsoftBarcodeProvider] Ignoring non-PDF417 barcodes: ".concat(otherBarcodes.map(function (b) {
|
|
12876
|
+
return b.formatString;
|
|
12877
|
+
}).join(', ')));
|
|
12878
|
+
}
|
|
12879
|
+
}
|
|
12880
|
+
return [3 /*break*/, 4];
|
|
12881
|
+
case 3:
|
|
12882
|
+
err_2 = _a.sent();
|
|
12883
|
+
// Decode errors are expected when no barcode is visible
|
|
12884
|
+
// Only log unexpected errors
|
|
12885
|
+
if (err_2 instanceof Error && !err_2.message.includes('No barcode') && !err_2.message.includes('timeout')) {
|
|
12886
|
+
log('[DynamsoftBarcodeProvider] Decode error:', err_2.message);
|
|
12887
|
+
}
|
|
12888
|
+
return [3 /*break*/, 4];
|
|
12889
|
+
case 4:
|
|
12890
|
+
// Continue scanning
|
|
12891
|
+
if (scanningRef.current) {
|
|
12892
|
+
animationFrameRef.current = requestAnimationFrame(decodeFrame);
|
|
12893
|
+
}
|
|
12894
|
+
return [2 /*return*/];
|
|
12895
|
+
}
|
|
12896
|
+
});
|
|
12897
|
+
});
|
|
12898
|
+
}, [onBarcodeDecoded, videoRef]);
|
|
12899
|
+
var startScanning = useCallback(function () {
|
|
12900
|
+
if (loadState !== 'ready') {
|
|
12901
|
+
log('[DynamsoftBarcodeProvider] Cannot start scanning - SDK not ready:', loadState);
|
|
12902
|
+
return;
|
|
12903
|
+
}
|
|
12904
|
+
if (scanningRef.current) {
|
|
12905
|
+
log('[DynamsoftBarcodeProvider] Already scanning');
|
|
12906
|
+
return;
|
|
12907
|
+
}
|
|
12908
|
+
log('[DynamsoftBarcodeProvider] Starting continuous barcode scanning');
|
|
12909
|
+
scanningRef.current = true;
|
|
12910
|
+
setIsScanning(true);
|
|
12911
|
+
setLastDecodeResult(null);
|
|
12912
|
+
// Start decode loop
|
|
12913
|
+
animationFrameRef.current = requestAnimationFrame(decodeFrame);
|
|
12914
|
+
}, [decodeFrame, loadState]);
|
|
12915
|
+
var stopScanning = useCallback(function () {
|
|
12916
|
+
log('[DynamsoftBarcodeProvider] Stopping barcode scanning');
|
|
12917
|
+
scanningRef.current = false;
|
|
12918
|
+
setIsScanning(false);
|
|
12919
|
+
if (animationFrameRef.current) {
|
|
12920
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
12921
|
+
animationFrameRef.current = null;
|
|
12922
|
+
}
|
|
12923
|
+
}, []);
|
|
12924
|
+
var resetDecodeResult = useCallback(function () {
|
|
12925
|
+
setLastDecodeResult(null);
|
|
12926
|
+
}, []);
|
|
12927
|
+
var value = useMemo(function () {
|
|
12928
|
+
return {
|
|
12929
|
+
loadState: loadState,
|
|
12930
|
+
error: error,
|
|
12931
|
+
lastDecodeResult: lastDecodeResult,
|
|
12932
|
+
isScanning: isScanning,
|
|
12933
|
+
startScanning: startScanning,
|
|
12934
|
+
stopScanning: stopScanning,
|
|
12935
|
+
resetDecodeResult: resetDecodeResult
|
|
12936
|
+
};
|
|
12937
|
+
}, [loadState, error, lastDecodeResult, isScanning, startScanning, stopScanning, resetDecodeResult]);
|
|
12938
|
+
return /*#__PURE__*/React__default.createElement(DynamsoftBarcodeContext.Provider, {
|
|
12939
|
+
value: value
|
|
12940
|
+
}, children, showLicensePrompt && (/*#__PURE__*/React__default.createElement(DynamsoftLicensePrompt, {
|
|
12941
|
+
onLicenseSubmit: handleLicenseSubmit,
|
|
12942
|
+
onCancel: handleLicenseCancel
|
|
12943
|
+
})));
|
|
11186
12944
|
}
|
|
11187
|
-
|
|
11188
|
-
|
|
11189
|
-
if (
|
|
11190
|
-
|
|
11191
|
-
}
|
|
11192
|
-
if (dp === void 0) {
|
|
11193
|
-
dp = 1;
|
|
11194
|
-
}
|
|
11195
|
-
var thresh = si ? 1000 : 1024;
|
|
11196
|
-
if (Math.abs(bytes) < thresh) {
|
|
11197
|
-
return bytes + ' B';
|
|
12945
|
+
function useDynamsoftBarcodeContext() {
|
|
12946
|
+
var context = useContext(DynamsoftBarcodeContext);
|
|
12947
|
+
if (!context) {
|
|
12948
|
+
throw new Error('useDynamsoftBarcodeContext must be used within a DynamsoftBarcodeProvider');
|
|
11198
12949
|
}
|
|
11199
|
-
|
|
11200
|
-
var u = -1;
|
|
11201
|
-
var r = Math.pow(10, dp);
|
|
11202
|
-
do {
|
|
11203
|
-
bytes /= thresh;
|
|
11204
|
-
++u;
|
|
11205
|
-
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
|
11206
|
-
return bytes.toFixed(dp) + ' ' + units[u];
|
|
12950
|
+
return context;
|
|
11207
12951
|
}
|
|
11208
|
-
var templateObject_1$p, templateObject_2$o, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$3, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
11209
12952
|
|
|
11210
12953
|
var lastDocumentDetectedAtDefaults = {
|
|
11211
12954
|
idCardFront: null,
|
|
@@ -11215,7 +12958,7 @@ var lastDocumentDetectedAtDefaults = {
|
|
|
11215
12958
|
none: null
|
|
11216
12959
|
};
|
|
11217
12960
|
var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
11218
|
-
var _b, _c, _d, _e, _f;
|
|
12961
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
11219
12962
|
var onLoadingStarted = _a.onLoadingStarted,
|
|
11220
12963
|
onLoadingProgress = _a.onLoadingProgress,
|
|
11221
12964
|
onLoadingCompleted = _a.onLoadingCompleted,
|
|
@@ -11226,86 +12969,119 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11226
12969
|
onLoadingOverlayDismissed = _a.onLoadingOverlayDismissed,
|
|
11227
12970
|
onDocumentCaptured = _a.onDocumentCaptured,
|
|
11228
12971
|
onDocumentDetected = _a.onDocumentDetected,
|
|
11229
|
-
|
|
11230
|
-
documentDetectionThrottleMs =
|
|
11231
|
-
|
|
11232
|
-
loadingOverlayMode =
|
|
12972
|
+
_o = _a.documentDetectionThrottleMs,
|
|
12973
|
+
documentDetectionThrottleMs = _o === void 0 ? 0 : _o,
|
|
12974
|
+
_p = _a.loadingOverlayMode,
|
|
12975
|
+
loadingOverlayMode = _p === void 0 ? 'default' : _p,
|
|
11233
12976
|
customOverlayContent = _a.customOverlayContent,
|
|
11234
12977
|
precapturedDocuments = _a.precapturedDocuments,
|
|
11235
|
-
|
|
11236
|
-
captureRequirement =
|
|
11237
|
-
|
|
11238
|
-
allowSinglePageIdCapture =
|
|
11239
|
-
|
|
11240
|
-
separateIdCardCaptureSequence =
|
|
11241
|
-
|
|
11242
|
-
thresholds =
|
|
11243
|
-
|
|
11244
|
-
skipSuccessScreen =
|
|
12978
|
+
_q = _a.captureRequirement,
|
|
12979
|
+
captureRequirement = _q === void 0 ? 'idCardOrPassport' : _q,
|
|
12980
|
+
_r = _a.allowSinglePageIdCapture,
|
|
12981
|
+
allowSinglePageIdCapture = _r === void 0 ? false : _r,
|
|
12982
|
+
_s = _a.separateIdCardCaptureSequence,
|
|
12983
|
+
separateIdCardCaptureSequence = _s === void 0 ? false : _s,
|
|
12984
|
+
_t = _a.thresholds,
|
|
12985
|
+
thresholds = _t === void 0 ? defaultIdCaptureThresholds : _t,
|
|
12986
|
+
_u = _a.skipSuccessScreen,
|
|
12987
|
+
skipSuccessScreen = _u === void 0 ? false : _u,
|
|
11245
12988
|
instructions = _a.instructions,
|
|
11246
|
-
|
|
11247
|
-
releaseCameraAccessOnExit =
|
|
11248
|
-
|
|
11249
|
-
guideType =
|
|
11250
|
-
|
|
11251
|
-
portraitGuidesOnMobile =
|
|
11252
|
-
|
|
11253
|
-
rotateLoadingOverlayImageWhenPortrait =
|
|
11254
|
-
|
|
11255
|
-
silentFallback =
|
|
11256
|
-
|
|
11257
|
-
forceFallbackMode =
|
|
11258
|
-
|
|
11259
|
-
allowIdCardBackToFrontCapture =
|
|
11260
|
-
|
|
11261
|
-
enableOverrideWrongDocumentTypeDialog =
|
|
11262
|
-
|
|
11263
|
-
allowOverrideWrongDocumentTypeAfterMs =
|
|
11264
|
-
|
|
11265
|
-
allowUploadingDocumentsFromStorage =
|
|
11266
|
-
|
|
11267
|
-
guideImages =
|
|
11268
|
-
|
|
11269
|
-
|
|
11270
|
-
|
|
11271
|
-
|
|
11272
|
-
|
|
11273
|
-
|
|
11274
|
-
|
|
11275
|
-
|
|
11276
|
-
|
|
11277
|
-
|
|
11278
|
-
|
|
11279
|
-
|
|
12989
|
+
_v = _a.releaseCameraAccessOnExit,
|
|
12990
|
+
releaseCameraAccessOnExit = _v === void 0 ? true : _v,
|
|
12991
|
+
_w = _a.guideType,
|
|
12992
|
+
guideType = _w === void 0 ? 'fit' : _w,
|
|
12993
|
+
_x = _a.portraitGuidesOnMobile,
|
|
12994
|
+
portraitGuidesOnMobile = _x === void 0 ? true : _x,
|
|
12995
|
+
_y = _a.rotateLoadingOverlayImageWhenPortrait,
|
|
12996
|
+
rotateLoadingOverlayImageWhenPortrait = _y === void 0 ? true : _y,
|
|
12997
|
+
_z = _a.silentFallback,
|
|
12998
|
+
silentFallback = _z === void 0 ? false : _z,
|
|
12999
|
+
_0 = _a.forceFallbackMode,
|
|
13000
|
+
forceFallbackMode = _0 === void 0 ? false : _0,
|
|
13001
|
+
_1 = _a.allowIdCardBackToFrontCapture,
|
|
13002
|
+
allowIdCardBackToFrontCapture = _1 === void 0 ? false : _1,
|
|
13003
|
+
_2 = _a.enableOverrideWrongDocumentTypeDialog,
|
|
13004
|
+
enableOverrideWrongDocumentTypeDialog = _2 === void 0 ? false : _2,
|
|
13005
|
+
_3 = _a.allowOverrideWrongDocumentTypeAfterMs,
|
|
13006
|
+
allowOverrideWrongDocumentTypeAfterMs = _3 === void 0 ? 8000 : _3,
|
|
13007
|
+
_4 = _a.allowUploadingDocumentsFromStorage,
|
|
13008
|
+
allowUploadingDocumentsFromStorage = _4 === void 0 ? false : _4,
|
|
13009
|
+
_5 = _a.guideImages,
|
|
13010
|
+
guideImages = _5 === void 0 ? defaultIdCaptureGuideImages : _5,
|
|
13011
|
+
_6 = _a.barcodeRecaptureThreshold,
|
|
13012
|
+
barcodeRecaptureThreshold = _6 === void 0 ? 1 : _6,
|
|
13013
|
+
_7 = _a.barcodeRecaptureTimeoutMs,
|
|
13014
|
+
barcodeRecaptureTimeoutMs = _7 === void 0 ? 5000 : _7,
|
|
13015
|
+
_8 = _a.barcodeRecaptureMoveCloserTimeoutMs,
|
|
13016
|
+
barcodeRecaptureMoveCloserTimeoutMs = _8 === void 0 ? 10000 : _8,
|
|
13017
|
+
_9 = _a.barcodeRecaptureBboxGrowthPct,
|
|
13018
|
+
barcodeRecaptureBboxGrowthPct = _9 === void 0 ? 20 : _9,
|
|
13019
|
+
_10 = _a.documentEdgeDistancePct,
|
|
13020
|
+
documentEdgeDistancePct = _10 === void 0 ? 0 : _10,
|
|
13021
|
+
_11 = _a.enableClientBarcodeScan,
|
|
13022
|
+
enableClientBarcodeScan = _11 === void 0 ? false : _11,
|
|
13023
|
+
onClientBarcodeDecoded = _a.onClientBarcodeDecoded,
|
|
13024
|
+
_12 = _a.assets,
|
|
13025
|
+
assets = _12 === void 0 ? {} : _12,
|
|
13026
|
+
_13 = _a.classNames,
|
|
13027
|
+
classNames = _13 === void 0 ? {} : _13,
|
|
13028
|
+
_14 = _a.colors,
|
|
13029
|
+
colors = _14 === void 0 ? {} : _14,
|
|
13030
|
+
_15 = _a.verbiage,
|
|
13031
|
+
verbiage = _15 === void 0 ? {} : _15,
|
|
13032
|
+
_16 = _a.debugMode,
|
|
13033
|
+
debugMode = _16 === void 0 ? false : _16;
|
|
11280
13034
|
var state = useIdCaptureStore();
|
|
11281
|
-
var
|
|
11282
|
-
|
|
11283
|
-
|
|
11284
|
-
|
|
11285
|
-
|
|
11286
|
-
|
|
11287
|
-
|
|
11288
|
-
|
|
11289
|
-
|
|
11290
|
-
|
|
11291
|
-
|
|
11292
|
-
|
|
11293
|
-
|
|
11294
|
-
|
|
11295
|
-
|
|
11296
|
-
|
|
11297
|
-
|
|
11298
|
-
|
|
11299
|
-
|
|
11300
|
-
|
|
11301
|
-
|
|
11302
|
-
|
|
11303
|
-
|
|
11304
|
-
|
|
11305
|
-
|
|
11306
|
-
|
|
11307
|
-
|
|
11308
|
-
|
|
13035
|
+
var isCapturing = state.captureState === 'capturing' || state.captureState === 'requestingBetterBarcode';
|
|
13036
|
+
var _17 = useCameraStore(),
|
|
13037
|
+
cameraAccessDenied = _17.cameraAccessDenied,
|
|
13038
|
+
requestCameraAccess = _17.requestCameraAccess,
|
|
13039
|
+
releaseCameraAccess = _17.releaseCameraAccess;
|
|
13040
|
+
var _18 = useState(false),
|
|
13041
|
+
overlayDismissed = _18[0],
|
|
13042
|
+
setOverlayDismissed = _18[1];
|
|
13043
|
+
var _19 = useSubmissionContext(),
|
|
13044
|
+
submissionStatus = _19.submissionStatus,
|
|
13045
|
+
setIdFrontImage = _19.setIdFrontImage,
|
|
13046
|
+
setIdBackImage = _19.setIdBackImage,
|
|
13047
|
+
setPassportImage = _19.setPassportImage,
|
|
13048
|
+
setIdFrontIrImage = _19.setIdFrontIrImage,
|
|
13049
|
+
setIdBackIrImage = _19.setIdBackIrImage,
|
|
13050
|
+
setIdFrontUvImage = _19.setIdFrontUvImage,
|
|
13051
|
+
setIdBackUvImage = _19.setIdBackUvImage,
|
|
13052
|
+
setIdBarcodeImage = _19.setIdBarcodeImage,
|
|
13053
|
+
logIdFrontCaptureAttempt = _19.logIdFrontCaptureAttempt,
|
|
13054
|
+
logIdBackCaptureAttempt = _19.logIdBackCaptureAttempt;
|
|
13055
|
+
var _20 = useIdCaptureModelsContext(),
|
|
13056
|
+
start = _20.start,
|
|
13057
|
+
stop = _20.stop,
|
|
13058
|
+
onPredictionMade = _20.onPredictionMade,
|
|
13059
|
+
setRequiredDocumentType = _20.setRequiredDocumentType,
|
|
13060
|
+
modelError = _20.modelError,
|
|
13061
|
+
resetBestFrame = _20.resetBestFrame,
|
|
13062
|
+
resetBestBarcode = _20.resetBestBarcode,
|
|
13063
|
+
documentDetectionBoundaries = _20.documentDetectionBoundaries,
|
|
13064
|
+
setDocumentDetectionBoundaries = _20.setDocumentDetectionBoundaries,
|
|
13065
|
+
getBestBarcode = _20.getBestBarcode,
|
|
13066
|
+
startBarcodeRecapturePhase = _20.startBarcodeRecapturePhase,
|
|
13067
|
+
getRecaptureBestBarcode = _20.getRecaptureBestBarcode;
|
|
13068
|
+
var initialBarcodeBboxRef = useRef(null);
|
|
13069
|
+
var recapturePhaseStartedRef = useRef(false);
|
|
13070
|
+
var _21 = useState(false),
|
|
13071
|
+
barcodeRecaptureGrowthSatisfied = _21[0],
|
|
13072
|
+
setBarcodeRecaptureGrowthSatisfied = _21[1];
|
|
13073
|
+
useEffect(function () {
|
|
13074
|
+
// Reset recapture gating whenever we enter/exit the recapture flow
|
|
13075
|
+
if (state.captureState === 'requestingBetterBarcode') {
|
|
13076
|
+
initialBarcodeBboxRef.current = null;
|
|
13077
|
+
recapturePhaseStartedRef.current = false;
|
|
13078
|
+
setBarcodeRecaptureGrowthSatisfied(false);
|
|
13079
|
+
return;
|
|
13080
|
+
}
|
|
13081
|
+
initialBarcodeBboxRef.current = null;
|
|
13082
|
+
recapturePhaseStartedRef.current = false;
|
|
13083
|
+
setBarcodeRecaptureGrowthSatisfied(false);
|
|
13084
|
+
}, [state.captureState]);
|
|
11309
13085
|
useEffect(function () {
|
|
11310
13086
|
dispatchIdCaptureAction({
|
|
11311
13087
|
type: 'configureWizard',
|
|
@@ -11316,10 +13092,12 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11316
13092
|
allowIdCardBackToFrontCapture: allowIdCardBackToFrontCapture,
|
|
11317
13093
|
enableOverrideWrongDocumentTypeDialog: enableOverrideWrongDocumentTypeDialog,
|
|
11318
13094
|
allowOverrideWrongDocumentTypeAfterMs: allowOverrideWrongDocumentTypeAfterMs,
|
|
11319
|
-
allowUploadingDocumentsFromStorage: allowUploadingDocumentsFromStorage
|
|
13095
|
+
allowUploadingDocumentsFromStorage: allowUploadingDocumentsFromStorage,
|
|
13096
|
+
barcodeRecaptureThreshold: barcodeRecaptureThreshold,
|
|
13097
|
+
barcodeRecaptureTimeoutMs: barcodeRecaptureTimeoutMs
|
|
11320
13098
|
}
|
|
11321
13099
|
});
|
|
11322
|
-
}, [allowIdCardBackToFrontCapture, allowOverrideWrongDocumentTypeAfterMs, allowSinglePageIdCapture, allowUploadingDocumentsFromStorage, captureRequirement, enableOverrideWrongDocumentTypeDialog, precapturedDocuments]);
|
|
13100
|
+
}, [allowIdCardBackToFrontCapture, allowOverrideWrongDocumentTypeAfterMs, allowSinglePageIdCapture, allowUploadingDocumentsFromStorage, barcodeRecaptureThreshold, barcodeRecaptureTimeoutMs, captureRequirement, enableOverrideWrongDocumentTypeDialog, precapturedDocuments]);
|
|
11323
13101
|
useEffect(function () {
|
|
11324
13102
|
var _a;
|
|
11325
13103
|
var desiredEdgeDistance = documentEdgeDistancePct !== null && documentEdgeDistancePct !== void 0 ? documentEdgeDistancePct : 0;
|
|
@@ -11329,10 +13107,36 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11329
13107
|
edgeMarginPct: desiredEdgeDistance
|
|
11330
13108
|
}));
|
|
11331
13109
|
}, [documentDetectionBoundaries, documentEdgeDistancePct, setDocumentDetectionBoundaries]);
|
|
13110
|
+
// Relax detection boundaries during barcode recapture to allow edge detections
|
|
13111
|
+
// (when user zooms in, the barcode may be closer to frame edges)
|
|
13112
|
+
var savedBoundariesRef = useRef(documentDetectionBoundaries);
|
|
13113
|
+
useEffect(function () {
|
|
13114
|
+
if (state.captureState === 'requestingBetterBarcode') {
|
|
13115
|
+
// Save current boundaries and relax to 0 for recapture
|
|
13116
|
+
savedBoundariesRef.current = documentDetectionBoundaries;
|
|
13117
|
+
log('[IdCaptureWizard] Relaxing detection boundaries for barcode recapture');
|
|
13118
|
+
setDocumentDetectionBoundaries({
|
|
13119
|
+
top: 0,
|
|
13120
|
+
bottom: 0,
|
|
13121
|
+
left: 0,
|
|
13122
|
+
right: 0,
|
|
13123
|
+
edgeMarginPct: documentDetectionBoundaries.edgeMarginPct
|
|
13124
|
+
});
|
|
13125
|
+
} else if (savedBoundariesRef.current !== documentDetectionBoundaries) {
|
|
13126
|
+
// Restore boundaries when exiting recapture (only if they were changed)
|
|
13127
|
+
var saved = savedBoundariesRef.current;
|
|
13128
|
+
if (saved.top === 0 && saved.bottom === 0 && saved.left === 0 && saved.right === 0) {
|
|
13129
|
+
// Don't restore if saved values are the relaxed ones
|
|
13130
|
+
return;
|
|
13131
|
+
}
|
|
13132
|
+
}
|
|
13133
|
+
}, [state.captureState, documentDetectionBoundaries, setDocumentDetectionBoundaries]);
|
|
11332
13134
|
var documentCount = Object.keys(state.capturedDocuments).length;
|
|
11333
13135
|
useEffect(function () {
|
|
13136
|
+
// Skip reset during barcode recapture - the recapture flow manages its own canvas state
|
|
13137
|
+
if (state.captureState === 'requestingBetterBarcode') return;
|
|
11334
13138
|
if (documentCount) resetBestFrame();
|
|
11335
|
-
}, [documentCount, resetBestFrame]);
|
|
13139
|
+
}, [documentCount, resetBestFrame, state.captureState]);
|
|
11336
13140
|
var isFallbackMode = forceFallbackMode || modelError;
|
|
11337
13141
|
var lastDocumentDetectedAt = useRef(_assign({}, lastDocumentDetectedAtDefaults));
|
|
11338
13142
|
var logCaptureMetadata = useCallback(function (metadata) {
|
|
@@ -11351,24 +13155,62 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11351
13155
|
}
|
|
11352
13156
|
}, [isFallbackMode, logIdBackCaptureAttempt, logIdFrontCaptureAttempt]);
|
|
11353
13157
|
useEffect(function startModelsWhenCapturing() {
|
|
11354
|
-
if (!overlayDismissed ||
|
|
13158
|
+
if (!overlayDismissed || !isCapturing) return;
|
|
11355
13159
|
dispatchIdCaptureAction({
|
|
11356
13160
|
type: 'captureStarted'
|
|
11357
13161
|
});
|
|
11358
13162
|
start();
|
|
11359
|
-
}, [overlayDismissed, start
|
|
13163
|
+
}, [isCapturing, overlayDismissed, start]);
|
|
11360
13164
|
useEffect(function () {
|
|
11361
13165
|
onPredictionMade(function (prediction) {
|
|
11362
|
-
var _a;
|
|
11363
|
-
var
|
|
11364
|
-
captureState =
|
|
11365
|
-
requestedDocumentType =
|
|
13166
|
+
var _a, _b, _c, _d;
|
|
13167
|
+
var _e = useIdCaptureStore.getState(),
|
|
13168
|
+
captureState = _e.captureState,
|
|
13169
|
+
requestedDocumentType = _e.requestedDocumentType;
|
|
11366
13170
|
var k = "".concat(requestedDocumentType, "DetectionThresholdMet");
|
|
11367
13171
|
var thresholdMet = prediction[k];
|
|
11368
|
-
if (captureState === 'capturing') {
|
|
13172
|
+
if (captureState === 'capturing' || captureState === 'requestingBetterBarcode') {
|
|
13173
|
+
// During barcode recapture, wait until the barcode bbox grows by a configurable %
|
|
13174
|
+
// (to confirm the user moved the camera closer) before we start recapture processing.
|
|
13175
|
+
if (captureState === 'requestingBetterBarcode') {
|
|
13176
|
+
var growthPct = Math.max(0, Math.min(barcodeRecaptureBboxGrowthPct, 200));
|
|
13177
|
+
var requiredMultiplier = 1 + growthPct / 100;
|
|
13178
|
+
if (!recapturePhaseStartedRef.current) {
|
|
13179
|
+
// If growth requirement is disabled, begin recapture immediately.
|
|
13180
|
+
if (requiredMultiplier === 1) {
|
|
13181
|
+
recapturePhaseStartedRef.current = true;
|
|
13182
|
+
setBarcodeRecaptureGrowthSatisfied(true);
|
|
13183
|
+
startBarcodeRecapturePhase();
|
|
13184
|
+
} else {
|
|
13185
|
+
var pdf417Box = (_a = prediction.bestPDF417) === null || _a === void 0 ? void 0 : _a.box;
|
|
13186
|
+
var frameWidth = (_b = prediction.frameWidth) !== null && _b !== void 0 ? _b : 0;
|
|
13187
|
+
var frameHeight = (_c = prediction.frameHeight) !== null && _c !== void 0 ? _c : 0;
|
|
13188
|
+
if (pdf417Box && frameWidth > 0 && frameHeight > 0) {
|
|
13189
|
+
var widthRatio = pdf417Box.width / frameWidth;
|
|
13190
|
+
var heightRatio = pdf417Box.height / frameHeight;
|
|
13191
|
+
if (!initialBarcodeBboxRef.current) {
|
|
13192
|
+
// First observed bbox when we enter recapture.
|
|
13193
|
+
initialBarcodeBboxRef.current = {
|
|
13194
|
+
widthRatio: widthRatio,
|
|
13195
|
+
heightRatio: heightRatio
|
|
13196
|
+
};
|
|
13197
|
+
} else {
|
|
13198
|
+
var baseline = initialBarcodeBboxRef.current;
|
|
13199
|
+
var widthSatisfied = widthRatio >= baseline.widthRatio * requiredMultiplier;
|
|
13200
|
+
var heightSatisfied = heightRatio >= baseline.heightRatio * requiredMultiplier;
|
|
13201
|
+
if (widthSatisfied && heightSatisfied) {
|
|
13202
|
+
recapturePhaseStartedRef.current = true;
|
|
13203
|
+
setBarcodeRecaptureGrowthSatisfied(true);
|
|
13204
|
+
startBarcodeRecapturePhase();
|
|
13205
|
+
}
|
|
13206
|
+
}
|
|
13207
|
+
}
|
|
13208
|
+
}
|
|
13209
|
+
}
|
|
13210
|
+
}
|
|
11369
13211
|
if (prediction.detectedDocumentType !== 'none') {
|
|
11370
13212
|
var now = Date.now();
|
|
11371
|
-
if (!lastDocumentDetectedAt.current[prediction.detectedDocumentType] || documentDetectionThrottleMs && now - ((
|
|
13213
|
+
if (!lastDocumentDetectedAt.current[prediction.detectedDocumentType] || documentDetectionThrottleMs && now - ((_d = lastDocumentDetectedAt.current[prediction.detectedDocumentType]) !== null && _d !== void 0 ? _d : 0) > documentDetectionThrottleMs) {
|
|
11372
13214
|
lastDocumentDetectedAt.current[prediction.detectedDocumentType] = now;
|
|
11373
13215
|
onDocumentDetected === null || onDocumentDetected === void 0 ? void 0 : onDocumentDetected(prediction.detectedDocumentType);
|
|
11374
13216
|
}
|
|
@@ -11386,10 +13228,67 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11386
13228
|
});
|
|
11387
13229
|
}
|
|
11388
13230
|
});
|
|
11389
|
-
}, [documentDetectionThrottleMs, onDocumentDetected, onPredictionMade, resetBestFrame]);
|
|
13231
|
+
}, [barcodeRecaptureBboxGrowthPct, documentDetectionThrottleMs, onDocumentDetected, onPredictionMade, resetBestFrame, startBarcodeRecapturePhase]);
|
|
11390
13232
|
useEffect(function () {
|
|
11391
13233
|
if (state.captureState === 'complete') stop();
|
|
11392
13234
|
}, [state.captureState, stop]);
|
|
13235
|
+
// Run native barcode decoder when capture completes and there's a barcode image
|
|
13236
|
+
useEffect(function () {
|
|
13237
|
+
var _a;
|
|
13238
|
+
if (state.captureState !== 'complete') return;
|
|
13239
|
+
if (state.nativeBarcodeDecodeResult) return; // Already decoded
|
|
13240
|
+
if (state.nativeBarcodeDecoding) return; // Already decoding
|
|
13241
|
+
var barcodeImage = (_a = state.capturedDocuments.idBarcodeImage) === null || _a === void 0 ? void 0 : _a.imageData;
|
|
13242
|
+
if (!barcodeImage) return;
|
|
13243
|
+
log('[IdCaptureWizard] Running native barcode decoder on final barcode image');
|
|
13244
|
+
dispatchIdCaptureAction({
|
|
13245
|
+
type: 'nativeBarcodeDecodeStarted'
|
|
13246
|
+
});
|
|
13247
|
+
// Convert base64/data URL to blob and decode
|
|
13248
|
+
fetch(barcodeImage.startsWith('data:') ? barcodeImage : "data:image/jpeg;base64,".concat(barcodeImage)).then(function (res) {
|
|
13249
|
+
return res.blob();
|
|
13250
|
+
}).then(function (blob) {
|
|
13251
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
13252
|
+
var result, error_1;
|
|
13253
|
+
return __generator(this, function (_a) {
|
|
13254
|
+
switch (_a.label) {
|
|
13255
|
+
case 0:
|
|
13256
|
+
_a.trys.push([0, 2,, 3]);
|
|
13257
|
+
return [4 /*yield*/, decodePDF417(blob)];
|
|
13258
|
+
case 1:
|
|
13259
|
+
result = _a.sent();
|
|
13260
|
+
if (result) {
|
|
13261
|
+
log("[IdCaptureWizard] Native barcode decoded via ".concat(result.method, ": ").concat(result.text.substring(0, 50), "..."));
|
|
13262
|
+
dispatchIdCaptureAction({
|
|
13263
|
+
type: 'nativeBarcodeDecoded',
|
|
13264
|
+
payload: result
|
|
13265
|
+
});
|
|
13266
|
+
} else {
|
|
13267
|
+
log('[IdCaptureWizard] Native barcode decode returned no result');
|
|
13268
|
+
dispatchIdCaptureAction({
|
|
13269
|
+
type: 'nativeBarcodeDecodeFailed'
|
|
13270
|
+
});
|
|
13271
|
+
}
|
|
13272
|
+
return [3 /*break*/, 3];
|
|
13273
|
+
case 2:
|
|
13274
|
+
error_1 = _a.sent();
|
|
13275
|
+
log('[IdCaptureWizard] Native barcode decode error:', error_1);
|
|
13276
|
+
dispatchIdCaptureAction({
|
|
13277
|
+
type: 'nativeBarcodeDecodeFailed'
|
|
13278
|
+
});
|
|
13279
|
+
return [3 /*break*/, 3];
|
|
13280
|
+
case 3:
|
|
13281
|
+
return [2 /*return*/];
|
|
13282
|
+
}
|
|
13283
|
+
});
|
|
13284
|
+
});
|
|
13285
|
+
})["catch"](function (error) {
|
|
13286
|
+
log('[IdCaptureWizard] Failed to fetch barcode image for native decode:', error);
|
|
13287
|
+
dispatchIdCaptureAction({
|
|
13288
|
+
type: 'nativeBarcodeDecodeFailed'
|
|
13289
|
+
});
|
|
13290
|
+
});
|
|
13291
|
+
}, [state.captureState, (_b = state.capturedDocuments.idBarcodeImage) === null || _b === void 0 ? void 0 : _b.imageData, state.nativeBarcodeDecodeResult, state.nativeBarcodeDecoding]);
|
|
11393
13292
|
var onCapture = useCallback(function (imageData, width, height, documentType, metadata) {
|
|
11394
13293
|
logCaptureMetadata(metadata);
|
|
11395
13294
|
onDocumentCaptured === null || onDocumentCaptured === void 0 ? void 0 : onDocumentCaptured(metadata);
|
|
@@ -11441,9 +13340,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11441
13340
|
type: 'resetWizard'
|
|
11442
13341
|
});
|
|
11443
13342
|
}, []);
|
|
11444
|
-
var
|
|
11445
|
-
attempt =
|
|
11446
|
-
setAttempt =
|
|
13343
|
+
var _22 = useState(0),
|
|
13344
|
+
attempt = _22[0],
|
|
13345
|
+
setAttempt = _22[1];
|
|
11447
13346
|
var onExit = useCallback(function () {
|
|
11448
13347
|
releaseCameraAccess();
|
|
11449
13348
|
setOverlayDismissed(false);
|
|
@@ -11469,20 +13368,25 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11469
13368
|
});
|
|
11470
13369
|
}
|
|
11471
13370
|
}, [cameraAccessDenied]);
|
|
13371
|
+
var guidanceBarcodeRecaptureText = (_c = verbiage.guidanceBarcodeRecaptureText) !== null && _c !== void 0 ? _c : 'Please move the barcode closer to the camera';
|
|
13372
|
+
var guidanceBarcodeRecaptureInProgressText = (_d = verbiage.guidanceBarcodeRecaptureInProgressText) !== null && _d !== void 0 ? _d : 'Barcode capture in progress, please hold still';
|
|
13373
|
+
var barcodeRecaptureGuidanceMessage = barcodeRecaptureGrowthSatisfied ? guidanceBarcodeRecaptureInProgressText : guidanceBarcodeRecaptureText;
|
|
11472
13374
|
var idCaptureVerbiages = {
|
|
11473
13375
|
idCardFront: useTranslations(verbiage.idCardFront, {
|
|
11474
13376
|
instructionText: 'Scan the front of ID',
|
|
11475
13377
|
processingIdCardText: "ID card ".concat('idCardFront' in state.capturedDocuments ? 'front' : 'back', " captured.")
|
|
11476
13378
|
}),
|
|
11477
13379
|
idCardBack: useTranslations(verbiage.idCardBack, {
|
|
11478
|
-
instructionText: 'Scan the back of ID'
|
|
13380
|
+
instructionText: state.captureState === 'requestingBetterBarcode' ? barcodeRecaptureGuidanceMessage : 'Scan the back of ID'
|
|
11479
13381
|
}),
|
|
11480
13382
|
passport: useTranslations(verbiage.passport, {
|
|
11481
13383
|
instructionText: 'Scan the ID page of passport'
|
|
11482
13384
|
})
|
|
11483
13385
|
};
|
|
11484
13386
|
var theme = useTheme();
|
|
11485
|
-
|
|
13387
|
+
// During barcode recapture, use idCardBack verbiage to show barcode recapture message
|
|
13388
|
+
var verbiageKey = state.captureState === 'requestingBetterBarcode' ? 'idCardBack' : state.requestedDocumentType;
|
|
13389
|
+
var idCaptureVerbiage = idCaptureVerbiages[verbiageKey];
|
|
11486
13390
|
useEffect(function () {
|
|
11487
13391
|
if (separateIdCardCaptureSequence) return;
|
|
11488
13392
|
if (state.captureState !== 'requestingFlip') return;
|
|
@@ -11496,6 +13400,152 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11496
13400
|
clearTimeout(t);
|
|
11497
13401
|
};
|
|
11498
13402
|
}, [resetBestFrame, separateIdCardCaptureSequence, state.captureState]);
|
|
13403
|
+
// Handle barcode recapture start - snapshot initial barcode and initialize recapture state
|
|
13404
|
+
useEffect(function () {
|
|
13405
|
+
var _a, _b;
|
|
13406
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
13407
|
+
if (state.initialCaptureBarcodeImage !== null) return; // Already initialized
|
|
13408
|
+
// Get the initial barcode image from capturedDocuments (since resetBestFrame clears the canvas)
|
|
13409
|
+
var initialBarcodeImage = (_b = (_a = state.capturedDocuments.idBarcodeImage) === null || _a === void 0 ? void 0 : _a.imageData) !== null && _b !== void 0 ? _b : null;
|
|
13410
|
+
dispatchIdCaptureAction({
|
|
13411
|
+
type: 'barcodeRecaptureStarted',
|
|
13412
|
+
payload: {
|
|
13413
|
+
initialBarcodeScore: state.initialBarcodeScore,
|
|
13414
|
+
initialCaptureBarcodeImage: initialBarcodeImage
|
|
13415
|
+
}
|
|
13416
|
+
});
|
|
13417
|
+
// Start recapture phase immediately so barcode analysis runs with relaxed conditions
|
|
13418
|
+
// (don't require document in bounds since user is zooming in)
|
|
13419
|
+
startBarcodeRecapturePhase();
|
|
13420
|
+
}, [startBarcodeRecapturePhase, state.captureState, (_e = state.capturedDocuments.idBarcodeImage) === null || _e === void 0 ? void 0 : _e.imageData, state.initialBarcodeScore, state.initialCaptureBarcodeImage]);
|
|
13421
|
+
// Reset best barcode after 1 second delay to ignore early frames before user has time to move closer
|
|
13422
|
+
useEffect(function () {
|
|
13423
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
13424
|
+
var t = setTimeout(function () {
|
|
13425
|
+
log('[IdCaptureWizard] Resetting best barcode after 1s delay in move-closer window');
|
|
13426
|
+
resetBestBarcode();
|
|
13427
|
+
}, 1000);
|
|
13428
|
+
return function () {
|
|
13429
|
+
return clearTimeout(t);
|
|
13430
|
+
};
|
|
13431
|
+
}, [resetBestBarcode, state.captureState]);
|
|
13432
|
+
// Handle barcode recapture timeout
|
|
13433
|
+
useEffect(function () {
|
|
13434
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
13435
|
+
// Continue detection to try to get a better barcode
|
|
13436
|
+
setTimeout(start, 100);
|
|
13437
|
+
var t = setTimeout(function () {
|
|
13438
|
+
var _a, _b;
|
|
13439
|
+
// Move-closer window expired before growth requirement was met
|
|
13440
|
+
if (recapturePhaseStartedRef.current) return;
|
|
13441
|
+
// Use recapture tracking since we start tracking with relaxed conditions immediately
|
|
13442
|
+
var recaptureBarcode = getRecaptureBestBarcode();
|
|
13443
|
+
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
13444
|
+
var improved = !!recaptureBarcode && recaptureBarcode.score > state.initialBarcodeScore;
|
|
13445
|
+
if (improved) {
|
|
13446
|
+
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. Found better barcode anyway: ".concat(recaptureBarcode.score.toFixed(3), " (was ").concat(state.initialBarcodeScore.toFixed(3), ")"));
|
|
13447
|
+
dispatchIdCaptureAction({
|
|
13448
|
+
type: 'barcodeCaptured',
|
|
13449
|
+
payload: {
|
|
13450
|
+
imageUrl: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95),
|
|
13451
|
+
barcodeReadabilityScore: recaptureBarcode.score
|
|
13452
|
+
}
|
|
13453
|
+
});
|
|
13454
|
+
} else {
|
|
13455
|
+
log("[IdCaptureWizard] Barcode recapture move-closer window timed out. No better barcode found. Best score during window: ".concat((_b = recaptureScore === null || recaptureScore === void 0 ? void 0 : recaptureScore.toFixed(3)) !== null && _b !== void 0 ? _b : 'none', ", initial score: ").concat(state.initialBarcodeScore.toFixed(3)));
|
|
13456
|
+
}
|
|
13457
|
+
// Record recapture attempt data for diagnostics - always store the best score
|
|
13458
|
+
// from the move-closer window so debug info shows what was actually captured
|
|
13459
|
+
dispatchIdCaptureAction({
|
|
13460
|
+
type: 'barcodeRecaptureScoreUpdated',
|
|
13461
|
+
payload: {
|
|
13462
|
+
recaptureBarcodeScore: recaptureScore
|
|
13463
|
+
}
|
|
13464
|
+
});
|
|
13465
|
+
// Persist the barcode image from move-closer window for debug visual comparison
|
|
13466
|
+
if (recaptureBarcode) {
|
|
13467
|
+
dispatchIdCaptureAction({
|
|
13468
|
+
type: 'recaptureBarcodeImageCaptured',
|
|
13469
|
+
payload: {
|
|
13470
|
+
recaptureBarcodeImage: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
13471
|
+
}
|
|
13472
|
+
});
|
|
13473
|
+
}
|
|
13474
|
+
dispatchIdCaptureAction({
|
|
13475
|
+
type: 'barcodeRecaptureCompleted'
|
|
13476
|
+
});
|
|
13477
|
+
}, barcodeRecaptureMoveCloserTimeoutMs);
|
|
13478
|
+
return function () {
|
|
13479
|
+
return clearTimeout(t);
|
|
13480
|
+
};
|
|
13481
|
+
}, [barcodeRecaptureMoveCloserTimeoutMs, getRecaptureBestBarcode, start, state.captureState, state.initialBarcodeScore]);
|
|
13482
|
+
useEffect(function () {
|
|
13483
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
13484
|
+
if (!barcodeRecaptureGrowthSatisfied) return;
|
|
13485
|
+
var t = setTimeout(function () {
|
|
13486
|
+
var _a, _b;
|
|
13487
|
+
// Capture window expired - complete with whatever barcode we have
|
|
13488
|
+
var recaptureBarcode = getRecaptureBestBarcode();
|
|
13489
|
+
var bestBarcode = getBestBarcode();
|
|
13490
|
+
var recaptureScore = (_a = recaptureBarcode === null || recaptureBarcode === void 0 ? void 0 : recaptureBarcode.score) !== null && _a !== void 0 ? _a : null;
|
|
13491
|
+
var improved = !!bestBarcode && bestBarcode.score > state.initialBarcodeScore;
|
|
13492
|
+
log("[IdCaptureWizard] Recapture timeout debug: recaptureBarcode=".concat(!!recaptureBarcode, ", recaptureScore=").concat(recaptureScore, ", bestBarcode=").concat(!!bestBarcode, ", bestBarcodeScore=").concat(bestBarcode === null || bestBarcode === void 0 ? void 0 : bestBarcode.score, ", initialScore=").concat(state.initialBarcodeScore, ", improved=").concat(improved));
|
|
13493
|
+
// Store the recapture score for diagnostic purposes
|
|
13494
|
+
// Always use actual recapture score (even if worse than initial) so debug info
|
|
13495
|
+
// shows what was actually captured during each sequence
|
|
13496
|
+
dispatchIdCaptureAction({
|
|
13497
|
+
type: 'barcodeRecaptureScoreUpdated',
|
|
13498
|
+
payload: {
|
|
13499
|
+
recaptureBarcodeScore: recaptureScore
|
|
13500
|
+
}
|
|
13501
|
+
});
|
|
13502
|
+
// Store the recapture barcode image if we found one
|
|
13503
|
+
if (recaptureBarcode) {
|
|
13504
|
+
dispatchIdCaptureAction({
|
|
13505
|
+
type: 'recaptureBarcodeImageCaptured',
|
|
13506
|
+
payload: {
|
|
13507
|
+
recaptureBarcodeImage: recaptureBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
13508
|
+
}
|
|
13509
|
+
});
|
|
13510
|
+
} else if (improved) {
|
|
13511
|
+
// If we improved but don't have a recapture-specific best tracked,
|
|
13512
|
+
// still persist the "after" image so debug visual comparison works.
|
|
13513
|
+
dispatchIdCaptureAction({
|
|
13514
|
+
type: 'recaptureBarcodeImageCaptured',
|
|
13515
|
+
payload: {
|
|
13516
|
+
recaptureBarcodeImage: bestBarcode.canvas.toDataURL('image/jpeg', 0.95)
|
|
13517
|
+
}
|
|
13518
|
+
});
|
|
13519
|
+
}
|
|
13520
|
+
if (improved) {
|
|
13521
|
+
log("[IdCaptureWizard] Barcode recapture completed. Found better barcode: ".concat(bestBarcode.score.toFixed(3), " (was ").concat(state.initialBarcodeScore.toFixed(3), ")"));
|
|
13522
|
+
dispatchIdCaptureAction({
|
|
13523
|
+
type: 'barcodeCaptured',
|
|
13524
|
+
payload: {
|
|
13525
|
+
imageUrl: bestBarcode.canvas.toDataURL('image/jpeg', 0.95),
|
|
13526
|
+
barcodeReadabilityScore: bestBarcode.score
|
|
13527
|
+
}
|
|
13528
|
+
});
|
|
13529
|
+
} else {
|
|
13530
|
+
log("[IdCaptureWizard] Barcode recapture completed. No better barcode found. Best recapture score: ".concat((_b = recaptureScore === null || recaptureScore === void 0 ? void 0 : recaptureScore.toFixed(3)) !== null && _b !== void 0 ? _b : 'none', ", initial score: ").concat(state.initialBarcodeScore.toFixed(3)));
|
|
13531
|
+
}
|
|
13532
|
+
dispatchIdCaptureAction({
|
|
13533
|
+
type: 'barcodeRecaptureCompleted'
|
|
13534
|
+
});
|
|
13535
|
+
}, barcodeRecaptureTimeoutMs);
|
|
13536
|
+
return function () {
|
|
13537
|
+
return clearTimeout(t);
|
|
13538
|
+
};
|
|
13539
|
+
}, [barcodeRecaptureGrowthSatisfied, barcodeRecaptureTimeoutMs, getBestBarcode, getRecaptureBestBarcode, state.captureState, state.initialBarcodeScore]);
|
|
13540
|
+
// Continue detection during barcode recapture and update barcode if better one found
|
|
13541
|
+
useEffect(function () {
|
|
13542
|
+
if (state.captureState !== 'requestingBetterBarcode') return;
|
|
13543
|
+
// Set required document type to idCardBack for barcode detection
|
|
13544
|
+
setRequiredDocumentType('idCardBack');
|
|
13545
|
+
return function () {
|
|
13546
|
+
setRequiredDocumentType('none');
|
|
13547
|
+
};
|
|
13548
|
+
}, [setRequiredDocumentType, state.captureState]);
|
|
11499
13549
|
useEffect(function () {
|
|
11500
13550
|
if (state.requestedDocumentType === 'idCardFront') {
|
|
11501
13551
|
if (captureRequirement === 'idCardOrPassport') {
|
|
@@ -11534,9 +13584,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11534
13584
|
});
|
|
11535
13585
|
});
|
|
11536
13586
|
}, []);
|
|
11537
|
-
var
|
|
11538
|
-
progressStarted =
|
|
11539
|
-
setProgressStarted =
|
|
13587
|
+
var _23 = useState(false),
|
|
13588
|
+
progressStarted = _23[0],
|
|
13589
|
+
setProgressStarted = _23[1];
|
|
11540
13590
|
useEffect(function () {
|
|
11541
13591
|
if (state.captureState === 'capturing') {
|
|
11542
13592
|
setProgressStarted(false);
|
|
@@ -11547,6 +13597,65 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11547
13597
|
setProgressStarted(true);
|
|
11548
13598
|
}
|
|
11549
13599
|
}, [state.goodFramesCount]);
|
|
13600
|
+
// Configure client barcode scan state
|
|
13601
|
+
useEffect(function () {
|
|
13602
|
+
dispatchIdCaptureAction({
|
|
13603
|
+
type: 'configureClientBarcodeScan',
|
|
13604
|
+
payload: {
|
|
13605
|
+
enabled: enableClientBarcodeScan
|
|
13606
|
+
}
|
|
13607
|
+
});
|
|
13608
|
+
}, [enableClientBarcodeScan]);
|
|
13609
|
+
// Client barcode scanning integration
|
|
13610
|
+
var dynamsoftContext = useDynamsoftBarcodeContext();
|
|
13611
|
+
var _24 = dynamsoftContext !== null && dynamsoftContext !== void 0 ? dynamsoftContext : {
|
|
13612
|
+
loadState: 'not-started',
|
|
13613
|
+
lastDecodeResult: null,
|
|
13614
|
+
isScanning: false,
|
|
13615
|
+
startScanning: function startScanning() {},
|
|
13616
|
+
stopScanning: function stopScanning() {}
|
|
13617
|
+
},
|
|
13618
|
+
dynamsoftLoadState = _24.loadState,
|
|
13619
|
+
lastDecodeResult = _24.lastDecodeResult,
|
|
13620
|
+
isDynamsoftScanning = _24.isScanning,
|
|
13621
|
+
startScanning = _24.startScanning,
|
|
13622
|
+
stopScanning = _24.stopScanning;
|
|
13623
|
+
// Start/stop client barcode scanning when capturing ID back or during barcode recapture
|
|
13624
|
+
useEffect(function () {
|
|
13625
|
+
if (!enableClientBarcodeScan) return;
|
|
13626
|
+
if (dynamsoftLoadState !== 'ready') return;
|
|
13627
|
+
// Scan during initial ID back capture
|
|
13628
|
+
var isCapturingIdBack = overlayDismissed && state.captureState === 'capturing' && state.requestedDocumentType === 'idCardBack';
|
|
13629
|
+
// Also scan during barcode recapture flow (when asking user to move closer)
|
|
13630
|
+
var isInBarcodeRecapture = state.captureState === 'requestingBetterBarcode';
|
|
13631
|
+
var shouldScan = (isCapturingIdBack || isInBarcodeRecapture) && !lastDecodeResult;
|
|
13632
|
+
if (shouldScan && !isDynamsoftScanning) {
|
|
13633
|
+
log('[IdCaptureWizard] Starting client barcode scanning');
|
|
13634
|
+
dispatchIdCaptureAction({
|
|
13635
|
+
type: 'clientBarcodeScanStarted'
|
|
13636
|
+
});
|
|
13637
|
+
startScanning();
|
|
13638
|
+
} else if (!shouldScan && isDynamsoftScanning) {
|
|
13639
|
+
log('[IdCaptureWizard] Stopping client barcode scanning');
|
|
13640
|
+
stopScanning();
|
|
13641
|
+
dispatchIdCaptureAction({
|
|
13642
|
+
type: 'clientBarcodeScanStopped'
|
|
13643
|
+
});
|
|
13644
|
+
}
|
|
13645
|
+
}, [enableClientBarcodeScan, dynamsoftLoadState, overlayDismissed, state.captureState, state.requestedDocumentType, lastDecodeResult, isDynamsoftScanning, startScanning, stopScanning]);
|
|
13646
|
+
// Handle client barcode decode result
|
|
13647
|
+
useEffect(function () {
|
|
13648
|
+
if (!lastDecodeResult) return;
|
|
13649
|
+
log("[IdCaptureWizard] Client barcode decoded: ".concat(lastDecodeResult.format, " - ").concat(lastDecodeResult.text.substring(0, 50), "..."));
|
|
13650
|
+
dispatchIdCaptureAction({
|
|
13651
|
+
type: 'clientBarcodeDecoded',
|
|
13652
|
+
payload: lastDecodeResult
|
|
13653
|
+
});
|
|
13654
|
+
// Note: We no longer exit recapture immediately when Dynamsoft decodes.
|
|
13655
|
+
// This allows the barcode recapture flow to continue and capture a good
|
|
13656
|
+
// barcode image for comparison with native decoder results.
|
|
13657
|
+
onClientBarcodeDecoded === null || onClientBarcodeDecoded === void 0 ? void 0 : onClientBarcodeDecoded(lastDecodeResult);
|
|
13658
|
+
}, [lastDecodeResult, onClientBarcodeDecoded]);
|
|
11550
13659
|
if (isFallbackMode) {
|
|
11551
13660
|
return /*#__PURE__*/React__default.createElement(IdCaptureFallback, {
|
|
11552
13661
|
idCaptureRequirement: captureRequirement,
|
|
@@ -11564,9 +13673,9 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11564
13673
|
verbiage: verbiage.uploadOrCaptureScreen
|
|
11565
13674
|
});
|
|
11566
13675
|
}
|
|
11567
|
-
var requestedAction = state.captureState === 'requestingFlip' ? 'FLIP_ID' : state.requestedDocumentType === 'idCardBack' ? 'SHOW_ID_BACK' : state.requestedDocumentType === 'passport' ? 'SHOW_PASSPORT' : 'SHOW_ID_FRONT';
|
|
13676
|
+
var requestedAction = state.captureState === 'requestingFlip' ? 'FLIP_ID' : state.captureState === 'requestingBetterBarcode' ? 'SHOW_ID_BACK' : state.requestedDocumentType === 'idCardBack' ? 'SHOW_ID_BACK' : state.requestedDocumentType === 'passport' ? 'SHOW_PASSPORT' : 'SHOW_ID_FRONT';
|
|
11568
13677
|
var guidesStatus = !overlayDismissed ? 'disabled' : state.isGoodFrame ? 'capturing' : 'ready';
|
|
11569
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ScalingCameraFeed, null), overlayDismissed && state.captureState === 'capturing' && (/*#__PURE__*/React__default.createElement(IdCapture, {
|
|
13678
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ScalingCameraFeed, null), overlayDismissed && (state.captureState === 'capturing' || state.captureState === 'requestingBetterBarcode') && (/*#__PURE__*/React__default.createElement(IdCapture, {
|
|
11570
13679
|
requiredDocumentType: state.requestedDocumentType,
|
|
11571
13680
|
thresholds: thresholds,
|
|
11572
13681
|
onCapture: onCapture,
|
|
@@ -11574,27 +13683,35 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11574
13683
|
colors: colors,
|
|
11575
13684
|
verbiage: idCaptureVerbiage,
|
|
11576
13685
|
debugMode: debugMode
|
|
11577
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
13686
|
+
})), overlayDismissed && state.captureState === 'requestingBetterBarcode' && (/*#__PURE__*/React__default.createElement(GuidanceMessageContainer, {
|
|
13687
|
+
"$top": "",
|
|
13688
|
+
"$bottom": "12.5%",
|
|
13689
|
+
className: (_f = classNames.capture) === null || _f === void 0 ? void 0 : _f.guidanceMessageContainer
|
|
13690
|
+
}, /*#__PURE__*/React__default.createElement(GuidanceMessage, {
|
|
13691
|
+
"$variant": "default",
|
|
13692
|
+
className: (_g = classNames.capture) === null || _g === void 0 ? void 0 : _g.guidanceMessage
|
|
13693
|
+
}, barcodeRecaptureGuidanceMessage))), /*#__PURE__*/React__default.createElement(IdCaptureGuides, {
|
|
11578
13694
|
key: "guides".concat(attempt),
|
|
11579
13695
|
guideType: guideType,
|
|
11580
13696
|
status: guidesStatus,
|
|
11581
|
-
progress: progressStarted &&
|
|
13697
|
+
progress: progressStarted && isCapturing ? 1 : 0,
|
|
11582
13698
|
portraitGuidesOnMobile: portraitGuidesOnMobile,
|
|
11583
13699
|
requestedAction: requestedAction,
|
|
11584
13700
|
images: guideImages,
|
|
11585
13701
|
classNames: classNames.guides,
|
|
11586
13702
|
colors: colors,
|
|
11587
13703
|
verbiage: idCaptureVerbiage,
|
|
11588
|
-
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments
|
|
11589
|
-
|
|
11590
|
-
|
|
11591
|
-
|
|
13704
|
+
isBackToFront: state.allowIdCardBackToFrontCapture && 'idCardBack' in state.capturedDocuments,
|
|
13705
|
+
isRequestingBetterBarcode: state.captureState === 'requestingBetterBarcode'
|
|
13706
|
+
}), debugMode && !((_j = (_h = theme.idCapture) === null || _h === void 0 ? void 0 : _h.capturePreview) === null || _j === void 0 ? void 0 : _j.disabled) && state.captureState === 'requestingFlip' && !separateIdCardCaptureSequence && state.imageUrl && (/*#__PURE__*/React__default.createElement(IdCaptureImagePreview, {
|
|
13707
|
+
classNames: (_k = classNames.capture) === null || _k === void 0 ? void 0 : _k.imagePreview,
|
|
13708
|
+
text: (_l = idCaptureVerbiages === null || idCaptureVerbiages === void 0 ? void 0 : idCaptureVerbiages.idCardFront) === null || _l === void 0 ? void 0 : _l.processingIdCardText,
|
|
11592
13709
|
imageUrl: state.imageUrl
|
|
11593
13710
|
})), state.captureState !== 'complete' && (/*#__PURE__*/React__default.createElement("div", {
|
|
11594
13711
|
id: "idmission-above-guides-content"
|
|
11595
13712
|
})), (!customOverlayContent || !!customOverlayContent && overlayDismissed) && (/*#__PURE__*/React__default.createElement(ExitCaptureButton, {
|
|
11596
13713
|
onClick: onExit,
|
|
11597
|
-
className: (
|
|
13714
|
+
className: (_m = classNames.capture) === null || _m === void 0 ? void 0 : _m.exitCaptureBtn
|
|
11598
13715
|
})), !overlayDismissed && (/*#__PURE__*/React__default.createElement(IdCaptureLoadingOverlay, {
|
|
11599
13716
|
key: "loading".concat(attempt),
|
|
11600
13717
|
mode: loadingOverlayMode,
|
|
@@ -11632,9 +13749,21 @@ var IdCaptureWizard = function IdCaptureWizard(_a) {
|
|
|
11632
13749
|
onRetryClick: onRetryClick,
|
|
11633
13750
|
colors: colors.success,
|
|
11634
13751
|
verbiage: verbiage.success,
|
|
11635
|
-
debugMode: debugMode
|
|
13752
|
+
debugMode: debugMode,
|
|
13753
|
+
initialBarcodeScore:
|
|
13754
|
+
// Show diagnostic info if recapture occurred (indicated by recaptureBarcodeScore being set)
|
|
13755
|
+
// If recapture occurred, initialBarcodeScore was set (even if it's 0, which is valid)
|
|
13756
|
+
state.recaptureBarcodeScore !== null ? state.initialBarcodeScore : undefined,
|
|
13757
|
+
recaptureBarcodeScore: state.recaptureBarcodeScore,
|
|
13758
|
+
initialCaptureBarcodeImage: state.initialCaptureBarcodeImage,
|
|
13759
|
+
recaptureBarcodeImage: state.recaptureBarcodeImage,
|
|
13760
|
+
clientBarcodeDecodeResult: state.clientBarcodeDecodeResult,
|
|
13761
|
+
nativeBarcodeDecodeResult: state.nativeBarcodeDecodeResult
|
|
11636
13762
|
})));
|
|
11637
13763
|
};
|
|
13764
|
+
function IdCaptureWizardInner(props) {
|
|
13765
|
+
return /*#__PURE__*/React__default.createElement(IdCaptureStateProvider, null, /*#__PURE__*/React__default.createElement(GuideOrientationContextProvider, null, /*#__PURE__*/React__default.createElement(IdCaptureWizard, _assign({}, props))));
|
|
13766
|
+
}
|
|
11638
13767
|
function IdCaptureWizardWithProviders(_a) {
|
|
11639
13768
|
var _b, _c, _d, _e, _f, _g;
|
|
11640
13769
|
var onCameraAccessDenied = _a.onCameraAccessDenied,
|
|
@@ -11642,6 +13771,20 @@ function IdCaptureWizardWithProviders(_a) {
|
|
|
11642
13771
|
onMicrophoneAccessDenied = _a.onMicrophoneAccessDenied,
|
|
11643
13772
|
shouldLoadIdCaptureModels = _a.shouldLoadIdCaptureModels,
|
|
11644
13773
|
idCaptureProps = __rest(_a, ["onCameraAccessDenied", "onCameraTamperingDetected", "onMicrophoneAccessDenied", "shouldLoadIdCaptureModels"]);
|
|
13774
|
+
var enableClientBarcodeScan = idCaptureProps.enableClientBarcodeScan,
|
|
13775
|
+
dynamsoftOrganizationId = idCaptureProps.dynamsoftOrganizationId,
|
|
13776
|
+
dynamsoftLicenseKey = idCaptureProps.dynamsoftLicenseKey,
|
|
13777
|
+
promptForDynamsoftLicense = idCaptureProps.promptForDynamsoftLicense,
|
|
13778
|
+
onClientBarcodeDecoded = idCaptureProps.onClientBarcodeDecoded;
|
|
13779
|
+
// Enable Dynamsoft provider if we have credentials OR if prompt mode is enabled
|
|
13780
|
+
var shouldUseDynamsoftProvider = enableClientBarcodeScan && (dynamsoftOrganizationId || dynamsoftLicenseKey || promptForDynamsoftLicense);
|
|
13781
|
+
var innerContent = shouldUseDynamsoftProvider ? (/*#__PURE__*/React__default.createElement(DynamsoftBarcodeProvider, {
|
|
13782
|
+
organizationId: dynamsoftOrganizationId,
|
|
13783
|
+
licenseKey: dynamsoftLicenseKey,
|
|
13784
|
+
promptForLicense: promptForDynamsoftLicense,
|
|
13785
|
+
enabled: enableClientBarcodeScan,
|
|
13786
|
+
onBarcodeDecoded: onClientBarcodeDecoded
|
|
13787
|
+
}, /*#__PURE__*/React__default.createElement(IdCaptureWizardInner, _assign({}, idCaptureProps)))) : (/*#__PURE__*/React__default.createElement(IdCaptureWizardInner, _assign({}, idCaptureProps)));
|
|
11645
13788
|
return /*#__PURE__*/React__default.createElement(CameraStoreProvider, {
|
|
11646
13789
|
onCameraAccessDenied: onCameraAccessDenied,
|
|
11647
13790
|
onCameraTamperingDetected: onCameraTamperingDetected,
|
|
@@ -11657,7 +13800,7 @@ function IdCaptureWizardWithProviders(_a) {
|
|
|
11657
13800
|
onModelError: idCaptureProps.onModelError,
|
|
11658
13801
|
modelLoadTimeoutMs: idCaptureProps.modelLoadTimeoutMs,
|
|
11659
13802
|
allowSinglePageIdCapture: idCaptureProps.allowSinglePageIdCapture
|
|
11660
|
-
},
|
|
13803
|
+
}, innerContent));
|
|
11661
13804
|
}
|
|
11662
13805
|
|
|
11663
13806
|
function SelfieCaptureLoadingGraphic(_a) {
|
|
@@ -18195,7 +20338,14 @@ var IdValidation = function IdValidation(_a) {
|
|
|
18195
20338
|
geolocationRequired = _6 === void 0 ? false : _6,
|
|
18196
20339
|
_7 = _a.debugMode,
|
|
18197
20340
|
debugMode = _7 === void 0 ? false : _7,
|
|
18198
|
-
documentEdgeDistancePct = _a.documentEdgeDistancePct
|
|
20341
|
+
documentEdgeDistancePct = _a.documentEdgeDistancePct,
|
|
20342
|
+
_8 = _a.enableClientBarcodeScan,
|
|
20343
|
+
enableClientBarcodeScan = _8 === void 0 ? false : _8,
|
|
20344
|
+
dynamsoftOrganizationId = _a.dynamsoftOrganizationId,
|
|
20345
|
+
dynamsoftLicenseKey = _a.dynamsoftLicenseKey,
|
|
20346
|
+
_9 = _a.promptForDynamsoftLicense,
|
|
20347
|
+
promptForDynamsoftLicense = _9 === void 0 ? false : _9,
|
|
20348
|
+
onClientBarcodeDecoded = _a.onClientBarcodeDecoded;
|
|
18199
20349
|
useLanguage(lang);
|
|
18200
20350
|
useDebugLogging(debugMode);
|
|
18201
20351
|
var idCaptureProps = useMemo(function () {
|
|
@@ -18236,9 +20386,14 @@ var IdValidation = function IdValidation(_a) {
|
|
|
18236
20386
|
classNames: classNames,
|
|
18237
20387
|
colors: colors,
|
|
18238
20388
|
verbiage: verbiage,
|
|
18239
|
-
debugMode: debugMode
|
|
20389
|
+
debugMode: debugMode,
|
|
20390
|
+
enableClientBarcodeScan: enableClientBarcodeScan,
|
|
20391
|
+
dynamsoftOrganizationId: dynamsoftOrganizationId,
|
|
20392
|
+
dynamsoftLicenseKey: dynamsoftLicenseKey,
|
|
20393
|
+
promptForDynamsoftLicense: promptForDynamsoftLicense,
|
|
20394
|
+
onClientBarcodeDecoded: onClientBarcodeDecoded
|
|
18240
20395
|
};
|
|
18241
|
-
}, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onExitCapture, onUserCancel, onModelError, onDocumentCaptured, onDocumentDetected, documentDetectionThrottleMs, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, separateIdCardCaptureSequence, idCaptureThresholds, skipSuccessScreen, loadingOverlayMode, customOverlayContent, onLoadingOverlayDismissed, forceFallbackMode, silentFallback, allowIdCardBackToFrontCapture, allowUploadingDocumentsFromStorage, instructions, guideType, guideImages, portraitGuidesOnMobile, rotateLoadingOverlayImageWhenPortrait, modelLoadTimeoutMs, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, assets, classNames, colors, verbiage, debugMode, documentEdgeDistancePct]);
|
|
20396
|
+
}, [onLoadingStarted, onLoadingProgress, onLoadingCompleted, onLoadingFailed, onExitCapture, onUserCancel, onModelError, onDocumentCaptured, onDocumentDetected, documentDetectionThrottleMs, precapturedDocuments, idCaptureRequirement, allowSinglePageIdCapture, separateIdCardCaptureSequence, idCaptureThresholds, skipSuccessScreen, loadingOverlayMode, customOverlayContent, onLoadingOverlayDismissed, forceFallbackMode, silentFallback, allowIdCardBackToFrontCapture, allowUploadingDocumentsFromStorage, instructions, guideType, guideImages, portraitGuidesOnMobile, rotateLoadingOverlayImageWhenPortrait, modelLoadTimeoutMs, enableOverrideWrongDocumentTypeDialog, allowOverrideWrongDocumentTypeAfterMs, assets, classNames, colors, verbiage, debugMode, documentEdgeDistancePct, enableClientBarcodeScan, dynamsoftOrganizationId, dynamsoftLicenseKey, promptForDynamsoftLicense, onClientBarcodeDecoded]);
|
|
18242
20397
|
var additionalDocumentCaptureProps = useMemo(function () {
|
|
18243
20398
|
return {
|
|
18244
20399
|
documents: captureAdditionalDocuments,
|