kwikid-components-react
Version:
KwikID's Component Library in React
313 lines (312 loc) • 7.62 kB
JSON
{
"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"
}
}
}
}