I’m developing a frontend app to hide options in ticket fields within the ticket details page on the Freshdesk platform. With the solution below, I’m only able to retrieve the ticket fields and hide the field itself, not the choices. How can I achieve this? Because the purpose of the app is to hide these options.
import React, { useEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types';
import {
FwForm,
FwButton,
FwToastMessage,
FwPill,
FwInlineMessage,
FwTag,
} from '@freshworks/crayons/react';
import { apiClient } from '../service/apiClient.js';
export function Form(props) {
const [ticketFields, setTicketFields] = useState([]);
const [selectedTicketFieldId, setSelectedTicketFieldId] = useState(null);
const [selectedTicketField, setSelectedTicketField] = useState(null);
const [selectedValues, setSelectedValues] = useState(null);
const [hasSuccess, setHasSuccess] = useState(true);
const [choiceId, setChoiceId] = useState();
const firstStepFormRef = useRef(null);
const secondStepFormRef = useRef(null);
const firstStepFormSchema = {
name: 'First Step Form',
fields: [
{
id: 1,
name: 'firstStepForm',
label: 'Tabulações',
placeholder: 'Selecione uma tabulação',
type: 'DROPDOWN',
required: true,
field_options: {
option_label_path: 'value',
option_value_path: 'id',
},
choices:
Array.isArray(ticketFields) &&
ticketFields.some(
(field) => Array.isArray(field.choices) && field.choices.length > 1
)
? ticketFields.reduce((accumulatedChoices, ticketField) => {
if (
Array.isArray(ticketField.choices) &&
ticketField.choices.length > 1
) {
accumulatedChoices.push({
id: ticketField.id,
value: ticketField.label,
dependent_ids: {},
});
}
return accumulatedChoices;
}, [])
: [],
},
],
};
const secondStepFormSchema = {
name: 'Second Step Form',
fields: [
{
id: 2,
name: 'secondStepForm',
label: 'Valores',
placeholder: 'Selecione os valores',
type: 'MULTI_SELECT',
field_options: {
option_label_path: 'value',
option_value_path: 'id',
},
choices:
selectedTicketField !== null
? selectedTicketField.choices.map((choice) => {
return {
id: choice.id,
label: choice.label,
value: choice.value,
dependent_ids: {},
};
})
: [],
},
],
};
useEffect(() => {
const getAllTicketFields = async () => {
try {
const response = await apiClient.get('/ticket_fields');
setTicketFields(response.data);
} catch (error) {
console.log(error);
}
};
getAllTicketFields();
}, []);
useEffect(() => {
const getTicketFieldById = async () => {
try {
if (selectedTicketFieldId) {
const response = await apiClient.get(
`/admin/ticket_fields/${selectedTicketFieldId}`
);
setSelectedTicketField(response.data);
}
} catch (error) {
console.error(error);
}
};
getTicketFieldById();
}, [selectedTicketFieldId]);
useEffect(() => {
if (selectedValues) {
const data = {
label: selectedTicketField.label,
label_for_customers: selectedTicketField.label_for_customers,
choices: selectedValues.map((choiceValueId) => {
setChoiceId(Number.parseInt(choiceValueId));
}),
};
hide(choiceId);
}
}, [
selectedValues,
selectedTicketFieldId,
setHasSuccess,
choiceId,
setChoiceId,
]);
const handleFirstStepFormSubmit = async (event) => {
event.preventDefault();
const { values, isValid, errors } = await firstStepFormRef.current.doSubmit(
event
);
setSelectedTicketFieldId(values.firstStepForm);
if (isValid) {
firstStepFormRef.current.setFieldErrors({
firstStepForm: 'Campo é obrigatório!',
});
}
};
const handleSecondStepFormSubmit = async (event) => {
event.preventDefault();
const { values, isValid, errors } =
await secondStepFormRef.current.doSubmit(event);
setSelectedValues(values.secondStepForm);
if (isValid) {
secondStepFormRef.current.setFieldErrors({
secondStepForm: 'Selecione pelo menos um valor!',
});
}
};
const handleFormReset = (event) => {
location.reload();
};
async function hide(id) {
try {
const data = await props.client.interface.trigger('hide', {
id: selectedTicketField.name,
});
} catch (error) {
console.log('Parent:InterfaceAPI:showConfirm', error);
}
}
return (
<div className='App-main-container'>
<FwForm ref={firstStepFormRef} formSchema={firstStepFormSchema}></FwForm>
<FwButton
onClick={handleFirstStepFormSubmit}
disabled={selectedTicketField !== null ? true : false}
>
Selecionar
</FwButton>
{selectedTicketField !== null && (
<FwButton disabled color='text' style={{ marginLeft: '1rem' }}>
{selectedTicketField.label}
</FwButton>
)}
{selectedTicketField !== null && (
<>
<FwForm
ref={secondStepFormRef}
formSchema={secondStepFormSchema}
validate={async (values) => {
return {};
}}
></FwForm>
<FwButton color='secondary' onClick={handleFormReset}>
Limpar
</FwButton>
{/* <FwButton onClick={showConfirm}>Esconder Valores</FwButton> */}
<FwButton onClick={handleSecondStepFormSubmit}>
Esconder Valores
</FwButton>
{selectedValues && hasSuccess && (
<FwInlineMessage open closable type='success'>
Valores escondidos com sucesso!
</FwInlineMessage>
)}
{selectedValues && !hasSuccess && (
<FwInlineMessage open closable type='error'>
Houve erro ao tentar escolher os valores selecionados
</FwInlineMessage>
)}
</>
)}
</div>
);
}
Form.propTypes = {
client: PropTypes.object,
};
![Captura de tela 2024-05-10 103955|690x263]
(upload://xTLrALv9pFq0GhDvNz3LKPe5zMr.png)
