Edit template

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-helper-plugin/lib/src/components/IntlInput/index.js

@@ -15,9 +15,7 @@ const IntlInput = ({
 }) => {
   const { formatMessage } = useIntl();
   const label = formatMessage({ id: labelId, defaultMessage: defaultMessage || labelId });
-  // const description = descriptionId
-  //   ? formatMessage({ id: descriptionId, defaultMessage: descriptionId })
-  //   : '';
+
   let formattedDescription = '';
 
   if (description) {
@@ -43,8 +41,6 @@ const IntlInput = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  console.log({ description, formattedDescription });
-
   return (
     <Inputs
       {...rest}

packages/strapi-plugin-users-permissions/admin/src/containers/EmailTemplates/index.js

@@ -13,6 +13,7 @@ import {
   SizedInput,
   useUserPermissions,
   request,
+  getYupInnerErrors,
 } from 'strapi-helper-plugin';
 import { Row } from 'reactstrap';
 import pluginPermissions from '../../permissions';
@@ -21,6 +22,7 @@ import ListRow from '../../components/ListRow';
 import ModalFormWrapper from '../../components/ModalFormWrapper';
 import { getRequestURL, getTrad } from '../../utils';
 import forms from './utils/forms';
+import schema from './utils/schema';
 import reducer, { initialState } from './reducer';
 
 const EmailTemplatesPage = () => {
@@ -31,9 +33,10 @@ const EmailTemplatesPage = () => {
     return { update: pluginPermissions.updateEmailTemplates };
   }, []);
   const [isOpen, setIsOpen] = useState(false);
+  const [isSubmiting, setIsSubmiting] = useState(false);
   const [showForm, setShowForm] = useState(false);
   const [templateToEdit, setTemplateToEdit] = useState(null);
-  const [{ isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
+  const [{ formErrors, isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
   const emailTemplates = useMemo(() => {
     return Object.keys(modifiedData).reduce((acc, current) => {
       const { display, icon } = modifiedData[current];
@@ -101,6 +104,9 @@ const EmailTemplatesPage = () => {
   const handleClosed = useCallback(() => {
     setTemplateToEdit(null);
     setShowForm(false);
+    dispatch({
+      type: 'RESET_FORM',
+    });
   }, []);
 
   const handleToggle = useCallback(() => {
@@ -115,15 +121,45 @@ const EmailTemplatesPage = () => {
     [handleToggle]
   );
 
-  const handleSubmit = useCallback(async e => {
-    e.preventDefault();
+  const handleSubmit = useCallback(
+    async e => {
+      e.preventDefault();
 
-    try {
-      console.log('todo');
-    } catch (err) {
-      // TODO
-    }
-  }, []);
+      let errors = {};
+
+      try {
+        setIsSubmiting(true);
+        await schema.validate(modifiedData[templateToEdit.id], { abortEarly: false });
+
+        try {
+          await request(getRequestURL('email-templates'), {
+            method: 'PUT',
+            body: { 'email-templates': modifiedData },
+          });
+
+          strapi.notification.success(getTrad('notification.success.submit'));
+
+          dispatch({ type: 'ON_SUBMIT_SUCCEEDED' });
+
+          handleToggle();
+        } catch (err) {
+          console.error(err);
+
+          strapi.notification.error('notification.error');
+        }
+      } catch (err) {
+        errors = getYupInnerErrors(err);
+      } finally {
+        setIsSubmiting(false);
+      }
+
+      dispatch({
+        type: 'SET_ERRORS',
+        errors,
+      });
+    },
+    [modifiedData, templateToEdit, handleToggle]
+  );
 
   const handleClick = useCallback(() => {
     buttonSubmitRef.current.click();
@@ -189,6 +225,7 @@ const EmailTemplatesPage = () => {
                         <SizedInput
                           key={input.name}
                           {...input}
+                          error={formErrors[input.name]}
                           name={`${id}.${input.name}`}
                           onChange={handleChange}
                           value={get(modifiedData, [id, ...input.name.split('.')], '')}
@@ -209,7 +246,7 @@ const EmailTemplatesPage = () => {
             <Button type="button" color="cancel" onClick={handleToggle}>
               {formatMessage({ id: 'app.components.Button.cancel' })}
             </Button>
-            <Button color="success" type="button" onClick={handleClick}>
+            <Button color="success" type="button" onClick={handleClick} isLoading={isSubmiting}>
               {formatMessage({ id: 'app.components.Button.save' })}
             </Button>
           </section>

packages/strapi-plugin-users-permissions/admin/src/containers/EmailTemplates/reducer.js

@@ -2,6 +2,7 @@ import produce from 'immer';
 import { set } from 'lodash';
 
 const initialState = {
+  formErrors: {},
   isLoading: true,
   initialData: {},
   modifiedData: {},
@@ -31,10 +32,21 @@ const reducer = (state, action) =>
         break;
       }
       case 'ON_CHANGE': {
-        console.log(action.keys);
         set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
         break;
       }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.initialData = state.modifiedData;
+        break;
+      }
+      case 'RESET_FORM': {
+        draftState.modifiedData = state.initialData;
+        break;
+      }
+      case 'SET_ERRORS': {
+        draftState.formErrors = action.errors;
+        break;
+      }
       default: {
         return draftState;
       }

packages/strapi-plugin-users-permissions/admin/src/containers/EmailTemplates/utils/forms.js

@@ -41,9 +41,9 @@ const forms = [
     autoFocus: false,
     label: getTrad('PopUpForm.Email.options.object.label'),
     name: 'options.object',
-    type: 'c',
+    type: 'customText',
     placeholder: getTrad('PopUpForm.Email.options.object.placeholder'),
-    customInputs: { c: CustomTextInput },
+    customInputs: { customText: CustomTextInput },
     descriptione: () => (
       <FormattedMessage
         id={getTrad('PopUpForm.Email.email_templates.inputDescription')}

packages/strapi-plugin-users-permissions/admin/src/containers/EmailTemplates/utils/schema.js

@@ -0,0 +1,25 @@
+import * as yup from 'yup';
+import { translatedErrors } from 'strapi-helper-plugin';
+
+const schema = yup.object().shape({
+  options: yup
+    .object()
+    .shape({
+      from: yup
+        .object()
+        .shape({
+          name: yup.string().required(translatedErrors.required),
+          email: yup
+            .string()
+            .email(translatedErrors.email)
+            .required(translatedErrors.required),
+        })
+        .required(),
+      response_email: yup.string().email(translatedErrors.email),
+      object: yup.string().required(translatedErrors.required),
+      message: yup.string().required(translatedErrors.required),
+    })
+    .required(translatedErrors.required),
+});
+
+export default schema;