Add NewFeatures service

template/.env.template

@@ -5,3 +5,5 @@ KILLSWITCH_API_KEY_IOS=
 KILLSWITCH_API_URL=https://killswitch.mirego.com
 
 SECRET_PANEL_ENABLED=true
+
+STORAGE_KEY_PREFIX=ProjectName

template/__mocks__/react-native-mmkv.ts

@@ -0,0 +1,9 @@
+export class MMKV {
+  constructor() {}
+  getString() {}
+  set() {}
+  delete() {}
+  clearAll() {}
+  contains() {}
+  addOnValueChangedListener() {}
+}

template/package.json

@@ -25,6 +25,7 @@
     "axios": "^1.6.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "i18next": "^23.7.7",
+    "lodash": "^4.17.21",
     "lottie-react-native": "^6.4.1",
     "nanoid": "^5.0.4",
     "react": "18.2.0",

template/src/hooks/use-new-feature.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useService } from './use-service';
+import NewFeatureService, { Feature } from '~/services/new-features';
+
+type UseNewFeatureTuple = [isNew: boolean, markSeen: () => void];
+
+export function useNewFeature(feature: Feature): UseNewFeatureTuple {
+  const newFeatureService = useService(NewFeatureService);
+  const [isNew, setIsNew] = useState(() =>
+    newFeatureService.getFeatureStatus(feature)
+  );
+
+  const markSeen = useCallback(() => {
+    newFeatureService.markFeatureAsSeen(feature);
+  }, [feature, newFeatureService]);
+
+  useEffect(() => {
+    const unsubscribe = newFeatureService.subscribe(feature, (value) => {
+      setIsNew(value);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [feature, newFeatureService]);
+
+  return [isNew, markSeen];
+}

template/src/screens/Home.tsx

@@ -11,6 +11,7 @@ import Geolocation, {
 } from '~/services/geolocation';
 import { useApplicationConfiguration } from '~/hooks/use-application-configuration';
 import { useRemoteConfig } from '~/hooks/use-remote-config';
+import { useNewFeature } from '~/hooks/use-new-feature';
 
 export type HomeScreenProps = RootStackScreenProps<'Home'>;
 
@@ -53,6 +54,7 @@ export function HomeScreen({ navigation }: HomeScreenProps) {
   const [error, setError] = useState<Error | null>(null);
 
   const someFeatureFlag = useRemoteConfig('some_feature_flag');
+  const [isFeatureNew, markSeen] = useNewFeature('new_feature_example');
 
   if (error) {
     throw error;
@@ -100,6 +102,13 @@ export function HomeScreen({ navigation }: HomeScreenProps) {
         <Button onPress={() => toggleLanguages()}>Toggle languages</Button>
 
         {someFeatureFlag && <Text>Feature flag example</Text>}
+
+        {isFeatureNew && (
+          <Flex>
+            <Text>This feature is new</Text>
+            <Button onPress={() => markSeen()}>OK</Button>
+          </Flex>
+        )}
       </Flex>
     </SafeAreaView>
   );

template/src/services/application-configuration.ts

@@ -15,6 +15,7 @@ export default class ApplicationConfiguration extends Storage<ApplicationConfigu
     KILLSWITCH_API_KEY_IOS: Config.KILLSWITCH_API_KEY_IOS!,
     KILLSWITCH_API_URL: Config.KILLSWITCH_API_URL!,
     SECRET_PANEL_ENABLED: this.asBoolean(Config.SECRET_PANEL_ENABLED!),
+    STORAGE_KEY_PREFIX: Config.STORAGE_KEY_PREFIX!,
   };
 
   getItem(key: ApplicationConfigurationKey) {

template/src/services/new-features.ts

@@ -0,0 +1,114 @@
+import DeviceInfo from 'react-native-device-info';
+import { BehaviorSubject } from 'rxjs';
+import semver from 'semver';
+import { autoInjectable, singleton } from 'tsyringe';
+import Storage from './storage';
+import { createStorageKey } from '~/utils/create-storage-key';
+
+const FIRST_OPENED_APP_VERSION_STORAGE_KEY = createStorageKey(
+  'FIRST_OPENED_APP_VERSION'
+);
+
+/**
+  Never remove a feature flag from here (except the boilerplate examples).
+  Keep them even after removing the feature so
+  we won't reuse those keys in the future.
+
+  The string is a semver range.
+  When the stored first opened app version satisfies that range,
+  the feature is considered new for that user.
+*/
+const FEATURES = {
+  new_feature_example: '<=1.2.x',
+};
+
+export type Feature = keyof typeof FEATURES;
+
+@singleton()
+@autoInjectable()
+export default class NewFeaturesService {
+  currentAppVersion = DeviceInfo.getVersion();
+  firstOpenedAppVersion = new BehaviorSubject<string | null>(null);
+
+  private readonly features = Object.keys(FEATURES).reduce(
+    (features, feature) => {
+      features[feature as Feature] = new BehaviorSubject(false);
+      return features;
+    },
+    {} as Record<Feature, BehaviorSubject<boolean>>
+  );
+
+  constructor(private storage: Storage) {
+    this.init();
+  }
+
+  private init() {
+    this.restore();
+  }
+
+  private getFirstOpenedAppVersion() {
+    const firstOpenedAppVersion = this.storage.getItem(
+      FIRST_OPENED_APP_VERSION_STORAGE_KEY
+    );
+
+    if (!firstOpenedAppVersion) {
+      this.storage.setItem(
+        FIRST_OPENED_APP_VERSION_STORAGE_KEY,
+        this.currentAppVersion
+      );
+      return this.currentAppVersion;
+    }
+
+    return firstOpenedAppVersion;
+  }
+
+  private async restore() {
+    const features = Object.keys(FEATURES) as Feature[];
+    const allFeatureKeys = features.map((feature) =>
+      this.getStorageKey(feature)
+    );
+    const allFeatureStatuses = allFeatureKeys.map((key) => [
+      key,
+      this.storage.getItem(key),
+    ]);
+    const firstOpenedAppVersion = this.getFirstOpenedAppVersion();
+
+    allFeatureStatuses.forEach(([_featureStorageKey, value], index) => {
+      const feature = features[index];
+      const parsedValue = value && JSON.parse(value);
+
+      if (typeof parsedValue === 'boolean') {
+        this.features[feature].next(parsedValue);
+        return;
+      }
+
+      const range = FEATURES[feature];
+      const isNew = semver.satisfies(firstOpenedAppVersion, range);
+      this.features[feature].next(isNew);
+    });
+  }
+
+  private getStorageKey(feature: Feature) {
+    return createStorageKey(`new-feature-${feature}`);
+  }
+
+  getFeatureStatus(feature: Feature): boolean {
+    return this.features[feature].getValue();
+  }
+
+  markFeatureAsSeen(feature: Feature) {
+    this.features[feature].next(false);
+    const key = this.getStorageKey(feature);
+    this.storage.setItem(key, false);
+  }
+
+  subscribe(feature: Feature, callback: (isNew: boolean) => void): () => void {
+    const subscription = this.features[feature].subscribe((isNew) => {
+      callback(isNew);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }
+}

template/src/services/storage.ts

@@ -2,17 +2,17 @@ import { MMKV } from 'react-native-mmkv';
 import { singleton } from 'tsyringe';
 import EventEmitter from '~/services/event-emitter';
 
-export interface StorageSubscriptionParams<KeyType> {
+export interface StorageSubscriptionParams<KeyType extends string = string> {
   key: KeyType;
   value: any;
 }
 
-export type StorageSubscription<KeyType> = (
+export type StorageSubscription<KeyType extends string = string> = (
   params: StorageSubscriptionParams<KeyType>
 ) => void;
 
 @singleton()
-export default class Storage<KeyType extends string> {
+export default class Storage<KeyType extends string = string> {
   constructor(
     private eventEmitter: EventEmitter<
       'storage',

template/src/types/react-native-config.d.ts

@@ -7,6 +7,8 @@ declare module 'react-native-config' {
     KILLSWITCH_API_URL?: string;
 
     SECRET_PANEL_ENABLED?: string;
+
+    STORAGE_KEY_PREFIX?: string;
   }
 
   export const Config: NativeConfig;

template/src/utils/create-storage-key.ts

@@ -0,0 +1,8 @@
+import { snakeCase } from 'lodash';
+import Config from 'react-native-config';
+
+const PREFIX = Config.STORAGE_KEY_PREFIX;
+
+export function createStorageKey(key: string) {
+  return `${PREFIX}_${snakeCase(key)}`.toUpperCase();
+}