feat: add scheduling form to board settings

frontend/src/components/Board/Settings/index.tsx

@@ -9,6 +9,7 @@ import { colors } from '@/components/Board/Column/partials/OptionsMenu';
 import { ColumnSettings } from '@/components/Board/Settings/partials/Columns';
 import { ColumnBoxAndDelete } from '@/components/Board/Settings/partials/Columns/ColumnBoxAndDelete';
 import { ConfigurationSettings } from '@/components/Board/Settings/partials/ConfigurationSettings';
+import { SchedulingSettings } from '@/components/Board/Settings/partials/Scheduling/Scheduling';
 import { TeamResponsibleSettings } from '@/components/Board/Settings/partials/TeamResponsible';
 import { ScrollableContent } from '@/components/Boards/MyBoards/ListBoardMembers/styles';
 import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
@@ -25,7 +26,7 @@ import useBoard from '@/hooks/useBoard';
 import SchemaUpdateBoard from '@/schema/schemaUpdateBoardForm';
 import { boardInfoState, deletedColumnsState } from '@/store/board/atoms/board.atom';
 import { FlexForm } from '@/styles/pages/pages.styles';
-import { UpdateBoardType } from '@/types/board/board';
+import { UpdateBoardType, UpdateScheduleType } from '@/types/board/board';
 import { BoardUserToAdd } from '@/types/board/board.user';
 import ColumnType, { CreateColumn } from '@/types/column';
 import { getInitials } from '@/utils/getInitials';
@@ -116,6 +117,16 @@ const BoardSettings = ({
     postAnonymously: initialData.postAnonymously,
   });
 
+  // State used to change values
+  const initialSchedulingData: UpdateScheduleType = {
+    reminderViaSlack: false,
+    reminderViaEmail: false,
+    reminderPrefillingCards: false,
+  };
+
+  //state used for scheduling
+  const [schedulingData, setSchedulingData] = useState<UpdateScheduleType>(initialSchedulingData);
+
   // User Board Hook
   const {
     updateBoard: { mutate },
@@ -370,6 +381,12 @@ const BoardSettings = ({
                   )}
                 </ConfigurationSettings>
 
+                {!isSubBoard && hasPermissions && (
+                  <SchedulingSettings
+                    schedulingData={schedulingData}
+                    setSchedulingData={setSchedulingData}
+                  />
+                )}
                 {isSubBoard && hasPermissions && (
                   <TeamResponsibleSettings>
                     <ConfigurationSwitch

frontend/src/components/Board/Settings/partials/Scheduling/Creation/BoardCreation.tsx

@@ -0,0 +1,51 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import { UpdateScheduleType } from '@/types/board/board';
+import { SelectDateUnit } from '@components/Board/Settings/partials/Scheduling/SelectDateUnit';
+
+export type SchedulingProps = {
+  schedulingData: UpdateScheduleType;
+  setSchedulingData: Dispatch<SetStateAction<UpdateScheduleType>>;
+};
+
+const BoardCreation = ({ schedulingData, setSchedulingData }: SchedulingProps) => {
+  const [isBoardCreationActive, setBoardCreation] = useState(false);
+
+  const handleCreationActiveChange = (isActive: boolean) => {
+    setBoardCreation(isActive);
+    if (!isActive) {
+      setSchedulingData((prev: UpdateScheduleType) => ({
+        ...prev,
+        timeBeforeMeeting: undefined,
+        creationTimeUnit: undefined,
+      }));
+    }
+  };
+
+  const handleTimeBeforeReunionChange = (timeBefore: string) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      timeBeforeMeeting: timeBefore,
+    }));
+  };
+  const handleCreationTimeUnitChange = (timeUnit: string) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      creationTimeUnit: timeUnit,
+    }));
+  };
+  return (
+    <SelectDateUnit
+      description="Create board days/weeks before retro"
+      isChecked={isBoardCreationActive}
+      setCheckboxState={handleCreationActiveChange}
+      setTimeRange={handleTimeBeforeReunionChange}
+      setUnitTime={handleCreationTimeUnitChange}
+      timeRange={schedulingData.timeBeforeMeeting}
+      timeUnit={schedulingData.creationTimeUnit}
+      title="Board creation"
+    />
+  );
+};
+
+export { BoardCreation };

frontend/src/components/Board/Settings/partials/Scheduling/DateAndTime.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+
+import Flex from '@/components/Primitives/Layout/Flex/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import { TIME_RANGE } from '@/constants/schedulingOptions/hours';
+import { TimeSlot } from '@/types/board/board';
+import DatePicker from '@components/Primitives/DatePicker/DatePicker';
+import Icon from '@components/Primitives/Icons/Icon/Icon';
+import {
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectTrigger,
+  SelectValue,
+} from '@components/Primitives/Inputs/Select/Select';
+import isEmpty from '@utils/isEmpty';
+
+export type SchedulingProps = {
+  currentDate?: Date;
+  setDate: (date: Date) => void;
+};
+
+let customRange: TimeSlot[] = [];
+
+const DateAndTimePicker = ({ currentDate, setDate }: SchedulingProps) => {
+  const [startTime, setStartTime] = useState('');
+  const [endTime, setEndTime] = useState('');
+
+  function handleStartTimeChange(event: string) {
+    setStartTime(event);
+    customRange = [];
+    handleCustomRange(event);
+  }
+
+  function handleEndTimeChange(event: string) {
+    setEndTime(event);
+  }
+
+  function handleCustomRange(startTime: string) {
+    TIME_RANGE.map((time) => {
+      if (Number(time.value) > Number(startTime)) customRange.push(time);
+    });
+  }
+
+  return (
+    <>
+      <Text fontWeight="medium">Date and time</Text>
+      <DatePicker currentDate={currentDate} setDate={setDate} />
+      <Flex css={{ flex: 1, paddingBottom: '24px' }} direction="row">
+        <Select
+          css={{ width: '50%', height: '$60', marginRight: '$16' }}
+          disabled={false}
+          onValueChange={handleStartTimeChange}
+          value={startTime}
+        >
+          <SelectTrigger css={{ padding: '$24' }}>
+            <Flex direction="column">
+              <Text color="primary300">From</Text>
+              <SelectValue />
+            </Flex>
+            <SelectIcon className="SelectIcon">
+              <Icon name="arrow-down" />
+            </SelectIcon>
+          </SelectTrigger>
+          <SelectContent options={TIME_RANGE} />
+        </Select>
+        <Select
+          css={{ width: '50%', height: '$60' }}
+          disabled={false}
+          onValueChange={handleEndTimeChange}
+          value={endTime}
+        >
+          <SelectTrigger css={{ padding: '$24' }}>
+            <Flex direction="column">
+              <Text color="primary300">To</Text>
+              <SelectValue />
+            </Flex>
+            <SelectIcon className="SelectIcon">
+              <Icon name="arrow-down" />
+            </SelectIcon>
+          </SelectTrigger>
+          <SelectContent options={isEmpty(customRange) ? TIME_RANGE : customRange} />
+        </Select>
+      </Flex>
+    </>
+  );
+};
+
+export { DateAndTimePicker };

frontend/src/components/Board/Settings/partials/Scheduling/Reminder/Reminder.tsx

@@ -0,0 +1,105 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+
+import { UpdateScheduleType } from '@/types/board/board';
+import { SelectDateUnit } from '@components/Board/Settings/partials/Scheduling/SelectDateUnit';
+import Checkbox from '@components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Flex from '@components/Primitives/Layout/Flex/Flex';
+
+export type SchedulingProps = {
+  schedulingData: UpdateScheduleType;
+  setSchedulingData: Dispatch<SetStateAction<UpdateScheduleType>>;
+};
+
+const ReminderSchedule = ({ schedulingData, setSchedulingData }: SchedulingProps) => {
+  const [isReminderActive, setReminderState] = useState<boolean>(false);
+
+  const handleReminderActiveChange = (isActive: boolean) => {
+    setReminderState(isActive);
+    if (!isActive) {
+      setSchedulingData((prev: UpdateScheduleType) => ({
+        ...prev,
+        reminderTimeRange: undefined,
+        reminderTimeUnit: undefined,
+        reminderViaEmail: false,
+        reminderPrefillingCards: false,
+        reminderViaSlack: false,
+      }));
+    }
+  };
+
+  const handleReminderTimeRangeChange = (timeRange: string) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      reminderTimeRange: timeRange,
+    }));
+  };
+
+  const handleReminderTimeUnitChange = (timeUnit: string) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      reminderTimeUnit: timeUnit,
+    }));
+  };
+
+  const handleSlackChange = (viaSlackActive: boolean) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      reminderViaSlack: viaSlackActive,
+    }));
+  };
+  const handleEmailChange = (viaEmailActive: boolean) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      reminderViaEmail: viaEmailActive,
+    }));
+  };
+
+  const handlePrefillingCardChange = (prefillingCards: boolean) => {
+    setSchedulingData((prev: UpdateScheduleType) => ({
+      ...prev,
+      reminderPrefillingCards: prefillingCards,
+    }));
+  };
+  return (
+    <Flex direction="column" gap={16}>
+      <SelectDateUnit
+        description="Send reminder minutes/days/weeks before"
+        isChecked={isReminderActive}
+        setCheckboxState={handleReminderActiveChange}
+        setTimeRange={handleReminderTimeRangeChange}
+        setUnitTime={handleReminderTimeUnitChange}
+        timeRange={schedulingData.reminderTimeRange}
+        timeUnit={schedulingData.reminderTimeUnit}
+        title="Reminder"
+      />
+      <Flex direction="column" style={{ marginLeft: '35px' }}>
+        <Checkbox
+          checked={schedulingData.reminderViaSlack}
+          disabled={!isReminderActive}
+          handleChange={handleSlackChange}
+          id="repeatCheckbox"
+          label="Via Slack"
+          size="md"
+        />
+        <Checkbox
+          checked={schedulingData.reminderViaEmail}
+          disabled={!isReminderActive}
+          handleChange={handleEmailChange}
+          id="repeatCheckbox"
+          label="Via Email"
+          size="md"
+        />
+        <Checkbox
+          checked={schedulingData.reminderPrefillingCards}
+          disabled={!isReminderActive}
+          handleChange={handlePrefillingCardChange}
+          id="repeatCheckbox"
+          label="Remind prefilling the cards"
+          size="md"
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export { ReminderSchedule };