@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
77 lines (76 loc) • 6.27 kB
JavaScript
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Autocomplete, MenuItem, TextField } from '@mui/material';
import { Box, Composition } from 'atomic-layout';
import { always, flatMap, pipe, split } from 'lodash/fp';
import React, { useCallback, useState, } from 'react';
import { StyledTemplatePreview } from '../ui/StyledTemplatePreview';
import { TemplateScrollableContent } from '../ui/TemplateScrollableContent';
import { NewTemplateMessagePreview } from './NewTemplateMessagePreview';
import { TemplateFormZone } from './TemplateFormZone';
/**
* @param companyPhoneOptions I numeri di telefono aziendali da cui mandare il messaggio.
* Possono essere solo selezionati; un array vuoto dunque impedisce l'invio del messaggio.
* Una sola opzione presente attiva la selezione automatica.
* @param phoneToContactOptions I numeri di telefono a cui inviare il messaggio, che possono essere selezionati o digitati manualmente.
* Possono non esserci opzioni; un array vuoto non impedisce l'invio del messaggio.
* Una sola opzione presente attiva la selezione automatica.
* @param templateOptions I nomi dei template disponibili per l'invio del messaggio.
* Possono essere solo selezionati; un array vuoto impedisce l'invio del messaggio.
* @param isSendingTemplate Stato che indica se il messaggio è in fase di invio.
* @param onTemplateSend Funzione che viene chiamata quando l'utente preme il tasto di invio del messaggio template.
* @param findContactName Funzione che permette di trovare il nome di ogni contatto destinatario a partire dal numero di telefono.
* Viene usata per renderizzare le opzioni di contatto destinatario in forma numero- nome.
* Se non viene fornita, le opzioni di contatto vengono renderizzate solo come numero.
*
* @returns
*/
export function CreateTemplateMessage({ companyPhoneOptions, phoneToContactOptions, templateOptions, isSendingTemplate, onTemplateSend, getTemplateData, findContactName, }) {
//fromPhone è il numero aziendale da cui inviare il messaggio.
const [fromPhone, setFromPhone] = useState();
//contactNumbers sono i numeri di telefono a cui inviare il messaggio.
const [contactNumbers, setContactNumbers] = useState([]);
//stato per triggerare l'errore sull'input dei numeri di telefono destinatario.
const [isEmptyToPhone, setIsEmptyToPhone] = useState(false);
//nome del template selezionato.
const [selectedTemplate, setSelectedTemplate] = useState('');
//templateData sono i dati del template selezionato.
const [templateData, setTemplateData] = useState(null);
//valori delle variabili che l'utente deve inserire nel template al posto dei placeholders.
const [values, setValues] = useState({});
const handleChangeFromPhone = useCallback((e) => {
setFromPhone(e.target.value);
}, []);
const handleChange = useCallback((index, value) => {
setValues({ ...values, [index]: value });
}, [values]);
const handleContactsChange = useCallback((_, newValue) => {
const values = pipe(always(newValue), flatMap((contact) => split(' ', contact)))();
setContactNumbers(values);
}, []);
const handleChangeTemplateName = useCallback(async (templateName) => {
setSelectedTemplate(templateName);
//setto i dati del template selezionato.
const data = await getTemplateData(templateName);
setTemplateData(data);
}, [getTemplateData]);
return (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(Composition, { padding: '1rem 0.5rem', children: _jsx(TextField, { id: 'fromPhone', label: "Seleziona il numero aziendale", value: fromPhone ?? '', onChange: handleChangeFromPhone, select: true, children: companyPhoneOptions.length > 0 &&
companyPhoneOptions.map((phone) => {
return (_jsx(MenuItem, { value: phone, children: phone }, phone));
}) }) }), _jsx(Composition, { padding: '0.5rem', children: _jsx(Autocomplete, { multiple: true, freeSolo: true, options: phoneToContactOptions, value: contactNumbers ?? [''], onChange: handleContactsChange, renderInput: (params) => (_jsx(TextField, { ...params, onChange: (e) => {
// Se l'input è vuoto, setta isEmptyToPhone a true:
//Autocomplete non triggera gli errori su TextField (mettere required è inutile).
//isEmptyToPhone fa da trigger per l'errore.
if (params.inputProps?.onChange)
params.inputProps?.onChange(e);
setIsEmptyToPhone(false);
}, error: isEmptyToPhone, helperText: isEmptyToPhone
? 'Inserisci almeno un numero di telefono.'
: 'I numeri di telefono devono essere separati da un invio! In caso di numero singolo, premi invio dopo averlo inserito.', color: isEmptyToPhone ? 'error' : 'primary', variant: "outlined", label: "Digita il numero o i numeri destinatari" })), renderOption: (props, option) => {
const contactLabel = findContactName
? findContactName(option)
: null;
const text = contactLabel ? `${option} -${contactLabel}` : option;
return (_createElement("li", { ...props, key: option }, text));
} }) }), fromPhone && (_jsxs(Composition, { templateColsMd: "1fr 1fr", gap: '0.5rem', children: [_jsx(TemplateScrollableContent, { children: _jsx(TemplateFormZone, { onChange: handleChange, selectedTemplate: selectedTemplate, onChangeTemplateName: handleChangeTemplateName, values: values, isSendingTemplate: isSendingTemplate, onSubmit: onTemplateSend, templateOptions: templateOptions, templateData: templateData }) }), _jsx(StyledTemplatePreview, { children: _jsx(TemplateScrollableContent, { children: _jsx(Box, { minWidthMd: 40, children: selectedTemplate && (_jsx(NewTemplateMessagePreview, { templateName: selectedTemplate, values: values, companyPhone: fromPhone, templateBodyText: templateData?.text ?? '' })) }) }) })] }))] }));
}