@digitaldefiance/express-suite-react-components 2.9.1 → 2.9.3

package/src/components/BackupCodesForm.tsx

@@ -0,0 +1,198 @@
+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 { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface BackupCodesFormValues {
+  password?: string;
+  mnemonic?: string;
+}
+
+export interface BackupCodesFormProps {
+  onSubmit: (values: BackupCodesFormValues) => Promise<{
+    message: string;
+    backupCodes: string[];
+  }>;
+  backupCodesRemaining?: number | null;
+  mnemonicValidation?: Yup.StringSchema;
+  passwordValidation?: Yup.StringSchema;
+  labels?: {
+    title?: string;
+    codesRemaining?: string;
+    mnemonic?: string;
+    password?: string;
+    generateButton?: string;
+    successTitle?: string;
+  };
+}
+
+export const BackupCodesForm: FC<BackupCodesFormProps> = ({
+  onSubmit,
+  backupCodesRemaining = null,
+  mnemonicValidation,
+  passwordValidation,
+  labels = {},
+}) => {
+  const { t, tComponent } = useI18n();
+  const [apiError, setApiError] = useState<string | null>(null);
+  const [apiSuccess, setApiSuccess] = useState<string | null>(null);
+  const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
+
+  const validation = {
+    mnemonic: mnemonicValidation || Yup.string()
+      .trim()
+      .matches(Constants.MnemonicRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_MnemonicRegex))
+      .optional(),
+    password: passwordValidation || Yup.string()
+      .trim()
+      .matches(Constants.PasswordRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate))
+      .optional(),
+  };
+
+  const translatedLabels = {
+    codesRemaining: labels.codesRemaining || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate),
+    mnemonic: labels.mnemonic || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Mnemonic),
+    password: labels.password || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Password),
+    generateButton: labels.generateButton || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes),
+    successTitle: labels.successTitle || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.BackupCodeRecovery_YourNewCodes),
+    xorError: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_MnemonicOrPasswordRequired),
+    unexpectedError: tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UnexpectedError),
+  };
+
+  const validationSchema = Yup.object({
+    mnemonic: validation.mnemonic,
+    password: validation.password,
+  })
+    .test('xor-mnemonic-password-mnemonic', translatedLabels.xorError, function (value) {
+      const mnemonic = value?.mnemonic?.trim() ?? '';
+      const password = value?.password?.trim() ?? '';
+      const hasMnemonic = mnemonic.length > 0;
+      const hasPassword = password.length > 0;
+
+      if (!hasMnemonic && !hasPassword) {
+        return this.createError({
+          path: 'mnemonic',
+          message: translatedLabels.xorError,
+        });
+      }
+      if (hasMnemonic && hasPassword) {
+        return this.createError({
+          path: 'mnemonic',
+          message: translatedLabels.xorError,
+        });
+      }
+      return true;
+    })
+    .test('xor-mnemonic-password-password', translatedLabels.xorError, function (value) {
+      const mnemonic = value?.mnemonic?.trim() ?? '';
+      const password = value?.password?.trim() ?? '';
+      const hasMnemonic = mnemonic.length > 0;
+      const hasPassword = password.length > 0;
+
+      if (!hasMnemonic && !hasPassword) {
+        return this.createError({
+          path: 'password',
+          message: translatedLabels.xorError,
+        });
+      }
+      if (hasMnemonic && hasPassword) {
+        return this.createError({
+          path: 'password',
+          message: translatedLabels.xorError,
+        });
+      }
+      return true;
+    });
+
+  const formik = useFormik<BackupCodesFormValues>({
+    initialValues: {
+      password: '',
+      mnemonic: '',
+    },
+    validationSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      try {
+        const result = await onSubmit(values);
+        if (result && result.backupCodes) {
+          setApiSuccess(translatedLabels.successTitle);
+          setBackupCodes(result.backupCodes);
+        }
+        if (result && result.message) {
+          setApiSuccess(result.message);
+        }
+        setApiError(null);
+      } catch (e: any) {
+        setApiSuccess(null);
+        setApiError(e.response?.data?.message ?? translatedLabels.unexpectedError);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+  });
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box>
+        <Typography component="h1" variant="h5">
+          {translatedLabels.codesRemaining.replace('{count}', String(backupCodesRemaining ?? 0))}
+        </Typography>
+      </Box>
+      <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+        <TextField
+          margin="normal"
+          fullWidth
+          id="mnemonic"
+          label={translatedLabels.mnemonic}
+          type="password"
+          name="mnemonic"
+          autoComplete="mnemonic"
+          autoFocus
+          value={formik.values.mnemonic}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          error={(formik.touched.mnemonic || formik.submitCount > 0) && Boolean(formik.errors.mnemonic)}
+          helperText={(formik.touched.mnemonic || formik.submitCount > 0) && formik.errors.mnemonic}
+        />
+        <TextField
+          margin="normal"
+          fullWidth
+          name="password"
+          label={translatedLabels.password}
+          type="password"
+          id="password"
+          value={formik.values.password}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          error={(formik.touched.password || formik.submitCount > 0) && Boolean(formik.errors.password)}
+          helperText={(formik.touched.password || formik.submitCount > 0) && formik.errors.password}
+        />
+        <Button type="submit" fullWidth variant="contained" sx={{ mt: 2 }}>
+          {translatedLabels.generateButton}
+        </Button>
+      </Box>
+      {apiError && (
+        <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+          {apiError}
+        </Alert>
+      )}
+      {backupCodes && apiSuccess && (
+        <Box sx={{ mt: 2, mb: 2 }}>
+          <Typography component="h2" variant="h6">
+            {apiSuccess}
+          </Typography>
+          <ul>
+            {backupCodes.map((code, index) => (
+              <li key={index}>
+                <pre>{code}</pre>
+              </li>
+            ))}
+          </ul>
+        </Box>
+      )}
+    </Container>
+  );
+};
+
+export default BackupCodesForm;

package/src/components/ChangePasswordForm.tsx

@@ -0,0 +1,182 @@
+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 { Constants, SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface ChangePasswordFormValues {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export interface ChangePasswordFormProps {
+  onSubmit: (values: ChangePasswordFormValues) => Promise<{ success?: boolean; error?: string }>;
+  titleText?: string;
+  currentPasswordLabel?: string;
+  newPasswordLabel?: string;
+  confirmPasswordLabel?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  successMessage?: string;
+  currentPasswordValidation?: Yup.StringSchema;
+  newPasswordValidation?: Yup.StringSchema;
+  confirmPasswordValidation?: Yup.StringSchema;
+}
+
+export const ChangePasswordForm: FC<ChangePasswordFormProps> = ({
+  onSubmit,
+  titleText,
+  currentPasswordLabel,
+  newPasswordLabel,
+  confirmPasswordLabel,
+  submitButtonText,
+  submittingButtonText,
+  successMessage,
+  currentPasswordValidation,
+  newPasswordValidation,
+  confirmPasswordValidation,
+}) => {
+  const { t, tComponent } = useI18n();
+  const [success, setSuccess] = useState(false);
+  const [apiError, setApiError] = useState<string>('');
+
+  const validation = {
+    currentPassword: currentPasswordValidation || Yup.string().required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    newPassword: newPasswordValidation || Yup.string()
+      .min(Constants.PasswordMinLength, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMinLengthTemplate))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    confirmPassword: confirmPasswordValidation || Yup.string()
+      .oneOf([Yup.ref('newPassword')], tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_PasswordMatch))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+  };
+
+  const labels = {
+    title: titleText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangePassword),
+    currentPassword: currentPasswordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_CurrentPassword),
+    newPassword: newPasswordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_NewPassword),
+    confirmPassword: confirmPasswordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ConfirmNewPassword),
+    submitButton: submitButtonText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangePassword),
+    submittingButton: submittingButtonText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_ChangingPassword),
+    success: successMessage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordChange_Success),
+  };
+
+  const formik = useFormik<ChangePasswordFormValues>({
+    initialValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+    validationSchema: Yup.object({
+      currentPassword: validation.currentPassword,
+      newPassword: validation.newPassword,
+      confirmPassword: validation.confirmPassword,
+    }),
+    onSubmit: async (values, { resetForm }) => {
+      const result = await onSubmit(values);
+
+      if ('success' in result) {
+        setSuccess(true);
+        setApiError('');
+        resetForm();
+      } else if ('error' in result && result.error) {
+        setApiError(result.error);
+        setSuccess(false);
+      }
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {labels.title}
+        </Typography>
+
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          <TextField
+            fullWidth
+            id="currentPassword"
+            name="currentPassword"
+            label={labels.currentPassword}
+            type="password"
+            value={formik.values.currentPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.currentPassword && formik.errors.currentPassword)}
+            helperText={formik.touched.currentPassword && formik.errors.currentPassword}
+            margin="normal"
+          />
+
+          <TextField
+            fullWidth
+            id="newPassword"
+            name="newPassword"
+            label={labels.newPassword}
+            type="password"
+            value={formik.values.newPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.newPassword && formik.errors.newPassword)}
+            helperText={formik.touched.newPassword && formik.errors.newPassword}
+            margin="normal"
+          />
+
+          <TextField
+            fullWidth
+            id="confirmPassword"
+            name="confirmPassword"
+            label={labels.confirmPassword}
+            type="password"
+            value={formik.values.confirmPassword}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
+            helperText={formik.touched.confirmPassword && formik.errors.confirmPassword}
+            margin="normal"
+          />
+
+          {apiError && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiError}
+            </Alert>
+          )}
+
+          {success && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {labels.success}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {formik.isSubmitting ? labels.submittingButton : labels.submitButton}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default ChangePasswordForm;

package/src/components/ConfirmationDialog.tsx

@@ -0,0 +1,48 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material';
+import React from 'react';
+
+export interface ConfirmationDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({
+  open,
+  title,
+  message,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <Dialog open={open} onClose={onCancel}>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{message}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} color="primary">
+          {cancelText}
+        </Button>
+        <Button onClick={onConfirm} color="primary">
+          {confirmText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmationDialog;

package/src/components/CurrencyCodeSelector.tsx

@@ -0,0 +1,60 @@
+import { CurrencyCode } from '@digitaldefiance/i18n-lib';
+import { MenuItem, TextField } from '@mui/material';
+import { Field, FieldProps } from 'formik';
+import { ChangeEvent, FC } from 'react';
+
+export interface CurrencyCodeSelectorProps {
+  name: string;
+  label: string;
+  onCurrencyChange?: (code: string) => void;
+}
+
+export const CurrencyCodeSelector: FC<CurrencyCodeSelectorProps> = ({
+  name,
+  label,
+  onCurrencyChange,
+}) => {
+  return (
+    <Field name={name}>
+      {({ field, form }: FieldProps) => (
+        <TextField
+          select
+          fullWidth
+          label={label}
+          {...field}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            const selectedCode = event.target.value;
+            form.setFieldValue(name, selectedCode);
+            onCurrencyChange?.(selectedCode);
+          }}
+          error={form.touched[name] && Boolean(form.errors[name])}
+          helperText={form.touched[name] && (form.errors[name] as string)}
+          sx={{
+            '& .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',
+              },
+            },
+          }}
+        >
+          {CurrencyCode.getAll().map((code: string) => (
+            <MenuItem key={code} value={code}>
+              {code}
+            </MenuItem>
+          ))}
+        </TextField>
+      )}
+    </Field>
+  );
+};
+
+export default CurrencyCodeSelector;

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;