Merge pull request #178 from map-of-pi/ft/user-settings

Approved (1).

Author: swoocn

public/images/shared/review_ratings/trust-o-meter_000.PNG

@@ -300,7 +300,7 @@ const SellerRegistrationForm = () => {
           {/* seller review toggle */}
           <ToggleCollapse
             header={t('SCREEN.SELLER_REGISTRATION.REVIEWS_SUMMARY_LABEL')}>
-            <TrustMeter ratings={dbSeller ? dbSeller.trust_meter_rating : placeholderSeller.trust_meter_rating} />
+            <TrustMeter ratings={userSettings ? userSettings.trust_meter_rating : placeholderSeller.trust_meter_rating} />
             <div className="flex items-center justify-between mt-3 mb-5">
               <p className="text-sm">
                 {t('SCREEN.BUY_FROM_SELLER.REVIEWS_SCORE_MESSAGE', {

public/images/shared/review_ratings/trust-o-meter_050.PNG

@@ -138,7 +138,7 @@ export default function Page({ params }: { params: { id: string } }) {
           <h2 className={SUBHEADER}>{t('SCREEN.BUY_FROM_SELLER.REVIEWS_SUMMARY_LABEL')}</h2>
           {/* Trust-O-meter */}
           <div>
-            <TrustMeter ratings={sellerShopInfo.trust_meter_rating} />
+            <TrustMeter ratings={sellerSettings ? sellerSettings.trust_meter_rating : 100} />
           </div>
           <div className="flex items-center justify-between">
             <p className="text-sm">

public/images/shared/review_ratings/trust-o-meter_080.PNG

@@ -1,54 +1,36 @@
-import React from 'react';
+import Image from 'next/image';
+import React, {useEffect, useState} from 'react';
 
 type TrustMeterProps = {
   ratings: number;
   hideLabel?: boolean;
 };
 
 const TrustMeter: React.FC<TrustMeterProps> = ({ ratings, hideLabel}) => {
-  const percentageRating = ratings.toString();
-  const average = 50; // this can be adjusted
-  const condition = ratings < average
+  const [ratingImage, setRatingImage] = useState<string>('')
 
-  const lines = Array.from({ length: 11 }, (_, i) => i); // Generates an array [0, 1, 2, ..., 7]
+  useEffect(() => {
+    if (ratings === 0) {
+      setRatingImage(`/images/shared/review_ratings/trust-o-meter_0${ratings}0.PNG`);
+    } else if (ratings === 50 || ratings === 80) {
+      setRatingImage(`/images/shared/review_ratings/trust-o-meter_0${ratings}.PNG`);
+    } else {
+      setRatingImage(`/images/shared/review_ratings/trust-o-meter_${ratings}.PNG`);
+    }       
+  }, [ratings]);
 
   return (
-    <div className='w-full flex'>
+    <div className='w-full flex items-center mb-3'>
       <h3 className={`font-bold text-sm text-nowrap pe-2 ${hideLabel? 'hidden': 'block'}`}>Trust-o-meter</h3>
       <div className='flex-1'>
-
         <div className="flex w-full">          
-          <div className={`${condition ? 'bg-red-700' : 'bg-green-700'} rounded-full p-3 w-[5px] h-[5px]`}></div>
-          
-          {/* Primary indicator */}
-          <div className={`rounded-e-[9px] h-[10px] w-full my-auto -ms-1 ${condition ? 'bg-red-400' : 'bg-green-400'}`}>
-            
-            {/* Secondary indicator */}
-            <div
-              className={`${condition ? 'bg-red-700' : 'bg-green-700'} h-[10px] rounded-e-[9px]`}
-              style={{ width: `${percentageRating}%` }}
-            ></div>
-          </div>
-        </div>
-        <div className="mb-3 w-full ps-[25px]">
-          <div className="flex justify-between px-1 overflow-hidden">
-            {lines.map((_, index) => (
-              <div key={index} className='bg-black rounded-t rounded-b' style={{ width: '2px', height: '10px' }}></div>
-            ))}
-          </div>
-          <div className="flex justify-between">
-            <span className='w-[9.09%] text-[14px]'>0<span className=' text-[12px]'>%</span></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'>50<span className=' text-[12px]'>%</span></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'>80<span className=' text-[12px]'>%</span></span>
-            <span className='w-[9.09%] text-[14px]'></span>
-            <span className='w-[9.09%] text-[14px]'>100<span className=' text-[12px]'>%</span></span>
-          </div>
+          <Image 
+            src={ratingImage} 
+            alt='100% ratings' 
+            width={400} 
+            height={3}
+            className="w-full max-w-xs md:max-w-md lg:max-w-lg"
+          />          
         </div>
       </div>
     </div>

public/images/shared/review_ratings/trust-o-meter_100.PNG

@@ -5,8 +5,8 @@ import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from 'react-leaf
 import L, { LatLngExpression, LatLngBounds, LatLngTuple } from 'leaflet';
 import _ from 'lodash';
 
+import { ISeller, ISellerWithSettings } from '@/constants/types';
 import { fetchSellers } from '@/services/sellerApi';
-import { ISeller } from '@/constants/types';
 import { toLatLngLiteral } from '@/util/map';
 
 import MapMarkerPopup from './MapMarkerPopup'
@@ -22,7 +22,7 @@ const sanitizeCoordinates = (lat: number, lng: number) => {
 };
 
 // Function to fetch seller coordinates based on origin, radius, and optional search query
-const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searchQuery?: string): Promise<ISeller[]> => {
+const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searchQuery?: string): Promise<ISellerWithSettings[]> => {
   const { lat, lng } = sanitizeCoordinates(origin[0], origin[1]);
   const formattedOrigin = toLatLngLiteral([lat, lng]);
 
@@ -37,7 +37,7 @@ const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searc
     });
 
     logger.info('Fetched sellers data:', { sellersWithCoordinates });
-
+    
     return sellersWithCoordinates;
   } catch (error) {
     logger.error('Error fetching seller coordinates:', { error });
@@ -46,8 +46,8 @@ const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searc
 };
 
 // Function to remove duplicate sellers based on seller_id
-const removeDuplicates = (sellers: ISeller[]): ISeller[] => {
-  const uniqueSellers: { [key: string]: ISeller } = {};
+const removeDuplicates = (sellers: ISellerWithSettings[]): ISellerWithSettings[] => {
+  const uniqueSellers: { [key: string]: ISellerWithSettings } = {};
   sellers.forEach(seller => {
     uniqueSellers[seller.seller_id] = seller;
   });
@@ -66,7 +66,7 @@ const Map = ({ center, zoom, searchQuery, searchResults }: { center: LatLngExpre
   });
 
   const [position, setPosition] = useState<L.LatLng | null>(null);
-  const [sellers, setSellers] = useState<ISeller[]>([]);
+  const [sellers, setSellers] = useState<ISellerWithSettings[]>([]);
   const [origin, setOrigin] = useState(center);
   const [radius, setRadius] = useState(10);
   const [loading, setLoading] = useState(false);

src/app/[locale]/seller/registration/page.tsx

@@ -19,7 +19,7 @@ const MapMarkerPopup = ({ seller }:any) => {
         {/* Seller Profile */}
         <div className="font-bold text-base mb-2">
           {seller.name}
-          <span className="ps-2">({seller.average_rating.$numberDecimal}/5.0)</span>
+          <span className="ps-2">({seller.trust_meter_rating}%)</span>
         </div>
         <div className="flex gap-2 mb-2 items-center">
           <div className="relative w-[50px] h-[50px] min-w-[50px] min-h-[50px]">

src/app/[locale]/seller/sale-items/[id]/page.tsx

@@ -65,8 +65,8 @@ function Sidebar(props: any) {
   const [showInfoModel, setShowInfoModel] = useState(false);
   const [showPrivacyPolicyModel, setShowPrivacyPolicyModel] = useState(false);
   const [showTermsOfServiceModel, setShowTermsOfServiceModel] = useState(false);
-  const [isSaveEnabled, setIsSaveEnabled] = useState(false);
   const [formData, setFormData] = useState({
+    trust_meter_rating: 100,
     user_name: '',
     email: '',
     phone_number: '',
@@ -97,6 +97,7 @@ function Sidebar(props: any) {
   useEffect(() => {
     if (userSettings) {
       setFormData({
+        trust_meter_rating: userSettings.trust_meter_rating,
         user_name: userSettings.user_name || '',
         email: userSettings.email || '',
         phone_number: userSettings.phone_number || '',
@@ -115,10 +116,6 @@ function Sidebar(props: any) {
       ...prevFormData,
       [name]: value,
     }));
-    
-    // enable or disable save button based on form inputs
-    const isFormFilled = Object.values(formData).some(v => v !== '');
-    setIsSaveEnabled(isFormFilled);
   };
 
   const handlePhoneNumberChange = (value: string | undefined) => {
@@ -193,7 +190,6 @@ function Sidebar(props: any) {
         const data = await createUserSettings(formData);
         logger.info('User settings submitted successfully:', { data });
         if (data.settings) {
-          setIsSaveEnabled(false)
           toast.success(t('SIDE_NAVIGATION.VALIDATION.SUCCESSFUL_PREFERENCES_SUBMISSION'));
         }
       } catch (error: any) {
@@ -311,7 +307,6 @@ function Sidebar(props: any) {
 
             <Button
               label={t('SHARED.SAVE')}
-              disabled={!isSaveEnabled}
               styles={{
                 color: '#ffc153',
                 height: '40px',
@@ -326,7 +321,7 @@ function Sidebar(props: any) {
             {/* user review */}
             <div className='my-2'>
               <h3 className={`font-bold text-sm text-nowrap`}>Trust-o-meter</h3>
-              <TrustMeter ratings={currentUser ? 50 : 100} hideLabel={true} />
+              <TrustMeter ratings={userSettings ? userSettings.trust_meter_rating : 100} hideLabel={true} />
             </div>             
             <Link href={currentUser ? `/seller/reviews/${currentUser?.pi_uid}` : '#'}>
               <OutlineBtn
@@ -421,7 +416,6 @@ function Sidebar(props: any) {
                 </div>
                 <Button
                   label={t('SHARED.SAVE')}
-                  disabled={!isSaveEnabled}
                   styles={{
                     color: '#ffc153',
                     height: '40px',
@@ -458,10 +452,7 @@ function Sidebar(props: any) {
                   ))}
               </ToggleCollapse>
             </div>
-            
           </div>
-
-          
           <div ref={bottomRef}></div>
         </div>
       </div>

src/components/shared/Review/TrustMeter.tsx

@@ -11,6 +11,7 @@ export interface IUserSettings {
   phone_number?: string;
   image?: string; 
   findme?: string;
+  trust_meter_rating: number;
   search_map_center?: {
     type: 'Point';
     coordinates: [number, number];
@@ -24,11 +25,9 @@ export interface ISeller {
   seller_type: string;
   image: string;
   address: string;
-  sale_items: string;
   average_rating: {
     $numberDecimal: string;
   };
-  trust_meter_rating: number;
   coordinates: [number, number];
   order_online_enabled_pref: boolean;
 };
@@ -43,3 +42,9 @@ export interface IReviewFeedback {
   image: string;
   review_date: string;
 }
+
+// Select specific fields from IUserSettings
+export type PartialUserSettings = Pick<IUserSettings, 'user_name' | 'email' | 'phone_number' | 'findme' | 'trust_meter_rating'>;
+
+// Combined interface representing a seller with selected user settings
+export interface ISellerWithSettings extends ISeller, PartialUserSettings {}