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

package/src/components/UserSettingsForm.tsx

@@ -1,505 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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;