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

unlink calendar with password

master
alex 2024-01-21 16:46:38 +01:00
parent fcaab64820
commit e09c48c977
4 changed files with 113 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -170,7 +170,8 @@
},
"unlinkGoogleCalendar": {
"title": "Google Kalender trennen",
"description": "Möchten Sie die Verbindung zu Ihrem Google Kalender wirklich 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"
}
},

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

@ -173,7 +173,8 @@
},
"unlinkGoogleCalendar": {
"title": "Unlink Google Calendar",
"description": "Are you sure you want 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)",
"button": "Unlink Google Calendar"
}
},

21
src/Components/MyModal/index.js
View File

@ -104,6 +104,27 @@ export function MyModalOnlyCloseButtonFooter({ onCancel }) {
return <Button onClick={onCancel}>{t("common.button.close")}</Button>;
}
export function MyModalCloseConfirmButtonFooter({
onCancel,
onConfirm,
isConfirmButtonLoading,
}) {
const { t } = useTranslation();
return (
<>
<Button onClick={onCancel}>{t("common.button.close")}</Button>
<Button
onClick={onConfirm}
type="primary"
loading={isConfirmButtonLoading}
>
{t("common.button.confirm")}
</Button>
</>
);
}
export function MyModalCloseSaveButtonFooter({
onCancel,
onSave,

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

@ -1,6 +1,7 @@
import {
Button,
Card,
Checkbox,
Col,
Form,
Popconfirm,
@ -9,10 +10,12 @@ import {
Space,
Spin,
Switch,
Typography,
} from "antd";
import { useTranslation } from "react-i18next";
import {
Constants,
EncodeStringToBase64,
getUserSessionFromLocalStorage,
myFetch,
} from "../../../utils";
@ -21,11 +24,16 @@ import MyCenteredContainer from "../../../Components/MyContainer";
import {
MyCalendarMaxFutureBookingDaysFormInput,
MyCalendarMinEarliestBookingTimeFormInput,
MyPasswordFormInput,
} from "../../../Components/MyFormInputs";
import {
RequestState,
RequestStateItem,
} from "../../../Components/MyRequestStateItem";
import MyModal, {
MyModalCloseConfirmButtonFooter,
MyModalCloseSaveButtonFooter,
} from "../../../Components/MyModal";
export default function StoreCalendar() {
const { t } = useTranslation();
@ -104,15 +112,22 @@ export default function StoreCalendar() {
function CardPersonalCalendarSettings({ settings }) {
const { t } = useTranslation();
const [form] = Form.useForm();
const [formUnlinkCalendar] = Form.useForm();
const [requestState, setRequestState] = useState(RequestState.INIT);
const delayTimeout = useRef();
const [isModalOpen, setIsModalOpen] = useState(false);
const [isRequesting, setIsRequesting] = useState(false);
const usingPrimaryCalendar = Form.useWatch(
"calendarUsingPrimaryCalendar",
form
);
const handleModalClose = () => {
setIsModalOpen(false);
};
useEffect(() => {
if (!settings) return;
@ -149,46 +164,81 @@ function CardPersonalCalendarSettings({ settings }) {
}, [usingPrimaryCalendar]);
return (
<Card
title={t("calendar.cardPersonalCalendarSettings.title")}
extra={
<Space>
<RequestStateItem
state={requestState}
setRequestState={setRequestState}
/>
<>
<Card
title={t("calendar.cardPersonalCalendarSettings.title")}
extra={
<Space>
<RequestStateItem
state={requestState}
setRequestState={setRequestState}
/>
<Popconfirm
okText={t("common.button.confirm")}
cancelText={t("common.button.cancel")}
title={t("calendar.unlinkGoogleCalendar.title")}
description={t("calendar.unlinkGoogleCalendar.description")}
onConfirm={() => {
myFetch("/calendar/settings/personal/unlink", "POST")
.then((res) => {
console.log(res);
window.location.reload();
})
.catch((errStatus) => {
console.log(errStatus);
});
}}
<Button danger onClick={() => setIsModalOpen(true)}>
{t("calendar.unlinkGoogleCalendar.button")}
</Button>
</Space>
}
>
<Form form={form} requiredMark={false}>
<Form.Item
name="calendarUsingPrimaryCalendar"
label={t("common.calendarUsingPrimaryCalendar")}
valuePropName="checked"
>
<Button danger>{t("calendar.unlinkGoogleCalendar.button")}</Button>
</Popconfirm>
</Space>
}
>
<Form form={form} requiredMark={false}>
<Form.Item
name="calendarUsingPrimaryCalendar"
label={t("common.calendarUsingPrimaryCalendar")}
valuePropName="checked"
>
<Switch />
</Form.Item>
</Form>
</Card>
<Switch />
</Form.Item>
</Form>
</Card>
<MyModal
title={t("calendar.unlinkGoogleCalendar.title")}
isOpen={isModalOpen}
onCancel={handleModalClose}
footer={
<MyModalCloseConfirmButtonFooter
onCancel={handleModalClose}
isConfirmButtonLoading={isRequesting}
onConfirm={() => {
formUnlinkCalendar.validateFields().then((values) => {
setIsRequesting(true);
myFetch("/calendar/settings/personal/unlink", "POST", {
password: EncodeStringToBase64(values.password),
deleteCalendars: values.deleteEvents,
})
.then((res) => {
console.log(res);
window.location.reload();
})
.catch((errStatus) => {
console.log(errStatus);
setIsRequesting(false);
// TODO: show error message
});
});
}}
/>
}
>
<>
<Form
form={formUnlinkCalendar}
requiredMark={false}
layout="vertical"
>
<p>{t("calendar.unlinkGoogleCalendar.description")}</p>
<MyPasswordFormInput />
<Form.Item>
<Checkbox>
{t("calendar.unlinkGoogleCalendar.checkboxDeleteCalendars")}
</Checkbox>
</Form.Item>
</Form>
</>
</MyModal>
</>
);
}