OUT-46 Integrate APIs

src/app/views/Sidebar.tsx

@@ -5,31 +5,32 @@ import { Box, Stack, Typography } from '@mui/material';
 import { Switch } from '@/components/switch/Switch';
 import { useAppState } from '@/hooks/useAppState';
 import { arraysHaveSameElements } from '@/utils/arrayHaveSameElements';
+import { ProfileLinks } from '@/types/settings';
 
 export const Sidebar = () => {
   const appState = useAppState();
 
   const handleMutableSettings = (selected: boolean, type: string) => {
     if (!selected) {
-      if (type === 'profile_settings') {
+      if (type === ProfileLinks.ProfileSetting) {
         const newSettings = appState?.mutableSettings.filter((el: string) => el !== type);
         appState?.setAppState((prev) => ({ ...prev, mutableSettings: newSettings }));
       }
-      if (type === 'payment_method') {
+      if (type === ProfileLinks.PaymentMethod) {
         const newSettings = appState?.mutableSettings.filter((el: string) => el !== type);
         appState?.setAppState((prev) => ({ ...prev, mutableSettings: newSettings }));
       }
     }
     if (selected) {
-      if (type === 'profile_settings') {
+      if (type === ProfileLinks.ProfileSetting) {
         appState?.setAppState((prev) => ({
           ...prev,
           mutableSettings: appState?.mutableSettings.includes(type)
             ? appState?.mutableSettings
             : [...appState?.mutableSettings, type],
         }));
       }
-      if (type === 'payment_method') {
+      if (type === ProfileLinks.PaymentMethod) {
         appState?.setAppState((prev) => ({
           ...prev,
           mutableSettings: appState?.mutableSettings.includes(type)
@@ -81,19 +82,19 @@ export const Sidebar = () => {
         <Stack direction="row" justifyContent="space-between" p="12px 0px 6px 0px">
           <Typography variant="bodyMd">General profile settings</Typography>
           <Switch
-            selected={appState?.mutableSettings.includes('profile_settings')}
+            selected={appState?.mutableSettings.includes(ProfileLinks.ProfileSetting)}
             getValue={(selected) => {
-              handleMutableSettings(selected, 'profile_settings');
+              handleMutableSettings(selected, ProfileLinks.ProfileSetting);
             }}
           />
         </Stack>
 
         <Stack direction="row" justifyContent="space-between" p="6px 0px">
           <Typography variant="bodyMd">Manage payment method</Typography>
           <Switch
-            selected={appState?.mutableSettings.includes('payment_method')}
+            selected={appState?.mutableSettings.includes(ProfileLinks.PaymentMethod)}
             getValue={(selected) => {
-              handleMutableSettings(selected, 'payment_method');
+              handleMutableSettings(selected, ProfileLinks.PaymentMethod);
             }}
           />
         </Stack>

src/components/customFieldAccessTable/CustomFieldAccessTable.tsx

@@ -4,6 +4,7 @@ import { Box, Stack, Typography, Divider } from '@mui/material';
 import { StyledCheckBox } from '../styled/StyledCheckbox';
 import { useAppState } from '@/hooks/useAppState';
 import { iconsTypeMap } from './iconsTypeMap';
+import { Permissions } from '@/types/settings';
 
 export const CustomFieldAccessTable = () => {
   const appState = useAppState();
@@ -12,32 +13,36 @@ export const CustomFieldAccessTable = () => {
     let customField = appState?.mutableCustomFieldAccess.find((el: any) => el.id === id);
 
     if (checked) {
-      if (permission === 'VIEW') {
+      if (permission === Permissions.View) {
         customField = {
           ...customField,
-          permission: customField.permission.includes('VIEW') ? customField.permission : [...customField.permission, 'VIEW'],
+          permission: customField.permission.includes(Permissions.View)
+            ? customField.permission
+            : [...customField.permission, Permissions.View],
         };
       }
-      if (permission === 'EDIT') {
+      if (permission === Permissions.Edit) {
         customField = {
           ...customField,
-          permission: customField.permission.includes('EDIT') ? customField.permission : [...customField.permission, 'EDIT'],
+          permission: customField.permission.includes(Permissions.Edit)
+            ? customField.permission
+            : [...customField.permission, Permissions.Edit],
         };
       }
     }
 
     if (!checked) {
-      if (permission === 'VIEW') {
+      if (permission === Permissions.View) {
         customField = {
           ...customField,
-          permission: customField.permission.includes('VIEW') ? [] : customField.permission,
+          permission: customField.permission.includes(Permissions.View) ? [] : customField.permission,
         };
       }
-      if (permission === 'EDIT') {
+      if (permission === Permissions.Edit) {
         customField = {
           ...customField,
-          permission: customField.permission.includes('EDIT')
-            ? customField.permission.filter((item: string) => item !== 'EDIT')
+          permission: customField.permission.includes(Permissions.Edit)
+            ? customField.permission.filter((item: string) => item !== Permissions.Edit)
             : customField.permission,
         };
       }
@@ -74,16 +79,16 @@ export const CustomFieldAccessTable = () => {
             </Box>
             <Stack direction="row" columnGap={12} alignItems="center">
               <StyledCheckBox
-                checked={field.permission.includes('VIEW')}
+                checked={field.permission.includes(Permissions.View)}
                 handleChange={(checked) => {
-                  updateCustomFieldAccess(checked, 'VIEW', field.id);
+                  updateCustomFieldAccess(checked, Permissions.View, field.id);
                 }}
               />
-              {field.permission.includes('VIEW') ? (
+              {field.permission.includes(Permissions.View) ? (
                 <StyledCheckBox
-                  checked={field.permission.includes('EDIT')}
+                  checked={field.permission.includes(Permissions.Edit)}
                   handleChange={(checked) => {
-                    updateCustomFieldAccess(checked, 'EDIT', field.id);
+                    updateCustomFieldAccess(checked, Permissions.Edit, field.id);
                   }}
                 />
               ) : (

src/types/settings.ts

@@ -1,10 +1,15 @@
 import { z } from 'zod';
 
-enum ProfileLinks {
+export enum ProfileLinks {
   ProfileSetting = 'profile_settings',
   PaymentMethod = 'payment_method',
 }
 
+export enum Permissions {
+  View = 'VIEW',
+  Edit = 'EDIT',
+}
+
 export const SettingRequestSchema = z.object({
   token: z.string(),
   portalId: z.string(),