#625 add icon on the banner logo if profile is in'pending moderation'status

BackEnd/profiles/serializers.py

@@ -56,6 +56,18 @@ def to_internal_value(self, data):
         return ProfileImage.objects.filter(uuid=data, is_deleted=False).first()
 
 
+class ProfileImageFieldApprovedStatus(ProfileImageField):
+    def to_representation(self, value):
+        if not value.is_deleted:
+            return {
+                "uuid": value.uuid,
+                "path": self.context["request"].build_absolute_uri(
+                    value.image_path.url
+                ),
+                "is_approved": value.is_approved,
+            }
+
+
 class ProfileListSerializer(serializers.ModelSerializer):
     activities = ActivitySerializer(many=True, read_only=True)
     categories = CategorySerializer(many=True, read_only=True)
@@ -200,8 +212,8 @@ class ProfileOwnerDetailViewSerializer(serializers.ModelSerializer):
     email = serializers.ReadOnlyField(source="person.email")
     regions = RegionSerializer(many=True, read_only=True)
     regions_ukr_display = serializers.SerializerMethodField()
-    banner = ProfileImageField()
-    logo = ProfileImageField()
+    banner = ProfileImageFieldApprovedStatus()
+    logo = ProfileImageFieldApprovedStatus()
 
     class Meta:
         model = Profile
@@ -231,6 +243,8 @@ class Meta:
             "banner",
             "logo",
             "is_deleted",
+            "status",
+            "status_updated_at",
         )
         read_only_fields = (
             "id",
@@ -258,6 +272,8 @@ class Meta:
             "banner",
             "logo",
             "is_deleted",
+            "status",
+            "status_updated_at",
         )
 
     def get_regions_ukr_display(self, obj) -> str:

FrontEnd/src/components/MiniComponents/PendingModerationIcon/PendingStatus.jsx

@@ -0,0 +1,40 @@
+import { Tooltip } from 'antd';
+import styles from './PendingStatus.module.css';
+
+const PendingStatus = ({ profile, elementType }) => {
+
+  const bannerApproved = profile?.banner.is_approved;
+  const logoApproved = profile?.logo.is_approved;
+
+  const shouldShowTooltip = (elementType === 'banner' && bannerApproved === false)
+    || (elementType === 'logo' && logoApproved === false);
+
+  const formattedDate = new Date(profile?.status_updated_at).toLocaleString('uk-UA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  const tooltipText = `Статус модерації: Очікується. Час відправки запиту: ${formattedDate}`;
+
+  return (
+    (profile?.status === 'pending' && shouldShowTooltip) ? (
+    <div className={styles['tooltip-container']}>
+      <Tooltip
+        title={tooltipText}
+        placement="bottomLeft"
+        overlayStyle={{ marginLeft: '10px' }}
+      >
+        <img
+          src={`${process.env.REACT_APP_PUBLIC_URL}/img/moderation-icon.png`}
+          alt="Pending status icon"
+        />
+      </Tooltip>
+    </div>
+    ) : null
+  );
+};
+
+export default PendingStatus;

FrontEnd/src/components/MiniComponents/PendingModerationIcon/PendingStatus.module.css

@@ -0,0 +1,7 @@
+.tooltip-container{
+    display: flex;
+    position:absolute;
+    padding-top: 5px;
+    padding-left: 3px;
+  }
+

FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx

@@ -11,6 +11,7 @@ import DetailedInfoSection from './DetailedInfo/DetailedInfoSection';
 import BannerImage from './BannerImage';
 import { ActiveLinksContext } from '../../context/ActiveLinksContext';
 import classes from './ProfileDetailPage.module.css';
+import PendingStatus from '../MiniComponents/PendingModerationIcon/PendingStatus';
 
 function ProfileDetailPage({ isAuthorized }) {
   const [activeLinks, setActiveLinks] = useState([]);
@@ -31,21 +32,27 @@ function ProfileDetailPage({ isAuthorized }) {
   const notRequiredData = ['address', 'banner', 'logo', 'common_info', 'edrpou', 'rnokpp', 'founded', 'official_name', 'product_info', 'service_info', 'startup_idea', 'logistics', 'cooperation'];
   const containsNotRequiredData = fetchedProfile ? Object.keys(fetchedProfile).some(key => notRequiredData.includes(key) && fetchedProfile[key] !== '' && fetchedProfile[key] !== null) : false;
 
-  return (error && error.response.status !== 401) ? (
+  return (error && error.status !== 401) ? (
     <ErrorPage404 />
   ) : (
     <div className={isLoading ? classes['loader-content'] : null}>
       {isLoading ? (
         <Loader />
       ) : (
           <ActiveLinksContext.Provider value={{ activeLinks, setActiveLinks }}>
+            <div className={classes['banner-tooltip']}>
+            <PendingStatus profile={fetchedProfile} elementType="banner" />
+            </div>
             <BannerImage data={fetchedProfile} />
             <div className={classes['profile-page']}>
               <MainInfoSection
                 containsNotRequiredData={containsNotRequiredData}
                 isAuthorized={isAuthorized}
                 data={fetchedProfile}
               />
+              <div className={classes['logo-tooltip']}>
+                <PendingStatus profile={fetchedProfile} elementType="logo" />
+              </div>
               <DetailedInfoSection
                 containsNotRequiredData={containsNotRequiredData}
                 isAuthorized={isAuthorized}

FrontEnd/src/components/ProfileDetail/ProfileDetailPage.module.css

@@ -12,3 +12,17 @@
     margin-left: 104px;
     margin-right: 104px;
 }
+
+.logo-tooltip{
+    display: flex;
+    position:absolute;
+    padding-top: 5px;
+    padding-left: 3px;
+}
+
+.banner-tooltip{
+    display: flex;
+    position:absolute;
+    padding-top: 12px;
+    padding-left: 112px;
+}

FrontEnd/src/components/ProfilePage/FormComponents/FormFields/ImageField.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './ImageField.module.css';
+import PendingStatus from '../../../MiniComponents/PendingModerationIcon/PendingStatus';
 
 const ImageField = ({
   name,
@@ -10,8 +11,10 @@ const ImageField = ({
   value,
   updateHandler,
   onDeleteImage,
+  profile,
   error,
 }) => {
+
   const backgroundImage = {
     background: `url(${value}) lightgray 50% / cover no-repeat`,
   };
@@ -56,11 +59,18 @@ const ImageField = ({
   );
 
   return (
-    <div className={classNames(css['fields__column'], {
-      [css['fields__column--logo']]: name === 'logo',
-    })}>
+    <div
+      className={classNames(css['fields__column'], {
+        [css['fields__column--logo']]: name === 'logo',
+      })}
+    >
       <div className={css['fields__label']}>
-        <label className={classNames(css['fields__label--text'], css['fields__field--notrequired'])}>
+        <label
+          className={classNames(
+            css['fields__label--text'],
+            css['fields__field--notrequired']
+          )}
+        >
           {label}
         </label>
         {name === 'banner' && value && (
@@ -84,28 +94,37 @@ const ImageField = ({
               <span className={css['upload-file__banner-image--title']}>
                 Зображення для банера на сторінці профайлу
               </span>
-              <div
-                className={css['upload-file__banner-image--page']}
-                style={backgroundImage}
-              />
+              <div className={css['tooltip-container']}>
+                <PendingStatus profile={profile} elementType="banner" />
+                <div
+                  className={css['upload-file__banner-image--page']}
+                  style={backgroundImage}
+                />
+              </div>
             </div>
             <div className={css['upload-file__wrapper--banner-card']}>
               <span className={css['upload-file__banner-image--title']}>
                 Зображення для карток
               </span>
-              <div
-                className={css['upload-file__banner-image--card']}
-                style={backgroundImage}
-              />
+              <div>
+                <PendingStatus profile={profile} elementType="banner" />
+                <div
+                  className={css['upload-file__banner-image--card']}
+                  style={backgroundImage}
+                />
+              </div>
             </div>
           </>
         )}
         {name === 'logo' && value && (
-          <div className={css['upload-file__wrapper--logo']}>
-            <div className={css['upload-file__logo']} style={backgroundImage} />
-            {renderInput()}
-            {renderUpdateImageLabel('змінити')}
-            {renderDeleteButton('видалити')}
+          <div>
+            <PendingStatus profile={profile} elementType="logo" />
+            <div className={css['upload-file__wrapper--logo']}>
+              <div className={css['upload-file__logo']} style={backgroundImage} />
+              {renderInput()}
+              {renderUpdateImageLabel('змінити')}
+              {renderDeleteButton('видалити')}
+            </div>
           </div>
         )}
       </div>

FrontEnd/src/components/ProfilePage/FormComponents/FormFields/ImageField.module.css

@@ -175,4 +175,4 @@ button {
 
 .fields__field--notrequired {
     padding-top: 2px;
-}
+}

FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.jsx

@@ -525,6 +525,7 @@ const GeneralInfo = (props) => {
               value={bannerImage}
               error={bannerImageError}
               onDeleteImage={deleteImageHandler}
+              profile={mainProfile}
             />
             <ImageField
               accept="image/png, image/jpeg"
@@ -535,6 +536,7 @@ const GeneralInfo = (props) => {
               value={logoImage}
               error={logoImageError}
               onDeleteImage={deleteImageHandler}
+              profile={mainProfile}
             />
             <BanerModeration />
             <TextField