Merge branch 'release/1.5.1'

saeloun · Mar 27, 2024 · ffe2cb4 · ffe2cb4
2 parents 74ac848 + 974c1b8
commit ffe2cb4
Show file tree

Hide file tree

Showing 33 changed files with 675 additions and 650 deletions.
diff --git a/app/assets/images/about-miru-background.svg b/app/assets/images/about-miru-background.svg
diff --git a/app/assets/stylesheets/mailers.css b/app/assets/stylesheets/mailers.css
@@ -21,29 +21,21 @@
   color: #5B34EA;
 }
 
-body {
+.mail {
   align-items: center;
   display: flex;
   flex-direction: column;
-}
-.container {
-  text-align: center;
-  width: 640px;
-  font-family: 'Manrope';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  text-align: center;
   color: #777683;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
 
-  .reset-password-button {
-    border-radius: 20px;
-    background: #5B34EA;
-    text-align: center;
-    display: inline-block;
+.button {
+  border-radius: 20px;
+  background: #5B34EA;
+  text-align: center;
+  display: inline-block;
 
-    a {
+  a {
       width: 129px;
       height: 24px;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -52,11 +44,105 @@ body {
       line-height: 16px;
       color: #FFFFFF;
       text-decoration: none;
+      display: inline-block;
       display: flex;
       justify-content: center;
       align-items: center;
     }
   }
+.purple {
+  color: #5B34EA;
+}
+
+.container {
+  text-align: center;
+  width: 640px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  color: #777683;
+  width: 640px;
+}
+
+.invitation {
+  width: 640px;
+
+  .sender_company_container {
+    display: flex;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    color: #000;
+
+    .sender,
+    .company {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border: 1px solid #D7DEE5;
+      border-radius: 16px;
+      padding: 24px 16px;
+      margin-left: 16px;
+      width: 176px;
+      height: 130px;
+      justify-content: space-evenly;
+
+      img {
+        padding-bottom: 4px;
+      }
+    }
+  }
+
+  .about-miru-container {
+    background: rgb(235, 239, 242);
+    width: 640px;
+    margin-top: 40px;
+
+    .about-miru {
+      width: 560px;
+      height: 265px;
+      clip-path: stroke-box;
+      margin: auto;
+      margin-top: 40px;
+
+      .about-miru-background {
+        position: absolute;
+      }
+
+      .miru-logo {
+        position: relative;
+        height: 400px;
+        width: 400px;
+        left: 288px;
+        top: -60px;
+        opacity: 20%;
+      }
+
+      .desc {
+        position: relative;
+        top: -444px;
+        left: 24px;
+        color: #fff;
+        width: 272px;
+        font-size: 14px;
+
+        .header {
+          color: #fff;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+          font-style: normal;
+          font-weight: 800;
+          font-size: 24px;
+          line-height: 33px;
+        }
+      }
+    }
+  }
+
+  hr {
+    margin-top: 40px;
+    margin-bottom: 24px;
+  }
 }
 
 .footer-container {

diff --git a/app/controllers/internal_api/v1/timeoff_entries_controller.rb b/app/controllers/internal_api/v1/timeoff_entries_controller.rb
@@ -15,7 +15,9 @@ def index
       timeoff_entries: data[:timeoff_entries],
       employees: data[:employees],
       leave_balance: data[:leave_balance],
-      total_timeoff_entries_duration: data[:total_timeoff_entries_duration]
+      total_timeoff_entries_duration: data[:total_timeoff_entries_duration],
+      optional_timeoff_entries: data[:optional_timeoff_entries],
+      national_timeoff_entries: data[:national_timeoff_entries]
     }, status: :ok
   end
 

diff --git a/app/javascript/src/common/CustomYearPicker/index.tsx b/app/javascript/src/common/CustomYearPicker/index.tsx
@@ -8,6 +8,7 @@ type customYearPickerProps = {
   yearClassName?: string;
   currentYear: number;
   setCurrentYear: React.Dispatch<React.SetStateAction<number>>;
+  nextYearButtonDisabled?: boolean;
 };
 
 const defaultWrapperClassName = "flex items-center justify-center";
@@ -20,6 +21,7 @@ const CustomYearPicker = ({
   yearClassName,
   currentYear,
   setCurrentYear,
+  nextYearButtonDisabled = false,
 }: customYearPickerProps) => {
   const range = (start, end) => {
     const ans = [];
@@ -31,6 +33,10 @@ const CustomYearPicker = ({
   };
 
   const years = range(1920, currentYear + 1);
+  const actualYear = new Date().getFullYear();
+  const isNextYearButtonDisabled = nextYearButtonDisabled
+    ? currentYear >= actualYear
+    : false;
 
   const handleOnChange = selected => {
     const current = parseInt(selected);
@@ -67,8 +73,16 @@ const CustomYearPicker = ({
           ))}
         </select>
       )}
-      <button className="pl-2" onClick={handleNext}>
-        <CaretCircleRightIcon size={13} weight="bold" />
+      <button
+        className="pl-2"
+        disabled={isNextYearButtonDisabled}
+        onClick={handleNext}
+      >
+        {isNextYearButtonDisabled ? (
+          <CaretCircleRightIcon color="#ADA4CE" size={13} weight="bold" />
+        ) : (
+          <CaretCircleRightIcon size={13} weight="bold" />
+        )}
       </button>
     </div>
   );

diff --git a/app/javascript/src/components/Authentication/ResetPassword/utils.ts b/app/javascript/src/components/Authentication/ResetPassword/utils.ts
@@ -9,7 +9,7 @@ export const resetPasswordFormValidationSchema = Yup.object().shape({
   password: Yup.string()
     .matches(/^\S.*\S$/, "Password cannot start or end with a blank space")
     .matches(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s\x00-\x1F\x7F])[\S\s]{8,}$/, // eslint-disable-line
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[_\w\s\x00-\x1F\x7F])[\S]{8,}$/, // eslint-disable-line
       "Must Contain at least 8 Characters, One Uppercase, One Lowercase, One Number and One Special Character"
     )
     .required("Password cannot be blank"),

diff --git a/app/javascript/src/components/Authentication/SignUp/SignUpForm.tsx b/app/javascript/src/components/Authentication/SignUp/SignUpForm.tsx
@@ -187,7 +187,11 @@ const SignUpForm = () => {
                       setFieldError={setFieldError}
                       setFieldValue={setFieldValue}
                       type="password"
-                      wrapperClassName="mb-6"
+                      wrapperClassName={`${!errors.password && "mb-6"}`}
+                    />
+                    <InputErrors
+                      fieldErrors={errors.password}
+                      fieldTouched={touched.password}
                     />
                   </div>
                   <div className="field">
@@ -210,24 +214,10 @@ const SignUpForm = () => {
                         and 1 special character
                       </p>
                     )}
-                    {errors.confirm_password == errors.password &&
-                    (touched.password || touched.confirm_password) ? (
-                      <InputErrors
-                        fieldErrors={errors.confirm_password}
-                        fieldTouched={
-                          touched.confirm_password || touched.password
-                        }
-                      />
-                    ) : (
-                      (errors.confirm_password || errors.password) && (
-                        <InputErrors
-                          fieldErrors="Passwords must match"
-                          fieldTouched={
-                            touched.confirm_password || touched.password
-                          }
-                        />
-                      )
-                    )}
+                    <InputErrors
+                      fieldErrors={errors.confirm_password}
+                      fieldTouched={touched.confirm_password}
+                    />
                   </div>
                   <div className="my-6 flex text-xs font-normal leading-4 text-miru-dark-purple-1000">
                     <div className="mt-2 flex">

diff --git a/app/javascript/src/components/Authentication/SignUp/utils.ts b/app/javascript/src/components/Authentication/SignUp/utils.ts
@@ -24,18 +24,18 @@ export const signUpFormValidationSchema = Yup.object().shape({
   password: Yup.string()
     .matches(/^\S.*\S$/, "Password cannot start or end with a blank space")
     .matches(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s\x00-\x1F\x7F])[\S\s]{8,}$/, // eslint-disable-line
+      /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[_\W\s\x00-\x1F\x7F])[\S\s]{8,}$/, // eslint-disable-line
       "Must Contain at least 8 Characters, One Uppercase, One Lowercase, One Number and One Special Character"
     )
     .required("Password cannot be blank"),
   confirm_password: Yup.string()
     .matches(/^\S.*\S$/, "Password cannot start or end with a blank space")
     .matches(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s\x00-\x1F\x7F])[\S\s]{8,}$/, // eslint-disable-line
+      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[_\w\s\x00-\x1F\x7F])[\S]{8,}$/, // eslint-disable-line
       "Must Contain at least 8 Characters, One Uppercase, One Lowercase, One Number and One Special Character"
     )
     .oneOf([Yup.ref("password"), null], "Passwords must match")
-    .required("Password cannot be blank"),
+    .required("Confirm Password cannot be blank"),
   isAgreedTermsOfServices: Yup.boolean().oneOf(
     [true],
     "Please agree to the terms and privacy policy to continue"

diff --git a/app/javascript/src/components/LeaveManagement/Container/LeaveBlock.tsx b/app/javascript/src/components/LeaveManagement/Container/LeaveBlock.tsx
@@ -4,15 +4,34 @@ import { minToHHMM } from "helpers";
 import { Avatar } from "StyledComponents";
 
 import {
-  generateLeaveColor,
   generateLeaveIcon,
+  generateLeaveColor,
+  generateHolidayIcon,
+  generateHolidayColor,
 } from "components/Profile/Organization/Leaves/utils";
 
 const LeaveBlock = ({ leaveType, setSelectedLeaveType }) => {
-  const { icon, color, name, netDuration, netDays } = leaveType;
+  const {
+    icon,
+    color,
+    name,
+    netDuration,
+    netDays,
+    type,
+    category,
+    timePeriod,
+  } = leaveType;
+
+  const leaveIcon =
+    type == "leave" ? generateLeaveIcon(icon) : generateHolidayIcon(icon);
+
+  const leaveColor =
+    type == "leave" ? generateLeaveColor(color) : generateHolidayColor(color);
 
-  const leaveIcon = generateLeaveIcon(icon);
-  const leaveColor = generateLeaveColor(color);
+  const formattedDuration =
+    netDuration < 0
+      ? `-${minToHHMM(-netDuration)} h (${netDays} days)`
+      : `${minToHHMM(netDuration)} h (${netDays} days)`;
 
   return (
     <div
@@ -29,7 +48,8 @@ const LeaveBlock = ({ leaveType, setSelectedLeaveType }) => {
       <div className="mt-4 flex flex-col">
         <span className="text-xs font-semibold lg:text-sm">{name}</span>
         <span className="mt-2 text-base font-semibold lg:text-2xl">
-          {`${minToHHMM(netDuration)} h (${netDays} days)`}
+          {category !== "national" && formattedDuration}
+          {category == "optional" && `this ${timePeriod}`}
         </span>
       </div>
     </div>

diff --git a/app/javascript/src/components/LeaveManagement/Header.tsx b/app/javascript/src/components/LeaveManagement/Header.tsx
@@ -16,6 +16,7 @@ const Header = ({
       Leave Management
     </span>
     <CustomYearPicker
+      nextYearButtonDisabled
       currentYear={currentYear}
       setCurrentYear={setCurrentYear}
       wrapperClassName="text-miru-han-purple-1000"

diff --git a/app/javascript/src/components/LeaveManagement/index.tsx b/app/javascript/src/components/LeaveManagement/index.tsx
@@ -25,6 +25,8 @@ const LeaveManagement = () => {
   const [filterTimeoffEntries, setFilterTimeoffEntries] = useState([]);
   const [filterTimeoffEntriesDuration, setFilterTimeoffEntriesDuration] =
     useState(0);
+  const [optionalTimeoffEntries, setOptionalTimeoffEntries] = useState([]);
+  const [nationalTimeoffEntries, setNationalTimeoffEntries] = useState([]);
 
   useEffect(() => {
     fetchTimeoffEntries();
@@ -45,13 +47,17 @@ const LeaveManagement = () => {
       employees,
       leaveBalance,
       totalTimeoffEntriesDuration,
+      optionalTimeoffEntries,
+      nationalTimeoffEntries,
     } = res.data;
 
     setSelectedLeaveType(null);
     setTimeoffEntries(timeoffEntries);
     setEmployees(employees);
     setLeaveBalance(leaveBalance);
     setTotalTimeoffEntriesDuration(totalTimeoffEntriesDuration);
+    setOptionalTimeoffEntries(optionalTimeoffEntries);
+    setNationalTimeoffEntries(nationalTimeoffEntries);
     handlefilterTimeoffEntries(
       timeoffEntries,
       totalTimeoffEntriesDuration,
@@ -66,15 +72,21 @@ const LeaveManagement = () => {
     selectedLeaveType
   ) => {
     if (selectedLeaveType) {
-      const sortedTimeoffEntries =
-        timeoffEntries.length &&
-        selectedLeaveType &&
-        timeoffEntries.filter(
-          timeoffEntry => timeoffEntry.leaveType?.id === selectedLeaveType.id
-        );
+      let sortedTimeoffEntries = [];
+      if (selectedLeaveType.id == "optional") {
+        sortedTimeoffEntries = optionalTimeoffEntries;
+      } else if (selectedLeaveType.id == "national") {
+        sortedTimeoffEntries = nationalTimeoffEntries;
+      } else {
+        sortedTimeoffEntries =
+          timeoffEntries.length &&
+          timeoffEntries.filter(
+            timeoffEntry => timeoffEntry.leaveType?.id === selectedLeaveType.id
+          );
+      }
 
       const leaveType = leaveBalance.find(
-        item => item.id === selectedLeaveType.id
+        item => item.id == selectedLeaveType.id
       );
 
       setFilterTimeoffEntries(sortedTimeoffEntries);