@greatapps/common 1.1.700 → 1.1.702

package/src/components/account/sections/ChangeEmailModal.tsx

@@ -1,239 +1,239 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
-import { Button } from '../../ui/buttons/Button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
-import { Separator } from '../../ui/data-display/Separator';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';
-import { FormField } from '../../ui/form/FormField';
-import { formatTimer } from '../../../utils/format/masks';
-import { OTP_CODE_LENGTH, OTP_ALPHANUMERIC_PATTERN } from '../../../utils/validators/account';
-import { useAuth } from '../../../providers/auth.provider';
-import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
-import { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
-import useChangeEmailForm from '../hooks/useChangeEmailForm';
-import useOtpVerification from '../hooks/useOtpVerification';
-
-interface ChangeEmailModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
-  const translate = useTranslations();
-  const { user } = useAuth();
-  const invalidateUser = useInvalidateUser();
-
-  const {
-    showVerification,
-    emailToVerify,
-    isSubmitting,
-    errors,
-    register,
-    handleContinue,
-    handleBack,
-    resetForm,
-  } = useChangeEmailForm();
-
-  const handleSuccess = () => {
-    invalidateUser();
-    resetForm();
-    onClose();
-  };
-
-  const {
-    code,
-    isLoading,
-    hasError,
-    timer,
-    canResend,
-    isValidLength,
-    handleCodeChange,
-    handleValidate,
-    handleResend,
-    reset: resetOtp,
-  } = useOtpVerification({
-    onSuccess: handleSuccess,
-    successMessage: translate('common.account.changeEmail.emailChanged'),
-    validateFn: async (token) => {
-      const result = await confirmEmailChangeAction(token, emailToVerify);
-      return result.success;
-    },
-    resendFn: async () => {
-      const { requestEmailChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
-      const result = await requestEmailChangeAction(emailToVerify);
-      if (!result.success) {
-        throw new Error(result.error);
-      }
-    },
-  });
-
-  const handleClose = () => {
-    resetForm();
-    resetOtp();
-    onClose();
-  };
-
-  const handleBackFromVerification = () => {
-    resetOtp();
-    handleBack();
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent
-        showCloseButton={false}
-        overlayClassName="z-[1002]"
-        className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] z-[1003]"
-      >
-        {showVerification ? (
-          <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
-            <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
-              <IconChevronLeft size={20} className="text-gray-950" />
-            </Button>
-            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
-              {translate('common.account.changeEmail.title')}
-            </DialogTitle>
-            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
-              <IconX size={18} className="text-gray-500" />
-            </Button>
-          </DialogHeader>
-        ) : (
-          <>
-            <DialogHeader className="sr-only">
-              <DialogTitle>{translate('common.account.changeEmail.title')}</DialogTitle>
-            </DialogHeader>
-            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
-              <span className="paragraph-medium-semibold text-gray-950 text-center">
-                {translate('common.account.changeEmail.title')}
-              </span>
-              <Button
-                variant="ghost"
-                className="absolute right-2 size-8! p-0"
-                onClick={handleClose}
-              >
-                <IconX size={18} className="text-gray-500" />
-              </Button>
-            </div>
-          </>
-        )}
-
-        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-primary`} />
-
-        {showVerification ? (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              handleValidate();
-            }}
-            className="flex flex-col flex-1 lg:flex-none"
-          >
-            <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
-              <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
-                <IconMail size={20} className="text-gray-950" />
-              </div>
-
-              <div className="flex flex-col gap-1">
-                <h3 className="paragraph-medium-semibold text-gray-950">
-                  {translate('common.account.otp.validationCode')}
-                </h3>
-                <p className="paragraph-small-regular text-gray-600">
-                  {translate.rich('common.account.changeEmail.sentCodeTo', {
-                    email: user?.email ?? '',
-                    b: (chunks) => (
-                      <span className="font-semibold text-gray-950 break-all">{chunks}</span>
-                    ),
-                  })}
-                </p>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <InputOTP maxLength={OTP_CODE_LENGTH} pattern={OTP_ALPHANUMERIC_PATTERN} value={code} onChange={handleCodeChange}>
-                  <InputOTPGroup className="flex flex-row gap-2">
-                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (
-                      <InputOTPSlot
-                        key={i}
-                        index={i}
-                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}
-                      />
-                    ))}
-                  </InputOTPGroup>
-                </InputOTP>
-                {hasError && (
-                  <p className="paragraph-small-regular text-red-500">
-                    {translate('common.account.otp.incorrectCode')}
-                  </p>
-                )}
-              </div>
-
-              {canResend ? (
-                <button
-                  type="button"
-                  onClick={handleResend}
-                  className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
-                >
-                  {translate('common.account.otp.resend')}
-                </button>
-              ) : (
-                <p className="paragraph-small-regular text-gray-500">
-                  {translate.rich('common.account.otp.resendIn', {
-                    time: formatTimer(timer),
-                    b: (chunks) => (
-                      <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
-                    ),
-                  })}
-                </p>
-              )}
-            </div>
-
-            <Separator />
-
-            <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
-              </Button>
-              <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
-                {isLoading
-                  ? translate('common.account.otp.validating')
-                  : translate('common.account.changeEmail.confirm')}
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <form onSubmit={handleContinue} className="flex flex-col flex-1 lg:flex-none">
-            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
-              <div className="flex flex-col gap-1">
-                <span className="paragraph-medium-semibold text-gray-950">
-                  {translate('common.account.changeEmail.updateTitle')}
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  {translate('common.account.changeEmail.updateDescription')}
-                </span>
-              </div>
-
-              <FormField
-                label={translate('common.account.changeEmail.newEmail')}
-                placeholder={translate('common.account.changeEmail.newEmailPlaceholder')}
-                type="email"
-                {...register('email')}
-                error={!!errors.email}
-                errorMessage={errors.email?.message}
-                leftIcon={IconMail}
-              />
-            </div>
-
-            <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
-              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
-                {translate('common.actions.cancel')}
-              </Button>
-              <Button className="h-10!" type="submit" disabled={isSubmitting}>
-                {isSubmitting ? translate('common.actions.sending') : translate('common.actions.continue')}
-              </Button>
-            </div>
-          </form>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';
+import { Button } from '../../ui/buttons/Button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';
+import { Separator } from '../../ui/data-display/Separator';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';
+import { FormField } from '../../ui/form/FormField';
+import { formatTimer } from '../../../utils/format/masks';
+import { OTP_CODE_LENGTH, OTP_ALPHANUMERIC_PATTERN } from '../../../utils/validators/account';
+import { useAuth } from '../../../providers/auth.provider';
+import { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';
+import { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';
+import useChangeEmailForm from '../hooks/useChangeEmailForm';
+import useOtpVerification from '../hooks/useOtpVerification';
+
+interface ChangeEmailModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
+  const translate = useTranslations();
+  const { user } = useAuth();
+  const invalidateUser = useInvalidateUser();
+
+  const {
+    showVerification,
+    emailToVerify,
+    isSubmitting,
+    errors,
+    register,
+    handleContinue,
+    handleBack,
+    resetForm,
+  } = useChangeEmailForm();
+
+  const handleSuccess = () => {
+    invalidateUser();
+    resetForm();
+    onClose();
+  };
+
+  const {
+    code,
+    isLoading,
+    hasError,
+    timer,
+    canResend,
+    isValidLength,
+    handleCodeChange,
+    handleValidate,
+    handleResend,
+    reset: resetOtp,
+  } = useOtpVerification({
+    onSuccess: handleSuccess,
+    successMessage: translate('common.account.changeEmail.emailChanged'),
+    validateFn: async (token) => {
+      const result = await confirmEmailChangeAction(token, emailToVerify);
+      return result.success;
+    },
+    resendFn: async () => {
+      const { requestEmailChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
+      const result = await requestEmailChangeAction(emailToVerify);
+      if (!result.success) {
+        throw new Error(result.error);
+      }
+    },
+  });
+
+  const handleClose = () => {
+    resetForm();
+    resetOtp();
+    onClose();
+  };
+
+  const handleBackFromVerification = () => {
+    resetOtp();
+    handleBack();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="z-[1002]"
+        className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] z-[1003]"
+      >
+        {showVerification ? (
+          <DialogHeader className="flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0">
+            <Button variant="ghost" className="size-8! p-0" onClick={handleBackFromVerification}>
+              <IconChevronLeft size={20} className="text-gray-950" />
+            </Button>
+            <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center flex-1">
+              {translate('common.account.changeEmail.title')}
+            </DialogTitle>
+            <Button variant="ghost" className="size-8! p-0" onClick={handleClose}>
+              <IconX size={18} className="text-gray-500" />
+            </Button>
+          </DialogHeader>
+        ) : (
+          <>
+            <DialogHeader className="sr-only">
+              <DialogTitle>{translate('common.account.changeEmail.title')}</DialogTitle>
+            </DialogHeader>
+            <div className="flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0">
+              <span className="paragraph-medium-semibold text-gray-950 text-center">
+                {translate('common.account.changeEmail.title')}
+              </span>
+              <Button
+                variant="ghost"
+                className="absolute right-2 size-8! p-0"
+                onClick={handleClose}
+              >
+                <IconX size={18} className="text-gray-500" />
+              </Button>
+            </div>
+          </>
+        )}
+
+        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-primary`} />
+
+        {showVerification ? (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleValidate();
+            }}
+            className="flex flex-col flex-1 lg:flex-none"
+          >
+            <div className="px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none">
+              <div className="flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200">
+                <IconMail size={20} className="text-gray-950" />
+              </div>
+
+              <div className="flex flex-col gap-1">
+                <h3 className="paragraph-medium-semibold text-gray-950">
+                  {translate('common.account.otp.validationCode')}
+                </h3>
+                <p className="paragraph-small-regular text-gray-600">
+                  {translate.rich('common.account.changeEmail.sentCodeTo', {
+                    email: user?.email ?? '',
+                    b: (chunks) => (
+                      <span className="font-semibold text-gray-950 break-all">{chunks}</span>
+                    ),
+                  })}
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <InputOTP maxLength={OTP_CODE_LENGTH} pattern={OTP_ALPHANUMERIC_PATTERN} value={code} onChange={handleCodeChange}>
+                  <InputOTPGroup className="flex flex-row gap-2">
+                    {[...Array(OTP_CODE_LENGTH)].map((_, i) => (
+                      <InputOTPSlot
+                        key={i}
+                        index={i}
+                        className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}
+                      />
+                    ))}
+                  </InputOTPGroup>
+                </InputOTP>
+                {hasError && (
+                  <p className="paragraph-small-regular text-red-500">
+                    {translate('common.account.otp.incorrectCode')}
+                  </p>
+                )}
+              </div>
+
+              {canResend ? (
+                <button
+                  type="button"
+                  onClick={handleResend}
+                  className="paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit"
+                >
+                  {translate('common.account.otp.resend')}
+                </button>
+              ) : (
+                <p className="paragraph-small-regular text-gray-500">
+                  {translate.rich('common.account.otp.resendIn', {
+                    time: formatTimer(timer),
+                    b: (chunks) => (
+                      <span className="paragraph-small-semibold text-gray-950">{chunks}</span>
+                    ),
+                  })}
+                </p>
+              )}
+            </div>
+
+            <Separator />
+
+            <div className="flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                {translate('common.actions.cancel')}
+              </Button>
+              <Button className="h-10!" type="submit" disabled={!isValidLength || isLoading}>
+                {isLoading
+                  ? translate('common.account.otp.validating')
+                  : translate('common.account.changeEmail.confirm')}
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <form onSubmit={handleContinue} className="flex flex-col flex-1 lg:flex-none">
+            <div className="flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none">
+              <div className="flex flex-col gap-1">
+                <span className="paragraph-medium-semibold text-gray-950">
+                  {translate('common.account.changeEmail.updateTitle')}
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  {translate('common.account.changeEmail.updateDescription')}
+                </span>
+              </div>
+
+              <FormField
+                label={translate('common.account.changeEmail.newEmail')}
+                placeholder={translate('common.account.changeEmail.newEmailPlaceholder')}
+                type="email"
+                {...register('email')}
+                error={!!errors.email}
+                errorMessage={errors.email?.message}
+                leftIcon={IconMail}
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0">
+              <Button variant="secondary" className="h-10!" type="button" onClick={handleClose}>
+                {translate('common.actions.cancel')}
+              </Button>
+              <Button className="h-10!" type="submit" disabled={isSubmitting}>
+                {isSubmitting ? translate('common.actions.sending') : translate('common.actions.continue')}
+              </Button>
+            </div>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/sections/ChangePasswordSection.tsx

@@ -1,68 +1,68 @@
-'use client';
-
-import { IconLock, IconX } from '@tabler/icons-react';
-import { useTranslations } from 'next-intl';
-import { Button } from '../../ui/buttons/Button';
-import { FormField } from '../../ui/form/FormField';
-import useChangePasswordForm from '../hooks/useChangePasswordForm';
-import usePasswordVisibility from '../../../hooks/usePasswordVisibility';
-
-interface ChangePasswordSectionProps {
-  onBack: () => void;
-}
-
-export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
-  const translate = useTranslations();
-  const { register, handleSubmit, errors } = useChangePasswordForm({
-    onSuccess: onBack,
-  });
-  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();
-  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className="flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6"
-    >
-      <div className="flex items-center justify-between">
-        <span className="paragraph-medium-semibold text-gray-950">
-          {translate('common.account.changePassword.title')}
-        </span>
-        <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
-          <IconX size={18} />
-        </Button>
-      </div>
-
-      <div className="flex flex-col gap-4">
-        <FormField
-          label={translate('common.account.changePassword.currentPassword')}
-          type="password"
-          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}
-          leftIcon={IconLock}
-          error={!!errors.currentPassword}
-          errorMessage={errors.currentPassword?.message}
-          classnameContainer="h-10!"
-          showPassword={showCurrentPw}
-          onTogglePassword={toggleCurrentPw}
-          {...register('currentPassword')}
-        />
-        <FormField
-          label={translate('common.account.changePassword.newPassword')}
-          type="password"
-          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}
-          leftIcon={IconLock}
-          error={!!errors.newPassword}
-          errorMessage={errors.newPassword?.message}
-          classnameContainer="h-10!"
-          showPassword={showNewPw}
-          onTogglePassword={toggleNewPw}
-          {...register('newPassword')}
-        />
-      </div>
-
-      <Button type="submit" className="w-fit h-10!">
-        {translate('common.account.changePassword.submit')}
-      </Button>
-    </form>
-  );
-}
+'use client';
+
+import { IconLock, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../ui/buttons/Button';
+import { FormField } from '../../ui/form/FormField';
+import useChangePasswordForm from '../hooks/useChangePasswordForm';
+import usePasswordVisibility from '../../../hooks/usePasswordVisibility';
+
+interface ChangePasswordSectionProps {
+  onBack: () => void;
+}
+
+export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
+  const translate = useTranslations();
+  const { register, handleSubmit, errors } = useChangePasswordForm({
+    onSuccess: onBack,
+  });
+  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();
+  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6"
+    >
+      <div className="flex items-center justify-between">
+        <span className="paragraph-medium-semibold text-gray-950">
+          {translate('common.account.changePassword.title')}
+        </span>
+        <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
+          <IconX size={18} />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <FormField
+          label={translate('common.account.changePassword.currentPassword')}
+          type="password"
+          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}
+          leftIcon={IconLock}
+          error={!!errors.currentPassword}
+          errorMessage={errors.currentPassword?.message}
+          classnameContainer="h-10!"
+          showPassword={showCurrentPw}
+          onTogglePassword={toggleCurrentPw}
+          {...register('currentPassword')}
+        />
+        <FormField
+          label={translate('common.account.changePassword.newPassword')}
+          type="password"
+          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}
+          leftIcon={IconLock}
+          error={!!errors.newPassword}
+          errorMessage={errors.newPassword?.message}
+          classnameContainer="h-10!"
+          showPassword={showNewPw}
+          onTogglePassword={toggleNewPw}
+          {...register('newPassword')}
+        />
+      </div>
+
+      <Button type="submit" className="w-fit h-10!">
+        {translate('common.account.changePassword.submit')}
+      </Button>
+    </form>
+  );
+}