Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/components/profile/start-of-week-preference.tsx

@@ -0,0 +1,84 @@
+"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>
+      }
+    />
+  );
+});