pipwave-ekyc-uikit 2.0.0-6 → 2.0.0-8

package/dist/pw-bundle.js

@@ -3660,7 +3660,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.CAMERA_INSTRUCTION = void 0;\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nexports.CAMERA_INSTRUCTION = {\n    [camera_1.CARD_TYPES.ID]: {\n        title: (0, translations_1.$t)(\"id_front_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n        outlineText: (0, translations_1.$t)(\"id_front_outline\"),\n        outlineImg: __webpack_require__(/*! ../assets/img/id-outline.webp */ \"./src/assets/img/id-outline.webp\"),\n    },\n    [camera_1.CARD_TYPES.ID_BACK]: {\n        title: (0, translations_1.$t)(\"id_back_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n        outlineText: (0, translations_1.$t)(\"id_back_outline\"),\n    },\n    [camera_1.CARD_TYPES.LICENSE]: {\n        title: (0, translations_1.$t)(\"license_front_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.LICENSE_BACK]: {\n        title: (0, translations_1.$t)(\"license_back_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.PASSPORT]: {\n        title: (0, translations_1.$t)(\"passport_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.CC]: {\n        title: (0, translations_1.$t)(\"cc_front_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.CC_BACK]: {\n        title: (0, translations_1.$t)(\"cc_back_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n};\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/camera-instruction.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.CAMERA_INSTRUCTION = void 0;\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nexports.CAMERA_INSTRUCTION = {\n    [camera_1.CARD_TYPES.ID]: {\n        title: (0, translations_1.$t)(\"id_front_title\"),\n        description: (0, translations_1.$t)(\"id_camera_dec\"),\n        outlineText: (0, translations_1.$t)(\"id_front_outline\"),\n        outlineImg: __webpack_require__(/*! ../assets/img/id-outline.webp */ \"./src/assets/img/id-outline.webp\"),\n    },\n    [camera_1.CARD_TYPES.ID_BACK]: {\n        title: (0, translations_1.$t)(\"id_back_title\"),\n        description: (0, translations_1.$t)(\"id_camera_dec\"),\n        outlineText: (0, translations_1.$t)(\"id_back_outline\"),\n    },\n    [camera_1.CARD_TYPES.LICENSE]: {\n        title: (0, translations_1.$t)(\"license_front_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.LICENSE_BACK]: {\n        title: (0, translations_1.$t)(\"license_back_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.PASSPORT]: {\n        title: (0, translations_1.$t)(\"passport_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.CC]: {\n        title: (0, translations_1.$t)(\"cc_front_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n    [camera_1.CARD_TYPES.CC_BACK]: {\n        title: (0, translations_1.$t)(\"cc_back_title\"),\n        description: (0, translations_1.$t)(\"camera_desc\"),\n    },\n};\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/camera-instruction.ts?");
 
 /***/ }),
 
@@ -3759,7 +3759,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.resizeCanvas = exports.getWatermarkText = exports.setPoaFile = exports.getPoaFile = exports.setBackImg = exports.getBackImg = exports.setFrontImg = exports.getFrontImg = exports.maxCroppedImage = exports.maxFullImage = void 0;\nlet frontImg = {};\nlet backImg = {};\nlet poaFile;\nexports.maxFullImage = { height: 1200, width: 1200 };\nexports.maxCroppedImage = { height: 800, width: 800 };\nfunction getFrontImg() {\n    return frontImg;\n}\nexports.getFrontImg = getFrontImg;\nfunction setFrontImg(img) {\n    frontImg = img;\n}\nexports.setFrontImg = setFrontImg;\nfunction getBackImg() {\n    return backImg;\n}\nexports.getBackImg = getBackImg;\nfunction setBackImg(img) {\n    backImg = img;\n}\nexports.setBackImg = setBackImg;\nfunction getPoaFile() {\n    return poaFile;\n}\nexports.getPoaFile = getPoaFile;\nfunction setPoaFile(file) {\n    poaFile = file;\n}\nexports.setPoaFile = setPoaFile;\nfunction getWatermarkText(name) {\n    const capitalName = name.toUpperCase();\n    return `FOR ${capitalName} USE ONLY`;\n}\nexports.getWatermarkText = getWatermarkText;\nfunction resizeCanvas(canvas, maxWidth, maxHeight) {\n    // do ntg when size smaller\n    if (canvas.width < maxWidth && canvas.height < maxHeight)\n        return canvas;\n    // Create a temporary canvas\n    const newCanvas = document.createElement(\"canvas\");\n    const ctx = newCanvas.getContext(\"2d\");\n    //  w = ratio * h\n    //  h = w /ratio\n    // Calculate the ratio\n    const ratio = canvas.width / canvas.height;\n    // Get the width based on ratio\n    const newWidth = ratio * maxHeight;\n    if (newWidth <= maxWidth) {\n        newCanvas.width = newWidth;\n        newCanvas.height = maxHeight;\n    }\n    // Get the height based on ratio\n    else {\n        const newHeight = maxWidth / ratio;\n        newCanvas.width = maxWidth;\n        newCanvas.height = newHeight;\n    }\n    // Draw the current canvas onto the temporary canvas with the new dimensions\n    ctx.drawImage(canvas, 0, 0, newCanvas.width, newCanvas.height);\n    return newCanvas;\n}\nexports.resizeCanvas = resizeCanvas;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/imagesHelper.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.resizeCanvas = exports.getWatermarkText = exports.setPoaFile = exports.getPoaFile = exports.clearImages = exports.setBackImg = exports.getBackImg = exports.setFrontImg = exports.getFrontImg = exports.maxCroppedImage = exports.maxFullImage = void 0;\nlet frontImg = {};\nlet backImg = {};\nlet poaFile = undefined;\nexports.maxFullImage = { height: 1200, width: 1200 };\nexports.maxCroppedImage = { height: 800, width: 800 };\nfunction getFrontImg() {\n    return frontImg;\n}\nexports.getFrontImg = getFrontImg;\nfunction setFrontImg(img) {\n    frontImg = img;\n}\nexports.setFrontImg = setFrontImg;\nfunction getBackImg() {\n    return backImg;\n}\nexports.getBackImg = getBackImg;\nfunction setBackImg(img) {\n    backImg = img;\n}\nexports.setBackImg = setBackImg;\nfunction clearImages() {\n    frontImg = {};\n    backImg = {};\n}\nexports.clearImages = clearImages;\nfunction getPoaFile() {\n    return poaFile;\n}\nexports.getPoaFile = getPoaFile;\nfunction setPoaFile(file) {\n    poaFile = file;\n}\nexports.setPoaFile = setPoaFile;\nfunction getWatermarkText(name) {\n    const capitalName = name.toUpperCase();\n    return `FOR ${capitalName} USE ONLY`;\n}\nexports.getWatermarkText = getWatermarkText;\nfunction resizeCanvas(canvas, maxWidth, maxHeight) {\n    // do ntg when size smaller\n    if (canvas.width < maxWidth && canvas.height < maxHeight)\n        return canvas;\n    // Create a temporary canvas\n    const newCanvas = document.createElement(\"canvas\");\n    const ctx = newCanvas.getContext(\"2d\");\n    //  w = ratio * h\n    //  h = w /ratio\n    // Calculate the ratio\n    const ratio = canvas.width / canvas.height;\n    // Get the width based on ratio\n    const newWidth = ratio * maxHeight;\n    if (newWidth <= maxWidth) {\n        newCanvas.width = newWidth;\n        newCanvas.height = maxHeight;\n    }\n    // Get the height based on ratio\n    else {\n        const newHeight = maxWidth / ratio;\n        newCanvas.width = maxWidth;\n        newCanvas.height = newHeight;\n    }\n    // Draw the current canvas onto the temporary canvas with the new dimensions\n    ctx.drawImage(canvas, 0, 0, newCanvas.width, newCanvas.height);\n    return newCanvas;\n}\nexports.resizeCanvas = resizeCanvas;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/imagesHelper.ts?");
 
 /***/ }),
 
@@ -3935,7 +3935,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\n// plugins\nconst card_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/card-camera */ \"./src/plugins/card-camera.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst dropdownButton_1 = __importDefault(__webpack_require__(/*! ../components/dropdownButton */ \"./src/components/dropdownButton.ts\"));\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\n// assets\nconst id_card_svg_1 = __importDefault(__webpack_require__(/*! ../assets/icon/id-card.svg */ \"./src/assets/icon/id-card.svg\"));\nconst passport_svg_1 = __importDefault(__webpack_require__(/*! ../assets/icon/passport.svg */ \"./src/assets/icon/passport.svg\"));\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ../pageClass/StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ../pageClass/SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\n// helper\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst stepper_2 = __webpack_require__(/*! ../helper/stepper */ \"./src/helper/stepper.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\n// constant\nconst id_1 = __webpack_require__(/*! ../constant/id */ \"./src/constant/id.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nclass VerifyId extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n    }\n    render() {\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        var _a;\n        const verifyIdDiv = document.createElement(\"div\");\n        verifyIdDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-h-full\");\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n        const stepper = new stepper_1.default();\n        const stepperElement = stepper.render(2, (0, stepper_2.getStepByType)(verification_1.VERIFICATION_TYPE.IDENTITY_DOC));\n        navigationDiv.classList.add(\"pw-pt-3\");\n        navigationDiv.appendChild(stepperElement);\n        const closeButton = document.createElement(\"div\");\n        closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButton.addEventListener(\"click\", () => this.openLeavePageDialog());\n        closeButton.appendChild(closeIcon);\n        navigationDiv.appendChild(closeButton);\n        verifyIdDiv.appendChild(navigationDiv);\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-center\", \"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\");\n        titleDiv.innerHTML = (0, translations_1.$t)(\"select_id_type\");\n        verifyIdDiv.appendChild(titleDiv);\n        // issuing country/region\n        const countries = uisdk_1.pwInstance.issuingCountries;\n        this.defaultCountry = ((_a = uisdk_1.pwInstance.defaultCountry) === null || _a === void 0 ? void 0 : _a.iso_code) || \"\";\n        const fieldName = (0, translations_1.$t)(\"issuing_country\");\n        // - dropdown button label\n        const country = document.createElement(\"div\");\n        country.classList.add(\"pw-mb-3\");\n        country.innerHTML = fieldName;\n        verifyIdDiv.appendChild(country);\n        // - dropdown button instance\n        const countryDropdown = new dropdownButton_1.default(\"issuing-country\", fieldName, countries.map((country) => {\n            return { value: country.iso_code, label: country.name };\n        }), this.defaultCountry);\n        // - dropdown button event listener\n        countryDropdown.onUpdateValue = (value) => {\n            this.defaultCountry = value;\n        };\n        // - dropdown button render\n        const countryDropdownDiv = countryDropdown.render();\n        countryDropdownDiv.classList.add(\"pw-mb-6\");\n        verifyIdDiv.appendChild(countryDropdownDiv);\n        // verification type\n        const { excludedDocTypes = [] } = uisdk_1.pwInstance.tokenDetails;\n        const supportedDocTypes = [\n            id_1.ID_TYPE.NATIONAL_ID,\n            id_1.ID_TYPE.LICENSE,\n            id_1.ID_TYPE.PASSPORT,\n        ];\n        const isAllDocTypeExcluded = supportedDocTypes.every((docType) => excludedDocTypes.includes(docType));\n        if (isAllDocTypeExcluded) {\n            return this.openErrorPage(null, (0, translations_1.$t)(\"smtg_went_wrong\"), (0, translations_1.$t)(\"fail_to_locate_verification\"));\n        }\n        else {\n            // ID card\n            if (!excludedDocTypes.includes(id_1.ID_TYPE.NATIONAL_ID)) {\n                const documentTypeDiv = document.createElement(\"div\");\n                documentTypeDiv.classList.add(\"pw-mb-3\");\n                documentTypeDiv.innerHTML = (0, translations_1.$t)(\"document_type\");\n                verifyIdDiv.appendChild(documentTypeDiv);\n                const idButton = (0, components_1.createOutlineButton)((0, translations_1.$t)(\"id_card\"), id_card_svg_1.default);\n                idButton.classList.add(\"pw-mb-3\");\n                // ID card button click event\n                idButton.addEventListener(\"click\", () => {\n                    this.selectedIdType = id_1.ID_TYPE.NATIONAL_ID;\n                    this.openCameraPage();\n                });\n                verifyIdDiv.appendChild(idButton);\n            }\n            if (!excludedDocTypes.includes(id_1.ID_TYPE.LICENSE)) {\n                // License button click event\n                const driverLicense = (0, components_1.createOutlineButton)((0, translations_1.$t)(\"driver_license\"), id_card_svg_1.default);\n                driverLicense.classList.add(\"pw-mb-3\");\n                driverLicense.addEventListener(\"click\", () => {\n                    this.selectedIdType = id_1.ID_TYPE.LICENSE;\n                    this.openCameraPage();\n                });\n                verifyIdDiv.appendChild(driverLicense);\n            }\n            if (!excludedDocTypes.includes(id_1.ID_TYPE.PASSPORT)) {\n                // Passport button click event\n                const passport = (0, components_1.createOutlineButton)((0, translations_1.$t)(\"passport\"), passport_svg_1.default);\n                passport.classList.add(\"pw-mb-3\");\n                passport.addEventListener(\"click\", () => {\n                    this.selectedIdType = id_1.ID_TYPE.PASSPORT;\n                    this.openCameraPage();\n                });\n                verifyIdDiv.appendChild(passport);\n            }\n        }\n        // footer\n        const footerDiv = document.createElement(\"div\");\n        footerDiv.style.marginTop = \"auto\";\n        // - powered by\n        const footer = new footer_1.default().render();\n        footerDiv.appendChild(footer);\n        verifyIdDiv.appendChild(footerDiv);\n        return verifyIdDiv;\n    }\n    openCameraPage() {\n        const idType = this.selectedIdType;\n        if (!idType)\n            return;\n        // create div\n        const screen = document.getElementById(this.mainScreenId);\n        const cameraDiv = document.createElement(\"div\");\n        cameraDiv.setAttribute(\"id\", this.cameraId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n        // start camera init\n        const typeMapping = id_1.idCardTypeMapping[idType];\n        const idCam = new card_camera_1.default(this.cameraId, typeMapping.front, this.mainScreenId);\n        idCam.init();\n        idCam.listenToCardCapture((payload) => {\n            const { type, image } = payload.detail;\n            // only need front img\n            if (type === typeMapping.front && !typeMapping.back) {\n                (0, imagesHelper_1.setFrontImg)(image);\n                idCam.pauseVideoStream();\n                this.uploadDoc(idType, idCam);\n            }\n            // need both front and back img\n            else if (type === typeMapping.front) {\n                (0, imagesHelper_1.setFrontImg)(image);\n                // show loading page a few milisecond\n                this.renderLoadingScreen();\n                setTimeout(() => {\n                    // show filp icon\n                    this.updateOverlayContent(this.swapSideDisplay());\n                }, 200);\n                setTimeout(() => {\n                    this.removeOverlayElement();\n                    idCam.updateType(typeMapping.back);\n                }, 2000);\n            }\n            // after done front and back img\n            else if (type === typeMapping.back) {\n                (0, imagesHelper_1.setBackImg)(image);\n                idCam.pauseVideoStream();\n                this.uploadDoc(idType, idCam);\n            }\n        });\n    }\n    swapSideDisplay() {\n        const swapSide = document.createElement(\"div\");\n        swapSide.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n        const cardDescription = document.createElement(\"div\");\n        cardDescription.classList.add(\"pw-text-center\", \"pw-mb-5\", \"pw-text-2xl\", \"pw-text-white\");\n        cardDescription.innerHTML = (0, translations_1.$t)(\"flip_other_side\");\n        swapSide.appendChild(cardDescription);\n        const cardContainer = document.createElement(\"div\");\n        cardContainer.classList.add(\"pw-text-center\");\n        const card = (0, getGoogleIcon_1.getGoogleIcon)(\"credit_card\");\n        card.classList.add(\"pw-text-white\", \"pw-text-center\", \"pw-animate-camera\");\n        card.style.fontSize = \"77px\";\n        cardContainer.appendChild(card);\n        swapSide.appendChild(cardContainer);\n        return swapSide;\n    }\n    redirectToSubmissionErrorPage() {\n        this.clearScreen();\n        // redirect to submission error page\n        const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n        return submissionLimit.render();\n    }\n    uploadDoc(docType, idCam) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // start loading\n                this.renderLoadingScreen();\n                // get the image from camera\n                let frontImg = (0, imagesHelper_1.getFrontImg)();\n                let backImg = (0, imagesHelper_1.getBackImg)();\n                // construct req payload to call api\n                const req = Object.assign(Object.assign({ front_doc_base64: frontImg.croppedImage, front_doc_base64_full: frontImg.fullImage }, (backImg && {\n                    back_doc_base64: backImg.croppedImage,\n                    back_doc_base64_full: backImg.fullImage,\n                })), { doc_type: docType, issuing_country: this.defaultCountry });\n                // call api\n                yield uisdk_1.pwInstance.uploadId(req);\n                idCam.stopVideoStream();\n                // redirect to start page to continue on another steps (e.g: selfie)\n                const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode);\n                this.clearScreen();\n                firstPage.render(false);\n            }\n            catch (err) {\n                const maxAttemptErrors = [\n                    \"openApi/max-doc-attempt\",\n                    \"openApi/limit-exceed\",\n                    \"openApi/max-session-attempt\",\n                    \"openApi/session-id-expired\",\n                    \"session-id-expired\",\n                ];\n                const invalidDocErrors = [\n                    \"openApi/verification-type-invalid\",\n                    \"openApi/issuing-country-invalid\",\n                    \"openApi/doc-type-invalid\",\n                    \"openApi/doc-unpair\",\n                    \"openApi/doc-empty\",\n                    \"openApi/doc-blur\",\n                    \"openApi/doc-front-back-img-unsimilar\",\n                    \"openApi/doc-not-positioned-proper\",\n                    \"openApi/img-exposed\",\n                ];\n                if ([\"PwError\", \"PwReqError\"].includes(err.name) && err.type) {\n                    if (invalidDocErrors.includes(err.type)) {\n                        let isRetake = false;\n                        const pwErrorPayload = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payload;\n                        if (!!pwErrorPayload)\n                            isRetake = !!pwErrorPayload.is_retriable;\n                        // open image blur dailog\n                        const errorDialog = new baseDialog_1.default();\n                        errorDialog.render(this.mainScreenId, (0, translations_1.$t)(\"error_id\"), isRetake ? (0, translations_1.$t)(\"btn_retake\") : (0, translations_1.$t)(\"btn_proceed\"), () => {\n                            // recapture\n                            if (isRetake) {\n                                const idType = this.selectedIdType;\n                                if (!idType)\n                                    return;\n                                const typeMapping = id_1.idCardTypeMapping[idType];\n                                idCam.resumeVideoStream(typeMapping.front);\n                                return;\n                            }\n                            // redirect to submission error page\n                            idCam.stopVideoStream();\n                            this.redirectToSubmissionErrorPage();\n                        });\n                        return;\n                    }\n                    if (maxAttemptErrors.includes(err.type)) {\n                        idCam.stopVideoStream();\n                        this.redirectToSubmissionErrorPage();\n                        return;\n                    }\n                }\n                // redirect to unexpected error page\n                idCam.stopVideoStream();\n                this.openErrorPage();\n            }\n            finally {\n                // stop loading\n                this.removeOverlayElement();\n            }\n        });\n    }\n}\nexports[\"default\"] = VerifyId;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/VerifyId.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\n// plugins\nconst card_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/card-camera */ \"./src/plugins/card-camera.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst dropdownButton_1 = __importDefault(__webpack_require__(/*! ../components/dropdownButton */ \"./src/components/dropdownButton.ts\"));\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\n// assets\nconst id_card_svg_1 = __importDefault(__webpack_require__(/*! ../assets/icon/id-card.svg */ \"./src/assets/icon/id-card.svg\"));\nconst passport_svg_1 = __importDefault(__webpack_require__(/*! ../assets/icon/passport.svg */ \"./src/assets/icon/passport.svg\"));\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ../pageClass/StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ../pageClass/SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\n// helper\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst stepper_2 = __webpack_require__(/*! ../helper/stepper */ \"./src/helper/stepper.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\n// constant\nconst id_1 = __webpack_require__(/*! ../constant/id */ \"./src/constant/id.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nclass VerifyId extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n    }\n    render() {\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        var _a;\n        (0, imagesHelper_1.clearImages)();\n        const verifyIdDiv = document.createElement(\"div\");\n        verifyIdDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-h-full\");\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n        const stepper = new stepper_1.default();\n        const stepperElement = stepper.render(2, (0, stepper_2.getStepByType)(verification_1.VERIFICATION_TYPE.IDENTITY_DOC));\n        navigationDiv.classList.add(\"pw-pt-3\");\n        navigationDiv.appendChild(stepperElement);\n        const closeButton = document.createElement(\"div\");\n        closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButton.addEventListener(\"click\", () => this.openLeavePageDialog());\n        closeButton.appendChild(closeIcon);\n        navigationDiv.appendChild(closeButton);\n        verifyIdDiv.appendChild(navigationDiv);\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-center\", \"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\");\n        titleDiv.innerHTML = (0, translations_1.$t)(\"select_id_type\");\n        verifyIdDiv.appendChild(titleDiv);\n        // issuing country/region\n        const countries = uisdk_1.pwInstance.issuingCountries;\n        this.defaultCountry = ((_a = uisdk_1.pwInstance.defaultCountry) === null || _a === void 0 ? void 0 : _a.iso_code) || \"\";\n        const fieldName = (0, translations_1.$t)(\"issuing_country\");\n        // - dropdown button label\n        const country = document.createElement(\"div\");\n        country.classList.add(\"pw-mb-3\");\n        country.innerHTML = fieldName;\n        verifyIdDiv.appendChild(country);\n        // - dropdown button instance\n        const countryDropdown = new dropdownButton_1.default(\"issuing-country\", fieldName, countries.map((country) => {\n            return { value: country.iso_code, label: country.name };\n        }), this.defaultCountry);\n        // - dropdown button event listener\n        countryDropdown.onUpdateValue = (value) => {\n            this.defaultCountry = value;\n        };\n        // - dropdown button render\n        const countryDropdownDiv = countryDropdown.render();\n        countryDropdownDiv.classList.add(\"pw-mb-6\");\n        verifyIdDiv.appendChild(countryDropdownDiv);\n        // verification type\n        const { excludedDocTypes = [] } = uisdk_1.pwInstance.tokenDetails;\n        const supportedDocTypes = [\n            id_1.ID_TYPE.NATIONAL_ID,\n            id_1.ID_TYPE.LICENSE,\n            id_1.ID_TYPE.PASSPORT,\n        ];\n        const isAllDocTypeExcluded = supportedDocTypes.every((docType) => excludedDocTypes.includes(docType));\n        if (isAllDocTypeExcluded) {\n            return this.openErrorPage(null, (0, translations_1.$t)(\"smtg_went_wrong\"), (0, translations_1.$t)(\"fail_to_locate_verification\"));\n        }\n        else {\n            // ID card\n            if (!excludedDocTypes.includes(id_1.ID_TYPE.NATIONAL_ID)) {\n                const documentTypeDiv = document.createElement(\"div\");\n                documentTypeDiv.classList.add(\"pw-mb-3\");\n                documentTypeDiv.innerHTML = (0, translations_1.$t)(\"document_type\");\n                verifyIdDiv.appendChild(documentTypeDiv);\n                const idButton = (0, components_1.createOutlineButton)((0, translations_1.$t)(\"id_card\"), id_card_svg_1.default);\n                idButton.classList.add(\"pw-mb-3\");\n                // ID card button click event\n                idButton.addEventListener(\"click\", () => {\n                    this.selectedIdType = id_1.ID_TYPE.NATIONAL_ID;\n                    this.openCameraPage();\n                });\n                verifyIdDiv.appendChild(idButton);\n            }\n            if (!excludedDocTypes.includes(id_1.ID_TYPE.LICENSE)) {\n                // License button click event\n                const driverLicense = (0, components_1.createOutlineButton)((0, translations_1.$t)(\"driver_license\"), id_card_svg_1.default);\n                driverLicense.classList.add(\"pw-mb-3\");\n                driverLicense.addEventListener(\"click\", () => {\n                    this.selectedIdType = id_1.ID_TYPE.LICENSE;\n                    this.openCameraPage();\n                });\n                verifyIdDiv.appendChild(driverLicense);\n            }\n            if (!excludedDocTypes.includes(id_1.ID_TYPE.PASSPORT)) {\n                // Passport button click event\n                const passport = (0, components_1.createOutlineButton)((0, translations_1.$t)(\"passport\"), passport_svg_1.default);\n                passport.classList.add(\"pw-mb-3\");\n                passport.addEventListener(\"click\", () => {\n                    this.selectedIdType = id_1.ID_TYPE.PASSPORT;\n                    this.openCameraPage();\n                });\n                verifyIdDiv.appendChild(passport);\n            }\n        }\n        // footer\n        const footerDiv = document.createElement(\"div\");\n        footerDiv.style.marginTop = \"auto\";\n        // - powered by\n        const footer = new footer_1.default().render();\n        footerDiv.appendChild(footer);\n        verifyIdDiv.appendChild(footerDiv);\n        return verifyIdDiv;\n    }\n    openCameraPage() {\n        (0, imagesHelper_1.clearImages)();\n        const idType = this.selectedIdType;\n        if (!idType)\n            return;\n        // create div\n        const screen = document.getElementById(this.mainScreenId);\n        const cameraDiv = document.createElement(\"div\");\n        cameraDiv.setAttribute(\"id\", this.cameraId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n        // start camera init\n        const typeMapping = id_1.idCardTypeMapping[idType];\n        const idCam = new card_camera_1.default(this.cameraId, typeMapping.front, this.mainScreenId);\n        idCam.init();\n        idCam.listenToCardCapture((payload) => {\n            const { type, image } = payload.detail;\n            // only need front img\n            if (type === typeMapping.front && !typeMapping.back) {\n                (0, imagesHelper_1.setFrontImg)(image);\n                idCam.pauseVideoStream();\n                this.uploadDoc(idType, idCam);\n            }\n            // need both front and back img\n            else if (type === typeMapping.front) {\n                (0, imagesHelper_1.setFrontImg)(image);\n                // show loading page a few milisecond\n                this.renderLoadingScreen();\n                setTimeout(() => {\n                    // show filp icon\n                    this.updateOverlayContent(this.swapSideDisplay());\n                }, 200);\n                setTimeout(() => {\n                    this.removeOverlayElement();\n                    idCam.updateType(typeMapping.back);\n                }, 2000);\n            }\n            // after done front and back img\n            else if (type === typeMapping.back) {\n                (0, imagesHelper_1.setBackImg)(image);\n                idCam.pauseVideoStream();\n                this.uploadDoc(idType, idCam);\n            }\n        });\n    }\n    swapSideDisplay() {\n        const swapSide = document.createElement(\"div\");\n        swapSide.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n        const cardDescription = document.createElement(\"div\");\n        cardDescription.classList.add(\"pw-text-center\", \"pw-mb-5\", \"pw-text-2xl\", \"pw-text-white\");\n        cardDescription.innerHTML = (0, translations_1.$t)(\"flip_other_side\");\n        swapSide.appendChild(cardDescription);\n        const cardContainer = document.createElement(\"div\");\n        cardContainer.classList.add(\"pw-text-center\");\n        const card = (0, getGoogleIcon_1.getGoogleIcon)(\"credit_card\");\n        card.classList.add(\"pw-text-white\", \"pw-text-center\", \"pw-animate-camera\");\n        card.style.fontSize = \"77px\";\n        cardContainer.appendChild(card);\n        swapSide.appendChild(cardContainer);\n        return swapSide;\n    }\n    redirectToSubmissionErrorPage() {\n        this.clearScreen();\n        // redirect to submission error page\n        const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n        return submissionLimit.render();\n    }\n    uploadDoc(docType, idCam) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // start loading\n                this.renderLoadingScreen();\n                // get the image from camera\n                let frontImg = (0, imagesHelper_1.getFrontImg)();\n                let backImg = (0, imagesHelper_1.getBackImg)();\n                // construct req payload to call api\n                const req = Object.assign(Object.assign({ front_doc_base64: frontImg.croppedImage, front_doc_base64_full: frontImg.fullImage }, (backImg && {\n                    back_doc_base64: backImg.croppedImage,\n                    back_doc_base64_full: backImg.fullImage,\n                })), { doc_type: docType, issuing_country: this.defaultCountry });\n                // call api\n                yield uisdk_1.pwInstance.uploadId(req);\n                idCam.stopVideoStream();\n                // redirect to start page to continue on another steps (e.g: selfie)\n                const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode);\n                this.clearScreen();\n                firstPage.render(false);\n            }\n            catch (err) {\n                const maxAttemptErrors = [\n                    \"openApi/max-doc-attempt\",\n                    \"openApi/limit-exceed\",\n                    \"openApi/max-session-attempt\",\n                    \"openApi/session-id-expired\",\n                    \"session-id-expired\",\n                ];\n                const invalidDocErrors = [\n                    \"openApi/verification-type-invalid\",\n                    \"openApi/issuing-country-invalid\",\n                    \"openApi/doc-type-invalid\",\n                    \"openApi/doc-unpair\",\n                    \"openApi/doc-empty\",\n                    \"openApi/doc-blur\",\n                    \"openApi/doc-front-back-img-unsimilar\",\n                    \"openApi/doc-not-positioned-proper\",\n                    \"openApi/img-exposed\",\n                ];\n                if ([\"PwError\", \"PwReqError\"].includes(err.name) && err.type) {\n                    if (invalidDocErrors.includes(err.type)) {\n                        let isRetake = false;\n                        const pwErrorPayload = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payload;\n                        if (!!pwErrorPayload)\n                            isRetake = !!pwErrorPayload.is_retriable;\n                        // open image blur dailog\n                        const errorDialog = new baseDialog_1.default();\n                        errorDialog.render(this.mainScreenId, (0, translations_1.$t)(\"error_id\"), isRetake ? (0, translations_1.$t)(\"btn_retake\") : (0, translations_1.$t)(\"btn_proceed\"), () => {\n                            // recapture\n                            if (isRetake) {\n                                const idType = this.selectedIdType;\n                                if (!idType)\n                                    return;\n                                const typeMapping = id_1.idCardTypeMapping[idType];\n                                idCam.resumeVideoStream(typeMapping.front);\n                                return;\n                            }\n                            // redirect to submission error page\n                            idCam.stopVideoStream();\n                            this.redirectToSubmissionErrorPage();\n                        });\n                        return;\n                    }\n                    if (maxAttemptErrors.includes(err.type)) {\n                        idCam.stopVideoStream();\n                        this.redirectToSubmissionErrorPage();\n                        return;\n                    }\n                }\n                // redirect to unexpected error page\n                idCam.stopVideoStream();\n                this.openErrorPage();\n            }\n            finally {\n                // stop loading\n                this.removeOverlayElement();\n            }\n        });\n    }\n}\nexports[\"default\"] = VerifyId;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/VerifyId.ts?");
 
 /***/ }),
 
@@ -3957,7 +3957,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst card_detection_1 = __importDefault(__webpack_require__(/*! ./card-detection */ \"./src/plugins/card-detection.ts\"));\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nconst camera_instruction_1 = __webpack_require__(/*! ../constant/camera-instruction */ \"./src/constant/camera-instruction.ts\");\nconst bottomDialog_1 = __importDefault(__webpack_require__(/*! ../components/bottomDialog */ \"./src/components/bottomDialog.ts\"));\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst navigationBar_1 = __importDefault(__webpack_require__(/*! ../components/navigationBar */ \"./src/components/navigationBar.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nclass CardCamera {\n    constructor(cameraId, cardType, mainScreenId = \"\") {\n        this.cameraTimeLimit = 90000;\n        this.videoElement = null;\n        this.canvasElement = null;\n        this.overlayElement = null;\n        this.titleElement = null;\n        this.footerElement = null;\n        this.cameraId = cameraId;\n        this.cardType = cardType;\n        this.mainScreenId = mainScreenId;\n    }\n    isMobile() {\n        const navigator = window.navigator.userAgent ||\n            window.navigator.vendor ||\n            window.opera;\n        if (!navigator)\n            return false;\n        const isMobile = /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) ||\n            /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.substr(0, 4));\n        return isMobile;\n    }\n    captureImage() {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            const bitmap = this.videoElement;\n            // 1. full image\n            let canvas = document.createElement(\"canvas\");\n            let context = canvas.getContext(\"2d\");\n            // draw image to canvas, scale to target dimensions\n            canvas.width = bitmap.videoWidth;\n            canvas.height = bitmap.videoHeight;\n            context.drawImage(bitmap, 0, 0, bitmap.videoWidth, bitmap.videoHeight);\n            // 2. cropped image\n            let cropCanvas = document.createElement(\"canvas\");\n            let cropContext = cropCanvas.getContext(\"2d\");\n            // draw image to canvas, scale to target dimensions\n            cropCanvas.width = bitmap.videoWidth;\n            cropCanvas.height = bitmap.videoHeight;\n            cropContext.drawImage(bitmap, 0, 0, bitmap.videoWidth, bitmap.videoHeight);\n            // calculate cropped image height and width\n            const { width, height } = this.cardDetectionSdk.calculateHeightNWidth(bitmap.videoWidth, bitmap.videoHeight);\n            // calculate cropped image coordinate (x,y)\n            const x = (bitmap.videoWidth - width) / 2;\n            const y = (bitmap.videoHeight - height) / 2;\n            // crop the selected part image\n            const imgData = cropContext.getImageData(x, y, width, height);\n            cropCanvas.width = width;\n            cropCanvas.height = height;\n            cropContext.putImageData(imgData, 0, 0);\n            // 3. resize the canvas\n            try {\n                canvas = (0, imagesHelper_1.resizeCanvas)(canvas, imagesHelper_1.maxFullImage.width, imagesHelper_1.maxFullImage.height);\n                cropCanvas = (0, imagesHelper_1.resizeCanvas)(cropCanvas, imagesHelper_1.maxCroppedImage.width, imagesHelper_1.maxCroppedImage.height);\n            }\n            catch (err) {\n                console.error(\"doc resize image error\", err);\n            }\n            // 4. construct payload - convert to desired file format\n            const { width: displayWidth = \"\", height: displayHeight = \"\" } = ((_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.style) || {};\n            const payload = {\n                fullImage: canvas.toDataURL(\"image/jpeg\"),\n                croppedImage: cropCanvas.toDataURL(\"image/jpeg\"),\n                displaySize: {\n                    width: Number(displayWidth.replace(\"px\", \"\")),\n                    height: Number(displayHeight.replace(\"px\", \"\")),\n                },\n            };\n            return payload;\n        });\n    }\n    init() {\n        try {\n            // show loading spinner in full pg\n            (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\n            // 1. Draw the camera display\n            this.drawCameraDisplay();\n            // 2. Setup related SDK\n            const { videoElement, canvasElement, overlayElement, titleElement } = this;\n            this.cardDetectionSdk = new card_detection_1.default({\n                videoElement,\n                canvasElement,\n                overlayElement,\n                titleElement,\n            });\n            // 3. Get the camera permission and trigger the card detection\n            this.cameraInit();\n            // 4. Start timer to close camera\n            this.timer = setTimeout(() => {\n                this.stopVideoStream();\n                // open idle dialog\n                const idleDialog = new baseDialog_1.default();\n                idleDialog.render(this.mainScreenId, (0, translations_1.$t)(\"idle_message\"), (0, translations_1.$t)(\"btn_okay\"));\n            }, this.cameraTimeLimit);\n        }\n        finally {\n            // hide loading spinner in full pg\n            (0, components_1.hideFullLoading)(this.cameraId);\n        }\n    }\n    drawCameraDisplay() {\n        // 1. header section\n        const header = document.createElement(\"div\");\n        header.id = camera_1.ELEMENT_IDS.HEADER;\n        // header.classList.add(\"camera-header-area\");\n        header.classList.add(\"pw-absolute\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\");\n        const navigationDiv = new navigationBar_1.default().render(() => {\n            this.stopVideoStream();\n        });\n        header.appendChild(navigationDiv);\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.id = \"pw-camera-title\";\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-text-center\", \"pw-mb-4\", \"pw-px-5\");\n        // Set title\n        titleDiv.innerHTML = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].title;\n        header.appendChild(titleDiv);\n        this.titleElement = titleDiv;\n        // Set Description\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.classList.add(\"pw-text-center\", \"pw-px-5\");\n        descriptionDiv.innerHTML = (0, translations_1.$t)(\"camera_desc\");\n        header.appendChild(descriptionDiv);\n        const body = document.createElement(\"div\");\n        body.id = camera_1.ELEMENT_IDS.BODY;\n        body.classList.add(\"camera-body-area\");\n        const videoContainer = document.createElement(\"div\");\n        videoContainer.id = camera_1.ELEMENT_IDS.VIDEO_CONTAINER;\n        videoContainer.classList.add(\"video-container\");\n        const overlayContainer = document.createElement(\"div\");\n        overlayContainer.id = camera_1.ELEMENT_IDS.OVERLAY_CONTAINER;\n        overlayContainer.classList.add(\"overlay-container\");\n        const overlayElement = document.createElement(\"div\");\n        overlayElement.id = camera_1.ELEMENT_IDS.OVERLAY;\n        overlayElement.classList.add(\"overlay-element\");\n        overlayElement.classList.add(\"pw-hidden\");\n        let topBorderElement = document.createElement(\"div\");\n        topBorderElement.id = camera_1.ELEMENT_IDS.TOP_BORDER;\n        topBorderElement.classList.add(\"border-element\");\n        let bottomBorderElement;\n        const outlineText = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineText;\n        if (outlineText) {\n            topBorderElement.classList.add(\"border-id-element\");\n            const idOutlineElement = document.createElement(\"div\");\n            idOutlineElement.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\", \"pw-flex\", \"pw-w-full\", \"pw-h-full\", \"pw-items-center\", \"pw-justify-center\");\n            const outlineImg = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineImg;\n            const iconImg = document.createElement(\"img\");\n            iconImg.id = \"pw-camera-outline-img\";\n            if (outlineImg)\n                iconImg.setAttribute(\"src\", outlineImg);\n            else\n                iconImg.classList.add(\"hidden\");\n            idOutlineElement.appendChild(iconImg);\n            overlayElement.appendChild(idOutlineElement);\n            const idOutlineBottom = document.createElement(\"div\");\n            idOutlineBottom.classList.add(\"outlide-id-bottom\");\n            const text = document.createElement(\"div\");\n            text.id = \"pw-camera-subtitle\";\n            text.style.margin = \"16px\";\n            text.innerHTML = outlineText;\n            idOutlineBottom.appendChild(text);\n            overlayElement.appendChild(idOutlineBottom);\n        }\n        else {\n            topBorderElement.classList.add(\"border-top-element\");\n            bottomBorderElement = document.createElement(\"div\");\n            bottomBorderElement.id = camera_1.ELEMENT_IDS.BOTTOM_BORDER;\n            bottomBorderElement.classList.add(\"border-element\");\n            bottomBorderElement.classList.add(\"border-bottom-element\");\n        }\n        const canvasElement = document.createElement(\"canvas\");\n        canvasElement.id = camera_1.ELEMENT_IDS.CANVAS;\n        canvasElement.classList.add(\"video-element\");\n        canvasElement.classList.add(\"canvas-element\");\n        const videoElement = document.createElement(\"video\");\n        videoElement.id = camera_1.ELEMENT_IDS.VIDEO;\n        videoElement.autoplay = true;\n        videoElement.playsInline = true;\n        videoElement.preload = \"auto\";\n        videoElement.loop = true;\n        videoElement.classList.add(\"video-element\");\n        // 2.1\n        this.videoElement = videoElement;\n        this.overlayElement = overlayElement;\n        this.canvasElement = canvasElement;\n        overlayElement.appendChild(topBorderElement);\n        if (bottomBorderElement)\n            overlayElement.appendChild(bottomBorderElement);\n        overlayContainer.appendChild(overlayElement);\n        videoContainer.appendChild(overlayContainer);\n        videoContainer.appendChild(canvasElement);\n        videoContainer.appendChild(videoElement);\n        body.appendChild(videoContainer);\n        // 3. append child\n        const mainBody = document.getElementById(this.cameraId);\n        if (!mainBody)\n            return;\n        mainBody.classList.add(\"camera-bg\", \"pw-overflow-y-hidden\");\n        mainBody.appendChild(header);\n        mainBody.appendChild(body);\n    }\n    listenToCardCapture(cb) {\n        const cameraBody = document.getElementById(this.cameraId);\n        cameraBody === null || cameraBody === void 0 ? void 0 : cameraBody.addEventListener(\"captureImage\", (e) => {\n            cb(e);\n        });\n    }\n    idCardTips() {\n        const dialogContent = document.createElement(\"div\");\n        const ul = document.createElement(\"ul\");\n        ul.classList.add(\"pw-px-5\");\n        const itemText = [(0, translations_1.$t)(\"id_tip_1\"), (0, translations_1.$t)(\"id_tip_2\"), (0, translations_1.$t)(\"id_tip_3\")];\n        for (let i = 0; i < itemText.length; i++) {\n            const item = document.createElement(\"li\");\n            item.innerHTML = itemText[i];\n            ul.appendChild(item);\n        }\n        dialogContent.appendChild(ul);\n        return dialogContent;\n    }\n    creditCardTips() {\n        const dialogContent = document.createElement(\"div\");\n        // list title\n        const menuTitle = document.createElement(\"div\");\n        menuTitle.classList.add(\"pw-pt-4\");\n        menuTitle.innerHTML = (0, translations_1.$t)(\"cc_tip_title\");\n        // list\n        const ul = document.createElement(\"ul\");\n        ul.classList.add(\"pw-px-5\");\n        const itemText = [(0, translations_1.$t)(\"cc_tip_1\"), (0, translations_1.$t)(\"cc_tip_2\"), (0, translations_1.$t)(\"cc_tip_3\")];\n        for (let i = 0; i < itemText.length; i++) {\n            const item = document.createElement(\"li\");\n            item.innerHTML = itemText[i];\n            ul.appendChild(item);\n        }\n        // list bottom\n        const menuBottom = document.createElement(\"div\");\n        menuTitle.classList.add(\"pw-pt-2\");\n        menuBottom.innerHTML = (0, translations_1.$t)(\"cc_tip_bottom_1\");\n        // important note\n        const importantNote = document.createElement(\"div\");\n        importantNote.classList.add(\"pw-flex\", \"pw-p-4\", \"pw-mt-4\", \"pw-bg-grey-3\");\n        importantNote.style.setProperty(\"border-radius\", \"12px\");\n        const noteImgContainer = document.createElement(\"div\");\n        noteImgContainer.classList.add(\"pw-pr-2\");\n        const noteImg = document.createElement(\"span\");\n        noteImg.classList.add(\"material-icons\", \"material-symbols-outlined\", \"pw-text-grey-6\");\n        noteImg.innerHTML = \"note_stack\";\n        noteImgContainer.appendChild(noteImg);\n        const noteText = document.createElement(\"div\");\n        noteText.innerHTML = (0, translations_1.$t)(\"cc_tip_bottom_2\");\n        importantNote.appendChild(noteImgContainer);\n        importantNote.appendChild(noteText);\n        // append div\n        dialogContent.appendChild(menuTitle);\n        dialogContent.appendChild(ul);\n        dialogContent.appendChild(menuBottom);\n        dialogContent.appendChild(importantNote);\n        return dialogContent;\n    }\n    //   here also is where the take picture button resides\n    renderCameraBottomUi() {\n        const footer = document.createElement(\"div\");\n        footer.id = camera_1.ELEMENT_IDS.FOOTER;\n        footer.classList.add(\"pw-absolute\", \"pw-bottom-[10%]\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\", \"pw-relative\");\n        const takePicButton = document.createElement(\"div\");\n        takePicButton.id = \"takePicButton\";\n        takePicButton.classList.add(\"pw-box-border\", \"pw-mx-auto\", \"pw-absolute\", \"pw-bottom-16\", \"pw-relative\", \"pw-rounded-full\", \"pw-h-16\", \"pw-w-16\", \"pw-border-solid\", \"pw-border-white\", \"pw-border-4\", \"pw-cursor-pointer\");\n        const smallCircleContainer = document.createElement(\"div\");\n        smallCircleContainer.classList.add(\"pw-absolute\", \"pw-top-1/2\", \"-pw-translate-y-1/2\", \"pw-left-1/2\", \"-pw-translate-x-1/2\");\n        takePicButton.appendChild(smallCircleContainer);\n        const smallCircle = document.createElement(\"div\");\n        smallCircle.classList.add(\"pw-w-11\", \"pw-h-11\", \"pw-bg-white\", \"pw-rounded-full\", \"pw-transition-all\", \"pw-duration-100\", \"active:pw-scale-90\");\n        smallCircleContainer.appendChild(smallCircle);\n        footer.appendChild(takePicButton);\n        takePicButton.addEventListener(\"click\", () => __awaiter(this, void 0, void 0, function* () {\n            const mainBody = document.getElementById(this.cameraId);\n            const image = yield this.captureImage();\n            const event = new CustomEvent(\"captureImage\", {\n                detail: {\n                    image,\n                    type: this.cardType,\n                },\n            });\n            mainBody === null || mainBody === void 0 ? void 0 : mainBody.dispatchEvent(event);\n        }));\n        const mainBody = document.getElementById(this.cameraId);\n        const helpDialog = new bottomDialog_1.default(\"pw-help-card-camera\");\n        mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(helpDialog.render());\n        let dialogContent;\n        if (this.cardType.includes(\"cc\")) {\n            dialogContent = this.creditCardTips();\n        }\n        else {\n            dialogContent = this.idCardTips();\n        }\n        helpDialog.addContent(dialogContent);\n        const helpIcon = document.createElement(\"span\");\n        helpIcon.classList.add(\"pw-absolute\", \"pw-bottom-28\", \"pw-left-10\", \"material-symbols-outlined\", \"pw-scale-[1.7]\");\n        helpIcon.innerHTML = \"help\";\n        helpIcon.addEventListener(\"click\", () => {\n            helpDialog.openDialog();\n        });\n        footer.appendChild(helpIcon);\n        this.footerElement = footer;\n        mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(footer);\n    }\n    pauseVideoStream() {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            // stop the video\n            (_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.pause();\n            // stop idle timeout\n            if (this.timer) {\n                clearTimeout(this.timer);\n            }\n        });\n    }\n    resumeVideoStream(cardType) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.updateType(cardType);\n            // resume the video\n            (_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.play();\n            // start idle timeout\n            this.timer = setTimeout(() => {\n                this.stopVideoStream();\n                // open idle dialog\n                const idleDialog = new baseDialog_1.default();\n                idleDialog.render(this.mainScreenId, (0, translations_1.$t)(\"idle_message\"), (0, translations_1.$t)(\"btn_okay\"));\n            }, this.cameraTimeLimit);\n            (0, components_1.hideFullLoading)(this.cameraId);\n        });\n    }\n    stopVideoStream() {\n        if (this.videoElement && this.videoElement.srcObject) {\n            const stream = this.videoElement.srcObject;\n            const tracks = stream.getTracks();\n            tracks.forEach(function (track) {\n                track.stop();\n            });\n            this.videoElement.srcObject = null;\n        }\n        if (this.timer)\n            clearTimeout(this.timer);\n        const cameraDiv = document.getElementById(this.cameraId);\n        cameraDiv === null || cameraDiv === void 0 ? void 0 : cameraDiv.remove();\n        (0, components_1.hideFullLoading)(this.cameraId);\n    }\n    updateType(cardType) {\n        this.cardType = cardType;\n        // update title\n        const title = document.getElementById(\"pw-camera-title\");\n        if (title)\n            title.innerHTML = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].title;\n        // update outline image\n        const outlineImgEl = document.getElementById(\"pw-camera-outline-img\");\n        if (outlineImgEl) {\n            const outlineImg = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineImg;\n            if (outlineImg) {\n                outlineImgEl.classList.remove(\"hidden\");\n                outlineImgEl.setAttribute(\"src\", outlineImg);\n            }\n            else\n                outlineImgEl.classList.add(\"hidden\");\n        }\n        // update outline text\n        const outlineTextEl = document.getElementById(\"pw-camera-subtitle\");\n        const outlineText = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineText;\n        if (outlineTextEl)\n            outlineTextEl.innerHTML = outlineText || \"\";\n    }\n    loadVideoStream(videoElement) {\n        const initialConstraints = {\n            facingMode: \"environment\",\n            width: {\n                ideal: 1280, // 1280, 1024, 640\n            },\n            height: {\n                ideal: 960, // 960, 768, 480\n            },\n            video: true,\n        };\n        // Load the video stream\n        const nav = window.navigator.mediaDevices\n            ? window.navigator.mediaDevices\n            : window.navigator;\n        if (!nav)\n            return;\n        nav\n            .getUserMedia({ video: initialConstraints })\n            .then((stream) => {\n            videoElement.srcObject = stream;\n        })\n            .catch((err) => {\n            console.error(\"Error accessing the camera:\", err);\n        });\n    }\n    cameraInit() {\n        var _a;\n        if (!this.videoElement)\n            return;\n        this.loadVideoStream(this.videoElement);\n        // video event listeners\n        this.videoElement.addEventListener(\"loadedmetadata\", () => {\n            var _a;\n            this.cardDetectionSdk.init(this.cardType);\n            (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"pw-hidden\");\n        });\n        this.videoElement.addEventListener(\"resize\", () => {\n            const isFooterExist = document.getElementById(camera_1.ELEMENT_IDS.FOOTER);\n            if (!isFooterExist) {\n                this.renderCameraBottomUi();\n            }\n            this.resizeElement();\n        });\n        window.addEventListener(\"resize\", () => {\n            this.resizeElement();\n        });\n        (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener(\"change\", () => {\n            const orientationType = screen.orientation.type;\n            if (!orientationType || !this.isMobile)\n                return;\n            if ([\"landscape-primary\", \"landscape-secondary\"].includes(orientationType)) {\n                // TO ADD DIALOG ASK USER TO USE POTRAIT VIEW\n            }\n            else if ([\"portrait-secondary\", \"portrait-primary\"].includes(orientationType)) {\n                // TO BE CONFIRM IF NEED CLOSE DIALOG\n            }\n        });\n    }\n    resizeElement() {\n        const videoContainer = document.getElementById(camera_1.ELEMENT_IDS.VIDEO_CONTAINER);\n        if (window.screen.width < window.screen.height) {\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", window.screen.width > 640 ? \"auto\" : \"100%\");\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n        }\n        else {\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", \"auto\");\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n        }\n        this.cardDetectionSdk.resizeElement();\n    }\n    listenToClickHelp(cb) {\n        const mainBody = document.getElementById(this.cameraId);\n        mainBody === null || mainBody === void 0 ? void 0 : mainBody.addEventListener(\"click:helpIcon\", () => {\n            cb();\n        });\n    }\n}\nexports[\"default\"] = CardCamera;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-camera.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst card_detection_1 = __importDefault(__webpack_require__(/*! ./card-detection */ \"./src/plugins/card-detection.ts\"));\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nconst camera_instruction_1 = __webpack_require__(/*! ../constant/camera-instruction */ \"./src/constant/camera-instruction.ts\");\nconst bottomDialog_1 = __importDefault(__webpack_require__(/*! ../components/bottomDialog */ \"./src/components/bottomDialog.ts\"));\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst navigationBar_1 = __importDefault(__webpack_require__(/*! ../components/navigationBar */ \"./src/components/navigationBar.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nclass CardCamera {\n    constructor(cameraId, cardType, mainScreenId = \"\") {\n        this.cameraTimeLimit = 90000;\n        this.videoElement = null;\n        this.canvasElement = null;\n        this.overlayElement = null;\n        this.titleElement = null;\n        this.footerElement = null;\n        this.cameraId = cameraId;\n        this.cardType = cardType;\n        this.mainScreenId = mainScreenId;\n    }\n    isMobile() {\n        const navigator = window.navigator.userAgent ||\n            window.navigator.vendor ||\n            window.opera;\n        if (!navigator)\n            return false;\n        const isMobile = /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator) ||\n            /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(navigator.substr(0, 4));\n        return isMobile;\n    }\n    captureImage() {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            const bitmap = this.videoElement;\n            // 1. full image\n            let canvas = document.createElement(\"canvas\");\n            let context = canvas.getContext(\"2d\");\n            // draw image to canvas, scale to target dimensions\n            canvas.width = bitmap.videoWidth;\n            canvas.height = bitmap.videoHeight;\n            context.drawImage(bitmap, 0, 0, bitmap.videoWidth, bitmap.videoHeight);\n            // 2. cropped image\n            let cropCanvas = document.createElement(\"canvas\");\n            let cropContext = cropCanvas.getContext(\"2d\");\n            // draw image to canvas, scale to target dimensions\n            cropCanvas.width = bitmap.videoWidth;\n            cropCanvas.height = bitmap.videoHeight;\n            cropContext.drawImage(bitmap, 0, 0, bitmap.videoWidth, bitmap.videoHeight);\n            // calculate cropped image height and width\n            const { width, height } = this.cardDetectionSdk.calculateHeightNWidth(bitmap.videoWidth, bitmap.videoHeight);\n            // calculate cropped image coordinate (x,y)\n            const x = (bitmap.videoWidth - width) / 2;\n            const y = (bitmap.videoHeight - height) / 2;\n            // crop the selected part image\n            const imgData = cropContext.getImageData(x, y, width, height);\n            cropCanvas.width = width;\n            cropCanvas.height = height;\n            cropContext.putImageData(imgData, 0, 0);\n            // 3. resize the canvas\n            try {\n                canvas = (0, imagesHelper_1.resizeCanvas)(canvas, imagesHelper_1.maxFullImage.width, imagesHelper_1.maxFullImage.height);\n                cropCanvas = (0, imagesHelper_1.resizeCanvas)(cropCanvas, imagesHelper_1.maxCroppedImage.width, imagesHelper_1.maxCroppedImage.height);\n            }\n            catch (err) {\n                console.error(\"doc resize image error\", err);\n            }\n            // 4. construct payload - convert to desired file format\n            const { width: displayWidth = \"\", height: displayHeight = \"\" } = ((_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.style) || {};\n            const payload = {\n                fullImage: canvas.toDataURL(\"image/jpeg\"),\n                croppedImage: cropCanvas.toDataURL(\"image/jpeg\"),\n                displaySize: {\n                    width: Number(displayWidth.replace(\"px\", \"\")),\n                    height: Number(displayHeight.replace(\"px\", \"\")),\n                },\n            };\n            return payload;\n        });\n    }\n    init() {\n        try {\n            // show loading spinner in full pg\n            (0, components_1.createFullLoading)(this.cameraId, \"Initializing Camera...\");\n            // 1. Draw the camera display\n            this.drawCameraDisplay();\n            // 2. Setup related SDK\n            const { videoElement, canvasElement, overlayElement, titleElement } = this;\n            this.cardDetectionSdk = new card_detection_1.default({\n                videoElement,\n                canvasElement,\n                overlayElement,\n                titleElement,\n            });\n            // 3. Get the camera permission and trigger the card detection\n            this.cameraInit();\n            // 4. Start timer to close camera\n            this.timer = setTimeout(() => {\n                this.stopVideoStream();\n                // open idle dialog\n                const idleDialog = new baseDialog_1.default();\n                idleDialog.render(this.mainScreenId, (0, translations_1.$t)(\"idle_message\"), (0, translations_1.$t)(\"btn_okay\"));\n            }, this.cameraTimeLimit);\n        }\n        finally {\n            // hide loading spinner in full pg\n            (0, components_1.hideFullLoading)(this.cameraId);\n        }\n    }\n    drawCameraDisplay() {\n        // 1. header section\n        const header = document.createElement(\"div\");\n        header.id = camera_1.ELEMENT_IDS.HEADER;\n        // header.classList.add(\"camera-header-area\");\n        header.classList.add(\"pw-absolute\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\");\n        const navigationDiv = new navigationBar_1.default().render(() => {\n            this.stopVideoStream();\n        });\n        header.appendChild(navigationDiv);\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.id = \"pw-camera-title\";\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-text-center\", \"pw-mb-4\", \"pw-px-5\");\n        // Set title\n        titleDiv.innerHTML = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].title;\n        header.appendChild(titleDiv);\n        this.titleElement = titleDiv;\n        // Set Description\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.classList.add(\"pw-text-center\", \"pw-px-5\");\n        descriptionDiv.innerHTML = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].description;\n        header.appendChild(descriptionDiv);\n        const body = document.createElement(\"div\");\n        body.id = camera_1.ELEMENT_IDS.BODY;\n        body.classList.add(\"camera-body-area\");\n        const videoContainer = document.createElement(\"div\");\n        videoContainer.id = camera_1.ELEMENT_IDS.VIDEO_CONTAINER;\n        videoContainer.classList.add(\"video-container\");\n        const overlayContainer = document.createElement(\"div\");\n        overlayContainer.id = camera_1.ELEMENT_IDS.OVERLAY_CONTAINER;\n        overlayContainer.classList.add(\"overlay-container\");\n        const overlayElement = document.createElement(\"div\");\n        overlayElement.id = camera_1.ELEMENT_IDS.OVERLAY;\n        overlayElement.classList.add(\"overlay-element\");\n        overlayElement.classList.add(\"pw-hidden\");\n        let topBorderElement = document.createElement(\"div\");\n        topBorderElement.id = camera_1.ELEMENT_IDS.TOP_BORDER;\n        topBorderElement.classList.add(\"border-element\");\n        let bottomBorderElement;\n        const outlineText = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineText;\n        if (outlineText) {\n            topBorderElement.classList.add(\"border-id-element\");\n            const idOutlineElement = document.createElement(\"div\");\n            idOutlineElement.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\", \"pw-flex\", \"pw-w-full\", \"pw-h-full\", \"pw-items-center\", \"pw-justify-center\");\n            const outlineImg = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineImg;\n            const iconImg = document.createElement(\"img\");\n            iconImg.id = \"pw-camera-outline-img\";\n            iconImg.style.maxHeight = \"80%\";\n            iconImg.style.maxWidth = \"80%\";\n            iconImg.style.objectFit = \"contain\";\n            if (outlineImg)\n                iconImg.setAttribute(\"src\", outlineImg);\n            else\n                iconImg.classList.add(\"hidden\");\n            idOutlineElement.appendChild(iconImg);\n            overlayElement.appendChild(idOutlineElement);\n            const idOutlineBottom = document.createElement(\"div\");\n            idOutlineBottom.classList.add(\"outlide-id-bottom\");\n            const text = document.createElement(\"div\");\n            text.id = \"pw-camera-subtitle\";\n            text.style.margin = \"16px\";\n            text.innerHTML = outlineText;\n            idOutlineBottom.appendChild(text);\n            overlayElement.appendChild(idOutlineBottom);\n        }\n        else {\n            topBorderElement.classList.add(\"border-top-element\");\n            bottomBorderElement = document.createElement(\"div\");\n            bottomBorderElement.id = camera_1.ELEMENT_IDS.BOTTOM_BORDER;\n            bottomBorderElement.classList.add(\"border-element\");\n            bottomBorderElement.classList.add(\"border-bottom-element\");\n        }\n        const canvasElement = document.createElement(\"canvas\");\n        canvasElement.id = camera_1.ELEMENT_IDS.CANVAS;\n        canvasElement.classList.add(\"video-element\");\n        canvasElement.classList.add(\"canvas-element\");\n        const videoElement = document.createElement(\"video\");\n        videoElement.id = camera_1.ELEMENT_IDS.VIDEO;\n        videoElement.autoplay = true;\n        videoElement.playsInline = true;\n        videoElement.preload = \"auto\";\n        videoElement.loop = true;\n        videoElement.classList.add(\"video-element\");\n        // 2.1\n        this.videoElement = videoElement;\n        this.overlayElement = overlayElement;\n        this.canvasElement = canvasElement;\n        overlayElement.appendChild(topBorderElement);\n        if (bottomBorderElement)\n            overlayElement.appendChild(bottomBorderElement);\n        overlayContainer.appendChild(overlayElement);\n        videoContainer.appendChild(overlayContainer);\n        videoContainer.appendChild(canvasElement);\n        videoContainer.appendChild(videoElement);\n        body.appendChild(videoContainer);\n        // 3. append child\n        const mainBody = document.getElementById(this.cameraId);\n        if (!mainBody)\n            return;\n        mainBody.classList.add(\"camera-bg\", \"pw-overflow-y-hidden\");\n        mainBody.appendChild(header);\n        mainBody.appendChild(body);\n    }\n    listenToCardCapture(cb) {\n        const cameraBody = document.getElementById(this.cameraId);\n        cameraBody === null || cameraBody === void 0 ? void 0 : cameraBody.addEventListener(\"captureImage\", (e) => {\n            cb(e);\n        });\n    }\n    idCardTips() {\n        const dialogContent = document.createElement(\"div\");\n        const ul = document.createElement(\"ul\");\n        ul.classList.add(\"pw-px-5\");\n        const labelMapping = {\n            [camera_1.CARD_TYPES.LICENSE]: (0, translations_1.$t)(\"driver_license\"),\n            [camera_1.CARD_TYPES.LICENSE_BACK]: (0, translations_1.$t)(\"driver_license\"),\n            [camera_1.CARD_TYPES.PASSPORT]: (0, translations_1.$t)(\"passport\"),\n        };\n        const label = labelMapping[this.cardType]\n            ? labelMapping[this.cardType]\n            : (0, translations_1.$t)(\"card\");\n        const itemText = [\n            (0, translations_1.$t)(\"id_tip_1\", { cardType: label.toLowerCase() }),\n            (0, translations_1.$t)(\"id_tip_2\"),\n            (0, translations_1.$t)(\"id_tip_3\"),\n        ];\n        for (let i = 0; i < itemText.length; i++) {\n            const item = document.createElement(\"li\");\n            item.innerHTML = itemText[i];\n            ul.appendChild(item);\n        }\n        dialogContent.appendChild(ul);\n        return dialogContent;\n    }\n    creditCardTips() {\n        const dialogContent = document.createElement(\"div\");\n        // list title\n        const menuTitle = document.createElement(\"div\");\n        menuTitle.classList.add(\"pw-pt-4\");\n        menuTitle.innerHTML = (0, translations_1.$t)(\"cc_tip_title\");\n        // list\n        const ul = document.createElement(\"ul\");\n        ul.classList.add(\"pw-px-5\");\n        const itemText = [(0, translations_1.$t)(\"cc_tip_1\"), (0, translations_1.$t)(\"cc_tip_2\"), (0, translations_1.$t)(\"cc_tip_3\")];\n        for (let i = 0; i < itemText.length; i++) {\n            const item = document.createElement(\"li\");\n            item.innerHTML = itemText[i];\n            ul.appendChild(item);\n        }\n        // list bottom\n        const menuBottom = document.createElement(\"div\");\n        menuTitle.classList.add(\"pw-pt-2\");\n        menuBottom.innerHTML = (0, translations_1.$t)(\"cc_tip_bottom_1\");\n        // important note\n        const importantNote = document.createElement(\"div\");\n        importantNote.classList.add(\"pw-flex\", \"pw-p-4\", \"pw-mt-4\", \"pw-bg-grey-3\");\n        importantNote.style.setProperty(\"border-radius\", \"12px\");\n        const noteImgContainer = document.createElement(\"div\");\n        noteImgContainer.classList.add(\"pw-pr-2\");\n        const noteImg = document.createElement(\"span\");\n        noteImg.classList.add(\"material-icons\", \"material-symbols-outlined\", \"pw-text-grey-6\");\n        noteImg.innerHTML = \"note_stack\";\n        noteImgContainer.appendChild(noteImg);\n        const noteText = document.createElement(\"div\");\n        noteText.innerHTML = (0, translations_1.$t)(\"cc_tip_bottom_2\");\n        importantNote.appendChild(noteImgContainer);\n        importantNote.appendChild(noteText);\n        // append div\n        dialogContent.appendChild(menuTitle);\n        dialogContent.appendChild(ul);\n        dialogContent.appendChild(menuBottom);\n        dialogContent.appendChild(importantNote);\n        return dialogContent;\n    }\n    //   here also is where the take picture button resides\n    renderCameraBottomUi() {\n        const footer = document.createElement(\"div\");\n        footer.id = camera_1.ELEMENT_IDS.FOOTER;\n        footer.classList.add(\"pw-absolute\", \"pw-bottom-[10%]\", \"pw-z-[2]\", \"pw-w-full\", \"pw-text-white\", \"pw-relative\");\n        const takePicButton = document.createElement(\"div\");\n        takePicButton.id = \"takePicButton\";\n        takePicButton.classList.add(\"pw-box-border\", \"pw-mx-auto\", \"pw-absolute\", \"pw-bottom-16\", \"pw-relative\", \"pw-rounded-full\", \"pw-h-16\", \"pw-w-16\", \"pw-border-solid\", \"pw-border-white\", \"pw-border-4\", \"pw-cursor-pointer\");\n        const smallCircleContainer = document.createElement(\"div\");\n        smallCircleContainer.classList.add(\"pw-absolute\", \"pw-top-1/2\", \"-pw-translate-y-1/2\", \"pw-left-1/2\", \"-pw-translate-x-1/2\");\n        takePicButton.appendChild(smallCircleContainer);\n        const smallCircle = document.createElement(\"div\");\n        smallCircle.classList.add(\"pw-w-11\", \"pw-h-11\", \"pw-bg-white\", \"pw-rounded-full\", \"pw-transition-all\", \"pw-duration-100\", \"active:pw-scale-90\");\n        smallCircleContainer.appendChild(smallCircle);\n        footer.appendChild(takePicButton);\n        takePicButton.addEventListener(\"click\", () => __awaiter(this, void 0, void 0, function* () {\n            const mainBody = document.getElementById(this.cameraId);\n            const image = yield this.captureImage();\n            const event = new CustomEvent(\"captureImage\", {\n                detail: {\n                    image,\n                    type: this.cardType,\n                },\n            });\n            mainBody === null || mainBody === void 0 ? void 0 : mainBody.dispatchEvent(event);\n        }));\n        const mainBody = document.getElementById(this.cameraId);\n        const helpDialog = new bottomDialog_1.default(\"pw-help-card-camera\");\n        mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(helpDialog.render());\n        let dialogContent;\n        if (this.cardType.includes(\"cc\")) {\n            dialogContent = this.creditCardTips();\n        }\n        else {\n            dialogContent = this.idCardTips();\n        }\n        helpDialog.addContent(dialogContent);\n        const helpIcon = document.createElement(\"span\");\n        helpIcon.classList.add(\"pw-absolute\", \"pw-bottom-28\", \"pw-left-10\", \"material-symbols-outlined\", \"pw-scale-[1.7]\");\n        helpIcon.innerHTML = \"help\";\n        helpIcon.addEventListener(\"click\", () => {\n            helpDialog.openDialog();\n        });\n        footer.appendChild(helpIcon);\n        this.footerElement = footer;\n        mainBody === null || mainBody === void 0 ? void 0 : mainBody.appendChild(footer);\n    }\n    pauseVideoStream() {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            // stop the video\n            (_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.pause();\n            // stop idle timeout\n            if (this.timer) {\n                clearTimeout(this.timer);\n            }\n        });\n    }\n    resumeVideoStream(cardType) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.updateType(cardType);\n            // resume the video\n            (_a = this.videoElement) === null || _a === void 0 ? void 0 : _a.play();\n            // start idle timeout\n            this.timer = setTimeout(() => {\n                this.stopVideoStream();\n                // open idle dialog\n                const idleDialog = new baseDialog_1.default();\n                idleDialog.render(this.mainScreenId, (0, translations_1.$t)(\"idle_message\"), (0, translations_1.$t)(\"btn_okay\"));\n            }, this.cameraTimeLimit);\n            (0, components_1.hideFullLoading)(this.cameraId);\n        });\n    }\n    stopVideoStream() {\n        if (this.videoElement && this.videoElement.srcObject) {\n            const stream = this.videoElement.srcObject;\n            const tracks = stream.getTracks();\n            tracks.forEach(function (track) {\n                track.stop();\n            });\n            this.videoElement.srcObject = null;\n        }\n        if (this.timer)\n            clearTimeout(this.timer);\n        const cameraDiv = document.getElementById(this.cameraId);\n        cameraDiv === null || cameraDiv === void 0 ? void 0 : cameraDiv.remove();\n        (0, components_1.hideFullLoading)(this.cameraId);\n    }\n    updateType(cardType) {\n        this.cardType = cardType;\n        // update title\n        const title = document.getElementById(\"pw-camera-title\");\n        if (title)\n            title.innerHTML = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].title;\n        // update outline image\n        const outlineImgEl = document.getElementById(\"pw-camera-outline-img\");\n        if (outlineImgEl) {\n            const outlineImg = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineImg;\n            outlineImgEl.style.maxHeight = \"80%\";\n            outlineImgEl.style.maxWidth = \"80%\";\n            outlineImgEl.style.objectFit = \"contain\";\n            if (outlineImg) {\n                outlineImgEl.classList.remove(\"hidden\");\n                outlineImgEl.setAttribute(\"src\", outlineImg);\n            }\n            else\n                outlineImgEl.classList.add(\"hidden\");\n        }\n        // update outline text\n        const outlineTextEl = document.getElementById(\"pw-camera-subtitle\");\n        const outlineText = camera_instruction_1.CAMERA_INSTRUCTION[this.cardType].outlineText;\n        if (outlineTextEl)\n            outlineTextEl.innerHTML = outlineText || \"\";\n    }\n    loadVideoStream(videoElement) {\n        const initialConstraints = {\n            facingMode: \"environment\",\n            width: {\n                ideal: 1280, // 1280, 1024, 640\n            },\n            height: {\n                ideal: 960, // 960, 768, 480\n            },\n            video: true,\n        };\n        // Load the video stream\n        const nav = window.navigator.mediaDevices\n            ? window.navigator.mediaDevices\n            : window.navigator;\n        if (!nav)\n            return;\n        nav\n            .getUserMedia({ video: initialConstraints })\n            .then((stream) => {\n            videoElement.srcObject = stream;\n        })\n            .catch((err) => {\n            console.error(\"Error accessing the camera:\", err);\n        });\n    }\n    cameraInit() {\n        var _a;\n        if (!this.videoElement)\n            return;\n        this.loadVideoStream(this.videoElement);\n        // video event listeners\n        this.videoElement.addEventListener(\"loadedmetadata\", () => {\n            var _a;\n            this.cardDetectionSdk.init(this.cardType);\n            (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"pw-hidden\");\n        });\n        this.videoElement.addEventListener(\"resize\", () => {\n            const isFooterExist = document.getElementById(camera_1.ELEMENT_IDS.FOOTER);\n            if (!isFooterExist) {\n                this.renderCameraBottomUi();\n            }\n            this.resizeElement();\n        });\n        window.addEventListener(\"resize\", () => {\n            this.resizeElement();\n        });\n        (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.addEventListener(\"change\", () => {\n            const orientationType = screen.orientation.type;\n            if (!orientationType || !this.isMobile)\n                return;\n            if ([\"landscape-primary\", \"landscape-secondary\"].includes(orientationType)) {\n                // TO ADD DIALOG ASK USER TO USE POTRAIT VIEW\n            }\n            else if ([\"portrait-secondary\", \"portrait-primary\"].includes(orientationType)) {\n                // TO BE CONFIRM IF NEED CLOSE DIALOG\n            }\n        });\n    }\n    resizeElement() {\n        const videoContainer = document.getElementById(camera_1.ELEMENT_IDS.VIDEO_CONTAINER);\n        if (window.screen.width < window.screen.height) {\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", window.screen.width > 640 ? \"auto\" : \"100%\");\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n        }\n        else {\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"width\", \"auto\");\n            videoContainer === null || videoContainer === void 0 ? void 0 : videoContainer.style.setProperty(\"height\", \"auto\");\n        }\n        this.cardDetectionSdk.resizeElement();\n    }\n    listenToClickHelp(cb) {\n        const mainBody = document.getElementById(this.cameraId);\n        mainBody === null || mainBody === void 0 ? void 0 : mainBody.addEventListener(\"click:helpIcon\", () => {\n            cb();\n        });\n    }\n}\nexports[\"default\"] = CardCamera;\n\n\n//# sourceURL=webpack://PWUISDK/./src/plugins/card-camera.ts?");
 
 /***/ }),
 
@@ -4012,7 +4012,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    // btn\n    btn_start_now: \"Start Now\",\n    btn_okay: \"Okay\",\n    btn_retake: \"Retake\",\n    btn_proceed: \"Proceed\",\n    btn_try_again: \"Try Again\",\n    btn_submit: \"Submit\",\n    btn_done: \"Done\",\n    // common\n    loading: \"Loading\",\n    loading_dots: \"Loading...\",\n    search: \"Search\",\n    // first page\n    national_identity_document_title: \"Capture ID photo\",\n    national_identity_document_desc: \"Please ensure your document is clear, readable and valid.\",\n    selfie_title: \"Face scan\",\n    selfie_desc: \"Position your face in the frame and follow the instructions given. Do not wear sunglasses, hat or accessories. Background must be light and neutral.\",\n    cc_title: \"Credit card verification\",\n    cc_desc: \"Please show expiry date, card owner's name and first 6 last 4 digits card number.\",\n    poa_title: \"Utility bill verification\",\n    poa_desc: \"Please ensure your document is clear, readable and valid.\",\n    // national identity document\n    select_id_type: \"Select ID type\",\n    issuing_country: \"Issuing country/region\",\n    document_type: \"Document type\",\n    id_card: \"ID Card\",\n    driver_license: \"Driver's License\",\n    passport: \"Passport\",\n    error_id: \"The image has glare issues, please take a clear photo in a well-lit area.\",\n    // selfie\n    error_selfie: \"The image is blur, please take a clear photo.\",\n    // credit card\n    cc_missing_info_title: \"Missing card info.\",\n    cc_missing_info_desc: \"Capture the side of the card with:\",\n    // - cc_missing_content_* (dont change the id_key)\n    cc_missing_content_full_name: \"Card owner's name\",\n    cc_missing_content_cc_number: \"Card number\",\n    cc_missing_content_cc_number_first_6: \"First 6 digits of card number\",\n    cc_missing_content_cc_number_last_4: \"Last 4 digits of card number\",\n    cc_missing_content_date_of_expiry: \"Expiry date\",\n    cc_expired_with_retry: \"Credit card expired. Please provide a new card to continue.\",\n    cc_expired_without_retry: \"Credit card expired. Please ensure your credit card is valid.\",\n    error_cc: \"The image has glare issues, please take a clear photo in a well-lit area.\",\n    // proof of address\n    proof_of_address_title: \"Upload utility bill\",\n    proof_of_address_desc: \"Please upload your utility bill\",\n    image_format_label: \"Format: PNG, JPG, JPEG or PDF ({size}MB max)\",\n    click_to_take_photo: \"Click to take photo\",\n    error_poa_file_missing: \"Please upload your utility bill to continue.\",\n    error_poa_file_invalid: \"Only files in this extensions are allowed to be upload: PNG, JPG, JPEG or PDF ({size}MB max)\",\n    error_poa_idle_long: \"The uploaded file is invalid due to you have been idle for too long.\",\n    error_poa_file_exposure: \"The file has exposure issues, please take a clear photo in a well-lit area.\",\n    error_poa: \"Something went wrong. Please contact customer support for assistance or retry.\",\n    // camera instruction\n    id_front_title: \"ID Card | Front\",\n    id_front_outline: \"Front of ID\",\n    id_back_title: \"ID Card | Back\",\n    id_back_outline: \"Back of ID\",\n    license_front_title: \"License | Front\",\n    license_back_title: \"License | Back\",\n    passport_title: \"Passport\",\n    cc_front_title: \"Credit Card\",\n    cc_back_title: \"Credit Card\",\n    camera_desc: \"Place your document within the frame and take photo.\",\n    idle_message: \"You have been idle for too long.\",\n    tips: \"Tips\",\n    id_tip_1: \"Place your card within the frame and take picture.\",\n    id_tip_2: \"Make sure the photo is not blur or cropped.\",\n    id_tip_3: \"Avoid reflection and glare.\",\n    selfie_tip_1: \"Position your face within the rounded frame.\",\n    selfie_tip_2: \"Make sure your face is not blur or cropped.\",\n    selfie_tip_3: \"Avoid reflection and glare.\",\n    cc_tip_title: \"Please show the info below:\",\n    cc_tip_1: \"Card owner's name\",\n    cc_tip_2: \"First 6 and last 4 digits ONLY\",\n    cc_tip_3: \"Expiry date\",\n    cc_tip_bottom_1: \"Some credit/debit cards may require capturing both front and back to obtain all mandatory information.\",\n    cc_tip_bottom_2: \"You may cover the middle digits and CVV on the card manually or cover it later.\",\n    flip_other_side: \"Flip the other side\",\n    face_smile_at_camera: \"Please smile at the camera.\",\n    face_smile_seconds: \"Please keep smiling for 3 seconds.\",\n    face_neutral_expression: \"Please show a neutral expression at the camera.\",\n    face_looks_straight: \"Please look straight at the camera.\",\n    face_within_frame: \"Place your face within the rounded frame.\",\n    card_masking_title: \"Hide your info\",\n    card_masking_desc: \"Please cover the middle digits and CVV on the card.\",\n    // submission limit\n    submission_limit_title: \"Submission limit reached\",\n    submission_limit_desc: \"Your submission couldn't be processed as it has reached the maximum number of attempts.\",\n    // analyze page\n    analyze_title: \"Analyzing the pictures\",\n    analyze_desc: \"Please do not close your browser, this may take a moment.\",\n    error_analyze: \"Unable to verify your documents. Please check your documents and resubmit again.\",\n    // summary\n    // - form label - label_* (dont change the id_key)\n    label_full_name: \"Full name\",\n    // - credit card\n    label_cc_number: \"Card number\",\n    label_cc_number_first_6: \"First 6 Card Number\",\n    label_cc_number_last_4: \"Last 4 Card Number\",\n    label_doe_year: \"Expiry date\",\n    label_doe_month: \"Expiry date\",\n    label_date_of_expiry: \"Expiry date\",\n    // - national identity document\n    label_given_name: \"Given name\",\n    label_surname: \"Surname\",\n    label_id_number: \"Identity card number\",\n    label_date_of_birth: \"Date of birth\",\n    label_gender: \"Gender\",\n    label_line1: \"Address\",\n    label_city: \"City\",\n    label_zip: \"Zip code\",\n    label_country_iso2: \"Country\",\n    label_state_iso: \"State/Region\",\n    // - proof of address\n    label_receiver_name: \"Full Name\",\n    label_receiver_address: \"Address\",\n    label_receiver_city: \"City\",\n    label_receiver_zip: \"Zip code\",\n    label_receiver_country_iso2: \"Country\",\n    label_receiver_state_iso: \"State/Region\",\n    // - images\n    img_label_front: \"Front\",\n    img_label_back: \"Back\",\n    img_label_first: \"Capture 1\",\n    img_label_second: \"Capture 2\",\n    // complete page\n    submission_received: \"Submission has been received\",\n    count_down_message: \"Redirecting you to merchant page in {seconds} seconds.\",\n    // error page\n    smtg_went_wrong: \"Something went wrong\",\n    fail_to_locate_verification: \"We could not locate a suitable verification type for you. Please contact customer support for assistance.\",\n    contact_support: \"Please contact customer support for assistance or retry.\",\n    back_to_merchant: \"Back to merchant\",\n    // error message - error_* (dont change the id_key)\n    error_expiry_date: \"The expiry date must be today or in the future.\",\n    error_invalid_month: \"Month must be between 1 and 12.\",\n    error_required: \"This field is required.\",\n    error_invalid_field: \"Invalid {field}.\",\n    error_min_char: \"This field requires min {n} characters length.\",\n    error_max_char: \"This field requires max {n} characters length.\",\n    error_between_char: \"This field requires min {min} and max {max} characters length.\",\n    error_invalid_card: \"This field requires first 6 and last 4 digits.\",\n};\n\n\n//# sourceURL=webpack://PWUISDK/./src/translations/en.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    // btn\n    btn_start_now: \"Start Now\",\n    btn_okay: \"Okay\",\n    btn_retake: \"Retake\",\n    btn_proceed: \"Proceed\",\n    btn_try_again: \"Try Again\",\n    btn_submit: \"Submit\",\n    btn_done: \"Done\",\n    // common\n    loading: \"Loading\",\n    loading_dots: \"Loading...\",\n    search: \"Search\",\n    // first page\n    national_identity_document_title: \"Capture ID photo\",\n    national_identity_document_desc: \"Please ensure your document is clear, readable and valid.\",\n    selfie_title: \"Face scan\",\n    selfie_desc: \"Position your face in the frame and follow the instructions given. Do not wear sunglasses, hat or accessories. Background must be light and neutral.\",\n    cc_title: \"Credit card verification\",\n    cc_desc: \"Please show expiry date, card owner's name and first 6 last 4 digits card number.\",\n    poa_title: \"Utility bill verification\",\n    poa_desc: \"Please ensure your document is clear, readable and valid.\",\n    // national identity document\n    select_id_type: \"Select ID type\",\n    issuing_country: \"Issuing country/region\",\n    document_type: \"Document type\",\n    id_card: \"ID Card\",\n    driver_license: \"Driver's License\",\n    passport: \"Passport\",\n    error_id: \"The image has glare issues, please take a clear photo in a well-lit area.\",\n    // selfie\n    error_selfie: \"The image is blur, please take a clear photo.\",\n    // credit card\n    cc_missing_info_title: \"Missing card info.\",\n    cc_missing_info_desc: \"Capture the side of the card with:\",\n    // - cc_missing_content_* (dont change the id_key)\n    cc_missing_content_full_name: \"Card owner's name\",\n    cc_missing_content_cc_number: \"Card number\",\n    cc_missing_content_cc_number_first_6: \"First 6 digits of card number\",\n    cc_missing_content_cc_number_last_4: \"Last 4 digits of card number\",\n    cc_missing_content_date_of_expiry: \"Expiry date\",\n    cc_expired_with_retry: \"Credit card expired. Please provide a new card to continue.\",\n    cc_expired_without_retry: \"Credit card expired. Please ensure your credit card is valid.\",\n    error_cc: \"The image has glare issues, please take a clear photo in a well-lit area.\",\n    // proof of address\n    proof_of_address_title: \"Upload utility bill\",\n    proof_of_address_desc: \"Please upload your utility bill\",\n    image_format_label: \"Format: PNG, JPG, JPEG or PDF ({size}MB max)\",\n    click_to_take_photo: \"Click to take photo\",\n    error_poa_file_missing: \"Please upload your utility bill to continue.\",\n    error_poa_file_invalid: \"Only files in this extensions are allowed to be upload: PNG, JPG, JPEG or PDF ({size}MB max)\",\n    error_poa_idle_long: \"The uploaded file is invalid due to you have been idle for too long.\",\n    error_poa_file_exposure: \"The file has exposure issues, please take a clear photo in a well-lit area.\",\n    error_poa: \"Something went wrong. Please contact customer support for assistance or retry.\",\n    // camera instruction\n    id_front_title: \"ID Card | Front\",\n    id_front_outline: \"Front of ID\",\n    id_back_title: \"ID Card | Back\",\n    id_back_outline: \"Back of ID\",\n    license_front_title: \"License | Front\",\n    license_back_title: \"License | Back\",\n    passport_title: \"Passport\",\n    cc_front_title: \"Credit Card\",\n    cc_back_title: \"Credit Card\",\n    camera_desc: \"Place your document within the frame and take photo.\",\n    id_camera_dec: \"Please capture the front of your ID card, where your photo is visible. Ensure all details are clear.\",\n    idle_message: \"You have been idle for too long.\",\n    tips: \"Tips\",\n    card: \"Card\",\n    id_tip_1: \"Place your {cardType} within the frame and take picture.\",\n    id_tip_2: \"Make sure the photo is not blur or cropped.\",\n    id_tip_3: \"Avoid reflection and glare.\",\n    selfie_tip_1: \"Position your face within the rounded frame.\",\n    selfie_tip_2: \"Make sure your face is not blur or cropped.\",\n    selfie_tip_3: \"Avoid reflection and glare.\",\n    cc_tip_title: \"Please show the info below:\",\n    cc_tip_1: \"Card owner's name\",\n    cc_tip_2: \"First 6 and last 4 digits ONLY\",\n    cc_tip_3: \"Expiry date\",\n    cc_tip_bottom_1: \"Some credit/debit cards may require capturing both front and back to obtain all mandatory information.\",\n    cc_tip_bottom_2: \"You may cover the middle digits and CVV on the card manually or cover it later.\",\n    flip_other_side: \"Flip the other side\",\n    face_smile_at_camera: \"Please smile at the camera.\",\n    face_smile_seconds: \"Please keep smiling for 3 seconds.\",\n    face_neutral_expression: \"Please show a neutral expression at the camera.\",\n    face_looks_straight: \"Please look straight at the camera.\",\n    face_within_frame: \"Place your face within the rounded frame.\",\n    card_masking_title: \"Hide your info\",\n    card_masking_desc: \"Please cover the middle digits and CVV on the card.\",\n    // submission limit\n    submission_limit_title: \"Submission limit reached\",\n    submission_limit_desc: \"Your submission couldn't be processed as it has reached the maximum number of attempts.\",\n    // analyze page\n    analyze_title: \"Analyzing the pictures\",\n    analyze_desc: \"Please do not close your browser, this may take a moment.\",\n    error_analyze: \"Unable to verify your documents. Please check your documents and resubmit again.\",\n    // summary\n    // - form label - label_* (dont change the id_key)\n    label_full_name: \"Full name\",\n    // - credit card\n    label_cc_number: \"Card number\",\n    label_cc_number_first_6: \"First 6 Card Number\",\n    label_cc_number_last_4: \"Last 4 Card Number\",\n    label_doe_year: \"Expiry date\",\n    label_doe_month: \"Expiry date\",\n    label_date_of_expiry: \"Expiry date\",\n    // - national identity document\n    label_given_name: \"Given name\",\n    label_surname: \"Surname\",\n    label_id_number: \"Identity card number\",\n    label_date_of_birth: \"Date of birth\",\n    label_gender: \"Gender\",\n    label_line1: \"Address\",\n    label_city: \"City\",\n    label_zip: \"Zip code\",\n    label_country_iso2: \"Country\",\n    label_state_iso: \"State/Region\",\n    // - proof of address\n    label_receiver_name: \"Full Name\",\n    label_receiver_address: \"Address\",\n    label_receiver_city: \"City\",\n    label_receiver_zip: \"Zip code\",\n    label_receiver_country_iso2: \"Country\",\n    label_receiver_state_iso: \"State/Region\",\n    // - images\n    img_label_front: \"Front\",\n    img_label_back: \"Back\",\n    img_label_first: \"Capture 1\",\n    img_label_second: \"Capture 2\",\n    // complete page\n    submission_received: \"Submission has been received\",\n    count_down_message: \"Redirecting you to merchant page in {seconds} seconds.\",\n    // error page\n    smtg_went_wrong: \"Something went wrong\",\n    fail_to_locate_verification: \"We could not locate a suitable verification type for you. Please contact customer support for assistance.\",\n    contact_support: \"Please contact customer support for assistance or retry.\",\n    back_to_merchant: \"Back to merchant\",\n    // error message - error_* (dont change the id_key)\n    error_expiry_date: \"The expiry date must be today or in the future.\",\n    error_invalid_month: \"Month must be between 1 and 12.\",\n    error_required: \"This field is required.\",\n    error_invalid_field: \"Invalid {field}.\",\n    error_min_char: \"This field requires min {n} characters length.\",\n    error_max_char: \"This field requires max {n} characters length.\",\n    error_between_char: \"This field requires min {min} and max {max} characters length.\",\n    error_invalid_card: \"This field requires first 6 and last 4 digits.\",\n};\n\n\n//# sourceURL=webpack://PWUISDK/./src/translations/en.ts?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipwave-ekyc-uikit",
-  "version": "2.0.0-6",
+  "version": "2.0.0-8",
   "description": "",
   "main": "dist/pw-bundle.js",
   "scripts": {