Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

redesign: add bank code selection to bank_account kyc flows #93

Merged
merged 4 commits into from
Oct 13, 2023
Merged

redesign: add bank code selection to bank_account kyc flows #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f90597
redesign: add bank code selection to bank_account kyc flows
Oct 12, 2023
d15b88b
fix: fix lint errors
Oct 12, 2023
4b19874
Merge branch 'main' into fix/ng-bank-account-kyc
tamssokari Oct 12, 2023
d1101a0
fix: import Combobox in ekyc
Oct 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/basic-kyc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,19 @@ <h1 class="center">Enter ID Information</h1>
</p>

<form name="user-details" class="flow">
<fieldset hidden id='bank-code' data-variant='start'>
<label class="required" for="bank_code"> Bank </label>

<select
aria-required="true"
name="bank_code"
id="bank_code"
required
>
<option key="" value="">--Select Bank--</option>
</select>
</fieldset>

<div hidden id="id-number" class="input-group flow">
<label class="required" for="id_number"> ID Number </label>

Expand Down
13 changes: 13 additions & 0 deletions src/ekyc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,19 @@ <h1 class="center">Enter ID Information</h1>
</p>

<form name="user-details" class="flow">
<fieldset hidden id='bank-code' data-variant='start'>
<label class="required" for="bank_code"> Bank </label>

<select
aria-required="true"
name="bank_code"
id="bank_code"
required
>
<option key="" value="">--Select Bank--</option>
</select>
</fieldset>

<div hidden id="id-number" class="input-group flow">
<label class="required" for="id_number"> ID Number </label>

Expand Down
65 changes: 64 additions & 1 deletion src/js/basic-kyc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import validate from "validate.js";
import ConsentScreen from "./components/ConsentScreen";
import TotpBasedConsent from "./components/TotpConsentApp";
import Combobox from "./components/Combobox";
import { version as sdkVersion } from "../../package.json";

(function basicKyc() {
Expand All @@ -21,12 +22,18 @@ import { version as sdkVersion } from "../../package.json";
window.customElements.define("end-user-consent", ConsentScreen);
window.customElements.define("totp-consent-app", TotpBasedConsent);

window.customElements.define("smileid-combobox", Combobox.Root);
window.customElements.define("smileid-combobox-trigger", Combobox.Trigger);
window.customElements.define("smileid-combobox-listbox", Combobox.List);
window.customElements.define("smileid-combobox-option", Combobox.Option);

const pages = [];
let activeScreen;
let config;
let consent_information;
let id_info;
let partner_params;
let ngBankCodes;
let productConstraints;
let EndUserConsent;

Expand Down Expand Up @@ -77,6 +84,7 @@ import { version as sdkVersion } from "../../package.json";
if (productsConfigResponse.ok && servicesResponse.ok) {
const partnerConstraints = await productsConfigResponse.json();
const generalConstraints = await servicesResponse.json();
ngBankCodes = generalConstraints.bank_codes;

const previewBvnMfa = config.previewBVNMFA;
if (previewBvnMfa) {
Expand Down Expand Up @@ -466,6 +474,38 @@ import { version as sdkVersion } from "../../package.json";
);
}

function loadBankCodes(bankCodes, placeholderElement) {
const autocomplete = document.createElement("smileid-combobox");
autocomplete.setAttribute("id", "bank_code");
autocomplete.innerHTML = `
<smileid-combobox-trigger
label="Search Bank">
</smileid-combobox-trigger>

<smileid-combobox-listbox empty-label="No bank found">
${bankCodes
.map(
(bank) =>
`
<smileid-combobox-option
value="${bank.code}"
label="${bank.name}"
>
${bank.name}
</smileid-combobox-option>
`,
)
.join("\n")}
</smileid-combobox-listbox>
`;
placeholderElement.replaceWith(autocomplete);
autocomplete.addEventListener("change", (e) => {
id_info.bank_code = e.detail ? e.detail.value : "";
});

return autocomplete;
}

function setFormInputs() {
const requiredFields =
productConstraints[id_info.country].id_types[id_info.id_type]
Expand Down Expand Up @@ -506,6 +546,16 @@ import { version as sdkVersion } from "../../package.json";
const Citizenship = IDInfoForm.querySelector("fieldset#citizenships");
Citizenship.hidden = false;
}

const showBankCode = requiredFields.some((fieldName) =>
fieldName.includes("bank_code"),
);

if (showBankCode) {
const BankCode = IDInfoForm.querySelector("fieldset#bank-code");
loadBankCodes(ngBankCodes, BankCode.querySelector("#bank_code"));
BankCode.hidden = false;
}
}

function getPartnerParams() {
Expand Down Expand Up @@ -638,6 +688,19 @@ import { version as sdkVersion } from "../../package.json";
};
}

const showBankCode = requiredFields.some((fieldName) =>
fieldName.includes("bank_code"),
);

if (showBankCode) {
validationConstraints.bank_code = {
presence: {
allowEmpty: false,
message: "is required",
},
};
}

const validation = validate(payload, validationConstraints);

if (validation) {
Expand Down Expand Up @@ -672,7 +735,7 @@ import { version as sdkVersion } from "../../package.json";
const form = IDInfoForm.querySelector("form");

const formData = new FormData(form);
const payload = Object.fromEntries(formData.entries());
const payload = { ...id_info, ...Object.fromEntries(formData.entries()) };

const isInvalid = validateInputs(payload);

Expand Down
65 changes: 64 additions & 1 deletion src/js/ekyc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import validate from "validate.js";
import ConsentScreen from "./components/ConsentScreen";
import TotpBasedConsent from "./components/TotpConsentApp";
import Combobox from "./components/Combobox";
import { version as sdkVersion } from "../../package.json";

(function eKYC() {
Expand All @@ -20,13 +21,19 @@ import { version as sdkVersion } from "../../package.json";
window.customElements.define("end-user-consent", ConsentScreen);
window.customElements.define("totp-consent-app", TotpBasedConsent);

window.customElements.define("smileid-combobox", Combobox.Root);
window.customElements.define("smileid-combobox-trigger", Combobox.Trigger);
window.customElements.define("smileid-combobox-listbox", Combobox.List);
window.customElements.define("smileid-combobox-option", Combobox.Option);

const pages = [];
let activeScreen;
let config;
let consent_information;
let EndUserConsent;
let id_info;
let partner_params;
let ngBankCodes;
let productConstraints;

const LoadingScreen = document.querySelector("#loading-screen");
Expand Down Expand Up @@ -76,6 +83,7 @@ import { version as sdkVersion } from "../../package.json";
if (productsConfigResponse.ok && servicesResponse.ok) {
const partnerConstraints = await productsConfigResponse.json();
const generalConstraints = await servicesResponse.json();
ngBankCodes = generalConstraints.bank_codes;

const previewBvnMfa = config.previewBVNMFA;
if (previewBvnMfa) {
Expand Down Expand Up @@ -465,6 +473,38 @@ import { version as sdkVersion } from "../../package.json";
);
}

function loadBankCodes(bankCodes, placeholderElement) {
const autocomplete = document.createElement("smileid-combobox");
autocomplete.setAttribute("id", "bank_code");
autocomplete.innerHTML = `
<smileid-combobox-trigger
label="Search Bank">
</smileid-combobox-trigger>

<smileid-combobox-listbox empty-label="No bank found">
${bankCodes
.map(
(bank) =>
`
<smileid-combobox-option
value="${bank.code}"
label="${bank.name}"
>
${bank.name}
</smileid-combobox-option>
`,
)
.join("\n")}
</smileid-combobox-listbox>
`;
placeholderElement.replaceWith(autocomplete);
autocomplete.addEventListener("change", (e) => {
id_info.bank_code = e.detail ? e.detail.value : "";
});

return autocomplete;
}

function setFormInputs() {
const requiredFields =
productConstraints[id_info.country].id_types[id_info.id_type]
Expand Down Expand Up @@ -505,6 +545,16 @@ import { version as sdkVersion } from "../../package.json";
const Citizenship = IDInfoForm.querySelector("fieldset#citizenships");
Citizenship.hidden = false;
}

const showBankCode = requiredFields.some((fieldName) =>
fieldName.includes("bank_code"),
);

if (showBankCode) {
const BankCode = IDInfoForm.querySelector("fieldset#bank-code");
loadBankCodes(ngBankCodes, BankCode.querySelector("#bank_code"));
BankCode.hidden = false;
}
}

function getPartnerParams() {
Expand Down Expand Up @@ -637,6 +687,19 @@ import { version as sdkVersion } from "../../package.json";
};
}

const showBankCode = requiredFields.some((fieldName) =>
fieldName.includes("bank_code"),
);

if (showBankCode) {
validationConstraints.bank_code = {
presence: {
allowEmpty: false,
message: "is required",
},
};
}

const validation = validate(payload, validationConstraints);

if (validation) {
Expand Down Expand Up @@ -673,7 +736,7 @@ import { version as sdkVersion } from "../../package.json";
const form = IDInfoForm.querySelector("form");

const formData = new FormData(form);
const payload = Object.fromEntries(formData.entries());
const payload = { ...id_info, ...Object.fromEntries(formData.entries()) };

const isInvalid = validateInputs(payload);

Expand Down