fix: message conditional

RedTurtle · Oct 30, 2024 · 878b491 · 878b491
1 parent dde6a9c
commit 878b491
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 58 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx b/src/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx
@@ -5,28 +5,25 @@ import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   expiredDate: {
-    id: 'expiredDate',
-    defaultMessage: 'Pubblicazione scaduta',
+    id: 'alert_expiredDate',
+    defaultMessage: "Non visibile. E' scaduto il {date}.",
   },
   activeDate: {
-    id: 'activeDate',
-    defaultMessage: 'Pubblicazione attiva',
+    id: 'alert_activeDate',
+    defaultMessage: 'Pubblicazione attiva.',
   },
   futureDate: {
-    id: 'futureDate',
-    defaultMessage: 'Pubblicazione futura',
-  },
-  startTitle: {
-    id: 'startTitle',
-    defaultMessage: 'Data inizio pubblicazione:',
-  },
-  endTitle: {
-    id: 'endTitle',
-    defaultMessage: 'Data fine pubblicazione:',
+    id: 'alert_futureDate',
+    defaultMessage: 'Non visibile. Verà pubblicato il {date}',
   },
   errorDate: {
-    id: 'errorDate',
-    defaultMessage: "Data di scadenza anteriore a data d'inizio",
+    id: 'alert_errorDate',
+    defaultMessage:
+      "Non visibile. C'è un errore sulle date: la data di scadenza è anteriore alla data d'inizio",
+  },
+  willExpire: {
+    id: 'alert_willExpire',
+    defaultMessage: 'Scadrà il {date}',
   },
 });
 
@@ -45,16 +42,25 @@ const AlertWrapper = ({ data, children }) => {
 
     if (end < start) {
       returnValue.message = intl.formatMessage(messages.errorDate);
-      returnValue.active = false;
     } else if (today < start) {
-      returnValue.message = intl.formatMessage(messages.futureDate);
+      returnValue.message = intl.formatMessage(messages.futureDate, {
+        date: new Date(data.startDate).toLocaleString(),
+      });
       returnValue.active = false;
     } else if (today < end) {
       returnValue.message = intl.formatMessage(messages.activeDate);
+      if (data.endDate) {
+        returnValue.message +=
+          ' ' +
+          intl.formatMessage(messages.willExpire, {
+            date: new Date(data.endDate).toLocaleString(),
+          });
+      }
       returnValue.active = true;
     } else {
-      returnValue.message = intl.formatMessage(messages.expiredDate);
-      returnValue.active = false;
+      returnValue.message = intl.formatMessage(messages.expiredDate, {
+        date: new Date(data.endDate).toLocaleString(),
+      });
     }
     return returnValue;
   };
@@ -68,27 +74,7 @@ const AlertWrapper = ({ data, children }) => {
           {userLogged && (
             <Container className="alert-info-dates">
               <Row>
-                <p>{activeStatus.message}</p>
-              </Row>
-              <Row>
-                <ul>
-                  {data.startDate && (
-                    <li>
-                      <p>
-                        {intl.formatMessage(messages.startTitle)}{' '}
-                        {new Date(data.startDate).toLocaleString()}
-                      </p>
-                    </li>
-                  )}
-                  {data.endDate && (
-                    <li>
-                      <p>
-                        {intl.formatMessage(messages.endTitle)}{' '}
-                        {new Date(data.endDate).toLocaleString()}
-                      </p>
-                    </li>
-                  )}
-                </ul>
+                <p className="alert-info-text">{activeStatus.message}</p>
               </Row>
             </Container>
           )}

diff --git a/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx b/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx
@@ -47,10 +47,10 @@ const Edit = (props) => {
                 {data.image?.data && (
                   <Col sm={2} className="pb-3 image-col">
                     <img
-                      src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
+                      src={`data:${data?.image['content-type']};${data?.image?.encoding},${data?.image?.data}`}
                       alt=""
                       className={cx('left-image', [
-                        data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
+                        data?.sizeImage ? 'size-' + data.sizeImage : 'size-l',
                       ])}
                     />
                   </Col>

diff --git a/src/components/ItaliaTheme/Blocks/Alert/View.jsx b/src/components/ItaliaTheme/Blocks/Alert/View.jsx
@@ -5,19 +5,12 @@ import redraft from 'redraft';
 import { Container, Row, Col } from 'design-react-kit/dist/design-react-kit';
 import config from '@plone/volto/registry';
 import AlertWrapper from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Alert/AlertWrapper.jsx';
+import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 
 const View = ({ data }) => {
-  const content = data.text
-    ? redraft(
-        data.text,
-        config.settings.richtextViewSettings.ToHTMLRenderers,
-        config.settings.richtextViewSettings.ToHTMLOptions,
-      )
-    : '';
-
-  return content ? (
-    <AlertWrapper data={data}>
-      <section role="alert" className="block alertblock">
+  return checkRedraftHasContent(data.text) ? (
+    <section role="alert" className="block alertblock">
+      <AlertWrapper data={data}>
         <Row className={cx('row-full-width', 'bg-alert-' + data.color)}>
           <Container className="p-4 pt-5 pb-5">
             <Row className="align-items-start">
@@ -34,12 +27,18 @@ const View = ({ data }) => {
                   />
                 </Col>
               )}
-              <Col>{content}</Col>
+              <Col>
+                {redraft(
+                  data.text,
+                  config.settings.richtextViewSettings.ToHTMLRenderers,
+                  config.settings.richtextViewSettings.ToHTMLOptions,
+                )}
+              </Col>
             </Row>
           </Container>
         </Row>
-      </section>
-    </AlertWrapper>
+      </AlertWrapper>
+    </section>
   ) : null;
 };
 

diff --git a/theme/ItaliaTheme/Blocks/_alert.scss b/theme/ItaliaTheme/Blocks/_alert.scss
@@ -1,6 +1,7 @@
 .public-ui {
   .block.alertblock,
   .alertblock {
+    position: relative;
     .bg-alert-warning-orange,
     .bg-alert-warning,
     .bg-alert-danger {
@@ -119,6 +120,14 @@
     }
   }
   .alert-info-dates {
-    border-top: 1px solid $gray-100;
+    position: absolute;
+    content: '';
+    top: -1em;
+    .alert-info-text {
+      padding: 0 1em;
+      background-color: #fff;
+      border: 1px solid #000;
+      text-align: center;
+    }
   }
 }