feat: add forms page and routing

src/routes/Routes.tsx

@@ -42,6 +42,7 @@ import { Project } from 'Containers/Project';
 import { Account, About } from 'Containers/User';
 import { ProjectData } from 'Containers/ProjectData';
 import { RocketDry } from 'Containers/RocketDry';
+import { Forms } from 'Containers/Forms';
 
 // route components
 import { PhotoShareProvider } from 'Context/PhotoShare/PhotoShareProvider';
@@ -182,6 +183,13 @@ const PeopleRoute = () => (
   </DashboardWrapper>
 );
 
+// Form route
+const FormsRoute = () => (
+  <DashboardWrapper>
+    <Forms />
+  </DashboardWrapper>
+);
+
 const PhotoViewRoute = () => (
   <PhotoViewWrapper>
     <PhotoView />
@@ -378,6 +386,8 @@ export const Routes = () => (
 
       <PrivateRoute exact path="/people" render={PeopleRoute} />
 
+      <PrivateRoute exact path="/form" render={FormsRoute} />
+
       <PrivateRoute exact path="/user/account" render={AccountRoute} />
       <PrivateRoute exact path="/user/about" render={AboutRoute} />
 

src/shared/components/Forms/FormTabs/ContractForms/ContractForms.tsx

@@ -0,0 +1,40 @@
+import { FormTemplateResponse } from 'Containers/Forms/Models';
+import React, { memo } from 'react';
+import { TabContent } from 'Components/Tabs';
+import { areEqual } from 'Utils/equalityChecks';
+import { Spinner } from 'Components/Spinner';
+import { PurpleButton } from 'Components/Button';
+
+import { FormsList } from '../FormsList';
+import classes from './contractForms.module.css';
+
+interface Props {
+  forms: FormTemplateResponse;
+  fetching: boolean;
+  onClickRow?: (e: any) => void;
+  onAdd: () => void;
+  onDelete: (id: number) => void;
+}
+
+const ContractForms = ({ forms, onClickRow, fetching, onAdd, onDelete }: Props) => (
+  <TabContent key="tab-content-contract-forms" id="contract-forms" className="show active position-relative">
+    <div className={classes.formsContent}>
+      <div className={`d-flex justify-content-start align-items-center ${classes.contentHeader}`}>
+        <h2>Form Templates</h2>
+        <PurpleButton className={classes.addButton} onClick={onAdd}>
+          Add +
+        </PurpleButton>
+      </div>
+      {fetching && <Spinner loading />}
+      {!fetching && <FormsList forms={forms} onClickRow={onClickRow} onDelete={onDelete} />}
+    </div>
+  </TabContent>
+);
+
+ContractForms.defaultProps = {
+  onClickRow: null,
+};
+
+const ContractFormsMemo = memo(ContractForms, areEqual);
+
+export { ContractFormsMemo as ContractForms };

src/shared/components/Forms/FormTabs/ContractForms/contractForms.module.css

@@ -0,0 +1,31 @@
+.formsContent {
+  min-height: calc(42px + (64px * 15));
+  display: flex;
+  flex-direction: column;
+  align-content: baseline;
+  padding: 24px;
+}
+
+.contentHeader {
+  width: 100%;
+  height: 46px;
+  margin-bottom: 30px;
+}
+.contentHeader h2 {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 19px;
+  color: #000000;
+  margin: 0;
+}
+
+.addButton {
+  background: #ffffff;
+  color: #9a00ff;
+  font-weight: 500;
+  width: 160px;
+  border-radius: 25px;
+  margin-left: 2.4rem;
+}

src/shared/components/Forms/FormTabs/ContractForms/index.ts

@@ -0,0 +1 @@
+export { ContractForms } from './ContractForms';

src/shared/components/Forms/FormTabs/FormsList/FormsList.tsx

@@ -0,0 +1,65 @@
+import React, { memo } from 'react';
+import { FormTemplateResponse, FormTemplate } from 'Containers/Forms/Models';
+import { Table, TableBody, TableColumn, TableHeader, TableRow, Th } from 'Components/Table';
+import { Icon } from 'Components/Icons';
+
+import { formatDate } from 'Utils/helpers';
+import { areEqual } from 'Utils/equalityChecks';
+import { NoFormsTable } from '../NoFormsTable';
+
+import classes from './formsList.module.css';
+
+interface Props {
+  forms: FormTemplateResponse;
+  onDelete: (id: number) => void;
+  onClickRow?: (e: any) => void;
+}
+
+const FormsList = ({ forms, onClickRow, onDelete }: Props) => (
+  <>
+    {forms?.data?.length > 0 ? (
+      <Table className={`table ${classes.formListWrapper}`}>
+        <TableHeader>
+          <TableRow>
+            <Th>Name</Th>
+            <Th>Date Created</Th>
+            <Th />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {forms.data.map(({ id, created_at: createdAt, name }: FormTemplate) => (
+            <TableRow key={id}>
+              <TableColumn dataId={id} tdOnClick={onClickRow}>
+                <p>{name}</p>
+              </TableColumn>
+              <TableColumn dataId={id} tdOnClick={onClickRow} className={classes.columnContent}>
+                <p className={classes.numberAndDate}>{formatDate(createdAt, 'PP')}</p>
+              </TableColumn>
+              <TableColumn>
+                <button
+                  className={classes.deleteBtn}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete(id);
+                  }}
+                >
+                  <Icon type="trash" />
+                </button>
+              </TableColumn>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    ) : (
+      <NoFormsTable />
+    )}
+  </>
+);
+
+FormsList.defaultProps = {
+  onClickRow: null,
+};
+
+const FormsListMemo = memo(FormsList, areEqual);
+
+export { FormsListMemo as FormsList };

src/shared/components/Forms/FormTabs/FormsList/formsList.module.css

@@ -0,0 +1,52 @@
+.formListContainer {
+  min-height: 700px;
+}
+.formListWrapper {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+  color: #5b476b;
+  border-color: #e8e7ed;
+  background-color: #ffffff;
+  margin-top: 24px;
+  margin-bottom: 0;
+}
+
+.formListWrapper thead th:first-child,
+.formListWrapper tbody td:first-child {
+  padding-left: 72px;
+}
+.formListWrapper thead th:last-child,
+.formListWrapper tbody td:last-child {
+  padding-right: 72px;
+}
+.formListWrapper thead th {
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #777185;
+  padding-bottom: 1.2em;
+  border-bottom-color: #e8e7ed !important;
+}
+.formListWrapper tbody tr:hover {
+  background-color: #f4e5ff;
+  transition: 0.2s ease-in-out;
+  cursor: pointer;
+}
+.formListWrapper tbody td {
+  vertical-align: middle;
+}
+.formListWrapper p {
+  margin-bottom: 0;
+}
+.deleteBtn {
+  border-radius: 8px;
+  padding: 3px;
+  aspect-ratio: 1;
+  background-color: white;
+  border: none;
+}
+.deleteBtn:hover {
+  background-color: rgba(255, 0, 0, 0.399);
+}

src/shared/components/Forms/FormTabs/FormsList/index.ts

@@ -0,0 +1 @@
+export { FormsList } from './FormsList';

src/shared/components/Forms/FormTabs/NoFormsTable/NoFormsTable.tsx

@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import { areEqual } from 'Utils/equalityChecks';
+import { Table, TableHeader, TableRow, Th } from 'Components/Table';
+import { Icon } from 'Components/Icons';
+
+import classes from './noFormsTable.module.css';
+
+const NoFormsTable = () => (
+  <div>
+    <Table className={`table ${classes.formListWrapper}`}>
+      <TableHeader>
+        <TableRow>
+          <Th>Address</Th>
+          <Th>Date Created</Th>
+          <Th />
+        </TableRow>
+      </TableHeader>
+    </Table>
+    <div className={`d-flex justify-content-center align-items-center flex-column w-100 ${classes.noFormsContent}`}>
+      <p className={classes.noFormsText}>No forms yet. Create a new form.</p>
+      <Icon type="projects" />
+    </div>
+  </div>
+);
+
+const NoFormsTableMemo = memo(NoFormsTable, areEqual);
+
+export { NoFormsTableMemo as NoFormsTable };

src/shared/components/Forms/FormTabs/NoFormsTable/index.ts

@@ -0,0 +1 @@
+export { NoFormsTable } from './NoFormsTable';

src/shared/components/Forms/FormTabs/NoFormsTable/noFormsTable.module.css

@@ -0,0 +1,50 @@
+.noFormsContent {
+  padding-top: 240px;
+  padding-bottom: 310px;
+}
+
+.formListWrapper {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+  color: #5b476b;
+  border-color: #e8e7ed;
+  background-color: #ffffff;
+  margin-top: 24px;
+}
+
+.formListWrapper thead th:first-child,
+.formListWrapper tbody td:first-child {
+  padding-left: 72px;
+}
+.formListWrapper thead th:last-child,
+.formListWrapper tbody td:last-child {
+  padding-right: 72px;
+}
+.formListWrapper thead th {
+  text-transform: uppercase;
+  font-weight: 600;
+  color: #777185;
+  padding-bottom: 1.2em;
+  border-bottom-color: #e8e7ed !important;
+}
+.formListWrapper tbody tr:hover {
+  background-color: #f4e5ff;
+  transition: 0.2s ease-in-out;
+}
+.formListWrapper tbody td {
+  vertical-align: middle;
+}
+.formListWrapper p {
+  margin-bottom: 0;
+}
+.noFormsText {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 30px;
+  color: #b3abc6;
+}

src/shared/components/Forms/FormTabs/index.ts

@@ -0,0 +1,2 @@
+export { ContractForms } from './ContractForms';
+export { FormsList } from './FormsList';

src/shared/components/Forms/index.ts

@@ -0,0 +1 @@
+export { FormsList, ContractForms } from './FormTabs';

src/shared/components/Tabs/FormTabs/FormTabs.tsx

@@ -0,0 +1,79 @@
+import { Icon } from 'Components/Icons';
+import React, { memo, ReactNode, useState } from 'react';
+
+import { areEqual } from 'Utils/equalityChecks';
+import { width } from 'Utils/screen';
+import { Tab } from '../Tab';
+import classes from './forms.tabs.module.css';
+
+interface Props {
+  id?: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const createTabs = (activeTab: string, onTabClick: (e: any) => void) => (
+  <>
+    <Tab
+      key="contract-forms-tab"
+      id="contract-forms-tab"
+      className={`${classes.flexCenter} ${classes.button} ${
+        activeTab === 'contract-forms-tab' ? `active ${classes['active-Tab']}` : ''
+      }`}
+      target="contract-forms"
+      onClick={onTabClick}
+    >
+      <>
+        <Icon type="projects" className={classes.icon} />
+        <span>Contract Forms</span>
+      </>
+    </Tab>
+  </>
+);
+
+/*
+  In order to override bootstraps active class on tabs, there is a click event onTabClick, which will get the name of the tab that was clicked
+  and then trigger a re-render.  Note in the createTabs method above, where the active class is added or not, based on which tab was clicked.
+*/
+const FormTabs = ({ id = 'tabs', className, children }: Props) => {
+  // We want to set the initial active tab to the first tab in the incoming tabList
+  const [activeTab, setActiveTab] = useState('contract-forms-tab');
+
+  const onTabClick = (e: any) => {
+    // Occasionally, e.currentTarget is undefined.  Set the current activeTab if we run into this bug
+    setActiveTab(e?.currentTarget?.id || activeTab);
+  };
+
+  return (
+    <div className="container-fluid">
+      <div className="row">
+        <div className="col">
+          <div className={classes.formTabWrapper}>
+            <div className={classes.tabsContainer}>
+              <ul
+                className={`nav nav-tabs ${width < 576 ? 'flex-sm-column' : 'width'}   ${classes.tabs} ${
+                  className || ''
+                }`}
+                id={id}
+                role="tablist"
+              >
+                {createTabs(activeTab, onTabClick)}
+              </ul>
+            </div>
+            <div className="tab-content w-100 h-100 d-inline-block" id="formTabContent" style={{ height: 'auto' }}>
+              {children}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+FormTabs.defaultProps = {
+  id: undefined,
+  className: undefined,
+  children: undefined,
+};
+const FormTabsMemo = memo(FormTabs, areEqual);
+export { FormTabsMemo as FormTabs };

src/shared/components/Tabs/FormTabs/forms.tabs.module.css

@@ -0,0 +1,87 @@
+.formTabWrapper {
+  background-color: #ffffff;
+}
+.tabsContainer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+button {
+  font-size: 16px;
+  line-height: 24px;
+}
+.tabs {
+  border: none;
+}
+.active-Tab,
+.active-Tab:hover {
+  color: #ffffff !important;
+  font-weight: 600;
+  border-radius: 0 0 16px 16px;
+  background: linear-gradient(316.14deg, #6d00e6 1.84%, #9a00ff 96.25%) !important;
+}
+.active-Tab::after {
+  content: attr(data-text);
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+  user-select: none;
+  pointer-events: none;
+  font-weight: 600 !important;
+}
+
+.icon {
+  margin-right: 1em;
+}
+.icon path {
+  fill: #9a00ff;
+}
+.active-Tab .icon path {
+  fill: #fff;
+}
+
+.icon-phone {
+  padding-bottom: 0.265em;
+}
+
+.flexTop {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filterButtonContainer {
+  margin-top: 12px;
+  margin-right: 24px;
+  width: 55px;
+  height: 16px;
+}
+
+.filterButton {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-transform: capitalize;
+  color: #9a00ff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.filterButton:hover,
+.filterButton:focus {
+  color: #9a00ff;
+}
+
+.filterIcon {
+  margin-left: 5px;
+}

src/shared/components/Tabs/FormTabs/index.ts

@@ -0,0 +1 @@
+export { FormTabs } from './FormTabs';

src/shared/components/Tabs/index.ts

@@ -4,3 +4,4 @@ export { MobileProjectsTabs } from './ProjectsTabs';
 export { TabContent } from './TabContent';
 export { ProjectTabMenu } from './ProjectTabMenu';
 export { ProjectsTabMenu } from './ProjectsTabMenu';
+export { FormTabs } from './FormTabs';

src/shared/containers/Forms/FormTabs/ContractForms/ContractForms.tsx

@@ -0,0 +1,37 @@
+import React, { memo, useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { areEqual } from 'Utils/equalityChecks';
+import { contractFormsSelector, fetchingContractFormsSelector, companyIdSelector } from 'Containers/Forms/selectors';
+import { ContractForms } from 'Components/Forms';
+import { listCompanyContractForms } from 'Containers/Forms/actions';
+
+const ContractFormsContainer = () => {
+  const dispatch = useDispatch();
+  const contractForms = useSelector(contractFormsSelector, areEqual);
+  const fetching = useSelector(fetchingContractFormsSelector, areEqual);
+  const companyId = useSelector(companyIdSelector, areEqual);
+
+  const getContractForms = useCallback(() => {
+    if (companyId) {
+      dispatch(listCompanyContractForms(companyId));
+    }
+  }, [dispatch, companyId]);
+
+  useEffect(() => {
+    getContractForms();
+  }, [getContractForms]);
+
+  return (
+    <ContractForms
+      forms={contractForms}
+      fetching={fetching}
+      onAdd={console.log}
+      onDelete={console.log}
+      onClickRow={console.log}
+    />
+  );
+};
+
+const ContractFormsContainerMemo = memo(ContractFormsContainer, areEqual);
+
+export { ContractFormsContainerMemo as ContractFormsContainer };

src/shared/containers/Forms/FormTabs/ContractForms/index.ts

@@ -0,0 +1 @@
+export { ContractFormsContainer as ContractForms } from './ContractForms';

src/shared/containers/Forms/FormTabs/FormTabs/FormTabs.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import { FormTabs } from 'Components/Tabs';
+import { areEqual } from 'Utils/equalityChecks';
+import { ContractForms } from '../ContractForms';
+
+const FormTabsContainer = () => (
+  <>
+    <FormTabs id="form-tabs">
+      <ContractForms />
+    </FormTabs>
+  </>
+);
+
+const FormTabsContainerMemo = memo(FormTabsContainer, areEqual);
+
+export { FormTabsContainerMemo as FormTabs };

src/shared/containers/Forms/FormTabs/FormTabs/index.ts

@@ -0,0 +1 @@
+export { FormTabs } from './FormTabs';

src/shared/containers/Forms/FormTabs/index.ts

@@ -0,0 +1,2 @@
+export { FormTabs } from './FormTabs';
+export { ContractForms } from './ContractForms';

src/shared/containers/Forms/Forms.tsx

@@ -0,0 +1,9 @@
+import React, { memo } from 'react';
+import { areEqual } from 'Utils/equalityChecks';
+import { FormTabs } from './FormTabs';
+
+const FormsContainer = () => <FormTabs />;
+
+const FormsContainerMemo = memo(FormsContainer, areEqual);
+
+export { FormsContainerMemo as FormsContainer };

src/shared/containers/Forms/Models/FormsModel/FormModel.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+export type FormTemplate = {
+  company_id: number;
+  name: string;
+  replacement_tags: string;
+  template: string;
+  has_signature: boolean;
+  status: string;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  id: number;
+};
+
+export type FormTemplateResponse = {
+  data: FormTemplate[];
+};

src/shared/containers/Forms/Models/FormsModel/index.ts

@@ -0,0 +1 @@
+export type { FormTemplate, FormTemplateResponse } from './FormModel';

src/shared/containers/Forms/Models/index.ts

@@ -0,0 +1 @@
+export type { FormTemplate, FormTemplateResponse } from './FormsModel';

src/shared/containers/Forms/actions.ts

@@ -0,0 +1,33 @@
+import { handleApiRequest } from 'Utils/handleApiRequest';
+import { Api } from 'Utils/api';
+import { FormTemplateResponse } from 'Containers/Forms/Models';
+
+export const CONTRACT_FORMS = 'CONTRACT_FORMS';
+export const FETCHING_CONTRACT_FORMS = 'FETCHING_CONTRACT_FORMS';
+
+interface FormsActionTypes {
+  CONTRACT_FORMS: FormTemplateResponse;
+  FETCHING_CONTRACT_FORMS: boolean;
+}
+
+interface MessageAction {
+  type: keyof FormsActionTypes;
+  payload: any;
+}
+
+export type SetFormsActionTypes = MessageAction;
+
+// Thunk to fetch contract forms for a company
+export const listCompanyContractForms = (companyId: number) => async (dispatch: any) => {
+  const response = await handleApiRequest(
+    dispatch,
+    Api.get(`companies/${companyId}/contract-forms`),
+    '',
+    FETCHING_CONTRACT_FORMS
+  );
+
+  dispatch({
+    type: CONTRACT_FORMS,
+    payload: response,
+  });
+};

src/shared/containers/Forms/index.ts

@@ -0,0 +1 @@
+export { FormsContainer as Forms } from './Forms';

src/shared/containers/Forms/reducer.ts

@@ -0,0 +1,25 @@
+import { CONTRACT_FORMS, FETCHING_CONTRACT_FORMS, SetFormsActionTypes } from './actions';
+
+const initialState = {
+  data: [],
+  fetchingContractForms: false,
+};
+
+export const formsReducer = (state = initialState, action: SetFormsActionTypes) => {
+  switch (action.type) {
+    case CONTRACT_FORMS: {
+      return {
+        ...state,
+        data: action.payload,
+      };
+    }
+    case FETCHING_CONTRACT_FORMS: {
+      return {
+        ...state,
+        fetchingContractForms: action.payload,
+      };
+    }
+    default:
+      return state;
+  }
+};

src/shared/containers/Forms/selectors.ts

@@ -0,0 +1,4 @@
+// Contract Forms selectors
+export const contractFormsSelector = ({ forms }: any) => forms?.data || [];
+export const fetchingContractFormsSelector = ({ forms }: any) => forms?.fetchingContractForms || false;
+export { firstCompanyIdSelector as companyIdSelector } from '../Projects/selectors';

src/shared/utils/navItems.ts

@@ -11,4 +11,10 @@ export const navItems = [
     path: '/people',
     icon: 'people',
   },
+  {
+    id: 4,
+    title: 'Forms',
+    path: '/form',
+    icon: 'projects',
+  },
 ];

src/store/combinedReducers.ts

@@ -55,6 +55,7 @@ import { lossDataReducer } from 'Containers/ProjectData/LossData/reducer';
 import { propertyDataReducer } from 'Containers/ProjectData/PropertyData/reducer';
 import { reportsReducer } from 'Containers/ReportsAndDocuments';
 import { rocketDryReducer } from 'Containers/RocketDry/reducer';
+import { formsReducer } from 'Containers/Forms/reducer';
 
 // Combine them
 export default combineReducers({
@@ -113,4 +114,5 @@ export default combineReducers({
   propertyData: propertyDataReducer,
   reports: reportsReducer,
   rocketDry: rocketDryReducer,
+  forms: formsReducer,
 });