UNPKG

kwikid-components-react

Version:

KwikID's Component Library in React

313 lines (312 loc) 7.62 kB
{ "fieldGroups": {}, "fields": [ { "type": "title", "label": "Agent/Admin Onboarding", "key": "agent_onboarding_title" }, { "label": "Agent Type", "type": "radio", "key": "agent_type", "disabled": false, "validators": { "required": true }, "properties": { "readOnly": false, "orientation": "horizontal" }, "options": [ { "label": "New Agent", "value": "new" }, { "label": "Transfer Agent", "value": "transfer" } ] }, { "label": "Full Name", "type": "text", "key": "agent_name", "disabled": false, "validators": { "required": true, "pattern": { "key": "CUSTOM", "pattern": "^[A-Za-z .'_-]{3,50}$" } }, "properties": { "placeholder": "Enter agent's full name", "readOnly": false } }, { "label": "Email Address", "type": "text", "key": "agent_email", "disabled": false, "validators": { "required": true, "pattern": { "key": "IS_EMAIL" } }, "properties": { "placeholder": "Enter agent's email address", "readOnly": false } }, { "label": "Phone Number", "type": "text", "key": "agent_phone", "disabled": false, "validators": { "required": true, "pattern": { "key": "IS_MOBILE_NUMBER" } }, "properties": { "placeholder": "Enter agent's phone number", "readOnly": false } }, { "label": "Agent ID", "type": "text", "key": "agent_id", "disabled": false, "validators": { "required": true, "pattern": { "key": "CUSTOM", "pattern": "^[A-Za-z0-9_-]{3,20}$" } }, "properties": { "placeholder": "Create agent's unique ID", "readOnly": false } }, { "label": "Password", "type": "password", "key": "agent_password", "disabled": false, "validators": { "required": true, "pattern": { "key": "CUSTOM", "pattern": "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{8,}$" } }, "properties": { "placeholder": "Create a secure password", "readOnly": false, "hintContent": "Password must contain at least 8 characters, including letters, numbers, and special characters" } }, { "label": "Confirm Password", "type": "password", "key": "confirm_password", "disabled": false, "validators": { "required": true, "matches": "agent_password" }, "properties": { "placeholder": "Confirm password", "readOnly": false } }, { "label": "Role", "type": "radio", "key": "agent_role", "disabled": false, "validators": { "required": true }, "properties": { "placeholder": "Select agent role", "readOnly": false, "orientation": "vertical" }, "options": [ { "label": "Manager/Admin", "value": "admin" }, { "label": "Field Verifier", "value": "field_verifier" }, { "label": "Customer Support", "value": "support" }, { "label": "Document Reviewer", "value": "reviewer" } ], "connectedElements": { "connectedFields": [ { "key": "access_level", "triggers": ["ON_INIT", "ON_CHANGE"], "rules": [ { "id": "1", "key": "VALUE_CHECK", "props": { "value": { "source": { "key": "OBJECT", "props": { "object": { "key": "FORM_DATA", "path": "$.agent_role" } } } }, "pattern": { "key": "CUSTOM", "pattern": "^(admin)$" } } } ], "actions": [ { "id": "1", "key": "FIELD_SHOW", "condition": "1", "props": { "fieldKey": "access_level" } }, { "id": "2", "key": "FIELD_HIDE", "condition": "NOT(1)", "props": { "fieldKey": "access_level" } } ] } ] } }, { "label": "Access Level", "type": "select", "key": "access_level", "disabled": false, "hidden": true, "validators": { "required": true }, "properties": { "placeholder": "Select access level", "readOnly": false }, "options": [ { "label": "Full Access", "value": "full" }, { "label": "Limited Access", "value": "limited" }, { "label": "Read Only", "value": "read_only" } ] }, { "label": "Branch/Location", "type": "select", "key": "branch", "disabled": false, "validators": { "required": true }, "properties": { "placeholder": "Select branch or location", "readOnly": false }, "options": [ { "label": "Head Office", "value": "head_office" }, { "label": "North Region", "value": "north" }, { "label": "South Region", "value": "south" }, { "label": "East Region", "value": "east" }, { "label": "West Region", "value": "west" } ] }, { "label": "Upload Agent Photo", "type": "file", "key": "agent_photo", "disabled": false, "validators": { "required": false }, "properties": { "accept": "image/jpeg,image/png,image/jpg", "placeholder": "Upload profile photo", "readOnly": false } }, { "label": "I confirm that the information provided is accurate and complete", "type": "checkbox", "key": "information_confirmation", "disabled": false, "validators": { "required": true }, "properties": { "readOnly": false } }, { "label": "I agree to the terms and policies of the verification platform", "type": "checkbox", "key": "terms_agreement", "disabled": false, "validators": { "required": true }, "properties": { "readOnly": false } }, { "type": "button", "label": "Create Agent Account", "key": "create_agent_button", "properties": { "variant": "primary", "size": "medium", "action": "submit" } } ], "key": "AGENT_ONBOARDING", "properties": { "header": { "title": { "label": "Agent Onboarding" } }, "main": { "styles": "" }, "styles": { "padding": "1rem", "minWidth": "340px" } }, "props": { "title": "Agent Onboarding" }, "title": "Agent Onboarding", "layout": { "type": "vertical", "styles": { "container": { "maxWidth": "700px", "margin": "0 auto", "padding": "20px", "backgroundColor": "#ffffff", "borderRadius": "8px" } } } }