♻️(app-desk) create ChooseRole component

We extract the ChooseRole component from the ModalRole
component to make it reusable.

src/frontend/apps/desk/src/features/members/components/ChooseRole.tsx

@@ -0,0 +1,49 @@
+import { Radio, RadioGroup } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import { Role } from '..';
+
+interface ChooseRoleProps {
+  currentRole: Role;
+  disabled: boolean;
+  defaultRole: Role;
+  setRole: (role: Role) => void;
+}
+
+export const ChooseRole = ({
+  defaultRole,
+  disabled,
+  currentRole,
+  setRole,
+}: ChooseRoleProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <RadioGroup>
+      <Radio
+        label={t('Admin')}
+        value={Role.ADMIN}
+        name="role"
+        onChange={(evt) => setRole(evt.target.value as Role)}
+        defaultChecked={defaultRole === Role.ADMIN}
+        disabled={disabled}
+      />
+      <Radio
+        label={t('Member')}
+        value={Role.MEMBER}
+        name="role"
+        onChange={(evt) => setRole(evt.target.value as Role)}
+        defaultChecked={defaultRole === Role.MEMBER}
+        disabled={disabled}
+      />
+      <Radio
+        label={t('Owner')}
+        value={Role.OWNER}
+        name="role"
+        onChange={(evt) => setRole(evt.target.value as Role)}
+        defaultChecked={defaultRole === Role.OWNER}
+        disabled={disabled || currentRole !== Role.OWNER}
+      />
+    </RadioGroup>
+  );
+};

src/frontend/apps/desk/src/features/members/components/ModalRole.tsx

@@ -2,13 +2,11 @@ import {
   Button,
   Modal,
   ModalSize,
-  Radio,
-  RadioGroup,
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { t } from 'i18next';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, Text, TextErrors } from '@/components';
 import { useAuthStore } from '@/features/auth';
@@ -16,6 +14,8 @@ import { useAuthStore } from '@/features/auth';
 import { useUpdateTeamAccess } from '../api/useUpdateTeamAccess';
 import { Access, Role } from '../types';
 
+import { ChooseRole } from './ChooseRole';
+
 interface ModalRoleProps {
   access: Access;
   currentRole: Role;
@@ -29,6 +29,7 @@ export const ModalRole = ({
   onClose,
   teamId,
 }: ModalRoleProps) => {
+  const { t } = useTranslation();
   const [localRole, setLocalRole] = useState(access.role);
   const { userData } = useAuthStore();
   const { toast } = useToastProvider();
@@ -109,32 +110,12 @@ export const ModalRole = ({
           </Text>
         )}
 
-        <RadioGroup>
+        <ChooseRole
-          <Radio
+          defaultRole={access.role}
-            label={t('Admin')}
+          currentRole={currentRole}
-            value={Role.ADMIN}
+          disabled={isNotAllowed}
-            name="role"
+          setRole={setLocalRole}
-            onChange={(evt) => setLocalRole(evt.target.value as Role)}
+        />
-            defaultChecked={access.role === Role.ADMIN}
-            disabled={isNotAllowed}
-          />
-          <Radio
-            label={t('Member')}
-            value={Role.MEMBER}
-            name="role"
-            onChange={(evt) => setLocalRole(evt.target.value as Role)}
-            defaultChecked={access.role === Role.MEMBER}
-            disabled={isNotAllowed}
-          />
-          <Radio
-            label={t('Owner')}
-            value={Role.OWNER}
-            name="role"
-            onChange={(evt) => setLocalRole(evt.target.value as Role)}
-            defaultChecked={access.role === Role.OWNER}
-            disabled={isNotAllowed || currentRole !== Role.OWNER}
-          />
-        </RadioGroup>
       </Box>
     </Modal>
   );