Skip to content

Commit 1838f11

Browse files
swoocnswoocn
authored
Merge pull request #178 from map-of-pi/ft/user-settings
Approved (1).
2 parents d0b828f + eb80a06 commit 1838f11

File tree

11 files changed

+39
-61
lines changed

11 files changed

+39
-61
lines changed

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

24 KB
Loading

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

27.5 KB
Loading

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

24.3 KB
Loading

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

23.2 KB
Loading

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

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

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

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

‎src/components/shared/Review/TrustMeter.tsx

+20-38
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,36 @@
1-
import React from 'react';
1+
import Image from 'next/image';
2+
import React, {useEffect, useState} from 'react';
23

34
type TrustMeterProps = {
45
ratings: number;
56
hideLabel?: boolean;
67
};
78

89
const TrustMeter: React.FC<TrustMeterProps> = ({ ratings, hideLabel}) => {
9-
const percentageRating = ratings.toString();
10-
const average = 50; // this can be adjusted
11-
const condition = ratings < average
10+
const [ratingImage, setRatingImage] = useState<string>('')
1211

13-
const lines = Array.from({ length: 11 }, (_, i) => i); // Generates an array [0, 1, 2, ..., 7]
12+
useEffect(() => {
13+
if (ratings === 0) {
14+
setRatingImage(`/images/shared/review_ratings/trust-o-meter_0${ratings}0.PNG`);
15+
} else if (ratings === 50 || ratings === 80) {
16+
setRatingImage(`/images/shared/review_ratings/trust-o-meter_0${ratings}.PNG`);
17+
} else {
18+
setRatingImage(`/images/shared/review_ratings/trust-o-meter_${ratings}.PNG`);
19+
}
20+
}, [ratings]);
1421

1522
return (
16-
<div className='w-full flex'>
23+
<div className='w-full flex items-center mb-3'>
1724
<h3 className={`font-bold text-sm text-nowrap pe-2 ${hideLabel? 'hidden': 'block'}`}>Trust-o-meter</h3>
1825
<div className='flex-1'>
19-
2026
<div className="flex w-full">
21-
<div className={`${condition ? 'bg-red-700' : 'bg-green-700'} rounded-full p-3 w-[5px] h-[5px]`}></div>
22-
23-
{/* Primary indicator */}
24-
<div className={`rounded-e-[9px] h-[10px] w-full my-auto -ms-1 ${condition ? 'bg-red-400' : 'bg-green-400'}`}>
25-
26-
{/* Secondary indicator */}
27-
<div
28-
className={`${condition ? 'bg-red-700' : 'bg-green-700'} h-[10px] rounded-e-[9px]`}
29-
style={{ width: `${percentageRating}%` }}
30-
></div>
31-
</div>
32-
</div>
33-
<div className="mb-3 w-full ps-[25px]">
34-
<div className="flex justify-between px-1 overflow-hidden">
35-
{lines.map((_, index) => (
36-
<div key={index} className='bg-black rounded-t rounded-b' style={{ width: '2px', height: '10px' }}></div>
37-
))}
38-
</div>
39-
<div className="flex justify-between">
40-
<span className='w-[9.09%] text-[14px]'>0<span className=' text-[12px]'>%</span></span>
41-
<span className='w-[9.09%] text-[14px]'></span>
42-
<span className='w-[9.09%] text-[14px]'></span>
43-
<span className='w-[9.09%] text-[14px]'></span>
44-
<span className='w-[9.09%] text-[14px]'></span>
45-
<span className='w-[9.09%] text-[14px]'>50<span className=' text-[12px]'>%</span></span>
46-
<span className='w-[9.09%] text-[14px]'></span>
47-
<span className='w-[9.09%] text-[14px]'></span>
48-
<span className='w-[9.09%] text-[14px]'>80<span className=' text-[12px]'>%</span></span>
49-
<span className='w-[9.09%] text-[14px]'></span>
50-
<span className='w-[9.09%] text-[14px]'>100<span className=' text-[12px]'>%</span></span>
51-
</div>
27+
<Image
28+
src={ratingImage}
29+
alt='100% ratings'
30+
width={400}
31+
height={3}
32+
className="w-full max-w-xs md:max-w-md lg:max-w-lg"
33+
/>
5234
</div>
5335
</div>
5436
</div>

‎src/components/shared/map/Map.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from 'react-leaf
55
import L, { LatLngExpression, LatLngBounds, LatLngTuple } from 'leaflet';
66
import _ from 'lodash';
77

8+
import { ISeller, ISellerWithSettings } from '@/constants/types';
89
import { fetchSellers } from '@/services/sellerApi';
9-
import { ISeller } from '@/constants/types';
1010
import { toLatLngLiteral } from '@/util/map';
1111

1212
import MapMarkerPopup from './MapMarkerPopup'
@@ -22,7 +22,7 @@ const sanitizeCoordinates = (lat: number, lng: number) => {
2222
};
2323

2424
// Function to fetch seller coordinates based on origin, radius, and optional search query
25-
const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searchQuery?: string): Promise<ISeller[]> => {
25+
const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searchQuery?: string): Promise<ISellerWithSettings[]> => {
2626
const { lat, lng } = sanitizeCoordinates(origin[0], origin[1]);
2727
const formattedOrigin = toLatLngLiteral([lat, lng]);
2828

@@ -37,7 +37,7 @@ const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searc
3737
});
3838

3939
logger.info('Fetched sellers data:', { sellersWithCoordinates });
40-
40+
4141
return sellersWithCoordinates;
4242
} catch (error) {
4343
logger.error('Error fetching seller coordinates:', { error });
@@ -46,8 +46,8 @@ const fetchSellerCoordinates = async (origin: LatLngTuple, radius: number, searc
4646
};
4747

4848
// Function to remove duplicate sellers based on seller_id
49-
const removeDuplicates = (sellers: ISeller[]): ISeller[] => {
50-
const uniqueSellers: { [key: string]: ISeller } = {};
49+
const removeDuplicates = (sellers: ISellerWithSettings[]): ISellerWithSettings[] => {
50+
const uniqueSellers: { [key: string]: ISellerWithSettings } = {};
5151
sellers.forEach(seller => {
5252
uniqueSellers[seller.seller_id] = seller;
5353
});
@@ -66,7 +66,7 @@ const Map = ({ center, zoom, searchQuery, searchResults }: { center: LatLngExpre
6666
});
6767

6868
const [position, setPosition] = useState<L.LatLng | null>(null);
69-
const [sellers, setSellers] = useState<ISeller[]>([]);
69+
const [sellers, setSellers] = useState<ISellerWithSettings[]>([]);
7070
const [origin, setOrigin] = useState(center);
7171
const [radius, setRadius] = useState(10);
7272
const [loading, setLoading] = useState(false);

‎src/components/shared/map/MapMarkerPopup.tsx

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

‎src/components/shared/sidebar/sidebar.tsx

+3-12
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ function Sidebar(props: any) {
6565
const [showInfoModel, setShowInfoModel] = useState(false);
6666
const [showPrivacyPolicyModel, setShowPrivacyPolicyModel] = useState(false);
6767
const [showTermsOfServiceModel, setShowTermsOfServiceModel] = useState(false);
68-
const [isSaveEnabled, setIsSaveEnabled] = useState(false);
6968
const [formData, setFormData] = useState({
69+
trust_meter_rating: 100,
7070
user_name: '',
7171
email: '',
7272
phone_number: '',
@@ -97,6 +97,7 @@ function Sidebar(props: any) {
9797
useEffect(() => {
9898
if (userSettings) {
9999
setFormData({
100+
trust_meter_rating: userSettings.trust_meter_rating,
100101
user_name: userSettings.user_name || '',
101102
email: userSettings.email || '',
102103
phone_number: userSettings.phone_number || '',
@@ -115,10 +116,6 @@ function Sidebar(props: any) {
115116
...prevFormData,
116117
[name]: value,
117118
}));
118-
119-
// enable or disable save button based on form inputs
120-
const isFormFilled = Object.values(formData).some(v => v !== '');
121-
setIsSaveEnabled(isFormFilled);
122119
};
123120

124121
const handlePhoneNumberChange = (value: string | undefined) => {
@@ -193,7 +190,6 @@ function Sidebar(props: any) {
193190
const data = await createUserSettings(formData);
194191
logger.info('User settings submitted successfully:', { data });
195192
if (data.settings) {
196-
setIsSaveEnabled(false)
197193
toast.success(t('SIDE_NAVIGATION.VALIDATION.SUCCESSFUL_PREFERENCES_SUBMISSION'));
198194
}
199195
} catch (error: any) {
@@ -311,7 +307,6 @@ function Sidebar(props: any) {
311307

312308
<Button
313309
label={t('SHARED.SAVE')}
314-
disabled={!isSaveEnabled}
315310
styles={{
316311
color: '#ffc153',
317312
height: '40px',
@@ -326,7 +321,7 @@ function Sidebar(props: any) {
326321
{/* user review */}
327322
<div className='my-2'>
328323
<h3 className={`font-bold text-sm text-nowrap`}>Trust-o-meter</h3>
329-
<TrustMeter ratings={currentUser ? 50 : 100} hideLabel={true} />
324+
<TrustMeter ratings={userSettings ? userSettings.trust_meter_rating : 100} hideLabel={true} />
330325
</div>
331326
<Link href={currentUser ? `/seller/reviews/${currentUser?.pi_uid}` : '#'}>
332327
<OutlineBtn
@@ -421,7 +416,6 @@ function Sidebar(props: any) {
421416
</div>
422417
<Button
423418
label={t('SHARED.SAVE')}
424-
disabled={!isSaveEnabled}
425419
styles={{
426420
color: '#ffc153',
427421
height: '40px',
@@ -458,10 +452,7 @@ function Sidebar(props: any) {
458452
))}
459453
</ToggleCollapse>
460454
</div>
461-
462455
</div>
463-
464-
465456
<div ref={bottomRef}></div>
466457
</div>
467458
</div>

‎src/constants/types.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface IUserSettings {
1111
phone_number?: string;
1212
image?: string;
1313
findme?: string;
14+
trust_meter_rating: number;
1415
search_map_center?: {
1516
type: 'Point';
1617
coordinates: [number, number];
@@ -24,11 +25,9 @@ export interface ISeller {
2425
seller_type: string;
2526
image: string;
2627
address: string;
27-
sale_items: string;
2828
average_rating: {
2929
$numberDecimal: string;
3030
};
31-
trust_meter_rating: number;
3231
coordinates: [number, number];
3332
order_online_enabled_pref: boolean;
3433
};
@@ -43,3 +42,9 @@ export interface IReviewFeedback {
4342
image: string;
4443
review_date: string;
4544
}
45+
46+
// Select specific fields from IUserSettings
47+
export type PartialUserSettings = Pick<IUserSettings, 'user_name' | 'email' | 'phone_number' | 'findme' | 'trust_meter_rating'>;
48+
49+
// Combined interface representing a seller with selected user settings
50+
export interface ISellerWithSettings extends ISeller, PartialUserSettings {}

0 commit comments

Comments
 (0)