[feat] 💩 add dummy page / section to transfer-all (#65)

src/app/dashboard/transfer/all/page.tsx

@@ -0,0 +1,10 @@
+import { TransferAllView } from 'src/sections/banking/view'
+
+// ----------------------------------------------------------------------
+
+export const metadata = {
+  title: 'Transfer All'
+}
+export default function TransferAllPage() {
+  return <TransferAllView />
+}

src/sections/banking/transfer-all.tsx

@@ -0,0 +1,216 @@
+import * as Yup from 'yup'
+import { useForm } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { useMemo, useState, useEffect, useCallback } from 'react'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import Alert from '@mui/material/Alert'
+import Stack from '@mui/material/Stack'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Unstable_Grid2'
+import LoadingButton from '@mui/lab/LoadingButton'
+
+import { paths } from 'src/routes/paths'
+import { useRouter } from 'src/routes/hooks'
+
+import { useCountdownSeconds } from 'src/hooks/use-countdown'
+
+import { useTranslate } from 'src/locales'
+import { useAuthContext } from 'src/auth/hooks'
+
+import { useSnackbar } from 'src/components/snackbar'
+import FormProvider, { RHFCode, RHFTextField } from 'src/components/hook-form'
+
+import { IAccount } from 'src/types/account'
+
+// ----------------------------------------------------------------------
+
+export default function TransferAll() {
+  const { enqueueSnackbar } = useSnackbar()
+  const { t } = useTranslate()
+  const { generate2faCodeEmail, updateEmail } = useAuthContext()
+  const { user } = useAuthContext()
+  const router = useRouter()
+
+  const [codeSent, setCodeSent] = useState(false)
+  const [errorMsg, setErrorMsg] = useState('')
+  const [contextUser, setContextUser] = useState<IAccount | null>(null)
+
+  const { counting, countdown, startCountdown } = useCountdownSeconds(60)
+
+  const ChangeEmailSchema = Yup.object().shape({
+    oldEmail: Yup.string().email(t('common.must-be-valid-email')).required(t('common.required')),
+    newEmail: Yup.string().email(t('common.must-be-valid-email')).required(t('common.required')),
+    confirmEmail: Yup.string()
+      .oneOf([Yup.ref('newEmail')], t('common.emails-must-match'))
+      .required(t('common.required')),
+    // @ts-ignore
+    code: Yup.string().when('codeSent', {
+      is: true,
+      then: Yup.string()
+        .matches(/^[0-9]{6}$/, t('common.must-be-numeric'))
+        .required(t('common.required'))
+    })
+  })
+
+  const defaultValues = useMemo(
+    () => ({
+      oldEmail: user?.email || '',
+      newEmail: '',
+      confirmEmail: '',
+      code: ''
+    }),
+    [user?.email]
+  )
+
+  const methods = useForm({
+    // @ts-ignore
+    resolver: yupResolver(ChangeEmailSchema),
+    defaultValues
+  })
+
+  const {
+    watch,
+    setValue,
+    handleSubmit,
+    formState: { isSubmitting, isValid }
+  } = methods
+
+  const newEmail = watch('newEmail')
+  const confirmEmail = watch('confirmEmail')
+  const codeValue = watch('code')
+
+  // ----------------------------------------------------------------------
+
+  // guardar el telefono en estado, por cambios en el contexdto del user
+  useEffect(() => {
+    if (!user) return
+    // @ts-ignore
+    setContextUser(user)
+  }, [user])
+
+  const handleSendCode = useCallback(async () => {
+    try {
+      startCountdown()
+      setErrorMsg('')
+
+      // @ts-ignore
+      await generate2faCodeEmail?.(
+        contextUser!.id,
+        // @ts-ignore
+        contextUser!.phoneNumber,
+        t('account.email.code-bot')
+      )
+
+      setCodeSent(true)
+      setValue('code', '')
+      enqueueSnackbar(`${t('account.email.code-sent')} ${contextUser}`, {
+        variant: 'info'
+      })
+    } catch (ex) {
+      console.error(ex)
+      if (typeof ex === 'string') {
+        setErrorMsg(ex)
+      } else if (ex.code === 'USER_NOT_FOUND') {
+        setErrorMsg(t('login.msg.invalid-user'))
+      } else {
+        setErrorMsg(ex.error)
+      }
+    }
+  }, [startCountdown, contextUser, generate2faCodeEmail, t, setValue, enqueueSnackbar])
+
+  const handleCancel = () => {
+    router.push(paths.dashboard.user.account)
+  }
+
+  const onSubmit = async (data: any) => {
+    try {
+      // @ts-ignore
+      await updateEmail?.(contextUser!.phoneNumber, data.code || '', confirmEmail, contextUser!.id)
+      router.push(paths.dashboard.user.account)
+      setErrorMsg('')
+      enqueueSnackbar(t('common.msg.update-success'))
+    } catch (ex) {
+      console.error(ex)
+      if (typeof ex === 'string') {
+        setErrorMsg(ex)
+      } else if (ex.code === 'USER_NOT_FOUND') {
+        setErrorMsg(t('login.msg.invalid-user'))
+      } else if (ex.code === 'INVALID_CODE') {
+        setErrorMsg(t('account.email.invalid-code'))
+      } else {
+        setErrorMsg(ex.error)
+      }
+    }
+  }
+
+  const isSendCodeDisabled = !newEmail || !confirmEmail || newEmail !== confirmEmail || counting
+  const isSaveDisabled = !codeSent || !codeValue || codeValue.length !== 6 || !isValid
+
+  // ----------------------------------------------------------------------
+
+  const renderForm = (
+    <Grid container spacing={3}>
+      <Grid xs={12} md={8}>
+        <Card sx={{ p: 3 }}>
+          <Box
+            rowGap={3}
+            columnGap={2}
+            display='grid'
+            gridTemplateColumns={{
+              xs: 'repeat(1, 1fr)',
+              sm: 'repeat(1, 1fr)'
+            }}
+          >
+            <RHFTextField type='email' disabled name='oldEmail' label={t('account.email.old')} />
+            <RHFTextField type='email' name='newEmail' label={t('account.email.new')} />
+            <RHFTextField type='email' name='confirmEmail' label={t('account.email.new2')} />
+
+            {codeSent && (
+              <>
+                <Alert severity='info'>{t('account.email.code-info')}</Alert>
+                <RHFCode name='code' />
+              </>
+            )}
+
+            {errorMsg && <Alert severity='error'>{errorMsg}</Alert>}
+
+            <Stack direction='row' spacing={2} alignItems='center'>
+              <LoadingButton
+                variant='contained'
+                color='primary'
+                disabled={isSendCodeDisabled}
+                onClick={handleSendCode}
+              >
+                {counting
+                  ? `${t('account.email.resend-code')} (${countdown}s)`
+                  : t('account.email.send-code')}
+              </LoadingButton>
+            </Stack>
+          </Box>
+
+          <Stack spacing={2} direction='row' justifyContent='flex-end' sx={{ mt: 3 }}>
+            <Button variant='outlined' color='inherit' onClick={handleCancel}>
+              {t('common.cancel')}
+            </Button>
+            <LoadingButton
+              type='submit'
+              variant='contained'
+              loading={isSubmitting}
+              disabled={isSaveDisabled}
+            >
+              {t('common.save')}
+            </LoadingButton>
+          </Stack>
+        </Card>
+      </Grid>
+    </Grid>
+  )
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      {renderForm}
+    </FormProvider>
+  )
+}

src/sections/banking/view/index.ts

@@ -1 +1,2 @@
+export { default as TransferAllView } from './transfer-all-view'
 export { default as OverviewBankingView } from './overview-banking-view'

src/sections/banking/view/transfer-all-view.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import Container from '@mui/material/Container'
+
+import { paths } from 'src/routes/paths'
+
+import { useTranslate } from 'src/locales'
+
+import { useSettingsContext } from 'src/components/settings'
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs'
+
+import ChangeEmail from '../transfer-all'
+
+// ----------------------------------------------------------------------
+
+export default function TransferAllView() {
+  const settings = useSettingsContext()
+  const { t } = useTranslate()
+
+  return (
+    <Container maxWidth={settings.themeStretch ? false : 'lg'}>
+      <CustomBreadcrumbs
+        heading={t('menu.email')}
+        links={[
+          { name: t('menu._dashboard'), href: paths.dashboard.root },
+          { name: t('menu.user'), href: paths.dashboard.user.root },
+          { name: t('menu.account'), href: paths.dashboard.user.root },
+          { name: t('menu.email') }
+        ]}
+        sx={{
+          mb: { xs: 3, md: 5 }
+        }}
+      />
+
+      <ChangeEmail />
+    </Container>
+  )
+}