runfix(cells): allow creation of channels with cells enabled [WPB-19376] (#19453)

Author: V-Gira

src/script/components/Modals/CreateConversation/CreateConversationSteps/Preference.tsx

@@ -17,23 +17,36 @@
  *
  */
 
+import {container} from 'tsyringe';
+
 import {InfoToggle} from 'Components/toggle/InfoToggle';
+import {TeamState} from 'Repositories/team/TeamState';
+import {Config} from 'src/script/Config';
+import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {t} from 'Util/LocalizerUtil';
 
 import {useCreateConversationModal} from '../hooks/useCreateConversationModal';
 import {ConversationType} from '../types';
 
 export const Preference = () => {
   const {
+    isCellsEnabled,
     isGuestsEnabled,
     isReadReceiptsEnabled,
+    setIsCellsEnabled,
     setIsGuestsEnabled,
     setIsReadReceiptsEnabled,
     isServicesEnabled,
     setIsServicesEnabled,
     conversationType,
   } = useCreateConversationModal();
 
+  const teamState = container.resolve(TeamState);
+
+  const {isCellsEnabled: isCellsEnabledForTeam} = useKoSubscribableChildren(teamState, ['isCellsEnabled']);
+  const isCellsEnabledForEnvironment = Config.getConfig().FEATURE.ENABLE_CELLS;
+  const isCellsOptionEnabled = isCellsEnabledForEnvironment && isCellsEnabledForTeam;
+
   return (
     <>
       <InfoToggle
@@ -69,6 +82,18 @@ export const Preference = () => {
         isDisabled={conversationType === ConversationType.Channel}
         name={t('readReceiptsToggleName')}
       />
+
+      {isCellsOptionEnabled && (
+        <InfoToggle
+          className="modal-style"
+          dataUieName="cells"
+          isChecked={isCellsEnabled}
+          setIsChecked={setIsCellsEnabled}
+          isDisabled={false}
+          name={t('modalCreateGroupCellsToggleHeading')}
+          info={t('modalCreateGroupCellsToggleInfo')}
+        />
+      )}
     </>
   );
 };

src/script/components/Modals/CreateConversation/hooks/useCreateConversation.ts

@@ -57,6 +57,7 @@ export const useCreateConversation = () => {
     selectedContacts,
     setConversationName,
     setConversationCreationStep,
+    isCellsEnabled,
     isReadReceiptsEnabled,
     isServicesEnabled,
     isGuestsEnabled,
@@ -150,6 +151,7 @@ export const useCreateConversation = () => {
           add_permission: moderator === ADD_PERMISSION.ADMINS ? ADD_PERMISSION.ADMINS : ADD_PERMISSION.EVERYONE,
           protocol: defaultProtocol,
           receipt_mode: isReadReceiptsEnabled ? RECEIPT_MODE.ON : RECEIPT_MODE.OFF,
+          cells: isCellsEnabled,
           group_conv_type:
             conversationType === ConversationType.Channel
               ? GROUP_CONVERSATION_TYPE.CHANNEL

src/script/components/Modals/CreateConversation/hooks/useCreateConversationModal.ts

@@ -47,6 +47,7 @@ type CreateConversationModalState = {
   selectedContacts: User[];
   historySharingQuantity: number;
   historySharingUnit: HistorySharingUnit;
+  isCellsEnabled: boolean;
   isCustomHistoryModalOpen: boolean;
   isConfirmDiscardModalOpen: boolean;
   isCreateTeamModalOpen: boolean;
@@ -65,6 +66,7 @@ type CreateConversationModalState = {
   gotoNextStep: () => void;
   gotoPreviousStep: () => void;
   setError: (error: string) => void;
+  setIsCellsEnabled: (isCellsEnabled: boolean) => void;
   setIsReadReceiptsEnabled: (isReadReceiptsEnabled: boolean) => void;
   setIsGuestsEnabled: (isGuestsEnabled: boolean) => void;
   setSelectedContacts: (contacts: User[]) => void;
@@ -92,6 +94,7 @@ const initialState = {
   conversationType: ConversationType.Channel,
   conversationCreationStep: ConversationCreationStep.ConversationDetails,
   error: '',
+  isCellsEnabled: false,
   isReadReceiptsEnabled: false,
   isServicesEnabled: true,
   isGuestsEnabled: true,
@@ -126,6 +129,7 @@ export const useCreateConversationModal = create<CreateConversationModalState>(s
   gotoLastStep: () => set({conversationCreationStep: ConversationCreationStep.ParticipantsSelection}),
   gotoPreviousStep: () => set(state => ({...state, conversationCreationStep: state.conversationCreationStep - 1})),
   setError: (error: string) => set({error}),
+  setIsCellsEnabled: (isCellsEnabled: boolean) => set({isCellsEnabled}),
   setIsReadReceiptsEnabled: (isReadReceiptsEnabled: boolean) => set({isReadReceiptsEnabled}),
   setIsGuestsEnabled: (isGuestsEnabled: boolean) => set({isGuestsEnabled}),
   setSelectedContacts: (contacts: User[]) => set({selectedContacts: contacts}),