kwikid-components-react

{ "title": "Customer Basic Details", "key": "CUSTOMER_DETAILS", "fields": [ { "type": "title", "label": "Customer Information", "key": "customer_information_title" }, { "type": "html", "key": "customer_info_description", "html": "<div style='margin-bottom: 20px; color: #666;'>Please provide the following personal details to complete the customer profile.</div>" }, { "label": "Customer Type", "type": "radio", "key": "customerType", "disabled": false, "validators": { "required": true }, "properties": { "readOnly": false, "orientation": "horizontal" }, "options": [ { "label": "Individual", "value": "individual" }, { "label": "Business", "value": "business" } ], "connectedElements": { "connectedFields": [ { "key": "businessName", "triggers": ["ON_INIT", "ON_CHANGE"], "rules": [ { "id": "1", "key": "VALUE_CHECK", "props": { "value": { "source": { "key": "OBJECT", "props": { "object": { "key": "FORM_DATA", "path": "$.customerType" } } } }, "pattern": { "key": "CUSTOM", "pattern": "^(business)$" } } } ], "actions": [ { "id": "1", "key": "FIELD_SHOW", "condition": "1", "props": { "fieldKey": "businessName" } }, { "id": "2", "key": "FIELD_HIDE", "condition": "NOT(1)", "props": { "fieldKey": "businessName" } } ] }, { "key": "gstNumber", "triggers": ["ON_INIT", "ON_CHANGE"], "rules": [ { "id": "1", "key": "VALUE_CHECK", "props": { "value": { "source": { "key": "OBJECT", "props": { "object": { "key": "FORM_DATA", "path": "$.customerType" } } } }, "pattern": { "key": "CUSTOM", "pattern": "^(business)$" } } } ], "actions": [ { "id": "1", "key": "FIELD_SHOW", "condition": "1", "props": { "fieldKey": "gstNumber" } }, { "id": "2", "key": "FIELD_HIDE", "condition": "NOT(1)", "props": { "fieldKey": "gstNumber" } } ] } ] } }, { "label": "Business Name", "type": "text", "key": "businessName", "disabled": false, "hidden": true, "validators": { "required": true }, "properties": { "placeholder": "Enter business name", "readOnly": false } }, { "label": "GST Number", "type": "text", "key": "gstNumber", "disabled": false, "hidden": true, "validators": { "required": true, "pattern": { "key": "CUSTOM", "pattern": "^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$" } }, "properties": { "placeholder": "Enter 15-digit GST number", "readOnly": false } }, { "label": "Salutation", "type": "select", "key": "salutation", "disabled": false, "validators": { "required": false }, "properties": { "placeholder": "Select salutation", "readOnly": false }, "options": [ { "label": "Mr.", "value": "mr" }, { "label": "Mrs.", "value": "mrs" }, { "label": "Ms.", "value": "ms" }, { "label": "Dr.", "value": "dr" } ] }, { "label": "First Name", "type": "text", "key": "firstName", "disabled": false, "validators": { "required": true }, "properties": { "placeholder": "Enter your first name", "readOnly": false } }, { "label": "Middle Name", "type": "text", "key": "middleName", "disabled": false, "validators": { "required": false }, "properties": { "placeholder": "Enter your middle name (optional)", "readOnly": false } }, { "label": "Last Name", "type": "text", "key": "lastName", "disabled": false, "validators": { "required": true }, "properties": { "placeholder": "Enter your last name", "readOnly": false } }, { "label": "Date of Birth", "type": "date", "key": "dateOfBirth", "disabled": false, "validators": { "required": true }, "properties": { "placeholder": "Select your date of birth", "readOnly": false, "min": { "year": 1940, "month": 1, "day": 1 }, "max": { "year": 2005, "month": 12, "day": 31 } } }, { "label": "Gender", "type": "radio", "key": "gender", "disabled": false, "validators": { "required": true }, "properties": { "readOnly": false, "orientation": "horizontal" }, "options": [ { "label": "Male", "value": "male" }, { "label": "Female", "value": "female" }, { "label": "Other", "value": "other" }, { "label": "Prefer not to say", "value": "prefer-not-to-say" } ] }, { "label": "Email Address", "type": "text", "key": "email", "disabled": false, "validators": { "required": true, "pattern": { "key": "IS_EMAIL" } }, "properties": { "placeholder": "Enter your email address", "readOnly": false } }, { "label": "Phone Number", "type": "text", "key": "phone", "disabled": false, "validators": { "pattern": { "key": "IS_MOBILE_NUMBER" }, "required": true }, "properties": { "placeholder": "Enter your phone number", "readOnly": false } }, { "label": "Alternative Phone Number", "type": "text", "key": "alternativePhone", "disabled": false, "validators": { "pattern": { "key": "IS_MOBILE_NUMBER" }, "required": false }, "properties": { "placeholder": "Enter alternative phone number (optional)", "readOnly": false } }, { "label": "Nationality", "type": "select", "key": "nationality", "disabled": false, "validators": { "required": true }, "properties": { "placeholder": "Select your nationality", "readOnly": false }, "options": [ { "label": "Indian", "value": "in" }, { "label": "American", "value": "us" }, { "label": "British", "value": "uk" }, { "label": "Canadian", "value": "ca" }, { "label": "Australian", "value": "au" }, { "label": "Other", "value": "other" } ] }, { "label": "Marital Status", "type": "select", "key": "maritalStatus", "disabled": false, "validators": { "required": false }, "properties": { "placeholder": "Select your marital status", "readOnly": false }, "options": [ { "label": "Single", "value": "single" }, { "label": "Married", "value": "married" }, { "label": "Divorced", "value": "divorced" }, { "label": "Widowed", "value": "widowed" } ] }, { "label": "Emergency Contact Name", "type": "text", "key": "emergencyContactName", "disabled": false, "validators": { "required": false }, "properties": { "placeholder": "Enter emergency contact name", "readOnly": false } }, { "label": "Emergency Contact Number", "type": "text", "key": "emergencyContactNumber", "disabled": false, "validators": { "pattern": { "key": "IS_MOBILE_NUMBER" }, "required": false }, "properties": { "placeholder": "Enter emergency contact number", "readOnly": false } }, { "label": "Upload Photo", "type": "file", "key": "photo", "disabled": false, "validators": { "required": false }, "properties": { "accept": "image/jpeg,image/png,image/jpg", "placeholder": "Upload your photo (optional)", "readOnly": false } }, { "label": "Notes/Additional Information", "type": "textarea", "key": "notes", "disabled": false, "validators": { "required": false }, "properties": { "placeholder": "Any additional information about the customer", "readOnly": false } }, { "label": "I consent to the processing of my personal information", "type": "checkbox", "key": "dataConsent", "disabled": false, "validators": { "required": true }, "properties": { "readOnly": false } }, { "type": "button", "label": "Save Customer Details", "key": "save_details_button", "properties": { "variant": "primary", "size": "medium", "action": "submit" } } ], "layout": { "type": "vertical", "styles": { "container": { "maxWidth": "800px", "margin": "0 auto", "padding": "20px", "backgroundColor": "#ffffff", "borderRadius": "8px" } } } }