KK
/
customer-dashboard
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved unlink button

master
alex 2024-02-11 13:57:29 +01:00
parent aa53203c2d
commit 7b91f555d4
3 changed files with 50 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/locales/de/translation.json
View File

@ -270,8 +270,7 @@
"unlinkGoogleCalendar": {
"title": "Google Kalender trennen",
"description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.",
"checkboxDeleteCalendars": "Kalender für Öffnungszeiten und Termine löschen (Alle Termine werden gelöscht und können nicht wiederhergestellt werden)",
"button": "Google Kalender trennen"
"checkboxDeleteCalendars": "Kalender für Öffnungszeiten und Termine löschen (Alle Termine werden gelöscht und können nicht wiederhergestellt werden)"
},
"calendarFrameCustomerView": "Terminkalenderansicht der Kunden",
"modalShareCalendarLink": {

3
public/locales/en/translation.json
View File

@ -273,8 +273,7 @@
"unlinkGoogleCalendar": {
"title": "Unlink Google Calendar",
"description": "For security reasons, you need to enter your password to unlink your Google Calendar.",
"checkboxDeleteCalendars": "Delete calendar for opening hours and appointments (all appointments are deleted and cannot be restored)",
"button": "Unlink Google Calendar"
"checkboxDeleteCalendars": "Delete calendar for opening hours and appointments (all appointments are deleted and cannot be restored)"
},
"calendarFrameCustomerView": "Appointment diary view of customers",
"modalShareCalendarLink": {

117
src/Pages/Store/Calendar/index.js
View File

@ -42,6 +42,7 @@ import MyModal, {
} from "../../../Components/MyModal";
import { useParams } from "react-router-dom";
import {
LogoutOutlined,
MailOutlined,
ShareAltOutlined,
WhatsAppOutlined,
@ -458,84 +459,62 @@ function CardPersonalCalendarSettings({ settings }) {
formUnlinkCalendar.resetFields();
}, [isModalOpen]);
const CardTitleContent = () => {
return (
<>
<Typography.Title
level={5}
style={{
padding: 0,
margin: 0,
}}
>
{t("calendar.cardPersonalCalendarSettings.title")}
</Typography.Title>
<Space>
<RequestStateItem
state={requestState}
setRequestState={setRequestState}
/>
{settings.google_account_name !== undefined &&
settings.google_account_name !== "" &&
settings.google_account_picture !== undefined &&
settings.google_account_picture !== "" ? (
<Tooltip
title={t(
"calendar.cardPersonalCalendarSettings.tooltipConnectedGoogleAccount",
{
accountName: settings.google_account_name,
}
)}
placement="top"
>
<Avatar src={settings.google_account_picture} />
</Tooltip>
) : null}
<Button
danger
onClick={() => setIsModalOpen(true)}
style={{ paddingBottom: 10 }}
>
{t("calendar.unlinkGoogleCalendar.button")}
</Button>
</Space>
</>
);
};
return (
<>
{notificationContextHolder}
<Card
title={
screenBreakpoint.xxl ? (
<div
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
justifyItems: "center",
alignContent: "center",
overflowX: "scroll",
overflow: "auto",
}}
>
<Typography.Title
level={5}
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
justifyItems: "center",
alignContent: "center",
padding: 0,
margin: 0,
}}
>
<CardTitleContent />
</div>
) : (
<div
style={{
display: "flex",
flexDirection: "column",
paddingTop: 10,
paddingBottom: 10,
}}
>
<CardTitleContent />
</div>
)
{t("calendar.cardPersonalCalendarSettings.title")}
</Typography.Title>
<Space>
<RequestStateItem
state={requestState}
setRequestState={setRequestState}
/>
{settings.google_account_name !== undefined &&
settings.google_account_name !== "" &&
settings.google_account_picture !== undefined &&
settings.google_account_picture !== "" ? (
<Tooltip
title={t(
"calendar.cardPersonalCalendarSettings.tooltipConnectedGoogleAccount",
{
accountName: settings.google_account_name,
}
)}
placement="top"
>
<Avatar src={settings.google_account_picture} />
</Tooltip>
) : null}
<LogoutOutlined
onClick={() => setIsModalOpen(true)}
style={{ paddingTop: 6, color: "#ff4d4f" }}
/>
</Space>
</div>
}
>
<Form form={form} requiredMark={false}>