@ouroboros/mouth-mui 1.0.0

package/src/components/pages/Templates/Create.tsx

@@ -0,0 +1,139 @@
+/**
+ * Templates Create
+ *
+ * Create component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-20
+ */
+
+// Ouroboros modules
+import clone from '@ouroboros/clone';
+import { Node } from '@ouroboros/define';
+import { DefineNode } from '@ouroboros/define-mui';
+import mouth, { errors } from '@ouroboros/mouth';
+import TemplateDef from '@ouroboros/mouth/definitions/template.json';
+
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+
+// Material UI
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+
+// Locale components
+import Variables from './Template/Variables';
+
+// Format Node
+const oNameNode = new Node(TemplateDef.name);
+
+// Types
+import { responseErrorStruct } from '@ouroboros/body';
+import { templateStruct } from './Template';
+export interface CreateProps {
+	onCancel?: () => void,
+	onCreated: (template: templateStruct) => void,
+	onError: (error: responseErrorStruct) => void
+}
+
+/**
+ * Create
+ *
+ * Form for creating a new template
+ *
+ * @name Create
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Create(props: CreateProps) {
+
+	// State
+	const [record, recordSet] = useState<templateStruct>({
+		name: '',
+		variables: {}
+	});
+
+	// Refs
+	const refName = useRef<DefineNode>(null);
+
+	// Called when record changes
+	function change(field: string, value: any) {
+
+		// Set the new record
+		recordSet(o => {
+			const oRecord = clone(o);
+			oRecord[field] = value;
+			return oRecord;
+		});
+	}
+
+	// Called to create the template
+	function create() {
+
+		// Create the data in the system
+		mouth.create('template', record).then(data => {
+
+			// Add the ID to the record
+			record._id = data;
+
+			// Let the parent know
+			props.onCreated(clone(record));
+		}, error => {
+			if(error.code === errors.body.DB_DUPLICATE) {
+				refName.current?.error('Duplicate');
+			} else {
+				if(props.onError) {
+					props.onError(error);
+				} else {
+					throw new Error(JSON.stringify(error));
+				}
+			}
+		})
+	}
+
+	// Render
+	return (
+		<Paper className="padding">
+			<h2>Create new Template</h2>
+			<Grid container spacing={2}>
+				<Grid item lg={6} md={12} className="field">
+					<Typography><strong>Name</strong></Typography>
+					<DefineNode
+						label="none"
+						name="name"
+						node={oNameNode}
+						onChange={value => change('name', value)}
+						onEnterPressed={create}
+						ref={refName}
+						type="create"
+						value={record.name || null}
+					/>
+				</Grid>
+				<Grid item lg={6} md={12}>
+					<Typography><strong>Variables</strong></Typography>
+					<Variables
+						onChange={value => change('variables', value)}
+						value={record.variables || {}}
+					/>
+				</Grid>
+				<Grid item xs={12} className="actions">
+					{props.onCancel &&
+						<Button variant="contained" color="secondary" onClick={props.onCancel}>Cancel</Button>
+					}
+					<Button variant="contained" color="primary" onClick={create}>Create Template</Button>
+				</Grid>
+			</Grid>
+		</Paper>
+	);
+}
+
+// Valid props
+Create.propTypes = {
+	onCancel: PropTypes.func,
+	onCreated: PropTypes.func.isRequired,
+	onError: PropTypes.func.isRequired,
+}

package/src/components/pages/Templates/Template/Content/Create/Email.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Communications Templates Template Content Create Email
+ *
+ * Email component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { contentStruct } from '../../';
+export type EmailProps = {
+    errors: Record<string, any>;
+    onChanged: (field: string, value: string) => void;
+    value: Omit<contentStruct, 'type'>;
+};
+/**
+ * Email
+ *
+ * Handles creating new template content
+ *
+ * @name Email
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+declare function Email(props: EmailProps): JSX.Element;
+declare namespace Email {
+    var propTypes: {
+        errors: PropTypes.Validator<object>;
+        onChanged: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            subject: PropTypes.Validator<string>;
+            text: PropTypes.Validator<string>;
+            html: PropTypes.Validator<string>;
+        }>>>;
+    };
+}
+export default Email;

package/src/components/pages/Templates/Template/Content/Create/Email.js

@@ -0,0 +1,51 @@
+/**
+ * Communications Templates Template Content Create Email
+ *
+ * Email component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+// Ouroboros modules
+import { Node } from '@ouroboros/define';
+import { DefineNode } from '@ouroboros/define-mui';
+import TemplateEmail from '@ouroboros/mouth/definitions/template_email.json';
+// NPM modules
+import PropTypes from 'prop-types';
+import React from 'react';
+// Material UI
+import Grid from '@mui/material/Grid';
+// Record Nodes
+const oSubjectNode = new Node(TemplateEmail.subject);
+const oTextNode = new Node(TemplateEmail.text);
+const oHtmlNode = new Node(TemplateEmail.html);
+/**
+ * Email
+ *
+ * Handles creating new template content
+ *
+ * @name Email
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Email(props) {
+    // Render
+    return (React.createElement(Grid, { container: true, className: "content_create_email", spacing: 1 },
+        React.createElement(Grid, { item: true, xs: 12, className: "field" },
+            React.createElement(DefineNode, { error: props.errors.subject || false, label: "placeholder", name: "subject", node: oSubjectNode, onChange: val => props.onChanged('subject', val), type: "create", value: props.value.subject })),
+        React.createElement(Grid, { item: true, xs: 12, lg: 6, className: "field" },
+            React.createElement(DefineNode, { error: props.errors.text || false, label: "placeholder", name: "text", node: oTextNode, onChange: val => props.onChanged('text', val), type: "create", value: props.value.text })),
+        React.createElement(Grid, { item: true, xs: 12, lg: 6, className: "field" },
+            React.createElement(DefineNode, { error: props.errors.html || false, label: "placeholder", name: "html", node: oHtmlNode, onChange: val => props.onChanged('html', val), type: "create", value: props.value.html }))));
+}
+// Valid props
+Email.propTypes = {
+    errors: PropTypes.object.isRequired,
+    onChanged: PropTypes.func.isRequired,
+    value: PropTypes.shape({
+        subject: PropTypes.string.isRequired,
+        text: PropTypes.string.isRequired,
+        html: PropTypes.string.isRequired
+    }).isRequired
+};

package/src/components/pages/Templates/Template/Content/Create/Email.tsx

@@ -0,0 +1,96 @@
+/**
+ * Communications Templates Template Content Create Email
+ *
+ * Email component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+
+// Ouroboros modules
+import { Node } from '@ouroboros/define';
+import { DefineNode } from '@ouroboros/define-mui';
+import TemplateEmail from '@ouroboros/mouth/definitions/template_email.json';
+
+// NPM modules
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Material UI
+import Grid from '@mui/material/Grid';
+
+// Record Nodes
+const oSubjectNode = new Node(TemplateEmail.subject);
+const oTextNode = new Node(TemplateEmail.text);
+const oHtmlNode = new Node(TemplateEmail.html);
+
+// Types
+import { contentStruct } from '../../';
+export type EmailProps = {
+	errors: Record<string, any>,
+	onChanged: (field: string, value: string) => void,
+	value: Omit<contentStruct, 'type'>
+}
+
+/**
+ * Email
+ *
+ * Handles creating new template content
+ *
+ * @name Email
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Email(props: EmailProps) {
+
+	// Render
+	return (
+		<Grid container className="content_create_email" spacing={1}>
+			<Grid item xs={12} className="field">
+				<DefineNode
+					error={props.errors.subject || false}
+					label="placeholder"
+					name="subject"
+					node={oSubjectNode}
+					onChange={val => props.onChanged('subject', val)}
+					type="create"
+					value={props.value.subject}
+				/>
+			</Grid>
+			<Grid item xs={12} lg={6} className="field">
+				<DefineNode
+					error={props.errors.text || false}
+					label="placeholder"
+					name="text"
+					node={oTextNode}
+					onChange={val => props.onChanged('text', val)}
+					type="create"
+					value={props.value.text}
+				/>
+			</Grid>
+			<Grid item xs={12} lg={6} className="field">
+				<DefineNode
+					error={props.errors.html || false}
+					label="placeholder"
+					name="html"
+					node={oHtmlNode}
+					onChange={val => props.onChanged('html', val)}
+					type="create"
+					value={props.value.html}
+				/>
+			</Grid>
+		</Grid>
+	);
+}
+
+// Valid props
+Email.propTypes = {
+	errors: PropTypes.object.isRequired,
+	onChanged: PropTypes.func.isRequired,
+	value: PropTypes.shape({
+		subject: PropTypes.string.isRequired,
+		text: PropTypes.string.isRequired,
+		html: PropTypes.string.isRequired
+	}).isRequired
+}

package/src/components/pages/Templates/Template/Content/Create/SMS.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Communications Templates Template Content Create SMS
+ *
+ * SMS component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { contentStruct } from '../../';
+export type SMSProps = {
+    errors: Record<string, any>;
+    onChanged: (field: string, value: string) => void;
+    value: Omit<contentStruct, 'type'>;
+};
+/**
+ * SMS
+ *
+ * Handles creating new template content
+ *
+ * @name SMS
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+declare function SMS(props: SMSProps): JSX.Element;
+declare namespace SMS {
+    var propTypes: {
+        errors: PropTypes.Validator<object>;
+        onChanged: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            content: PropTypes.Validator<string>;
+        }>>>;
+    };
+}
+export default SMS;

package/src/components/pages/Templates/Template/Content/Create/SMS.js

@@ -0,0 +1,42 @@
+/**
+ * Communications Templates Template Content Create SMS
+ *
+ * SMS component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+// Ouroboros modules
+import { Node } from '@ouroboros/define';
+import { DefineNode } from '@ouroboros/define-mui';
+import TemplateSMS from '@ouroboros/mouth/definitions/template_sms.json';
+// NPM modules
+import PropTypes from 'prop-types';
+import React from 'react';
+// Material UI
+import Box from '@mui/material/Box';
+// Record Nodes
+const oContentNode = new Node(TemplateSMS.content);
+/**
+ * SMS
+ *
+ * Handles creating new template content
+ *
+ * @name SMS
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function SMS(props) {
+    // Render
+    return (React.createElement(Box, { className: "content_create_sms field" },
+        React.createElement(DefineNode, { error: props.errors.content || false, label: "placeholder", name: "content", node: oContentNode, onChange: val => props.onChanged('content', val), type: "create", value: props.value.content })));
+}
+// Valid props
+SMS.propTypes = {
+    errors: PropTypes.object.isRequired,
+    onChanged: PropTypes.func.isRequired,
+    value: PropTypes.shape({
+        content: PropTypes.string.isRequired
+    }).isRequired
+};

package/src/components/pages/Templates/Template/Content/Create/SMS.tsx

@@ -0,0 +1,68 @@
+/**
+ * Communications Templates Template Content Create SMS
+ *
+ * SMS component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+
+// Ouroboros modules
+import { Node } from '@ouroboros/define';
+import { DefineNode } from '@ouroboros/define-mui';
+import TemplateSMS from '@ouroboros/mouth/definitions/template_sms.json';
+
+// NPM modules
+import PropTypes from 'prop-types';
+import React from 'react';
+
+// Material UI
+import Box from '@mui/material/Box';
+
+// Record Nodes
+const oContentNode = new Node(TemplateSMS.content);
+
+// Types
+import { contentStruct } from '../../';
+export type SMSProps = {
+	errors: Record<string, any>,
+	onChanged: (field: string, value: string) => void,
+	value: Omit<contentStruct, 'type'>
+}
+
+/**
+ * SMS
+ *
+ * Handles creating new template content
+ *
+ * @name SMS
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function SMS(props: SMSProps) {
+
+	// Render
+	return (
+		<Box className="content_create_sms field">
+			<DefineNode
+				error={props.errors.content || false}
+				label="placeholder"
+				name="content"
+				node={oContentNode}
+				onChange={val => props.onChanged('content', val)}
+				type="create"
+				value={props.value.content}
+			/>
+		</Box>
+	);
+}
+
+// Valid props
+SMS.propTypes = {
+	errors: PropTypes.object.isRequired,
+	onChanged: PropTypes.func.isRequired,
+	value: PropTypes.shape({
+		content: PropTypes.string.isRequired
+	}).isRequired
+}

package/src/components/pages/Templates/Template/Content/Create/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Communications Templates Template Content Create
+ *
+ * Create component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { contentStruct } from '../../';
+import { responseErrorStruct } from '@ouroboros/body';
+export type TemplateContentCreateProps = {
+    locales: Record<string, string>;
+    mobile: boolean;
+    onCreated: (content: contentStruct) => void;
+    onError: (error: responseErrorStruct) => void;
+    template: string;
+};
+/**
+ * Create
+ *
+ * Handles creating new template content
+ *
+ * @name Create
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+declare function Create(props: TemplateContentCreateProps): JSX.Element;
+declare namespace Create {
+    var propTypes: {
+        locales: PropTypes.Validator<{
+            [x: string]: string | null | undefined;
+        }>;
+        mobile: PropTypes.Validator<boolean>;
+        onCreated: PropTypes.Validator<(...args: any[]) => any>;
+        onError: PropTypes.Requireable<(...args: any[]) => any>;
+        template: PropTypes.Validator<string>;
+    };
+}
+export default Create;

package/src/components/pages/Templates/Template/Content/Create/index.js

@@ -0,0 +1,177 @@
+/**
+ * Communications Templates Template Content Create
+ *
+ * Create component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-22
+ */
+// Ouroboros modules
+import clone from '@ouroboros/clone';
+import { errorTree } from '@ouroboros/define-mui';
+import mouth, { errors } from '@ouroboros/mouth';
+import RadioButtons from '@ouroboros/react-radiobuttons-mui';
+import { omap, opop } from '@ouroboros/tools';
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+// Material UI
+import Button from '@mui/material/Button';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import Grid from '@mui/material/Grid';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+// Local components
+import Email from './Email';
+import Preview from '../Preview';
+import SMS from './SMS';
+/**
+ * Create
+ *
+ * Handles creating new template content
+ *
+ * @name Create
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Create(props) {
+    // State
+    const [fieldErrors, fieldErrorsSet] = useState({});
+    const [preview, previewSet] = useState(false);
+    const [record, recordSet] = useState({
+        locale: Object.keys(props.locales)[0],
+        template: props.template,
+        subject: '',
+        text: '',
+        html: ''
+    });
+    const [type, typeSet] = useState('email');
+    // Called to create the new content record
+    function create() {
+        // Send the record data to the server
+        mouth.create(`template/${type}`, record).then((data) => {
+            // Add the type and ID
+            const oRecord = { ...record, type, _id: data };
+            // Tell the parent about the new record
+            props.onCreated(oRecord);
+        }, (error) => {
+            if (error.code === errors.body.DATA_FIELDS) {
+                fieldErrorsSet(errorTree(error.msg));
+            }
+            else if (error.code === errors.body.DB_DUPLICATE) {
+                fieldErrorsSet({ locale: 'Already used' });
+            }
+            else if (error.code === errors.TEMPLATE_CONTENT_ERROR) {
+                const oLines = { templates: [], variables: [] };
+                for (const l of error.msg) {
+                    if (l[0] === 'template') {
+                        oLines.templates.push(l[1]);
+                    }
+                    else if (l[0] === 'variable') {
+                        oLines.variables.push(l[1]);
+                    }
+                }
+                const lLines = [];
+                if (oLines.templates.length) {
+                    lLines.push('The following templates are invalid: ' + oLines.templates.join(', '));
+                }
+                if (oLines.variables.length) {
+                    lLines.push('The following variables are invalid: ' + oLines.variables.join(', '));
+                }
+                // Show the errors
+                if (props.onError) {
+                    props.onError({ code: 0, msg: lLines.join('\n') });
+                }
+            }
+            else {
+                props.onError(error);
+            }
+        });
+    }
+    // Called when any fields in the record are changed
+    function recordChanged(field, value) {
+        // Clear error
+        if (field in fieldErrors) {
+            const oErrors = clone(fieldErrors);
+            delete oErrors[field];
+            fieldErrorsSet(oErrors);
+        }
+        // Clone the record
+        const oRecord = clone(record);
+        // Update the field
+        oRecord[field] = value;
+        // Store the new record
+        recordSet(oRecord);
+    }
+    // Called when the type is changed
+    function typeChanged(value) {
+        // Clone the current record
+        const oRecord = clone(record);
+        // If the new type is email
+        if (value === 'email') {
+            // Store the content in the text field and remove it
+            oRecord.text = opop(oRecord, 'content');
+            // Add the subject and html fields
+            oRecord.subject = '';
+            oRecord.html = '';
+        }
+        // Else, if it's SMS
+        else if (value === 'sms') {
+            // Store the text in the content field and remove it
+            oRecord.content = opop(oRecord, 'text');
+            // Remove the subject and html fields
+            delete oRecord.subject;
+            delete oRecord.html;
+        }
+        // Else, invalid value
+        else {
+            throw new Error('invalid `value`');
+        }
+        // Set the type
+        typeSet(value);
+        // Set the record
+        recordSet(oRecord);
+    }
+    // Render
+    return (React.createElement(Grid, { container: true, spacing: 2, className: "content_create" },
+        React.createElement(Grid, { item: true, xs: 12, md: 6 },
+            React.createElement(RadioButtons, { border: true, gridContainerProps: { spacing: 2 }, gridItemProps: {
+                    xs: 12,
+                    sm: 6
+                }, label: "Type", onChange: typeChanged, options: [
+                    { text: 'E-Mail', value: 'email' },
+                    { text: 'SMS', value: 'sms' }
+                ], value: type, variant: "grid" })),
+        React.createElement(Grid, { item: true, xs: 12, md: 6, className: "field" },
+            React.createElement(FormControl, { variant: "outlined", error: 'locale' in fieldErrors ? true : false },
+                React.createElement(InputLabel, { id: "content_create_locale" }, "Locale"),
+                React.createElement(Select, { label: "Locale", labelId: "content_create_locale", native: true, onChange: ev => recordChanged('locale', ev.target.value), value: record.locale }, omap(props.locales, (v, k) => React.createElement("option", { key: k, value: k }, v))),
+                fieldErrors.locale &&
+                    React.createElement(FormHelperText, null, fieldErrors.locale))),
+        React.createElement(Grid, { item: true, xs: 12 }, (type === 'email' &&
+            React.createElement(Email, { errors: fieldErrors, onChanged: recordChanged, value: record })) || (type === 'sms' &&
+            React.createElement(SMS, { errors: fieldErrors, onChanged: recordChanged, value: record }))),
+        React.createElement(Grid, { item: true, xs: 12, className: "actions" },
+            React.createElement(Button, { color: "info", onClick: () => previewSet(true), variant: "contained" }, "Preview"),
+            React.createElement(Button, { color: "primary", onClick: create, variant: "contained" }, "Add Content"),
+            preview &&
+                React.createElement(Preview, { mobile: props.mobile, onClose: () => previewSet(false), onError: (error) => {
+                        if (error.code === errors.body.DATA_FIELDS) {
+                            fieldErrorsSet(errorTree(error.msg));
+                        }
+                        else {
+                            props.onError(error);
+                        }
+                        previewSet(false);
+                    }, value: { ...record, type } }))));
+}
+// Valid props
+Create.propTypes = {
+    locales: PropTypes.objectOf(PropTypes.string).isRequired,
+    mobile: PropTypes.bool.isRequired,
+    onCreated: PropTypes.func.isRequired,
+    onError: PropTypes.func,
+    template: PropTypes.string.isRequired
+};