feat: add styles to ckeditor msg email body

nossas · Jun 24, 2024 · 8819a35 · 8819a35
1 parent 096cb1f
commit 8819a35
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 82 deletions.
diff --git a/clients/libs/ckeditor5-custom-build/src/ckeditor.ts b/clients/libs/ckeditor5-custom-build/src/ckeditor.ts
@@ -103,6 +103,14 @@ class Editor extends ClassicEditor {
 			]
 		},
 		language: 'pt-br',
+		heading: {
+			options: [
+					{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
+					{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
+					{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
+					{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
+			]
+		},
 		image: {
 			toolbar: [
 				'imageTextAlternative',

diff --git a/clients/packages/canary-client/public/locales/en/widgetActions.json b/clients/packages/canary-client/public/locales/en/widgetActions.json
@@ -41,7 +41,7 @@
     "defaultForm": {
       "error": "Houve um erro ao salvar o formulário",
       "success": "EBA! Suas alterações foram salvas.",
-      "submit": "Salvar"
+      "submit": "Salvar alterações"
     },
     "adjusts": {
       "title": "Formulário",

diff --git a/clients/packages/canary-client/public/locales/es/widgetActions.json b/clients/packages/canary-client/public/locales/es/widgetActions.json
@@ -41,7 +41,7 @@
     "defaultForm": {
       "error": "Houve um erro ao salvar o formulário",
       "success": "EBA! Suas alterações foram salvas.",
-      "submit": "Salvar"
+      "submit": "Salvar alterações"
     },
     "adjusts": {
       "title": "Formulário",

diff --git a/clients/packages/canary-client/public/locales/pt-BR/widgetActions.json b/clients/packages/canary-client/public/locales/pt-BR/widgetActions.json
@@ -35,7 +35,7 @@
     "defaultForm": {
       "error": "Houve um erro ao salvar o formulário",
       "success": "EBA! Suas alterações foram salvas.",
-      "submit": "Salvar"
+      "submit": "Salvar alterações"
     },
     "pressure": {
       "targets": {

diff --git a/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx b/clients/packages/canary-client/src/scenes/WidgetActions/Settings/Autofire/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import styled from 'styled-components';
 
 import { InputField, Validators } from 'bonde-components';
 import {
@@ -8,7 +9,8 @@ import {
   Flex,
   Grid,
   GridItem,
-  Heading
+  Heading,
+  FormLabel
 } from "bonde-components/chakra";
 
 import ClassicEditor from "ckeditor5-custom-build";
@@ -18,6 +20,16 @@ import { noSpecialCharacters } from "../../../../services/utils";
 import { Widget } from "../../FetchWidgets";
 import SettingsForm from '../SettingsForm';
 
+const Styles = styled.div`
+  .emailBody {
+    padding-bottom: 30px;
+  }
+
+  .emailBody--label {
+    padding-bottom: 4px;
+  }
+`
+
 type Props = {
   widget: Widget;
   updateCache: any;
@@ -28,86 +40,87 @@ const { required, composeValidators, isEmail } = Validators;
 const AutofireForm = ({ widget, updateCache }: Props): React.ReactElement => {
   const { t } = useTranslation("widgetActions");
 
-  const [editorData, setEditorData] = useState('');
-
+  const [editorData, setEditorData] = useState(t("settings.autofire.placeholder.emailBody"));
 
   return (
-    <SettingsForm
-      widget={widget}
-      afterSubmit={async (values:any, result:any) => {
-        updateCache(result.data.update_widgets.returning[0])
-      }}
-      initialValues={{
-        settings: widget.settings
-      }}
-    >
-      {({ submitting, dirty }: any) => (
-        <Grid templateColumns="repeat(12, 1fr)" gap={16}>
-          <GridItem colSpan={[12, 12, 6]}>
-            <Box bg="white" p={6} boxShadow="sm">
-              <Heading as="h3" size="xl" mb={4}>{t("settings.autofire.title")}</Heading>
-              <InputField
-                label={t("settings.autofire.label.sendersName")}
-                name="settings.sender_name"
-                placeholder={t("settings.autofire.placeholder.sendersName")}
-                validate={composeValidators(
-                  required(t("settings.autofire.validators.required")),
-                  noSpecialCharacters(
-                    t("settings.autofire.validators.noSpecialCharacter")
-                  )
-                )}
-              />
-              <InputField
-                label={t("settings.autofire.label.sendersEmail")}
-                name="settings.sender_email"
-                placeholder={t("settings.autofire.placeholder.sendersEmail")}
-                validate={composeValidators(
-                  required(t("settings.autofire.validators.required")),
-                  isEmail(t("settings.autofire.validators.isEmail"))
-                )}
-              />
-              <InputField
-                label={t("settings.autofire.label.emailSubject")}
-                name="settings.email_subject"
-                placeholder={t("settings.autofire.placeholder.emailSubject")}
-                validate={composeValidators(
-                  required(t("settings.autofire.validators.required"))
-                )}
-              />
-              {/* <TextareaField
-                label={t("settings.autofire.label.emailBody")}
-                name="settings.email_text"
-                placeholder={t("settings.autofire.placeholder.emailBody")}
-                validate={composeValidators(
-                  required(t("settings.autofire.validators.required"))
-                )}
-              /> */}
-              <CKEditor
-                editor={ClassicEditor}
-                data={editorData}
-                config={{
-                  simpleUpload: {
-                    uploadUrl: process.env.REACT_APP_UPLOADS_URL,
-                    withCredentials: true,
-                    headers: {
-                      "X-CSRF-TOKEN": "CSRF-Token",
-                      Authorization: "Bearer <JSON Web Token>"
-                    }
-                  }
-                }}
-                onChange={(event, editor) => {
-                  const data = editor.getData();
-                  setEditorData(data);
-                }}
-              />
-              <Flex justify='end'>
-                <Button disabled={submitting || !dirty} type='submit'>{t('settings.defaultForm.submit')}</Button>
-              </Flex>
-            </Box>
-          </GridItem>
-        </Grid>
-      )}
-    </SettingsForm>
+    <Styles>
+      <SettingsForm
+        widget={widget}
+        afterSubmit={async (values:any, result:any) => {
+          updateCache(result.data.update_widgets.returning[0])
+        }}
+        initialValues={{
+          settings: widget.settings
+        }}
+      >
+        {({ submitting, dirty }: any) => (
+          <Grid templateColumns="repeat(12, 1fr)" gap={16}>
+            <GridItem colSpan={[12, 12, 6]}>
+              <Box bg="white" p={6} boxShadow="sm">
+                <Heading as="h3" size="xl" mb={4}>{t("settings.autofire.title")}</Heading>
+                <InputField
+                  label={t("settings.autofire.label.sendersName")}
+                  name="settings.sender_name"
+                  placeholder={t("settings.autofire.placeholder.sendersName")}
+                  validate={composeValidators(
+                    required(t("settings.autofire.validators.required")),
+                    noSpecialCharacters(
+                      t("settings.autofire.validators.noSpecialCharacter")
+                    )
+                  )}
+                />
+                <InputField
+                  label={t("settings.autofire.label.sendersEmail")}
+                  name="settings.sender_email"
+                  placeholder={t("settings.autofire.placeholder.sendersEmail")}
+                  validate={composeValidators(
+                    required(t("settings.autofire.validators.required")),
+                    isEmail(t("settings.autofire.validators.isEmail"))
+                  )}
+                />
+                <InputField
+                  label={t("settings.autofire.label.emailSubject")}
+                  name="settings.email_subject"
+                  placeholder={t("settings.autofire.placeholder.emailSubject")}
+                  validate={composeValidators(
+                    required(t("settings.autofire.validators.required"))
+                  )}
+                />
+                <Flex className="emailBody" direction="column">
+                    <FormLabel className="emailBody--label" htmlFor="editor">
+                      {t("settings.autofire.label.emailBody")}
+                    </FormLabel>
+                    <CKEditor
+                      data={editorData}
+                      editor={ClassicEditor}
+                      config={{
+                        simpleUpload: {
+                          uploadUrl: process.env.REACT_APP_UPLOADS_URL,
+                          withCredentials: true,
+                          headers: {
+                            "X-CSRF-TOKEN": "CSRF-Token",
+                            Authorization: "Bearer <JSON Web Token>"
+                          }
+                        }
+                      }}
+                      onChange={(event, editor) => {
+                        const data = editor.getData();
+                        setEditorData(data);
+                      }}
+                      validate={composeValidators(
+                        required(t("settings.autofire.validators.required"))
+                      )}
+                    />
+                </Flex>
+                <Flex justify='end'>
+                  <Button disabled={submitting || !dirty} type='submit'>{t('settings.defaultForm.submit')}</Button>
+                </Flex>
+              </Box>
+            </GridItem>
+          </Grid>
+        )}
+      </SettingsForm>
+    </Styles>
   );
 };