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

package/src/components/UserSettingsForm.tsx

@@ -0,0 +1,505 @@
+import { CurrencyCode } from '@digitaldefiance/i18n-lib';
+import {
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import moment from 'moment-timezone';
+import { FC, useMemo, useState } from 'react';
+import * as Yup from 'yup';
+import { useI18n } from '../contexts';
+
+export interface UserSettingsFormValues {
+  email: string;
+  timezone: string;
+  siteLanguage: string;
+  currency: string;
+  darkMode: boolean;
+  directChallenge: boolean;
+  [key: string]: string | boolean;
+}
+
+export interface UserSettingsFormProps {
+  initialValues: UserSettingsFormValues;
+  onSubmit: (values: UserSettingsFormValues) => Promise<
+    | { success: boolean; message: string }
+    | {
+        error: string;
+        errorType?: string;
+        field?: string;
+        errors?: Array<{ path: string; msg: string }>;
+      }
+  >;
+  languages: Array<{ code: string; label: string }>;
+  emailValidation?: Yup.StringSchema;
+  timezoneValidation?: Yup.StringSchema;
+  siteLanguageValidation?: Yup.StringSchema;
+  currencyValidation?: Yup.StringSchema;
+  darkModeValidation?: Yup.BooleanSchema;
+  directChallengeValidation?: Yup.BooleanSchema;
+  additionalFields?: (
+    formik: ReturnType<typeof useFormik<UserSettingsFormValues>>
+  ) => React.ReactNode;
+  additionalInitialValues?: Record<string, string | boolean>;
+  additionalValidation?: Record<string, Yup.Schema>;
+  labels?: {
+    title?: string;
+    email?: string;
+    emailHelper?: string;
+    timezone?: string;
+    siteLanguage?: string;
+    currency?: string;
+    darkMode?: string;
+    directChallenge?: string;
+    directChallengeHelper?: string;
+    saving?: string;
+    save?: string;
+    successMessage?: string;
+  };
+}
+
+export const UserSettingsForm: FC<UserSettingsFormProps> = ({
+  initialValues,
+  onSubmit,
+  languages,
+  emailValidation,
+  timezoneValidation,
+  siteLanguageValidation,
+  currencyValidation,
+  darkModeValidation,
+  directChallengeValidation,
+  additionalFields,
+  additionalInitialValues = {},
+  additionalValidation = {},
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [apiErrors, setApiErrors] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+
+  const timezones = useMemo(() => moment.tz.names(), []);
+  const currencies = useMemo(
+    () =>
+      CurrencyCode.getAllData().map((c) => ({
+        code: c.code,
+        label: `${c.code} - ${c.currency}`,
+      })),
+    []
+  );
+
+  const validation = {
+    email:
+      emailValidation ||
+      Yup.string()
+        .email(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_InvalidEmail
+          )
+        )
+        .required(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          )
+        ),
+    timezone:
+      timezoneValidation ||
+      Yup.string()
+        .required(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_TimezoneRequired
+          )
+        )
+        .test(
+          'valid-timezone',
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_TimezoneInvalid
+          ),
+          (value) => !value || moment.tz.zone(value) !== null
+        ),
+    siteLanguage:
+      siteLanguageValidation ||
+      Yup.string().required(
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      ),
+    currency:
+      currencyValidation ||
+      Yup.string()
+        .required(
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          )
+        )
+        .test(
+          'valid-currency',
+          tComponent<SuiteCoreStringKey>(
+            SuiteCoreComponentId,
+            SuiteCoreStringKey.Validation_Required
+          ),
+          (value) => !value || CurrencyCode.isValid(value)
+        ),
+    darkMode:
+      darkModeValidation ||
+      Yup.boolean().required(
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      ),
+    directChallenge:
+      directChallengeValidation ||
+      Yup.boolean().required(
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      ),
+  };
+
+  const formik = useFormik<UserSettingsFormValues>({
+    initialValues: {
+      ...initialValues,
+      ...additionalInitialValues,
+    },
+    enableReinitialize: true,
+    validationSchema: Yup.object({
+      email: validation.email,
+      timezone: validation.timezone,
+      siteLanguage: validation.siteLanguage,
+      currency: validation.currency,
+      darkMode: validation.darkMode,
+      directChallenge: validation.directChallenge,
+      ...additionalValidation,
+    }),
+    onSubmit: async (values, { setSubmitting, setFieldError, setTouched }) => {
+      setSaving(true);
+      setSuccessMessage(null);
+      const result = await onSubmit(values);
+
+      if ('success' in result && result.success) {
+        setSuccessMessage(
+          result.message ||
+            labels.successMessage ||
+            tComponent<SuiteCoreStringKey>(
+              SuiteCoreComponentId,
+              SuiteCoreStringKey.Settings_SaveSuccess
+            )
+        );
+        setApiErrors({});
+      } else {
+        const newApiErrors: Record<string, string> = {};
+        const fieldsToTouch: Record<string, boolean> = {};
+
+        if ('field' in result && result.field) {
+          setFieldError(result.field, result.error);
+          fieldsToTouch[result.field] = true;
+        }
+
+        if ('errors' in result && result.errors) {
+          result.errors.forEach((err) => {
+            if (err.path && err.msg) {
+              setFieldError(err.path, err.msg);
+              fieldsToTouch[err.path] = true;
+            }
+          });
+        }
+
+        if (
+          'error' in result &&
+          result.error &&
+          !Object.keys(newApiErrors).length
+        ) {
+          newApiErrors.general = result.error;
+        }
+
+        setApiErrors(newApiErrors);
+        setTouched(fieldsToTouch, false);
+      }
+      setSubmitting(false);
+      setSaving(false);
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {labels.title ||
+            tComponent<SuiteCoreStringKey>(
+              SuiteCoreComponentId,
+              SuiteCoreStringKey.Settings_Title
+            )}
+        </Typography>
+
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          sx={{ mt: 1, width: '100%' }}
+        >
+          <TextField
+            fullWidth
+            id="email"
+            name="email"
+            label={
+              labels.email ||
+              tComponent<SuiteCoreStringKey>(
+                SuiteCoreComponentId,
+                SuiteCoreStringKey.Common_Email
+              )
+            }
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(
+              formik.touched.email && (formik.errors.email || apiErrors.email)
+            )}
+            helperText={
+              (formik.touched.email &&
+                (formik.errors.email || apiErrors.email)) ||
+              labels.emailHelper ||
+              tComponent<SuiteCoreStringKey>(
+                SuiteCoreComponentId,
+                SuiteCoreStringKey.Settings_EmailHelper
+              )
+            }
+            margin="normal"
+          />
+
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="timezone-label">
+              {labels.timezone ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Common_Timezone
+                )}
+            </InputLabel>
+            <Select
+              labelId="timezone-label"
+              id="timezone"
+              name="timezone"
+              value={formik.values.timezone}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={formik.touched.timezone && Boolean(formik.errors.timezone)}
+              label={
+                labels.timezone ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Common_Timezone
+                )
+              }
+            >
+              {timezones.map((tz) => (
+                <MenuItem key={tz} value={tz}>
+                  {tz}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.timezone &&
+              (formik.errors.timezone || apiErrors.timezone) && (
+                <Typography color="error" variant="caption">
+                  {formik.errors.timezone || apiErrors.timezone}
+                </Typography>
+              )}
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="language-label">
+              {labels.siteLanguage ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_SiteLanguage
+                )}
+            </InputLabel>
+            <Select
+              labelId="language-label"
+              id="siteLanguage"
+              name="siteLanguage"
+              value={formik.values.siteLanguage}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={
+                formik.touched.siteLanguage &&
+                Boolean(formik.errors.siteLanguage)
+              }
+              label={
+                labels.siteLanguage ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_SiteLanguage
+                )
+              }
+            >
+              {languages.map((lang) => (
+                <MenuItem key={lang.code} value={lang.code}>
+                  {lang.label}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.siteLanguage &&
+              (formik.errors.siteLanguage || apiErrors.siteLanguage) && (
+                <Typography color="error" variant="caption">
+                  {formik.errors.siteLanguage || apiErrors.siteLanguage}
+                </Typography>
+              )}
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="currency-label">
+              {labels.currency ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_Currency
+                )}
+            </InputLabel>
+            <Select
+              labelId="currency-label"
+              id="currency"
+              name="currency"
+              value={formik.values.currency}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              error={formik.touched.currency && Boolean(formik.errors.currency)}
+              label={
+                labels.currency ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_Currency
+                )
+              }
+            >
+              {currencies.map((curr) => (
+                <MenuItem key={curr.code} value={curr.code}>
+                  {curr.label}
+                </MenuItem>
+              ))}
+            </Select>
+            {formik.touched.currency &&
+              (formik.errors.currency || apiErrors.currency) && (
+                <Typography color="error" variant="caption">
+                  {formik.errors.currency || apiErrors.currency}
+                </Typography>
+              )}
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <FormControlLabel
+              control={
+                <Switch
+                  id="darkMode"
+                  name="darkMode"
+                  checked={formik.values.darkMode}
+                  onChange={formik.handleChange}
+                />
+              }
+              label={
+                labels.darkMode ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_DarkMode
+                )
+              }
+            />
+          </FormControl>
+
+          <FormControl fullWidth margin="normal">
+            <FormControlLabel
+              control={
+                <Switch
+                  id="directChallenge"
+                  name="directChallenge"
+                  checked={formik.values.directChallenge}
+                  onChange={formik.handleChange}
+                />
+              }
+              label={
+                labels.directChallenge ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Registration_DirectChallengeLabel
+                )
+              }
+            />
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              sx={{ ml: 4, mt: -1 }}
+            >
+              {labels.directChallengeHelper ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Registration_DirectChallengeHelper
+                )}
+            </Typography>
+          </FormControl>
+
+          {additionalFields && additionalFields(formik)}
+
+          {apiErrors.general && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiErrors.general}
+            </Alert>
+          )}
+
+          {successMessage && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {successMessage}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {saving
+              ? labels.saving ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_Saving
+                )
+              : labels.save ||
+                tComponent<SuiteCoreStringKey>(
+                  SuiteCoreComponentId,
+                  SuiteCoreStringKey.Settings_Save
+                )}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default UserSettingsForm;

package/src/components/VerifyEmailPage.tsx

@@ -0,0 +1,184 @@
+import {
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Container,
+  Link,
+  Typography,
+} from '@mui/material';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { useI18n } from '../contexts';
+
+export interface VerifyEmailPageProps {
+  token: string | null;
+  onVerify: (token: string) => Promise<{ success: boolean; message?: string }>;
+  labels?: {
+    title?: string;
+    verifying?: string;
+    success?: string;
+    failed?: string;
+    noToken?: string;
+    proceedToLogin?: string;
+    contactSupport?: string;
+    requestNewEmail?: string;
+  };
+  loginLink?: string;
+  resendLink?: string;
+}
+
+export const VerifyEmailPage: FC<VerifyEmailPageProps> = ({
+  token,
+  onVerify,
+  labels = {},
+  loginLink = '/login',
+  resendLink = '/resend-verification',
+}) => {
+  const { tComponent } = useI18n();
+  const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [verificationStatus, setVerificationStatus] = useState<
+    'pending' | 'success' | 'error'
+  >('pending');
+
+  const translatedLabels = useMemo<{
+    title: string;
+    success: string;
+    failed: string;
+    noToken: string;
+    proceedToLogin: string;
+    contactSupport: string;
+    requestNewEmail: string;
+  }>(() => {
+    return {
+      title:
+        labels.title ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Common_EmailVerification
+        ),
+      success:
+        labels.success ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.EmailVerification_Success
+        ),
+      failed:
+        labels.failed ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.EmailVerification_Failed
+        ),
+      noToken:
+        labels.noToken ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.NoVerificationTokenProvided
+        ),
+      proceedToLogin:
+        labels.proceedToLogin ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.ProceedToLogin
+        ),
+      contactSupport:
+        labels.contactSupport ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.HavingTroubleContactSupport
+        ),
+      requestNewEmail:
+        labels.requestNewEmail ||
+        tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.RequestNewVerificationEmail
+        ),
+    };
+  }, [labels, tComponent]);
+
+  useEffect(() => {
+    const verifyEmail = async (verificationToken: string) => {
+      try {
+        const result = await onVerify(verificationToken);
+        if (result.success) {
+          setMessage(result.message || translatedLabels.success);
+          setVerificationStatus('success');
+        } else {
+          setMessage(result.message || translatedLabels.failed);
+          setVerificationStatus('error');
+        }
+      } catch {
+        setMessage(translatedLabels.failed);
+        setVerificationStatus('error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (token) {
+      verifyEmail(token);
+    } else {
+      setLoading(false);
+      setMessage(translatedLabels.noToken);
+      setVerificationStatus('error');
+    }
+  }, [token, onVerify, translatedLabels]);
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {translatedLabels.title}
+        </Typography>
+
+        {loading ? (
+          <CircularProgress />
+        ) : (
+          <Box sx={{ width: '100%', mt: 2 }}>
+            <Alert
+              severity={verificationStatus === 'success' ? 'success' : 'error'}
+              sx={{ mb: 2 }}
+            >
+              {message}
+            </Alert>
+
+            {verificationStatus === 'success' && (
+              <Button
+                variant="contained"
+                color="primary"
+                component={Link}
+                href={loginLink}
+                fullWidth
+              >
+                {translatedLabels.proceedToLogin}
+              </Button>
+            )}
+
+            {verificationStatus === 'error' && (
+              <Typography variant="body1">
+                {translatedLabels.contactSupport}{' '}
+                <Link href={resendLink} color="primary">
+                  {translatedLabels.requestNewEmail}
+                </Link>
+                .
+              </Typography>
+            )}
+          </Box>
+        )}
+      </Box>
+    </Container>
+  );
+};
+
+export default VerifyEmailPage;

package/src/components/{index.d.ts → index.ts}

@@ -1,3 +1,4 @@
+// Component exports
 export * from './ApiAccess';
 export * from './BackupCodeLoginForm';
 export * from './BackupCodesForm';
@@ -22,4 +23,3 @@ export * from './TranslatedTitle';
 export * from './UserMenu';
 export * from './UserLanguageSelector';
 export * from './VerifyEmailPage';
-//# sourceMappingURL=index.d.ts.map