TP-52648 | Switch component added (#767)

* TP-52648 | Switch component added

* TP-52648 | fix

src/components/Switch/Switch.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './index.module.scss'; // Import the Sass file
+import { v4 as uuidv4 } from 'uuid';
+
+interface ISwitch extends React.InputHTMLAttributes<HTMLInputElement> {
+  id?: string;
+  checked?: boolean;
+  headerText?: string;
+}
+
+const Switch: React.FC<ISwitch> = ({ id = uuidv4(), checked, headerText, ...restProps }) => {
+  return (
+    <div className={styles.switchContainer}>
+      <input
+        type="checkbox"
+        id={id}
+        className={styles.switchInput}
+        checked={checked}
+        {...restProps}
+      />
+      <label htmlFor={id} className={styles.switchLabel}>
+        <div className={styles.switchInner}></div>
+      </label>
+      {headerText ? (
+        <label htmlFor={id} className={styles.headerText}>
+          {headerText}
+        </label>
+      ) : null}
+    </div>
+  );
+};
+
+export default Switch;

src/components/Switch/index.module.scss

@@ -0,0 +1,50 @@
+$switch-size: 13px;
+$switch-duration: 0.2s;
+$switch-padding: 3;
+
+.switchContainer {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.switchInput {
+  display: none;
+}
+
+.switchLabel {
+  display: inline-block;
+  width: $switch-size * 2;
+  height: $switch-size;
+  background-color: var(--greyscale-light);
+  border-radius: $switch-size;
+  position: relative;
+  cursor: pointer;
+  padding: $switch-padding;
+}
+
+.switchInner {
+  width: $switch-size;
+  height: $switch-size;
+  background-color: var(--bg-primary);
+  border-radius: $switch-size;
+  position: absolute;
+  top: $switch-padding;
+  left: $switch-padding;
+  box-shadow: var(--navi-switch-knob-box-shadow);
+  transition: transform $switch-duration;
+}
+
+.switchInput:checked + .switchLabel {
+  background-color: var(--blue-base);
+}
+
+.switchInput:checked + .switchLabel .switchInner {
+  transform: translateX($switch-size);
+}
+
+.headerText {
+  font-size: 13px;
+  padding-left: 8px;
+  cursor: pointer;
+}

src/pages/CaseDetails/components/CommunicationHistory/CallInteractions.tsx

@@ -13,7 +13,6 @@ import { createKey } from 'src/utils/CaseDetail.utils';
 import { isObjectEmpty } from 'src/utils/commonUtils';
 import { createQueryParams, readQueryParams } from 'src/utils/QueryParamsHelper';
 import { fetchCallInteractions } from '../../actions/interactionsActions';
-import Switch from '@navi/web-ui/lib/primitives/Switch/Switch';
 import {
   CALL_INTERACTIONS,
   CALL_INTERACTIONS_TYPE,
@@ -51,6 +50,7 @@ import { setInteractionRowDetailedView } from '../../reducers/caseDetailSlice';
 import { assignIndexToReallocationList } from 'src/pages/Reallocation/reducers/reallocationSlice';
 import Filter from '@cp/src/components/Filter';
 import DownloadableLetter from './DownloadableLetter';
+import Switch from '@cp/src/components/Switch/Switch';
 
 const AgTable = React.lazy(
   () => import(/* webpackChunkName: ['table'] */ '@navi/web-ui/lib/components/AgTable/AgTable')
@@ -350,10 +350,8 @@ const CallInteractions = () => {
               <Switch
                 checked={queryParams?.contactable === 'true'}
                 onChange={handleContactableSwitchChange}
-              ></Switch>
-              <Typography className={cx(styles.contactableText, 'ml-2')} as="span" variant="p4">
-                Only contactable
-              </Typography>
+                headerText="Only contactable"
+              />
             </GridRow>
           </div>
         </GridRow>

src/pages/CaseDetails/components/CommunicationHistory/SystemInteractions.tsx

@@ -1,7 +1,6 @@
 import Pagination from '@navi/web-ui/lib/components/Pagination/Pagination';
 import GridColumn from '@navi/web-ui/lib/layouts/Grid/GridColumn/GridColumn';
 import GridRow from '@navi/web-ui/lib/layouts/Grid/GridRow/GridRow';
-import Switch from '@navi/web-ui/lib/primitives/Switch/Switch';
 import Typography from '@navi/web-ui/lib/primitives/Typography/Typography';
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -43,6 +42,7 @@ import { addClickstreamEvent } from '../../../../service/clickStreamEventService
 import { CLICKSTREAM_EVENT_NAMES } from '../../../../service/clickStream.constant';
 import cx from 'classnames';
 import DownloadableLetter from './DownloadableLetter';
+import Switch from '@cp/src/components/Switch/Switch';
 
 const AgTable = React.lazy(
   () => import(/* webpackChunkName: ['table'] */ '@navi/web-ui/lib/components/AgTable/AgTable')
@@ -167,7 +167,9 @@ const SystemInteractions = (props: ISystemInteractionsProps) => {
 
   const updateQueryParamsAndNavigate = (params?: QueryParams, lastUsed?: string) => {
     const url = createQueryParams({
-      [systemInteractionsTypeParams]: { ...queryParams, ...params, lastUsed }
+      [systemInteractionsTypeParams]: { ...queryParams, ...params, lastUsed },
+      [PREVIOUS_LOAN_ACCOUNT_INTERACTIONS]: previousLoanAccountParams,
+      ...rest
     });
     navigate(url, {
       replace: true
@@ -255,10 +257,8 @@ const SystemInteractions = (props: ISystemInteractionsProps) => {
                 <Switch
                   checked={queryParams?.contactable === 'true'}
                   onChange={handleContactableSwitchChange}
-                ></Switch>
-                <Typography className={cx(styles.contactableText, 'ml-2')} as="span" variant="p4">
-                  Only contactable
-                </Typography>
+                  headerText="Only contactable"
+                />
               </GridRow>
             </GridColumn>
           ) : null}

src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx

@@ -1,7 +1,6 @@
 // import AgTable from '@navi/web-ui/lib/components/AgTable/AgTable';
 import Pagination from '@navi/web-ui/lib/components/Pagination/Pagination';
 import Tag from '@navi/web-ui/lib/primitives/Tag/Tag';
-import Switch from '@navi/web-ui/lib/primitives/Switch/Switch';
 import Typography from '@navi/web-ui/lib/primitives/Typography/Typography';
 import { ICellRendererParams } from 'ag-grid-community';
 import React, { useEffect } from 'react';
@@ -29,6 +28,7 @@ import { User } from 'src/reducers/commonSlice';
 import { overviewFeedbackStyles } from './utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2';
 import EllipsisText from '@cp/src/components/EllipsisText';
+import Switch from '@cp/src/components/Switch/Switch';
 import DateTime from '../DateTime';
 
 const AgTable = React.lazy(
@@ -177,16 +177,11 @@ const FeedbackHistory = () => {
         <Typography variant="h4" className={styles.header__text}>
           Communication History
         </Typography>
-        <div className={styles.header__switch} onClick={handleContactableSwitchChange}>
-          <Switch
-            checked={queryParams?.contactable === 'true'}
-            onClick={e => e.stopPropagation()}
-            // onChange={handleContactableSwitchChange}
-          />
-          <Typography as="span" variant="p4" className="ml-2">
-            Only contactable
-          </Typography>
-        </div>
+        <Switch
+          checked={queryParams?.contactable === 'true'}
+          onChange={handleContactableSwitchChange}
+          headerText="Only contactable"
+        />
       </div>
       <div className={styles.table}>
         <SuspenseLoader