@campxdev/campx-web-utils 1.1.9 → 1.2.1

package/src/config/axios.ts

@@ -0,0 +1,146 @@
+import Axios from 'axios';
+import Cookies from 'js-cookie';
+import { ApplicationStore } from '../context/application-store';
+import { institutionCode, isDevelopment, tenantCode } from '../utils/constants';
+
+// Declare the extended axios types to include our custom property
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    skipInstitutionCode?: boolean;
+  }
+}
+
+declare global {
+  interface ImportMeta {
+    env: {
+      VITE_APP_API_HOST?: string;
+      // Add other Vite environment variables as needed
+    };
+  }
+}
+
+// Get base URL from environment variables
+const getBaseUrl = (): string => {
+  // For Vite
+  if (typeof import.meta !== 'undefined' && import.meta.env) {
+    return import.meta.env.VITE_APP_API_HOST || '';
+  }
+
+  // For Create React App
+  return process.env.REACT_APP_API_HOST || '';
+};
+
+// Format query parameters
+const formatParams = (params: any) => {
+  return Object.fromEntries(
+    Object.entries(params ?? {}).map(([key, value]) => [
+      key,
+      value === '__empty__' ? '' : value,
+    ]),
+  );
+};
+
+// Create axios instance
+export const axios = Axios.create({
+  baseURL: getBaseUrl(),
+  withCredentials: true,
+  headers: {
+    'x-tenant-id': tenantCode,
+    'x-institution-code': institutionCode,
+  },
+});
+
+// Request interceptor
+axios.interceptors.request.use(
+  (config) => {
+    // Format query parameters
+    const params = formatParams(config?.params);
+
+    // Add session tokens from cookies if in development
+    const sessionKey = Cookies.get('campx_session_key');
+    const openPaymentsKey = Cookies.get('campx_open_payments_key');
+    const studentSessionKey = Cookies.get('campx_student_key');
+
+    if (isDevelopment && sessionKey) {
+      config.headers.set('campx_session_key', sessionKey);
+    }
+
+    if (isDevelopment && studentSessionKey) {
+      config.headers.set('campx_student_key', studentSessionKey);
+    }
+
+    if (openPaymentsKey) {
+      config.headers.set('campx_open_payments_key', openPaymentsKey);
+    }
+
+    // Skip sending X-institution-code if the flag is set
+    if (config.skipInstitutionCode) {
+      config.headers.delete('x-institution-code');
+    }
+
+    return {
+      ...config,
+      params,
+    };
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+// Response interceptor
+axios.interceptors.response.use(
+  (response) => {
+    // Check if the response has hideSnackbar property
+    const shouldHideSnackbar = response.data?.hideSnackbar === true;
+
+    // Handle successful responses
+    if (
+      !shouldHideSnackbar &&
+      response.config.method &&
+      ['put', 'post', 'delete', 'patch'].includes(response.config.method) &&
+      [200, 201, 202].includes(response.status)
+    ) {
+      // Use ApplicationStore for snackbar
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = response.data.message || 'Operation successful';
+        s.snackbar.severity = 'success';
+      });
+    }
+
+    return response;
+  },
+  (err) => {
+    // Check if the error response has hideSnackbar property
+    const shouldHideSnackbar = err.response?.data?.hideSnackbar === true;
+
+    // Handle error responses
+    if (!shouldHideSnackbar && [400, 422].includes(err.response?.status)) {
+      // Use ApplicationStore for error snackbar
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message || 'Bad Request';
+        s.snackbar.severity = 'error';
+      });
+    }
+
+    if (
+      !shouldHideSnackbar &&
+      err.response?.config.method &&
+      ['put', 'post', 'delete', 'patch'].includes(err.response.config.method) &&
+      [404].includes(err.response.status)
+    ) {
+      // Use ApplicationStore for not found error snackbar
+      ApplicationStore.update((s) => {
+        s.snackbar.open = true;
+        s.snackbar.message = err.response.data.message || 'Not Found';
+        s.snackbar.severity = 'error';
+      });
+    }
+
+    return Promise.reject(err);
+  },
+);
+
+export default axios;

package/src/context/ConfirmDialogProvider.tsx

@@ -0,0 +1,78 @@
+import { ConfirmDialog, ConfirmDialogType } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
+
+interface ConfirmStateProps {
+  showConfirmDialog: (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type?: ConfirmDialogType,
+    confirmButtonText?: string,
+    cancelButtonText?: string,
+  ) => void;
+}
+
+const ConfirmContext = createContext<ConfirmStateProps>({
+  showConfirmDialog: () => {},
+});
+
+export const ConfirmDialogProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const confirmDialog = ApplicationStore.useState((s) => s.confirmDialog);
+
+  const showConfirmDialog = (
+    title: string,
+    message: string,
+    onConfirm: () => void,
+    onCancel: () => void,
+    type: ConfirmDialogType = 'confirm',
+    confirmButtonText?: string,
+    cancelButtonText?: string,
+  ) => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog = {
+        isOpen: true,
+        title,
+        message,
+        onConfirm,
+        onCancel,
+        type,
+        confirmButtonText,
+        cancelButtonText,
+      };
+    });
+  };
+
+  const handleCloseDialog = () => {
+    ApplicationStore.update((s) => {
+      s.confirmDialog.isOpen = false;
+    });
+  };
+
+  return (
+    <ConfirmContext.Provider value={{ showConfirmDialog }}>
+      {children}
+      <ConfirmDialog
+        isOpen={confirmDialog.isOpen}
+        title={confirmDialog.title}
+        message={confirmDialog.message}
+        type={confirmDialog.type}
+        confirmButtonText={confirmDialog.confirmButtonText}
+        cancelButtonText={confirmDialog.cancelButtonText}
+        onConfirm={() => {
+          confirmDialog.onConfirm();
+          handleCloseDialog();
+        }}
+        onCancel={() => {
+          confirmDialog.onCancel();
+          handleCloseDialog();
+        }}
+      />
+    </ConfirmContext.Provider>
+  );
+};

package/src/context/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,131 @@
+import {
+  Button,
+  Dialog,
+  InternalServerError,
+  NoInterneConnection,
+  ResourceNotFound,
+  UnAuthorized,
+} from '@campxdev/react-blueprint';
+import { Alert, Box, styled } from '@mui/material';
+import Cookies from 'js-cookie';
+import { ReactNode, useState } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { QueryErrorResetBoundary } from 'react-query';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Login } from './Login';
+
+export type ErrorBoundaryProps = {
+  children: ReactNode;
+};
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+  height: '60px',
+  border: `1px solid ${theme.palette.error.main}`,
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiAlert-message': {
+    padding: 0,
+  },
+  '& .MuiTypography-root': {
+    margin: 0,
+  },
+  position: 'relative',
+  '& .retryBtn': {
+    color: '#661B2A',
+    position: 'absolute',
+    right: 8,
+    top: 8,
+  },
+}));
+
+export const ErrorBoundary = (props: ErrorBoundaryProps) => {
+  const location = useLocation();
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={location?.pathname}
+          onReset={reset}
+          FallbackComponent={ErrorFallback}
+        >
+          {props.children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};
+
+const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
+  if (error?.response?.status) {
+    switch (error?.response?.status) {
+      case 401:
+        return <UnAuth />;
+
+      case 500:
+        return <InternalServerError resetBoundary={resetErrorBoundary} />;
+      case 404:
+        return <ResourceNotFound message={error?.response?.data?.message} />;
+    }
+  }
+
+  if (error?.code === 'ERR_NETWORK') {
+    return <NoInterneConnection resetBoundary={resetErrorBoundary} />;
+  }
+
+  return (
+    <Box sx={{ marginTop: '16px', padding: '20px' }}>
+      <StyledAlert severity="error">
+        {error?.response?.data?.message ?? error?.message}
+        <Button
+          className="retryBtn"
+          onClick={() => resetErrorBoundary()}
+          size="small"
+          color="error"
+          variant="outlined"
+        >
+          Try Again
+        </Button>
+      </StyledAlert>
+    </Box>
+  );
+};
+
+const UnAuth = () => {
+  const navigate = useNavigate();
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const sessionCookie = Cookies.get('campx_session_key');
+
+  const handleLoginClick = () => {
+    if (window.location.hostname.split('.')[1] === 'localhost') {
+      setModalOpen(true);
+    } else {
+      if (!sessionCookie) {
+        navigate('/auth/login');
+      }
+    }
+  };
+
+  return (
+    <UnAuthorized
+      component={
+        <>
+          <Button
+            sx={{
+              marginTop: '20px',
+            }}
+            variant="contained"
+            onClick={handleLoginClick}
+          >
+            Click Here To Login
+          </Button>
+          <Dialog
+            open={isModalOpen}
+            onClose={() => setModalOpen(false)}
+            content={({ close }) => <Login close={close} />}
+          />
+        </>
+      }
+    />
+  );
+};

package/src/context/ErrorBoundary/Login.tsx

@@ -0,0 +1,206 @@
+import { Button, Icons, TextField } from '@campxdev/react-blueprint';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Box, Stack } from '@mui/material';
+import DeviceDetector from 'device-detector-js';
+import Cookies from 'js-cookie';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useMutation } from 'react-query';
+
+import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+import { axios } from '../../config/axios';
+import { isDevelopment } from '../../utils/constants';
+
+type DeviceInformation = {
+  deviceType: string;
+  clientName: string;
+  os: string;
+  osVersion: string;
+  latitude: number | null;
+  longitude: number | null;
+  tokenType: string;
+};
+
+export type DeviceState = {
+  deviceInformation: DeviceInformation;
+  isLocationAllowed: boolean;
+};
+
+type LoginDetails = {
+  username: string;
+  password: string;
+};
+
+const performLogin = async (body: any) => {
+  if (!body.latitude || !body.longitude) {
+    const response = await fetch(
+      'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyB2YCpo1yi107RYj1LdZu2DCcpcO93reFY',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          considerIp: 'true',
+        }),
+      },
+    );
+    const data = await response.json();
+    body.latitude = data.location.lat;
+    body.longitude = data.location.lng;
+  }
+  return axios.post(`/auth-server/auth-v2/login`, body).then((res) => res.data);
+};
+
+const validationSchema = Yup.object().shape({
+  username: Yup.string().required('Username is required'),
+  password: Yup.string().required('Password is required'),
+});
+
+export const Login = ({ close }: { close: () => void }) => {
+  const [deviceState, setDeviceState] = useState<DeviceState>({
+    deviceInformation: {
+      deviceType: 'browser',
+      clientName: 'unknown',
+      os: 'unknown',
+      osVersion: 'unknown',
+      latitude: null,
+      longitude: null,
+      tokenType: 'WEB',
+    },
+    isLocationAllowed: true,
+  });
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setDeviceState((s) => ({
+        ...s,
+        deviceInformation: {
+          ...s.deviceInformation,
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        },
+      }));
+    });
+    navigator.permissions
+      .query({ name: 'geolocation' })
+      .then((permissionStatus) => {
+        if (permissionStatus.state === 'denied') {
+          setDeviceState((s) => ({
+            ...s,
+            isLocationAllowed: false,
+          }));
+        }
+      });
+
+    const detector = new DeviceDetector();
+    const deviceInfo = detector.parse(navigator.userAgent);
+    setDeviceState((s) => ({
+      ...s,
+      deviceInformation: {
+        ...s.deviceInformation,
+        clientName: deviceInfo.client?.name || s.deviceInformation.clientName,
+        os: deviceInfo.os?.name || s.deviceInformation.os,
+        osVersion: deviceInfo.os?.version || s.deviceInformation.osVersion,
+      },
+    }));
+  }, []);
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm<LoginDetails>({
+    resolver: yupResolver(validationSchema),
+  });
+
+  const { mutate, isLoading } = useMutation(performLogin, {
+    onSuccess(data) {
+      if (isDevelopment) {
+        Cookies.remove('campx_session_key');
+        Cookies.set('campx_session_key', data.session.token);
+        close();
+        navigate(`/${data.session.institutionCode}/workspace`);
+        window.location.reload();
+      }
+    },
+  });
+
+  const onSubmit = async (body: LoginDetails) => {
+    mutate({
+      ...body,
+      ...deviceState.deviceInformation,
+      loginId: body.username,
+      loginType: 'USER',
+    });
+  };
+
+  return (
+    <>
+      <Stack gap="16px" justifyContent="space-between" alignItems="center">
+        <Box height="36px" width="194.8px">
+          <Icons.CampxFullLogoIcon />
+        </Box>
+        <Stack gap="10px" justifyContent="center" alignItems="center">
+          <Controller
+            control={control}
+            render={({ field }: { field: any }) => {
+              return (
+                <TextField
+                  size="medium"
+                  name="username"
+                  sx={{
+                    width: '400px',
+                  }}
+                  placeholder="Enter Username or Email"
+                  containerProps={{ my: '0' }}
+                  onChange={field.onChange}
+                  label="Username or Email"
+                  error={!!errors.username}
+                  required
+                />
+              );
+            }}
+            name="username"
+          />
+          <Controller
+            control={control}
+            render={({ field }: { field: any }) => {
+              return (
+                <TextField
+                  size="medium"
+                  name="password"
+                  sx={{
+                    width: '400px',
+                  }}
+                  placeholder="Enter password"
+                  onChange={field.onChange}
+                  containerProps={{ my: '0' }}
+                  label="Password"
+                  type="password"
+                  error={!!errors.password}
+                  required
+                />
+              );
+            }}
+            name="password"
+          />
+          <Button
+            type="submit"
+            color="primary"
+            variant="contained"
+            sx={{
+              width: '400px',
+            }}
+            onClick={handleSubmit(onSubmit)}
+            disabled={isLoading}
+            loading={isLoading}
+          >
+            Login
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  );
+};

package/src/context/Providers.tsx

@@ -0,0 +1,76 @@
+import { lightTheme, MuiThemeProvider } from '@campxdev/react-blueprint';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import {
+  combineReducers,
+  configureStore,
+  ReducersMapObject,
+} from '@reduxjs/toolkit';
+import { ReactNode, useEffect } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { institutionCode, tenantCode, workspace } from '../utils/constants';
+import { ConfirmDialogProvider } from './ConfirmDialogProvider';
+import { SnackbarProvider } from './SnackbarProvider';
+
+// We'll add this export to ensure Router is properly exported
+export { BrowserRouter } from 'react-router-dom';
+
+export const Providers = ({
+  children,
+  basename,
+  theme = lightTheme,
+  reducers = {},
+}: {
+  children: ReactNode;
+  basename?: string;
+  theme?: any;
+  reducers?: ReducersMapObject;
+}) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: false,
+        useErrorBoundary: true,
+      },
+    },
+  });
+
+  var baseName =
+    tenantCode && institutionCode && workspace
+      ? `/${institutionCode}/${workspace}`
+      : '/';
+  useEffect(() => {
+    if (
+      window.location.pathname === '/' &&
+      institutionCode &&
+      workspace &&
+      tenantCode
+    ) {
+      window.location.replace(
+        window.location.origin + `/${institutionCode}/${workspace}`,
+      );
+    }
+  }, [institutionCode, tenantCode, workspace]);
+
+  const store = configureStore({
+    reducer: combineReducers(reducers),
+  });
+  return (
+    <Provider store={store}>
+      <BrowserRouter basename={basename ?? baseName}>
+        <QueryClientProvider client={queryClient}>
+          <MuiThemeProvider theme={theme}>
+            <SnackbarProvider>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <ConfirmDialogProvider>{children}</ConfirmDialogProvider>
+              </LocalizationProvider>
+            </SnackbarProvider>
+          </MuiThemeProvider>
+        </QueryClientProvider>
+      </BrowserRouter>
+    </Provider>
+  );
+};

package/src/context/SnackbarProvider.tsx

@@ -0,0 +1,42 @@
+import { Severity, Snackbar } from '@campxdev/react-blueprint';
+import { createContext, ReactNode } from 'react';
+import { ApplicationStore } from './application-store';
+
+interface SnackbarContextProps {
+  showSnackbar: (message: string, severity?: Severity) => void;
+}
+
+const SnackbarContext = createContext<SnackbarContextProps | undefined>(
+  undefined,
+);
+
+interface SnackbarProviderProps {
+  children: ReactNode;
+}
+
+export const SnackbarProvider = ({ children }: SnackbarProviderProps) => {
+  const snackbar = ApplicationStore.useState((s) => s.snackbar);
+  const showSnackbar = (message: string, severity: Severity = 'info') => {
+    ApplicationStore.update((s) => {
+      s.snackbar.open = true;
+      s.snackbar.message = message;
+      s.snackbar.severity = severity;
+    });
+  };
+  return (
+    <SnackbarContext.Provider value={{ showSnackbar }}>
+      {children}
+      <Snackbar
+        open={snackbar.open}
+        message={snackbar.message}
+        severity={snackbar.severity}
+        autoHideDuration={1500}
+        onClose={() => {
+          ApplicationStore.update((s) => {
+            s.snackbar.open = false;
+          });
+        }}
+      />
+    </SnackbarContext.Provider>
+  );
+};