react-achievements 2.0.5 → 2.1.1

package/dist/providers/AchievementProvider.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { AchievementProviderProps, AchievementMetrics as AchievementMetricsType } from '../types';
+import { AchievementProviderProps, AchievementMetrics } from '../types';
 export interface AchievementContextType {
-    updateMetrics: (newMetrics: AchievementMetricsType | ((prevMetrics: AchievementMetricsType) => AchievementMetricsType)) => void;
+    updateMetrics: (newMetrics: AchievementMetrics | ((prevMetrics: AchievementMetrics) => AchievementMetrics)) => void;
     unlockedAchievements: string[];
     resetStorage: () => void;
 }
 export declare const AchievementContext: React.Context<AchievementContextType | undefined>;
 export declare const useAchievementContext: () => AchievementContextType;
-export declare const AchievementProvider: React.FC<AchievementProviderProps>;
-export declare function mergeDeep(target: any, source: any): any;
+declare const AchievementProvider: React.FC<AchievementProviderProps>;
+export { AchievementProvider };

package/dist/redux/achievementSlice.d.ts

@@ -1,25 +1,31 @@
 import { PayloadAction } from '@reduxjs/toolkit';
-import { AchievementConfiguration, InitialAchievementMetrics, AchievementMetrics } from '../types';
+import { InitialAchievementMetrics, AchievementMetrics, SerializedAchievementConfiguration } from '../types';
 export interface AchievementState {
-    config: AchievementConfiguration;
+    config: SerializedAchievementConfiguration;
     metrics: AchievementMetrics;
     unlockedAchievements: string[];
+    previouslyAwardedAchievements: string[];
     storageKey: string | null;
 }
 export declare const achievementSlice: import("@reduxjs/toolkit").Slice<AchievementState, {
     initialize: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<{
-        config: AchievementConfiguration;
-        initialState?: InitialAchievementMetrics;
+        config: SerializedAchievementConfiguration;
+        initialState?: InitialAchievementMetrics & {
+            previouslyAwardedAchievements?: string[];
+        };
         storageKey: string;
     }>) => void;
     setMetrics: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<AchievementMetrics>) => void;
     unlockAchievement: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<string>) => void;
+    markAchievementAsAwarded: (state: import("immer/dist/internal").WritableDraft<AchievementState>, action: PayloadAction<string>) => void;
     resetAchievements: (state: import("immer/dist/internal").WritableDraft<AchievementState>) => void;
 }, "achievements">;
 export declare const initialize: import("@reduxjs/toolkit").ActionCreatorWithPayload<{
-    config: AchievementConfiguration;
-    initialState?: InitialAchievementMetrics;
+    config: SerializedAchievementConfiguration;
+    initialState?: InitialAchievementMetrics & {
+        previouslyAwardedAchievements?: string[];
+    };
     storageKey: string;
-}, "achievements/initialize">, setMetrics: import("@reduxjs/toolkit").ActionCreatorWithPayload<AchievementMetrics, "achievements/setMetrics">, unlockAchievement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "achievements/unlockAchievement">, resetAchievements: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"achievements/resetAchievements">;
+}, "achievements/initialize">, setMetrics: import("@reduxjs/toolkit").ActionCreatorWithPayload<AchievementMetrics, "achievements/setMetrics">, unlockAchievement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "achievements/unlockAchievement">, resetAchievements: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"achievements/resetAchievements">, markAchievementAsAwarded: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "achievements/markAchievementAsAwarded">;
 declare const _default: import("@reduxjs/toolkit").Reducer<AchievementState>;
 export default _default;

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import { Styles } from "./defaultStyles";
 export type AchievementMetricValue = number | string | boolean | Date;
 export interface AchievementDetails {
     achievementId: string;
@@ -14,13 +15,23 @@ export type AchievementMetrics = Record<string, AchievementMetricValue[]>;
 export interface AchievementProviderProps {
     children: React.ReactNode;
     config: AchievementConfiguration;
-    initialState?: InitialAchievementMetrics;
+    initialState?: InitialAchievementMetrics & {
+        previouslyAwardedAchievements?: string[];
+    };
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    styles?: Partial<import('./defaultStyles').Styles>;
+    styles?: Partial<Styles>;
     icons?: Record<string, string>;
 }
 export interface AchievementUnlockCondition<T extends AchievementMetricValue> {
     isConditionMet: (value: T) => boolean;
     achievementDetails: AchievementDetails;
 }
+export interface SerializedAchievementUnlockCondition {
+    achievementDetails: AchievementDetails;
+    conditionType: 'number' | 'string' | 'boolean' | 'date';
+    conditionValue: any;
+}
+export interface SerializedAchievementConfiguration {
+    [metricName: string]: SerializedAchievementUnlockCondition[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-achievements",
-  "version": "2.0.5",
+  "version": "2.1.1",
   "description": "This package allows users to transpose a React achievements engine over their React apps",
   "keywords": [
     "react",
@@ -26,6 +26,7 @@
     "@mui/icons-material": "^6.4.8",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-essentials": "^8.6.8",
     "@storybook/addon-interactions": "^8.6.8",
     "@storybook/addon-links": "^8.6.8",
@@ -35,23 +36,21 @@
     "@storybook/react": "^8.6.8",
     "@storybook/react-webpack5": "^8.6.8",
     "@storybook/test": "^8.6.8",
-    "rollup": "^4.19.0",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "storybook": "^8.6.8",
-    "typescript": "^5.5.4",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0"
+    "@types/react-dom": "^18.3.0",
+    "rollup": "^4.19.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.6.8",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
+    "@reduxjs/toolkit": "^1.0.0",
     "react": "^18.0.0",
+    "react-confetti": "^6.0.0",
     "react-dom": "^18.0.0",
     "react-redux": "^8.0.0 || ^9.0.0",
-    "@reduxjs/toolkit": "^1.0.0",
-    "react-confetti": "^6.0.0",
     "react-use": "^17.0.0"
-  },
-  "dependencies": {
   }
-}
+}

package/rollup.config.mjs

@@ -1,7 +1,9 @@
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from 'rollup-plugin-typescript2';
+import replace from '@rollup/plugin-replace';
 
+// Add the replace plugin to handle `this` issues in libraries like @reduxjs/toolkit
 export default {
     input: 'src/index.ts',
     output: [
@@ -15,6 +17,10 @@ export default {
         }
     ],
     plugins: [
+        replace({
+            preventAssignment: true,
+            'this': 'undefined',
+        }),
         resolve(),
         commonjs(),
         typescript({ tsconfig: './tsconfig.json' })

package/src/hooks/useAchievementState.ts

@@ -0,0 +1,12 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
+
+export const useAchievementState = () => {
+    const metrics = useSelector((state: RootState) => state.achievements.metrics);
+    const previouslyAwardedAchievements = useSelector((state: RootState) => state.achievements.previouslyAwardedAchievements);
+
+    return {
+        metrics,
+        previouslyAwardedAchievements,
+    };
+};

package/src/index.ts

@@ -3,6 +3,7 @@ import { AchievementMetrics, AchievementConfiguration, AchievementDetails, Achie
 import ConfettiWrapper from './components/ConfettiWrapper';
 import achievementReducer from './redux/achievementSlice';
 import notificationReducer from './redux/notificationSlice'
+import { useAchievementState } from './hooks/useAchievementState';
 
 export {
     AchievementProvider,
@@ -14,4 +15,5 @@ export {
     ConfettiWrapper,
     achievementReducer,
     notificationReducer,
+    useAchievementState,
 };

package/src/providers/AchievementProvider.tsx

@@ -1,24 +1,26 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { RootState, AppDispatch } from '../redux/store';
-import { initialize, setMetrics, unlockAchievement, resetAchievements } from '../redux/achievementSlice';
+import { initialize, setMetrics, unlockAchievement, resetAchievements, markAchievementAsAwarded } from '../redux/achievementSlice';
 import { addNotification, clearNotifications } from '../redux/notificationSlice';
 import {
     AchievementDetails,
     AchievementMetricValue,
-    AchievementUnlockCondition,
+    SerializedAchievementUnlockCondition,
+    SerializedAchievementConfiguration,
     AchievementProviderProps,
-    AchievementMetrics as AchievementMetricsType,
+    AchievementMetrics,
+    AchievementConfiguration,
+    AchievementUnlockCondition,
 } from '../types';
-import { defaultStyles, Styles } from '../defaultStyles';
 import AchievementModal from '../components/AchievementModal';
-import BadgesModal from '../components/BadgesModal';
 import BadgesButton from '../components/BadgesButton';
+import BadgesModal from '../components/BadgesModal';
 import ConfettiWrapper from '../components/ConfettiWrapper';
-import { defaultAchievementIcons } from '../assets/defaultIcons';
+import { defaultStyles } from '../defaultStyles';
 
 export interface AchievementContextType {
-    updateMetrics: (newMetrics: AchievementMetricsType | ((prevMetrics: AchievementMetricsType) => AchievementMetricsType)) => void;
+    updateMetrics: (newMetrics: AchievementMetrics | ((prevMetrics: AchievementMetrics) => AchievementMetrics)) => void;
     unlockedAchievements: string[];
     resetStorage: () => void;
 }
@@ -33,76 +35,105 @@ export const useAchievementContext = () => {
     return context;
 };
 
-export const AchievementProvider: React.FC<AchievementProviderProps> = ({
-                                                                            children,
-                                                                            config,
-                                                                            initialState = {},
-                                                                            storageKey = 'react-achievements',
-                                                                            badgesButtonPosition = 'top-right',
-                                                                            styles = {},
-                                                                            icons = {},
-                                                                        }: AchievementProviderProps) => {
+const AchievementProvider: React.FC<AchievementProviderProps> = ({
+    children,
+    config,
+    initialState = {},
+    storageKey = 'react-achievements',
+    badgesButtonPosition = 'top-right',
+    styles = {},
+    icons = {},
+}) => {
     const dispatch: AppDispatch = useDispatch();
     const metrics = useSelector((state: RootState) => state.achievements.metrics);
     const unlockedAchievementIds = useSelector((state: RootState) => state.achievements.unlockedAchievements);
+    const previouslyAwardedAchievements = useSelector((state: RootState) => state.achievements.previouslyAwardedAchievements);
     const notifications = useSelector((state: RootState) => state.notifications.notifications);
-    const mergedStyles = React.useMemo(() => mergeDeep(defaultStyles, styles), [styles]);
-
-    const [currentAchievement, setCurrentAchievement] = React.useState<AchievementDetails | null>(null);
-    const [showBadges, setShowBadges] = React.useState(false);
-    const [showConfetti, setShowConfetti] = React.useState(false);
-
-    const mergedIcons = React.useMemo(() => ({ ...defaultAchievementIcons, ...icons }), [icons]);
+    const [currentAchievement, setCurrentAchievement] = useState<AchievementDetails | null>(null);
+    const [showBadges, setShowBadges] = useState(false);
+    const [showConfetti, setShowConfetti] = useState(false);
 
-    const updateMetrics = useCallback(
-        (newMetrics: AchievementMetricsType | ((prevMetrics: AchievementMetricsType) => AchievementMetricsType)) => {
-            dispatch(setMetrics(typeof newMetrics === 'function' ? newMetrics(metrics) : newMetrics));
-        },
-        [dispatch, metrics]
-    );
+    const serializeConfig = (config: AchievementConfiguration): SerializedAchievementConfiguration => {
+        const serializedConfig: SerializedAchievementConfiguration = {};
+        Object.entries(config).forEach(([metricName, conditions]) => {
+            serializedConfig[metricName] = (conditions as AchievementUnlockCondition<AchievementMetricValue>[]).map((condition: AchievementUnlockCondition<AchievementMetricValue>) => {
+                // Analyze the isConditionMet function to determine type and value
+                const funcString = condition.isConditionMet.toString();
+                let conditionType: 'number' | 'string' | 'boolean' | 'date';
+                let conditionValue: any;
+
+                if (funcString.includes('typeof value === "number"') || funcString.includes('typeof value === \'number\'')) {
+                    conditionType = 'number';
+                    const matches = funcString.match(/value\s*>=?\s*(\d+)/);
+                    conditionValue = matches ? parseInt(matches[1]) : 0;
+                } else if (funcString.includes('typeof value === "string"') || funcString.includes('typeof value === \'string\'')) {
+                    conditionType = 'string';
+                    const matches = funcString.match(/value\s*===?\s*['"](.+)['"]/);
+                    conditionValue = matches ? matches[1] : '';
+                } else if (funcString.includes('typeof value === "boolean"') || funcString.includes('typeof value === \'boolean\'')) {
+                    conditionType = 'boolean';
+                    conditionValue = funcString.includes('=== true');
+                } else if (funcString.includes('instanceof Date')) {
+                    conditionType = 'date';
+                    const matches = funcString.match(/new Date\(['"](.+)['"]\)/);
+                    conditionValue = matches ? matches[1] : new Date().toISOString();
+                } else {
+                    // Default to number type if we can't determine the type
+                    conditionType = 'number';
+                    conditionValue = 1;
+                }
 
-    const resetStorage = useCallback(() => {
-        localStorage.removeItem(storageKey);
-        dispatch(resetAchievements());
-    }, [dispatch, storageKey]);
+                return {
+                    achievementDetails: condition.achievementDetails,
+                    conditionType,
+                    conditionValue,
+                };
+            });
+        });
+        return serializedConfig;
+    };
 
-    useEffect(() => {
-        dispatch(initialize({ config, initialState, storageKey }));
-    }, [dispatch, config, initialState, storageKey]);
+    const serializedConfig = useMemo(() => serializeConfig(config), [config]);
 
     const checkAchievements = useCallback(() => {
         const newAchievements: AchievementDetails[] = [];
-
-        if (!unlockedAchievementIds) {
-            console.error('unlockedAchievements is undefined!');
-            return;
-        }
-
-        Object.entries(config).forEach(([metricName, conditions]) => {
+        Object.entries(serializedConfig).forEach(([metricName, conditions]) => {
             const metricValues = metrics[metricName];
-
-            if (!metricValues) {
-                return;
-            }
-
+            if (!metricValues) return;
             conditions.forEach((condition) => {
+                const isConditionMet = (value: AchievementMetricValue) => {
+                    switch (condition.conditionType) {
+                        case 'number':
+                            return typeof value === 'number' && value >= condition.conditionValue;
+                        case 'string':
+                            return typeof value === 'string' && value === condition.conditionValue;
+                        case 'boolean':
+                            return typeof value === 'boolean' && value === condition.conditionValue;
+                        case 'date':
+                            return value instanceof Date && 
+                                value.getTime() >= new Date(condition.conditionValue).getTime();
+                        default:
+                            return false;
+                    }
+                };
                 if (
-                    metricValues.some((value: AchievementMetricValue) => condition.isConditionMet(value)) &&
-                    !unlockedAchievementIds.includes(condition.achievementDetails.achievementId)
+                    metricValues.some((value: AchievementMetricValue) => isConditionMet(value)) &&
+                    !unlockedAchievementIds.includes(condition.achievementDetails.achievementId) &&
+                    !previouslyAwardedAchievements.includes(condition.achievementDetails.achievementId)
                 ) {
                     newAchievements.push(condition.achievementDetails);
                 }
             });
         });
-
         if (newAchievements.length > 0) {
             newAchievements.forEach((achievement) => {
                 dispatch(unlockAchievement(achievement.achievementId));
+                dispatch(markAchievementAsAwarded(achievement.achievementId));
                 dispatch(addNotification(achievement));
             });
             setShowConfetti(true);
         }
-    }, [config, metrics, unlockedAchievementIds, dispatch]);
+    }, [serializedConfig, metrics, unlockedAchievementIds, previouslyAwardedAchievements, dispatch]);
 
     useEffect(() => {
         checkAchievements();
@@ -116,70 +147,75 @@ export const AchievementProvider: React.FC<AchievementProviderProps> = ({
 
     const showBadgesModal = () => setShowBadges(true);
 
-    const getAchievements = useCallback(
-        (achievedIds: string[]) => {
-            return Object.values(config).flatMap((conditions) =>
-                conditions
-                    .filter((c) => achievedIds.includes(c.achievementDetails.achievementId))
-                    .map((c) => c.achievementDetails)
-            );
-        },
-        [config]
-    );
-
-    const unlockedAchievementsDetails = getAchievements(unlockedAchievementIds);
+    useEffect(() => {
+        dispatch(initialize({
+            config: serializedConfig,
+            initialState,
+            storageKey,
+        }));
+    }, [dispatch, serializedConfig, initialState, storageKey]);
 
     return (
-        <AchievementContext.Provider value={{ updateMetrics, unlockedAchievements: unlockedAchievementIds, resetStorage }}>
+        <AchievementContext.Provider
+            value={{
+                updateMetrics: (newMetrics) => {
+                    if (typeof newMetrics === 'function') {
+                        const currentMetrics = metrics;
+                        const updatedMetrics = newMetrics(currentMetrics);
+                        dispatch(setMetrics(updatedMetrics));
+                    } else {
+                        dispatch(setMetrics(newMetrics));
+                    }
+                },
+                unlockedAchievements: unlockedAchievementIds,
+                resetStorage: () => {
+                    localStorage.removeItem(storageKey);
+                    dispatch(resetAchievements());
+                },
+            }}
+        >
             {children}
+            <ConfettiWrapper show={showConfetti} />
             <AchievementModal
                 isOpen={!!currentAchievement}
                 achievement={currentAchievement}
                 onClose={() => {
                     setCurrentAchievement(null);
-                    if (currentAchievement) {
-                        dispatch(clearNotifications());
-                    }
+                    dispatch(clearNotifications());
+                    setShowConfetti(false);
                 }}
-                styles={mergedStyles.achievementModal}
-                icons={mergedIcons}
-            />
-            <BadgesModal
-                isOpen={showBadges}
-                achievements={unlockedAchievementsDetails}
-                onClose={() => setShowBadges(false)}
-                styles={mergedStyles.badgesModal}
-                icons={mergedIcons}
+                styles={styles.achievementModal || defaultStyles.achievementModal}
+                icons={icons}
             />
             <BadgesButton
                 onClick={showBadgesModal}
                 position={badgesButtonPosition}
-                styles={mergedStyles.badgesButton}
-                unlockedAchievements={unlockedAchievementsDetails}
+                styles={styles.badgesButton || defaultStyles.badgesButton}
+                unlockedAchievements={[...unlockedAchievementIds, ...previouslyAwardedAchievements]
+                    .filter((id, index, self) => self.indexOf(id) === index) // Remove duplicates
+                    .map(id => {
+                        const achievement = Object.values(serializedConfig)
+                            .flat()
+                            .find(condition => condition.achievementDetails.achievementId === id);
+                        return achievement?.achievementDetails;
+                    }).filter((a): a is AchievementDetails => !!a)}
+            />
+            <BadgesModal
+                isOpen={showBadges}
+                achievements={[...unlockedAchievementIds, ...previouslyAwardedAchievements]
+                    .filter((id, index, self) => self.indexOf(id) === index) // Remove duplicates
+                    .map(id => {
+                        const achievement = Object.values(serializedConfig)
+                            .flat()
+                            .find(condition => condition.achievementDetails.achievementId === id);
+                        return achievement?.achievementDetails;
+                    }).filter((a): a is AchievementDetails => !!a)}
+                onClose={() => setShowBadges(false)}
+                styles={styles.badgesModal || defaultStyles.badgesModal}
+                icons={icons}
             />
-            <ConfettiWrapper show={showConfetti || notifications.length > 0} />
         </AchievementContext.Provider>
     );
 };
 
-function isObject(item: any) {
-    return item && typeof item === 'object' && !Array.isArray(item);
-}
-
-export function mergeDeep(target: any, source: any) {
-    const output = { ...target };
-    if (isObject(target) && isObject(source)) {
-        Object.keys(source).forEach((key) => {
-            if (isObject(source[key])) {
-                if (!(key in target)) {
-                    output[key] = source[key];
-                } else {
-                    output[key] = mergeDeep(target[key], source[key]);
-                }
-            } else {
-                output[key] = source[key];
-            }
-        });
-    }
-    return output;
-}
+export { AchievementProvider };

package/src/redux/achievementSlice.ts

@@ -1,14 +1,20 @@
+// src/redux/achievementSlice.ts
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import {
     AchievementConfiguration,
     InitialAchievementMetrics,
     AchievementMetrics,
+    AchievementDetails,
+    SerializedAchievementConfiguration,
 } from '../types';
 
+
+
 export interface AchievementState {
-    config: AchievementConfiguration;
+    config: SerializedAchievementConfiguration;
     metrics: AchievementMetrics;
     unlockedAchievements: string[];
+    previouslyAwardedAchievements: string[];
     storageKey: string | null;
 }
 
@@ -16,6 +22,7 @@ const initialState: AchievementState = {
     config: {},
     metrics: {},
     unlockedAchievements: [],
+    previouslyAwardedAchievements: [], // Initialize as empty
     storageKey: null,
 };
 
@@ -23,42 +30,62 @@ export const achievementSlice = createSlice({
     name: 'achievements',
     initialState,
     reducers: {
-        initialize: (state, action: PayloadAction<{ config: AchievementConfiguration; initialState?: InitialAchievementMetrics; storageKey: string }>) => {
+        initialize: (state, action: PayloadAction<{ config: SerializedAchievementConfiguration; initialState?: InitialAchievementMetrics & { previouslyAwardedAchievements?: string[] }; storageKey: string }>) => {
+
             state.config = action.payload.config;
             state.storageKey = action.payload.storageKey;
             const storedState = action.payload.storageKey ? localStorage.getItem(action.payload.storageKey) : null;
+
+            const initialMetrics = action.payload.initialState ? Object.keys(action.payload.initialState)
+                .filter(key => key !== 'previouslyAwardedAchievements')
+                .reduce((acc, key) => ({ ...acc, [key]: Array.isArray(action.payload.initialState![key]) ? action.payload.initialState![key] : [action.payload.initialState![key]] }), {}) : {};
+
+            const initialAwarded = action.payload.initialState?.previouslyAwardedAchievements || [];
+
             if (storedState) {
                 try {
                     const parsedState = JSON.parse(storedState);
-                    state.metrics = parsedState.achievements?.metrics || {};
+                    state.metrics = parsedState.achievements?.metrics || initialMetrics;
                     state.unlockedAchievements = parsedState.achievements?.unlockedAchievements || [];
+                    state.previouslyAwardedAchievements = parsedState.achievements?.previouslyAwardedAchievements || initialAwarded; // Prioritize stored, fallback to initial
                 } catch (error) {
                     console.error('Error parsing stored achievement state:', error);
-                    state.metrics = action.payload.initialState ? Object.keys(action.payload.initialState).reduce((acc, key) => ({ ...acc, [key]: Array.isArray(action.payload.initialState![key]) ? action.payload.initialState![key] : [action.payload.initialState![key]] }), {}) : {};
+                    state.metrics = initialMetrics;
                     state.unlockedAchievements = [];
+                    state.previouslyAwardedAchievements = initialAwarded;
                 }
             } else {
-                state.metrics = action.payload.initialState ? Object.keys(action.payload.initialState).reduce((acc, key) => ({ ...acc, [key]: Array.isArray(action.payload.initialState![key]) ? action.payload.initialState![key] : [action.payload.initialState![key]] }), {}) : {};
+                state.metrics = initialMetrics;
                 state.unlockedAchievements = [];
+                state.previouslyAwardedAchievements = initialAwarded;
             }
         },
         setMetrics: (state, action: PayloadAction<AchievementMetrics>) => {
             state.metrics = action.payload;
             if (state.storageKey) {
-                localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements } }));
+                localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements, previouslyAwardedAchievements: state.previouslyAwardedAchievements } }));
             }
         },
         unlockAchievement: (state, action: PayloadAction<string>) => {
             if (!state.unlockedAchievements.includes(action.payload)) {
                 state.unlockedAchievements.push(action.payload);
                 if (state.storageKey) {
-                    localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements } }));
+                    localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements, previouslyAwardedAchievements: state.previouslyAwardedAchievements } }));
+                }
+            }
+        },
+        markAchievementAsAwarded: (state, action: PayloadAction<string>) => {
+            if (!state.previouslyAwardedAchievements.includes(action.payload)) {
+                state.previouslyAwardedAchievements.push(action.payload);
+                if (state.storageKey) {
+                    localStorage.setItem(state.storageKey, JSON.stringify({ achievements: { metrics: state.metrics, unlockedAchievements: state.unlockedAchievements, previouslyAwardedAchievements: state.previouslyAwardedAchievements } }));
                 }
             }
         },
         resetAchievements: (state) => {
             state.metrics = {};
             state.unlockedAchievements = [];
+            state.previouslyAwardedAchievements = [];
             if (state.storageKey) {
                 localStorage.removeItem(state.storageKey);
             }
@@ -66,6 +93,6 @@ export const achievementSlice = createSlice({
     },
 });
 
-export const { initialize, setMetrics, unlockAchievement, resetAchievements } = achievementSlice.actions;
+export const { initialize, setMetrics, unlockAchievement, resetAchievements, markAchievementAsAwarded } = achievementSlice.actions;
 
 export default achievementSlice.reducer;

package/src/types.ts

@@ -1,3 +1,5 @@
+import {Styles} from "./defaultStyles";
+
 export type AchievementMetricValue = number | string | boolean | Date;
 
 export interface AchievementDetails {
@@ -19,14 +21,24 @@ export type AchievementMetrics = Record<string, AchievementMetricValue[]>;
 export interface AchievementProviderProps {
     children: React.ReactNode;
     config: AchievementConfiguration;
-    initialState?: InitialAchievementMetrics;
+    initialState?: InitialAchievementMetrics & { previouslyAwardedAchievements?: string[] }; // Add optional previouslyAwardedAchievements
     storageKey?: string;
     badgesButtonPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    styles?: Partial<import('./defaultStyles').Styles>;
+    styles?: Partial<Styles>;
     icons?: Record<string, string>;
 }
 
 export interface AchievementUnlockCondition<T extends AchievementMetricValue> {
     isConditionMet: (value: T) => boolean;
     achievementDetails: AchievementDetails;
+}
+
+export interface SerializedAchievementUnlockCondition {
+    achievementDetails: AchievementDetails;
+    conditionType: 'number' | 'string' | 'boolean' | 'date';
+    conditionValue: any;
+}
+
+export interface SerializedAchievementConfiguration {
+    [metricName: string]: SerializedAchievementUnlockCondition[];
 }