diff --git a/app/src/main/res/raw/mock_forms.json b/app/src/main/res/raw/mock_forms.json index 17d4f61..86f2734 100644 --- a/app/src/main/res/raw/mock_forms.json +++ b/app/src/main/res/raw/mock_forms.json @@ -5,25 +5,46 @@ "description": "This widget is used to input name. Tt also has validation on text enter.", "uiTronConfig": { "data": { - "label_text_179": { + "label_text_qEMbq": { "text": "Full name", "viewType": "Text" }, - "text_input_179": { + "text_input_qEMbq": { "hint": "Enter your full name here", - "value": "", "viewType": "OutlinedTextField", + "inputText": "", + "onFocusAction": { + "actions": [ + { + "type": "AnalyticsActionV2", + "eventName": "PL_Basic_Name_Entered", + "eventProperties": [ + { + "key": "text_input_qEMbq", + "keySuffix": "_input", + "propertyName": "firstname_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, "onValueChangeAction": { "actions": [ { "type": "ValidateDataAction", "validations": [ { - "key": "text_input_179", + "key": "text_input_qEMbq", "uiTronValidations": [ { - "maxLength": "10", - "minLength": "3", "onFailure": { "actions": [ { @@ -33,9 +54,9 @@ "data": { "hasError": true, "viewType": "OutlinedTextField", - "errorMessage": "Name should of be at least 3 and at max 10 characters" + "errorMessage": "Please enter your full name" }, - "layoutId": "text_input_179" + "layoutId": "text_input_qEMbq" } ] } @@ -51,7 +72,45 @@ "hasError": false, "viewType": "OutlinedTextField" }, - "layoutId": "text_input_179" + "layoutId": "text_input_qEMbq" + } + ] + } + ] + }, + "validationType": "NOT_BLANK" + }, + { + "maxLength": "60", + "minLength": "3", + "onFailure": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": true, + "viewType": "OutlinedTextField", + "errorMessage": "Please enter a valid name" + }, + "layoutId": "text_input_qEMbq" + } + ] + } + ] + }, + "onSuccess": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": false, + "viewType": "OutlinedTextField" + }, + "layoutId": "text_input_qEMbq" } ] } @@ -66,15 +125,18 @@ ] } }, - "label_text_info_179": { + "label_text_info_qEMbq": { "text": " (As per PAN card) ", "viewType": "Text" }, - "label_right_drawable_179": { + "label_right_drawable_qEMbq": { "iconUrl": "", + "onClick": { + "actions": [] + }, "viewType": "Image" }, - "textfield_leading_icon_179": { + "textfield_leading_icon_qEMbq": { "iconUrl": "", "viewType": "Image" } @@ -84,7 +146,10 @@ "property": { "width": "MATCH_PARENT", "height": "WRAP_CONTENT", - "layoutId": "label_with_text_input_179", + "padding": { + "top": "24" + }, + "layoutId": "label_with_text_input_qEMbq", "viewType": "Column", "horizontalAlignment": "Start" }, @@ -93,6 +158,9 @@ "property": { "width": "MATCH_PARENT", "height": "WRAP_CONTENT", + "padding": { + "start": 16 + }, "viewType": "Row", "arrangementData": { "arrangementType": "Start" @@ -104,8 +172,11 @@ "property": { "width": "WRAP_CONTENT", "height": "WRAP_CONTENT", + "padding": { + "end": 4 + }, "fontSize": 16, - "layoutId": "label_text_179", + "layoutId": "label_text_qEMbq", "viewType": "Text", "textColor": "#191919", "fontFamily": "ttComposeFontFamily", @@ -116,8 +187,11 @@ "property": { "width": "WRAP_CONTENT", "height": "WRAP_CONTENT", + "padding": { + "end": 4 + }, "fontSize": 14, - "layoutId": "label_text_info_179", + "layoutId": "label_text_info_qEMbq", "viewType": "Text", "textColor": "#6B6B6B", "fontFamily": "ttComposeFontFamily", @@ -128,7 +202,7 @@ "property": { "width": "16", "height": "16", - "layoutId": "label_right_drawable_179", + "layoutId": "label_right_drawable_qEMbq", "viewType": "Image" } } @@ -149,13 +223,15 @@ "height": "WRAP_CONTENT", "maxChar": "60", "padding": { - "top": 8 + "end": 16, + "top": 8, + "start": 16 }, - "layoutId": "text_input_179", + "layoutId": "text_input_qEMbq", "viewType": "OutlinedTextField", "errorView": { "data": { - "text_input_failure_icon_179": { + "text_input_failure_icon_qEMbq": { "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_red_exclamation_info_16x16.png", "viewType": "Image" } @@ -164,10 +240,7 @@ { "property": { "width": "MATCH_PARENT", - "padding": { - "start": 16 - }, - "layoutId": "text_input_failure_view_179", + "layoutId": "text_input_failure_view_qEMbq", "viewType": "Row", "arrangementData": { "arrangementType": "Start" @@ -178,7 +251,7 @@ "property": { "width": "16", "height": "16", - "layoutId": "text_input_failure_icon_179", + "layoutId": "text_input_failure_icon_qEMbq", "viewType": "Image" } }, @@ -193,7 +266,7 @@ "bottom": 0 }, "fontSize": 12, - "layoutId": "text_input_failure_message_179", + "layoutId": "text_input_failure_message_qEMbq", "viewType": "Text", "textColor": "#FF0000", "fontFamily": "ttComposeFontFamily", @@ -212,12 +285,11 @@ }, "textStyle": { "fontSize": 14, - "textColor": "#191919", - "fontWeight": "BOLD" + "textColor": "#191919" }, "successView": { "data": { - "text_input_success_icon_179": { + "text_input_success_icon_qEMbq": { "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_green_exclamation_info_16x16.png", "viewType": "Image" } @@ -229,7 +301,7 @@ "padding": { "start": 16 }, - "layoutId": "text_input_success_view_179", + "layoutId": "text_input_success_view_qEMbq", "viewType": "Row", "arrangementData": { "arrangementType": "Start" @@ -240,7 +312,7 @@ "property": { "width": "16", "height": "16", - "layoutId": "text_input_success_icon_179", + "layoutId": "text_input_success_icon_qEMbq", "viewType": "Image" } }, @@ -255,7 +327,7 @@ "bottom": 0 }, "fontSize": 12, - "layoutId": "text_input_success_message_179", + "layoutId": "text_input_success_message_qEMbq", "viewType": "Text", "textColor": "#00A300", "fontFamily": "ttComposeFontFamily", @@ -270,6 +342,7 @@ }, "isDataMutable": true, "keyboardOptions": { + "imeAction": "Next", "keyboardType": "Text", "capitalization": "Words" }, @@ -278,21 +351,1909 @@ "property": { "width": "12", "height": "12", - "layoutId": "textfield_leading_icon_179", + "layoutId": "textfield_leading_icon_qEMbq", "viewType": "Image", "isVisible": "false" } } }, - "errorMessageLayoutId": "text_input_failure_message_179", + "errorMessageLayoutId": "text_input_failure_message_qEMbq", "visualTransformation": { "type": "" }, - "successMessageLayoutId": "text_input_success_message_179", + "successMessageLayoutId": "text_input_success_message_qEMbq", "successTextTransformation": { "type": "" }, - "applyValidationOnValueChange": true + "applyValidationOnValueChange": "false" + } + } + ] + } + ] + } + }, + { + "title": "LabelWithDob", + "description": "This widget is used to input date of birth. It also has validation on entering text", + "uiTronConfig": { + "data": { + "date_input_IEiQ9": { + "hint": [ + "DD", + "MM", + "YYYY" + ], + "viewType": "DateTextField", + "inputText": "", + "dateFormat": "ddMMyyyy", + "dateSeparator": " - ", + "onFocusAction": { + "actions": [ + { + "type": "TriggerApiAction", + "fields": [ + { + "name": "", + "source": "WIDGET_OUTPUT" + } + ], + "apiType": "PrefetchPANAction" + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Basic_DOB_Entered", + "eventProperties": [ + { + "key": "date_input_IEiQ9", + "keySuffix": "_input", + "propertyName": "dob_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, + "onValueChangeAction": { + "actions": [ + { + "type": "ValidateDataAction", + "validations": [ + { + "key": "date_input_IEiQ9", + "uiTronValidations": [ + { + "onFailure": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "date_input_IEiQ9": "failure" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": true, + "viewType": "DateTextField", + "errorMessage": "Enter valid date" + }, + "layoutId": "date_input_IEiQ9" + } + ] + } + ] + }, + "onSuccess": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "date_input_IEiQ9": "success" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": false, + "viewType": "DateTextField" + }, + "layoutId": "date_input_IEiQ9" + } + ] + } + ] + }, + "formatPattern": "ddMMyyyy", + "validationType": "DATE_FORMAT" + }, + { + "maxDate": "28032005", + "minDate": "28031968", + "onFailure": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "date_input_IEiQ9": "failure" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": true, + "viewType": "DateTextField", + "errorMessage": "Valid Age Range is from 18 to 55 years" + }, + "layoutId": "date_input_IEiQ9" + } + ] + } + ] + }, + "onSuccess": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "date_input_IEiQ9": "success" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": false, + "viewType": "DateTextField" + }, + "layoutId": "date_input_IEiQ9" + } + ] + } + ] + }, + "formatPattern": "ddMMyyyy", + "validationType": "DATE_RANGE" + } + ] + } + ] + } + ] + } + }, + "label_text_IEiQ9": { + "text": "Date of birth", + "viewType": "Text" + }, + "label_right_drawable_IEiQ9": { + "iconUrl": "", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "top": 24 + }, + "layoutId": "label_with_date_input_IEiQ9", + "viewType": "Column", + "horizontalAlignment": "Start" + }, + "childrenViews": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "start": 16 + }, + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + }, + "verticalAlignment": "CenterVertically" + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "fontSize": 16, + "layoutId": "label_text_IEiQ9", + "viewType": "Text", + "textColor": "#22223D", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_MEDIUM" + } + }, + { + "property": { + "width": "18", + "height": "12", + "padding": { + "start": 6 + }, + "layoutId": "label_right_drawable_IEiQ9", + "viewType": "Image" + } + } + ] + }, + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "layoutId": "date_input_IEiQ9", + "viewType": "DateTextField", + "errorView": { + "data": { + "dob_failure_icon_IEiQ9": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_red_exclamation_info_16x16.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "padding": { + "end": 0, + "top": 0, + "start": 16, + "bottom": 0 + }, + "layoutId": "dob_error_view_IEiQ9", + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + } + }, + "childrenViews": [ + { + "property": { + "width": "16", + "height": "16", + "layoutId": "dob_failure_icon_IEiQ9", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 0, + "top": 0, + "start": 6, + "bottom": 0 + }, + "fontSize": 12, + "layoutId": "dob_failure_message_IEiQ9", + "viewType": "Text", + "textColor": "#EF0000", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR", + "isStateFul": true, + "isDataMutable": true + } + } + ] + } + ] + }, + "statesMap": { + "failure": { + "viewType": "DateTextField", + "borderStroke": { + "color": "#EF0000", + "width": 1 + } + }, + "success": { + "viewType": "DateTextField", + "borderStroke": { + "color": "#22A940", + "width": 1 + } + } + }, + "isStateFul": true, + "rowProperty": { + "shape": { + "radius": { + "topEnd": 8, + "topStart": 8, + "bottomEnd": 8, + "bottomStart": 8 + }, + "shapeType": "RoundedCornerShape" + }, + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 16, + "top": 8, + "start": 16 + } + }, + "successView": { + "data": { + "dob_success_icon_IEiQ9": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_green_exclamation_info_16x16.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "padding": { + "end": 0, + "top": 0, + "start": 16, + "bottom": 0 + }, + "layoutId": "dob_success_view_IEiQ9", + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + } + }, + "childrenViews": [ + { + "property": { + "width": "16", + "height": "16", + "layoutId": "dob_success_icon_IEiQ9", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 0, + "top": 0, + "start": 6, + "bottom": 0 + }, + "fontSize": 12, + "layoutId": "dob_success_message_IEiQ9", + "viewType": "Text", + "textColor": "#22A940", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR", + "isStateFul": true, + "isDataMutable": true + } + } + ] + } + ] + }, + "borderStroke": { + "color": "#E3E5E5", + "width": 1 + }, + "textProperty": { + "padding": { + "top": 13, + "bottom": 13 + }, + "fontSize": 14, + "layoutId": "hint_IEiQ9", + "textColor": "#A8A8A8" + }, + "isDataMutable": true, + "errorMessageLayoutId": "dob_failure_message_IEiQ9", + "textFieldPropertyList": [ + { + "width": "37", + "maxChar": 2, + "padding": { + "top": 13, + "start": 16, + "bottom": 13 + }, + "layoutId": "date_IEiQ9", + "hintStyle": { + "fontSize": 14, + "textColor": "#A8A8A8" + }, + "textStyle": { + "fontSize": 14, + "textAlign": "Center", + "textColor": "#191919" + }, + "keyboardOptions": { + "imeAction": "Next", + "keyboardType": "NumberPassword" + }, + "applyValidationOnValueChange": false + }, + { + "width": "28", + "maxChar": 2, + "padding": { + "top": 13, + "bottom": 13 + }, + "layoutId": "month_IEiQ9", + "hintStyle": { + "fontSize": 14, + "textColor": "#A8A8A8" + }, + "textStyle": { + "fontSize": 14, + "textAlign": "Center", + "textColor": "#191919" + }, + "keyboardOptions": { + "imeAction": "Next", + "keyboardType": "NumberPassword" + }, + "applyValidationOnValueChange": false + }, + { + "width": "57", + "maxChar": 4, + "padding": { + "end": 16, + "top": 13, + "bottom": 13 + }, + "layoutId": "year_IEiQ9", + "hintStyle": { + "fontSize": 14, + "textColor": "#A8A8A8" + }, + "textStyle": { + "fontSize": 14, + "textAlign": "Center", + "textColor": "#191919" + }, + "keyboardOptions": { + "imeAction": "Done", + "keyboardType": "NumberPassword" + }, + "applyValidationOnValueChange": false + } + ], + "successMessageLayoutId": "dob_success_message_IEiQ9", + "successTextTransformation": { + "type": "DOB_TO_READABLE_STRING", + "formatPattern": "ddMMyyyy" + } + } + } + ] + } + ] + } + }, + { + "title": "LabelWithEmploymentTypePills", + "description": "This widget is used to select employment type. It also has validation on select", + "uiTronConfig": { + "data": { + "card_0_Zz3Dp": { + "onClick": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "card_0_Zz3Dp": "select", + "card_1_Zz3Dp": "unselect", + "card_2_Zz3Dp": "unselect", + "pill_0_text_Zz3Dp": "select", + "pill_1_text_Zz3Dp": "unselect", + "pill_2_text_Zz3Dp": "unselect", + "pill_error_Zz3Dp": "hideError" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_salaried_selected_24x24_.png", + "viewType": "Image" + }, + "layoutId": "pill_0_icon_Zz3Dp" + }, + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_self_employed_unselected_24x24.png", + "viewType": "Image" + }, + "layoutId": "pill_1_icon_Zz3Dp" + }, + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_others_unselected_24x24.png", + "viewType": "Image" + }, + "layoutId": "pill_2_icon_Zz3Dp" + } + ] + }, + { + "type": "UpdateStateHandle", + "statesMap": { + "selected_pill_type_data_Zz3Dp_input": "SALARIED" + } + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_EmploymentType_Clicked", + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_EmploymentType_Selected", + "eventProperties": [ + { + "key": "selected_pill_type_data_Zz3Dp", + "keySuffix": "_input", + "propertyName": "profession_type_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, + "viewType": "Card" + }, + "card_1_Zz3Dp": { + "onClick": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "card_0_Zz3Dp": "unselect", + "card_1_Zz3Dp": "select", + "card_2_Zz3Dp": "unselect", + "pill_0_text_Zz3Dp": "unselect", + "pill_1_text_Zz3Dp": "select", + "pill_2_text_Zz3Dp": "unselect", + "pill_error_Zz3Dp": "hideError" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_salaried_unselected_24x24_.png", + "viewType": "Image" + }, + "layoutId": "pill_0_icon_Zz3Dp" + }, + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_self_employed_selected_24x24.png", + "viewType": "Image" + }, + "layoutId": "pill_1_icon_Zz3Dp" + }, + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_others_unselected_24x24.png", + "viewType": "Image" + }, + "layoutId": "pill_2_icon_Zz3Dp" + } + ] + }, + { + "type": "UpdateStateHandle", + "statesMap": { + "selected_pill_type_data_Zz3Dp_input": "SELF" + } + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_EmploymentType_Clicked", + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_EmploymentType_Selected", + "eventProperties": [ + { + "key": "selected_pill_type_data_Zz3Dp", + "keySuffix": "_input", + "propertyName": "profession_type_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, + "viewType": "Card" + }, + "card_2_Zz3Dp": { + "onClick": { + "actions": [ + { + "type": "UpdateViewState", + "viewStates": { + "card_0_Zz3Dp": "unselect", + "card_1_Zz3Dp": "unselect", + "card_2_Zz3Dp": "select", + "pill_0_text_Zz3Dp": "unselect", + "pill_1_text_Zz3Dp": "unselect", + "pill_2_text_Zz3Dp": "select", + "pill_error_Zz3Dp": "hideError" + } + }, + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_salaried_unselected_24x24_.png", + "viewType": "Image" + }, + "layoutId": "pill_0_icon_Zz3Dp" + }, + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_self_employed_unselected_24x24.png", + "viewType": "Image" + }, + "layoutId": "pill_1_icon_Zz3Dp" + }, + { + "data": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_others_selected_24x24.png", + "viewType": "Image" + }, + "layoutId": "pill_2_icon_Zz3Dp" + } + ] + }, + { + "type": "UpdateStateHandle", + "statesMap": { + "selected_pill_type_data_Zz3Dp_input": "OTHERS" + } + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_EmploymentType_Clicked", + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + }, + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_EmploymentType_Selected", + "eventProperties": [ + { + "key": "selected_pill_type_data_Zz3Dp", + "keySuffix": "_input", + "propertyName": "profession_type_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, + "viewType": "Card" + }, + "pill_0_icon_Zz3Dp": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_salaried_unselected_24x24_.png", + "viewType": "Image" + }, + "pill_0_text_Zz3Dp": { + "text": "Salaried", + "viewType": "Text" + }, + "pill_1_icon_Zz3Dp": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_self_employed_unselected_24x24.png", + "viewType": "Image" + }, + "pill_1_text_Zz3Dp": { + "text": "Self Employed", + "viewType": "Text" + }, + "pill_2_icon_Zz3Dp": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_employment_type_others_unselected_24x24.png", + "viewType": "Image" + }, + "pill_2_text_Zz3Dp": { + "text": "Others", + "viewType": "Text" + }, + "pills_title_Zz3Dp": { + "text": "Employment type", + "viewType": "Text" + }, + "pills_error_text_Zz3Dp": { + "text": "Please select an employment type", + "viewType": "Text" + }, + "pills_error_text_icon_Zz3Dp": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_red_exclamation_info_16x16.png", + "viewType": "Image" + }, + "pills_title_info_icon_Zz3Dp": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_blue_exclamation_info_16x16.png", + "onClick": { + "actions": [ + { + "type": "CtaAction", + "ctaData": { + "url": "EMPLOYMENT_TYPE_LABEL_INFO_BOTTOM_SHEET", + "type": "BOTTOMSHEET" + } + } + ] + }, + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "viewType": "Column" + }, + "childrenViews": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "top": 32, + "start": 16 + }, + "viewType": "Row", + "isStateFul": true, + "arrangementData": { + "arrangementType": "Start" + }, + "verticalAlignment": "CenterVertically" + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 6 + }, + "fontSize": 16, + "layoutId": "pills_title_Zz3Dp", + "viewType": "Text", + "textColor": "#191919", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_MEDIUM" + } + }, + { + "property": { + "width": "16", + "height": "16", + "layoutId": "pills_title_info_icon_Zz3Dp", + "viewType": "Image" + } + } + ] + }, + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "top": 16 + }, + "viewType": "Row", + "arrangementData": { + "arrangementType": "SpaceEvenly" + } + }, + "childrenViews": [ + { + "property": { + "shape": { + "size": 12, + "shapeType": "RoundedCornerShape" + }, + "width": "104", + "height": "96", + "layoutId": "card_0_Zz3Dp", + "viewType": "Card", + "elevation": 0, + "statesMap": { + "select": { + "viewType": "Card", + "borderStrokeData": { + "color": "#FF5732", + "width": 1 + } + }, + "unselect": { + "viewType": "Card", + "borderStrokeData": { + "color": "#EBEBEB", + "width": 1 + } + } + }, + "isStateFul": true, + "backgroundColor": "#FFFFFF", + "borderStrokeData": { + "color": "#EBEBEB", + "width": 1 + } + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 8, + "top": 16, + "start": 8, + "bottom": 16 + }, + "viewType": "Column" + }, + "childrenViews": [ + { + "property": { + "width": "24", + "height": "24", + "layoutId": "pill_0_icon_Zz3Dp", + "viewType": "Image", + "isStateFul": true, + "isDataMutable": true + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "top": 8 + }, + "fontSize": 12, + "layoutId": "pill_0_text_Zz3Dp", + "viewType": "Text", + "statesMap": { + "select": { + "viewType": "Text", + "textColor": "#FF5732" + }, + "unselect": { + "viewType": "Text", + "textColor": "#444444" + } + }, + "textColor": "#444444", + "fontFamily": "ttComposeFontFamily", + "isStateFul": true + } + } + ] + } + ] + }, + { + "property": { + "shape": { + "size": 12, + "shapeType": "RoundedCornerShape" + }, + "width": "104", + "height": "96", + "layoutId": "card_1_Zz3Dp", + "viewType": "Card", + "elevation": 0, + "statesMap": { + "select": { + "viewType": "Card", + "borderStrokeData": { + "color": "#FF5732", + "width": 1 + } + }, + "unselect": { + "viewType": "Card", + "borderStrokeData": { + "color": "#EBEBEB", + "width": 1 + } + } + }, + "isStateFul": true, + "backgroundColor": "#FFFFFF", + "borderStrokeData": { + "color": "#EBEBEB", + "width": 1 + } + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 8, + "top": 16, + "start": 8, + "bottom": 16 + }, + "viewType": "Column" + }, + "childrenViews": [ + { + "property": { + "width": "24", + "height": "24", + "layoutId": "pill_1_icon_Zz3Dp", + "viewType": "Image", + "isStateFul": true, + "isDataMutable": true + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "top": 8 + }, + "fontSize": 12, + "layoutId": "pill_1_text_Zz3Dp", + "viewType": "Text", + "statesMap": { + "select": { + "viewType": "Text", + "textColor": "#FF5732" + }, + "unselect": { + "viewType": "Text", + "textColor": "#444444" + } + }, + "textColor": "#444444", + "fontFamily": "ttComposeFontFamily", + "isStateFul": true + } + } + ] + } + ] + }, + { + "property": { + "shape": { + "size": 12, + "shapeType": "RoundedCornerShape" + }, + "width": "104", + "height": "96", + "layoutId": "card_2_Zz3Dp", + "viewType": "Card", + "elevation": 0, + "statesMap": { + "select": { + "viewType": "Card", + "borderStrokeData": { + "color": "#FF5732", + "width": 1 + } + }, + "unselect": { + "viewType": "Card", + "borderStrokeData": { + "color": "#EBEBEB", + "width": 1 + } + } + }, + "isStateFul": true, + "backgroundColor": "#FFFFFF", + "borderStrokeData": { + "color": "#EBEBEB", + "width": 1 + } + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 8, + "top": 16, + "start": 8, + "bottom": 16 + }, + "viewType": "Column" + }, + "childrenViews": [ + { + "property": { + "width": "24", + "height": "24", + "layoutId": "pill_2_icon_Zz3Dp", + "viewType": "Image", + "isStateFul": true, + "isDataMutable": true + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "top": 8 + }, + "fontSize": 12, + "layoutId": "pill_2_text_Zz3Dp", + "viewType": "Text", + "statesMap": { + "select": { + "viewType": "Text", + "textColor": "#FF5732" + }, + "unselect": { + "viewType": "Text", + "textColor": "#444444" + } + }, + "textColor": "#444444", + "fontFamily": "ttComposeFontFamily", + "isStateFul": true + } + } + ] + } + ] + } + ] + }, + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 20, + "top": 8, + "start": 20 + }, + "layoutId": "pill_error_Zz3Dp", + "viewType": "Row", + "isVisible": false, + "statesMap": { + "hideError": { + "viewType": "Row", + "isVisible": false + }, + "showError": { + "viewType": "Row", + "isVisible": true + } + }, + "isStateFul": true, + "arrangementData": { + "arrangementType": "Start" + }, + "verticalAlignment": "CenterVertically" + }, + "childrenViews": [ + { + "property": { + "width": "18", + "height": "12", + "padding": { + "end": 6 + }, + "layoutId": "pills_error_text_icon_Zz3Dp", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "fontSize": 12, + "layoutId": "pills_error_text_Zz3Dp", + "viewType": "Text", + "textColor": "#EF0000", + "fontFamily": "ttComposeFontFamily" + } + } + ] + } + ] + } + ] + } + }, + { + "title": "LabelWithPan", + "description": "This widget is used to input pan number. It also has validation on entering text", + "uiTronConfig": { + "data": { + "label_text_cPfyI": { + "text": "PAN number", + "viewType": "Text" + }, + "text_input_cPfyI": { + "hint": "Enter your 10-digit PAN number", + "viewType": "OutlinedTextField", + "inputText": "", + "onFocusAction": { + "actions": [ + { + "type": "AnalyticsActionV2", + "eventName": "PL_Basic_PAN_Entered", + "eventProperties": [ + { + "key": "text_input_cPfyI", + "keySuffix": "_input", + "propertyName": "pan_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, + "onValueChangeAction": { + "actions": [ + { + "type": "ValidateDataAction", + "validations": [ + { + "key": "text_input_cPfyI", + "uiTronValidations": [ + { + "regex": "[A-Z]{5}[0-9]{4}[A-Z]{1}", + "onFailure": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": true, + "viewType": "OutlinedTextField", + "errorMessage": "Please enter correct format" + }, + "layoutId": "text_input_cPfyI" + } + ] + } + ] + }, + "onSuccess": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": false, + "viewType": "OutlinedTextField" + }, + "layoutId": "text_input_cPfyI" + } + ] + } + ] + }, + "validationType": "REGEX" + } + ] + } + ] + } + ] + } + }, + "label_text_info_cPfyI": { + "text": "", + "viewType": "Text" + }, + "label_right_drawable_cPfyI": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_blue_exclamation_info_16x16.png", + "onClick": { + "actions": [ + { + "type": "CtaAction", + "ctaData": { + "url": "PAN_LABEL_INFO_BOTTOM_SHEET", + "type": "BOTTOMSHEET" + } + } + ] + }, + "viewType": "Image" + }, + "textfield_leading_icon_cPfyI": { + "iconUrl": "", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "top": "24" + }, + "layoutId": "label_with_text_input_cPfyI", + "viewType": "Column", + "horizontalAlignment": "Start" + }, + "childrenViews": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "start": 16 + }, + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + }, + "verticalAlignment": "CenterVertically" + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 4 + }, + "fontSize": 16, + "layoutId": "label_text_cPfyI", + "viewType": "Text", + "textColor": "#191919", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_MEDIUM" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 4 + }, + "fontSize": 14, + "layoutId": "label_text_info_cPfyI", + "viewType": "Text", + "textColor": "#6B6B6B", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR" + } + }, + { + "property": { + "width": "16", + "height": "16", + "layoutId": "label_right_drawable_cPfyI", + "viewType": "Image" + } + } + ] + }, + { + "property": { + "shape": { + "size": 8, + "shapeType": "RoundedCornerShape" + }, + "width": "MATCH_PARENT", + "colors": { + "errorBorderColor": "#EF0000", + "focusedBorderColor": "#E3E5E5", + "unfocusedBorderColor": "#E3E5E5" + }, + "height": "WRAP_CONTENT", + "maxChar": "10", + "padding": { + "end": 16, + "top": 8, + "start": 16 + }, + "layoutId": "text_input_cPfyI", + "viewType": "OutlinedTextField", + "errorView": { + "data": { + "text_input_failure_icon_cPfyI": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_red_exclamation_info_16x16.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "layoutId": "text_input_failure_view_cPfyI", + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + } + }, + "childrenViews": [ + { + "property": { + "width": "16", + "height": "16", + "layoutId": "text_input_failure_icon_cPfyI", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 0, + "top": 0, + "start": 4, + "bottom": 0 + }, + "fontSize": 12, + "layoutId": "text_input_failure_message_cPfyI", + "viewType": "Text", + "textColor": "#FF0000", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR", + "isStateFul": true, + "isDataMutable": true + } + } + ] + } + ] + }, + "hintStyle": { + "fontSize": 14, + "textColor": "#6B6B6B" + }, + "textStyle": { + "fontSize": 14, + "textColor": "#191919" + }, + "successView": { + "data": { + "text_input_success_icon_cPfyI": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_green_exclamation_info_16x16.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "padding": { + "start": 16 + }, + "layoutId": "text_input_success_view_cPfyI", + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + } + }, + "childrenViews": [ + { + "property": { + "width": "16", + "height": "16", + "layoutId": "text_input_success_icon_cPfyI", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 0, + "top": 0, + "start": 4, + "bottom": 0 + }, + "fontSize": 12, + "layoutId": "text_input_success_message_cPfyI", + "viewType": "Text", + "textColor": "#00A300", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR", + "isStateFul": true, + "isDataMutable": true + } + } + ] + } + ] + }, + "isDataMutable": true, + "keyboardOptions": { + "imeAction": "Done", + "keyboardType": "Text", + "capitalization": "Characters" + }, + "textFieldIconData": { + "leadingIcon": { + "property": { + "width": "12", + "height": "12", + "layoutId": "textfield_leading_icon_cPfyI", + "viewType": "Image", + "isVisible": "false" + } + } + }, + "errorMessageLayoutId": "text_input_failure_message_cPfyI", + "visualTransformation": { + "type": "ALL_CAPS" + }, + "successMessageLayoutId": "text_input_success_message_cPfyI", + "successTextTransformation": { + "type": "" + }, + "applyValidationOnValueChange": "true" + } + } + ] + } + ] + } + }, + { + "title": "LabelWithMonthlyIncome", + "description": "This widget is used to input monthly income. It also has validation on entering income", + "uiTronConfig": { + "data": { + "label_text_SsXRa": { + "text": "Monthly income", + "viewType": "Text" + }, + "text_input_SsXRa": { + "hint": "Enter amount", + "viewType": "OutlinedTextField", + "inputText": "", + "onFocusAction": { + "actions": [ + { + "type": "AnalyticsActionV2", + "eventName": "PL_Work_MonthlyIncome_Entered", + "eventProperties": [ + { + "key": "text_input_SsXRa", + "keySuffix": "_input", + "propertyName": "monthly_income_attribute" + } + ], + "isNeededForFirebase": false, + "isNeededForAppsflyer": true, + "predefinedEventProperties": [ + { + "propertyName": "journey_platform", + "propertyValue": "application_platform" + } + ] + } + ] + }, + "onValueChangeAction": { + "actions": [ + { + "type": "ValidateDataAction", + "validations": [ + { + "key": "text_input_SsXRa", + "uiTronValidations": [ + { + "regex": "^[+]?([0-9]+([.][0-9]*)?|[.][0-9]+)$", + "onFailure": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": true, + "viewType": "OutlinedTextField", + "errorMessage": "Enter valid monthly income" + }, + "layoutId": "text_input_SsXRa" + } + ] + } + ] + }, + "onSuccess": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": false, + "viewType": "OutlinedTextField" + }, + "layoutId": "text_input_SsXRa" + } + ] + } + ] + }, + "validationType": "REGEX" + }, + { + "minValue": "1000", + "onFailure": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": true, + "viewType": "OutlinedTextField", + "errorMessage": "Monthly income cannot be less than 1000" + }, + "layoutId": "text_input_SsXRa" + } + ] + } + ] + }, + "onSuccess": { + "actions": [ + { + "type": "UpdateDataAction", + "viewDataList": [ + { + "data": { + "hasError": false, + "viewType": "OutlinedTextField" + }, + "layoutId": "text_input_SsXRa" + } + ] + } + ] + }, + "validationType": "VALUE_RANGE" + } + ] + } + ] + } + ] + } + }, + "label_text_info_SsXRa": { + "text": "", + "viewType": "Text" + }, + "label_right_drawable_SsXRa": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_blue_exclamation_info_16x16.png", + "onClick": { + "actions": [ + { + "type": "CtaAction", + "ctaData": { + "url": "MONTHLY_INCOME_LABEL_INFO_BOTTOM_SHEET", + "type": "BOTTOMSHEET" + } + } + ] + }, + "viewType": "Image" + }, + "textfield_leading_icon_SsXRa": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_black_rupee_symbol_8x22.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "top": "24" + }, + "layoutId": "label_with_text_input_SsXRa", + "viewType": "Column", + "horizontalAlignment": "Start" + }, + "childrenViews": [ + { + "property": { + "width": "MATCH_PARENT", + "height": "WRAP_CONTENT", + "padding": { + "start": 16 + }, + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + }, + "verticalAlignment": "CenterVertically" + }, + "childrenViews": [ + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 4 + }, + "fontSize": 16, + "layoutId": "label_text_SsXRa", + "viewType": "Text", + "textColor": "#191919", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_MEDIUM" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 4 + }, + "fontSize": 14, + "layoutId": "label_text_info_SsXRa", + "viewType": "Text", + "textColor": "#6B6B6B", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR" + } + }, + { + "property": { + "width": "16", + "height": "16", + "layoutId": "label_right_drawable_SsXRa", + "viewType": "Image" + } + } + ] + }, + { + "property": { + "shape": { + "size": 8, + "shapeType": "RoundedCornerShape" + }, + "width": "MATCH_PARENT", + "colors": { + "errorBorderColor": "#EF0000", + "focusedBorderColor": "#E3E5E5", + "unfocusedBorderColor": "#E3E5E5" + }, + "height": "WRAP_CONTENT", + "maxChar": "9", + "padding": { + "end": 16, + "top": 8, + "start": 16 + }, + "layoutId": "text_input_SsXRa", + "viewType": "OutlinedTextField", + "errorView": { + "data": { + "text_input_failure_icon_SsXRa": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_red_exclamation_info_16x16.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "layoutId": "text_input_failure_view_SsXRa", + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + } + }, + "childrenViews": [ + { + "property": { + "width": "16", + "height": "16", + "layoutId": "text_input_failure_icon_SsXRa", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 0, + "top": 0, + "start": 4, + "bottom": 0 + }, + "fontSize": 12, + "layoutId": "text_input_failure_message_SsXRa", + "viewType": "Text", + "textColor": "#FF0000", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR", + "isStateFul": true, + "isDataMutable": true + } + } + ] + } + ] + }, + "hintStyle": { + "fontSize": 14, + "textColor": "#6B6B6B" + }, + "textStyle": { + "fontSize": 14, + "textColor": "#191919" + }, + "successView": { + "data": { + "text_input_success_icon_SsXRa": { + "iconUrl": "https://public-assets.np.navi-tech.in/sa/application-platform/ic_rupee_symbol_with_circular_green_bg_16x16.png", + "viewType": "Image" + } + }, + "view": [ + { + "property": { + "width": "MATCH_PARENT", + "padding": { + "start": 16 + }, + "layoutId": "text_input_success_view_SsXRa", + "viewType": "Row", + "arrangementData": { + "arrangementType": "Start" + } + }, + "childrenViews": [ + { + "property": { + "width": "16", + "height": "16", + "layoutId": "text_input_success_icon_SsXRa", + "viewType": "Image" + } + }, + { + "property": { + "width": "WRAP_CONTENT", + "height": "WRAP_CONTENT", + "padding": { + "end": 0, + "top": 0, + "start": 4, + "bottom": 0 + }, + "fontSize": 12, + "layoutId": "text_input_success_message_SsXRa", + "viewType": "Text", + "textColor": "#00A300", + "fontFamily": "ttComposeFontFamily", + "fontWeight": "TT_REGULAR", + "isStateFul": true, + "isDataMutable": true + } + } + ] + } + ] + }, + "isDataMutable": true, + "keyboardOptions": { + "imeAction": "Done", + "keyboardType": "NumberPassword", + "capitalization": "" + }, + "textFieldIconData": { + "leadingIcon": { + "property": { + "width": "12", + "height": "12", + "layoutId": "textfield_leading_icon_SsXRa", + "viewType": "Image", + "isVisible": "true" + } + } + }, + "errorMessageLayoutId": "text_input_failure_message_SsXRa", + "visualTransformation": { + "type": "MONEY" + }, + "successMessageLayoutId": "text_input_success_message_SsXRa", + "successTextTransformation": { + "type": "NUMBER_TO_WORDS" + }, + "applyValidationOnValueChange": "true" } } ]