From 3d7fc762d14f9dad261df2dfe538da5cd991e1c9 Mon Sep 17 00:00:00 2001
From: Yury Saukou <yury_saukou@epam.com>
Date: Tue, 26 Nov 2024 11:47:11 +0400
Subject: [PATCH] update card header

---
 .../OrganizationVersionView.js                |  2 --
 .../OrganizationContactInfoVersionView.js     | 10 ++-----
 .../components/ContactAddressesVersionView.js | 28 ++++++++-----------
 .../ContactCardHeaderVersionView.css          |  7 +++++
 .../ContactCardHeaderVersionView.js           | 26 +++++++++++++++++
 .../ContactCardHeaderVersionView/index.js     |  1 +
 .../ContactPersonEmailsVersionView.js         | 23 ++++++---------
 .../ContactPersonPhonesVersionView.js         | 23 ++++++---------
 .../ContactPersonURLsVersionView.js           | 23 ++++++---------
 9 files changed, 74 insertions(+), 69 deletions(-)
 create mode 100644 src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.css
 create mode 100644 src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.js
 create mode 100644 src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/index.js

diff --git a/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js b/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js
index ee667272..d96763da 100644
--- a/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js
+++ b/src/Organizations/OrganizationVersion/OrganizationVersionView/OrganizationVersionView.js
@@ -54,8 +54,6 @@ export const OrganizationVersionView = ({ version }) => {
     },
   ];
 
-  console.log('version', version);
-
   return (
     <HasCommand
       commands={shortcuts}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
index b9b2d71f..7dc945fe 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/OrganizationContactInfoVersionView.js
@@ -85,14 +85,8 @@ export const OrganizationContactInfoVersionView = ({ version: currentVersion })
         >
           <ContactAddressesVersionView addresses={data[category.id].addresses} />
           <ContactPersonPhonesVersionView phones={data[category.id].phoneNumbers} />
-          <ContactPersonEmailsVersionView
-            name="emails"
-            emails={data[category.id].emails}
-          />
-          <ContactPersonURLsVersionView
-            name="urls"
-            urls={data[category.id].urls}
-          />
+          <ContactPersonEmailsVersionView emails={data[category.id].emails} />
+          <ContactPersonURLsVersionView urls={data[category.id].urls} />
         </Accordion>
       ))}
     </Layout>
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
index 72abba41..db641a15 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactAddressesVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -7,29 +6,24 @@ import {
   Col,
   Row,
 } from '@folio/stripes/components';
-import {
-  VersionKeyValue,
-  VersionViewContext,
-} from '@folio/stripes-acq-components';
+import { VersionKeyValue } from '@folio/stripes-acq-components';
 
-export const ContactAddressesVersionView = ({ addresses }) => {
-  const versionContext = useContext(VersionViewContext);
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
+export const ContactAddressesVersionView = ({ addresses }) => {
   return (
     <Row>
       <Col xs={12}>
         {addresses?.map((address) => {
-          const isPrimaryValue = (
-            <h4 style={{ margin: 0 }}>
-              <FormattedMessage id={`ui-organizations.${address?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-            </h4>
-          );
-          const headerStart = versionContext?.paths?.includes(`${address?._initialFieldPath}.isPrimary`)
-            ? <mark>{isPrimaryValue}</mark>
-            : isPrimaryValue;
-
           return (
-            <Card headerStart={headerStart}>
+            <Card
+              headerStart={(
+                <ContactCardHeaderVersionView
+                  name={`${address?._initialFieldPath}.isPrimary`}
+                  isPrimary={address?.isPrimary}
+                />
+              )}
+            >
               <Row>
                 <Col xs={3}>
                   <VersionKeyValue
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.css b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.css
new file mode 100644
index 00000000..ac0e1af8
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.css
@@ -0,0 +1,7 @@
+.cardHeader {
+  margin: 0;
+  
+  & .mark {
+    background-color: mark;
+  }
+}
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.js
new file mode 100644
index 00000000..9aaec497
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/ContactCardHeaderVersionView.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { VersionViewContext } from '@folio/stripes-acq-components';
+
+import css from './ContactCardHeaderVersionView.css';
+
+export const ContactCardHeaderVersionView = ({ isPrimary, name }) => {
+  const versionContext = useContext(VersionViewContext);
+
+  const isUpdated = versionContext?.paths?.includes(name);
+
+  const headerStart = (
+    <h4 className={css.cardHeader}>
+      <span className={isUpdated ? css.mark : ''}><FormattedMessage id={`ui-organizations.${isPrimary ? 'primaryItem' : 'alternateItem'}`} /></span>
+    </h4>
+  );
+
+  return headerStart;
+};
+
+ContactCardHeaderVersionView.propTypes = {
+  isPrimary: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+};
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/index.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/index.js
new file mode 100644
index 00000000..f958e7ee
--- /dev/null
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactCardHeaderVersionView/index.js
@@ -0,0 +1 @@
+export { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
index 65b6d1b3..46cf494e 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonEmailsVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -10,31 +9,27 @@ import {
 import {
   LANG_LABEL_BY_CODE,
   VersionKeyValue,
-  VersionViewContext,
 } from '@folio/stripes-acq-components';
 
 import { ContactPersonSection } from '../../../../../ContactPeople/ContactPerson';
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
 export const ContactPersonEmailsVersionView = ({ emails }) => {
-  const versionContext = useContext(VersionViewContext);
-
   if (!emails?.length) return null;
 
   const renderBody = () => (
     <Row>
       <Col xs={12}>
         {emails?.map((email) => {
-          const isPrimaryValue = (
-            <h4 style={{ margin: 0 }}>
-              <FormattedMessage id={`ui-organizations.${email?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-            </h4>
-          );
-          const headerStart = versionContext?.paths?.includes(`${email?._initialFieldPath}.isPrimary`)
-            ? <span><mark>{isPrimaryValue}</mark></span>
-            : isPrimaryValue;
-
           return (
-            <Card headerStart={headerStart}>
+            <Card
+              headerStart={(
+                <ContactCardHeaderVersionView
+                  name={`${email?._initialFieldPath}.isPrimary`}
+                  isPrimary={email?.isPrimary}
+                />
+              )}
+            >
               <Row>
                 <Col xs={3}>
                   <VersionKeyValue
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
index 7b4766a3..177cc97a 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonPhonesVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -10,14 +9,12 @@ import {
 import {
   LANG_LABEL_BY_CODE,
   VersionKeyValue,
-  VersionViewContext,
 } from '@folio/stripes-acq-components';
 
 import { ContactPersonSection } from '../../../../../ContactPeople/ContactPerson';
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
 export const ContactPersonPhonesVersionView = ({ phones }) => {
-  const versionContext = useContext(VersionViewContext);
-
   if (!phones?.length) return null;
 
   const renderBody = () => (
@@ -25,17 +22,15 @@ export const ContactPersonPhonesVersionView = ({ phones }) => {
       <Row>
         <Col xs={12}>
           {phones?.map((phone) => {
-            const isPrimaryValue = (
-              <h4 style={{ margin: 0 }}>
-                <FormattedMessage id={`ui-organizations.${phone?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-              </h4>
-            );
-            const headerStart = versionContext?.paths?.includes(`${phone?._initialFieldPath}.isPrimary`)
-              ? <mark>{isPrimaryValue}</mark>
-              : isPrimaryValue;
-
             return (
-              <Card headerStart={headerStart}>
+              <Card
+                headerStart={(
+                  <ContactCardHeaderVersionView
+                    name={`${phone?._initialFieldPath}.isPrimary`}
+                    isPrimary={phone?.isPrimary}
+                  />
+                )}
+              >
                 <Row>
                   <Col xs={3}>
                     <VersionKeyValue
diff --git a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
index 45477cf9..1577c24e 100644
--- a/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
+++ b/src/Organizations/OrganizationVersion/components/OrganizationContactInfoVersionView/components/ContactPersonURLsVersionView.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import {
@@ -11,31 +10,27 @@ import {
 import {
   LANG_LABEL_BY_CODE,
   VersionKeyValue,
-  VersionViewContext,
 } from '@folio/stripes-acq-components';
 
 import { ContactPersonSection } from '../../../../../ContactPeople/ContactPerson';
+import { ContactCardHeaderVersionView } from './ContactCardHeaderVersionView';
 
 export const ContactPersonURLsVersionView = ({ urls }) => {
-  const versionContext = useContext(VersionViewContext);
-
   if (!urls?.length) return null;
 
   const renderBody = () => (
     <Row>
       <Col xs={12}>
         {urls?.map((url) => {
-          const isPrimaryValue = (
-            <h4 style={{ margin: 0 }}>
-              <FormattedMessage id={`ui-organizations.${url?.isPrimary ? 'primaryItem' : 'alternateItem'}`} />
-            </h4>
-          );
-          const headerStart = versionContext?.paths?.includes(`${url?._initialFieldPath}.isPrimary`)
-            ? <mark>{isPrimaryValue}</mark>
-            : isPrimaryValue;
-
           return (
-            <Card headerStart={headerStart}>
+            <Card
+              headerStart={(
+                <ContactCardHeaderVersionView
+                  name={`${url?._initialFieldPath}.isPrimary`}
+                  isPrimary={url?.isPrimary}
+                />
+              )}
+            >
               <Row>
                 <Col xs={3}>
                   <VersionKeyValue