@digitaldefiance/express-suite-react-components 2.9.37 → 2.9.38

package/src/components/CurrencyInput.tsx

@@ -0,0 +1,80 @@
+import { TextField } from '@mui/material';
+import { NumericFormat } from 'react-number-format';
+import { getCurrencyFormat } from '@digitaldefiance/i18n-lib';
+
+export interface CurrencyInputProps {
+  value: number;
+  onChange: (value: number) => void;
+  currencyCode?: string;
+  locale?: string;
+  label: string;
+  error?: boolean;
+  helperText?: string;
+  name: string;
+}
+
+export const CurrencyInput: React.FC<CurrencyInputProps> = ({
+  value,
+  onChange,
+  currencyCode = 'USD',
+  locale = 'en-US',
+  label,
+  error,
+  helperText,
+  name,
+}) => {
+  const format = getCurrencyFormat(locale, currencyCode);
+
+  if (format.position === 'infix') {
+    const [whole, decimal] = value.toString().split('.');
+    const displayValue = `${whole}${format.symbol}${format.decimalSeparator}${
+      decimal || '00'
+    }`;
+
+    return (
+      <NumericFormat
+        customInput={TextField}
+        fullWidth
+        margin="normal"
+        label={label}
+        value={displayValue}
+        thousandSeparator={format.groupSeparator}
+        decimalSeparator={format.decimalSeparator}
+        decimalScale={2}
+        fixedDecimalScale
+        valueIsNumericString
+        onValueChange={(values) => {
+          onChange(values.floatValue || 0);
+        }}
+        error={error}
+        helperText={helperText}
+        name={name}
+      />
+    );
+  }
+
+  return (
+    <NumericFormat
+      customInput={TextField}
+      fullWidth
+      margin="normal"
+      label={label}
+      value={value}
+      thousandSeparator={format.groupSeparator}
+      decimalSeparator={format.decimalSeparator}
+      decimalScale={2}
+      fixedDecimalScale
+      prefix={format.position === 'prefix' ? format.symbol + ' ' : undefined}
+      suffix={format.position === 'postfix' ? ' ' + format.symbol : undefined}
+      valueIsNumericString
+      onValueChange={(values) => {
+        onChange(values.floatValue || 0);
+      }}
+      error={error}
+      helperText={helperText}
+      name={name}
+    />
+  );
+};
+
+export default CurrencyInput;

package/src/components/DashboardPage.tsx

@@ -0,0 +1,24 @@
+import { Box, Container, Typography } from '@mui/material';
+import { FC, ReactNode } from 'react';
+
+export interface DashboardPageProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+export const DashboardPage: FC<DashboardPageProps> = ({ title = 'Dashboard', children }) => {
+  return (
+    <Container maxWidth="md">
+      <Box my={4}>
+        <Typography variant="h4" component="h1" gutterBottom align="center">
+          {title}
+        </Typography>
+        <Box display="flex" justifyContent="center" mt={3}>
+          {children}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default DashboardPage;

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,92 @@
+import { Box, Fade, IconButton, Menu, MenuItem } from '@mui/material';
+import { FC, MouseEvent, ReactElement, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MenuType } from '../types/MenuType';
+import { IMenuOption } from '../interfaces/IMenuOption';
+import { useMenu } from '../contexts/MenuContext';
+
+interface DropdownMenuProps {
+  menuType: MenuType;
+  menuIcon: ReactElement;
+}
+
+export const DropdownMenu: FC<DropdownMenuProps> = ({ menuType, menuIcon }) => {
+  const { getMenuOptions } = useMenu();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const navigate = useNavigate();
+  const handleClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleMenuItemClick = useCallback(
+    (option: IMenuOption) => (event: React.MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+      if (option.action) {
+        option.action();
+      } else if (option.link !== undefined) {
+        if (
+          typeof option.link === 'object' &&
+          'pathname' in option.link &&
+          'state' in option.link
+        ) {
+          navigate(option.link.pathname, { state: option.link.state });
+        } else {
+          navigate(option.link);
+        }
+      }
+      handleClose(); // Call handleClose after handling the click
+    },
+    [navigate, handleClose], // Add handleClose to the dependency array
+  );
+
+  const handleClick = useCallback((event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+
+  const menuItems = getMenuOptions(menuType, false);
+
+  if (menuItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <IconButton color="inherit" onClick={handleClick}>
+        {menuIcon}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        TransitionComponent={Fade}
+        sx={{
+          '& .MuiPopover-paper': {
+            opacity: 0.5,
+            overflow: 'visible',
+          },
+        }}
+      >
+        {menuItems.map((option) => (
+          <MenuItem
+            key={option.id}
+            component="li"
+            onClick={handleMenuItemClick(option)}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              '& > svg': {
+                marginRight: 2,
+                width: 24,
+                height: 24,
+              },
+            }}
+          >
+            {option.icon}
+            {option.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+};
+
+export default DropdownMenu;

package/src/components/ExpirationSecondsSelector.tsx

@@ -0,0 +1,60 @@
+import { MenuItem, TextField } from '@mui/material';
+import { FormikProps } from 'formik';
+import { ChangeEvent, FC } from 'react';
+
+export interface ExpirationSecondsSelectorProps<T = Record<string, unknown>> {
+  name: string;
+  label: string;
+  formik: FormikProps<T>;
+  optionValues: number[];
+  optionNames: string[];
+  onChange?: (value: number) => void;
+}
+
+export const ExpirationSecondsSelector: FC<
+  ExpirationSecondsSelectorProps<Record<string, unknown>>
+> = ({ name, label, formik, optionValues, optionNames, onChange }) => {
+  return (
+    <TextField
+      select
+      fullWidth
+      label={label}
+      name={name}
+      value={formik.values[name] ?? ''}
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        const selectedValue = event.target.value;
+        formik.setFieldValue(name, selectedValue);
+        if (onChange) {
+          onChange(parseInt(selectedValue));
+        }
+      }}
+      error={formik.touched[name] && Boolean(formik.errors[name])}
+      helperText={formik.touched[name] && (formik.errors[name] as string)}
+      sx={{
+        mt: 1,
+        '& .MuiSelect-select': {
+          paddingRight: '32px',
+        },
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderColor: 'rgba(0, 0, 0, 0.23)',
+          },
+          '&:hover fieldset': {
+            borderColor: 'rgba(0, 0, 0, 0.87)',
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'primary.main',
+          },
+        },
+      }}
+    >
+      {optionNames.map((name: string, index: number) => (
+        <MenuItem key={name} value={optionValues[index]}>
+          {name}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+export default ExpirationSecondsSelector;

package/src/components/Flag.tsx

@@ -0,0 +1,52 @@
+import { getFlagCode } from '@digitaldefiance/suite-core-lib';
+import { Box, SxProps, Theme } from '@mui/material';
+import { FC } from 'react';
+
+export interface FlagProps {
+  language: string;
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * A simple component to display a flag icon for a given language.
+ *
+ * Props:
+ *   language: The language to display a flag for, as a StringLanguages enum value.
+ *   sx: Optional styles to apply to the component.
+ *
+ * Returns a Box component with an SVG flag icon from flagcdn.com as a ::before pseudo-element.
+ * The flag is sized to 1.5rem by default, but can be overridden by passing a custom sx prop.
+ * The component also includes an aria-label for accessibility, set to `Flag for <language>`.
+ */
+export const Flag: FC<FlagProps> = ({ language, sx }) => {
+  const flagContent = getFlagCode(language);
+  if (!flagContent) {
+    return null;
+  }
+  return (
+    <Box
+      component="span"
+      aria-label={`Flag for ${language}`}
+      sx={{
+        fontSize: '1.5rem',
+        lineHeight: 1,
+        verticalAlign: 'middle',
+        '&::before': {
+          content: `" "`,
+          display: 'inline-block',
+          width: '1em',
+          height: '1em',
+          backgroundImage: `url(https://flagcdn.com/${flagContent.toLowerCase()}.svg)`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          border: '1px solid rgba(0, 0, 0, 0.1)',
+          borderRadius: '2px',
+        },
+        ...sx,
+      }}
+    />
+  );
+};
+
+export default Flag;

package/src/components/ForgotPasswordForm.tsx

@@ -0,0 +1,173 @@
+import {
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { useI18n } from '../contexts';
+
+export interface ForgotPasswordFormValues {
+  email: string;
+}
+
+export interface ForgotPasswordFormProps {
+  onSubmit: (values: ForgotPasswordFormValues) => Promise<void>;
+  emailValidation?: Yup.StringSchema;
+  labels?: {
+    title?: string;
+    email?: string;
+    sendResetLink?: string;
+    successMessage?: string;
+  };
+}
+
+export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
+  onSubmit,
+  emailValidation,
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [success, setSuccess] = useState(false);
+  const [apiError, setApiError] = useState<string>('');
+
+  const validation = {
+    email:
+      emailValidation ||
+      Yup.string()
+        .email(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_InvalidEmail
+          )
+        )
+        .required(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          )
+        ),
+  };
+
+  const translatedLabels = {
+    title:
+      labels.title ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.ForgotPassword_Title
+      ),
+    email:
+      labels.email ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Email
+      ),
+    sendResetLink:
+      labels.sendResetLink ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.ForgotPassword_SendResetLink
+      ),
+    successMessage:
+      labels.successMessage ||
+      tComponent<SuiteCoreStringKey>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.PasswordReset_Success
+      ),
+  };
+
+  const formik = useFormik<ForgotPasswordFormValues>({
+    initialValues: {
+      email: '',
+    },
+    validationSchema: Yup.object({
+      email: validation.email,
+    }),
+    onSubmit: async (values) => {
+      try {
+        await onSubmit(values);
+        setSuccess(true);
+        setApiError('');
+      } catch (error: unknown) {
+        const err = error as { response?: { data?: { message?: string } } };
+        setApiError(
+          err.response?.data?.message ||
+            tComponent<SuiteCoreStringKey>(
+              SuiteCoreComponentId,
+              SuiteCoreStringKey.ForgotPassword_Error
+            )
+        );
+        setSuccess(false);
+      }
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {translatedLabels.title}
+        </Typography>
+
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          sx={{ mt: 1, width: '100%' }}
+        >
+          <TextField
+            fullWidth
+            id="email"
+            name="email"
+            label={translatedLabels.email}
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.email && formik.errors.email)}
+            helperText={formik.touched.email && formik.errors.email}
+            margin="normal"
+          />
+
+          {apiError && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiError}
+            </Alert>
+          )}
+
+          {success && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {translatedLabels.successMessage}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {translatedLabels.sendResetLink}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default ForgotPasswordForm;