From fc2c5ac450a0742cd111f6818064288ecf76258d Mon Sep 17 00:00:00 2001 From: vishwas1 Date: Mon, 24 Aug 2026 12:22:35 +0530 Subject: [PATCH 1/7] commented risk flagged iscon --- src/mixins/utils.js | 14 + src/views/playground/SessionsDetails.vue | 933 ++++++++++++++++++++++- 2 files changed, 943 insertions(+), 4 deletions(-) diff --git a/src/mixins/utils.js b/src/mixins/utils.js index 5cc5fad..0121e0f 100644 --- a/src/mixins/utils.js +++ b/src/mixins/utils.js @@ -203,6 +203,20 @@ export default { ` } + if (status == 'REJECTED') { + return ` + + Rejected +` + } + + if (status == 'MANUAL_REVIEW') { + return ` + + Manual Review +` + } + if (status == 'Expired') { return ` diff --git a/src/views/playground/SessionsDetails.vue b/src/views/playground/SessionsDetails.vue index 5513e21..ae63314 100644 --- a/src/views/playground/SessionsDetails.vue +++ b/src/views/playground/SessionsDetails.vue @@ -30,6 +30,54 @@ font-size: 13px; } +.info-actions-wrap { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 12px; + flex-wrap: wrap; +} + +.manual-review-btn { + min-width: 230px; + border: 1px solid #f59e0b; + background: #fffaf0; + color: #b45309; + border-radius: 10px; + padding: 8px 16px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0; + line-height: 1.1; + box-shadow: 0 1px 2px rgba(245, 158, 11, 0.08); +} + +.manual-review-btn:hover { + background: #fffbeb; + color: #92400e; +} + +.manual-review-btn .review-title { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + font-size: 13px; +} + +.manual-review-btn .review-subtitle { + display: block; + margin-top: 5px; + color: #374151; + font-size: 11px; + font-weight: 600; + text-transform: none; +} + +.manual-review-btn i { + font-size: 14px; +} + .card-section-title { font-size: 13px; font-weight: 700; @@ -178,6 +226,367 @@ background: #fff; } +::v-deep(.manual-review-dialog) { + max-width: 1120px; +} + +::v-deep(.manual-review-modal-body) { + padding: 0; + background: transparent; +} + +.review-modal-shell { + position: relative; + background: #fff; + border: 1px solid #dbe1ea; + border-radius: 10px; + padding: 28px; + color: #1f2a44; +} + +.review-modal-close { + position: absolute; + top: 28px; + right: 28px; + border: none; + background: transparent; + color: #64748b; + font-size: 18px; + line-height: 1; + padding: 4px; +} + +.review-modal-close:hover { + color: #1f2937; +} + +.review-modal-header h3 { + margin: 0; + color: #111827; + font-size: 22px; + font-weight: 800; + letter-spacing: 0; +} + +.review-modal-header p { + margin: 8px 0 24px; + color: #64748b; + font-size: 15px; +} + +.review-modal-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); + gap: 16px; +} + +.review-flags-panel, +.review-decision-panel { + border: 1px solid #e2e8f0; + border-radius: 6px; + padding: 18px; + background: #fff; +} + +.review-panel-summary { + display: flex; + justify-content: space-between; + gap: 16px; + margin-bottom: 18px; +} + +.review-required-title { + display: flex; + align-items: center; + gap: 12px; + color: #dc2626; + font-size: 13px; + font-weight: 800; + text-transform: uppercase; +} + +.review-panel-summary p { + margin: 12px 0 0; + color: #475569; + font-size: 14px; + line-height: 1.55; +} + +.review-flags-count { + white-space: nowrap; + color: #334155; + font-size: 13px; + font-weight: 700; +} + +.risk-flag-list { + display: flex; + flex-direction: column; + gap: 10px; + max-height: 460px; + overflow-y: auto; + padding-right: 6px; +} + +.risk-flag-card { + border: 1px solid #f1e2bf; + border-radius: 6px; + padding: 20px; + background: #fffdfa; +} + +.risk-card-high { + border-color: #f3d0d0; +} + +.risk-card-medium { + border-color: #f1e2bf; +} + +.risk-card-low { + border-color: #dbeafe; +} + +.risk-flag-row, +.risk-flag-heading { + display: flex; + align-items: center; +} + +.risk-flag-row { + justify-content: space-between; + gap: 12px; +} + +.risk-flag-heading { + gap: 12px; + color: #1e293b; + font-size: 14px; +} + +.risk-flag-heading i { + color: #f59e0b; + font-size: 21px; +} + +.risk-card-high .risk-flag-heading i { + color: #ef4444; +} + +.risk-flag-card p { + margin: 18px 0 0; + color: #475569; + font-size: 14px; + line-height: 1.55; +} + +.risk-meta-line { + margin-top: 8px; + color: #1e293b; + font-size: 13px; + font-weight: 800; +} + +.risk-severity-pill { + border-radius: 6px; + padding: 7px 11px; + font-size: 13px; + font-weight: 800; +} + +.risk-severity-high { + background: #fee2e2; + color: #dc2626; +} + +.risk-severity-medium { + background: #fff7ed; + color: #f97316; +} + +.risk-severity-low { + background: #eff6ff; + color: #2563eb; +} + +.risk-evidence-btn { + margin-top: 18px; + border: none; + background: transparent; + color: #0b63ce; + font-weight: 800; + padding: 0; +} + +.review-decision-panel h4 { + margin: 8px 0 18px; + color: #111827; + font-size: 16px; + font-weight: 800; +} + +.decision-radio, +.reason-radio { + display: flex; + align-items: center; + gap: 10px; + color: #1f2a44; + font-size: 14px; + font-weight: 700; + margin-bottom: 10px; +} + +.reason-radio { + color: #475569; + font-weight: 500; +} + +.decision-radio input, +.reason-radio input { + width: 17px; + height: 17px; + accent-color: #2563eb; +} + +.decision-callout { + display: flex; + align-items: center; + gap: 12px; + border-radius: 6px; + padding: 15px 18px; + font-size: 14px; + line-height: 1.45; +} + +.approve-callout { + border: 1px solid #bbf7d0; + background: #f0fdf4; + color: #47675a; +} + +.approve-callout i { + color: #22c55e; +} + +.reject-callout { + border: 1px solid #fecaca; + background: #fff7f7; + color: #475569; +} + +.reject-callout i { + color: #ef4444; +} + +.review-field-group { + margin-top: 20px; +} + +.review-field-group > label { + color: #1f2a44; + font-size: 13px; + font-weight: 800; +} + +.review-field-group > label span { + color: #ef4444; +} + +.review-field-group small, +.review-field-hint { + color: #64748b; + font-weight: 500; +} + +.review-field-hint { + margin: 12px 0; + font-size: 13px; +} + +.review-field-group textarea { + width: 100%; + resize: none; + border: 1px solid #dbe1ea; + border-radius: 6px; + padding: 12px; + color: #1f2937; + font-size: 14px; +} + +.review-field-group textarea:focus { + border-color: #2563eb; + outline: none; + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); +} + +.comment-counter { + margin-top: 8px; + color: #64748b; + font-size: 13px; + text-align: right; +} + +.review-modal-actions { + display: flex; + justify-content: flex-end; + gap: 20px; + margin-top: 18px; +} + +.review-cancel-btn, +.review-submit-btn { + min-width: 132px; + border-radius: 6px; + padding: 10px 24px; + font-weight: 800; +} + +.review-cancel-btn { + border: 1px solid #cbd5e1; + background: #fff; + color: #334155; +} + +.review-submit-btn { + background: #075eea; + border: 1px solid #075eea; + color: #fff; +} + +.review-submit-btn:hover { + background: #064fc4; + color: #fff; +} + +@media (max-width: 960px) { + .manual-review-btn { + width: 100%; + min-width: 0; + } + + .info-actions-wrap { + justify-content: stretch; + } + + .review-modal-shell { + padding: 22px; + } + + .review-modal-grid { + grid-template-columns: 1fr; + } + + .review-modal-actions { + gap: 12px; + } + + .review-cancel-btn, + .review-submit-btn { + flex: 1; + min-width: 0; + } +} + .timeline-item { position: relative; padding: 8px 12px 8px 28px; @@ -247,6 +656,114 @@ justify-content: flex-end; gap: 8px; } + +.decision-history-wrap { + position: relative; + margin: 4px 0 0 14px; + padding-left: 28px; +} + +.decision-history-wrap::before { + content: ""; + position: absolute; + left: 13px; + top: 18px; + bottom: 18px; + width: 1px; + background: #e5e7eb; +} + +.decision-history-item { + position: relative; + padding: 0 0 22px 18px; +} + +.decision-history-item:last-child { + padding-bottom: 0; +} + +.decision-history-index { + position: absolute; + left: -29px; + top: 0; + width: 30px; + height: 30px; + border: 1px solid #e5e7eb; + border-radius: 50%; + background: #fff; + color: #374151; + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 800; + z-index: 1; +} + +.decision-history-label { + color: #64748b; + font-size: 12px; + font-weight: 600; + margin-bottom: 4px; +} + +.decision-history-value { + color: #1f2937; + font-size: 14px; + font-weight: 700; + margin-bottom: 14px; + word-break: break-word; +} + +.decision-status-pill { + display: inline-flex; + align-items: center; + border-radius: 7px; + padding: 7px 12px; + font-size: 14px; + font-weight: 800; +} + +.decision-status-review { + background: #fde68a; + color: #92400e; +} + +.decision-status-approved { + background: #dcfce7; + color: #166534; +} + +.decision-status-rejected { + background: #fecaca; + color: #991b1b; +} + +.decision-reason-box { + display: flex; + align-items: flex-start; + gap: 10px; + border: 1px solid #fecaca; + background: #fff1f2; + color: #374151; + border-radius: 7px; + padding: 10px 12px; + font-size: 13px; + font-weight: 600; + line-height: 1.4; + margin-bottom: 14px; +} + +.decision-reason-box i { + color: #dc2626; + margin-top: 2px; +} + +.decision-history-divider { + height: 1px; + background: #e5e7eb; + margin: 4px 0 22px; +} @@ -1138,6 +1850,35 @@ 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 || "", + })); + }, + hasManualDecisions() { + return this.normalizedManualDecisions.length > 0; + }, }, data() { return { @@ -1153,6 +1894,18 @@ export default { sessionId: "", env: "prod", session: {}, + showManualReviewModal: 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: { @@ -1284,6 +2037,178 @@ export default { const d = new Date(date); return d.toLocaleString(); // Customize formatting if needed }, + openManualReviewModal() { + this.showManualReviewModal = true; + }, + closeManualReviewModal() { + this.showManualReviewModal = false; + }, + submitReviewDecision() { + if (this.reviewDecision === "REJECTED" && !this.reviewReasonCode) { + this.notifyErr("Please select a reason for rejection."); + return; + } + + this.notifySuccess("Manual review decision is ready to submit."); + this.closeManualReviewModal(); + }, + 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 { + "risk-severity-high": value === "high", + "risk-severity-medium": value === "medium", + "risk-severity-low": value === "low", + }; + }, + riskFlagCardClass(severity) { + const value = String(severity || "MEDIUM").toLowerCase(); + return { + "risk-card-high": value === "high", + "risk-card-medium": value === "medium", + "risk-card-low": 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 "decision-status-rejected"; + if (action === "APPROVED" || action === "Success") return "decision-status-approved"; + return "decision-status-review"; + }, + formatDecisionReason(reasonCode) { + const reason = this.reviewReasonOptions.find((item) => item.value === reasonCode); + if (reason) return reason.label; + + return this.formatRiskCode(reasonCode); + }, + viewRiskEvidence(flag) { + const code = flag?.code || ""; + const step = flag?.associatedStep || flag?.source || ""; + let targetId = "personal-info"; + + if (/LIVENESS|SELFIE|SPOOF|FACE/.test(`${code} ${step}`)) { + targetId = "liveliness-info"; + } + + if (/OCR|DOCUMENT|JURISDICTION|NATIONALITY|BIOMETRIC/.test(`${code} ${step}`)) { + targetId = "face-auth-info"; + } + + if (/ZKP|PROOF|AGE/.test(`${code} ${step}`)) { + targetId = "zkp-verification-info"; + } + + this.closeManualReviewModal(); + this.$nextTick(() => { + const target = document.getElementById(targetId); + if (target) { + target.scrollIntoView({ behavior: "smooth", block: "start" }); + } + }); + }, applySessionFailureToTimeline() { if (this.session?.status !== "Failed") return; From 87bca8736375fe1e3dd3a585b3283bd02c849976 Mon Sep 17 00:00:00 2001 From: vishwas1 Date: Mon, 24 Aug 2026 12:44:10 +0530 Subject: [PATCH 2/7] fixed UI --- src/views/playground/SessionsDetails.vue | 63 ++++++++++++++++++++---- 1 file changed, 54 insertions(+), 9 deletions(-) diff --git a/src/views/playground/SessionsDetails.vue b/src/views/playground/SessionsDetails.vue index ae63314..03b68c8 100644 --- a/src/views/playground/SessionsDetails.vue +++ b/src/views/playground/SessionsDetails.vue @@ -30,16 +30,48 @@ font-size: 13px; } +.info-summary-row { + display: flex; + align-items: center; + gap: 28px; + width: 100%; + min-width: 0; +} + +.info-summary-item { + min-width: 0; +} + +.info-summary-date { + flex: 0 0 150px; +} + +.info-summary-email { + flex: 1 1 220px; +} + +.info-summary-attempts { + flex: 0 0 90px; +} + +.info-summary-status { + flex: 0 0 150px; + display: flex; + align-items: center; +} + .info-actions-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 12px; - flex-wrap: wrap; + flex: 0 0 auto; + margin-left: auto; + white-space: nowrap; } .manual-review-btn { - min-width: 230px; + min-width: 250px; border: 1px solid #f59e0b; background: #fffaf0; color: #b45309; @@ -559,6 +591,19 @@ } @media (max-width: 960px) { + .info-summary-row { + flex-wrap: wrap; + gap: 16px; + } + + .info-summary-date, + .info-summary-email, + .info-summary-attempts, + .info-summary-status, + .info-actions-wrap { + flex: 1 1 100%; + } + .manual-review-btn { width: 100%; min-width: 0; @@ -813,12 +858,12 @@ >
-
-
+
+
Date
{{ formatDate(session.createdAt) }}
-
+
Email
-
+
Attempts
{{ session ? session.retryAttempts : "-" }}
- +
-
@@ -1940,6 +1950,7 @@ export default { env: "prod", session: {}, showManualReviewModal: false, + isSubmittingReviewDecision: false, reviewDecision: "REJECTED", reviewReasonCode: "", reviewComments: "", @@ -2076,7 +2087,7 @@ export default { }); }, methods: { - ...mapActions("mainStore", ["fetchSessionsDetailsById"]), + ...mapActions("mainStore", ["fetchSessionsDetailsById", "submitManualReviewDecision"]), formatDate(date) { if (!date) return "-"; const d = new Date(date); @@ -2088,14 +2099,39 @@ export default { closeManualReviewModal() { this.showManualReviewModal = false; }, - submitReviewDecision() { + async submitReviewDecision() { if (this.reviewDecision === "REJECTED" && !this.reviewReasonCode) { this.notifyErr("Please select a reason for rejection."); return; } - this.notifySuccess("Manual review decision is ready to submit."); - this.closeManualReviewModal(); + 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"; From 135a2fa40e4099bf70a787f3e0ef3b451b760283 Mon Sep 17 00:00:00 2001 From: vishwas1 Date: Mon, 24 Aug 2026 12:55:15 +0530 Subject: [PATCH 4/7] implemetned action drop adown as well --- src/views/playground/WidgetConfig/Index.vue | 48 ++++++++++++++++++--- 1 file changed, 43 insertions(+), 5 deletions(-) diff --git a/src/views/playground/WidgetConfig/Index.vue b/src/views/playground/WidgetConfig/Index.vue index d4fa86b..b24ab9b 100644 --- a/src/views/playground/WidgetConfig/Index.vue +++ b/src/views/playground/WidgetConfig/Index.vue @@ -218,6 +218,13 @@ ul { margin-left: 18px; } +.jurisdiction-action-help { + color: #6b7280; + font-size: 0.86rem; + line-height: 1.4; + margin-top: 8px; +} + /* .zkbadge { background-color: lightblue; margin-left: 3px; @@ -504,7 +511,7 @@ ul {
-
+
Target Countries ({{ selectedJurisdictionCountries.length }})
@@ -548,6 +555,17 @@ ul {
+ +
+
Action on Match
+ +
+ {{ selectedJurisdictionActionDescription }} +
+
@@ -682,7 +700,6 @@ export default { handler(enabled) { if (!enabled && this.widgetConfigTemp.jurisdictionRules) { this.widgetConfigTemp.jurisdictionRules.countries = [] - this.widgetConfigTemp.jurisdictionRules.actionOnRestriction = 'HARD_REJECT' } } }, @@ -748,6 +765,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 +997,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 +1055,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 '' @@ -1043,7 +1079,7 @@ export default { if (!rules.enabled) { rules.countries = [] - rules.actionOnRestriction = 'HARD_REJECT' + rules.actionOnRestriction = rules.actionOnRestriction || 'HARD_REJECT' return } @@ -1060,7 +1096,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) { From e52a82010f96548b6fcdac9768a61b38dcb081e1 Mon Sep 17 00:00:00 2001 From: Pratap2018 Date: Mon, 24 Aug 2026 16:25:43 +0530 Subject: [PATCH 5/7] ui updates --- src/config.js | 9 +- src/views/playground/SessionsDetails.vue | 903 +++++++------------- src/views/playground/WidgetConfig/Index.vue | 120 ++- 3 files changed, 409 insertions(+), 623 deletions(-) diff --git a/src/config.js b/src/config.js index 599907f..c718d21 100644 --- a/src/config.js +++ b/src/config.js @@ -177,8 +177,13 @@ config['FaicalAuthenticationError'] = { 4: 'Rejected, to perform face check due to the pose of the face', 5: 'Rejected, due to problems in the extraction of the facial pattern', 6: 'Rejected, because document has already been verified in some other account with this service', - 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 kycServerBaseUrl = process.env.VUE_APP_KYC_SERVER_BASE_URL || 'https://api.cavach.hypersign.id' config['KYC_SERVER_BASE_URL'] = kycServerBaseUrl; -export default config \ No newline at end of file +export default config diff --git a/src/views/playground/SessionsDetails.vue b/src/views/playground/SessionsDetails.vue index d132a86..8beef64 100644 --- a/src/views/playground/SessionsDetails.vue +++ b/src/views/playground/SessionsDetails.vue @@ -33,7 +33,7 @@ .info-summary-row { display: flex; align-items: center; - gap: 28px; + gap: 24px; width: 100%; min-width: 0; } @@ -43,19 +43,19 @@ } .info-summary-date { - flex: 0 0 150px; + flex: 0 0 155px; } .info-summary-email { - flex: 1 1 220px; + flex: 0 1 280px; } .info-summary-attempts { - flex: 0 0 90px; + flex: 0 0 70px; } .info-summary-status { - flex: 0 0 150px; + flex: 0 0 130px; display: flex; align-items: center; } @@ -64,19 +64,19 @@ display: flex; justify-content: flex-end; align-items: center; - gap: 12px; + gap: 10px; flex: 0 0 auto; margin-left: auto; white-space: nowrap; } .manual-review-btn { - min-width: 250px; + min-width: 210px; border: 1px solid #f59e0b; background: #fffaf0; color: #b45309; border-radius: 10px; - padding: 8px 16px; + padding: 6px 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; @@ -93,21 +93,21 @@ display: flex; align-items: center; justify-content: center; - gap: 12px; - font-size: 13px; + gap: 8px; + font-size: 12px; } .manual-review-btn .review-subtitle { display: block; - margin-top: 5px; + margin-top: 3px; color: #374151; - font-size: 11px; + font-size: 10px; font-weight: 600; text-transform: none; } .manual-review-btn i { - font-size: 14px; + font-size: 12px; } .card-section-title { @@ -258,341 +258,77 @@ background: #fff; } -::v-deep(.manual-review-dialog) { - max-width: 1120px; -} - -::v-deep(.manual-review-modal-body) { - padding: 0; - background: transparent; -} - -.review-modal-shell { - position: relative; - background: #fff; - border: 1px solid #dbe1ea; - border-radius: 10px; - padding: 28px; - color: #1f2a44; -} - -.review-modal-close { - position: absolute; - top: 28px; - right: 28px; - border: none; - background: transparent; - color: #64748b; - font-size: 18px; - line-height: 1; - padding: 4px; -} - -.review-modal-close:hover { - color: #1f2937; -} - -.review-modal-header h3 { - margin: 0; - color: #111827; - font-size: 22px; - font-weight: 800; - letter-spacing: 0; -} - -.review-modal-header p { - margin: 8px 0 24px; - color: #64748b; - font-size: 15px; -} - -.review-modal-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); - gap: 16px; -} - -.review-flags-panel, -.review-decision-panel { - border: 1px solid #e2e8f0; - border-radius: 6px; - padding: 18px; - background: #fff; -} - -.review-panel-summary { - display: flex; - justify-content: space-between; - gap: 16px; - margin-bottom: 18px; -} - -.review-required-title { - display: flex; - align-items: center; - gap: 12px; - color: #dc2626; - font-size: 13px; - font-weight: 800; - text-transform: uppercase; -} - -.review-panel-summary p { - margin: 12px 0 0; - color: #475569; - font-size: 14px; - line-height: 1.55; -} - -.review-flags-count { - white-space: nowrap; - color: #334155; - font-size: 13px; - font-weight: 700; -} - -.risk-flag-list { - display: flex; - flex-direction: column; - gap: 10px; - max-height: 460px; - overflow-y: auto; - padding-right: 6px; -} - -.risk-flag-card { - border: 1px solid #f1e2bf; - border-radius: 6px; - padding: 20px; - background: #fffdfa; -} - -.risk-card-high { - border-color: #f3d0d0; -} - -.risk-card-medium { - border-color: #f1e2bf; -} - -.risk-card-low { - border-color: #dbeafe; -} - -.risk-flag-row, -.risk-flag-heading { - display: flex; - align-items: center; -} - -.risk-flag-row { - justify-content: space-between; - gap: 12px; -} - -.risk-flag-heading { - gap: 12px; - color: #1e293b; - font-size: 14px; -} - -.risk-flag-heading i { - color: #f59e0b; - font-size: 21px; -} - -.risk-card-high .risk-flag-heading i { - color: #ef4444; -} - -.risk-flag-card p { - margin: 18px 0 0; - color: #475569; - font-size: 14px; - line-height: 1.55; -} - -.risk-meta-line { - margin-top: 8px; - color: #1e293b; - font-size: 13px; - font-weight: 800; -} - -.risk-severity-pill { - border-radius: 6px; - padding: 7px 11px; +::v-deep(#manual-review-decision-modal .modal-content) { + border: 1px solid #e5e7eb; + border-radius: 0.75rem; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); + overflow: hidden; font-size: 13px; - font-weight: 800; -} - -.risk-severity-high { - background: #fee2e2; - color: #dc2626; -} - -.risk-severity-medium { - background: #fff7ed; - color: #f97316; -} - -.risk-severity-low { - background: #eff6ff; - color: #2563eb; -} - -.risk-evidence-btn { - margin-top: 18px; - border: none; - background: transparent; - color: #0b63ce; - font-weight: 800; - padding: 0; -} - -.review-decision-panel h4 { - margin: 8px 0 18px; - color: #111827; - font-size: 16px; - font-weight: 800; -} - -.decision-radio, -.reason-radio { - display: flex; - align-items: center; - gap: 10px; - color: #1f2a44; - font-size: 14px; - font-weight: 700; - margin-bottom: 10px; -} - -.reason-radio { - color: #475569; - font-weight: 500; } -.decision-radio input, -.reason-radio input { - width: 17px; - height: 17px; - accent-color: #2563eb; +::v-deep(#manual-review-decision-modal .modal-header) { + padding: 16px 20px; } -.decision-callout { - display: flex; - align-items: center; - gap: 12px; - border-radius: 6px; - padding: 15px 18px; +::v-deep(#manual-review-decision-modal .modal-title) { font-size: 14px; - line-height: 1.45; -} - -.approve-callout { - border: 1px solid #bbf7d0; - background: #f0fdf4; - color: #47675a; -} - -.approve-callout i { - color: #22c55e; -} - -.reject-callout { - border: 1px solid #fecaca; - background: #fff7f7; - color: #475569; -} - -.reject-callout i { - color: #ef4444; -} - -.review-field-group { - margin-top: 20px; -} - -.review-field-group > label { - color: #1f2a44; - font-size: 13px; - font-weight: 800; -} - -.review-field-group > label span { - color: #ef4444; -} - -.review-field-group small, -.review-field-hint { - color: #64748b; - font-weight: 500; + font-weight: 600; } -.review-field-hint { - margin: 12px 0; +::v-deep(#manual-review-decision-modal .custom-control-label), +::v-deep(#manual-review-decision-modal .alert), +::v-deep(#manual-review-decision-modal .form-control), +::v-deep(#manual-review-decision-modal .btn) { font-size: 13px; } -.review-field-group textarea { - width: 100%; - resize: none; - border: 1px solid #dbe1ea; - border-radius: 6px; - padding: 12px; - color: #1f2937; - font-size: 14px; -} - -.review-field-group textarea:focus { - border-color: #2563eb; - outline: none; - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); +::v-deep(#manual-review-decision-modal .modal-body) { + background: #f9fafb; + padding: 24px; } -.comment-counter { - margin-top: 8px; - color: #64748b; - font-size: 13px; - text-align: right; +::v-deep(#manual-review-decision-modal .modal-footer) { + background: #fff; + border-top: 1px solid #e5e7eb; + padding: 12px 20px; } -.review-modal-actions { - display: flex; - justify-content: flex-end; - gap: 20px; - margin-top: 18px; +.manual-review-cancel-btn { + background: #fff !important; + border-color: #6c757d !important; + color: #6c757d !important; } -.review-cancel-btn, -.review-submit-btn { - min-width: 132px; - border-radius: 6px; - padding: 10px 24px; - font-weight: 800; +.manual-review-cancel-btn:hover, +.manual-review-cancel-btn:focus { + background: #6c757d !important; + color: #fff !important; } -.review-cancel-btn { - border: 1px solid #cbd5e1; - background: #fff; - color: #334155; +.manual-review-submit-btn { + background: #3b82f6 !important; + border-color: #3b82f6 !important; + color: #fff !important; } -.review-submit-btn { - background: #075eea; - border: 1px solid #075eea; - color: #fff; +.manual-review-submit-btn:hover, +.manual-review-submit-btn:focus { + background: #2563eb !important; + border-color: #2563eb !important; + color: #fff !important; } -.review-submit-btn:hover { - background: #064fc4; - color: #fff; +.manual-review-submit-btn:disabled { + background: #3b82f6 !important; + border-color: #3b82f6 !important; + color: #fff !important; + opacity: 0.65; } -.review-submit-btn:disabled { - cursor: not-allowed; - opacity: 0.65; +.risk-flag-list { + max-height: 460px; + overflow-y: auto; + padding-right: 4px; } @media (max-width: 960px) { @@ -618,23 +354,6 @@ justify-content: stretch; } - .review-modal-shell { - padding: 22px; - } - - .review-modal-grid { - grid-template-columns: 1fr; - } - - .review-modal-actions { - gap: 12px; - } - - .review-cancel-btn, - .review-submit-btn { - flex: 1; - min-width: 0; - } } .timeline-item { @@ -703,116 +422,95 @@ .info-actions { display: flex; align-items: center; - justify-content: flex-end; - gap: 8px; + border-radius: 6px; + font-size: 12px; + justify-content: center; + gap: 6px; + min-height: 36px; + min-width: 80px; + padding: 6px 12px; } .decision-history-wrap { + margin-left: 4px; + padding-left: 20px; position: relative; - margin: 4px 0 0 14px; - padding-left: 28px; } .decision-history-wrap::before { + background: #e5e7eb; + bottom: 14px; content: ""; + left: 5px; position: absolute; - left: 13px; - top: 18px; - bottom: 18px; + top: 12px; width: 1px; - background: #e5e7eb; } .decision-history-item { + padding: 0 0 10px; position: relative; - padding: 0 0 22px 18px; -} - -.decision-history-item:last-child { - padding-bottom: 0; } -.decision-history-index { - position: absolute; - left: -29px; - top: 0; - width: 30px; - height: 30px; - border: 1px solid #e5e7eb; - border-radius: 50%; +.decision-history-item::before { background: #fff; - color: #374151; - display: flex; - align-items: center; - justify-content: center; - font-size: 13px; - font-weight: 800; + border: 2px solid #9ca3af; + border-radius: 50%; + content: ""; + height: 10px; + left: -20px; + position: absolute; + top: 12px; + width: 10px; z-index: 1; } -.decision-history-label { - color: #64748b; - font-size: 12px; - font-weight: 600; - margin-bottom: 4px; +.decision-history-item:first-child::before { + background: #6b7280; + border-color: #6b7280; } -.decision-history-value { - color: #1f2937; - font-size: 14px; - font-weight: 700; - margin-bottom: 14px; - word-break: break-word; +.decision-history-item:last-child { + padding-bottom: 0; } -.decision-status-pill { - display: inline-flex; - align-items: center; - border-radius: 7px; - padding: 7px 12px; - font-size: 14px; - font-weight: 800; +.decision-history-event { + background: #f9fafb; + border: 1px solid #eef0f3; + border-radius: 6px; + padding: 9px 11px; } -.decision-status-review { - background: #fde68a; - color: #92400e; +.decision-history-event-header { + align-items: center; + border-bottom: 1px solid #e5e7eb; + display: flex; + justify-content: space-between; + padding-bottom: 7px; } -.decision-status-approved { - background: #dcfce7; - color: #166534; +.decision-history-grid { + display: grid; + gap: 5px 10px; + grid-template-columns: 96px minmax(0, 1fr); + margin-top: 7px; } -.decision-status-rejected { - background: #fecaca; - color: #991b1b; +.decision-history-label { + color: #6b7280; + font-size: 11px; + font-weight: 500; } -.decision-reason-box { - display: flex; - align-items: flex-start; - gap: 10px; - border: 1px solid #fecaca; - background: #fff1f2; +.decision-history-value { color: #374151; - border-radius: 7px; - padding: 10px 12px; - font-size: 13px; - font-weight: 600; - line-height: 1.4; - margin-bottom: 14px; -} - -.decision-reason-box i { - color: #dc2626; - margin-top: 2px; -} - -.decision-history-divider { - height: 1px; - background: #e5e7eb; - margin: 4px 0 22px; + font-size: 12px; + font-weight: 500; + min-width: 0; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; } @@ -889,11 +587,7 @@ >
-
- +
@@ -1105,45 +802,60 @@
-
{{ index + 1 }}
- -
Status
-
- - {{ decisionStatusLabel(decision.action) }} - -
+
+
+ Status + + {{ decisionStatusLabel(decision.action) }} + +
+
+ Decided By + + {{ decision.decidedBy || "-" }} + -
Decided By
-
{{ decision.decidedBy || "-" }}
+ Time + + {{ formatDate(decision.decidedAt) }} + -
Time
-
{{ formatDate(decision.decidedAt) }}
+ - - - - -
+
@@ -1451,124 +1163,142 @@ v-model="showManualReviewModal" size="xl" centered - hide-header - hide-footer - dialog-class="manual-review-dialog" - body-class="manual-review-modal-body" + scrollable + title="Review verification and take action" + header-bg-variant="dark" + header-text-variant="light" > -
- - -
-

Review verification and take action

-

Review the risk flags below and decide to approve or reject this verification.

-
- -
-
-
-
-
- - Review Required -
-

This verification passed automated checks but requires manual review before it can be approved.

-
-
+

+ 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 }} -
- +
+ {{ flag.title }} + {{ formatSeverity(flag.severity) }}
-

{{ flag.description }}

-
{{ flag.metaLine }}
- -
-
-
- -
-

Take decision

- - -
- - This verification will be approved and the user can proceed. +

{{ flag.description }}

+
+ {{ flag.metaLine }} +
+
+ + - -
- - This verification will be rejected and the user will not be able to proceed. -
+ + +
Take decision
-
- -
Common reasons
-
-
- -
- - -
-
+ + + + + @@ -1652,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 = { @@ -1921,15 +1656,21 @@ export default { 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 || "", - })); + 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; @@ -2226,17 +1967,17 @@ export default { riskSeverityClass(severity) { const value = String(severity || "MEDIUM").toLowerCase(); return { - "risk-severity-high": value === "high", - "risk-severity-medium": value === "medium", - "risk-severity-low": value === "low", + "badge-outline-danger": value === "high", + "badge-outline-warning": value === "medium", + "badge-outline-secondary": value === "low", }; }, riskFlagCardClass(severity) { const value = String(severity || "MEDIUM").toLowerCase(); return { - "risk-card-high": value === "high", - "risk-card-medium": value === "medium", - "risk-card-low": value === "low", + "border-danger": value === "high", + "border-warning": value === "medium", + "border-secondary": value === "low", }; }, riskFlagIconClass(severity) { @@ -2255,9 +1996,9 @@ export default { return this.formatRiskCode(action || "Decision"); }, decisionStatusClass(action) { - if (action === "REJECTED") return "decision-status-rejected"; - if (action === "APPROVED" || action === "Success") return "decision-status-approved"; - return "decision-status-review"; + 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); @@ -2265,30 +2006,8 @@ export default { return this.formatRiskCode(reasonCode); }, - viewRiskEvidence(flag) { - const code = flag?.code || ""; - const step = flag?.associatedStep || flag?.source || ""; - let targetId = "personal-info"; - - if (/LIVENESS|SELFIE|SPOOF|FACE/.test(`${code} ${step}`)) { - targetId = "liveliness-info"; - } - - if (/OCR|DOCUMENT|JURISDICTION|NATIONALITY|BIOMETRIC/.test(`${code} ${step}`)) { - targetId = "face-auth-info"; - } - - if (/ZKP|PROOF|AGE/.test(`${code} ${step}`)) { - targetId = "zkp-verification-info"; - } - - this.closeManualReviewModal(); - this.$nextTick(() => { - const target = document.getElementById(targetId); - if (target) { - target.scrollIntoView({ behavior: "smooth", block: "start" }); - } - }); + 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 b24ab9b..cc65536 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,18 @@ ul { margin-left: 18px; } +.country-dropdown-item { + align-items: center; + display: flex; + justify-content: space-between; + width: 100%; +} + +.jurisdiction-action-column { + grid-column: 1 / -1; + max-width: 440px; +} + .jurisdiction-action-help { color: #6b7280; font-size: 0.86rem; @@ -225,6 +258,26 @@ ul { 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; @@ -482,36 +535,32 @@ ul { {{ widgetConfigUI.jurisdictionRules.secondaryDescription }}

-
-
+
+
Enforcement Strategy
-
-
+
-
+
Target Countries ({{ selectedJurisdictionCountries.length }})
@@ -541,22 +590,32 @@ ul { outlined dense hide-details - clearable - :menu-props="{ maxHeight: 320 }" - placeholder="Select or search country..." + label="Select or search country..." + :menu-props="{ maxHeight: 320, offsetY: true, closeOnContentClick: false }" >
-
+
Action on Match
country !== countryCode) }, + isJurisdictionCountrySelected(countryCode) { + return (this.widgetConfigTemp.jurisdictionRules.countries || []).includes(countryCode) + }, validateJurisdictionRules() { this.ensureJurisdictionRules() const rules = this.widgetConfigTemp.jurisdictionRules From a81c8c60da1f12a5505fd5a7e6571c84ab92d0c4 Mon Sep 17 00:00:00 2001 From: Pratap2018 Date: Mon, 24 Aug 2026 16:51:00 +0530 Subject: [PATCH 6/7] update ui --- src/views/playground/WidgetConfig/Index.vue | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/views/playground/WidgetConfig/Index.vue b/src/views/playground/WidgetConfig/Index.vue index cc65536..5c59001 100644 --- a/src/views/playground/WidgetConfig/Index.vue +++ b/src/views/playground/WidgetConfig/Index.vue @@ -755,20 +755,6 @@ export default { immediate: true }, - 'widgetConfigTemp.jurisdictionRules.enabled': { - handler(enabled) { - if (!enabled && this.widgetConfigTemp.jurisdictionRules) { - this.widgetConfigTemp.jurisdictionRules.countries = [] - } - } - }, - 'widgetConfigTemp.jurisdictionRules.strategy': { - handler(newStrategy, oldStrategy) { - if (oldStrategy && newStrategy !== oldStrategy && this.widgetConfigTemp.jurisdictionRules) { - this.widgetConfigTemp.jurisdictionRules.countries = [] - } - } - } }, computed: { ...mapState({ From edb15308be46bc5505ddfcbb667f5a98e25d2cc1 Mon Sep 17 00:00:00 2001 From: Pratap2018 Date: Mon, 24 Aug 2026 16:54:18 +0530 Subject: [PATCH 7/7] update --- src/views/playground/WidgetConfig/Index.vue | 132 +++++++++++++++----- 1 file changed, 100 insertions(+), 32 deletions(-) diff --git a/src/views/playground/WidgetConfig/Index.vue b/src/views/playground/WidgetConfig/Index.vue index 5c59001..01cc544 100644 --- a/src/views/playground/WidgetConfig/Index.vue +++ b/src/views/playground/WidgetConfig/Index.vue @@ -246,6 +246,69 @@ ul { 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; @@ -581,38 +644,43 @@ ul {
- - - - - +
+ + Select or search country... + + + + + + +