pipwave-ekyc-uikit 2.0.0-8 → 2.1.0-1

package/dist/pw-bundle.js

@@ -3671,7 +3671,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.formHeaderMapping = void 0;\nconst verification_1 = __webpack_require__(/*! ./verification */ \"./src/constant/verification.ts\");\nexports.formHeaderMapping = {\n    [verification_1.VERIFICATION_TYPE.IDENTITY_DOC]: {\n        currentStep: 4,\n        title: \"ID card details\",\n        subTitle: \"Verify your card information.\",\n    },\n    [verification_1.VERIFICATION_TYPE.CREDIT_CARD]: {\n        currentStep: 2,\n        title: \"Card details\",\n        subTitle: \"Verify your card information.\",\n    },\n    [verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS]: {\n        currentStep: 3,\n        title: \"Utility bill details\",\n        subTitle: \"Verify your upload information.\",\n    },\n};\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/form.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getFormHeader = void 0;\nconst verification_1 = __webpack_require__(/*! ./verification */ \"./src/constant/verification.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst getFormHeader = (type) => {\n    const verificationTypes = uisdk_1.pwInstance.verificationTypes;\n    const hasIdAndSelfie = verificationTypes.includes('national_identity_document') &&\n        verificationTypes.includes('selfie');\n    // Dynamic currentStep based on verification flow\n    const stepMapping = {\n        [verification_1.VERIFICATION_TYPE.IDENTITY_DOC]: hasIdAndSelfie ? 4 : 3,\n        [verification_1.VERIFICATION_TYPE.CREDIT_CARD]: 2,\n        [verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS]: 3,\n    };\n    const currentStep = stepMapping[type] || 1;\n    // Header content mapping\n    const headerMapping = {\n        [verification_1.VERIFICATION_TYPE.IDENTITY_DOC]: {\n            title: \"ID card details\",\n            subTitle: \"Verify your card information.\",\n        },\n        [verification_1.VERIFICATION_TYPE.CREDIT_CARD]: {\n            title: \"Card details\",\n            subTitle: \"Verify your card information.\",\n        },\n        [verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS]: {\n            title: \"Utility bill details\",\n            subTitle: \"Verify your upload information.\",\n        },\n    };\n    return Object.assign({ currentStep }, headerMapping[type]);\n};\nexports.getFormHeader = getFormHeader;\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/form.ts?");
 
 /***/ }),
 
@@ -3774,6 +3774,17 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 
 /***/ }),
 
+/***/ "./src/helper/polling.ts":
+/*!*******************************!*\
+  !*** ./src/helper/polling.ts ***!
+  \*******************************/
+/***/ (function(__unused_webpack_module, exports) {
+
+"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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.pollStatus = void 0;\nfunction pollStatus(fetchFn, maxAttempts = 10, intervalMs = 2000, logPrefix = \"Polling\") {\n    return __awaiter(this, void 0, void 0, function* () {\n        let payload = yield fetchFn();\n        let attempts = 0;\n        while (payload.status === \"pending\" && attempts < maxAttempts) {\n            yield new Promise((resolve) => setTimeout(resolve, intervalMs));\n            payload = yield fetchFn();\n            console.log(`${logPrefix} attempt ${attempts + 1}, payload`, payload);\n            attempts++;\n        }\n        return payload;\n    });\n}\nexports.pollStatus = pollStatus;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/polling.ts?");
+
+/***/ }),
+
 /***/ "./src/helper/stepper.ts":
 /*!*******************************!*\
   !*** ./src/helper/stepper.ts ***!
@@ -3781,7 +3792,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getStepByType = exports.resetMainStep = exports.incrementStep = exports.mainStep = void 0;\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nexports.mainStep = 0;\nconst incrementStep = () => {\n    exports.mainStep += 1;\n};\nexports.incrementStep = incrementStep;\nconst resetMainStep = () => {\n    exports.mainStep = 0;\n};\nexports.resetMainStep = resetMainStep;\nconst getStepByType = (type) => {\n    const steps = {\n        // currently ID always come with CC so will be at 4\n        [verification_1.VERIFICATION_TYPE.IDENTITY_DOC]: 4,\n        [verification_1.VERIFICATION_TYPE.SELFIE]: 4,\n        [verification_1.VERIFICATION_TYPE.CREDIT_CARD]: 2,\n        [verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS]: 3,\n    };\n    return steps[type];\n};\nexports.getStepByType = getStepByType;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/stepper.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getCurrentStepNumber = exports.getStepByType = exports.resetMainStep = exports.incrementStep = exports.mainStep = void 0;\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nexports.mainStep = 0;\nconst incrementStep = () => {\n    exports.mainStep += 1;\n    console.log('incrementStep - mainStep is now:', exports.mainStep);\n};\nexports.incrementStep = incrementStep;\nconst resetMainStep = () => {\n    exports.mainStep = 0;\n    console.log('resetMainStep - mainStep reset to:', exports.mainStep);\n};\nexports.resetMainStep = resetMainStep;\n// Check here\nconst getStepByType = (type) => {\n    console.log('--- getStepByType, type:', type);\n    const verificationTypes = uisdk_1.pwInstance.verificationTypes;\n    const firstVerification = verificationTypes[0];\n    const { IDENTITY_DOC, SELFIE, CREDIT_CARD, PROOF_OF_ADDRESS } = verification_1.VERIFICATION_TYPE;\n    // Sequence is always ID → Selfie\n    const steps = {\n        // ID: 4 steps if selfie also in list (ID + Selfie combo), 3 steps if ID only\n        [IDENTITY_DOC]: firstVerification === IDENTITY_DOC && verificationTypes.includes(SELFIE)\n            ? 4\n            : 3,\n        // Selfie: 4 steps if part of ID + Selfie combo, 1 step if Selfie only\n        [SELFIE]: firstVerification === IDENTITY_DOC && verificationTypes.includes(SELFIE)\n            ? 4\n            : 1,\n        [CREDIT_CARD]: 2,\n        [PROOF_OF_ADDRESS]: 3,\n    };\n    return steps[type];\n};\nexports.getStepByType = getStepByType;\n// Check here\nconst getCurrentStepNumber = (type) => {\n    console.log('--- getCurrentStepNumber. type:', type);\n    const verificationTypes = uisdk_1.pwInstance.verificationTypes;\n    const { IDENTITY_DOC, SELFIE } = verification_1.VERIFICATION_TYPE;\n    // For ID + Selfie combo, we need special handling\n    const isIdSelfieCombo = verificationTypes[0] === IDENTITY_DOC && verificationTypes.includes(SELFIE);\n    console.log('isIdSelfieCombo', isIdSelfieCombo);\n    if (isIdSelfieCombo) {\n        if (type === IDENTITY_DOC) {\n            // First verification type (ID) shows step 1\n            return 1;\n        }\n        else if (type === SELFIE) {\n            // Second verification type (Selfie) shows step 3\n            // (ID took 2 steps: intro/selection + upload)\n            return 3;\n        }\n    }\n    // For other cases (ID only, Selfie only, etc.), use mainStep directly\n    // mainStep is already incremented, so it represents the current step (1, 2, 3...)\n    return exports.mainStep;\n};\nexports.getCurrentStepNumber = getCurrentStepNumber;\n\n\n//# sourceURL=webpack://PWUISDK/./src/helper/stepper.ts?");
 
 /***/ }),
 
@@ -3836,7 +3847,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (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// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst CompletedPage_1 = __importDefault(__webpack_require__(/*! ./CompletedPage */ \"./src/pageClass/CompletedPage.ts\"));\nconst Summary_1 = __importDefault(__webpack_require__(/*! ./Summary */ \"./src/pageClass/Summary.ts\"));\n// components\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nclass AnalyzePage extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(analyzeType = \"id\") {\n        var _a, _b, _c, _d;\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                this.clearScreen();\n                // 1. show loading screen\n                const loadingPage = new LoadingPage_1.default(this.mainScreenId, this.displayMode);\n                loadingPage.render((0, translations_1.$t)(\"analyze_title\"), (0, translations_1.$t)(\"analyze_desc\"), true);\n                // 2. get ekyc result\n                // wait some time to call API\n                yield new Promise((resolve) => setTimeout(resolve, 2000));\n                // 3. Redirect to review page\n                // show id review page\n                if (analyzeType === \"id\") {\n                    const payload = yield uisdk_1.pwInstance.viewIdResult();\n                    if ((_a = payload.filepaths) === null || _a === void 0 ? void 0 : _a.front_doc_key) {\n                        (0, imagesHelper_1.setFrontImg)({ croppedImage: payload.filepaths.front_doc_key });\n                    }\n                    if ((_b = payload.filepaths) === null || _b === void 0 ? void 0 : _b.back_doc_key) {\n                        (0, imagesHelper_1.setBackImg)({ croppedImage: payload.filepaths.back_doc_key });\n                    }\n                    return this.redirectToIdSummaryPage(payload);\n                }\n                // show cc review page\n                else if (analyzeType === \"cc\") {\n                    const payload = yield uisdk_1.pwInstance.viewCcResult();\n                    if ((_c = payload.filepaths) === null || _c === void 0 ? void 0 : _c.front_doc_key) {\n                        (0, imagesHelper_1.setFrontImg)({ croppedImage: payload.filepaths.front_doc_key });\n                    }\n                    if ((_d = payload.filepaths) === null || _d === void 0 ? void 0 : _d.back_doc_key) {\n                        (0, imagesHelper_1.setBackImg)({ croppedImage: payload.filepaths.back_doc_key });\n                    }\n                    return this.redirectToCcSummaryPage(payload);\n                }\n                // show poa review page\n                else if (analyzeType === \"poa\") {\n                    const payload = yield uisdk_1.pwInstance.viewPoaResult();\n                    return this.redirectToPoaSummaryPage(payload);\n                }\n                // show submission has been received\n                else {\n                    this.clearScreen();\n                    const completedPage = new CompletedPage_1.default(this.mainScreenId, this.displayMode);\n                    return completedPage.render();\n                }\n            }\n            catch (err) {\n                console.error(err);\n                const maxAttemptErrors = [\n                    \"openApi/max-session-attempt\",\n                    \"openApi/limit-exceed\",\n                    \"openApi/session-id-expired\",\n                    \"attempt-exceeded\",\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                ];\n                // 1. when exceed max attempt, redirect to submission error page\n                if (err.type && maxAttemptErrors.includes(err.type)) {\n                    return this.redirectToSubmissionLimitPage();\n                }\n                // 2. when view ekyc result fail due to doc upload not verified, pop up error dialog\n                else if (err.type && invalidDocErrors.includes(err.type)) {\n                    return this.openErrorDialog();\n                }\n                // 3. redirect to unexpected error page\n                this.clearScreen();\n                this.openErrorPage(err);\n            }\n        });\n    }\n    redirectToCcSummaryPage(payload) {\n        var _a, _b, _c, _d, _e;\n        const { result, is_retriable, is_expired } = payload;\n        this.clearScreen();\n        // images\n        let images = [];\n        if ((_a = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _a === void 0 ? void 0 : _a.front_doc_key) {\n            images.push({\n                innerHTML: ((_b = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _b === void 0 ? void 0 : _b.back_doc_key)\n                    ? (0, translations_1.$t)(\"img_label_first\")\n                    : \"\",\n                alt: \"Image1\",\n                src: (_c = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _c === void 0 ? void 0 : _c.front_doc_key,\n            });\n        }\n        if ((_d = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _d === void 0 ? void 0 : _d.back_doc_key) {\n            images.push({\n                innerHTML: (0, translations_1.$t)(\"img_label_second\"),\n                alt: \"Image2\",\n                src: (_e = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _e === void 0 ? void 0 : _e.back_doc_key,\n            });\n        }\n        const summaryCc = new Summary_1.default(this.mainScreenId, this.displayMode);\n        summaryCc.render({\n            type: verification_1.VERIFICATION_TYPE.CREDIT_CARD,\n            result,\n            images,\n            status: {\n                expired: is_expired,\n                retriable: is_retriable,\n            },\n        });\n    }\n    redirectToIdSummaryPage(payload) {\n        const { id_type, result, filepaths } = payload;\n        let images = [];\n        if (filepaths === null || filepaths === void 0 ? void 0 : filepaths.front_doc_key) {\n            images.push({\n                innerHTML: (0, translations_1.$t)(\"img_label_front\"),\n                alt: \"Front Image\",\n                src: filepaths.front_doc_key,\n            });\n        }\n        if (filepaths === null || filepaths === void 0 ? void 0 : filepaths.back_doc_key) {\n            images.push({\n                innerHTML: (0, translations_1.$t)(\"img_label_back\"),\n                alt: \"Back Image\",\n                src: filepaths.back_doc_key,\n            });\n        }\n        this.clearScreen();\n        const summaryId = new Summary_1.default(this.mainScreenId, this.displayMode);\n        summaryId.render({\n            type: verification_1.VERIFICATION_TYPE.IDENTITY_DOC,\n            id_type,\n            result,\n            images,\n        });\n    }\n    redirectToPoaSummaryPage(payload) {\n        const { result, filepaths } = payload;\n        let images = [];\n        if (filepaths && filepaths.length) {\n            images = filepaths.map((filepath) => {\n                return { src: filepath, alt: \"Image\" };\n            });\n        }\n        this.clearScreen();\n        const summaryPoa = new Summary_1.default(this.mainScreenId, this.displayMode);\n        summaryPoa.render({\n            type: verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS,\n            result,\n            images,\n        });\n    }\n    redirectToSubmissionLimitPage() {\n        this.clearScreen();\n        // redirect to submission error page\n        const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n        submissionLimit.render();\n    }\n    openErrorDialog(isRetriable) {\n        const errorDialog = new baseDialog_1.default();\n        const cb = () => {\n            // redirect submision limit page\n            if (!isRetriable)\n                return this.redirectToSubmissionLimitPage();\n            // redirect to first screen\n            this.clearScreen();\n            const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode);\n            firstPage.render();\n        };\n        errorDialog.render(this.mainScreenId, (0, translations_1.$t)(\"error_analyze\"), (0, translations_1.$t)(\"btn_retake\"), cb);\n    }\n}\nexports[\"default\"] = AnalyzePage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/AnalyzePage.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// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst CompletedPage_1 = __importDefault(__webpack_require__(/*! ./CompletedPage */ \"./src/pageClass/CompletedPage.ts\"));\nconst Summary_1 = __importDefault(__webpack_require__(/*! ./Summary */ \"./src/pageClass/Summary.ts\"));\n// components\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nconst polling_1 = __webpack_require__(/*! ../helper/polling */ \"./src/helper/polling.ts\");\nclass AnalyzePage extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(analyzeType) {\n        var _a, _b, _c, _d;\n        return __awaiter(this, void 0, void 0, function* () {\n            console.log('AnalyzePage render - analyzeType:', analyzeType);\n            try {\n                this.clearScreen();\n                // 1. show loading screen\n                const loadingPage = new LoadingPage_1.default(this.mainScreenId, this.displayMode);\n                loadingPage.render((0, translations_1.$t)(\"analyze_title\"), (0, translations_1.$t)(\"analyze_desc\"), true);\n                // 2. get ekyc result\n                // wait some time to call API\n                yield new Promise((resolve) => setTimeout(resolve, 2000));\n                // 3. Redirect to review page\n                // show id review page\n                if (analyzeType === \"id\") {\n                    console.log('Fetching ID verification results...');\n                    const payload = yield (0, polling_1.pollStatus)(() => uisdk_1.pwInstance.viewIdResult(), 5, 2000, \"AnalyzePage ID\");\n                    console.log('ID verification results received:', payload);\n                    // Validate payload has required data\n                    if (!payload.result || !payload.id_type) {\n                        console.error('Invalid payload: missing result or id_type', payload);\n                        throw new Error('Unable to retrieve verification results. Please try again.');\n                    }\n                    if ((_a = payload.filepaths) === null || _a === void 0 ? void 0 : _a.front_doc_key) {\n                        (0, imagesHelper_1.setFrontImg)({ croppedImage: payload.filepaths.front_doc_key });\n                    }\n                    if ((_b = payload.filepaths) === null || _b === void 0 ? void 0 : _b.back_doc_key) {\n                        (0, imagesHelper_1.setBackImg)({ croppedImage: payload.filepaths.back_doc_key });\n                    }\n                    return this.redirectToIdSummaryPage(payload);\n                }\n                // show cc review page\n                else if (analyzeType === \"cc\") {\n                    console.log('Fetching CC verification results...');\n                    const payload = yield (0, polling_1.pollStatus)(() => uisdk_1.pwInstance.viewCcResult(), 5, 2000, \"AnalyzePage CC\");\n                    console.log('CC verification results received:', payload);\n                    // Validate payload has required data\n                    if (!payload.result) {\n                        console.error('Invalid payload: missing result', payload);\n                        throw new Error('Unable to retrieve credit card verification results. Please try again.');\n                    }\n                    if ((_c = payload.filepaths) === null || _c === void 0 ? void 0 : _c.front_doc_key) {\n                        (0, imagesHelper_1.setFrontImg)({ croppedImage: payload.filepaths.front_doc_key });\n                    }\n                    if ((_d = payload.filepaths) === null || _d === void 0 ? void 0 : _d.back_doc_key) {\n                        (0, imagesHelper_1.setBackImg)({ croppedImage: payload.filepaths.back_doc_key });\n                    }\n                    return this.redirectToCcSummaryPage(payload);\n                }\n                // show poa review page\n                else if (analyzeType === \"poa\") {\n                    console.log('Fetching POA verification results...');\n                    const payload = yield (0, polling_1.pollStatus)(() => uisdk_1.pwInstance.viewPoaResult(), 5, 2000, \"AnalyzePage POA\");\n                    console.log('POA verification results received:', payload);\n                    // Validate payload has required data\n                    if (!payload.result) {\n                        console.error('Invalid payload: missing result', payload);\n                        throw new Error('Unable to retrieve proof of address verification results. Please try again.');\n                    }\n                    return this.redirectToPoaSummaryPage(payload);\n                }\n                // show submission has been received\n                else {\n                    console.log('All verifications complete, showing completed page');\n                    this.clearScreen();\n                    const completedPage = new CompletedPage_1.default(this.mainScreenId, this.displayMode);\n                    return completedPage.render();\n                }\n            }\n            catch (err) {\n                console.error(err);\n                const maxAttemptErrors = [\n                    \"openApi/max-session-attempt\",\n                    \"openApi/limit-exceed\",\n                    \"openApi/session-id-expired\",\n                    \"attempt-exceeded\",\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                ];\n                // 1. when exceed max attempt, redirect to submission error page\n                if (err.type && maxAttemptErrors.includes(err.type)) {\n                    return this.redirectToSubmissionLimitPage();\n                }\n                // 2. when view ekyc result fail due to doc upload not verified, pop up error dialog\n                else if (err.type && invalidDocErrors.includes(err.type)) {\n                    return this.openErrorDialog();\n                }\n                // 3. redirect to unexpected error page\n                this.clearScreen();\n                this.openErrorPage(err);\n            }\n        });\n    }\n    redirectToCcSummaryPage(payload) {\n        var _a, _b, _c, _d, _e;\n        const { result, is_retriable, is_expired } = payload;\n        this.clearScreen();\n        // images\n        let images = [];\n        if ((_a = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _a === void 0 ? void 0 : _a.front_doc_key) {\n            images.push({\n                innerHTML: ((_b = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _b === void 0 ? void 0 : _b.back_doc_key)\n                    ? (0, translations_1.$t)(\"img_label_first\")\n                    : \"\",\n                alt: \"Image1\",\n                src: (_c = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _c === void 0 ? void 0 : _c.front_doc_key,\n            });\n        }\n        if ((_d = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _d === void 0 ? void 0 : _d.back_doc_key) {\n            images.push({\n                innerHTML: (0, translations_1.$t)(\"img_label_second\"),\n                alt: \"Image2\",\n                src: (_e = payload === null || payload === void 0 ? void 0 : payload.filepaths) === null || _e === void 0 ? void 0 : _e.back_doc_key,\n            });\n        }\n        const summaryCc = new Summary_1.default(this.mainScreenId, this.displayMode);\n        summaryCc.render({\n            type: verification_1.VERIFICATION_TYPE.CREDIT_CARD,\n            result,\n            images,\n            status: {\n                expired: is_expired,\n                retriable: is_retriable,\n            },\n        });\n    }\n    redirectToIdSummaryPage(payload) {\n        const { id_type, result, filepaths } = payload;\n        let images = [];\n        if (filepaths === null || filepaths === void 0 ? void 0 : filepaths.front_doc_key) {\n            images.push({\n                innerHTML: (0, translations_1.$t)(\"img_label_front\"),\n                alt: \"Front Image\",\n                src: filepaths.front_doc_key,\n            });\n        }\n        if (filepaths === null || filepaths === void 0 ? void 0 : filepaths.back_doc_key) {\n            images.push({\n                innerHTML: (0, translations_1.$t)(\"img_label_back\"),\n                alt: \"Back Image\",\n                src: filepaths.back_doc_key,\n            });\n        }\n        this.clearScreen();\n        const summaryId = new Summary_1.default(this.mainScreenId, this.displayMode);\n        summaryId.render({\n            type: verification_1.VERIFICATION_TYPE.IDENTITY_DOC,\n            id_type,\n            result,\n            images,\n        });\n    }\n    redirectToPoaSummaryPage(payload) {\n        const { result, filepaths } = payload;\n        let images = [];\n        if (filepaths && filepaths.length) {\n            images = filepaths.map((filepath) => {\n                return { src: filepath, alt: \"Image\" };\n            });\n        }\n        this.clearScreen();\n        const summaryPoa = new Summary_1.default(this.mainScreenId, this.displayMode);\n        summaryPoa.render({\n            type: verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS,\n            result,\n            images,\n        });\n    }\n    redirectToSubmissionLimitPage() {\n        this.clearScreen();\n        // redirect to submission error page\n        const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n        submissionLimit.render();\n    }\n    openErrorDialog(isRetriable) {\n        const errorDialog = new baseDialog_1.default();\n        const cb = () => {\n            // redirect submision limit page\n            if (!isRetriable)\n                return this.redirectToSubmissionLimitPage();\n            // redirect to first screen\n            this.clearScreen();\n            const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode);\n            firstPage.render();\n        };\n        errorDialog.render(this.mainScreenId, (0, translations_1.$t)(\"error_analyze\"), (0, translations_1.$t)(\"btn_retake\"), cb);\n    }\n}\nexports[\"default\"] = AnalyzePage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/AnalyzePage.ts?");
 
 /***/ }),
 
@@ -3880,7 +3891,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst stepper_1 = __webpack_require__(/*! ../helper/stepper */ \"./src/helper/stepper.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst stepper_2 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst VerifyCc_1 = __importDefault(__webpack_require__(/*! ./VerifyCc */ \"./src/pageClass/VerifyCc.ts\"));\nconst VerifyId_1 = __importDefault(__webpack_require__(/*! ./VerifyId */ \"./src/pageClass/VerifyId.ts\"));\nconst VerifyPoa_1 = __importDefault(__webpack_require__(/*! ./VerifyPoa */ \"./src/pageClass/VerifyPoa.ts\"));\nclass StartPage extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.verificationTypeMap = {\n            [verification_1.VERIFICATION_TYPE.IDENTITY_DOC]: {\n                title: (0, translations_1.$t)(\"national_identity_document_title\"),\n                description: (0, translations_1.$t)(\"national_identity_document_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/id-card.webp */ \"./src/assets/img/firstPageVerificationIcon/id-card.webp\"),\n            },\n            [verification_1.VERIFICATION_TYPE.SELFIE]: {\n                title: (0, translations_1.$t)(\"selfie_title\"),\n                description: (0, translations_1.$t)(\"selfie_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/selfie.webp */ \"./src/assets/img/firstPageVerificationIcon/selfie.webp\"),\n            },\n            [verification_1.VERIFICATION_TYPE.CREDIT_CARD]: {\n                title: (0, translations_1.$t)(\"cc_title\"),\n                description: (0, translations_1.$t)(\"cc_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/credit-card.webp */ \"./src/assets/img/firstPageVerificationIcon/credit-card.webp\"),\n            },\n            [verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS]: {\n                title: (0, translations_1.$t)(\"poa_title\"),\n                description: (0, translations_1.$t)(\"poa_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/poa.webp */ \"./src/assets/img/firstPageVerificationIcon/poa.webp\"),\n            },\n        };\n    }\n    render(isReset = true) {\n        if (isReset)\n            (0, stepper_1.resetMainStep)();\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        const verificationType = uisdk_1.pwInstance.verificationTypes[stepper_1.mainStep];\n        (0, stepper_1.incrementStep)();\n        const { title, description, icon: vIcon, } = this.verificationTypeMap[verificationType];\n        const firstPageDiv = document.createElement(\"div\");\n        firstPageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const contentDiv = document.createElement(\"div\");\n        firstPageDiv.appendChild(contentDiv);\n        // navigation\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n        // - stepper\n        const stepperNum = (0, stepper_1.getStepByType)(verificationType);\n        if (stepperNum > 1) {\n            const startingNum = verificationType === verification_1.VERIFICATION_TYPE.SELFIE ? 3 : 1;\n            const stepper = new stepper_2.default();\n            const stepperElement = stepper.render(startingNum, stepperNum);\n            navigationDiv.classList.add(\"pw-pt-3\");\n            navigationDiv.appendChild(stepperElement);\n        }\n        // - close btn\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.appendChild(closeIcon);\n        closeButton.addEventListener(\"click\", () => this.openLeavePageDialog());\n        navigationDiv.appendChild(closeButton);\n        contentDiv.appendChild(navigationDiv);\n        // body content\n        // - image\n        const iconContainerDiv = document.createElement(\"div\");\n        iconContainerDiv.classList.add(\"pw-flex\", \"pw-justify-center\", \"pw-mb-9\");\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.style.boxShadow = \"0px -10px 15px 0px #0000001A\";\n        iconDiv.style.borderRadius = \"20px 20px 0px 0px\";\n        iconDiv.classList.add(\"pw-text-center\", \"pw-px-9\", \"pw-pt-9\", \"pw-pb-3\");\n        const icon = document.createElement(\"img\");\n        icon.setAttribute(\"src\", vIcon);\n        icon.setAttribute(\"alt\", \"eKYC Verification\");\n        iconDiv.appendChild(icon);\n        iconContainerDiv.appendChild(iconDiv);\n        contentDiv.appendChild(iconContainerDiv);\n        // - header description\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-4\");\n        titleDiv.innerHTML = title;\n        wordingDiv.appendChild(titleDiv);\n        // - description\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.innerHTML = description;\n        wordingDiv.appendChild(descriptionDiv);\n        contentDiv.appendChild(wordingDiv);\n        // footer\n        const footerDiv = document.createElement(\"div\");\n        // - button\n        const startNowButton = (0, components_1.createPrimaryButton)((0, translations_1.$t)(\"btn_start_now\"));\n        startNowButton.classList.add(\"pw-mb-5\");\n        startNowButton.addEventListener(\"click\", () => this.onStartNow(verificationType));\n        footerDiv.appendChild(startNowButton);\n        firstPageDiv.appendChild(footerDiv);\n        // - powered by\n        const footer = new footer_1.default().render();\n        footerDiv.appendChild(footer);\n        return firstPageDiv;\n    }\n    onStartNow(verificationType) {\n        switch (verificationType) {\n            case verification_1.VERIFICATION_TYPE.IDENTITY_DOC: {\n                this.clearScreen();\n                const verifyId = new VerifyId_1.default(this.mainScreenId, this.displayMode);\n                verifyId.render();\n                break;\n            }\n            case verification_1.VERIFICATION_TYPE.SELFIE: {\n                const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n                startSelfie.render();\n                break;\n            }\n            case verification_1.VERIFICATION_TYPE.CREDIT_CARD: {\n                const verifyCc = new VerifyCc_1.default(this.mainScreenId, this.displayMode);\n                verifyCc.render();\n                break;\n            }\n            case verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS: {\n                this.clearScreen();\n                const verifyPoa = new VerifyPoa_1.default(this.mainScreenId, this.displayMode);\n                verifyPoa.render();\n            }\n        }\n    }\n}\nexports[\"default\"] = StartPage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartPage.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst stepper_1 = __webpack_require__(/*! ../helper/stepper */ \"./src/helper/stepper.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst stepper_2 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst VerifyCc_1 = __importDefault(__webpack_require__(/*! ./VerifyCc */ \"./src/pageClass/VerifyCc.ts\"));\nconst VerifyId_1 = __importDefault(__webpack_require__(/*! ./VerifyId */ \"./src/pageClass/VerifyId.ts\"));\nconst VerifyPoa_1 = __importDefault(__webpack_require__(/*! ./VerifyPoa */ \"./src/pageClass/VerifyPoa.ts\"));\nclass StartPage extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.verificationTypeMap = {\n            [verification_1.VERIFICATION_TYPE.IDENTITY_DOC]: {\n                title: (0, translations_1.$t)(\"national_identity_document_title\"),\n                description: (0, translations_1.$t)(\"national_identity_document_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/id-card.webp */ \"./src/assets/img/firstPageVerificationIcon/id-card.webp\"),\n            },\n            [verification_1.VERIFICATION_TYPE.SELFIE]: {\n                title: (0, translations_1.$t)(\"selfie_title\"),\n                description: (0, translations_1.$t)(\"selfie_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/selfie.webp */ \"./src/assets/img/firstPageVerificationIcon/selfie.webp\"),\n            },\n            [verification_1.VERIFICATION_TYPE.CREDIT_CARD]: {\n                title: (0, translations_1.$t)(\"cc_title\"),\n                description: (0, translations_1.$t)(\"cc_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/credit-card.webp */ \"./src/assets/img/firstPageVerificationIcon/credit-card.webp\"),\n            },\n            [verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS]: {\n                title: (0, translations_1.$t)(\"poa_title\"),\n                description: (0, translations_1.$t)(\"poa_desc\"),\n                icon: __webpack_require__(/*! ../assets/img/firstPageVerificationIcon/poa.webp */ \"./src/assets/img/firstPageVerificationIcon/poa.webp\"),\n            },\n        };\n    }\n    render(isReset = true) {\n        if (isReset)\n            (0, stepper_1.resetMainStep)();\n        console.log('StartPage render - isReset:', isReset, 'mainStep:', stepper_1.mainStep);\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        const verificationType = uisdk_1.pwInstance.verificationTypes[stepper_1.mainStep];\n        console.log('StartPage createPage - verificationType:', verificationType, 'mainStep before increment:', stepper_1.mainStep);\n        (0, stepper_1.incrementStep)();\n        console.log('StartPage createPage - mainStep after increment:', stepper_1.mainStep);\n        const { title, description, icon: vIcon, } = this.verificationTypeMap[verificationType];\n        const firstPageDiv = document.createElement(\"div\");\n        firstPageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const contentDiv = document.createElement(\"div\");\n        firstPageDiv.appendChild(contentDiv);\n        // navigation\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n        // - stepper\n        const stepperNum = (0, stepper_1.getStepByType)(verificationType);\n        const currentStep = (0, stepper_1.getCurrentStepNumber)(verificationType); // check here\n        console.log('Stepper - currentStep:', currentStep, 'totalSteps:', stepperNum, 'verificationType:', verificationType, 'mainStep:', stepper_1.mainStep);\n        if (stepperNum > 1) {\n            // Use getCurrentStepNumber() to get the actual UI step number - check here\n            const stepper = new stepper_2.default();\n            const stepperElement = stepper.render(currentStep, stepperNum);\n            navigationDiv.classList.add(\"pw-pt-3\");\n            navigationDiv.appendChild(stepperElement);\n        }\n        // - close btn\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.appendChild(closeIcon);\n        closeButton.addEventListener(\"click\", () => this.openLeavePageDialog());\n        navigationDiv.appendChild(closeButton);\n        contentDiv.appendChild(navigationDiv);\n        // body content\n        // - image\n        const iconContainerDiv = document.createElement(\"div\");\n        iconContainerDiv.classList.add(\"pw-flex\", \"pw-justify-center\", \"pw-mb-9\");\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.style.boxShadow = \"0px -10px 15px 0px #0000001A\";\n        iconDiv.style.borderRadius = \"20px 20px 0px 0px\";\n        iconDiv.classList.add(\"pw-text-center\", \"pw-px-9\", \"pw-pt-9\", \"pw-pb-3\");\n        const icon = document.createElement(\"img\");\n        icon.setAttribute(\"src\", vIcon);\n        icon.setAttribute(\"alt\", \"eKYC Verification\");\n        iconDiv.appendChild(icon);\n        iconContainerDiv.appendChild(iconDiv);\n        contentDiv.appendChild(iconContainerDiv);\n        // - header description\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-4\");\n        titleDiv.innerHTML = title;\n        wordingDiv.appendChild(titleDiv);\n        // - description\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.innerHTML = description;\n        wordingDiv.appendChild(descriptionDiv);\n        contentDiv.appendChild(wordingDiv);\n        // footer\n        const footerDiv = document.createElement(\"div\");\n        // - button\n        const startNowButton = (0, components_1.createPrimaryButton)((0, translations_1.$t)(\"btn_start_now\"));\n        startNowButton.classList.add(\"pw-mb-5\");\n        startNowButton.addEventListener(\"click\", () => this.onStartNow(verificationType));\n        footerDiv.appendChild(startNowButton);\n        firstPageDiv.appendChild(footerDiv);\n        // - powered by\n        const footer = new footer_1.default().render();\n        footerDiv.appendChild(footer);\n        return firstPageDiv;\n    }\n    onStartNow(verificationType) {\n        switch (verificationType) {\n            case verification_1.VERIFICATION_TYPE.IDENTITY_DOC: {\n                this.clearScreen();\n                const verifyId = new VerifyId_1.default(this.mainScreenId, this.displayMode);\n                verifyId.render();\n                break;\n            }\n            case verification_1.VERIFICATION_TYPE.SELFIE: {\n                const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n                startSelfie.render();\n                break;\n            }\n            case verification_1.VERIFICATION_TYPE.CREDIT_CARD: {\n                const verifyCc = new VerifyCc_1.default(this.mainScreenId, this.displayMode);\n                verifyCc.render();\n                break;\n            }\n            case verification_1.VERIFICATION_TYPE.PROOF_OF_ADDRESS: {\n                this.clearScreen();\n                const verifyPoa = new VerifyPoa_1.default(this.mainScreenId, this.displayMode);\n                verifyPoa.render();\n            }\n        }\n    }\n}\nexports[\"default\"] = StartPage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartPage.ts?");
 
 /***/ }),
 
@@ -3891,7 +3902,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (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 face_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/face-camera */ \"./src/plugins/face-camera.ts\"));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nconst AnalyzePage_1 = __importDefault(__webpack_require__(/*! ./AnalyzePage */ \"./src/pageClass/AnalyzePage.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nclass StartSelfie extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n    }\n    render() {\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 faceCamera = new face_camera_1.default(this.cameraId, this.mainScreenId);\n        faceCamera.init();\n        faceCamera.listenToSelfieCapture((e) => __awaiter(this, void 0, void 0, function* () {\n            var _a, _b;\n            try {\n                faceCamera.pauseSmileFace();\n                yield this.uploadSelfie(e.detail);\n                faceCamera.stopVideoStream();\n                // redirect to loading page\n                const analyzePage = new AnalyzePage_1.default(this.mainScreenId, this.displayMode);\n                return analyzePage.render();\n            }\n            catch (err) {\n                // 1. when exceed max attempt, redirect to submission error page\n                if (err.type &&\n                    [\n                        \"openApi/max-selfie-attempt\",\n                        \"openApi/max-session-attempt\",\n                        \"openApi/limit-exceed\",\n                        \"openApi/session-id-expired\",\n                        \"attempt-exceeded\",\n                        \"session-id-expired\",\n                    ].includes(err.type)) {\n                    faceCamera.stopVideoStream();\n                    this.redirectToSubmissionLimitPage();\n                    return;\n                }\n                // 2. when selfie is exposed, redirect to selfie error page\n                else if (err.type && err.type === \"openApi/img-exposed\") {\n                    // redirect to selfie error page\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                    this.openImageBlurDialog(isRetake, faceCamera);\n                    return;\n                }\n                // 3. redirect to unexpected error page\n                else {\n                    faceCamera.stopVideoStream();\n                    this.clearScreen();\n                    this.openErrorPage(err);\n                }\n            }\n        }));\n    }\n    openImageBlurDialog(isRetake, faceCamera) {\n        const errorDialog = new baseDialog_1.default();\n        errorDialog.render(this.mainScreenId, (0, translations_1.$t)(\"error_selfie\"), isRetake ? (0, translations_1.$t)(\"btn_retake\") : (0, translations_1.$t)(\"btn_proceed\"), () => {\n            if (isRetake)\n                faceCamera.resumeSmileFace();\n            else\n                this.redirectToSubmissionLimitPage();\n        });\n    }\n    redirectToSubmissionLimitPage() {\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    uploadSelfie(detail) {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // show loading spinner in full pg\n                (0, components_1.createFullLoading)(this.cameraId);\n                const { image, livenessScore } = detail;\n                yield uisdk_1.pwInstance.uploadSelfie({\n                    selfie_base64: image.croppedImage,\n                    selfie_base64_full: image.fullImage,\n                    liveness_score: livenessScore,\n                });\n            }\n            finally {\n                // hide loading spinner in full pg\n                (0, components_1.hideFullLoading)(this.cameraId);\n            }\n        });\n    }\n}\nexports[\"default\"] = StartSelfie;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartSelfie.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 face_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/face-camera */ \"./src/plugins/face-camera.ts\"));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst translations_1 = __webpack_require__(/*! ../translations */ \"./src/translations/index.ts\");\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nconst AnalyzePage_1 = __importDefault(__webpack_require__(/*! ./AnalyzePage */ \"./src/pageClass/AnalyzePage.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\nclass StartSelfie extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n    }\n    render() {\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 faceCamera = new face_camera_1.default(this.cameraId, this.mainScreenId);\n        faceCamera.init();\n        faceCamera.listenToSelfieCapture((e) => __awaiter(this, void 0, void 0, function* () {\n            var _a, _b;\n            try {\n                faceCamera.pauseSmileFace();\n                console.log('Selfie captured, uploading...');\n                yield this.uploadSelfie(e.detail);\n                console.log('Selfie uploaded successfully');\n                faceCamera.stopVideoStream();\n                // Determine next step based on verification types\n                // Sequence is always ID → Selfie (if both exist)\n                const verificationTypes = uisdk_1.pwInstance.verificationTypes;\n                const firstVerification = verificationTypes[0];\n                console.log('Selfie complete - firstVerification:', firstVerification, 'types:', verificationTypes);\n                // Case 1: ID + Selfie combo → go to ID analyze page\n                if (firstVerification === 'national_identity_document') {\n                    console.log('ID + Selfie combo completed, redirecting to ID AnalyzePage');\n                    const analyzePage = new AnalyzePage_1.default(this.mainScreenId, this.displayMode);\n                    return analyzePage.render(\"id\");\n                }\n                // Case 2: Selfie only → show completion\n                console.log('Selfie only completed, showing completion');\n                const analyzePage = new AnalyzePage_1.default(this.mainScreenId, this.displayMode);\n                return analyzePage.render();\n            }\n            catch (err) {\n                // 1. when exceed max attempt, redirect to submission error page\n                if (err.type &&\n                    [\n                        \"openApi/max-selfie-attempt\",\n                        \"openApi/max-session-attempt\",\n                        \"openApi/limit-exceed\",\n                        \"openApi/session-id-expired\",\n                        \"attempt-exceeded\",\n                        \"session-id-expired\",\n                    ].includes(err.type)) {\n                    faceCamera.stopVideoStream();\n                    this.redirectToSubmissionLimitPage();\n                    return;\n                }\n                // 2. when selfie is exposed, redirect to selfie error page\n                else if (err.type && err.type === \"openApi/img-exposed\") {\n                    // redirect to selfie error page\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                    this.openImageBlurDialog(isRetake, faceCamera);\n                    return;\n                }\n                // 3. redirect to unexpected error page\n                else {\n                    faceCamera.stopVideoStream();\n                    this.clearScreen();\n                    this.openErrorPage(err);\n                }\n            }\n        }));\n    }\n    openImageBlurDialog(isRetake, faceCamera) {\n        const errorDialog = new baseDialog_1.default();\n        errorDialog.render(this.mainScreenId, (0, translations_1.$t)(\"error_selfie\"), isRetake ? (0, translations_1.$t)(\"btn_retake\") : (0, translations_1.$t)(\"btn_proceed\"), () => {\n            if (isRetake)\n                faceCamera.resumeSmileFace();\n            else\n                this.redirectToSubmissionLimitPage();\n        });\n    }\n    redirectToSubmissionLimitPage() {\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    uploadSelfie(detail) {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // show loading spinner in full pg\n                (0, components_1.createFullLoading)(this.cameraId);\n                const { image, livenessScore } = detail;\n                yield uisdk_1.pwInstance.uploadSelfie({\n                    selfie_base64: image.croppedImage,\n                    selfie_base64_full: image.fullImage,\n                    liveness_score: livenessScore,\n                });\n            }\n            finally {\n                // hide loading spinner in full pg\n                (0, components_1.hideFullLoading)(this.cameraId);\n            }\n        });\n    }\n}\nexports[\"default\"] = StartSelfie;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartSelfie.ts?");
 
 /***/ }),
 
@@ -3913,7 +3924,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\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\n// helper\nconst stepper_1 = __webpack_require__(/*! ../helper/stepper */ \"./src/helper/stepper.ts\");\nconst summary_1 = __webpack_require__(/*! ../helper/summary */ \"./src/helper/summary.ts\");\nconst form_1 = __webpack_require__(/*! ../helper/form */ \"./src/helper/form.ts\");\n// constant\nconst form_2 = __webpack_require__(/*! ../constant/form */ \"./src/constant/form.ts\");\nconst validation_1 = __webpack_require__(/*! ../constant/validation */ \"./src/constant/validation.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\n// pages\nconst VerifyCc_1 = __importDefault(__webpack_require__(/*! ../pageClass/VerifyCc */ \"./src/pageClass/VerifyCc.ts\"));\nclass Summary extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.formType = \"\";\n        this.originalForm = {};\n        this.formElements = {};\n    }\n    render(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            // set form type and original form (use for validation)\n            this.formType = payload.type;\n            // create page el\n            const element = yield this.createPage(payload);\n            this.renderContent(element);\n            // open expired dialog when cc expired\n            if (payload.status && payload.status.expired)\n                this.openExpiredDialog(payload.status.retriable);\n        });\n    }\n    createPage(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const pageDiv = document.createElement(\"div\");\n            pageDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n            const pageContentDiv = document.createElement(\"div\");\n            pageContentDiv.classList.add(\"pw-overflow-auto\");\n            pageDiv.appendChild(pageContentDiv);\n            // header\n            const headerPayload = form_2.formHeaderMapping[payload.type];\n            const headerDiv = (0, summary_1.createHeader)(headerPayload.currentStep, (0, stepper_1.getStepByType)(payload.type), this.openLeavePageDialog.bind(this));\n            pageContentDiv.appendChild(headerDiv);\n            // body - header\n            const headingDiv = (0, summary_1.createHeading)(headerPayload.title, headerPayload.subTitle);\n            pageContentDiv.appendChild(headingDiv);\n            // body - content\n            const body = this.createBody(payload);\n            if (body)\n                pageContentDiv.appendChild(body);\n            // footer\n            const footerDiv = (0, summary_1.createFooter)(this.onClickSubmit.bind(this));\n            pageDiv.appendChild(footerDiv);\n            return pageDiv;\n        });\n    }\n    updateFormApi() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // convert form elements to payload\n            const reqPayload = (0, form_1.constructReqPayload)(this.originalForm, this.formElements);\n            const { IDENTITY_DOC, CREDIT_CARD, PROOF_OF_ADDRESS } = verification_1.VERIFICATION_TYPE;\n            // update form\n            if (this.formType === IDENTITY_DOC) {\n                yield uisdk_1.pwInstance.updateIdForm(reqPayload);\n            }\n            else if (this.formType === CREDIT_CARD) {\n                yield uisdk_1.pwInstance.updateCcForm(reqPayload);\n            }\n            else if (this.formType === PROOF_OF_ADDRESS) {\n                yield uisdk_1.pwInstance.updatePoaForm(reqPayload);\n            }\n        });\n    }\n    onClickSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                let hasError = false;\n                for (const key in this.formElements) {\n                    const { type, rules, label } = this.originalForm[key];\n                    const formEl = this.formElements[key];\n                    if (type === validation_1.TYPE_FIELD.CC_DOE) {\n                        formEl.padDoe();\n                    }\n                    let value;\n                    if (type === validation_1.TYPE_FIELD.CC_DOE && formEl.val) {\n                        const el = formEl;\n                        value = [el.val.month || \"\", el.val.year || \"\"];\n                    }\n                    else if (type === validation_1.TYPE_FIELD.CC_NO && formEl.val) {\n                        const el = formEl;\n                        value = [el.val.first6Value || \"\", el.val.last4Value || \"\"];\n                    }\n                    else {\n                        value = formEl.val;\n                    }\n                    const validate = (0, form_1.validateField)(label, value, rules);\n                    if (!(validate === null || validate === void 0 ? void 0 : validate.isValid)) {\n                        hasError = true;\n                        formEl.addError(validate === null || validate === void 0 ? void 0 : validate.message);\n                    }\n                }\n                // will show error in respective field\n                if (hasError)\n                    return;\n                // construct payload to sdk\n                yield this.updateFormApi();\n                // redirect to completed page / start page\n                this.clearScreen();\n                (0, summary_1.redirectToCompletedPage)(stepper_1.mainStep, uisdk_1.pwInstance.verificationTypes, this.mainScreenId, this.displayMode);\n            }\n            catch (err) {\n                // redirect to interval server error page\n                if (![\"PwError\", \"PwReqError\"].includes(err.name)) {\n                    console.error(\"Unexpected error:\", err);\n                    this.openErrorPage(err);\n                    return;\n                }\n                const payload = err.response.data.messages;\n                let fields = [];\n                if (Array.isArray(payload) && payload.length > 0) {\n                    const params = payload[0].params;\n                    if (params) {\n                        const invalidFields = params.invalidated_fields;\n                        const keys = invalidFields ? Object.keys(invalidFields) : [];\n                        const uniqueFields = new Set();\n                        keys.forEach((key) => {\n                            const fieldLabel = (0, translations_1.$t)(`label_${key}`) || key;\n                            uniqueFields.add(fieldLabel);\n                        });\n                        fields = Array.from(uniqueFields);\n                    }\n                }\n                (0, summary_1.openFormErrorDialog)(this.mainScreenId, fields);\n            }\n        });\n    }\n    pushFormElement(formElement) {\n        this.formElements = Object.assign(this.formElements, formElement);\n    }\n    createForm(payload) {\n        if (!payload)\n            return;\n        const formEl = document.createElement(\"form\");\n        formEl.classList.add(\"pw-m-5\", \"pw-mb-10\");\n        this.originalForm = (0, form_1.constructForm)(payload);\n        for (const key in this.originalForm) {\n            const field = (0, form_1.createField)(key, this.originalForm[key], formEl);\n            // country field\n            if (field && this.originalForm[key].subtype === validation_1.SUBTYPE.COUNTRY) {\n                const dropdownField = field;\n                // initial country\n                const countries = uisdk_1.pwInstance.countries.map((country) => {\n                    return { value: country.iso_code, label: country.name };\n                }) || [];\n                dropdownField.setOption(countries);\n                dropdownField.val = this.originalForm[key].value || \"\";\n                // reset validation\n                this.originalForm[key].rules.selectable_values = countries;\n            }\n            // state field\n            else if (field && this.originalForm[key].subtype === validation_1.SUBTYPE.STATE) {\n                // create dropdown field\n                const dropdownField = field;\n                // initial state list when there is country value\n                const countryPayload = Object.entries(payload).find(([key, value]) => value.subtype === validation_1.SUBTYPE.COUNTRY);\n                const country = countryPayload\n                    ? countryPayload[1].value\n                    : undefined;\n                if (country) {\n                    const stateValue = this.originalForm[key].value || \"\";\n                    (0, form_1.updateRegionState)(dropdownField, country, stateValue).then((states) => {\n                        // reset validation\n                        this.originalForm[key].rules.selectable_values = states;\n                    });\n                }\n                else {\n                    dropdownField.setOption([]);\n                    dropdownField.val = \"\";\n                }\n            }\n            if (field)\n                this.pushFormElement({ [key]: field });\n        }\n        // check if got both country and state element in the form\n        // if yes: reset state dropdown when country value is changed\n        const countryPayload = Object.entries(payload).find(([key, value]) => value.subtype === validation_1.SUBTYPE.COUNTRY);\n        const statePayload = Object.entries(payload).find(([key, value]) => value.subtype === validation_1.SUBTYPE.STATE);\n        const countryKey = countryPayload ? countryPayload[0] : undefined;\n        const stateKey = statePayload ? statePayload[0] : undefined;\n        if (stateKey &&\n            this.formElements[stateKey] &&\n            countryKey &&\n            this.formElements[countryKey]) {\n            const countryDropdown = this.formElements[countryKey];\n            const stateDropdown = this.formElements[stateKey];\n            countryDropdown.onUpdateValue = (countryVal) => __awaiter(this, void 0, void 0, function* () {\n                (0, form_1.updateRegionState)(stateDropdown, countryVal, \"\").then((states) => {\n                    // reset validation\n                    this.originalForm[stateKey].rules.selectable_values = states;\n                });\n            });\n        }\n        return formEl;\n    }\n    createBody(payload) {\n        const bodyDiv = document.createElement(\"div\");\n        // form preview\n        const form = this.createForm(payload === null || payload === void 0 ? void 0 : payload.result);\n        if (form)\n            bodyDiv.appendChild(form);\n        // images preview\n        if ((payload === null || payload === void 0 ? void 0 : payload.images) && (payload === null || payload === void 0 ? void 0 : payload.images.length)) {\n            const imageContainerDiv = (0, summary_1.createImageContainer)(payload === null || payload === void 0 ? void 0 : payload.images, \"\", this.openImageFullScreen.bind(this));\n            if (imageContainerDiv)\n                bodyDiv.appendChild(imageContainerDiv);\n        }\n        return bodyDiv;\n    }\n    openExpiredDialog(isRetriable) {\n        const errorDialog = new baseDialog_1.default();\n        const labelText = isRetriable\n            ? (0, translations_1.$t)(\"cc_expired_with_retry\")\n            : (0, translations_1.$t)(\"cc_expired_without_retry\");\n        errorDialog.render(this.mainScreenId, labelText, isRetriable ? (0, translations_1.$t)(\"btn_retake\") : (0, translations_1.$t)(\"btn_proceed\"), () => {\n            if (isRetriable) {\n                this.clearScreen();\n                const verifyCc = new VerifyCc_1.default(this.mainScreenId, this.displayMode);\n                verifyCc.render();\n            }\n        });\n    }\n}\nexports[\"default\"] = Summary;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/Summary.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\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\n// helper\nconst stepper_1 = __webpack_require__(/*! ../helper/stepper */ \"./src/helper/stepper.ts\");\nconst summary_1 = __webpack_require__(/*! ../helper/summary */ \"./src/helper/summary.ts\");\nconst form_1 = __webpack_require__(/*! ../helper/form */ \"./src/helper/form.ts\");\n// constant\nconst form_2 = __webpack_require__(/*! ../constant/form */ \"./src/constant/form.ts\");\nconst validation_1 = __webpack_require__(/*! ../constant/validation */ \"./src/constant/validation.ts\");\nconst verification_1 = __webpack_require__(/*! ../constant/verification */ \"./src/constant/verification.ts\");\nconst baseDialog_1 = __importDefault(__webpack_require__(/*! ../components/baseDialog */ \"./src/components/baseDialog.ts\"));\n// pages\nconst VerifyCc_1 = __importDefault(__webpack_require__(/*! ../pageClass/VerifyCc */ \"./src/pageClass/VerifyCc.ts\"));\nclass Summary extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.formType = \"\";\n        this.originalForm = {};\n        this.formElements = {};\n    }\n    render(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            console.log('Summary render - type:', payload.type, 'payload:', payload);\n            // set form type and original form (use for validation)\n            this.formType = payload.type;\n            // create page el\n            const element = yield this.createPage(payload);\n            this.renderContent(element);\n            // open expired dialog when cc expired\n            if (payload.status && payload.status.expired)\n                this.openExpiredDialog(payload.status.retriable);\n        });\n    }\n    createPage(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const pageDiv = document.createElement(\"div\");\n            pageDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n            const pageContentDiv = document.createElement(\"div\");\n            pageContentDiv.classList.add(\"pw-overflow-auto\");\n            pageDiv.appendChild(pageContentDiv);\n            // header\n            const { currentStep, title, subTitle } = (0, form_2.getFormHeader)(payload.type);\n            const totalSteps = (0, stepper_1.getStepByType)(payload.type);\n            const headerDiv = (0, summary_1.createHeader)(currentStep, // Use dynamic currentStep (should equal totalSteps to show all completed) - check here\n            totalSteps, // Use dynamic total steps for maxStep\n            this.openLeavePageDialog.bind(this));\n            pageContentDiv.appendChild(headerDiv);\n            // body - header\n            const headingDiv = (0, summary_1.createHeading)(title, subTitle);\n            pageContentDiv.appendChild(headingDiv);\n            // body - content\n            const body = this.createBody(payload);\n            if (body)\n                pageContentDiv.appendChild(body);\n            // footer\n            const footerDiv = (0, summary_1.createFooter)(this.onClickSubmit.bind(this));\n            pageDiv.appendChild(footerDiv);\n            return pageDiv;\n        });\n    }\n    updateFormApi() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // convert form elements to payload\n            const reqPayload = (0, form_1.constructReqPayload)(this.originalForm, this.formElements);\n            const { IDENTITY_DOC, CREDIT_CARD, PROOF_OF_ADDRESS } = verification_1.VERIFICATION_TYPE;\n            // update form\n            if (this.formType === IDENTITY_DOC) {\n                yield uisdk_1.pwInstance.updateIdForm(reqPayload);\n            }\n            else if (this.formType === CREDIT_CARD) {\n                yield uisdk_1.pwInstance.updateCcForm(reqPayload);\n            }\n            else if (this.formType === PROOF_OF_ADDRESS) {\n                yield uisdk_1.pwInstance.updatePoaForm(reqPayload);\n            }\n        });\n    }\n    onClickSubmit() {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                let hasError = false;\n                for (const key in this.formElements) {\n                    const { type, rules, label } = this.originalForm[key];\n                    const formEl = this.formElements[key];\n                    if (type === validation_1.TYPE_FIELD.CC_DOE) {\n                        formEl.padDoe();\n                    }\n                    let value;\n                    if (type === validation_1.TYPE_FIELD.CC_DOE && formEl.val) {\n                        const el = formEl;\n                        value = [el.val.month || \"\", el.val.year || \"\"];\n                    }\n                    else if (type === validation_1.TYPE_FIELD.CC_NO && formEl.val) {\n                        const el = formEl;\n                        value = [el.val.first6Value || \"\", el.val.last4Value || \"\"];\n                    }\n                    else {\n                        value = formEl.val;\n                    }\n                    const validate = (0, form_1.validateField)(label, value, rules);\n                    if (!(validate === null || validate === void 0 ? void 0 : validate.isValid)) {\n                        hasError = true;\n                        formEl.addError(validate === null || validate === void 0 ? void 0 : validate.message);\n                    }\n                }\n                // will show error in respective field\n                if (hasError) {\n                    console.log('Form validation failed');\n                    return;\n                }\n                // construct payload to sdk\n                console.log('Form validated, updating form...');\n                yield this.updateFormApi();\n                console.log('Form updated successfully');\n                // redirect to completed page / start page\n                this.clearScreen();\n                console.log('Redirecting after form submission - mainStep:', stepper_1.mainStep, 'verificationTypes:', uisdk_1.pwInstance.verificationTypes);\n                (0, summary_1.redirectToCompletedPage)(stepper_1.mainStep, uisdk_1.pwInstance.verificationTypes, this.mainScreenId, this.displayMode);\n            }\n            catch (err) {\n                // redirect to interval server error page\n                if (![\"PwError\", \"PwReqError\"].includes(err.name)) {\n                    console.error(\"Unexpected error:\", err);\n                    this.openErrorPage(err);\n                    return;\n                }\n                const payload = err.response.data.messages;\n                let fields = [];\n                if (Array.isArray(payload) && payload.length > 0) {\n                    const params = payload[0].params;\n                    if (params) {\n                        const invalidFields = params.invalidated_fields;\n                        const keys = invalidFields ? Object.keys(invalidFields) : [];\n                        const uniqueFields = new Set();\n                        keys.forEach((key) => {\n                            const fieldLabel = (0, translations_1.$t)(`label_${key}`) || key;\n                            uniqueFields.add(fieldLabel);\n                        });\n                        fields = Array.from(uniqueFields);\n                    }\n                }\n                (0, summary_1.openFormErrorDialog)(this.mainScreenId, fields);\n            }\n        });\n    }\n    pushFormElement(formElement) {\n        this.formElements = Object.assign(this.formElements, formElement);\n    }\n    createForm(payload) {\n        if (!payload)\n            return;\n        const formEl = document.createElement(\"form\");\n        formEl.classList.add(\"pw-m-5\", \"pw-mb-10\");\n        this.originalForm = (0, form_1.constructForm)(payload);\n        for (const key in this.originalForm) {\n            const field = (0, form_1.createField)(key, this.originalForm[key], formEl);\n            // country field\n            if (field && this.originalForm[key].subtype === validation_1.SUBTYPE.COUNTRY) {\n                const dropdownField = field;\n                // initial country\n                const countries = uisdk_1.pwInstance.countries.map((country) => {\n                    return { value: country.iso_code, label: country.name };\n                }) || [];\n                dropdownField.setOption(countries);\n                dropdownField.val = this.originalForm[key].value || \"\";\n                // reset validation\n                this.originalForm[key].rules.selectable_values = countries;\n            }\n            // state field\n            else if (field && this.originalForm[key].subtype === validation_1.SUBTYPE.STATE) {\n                // create dropdown field\n                const dropdownField = field;\n                // initial state list when there is country value\n                const countryPayload = Object.entries(payload).find(([key, value]) => value.subtype === validation_1.SUBTYPE.COUNTRY);\n                const country = countryPayload\n                    ? countryPayload[1].value\n                    : undefined;\n                if (country) {\n                    const stateValue = this.originalForm[key].value || \"\";\n                    (0, form_1.updateRegionState)(dropdownField, country, stateValue).then((states) => {\n                        // reset validation\n                        this.originalForm[key].rules.selectable_values = states;\n                    });\n                }\n                else {\n                    dropdownField.setOption([]);\n                    dropdownField.val = \"\";\n                }\n            }\n            if (field)\n                this.pushFormElement({ [key]: field });\n        }\n        // check if got both country and state element in the form\n        // if yes: reset state dropdown when country value is changed\n        const countryPayload = Object.entries(payload).find(([key, value]) => value.subtype === validation_1.SUBTYPE.COUNTRY);\n        const statePayload = Object.entries(payload).find(([key, value]) => value.subtype === validation_1.SUBTYPE.STATE);\n        const countryKey = countryPayload ? countryPayload[0] : undefined;\n        const stateKey = statePayload ? statePayload[0] : undefined;\n        if (stateKey &&\n            this.formElements[stateKey] &&\n            countryKey &&\n            this.formElements[countryKey]) {\n            const countryDropdown = this.formElements[countryKey];\n            const stateDropdown = this.formElements[stateKey];\n            countryDropdown.onUpdateValue = (countryVal) => __awaiter(this, void 0, void 0, function* () {\n                (0, form_1.updateRegionState)(stateDropdown, countryVal, \"\").then((states) => {\n                    // reset validation\n                    this.originalForm[stateKey].rules.selectable_values = states;\n                });\n            });\n        }\n        return formEl;\n    }\n    createBody(payload) {\n        const bodyDiv = document.createElement(\"div\");\n        // form preview\n        const form = this.createForm(payload === null || payload === void 0 ? void 0 : payload.result);\n        if (form)\n            bodyDiv.appendChild(form);\n        // images preview\n        if ((payload === null || payload === void 0 ? void 0 : payload.images) && (payload === null || payload === void 0 ? void 0 : payload.images.length)) {\n            const imageContainerDiv = (0, summary_1.createImageContainer)(payload === null || payload === void 0 ? void 0 : payload.images, \"\", this.openImageFullScreen.bind(this));\n            if (imageContainerDiv)\n                bodyDiv.appendChild(imageContainerDiv);\n        }\n        return bodyDiv;\n    }\n    openExpiredDialog(isRetriable) {\n        const errorDialog = new baseDialog_1.default();\n        const labelText = isRetriable\n            ? (0, translations_1.$t)(\"cc_expired_with_retry\")\n            : (0, translations_1.$t)(\"cc_expired_without_retry\");\n        errorDialog.render(this.mainScreenId, labelText, isRetriable ? (0, translations_1.$t)(\"btn_retake\") : (0, translations_1.$t)(\"btn_proceed\"), () => {\n            if (isRetriable) {\n                this.clearScreen();\n                const verifyCc = new VerifyCc_1.default(this.mainScreenId, this.displayMode);\n                verifyCc.render();\n            }\n        });\n    }\n}\nexports[\"default\"] = Summary;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/Summary.ts?");
 
 /***/ }),
 
@@ -3935,7 +3946,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        (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?");
+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\"));\nconst AnalyzePage_1 = __importDefault(__webpack_require__(/*! ./AnalyzePage */ \"./src/pageClass/AnalyzePage.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        // Stepper shows current step based on mainStep (already incremented from StartPage)\n        const stepperElement = stepper.render(stepper_2.mainStep, (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                console.log('Uploading ID - docType:', docType, 'hasBack:', !!backImg, 'country:', this.defaultCountry);\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                console.log('ID uploaded successfully');\n                idCam.stopVideoStream();\n                // Check if selfie is in the verification types (ID + Selfie combo)\n                const verificationTypes = uisdk_1.pwInstance.verificationTypes;\n                const hasSelfie = verificationTypes.includes('selfie');\n                console.log('ID upload complete - hasSelfie:', hasSelfie, 'types:', verificationTypes);\n                if (hasSelfie) {\n                    // If selfie is in the list, continue to selfie\n                    console.log('Selfie required, continuing to selfie verification');\n                    const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode);\n                    this.clearScreen();\n                    firstPage.render(false);\n                }\n                else {\n                    // If no selfie, go directly to analyze page\n                    console.log('No selfie required, redirecting to AnalyzePage');\n                    this.clearScreen();\n                    const analyzePage = new AnalyzePage_1.default(this.mainScreenId, this.displayMode);\n                    return analyzePage.render(\"id\");\n                }\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 +3968,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 = 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?");
+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        // Mirror video for desktop/laptop cameras for better UX\n        // Mobile devices use back camera which should not be mirrored\n        if (!this.isMobile())\n            videoElement.style.transform = \"scaleX(-1)\";\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?");
 
 /***/ }),
 
@@ -4034,7 +4045,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (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 }));\nexports.pwInstance = void 0;\nconst pipwave_ekyc_sdk_1 = __webpack_require__(/*! pipwave-ekyc-sdk */ \"./node_modules/pipwave-ekyc-sdk/dist/pw-bundle.js\");\nconst face_detection_1 = __importDefault(__webpack_require__(/*! ./plugins/face-detection */ \"./src/plugins/face-detection.ts\"));\n// pages\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst console_1 = __webpack_require__(/*! ./helper/console */ \"./src/helper/console.ts\");\nconst translations_1 = __webpack_require__(/*! ./translations */ \"./src/translations/index.ts\");\nexports.pwInstance = new pipwave_ekyc_sdk_1.PWSDK();\nclass PWUISDK {\n    init({ target, accessToken, displayMode = \"in-page\" }) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const mainContainer = document.getElementById(target);\n            if (!mainContainer) {\n                throw new Error(\"Invalid target\");\n            }\n            const sdkContainer = document.createElement(\"div\");\n            sdkContainer.classList.add(\"pw-box-border\", \"pwsdk-ui\", \"pw-m-0\", \"pw-p-0\", \"pw-max-h-[51rem]\");\n            mainContainer.appendChild(sdkContainer);\n            const mainScreen = this.createMainScreen(target);\n            sdkContainer.appendChild(mainScreen);\n            // show loading page\n            const loadingPage = new LoadingPage_1.default(this.mainScreenId, displayMode);\n            loadingPage.render((0, translations_1.$t)(\"loading\"));\n            try {\n                const result = yield exports.pwInstance.init(accessToken);\n                const { verification_types } = result;\n                const selfieIndex = verification_types.indexOf(\"selfie\");\n                const identityDocIndex = verification_types.indexOf(\"national_identity_document\");\n                // temp in this stage: selfie must always come together with id\n                if (selfieIndex !== -1 || identityDocIndex !== -1) {\n                    const isSelfieAfterId = identityDocIndex + 1 === selfieIndex;\n                    if (!isSelfieAfterId)\n                        return loadingPage.openErrorPage();\n                }\n                // load face model in bg\n                if (verification_types.includes(\"selfie\")) {\n                    // train face model, no to wait for it, run in bg\n                    const faceDetectionSdk = new face_detection_1.default();\n                    faceDetectionSdk.loadFaceModel().catch((error) => {\n                        (0, console_1.warn)(\"Fail to load face model\", error);\n                    });\n                }\n                loadingPage.clearScreen();\n                const firstPage = new StartPage_1.default(this.mainScreenId, displayMode);\n                firstPage.render();\n            }\n            catch (error) {\n                loadingPage.openErrorPage(error);\n            }\n        });\n    }\n    createMainScreen(value) {\n        const mainScreen = document.createElement(\"div\");\n        mainScreen.classList.add(\"pw-relative\", \"pw-font-pw\", \"pw-mx-auto\", \"pw-max-w-sm\", \"pw-rounded-lg\", \"pw-min:pw-border-solid\", \"pw-min:pw-border-grey-4\", \"pw-py-4\", \"pw-px-5\", \"pw-overflow-x-hidden\", \"pw-h-[calc(100vh-3rem)]\", \"pw-max-h-[51rem]\");\n        const id = `mainScreen_${value}`;\n        mainScreen.id = id;\n        this.mainScreenId = id;\n        return mainScreen;\n    }\n    onClose(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"close:ekyc\", () => {\n            cb();\n        });\n    }\n    onSuccess(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"success:ekyc\", () => {\n            cb();\n        });\n    }\n    onFailed(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"fail:ekyc\", (event) => {\n            cb(event.detail);\n        });\n    }\n}\nexports[\"default\"] = PWUISDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/uisdk.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 }));\nexports.pwInstance = void 0;\nconst pipwave_ekyc_sdk_1 = __webpack_require__(/*! pipwave-ekyc-sdk */ \"./node_modules/pipwave-ekyc-sdk/dist/pw-bundle.js\");\nconst face_detection_1 = __importDefault(__webpack_require__(/*! ./plugins/face-detection */ \"./src/plugins/face-detection.ts\"));\n// pages\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst console_1 = __webpack_require__(/*! ./helper/console */ \"./src/helper/console.ts\");\nconst translations_1 = __webpack_require__(/*! ./translations */ \"./src/translations/index.ts\");\nexports.pwInstance = new pipwave_ekyc_sdk_1.PWSDK();\nclass PWUISDK {\n    init({ target, accessToken, displayMode = 'in-page' }) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const mainContainer = document.getElementById(target);\n            if (!mainContainer) {\n                throw new Error('Invalid target');\n            }\n            const sdkContainer = document.createElement('div');\n            sdkContainer.classList.add('pw-box-border', 'pwsdk-ui', 'pw-m-0', 'pw-p-0', 'pw-max-h-[51rem]');\n            mainContainer.appendChild(sdkContainer);\n            const mainScreen = this.createMainScreen(target);\n            sdkContainer.appendChild(mainScreen);\n            // show loading page\n            const loadingPage = new LoadingPage_1.default(this.mainScreenId, displayMode);\n            loadingPage.render((0, translations_1.$t)('loading'));\n            try {\n                const result = yield exports.pwInstance.init(accessToken);\n                const { verification_types: originalTypes } = result;\n                console.log('eKYC initialized - verification_types:', originalTypes);\n                // Step 1: Remove duplicates\n                let processedTypes = Array.from(new Set(originalTypes));\n                if (processedTypes.length !== originalTypes.length)\n                    console.log(originalTypes + ' -> ' + processedTypes);\n                // Validate verification types - POA and CC must be in separate sessions from ID/Selfie\n                const hasId = processedTypes.includes('national_identity_document');\n                const hasSelfie = processedTypes.includes('selfie');\n                const hasPoa = processedTypes.includes('poa');\n                const hasCc = processedTypes.includes('cc');\n                // Check if POA or CC is mixed with ID or Selfie\n                if ((hasPoa || hasCc) && (hasId || hasSelfie))\n                    throw new Error('Invalid verification types configuration: POA and CC must be in separate sessions from ID and Selfie');\n                // Step 2: Ensure ID + Selfie always starts with ID\n                const selfieIndex = processedTypes.indexOf('selfie');\n                const idIndex = processedTypes.indexOf('national_identity_document');\n                if (hasId && hasSelfie && selfieIndex < idIndex) {\n                    // Selfie comes before ID, swap them\n                    // Filter out ID and Selfie, then add them in correct order at the start\n                    const reorderedTypes = processedTypes.filter((type) => type !== 'national_identity_document' && type !== 'selfie');\n                    // Add ID first, then selfie\n                    reorderedTypes.unshift('national_identity_document', 'selfie');\n                    console.log('Reordered verification_types from:', processedTypes, 'to:', reorderedTypes);\n                    processedTypes = reorderedTypes;\n                }\n                // Step 3: Always override getter for consistency\n                Object.defineProperty(exports.pwInstance, 'verificationTypes', {\n                    get: () => processedTypes,\n                    configurable: true,\n                });\n                // load face model in bg\n                if (processedTypes.includes('selfie')) {\n                    // train face model, no to wait for it, run in bg\n                    const faceDetectionSdk = new face_detection_1.default();\n                    faceDetectionSdk.loadFaceModel().catch((error) => {\n                        (0, console_1.warn)('Fail to load face model', error);\n                    });\n                }\n                loadingPage.clearScreen();\n                const firstPage = new StartPage_1.default(this.mainScreenId, displayMode);\n                firstPage.render();\n            }\n            catch (error) {\n                console.error('Error initializing eKYC:', error);\n                loadingPage.openErrorPage(error);\n            }\n        });\n    }\n    createMainScreen(value) {\n        const mainScreen = document.createElement('div');\n        mainScreen.classList.add('pw-relative', 'pw-font-pw', 'pw-mx-auto', 'pw-max-w-sm', 'pw-rounded-lg', 'pw-min:pw-border-solid', 'pw-min:pw-border-grey-4', 'pw-py-4', 'pw-px-5', 'pw-overflow-x-hidden', 'pw-h-[calc(100vh-3rem)]', 'pw-max-h-[51rem]');\n        const id = `mainScreen_${value}`;\n        mainScreen.id = id;\n        this.mainScreenId = id;\n        return mainScreen;\n    }\n    onClose(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener('close:ekyc', () => {\n            cb();\n        });\n    }\n    onSuccess(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener('success:ekyc', () => {\n            cb();\n        });\n    }\n    onFailed(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener('fail:ekyc', (event) => {\n            cb(event.detail);\n        });\n    }\n}\nexports[\"default\"] = PWUISDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/uisdk.ts?");
 
 /***/ }),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipwave-ekyc-uikit",
-  "version": "2.0.0-8",
+  "version": "2.1.0-1",
   "description": "",
   "main": "dist/pw-bundle.js",
   "scripts": {
@@ -40,6 +40,6 @@
     "moment": "^2.29.4",
     "pdfjs-dist": "^4.4.168",
     "pikaday": "^1.8.2",
-    "pipwave-ekyc-sdk": "^2.0.0-2"
+    "pipwave-ekyc-sdk": "^2.0.0"
   }
 }