Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx

@@ -0,0 +1,80 @@
+import { OpportunityPicker } from '@/companies/components/OpportunityPicker';
+import { useCreateOpportunity } from '@/object-record/record-board/hooks/internal/useCreateOpportunity';
+import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
+import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { PageHotkeyScope } from '@/types/PageHotkeyScope';
+import { IconPlus } from '@/ui/display/icon/index';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { IconButton } from '@/ui/input/button/components/IconButton';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { logError } from '~/utils/logError';
+
+export const PipelineAddButton = () => {
+  const { enqueueSnackBar } = useSnackBar();
+
+  const { closeDropdown, toggleDropdown } = useDropdown({
+    dropdownScopeId: 'add-pipeline-progress',
+  });
+
+  const createOpportunity = useCreateOpportunity();
+
+  const handleCompanySelected = (
+    selectedCompany: EntityForSelect | null,
+    selectedPipelineStepId: string | null,
+  ) => {
+    if (!selectedCompany?.id) {
+      enqueueSnackBar(
+        'There was a problem with the company selection, please retry.',
+        { variant: 'error' },
+      );
+
+      logError('There was a problem with the company selection, please retry.');
+      return;
+    }
+
+    if (!selectedPipelineStepId) {
+      enqueueSnackBar(
+        'There was a problem with the pipeline stage selection, please retry.',
+        { variant: 'error' },
+      );
+
+      logError('There was a problem with the pipeline step selection.');
+      return;
+    }
+    closeDropdown();
+    createOpportunity(selectedCompany.id, selectedPipelineStepId);
+  };
+
+  return (
+    <DropdownScope dropdownScopeId="add-pipeline-progress">
+      <Dropdown
+        clickableComponent={
+          <IconButton
+            Icon={IconPlus}
+            size="medium"
+            dataTestId="add-company-progress-button"
+            accent="default"
+            variant="secondary"
+            onClick={toggleDropdown}
+          />
+        }
+        dropdownComponents={
+          <OpportunityPicker
+            companyId={null}
+            onSubmit={handleCompanySelected}
+            onCancel={closeDropdown}
+          />
+        }
+        hotkey={{
+          key: 'c',
+          scope: PageHotkeyScope.OpportunitiesPage,
+        }}
+        dropdownHotkeyScope={{
+          scope: RelationPickerHotkeyScope.RelationPicker,
+        }}
+      />
+    </DropdownScope>
+  );
+};

packages/twenty-front/src/modules/pipeline/hooks/usePipelineSteps.ts

@@ -0,0 +1,54 @@
+import { useRecoilCallback } from 'recoil';
+
+import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
+import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { BoardColumnDefinition } from '@/object-record/record-board/types/BoardColumnDefinition';
+import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
+import { PipelineStep } from '@/pipeline/types/PipelineStep';
+
+export const usePipelineSteps = () => {
+  const { createOneRecord: createOnePipelineStep } =
+    useCreateOneRecord<PipelineStep>({
+      objectNameSingular: 'pipelineStep',
+    });
+
+  const { deleteOneRecord: deleteOnePipelineStep } =
+    useDeleteOneRecord<PipelineStep>({
+      objectNameSingular: 'pipelineStep',
+    });
+
+  const handlePipelineStepAdd = useRecoilCallback(
+    ({ snapshot }) =>
+      async (boardColumn: BoardColumnDefinition) => {
+        const currentPipeline = await snapshot.getPromise(currentPipelineState);
+        if (!currentPipeline?.id) return;
+
+        return createOnePipelineStep?.({
+          variables: {
+            data: {
+              color: boardColumn.colorCode ?? 'gray',
+              id: boardColumn.id,
+              position: boardColumn.position,
+              name: boardColumn.title,
+              pipeline: { connect: { id: currentPipeline.id } },
+              type: 'ongoing',
+            },
+          },
+        });
+      },
+    [createOnePipelineStep],
+  );
+
+  const handlePipelineStepDelete = useRecoilCallback(
+    ({ snapshot }) =>
+      async (boardColumnId: string) => {
+        const currentPipeline = await snapshot.getPromise(currentPipelineState);
+        if (!currentPipeline?.id) return;
+
+        return deleteOnePipelineStep?.(boardColumnId);
+      },
+    [deleteOnePipelineStep],
+  );
+
+  return { handlePipelineStepAdd, handlePipelineStepDelete };
+};

packages/twenty-front/src/modules/pipeline/states/currentPipelineState.ts

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { undefined } from 'zod';
+
+export const currentPipelineState = atom<any | undefined>({
+  key: 'currentPipelineState',
+  default: undefined,
+});

packages/twenty-front/src/modules/pipeline/states/currentPipelineStepsState.ts

@@ -0,0 +1,8 @@
+import { atom } from 'recoil';
+
+import { PipelineStep } from '@/pipeline/types/PipelineStep';
+
+export const currentPipelineStepsState = atom<PipelineStep[]>({
+  key: 'currentPipelineStepsState',
+  default: [],
+});

packages/twenty-front/src/modules/pipeline/types/Opportunity.ts

@@ -0,0 +1,17 @@
+import { Person } from '@/people/types/Person';
+import { PipelineStep } from '@/pipeline/types/PipelineStep';
+
+export type Opportunity = {
+  [key: string]: any;
+  id: string;
+  amount: {
+    amountMicros: number;
+    currencyCode: string;
+  };
+  closeDate: Date;
+  probability: number;
+  pipelineStepId: string;
+  pipelineStep: PipelineStep;
+  pointOfContactId: string;
+  pointOfContact: Pick<Person, 'id' | 'name' | 'avatarUrl'>;
+};

packages/twenty-front/src/modules/pipeline/types/PipelineStep.ts

@@ -0,0 +1,6 @@
+export type PipelineStep = {
+  id: string;
+  name: string;
+  color: string;
+  position: number;
+};