fix: allow to switch from create group/groupv2 based on a ts.flag

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -20,6 +20,7 @@ import { OverlayInvite } from './overlay/OverlayInvite';
 import { OverlayMessage } from './overlay/OverlayMessage';
 import { OverlayMessageRequest } from './overlay/OverlayMessageRequest';
 import { OverlayChooseAction } from './overlay/choose-action/OverlayChooseAction';
+import { useAreGroupsCreatedAsNewGroupsYet } from '../../state/selectors/releasedFeatures';
 
 const StyledLeftPaneContent = styled.div`
   display: flex;
@@ -40,17 +41,15 @@ const StyledConversationListContent = styled.div`
 const ClosableOverlay = () => {
   const leftOverlayMode = useSelector(getLeftOverlayMode);
 
+  const shouldCreateNewGroups = useAreGroupsCreatedAsNewGroupsYet();
+
   switch (leftOverlayMode) {
     case 'choose-action':
       return <OverlayChooseAction />;
     case 'open-group':
       return <OverlayCommunity />;
     case 'closed-group':
-      return window.sessionFeatureFlags.useClosedGroupV2 ? (
+      return shouldCreateNewGroups ? <OverlayClosedGroupV2 /> : <OverlayLegacyClosedGroup />;
-        <OverlayClosedGroupV2 />
-      ) : (
-        <OverlayLegacyClosedGroup />
-      );
     case 'message':
       return <OverlayMessage />;
     case 'message-requests':

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -3,15 +3,19 @@ import { useCallback, useEffect } from 'react';
 import { isEmpty, isString } from 'lodash';
 import { useDispatch } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
+import useUpdate from 'react-use/lib/useUpdate';
 import { resetLeftOverlayMode, setLeftOverlayMode } from '../../../../state/ducks/section';
 import { SpacerSM } from '../../../basic/Text';
 import { StyledLeftPaneOverlay } from '../OverlayMessage';
 import { ActionRow, StyledActionRowContainer } from './ActionRow';
 import { ContactsListWithBreaks } from './ContactsListWithBreaks';
 import { groupInfoActions } from '../../../../state/ducks/metaGroups';
+import { SessionToggle } from '../../../basic/SessionToggle';
 
 export const OverlayChooseAction = () => {
   const dispatch = useDispatch();
+  const forceRefresh = useUpdate();
+
   function closeOverlay() {
     dispatch(resetLeftOverlayMode());
   }
@@ -78,6 +82,19 @@ export const OverlayChooseAction = () => {
           onClick={openNewMessage}
           dataTestId="chooser-new-conversation-button"
         />
+        {window.sessionFeatureFlags.useClosedGroupV2QAButtons ? (
+          <span style={{ display: 'flex', alignItems: 'center', alignSelf: 'center' }}>
+            Create group v2?{'  '}
+            <SessionToggle
+              active={window.sessionFeatureFlags.useClosedGroupV2}
+              onClick={() => {
+                window.sessionFeatureFlags.useClosedGroupV2 =
+                  !window.sessionFeatureFlags.useClosedGroupV2;
+                forceRefresh();
+              }}
+            />
+          </span>
+        ) : null}
         <ActionRow
           title={window.i18n('groupCreate')}
           ariaLabel={'Create a group button'}

ts/state/ducks/releasedFeatures.tsx

@@ -1,8 +1,14 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { DURATION } from '../../session/constants';
 
+// update this to be when we ship desktop groups REMOVE AFTER QA
+const GROUP_DESKTOP_RELEASE = 1767225600 * 1000; // currently  Thursday, January 1, 2026 12:00:00 AM
+
+// FIXME update this to the correct timestamp REMOVE AFTER QA
+export const START_CREATE_NEW_GROUP_TIMESTAMP_MS = GROUP_DESKTOP_RELEASE + DURATION.WEEKS * 1;
+
 // FIXME update this to the correct timestamp REMOVE AFTER QA
-export const LEGACY_GROUP_DEPRECATED_TIMESTAMP_MS = Date.now() + DURATION.WEEKS * 52;
+export const LEGACY_GROUP_DEPRECATED_TIMESTAMP_MS = GROUP_DESKTOP_RELEASE + DURATION.WEEKS * 3;
 
 export interface ReleasedFeaturesState {
   legacyGroupDeprecationTimestampRefreshAtMs: number;

ts/state/selectors/releasedFeatures.ts

@@ -1,5 +1,9 @@
+import { useSelector } from 'react-redux';
 import { NetworkTime } from '../../util/NetworkTime';
-import { LEGACY_GROUP_DEPRECATED_TIMESTAMP_MS } from '../ducks/releasedFeatures';
+import {
+  LEGACY_GROUP_DEPRECATED_TIMESTAMP_MS,
+  START_CREATE_NEW_GROUP_TIMESTAMP_MS,
+} from '../ducks/releasedFeatures';
 
 export const areLegacyGroupsDeprecatedYet = (): boolean => {
   const theyAreDeprecated = NetworkTime.now() >= LEGACY_GROUP_DEPRECATED_TIMESTAMP_MS;
@@ -7,6 +11,16 @@ export const areLegacyGroupsDeprecatedYet = (): boolean => {
   return window.sessionFeatureFlags.forceLegacyGroupsDeprecated || theyAreDeprecated;
 };
 
+const areGroupsCreatedAsNewGroupsYet = (): boolean => {
+  const shouldCreateNewGroups = NetworkTime.now() >= START_CREATE_NEW_GROUP_TIMESTAMP_MS;
+
+  return window.sessionFeatureFlags.useClosedGroupV2 || shouldCreateNewGroups;
+};
+
+export function useAreGroupsCreatedAsNewGroupsYet() {
+  return useSelector(areGroupsCreatedAsNewGroupsYet);
+}
+
 export function areLegacyGroupsDeprecatedYetOutsideRedux() {
   if (!window.inboxStore) {
     return false;