@ouroboros/mouth-mui 1.0.0

package/src/components/pages/Templates/Template/Content/Preview/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * Communications Templates Template Content Preview
+ *
+ * Preview component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+
+// Ouroboos modules
+import { errorTree } from '@ouroboros/define-mui';
+import mouth, { errors } from '@ouroboros/mouth';
+
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+// Material UI
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import Dialog from '@mui/material/Dialog';
+import Typography from '@mui/material/Typography';
+
+// Local components
+import Email from './Email';
+import SMS from './SMS';
+
+// Types
+import { contentStruct } from '../..';
+import { responseErrorStruct } from '@ouroboros/body';
+export type PreviewProps = {
+	mobile: boolean,
+	onClose: () => void,
+	onError: (error: responseErrorStruct) => void,
+	value: contentStruct
+}
+
+/**
+ * Preview
+ *
+ * Handles viewing template content
+ *
+ * @name Preview
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Preview(props: PreviewProps) {
+
+	// Props
+	const { mobile, onClose, onError, value } = props;
+
+	// State
+	const [preview, previewSet] = useState<contentStruct | string | false>(false);
+
+	// Value effect
+	useEffect(() => {
+		mouth.create(
+			`template/${value.type}/generate`,
+			value
+		).then(previewSet, onError);
+	}, [value, onError]);
+
+	// Render
+	return (
+		<Dialog
+			fullWidth={true}
+			maxWidth="lg"
+			onClose={onClose}
+			open={true}
+			aria-labelledby="template-content-preview-title"
+		>
+			<DialogTitle id="template-content-preview-title">Template Preview for {value.locale}-{value.type}</DialogTitle>
+			<DialogContent dividers className="content_preview">
+				{preview === false ?
+					<Typography>Loading...</Typography>
+				: (
+					value.type === 'email' &&
+						<Email
+							key={value.template + '_' + value.locale + '_email'}
+							mobile={mobile}
+							value={preview as contentStruct}
+						/>
+				) || (
+					value.type === 'sms' &&
+						<SMS
+							key={value.template + '_' + value.locale + '_sms'}
+							mobile={mobile}
+							value={preview as string}
+						/>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+// Valid props
+Preview.propTypes = {
+	mobile: PropTypes.bool.isRequired,
+	onClose: PropTypes.func.isRequired,
+	onError: PropTypes.func.isRequired,
+	value: PropTypes.shape({
+		locale: PropTypes.string.isRequired,
+		template: PropTypes.string,
+		type: PropTypes.oneOf(['email', 'sms']).isRequired
+	})
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Communications Templates Template Content Update Email
+ *
+ * Email component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+/// <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/Update/Email.js

@@ -0,0 +1,51 @@
+/**
+ * Communications Templates Template Content Update Email
+ *
+ * Email component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+// 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_update_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: "update", 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: "update", 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: "update", 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/Update/Email.tsx

@@ -0,0 +1,96 @@
+/**
+ * Communications Templates Template Content Update Email
+ *
+ * Email component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+
+// 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_update_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="update"
+					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="update"
+					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="update"
+					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/Update/SMS.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Communications Templates Template Content Update SMS
+ *
+ * SMS component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+/// <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/Update/SMS.js

@@ -0,0 +1,42 @@
+/**
+ * Communications Templates Template Content Update SMS
+ *
+ * SMS component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+// 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_update_sms field" },
+        React.createElement(DefineNode, { error: props.errors.content || false, label: "placeholder", name: "content", node: oContentNode, onChange: val => props.onChanged('content', val), type: "update", 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/Update/SMS.tsx

@@ -0,0 +1,68 @@
+/**
+ * Communications Templates Template Content Update SMS
+ *
+ * SMS component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-23
+ */
+
+// 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_update_sms field">
+			<DefineNode
+				error={props.errors.content || false}
+				label="placeholder"
+				name="content"
+				node={oContentNode}
+				onChange={val => props.onChanged('content', val)}
+				type="update"
+				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/Update/index.d.ts

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

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

@@ -0,0 +1,117 @@
+/**
+ * Communications Templates Template Content Update
+ *
+ * Update 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 { owithout } from '@ouroboros/tools';
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+// Material UI
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+// Local components
+import Email from './Email';
+import Preview from '../Preview';
+import SMS from './SMS';
+/**
+ * Update
+ *
+ * Handles updating template content
+ *
+ * @name Update
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Update(props) {
+    // State
+    const [fieldErrors, fieldErrorsSet] = useState({});
+    const [preview, previewSet] = useState(false);
+    const [record, recordSet] = useState(owithout(props.value, 'type'));
+    // Called to create the new content record
+    function update() {
+        // Send the record data to the server
+        mouth.update(`template/${props.value.type}`, record).then(data => {
+            props.onUpdated({ type: props.value.type, ...record });
+        }, (error) => {
+            if (error.code === errors.body.DATA_FIELDS) {
+                fieldErrorsSet(errorTree(error.msg));
+            }
+            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) {
+            delete fieldErrors.field;
+        }
+        // Clone the record
+        const oRecord = clone(record);
+        // Update the field
+        oRecord[field] = value;
+        // Store the new record
+        recordSet(oRecord);
+    }
+    // Render
+    return (React.createElement(Box, { className: "content_update" },
+        (props.value.type === 'email' &&
+            React.createElement(Email, { errors: fieldErrors, key: props.value._id, onChanged: recordChanged, value: record })) || (props.value.type === 'sms' &&
+            React.createElement(SMS, { errors: fieldErrors, key: props.value._id, onChanged: recordChanged, value: record })),
+        React.createElement(Box, { className: "actions" },
+            React.createElement(Button, { color: "secondary", onClick: () => recordSet(owithout(props.value, 'type')), variant: "contained" }, "Cancel"),
+            React.createElement(Button, { color: "info", onClick: () => previewSet(true), variant: "contained" }, "Preview"),
+            React.createElement(Button, { color: "primary", onClick: update, variant: "contained" }, "Save 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: props.value.type } }))));
+}
+// Valid props
+Update.propTypes = {
+    mobile: PropTypes.bool.isRequired,
+    onError: PropTypes.func.isRequired,
+    onUpdated: PropTypes.func.isRequired,
+    value: PropTypes.shape({
+        _id: PropTypes.string.isRequired,
+        type: PropTypes.oneOf(['email', 'sms']).isRequired
+    })
+};