packages/account/welcomeFlags/index.ts

   1 import { useCallback } from 'react';
   2
   3 import type { PayloadAction } from '@reduxjs/toolkit';
   4 import { createSlice } from '@reduxjs/toolkit';
   5
   6 import { baseUseDispatch, baseUseSelector } from '@proton/react-redux-store';
   7 import type { UserSettings } from '@proton/shared/lib/interfaces';
   8
   9 const name = 'welcomeFlags' as const;
  10
  11 export interface WelcomeFlagsState {
  12     hasGenericWelcomeStep: boolean;
  13     isWelcomeFlow: boolean;
  14     isDone: boolean;
  15     isReplay: boolean;
  16 }
  17
  18 const initialState: WelcomeFlagsState = {
  19     hasGenericWelcomeStep: false,
  20     isWelcomeFlow: false,
  21     isDone: true,
  22     isReplay: false,
  23 };
  24
  25 export const getWelcomeFlagsValue = (userSettings: Pick<UserSettings, 'WelcomeFlag' | 'Flags'>): WelcomeFlagsState => {
  26     const hasProductWelcomeStep = userSettings.WelcomeFlag === 0;
  27     const hasGenericWelcomeStep = userSettings.Flags.Welcomed === 0;
  28     const isWelcomeFlow = hasGenericWelcomeStep || hasProductWelcomeStep;
  29     return {
  30         hasGenericWelcomeStep,
  31         isWelcomeFlow,
  32         isDone: !isWelcomeFlow,
  33         isReplay: false,
  34     };
  35 };
  36
  37 const slice = createSlice({
  38     name,
  39     initialState,
  40     reducers: {
  41         initial: (state, action: PayloadAction<Pick<UserSettings, 'WelcomeFlag' | 'Flags'>>) => {
  42             return getWelcomeFlagsValue(action.payload);
  43         },
  44         done: (state) => {
  45             return { ...state, isDone: true };
  46         },
  47         replayed: (state) => {
  48             return { ...state, isReplay: false };
  49         },
  50         replaying: (state) => {
  51             return { ...state, isReplay: true };
  52         },
  53     },
  54 });
  55
  56 export const welcomeFlagsReducer = { [name]: slice.reducer };
  57 export const welcomeFlagsActions = slice.actions;
  58 export const selectWelcomeFlags = (state: { [name]: WelcomeFlagsState }) => state[name];
  59
  60 interface WelcomeFlagsOutput {
  61     endReplay: () => void;
  62     setDone: () => void;
  63     startReplay: () => void;
  64     welcomeFlags: WelcomeFlagsState;
  65 }
  66
  67 export const useWelcomeFlags = (): WelcomeFlagsOutput => {
  68     const value = baseUseSelector(selectWelcomeFlags);
  69     const dispatch = baseUseDispatch();
  70     const setDone = useCallback(() => {
  71         dispatch(slice.actions.done());
  72     }, []);
  73     const endReplay = useCallback(() => {
  74         dispatch(slice.actions.replayed());
  75     }, []);
  76     const startReplay = useCallback(() => {
  77         dispatch(slice.actions.replaying());
  78     }, []);
  79
  80     return {
  81         endReplay,
  82         setDone,
  83         startReplay,
  84         welcomeFlags: value,
  85     };
  86 };