From 65bd6c646b5a430f507de160d913e605dad8cff7 Mon Sep 17 00:00:00 2001 From: Meenadeveloper Date: Fri, 6 Mar 2026 14:41:07 +0530 Subject: [PATCH] setting page api integrated --- src/api/apiEndpoints.js | 19 ++ src/api/auth.api.js | 4 +- src/api/contact.api.js | 7 + src/api/safety.api.js | 7 + src/components/common/ProfileHeader.jsx | 53 +++- src/pages/AccountSettingsPage.jsx | 325 +++++++++++++++++++++--- src/pages/ContactUsPage.jsx | 183 ++++++------- src/pages/NotificationPage.jsx | 221 +++------------- src/pages/SafetyCentre.jsx | 95 +++---- 9 files changed, 541 insertions(+), 373 deletions(-) create mode 100644 src/api/contact.api.js create mode 100644 src/api/safety.api.js diff --git a/src/api/apiEndpoints.js b/src/api/apiEndpoints.js index 96b848e..d872116 100644 --- a/src/api/apiEndpoints.js +++ b/src/api/apiEndpoints.js @@ -35,4 +35,23 @@ EDIT_FAMILY_DETAILS: "get_family_details", EDIT_LIFESTYLE_DETAILS: "get_lifestyle_details", EDIT_PREFERED_PARTNER_DETAILS: "get_preferred_details", +// delete api + +DELETE_ACCOUNT: "delete_account", +PHONE_NUMBER_VISIBILITY: "get_phone_number_visibility", +UPDATE_PHONE_NUMBER_VISIBILITY: "update_phone_number_visibility", +CHAT_ALERT_NOTIFICATION:"get_chat_alert_notification", +UPDATE_CHAT_ALERT_NOTIFICATION:"update_chat_alert_notification", +PROFILE_PROTECT_API:"get_profile_protection", +UPDATE_PROFILE_PROTECT_API:"update_profile_protection", +MATCH_ALERT:"get_match_alert", +UPDATE_MATCH_ALERT:"update_match_alert", +WHO_CAN_VIEW_MESSAGE:"get_who_can_message_me", +UPDATE_WHO_CAN_VIEW_MESSAGE:"update_who_can_message_me", +CONTACT_US:"get_contact_us", +BE_SAFE_ONLINE:"get_be_safe_online", +NOTIFICATION_LIST:"notification/lists", +NOTIFICATION_COUNT:"notification/un_read_count", + + }; diff --git a/src/api/auth.api.js b/src/api/auth.api.js index 05e5dda..1986077 100644 --- a/src/api/auth.api.js +++ b/src/api/auth.api.js @@ -19,4 +19,6 @@ export const verifyOtpAPI = async ({ mobile, otp }) => { export const logoutAPI = async () => { const res = await axiosInstance.post(API_ENDPOINTS.LOGOUT); return res.data; -}; \ No newline at end of file +}; + + diff --git a/src/api/contact.api.js b/src/api/contact.api.js new file mode 100644 index 0000000..fefc862 --- /dev/null +++ b/src/api/contact.api.js @@ -0,0 +1,7 @@ +import axiosInstance from "./axiosInstance"; +import { API_ENDPOINTS } from "./apiEndpoints"; + +export const getContactUs = async () => { + const res = await axiosInstance.get(API_ENDPOINTS.CONTACT_US); + return res.data; +}; \ No newline at end of file diff --git a/src/api/safety.api.js b/src/api/safety.api.js new file mode 100644 index 0000000..112add4 --- /dev/null +++ b/src/api/safety.api.js @@ -0,0 +1,7 @@ +import axiosInstance from "./axiosInstance"; +import { API_ENDPOINTS } from "./apiEndpoints"; + +export const getBeSafeOnline = async () => { + const res = await axiosInstance.get(API_ENDPOINTS.BE_SAFE_ONLINE); + return res.data; +}; \ No newline at end of file diff --git a/src/components/common/ProfileHeader.jsx b/src/components/common/ProfileHeader.jsx index 39d29bd..9d1a5fa 100644 --- a/src/components/common/ProfileHeader.jsx +++ b/src/components/common/ProfileHeader.jsx @@ -27,6 +27,7 @@ import userimg from "../../assets/images/bride1.jpg" import axiosInstance, { logoutAPI } from "../../api/axiosInstance"; import toast from "react-hot-toast"; import { API_ENDPOINTS } from "../../api/apiEndpoints"; +import { useMutation, useQuery } from "@tanstack/react-query"; const NAV_LINKS = [ // { label: "Home", path: "/" }, { label: "Matches", path: "/matches" }, @@ -58,7 +59,7 @@ const ACCOUNT_SETTINGS = [ { label: "Logout", action: "logout" } ]; -const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick, activeItem }) => { +const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick, activeItem, badges = {} }) => { const [activeIndex, setActiveIndex] = useState(0); const [indicatorStyle, setIndicatorStyle] = useState({}); const [isAnimating, setIsAnimating] = useState(false); @@ -125,9 +126,14 @@ const SparkleNavbar = ({ items, color = "#0fec1eff", onItemClick, activeItem }) onClick={() => handleClick(index)} className={`cursor-pointer relative uppercase text-sm font-medium transition-all duration-300 pb-2 ${ activeIndex === index ? "text-black" : "text-gray-900 hover:text-gray-600" - }`} + } flex items-center gap-1`} > {item} + {badges[item] > 0 && ( + + {badges[item]} + + )} ))} @@ -166,6 +172,16 @@ const ProfileHeader = () => { const currentLabel = currentNav?.label ?? NAV_LINKS[0].label; + const { data: notificationData } = useQuery({ + queryKey: ["notificationCount"], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.NOTIFICATION_COUNT); + return res.data; + }, + enabled: !!auth, + }); + + const notificationCount = notificationData?.count || 0; @@ -182,11 +198,23 @@ const ProfileHeader = () => { } }; + const deleteAccountMutation = useMutation({ + mutationFn: async () => { + return await axiosInstance.delete(API_ENDPOINTS.DELETE_ACCOUNT); + }, + onSuccess: (response) => { + toast.success(response?.data?.message || "Account deleted successfully"); + setDeleteModalOpen(false); + logoutAPI(); + navigate("/"); + }, + onError: (error) => { + toast.error(error?.response?.data?.message || "Failed to delete account"); + }, + }); + const handleDeleteAccount = () => { - // Add your delete account logic here - console.log("Account deleted"); - setDeleteModalOpen(false); - navigate("/"); + deleteAccountMutation.mutate(); }; const handleLogout = () => { @@ -281,7 +309,14 @@ const ProfileHeader = () => { {getNavIcon(index)} - + + {label} + {label === "Notifications" && notificationCount > 0 && ( + {notificationCount} + )} + + } /> ))} @@ -324,6 +359,7 @@ const ProfileHeader = () => { items={NAV_LINKS.map(link => link.label)} color="#034E08" activeItem={currentLabel} + badges={{ "Notifications": notificationCount }} onItemClick={(item) => { setSelectedItem(item); const link = NAV_LINKS.find(l => l.label === item); @@ -402,12 +438,13 @@ const ProfileHeader = () => { diff --git a/src/pages/AccountSettingsPage.jsx b/src/pages/AccountSettingsPage.jsx index 79a3590..b3e5d70 100644 --- a/src/pages/AccountSettingsPage.jsx +++ b/src/pages/AccountSettingsPage.jsx @@ -4,10 +4,14 @@ import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; +import { Switch, Select, MenuItem } from '@mui/material'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; import { Phone, MessageSquare, Shield, Bell, UserCheck, ChevronLeft } from 'lucide-react'; +import { useQuery, useMutation } from '@tanstack/react-query'; +import axiosInstance from '../api/axiosInstance'; +import { API_ENDPOINTS } from '../api/apiEndpoints'; +import toast from 'react-hot-toast'; function TabPanel(props) { const { children, value, index, ...other } = props; @@ -68,8 +72,33 @@ const SettingItem = ({ title, description, enabled, onToggle }) => ( ); -const TabContent = ({ title, settings, states, onToggle }) => ( - +const SelectSettingItem = ({ title, description, value, onChange, options, disabled }) => ( + + + + {title} + + + + + {description} + + +); + + +const TabContent = ({ title, settings, states, onToggle, onSelectChange }) => ( + ( - {settings.map((setting, index) => ( - onToggle(setting.key)} - /> - ))} + {settings.map((setting, index) => { + if (setting.type === 'select') { + return ( + onSelectChange(setting.key, e.target.value)} + options={setting.options} + disabled={!states.messagePermission} + /> + ); + } + return ( onToggle(setting.key)} /> + ); + })} ); @@ -113,16 +155,238 @@ export default function AccountSettingPage() { callProtection: true, matchAlerts: true, profileViews: false, - messagePermission: true, - blockUnverified: false, + messagePermission: false, + messageCategory: 'All Profile', }); const handleChange = (event, newValue) => { setValue(newValue); }; + const { data: phoneVisibilityData } = useQuery({ + queryKey: ["phoneVisibility"], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.PHONE_NUMBER_VISIBILITY); + return res.data; + }, + }); + + React.useEffect(() => { + if (phoneVisibilityData) { + setSettings((prev) => ({ + ...prev, + phoneVisibility: phoneVisibilityData.phone_number_visibility === 1, + })); + } + }, [phoneVisibilityData]); + + const phoneVisibilityMutation = useMutation({ + mutationFn: async (isVisible) => { + return await axiosInstance.post(API_ENDPOINTS.UPDATE_PHONE_NUMBER_VISIBILITY, null, { + params: { phone_number_visibility: isVisible ? 1 : 0 }, + }); + }, + onSuccess: (res) => { + toast.success(res.data.message); + }, + onError: () => { + toast.error("Failed to update phone visibility"); + setSettings((prev) => ({ ...prev, phoneVisibility: !prev.phoneVisibility })); + }, + }); + + const { data: chatAlertData } = useQuery({ + queryKey: ["chatAlerts"], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.CHAT_ALERT_NOTIFICATION); + return res.data; + }, + }); + + React.useEffect(() => { + if (chatAlertData) { + setSettings((prev) => ({ + ...prev, + chatAlertsNotification: chatAlertData.chat_alert_notification === 1, + chatProtection: chatAlertData.chat_protection === 1, + })); + } + }, [chatAlertData]); + + const chatAlertMutation = useMutation({ + mutationFn: async (payload) => { + return await axiosInstance.post(API_ENDPOINTS.UPDATE_CHAT_ALERT_NOTIFICATION, null, { + params: { + chat_alert_notification: payload.chatAlertsNotification ? 1 : 0, + chat_protection: payload.chatProtection ? 1 : 0, + }, + }); + }, + onSuccess: (res) => { + toast.success(res.data.message); + }, + onError: () => { + toast.error("Failed to update chat settings"); + }, + }); + + const { data: profileProtectionData } = useQuery({ + queryKey: ["profileProtection"], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.PROFILE_PROTECT_API); + return res.data; + }, + }); + + React.useEffect(() => { + if (profileProtectionData) { + setSettings((prev) => ({ + ...prev, + protectProfilePhoto: profileProtectionData.profile_photo_protect === 1, + callProtection: profileProtectionData.call_protection === 1, + })); + } + }, [profileProtectionData]); + + const profileProtectionMutation = useMutation({ + mutationFn: async (payload) => { + return await axiosInstance.post( + API_ENDPOINTS.UPDATE_PROFILE_PROTECT_API, + null, + { + params: { + profile_photo_protect: payload.protectProfilePhoto ? 1 : 0, + call_protection: payload.callProtection ? 1 : 0, + }, + } + ); + }, + onSuccess: (res) => { + toast.success(res.data.message); + }, + onError: () => { + toast.error("Failed to update profile protection settings"); + }, + }); + + const { data: matchAlertData } = useQuery({ + queryKey: ["matchAlerts"], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.MATCH_ALERT); + return res.data; + }, + }); + + React.useEffect(() => { + if (matchAlertData) { + setSettings((prev) => ({ + ...prev, + matchAlerts: matchAlertData.match_alert_preference === 1, + })); + } + }, [matchAlertData]); + + const matchAlertMutation = useMutation({ + mutationFn: async (isEnabled) => { + return await axiosInstance.post(API_ENDPOINTS.UPDATE_MATCH_ALERT, null, { + params: { match_alert_preference: isEnabled ? 1 : 0 }, + }); + }, + onSuccess: (res) => { + toast.success(res.data.message); + }, + onError: () => { + toast.error("Failed to update match alert settings"); + setSettings((prev) => ({ ...prev, matchAlerts: !prev.matchAlerts })); + }, + }); + + const { data: whoCanMessageData } = useQuery({ + queryKey: ["whoCanMessage"], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.WHO_CAN_VIEW_MESSAGE); + return res.data; + }, + }); + + React.useEffect(() => { + if (whoCanMessageData) { + setSettings((prev) => ({ + ...prev, + messagePermission: whoCanMessageData.who_can_message === 1, + messageCategory: whoCanMessageData.who_can_message_categories || 'All Profile', + })); + } + }, [whoCanMessageData]); + + const whoCanMessageMutation = useMutation({ + mutationFn: async (payload) => { + return await axiosInstance.post(API_ENDPOINTS.UPDATE_WHO_CAN_VIEW_MESSAGE, null, { + params: { + who_can_message: payload.messagePermission ? 1 : 0, + who_can_message_categories: payload.messageCategory, + }, + }); + }, + onSuccess: (res) => { + toast.success(res.data.message); + }, + onError: (err, variables) => { + toast.error("Failed to update message settings"); + // Revert optimistic update + setSettings(variables.oldSettings); + }, + }); + const toggleSetting = (key) => { - setSettings(prev => ({ ...prev, [key]: !prev[key] })); + if (key === "phoneVisibility") { + const newValue = !settings.phoneVisibility; + setSettings((prev) => ({ ...prev, [key]: newValue })); + phoneVisibilityMutation.mutate(newValue); + } else if (key === "chatAlertsNotification" || key === "chatProtection") { + const newValue = !settings[key]; + setSettings((prev) => ({ ...prev, [key]: newValue })); + const payload = { + chatAlertsNotification: key === "chatAlertsNotification" ? newValue : settings.chatAlertsNotification, + chatProtection: key === "chatProtection" ? newValue : settings.chatProtection, + }; + chatAlertMutation.mutate(payload); + } else if (key === "protectProfilePhoto" || key === "callProtection") { + const newValue = !settings[key]; + setSettings((prev) => ({ ...prev, [key]: newValue })); + const payload = { + protectProfilePhoto: + key === "protectProfilePhoto" ? newValue : settings.protectProfilePhoto, + callProtection: + key === "callProtection" ? newValue : settings.callProtection, + }; + profileProtectionMutation.mutate(payload); + } else if (key === "matchAlerts") { + const newValue = !settings.matchAlerts; + setSettings((prev) => ({ ...prev, [key]: newValue })); + matchAlertMutation.mutate(newValue); + } else if (key === 'messagePermission') { + const oldSettings = { ...settings }; + const newValue = !settings.messagePermission; + setSettings(prev => ({ ...prev, [key]: newValue })); + whoCanMessageMutation.mutate({ + messagePermission: newValue, + messageCategory: settings.messageCategory, + oldSettings + }); + } else { + setSettings((prev) => ({ ...prev, [key]: !prev[key] })); + } + }; + + const handleSelectChange = (key, value) => { + const oldSettings = { ...settings }; + setSettings(prev => ({ ...prev, [key]: value })); + whoCanMessageMutation.mutate({ + messagePermission: settings.messagePermission, + messageCategory: value, + oldSettings + }); }; const tabs = [ @@ -183,14 +447,14 @@ export default function AccountSettingPage() { settings: [ { key: 'matchAlerts', - title: 'Match Alert Notifications', - description: 'Receive notifications when new profiles match your preferences and requirements.', - }, - { - key: 'profileViews', - title: 'Profile View Alerts', - description: 'Get notified when someone views your profile or shows interest in connecting with you.', + title: 'Match Alerts Preferences', + description: 'Match Alerts Preferences content" typically refers to the various settings within an application (e.g., sports, finance, or business software)', }, + // { + // key: 'profileViews', + // title: 'Profile View Alerts', + // description: 'Get notified when someone views your profile or shows interest in connecting with you.', + // }, ], }, { @@ -201,14 +465,16 @@ export default function AccountSettingPage() { settings: [ { key: 'messagePermission', - title: 'Message Permissions', - description: 'Control who can send you messages. You can restrict messages to only verified profiles or profiles that match your preferences.', + title: 'Who Can Message Me?', + description: 'Control who is able to send you messages on the platform.', }, { - key: 'blockUnverified', - title: 'Block Unverified Profiles', - description: 'Automatically block messages from profiles that haven\'t completed verification process.', - }, + key: 'messageCategory', + title: 'Allow messages from', + description: 'Choose which category of users can message you.', + type: 'select', + options: ['All Profile', 'Matches', 'Premium Users'] + } ], }, ]; @@ -219,7 +485,7 @@ export default function AccountSettingPage() { minHeight: '90vh', marginTop:"50px", marginBottom:"50px" }}> {/* Desktop: Vertical Sidebar */} {!isMobile && ( - + ))} diff --git a/src/pages/ContactUsPage.jsx b/src/pages/ContactUsPage.jsx index b8dafcb..f1a7ce8 100644 --- a/src/pages/ContactUsPage.jsx +++ b/src/pages/ContactUsPage.jsx @@ -1,109 +1,116 @@ -import { useState } from 'react'; -import contactimg from "../assets/images/contactimg.jpg"; +import React from 'react'; +import { useQuery } from '@tanstack/react-query'; +import { getContactUs } from '../api/contact.api'; import LazyImage from '../components/common/LazyImage'; - import InstagramIcon from '@mui/icons-material/Instagram'; import FacebookIcon from '@mui/icons-material/Facebook'; -import TwitterIcon from '@mui/icons-material/Twitter'; -import CloseIcon from '@mui/icons-material/Close'; // using as X icon -import SvgIcon from "@mui/material/SvgIcon"; +import SvgIcon from '@mui/material/SvgIcon'; +import { Phone, Mail, ChevronRight } from 'lucide-react'; -function XIcon(props) { - return ( - - - - ); -} +const XIcon = (props) => ( + + + +); const ContactUsPage = () => { - + const { data, isLoading } = useQuery({ + queryKey: ['contactUs'], + queryFn: getContactUs, + }); - + const contact = data || {}; -const socialLinks = [ - { name: "Instagram", icon: , color: "from-purple-500 to-[#d93f87]", url: "#" }, - { name: "Facebook", icon: , color: "from-blue-900 to-blue-800", url: "#" }, - { name: "Twitter", icon: , color: "from-blue-400 to-blue-500", url: "#" }, - { name: "X", icon: , color: "from-gray-800 to-black", url: "#" }, -]; + const socialMedia = [ + { + name: "Instagram", + icon: , + color: "from-purple-500 to-[#d93f87]", + url: contact.instagram_url + }, + { + name: "Facebook", + icon: , + color: "from-blue-900 to-blue-800", + url: contact.facebook_url + }, + { + name: "X", + icon: , + color: "from-gray-800 to-black", + url: contact.x_url + } + ]; + + if (isLoading) { + return
Loading...
; + } return (
-
- - - -
+
+ - {/* Get in touch section */} -
-

Get in touch

-

- If you have inquiries get in touch with us we'll happy to help you -

-
+
+
+

{contact.title}

+

+ {contact.content} +

+
- {/* Contact Information Cards */} -
- {/* Phone Card */} - -
-
- - - + - - {/* Social Media Section */} -
-

Social Media

-
- {socialLinks.map((social, idx) => ( - - {social.icon} - - ))} -
-
- - -
-
-
); }; diff --git a/src/pages/NotificationPage.jsx b/src/pages/NotificationPage.jsx index ebbbf53..576e114 100644 --- a/src/pages/NotificationPage.jsx +++ b/src/pages/NotificationPage.jsx @@ -1,102 +1,22 @@ -import React, { useState } from 'react'; -import { Tabs, Tab, IconButton, Menu, MenuItem } from '@mui/material'; -import { MoreVert, Delete } from '@mui/icons-material'; +import React from 'react'; +import { useQuery } from '@tanstack/react-query'; +import axiosInstance from '../api/axiosInstance'; +import { API_ENDPOINTS } from '../api/apiEndpoints'; +import { Notifications as NotificationsIcon } from '@mui/icons-material'; +import { useNavigate } from 'react-router-dom'; const NotificationPage = () => { - const [activeTab, setActiveTab] = useState(0); - const [anchorEl, setAnchorEl] = useState(null); - const [selectedNotification, setSelectedNotification] = useState(null); - - const [notifications, setNotifications] = useState([ - { - id: 1, - type: 'message', - user: 'Thangavel', - avatar: 'https://i.pravatar.cc/150?img=1', - message: 'has sent you a message', - time: '1d', - action: 'View message', - category: 'all' + const navigate = useNavigate(); + + const { data: notificationData, isLoading, isError } = useQuery({ + queryKey: ['notifications'], + queryFn: async () => { + const res = await axiosInstance.get(API_ENDPOINTS.NOTIFICATION_LIST); + return res.data; }, - { - id: 2, - type: 'profile', - user: 'Thangavel', - avatar: 'https://i.pravatar.cc/150?img=2', - message: 'and 3 others have viewed your profile', - time: '1d', - action: 'See who viewed', - category: 'interactions' - }, - { - id: 3, - type: 'interest', - user: 'Parthiban', - avatar: 'https://i.pravatar.cc/150?img=3', - message: 'has sent you an interest', - time: '1d', - action: 'View interest', - category: 'urgent' - }, - { - id: 4, - type: 'message', - user: 'Rajesh', - avatar: 'https://i.pravatar.cc/150?img=4', - message: 'replied to your message', - time: '2d', - action: 'View message', - category: 'all' - }, - { - id: 5, - type: 'profile', - user: 'Priya', - avatar: 'https://i.pravatar.cc/150?img=5', - message: 'viewed your profile', - time: '2d', - action: 'See profile', - category: 'interactions' - }, - { - id: 6, - type: 'interest', - user: 'Kumar', - avatar: 'https://i.pravatar.cc/150?img=6', - message: 'accepted your interest', - time: '3d', - action: 'View profile', - category: 'urgent' - } - ]); + }); - const handleTabChange = (event, newValue) => { - setActiveTab(newValue); - }; - - const handleMenuOpen = (event, notificationId) => { - setAnchorEl(event.currentTarget); - setSelectedNotification(notificationId); - }; - - const handleMenuClose = () => { - setAnchorEl(null); - setSelectedNotification(null); - }; - - const handleDelete = () => { - setNotifications(notifications.filter(n => n.id !== selectedNotification)); - handleMenuClose(); - }; - - const getFilteredNotifications = () => { - if (activeTab === 0) return notifications; - if (activeTab === 1) return notifications.filter(n => n.category === 'interactions'); - if (activeTab === 2) return notifications.filter(n => n.category === 'urgent'); - return notifications; - }; - - const filteredNotifications = getFilteredNotifications(); + const notifications = notificationData?.data || []; return (
@@ -106,119 +26,50 @@ const NotificationPage = () => {

Notifications

- {/* Tabs */} -
- - - - - -
- {/* Notification List */} -
- {filteredNotifications.length === 0 ? ( +
+ {isLoading ? ( +
Loading notifications...
+ ) : isError ? ( +
Failed to load notifications.
+ ) : notifications.length === 0 ? (
No notifications found
) : ( - <> -
-

Yesterday

-
- {filteredNotifications.map((notification) => ( +
+ {notifications.map((notification) => (
notification.page && navigate(`/${notification.page}`)} >
- {/* Avatar */} - {notification.user} + {/* Icon */} +
+ +
{/* Content */}

- {notification.user}{' '} - {notification.message} + {notification.tittle} +

+

+ {notification.description}

-
- {/* Time and Menu */} + {/* Time */}
- {notification.time} - handleMenuOpen(e, notification.id)} - sx={{ - color: '#6b7280', - '&:hover': { backgroundColor: '#f3f4f6' } - }} - > - - + {notification.created_at}
))} - +
)}
- - {/* Delete Menu */} - - - - Delete - -
); diff --git a/src/pages/SafetyCentre.jsx b/src/pages/SafetyCentre.jsx index 2fb34a1..8c8b7d6 100644 --- a/src/pages/SafetyCentre.jsx +++ b/src/pages/SafetyCentre.jsx @@ -1,41 +1,26 @@ - import React from 'react'; -import { ArrowBackIosNew, Security, Report, Lock, Psychology } from '@mui/icons-material'; +import { Security, Psychology } from '@mui/icons-material'; import { useNavigate } from 'react-router-dom'; import { motion } from 'framer-motion'; import LazyImage from '../components/common/LazyImage'; -import safegirl from "../assets/images/safegirl.jpg"; -const dummyImage = "https://images.unsplash.com/photo-1594736797933-d0501ba2fe65?w=800&q=80&fit=crop"; +import { useQuery } from '@tanstack/react-query'; +import { getBeSafeOnline } from '../api/safety.api'; export default function SafetyCentre() { const navigate = useNavigate(); - const safetyTips = [ - { - icon: , - title: "Safety Tips", - color: "red", - desc: "Follow these practical guidelines to protect yourself while connecting with potential Matches." - }, - { - icon: , - title: "Report a Profile", - color: "orange", - desc: "Report any suspicious or inappropriate behavior immediately—especially requests for money, unsolicited contact, or blackmail threats." - }, - { - icon: , - title: "Privacy Settings", - color: "pink", - desc: "Manage who sees your photos, contact info, & profile and always be in control." - }, - { - icon: , - title: "Mental Wellbeing", - color: "blue", - desc: "Here's how you can prioritize your mental well-being while making this life-changing decision." - } - ]; + const { data, isLoading } = useQuery({ + queryKey: ['beSafeOnline'], + queryFn: getBeSafeOnline, + }); + + if (isLoading) { + return
Loading...
; + } + + const safetyData = data?.data || []; + const heroData = safetyData.length > 0 ? safetyData[0] : null; + const tipsData = safetyData.length > 1 ? safetyData.slice(1) : []; return (
@@ -54,52 +39,38 @@ export default function SafetyCentre() { {/* Hero Section */} -
- -
-

Safety Centre

-

- Your safety matters deeply at Thirukalyanam. - Our team works with advanced tools to ensure your matchmaking journey remains secure and safe. -

-
- - -
- - - - + {heroData && ( +
+
+

+ {heroData.title} +

+

+ {heroData.content} +

+
+ +
+ )} {/* Safety Tips Grid */}
- {safetyTips.map((tip, index) => ( + {tipsData.map((tip, index) => ( -
- {tip.icon} +
+
-

+

{tip.title}

-

{tip.desc}

+

{tip.content}

))}