feat: add project billable entries link & alert.

src/containers/Projects/components/ProjectBillableEntriesLink.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import * as R from 'ramda';
+
+import { ButtonLink } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+function ProjectBillableEntriesLinkComponent({
+  // #ownProps
+  children,
+  projectId,
+  className,
+
+  // #withDialogAction
+  openDialog,
+}) {
+  const handleBillableEntries = (event) => {
+    openDialog('project-billable-entries', { projectId });
+    event.preventDefault();
+  };
+
+  return (
+    <BillableEntriesLink className={className} onClick={handleBillableEntries}>
+      {children}
+    </BillableEntriesLink>
+  );
+}
+
+export const ProjectBillableEntriesLink = R.compose(withDialogActions)(
+  ProjectBillableEntriesLinkComponent,
+);
+
+const BillableEntriesLink = styled(ButtonLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

src/containers/Projects/components/index.ts

@@ -1,9 +1,10 @@
 // @ts-nocheck
 export * from './ExpenseSelect';
-export * from './ChangeTypesSelect';
-export * from './TaskSelect';
+export * from './ProjectTaskSelect';
+export * from './ProjectTaskChargeTypeSelect';
 export * from './ProjectsSelect';
-export * from './ProjectMultiSelect'
+export * from './ProjectMultiSelect';
 export * from './FInputGroupComponent';
-export * from './ProjectSuggestField'
-export * from './ProjectBillableTypeSuggestField'
+export * from './ProjectSuggestField';
+export * from './ProjectBillableTypeSuggestField';
+export * from './ProjectBillableEntriesLink';

src/containers/Projects/containers/ProjectBillableEntriesFormDialog/utils.tsx

@@ -1,9 +1,24 @@
 // @ts-nocheck
+import React from 'react';
 import moment from 'moment';
+import { Callout, Intent, Classes } from '@blueprintjs/core';
+import { CLASSES } from '@/constants/classes';
+import { FormattedMessage as T } from '@/components';
 
-export const getDefaultQuery = () => {
-  return {
-    billableType: '',
-    to_date: moment(new Date()).format('YYYY-MM-DD'),
-  };
-};
+/**
+ * Empty status callout.
+ * @returns {React.JSX}
+ */
+export function EmptyStatuCallout() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <Callout intent={Intent.PRIMARY}>
+        <p>
+          <T
+            id={'project_billable_entries.alert.there_is_no_billable_entries'}
+          />
+        </p>
+      </Callout>
+    </div>
+  );
+}

src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -36,7 +36,10 @@ import {
   InvoiceExchangeRateInputField,
   InvoiceProjectSelectButton,
 } from './components';
-import { ProjectsSelect } from '@/containers/Projects/components';
+import {
+  ProjectsSelect,
+  ProjectBillableEntriesLink,
+} from '@/containers/Projects/components';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
@@ -56,6 +59,7 @@ function InvoiceFormHeaderFields({
   // Invoice form context.
   const { customers, projects } = useInvoiceFormContext();
 
+  // Formik context.
   const { values } = useFormikContext();
 
   // Handle invoice number changing.
@@ -78,14 +82,6 @@ function InvoiceFormHeaderFields({
   // Syncs invoice number settings with form.
   useObserveInvoiceNoSettings(invoiceNumberPrefix, invoiceNextNumber);
 
-  React.useEffect(() => {
-    if (values.project_id) {
-      openDialog('project-billable-entries', {
-        projectId: values.project_id,
-      });
-    }
-  }, [values]);
-  
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
       {/* ----------- Customer name ----------- */}
@@ -254,6 +250,11 @@ function InvoiceFormHeaderFields({
           input={InvoiceProjectSelectButton}
           popoverFill={true}
         />
+        {values?.project_id && (
+          <ProjectBillableEntriesLink projectId={values?.project_id}>
+            <T id={'add_billable_entries'} />
+          </ProjectBillableEntriesLink>
+        )}
       </FFormGroup>
     </div>
   );