@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
65 lines (64 loc) • 4.39 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, CardMedia, Typography } from '@mui/material';
import { Composition } from 'atomic-layout';
import { useCallback, useMemo } from 'react';
import { buildTemplateTextWithInsertedValues } from '../functions';
import { StyledMessageBalloon } from '../ui/messageStyle/StyledMessageBalloon';
import { StyledMessageBox } from '../ui/messageStyle/StyledMessageBox';
import { StyledPreWrap } from '../ui/StyledPreWrap';
import { MessageAccessory } from './dummy/MessageAccessory';
/**
* @param templateName nome del template
* @param values variabili inserite dall'utente, in forma di oggetto con le chiavi key = prefix_index e value
* @param templateBodyText testo del corpo del template
* @param templateFooterText testo del footer del template
* @param templateHeaderText testo dell'header del template
* @param templateHeaderUrl url dell'immagine dell'header del template (se presente)
* @param templateHeaderFormat formato dell'header del template, TEXT o IMAGE
* @param templateButtons array di oggetti con le chiavi text e url, per i bottoni del template
* @returns
*/
export function NewTemplateMessagePreview({ templateName, values, templateBodyText, templateFooterText, templateHeaderText, templateHeaderUrl, templateHeaderFormat, templateButtons, }) {
const computedBodyText = useMemo(() => {
return buildTemplateTextWithInsertedValues({
templateText: templateBodyText ?? '',
values,
//questa key corrisponde al tipo della sezione del template, ad esempio BUTTONS, TEXT, ecc.
//E' la chiave con cui vengono salvati e filtrati i valori delle variabili.
templateSectionKey: 'BODY',
});
}, [templateBodyText, values]);
const computedFooterText = useMemo(() => {
return buildTemplateTextWithInsertedValues({
templateText: templateFooterText ?? '',
values,
//questa key corrisponde al tipo della sezione del template, ad esempio BUTTONS, TEXT, ecc.
//E' la chiave con cui vengono salvati e filtrati i valori delle variabili.
templateSectionKey: 'FOOTER',
});
}, [templateFooterText, values]);
const computedHeaderText = useMemo(() => {
return buildTemplateTextWithInsertedValues({
templateText: templateHeaderText ?? '',
values,
//questa key corrisponde al tipo della sezione del template, ad esempio BUTTONS, TEXT, ecc.
//E' la chiave con cui vengono salvati e filtrati i valori delle variabili.
templateSectionKey: 'HEADER',
});
}, [templateHeaderText, values]);
const buildButtonText = useCallback((buttonText) => {
const newText = buildTemplateTextWithInsertedValues({
templateText: buttonText,
values,
//questa key corrisponde al tipo della sezione del template, ad esempio BUTTONS, TEXT, ecc.
//E' la chiave con cui vengono salvati e filtrati i valori delle variabili.
templateSectionKey: 'BUTTONS',
});
return newText;
}, [values]);
return (_jsx(Composition, { maxHeight: '100%', padding: '1rem', children: _jsx(StyledMessageBox, { "$align": 'left', children: _jsxs(StyledMessageBalloon, { children: [_jsx(MessageAccessory, { data: templateName, isUserId: false }), _jsxs(Composition, { padding: '0.5rem', children: [templateHeaderText && (_jsxs(_Fragment, { children: [templateHeaderFormat === 'TEXT' && (_jsx(Typography, { fontWeight: 'bold', p: 1, children: computedHeaderText })), templateHeaderFormat === 'IMAGE' && (_jsx(CardMedia, { component: "img", height: 200, width: '100%', image: templateHeaderUrl ?? '' }))] })), templateBodyText && (_jsx(Composition, { padding: '0.5rem', children: _jsx(StyledPreWrap, { children: computedBodyText }) })), templateFooterText && (_jsx(Typography, { variant: "caption", color: "textDisabled", p: 1, children: computedFooterText })), templateButtons &&
templateButtons?.map((button) => {
const text = buildButtonText(button.text ?? '');
return (_jsx(Button, { fullWidth: true, variant: "contained", children: text }, text));
})] })] }) }) }));
}