@fadyshawky/react-native-magic 2.2.0 → 2.3.0

package/template/src/core/store/rootReducer.ts

@@ -1,9 +1,11 @@
 import {combineReducers} from '@reduxjs/toolkit';
 import {AppReducer} from './app/appSlice';
+import {CategoriesReducer} from './categories/categoriesSlice';
 import {UserReducer} from './user/userSlice';
 export const rootReducer = combineReducers({
   app: AppReducer,
   user: UserReducer,
+  categories: CategoriesReducer,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

package/template/src/core/store/store.tsx

@@ -13,7 +13,12 @@ const persistConfig: PersistConfig<RootState> = {
   version: 1,
   timeout: 1000,
   transforms: [
-    createWhitelistFilter('user', ['accessToken', 'user']),
+    createWhitelistFilter('user', [
+      'accessToken',
+      'refreshToken',
+      'fcmToken',
+      'user',
+    ]),
     createWhitelistFilter('app', ['language', 'isRTL']),
   ],
 };

package/template/src/core/store/user/userActions.ts

@@ -1,35 +1,62 @@
 import {createAsyncThunk} from '@reduxjs/toolkit';
+import axios from 'axios';
+import {API_BASE_URL} from '../../config';
+import {extractServerError} from '../../api/errorHandler';
 import {handleFetchJsonResponse} from '../../api/responseHandlers';
 import {post} from '../../api/serverHeaders';
-import {RootState} from '../rootReducer';
-import {extractServerError} from '../../api/errorHandler';
 import {ensureString} from '../../utils/stringUtils';
+import {RootState} from '../rootReducer';
 
 export const userLogin = createAsyncThunk(
   'user/login',
   async (
     {phone, password}: {phone: string; password: string},
-    {rejectWithValue, getState, dispatch}: any,
+    {rejectWithValue}: any,
   ) => {
     try {
-      const data: {
-        mobile_number: string;
-        mpin: string;
-        scheme_id: number;
-      } = {
-        mobile_number: phone,
-        mpin: password,
-        scheme_id: 1,
-      };
       const response = await post({
         url: '/login',
-        data,
+        data: {
+          mobile_number: phone,
+          mpin: password,
+          scheme_id: 1,
+        },
       });
-
       return handleFetchJsonResponse(response);
     } catch (e: any) {
       const serverError = extractServerError(e);
+      return rejectWithValue({
+        ...serverError,
+        message: ensureString(serverError.message),
+      });
+    }
+  },
+);
 
+export const verifyOTP = createAsyncThunk(
+  'user/verifyOTP',
+  async (
+    {
+      verification_code,
+      mobile_number,
+      device_token,
+      scheme_id,
+    }: {
+      verification_code?: string;
+      mobile_number?: string;
+      device_token?: string;
+      scheme_id?: number;
+    },
+    {rejectWithValue}: any,
+  ) => {
+    try {
+      const response = await post({
+        url: '/verify-otp',
+        data: {verification_code, mobile_number, device_token, scheme_id},
+      });
+      return handleFetchJsonResponse(response);
+    } catch (e: any) {
+      const serverError = extractServerError(e);
       return rejectWithValue({
         ...serverError,
         message: ensureString(serverError.message),
@@ -37,3 +64,37 @@ export const userLogin = createAsyncThunk(
     }
   },
 );
+
+/**
+ * Token refresh thunk.
+ * Uses a bare axios call (no interceptor) so a failing refresh doesn't loop.
+ * Returns the new tokens; userSlice handles persisting them.
+ */
+export const refreshUserToken = createAsyncThunk<
+  {accessToken: string; refreshToken?: string},
+  void,
+  {state: RootState; rejectValue: {message: string}}
+>('user/refreshToken', async (_arg, {getState, rejectWithValue}) => {
+  try {
+    const refreshToken = getState().user.refreshToken;
+    if (!refreshToken) {
+      return rejectWithValue({message: 'Missing refresh token'});
+    }
+    const response = await axios.post(
+      `${API_BASE_URL}/auth/refresh`,
+      {refreshToken},
+      {headers: {'Content-Type': 'application/json'}},
+    );
+    const data = response.data?.data ?? response.data ?? {};
+    if (!data.accessToken) {
+      return rejectWithValue({message: 'Refresh response missing accessToken'});
+    }
+    return {
+      accessToken: data.accessToken,
+      refreshToken: data.refreshToken,
+    };
+  } catch (e: any) {
+    const serverError = extractServerError(e);
+    return rejectWithValue({message: ensureString(serverError.message)});
+  }
+});

package/template/src/core/store/user/userSlice.ts

@@ -1,37 +1,50 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { cloneDeep, uniqBy } from 'lodash';
-import { LoadState } from '../../../../types';
-import { newState } from '../../../common/utils/newState';
-import { handleErrorResponse } from '../../api/responseHandlers';
-import {
-  userLogin
-} from './userActions';
-import { UserInitialState,  UserState } from './userState';
-
-function loginHandler(state: UserState, payload: {payload: any}) {
+import {createSlice, PayloadAction} from '@reduxjs/toolkit';
+import {LoadState} from '../../../../types';
+import {newState} from '../../../common/utils/newState';
+import {handleErrorResponse} from '../../api/responseHandlers';
+import {refreshUserToken, userLogin, verifyOTP} from './userActions';
+import {UserInitialState, UserState} from './userState';
+
+function loginHandler(state: UserState, action: PayloadAction<any>) {
+  const payload = action.payload ?? {};
   return newState(state, {
-    loginLoading: LoadState['allIsLoaded'],
+    accessToken: payload.accessToken ?? state.accessToken,
+    refreshToken: payload.refreshToken ?? state.refreshToken,
+    user: payload.user ?? state.user,
+    loginLoading: LoadState.allIsLoaded,
   });
 }
+
 function loginLoadingHandler(state: UserState) {
   return newState(state, {
-    loginLoading: LoadState['pullToRefresh'],
+    loginLoading: LoadState.pullToRefresh,
   });
 }
 
-function loginErrorHandler(
-  state: UserState,
-  payload: {payload: {message: string}},
-) {
-  console.error('payload: ', JSON.stringify(payload));
-  handleErrorResponse((payload.payload.message as string) || 'Login failed');
+function loginErrorHandler(state: UserState, action: any) {
+  console.error('payload: ', JSON.stringify(action.payload));
+  handleErrorResponse((action.payload?.message as string) || 'Login failed');
   return newState(state, {
-    loginLoading: LoadState['error'],
+    loginLoading: LoadState.error,
   });
 }
 
-function logoutHandler(state: UserState) {
-  return newState(state, UserInitialState);
+function logoutHandler() {
+  return UserInitialState;
+}
+
+function setFcmTokenHandler(state: UserState, action: PayloadAction<string>) {
+  return newState(state, {fcmToken: action.payload});
+}
+
+function setTokensHandler(
+  state: UserState,
+  action: PayloadAction<{accessToken: string; refreshToken?: string}>,
+) {
+  return newState(state, {
+    accessToken: action.payload.accessToken,
+    refreshToken: action.payload.refreshToken ?? state.refreshToken,
+  });
 }
 
 export const {reducer: UserReducer, actions} = createSlice({
@@ -39,15 +52,25 @@ export const {reducer: UserReducer, actions} = createSlice({
   initialState: UserInitialState,
   reducers: {
     setLogout: logoutHandler,
+    updateFcmToken: setFcmTokenHandler,
+    setTokens: setTokensHandler,
   },
   extraReducers: builder => {
     builder
       .addCase(userLogin.fulfilled, loginHandler)
       .addCase(userLogin.rejected, loginErrorHandler)
-      .addCase(userLogin.pending, loginLoadingHandler);
+      .addCase(userLogin.pending, loginLoadingHandler)
+      .addCase(verifyOTP.fulfilled, loginHandler)
+      .addCase(verifyOTP.rejected, loginErrorHandler)
+      .addCase(verifyOTP.pending, loginLoadingHandler)
+      .addCase(refreshUserToken.fulfilled, (state, action) => {
+        const payload = action.payload ?? {};
+        return newState(state, {
+          accessToken: payload.accessToken ?? state.accessToken,
+          refreshToken: payload.refreshToken ?? state.refreshToken,
+        });
+      });
   },
 });
 
-export const {
-  setLogout,
-} = actions;
+export const {setLogout, updateFcmToken, setTokens} = actions;

package/template/src/core/store/user/userState.ts

@@ -3,8 +3,11 @@ import {LoadState} from '../../../../types';
 export interface UserState {
   user: User;
   accessToken: string;
+  refreshToken: string;
+  fcmToken: string;
   loginLoading: string;
 }
+
 export interface User {
   type: string;
   mobile_number: string;
@@ -12,7 +15,6 @@ export interface User {
   status: string;
 }
 
-
 export enum UserStatus {
   ACTIVE = 'Active',
   REGISTERED = 'Registered',
@@ -20,8 +22,6 @@ export enum UserStatus {
   PENDING = 'Pending',
 }
 
-
-
 export const UserInitialState: UserState = {
   user: {
     type: '',
@@ -30,7 +30,9 @@ export const UserInitialState: UserState = {
     status: UserStatus.PENDING,
   },
   accessToken: '',
-  loginLoading: LoadState['needLoad'],
+  refreshToken: '',
+  fcmToken: '',
+  loginLoading: LoadState.needLoad,
 };
 
 export interface UserEntity {

package/template/src/core/theme/ThemeProvider.tsx

@@ -39,13 +39,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   initialTheme,
 }) => {
   const systemColorScheme = useColorScheme();
+  const resolvedSystem: ThemeMode =
+    systemColorScheme === 'dark' ? 'dark' : 'light';
   const [themeMode, setThemeMode] = useState<ThemeMode>(
-    initialTheme || systemColorScheme || 'light',
+    initialTheme || resolvedSystem,
   );
 
   useEffect(() => {
-    if (!initialTheme && systemColorScheme) {
-      setThemeMode(systemColorScheme);
+    if (!initialTheme) {
+      setThemeMode(systemColorScheme === 'dark' ? 'dark' : 'light');
     }
   }, [systemColorScheme, initialTheme]);
 

package/template/src/core/theme/brand.ts

@@ -0,0 +1,50 @@
+/**
+ * Brand tokens that pair with the color ramps in `colors.ts`.
+ *
+ * Premium "Midnight" black + blue. Gradients are color tuples for
+ * react-native-linear-gradient:
+ *   <LinearGradient colors={BrandGradients.primary} start={GradientDirection.start} end={GradientDirection.end} />
+ * Glow values are ready-to-spread ViewStyle shadows for the elevated, premium look.
+ */
+import {ViewStyle} from 'react-native';
+
+export const BrandColors = {
+  primary: '#2F6BFF',
+  primaryDeep: '#1B45B8',
+  cyan: '#6193FF', // light-blue accent (legacy key name)
+  cyanSoft: '#A6C4FF',
+  violet: '#6353F2',
+  ink: '#06080F',
+  inkSurface: '#0D1124',
+  nearWhite: '#F4F6FE',
+} as const;
+
+export const BrandGradients = {
+  primary: ['#1B45B8', '#3E7BFF'] as string[], // deep blue → bright blue
+  midnight: ['#0A1230', '#1B45B8'] as string[], // blue-black → royal (logo chip)
+  mark: ['#3E7BFF', '#A6C4FF'] as string[], // bright blue → light (logo mark)
+  ink: ['#06080F', '#0D1124'] as string[],
+} as const;
+
+export const GradientDirection = {
+  start: {x: 0, y: 0},
+  end: {x: 1, y: 1},
+} as const;
+
+export const Glow: Record<'primary' | 'cyan' | 'none', ViewStyle> = {
+  primary: {
+    shadowColor: '#2F6BFF',
+    shadowOpacity: 0.5,
+    shadowRadius: 18,
+    shadowOffset: {width: 0, height: 8},
+    elevation: 12,
+  },
+  cyan: {
+    shadowColor: '#3E7BFF',
+    shadowOpacity: 0.4,
+    shadowRadius: 14,
+    shadowOffset: {width: 0, height: 4},
+    elevation: 8,
+  },
+  none: {},
+};

package/template/src/core/theme/colors.ts

@@ -1,114 +1,128 @@
 /**
  * Customize for your brand – this is the only place to change app colors.
+ *
+ * Premium "Midnight" black + blue system. Token KEYS are stable (used across the
+ * app); only the hex values define the brand. Recolor here to rebrand the whole app.
+ * Signature: primary blue #2F6BFF, deep black #06080F, surfaces #0D1124.
+ * See `brand.ts` for the gradient + glow tokens that pair with these.
  */
 export enum PrimaryColors {
-  PlatinateBlue_0 = '#E9EDFF',
-  PlatinateBlue_25 = '#D3DAFF',
-  PlatinateBlue_50 = '#BDC8FF',
-  PlatinateBlue_100 = '#A7B5FF',
-  PlatinateBlue_200 = '#7C91FF',
-  PlatinateBlue_300 = '#506CFF',
-  PlatinateBlue_400 = '#2447FF',
-  PlatinateBlue_500 = '#1D39CC',
-  PlatinateBlue_600 = '#1D39CC',
-  PlatinateBlue_700 = '#0E1C66',
-  cetaceanBlue_0 = '#4C7CEA',
-  cetaceanBlue_25 = '#436FD5',
-  cetaceanBlue_50 = '#3B63BF',
-  cetaceanBlue_100 = '#3257AA',
-  cetaceanBlue_200 = '#223E80',
-  cetaceanBlue_300 = '#112655',
-  cetaceanBlue_400 = '#000D2B',
-  cetaceanBlue_500 = '#000A22',
-  cetaceanBlue_600 = '#00081A',
-  cetaceanBlue_700 = '#000511',
-  strokeDeactive = '#D3DAFF',
+  // Blue ramp (primary). PlatinateBlue_400 is THE primary.
+  PlatinateBlue_0 = '#EAF1FF',
+  PlatinateBlue_25 = '#D6E4FF',
+  PlatinateBlue_50 = '#B6D0FF',
+  PlatinateBlue_100 = '#8FB4FF',
+  PlatinateBlue_200 = '#6193FF',
+  PlatinateBlue_300 = '#3E7BFF',
+  PlatinateBlue_400 = '#2F6BFF',
+  PlatinateBlue_500 = '#2356D6',
+  PlatinateBlue_600 = '#1B45B8',
+  PlatinateBlue_700 = '#143186',
+  // Black ramp (deep navy-black → near-black). cetaceanBlue_700 is the darkest "ink".
+  cetaceanBlue_0 = '#3C4A86',
+  cetaceanBlue_25 = '#344078',
+  cetaceanBlue_50 = '#2C3768',
+  cetaceanBlue_100 = '#232C55',
+  cetaceanBlue_200 = '#1A2142',
+  cetaceanBlue_300 = '#131934',
+  cetaceanBlue_400 = '#0E1228',
+  cetaceanBlue_500 = '#0A0E1F',
+  cetaceanBlue_600 = '#080B16',
+  cetaceanBlue_700 = '#06080F',
+  strokeDeactive = '#C9D6FF',
 }
 
 export enum NaturalColors {
-  background_2 = '#F9F9F9',
-  grayScale_0 = '#FAFAFA',
-  grayScale_25 = '#A3AAAD',
-  grayScale_50 = '#949C9E',
-  grayScale_100 = '#858D8F',
-  grayScale_200 = '#686F72',
-  grayScale_300 = '#4A5254',
-  grayScale_400 = '#2D3436',
-  grayScale_500 = '#242A2B',
-  grayScale_600 = '#1B1F20',
-  grayScale_700 = '#121516',
-  naturalColor_0 = '#9C97B3',
-  naturalColor_25 = '#8E89A4',
-  naturalColor_50 = '#7F7B94',
-  naturalColor_100 = '#716D85',
-  naturalColor_200 = '#555265',
-  naturalColor_300 = '#383646',
-  naturalColor_400 = '#1C1A27',
-  naturalColor_500 = '#16151F',
-  naturalColor_600 = '#111017',
-  naturalColor_700 = '#0B0A10',
+  // Cool neutral ramp. grayScale_0 = white surface, grayScale_700 = black app bg.
+  background_2 = '#F4F6FE',
+  grayScale_0 = '#FFFFFF',
+  grayScale_25 = '#EAEDF7',
+  grayScale_50 = '#D7DCEC',
+  grayScale_100 = '#B8C0DA',
+  grayScale_200 = '#828BB0',
+  grayScale_300 = '#59618A',
+  grayScale_400 = '#343C63',
+  grayScale_500 = '#1A2142',
+  grayScale_600 = '#0D1124',
+  grayScale_700 = '#06080F',
+  // Cool blue-gray tints.
+  naturalColor_0 = '#AAB2DA',
+  naturalColor_25 = '#959ECB',
+  naturalColor_50 = '#808ABA',
+  naturalColor_100 = '#6A74A1',
+  naturalColor_200 = '#4F587E',
+  naturalColor_300 = '#363D5F',
+  naturalColor_400 = '#212744',
+  naturalColor_500 = '#161B36',
+  naturalColor_600 = '#0D1124',
+  naturalColor_700 = '#06080F',
 }
 
 export enum AlertColors {
-  links_0 = '#E8F2FF',
-  links_25 = '#D2E4FE',
-  links_50 = '#BBD7FE',
-  links_100 = '#A5CAFE',
-  links_200 = '#77AFFD',
-  links_300 = '#4A95FD',
-  links_400 = '#1D7AFC',
-  links_500 = '#1762CA',
-  links_600 = '#114997',
-  links_700 = '#0C3165',
-  success_0 = '#C6FFE5',
-  success_25 = '#8FE6BE',
-  success_50 = '#7DDAB0',
-  success_100 = '#6CCEA1',
-  success_200 = '#48B684',
-  success_300 = '#259E67',
-  success_400 = '#02864A',
-  success_500 = '#026B3B',
-  success_600 = '#01502C',
-  success_700 = '#01361E',
-  warning_0 = '#FFF4E8',
-  warning_25 = '#FEE8D1',
-  warning_50 = '#FEDDBA',
-  warning_100 = '#FDD1A3',
-  warning_200 = '#FDBB76',
-  warning_300 = '#FCA448',
-  warning_400 = '#FB8D1A',
-  warning_500 = '#C97115',
-  warning_600 = '#975510',
-  warning_700 = '#64380A',
-  error_0 = '#FDE6EC',
-  error_25 = '#FACED8',
-  error_50 = '#F8B5C5',
-  error_100 = '#F69CB2',
-  error_200 = '#F16B8B',
-  error_300 = '#ED3965',
-  error_400 = '#E8083E',
-  error_500 = '#BA0632',
-  error_600 = '#8B0525',
-  error_700 = '#5D0319',
-  discover_0 = '#F1ECF6',
-  discover_25 = '#E4D9EC',
-  discover_50 = '#D6C5E3',
-  discover_100 = '#C8B2D9',
-  discover_200 = '#AD8CC7',
-  discover_300 = '#9165B4',
-  discover_400 = '#763FA1',
-  discover_500 = '#5E3281',
-  discover_600 = '#472661',
-  discover_700 = '#2F1940',
+  // Links → blue (matches primary).
+  links_0 = '#EAF1FF',
+  links_25 = '#D6E4FF',
+  links_50 = '#B6D0FF',
+  links_100 = '#8FB4FF',
+  links_200 = '#6193FF',
+  links_300 = '#3E7BFF',
+  links_400 = '#2F6BFF',
+  links_500 = '#2356D6',
+  links_600 = '#1B45B8',
+  links_700 = '#143186',
+  // Success → mint/teal.
+  success_0 = '#D8FBF1',
+  success_25 = '#A9F2DC',
+  success_50 = '#7FE8C8',
+  success_100 = '#54DEB3',
+  success_200 = '#2ECE9C',
+  success_300 = '#1DB083',
+  success_400 = '#0E9C72',
+  success_500 = '#0B7D5B',
+  success_600 = '#085E45',
+  success_700 = '#05402F',
+  // Warning → amber.
+  warning_0 = '#FFF5E2',
+  warning_25 = '#FEE6BC',
+  warning_50 = '#FCD795',
+  warning_100 = '#FAC76E',
+  warning_200 = '#F7B845',
+  warning_300 = '#EFA52A',
+  warning_400 = '#D98E1E',
+  warning_500 = '#AE7116',
+  warning_600 = '#835410',
+  warning_700 = '#583809',
+  // Error → vivid red.
+  error_0 = '#FFE7EC',
+  error_25 = '#FFC9D4',
+  error_50 = '#FFA9BB',
+  error_100 = '#FF87A0',
+  error_200 = '#FB5E7F',
+  error_300 = '#ED3D63',
+  error_400 = '#DC2A52',
+  error_500 = '#B11E42',
+  error_600 = '#851632',
+  error_700 = '#590E22',
+  // Discover → blue-violet.
+  discover_0 = '#ECEBFF',
+  discover_25 = '#D6D3FF',
+  discover_50 = '#B7B2FF',
+  discover_100 = '#9990FF',
+  discover_200 = '#7C70FF',
+  discover_300 = '#6353F2',
+  discover_400 = '#4E3FCC',
+  discover_500 = '#3D31A3',
+  discover_600 = '#2C2476',
+  discover_700 = '#1C174D',
 }
 
 export enum BaseColors {
   white = '#FFFFFF',
-  black = '#000000',
-  gray = '#808080',
-  red = '#FF0000',
-  green = '#00FF00',
-  blue = '#0000FF',
-  yellow = '#FFFF00',
-  purple = '#800080',
+  black = '#06080F',
+  gray = '#828BB0',
+  red = '#DC2A52',
+  green = '#0E9C72',
+  blue = '#2F6BFF',
+  yellow = '#D98E1E',
+  purple = '#6353F2',
 }

package/template/src/core/theme/commonConsts.ts

@@ -12,8 +12,8 @@ import DeviceInfo from 'react-native-device-info';
 import {createPerfectSize} from '../../common/utils/createPerfectSize';
 
 const windowDimensions = Dimensions.get('window');
-export const isIos = Platform.OS == 'ios';
-export const isAndroid = Platform.OS == 'android';
+export const isIos = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';
 export const hasDynamicIsland = DeviceInfo.hasDynamicIsland();
 export const hasNotch = DeviceInfo.hasNotch() || hasDynamicIsland;
 export const isIpad = isIos && (Platform as PlatformIOSStatic).isPad;

package/template/src/core/theme/commonStyles.ts

@@ -282,4 +282,4 @@ export const CommonStyles = createThemedStyles({
     lg: 16,
     xl: 24,
   },
-});
+} as unknown as Theme);

package/template/src/core/theme/themes.ts

@@ -212,6 +212,7 @@ export const lightTheme: Theme = {
     ...PrimaryColors,
     ...NaturalColors,
     ...AlertColors,
+    ...lightThemeColors,
   },
   text: {
     ...commonTextStyles,
@@ -371,6 +372,7 @@ export const darkTheme: Theme = {
     ...PrimaryColors,
     ...NaturalColors,
     ...AlertColors,
+    ...darkThemeColors,
   },
   text: {
     ...commonTextStyles,

package/template/src/core/theme/types.ts

@@ -1,6 +1,5 @@
 import {TextStyle} from 'react-native';
 import {ElevationShadow} from './shadows';
-import {PrimaryColors, NaturalColors, AlertColors} from './colors';
 
 export type ThemeMode = 'light' | 'dark';
 
@@ -133,7 +132,10 @@ export interface ISize {
 
 export interface Theme {
   mode: ThemeMode;
-  colors: typeof PrimaryColors & typeof NaturalColors & typeof AlertColors;
+  // Raw color-scale keys (PlatinateBlue_*, grayScale_*, …) plus the semantic
+  // aliases (white, indigoBlue, surface, card, shadow, background, …) the
+  // themes spread in. Indexed as string so both kinds of key are accessible.
+  colors: Record<string, string>;
   text: {
     // Almarai Design System Typography
     // Headings

package/template/src/core/utils/stringUtils.ts

@@ -20,7 +20,7 @@ export const ensureString = (value: any): string => {
 
       // Otherwise stringify the object
       return JSON.stringify(value);
-    } catch (e) {
+    } catch {
       return '[Object]';
     }
   }

package/template/src/design-system/index.ts

@@ -0,0 +1,2 @@
+export * from './tokens';
+export { useTheme, ThemeProvider } from '../core/theme/ThemeProvider';

package/template/src/design-system/tokens/brand.ts

@@ -0,0 +1,6 @@
+export {
+  BrandColors,
+  BrandGradients,
+  GradientDirection,
+  Glow,
+} from '../../core/theme/brand';