Chore: New standard fields on Companies (#1276)

* New standard fields on Companies

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* New standard fields on Companies

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add requested changes

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Make some fields hidden by default

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add minor refactors

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

---------

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

front/src/modules/companies/constants/companyViewFields.tsx

@@ -1,8 +1,10 @@
 import {
+  ViewFieldBooleanMetadata,
   ViewFieldChipMetadata,
   ViewFieldDateMetadata,
   ViewFieldDefinition,
   ViewFieldMetadata,
+  ViewFieldMoneyMetadata,
   ViewFieldNumberMetadata,
   ViewFieldRelationMetadata,
   ViewFieldTextMetadata,
@@ -10,10 +12,13 @@ import {
 } from '@/ui/editable-field/types/ViewField';
 import {
   IconBrandLinkedin,
+  IconBrandX,
   IconBuildingSkyscraper,
   IconCalendarEvent,
   IconLink,
   IconMap,
+  IconMoneybag,
+  IconTarget,
   IconUserCircle,
   IconUsers,
 } from '@/ui/icon/index';
@@ -111,4 +116,40 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
     },
     isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldTextMetadata>,
+  {
+    id: 'idealCustomerProfile',
+    columnLabel: 'ICP',
+    columnIcon: <IconTarget />,
+    columnSize: 150,
+    columnOrder: 8,
+    metadata: {
+      type: 'boolean',
+      fieldName: 'idealCustomerProfile',
+    },
+    isVisible: false,
+  } satisfies ViewFieldDefinition<ViewFieldBooleanMetadata>,
+  {
+    id: 'annualRecurringRevenue',
+    columnLabel: 'ARR',
+    columnIcon: <IconMoneybag />,
+    columnSize: 150,
+    columnOrder: 8,
+    metadata: {
+      type: 'moneyAmount',
+      fieldName: 'annualRecurringRevenue',
+    },
+  } satisfies ViewFieldDefinition<ViewFieldMoneyMetadata>,
+  {
+    id: 'xUrl',
+    columnLabel: 'Twitter',
+    columnIcon: <IconBrandX />,
+    columnSize: 150,
+    columnOrder: 8,
+    metadata: {
+      type: 'url',
+      fieldName: 'xUrl',
+      placeHolder: 'X',
+    },
+    isVisible: false,
+  } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
 ];

front/src/modules/companies/graphql/fragments/companyFieldsFragment.ts

@@ -13,6 +13,9 @@ export const COMPANY_FIELDS_FRAGMENT = gql`
     domainName
     employees
     linkedinUrl
+    xUrl
+    annualRecurringRevenue
+    idealCustomerProfile
     id
     name
   }

front/src/modules/companies/graphql/queries/getCompanies.ts

@@ -12,6 +12,9 @@ export const GET_COMPANIES = gql`
       createdAt
       address
       linkedinUrl
+      xUrl
+      annualRecurringRevenue
+      idealCustomerProfile
       employees
       _activityCount
       accountOwner {

front/src/modules/companies/graphql/queries/getCompany.ts

@@ -9,6 +9,9 @@ export const GET_COMPANY = gql`
       createdAt
       address
       linkedinUrl
+      xUrl
+      annualRecurringRevenue
+      idealCustomerProfile
       employees
       _activityCount
       accountOwner {

front/src/modules/companies/table/components/companies-mock-data.ts

@@ -10,6 +10,9 @@ type MockedCompany = Pick<
   | 'address'
   | 'employees'
   | 'linkedinUrl'
+  | 'xUrl'
+  | 'annualRecurringRevenue'
+  | 'idealCustomerProfile'
   | '_activityCount'
 > & {
   accountOwner: Pick<
@@ -30,6 +33,9 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     domainName: 'airbnb.com',
     name: 'Airbnb',
     linkedinUrl: 'https://www.linkedin.com/company/airbnb/',
+    xUrl: 'https://twitter.com/airbnb',
+    annualRecurringRevenue: 500000,
+    idealCustomerProfile: true,
     createdAt: '2023-04-26T10:08:54.724515+00:00',
     address: 'San Francisco, CA',
     employees: 5000,
@@ -50,6 +56,9 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     domainName: 'qonto.com',
     name: 'Qonto',
     linkedinUrl: 'https://www.linkedin.com/company/qonto/',
+    xUrl: 'https://twitter.com/qonto',
+    annualRecurringRevenue: 500000,
+    idealCustomerProfile: false,
     createdAt: '2023-04-26T10:12:42.33625+00:00',
     address: 'Paris, France',
     employees: 800,
@@ -62,6 +71,9 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     domainName: 'stripe.com',
     name: 'Stripe',
     linkedinUrl: 'https://www.linkedin.com/company/stripe/',
+    xUrl: 'https://twitter.com/stripe',
+    annualRecurringRevenue: 5000000,
+    idealCustomerProfile: false,
     createdAt: '2023-04-26T10:10:32.530184+00:00',
     address: 'San Francisco, CA',
     employees: 8000,
@@ -73,6 +85,9 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
     domainName: 'figma.com',
     linkedinUrl: 'https://www.linkedin.com/company/figma/',
+    xUrl: 'https://twitter.com/figma',
+    annualRecurringRevenue: 50000,
+    idealCustomerProfile: true,
     name: 'Figma',
     createdAt: '2023-03-21T06:30:25.39474+00:00',
     address: 'San Francisco, CA',
@@ -85,6 +100,9 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
     domainName: 'notion.com',
     linkedinUrl: 'https://www.linkedin.com/company/notion/',
+    xUrl: 'https://twitter.com/notion',
+    annualRecurringRevenue: 500000,
+    idealCustomerProfile: false,
     name: 'Notion',
     createdAt: '2023-04-26T10:13:29.712485+00:00',
     address: 'San Francisco, CA',

front/src/modules/ui/editable-field/types/FieldMetadata.ts

@@ -9,10 +9,12 @@ export type FieldType =
   | 'double-text-chip'
   | 'double-text'
   | 'number'
+  | 'boolean'
   | 'date'
   | 'phone'
   | 'url'
-  | 'probability';
+  | 'probability'
+  | 'moneyAmount';
 
 export type FieldTextMetadata = {
   placeHolder: string;

front/src/modules/ui/editable-field/types/ViewField.ts

@@ -11,7 +11,9 @@ export type ViewFieldType =
   | 'date'
   | 'phone'
   | 'url'
-  | 'probability';
+  | 'probability'
+  | 'boolean'
+  | 'moneyAmount';
 
 export type ViewFieldTextMetadata = {
   type: 'text';
@@ -42,6 +44,16 @@ export type ViewFieldNumberMetadata = {
   isPositive?: boolean;
 };
 
+export type ViewFieldMoneyMetadata = {
+  type: 'moneyAmount';
+  fieldName: string;
+};
+
+export type ViewFieldBooleanMetadata = {
+  type: 'boolean';
+  fieldName: string;
+};
+
 export type ViewFieldRelationMetadata = {
   type: 'relation';
   relationType: Entity;
@@ -89,8 +101,10 @@ export type ViewFieldMetadata = { type: ViewFieldType } & (
   | ViewFieldPhoneMetadata
   | ViewFieldURLMetadata
   | ViewFieldNumberMetadata
+  | ViewFieldBooleanMetadata
   | ViewFieldDateMetadata
   | ViewFieldProbabilityMetadata
+  | ViewFieldMoneyMetadata
 );
 
 export type ViewFieldDefinition<T extends ViewFieldMetadata | unknown> = {
@@ -109,6 +123,8 @@ export type ViewFieldTextValue = string;
 export type ViewFieldChipValue = string;
 export type ViewFieldDateValue = string;
 export type ViewFieldPhoneValue = string;
+export type ViewFieldBooleanValue = boolean;
+export type ViewFieldMoneyValue = number;
 export type ViewFieldURLValue = string;
 export type ViewFieldNumberValue = number | null;
 export type ViewFieldProbabilityValue = number;

front/src/modules/ui/editable-field/types/guards/isViewFieldBoolean.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldBooleanMetadata,
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+} from '../ViewField';
+
+export function isViewFieldBoolean(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldBooleanMetadata> {
+  return field.metadata.type === 'boolean';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldBooleanValue.ts

@@ -0,0 +1,7 @@
+import { ViewFieldBooleanValue } from '../ViewField';
+
+export function isViewFieldBooleanValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldBooleanValue {
+  return typeof fieldValue === 'boolean';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldMoney.ts

@@ -0,0 +1,11 @@
+import {
+  ViewFieldDefinition,
+  ViewFieldMetadata,
+  ViewFieldMoneyMetadata,
+} from '../ViewField';
+
+export function isViewFieldMoney(
+  field: ViewFieldDefinition<ViewFieldMetadata>,
+): field is ViewFieldDefinition<ViewFieldMoneyMetadata> {
+  return field.metadata.type === 'moneyAmount';
+}

front/src/modules/ui/editable-field/types/guards/isViewFieldMoneyValue.ts

@@ -0,0 +1,7 @@
+import { ViewFieldMoneyValue } from '../ViewField';
+
+export function isViewFieldMoneyValue(
+  fieldValue: unknown,
+): fieldValue is ViewFieldMoneyValue {
+  return typeof fieldValue === 'number';
+}

front/src/modules/ui/icon/index.ts

@@ -45,6 +45,7 @@ export {
   IconMail,
   IconMap,
   IconMinus,
+  IconMoneybag,
   IconNotes,
   IconPencil,
   IconPhone,
@@ -53,6 +54,7 @@ export {
   IconSearch,
   IconSettings,
   IconTag,
+  IconTarget,
   IconTargetArrow,
   IconTimelineEvent,
   IconTrash,

front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx

@@ -1,6 +1,8 @@
+import { isViewFieldBoolean } from '@/ui/editable-field/types/guards/isViewFieldBoolean';
 import { isViewFieldDate } from '@/ui/editable-field/types/guards/isViewFieldDate';
 import { isViewFieldDoubleText } from '@/ui/editable-field/types/guards/isViewFieldDoubleText';
 import { isViewFieldDoubleTextChip } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChip';
+import { isViewFieldMoney } from '@/ui/editable-field/types/guards/isViewFieldMoney';
 import { isViewFieldNumber } from '@/ui/editable-field/types/guards/isViewFieldNumber';
 import { isViewFieldPhone } from '@/ui/editable-field/types/guards/isViewFieldPhone';
 import { isViewFieldRelation } from '@/ui/editable-field/types/guards/isViewFieldRelation';
@@ -12,10 +14,12 @@ import {
 } from '@/ui/editable-field/types/ViewField';
 
 import { isViewFieldChip } from '../../../editable-field/types/guards/isViewFieldChip';
+import { GenericEditableBooleanCell } from '../type/components/GenericEditableBooleanCell';
 import { GenericEditableChipCell } from '../type/components/GenericEditableChipCell';
 import { GenericEditableDateCell } from '../type/components/GenericEditableDateCell';
 import { GenericEditableDoubleTextCell } from '../type/components/GenericEditableDoubleTextCell';
 import { GenericEditableDoubleTextChipCell } from '../type/components/GenericEditableDoubleTextChipCell';
+import { GenericEditableMoneyCell } from '../type/components/GenericEditableMoneyCell';
 import { GenericEditableNumberCell } from '../type/components/GenericEditableNumberCell';
 import { GenericEditablePhoneCell } from '../type/components/GenericEditablePhoneCell';
 import { GenericEditableRelationCell } from '../type/components/GenericEditableRelationCell';
@@ -43,8 +47,12 @@ export function GenericEditableCell({ viewField: fieldDefinition }: OwnProps) {
     return <GenericEditableDateCell viewField={fieldDefinition} />;
   } else if (isViewFieldNumber(fieldDefinition)) {
     return <GenericEditableNumberCell viewField={fieldDefinition} />;
+  } else if (isViewFieldBoolean(fieldDefinition)) {
+    return <GenericEditableBooleanCell viewField={fieldDefinition} />;
   } else if (isViewFieldChip(fieldDefinition)) {
     return <GenericEditableChipCell viewField={fieldDefinition} />;
+  } else if (isViewFieldMoney(fieldDefinition)) {
+    return <GenericEditableMoneyCell viewField={fieldDefinition} />;
   } else {
     console.warn(
       `Unknown field metadata type: ${fieldDefinition.metadata.type} in GenericEditableCell`,

front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { useRecoilState } from 'recoil';
+
+import {
+  ViewFieldBooleanMetadata,
+  ViewFieldDefinition,
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
+
+import { EditableCellDisplayContainer } from '../../components/EditableCellContainer';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldBooleanMetadata>;
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+const StyledCellBaseContainer = styled.div`
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(8)};
+  position: relative;
+  user-select: none;
+  width: 100%;
+`;
+
+const StyledCellBooleancontainer = styled.div`
+  margin-left: 5px;
+`;
+
+function capitalizeFirstLetter(value: string) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+export function GenericEditableBooleanCell({ viewField }: OwnProps) {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [fieldValue, setFieldValue] = useRecoilState<boolean>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateEntityField();
+
+  function handleClick() {
+    const newValue = !fieldValue;
+    try {
+      setFieldValue(newValue);
+
+      if (currentRowEntityId && updateField) {
+        updateField(currentRowEntityId, viewField, newValue);
+      }
+    } catch (error) {
+      console.warn(
+        `In GenericEditableBooleanCellEditMode, Invalid value: ${newValue}, ${error}`,
+      );
+    }
+  }
+
+  return (
+    <StyledCellBaseContainer>
+      <EditableCellDisplayContainer onClick={handleClick}>
+        {fieldValue ? <IconCheck /> : <IconX />}
+        <StyledCellBooleancontainer>
+          {fieldValue !== undefined &&
+            capitalizeFirstLetter(fieldValue.toString())}
+        </StyledCellBooleancontainer>
+      </EditableCellDisplayContainer>
+    </StyledCellBaseContainer>
+  );
+}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCell.tsx

@@ -0,0 +1,47 @@
+import { useRecoilValue } from 'recoil';
+
+import {
+  ViewFieldDefinition,
+  ViewFieldMoneyMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
+
+import { GenericEditableMoneyCellEditMode } from './GenericEditableMoneyCellEditMode';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldMoneyMetadata>;
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+function formatNumber(value: number) {
+  // Formats the value to a string and add commas to it ex: 50,000 | 500,000
+  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+export function GenericEditableMoneyCell({
+  viewField,
+  editModeHorizontalAlign,
+}: OwnProps) {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const fieldValue = useRecoilValue<number>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  return (
+    <EditableCell
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeContent={
+        <GenericEditableMoneyCellEditMode viewField={viewField} />
+      }
+      nonEditModeContent={
+        <>{fieldValue ? `$${formatNumber(fieldValue)}` : ''}</>
+      }
+    ></EditableCell>
+  );
+}

front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx

@@ -0,0 +1,58 @@
+import { useRecoilState } from 'recoil';
+
+import {
+  ViewFieldDefinition,
+  ViewFieldMoneyMetadata,
+} from '@/ui/editable-field/types/ViewField';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
+import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';
+
+import { TextCellEdit } from './TextCellEdit';
+
+type OwnProps = {
+  viewField: ViewFieldDefinition<ViewFieldMoneyMetadata>;
+};
+
+export function GenericEditableMoneyCellEditMode({ viewField }: OwnProps) {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [fieldValue, setFieldValue] = useRecoilState<string>(
+    tableEntityFieldFamilySelector({
+      entityId: currentRowEntityId ?? '',
+      fieldName: viewField.metadata.fieldName,
+    }),
+  );
+
+  const updateField = useUpdateEntityField();
+
+  function handleSubmit(newText: string) {
+    if (newText === fieldValue) return;
+
+    try {
+      const numberValue = parseInt(newText);
+
+      if (isNaN(numberValue)) {
+        throw new Error('Not a number');
+      }
+
+      if (numberValue > 2000000000) {
+        throw new Error('Number too big');
+      }
+
+      setFieldValue(numberValue.toString());
+
+      if (currentRowEntityId && updateField) {
+        updateField(currentRowEntityId, viewField, numberValue);
+      }
+    } catch (error) {
+      console.warn(
+        `In GenericEditableMoneyCellEditMode, Invalid number: ${newText}, ${error}`,
+      );
+    }
+  }
+
+  return (
+    <TextCellEdit autoFocus value={fieldValue ?? ''} onSubmit={handleSubmit} />
+  );
+}

front/src/modules/ui/table/hooks/useUpdateEntityField.ts

@@ -1,5 +1,7 @@
 import { useContext } from 'react';
 
+import { isViewFieldBoolean } from '@/ui/editable-field/types/guards/isViewFieldBoolean';
+import { isViewFieldBooleanValue } from '@/ui/editable-field/types/guards/isViewFieldBooleanValue';
 import { isViewFieldChip } from '@/ui/editable-field/types/guards/isViewFieldChip';
 import { isViewFieldDate } from '@/ui/editable-field/types/guards/isViewFieldDate';
 import { isViewFieldDateValue } from '@/ui/editable-field/types/guards/isViewFieldDateValue';
@@ -7,6 +9,8 @@ import { isViewFieldDoubleText } from '@/ui/editable-field/types/guards/isViewFi
 import { isViewFieldDoubleTextChip } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChip';
 import { isViewFieldDoubleTextChipValue } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextChipValue';
 import { isViewFieldDoubleTextValue } from '@/ui/editable-field/types/guards/isViewFieldDoubleTextValue';
+import { isViewFieldMoney } from '@/ui/editable-field/types/guards/isViewFieldMoney';
+import { isViewFieldMoneyValue } from '@/ui/editable-field/types/guards/isViewFieldMoneyValue';
 import { isViewFieldNumber } from '@/ui/editable-field/types/guards/isViewFieldNumber';
 import { isViewFieldNumberValue } from '@/ui/editable-field/types/guards/isViewFieldNumberValue';
 import { isViewFieldPhone } from '@/ui/editable-field/types/guards/isViewFieldPhone';
@@ -202,6 +206,32 @@ export function useUpdateEntityField() {
     ) {
       const newContent = newFieldValueUnknown;
 
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Boolean
+    } else if (
+      isViewFieldBoolean(viewField) &&
+      isViewFieldBooleanValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
+      updateEntity({
+        variables: {
+          where: { id: currentEntityId },
+          data: { [viewField.metadata.fieldName]: newContent },
+        },
+      });
+      // Money
+    } else if (
+      isViewFieldMoney(viewField) &&
+      isViewFieldMoneyValue(newFieldValueUnknown)
+    ) {
+      const newContent = newFieldValueUnknown;
+
       updateEntity({
         variables: {
           where: { id: currentEntityId },