@homefile/components-v2 1.0.15 → 1.1.0

package/dist/mocks/myProfile/index.d.ts

@@ -1 +1,2 @@
+export * from './Permissions.mock';
 export * from './Receipts.mock';

package/dist/mocks/myProfile/index.js

@@ -1 +1,2 @@
+export * from './Permissions.mock';
 export * from './Receipts.mock';

package/dist/stories/myProfile/MyProfilePanel.stories.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { t } from 'i18next';
 import { Box, Divider, DrawerBody } from '@chakra-ui/react';
-import { ActiveSubscription, CancelAccount, CreditCardContainer, CreditCardError, EmailPermissions, MonthlyCharge, MyProfileBody, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, PaymentReceipts, RightPanel, TwoFactorSetting, UserDetails, } from '../../components';
+import { ActiveSubscription, CancelAccount, CreditCardContainer, CreditCardError, MonthlyCharge, MyProfileBody, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, PaymentReceipts, RightPanel, RolePermissionsTab, TwoFactorSetting, UserDetails, } from '../../components';
 import { action } from '@storybook/addon-actions';
-import { menuMock, receiptsMock } from '../../mocks';
+import { featuresSelectedMock, menuMock, receiptsMock } from '../../mocks';
 import { useState } from 'react';
 export default {
     title: 'Components/MyProfile',
@@ -15,5 +14,5 @@ export const MyProfilePanelComponent = () => {
     const handleCloseNewCreditCardPanel = () => setIsNewCreditCardPanelOpen(false);
     const handleOpenNewCreditCardPanel = () => setIsNewCreditCardPanelOpen(true);
     const handleError = () => setHasError(true);
-    return (_jsxs(_Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: action('onCloseClick'), children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: action('onCloseClick') }), _jsx(MyProfileBody, { isLoading: false, account: _jsxs(_Fragment, { children: [_jsx(ActiveSubscription, { nextCharge: "2024-12-01", subscriptionPrice: 36, totalStorage: 2, totalUsed: 1, availableStorage: 200, state: 'trial' }), _jsx(Divider, { width: "calc(100% - 26px)", mx: "auto" }), _jsx(MonthlyCharge, { additionalPrice: 36, monthlyCharge: 36, monthDate: "03/01/2023", nextCharge: "01/12/2024", taxPercentage: 8.5, taxValue: 3.06, subtotal: 36.0 }), _jsx(CancelAccount, { label: "Contact Homefile", onClick: action('onCancelAccountClick') })] }), details: _jsxs(_Fragment, { children: [_jsx(UserDetails, { email: "gary.edmunds@gmail.com", firstName: "Gary", lastName: "Edmunds", onSave: action('onSaveClick'), bg: "#4CC35A" }), _jsx(TwoFactorSetting, { email: "gary.edmunds@gmail.com", sms: "2032409108", onChange: action('on2FAChangeClick'), onSave: action('onSaveClick'), defaultValue: "email", twoFactor: 'active' })] }), email: _jsx(EmailPermissions, { initialPermissions: ['Promotions', 'Homefile News'], emailPermissions: t('myProfile.email.permissions').split(', '), onSubmit: (data) => action('onDeleteCard')(data) }), payment: _jsxs(Box, { bg: "lightBlue.2", h: "inherit", children: [_jsx(CreditCardContainer, { cardNumber: "1234 5678 9012 3456", brand: "visa", onAddCard: action('onAddCard'), onDeleteCard: handleOpenNewCreditCardPanel, onSubmit: (data) => action('onDeleteCard')(data), cardHolder: "Gary Edmunds", cvv: "123", expirationMonth: "12", expirationYear: "2024" }), _jsx(PaymentReceipts, { receipts: receiptsMock, menuItems: menuMock })] }) })] }) }), _jsx(RightPanel, { isOpen: isNewCreditCardPanelOpen, onClose: handleCloseNewCreditCardPanel, children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: handleCloseNewCreditCardPanel }), _jsxs(DrawerBody, { p: "0", children: [_jsx(NewCreditCardHeader, { onClick: handleCloseNewCreditCardPanel }), hasError && _jsx(CreditCardError, {}), _jsx(NewCreditCard, { hasError: hasError, onSubmit: handleError })] })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(RightPanel, { isOpen: true, onClose: action('onCloseClick'), children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: action('onCloseClick') }), _jsx(MyProfileBody, { isLoading: false, account: _jsxs(_Fragment, { children: [_jsx(ActiveSubscription, { nextCharge: "2024-12-01", subscriptionPrice: 36, totalStorage: 2, totalUsed: 1, availableStorage: 200, state: 'trial' }), _jsx(Divider, { width: "calc(100% - 26px)", mx: "auto" }), _jsx(MonthlyCharge, { additionalPrice: 36, monthlyCharge: 36, monthDate: "03/01/2023", nextCharge: "01/12/2024", taxPercentage: 8.5, taxValue: 3.06, subtotal: 36.0 }), _jsx(CancelAccount, { label: "Contact Homefile", onClick: action('onCancelAccountClick') })] }), details: _jsxs(_Fragment, { children: [_jsx(UserDetails, { email: "gary.edmunds@gmail.com", firstName: "Gary", lastName: "Edmunds", onSave: action('onSaveClick'), bg: "#4CC35A" }), _jsx(TwoFactorSetting, { email: "gary.edmunds@gmail.com", sms: "2032409108", onChange: action('on2FAChangeClick'), onSave: action('onSaveClick'), defaultValue: "email", twoFactor: 'active' })] }), payment: _jsxs(Box, { bg: "lightBlue.2", h: "inherit", children: [_jsx(CreditCardContainer, { cardNumber: "1234 5678 9012 3456", brand: "visa", onAddCard: action('onAddCard'), onDeleteCard: handleOpenNewCreditCardPanel, onSubmit: (data) => action('onDeleteCard')(data), cardHolder: "Gary Edmunds", cvv: "123", expirationMonth: "12", expirationYear: "2024" }), _jsx(PaymentReceipts, { receipts: receiptsMock, menuItems: menuMock })] }), rolePermissions: _jsx(RolePermissionsTab, { selected: featuresSelectedMock, onSelect: action('onSelect') }) })] }) }), _jsx(RightPanel, { isOpen: isNewCreditCardPanelOpen, onClose: handleCloseNewCreditCardPanel, children: _jsxs(MyProfilePanel, { children: [_jsx(MyProfileHeader, { onClose: handleCloseNewCreditCardPanel }), _jsxs(DrawerBody, { p: "0", children: [_jsx(NewCreditCardHeader, { onClick: handleCloseNewCreditCardPanel }), hasError && _jsx(CreditCardError, {}), _jsx(NewCreditCard, { hasError: hasError, onSubmit: handleError })] })] }) })] }));
 };

package/dist/stories/myProfile/permissions/RolePermissionsTab.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { RolePermissionsTabI } from '../../../interfaces';
+declare const _default: Meta<RolePermissionsTabI>;
+export default _default;
+export declare const RolePermissionsTabComponent: (args: RolePermissionsTabI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/myProfile/permissions/RolePermissionsTab.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { action } from '@storybook/addon-actions';
+import { RolePermissionsTab } from '../../../components';
+import { featuresSelectedMock } from '../../../mocks';
+export default {
+    title: 'Components/MyProfile',
+    component: RolePermissionsTab,
+    args: {
+        selected: featuresSelectedMock,
+        onSelect: action('onSelect'),
+    },
+};
+export const RolePermissionsTabComponent = (args) => {
+    return (_jsx(Box, { w: ['full', '500px'], bg: "white", children: _jsx(RolePermissionsTab, Object.assign({}, args)) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/locales/en/index.json

@@ -448,6 +448,13 @@
     "title": "My Homes"
   },
   "myProfile": {
+    "actions": {
+      "add": "Add",
+      "can": "Can",
+      "edit": "Edit",
+      "delete": "Delete",
+      "view": "View"
+    },
     "account": {
       "cancel": "Cancel Account",
       "cancelInfo": "To cancel your Homefile account, please contact Homefile below.",
@@ -477,6 +484,20 @@
       "receiptsTitle": "Receipts",
       "toDelete": "To delete a card, you must first add a new card."
     },
+    "permissions": {
+      "contributor": {
+        "description": "Can view, add, and edit the information when you share a home.",
+        "title": "Contributor Permissions"
+      },
+      "manager": {
+        "description": "Can view, add, and edit all home information within a home.",
+        "title": "Manager Permissions"
+      },
+      "member": {
+        "description": "Can only view information when you share a home.",
+        "title": "Member Permissions"
+      }
+    },
     "placeholders": {
       "cardHolder": "Name on card",
       "cardNumber": "Card number",
@@ -491,7 +512,8 @@
       "tab2": "Subscription",
       "tab3": "Payment",
       "tab4": "Email",
-      "tab5": "Sharing"
+      "tab5": "Sharing",
+      "tab6": "Role Permissions"
     }
   },
   "newPassword": {

package/src/components/headers/TabsHeader.tsx

@@ -23,6 +23,7 @@ export const TabsHeader = ({
       onChange={onChange}
       index={tabIndex}
       defaultIndex={defaultIndex}
+      h="100%"
     >
       <Box bg="lightBlue.2">
         <Flex justify="space-between">

package/src/components/myProfile/MyProfileBody.tsx

@@ -10,6 +10,7 @@ export const MyProfileBody = ({
   email,
   isLoading,
   payment,
+  rolePermissions,
 }: MyProfileBodyI) => {
   const tabs = [
     {
@@ -28,7 +29,11 @@ export const MyProfileBody = ({
       label: t('myProfile.tabs.tab4'),
       component: email,
     },
-  ]
+    {
+      label: t('myProfile.tabs.tab6'),
+      component: rolePermissions,
+    },
+  ].filter((tab) => tab.component)
   return (
     <DrawerBody p="0">
       {isLoading ? (

package/src/components/myProfile/index.ts

@@ -1,6 +1,7 @@
 export * from './email'
 export * from './details'
 export * from './payment'
+export * from './permissions'
 export * from './AddCreditCard'
 export * from './BillingAddress'
 export * from './CancelAccount'

package/src/components/myProfile/permissions/ActionCheckbox.tsx

@@ -0,0 +1,22 @@
+import { Stack, Checkbox } from '@chakra-ui/react'
+import { ActionLabel } from '@/components'
+import { ActionCheckboxI } from '@/interfaces'
+
+export const ActionCheckbox = ({
+  action,
+  isChecked,
+  isDisabled,
+  label,
+  onChange,
+}: ActionCheckboxI) => {
+  return (
+    <Stack spacing="1" align="center" w="33px">
+      {label && <ActionLabel label={label} />}
+      <Checkbox
+        isChecked={isChecked}
+        onChange={() => onChange(action)}
+        isDisabled={isDisabled}
+      />
+    </Stack>
+  )
+}

package/src/components/myProfile/permissions/ActionLabel.tsx

@@ -0,0 +1,18 @@
+import { Text, TextProps } from '@chakra-ui/react'
+
+export interface ActionLabelI extends TextProps {
+  label: string
+}
+
+export const ActionLabel = ({ label, ...props }: ActionLabelI) => {
+  return (
+    <Text
+      fontSize="10px"
+      fontWeight="semibold"
+      textTransform="uppercase"
+      {...props}
+    >
+      {label}
+    </Text>
+  )
+}

package/src/components/myProfile/permissions/PermissionsBanner.tsx

@@ -0,0 +1,35 @@
+import { t } from 'i18next'
+import { RoleType, homeRoles } from '@/helpers'
+import { Stack, Text } from '@chakra-ui/react'
+
+export interface PermissionsBannerI {
+  role: RoleType
+}
+
+export const PermissionsBanner = ({ role }: PermissionsBannerI) => {
+  const bgColor = homeRoles[role].bg
+  const { title, description } = textsByRole[role as keyof typeof textsByRole]
+  return (
+    <Stack spacing="1" bg={bgColor} px="base" py="6">
+      <Text fontWeight="semibold" color="neutral.white">
+        {title}
+      </Text>
+      <Text color="neutral.white">{description}</Text>
+    </Stack>
+  )
+}
+
+const textsByRole = {
+  member: {
+    title: t('myProfile.permissions.member.title'),
+    description: t('myProfile.permissions.member.description'),
+  },
+  contributor: {
+    title: t('myProfile.permissions.contributor.title'),
+    description: t('myProfile.permissions.contributor.description'),
+  },
+  manager: {
+    title: t('myProfile.permissions.manager.title'),
+    description: t('myProfile.permissions.manager.description'),
+  },
+}

package/src/components/myProfile/permissions/RoleButton.tsx

@@ -0,0 +1,39 @@
+import { homeRoles } from '@/helpers'
+import { RoleButtonI } from '@/interfaces'
+import { Center, Text } from '@chakra-ui/react'
+
+export const RoleButton = ({
+  role,
+  onClick,
+  isSelected,
+  showBorder,
+}: RoleButtonI) => {
+  const bgColor = homeRoles[role].bg
+  const borderColor = showBorder ? 'lightBlue.2' : 'transparent'
+  return (
+    <Center
+      as="button"
+      w="62px"
+      bg={isSelected ? 'lightGreen.1' : 'neutral.white'}
+      transition="all 0.4s"
+      _hover={{
+        bg: 'lightGreen.1',
+        cursor: 'pointer',
+      }}
+      onClick={onClick}
+    >
+      <Center py="base" w="40px" borderY="1px solid" borderColor={borderColor}>
+        <Center bg={bgColor} borderRadius="4px" h="26px" w="26px">
+          <Text
+            fontWeight="semibold"
+            color={'neutral.white'}
+            fontSize="md"
+            textTransform="uppercase"
+          >
+            {role.charAt(0).toUpperCase()}
+          </Text>
+        </Center>
+      </Center>
+    </Center>
+  )
+}

package/src/components/myProfile/permissions/RolePermissionsTab.tsx

@@ -0,0 +1,111 @@
+import { t } from 'i18next'
+import { Box, Center, Flex, Stack, Text } from '@chakra-ui/react'
+import {
+  RoleButton,
+  PermissionsBanner,
+  ActionLabel,
+  ActionCheckbox,
+} from '@/components'
+
+import { rolePermissions } from '@/helpers'
+import { RolePermissionsTabI } from '@/interfaces'
+import { useRolePermissionsTab } from '@/hooks'
+
+export const RolePermissionsTab = ({
+  selected,
+  onSelect,
+}: RolePermissionsTabI) => {
+  const {
+    actions,
+    callback,
+    selectedRole,
+    selectedActions,
+    handleRoleChange,
+    handleFeatureChange,
+    handleActionChange,
+  } = useRolePermissionsTab({ selected, onSelect })
+
+  return (
+    <Flex h="100%">
+      <Box bg="neutral.white">
+        <RoleButton
+          role="member"
+          isSelected={selectedRole === 'member'}
+          onClick={() => handleRoleChange('member')}
+          showBorder
+        />
+        <RoleButton
+          role="contributor"
+          isSelected={selectedRole === 'contributor'}
+          onClick={() => handleRoleChange('contributor')}
+        />
+        <RoleButton
+          role="manager"
+          isSelected={selectedRole === 'manager'}
+          onClick={() => handleRoleChange('manager')}
+          showBorder
+        />
+      </Box>
+      <Box>
+        <PermissionsBanner role={selectedRole} />
+        <Center bg="lightBlue.6" py="base">
+          <Flex w="100%">
+            <Flex flex="1" gap="base" justify="flex-end" align="start">
+              <ActionLabel
+                label={t('myProfile.actions.can')}
+                color="neutral.white"
+              />
+              <Box w="1px" bg="neutral.white" h="100%" />
+            </Flex>
+            <Flex flex="1" justify="space-evenly">
+              {actions.map((action) => {
+                const disabledAllCheckbox =
+                  selectedRole === 'member' && action !== 'view'
+                return (
+                  <ActionCheckbox
+                    key={action}
+                    label={action}
+                    action={action}
+                    isChecked={selectedActions.includes(action)}
+                    isDisabled={disabledAllCheckbox}
+                    onChange={handleActionChange}
+                  />
+                )
+              })}
+            </Flex>
+          </Flex>
+        </Center>
+        <Stack spacing="base" py="base">
+          {rolePermissions.map(({ id, label, permissions }) => {
+            return (
+              <Flex key={id} w="100%">
+                <Flex flex="1">
+                  <Text fontFamily="secondary" ml="base">
+                    {label}
+                  </Text>
+                </Flex>
+                <Flex flex="1" justify="space-evenly">
+                  {actions.map((action) => {
+                    const isDisabled =
+                      !permissions[action].includes(selectedRole)
+                    const isChecked =
+                      callback[selectedRole][action].includes(id)
+                    return (
+                      <ActionCheckbox
+                        key={action}
+                        action={action}
+                        isChecked={isChecked}
+                        isDisabled={isDisabled}
+                        onChange={() => handleFeatureChange(action, id)}
+                      />
+                    )
+                  })}
+                </Flex>
+              </Flex>
+            )
+          })}
+        </Stack>
+      </Box>
+    </Flex>
+  )
+}

package/src/components/myProfile/permissions/index.ts

@@ -0,0 +1,5 @@
+export * from './ActionLabel'
+export * from './ActionCheckbox'
+export * from './PermissionsBanner'
+export * from './RoleButton'
+export * from './RolePermissionsTab'

package/src/helpers/HomeRoles.helper.ts

@@ -1,4 +1,19 @@
-export const homeRoleTypes = ['member', 'contributor', 'manager', 'homeowner']
+export type RoleType =
+  | 'guest'
+  | 'member'
+  | 'partner'
+  | 'contributor'
+  | 'manager'
+  | 'homeowner'
+
+export type ReducedRoleType = 'member' | 'contributor' | 'manager'
+
+export const homeRoleTypes: RoleType[] = [
+  'member',
+  'contributor',
+  'manager',
+  'homeowner',
+]
 
 export const homeRoles: { [key: string]: { [key: string]: string } } = {
   guest: {

package/src/helpers/myProfile/RolePermissions.helper.ts

@@ -0,0 +1,74 @@
+import { RolePermissionI } from '@/interfaces'
+
+export const rolePermissions: RolePermissionI[] = [
+  {
+    id: 'property-data',
+    label: 'Property Data',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['manager'],
+      edit: ['manager'],
+      delete: ['manager'],
+    },
+  },
+  {
+    id: 'financial-data',
+    label: 'Financial Data',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['contributor', 'manager'],
+      edit: ['manager'],
+      delete: ['manager'],
+    },
+  },
+  {
+    id: 'partners',
+    label: 'Partners',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['contributor', 'manager'],
+      edit: ['manager'],
+      delete: ['manager'],
+    },
+  },
+  {
+    id: 'folders',
+    label: 'Folders',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['manager'],
+      edit: ['contributor', 'manager'],
+      delete: ['manager'],
+    },
+  },
+  {
+    id: 'home-items',
+    label: 'Home items',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['contributor', 'manager'],
+      edit: ['manager'],
+      delete: ['manager'],
+    },
+  },
+  {
+    id: 'rooms',
+    label: 'Rooms',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['contributor', 'manager'],
+      edit: ['contributor', 'manager'],
+      delete: ['manager'],
+    },
+  },
+  {
+    id: 'rooms-items',
+    label: 'Rooms items',
+    permissions: {
+      view: ['member', 'contributor', 'manager'],
+      add: ['contributor', 'manager'],
+      edit: ['contributor', 'manager'],
+      delete: ['contributor', 'manager'],
+    },
+  },
+]

package/src/helpers/myProfile/index.ts

@@ -1,2 +1,3 @@
 export * from './CreditCardBrands.helper'
 export * from './PlanOptions.helper'
+export * from './RolePermissions.helper'

package/src/hooks/myProfile/index.ts

@@ -3,4 +3,5 @@ export * from './usePaymentFormProvider'
 export * from './useMyProfileContent'
 export * from './usePaymentMethod'
 export * from './useProfileDetail'
-export * from './useTwoFactorSetting'
+export * from './useRolePermissionsTab'
+export * from './useTwoFactorSetting'

package/src/hooks/myProfile/useRolePermissionsTab.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react'
+import { rolePermissions, ReducedRoleType } from '@/helpers'
+import {
+  ActionsPermitted,
+  RolePermissionObject,
+  RolePermissionsTabI,
+} from '@/interfaces'
+
+export const useRolePermissionsTab = ({
+  selected,
+  onSelect,
+}: RolePermissionsTabI) => {
+  const actions: ActionsPermitted[] = ['view', 'add', 'edit', 'delete']
+  const selectedActionsFromSelected = () => {
+    const selectedActions: ActionsPermitted[] = []
+    actions.forEach((action) => {
+      const featuresByRoleByAction = selected[selectedRole][action]
+      if (featuresByRoleByAction.length === rolePermissions.length) {
+        selectedActions.push(action)
+      }
+    })
+    return selectedActions
+  }
+  const [callback, setCallback] = useState<RolePermissionObject>(selected)
+  const [selectedRole, setSelectedRole] = useState<ReducedRoleType>('member')
+  const [selectedActions, setSelectedActions] = useState<ActionsPermitted[]>(
+    selectedActionsFromSelected
+  )
+
+  const handleRoleChange = (role: ReducedRoleType) => setSelectedRole(role)
+
+  const checkIfHasFeature = (action: ActionsPermitted, feature: string) => {
+    const features = callback[selectedRole][action]
+    const hasFeature = features.includes(feature)
+
+    if (hasFeature) {
+      return features.filter((f) => f !== feature)
+    }
+
+    return [...features, feature]
+  }
+
+  const handleFeatureChange = (action: ActionsPermitted, feature: string) => {
+    const newCallback = {
+      ...callback,
+      [selectedRole]: {
+        ...callback[selectedRole],
+        [action]: checkIfHasFeature(action, feature),
+      },
+    }
+    setCallback(newCallback)
+    onSelect(newCallback)
+  }
+
+  const handleActionChange = (action: ActionsPermitted) => {
+    if (selectedActions.includes(action)) {
+      const newCallback = {
+        ...callback,
+        [selectedRole]: {
+          ...callback[selectedRole],
+          [action]: [],
+        },
+      }
+      setCallback(newCallback)
+      onSelect(newCallback)
+      const filteredActions = selectedActions.filter((a) => a !== action)
+      return setSelectedActions(filteredActions)
+    }
+
+    const newCallback = {
+      ...callback,
+      [selectedRole]: {
+        ...callback[selectedRole],
+        [action]: rolePermissions
+          .map(({ id, permissions }) => {
+            if (permissions[action].includes(selectedRole)) {
+              return id
+            }
+
+            return ''
+          })
+          .filter((id) => id),
+      },
+    }
+
+    setCallback(newCallback)
+    onSelect(newCallback)
+
+    setSelectedActions([...selectedActions, action])
+  }
+
+  useEffect(() => {
+    setSelectedActions(selectedActionsFromSelected)
+  }, [selectedRole])
+  return {
+    actions,
+    callback,
+    selectedRole,
+    selectedActions,
+    handleRoleChange,
+    handleFeatureChange,
+    handleActionChange,
+  }
+}

package/src/index.ts

@@ -138,6 +138,7 @@ export {
   ResetPassword,
   ReviewBanner,
   RightPanel,
+  RolePermissionsTab,
   RoomHeader,
   RoomsBoardTour,
   RoomsMenu,
@@ -197,7 +198,7 @@ export {
   recordsInputsProxy,
   recordsInputsToDBProxy,
   userDetailsProxy,
-  confirmAddressProxy
+  confirmAddressProxy,
 } from './proxies'
 
 import theme from './theme'

package/src/interfaces/myProfile/MyProfileBody.interface.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react'
 
 export interface MyProfileBodyI {
-  account: ReactNode
-  details: ReactNode
-  email: ReactNode
+  account?: ReactNode
+  details?: ReactNode
+  email?: ReactNode
   isLoading: boolean
-  payment: ReactNode
+  payment?: ReactNode
+  rolePermissions?: ReactNode
 }

package/src/interfaces/myProfile/index.ts

@@ -1,6 +1,7 @@
 export * from './email'
 export * from './details'
 export * from './payment'
+export * from './permissions'
 export * from './CancelAccount.interface'
 export * from './ContextButtons.interface'
 export * from './MyProfileBody.interface'

package/src/interfaces/myProfile/permissions/ActionCheckbox.interface.ts

@@ -0,0 +1,9 @@
+import { ActionsPermitted } from '@/interfaces'
+
+export interface ActionCheckboxI {
+  action: ActionsPermitted
+  label?: string
+  isChecked: boolean
+  isDisabled: boolean
+  onChange: (action: ActionsPermitted) => void
+}

package/src/interfaces/myProfile/permissions/RoleButton.interface.ts

@@ -0,0 +1,8 @@
+import { RoleType } from '@/helpers'
+
+export interface RoleButtonI {
+  role: RoleType
+  onClick: () => void
+  isSelected: boolean
+  showBorder?: boolean
+}