forked from Abdulbari/sgeUpdated
Update sge-frontend/src/views/Communication.js
This commit is contained in:
@@ -1,218 +1,218 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Col,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalHeader,
|
||||
Row,
|
||||
UncontrolledTooltip, // Add UncontrolledTooltip import
|
||||
} from "reactstrap";
|
||||
import { Edit, Mail, Phone, MapPin } from "react-feather"; // Import Mail, Phone, MapPin
|
||||
|
||||
import { useSnackbar } from "notistack";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { permissionCheck } from "../components/permission-check";
|
||||
import {
|
||||
getMailSettings,
|
||||
clearMailSuccess,
|
||||
clearMailError,
|
||||
} from "../redux/actions/mailSettings";
|
||||
import MailSettings from "./MailSettings";
|
||||
import SpinnerComponent from "../@core/components/spinner/Fallback-spinner";
|
||||
|
||||
// Import custom styles for the communication page
|
||||
import "../assets/scss/pages/communication.scss";
|
||||
|
||||
function Communication() {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const { currentSettings, loading, success, error } = useSelector(
|
||||
// Add loading to useSelector
|
||||
(state) => state.mailSettings
|
||||
);
|
||||
const [showMailModal, setShowMailModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Load mail settings once when component mounts
|
||||
dispatch(getMailSettings());
|
||||
}, [dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (success) {
|
||||
enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
|
||||
variant: "success",
|
||||
});
|
||||
dispatch(clearMailSuccess());
|
||||
}
|
||||
}, [success, enqueueSnackbar, t, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
const errorMessage =
|
||||
error?.graphQLErrors?.[0]?.message ||
|
||||
error?.message ||
|
||||
t("Warnings.genericUpdateFailed");
|
||||
|
||||
enqueueSnackbar(errorMessage, {
|
||||
variant: "error",
|
||||
});
|
||||
dispatch(clearMailError());
|
||||
}
|
||||
}, [error, enqueueSnackbar, t, dispatch]);
|
||||
|
||||
// Get email address from settings or use default from environment variable
|
||||
const defaultEmail = process.env.REACT_APP_DEFAULT_EMAIL || "";
|
||||
// Use default email if currentSettings is null or emailAddress is null
|
||||
const emailAddress = currentSettings?.emailAddress || defaultEmail;
|
||||
const handleEmailClick = () => {
|
||||
if (emailAddress) {
|
||||
window.location.href = `mailto:${emailAddress}`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowMailModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: "2%" }}>
|
||||
{loading && !currentSettings ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<SpinnerComponent />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{permissionCheck("settings_access") && (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={showMailModal}
|
||||
toggle={handleCloseModal}
|
||||
className="modal-dialog-centered"
|
||||
size="lg"
|
||||
>
|
||||
<ModalHeader toggle={handleCloseModal}>
|
||||
{t("MailSettings.editMailInfo")}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<MailSettings closeModal={handleCloseModal} />
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</>
|
||||
)}
|
||||
<Card className="border-bottom">
|
||||
<CardHeader className="border-bottom">
|
||||
<CardTitle tag="h2" className="row ml-md-2 align-items-center">
|
||||
{t("Contact.contactInfo")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<Row>
|
||||
<Col className="pl-md-5 pl-2 col-md-6 col-12">
|
||||
<Row className="mx-0 mt-1">
|
||||
<Col sm="6" md="5" className="mr-2">
|
||||
<div className="email-container d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h4>
|
||||
<Mail size={16} className="mr-1" />{" "}
|
||||
{t("Contact.contactEmail")}
|
||||
</h4>{" "}
|
||||
{/* Add Mail icon */}
|
||||
<p
|
||||
style={{
|
||||
color: emailAddress ? "blue" : "inherit",
|
||||
textDecoration: emailAddress ? "underline" : "none",
|
||||
cursor: emailAddress ? "pointer" : "default",
|
||||
}}
|
||||
onClick={handleEmailClick}
|
||||
>
|
||||
{emailAddress ||
|
||||
defaultEmail ||
|
||||
t("MailSettings.notConfigured")}
|
||||
</p>
|
||||
</div>
|
||||
{permissionCheck("settings_access") && (
|
||||
<>
|
||||
{" "}
|
||||
{/* Wrap button and tooltip in fragment */}
|
||||
<Button
|
||||
color="flat-primary"
|
||||
className="btn-icon"
|
||||
onClick={() => setShowMailModal(true)}
|
||||
id="edit-email-btn" // Add id for tooltip
|
||||
>
|
||||
<Edit size={18} />
|
||||
</Button>
|
||||
<UncontrolledTooltip
|
||||
placement="top"
|
||||
target="edit-email-btn" // Target the button id
|
||||
timeout={150} // Add timeout prop to fix the warning
|
||||
>
|
||||
{t("MailSettings.editMailInfo")}{" "}
|
||||
{/* Tooltip text */}
|
||||
</UncontrolledTooltip>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm="6" md="5" className="mr-2">
|
||||
<div className="telephone-container">
|
||||
<h4>
|
||||
<Phone size={16} className="mr-1" />{" "}
|
||||
{t("Contact.contactPhoneNumber")}
|
||||
</h4>{" "}
|
||||
{/* Add Phone icon */}
|
||||
<p>+90 507 750 00 41</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="mx-0 mt-4">
|
||||
<Col sm="6" md="5" className="mr-2">
|
||||
<div className="address-container">
|
||||
<h4>
|
||||
<MapPin size={16} className="mr-1" />{" "}
|
||||
{t("Contact.contactAddress")}
|
||||
</h4>{" "}
|
||||
{/* Add MapPin icon */}
|
||||
<address>
|
||||
Central Office: 4995 sokak no:3, Alacaatlı Mahallesi,
|
||||
Daire No: A2 06810 Çankaya/Ankara
|
||||
</address>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col className="pl-md-5 pl-2 col-md-6 col-12 pb-2 border-left">
|
||||
<Row className="mx-0 mt-1">
|
||||
<div className="address-map w-100">
|
||||
<div className="responsive-map-container">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3063.1752741150003!2d32.658217075858445!3d39.847904971536735!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d33eef6ee44755%3A0x77faea5f08f32c60!2zTUVBIEfDnFpFTEJBSMOHRU0!5e0!3m2!1sen!2str!4v1741165773414!5m2!1sen!2str"
|
||||
allowFullScreen=""
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Communication;
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Col,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalHeader,
|
||||
Row,
|
||||
UncontrolledTooltip, // Add UncontrolledTooltip import
|
||||
} from "reactstrap";
|
||||
import { Edit, Mail, Phone, MapPin } from "react-feather"; // Import Mail, Phone, MapPin
|
||||
|
||||
import { useSnackbar } from "notistack";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { permissionCheck } from "../components/permission-check";
|
||||
import {
|
||||
getMailSettings,
|
||||
clearMailSuccess,
|
||||
clearMailError,
|
||||
} from "../redux/actions/mailSettings";
|
||||
import MailSettings from "./MailSettings";
|
||||
import SpinnerComponent from "../@core/components/spinner/Fallback-spinner";
|
||||
|
||||
// Import custom styles for the communication page
|
||||
import "../assets/scss/pages/communication.scss";
|
||||
|
||||
function Communication() {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const { enqueueSnackbar } = useSnackbar();
|
||||
const { currentSettings, loading, success, error } = useSelector(
|
||||
// Add loading to useSelector
|
||||
(state) => state.mailSettings
|
||||
);
|
||||
const [showMailModal, setShowMailModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Load mail settings once when component mounts
|
||||
dispatch(getMailSettings());
|
||||
}, [dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (success) {
|
||||
enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
|
||||
variant: "success",
|
||||
});
|
||||
dispatch(clearMailSuccess());
|
||||
}
|
||||
}, [success, enqueueSnackbar, t, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
const errorMessage =
|
||||
error?.graphQLErrors?.[0]?.message ||
|
||||
error?.message ||
|
||||
t("Warnings.genericUpdateFailed");
|
||||
|
||||
enqueueSnackbar(errorMessage, {
|
||||
variant: "error",
|
||||
});
|
||||
dispatch(clearMailError());
|
||||
}
|
||||
}, [error, enqueueSnackbar, t, dispatch]);
|
||||
|
||||
// Get email address from settings or use default from environment variable
|
||||
const defaultEmail = process.env.REACT_APP_DEFAULT_EMAIL || "";
|
||||
// Use default email if currentSettings is null or emailAddress is null
|
||||
const emailAddress = currentSettings?.emailAddress || defaultEmail;
|
||||
const handleEmailClick = () => {
|
||||
if (emailAddress) {
|
||||
window.location.href = `mailto:${emailAddress}`;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setShowMailModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: "2%" }}>
|
||||
{loading && !currentSettings ? (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
minHeight: 200,
|
||||
}}
|
||||
>
|
||||
<SpinnerComponent />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{permissionCheck("settings_access") && (
|
||||
<>
|
||||
<Modal
|
||||
isOpen={showMailModal}
|
||||
toggle={handleCloseModal}
|
||||
className="modal-dialog-centered"
|
||||
size="lg"
|
||||
>
|
||||
<ModalHeader toggle={handleCloseModal}>
|
||||
{t("MailSettings.editMailInfo")}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<MailSettings closeModal={handleCloseModal} />
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
</>
|
||||
)}
|
||||
<Card className="border-bottom">
|
||||
<CardHeader className="border-bottom">
|
||||
<CardTitle tag="h2" className="row ml-md-2 align-items-center">
|
||||
{t("Contact.contactInfo")}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<Row>
|
||||
<Col className="pl-md-5 pl-2 col-md-6 col-12">
|
||||
<Row className="mx-0 mt-1">
|
||||
<Col sm="6" md="5" className="mr-2">
|
||||
<div className="email-container d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h4>
|
||||
<Mail size={16} className="mr-1" />{" "}
|
||||
{t("Contact.contactEmail")}
|
||||
</h4>{" "}
|
||||
{/* Add Mail icon */}
|
||||
<p
|
||||
style={{
|
||||
color: emailAddress ? "blue" : "inherit",
|
||||
textDecoration: emailAddress ? "underline" : "none",
|
||||
cursor: emailAddress ? "pointer" : "default",
|
||||
}}
|
||||
onClick={handleEmailClick}
|
||||
>
|
||||
{emailAddress ||
|
||||
defaultEmail ||
|
||||
t("MailSettings.notConfigured")}
|
||||
</p>
|
||||
</div>
|
||||
{permissionCheck("settings_access") && (
|
||||
<>
|
||||
{" "}
|
||||
{/* Wrap button and tooltip in fragment */}
|
||||
<Button
|
||||
color="flat-primary"
|
||||
className="btn-icon"
|
||||
onClick={() => setShowMailModal(true)}
|
||||
id="edit-email-btn" // Add id for tooltip
|
||||
>
|
||||
<Edit size={18} />
|
||||
</Button>
|
||||
<UncontrolledTooltip
|
||||
placement="top"
|
||||
target="edit-email-btn" // Target the button id
|
||||
timeout={150} // Add timeout prop to fix the warning
|
||||
>
|
||||
{t("MailSettings.editMailInfo")}{" "}
|
||||
{/* Tooltip text */}
|
||||
</UncontrolledTooltip>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm="6" md="5" className="mr-2">
|
||||
<div className="telephone-container">
|
||||
<h4>
|
||||
<Phone size={16} className="mr-1" />{" "}
|
||||
{t("Contact.contactPhoneNumber")}
|
||||
</h4>{" "}
|
||||
{/* Add Phone icon */}
|
||||
<p>+90 507 750 00 41</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="mx-0 mt-4">
|
||||
<Col sm="6" md="5" className="mr-2">
|
||||
<div className="address-container">
|
||||
<h4>
|
||||
<MapPin size={16} className="mr-1" />{" "}
|
||||
{t("Contact.contactAddress")}
|
||||
</h4>{" "}
|
||||
{/* Add MapPin icon */}
|
||||
<address>
|
||||
Central Office: 4995 sokak no:3, Alacaatlı Mahallesi,
|
||||
Daire No: A2 06820 Çankaya/Ankara
|
||||
</address>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col className="pl-md-5 pl-2 col-md-6 col-12 pb-2 border-left">
|
||||
<Row className="mx-0 mt-1">
|
||||
<div className="address-map w-100">
|
||||
<div className="responsive-map-container">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3063.1752741150003!2d32.658217075858445!3d39.847904971536735!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d33eef6ee44755%3A0x77faea5f08f32c60!2zTUVBIEfDnFpFTEJBSMOHRU0!5e0!3m2!1sen!2str!4v1741165773414!5m2!1sen!2str"
|
||||
allowFullScreen=""
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Communication;
|
||||
|
||||
Reference in New Issue
Block a user