${labelText}: ${fieldContent}
`;\n });\n\n let radioButtons = $('form#reward_form_submission').find('.input-radio');\n radioButtons.map(function() {\n if ($(this).find('label').attr('data-dependent-field-visibility') === 'hidden') {\n return;\n }\n\n if ($(this).prop('checked') === false) {\n return;\n }\n\n let selected_text = $(this)\n .parent()\n .text();\n let title = $(this).attr('data-title');\n\n submissionSummary += `${title}: ${htmlEncode(\n selected_text,\n )}
`;\n });\n\n let checkboxes = $('form#reward_form_submission').find('div.checkbox-group');\n checkboxes.map(function() {\n if ($(this).find('label').attr('data-dependent-field-visibility') === 'hidden') {\n return;\n }\n\n let title = $(this).attr('data-title');\n let checkeds = $(this).find(':checkbox:checked');\n let checked_texts = [];\n checkeds.map(function() {\n checked_texts.push($(this).val());\n });\n submissionSummary += `${title}: ${htmlEncode(\n checked_texts.join(', '),\n )}
`;\n });\n\n $('.submission-summary').html(submissionSummary);\n}\n\nfunction loadPrizeOption() {\n $(\"select[id^='reward_form_submission_submission_data_prize_options']\").each(\n function() {\n const $select2Selector = $(this);\n const selectOptionName = $(this)\n .attr('id')\n .split('submission_data_')[1];\n $select2Selector.select2({\n theme: 'bootstrap',\n ajax: {\n type: 'get',\n url: '/api/v1/select_options?select_option_name=' + selectOptionName,\n dataType: 'json',\n data: function(params) {\n return {\n searchTerm: params.term, // search term\n };\n },\n processResults: function(data) {\n let optionData = data.data;\n return {\n results: $.map(optionData, function(item) {\n return {\n text: item,\n id: item,\n };\n }),\n };\n },\n },\n });\n },\n );\n}\n\nfunction validateChoiceGroup(currentIndex, fieldType) {\n let invalidate_choices = 0;\n let $choiceGroupRequireds = $('#wizard-p-' + currentIndex).find(\n `div.${fieldType}-group.is-required`,\n );\n $choiceGroupRequireds.map(function() {\n if ($(this).find(`:${fieldType}:checked`).length === 0) {\n let label = $(this).find('.form-label');\n let errorLabel = $(this).find('.validation-error-text');\n\n // Remove existing error label\n errorLabel.remove();\n\n // Add new error label\n label.after(\n \"\",\n );\n invalidate_choices++;\n }\n });\n return invalidate_choices;\n}\n\nfunction validatePhoneFields(currentIndex) {\n let invalidate_phone_fields = 0;\n let $phonePrefixes = $('#wizard-p-' + currentIndex).find('.phone-prefix');\n $phonePrefixes.map(function() {\n if ($(this).prop('disabled')) return;\n if ($(this).prop('required') || $(this).val().length > 0) {\n let phone_prefix = $(this).data('phone-prefix');\n $(this)\n .prev('.prefix-invalid')\n .remove();\n $(this)\n .prev('.length-invalid')\n .remove();\n let prefix_valid = true;\n if (\n !$(this)\n .val()\n .startsWith(phone_prefix)\n ) {\n prefix_valid = false;\n $(this).before(\n ``,\n );\n invalidate_phone_fields++;\n }\n\n if (prefix_valid) {\n\n if ($(this).val().length <= phone_prefix.toString().length) {\n $(this).before(\n ``,\n );\n invalidate_phone_fields++;\n return invalidate_phone_fields;\n }\n }\n }\n });\n return invalidate_phone_fields;\n}\n\nfunction validateFileFields(currentIndex) {\n let invalidate_file_fields = 0;\n let $fileRequireds = $('#wizard-p-' + currentIndex).find('div.file-required');\n $fileRequireds.map(function() {\n if ($(this).find('.form-control-file')[0].files.length == 0) {\n let label = $(this).find('label.required');\n label.after(\n \"\",\n );\n invalidate_file_fields++;\n }\n });\n return invalidate_file_fields;\n}\n\nfunction htmlEncode(str) {\n return String(str).replace(/[^\\w. ]/gi, function(c) {\n return '&#' + c.charCodeAt(0) + ';';\n });\n}\n\n\n","import { tracker } from './analytic';\n\n$(document).ready(function() {\n let $formSelector = $(\"form#reward_form_submission\");\n\n // Disable reward form submit function, to force user use the wizard form\n $formSelector.on('submit', function (e) {\n e.preventDefault();\n });\n\n // Validate all required fields\n $formSelector.validate({\n errorClass: 'error-validation',\n errorPlacement: function errorPlacement(error, element) { element.after(error); }\n });\n\n // Auto add .required class to all labels with required field\n $('input[required], textarea[required], select[required]').each(function() {\n let $this = $(this);\n let $label = $('label[for=\"'+ $this.attr('id') +'\"]');\n if ($label.length > 0 && $(this).attr('data-label-type') !== 'radio' && $(this).attr('data-label-type') !== 'checkbox') {\n $label.addClass(\"required\");\n }\n });\n\n // Turn all select with select2 class into select2 field\n $('select.select2').select2({ theme: 'bootstrap' });\n $('.select2').each(function() {\n if ($(this).attr('data-dependent-field-visibility') === 'hidden') {\n $(this).next(\".select2-container\").addClass('d-none');\n }\n });\n\n $(\".datepicker\").datepicker({\n format: \"yyyy-mm-dd\",\n });\n\n $('.datepicker').each(function() {\n if ($(this).attr('data-dependent-field-visibility') === 'hidden') {\n $(this).datepicker(\"destroy\");\n $(this).hide();\n }\n });\n\n $(\"#tnc-button\").click(function(e) {\n e.preventDefault();\n\n $('html, body').animate({\n scrollTop: $(\".form-footer\").offset().top\n }, 1000);\n });\n\n // Show field name to make admin easier finding it in the preview page\n if ($('#is_preview').val() === 'true') {\n let previousFieldName;\n $('[name]').not('input[type=hidden]').each(function() {\n let $this = $(this);\n\n if (previousFieldName === $this.attr('name')) {\n return;\n }\n\n let parentElement = $this.attr('type') === 'checkbox' ? $this.parent().parent() : $this.parent();\n parentElement.append('*Field name: '+ $this.attr('name') +'');\n\n previousFieldName = $this.attr('name');\n });\n }\n\n // Custom validation to override default email validation in jquery\n $.validator.methods.email = function( value, element ) {\n return this.optional( element ) || /^\\w+([\\.+-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test( value );\n }\n\n // disable scroll to change value in input type number\n $('input[type=number]').on('mousewheel', function(e) {\n $(e.target).blur();\n });\n\n // Limit max checkbox selection\n $('input.form-check-input').on('change', function(evt) {\n var limit_selection = Number($(this).attr('data-max-selection'))\n if (limit_selection) {\n var input_name = $(this).attr(\"name\")\n if($(`input[name='${input_name}']:checked`).length > limit_selection) {\n this.checked = false;\n }\n }\n \n });\n\n $('input, select').on('change', function() {\n let parentFieldName = $(this).attr('name');\n let parentFieldValue = $(this).val();\n let parentFieldType = $(this).attr('type');\n\n let $elements = $('[data-dependent-field-name=\"'+ parentFieldName +'\"]');\n $elements.each(function() {\n let $elementSelector = $(this);\n\n // Remove required validation on every change to prevent required validation when the field is hidden\n toggleDependentFieldRequiredValidation({ element: $elementSelector, isRequired: false } )\n\n let dependentFieldValue = $elementSelector.attr('data-dependent-field-value').split(\",\");\n dependentFieldValue = dependentFieldValue.map(element => {\n return element.trim();\n });\n $elementSelector.next(\"label.error-validation\").remove();\n\n let isRequired = $elementSelector.attr('data-is-required') === 'true';\n\n let showDependentField = false\n\n // if input type is checkbox, check if one of checked value included in dependent value\n if (parentFieldType === \"checkbox\") {\n $(`input:checkbox[name=\"${parentFieldName}\"]:checked`).each(function() {\n if (dependentFieldValue.includes(this.value)) {\n showDependentField = true;\n }\n });\n } else if (dependentFieldValue.includes(parentFieldValue)) {\n showDependentField = true\n }\n\n if (showDependentField) {\n // Dynamically add required validation so the form will be validated when shown\n toggleDependentFieldRequiredValidation({ element: $elementSelector, isRequired } )\n\n $elementSelector.prop(\"disabled\", false);\n $elementSelector.attr('data-dependent-field-visibility', 'visible');\n $elementSelector.removeClass('d-none');\n $elementSelector.next(\".select2-container\").removeClass('d-none');\n if ($elementSelector.hasClass('datepicker')) {\n $elementSelector.show();\n $elementSelector.datepicker({\n format: \"yyyy-mm-dd\",\n });\n }\n } else {\n hideElement($elementSelector)\n hideDependentChildElement($elementSelector)\n }\n });\n });\n\n function toggleDependentFieldRequiredValidation({ element, isRequired = false } ) {\n let methodName = isRequired ? 'addClass' : 'removeClass';\n let labelForAttribute = 'id'\n\n if (element.attr('type') === 'file') {\n element.parent()[methodName]('file-required');\n } else if (element.attr('type') === 'checkbox') {\n element.parent().parent()[methodName]('is-required');\n labelForAttribute = 'name';\n } else if (element.attr('type') === 'radio') {\n element.parent().parent().parent()[methodName]('is-required');\n labelForAttribute = 'name';\n } else {\n element.attr('required', isRequired);\n element[methodName]('required');\n }\n\n // Add required class to label\n let $label = $('label[for=\"'+ element.attr(labelForAttribute) +'\"]');\n $label[methodName](\"required\");\n }\n\n function hideDependentChildElement(element, previous_element_names = []) {\n let dependentChilds = $(`[data-dependent-field-name='${element.attr('name')}']`)\n if (dependentChilds.length === 0) return;\n if (previous_element_names.includes(element.attr('name'))) return;\n\n previous_element_names.push(element.attr('name'))\n dependentChilds.each(function() {\n hideElement($(this))\n hideDependentChildElement($(this), previous_element_names)\n })\n }\n\n function hideElement(element) {\n element.removeAttr('required');\n element.prop(\"disabled\", true);\n element.attr('data-dependent-field-visibility', 'hidden');\n element.addClass('d-none');\n element.next(\".select2-container\").addClass('d-none');\n if (element.hasClass('datepicker')) {\n element.datepicker(\"destroy\");\n element.hide();\n }\n element.prop('checked',false);\n if (element.attr('type') === 'file') {\n element.parent().removeClass('file-required');\n }\n }\n\n $('.form-control-file').on('change', function() {\n\n var input_element = $(this)\n var input_id = input_element.attr('id')\n\n $(`label.validation-error-text-${input_id}`).remove();\n\n for (let i = 0; i < this.files.length; i++) {\n var size = (this.files[i].size / 1024 / 1024).toFixed(2);\n\n if (size > 10) {\n input_element.after(\n ``,\n );\n }\n }\n });\n\n var ocrModalFileMapStatus = {}\n var ocrModalProgressPercentage = 0;\n var ocrModalFileUploadName = '';\n var ocrModalRawOcrResponse = null\n var ocrModalParsedDataMapping = null\n var ocrModalProgressTask = null\n var ocrModalSessionId = Math.random().toString(36).substring(2, 15);\n var ocrModalTraceId = null\n\n var ocrModalMaxFileSizeMb = $('#ocr-modal-max-file-size-mb').val();\n var ocrModalMaxFileSizeMessage = $('#ocr-modal-max-file-size-message').val();\n\n $('input[enable_ocr=\"true\"]').on('click', async function (event) { \n // add reset variable\n $(this).val(null);\n ocrModalFileMapStatus = {}\n ocrModalProgressPercentage = 0;\n ocrModalFileUploadName = '';\n ocrModalRawOcrResponse = null\n ocrModalParsedDataMapping = null \n $('.ocr-modal-selection-state').removeClass('d-none');\n $('.ocr-modal-loading-state').addClass('d-none'); \n $('#ocr-modal-progress-bar').css('width', '0%');\n $('#ocr-modal-info-message').addClass('d-none');\n $('#ocr-modal-error-message').addClass('d-none');\n $('#ocr-modal-selected-files').html('');\n $('#ocr-modal-submit').removeClass('d-none').html('Submit');\n });\n\n $('input[enable_ocr=\"true\"]').on('change', async function (event) {\n let listFileElement = '';\n ocrModalFileUploadName = $(this).attr('name');\n let formInputName = $(this).attr('form_input_name');\n if(!$(`input[enable_ocr_form_input_name=\"${formInputName}\"]`).is(\":checked\")){\n return\n }\n\n $('#ocr-modal').modal('show');\n // pre processing status map\n for await (let file of event.target.files) {\n if(file.size > parseInt(ocrModalMaxFileSizeMb) * 1024 * 1024){\n ocrModalShowErrorMessage(ocrModalMaxFileSizeMessage);\n $('#ocr-modal-submit').addClass('d-none');\n return\n }\n ocrModalFileMapStatus[file.name] = {\n s3URL: null,\n file: file,\n ocrResult: null\n }\n listFileElement += `