From 1a600aee7796c28e575946b9c57404e594bdd50d Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Tue, 3 Sep 2024 16:02:36 +0530
Subject: [PATCH 1/3] feat: Added design for find & replace

---
 .../widget/Phases/Phase3/Phase3.tsx           | 33 +++++++++++---
 .../modals/FindReplace/FindReplaceModal.tsx   | 43 +++++++++++++++++++
 .../widget/modals/FindReplace/index.ts        |  1 +
 .../src/design-system/Select/Select.styles.ts | 28 +++++-------
 .../src/design-system/Select/Select.tsx       |  3 ++
 apps/widget/src/global.d.ts                   |  5 +++
 apps/widget/src/hooks/Phase3/usePhase3.tsx    |  8 ++++
 libs/shared/src/config/texts.config.ts        | 18 +++++++-
 8 files changed, 113 insertions(+), 26 deletions(-)
 create mode 100644 apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
 create mode 100644 apps/widget/src/components/widget/modals/FindReplace/index.ts

diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
index e00639067..4147c5492 100644
--- a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
+++ b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
@@ -1,4 +1,4 @@
-import { Badge, Flex, Stack } from '@mantine/core';
+import { Badge, Flex, Group, Stack } from '@mantine/core';
 import { useRef, useState, useEffect } from 'react';
 import HotTableClass from '@handsontable/react/hotTableClass';
 
@@ -16,6 +16,7 @@ import { Pagination } from '@ui/Pagination';
 import { LoadingOverlay } from '@ui/LoadingOverlay';
 import { SegmentedControl } from '@ui/SegmentedControl';
 import { ConfirmModal } from 'components/widget/modals/ConfirmModal';
+import { FindReplaceModal } from 'components/widget/modals/FindReplace';
 
 interface IPhase3Props {
   onNextClick: (uploadData: IUpload, importedData?: Record<string, any>[]) => void;
@@ -29,6 +30,7 @@ export function Phase3(props: IPhase3Props) {
   const {
     page,
     type,
+    columns,
     headings,
     columnDefs,
     totalPages,
@@ -49,10 +51,12 @@ export function Phase3(props: IPhase3Props) {
     isDoReviewLoading,
     isReviewDataLoading,
     selectedRowsCountRef,
+    showFindReplaceModal,
     showAllDataValidModal,
     isDeleteRecordLoading,
     isConfirmReviewLoading,
     showDeleteConfirmModal,
+    setShowFindReplaceModal,
     setShowAllDataValidModal,
     setShowDeleteConfirmModal,
   } = usePhase3({ onNext: onNextClick });
@@ -108,12 +112,19 @@ export function Phase3(props: IPhase3Props) {
               },
             ]}
           />
-          <Button color="red" disabled={!selectedRowsRef.current.size} onClick={() => setShowDeleteConfirmModal(true)}>
-            Delete
-            <Badge variant="light" ml="xs" color="red">
-              {numberFormatter(selectedRowsRef.current.size)}
-            </Badge>
-          </Button>
+          <Group spacing="xs">
+            <Button onClick={() => setShowFindReplaceModal(true)}>{texts.PHASE3.FIND_REPLACE}</Button>
+            <Button
+              color="red"
+              disabled={!selectedRowsRef.current.size}
+              onClick={() => setShowDeleteConfirmModal(true)}
+            >
+              Delete
+              <Badge variant="light" ml="xs" color="red">
+                {numberFormatter(selectedRowsRef.current.size)}
+              </Badge>
+            </Button>
+          </Group>
         </Flex>
         <Table
           ref={tableRef}
@@ -224,6 +235,14 @@ export function Phase3(props: IPhase3Props) {
         opened={!!showDeleteConfirmModal}
         subTitle={texts.DELETE_RECORDS_CONFIRMATION.DETAILS}
       />
+      <FindReplaceModal
+        texts={texts}
+        columns={columns}
+        opened={!!showFindReplaceModal}
+        onClose={() => setShowFindReplaceModal(false)}
+        cancelLabel={texts.COMMON.CANCEL}
+        replaceLabel={texts.PHASE3.REPLACE}
+      />
     </>
   );
 }
diff --git a/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
new file mode 100644
index 000000000..621271f1e
--- /dev/null
+++ b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
@@ -0,0 +1,43 @@
+import { WIDGET_TEXTS } from '@impler/shared';
+import { Checkbox, Flex, FocusTrap, Modal as MantineModal, Stack, TextInput } from '@mantine/core';
+
+import { Button } from '@ui/Button';
+import { Select } from '@ui/Select';
+
+interface IFindReplaceModalProps {
+  opened: boolean;
+  columns: IOption[];
+  cancelLabel: string;
+  onClose: () => void;
+  replaceLabel: string;
+  texts: typeof WIDGET_TEXTS;
+}
+
+export function FindReplaceModal(props: IFindReplaceModalProps) {
+  const { opened, onClose, replaceLabel, cancelLabel, columns, texts } = props;
+
+  return (
+    <MantineModal centered size="lg" padding="xl" opened={opened} onClose={onClose} title={texts.PHASE3.FIND_REPLACE}>
+      <FocusTrap active>
+        <Stack spacing="xs">
+          <TextInput
+            required
+            data-autofocus
+            label={texts.PHASE3.FIND_LABEL}
+            placeholder={texts.PHASE3.FIND_PLACEHOLDER}
+          />
+          <TextInput required label={texts.PHASE3.REPLACE_LABEL} placeholder={texts.PHASE3.REPLACE_PLACEHOLDER} />
+          <Select title={texts.PHASE3.ALL_COLUMNS_LABEL} defaultValue="" data={columns} />
+          <Checkbox label={texts.PHASE3.CASE_SENSITIVE_LABEL} />
+          <Checkbox label={texts.PHASE3.MATCH_ENTIRE_LABEL} />
+          <Flex direction="row" gap="xs" justify="flex-end">
+            <Button onClick={onClose} color="gray" variant="outline">
+              {cancelLabel}
+            </Button>
+            <Button>{replaceLabel}</Button>
+          </Flex>
+        </Stack>
+      </FocusTrap>
+    </MantineModal>
+  );
+}
diff --git a/apps/widget/src/components/widget/modals/FindReplace/index.ts b/apps/widget/src/components/widget/modals/FindReplace/index.ts
new file mode 100644
index 000000000..305c69ef4
--- /dev/null
+++ b/apps/widget/src/components/widget/modals/FindReplace/index.ts
@@ -0,0 +1 @@
+export * from './FindReplaceModal';
diff --git a/apps/widget/src/design-system/Select/Select.styles.ts b/apps/widget/src/design-system/Select/Select.styles.ts
index a698cabc3..d1c0b3356 100644
--- a/apps/widget/src/design-system/Select/Select.styles.ts
+++ b/apps/widget/src/design-system/Select/Select.styles.ts
@@ -1,27 +1,19 @@
-/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-import { colors } from '../../config/colors.config';
 import { createStyles, MantineTheme } from '@mantine/core';
 
-export const getLabelStyles = (theme: MantineTheme): React.CSSProperties => ({
-  fontWeight: 'bold',
-  color: colors.black,
-});
+export const getLabelStyles = (): React.CSSProperties => ({});
 
-export const getSelectStyles = (theme: MantineTheme): React.CSSProperties => ({
-  color: colors.darkDeem,
+export const getSelectStyles = (): React.CSSProperties => ({
   cursor: 'pointer',
 });
 
-export const getRootStyles = (theme: MantineTheme, width: string | number): React.CSSProperties => ({
+export const getRootStyles = (width: string | number): React.CSSProperties => ({
   width,
 });
 
-export default createStyles(
-  (theme: MantineTheme, { width }: { width: string | number }, getRef): Record<string, any> => {
-    return {
-      label: getLabelStyles(theme),
-      select: getSelectStyles(theme),
-      root: getRootStyles(theme, width),
-    };
-  }
-);
+export default createStyles((theme: MantineTheme, { width }: { width: string | number }): Record<string, any> => {
+  return {
+    label: getLabelStyles(),
+    select: getSelectStyles(),
+    root: getRootStyles(width),
+  };
+});
diff --git a/apps/widget/src/design-system/Select/Select.tsx b/apps/widget/src/design-system/Select/Select.tsx
index d37c24ffc..e345027f8 100644
--- a/apps/widget/src/design-system/Select/Select.tsx
+++ b/apps/widget/src/design-system/Select/Select.tsx
@@ -16,6 +16,7 @@ export interface ISelectProps {
   required?: boolean;
   width?: string | number;
   value?: string;
+  defaultValue?: string;
   withinPortal?: boolean;
   style?: CSSProperties;
   onChange?: (value: any) => void;
@@ -27,6 +28,7 @@ export const Select = React.forwardRef<HTMLInputElement, ISelectProps>((props: I
     placeholder,
     data,
     error,
+    defaultValue,
     required = true,
     width = '100%',
     onChange,
@@ -46,6 +48,7 @@ export const Select = React.forwardRef<HTMLInputElement, ISelectProps>((props: I
       style={style}
       error={error}
       label={title}
+      defaultValue={defaultValue}
       rightSection={<ChevronDown />}
       classNames={{
         label: classes.label,
diff --git a/apps/widget/src/global.d.ts b/apps/widget/src/global.d.ts
index 186ee05dd..ef5fa6b80 100644
--- a/apps/widget/src/global.d.ts
+++ b/apps/widget/src/global.d.ts
@@ -10,3 +10,8 @@ declare interface Window {
   _env_: any;
   amplitude?: any;
 }
+
+interface IOption {
+  label: string;
+  value: string;
+}
diff --git a/apps/widget/src/hooks/Phase3/usePhase3.tsx b/apps/widget/src/hooks/Phase3/usePhase3.tsx
index a4d8816c0..46c6e414f 100644
--- a/apps/widget/src/hooks/Phase3/usePhase3.tsx
+++ b/apps/widget/src/hooks/Phase3/usePhase3.tsx
@@ -36,6 +36,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
   const [page, setPage] = useState<number>(defaultPage);
   const [headings, setHeadings] = useState<string[]>([]);
   const selectedRowsRef = useRef<Set<number>>(new Set());
+  const [columns, setColumns] = useState<IOption[]>([]);
   const [frozenColumns, setFrozenColumns] = useState<number>(2);
   const selectedRowsCountRef = useRef<{ valid: Set<number>; invalid: Set<number> }>({
     valid: new Set(),
@@ -47,6 +48,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
   const [columnDefs, setColumnDefs] = useState<HotItemSchema[]>([]);
   const [totalPages, setTotalPages] = useState<number>(defaultPage);
   const [type, setType] = useState<ReviewDataTypesEnum>(ReviewDataTypesEnum.ALL);
+  const [showFindReplaceModal, setShowFindReplaceModal] = useState<boolean | undefined>(undefined);
   const [showAllDataValidModal, setShowAllDataValidModal] = useState<boolean | undefined>(undefined);
   const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState<boolean | undefined>(undefined);
 
@@ -56,6 +58,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     {
       onSuccess(data) {
         let updatedFrozenColumns = 2;
+        const dataColumns: IOption[] = [{ value: '', label: 'All columns' }];
         const newColumnDefs: HotItemSchema[] = [];
         const newHeadings: string[] = ['*', 'Sr. No.'];
         newColumnDefs.push({
@@ -77,6 +80,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
         data.forEach((column: ISchemaColumn) => {
           if (column.isFrozen) updatedFrozenColumns++;
           newHeadings.push(column.name);
+          dataColumns.push({ label: column.name, value: column.key });
 
           const columnItem: HotItemSchema = {
             className: 'htCenter',
@@ -123,6 +127,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
           }
           newColumnDefs.push(columnItem);
         });
+        setColumns(dataColumns);
         setHeadings(newHeadings);
         setColumnDefs(newColumnDefs);
         setFrozenColumns(updatedFrozenColumns);
@@ -285,6 +290,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
   return {
     page,
     type,
+    columns,
     headings,
     totalPages,
     columnDefs,
@@ -301,10 +307,12 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     isDoReviewLoading,
     isReviewDataLoading,
     selectedRowsCountRef,
+    showFindReplaceModal,
     showAllDataValidModal,
     isDeleteRecordLoading,
     isConfirmReviewLoading,
     showDeleteConfirmModal,
+    setShowFindReplaceModal,
     setShowAllDataValidModal,
     setShowDeleteConfirmModal,
     reviewData: reviewData || [],
diff --git a/libs/shared/src/config/texts.config.ts b/libs/shared/src/config/texts.config.ts
index 9e2c87dae..245408e7e 100644
--- a/libs/shared/src/config/texts.config.ts
+++ b/libs/shared/src/config/texts.config.ts
@@ -1,6 +1,7 @@
 export const WIDGET_TEXTS = {
   COMMON: {
     SORRY: 'Sorry!',
+    CANCEL: 'Cancel',
     CLOSE_WIDGET: 'Close',
     UPLOAD_AGAIN: 'Upload Again',
   },
@@ -58,14 +59,29 @@ export const WIDGET_TEXTS = {
     MAPPING_FIELD_PLACEHOLDER: 'Select Field',
   },
   PHASE3: {
+    COMPLETE: 'Complete',
     EXPORT_DATA: 'Export Data',
     RE_REVIEW_DATA: 'Re-Review Data',
-    COMPLETE: 'Complete',
     ALL_RECORDS_VALID_TITLE: ' All records are found valid!',
     ALL_RECORDS_VALID_DETAILS: 'All {total} row(s) found valid! Would you like to complete the Import?',
     LABEL_ALL_RECORDS: `All {records}`,
     LABEL_VALID_RECORDS: `Valid {records}`,
     LABEL_INVALID_RECORDS: `Invalid {records}`,
+
+    REPLACE: 'Replace',
+    FIND_REPLACE: 'Find and Replace',
+    ALL_COLUMNS_LABEL: 'All Columns',
+
+    FIND_LABEL: 'Find',
+    FIND_PLACEHOLDER: 'Empty Cell',
+
+    REPLACE_LABEL: 'Replace',
+    REPLACE_PLACEHOLDER: 'Empty Cell',
+
+    IN_COLUMN_LABEL: 'In Column',
+
+    CASE_SENSITIVE_LABEL: 'Case Sensitive',
+    MATCH_ENTIRE_LABEL: 'Match Entire Cell',
   },
   PHASE4: {
     TITLE: 'Bravo! {count} rows have been uploaded',

From 71b125acaa2200219f05fa78df69e0df466e7ba5 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Thu, 5 Sep 2024 10:32:31 +0530
Subject: [PATCH 2/3] feat: Added replace API

---
 apps/api/src/app/review/dtos/index.ts         |   1 +
 apps/api/src/app/review/dtos/replace.dto.ts   |  34 +++++
 apps/api/src/app/review/review.controller.ts  |  23 +++-
 apps/api/src/app/review/usecases/index.ts     |  14 +-
 .../usecases/replace/replace.command.ts       |   7 +
 .../usecases/replace/replace.usecase.ts       | 125 ++++++++++++++++++
 .../src/entities/Review/Review.interface.ts   |   8 ++
 7 files changed, 209 insertions(+), 3 deletions(-)
 create mode 100644 apps/api/src/app/review/dtos/replace.dto.ts
 create mode 100644 apps/api/src/app/review/usecases/replace/replace.command.ts
 create mode 100644 apps/api/src/app/review/usecases/replace/replace.usecase.ts

diff --git a/apps/api/src/app/review/dtos/index.ts b/apps/api/src/app/review/dtos/index.ts
index 854d28d0f..a9836f29c 100644
--- a/apps/api/src/app/review/dtos/index.ts
+++ b/apps/api/src/app/review/dtos/index.ts
@@ -1,2 +1,3 @@
 export * from './delete-records.dto';
 export * from './update-cell.dto';
+export * from './replace.dto';
diff --git a/apps/api/src/app/review/dtos/replace.dto.ts b/apps/api/src/app/review/dtos/replace.dto.ts
new file mode 100644
index 000000000..124995e10
--- /dev/null
+++ b/apps/api/src/app/review/dtos/replace.dto.ts
@@ -0,0 +1,34 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsDefined, IsOptional } from 'class-validator';
+
+export class ReplaceDto {
+  @ApiProperty({
+    description: 'Find value',
+  })
+  @IsOptional()
+  find: string;
+
+  @ApiProperty({
+    description: 'Replace value',
+  })
+  @IsOptional()
+  replace: string;
+
+  @ApiProperty({
+    description: 'Column name',
+  })
+  @IsDefined()
+  column: string;
+
+  @ApiProperty({
+    description: 'Case sensitive',
+  })
+  @IsOptional()
+  caseSensitive: boolean;
+
+  @ApiProperty({
+    description: 'Match entire cell',
+  })
+  @IsOptional()
+  matchEntireCell: boolean;
+}
diff --git a/apps/api/src/app/review/review.controller.ts b/apps/api/src/app/review/review.controller.ts
index 79a66e7a7..377af6394 100644
--- a/apps/api/src/app/review/review.controller.ts
+++ b/apps/api/src/app/review/review.controller.ts
@@ -6,9 +6,18 @@ import { JwtAuthGuard } from '@shared/framework/auth.gaurd';
 import { validateUploadStatus } from '@shared/helpers/upload.helpers';
 import { Defaults, ACCESS_KEY_NAME, UploadStatusEnum, ReviewDataTypesEnum } from '@impler/shared';
 
-import { DoReview, GetUpload, DoReReview, UpdateRecord, StartProcess, DeleteRecord, GetUploadData } from './usecases';
+import {
+  Replace,
+  DoReview,
+  GetUpload,
+  DoReReview,
+  UpdateRecord,
+  StartProcess,
+  DeleteRecord,
+  GetUploadData,
+} from './usecases';
 
-import { DeleteRecordsDto, UpdateCellDto } from './dtos';
+import { DeleteRecordsDto, UpdateCellDto, ReplaceDto } from './dtos';
 import { validateNotFound } from '@shared/helpers/common.helper';
 import { PaginationResponseDto } from '@shared/dtos/pagination-response.dto';
 import { ValidateMongoId } from '@shared/validations/valid-mongo-id.validation';
@@ -18,6 +27,7 @@ import { ValidateMongoId } from '@shared/validations/valid-mongo-id.validation';
 @ApiSecurity(ACCESS_KEY_NAME)
 export class ReviewController {
   constructor(
+    private replace: Replace,
     private doReview: DoReview,
     private getUpload: GetUpload,
     private doReReview: DoReReview,
@@ -135,4 +145,13 @@ export class ReviewController {
   ) {
     await this.deleteRecord.execute(_uploadId, indexes, valid, invalid);
   }
+
+  @Put(':uploadId/replace')
+  @UseGuards(JwtAuthGuard)
+  @ApiOperation({
+    summary: 'Replace review data for ongoing import',
+  })
+  async replaceReviewData(@Param('uploadId', ValidateMongoId) _uploadId: string, @Body() body: ReplaceDto) {
+    return await this.replace.execute(_uploadId, body);
+  }
 }
diff --git a/apps/api/src/app/review/usecases/index.ts b/apps/api/src/app/review/usecases/index.ts
index fcae5a801..d9b775659 100644
--- a/apps/api/src/app/review/usecases/index.ts
+++ b/apps/api/src/app/review/usecases/index.ts
@@ -1,4 +1,5 @@
 import { PaymentAPIService } from '@impler/services';
+import { Replace } from './replace/replace.usecase';
 import { DoReview } from './do-review/do-review.usecase';
 import { UpdateRecord } from './update-cell/update-cell.usecase';
 import { DeleteRecord } from './delete-record/delete-record.usecase';
@@ -8,6 +9,7 @@ import { GetUploadData } from './get-upload-data/get-upload-data.usecase';
 import { GetUpload } from '@shared/usecases/get-upload/get-upload.usecase';
 
 export const USE_CASES = [
+  Replace,
   DoReview,
   GetUpload,
   DoReReview,
@@ -18,4 +20,14 @@ export const USE_CASES = [
   PaymentAPIService,
 ];
 
-export { DoReview, GetUpload, DoReReview, DeleteRecord, UpdateRecord, StartProcess, GetUploadData, PaymentAPIService };
+export {
+  Replace,
+  DoReview,
+  GetUpload,
+  DoReReview,
+  DeleteRecord,
+  UpdateRecord,
+  StartProcess,
+  GetUploadData,
+  PaymentAPIService,
+};
diff --git a/apps/api/src/app/review/usecases/replace/replace.command.ts b/apps/api/src/app/review/usecases/replace/replace.command.ts
new file mode 100644
index 000000000..0b550c9e8
--- /dev/null
+++ b/apps/api/src/app/review/usecases/replace/replace.command.ts
@@ -0,0 +1,7 @@
+export class ReplaceCommand {
+  find?: string;
+  replace?: string;
+  column: string;
+  caseSensitive?: boolean;
+  matchEntireCell?: boolean;
+}
diff --git a/apps/api/src/app/review/usecases/replace/replace.usecase.ts b/apps/api/src/app/review/usecases/replace/replace.usecase.ts
new file mode 100644
index 000000000..befcf55de
--- /dev/null
+++ b/apps/api/src/app/review/usecases/replace/replace.usecase.ts
@@ -0,0 +1,125 @@
+import { Injectable } from '@nestjs/common';
+import { ReplaceCommand } from './replace.command';
+import { DalService, UploadRepository } from '@impler/dal';
+import { ColumnTypesEnum, ITemplateSchemaItem } from '@impler/shared';
+
+@Injectable()
+export class Replace {
+  constructor(
+    private dalService: DalService,
+    private uploadRepository: UploadRepository
+  ) {}
+
+  escapeRegExp(string: string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  isNumeric(value: string): boolean {
+    return !isNaN(parseFloat(value)) && isFinite(Number(value));
+  }
+
+  async execute(_uploadId: string, { column, caseSensitive, find, replace, matchEntireCell }: ReplaceCommand) {
+    const uploadInfo = await this.uploadRepository.findById(_uploadId);
+    const recordCollectionModal = this.dalService.getRecordCollection(_uploadId);
+    const numberColumnHeadings = new Set<string>();
+    const columns = JSON.parse(uploadInfo.customSchema);
+    (columns as ITemplateSchemaItem[]).forEach((columnItem) => {
+      if (columnItem.type === ColumnTypesEnum.NUMBER || columnItem.type === ColumnTypesEnum.DOUBLE)
+        numberColumnHeadings.add(columnItem.key);
+    });
+    if (find === '') matchEntireCell = true;
+
+    const updateStages = [];
+    const fieldsToProcess = column ? [column] : uploadInfo.headings;
+
+    fieldsToProcess.forEach((fieldName) => {
+      const path = `record.${fieldName}`;
+      const isNumberColumn = numberColumnHeadings.has(fieldName);
+
+      let formattedReplace: string | number = replace;
+      if (isNumberColumn && this.isNumeric(replace)) {
+        formattedReplace = parseFloat(replace);
+      }
+
+      let matchCondition;
+      let replaceOperation;
+
+      if (find === '') {
+        matchCondition = {
+          $or: [
+            { $eq: ['$' + path, ''] },
+            { $regexMatch: { input: { $toString: '$' + path }, regex: /^\s*$/ } },
+            { $eq: ['$' + path, null] },
+          ],
+        };
+        replaceOperation = { $literal: formattedReplace };
+      } else if (isNumberColumn) {
+        // For number columns, we'll use string operations and then convert back to number
+        const escapedFind = this.escapeRegExp(find);
+        matchCondition = {
+          $regexMatch: {
+            input: { $toString: '$' + path },
+            regex: escapedFind,
+            options: caseSensitive ? '' : 'i',
+          },
+        };
+        replaceOperation = {
+          $toDouble: {
+            $replaceAll: {
+              input: { $toString: '$' + path },
+              find: find,
+              replacement: replace,
+            },
+          },
+        };
+      } else {
+        const regex = new RegExp(
+          matchEntireCell ? `^${this.escapeRegExp(find)}$` : this.escapeRegExp(find),
+          caseSensitive ? '' : 'i'
+        );
+        matchCondition = { $regexMatch: { input: { $toString: '$' + path }, regex } };
+        replaceOperation = {
+          $replaceAll: {
+            input: { $toString: '$' + path },
+            find: find,
+            replacement: formattedReplace,
+          },
+        };
+      }
+
+      updateStages.push({
+        $set: {
+          [`record.${fieldName}`]: {
+            $cond: {
+              if: matchCondition,
+              then: replaceOperation,
+              else: `$record.${fieldName}`,
+            },
+          },
+        },
+      });
+
+      updateStages.push({
+        $set: {
+          [`updated.${fieldName}`]: {
+            $cond: {
+              if: { $ne: [`$record.${fieldName}`, `$_oldRecord.${fieldName}`] },
+              then: true,
+              else: { $ifNull: [`$updated.${fieldName}`, false] },
+            },
+          },
+        },
+      });
+    });
+
+    // Add a stage to store the original record state
+    updateStages.unshift({ $set: { _oldRecord: '$record' } });
+
+    // Add a final stage to remove the temporary _oldRecord field
+    updateStages.push({ $unset: '_oldRecord' });
+
+    const result = await recordCollectionModal.updateMany({}, updateStages, { multi: true });
+
+    return result;
+  }
+}
diff --git a/libs/shared/src/entities/Review/Review.interface.ts b/libs/shared/src/entities/Review/Review.interface.ts
index 8ea62dcd7..c46a26915 100644
--- a/libs/shared/src/entities/Review/Review.interface.ts
+++ b/libs/shared/src/entities/Review/Review.interface.ts
@@ -7,3 +7,11 @@ export interface IReviewData {
   totalRecords: number;
   data: IRecord[];
 }
+
+export interface IReplaceData {
+  find?: string;
+  replace?: string;
+  column: string;
+  caseSensitive?: boolean;
+  matchEntireCell?: boolean;
+}

From 533e79e7121430e812795865b01e973505369c2b Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Thu, 5 Sep 2024 10:35:37 +0530
Subject: [PATCH 3/3] feat: Finalized find & replace modal changes

---
 .../widget/Phases/Phase3/Phase3.tsx           |  6 +-
 .../modals/FindReplace/FindReplaceModal.tsx   | 83 ++++++++++++++-----
 .../src/design-system/Button/Button.tsx       |  3 +
 .../src/design-system/Select/Select.tsx       |  2 +-
 apps/widget/src/hooks/Phase1/usePhase1.ts     |  4 +-
 apps/widget/src/hooks/Phase3/usePhase3.tsx    | 15 +++-
 libs/shared/src/config/texts.config.ts        |  3 -
 packages/client/src/api/api.service.ts        |  5 ++
 8 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
index 4147c5492..105b44b2a 100644
--- a/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
+++ b/apps/widget/src/components/widget/Phases/Phase3/Phase3.tsx
@@ -36,6 +36,7 @@ export function Phase3(props: IPhase3Props) {
     totalPages,
     reviewData,
     allChecked,
+    replaceData,
     totalRecords,
     onTypeChange,
     reReviewData,
@@ -50,6 +51,7 @@ export function Phase3(props: IPhase3Props) {
     selectedRowsRef,
     isDoReviewLoading,
     isReviewDataLoading,
+    isReplaceDataLoading,
     selectedRowsCountRef,
     showFindReplaceModal,
     showAllDataValidModal,
@@ -238,10 +240,12 @@ export function Phase3(props: IPhase3Props) {
       <FindReplaceModal
         texts={texts}
         columns={columns}
+        onReplace={replaceData}
         opened={!!showFindReplaceModal}
-        onClose={() => setShowFindReplaceModal(false)}
         cancelLabel={texts.COMMON.CANCEL}
         replaceLabel={texts.PHASE3.REPLACE}
+        isReplaceLoading={isReplaceDataLoading}
+        onClose={() => setShowFindReplaceModal(false)}
       />
     </>
   );
diff --git a/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
index 621271f1e..33cf416b2 100644
--- a/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
+++ b/apps/widget/src/components/widget/modals/FindReplace/FindReplaceModal.tsx
@@ -1,4 +1,6 @@
-import { WIDGET_TEXTS } from '@impler/shared';
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { IReplaceData, WIDGET_TEXTS } from '@impler/shared';
 import { Checkbox, Flex, FocusTrap, Modal as MantineModal, Stack, TextInput } from '@mantine/core';
 
 import { Button } from '@ui/Button';
@@ -10,33 +12,72 @@ interface IFindReplaceModalProps {
   cancelLabel: string;
   onClose: () => void;
   replaceLabel: string;
+  isReplaceLoading: boolean;
   texts: typeof WIDGET_TEXTS;
+  onReplace: (data: IReplaceData) => void;
 }
 
 export function FindReplaceModal(props: IFindReplaceModalProps) {
-  const { opened, onClose, replaceLabel, cancelLabel, columns, texts } = props;
+  const { opened, onClose, replaceLabel, onReplace, cancelLabel, columns, texts, isReplaceLoading } = props;
+  const { register, handleSubmit, control, reset } = useForm<IReplaceData>({
+    defaultValues: {
+      column: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!opened)
+      reset({
+        column: '',
+      });
+  }, [opened]);
 
   return (
-    <MantineModal centered size="lg" padding="xl" opened={opened} onClose={onClose} title={texts.PHASE3.FIND_REPLACE}>
+    <MantineModal
+      centered
+      size="lg"
+      padding="xl"
+      opened={opened}
+      onClose={onClose}
+      keepMounted={false}
+      title={texts.PHASE3.FIND_REPLACE}
+    >
       <FocusTrap active>
-        <Stack spacing="xs">
-          <TextInput
-            required
-            data-autofocus
-            label={texts.PHASE3.FIND_LABEL}
-            placeholder={texts.PHASE3.FIND_PLACEHOLDER}
-          />
-          <TextInput required label={texts.PHASE3.REPLACE_LABEL} placeholder={texts.PHASE3.REPLACE_PLACEHOLDER} />
-          <Select title={texts.PHASE3.ALL_COLUMNS_LABEL} defaultValue="" data={columns} />
-          <Checkbox label={texts.PHASE3.CASE_SENSITIVE_LABEL} />
-          <Checkbox label={texts.PHASE3.MATCH_ENTIRE_LABEL} />
-          <Flex direction="row" gap="xs" justify="flex-end">
-            <Button onClick={onClose} color="gray" variant="outline">
-              {cancelLabel}
-            </Button>
-            <Button>{replaceLabel}</Button>
-          </Flex>
-        </Stack>
+        <form onSubmit={handleSubmit(onReplace)}>
+          <Stack spacing="xs">
+            <TextInput
+              data-autofocus
+              {...register('find')}
+              label={texts.PHASE3.FIND_LABEL}
+              placeholder={texts.PHASE3.FIND_PLACEHOLDER}
+            />
+            <TextInput {...register('replace')} label={texts.PHASE3.REPLACE_LABEL} />
+            <Controller
+              name="column"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  withinPortal
+                  data={columns}
+                  ref={field.ref}
+                  value={field.value}
+                  onChange={field.onChange}
+                  title={texts.PHASE3.ALL_COLUMNS_LABEL}
+                />
+              )}
+            />
+            <Checkbox label={texts.PHASE3.CASE_SENSITIVE_LABEL} {...register('caseSensitive')} />
+            <Checkbox label={texts.PHASE3.MATCH_ENTIRE_LABEL} {...register('matchEntireCell')} />
+            <Flex direction="row" gap="xs" justify="flex-end">
+              <Button onClick={onClose} color="gray" variant="outline">
+                {cancelLabel}
+              </Button>
+              <Button loading={isReplaceLoading} type="submit">
+                {replaceLabel}
+              </Button>
+            </Flex>
+          </Stack>
+        </form>
       </FocusTrap>
     </MantineModal>
   );
diff --git a/apps/widget/src/design-system/Button/Button.tsx b/apps/widget/src/design-system/Button/Button.tsx
index 6eb170092..7ba8dd01d 100644
--- a/apps/widget/src/design-system/Button/Button.tsx
+++ b/apps/widget/src/design-system/Button/Button.tsx
@@ -8,6 +8,7 @@ interface IButtonProps {
   loading?: boolean;
   onClick?: () => void;
   size?: MantineSize;
+  type?: 'submit' | 'reset' | 'button';
   color?: 'blue' | 'red' | 'gray' | string;
   leftIcon?: ReactNode;
   fullWidth?: boolean;
@@ -19,6 +20,7 @@ export function Button({
   children,
   loading,
   onClick,
+  type = 'button',
   size = 'md',
   color,
   leftIcon,
@@ -34,6 +36,7 @@ export function Button({
       loading={loading}
       onClick={onClick}
       size={size}
+      type={type}
       color={color}
       classNames={classes}
       fullWidth={fullWidth}
diff --git a/apps/widget/src/design-system/Select/Select.tsx b/apps/widget/src/design-system/Select/Select.tsx
index e345027f8..8c48c64d5 100644
--- a/apps/widget/src/design-system/Select/Select.tsx
+++ b/apps/widget/src/design-system/Select/Select.tsx
@@ -19,7 +19,7 @@ export interface ISelectProps {
   defaultValue?: string;
   withinPortal?: boolean;
   style?: CSSProperties;
-  onChange?: (value: any) => void;
+  onChange?: (value: string | null) => void;
 }
 
 export const Select = React.forwardRef<HTMLInputElement, ISelectProps>((props: ISelectProps, ref) => {
diff --git a/apps/widget/src/hooks/Phase1/usePhase1.ts b/apps/widget/src/hooks/Phase1/usePhase1.ts
index ef4353eea..bee5789ab 100644
--- a/apps/widget/src/hooks/Phase1/usePhase1.ts
+++ b/apps/widget/src/hooks/Phase1/usePhase1.ts
@@ -84,9 +84,9 @@ export function usePhase1({ goNext, texts }: IUsePhase1Props) {
 
     return undefined;
   };
-  const onTemplateChange = (newTemplateId: string) => {
+  const onTemplateChange = (newTemplateId: string | null) => {
     const foundTemplate = templates?.find((templateItem) => templateItem._id === newTemplateId);
-    if (foundTemplate) {
+    if (foundTemplate && newTemplateId) {
       setTemplateInfo(foundTemplate);
       setValue('templateId', newTemplateId);
       trigger('templateId');
diff --git a/apps/widget/src/hooks/Phase3/usePhase3.tsx b/apps/widget/src/hooks/Phase3/usePhase3.tsx
index 46c6e414f..7269db4a2 100644
--- a/apps/widget/src/hooks/Phase3/usePhase3.tsx
+++ b/apps/widget/src/hooks/Phase3/usePhase3.tsx
@@ -17,6 +17,7 @@ import {
   ReviewDataTypesEnum,
   numberFormatter,
   ColumnDelimiterEnum,
+  IReplaceData,
 } from '@impler/shared';
 import { SelectEditor } from './SelectEditor';
 import { MultiSelectEditor } from './MultiSelectEditor';
@@ -189,7 +190,17 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
       },
     }
   );
-
+  const { mutate: replaceData, isLoading: isReplaceDataLoading } = useMutation<
+    unknown,
+    IErrorObject,
+    IReplaceData,
+    [string]
+  >(['replace'], (data) => api.replace(uploadInfo._id, data), {
+    onSuccess: () => {
+      refetchReviewData([page, type]);
+      setShowFindReplaceModal(false);
+    },
+  });
   const { refetch: reReviewData, isFetching: isDoReviewLoading } = useQuery<
     unknown,
     IErrorObject,
@@ -295,6 +306,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     totalPages,
     columnDefs,
     allChecked,
+    replaceData,
     reReviewData,
     updateRecord,
     onPageChange,
@@ -306,6 +318,7 @@ export function usePhase3({ onNext }: IUsePhase3Props) {
     selectedRowsRef,
     isDoReviewLoading,
     isReviewDataLoading,
+    isReplaceDataLoading,
     selectedRowsCountRef,
     showFindReplaceModal,
     showAllDataValidModal,
diff --git a/libs/shared/src/config/texts.config.ts b/libs/shared/src/config/texts.config.ts
index 245408e7e..548b3040d 100644
--- a/libs/shared/src/config/texts.config.ts
+++ b/libs/shared/src/config/texts.config.ts
@@ -76,10 +76,7 @@ export const WIDGET_TEXTS = {
     FIND_PLACEHOLDER: 'Empty Cell',
 
     REPLACE_LABEL: 'Replace',
-    REPLACE_PLACEHOLDER: 'Empty Cell',
-
     IN_COLUMN_LABEL: 'In Column',
-
     CASE_SENSITIVE_LABEL: 'Case Sensitive',
     MATCH_ENTIRE_LABEL: 'Match Entire Cell',
   },
diff --git a/packages/client/src/api/api.service.ts b/packages/client/src/api/api.service.ts
index 1228a1751..5775f35d7 100644
--- a/packages/client/src/api/api.service.ts
+++ b/packages/client/src/api/api.service.ts
@@ -1,6 +1,7 @@
 import {
   IUpload,
   IMapping,
+  IReplaceData,
   IMappingFinalize,
   IReviewData,
   ITemplate,
@@ -195,6 +196,10 @@ export class ApiService {
     });
   }
 
+  async replace(uploadId: string, data: IReplaceData) {
+    return this.httpClient.put(`/review/${uploadId}/replace`, data);
+  }
+
   async getRssXmlMappingHeading(data: {
     templateId: string;
     url: string;