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

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

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

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

@ -42,6 +42,7 @@ import MyModal, {
} from "../../../Components/MyModal"; } from "../../../Components/MyModal";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { import {
LogoutOutlined,
MailOutlined, MailOutlined,
ShareAltOutlined, ShareAltOutlined,
WhatsAppOutlined, WhatsAppOutlined,
@ -458,84 +459,62 @@ function CardPersonalCalendarSettings({ settings }) {
formUnlinkCalendar.resetFields(); formUnlinkCalendar.resetFields();
}, [isModalOpen]); }, [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 ( return (
<> <>
{notificationContextHolder} {notificationContextHolder}
<Card <Card
title={ 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={{ style={{
display: "flex", padding: 0,
justifyContent: "space-between", margin: 0,
alignItems: "center",
justifyItems: "center",
alignContent: "center",
}} }}
> >
<CardTitleContent /> {t("calendar.cardPersonalCalendarSettings.title")}
</div> </Typography.Title>
) : (
<div <Space>
style={{ <RequestStateItem
display: "flex", state={requestState}
flexDirection: "column", setRequestState={setRequestState}
paddingTop: 10, />
paddingBottom: 10,
}} {settings.google_account_name !== undefined &&
> settings.google_account_name !== "" &&
<CardTitleContent /> settings.google_account_picture !== undefined &&
</div> 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}> <Form form={form} requiredMark={false}>