85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { observer } from "mobx-react";
|
|
// plane imports
|
|
import {
|
|
PROFILE_SETTINGS_TRACKER_ELEMENTS,
|
|
PROFILE_SETTINGS_TRACKER_EVENTS,
|
|
START_OF_THE_WEEK_OPTIONS,
|
|
} from "@plane/constants";
|
|
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
|
import type { EStartOfTheWeek } from "@plane/types";
|
|
import { CustomSelect } from "@plane/ui";
|
|
// hooks
|
|
import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
|
|
import { useUserProfile } from "@/hooks/store/user";
|
|
import { PreferencesSection } from "../preferences/section";
|
|
|
|
const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
|
|
START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
|
|
|
|
export const StartOfWeekPreference = observer((props: { option: { title: string; description: string } }) => {
|
|
// hooks
|
|
const { data: userProfile, updateUserProfile } = useUserProfile();
|
|
|
|
return (
|
|
<PreferencesSection
|
|
title={props.option.title}
|
|
description={props.option.description}
|
|
control={
|
|
<div className="">
|
|
<CustomSelect
|
|
value={userProfile.start_of_the_week}
|
|
label={getStartOfWeekLabel(userProfile.start_of_the_week)}
|
|
onChange={(val: number) => {
|
|
updateUserProfile({ start_of_the_week: val })
|
|
.then(() => {
|
|
captureElementAndEvent({
|
|
element: {
|
|
elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.FIRST_DAY_OF_WEEK_DROPDOWN,
|
|
},
|
|
event: {
|
|
eventName: PROFILE_SETTINGS_TRACKER_EVENTS.first_day_updated,
|
|
payload: {
|
|
start_of_the_week: val,
|
|
},
|
|
state: "SUCCESS",
|
|
},
|
|
});
|
|
setToast({
|
|
type: TOAST_TYPE.SUCCESS,
|
|
title: "Success",
|
|
message: "First day of the week updated successfully",
|
|
});
|
|
})
|
|
.catch(() => {
|
|
captureElementAndEvent({
|
|
element: {
|
|
elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.FIRST_DAY_OF_WEEK_DROPDOWN,
|
|
},
|
|
event: {
|
|
eventName: PROFILE_SETTINGS_TRACKER_EVENTS.first_day_updated,
|
|
state: "ERROR",
|
|
},
|
|
});
|
|
setToast({ type: TOAST_TYPE.ERROR, title: "Update failed", message: "Please try again later." });
|
|
});
|
|
}}
|
|
input
|
|
maxHeight="lg"
|
|
>
|
|
<>
|
|
{START_OF_THE_WEEK_OPTIONS.map((day) => (
|
|
<CustomSelect.Option key={day.value} value={day.value}>
|
|
{day.label}
|
|
</CustomSelect.Option>
|
|
))}
|
|
</>
|
|
</CustomSelect>
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
});
|