pipwave-ekyc-uikit 1.3.0 → 1.3.2

package/dist/pw-bundle.js

@@ -3616,7 +3616,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DOC_TYPE = exports.FORM_KEY = exports.cardTypeMapping = exports.genderTypeMapping = exports.idTypeMapping = exports.formLabelMapping = void 0;\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nexports.formLabelMapping = {\n    nationality: \"Nationality\",\n    full_name: \"Full name\",\n    given_name: \"Given name\",\n    surname: \"Surname\",\n    id_number: \"ID number\",\n    date_of_birth: \"Date of birth\",\n    gender: \"Gender\",\n    line1: \"Address\",\n    city: \"City\",\n    state_name: \"State\",\n    zip: \"Zip code\",\n    country_name: \"Country/Region\",\n};\nexports.idTypeMapping = {\n    passport: \"Passport\",\n    national_identity_document: \"National identity\",\n    driving_license: \"Driver's license\",\n};\nexports.genderTypeMapping = {\n    MALE: \"MALE\",\n    FEMALE: \"FEMALE\",\n};\nexports.cardTypeMapping = {\n    national_identity_document: {\n        front: camera_1.CARD_TYPES.ID,\n        back: camera_1.CARD_TYPES.ID_BACK,\n    },\n    driving_license: {\n        front: camera_1.CARD_TYPES.LICENSE,\n        back: camera_1.CARD_TYPES.LICENSE_BACK,\n    },\n    passport: {\n        front: camera_1.CARD_TYPES.PASSPORT,\n        back: undefined,\n    },\n};\nvar FORM_KEY;\n(function (FORM_KEY) {\n    FORM_KEY[\"full_name\"] = \"full_name\";\n    FORM_KEY[\"given_name\"] = \"given_name\";\n    FORM_KEY[\"surname\"] = \"surname\";\n    FORM_KEY[\"id_number\"] = \"id_number\";\n    FORM_KEY[\"date_of_birth\"] = \"date_of_birth\";\n    FORM_KEY[\"gender\"] = \"gender\";\n    FORM_KEY[\"address\"] = \"line1\";\n    FORM_KEY[\"city\"] = \"city\";\n    FORM_KEY[\"state\"] = \"state_iso\";\n    FORM_KEY[\"zip\"] = \"zip\";\n    FORM_KEY[\"country\"] = \"country_iso2\";\n})(FORM_KEY || (exports.FORM_KEY = FORM_KEY = {}));\nvar DOC_TYPE;\n(function (DOC_TYPE) {\n    DOC_TYPE[\"PASSPORT\"] = \"passport\";\n    DOC_TYPE[\"NATIONAL_ID\"] = \"national_identity_document\";\n    DOC_TYPE[\"LICENSE\"] = \"driving_license\";\n})(DOC_TYPE || (exports.DOC_TYPE = DOC_TYPE = {}));\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/doc.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DOC_TYPE = exports.FORM_KEY = exports.cardTypeMapping = exports.genderTypeMapping = exports.idTypeMapping = exports.formLabelMapping = void 0;\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nexports.formLabelMapping = {\n    nationality: \"Nationality\",\n    full_name: \"Full name\",\n    given_name: \"Given name\",\n    surname: \"Surname\",\n    id_number: \"ID number\",\n    date_of_birth: \"Date of birth\",\n    gender: \"Gender\",\n    line1: \"Address\",\n    city: \"City\",\n    state_name: \"State\",\n    zip: \"Zip code\",\n    country_name: \"Country/Region\",\n    // use in form error dialog\n    country_iso2: \"Country/Region\",\n    state_iso: \"State\",\n};\nexports.idTypeMapping = {\n    passport: \"Passport\",\n    national_identity_document: \"National identity\",\n    driving_license: \"Driver's license\",\n};\nexports.genderTypeMapping = {\n    MALE: \"MALE\",\n    FEMALE: \"FEMALE\",\n};\nexports.cardTypeMapping = {\n    national_identity_document: {\n        front: camera_1.CARD_TYPES.ID,\n        back: camera_1.CARD_TYPES.ID_BACK,\n    },\n    driving_license: {\n        front: camera_1.CARD_TYPES.LICENSE,\n        back: camera_1.CARD_TYPES.LICENSE_BACK,\n    },\n    passport: {\n        front: camera_1.CARD_TYPES.PASSPORT,\n        back: undefined,\n    },\n};\nvar FORM_KEY;\n(function (FORM_KEY) {\n    FORM_KEY[\"full_name\"] = \"full_name\";\n    FORM_KEY[\"given_name\"] = \"given_name\";\n    FORM_KEY[\"surname\"] = \"surname\";\n    FORM_KEY[\"id_number\"] = \"id_number\";\n    FORM_KEY[\"date_of_birth\"] = \"date_of_birth\";\n    FORM_KEY[\"gender\"] = \"gender\";\n    FORM_KEY[\"address\"] = \"line1\";\n    FORM_KEY[\"city\"] = \"city\";\n    FORM_KEY[\"state\"] = \"state_iso\";\n    FORM_KEY[\"zip\"] = \"zip\";\n    FORM_KEY[\"country\"] = \"country_iso2\";\n})(FORM_KEY || (exports.FORM_KEY = FORM_KEY = {}));\nvar DOC_TYPE;\n(function (DOC_TYPE) {\n    DOC_TYPE[\"PASSPORT\"] = \"passport\";\n    DOC_TYPE[\"NATIONAL_ID\"] = \"national_identity_document\";\n    DOC_TYPE[\"LICENSE\"] = \"driving_license\";\n})(DOC_TYPE || (exports.DOC_TYPE = DOC_TYPE = {}));\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/doc.ts?");
 
 /***/ }),
 
@@ -3704,7 +3704,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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ../pageClass/ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\nconst textInput_1 = __importDefault(__webpack_require__(/*! ../components/textInput */ \"./src/components/textInput.ts\"));\nconst textArea_1 = __importDefault(__webpack_require__(/*! ../components/textArea */ \"./src/components/textArea.ts\"));\nconst dobInput_1 = __importDefault(__webpack_require__(/*! ../components/dobInput */ \"./src/components/dobInput.ts\"));\nconst selectDropdown_1 = __importDefault(__webpack_require__(/*! ../components/selectDropdown */ \"./src/components/selectDropdown.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\n// TODO: need to enhance this:\n// should validate dob, gender... with valid type, instead of length\nconst formCharacterValidation = {\n    full_name: { min: 1, max: 160 },\n    given_name: { min: 1, max: 70 },\n    surname: { min: 1, max: 70 },\n    id_number: { min: 1, max: 40 },\n    date_of_birth: { min: 1, max: 10 },\n    gender: { min: 1, max: 6 },\n    line1: { min: 1, max: 350 },\n    city: { min: 1, max: 70 },\n    state_iso: { min: 1, max: 9 },\n    zip: { min: 1, max: 40 },\n    country_iso2: { min: 2, max: 2 },\n};\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nclass FormEkyc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.formDiv = document.createElement(\"div\");\n        this.formDetail = {};\n        this.originFormPayload = {};\n    }\n    createForm(payload) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.originFormPayload = payload;\n            const overlayDialog = document.createElement(\"div\");\n            overlayDialog.id = \"pw-ekyc-overlay\";\n            overlayDialog.classList.add(\"pw-bg-black/0\", \"pw-transition-all\", \"pw-duration-100\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-30\");\n            const dialog = document.createElement(\"div\");\n            dialog.id = \"dialog-body\";\n            dialog.classList.add(\"pw-bg-white\", \"pw-p-5\", \"pw-absolute\", \"pw-top-[100%]\", \"pw-bottom-[-100%]\", \"pw-left-0\", \"pw-right-0\", \"pw-h-full\", \"pw-rounded-t-lg\", \"pw-transition-all\", \"pw-duration-500\", \"pw-overflow-y-auto\");\n            const dialogContainer = document.createElement(\"div\");\n            dialogContainer.classList.add(\"pw-relative\");\n            dialog.appendChild(dialogContainer);\n            const dialogTitle = document.createElement(\"div\");\n            dialogTitle.classList.add(\"pw-text-center\", \"pw-text-xl\");\n            dialogTitle.innerHTML = \"Edit your details\";\n            dialogContainer.appendChild(dialogTitle);\n            const closeDialog = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeDialog.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n            dialogContainer.appendChild(closeDialog);\n            closeDialog.addEventListener(\"click\", () => {\n                this.closeFormEkycDialog();\n            });\n            const form = document.createElement(\"form\");\n            form.classList.add(\"pw-mt-4\");\n            // full_name, given_name, surname fields\n            if (payload.full_name !== undefined) {\n                const full_name = new textInput_1.default(\"name\", \"Full name\");\n                const disabled = this.isEmptyString(payload.full_name);\n                form.appendChild(full_name.render({ disabled }));\n                full_name.val = payload.full_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { full_name });\n            }\n            if (payload.given_name !== undefined) {\n                const given_name = new textInput_1.default(\"name\", \"Given name\");\n                const disabled = this.isEmptyString(payload.given_name);\n                form.appendChild(given_name.render({ disabled }));\n                given_name.val = payload.given_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { given_name });\n            }\n            if (payload.surname !== undefined) {\n                const surname = new textInput_1.default(\"name\", \"Surname\");\n                const disabled = this.isEmptyString(payload.surname);\n                form.appendChild(surname.render({ disabled }));\n                surname.val = payload.surname;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { surname });\n            }\n            // id field\n            const id = new textInput_1.default(\"id\", \"Identity card number\");\n            const idDisabled = this.isEmptyString(payload.id_number);\n            form.appendChild(id.render({ disabled: idDisabled }));\n            id.val = payload.id_number || \"\";\n            // dob field\n            const dob = new dobInput_1.default();\n            const dobDisabled = this.isEmptyString(payload.date_of_birth);\n            form.appendChild(dob.render({ disabled: dobDisabled }));\n            dob.val = payload.date_of_birth\n                ? (0, moment_1.default)(payload.date_of_birth, \"YYYY-MM-DD\").format(\"DD MMM YYYY\")\n                : \"\";\n            // - gender\n            const genderOptions = Object.entries(doc_1.genderTypeMapping).map(([key, value]) => {\n                return {\n                    value: key,\n                    label: value,\n                };\n            });\n            const genderDisabled = this.isEmptyString(payload.gender);\n            const gender = new selectDropdown_1.default(\"gender\", \"Gender\", genderOptions);\n            form.appendChild(gender.render({ disabled: genderDisabled }));\n            gender.val = payload.gender || \"\";\n            // address fields - address, city, state, zip, country\n            const address = new textArea_1.default(\"address\", \"Address\");\n            form.appendChild(address.render());\n            address.val = payload.line1 || \"\";\n            // - city\n            const city = new textInput_1.default(\"city\", \"City\");\n            form.appendChild(city.render());\n            city.val = payload.city || \"\";\n            // - state\n            const stateValue = payload.state_iso || payload.state_name || \"\";\n            const stateLabel = payload.state_name || payload.state_iso || \"\";\n            // Create the state dropdown option if there's state information\n            const stateOptions = stateValue\n                ? [{ value: stateValue, label: stateLabel }]\n                : [];\n            const state = new selectDropdown_1.default(\"state\", \"State/Region\", stateOptions);\n            form.appendChild(state.render());\n            state.val = payload.state_iso || \"\";\n            // - zip\n            const zip = new textInput_1.default(\"zip\", \"Zip code\");\n            form.appendChild(zip.render());\n            zip.val = ((_a = payload.zip) === null || _a === void 0 ? void 0 : _a.toString()) || \"\";\n            // - country\n            const countries = uisdk_1.pwInstance.countries.map((country) => {\n                return { value: country.iso_code, label: country.name };\n            });\n            const country = new selectDropdown_1.default(\"country\", \"Country\", countries);\n            country.onUpdateValue = () => __awaiter(this, void 0, void 0, function* () {\n                // reset state dropdown when country value is changed\n                yield this.updateRegionState(country.val);\n            });\n            form.appendChild(country.render());\n            country.val = payload.country_iso2 || \"\";\n            //\n            this.formDetail = Object.assign(Object.assign({}, this.formDetail), { id_number: id, date_of_birth: dob, gender, line1: address, city, state_iso: state, zip, country_iso2: country });\n            const submitButton = (0, components_1.createPrimaryButton)(\"Submit\");\n            submitButton.addEventListener(\"click\", () => {\n                this.onClickSubmit(submitButton);\n            });\n            form.appendChild(submitButton);\n            dialog.appendChild(form);\n            overlayDialog.appendChild(dialog);\n            this.formDiv = overlayDialog;\n            if (payload.country_iso2) {\n                yield this.updateRegionState(payload.country_iso2);\n                state.val = payload.state_iso || \"\";\n            }\n        });\n    }\n    isEmptyString(value) {\n        return typeof value === \"string\" && value.trim() !== \"\";\n    }\n    updateRegionState(country) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const state = this.formDetail.state_iso;\n            if (!state)\n                return;\n            state.val = \"\";\n            state.isLoading = true;\n            const states = yield uisdk_1.pwInstance.fetchStates(country || \"\");\n            const options = states.map((state) => {\n                return { value: state.iso_code, label: state.name };\n            });\n            state.setOption(options);\n            state.isLoading = false;\n        });\n    }\n    openFormEkycDialog() {\n        var _a;\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(this.formDiv);\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        setTimeout(() => {\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/0\");\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/40\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-0\", \"pw-top-0\");\n        }, 100);\n    }\n    closeFormEkycDialog() {\n        var _a;\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/40\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/0\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-0\", \"pw-top-0\");\n        setTimeout(() => {\n            const mainScreen = document.getElementById(this.mainScreenId);\n            mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.removeChild(this.formDiv);\n        }, 500);\n    }\n    onClickSubmit(submitButton) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            let hasError = false;\n            for (const key in this.formDetail) {\n                if (Object.prototype.hasOwnProperty.call(this.formDetail, key)) {\n                    const { min, max } = formCharacterValidation[key];\n                    const inputDetail = this.formDetail[key];\n                    if (inputDetail.val.length < min || inputDetail.val.length > max) {\n                        hasError = true;\n                        inputDetail.onAddErrorStyling();\n                    }\n                }\n            }\n            if (hasError)\n                return;\n            // onloading\n            const loadingSpinner = (0, components_1.createSpinner)();\n            const submitButtonTxt = (submitButton === null || submitButton === void 0 ? void 0 : submitButton.innerHTML) || \"\";\n            if (submitButton)\n                submitButton.innerHTML = \"\";\n            submitButton === null || submitButton === void 0 ? void 0 : submitButton.appendChild(loadingSpinner);\n            try {\n                // pass payload to sdk\n                const reqPayload = Object.entries(this.formDetail).reduce((result, [key, value]) => {\n                    let keyInstance = key;\n                    if (keyInstance === \"country_iso2\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else if (keyInstance === \"gender\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else\n                        result[keyInstance] = value.val;\n                    return result;\n                }, {});\n                yield uisdk_1.pwInstance.updateForm(reqPayload);\n                const countryDropdown = this.formDetail[\"country_iso2\"];\n                const stateDropdown = this.formDetail[\"state_iso\"];\n                // pass in label name too\n                if (countryDropdown)\n                    reqPayload[\"country_name\"] = (_a = countryDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.label;\n                if (stateDropdown)\n                    reqPayload[\"state_name\"] = (_b = stateDropdown.selectedOption) === null || _b === void 0 ? void 0 : _b.label;\n                this.showReviewPageDialog(reqPayload);\n            }\n            finally {\n                // off loading\n                if (loadingSpinner.hasChildNodes())\n                    submitButton === null || submitButton === void 0 ? void 0 : submitButton.removeChild(loadingSpinner);\n                if (submitButton)\n                    submitButton.innerHTML = submitButtonTxt;\n            }\n        });\n    }\n    showReviewPageDialog(payload) {\n        var _a;\n        // show the review content dialog\n        const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        if (!dialog)\n            return;\n        dialog.classList.remove(\"pw-p-5\");\n        dialog.replaceChildren();\n        const header = reviewEkyc.createContentHeader(\"Thank you, your info has been updated.\");\n        const body = reviewEkyc.createContentBody({\n            id_type: \"national_identity_document\",\n            result: Object.assign(Object.assign({}, this.originFormPayload), payload),\n        });\n        const footer = document.createElement(\"div\");\n        footer.classList.add(\"pw-p-5\");\n        const doneButton = (0, components_1.createPrimaryButton)(\"Done\");\n        doneButton.addEventListener(\"click\", () => {\n            this.finishEkyc();\n        });\n        footer.appendChild(doneButton);\n        dialog.appendChild(header);\n        if (body)\n            dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n}\nexports[\"default\"] = FormEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/FormEkyc.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 moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ../pageClass/ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\nconst textInput_1 = __importDefault(__webpack_require__(/*! ../components/textInput */ \"./src/components/textInput.ts\"));\nconst textArea_1 = __importDefault(__webpack_require__(/*! ../components/textArea */ \"./src/components/textArea.ts\"));\nconst dobInput_1 = __importDefault(__webpack_require__(/*! ../components/dobInput */ \"./src/components/dobInput.ts\"));\nconst selectDropdown_1 = __importDefault(__webpack_require__(/*! ../components/selectDropdown */ \"./src/components/selectDropdown.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\n// TODO: need to enhance this:\n// should validate dob, gender... with valid type, instead of length\nconst formCharacterValidation = {\n    full_name: { min: 1, max: 160 },\n    given_name: { min: 1, max: 70 },\n    surname: { min: 1, max: 70 },\n    id_number: { min: 1, max: 40 },\n    date_of_birth: { min: 1, max: 10 },\n    gender: { min: 1, max: 6 },\n    line1: { min: 1, max: 350 },\n    city: { min: 1, max: 70 },\n    state_iso: { min: 1, max: 9 },\n    zip: { min: 1, max: 40 },\n    country_iso2: { min: 2, max: 2 },\n};\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nclass FormEkyc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.formDiv = document.createElement(\"div\");\n        this.formDetail = {};\n        this.originFormPayload = {};\n    }\n    createForm(payload) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.originFormPayload = payload;\n            const overlayDialog = document.createElement(\"div\");\n            overlayDialog.id = \"pw-ekyc-overlay\";\n            overlayDialog.classList.add(\"pw-bg-black/0\", \"pw-transition-all\", \"pw-duration-100\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-30\");\n            const dialog = document.createElement(\"div\");\n            dialog.id = \"dialog-body\";\n            dialog.classList.add(\"pw-bg-white\", \"pw-absolute\", \"pw-top-[100%]\", \"pw-bottom-[-100%]\", \"pw-left-0\", \"pw-right-0\", \"pw-h-full\", \"pw-rounded-t-lg\", \"pw-transition-all\", \"pw-duration-500\", \"pw-overflow-y-auto\");\n            const dialogContainer = document.createElement(\"div\");\n            dialogContainer.id = \"dialog-body-container\";\n            dialogContainer.classList.add(\"pw-relative\", \"pw-full\", \"pw-p-5\");\n            dialog.appendChild(dialogContainer);\n            const dialogTitle = document.createElement(\"div\");\n            dialogTitle.classList.add(\"pw-text-center\", \"pw-text-xl\");\n            dialogTitle.innerHTML = \"Edit your details\";\n            dialogContainer.appendChild(dialogTitle);\n            const closeDialog = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeDialog.classList.add(\"pw-absolute\", \"pw-right-5\", \"pw-top-5\");\n            dialogContainer.appendChild(closeDialog);\n            closeDialog.addEventListener(\"click\", () => {\n                this.closeFormEkycDialog();\n            });\n            const form = document.createElement(\"form\");\n            form.classList.add(\"pw-mt-4\");\n            // full_name, given_name, surname fields\n            if (payload.full_name !== undefined) {\n                const full_name = new textInput_1.default(\"name\", \"Full name\");\n                form.appendChild(full_name.render());\n                full_name.val = payload.full_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { full_name });\n            }\n            if (payload.given_name !== undefined) {\n                const given_name = new textInput_1.default(\"name\", \"Given name\");\n                form.appendChild(given_name.render());\n                given_name.val = payload.given_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { given_name });\n            }\n            if (payload.surname !== undefined) {\n                const surname = new textInput_1.default(\"name\", \"Surname\");\n                form.appendChild(surname.render());\n                surname.val = payload.surname;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { surname });\n            }\n            // id field\n            const id = new textInput_1.default(\"id\", \"Identity card number\");\n            const idDisabled = this.isEmptyString(payload.id_number);\n            form.appendChild(id.render({ disabled: idDisabled }));\n            id.val = payload.id_number || \"\";\n            // dob field\n            const dob = new dobInput_1.default();\n            const dobDisabled = this.isEmptyString(payload.date_of_birth);\n            form.appendChild(dob.render({ disabled: dobDisabled }));\n            dob.val = payload.date_of_birth\n                ? (0, moment_1.default)(payload.date_of_birth, \"YYYY-MM-DD\").format(\"DD MMM YYYY\")\n                : \"\";\n            // - gender\n            const genderOptions = Object.entries(doc_1.genderTypeMapping).map(([key, value]) => {\n                return {\n                    value: key,\n                    label: value,\n                };\n            });\n            const genderDisabled = this.isEmptyString(payload.gender);\n            const gender = new selectDropdown_1.default(\"gender\", \"Gender\", genderOptions);\n            form.appendChild(gender.render({ disabled: genderDisabled }));\n            gender.val = payload.gender || \"\";\n            // address fields - address, city, state, zip, country\n            const address = new textArea_1.default(\"address\", \"Address\");\n            form.appendChild(address.render());\n            address.val = payload.line1 || \"\";\n            // - city\n            const city = new textInput_1.default(\"city\", \"City\");\n            form.appendChild(city.render());\n            city.val = payload.city || \"\";\n            // - state\n            const stateValue = payload.state_iso || payload.state_name || \"\";\n            const stateLabel = payload.state_name || payload.state_iso || \"\";\n            // Create the state dropdown option if there's state information\n            const stateOptions = stateValue\n                ? [{ value: stateValue, label: stateLabel }]\n                : [];\n            const state = new selectDropdown_1.default(\"state\", \"State/Region\", stateOptions);\n            form.appendChild(state.render());\n            state.val = payload.state_iso || \"\";\n            // - zip\n            const zip = new textInput_1.default(\"zip\", \"Zip code\");\n            form.appendChild(zip.render());\n            zip.val = ((_a = payload.zip) === null || _a === void 0 ? void 0 : _a.toString()) || \"\";\n            // - country\n            const countries = uisdk_1.pwInstance.countries.map((country) => {\n                return { value: country.iso_code, label: country.name };\n            });\n            const country = new selectDropdown_1.default(\"country\", \"Country\", countries);\n            country.onUpdateValue = () => __awaiter(this, void 0, void 0, function* () {\n                // reset state dropdown when country value is changed\n                yield this.updateRegionState(country.val);\n            });\n            form.appendChild(country.render());\n            country.val = payload.country_iso2 || \"\";\n            //\n            this.formDetail = Object.assign(Object.assign({}, this.formDetail), { id_number: id, date_of_birth: dob, gender, line1: address, city, state_iso: state, zip, country_iso2: country });\n            const submitButton = (0, components_1.createPrimaryButton)(\"Submit\");\n            submitButton.addEventListener(\"click\", () => {\n                this.onClickSubmit(submitButton);\n            });\n            form.appendChild(submitButton);\n            dialogContainer.appendChild(form);\n            overlayDialog.appendChild(dialog);\n            this.formDiv = overlayDialog;\n            if (payload.country_iso2) {\n                yield this.updateRegionState(payload.country_iso2);\n                state.val = payload.state_iso || \"\";\n            }\n        });\n    }\n    isEmptyString(value) {\n        return typeof value === \"string\" && value.trim() !== \"\";\n    }\n    updateRegionState(country) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const state = this.formDetail.state_iso;\n            if (!state)\n                return;\n            state.val = \"\";\n            state.isLoading = true;\n            const states = yield uisdk_1.pwInstance.fetchStates(country || \"\");\n            const options = states.map((state) => {\n                return { value: state.iso_code, label: state.name };\n            });\n            state.setOption(options);\n            state.isLoading = false;\n        });\n    }\n    openFormEkycDialog() {\n        var _a;\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(this.formDiv);\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        setTimeout(() => {\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/0\");\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/40\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-0\", \"pw-top-0\");\n        }, 100);\n    }\n    closeFormEkycDialog() {\n        var _a;\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/40\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/0\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-0\", \"pw-top-0\");\n        setTimeout(() => {\n            const mainScreen = document.getElementById(this.mainScreenId);\n            mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.removeChild(this.formDiv);\n        }, 500);\n    }\n    onClickSubmit(submitButton) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            let hasError = false;\n            for (const key in this.formDetail) {\n                if (Object.prototype.hasOwnProperty.call(this.formDetail, key)) {\n                    const { min, max } = formCharacterValidation[key];\n                    const inputDetail = this.formDetail[key];\n                    if (inputDetail.val.length < min || inputDetail.val.length > max) {\n                        hasError = true;\n                        inputDetail.onAddErrorStyling();\n                    }\n                }\n            }\n            if (hasError)\n                return;\n            // onloading\n            const loadingSpinner = (0, components_1.createSpinner)();\n            const submitButtonTxt = (submitButton === null || submitButton === void 0 ? void 0 : submitButton.innerHTML) || \"\";\n            if (submitButton)\n                submitButton.innerHTML = \"\";\n            submitButton === null || submitButton === void 0 ? void 0 : submitButton.appendChild(loadingSpinner);\n            try {\n                // pass payload to sdk\n                const reqPayload = Object.entries(this.formDetail).reduce((result, [key, value]) => {\n                    let keyInstance = key;\n                    if (keyInstance === \"country_iso2\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else if (keyInstance === \"gender\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else\n                        result[keyInstance] = value.val;\n                    return result;\n                }, {});\n                yield uisdk_1.pwInstance.updateForm(reqPayload);\n                const countryDropdown = this.formDetail[\"country_iso2\"];\n                const stateDropdown = this.formDetail[\"state_iso\"];\n                // pass in label name too\n                if (countryDropdown)\n                    reqPayload[\"country_name\"] = (_a = countryDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.label;\n                if (stateDropdown)\n                    reqPayload[\"state_name\"] = (_b = stateDropdown.selectedOption) === null || _b === void 0 ? void 0 : _b.label;\n                this.showReviewPageDialog(reqPayload);\n            }\n            catch (err) {\n                if (![\"PwError\", \"PwReqError\"].includes(err.name))\n                    return this.openErrorPage();\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                        fields = keys.map((key) => {\n                            return doc_1.formLabelMapping[key] || key;\n                        });\n                    }\n                }\n                this.openFormErrorDialog(fields);\n            }\n            finally {\n                // off loading\n                if (loadingSpinner.hasChildNodes())\n                    submitButton === null || submitButton === void 0 ? void 0 : submitButton.removeChild(loadingSpinner);\n                if (submitButton)\n                    submitButton.innerHTML = submitButtonTxt;\n            }\n        });\n    }\n    showReviewPageDialog(payload) {\n        var _a;\n        // show the review content dialog\n        const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        if (!dialog)\n            return;\n        dialog.replaceChildren();\n        const header = reviewEkyc.createContentHeader(\"Thank you, your info has been updated.\");\n        const body = reviewEkyc.createContentBody({\n            id_type: \"national_identity_document\",\n            result: Object.assign(Object.assign({}, this.originFormPayload), payload),\n        });\n        const footer = document.createElement(\"div\");\n        footer.classList.add(\"pw-p-5\");\n        const doneButton = (0, components_1.createPrimaryButton)(\"Done\");\n        doneButton.addEventListener(\"click\", () => {\n            this.finishEkyc();\n        });\n        footer.appendChild(doneButton);\n        dialog.appendChild(header);\n        if (body)\n            dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n    openFormErrorDialog(fields) {\n        const mainScreen = document.getElementById(\"dialog-body-container\");\n        const overlay = document.createElement(\"div\");\n        overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n        const overlayContent = document.createElement(\"div\");\n        overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-flex-col\", \"pw-justify-center\", \"pw-items-center\");\n        overlay.appendChild(overlayContent);\n        const warningIconContainer = document.createElement(\"div\");\n        warningIconContainer.classList.add(\"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n        warningIcon.style.fontSize = \"60px\";\n        warningIconContainer.appendChild(warningIcon);\n        overlayContent.appendChild(warningIconContainer);\n        const dialogWording = document.createElement(\"div\");\n        dialogWording.classList.add(\"pw-mb-6\");\n        dialogWording.innerHTML =\n            \"The information you modified does not align with your identification document:\";\n        if (fields && fields.length > 0) {\n            const list = document.createElement(\"ul\");\n            list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n            for (let i = 0; i < fields.length; i++) {\n                const listItem = document.createElement(\"li\");\n                listItem.classList.add(\"pw-mb-2\");\n                listItem.innerHTML = fields[i];\n                list.appendChild(listItem);\n            }\n            dialogWording.appendChild(list);\n        }\n        overlayContent.appendChild(dialogWording);\n        const buttonContainer = document.createElement(\"div\");\n        buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n        const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n        buttonContainer.appendChild(okayButton);\n        overlayContent.appendChild(buttonContainer);\n        okayButton.addEventListener(\"click\", () => {\n            overlay.remove();\n        });\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n    }\n}\nexports[\"default\"] = FormEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/FormEkyc.ts?");
 
 /***/ }),
 

package/package.json

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