[BP-74] Separate timer from entry

_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"
 	},

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": {

scripts-2.0/components/Billable/styles.scss

@@ -45,7 +45,7 @@
         height: 16px;
         border-radius: 100%;
         background: #fff;
-        display: block;;
+        display: block;
       }
 
       input:checked ~ .checkmark {

scripts-2.0/components/ContextMenu/index.tsx

@@ -38,7 +38,7 @@ export interface ContextMenuInterface {
     note: string,
     billable: boolean,
     startTimerCallback: Function,
-    addTimeEntryCallback: Function,
+    addTimeEntryCallback?: Function,
     onCloseCallback: Function,
     billableInputVisibility: boolean|null,
     externalTaskId: string,
@@ -91,6 +91,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);
@@ -298,7 +311,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
     };
 
     const addTimeEntry = (startTime, stopTime) => {
-        addTimeEntryCallback(
+        addTimeEntryCallback?.(
             taskId,
             note,
             service,
@@ -336,6 +349,7 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
         setClearTriggerForTimePicker(!clearTriggerForTimePicker);
         setOpen(false);
         setTaskId(0);
+        onCloseCallback()
     };
 
     const renderTagPicker = () => {
@@ -382,6 +396,13 @@ 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
@@ -484,28 +505,29 @@ const ContextMenu: React.FC<ContextMenuInterface> = (props) => {
                         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>
     );

scripts-2.0/components/ContextMenu/styles.scss

@@ -7,7 +7,6 @@
     font-weight: normal;
     color: $primaryTextColor;
     width: 440px;
-    height: 563px;
     box-sizing: border-box;
     border: #aea6ab 1px solid;
     display: block;
@@ -23,9 +22,12 @@
 
     .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 +38,6 @@
       margin-top: 15px;
     }
 
-    .billable {
-      margin-top: 15px;
-    }
-
     &__info-field {
       padding: 10px 14px 10px 16px;
       border-radius: 8px;

scripts-2.0/components/ContextMenu/types.ts

@@ -0,0 +1,4 @@
+export enum ContextMenuType {
+  TIMER = "TIMER",
+  ENTRY = "ENTRY",
+}

scripts-2.0/components/Footer/index.tsx

@@ -2,48 +2,62 @@ import * as React from "react";
 import translate from "../../Translator";
 import Button from "../common/Button";
 
-import './styles.scss';
-import {IconName} from "../../icons/types";
+import "./styles.scss";
+import { IconName } from "../../icons/types";
 import Icon from "../Icon";
 
 export interface FooterInterface {
-    onClickSave: any,
-    onClickCancel: any,
-    idDisabled?: boolean
-    showAddEntryButton?: boolean
+  onClickSave: any;
+  onClickCancel: any;
+  idDisabled?: boolean;
+  showAddEntryButton?: boolean;
 }
 
 const Footer: React.FC<FooterInterface> = (props) => {
-    const renderStartTimerButton = () => {
-        return <React.Fragment>
-            <Icon name={IconName.PLAY}/>&nbsp;
-            {translate('start_timer')}
-        </React.Fragment>
-    }
-
-    const renderAddEntryButton = () => {
-        return <React.Fragment>
-            {translate('add_time_entry')}
-        </React.Fragment>
-    }
-
+  const renderStartTimerButton = () => {
     return (
-        <div className={'footer'}>
-            <div className={'footer__buttons'}>
-                <Button
-                    class={'footer__button-save' + (props.idDisabled ? ' footer__button-disabled' : '')}
-                    onClick={!props.idDisabled ? props.onClickSave : () => {}}
-                >
-                    {!props.showAddEntryButton && renderStartTimerButton()}
-                    {!!props.showAddEntryButton && renderAddEntryButton()}
-                </Button>
-
-                <Button class={'footer__button-cancel'} onClick={props.onClickCancel}>
-                    {translate('cancel')}
-                </Button>
-            </div>
+      <React.Fragment>
+        <span>
+          {" "}
+          {translate("start_timer")}
+          &nbsp;&nbsp;
+        </span>
+        <div>
+          <Icon name={IconName.PLAY} />
+          &nbsp;
         </div>
+      </React.Fragment>
+    );
+  };
+
+  const renderAddEntryButton = () => {
+    return (
+      <React.Fragment>
+         {translate("add_time_entry")} 
+      </React.Fragment>
     );
+  };
+
+  return (
+    <div className={"footer"}>
+      <div className={"footer__buttons"}>
+        <Button class={"footer__button-cancel"} onClick={props.onClickCancel}>
+          {translate("cancel")}
+        </Button>
+
+        <Button
+          class={
+            "footer__button-save" +
+            (props.idDisabled ? " footer__button-disabled" : "")
+          }
+          onClick={!props.idDisabled ? props.onClickSave : () => {}}
+        >
+          {!props.showAddEntryButton && renderStartTimerButton()}
+          {!!props.showAddEntryButton && renderAddEntryButton()}
+        </Button>
+      </div>
+    </div>
+  );
 };
 
 export default Footer;

scripts-2.0/components/Footer/styles.scss

@@ -1,18 +1,16 @@
-@import '../../style/common';
+@import "../../style/common";
 
 .timecamp {
   .footer {
-    position: absolute;
-    bottom: 0;
-    margin: 0;
-    padding: 20px 0 20px 0;
+    bottom: 0;    
     width: 100%;
-    border-top: $primaryBorderColor 1px solid;
     background-color: inherit;
 
     &__buttons {
-      float: right;
+      width: 100%;
       margin: 0 21px 0 0;
+      padding: 1rem;
+      display: flex;
     }
 
     &__button-save {
@@ -21,13 +19,24 @@
       border: none;
       font-family: $defaultFontFamily;
       font-size: $defaultFontSize;
-      width: 133px;
+      width: unset;
+      margin-left: auto;
+      margin-right: 33px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+
+      & span {
+        text-transform: uppercase;
+      }
     }
 
     &__button-cancel {
       border: solid 1px $primaryBorderColor;
       font-family: $defaultFontFamily;
       font-size: $defaultFontSize;
+      margin-right: 10px;
     }
 
     &__button-disabled {

scripts-2.0/components/Header/styles.scss

@@ -3,6 +3,7 @@
 .timecamp {
   .header {
     margin: 0 0 30px 0;
+    display: flex;
 
     &__logo-svg {
       top: 5px;

scripts-2.0/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import "./styles.scss";
+import { InfoBoxStatus } from "./types";
+import InfoboxesContent from "./infoboxesContent";
+
+interface InfoBoxProps {
+  children?: React.ReactNode;
+  onClose: () => void;
+
+  status: InfoBoxStatus | undefined;
+}
+
+const contentByStatus = {
+  [InfoBoxStatus.SUCCESS]: <InfoboxesContent.success />,
+  [InfoBoxStatus.ERROR]: <InfoboxesContent.error />,
+};
+
+const InfoBox = ({ onClose, status, children = null }: InfoBoxProps) => {
+  if (!status) return null;
+
+  const selectedContent = contentByStatus[status] || null;
+
+  return (
+    <div className="infobox" data-status={status}>
+      {selectedContent}
+      {children}
+
+      <span className="infobox__cross" onClick={onClose}>
+        X
+      </span>
+    </div>
+  );
+};
+
+export default InfoBox;

scripts-2.0/components/InfoBox/index.tsx

@@ -0,0 +1 @@
+export { default } from "./InfoBox";

scripts-2.0/components/InfoBox/infoboxesContent/InfoBoxErrorContent.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+const InfoBoxError = () => {
+  return (
+    <React.Fragment>
+      <span>There was problem when creating time entry.</span>
+    </React.Fragment>
+  );
+};
+
+export default InfoBoxError;

scripts-2.0/components/InfoBox/infoboxesContent/InfoBoxSuccessContent.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import Icon from "../../Icon";
+import { IconName } from "../../../icons/types";
+import PathService from "../../../PathService"
+
+const serverUrl = new PathService().getBaseUrl();
+
+const InfoBoxSuccess = () => {
+  return (
+    <React.Fragment>
+      <Icon name={IconName.CHECK_CIRCLE} iconPrefix={"fal"} />
+      <span>&nbsp; Time entry added.&nbsp; </span>
+      <a
+        rel="noopener noreferrer"
+        href={serverUrl}
+        target="_blank"
+      >
+        <span>Edit in Timesheet.</span>
+      </a>
+    </React.Fragment>
+  );
+};
+
+export default InfoBoxSuccess;