@greatapps/common 1.1.700 → 1.1.701

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

@@ -1,273 +1,273 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { IconChevronLeft, IconX, IconMessage } 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 PhoneInput from '../../ui/form/PhoneInput';
-import { formatTimer, formatPhone } 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 { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
-import useChangePhoneForm from '../hooks/useChangePhoneForm';
-import useOtpVerification from '../hooks/useOtpVerification';
-
-interface ChangePhoneModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
-  const translate = useTranslations();
-  const { user } = useAuth();
-  const invalidateUser = useInvalidateUser();
-
-  const hasExistingPhone = !!user?.phone;
-
-  const currentPhoneDisplay = user?.phone
-    ? formatPhone(
-        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone
-      )
-    : '';
-
-  const handleDirectUpdateSuccess = () => {
-    invalidateUser();
-    onClose();
-  };
-
-  const {
-    showVerification,
-    phoneValue,
-    phoneError,
-    isSubmitting,
-    submittedPhone,
-    handlePhoneChange,
-    handleContinue,
-    handleBack,
-    resetForm,
-  } = useChangePhoneForm({
-    hasExistingPhone,
-    onDirectUpdateSuccess: handleDirectUpdateSuccess,
-  });
-
-  const handleSuccess = () => {
-    invalidateUser();
-    resetForm();
-    onClose();
-  };
-
-  const {
-    code,
-    isLoading,
-    hasError,
-    timer,
-    canResend,
-    isValidLength,
-    handleCodeChange,
-    handleValidate,
-    handleResend,
-    reset: resetOtp,
-  } = useOtpVerification({
-    onSuccess: handleSuccess,
-    successMessage: translate('common.account.changePhone.phoneChanged'),
-    validateFn: async (token) => {
-      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
-      return result.success;
-    },
-    resendFn: async () => {
-      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
-      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);
-      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.changePhone.titleEdit')}
-            </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>
-                {hasExistingPhone
-                  ? translate('common.account.changePhone.titleEdit')
-                  : translate('common.account.changePhone.titleAdd')}
-              </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">
-                {hasExistingPhone
-                  ? translate('common.account.changePhone.titleEdit')
-                  : translate('common.account.changePhone.titleAdd')}
-              </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 || !hasExistingPhone ? '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">
-                <IconMessage 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.changePhone.sentCodeTo', {
-                    phone: currentPhoneDisplay,
-                    b: (chunks) => <span className="font-semibold text-gray-950">{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.changePhone.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">
-                  {hasExistingPhone
-                    ? translate('common.account.changePhone.updateTitle')
-                    : translate('common.account.changePhone.addTitle')}
-                </span>
-                <span className="paragraph-small-regular text-gray-600">
-                  {hasExistingPhone
-                    ? translate('common.account.changePhone.updateDescription')
-                    : translate('common.account.changePhone.addDescription')}
-                </span>
-              </div>
-
-              <PhoneInput
-                label={
-                  hasExistingPhone
-                    ? translate('common.account.changePhone.newNumber')
-                    : translate('common.account.changePhone.numberLabel')
-                }
-                placeholder="(00) 0 0000-0000"
-                value={phoneValue}
-                onChange={handlePhoneChange}
-                error={!!phoneError}
-                errorMessage={phoneError}
-              />
-            </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
-                  ? hasExistingPhone
-                    ? translate('common.actions.sending')
-                    : translate('common.actions.saving')
-                  : hasExistingPhone
-                    ? translate('common.actions.continue')
-                    : translate('common.actions.save')}
-              </Button>
-            </div>
-          </form>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { IconChevronLeft, IconX, IconMessage } 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 PhoneInput from '../../ui/form/PhoneInput';
+import { formatTimer, formatPhone } 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 { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';
+import useChangePhoneForm from '../hooks/useChangePhoneForm';
+import useOtpVerification from '../hooks/useOtpVerification';
+
+interface ChangePhoneModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
+  const translate = useTranslations();
+  const { user } = useAuth();
+  const invalidateUser = useInvalidateUser();
+
+  const hasExistingPhone = !!user?.phone;
+
+  const currentPhoneDisplay = user?.phone
+    ? formatPhone(
+        user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone
+      )
+    : '';
+
+  const handleDirectUpdateSuccess = () => {
+    invalidateUser();
+    onClose();
+  };
+
+  const {
+    showVerification,
+    phoneValue,
+    phoneError,
+    isSubmitting,
+    submittedPhone,
+    handlePhoneChange,
+    handleContinue,
+    handleBack,
+    resetForm,
+  } = useChangePhoneForm({
+    hasExistingPhone,
+    onDirectUpdateSuccess: handleDirectUpdateSuccess,
+  });
+
+  const handleSuccess = () => {
+    invalidateUser();
+    resetForm();
+    onClose();
+  };
+
+  const {
+    code,
+    isLoading,
+    hasError,
+    timer,
+    canResend,
+    isValidLength,
+    handleCodeChange,
+    handleValidate,
+    handleResend,
+    reset: resetOtp,
+  } = useOtpVerification({
+    onSuccess: handleSuccess,
+    successMessage: translate('common.account.changePhone.phoneChanged'),
+    validateFn: async (token) => {
+      const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
+      return result.success;
+    },
+    resendFn: async () => {
+      const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');
+      const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);
+      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.changePhone.titleEdit')}
+            </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>
+                {hasExistingPhone
+                  ? translate('common.account.changePhone.titleEdit')
+                  : translate('common.account.changePhone.titleAdd')}
+              </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">
+                {hasExistingPhone
+                  ? translate('common.account.changePhone.titleEdit')
+                  : translate('common.account.changePhone.titleAdd')}
+              </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 || !hasExistingPhone ? '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">
+                <IconMessage 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.changePhone.sentCodeTo', {
+                    phone: currentPhoneDisplay,
+                    b: (chunks) => <span className="font-semibold text-gray-950">{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.changePhone.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">
+                  {hasExistingPhone
+                    ? translate('common.account.changePhone.updateTitle')
+                    : translate('common.account.changePhone.addTitle')}
+                </span>
+                <span className="paragraph-small-regular text-gray-600">
+                  {hasExistingPhone
+                    ? translate('common.account.changePhone.updateDescription')
+                    : translate('common.account.changePhone.addDescription')}
+                </span>
+              </div>
+
+              <PhoneInput
+                label={
+                  hasExistingPhone
+                    ? translate('common.account.changePhone.newNumber')
+                    : translate('common.account.changePhone.numberLabel')
+                }
+                placeholder="(00) 0 0000-0000"
+                value={phoneValue}
+                onChange={handlePhoneChange}
+                error={!!phoneError}
+                errorMessage={phoneError}
+              />
+            </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
+                  ? hasExistingPhone
+                    ? translate('common.actions.sending')
+                    : translate('common.actions.saving')
+                  : hasExistingPhone
+                    ? translate('common.actions.continue')
+                    : translate('common.actions.save')}
+              </Button>
+            </div>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}