-
-
+
+
-
Date
{{ formatDate(session.createdAt) }}
+
-
Email
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+ Approve
+
+
+
+ Reject
+
+
+
+ This verification will be approved and the user can proceed.
+
+
+ This verification will be rejected and the user will not be able to proceed.
+
+
+
+
+
+
+
+
+ Cancel
+
+
+ {{ isSubmittingReviewDecision ? "Submitting..." : "Submit" }}
+
+
+
@@ -885,7 +1382,12 @@ const FaicalAuthenticationError = {
4: "Failed to perform face check due to the pose of the face",
5: "Failed due to problems in the extraction of the facial pattern",
6: "Duplicate document was used",
- 7: 'Failed, because the date of birth could not be read correctly from the document'
+ 7: 'Failed, because the date of birth could not be read correctly from the document',
+ 8: "Failed, because document issuing country is restricted",
+ 9: "Failed, because nationality is restricted",
+ 10: "Failed, because document issuing country is not allowed",
+ 11: "Failed, because nationality is not allowed",
+ 12: "Failed, because jurisdiction restriction requires manual review",
};
const ZkpVerificationResultEnum = {
@@ -1138,6 +1640,41 @@ export default {
(a, b) => new Date(a.createdAt) - new Date(b.createdAt)
);
},
+ normalizedRiskFlags() {
+ const flags = this.session?.riskFlags || [];
+ if (!Array.isArray(flags)) return [];
+
+ return flags.map((flag, index) => this.normalizeRiskFlag(flag, index));
+ },
+ hasRiskFlags() {
+ return this.normalizedRiskFlags.length > 0;
+ },
+ riskFlagCount() {
+ return this.normalizedRiskFlags.length;
+ },
+ normalizedManualDecisions() {
+ const decisions = this.session?.manualDecisions || [];
+ if (!Array.isArray(decisions)) return [];
+
+ return decisions
+ .map((decision, index) => ({
+ ...decision,
+ key: `${decision.action || "DECISION"}-${decision.decidedAt || index}`,
+ action: decision.action || "",
+ reasonCode: decision.reasonCode || "",
+ comments: decision.comments || "",
+ decidedBy: decision.decidedBy || "",
+ decidedAt: decision.decidedAt || "",
+ }))
+ .sort((a, b) => {
+ const aTime = Date.parse(a.decidedAt) || 0;
+ const bTime = Date.parse(b.decidedAt) || 0;
+ return bTime - aTime;
+ });
+ },
+ hasManualDecisions() {
+ return this.normalizedManualDecisions.length > 0;
+ },
},
data() {
return {
@@ -1153,6 +1690,19 @@ export default {
sessionId: "",
env: "prod",
session: {},
+ showManualReviewModal: false,
+ isSubmittingReviewDecision: false,
+ reviewDecision: "REJECTED",
+ reviewReasonCode: "",
+ reviewComments: "",
+ reviewReasonOptions: [
+ { label: "Suspicious document", value: "SUSPICIOUS_DOCUMENT" },
+ { label: "Identity could not be verified", value: "IDENTITY_NOT_VERIFIED" },
+ { label: "Biometric mismatch", value: "BIOMETRIC_MISMATCH" },
+ { label: "Restricted jurisdiction", value: "RESTRICTED_JURISDICTION" },
+ { label: "Fraud / duplicate identity", value: "FRAUD_DUPLICATE_IDENTITY" },
+ { label: "Other", value: "OTHER" },
+ ],
popupHeader: "",
popupImage: "",
deviceDetails: {
@@ -1278,12 +1828,187 @@ export default {
});
},
methods: {
- ...mapActions("mainStore", ["fetchSessionsDetailsById"]),
+ ...mapActions("mainStore", ["fetchSessionsDetailsById", "submitManualReviewDecision"]),
formatDate(date) {
if (!date) return "-";
const d = new Date(date);
return d.toLocaleString(); // Customize formatting if needed
},
+ openManualReviewModal() {
+ this.showManualReviewModal = true;
+ },
+ closeManualReviewModal() {
+ this.showManualReviewModal = false;
+ },
+ async submitReviewDecision() {
+ if (this.reviewDecision === "REJECTED" && !this.reviewReasonCode) {
+ this.notifyErr("Please select a reason for rejection.");
+ return;
+ }
+
+ const decisionSessionId = this.session?.latestSessionId || this.session?.sessionId || this.sessionId;
+ const reasonCode = this.reviewDecision === "REJECTED"
+ ? this.reviewReasonCode
+ : "MANUAL_REVIEW_CLEARED";
+
+ try {
+ this.isSubmittingReviewDecision = true;
+ await this.submitManualReviewDecision({
+ sessionId: decisionSessionId,
+ action: this.reviewDecision,
+ reasonCode,
+ comments: this.reviewComments,
+ });
+
+ this.session = await this.fetchSessionsDetailsById({
+ sessionId: this.sessionId,
+ env: this.env,
+ businessId: this.isValidBusinessID ? this.companyId : undefined,
+ }) || {};
+
+ this.notifySuccess("Manual review decision submitted successfully.");
+ this.closeManualReviewModal();
+ } catch (e) {
+ this.notifyErr(e.message || "Unable to submit manual review decision.");
+ } finally {
+ this.isSubmittingReviewDecision = false;
+ }
+ },
+ normalizeRiskFlag(flag, index) {
+ const code = flag?.code || flag?.reason || "RISK_FLAG";
+ const severity = flag?.severity || "MEDIUM";
+ const metadata = flag?.metadata || {};
+ const metaLine = this.getRiskMetaLine(code, metadata);
+
+ return {
+ ...flag,
+ key: `${code}-${index}`,
+ code,
+ severity,
+ source: flag?.source || flag?.associatedStep || flag?.step || "",
+ associatedStep: flag?.associatedStep || flag?.step || "",
+ title: this.formatRiskCode(code),
+ description: flag?.message || this.getRiskFlagDescription(code),
+ metadata,
+ metaLine,
+ };
+ },
+ formatRiskCode(code) {
+ const labels = {
+ JURISDICTION_RESTRICTION_MATCH: "Jurisdiction restriction",
+ RESTRICTED_NATIONALITY: "Jurisdiction restriction",
+ RESTRICTED_ISSUING_COUNTRY: "Jurisdiction restriction",
+ LOW_OCR_CONFIDENCE: "Low OCR confidence",
+ BIOMETRIC_MATCH_BELOW_THRESHOLD: "Biometric match below threshold",
+ BORDERLINE_LIVENESS: "Borderline liveness",
+ FACIAL_SPOOF_SUSPECTED: "Facial spoof suspected",
+ DUPLICATE_FACE_DETECTED: "Duplicate face detected",
+ DOCUMENT_EXPIRING_SOON: "Document expiring soon",
+ NATIONALITY_MISMATCH: "Nationality mismatch",
+ ZKP_PROOF_WARNING: "Age verification warning",
+ };
+
+ if (labels[code]) return labels[code];
+ return String(code)
+ .toLowerCase()
+ .split("_")
+ .filter(Boolean)
+ .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+ .join(" ");
+ },
+ getRiskFlagDescription(code) {
+ const descriptions = {
+ JURISDICTION_RESTRICTION_MATCH:
+ "Document issuing country or nationality matches a configured manual review policy.",
+ RESTRICTED_NATIONALITY:
+ "Document nationality matches a configured manual review policy.",
+ RESTRICTED_ISSUING_COUNTRY:
+ "Document issuing country matches a configured manual review policy.",
+ LOW_OCR_CONFIDENCE:
+ "Document field confidence is below the configured threshold.",
+ BIOMETRIC_MATCH_BELOW_THRESHOLD:
+ "Face similarity score is below the auto-approval threshold.",
+ BORDERLINE_LIVENESS:
+ "Liveness confidence is inconclusive and requires manual inspection.",
+ FACIAL_SPOOF_SUSPECTED:
+ "Potential presentation attack was detected with soft certainty.",
+ DUPLICATE_FACE_DETECTED:
+ "A matching face or document may already exist for another user.",
+ DOCUMENT_EXPIRING_SOON:
+ "The identity document is valid but close to expiry.",
+ NATIONALITY_MISMATCH:
+ "Document issuing country differs from declared nationality.",
+ ZKP_PROOF_WARNING:
+ "Age verification produced a non-fatal warning.",
+ };
+
+ return descriptions[code] || "This verification triggered a risk flag that requires review.";
+ },
+ getRiskMetaLine(code, metadata) {
+ const country = metadata.matchedCountry || metadata.evaluatedNationality || metadata.evaluatedIssuingCountry;
+ const field = metadata.matchedField;
+ const score = metadata.score || metadata.faceSimilarity || metadata.faceSimilarityScore;
+
+ if (score) {
+ const numericScore = Number(String(score).replace("%", ""));
+ if (!Number.isNaN(numericScore)) {
+ return `Face similarity: ${numericScore > 1 ? numericScore : Math.round(numericScore * 1000) / 10}%`;
+ }
+ return `Face similarity: ${score}`;
+ }
+ if (country && field) return `${this.formatRiskCode(field)}: ${country}`;
+ if (country) return `Matched country: ${country}`;
+ if (metadata.threshold) return `Threshold: ${metadata.threshold}`;
+ return "";
+ },
+ formatSeverity(severity) {
+ return String(severity || "MEDIUM").toLowerCase().replace(/^./, (char) => char.toUpperCase());
+ },
+ riskSeverityClass(severity) {
+ const value = String(severity || "MEDIUM").toLowerCase();
+ return {
+ "badge-outline-danger": value === "high",
+ "badge-outline-warning": value === "medium",
+ "badge-outline-secondary": value === "low",
+ };
+ },
+ riskFlagCardClass(severity) {
+ const value = String(severity || "MEDIUM").toLowerCase();
+ return {
+ "border-danger": value === "high",
+ "border-warning": value === "medium",
+ "border-secondary": value === "low",
+ };
+ },
+ riskFlagIconClass(severity) {
+ const value = String(severity || "MEDIUM").toLowerCase();
+ return value === "high" ? "fa fa-exclamation-circle" : "fa fa-exclamation-triangle";
+ },
+ decisionStatusLabel(action) {
+ const labels = {
+ MANUAL_REVIEW: "Manual Review",
+ APPROVED: "Approved",
+ Success: "Approved",
+ REJECTED: "Rejected",
+ };
+
+ if (labels[action]) return labels[action];
+ return this.formatRiskCode(action || "Decision");
+ },
+ decisionStatusClass(action) {
+ if (action === "REJECTED") return "badge-outline-danger";
+ if (action === "APPROVED" || action === "Success") return "badge-outline-success";
+ return "badge-outline-warning";
+ },
+ formatDecisionReason(reasonCode) {
+ const reason = this.reviewReasonOptions.find((item) => item.value === reasonCode);
+ if (reason) return reason.label;
+
+ return this.formatRiskCode(reasonCode);
+ },
+ isManualReviewCleared(decision) {
+ return decision?.reasonCode === "MANUAL_REVIEW_CLEARED";
+ },
applySessionFailureToTimeline() {
if (this.session?.status !== "Failed") return;
diff --git a/src/views/playground/WidgetConfig/Index.vue b/src/views/playground/WidgetConfig/Index.vue
index d4fa86b..01cc544 100644
--- a/src/views/playground/WidgetConfig/Index.vue
+++ b/src/views/playground/WidgetConfig/Index.vue
@@ -133,6 +133,7 @@ ul {
.jurisdiction-panel {
background: #fff;
+ min-width: 0;
}
.jurisdiction-description {
@@ -148,15 +149,33 @@ ul {
margin-bottom: 10px;
}
+.jurisdiction-config-grid {
+ display: grid;
+ gap: 24px;
+ grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
+}
+
+.jurisdiction-column {
+ min-width: 0;
+}
+
+.strategy-options {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
.strategy-card {
align-items: flex-start;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
display: flex;
- height: 120px;
+ margin: 0;
+ min-height: 120px;
padding: 16px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
+ width: 100%;
}
.strategy-card.active {
@@ -165,6 +184,7 @@ ul {
}
.strategy-radio {
+ flex: 0 0 auto;
margin-right: 14px;
margin-top: 2px;
}
@@ -188,7 +208,8 @@ ul {
margin-bottom: 12px;
min-height: 58px;
overflow-x: auto;
- padding-bottom: 6px;
+ padding: 1px 0 8px;
+ scrollbar-width: thin;
width: 100%;
}
@@ -218,6 +239,108 @@ ul {
margin-left: 18px;
}
+.country-dropdown-item {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.jurisdiction-country-search-wrap {
+ position: relative;
+}
+
+.jurisdiction-country-search-hint {
+ color: #7c8798;
+ font-size: 10px;
+ left: 44px;
+ line-height: 1;
+ pointer-events: none;
+ position: absolute;
+ top: 7px;
+ z-index: 2;
+}
+
+::v-deep(.jurisdiction-country-select.v-text-field--outlined > .v-input__control > .v-input__slot) {
+ background: #f8fafc;
+ border-radius: 8px;
+ min-height: 44px;
+ transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+::v-deep(.jurisdiction-country-select.v-text-field--outlined:not(.v-input--is-focused) fieldset) {
+ border-color: #e2e8f0;
+}
+
+::v-deep(.jurisdiction-country-select.v-text-field--outlined.v-input--is-focused fieldset) {
+ border-color: #94a3b8;
+ border-width: 1px;
+}
+
+::v-deep(.jurisdiction-country-select.v-input--is-focused > .v-input__control > .v-input__slot) {
+ background: #fff;
+ box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.14);
+}
+
+::v-deep(.jurisdiction-country-select:not(.v-input--is-focused):hover fieldset) {
+ border-color: #cbd5e1;
+}
+
+::v-deep(.jurisdiction-country-select .v-input__prepend-inner),
+::v-deep(.jurisdiction-country-select .v-input__append-inner) {
+ align-self: center;
+ margin-top: 0;
+}
+
+::v-deep(.jurisdiction-country-select .v-input__prepend-inner) {
+ padding-left: 2px;
+ padding-right: 10px;
+}
+
+::v-deep(.jurisdiction-country-select input) {
+ color: #374151;
+ font-size: 13px;
+ line-height: 20px;
+ margin-top: 11px;
+ max-height: 32px;
+}
+
+::v-deep(.jurisdiction-country-select .v-icon) {
+ color: #7c8798 !important;
+}
+
+.jurisdiction-action-column {
+ grid-column: 1 / -1;
+ max-width: 440px;
+}
+
+.jurisdiction-action-help {
+ color: #6b7280;
+ font-size: 0.86rem;
+ line-height: 1.4;
+ margin-top: 8px;
+}
+
+@media (max-width: 991.98px) {
+ .jurisdiction-config-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .jurisdiction-action-column {
+ grid-column: auto;
+ }
+}
+
+@media (max-width: 575.98px) {
+ .strategy-options {
+ grid-template-columns: 1fr;
+ }
+
+ .strategy-card {
+ min-height: auto;
+ }
+}
+
/* .zkbadge {
background-color: lightblue;
margin-left: 3px;
@@ -475,36 +598,32 @@ ul {
{{ widgetConfigUI.jurisdictionRules.secondaryDescription }}
-
Attempts
{{ session ? session.retryAttempts : "-" }}
-
+
+
@@ -508,6 +787,81 @@
+
+
+
+
+ Decision History
+
+
+
+
+
+
+
+
+
+
+ Status
+
+ {{ decisionStatusLabel(decision.action) }}
+
+
+
+ Decided By
+
+ {{ decision.decidedBy || "-" }}
+
+
+ Time
+
+ {{ formatDate(decision.decidedAt) }}
+
+
+
+
+ {{ isManualReviewCleared(decision) ? "Review Result" : "Reason" }}
+
+
+
+ {{ formatDecisionReason(decision.reasonCode) }}
+
+
+
+
+ Comment
+
+ {{ decision.comments }}
+
+
+
+ + Review the risk flags below and decide to approve or reject this verification. +
+ +
+
+
+ Review Required
+
+
+ {{ riskFlagCount }} risk {{ riskFlagCount === 1 ? "flag" : "flags" }}
+
+
+
+ + This verification passed automated checks but requires manual review before it can be approved. +
+ +
+
+
+
+
+ {{ flag.title }}
+
+ {{ formatSeverity(flag.severity) }}
+
+
+ {{ flag.description }}
+
+ {{ flag.metaLine }}
+
+ Take decision
+
+
+
+
+ {{ reason.label }}
+
+
+
+ Common reasons
+
+
+
+
+ {{ reviewComments.length }} / 300
+
+
-
+
+
@@ -678,21 +823,6 @@ export default {
immediate: true
},
- 'widgetConfigTemp.jurisdictionRules.enabled': {
- handler(enabled) {
- if (!enabled && this.widgetConfigTemp.jurisdictionRules) {
- this.widgetConfigTemp.jurisdictionRules.countries = []
- this.widgetConfigTemp.jurisdictionRules.actionOnRestriction = 'HARD_REJECT'
- }
- }
- },
- 'widgetConfigTemp.jurisdictionRules.strategy': {
- handler(newStrategy, oldStrategy) {
- if (oldStrategy && newStrategy !== oldStrategy && this.widgetConfigTemp.jurisdictionRules) {
- this.widgetConfigTemp.jurisdictionRules.countries = []
- }
- }
- }
},
computed: {
...mapState({
@@ -748,6 +878,11 @@ export default {
}
})
},
+ selectedJurisdictionActionDescription() {
+ const action = this.widgetConfigTemp.jurisdictionRules?.actionOnRestriction
+ const option = this.jurisdictionActionOptions.find(option => option.value === action)
+ return option?.description || ''
+ },
},
async mounted() {
@@ -975,6 +1110,18 @@ export default {
description: 'Only permit selected countries',
},
],
+ jurisdictionActionOptions: [
+ {
+ value: 'HARD_REJECT',
+ text: 'Hard Reject (Stop Onboarding)',
+ description: 'Rejects the session immediately if the user matches the configured jurisdiction rule.',
+ },
+ {
+ value: 'MANUAL_REVIEW',
+ text: 'Manual Review',
+ description: 'Allows the user to complete verification, then sends the session to the manual review queue.',
+ },
+ ],
}
},
@@ -1021,7 +1168,9 @@ export default {
existingRules.countries = Array.isArray(existingRules.countries)
? existingRules.countries.map(country => String(country).toUpperCase()).filter(country => !!country)
: []
- existingRules.actionOnRestriction = 'HARD_REJECT'
+ existingRules.actionOnRestriction = ['HARD_REJECT', 'MANUAL_REVIEW'].includes(existingRules.actionOnRestriction)
+ ? existingRules.actionOnRestriction
+ : defaults.actionOnRestriction
},
countryFlagFromAlpha2(alpha2) {
if (!alpha2 || alpha2.length !== 2) return ''
@@ -1037,13 +1186,16 @@ export default {
const selectedCountries = this.widgetConfigTemp.jurisdictionRules.countries || []
this.widgetConfigTemp.jurisdictionRules.countries = selectedCountries.filter(country => country !== countryCode)
},
+ isJurisdictionCountrySelected(countryCode) {
+ return (this.widgetConfigTemp.jurisdictionRules.countries || []).includes(countryCode)
+ },
validateJurisdictionRules() {
this.ensureJurisdictionRules()
const rules = this.widgetConfigTemp.jurisdictionRules
if (!rules.enabled) {
rules.countries = []
- rules.actionOnRestriction = 'HARD_REJECT'
+ rules.actionOnRestriction = rules.actionOnRestriction || 'HARD_REJECT'
return
}
@@ -1060,7 +1212,9 @@ export default {
throw new Error(`Invalid country code(s): ${invalidCountries.join(', ')}`)
}
- rules.actionOnRestriction = 'HARD_REJECT'
+ if (!['HARD_REJECT', 'MANUAL_REVIEW'].includes(rules.actionOnRestriction)) {
+ throw new Error('Kindly select a jurisdiction action on match')
+ }
},
selectedServiceEventHandler(event) {
Enforcement Strategy
-
-
-
+
-
-
- mdi-magnify
-
-
-
- {{ item.flag }}
- {{ item.text }} ({{ item.value }})
-
-
+
+
+
Target Countries ({{ selectedJurisdictionCountries.length }})
@@ -525,28 +644,54 @@ ul {
+
+ Select or search country...
+
+
+
+ mdi-magnify
+
+
+
+
+
+
+
+ {{ item.flag }}
+ {{ item.text }} ({{ item.value }})
+
+
+ mdi-check
+
+
+
+
+
Action on Match
+
+ {{ selectedJurisdictionActionDescription }}
+