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