From e9d1e6087490dd0fc68e7217b32152a777010440 Mon Sep 17 00:00:00 2001
From: Priyanka Terala <priyanka_terala@epam.com>
Date: Mon, 9 Dec 2024 14:54:17 +0530
Subject: [PATCH] UICIRC-1121 - Add preliminary changes with debug logs

---
 .../PatronNotices/PatronNoticeForm.js         |   1 +
 .../PatronNoticeAboutSection.js               | 172 +++++++++---------
 .../PatronNoticeEmailSection.js               |   5 +-
 3 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/src/settings/PatronNotices/PatronNoticeForm.js b/src/settings/PatronNotices/PatronNoticeForm.js
index 325aaa83..973a7da7 100644
--- a/src/settings/PatronNotices/PatronNoticeForm.js
+++ b/src/settings/PatronNotices/PatronNoticeForm.js
@@ -159,6 +159,7 @@ const PatronNoticeForm = (props) => {
                   printOnly={printOnly}
                   category={category}
                   locale={locale}
+                  template={values?.localizedTemplates}
                 />
               </Accordion>
             </AccordionSet>
diff --git a/src/settings/PatronNotices/components/EditSections/PatronNoticeAboutSection/PatronNoticeAboutSection.js b/src/settings/PatronNotices/components/EditSections/PatronNoticeAboutSection/PatronNoticeAboutSection.js
index a939af2f..4f77ace5 100644
--- a/src/settings/PatronNotices/components/EditSections/PatronNoticeAboutSection/PatronNoticeAboutSection.js
+++ b/src/settings/PatronNotices/components/EditSections/PatronNoticeAboutSection/PatronNoticeAboutSection.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import Proptypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import { Field } from 'react-final-form';
@@ -19,91 +19,101 @@ import {
 import { patronNoticeCategories } from '../../../../../constants';
 import { validateUniqueNameById } from '../../../../utils/utils';
 
-const PatronNoticeAboutSection = ({ initialValues, okapi, intl }) => {
-  const { formatMessage } = intl;
-  const categoryOptions = patronNoticeCategories.map(({ label, id }) => ({
-    label: formatMessage({ id: label }),
-    value: id,
-  }));
-  const isActive = initialValues && initialValues.active;
+const PatronNoticeAboutSection = memo(
+  ({ initialValues, okapi, intl }) => {
+    const { formatMessage } = intl;
+    const categoryOptions = patronNoticeCategories.map(({ label, id }) => ({
+      label: formatMessage({ id: label }),
+      value: id,
+    }));
+    const isActive = initialValues && initialValues.active;
 
-  const getTemplatesByName = (name) => {
-    return fetch(`${okapi.url}/templates?query=(name=="${name}")`,
-      {
-        ...getHeaderWithCredentials(okapi)
-      });
-  };
+    const getTemplatesByName = (name) => {
+      return fetch(`${okapi.url}/templates?query=(name=="${name}")`,
+        {
+          ...getHeaderWithCredentials(okapi)
+        });
+    };
 
-  const validateName = memoize((name) => (
-    validateUniqueNameById({
-      currentName: name,
-      previousId: initialValues.id,
-      getByName: getTemplatesByName,
-      selector: 'templates',
-      errorKey: 'settings.patronNotices.errors.nameExists',
-    })
-  ));
+    const validateName = memoize((name) => (
+      validateUniqueNameById({
+        currentName: name,
+        previousId: initialValues.id,
+        getByName: getTemplatesByName,
+        selector: 'templates',
+        errorKey: 'settings.patronNotices.errors.nameExists',
+      })
+    ));
 
-  return (
-    <div data-testid="patronNoticeAboutSection">
-      <Row>
-        <Col
-          xs={12}
-          data-test-patron-notice-template-name
-        >
-          <Field
-            data-testid="patronNoticesNoticeName"
-            label={formatMessage({ id: 'ui-circulation.settings.patronNotices.notice.name' })}
-            name="name"
-            required
-            id="input-patron-notice-name"
-            autoFocus
-            component={TextField}
-            validate={validateName}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <Field
-            data-testid="patronNoticesNoticeActive"
-            label={formatMessage({ id:'ui-circulation.settings.patronNotices.notice.active' })}
-            name="active"
-            id="input-patron-notice-active"
-            component={Checkbox}
-            defaultChecked={isActive}
-          />
-        </Col>
-      </Row>
-      <br />
-      <Row>
-        <Col xs={12}>
-          <Field
-            data-testid="patronNoticesNoticeDescription"
-            label={formatMessage({ id:'ui-circulation.settings.patronNotices.notice.description' })}
-            name="description"
-            id="input-patron-notice-description"
-            component={TextArea}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={12}>
-          <div data-test-template-category>
+    return (
+      <div data-testid="patronNoticeAboutSection">
+        <Row>
+          <Col
+            xs={12}
+            data-test-patron-notice-template-name
+          >
             <Field
-              data-testid="patronNoticesNoticeCategory"
-              label={formatMessage({ id:'ui-circulation.settings.patronNotices.notice.category' })}
-              name="category"
-              component={Select}
-              fullWidth
-              dataOptions={categoryOptions}
+              data-testid="patronNoticesNoticeName"
+              label={formatMessage({ id: 'ui-circulation.settings.patronNotices.notice.name' })}
+              name="name"
+              required
+              id="input-patron-notice-name"
+              autoFocus
+              component={TextField}
+              validate={validateName}
             />
-          </div>
-        </Col>
-      </Row>
-    </div>
-  );
-};
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12}>
+            <Field
+              data-testid="patronNoticesNoticeActive"
+              label={formatMessage({ id:'ui-circulation.settings.patronNotices.notice.active' })}
+              name="active"
+              id="input-patron-notice-active"
+              component={Checkbox}
+              defaultChecked={isActive}
+            />
+          </Col>
+        </Row>
+        <br />
+        <Row>
+          <Col xs={12}>
+            <Field
+              data-testid="patronNoticesNoticeDescription"
+              label={formatMessage({ id:'ui-circulation.settings.patronNotices.notice.description' })}
+              name="description"
+              id="input-patron-notice-description"
+              component={TextArea}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12}>
+            <div data-test-template-category>
+              <Field
+                data-testid="patronNoticesNoticeCategory"
+                label={formatMessage({ id:'ui-circulation.settings.patronNotices.notice.category' })}
+                name="category"
+                component={Select}
+                fullWidth
+                dataOptions={categoryOptions}
+              />
+            </div>
+          </Col>
+        </Row>
+      </div>
+    );
+  },
+  (prevProps, newProps) => {
+    const { prevId, prevActive } = prevProps.initialValues;
+    const { newId, newActive } = newProps.initialValues;
+    console.log('PatronNoticeAboutSection are initial values same ', prevId === newId && prevActive === newActive);
+
+    return prevId === newId && prevActive === newActive;
+  }
+);
+
 PatronNoticeAboutSection.propTypes = {
   initialValues: Proptypes.object.isRequired,
   okapi: Proptypes.object.isRequired,
diff --git a/src/settings/PatronNotices/components/EditSections/PatronNoticeEmailSection/PatronNoticeEmailSection.js b/src/settings/PatronNotices/components/EditSections/PatronNoticeEmailSection/PatronNoticeEmailSection.js
index c581a587..121794f2 100644
--- a/src/settings/PatronNotices/components/EditSections/PatronNoticeEmailSection/PatronNoticeEmailSection.js
+++ b/src/settings/PatronNotices/components/EditSections/PatronNoticeEmailSection/PatronNoticeEmailSection.js
@@ -14,9 +14,11 @@ import { TemplateEditor } from '@folio/stripes-template-editor';
 import getTokens from '../../../tokens';
 import TokensList from '../../../TokensList';
 
-const PatronNoticeEmailSection = ({ category, locale, printOnly }) => {
+const PatronNoticeEmailSection = ({ template, category, locale, printOnly }) => {
   const tokens = getTokens(locale);
 
+  console.log('PatronNoticeEmailSection template ', template, template?.en?.body);
+
   return (
     <div data-testid="emailAccordionContent">
       <Row>
@@ -70,5 +72,6 @@ PatronNoticeEmailSection.propTypes = {
   category: PropTypes.string,
   locale: PropTypes.string,
   printOnly: PropTypes.bool,
+  template: PropTypes.object,
 };
 export default PatronNoticeEmailSection;