@strapi/plugin-users-permissions 4.0.0-next.9 → 4.0.0

package/admin/src/pages/EmailTemplates/components/EmailForm.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Form, GenericInput } from '@strapi/helper-plugin';
+import { Formik } from 'formik';
+import {
+  ModalLayout,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+} from '@strapi/design-system/ModalLayout';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Button } from '@strapi/design-system/Button';
+import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
+import { Textarea } from '@strapi/design-system/Textarea';
+import { getTrad } from '../../../utils';
+import schema from '../utils/schema';
+
+const EmailForm = ({ template, onToggle, onSubmit }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ModalLayout
+      onClose={onToggle}
+      labelledBy={`${formatMessage({
+        id: getTrad('PopUpForm.header.edit.email-templates'),
+        defaultMessage: 'Edit email template',
+      })}, ${formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}`}
+    >
+      <ModalHeader>
+        <Breadcrumbs
+          label={`${formatMessage({
+            id: getTrad('PopUpForm.header.edit.email-templates'),
+            defaultMessage: 'Edit email template',
+          })}, ${formatMessage({
+            id: getTrad(template.display),
+            defaultMessage: template.display,
+          })}`}
+        >
+          <Crumb>
+            {formatMessage({
+              id: getTrad('PopUpForm.header.edit.email-templates'),
+              defaultMessage: 'Edit email template',
+            })}
+          </Crumb>
+          <Crumb>
+            {formatMessage({ id: getTrad(template.display), defaultMessage: template.display })}
+          </Crumb>
+        </Breadcrumbs>
+      </ModalHeader>
+      <Formik
+        onSubmit={onSubmit}
+        initialValues={template}
+        validateOnChange={false}
+        validationSchema={schema}
+        enableReinitialize
+      >
+        {({ errors, values, handleChange, isSubmitting }) => {
+          return (
+            <Form>
+              <ModalBody>
+                <Grid gap={5}>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.from.name.label'),
+                        defaultMessage: 'Shipper name',
+                      }}
+                      name="options.from.name"
+                      onChange={handleChange}
+                      value={values.options.from.name}
+                      error={errors?.options?.from?.name}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.from.email.label'),
+                        defaultMessage: 'Shipper email',
+                      }}
+                      name="options.from.email"
+                      onChange={handleChange}
+                      value={values.options.from.email}
+                      error={errors?.options?.from?.email}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.response_email.label'),
+                        defaultMessage: 'Response email',
+                      }}
+                      name="options.response_email"
+                      onChange={handleChange}
+                      value={values.options.response_email}
+                      error={errors?.options?.response_email}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <GenericInput
+                      intlLabel={{
+                        id: getTrad('PopUpForm.Email.options.object.label'),
+                        defaultMessage: 'Subject',
+                      }}
+                      name="options.object"
+                      onChange={handleChange}
+                      value={values.options.object}
+                      error={errors?.options?.object}
+                      type="text"
+                    />
+                  </GridItem>
+                  <GridItem col={12} s={12}>
+                    <Textarea
+                      label={formatMessage({
+                        id: getTrad('PopUpForm.Email.options.message.label'),
+                        defaultMessage: 'Message',
+                      })}
+                      name="options.message"
+                      onChange={handleChange}
+                      value={values.options.message}
+                      error={
+                        errors?.options?.message &&
+                        formatMessage({
+                          id: errors.options.message,
+                          defaultMessage: errors.options.message,
+                        })
+                      }
+                    />
+                  </GridItem>
+                </Grid>
+              </ModalBody>
+              <ModalFooter
+                startActions={
+                  <Button onClick={onToggle} variant="tertiary">
+                    Cancel
+                  </Button>
+                }
+                endActions={
+                  <Button loading={isSubmitting} type="submit">
+                    Finish
+                  </Button>
+                }
+              />
+            </Form>
+          );
+        }}
+      </Formik>
+    </ModalLayout>
+  );
+};
+
+EmailForm.propTypes = {
+  template: PropTypes.shape({
+    display: PropTypes.string,
+    icon: PropTypes.string,
+    options: PropTypes.shape({
+      from: PropTypes.shape({
+        name: PropTypes.string,
+        email: PropTypes.string,
+      }),
+      message: PropTypes.string,
+      object: PropTypes.string,
+      response_email: PropTypes.string,
+    }),
+  }).isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default EmailForm;

package/admin/src/pages/EmailTemplates/components/EmailTable.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
+import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
+import { Typography } from '@strapi/design-system/Typography';
+import { IconButton } from '@strapi/design-system/IconButton';
+import Pencil from '@strapi/icons/Pencil';
+import Reload from '@strapi/icons/Refresh';
+import { onRowClick, stopPropagation } from '@strapi/helper-plugin';
+import Check from '@strapi/icons/Check';
+import { getTrad } from '../../../utils';
+
+const EmailTable = ({ canUpdate, onEditClick }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Table colCount={3} rowCount={3}>
+      <Thead>
+        <Tr>
+          <Th width="1%">
+            <VisuallyHidden>
+              {formatMessage({
+                id: getTrad('Email.template.table.icon.label'),
+                defaultMessage: 'icon',
+              })}
+            </VisuallyHidden>
+          </Th>
+          <Th>
+            <Typography variant="sigma" textColor="neutral600">
+              {formatMessage({
+                id: getTrad('Email.template.table.name.label'),
+                defaultMessage: 'name',
+              })}
+            </Typography>
+          </Th>
+          <Th width="1%">
+            <VisuallyHidden>
+              {formatMessage({
+                id: getTrad('Email.template.table.action.label'),
+                defaultMessage: 'action',
+              })}
+            </VisuallyHidden>
+          </Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        <Tr {...onRowClick({ fn: () => onEditClick('reset_password') })}>
+          <Td>
+            <Reload
+              aria-label={formatMessage({
+                id: getTrad('Email.template.reset_password'),
+                defaultMessage: 'Reset password',
+              })}
+            />
+          </Td>
+          <Td>
+            <Typography>
+              {formatMessage({
+                id: getTrad('Email.template.reset_password'),
+                defaultMessage: 'Reset password',
+              })}
+            </Typography>
+          </Td>
+          <Td {...stopPropagation}>
+            <IconButton
+              onClick={() => onEditClick('reset_password')}
+              label={formatMessage({
+                id: getTrad('Email.template.form.edit.label'),
+                defaultMessage: 'Edit a template',
+              })}
+              noBorder
+              icon={canUpdate && <Pencil />}
+            />
+          </Td>
+        </Tr>
+        <Tr {...onRowClick({ fn: () => onEditClick('email_confirmation') })}>
+          <Td>
+            <Check
+              aria-label={formatMessage({
+                id: getTrad('Email.template.email_confirmation'),
+                defaultMessage: 'Email address confirmation',
+              })}
+            />
+          </Td>
+          <Td>
+            <Typography>
+              {formatMessage({
+                id: getTrad('Email.template.email_confirmation'),
+                defaultMessage: 'Email address confirmation',
+              })}
+            </Typography>
+          </Td>
+          <Td {...stopPropagation}>
+            <IconButton
+              onClick={() => onEditClick('email_confirmation')}
+              label={formatMessage({
+                id: getTrad('Email.template.form.edit.label'),
+                defaultMessage: 'Edit a template',
+              })}
+              noBorder
+              icon={canUpdate && <Pencil />}
+            />
+          </Td>
+        </Tr>
+      </Tbody>
+    </Table>
+  );
+};
+
+EmailTable.propTypes = {
+  canUpdate: PropTypes.bool.isRequired,
+  onEditClick: PropTypes.func.isRequired,
+};
+
+export default EmailTable;

package/admin/src/pages/EmailTemplates/index.js

@@ -1,27 +1,24 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { useIntl } from 'react-intl';
-import { Header, List } from '@buffetjs/custom';
-import { Pencil } from '@buffetjs/icons';
-import { get } from 'lodash';
 import {
   SettingsPageTitle,
-  SizedInput,
   useTracking,
-  request,
-  getYupInnerErrors,
   useNotification,
   useOverlayBlocker,
   CheckPagePermissions,
+  useRBAC,
+  useFocusWhenNavigate,
+  LoadingIndicatorPage,
 } from '@strapi/helper-plugin';
-import { Row } from 'reactstrap';
+import { useNotifyAT } from '@strapi/design-system/LiveRegions';
+import { Main } from '@strapi/design-system/Main';
+import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import pluginPermissions from '../../permissions';
-import { useForm } from '../../hooks';
-import ListBaselineAlignment from '../../components/ListBaselineAlignment';
-import ListRow from '../../components/ListRow';
-import ModalForm from '../../components/ModalForm';
-import { getRequestURL, getTrad } from '../../utils';
-import forms from './utils/forms';
-import schema from './utils/schema';
+import { getTrad } from '../../utils';
+import { fetchData, putEmailTemplate } from './utils/api';
+import EmailTable from './components/EmailTable';
+import EmailForm from './components/EmailForm';
 
 const ProtectedEmailTemplatesPage = () => (
   <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
@@ -32,210 +29,133 @@ const ProtectedEmailTemplatesPage = () => (
 const EmailTemplatesPage = () => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const { notifyStatus } = useNotifyAT();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const trackUsageRef = useRef(trackUsage);
-  const buttonSubmitRef = useRef(null);
-  const pageTitle = formatMessage({ id: getTrad('HeaderNav.link.emailTemplates') });
+  const queryClient = useQueryClient();
+  useFocusWhenNavigate();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [templateToEdit, setTemplateToEdit] = useState(null);
+
   const updatePermissions = useMemo(() => {
     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: isLoadingForPermissions,
     allowedActions: { canUpdate },
-    dispatchResetForm,
-    dispatchSetFormErrors,
-    dispatchSubmitSucceeded,
-    formErrors,
-    handleChange,
-    isLoading,
-    isLoadingForPermissions,
-    modifiedData,
-  } = useForm('email-templates', updatePermissions);
-
-  const emailTemplates = useMemo(() => {
-    return Object.keys(modifiedData).reduce((acc, current) => {
-      const { display, icon } = modifiedData[current];
-
-      acc.push({
-        id: current,
-        name: formatMessage({ id: getTrad(display) }),
-        icon: ['fas', icon],
+  } = useRBAC(updatePermissions);
+
+  const { status: isLoadingData, data } = useQuery('email-templates', () => fetchData(), {
+    onSuccess: () => {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('Email.template.data.loaded'),
+          defaultMessage: 'Email templates has been loaded',
+        })
+      );
+    },
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
       });
-
-      return acc;
-    }, []);
-  }, [modifiedData, formatMessage]);
-
-  const listTitle = useMemo(() => {
-    const count = emailTemplates.length;
-
-    return formatMessage(
-      {
-        id: getTrad(`List.title.emailTemplates.${count > 1 ? 'plural' : 'singular'}`),
-      },
-      { number: count }
-    );
-  }, [emailTemplates.length, formatMessage]);
-
-  const handleClosed = useCallback(() => {
-    setTemplateToEdit(null);
-    setShowForm(false);
-    dispatchResetForm();
-  }, [dispatchResetForm]);
-
-  const handleToggle = useCallback(() => {
-    setIsOpen(prev => !prev);
-  }, []);
-
-  const handleClickEdit = useCallback(
-    template => {
-      setTemplateToEdit(template);
-      handleToggle();
     },
-    [handleToggle]
-  );
-
-  const handleSubmit = useCallback(
-    async e => {
-      e.preventDefault();
-
-      let errors = {};
+  });
 
-      try {
-        setIsSubmiting(true);
-        await schema.validate(modifiedData[templateToEdit.id], { abortEarly: false });
+  const isLoading = isLoadingForPermissions || isLoadingData !== 'success';
 
-        lockApp();
+  const handleToggle = () => {
+    setIsModalOpen(prev => !prev);
+  };
 
-        try {
-          trackUsageRef.current('willEditEmailTemplates');
+  const handleEditClick = template => {
+    setTemplateToEdit(template);
+    handleToggle();
+  };
 
-          await request(getRequestURL('email-templates'), {
-            method: 'PUT',
-            body: { 'email-templates': modifiedData },
-          });
+  const submitMutation = useMutation(body => putEmailTemplate({ 'email-templates': body }), {
+    onSuccess: async () => {
+      await queryClient.invalidateQueries('email-templates');
 
-          trackUsageRef.current('didEditEmailTemplates');
-
-          toggleNotification({
-            type: 'success',
-            message: { id: getTrad('notification.success.submit') },
-          });
-
-          dispatchSubmitSucceeded();
-
-          handleToggle();
-        } catch (err) {
-          console.error(err);
+      toggleNotification({
+        type: 'success',
+        message: { id: 'notification.success.saved', defaultMessage: 'Saved' },
+      });
 
-          toggleNotification({
-            type: 'warning',
-            message: { id: 'notification.error' },
-          });
-        }
-      } catch (err) {
-        errors = getYupInnerErrors(err);
-      } finally {
-        setIsSubmiting(false);
-        unlockApp();
-      }
+      trackUsageRef.current('didEditEmailTemplates');
 
-      dispatchSetFormErrors(errors);
+      unlockApp();
+      handleToggle();
     },
-    [
-      dispatchSetFormErrors,
-      dispatchSubmitSucceeded,
-      modifiedData,
-      templateToEdit,
-      handleToggle,
-      toggleNotification,
-      lockApp,
-      unlockApp,
-    ]
-  );
-
-  const handleClick = useCallback(() => {
-    buttonSubmitRef.current.click();
-  }, []);
-
-  const handleOpened = useCallback(() => {
-    setShowForm(true);
-  }, []);
+    onError: () => {
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error', defaultMessage: 'An error occured' },
+      });
+      unlockApp();
+    },
+    refetchActive: true,
+  });
+  const { isLoading: isSubmittingForm } = submitMutation;
+
+  const handleSubmit = body => {
+    lockApp();
+    trackUsageRef.current('willEditEmailTemplates');
+
+    const editedTemplates = { ...data, [templateToEdit]: body };
+    submitMutation.mutate(editedTemplates);
+  };
+
+  if (isLoading) {
+    return (
+      <Main aria-busy="true">
+        <SettingsPageTitle
+          name={formatMessage({
+            id: getTrad('HeaderNav.link.emailTemplates'),
+            defaultMessage: 'Email templates',
+          })}
+        />
+        <HeaderLayout
+          title={formatMessage({
+            id: getTrad('HeaderNav.link.emailTemplates'),
+            defaultMessage: 'Email templates',
+          })}
+        />
+        <ContentLayout>
+          <LoadingIndicatorPage />
+        </ContentLayout>
+      </Main>
+    );
+  }
 
   return (
-    <>
-      <SettingsPageTitle name={pageTitle} />
-      <div>
-        <Header title={{ label: pageTitle }} isLoading={isLoadingForPermissions || isLoading} />
-        <ListBaselineAlignment />
-        <List
-          title={listTitle}
-          items={emailTemplates}
-          isLoading={isLoadingForPermissions || isLoading}
-          customRowComponent={template => (
-            <ListRow
-              {...template}
-              onClick={() => {
-                if (canUpdate) {
-                  handleClickEdit(template);
-                }
-              }}
-              links={[
-                {
-                  icon: canUpdate ? <Pencil fill="#0e1622" /> : null,
-                  onClick: e => {
-                    e.stopPropagation();
-                    handleClickEdit(template);
-                  },
-                },
-              ]}
-            />
-          )}
-        />
-      </div>
-      <ModalForm
-        isOpen={isOpen}
-        onOpened={handleOpened}
-        onToggle={handleToggle}
-        onClosed={handleClosed}
-        headerBreadcrumbs={[
-          getTrad('PopUpForm.header.edit.email-templates'),
-          get(templateToEdit, 'name', ''),
-        ]}
-        onClick={handleClick}
-        onCancel={handleToggle}
-        isLoading={isSubmiting}
-      >
-        {showForm && (
-          <form onSubmit={handleSubmit}>
-            <Row>
-              {forms.map(input => {
-                const id = get(templateToEdit, 'id');
-
-                return (
-                  <SizedInput
-                    key={input.name}
-                    {...input}
-                    error={formErrors[input.name]}
-                    name={`${id}.${input.name}`}
-                    onChange={handleChange}
-                    value={get(modifiedData, [id, ...input.name.split('.')], '')}
-                  />
-                );
-              })}
-            </Row>
-            <button type="submit" style={{ display: 'none' }} ref={buttonSubmitRef}>
-              hidden button to use the native form event
-            </button>
-          </form>
+    <Main aria-busy={isSubmittingForm}>
+      <SettingsPageTitle
+        name={formatMessage({
+          id: getTrad('HeaderNav.link.emailTemplates'),
+          defaultMessage: 'Email templates',
+        })}
+      />
+      <HeaderLayout
+        title={formatMessage({
+          id: getTrad('HeaderNav.link.emailTemplates'),
+          defaultMessage: 'Email templates',
+        })}
+      />
+      <ContentLayout>
+        <EmailTable onEditClick={handleEditClick} canUpdate={canUpdate} />
+        {isModalOpen && (
+          <EmailForm
+            template={data[templateToEdit]}
+            onToggle={handleToggle}
+            onSubmit={handleSubmit}
+          />
         )}
-      </ModalForm>
-    </>
+      </ContentLayout>
+    </Main>
   );
 };
 

package/admin/src/pages/EmailTemplates/utils/api.js

@@ -0,0 +1,13 @@
+import { axiosInstance, getRequestURL } from '../../../utils';
+
+const fetchData = async () => {
+  const { data } = await axiosInstance.get(getRequestURL('email-templates'));
+
+  return data;
+};
+
+const putEmailTemplate = body => {
+  return axiosInstance.put(getRequestURL('email-templates'), body);
+};
+
+export { fetchData, putEmailTemplate };