timecamp-org · cds88 · Feb 8, 2024 · Feb 8, 2024 · Feb 21, 2024
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -231,6 +231,9 @@
 	"go_to_timesheet": {
 		"message": "Go to Timesheet"
 	},
+	"see_full_timesheet": {
+		"message": "See full Timesheet"
+	},  
 	"go_to_subscriton_page": {
 		"message": "Go to subscription page"
 	},
@@ -269,5 +272,14 @@
 	},
 	"click_the_button_below_to_login_to_your_timecamp_account": {
 		"message": "Click the button below to login to your TimeCamp account"
+	},
+	"focus_phase":{
+		"message":"Focus phase"
+	},
+	"short_break":{
+		"message":"Short break"
+	},
+	"long_break":{
+		"message":"Long break"
 	}
 }
diff --git a/images/logoTC-with-name-dark.svg b/images/logoTC-with-name-dark.svg
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "timecamp-chrome-extension",
-  "version": "2.85.2",
+  "version": "2.85.74",
   "description": "TimeCamp Google Chrome Time Tracking Extension",
   "main": "index.js",
   "scripts": {

diff --git a/scripts-2.0/ApiService.js b/scripts-2.0/ApiService.js
@@ -999,4 +999,21 @@ export default class ApiService {
             method: "POST"
         });
     }
+    getTheme(userId) {
+      return this.authorizeAndCall((token, resolve, reject) => {
+        this.call({
+          url: pathService.getThemeUrl(userId),
+          method: METHOD_GET,
+          apiToken: token,
+        })
+          .then((response) => {
+            let responseData = JSON.parse(response.response);
+            resolve(responseData);
+          })
+          .catch((response) => {
+            logger.error(response);
+            reject(response);
+          });
+      });
+  }
 }
diff --git a/scripts-2.0/PathService.js b/scripts-2.0/PathService.js
@@ -172,4 +172,7 @@ export default class PathService {
     getUsersUrl(){
         return this.serverUrl + "third_party/api/users?active_only=true";
     }
+    getThemeUrl(userId) {
+      return this.serverUrl + `third_party/api/user/${userId}/setting?name=theme`;
+    }    
 }
diff --git a/scripts-2.0/StorageManager.js b/scripts-2.0/StorageManager.js
@@ -4,12 +4,37 @@ import Logger from './Logger';
 const logger = new Logger();
 
 const TRELLO_POWER_UP_AD_VISIBLE = 'trello_power_up_ad_visible';
+const TC_THEME = 'tc_theme';
+const POMODORO_IS_ENABLED = 'pomodoro_is_enabled'
+const POMODORO_TYPE = 'pomodoro_type'
+const POMODORO_DURATION_VALUES = 'pomodoro_duration_values'
+const POMODORO_IS_OPTIONS_OPEN = 'pomodoro_is_options_open'
 
 export default class StorageManager {
     static get TRELLO_POWER_UP_AD_VISIBLE() {
         return TRELLO_POWER_UP_AD_VISIBLE;
     }
 
+    static get TC_THEME() {
+        return TC_THEME;
+    }
+
+    static get POMODORO_IS_ENABLED(){
+        return POMODORO_IS_ENABLED;
+    }
+
+    static get POMODORO_TYPE(){
+        return POMODORO_TYPE;
+    }
+
+    static get POMODORO_DURATION_VALUES(){
+        return POMODORO_DURATION_VALUES;
+    }
+
+    static get POMODORO_IS_OPTIONS_OPEN(){
+        return POMODORO_IS_OPTIONS_OPEN;
+    }
+
     buildKey(params) {
         return params.join('_');
     }

diff --git a/scripts-2.0/background.js b/scripts-2.0/background.js
@@ -369,6 +369,13 @@ const TcButton = {
                             reject(error);
                         });
                         break;
+                    case "getTheme":
+                      apiService.getTheme(request.userId).then((response) => {
+                            resolve(response);
+                        }).catch((error) => {
+                            reject(error);
+                        });
+                        break;                        
                 }
             } catch (e) {
                 logger.error(e);

diff --git a/scripts-2.0/components/Billable/styles.scss b/scripts-2.0/components/Billable/styles.scss
@@ -14,6 +14,7 @@
       cursor: pointer;
       padding-left: 26px;
       user-select: none;
+      color: var(--theme-color);
     }
 
     &__checkbox {
@@ -45,7 +46,7 @@
         height: 16px;
         border-radius: 100%;
         background: #fff;
-        display: block;;
+        display: block;
       }
 
       input:checked ~ .checkmark {

diff --git a/scripts-2.0/components/Checkbox/Checkbox.tsx b/scripts-2.0/components/Checkbox/Checkbox.tsx
@@ -3,11 +3,12 @@ import './styles.scss';
 
 export interface PropTypes {
   isChecked: boolean;
+  onClick?: ()=>void
 }
 
 const Checkbox: React.FC<PropTypes> = (props) => {
   return (
-    <div className="Checkbox">
+    <div className="Checkbox" onClick={props.onClick}>
       <input type="checkbox" checked={props.isChecked} />
       <span className="Checkbox__checkmark"></span>
     </div>

diff --git a/scripts-2.0/components/ContextMenu/index.tsx b/scripts-2.0/components/ContextMenu/index.tsx
@@ -24,7 +24,9 @@ import TimeSelectors from "../TimeSelectors";
 import DateTime from "../../helpers/DateTime";
 import TimeFormatter from "../../TimeFormatter";
 import WrongDatesError from "./Error/WrongDatesError";
-
+import { TCTheme } from "../../types/theme";
+import { getTheme, retrieveThemeFromStorage } from "../../helpers/theme";
+
 const pathService = new PathService();
 const logger = new Logger();
 const dateTime = new DateTime();
@@ -38,7 +40,7 @@ export interface ContextMenuInterface {
     note: string,
     billable: boolean,
     startTimerCallback: Function,
-    addTimeEntryCallback: Function,
+    addTimeEntryCallback?: Function,
     onCloseCallback: Function,
     billableInputVisibility: boolean|null,
     externalTaskId: string,
@@ -47,6 +49,7 @@ export interface ContextMenuInterface {
     taskNotFoundInBackendIntegrationInfo: string,
     embedOnPopup?: boolean|null,
     trelloPowerUpAdVisible?: boolean|null,
+    isPomodoroEnabled?: boolean
 }
 
 const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
@@ -65,7 +68,9 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
     const startTimerCallback = props.startTimerCallback;
     const addTimeEntryCallback = props.addTimeEntryCallback;
     const onCloseCallback = props.onCloseCallback;
+    const isPomodoroEnabled = props.isPomodoroEnabled || false
     const [userId, setUserId] = useState<number>(0);
+    const [theme, setTheme] = useState<TCTheme>("default");
     const [isAdmin, setIsAdmin] = useState<boolean>(false);
     const [clearTriggerForTimePicker, setClearTriggerForTimePicker] = useState<boolean>(false);
     const [externalTaskId, setExternalTaskId] = useState(props.externalTaskId);
@@ -91,6 +96,19 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
 
     const THIRTY_DAYS_IN_MILISEC = 2592000000;
 
+    const isTimeEntryInValid =
+    props.service === "chrome_plugin" &&
+    props.addTimeEntryCallback &&
+    !stopTime;
+
+    const shouldShowAddEntryButton =
+      props.service !== "chrome_plugin"
+        ? false
+        : props.addTimeEntryCallback
+          ? true
+          : false;
+
+
 
     useEffect(() => {
         setNote(props.note);
@@ -111,6 +129,10 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
         };
     }, [props]);
 
+    useEffect(()=>{
+        retrieveThemeFromStorage(setTheme)
+    },[])
+
 
     useMemo(() => {
         if (service === TRELLO) {
@@ -139,6 +161,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
             setUserId(parseInt(data.user_id));
             setIsAdmin(data.permissions.role_administrator);
             getBackendIntegrationAdData(data.user_id);
+            getTheme(data.user_id, setTheme);            
         });
 
         if (billableInputVisibility === null) {
@@ -204,6 +227,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
         });
     }, []);
 
+
     const getBackendIntegrationAdData = (userId: number) => {
         browser.runtime.sendMessage({
             type: 'getUserSetting',
@@ -298,7 +322,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
     };
 
     const addTimeEntry = (startTime, stopTime) => {
-        addTimeEntryCallback(
+        addTimeEntryCallback?.(
             taskId,
             note,
             service,
@@ -336,6 +360,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
         setClearTriggerForTimePicker(!clearTriggerForTimePicker);
         setOpen(false);
         setTaskId(0);
+        onCloseCallback()
     };
 
     const renderTagPicker = () => {
@@ -382,9 +407,17 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
             .replace('*linkClose*', '</a>')));
     };
 
+    const onStopTimeValueChange = (value) => {
+        if (value !== null) {
+            setWrongDatesErrorMessage('');
+        }
+        setStopTime(value);
+    } 
+
     //data-elevation is fix for trello card modal (it close when click on context menu)
     return (
         <div
+            data-theme={theme}
             ref={node}
             className={`context-menu  ${!open ? "context-menu--hidden" : ""} ${props.isBackendIntegration && !isBackendIntegration && dontShowAdSettingValue === 0 ? "context-menu-extended-height" : ""}`}
             style={props.position}
@@ -397,7 +430,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
 
                 <SubscriptionExpiredError visible={errorSubscriptionExpiredVisible}/>
 
-                <Header />
+                <Header theme={theme}/>
 
                 <UnknownError
                     visible={errorUnknownVisible}
@@ -479,33 +512,35 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
                     stopTime={stopTime}
                     clearFormTrigger={clearTriggerForTimePicker}
                     durationFormat={durationFormat}
+                    isPomodoroEnabled={isPomodoroEnabled}
                     onStartTimeValueChange={(value) => {
                         setStartTime(value);
                         const now = dateTime.getNow();
                         setWrongDatesErrorMessage((now < value && stopTime === null) ? translate('Start time cannot be greater than now') : '');
                     }}
-                    onStopTimeValueChange={(value) => {
-                        if (value !== null) {
-                            setWrongDatesErrorMessage('');
-                        }
-                        setStopTime(value);
-                    }}
+                    onStopTimeValueChange={ props.addTimeEntryCallback? onStopTimeValueChange : undefined}
                 />
                 <WrongDatesError message={wrongDatesErrorMessage} visible={wrongDatesErrorMessage !== ''}/>
                 {
                     billableInputVisibility &&
-                    <Billable
-                        billable={billable}
-                        onBillableChange={(newBillable) => {setBillable(newBillable)}}
-                    />
+                    <div className="billable-wrapper">
+                        <Billable
+                            billable={billable}
+                            onBillableChange={(newBillable) => {setBillable(newBillable)}}
+                        />
+                    </div>
                 }
             </div>
 
             <Footer
-                idDisabled={!isSelectedTagsValid || wrongDatesErrorMessage !== ''}
-                onClickSave={onClickSave}
-                onClickCancel={onClickCancel}
-                showAddEntryButton={stopTime !== null}
+              idDisabled={
+                !isSelectedTagsValid ||
+                wrongDatesErrorMessage !== "" ||
+                isTimeEntryInValid
+              }
+              onClickSave={onClickSave}
+              onClickCancel={onClickCancel}
+              showAddEntryButton={shouldShowAddEntryButton}
             />
         </div>
     );

diff --git a/scripts-2.0/components/ContextMenu/styles.scss b/scripts-2.0/components/ContextMenu/styles.scss
@@ -2,30 +2,36 @@
 
 .timecamp {
   .context-menu {
+    @include theme-variables;
+
     font-family: $defaultFontFamily;
     font-size: 14px;
     font-weight: normal;
     color: $primaryTextColor;
     width: 440px;
-    height: 563px;
     box-sizing: border-box;
-    border: #aea6ab 1px solid;
+    border: #aea6ab 1px var(--theme-border-color);
     display: block;
     position: fixed;
-    background-color: $primaryBackgroundColor;
+    background-color: var(--theme-background-color);
     line-height: initial;
     z-index: 99999;
     overflow: hidden;
+
+
 
     &--hidden {
       display: none;
     }
 
     .context-menu-overflow-wrapper {
       overflow: auto;
-      height: calc(100% - 72px);
       padding: 20px;
       box-sizing: border-box;
+
+      .billable-wrapper {
+        margin-top:20px;        
+      }      
     }
 
     &-extended-height {
@@ -36,10 +42,6 @@
       margin-top: 15px;
     }
 
-    .billable {
-      margin-top: 15px;
-    }
-
     &__info-field {
       padding: 10px 14px 10px 16px;
       border-radius: 8px;

diff --git a/scripts-2.0/components/ContextMenu/types.ts b/scripts-2.0/components/ContextMenu/types.ts
@@ -0,0 +1,4 @@
+export enum ContextMenuType {
+  TIMER = "TIMER",
+  ENTRY = "ENTRY",
+}