copy base dmenu to dkala
This commit is contained in:
hamid zarghami
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
// import LoadingOverlay from '@/components/overlays/LoadingOverlay';
|
||||
import React from 'react'
|
||||
|
||||
type Props = {
|
||||
isPending: boolean,
|
||||
onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
|
||||
} & Omit<React.FormHTMLAttributes<HTMLFormElement>, 'id'>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function AuthFormWrapper({ children, isPending, onSubmit, ...restProps }: Props) {
|
||||
const handleSubmit = React.useCallback(
|
||||
(event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
onSubmit?.(event);
|
||||
},
|
||||
[onSubmit],
|
||||
);
|
||||
|
||||
return (
|
||||
<form
|
||||
{...restProps}
|
||||
onSubmit={handleSubmit}
|
||||
className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'
|
||||
>
|
||||
<div className='relative h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
|
||||
{children}
|
||||
{/* <LoadingOverlay visible={isPending} bgOpacity={0} /> */}
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default AuthFormWrapper
|
||||
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
|
||||
import Button from '@/components/button/PrimaryButton'
|
||||
import InputField from '@/components/input/InputField'
|
||||
import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums'
|
||||
import { LoginOTPRequestType } from '@/app/auth/login/types/Types'
|
||||
import Image from 'next/image'
|
||||
import React, { useState } from 'react'
|
||||
import type { ChangeEvent } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { useOtpRequest } from '@/app/auth/login/hooks/useAuthData'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { toast } from '@/components/Toast'
|
||||
import StepOtp from './StepOtp'
|
||||
import { extractErrorMessage } from '@/lib/func'
|
||||
|
||||
type StepEnterNumberProps = {
|
||||
pending?: boolean
|
||||
onChange?: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
value?: string
|
||||
}
|
||||
|
||||
function StepEnterNumber(_props: StepEnterNumberProps = {}) {
|
||||
void _props
|
||||
|
||||
const { t } = useTranslation('auth')
|
||||
const { name } = useParams()
|
||||
const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER)
|
||||
const { mutate: mutateOtpRequest, isPending } = useOtpRequest()
|
||||
|
||||
|
||||
const formik = useFormik<LoginOTPRequestType>({
|
||||
initialValues: {
|
||||
phone: '',
|
||||
slug: '',
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
phone: Yup.string().required('Errors.PhoneNumberRequired').matches(/^09\d{9}$/, 'Errors.PhoneNumberFormat'),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
if (name) {
|
||||
values.slug = name as string
|
||||
mutateOtpRequest(values, {
|
||||
onSuccess: () => {
|
||||
toast(t('otp_sent'), 'success')
|
||||
setStep(AUTH_STEP.ENTER_OTP)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(extractErrorMessage(error), 'error')
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
|
||||
src={'/assets/images/login-banner.png'}
|
||||
alt='login banner'
|
||||
width={100}
|
||||
height={100}
|
||||
unoptimized
|
||||
priority
|
||||
/>
|
||||
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
|
||||
<div className='w-full'>
|
||||
<div className='pt-4'>
|
||||
{
|
||||
step === AUTH_STEP.ENTER_NUMBER && (
|
||||
<>
|
||||
<h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
step === AUTH_STEP.ENTER_OTP && (
|
||||
<>
|
||||
<h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('OTP.Description', { phoneNumber: formik.values.phone })}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{step === AUTH_STEP.ENTER_NUMBER && (
|
||||
<InputField
|
||||
inputMode='tel'
|
||||
autoComplete='tel'
|
||||
className='mt-10 w-full bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
|
||||
labelText={t('Enter.LabelPhoneNumber')}
|
||||
{...formik.getFieldProps('phone')}
|
||||
placeholder='09120000000'
|
||||
/>
|
||||
)}
|
||||
{step === AUTH_STEP.ENTER_OTP && (
|
||||
<StepOtp phone={formik.values.phone} slug={formik.values.slug} />
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
step === AUTH_STEP.ENTER_NUMBER && (
|
||||
<Button
|
||||
disabled={!formik.isValid}
|
||||
pending={isPending}
|
||||
type='button'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
className='dark:bg-white dark:text-black hover:dark:bg-white'
|
||||
>
|
||||
{t('Enter.ButtonSubmit')}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepEnterNumber
|
||||
@@ -0,0 +1,128 @@
|
||||
'use client'
|
||||
|
||||
import Button from '@/components/button/PrimaryButton'
|
||||
import OTPInputField from '@/components/input/MultiInputField'
|
||||
import {
|
||||
AUTH_PAGE_ELEMENT,
|
||||
AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS
|
||||
} from '@/enums'
|
||||
import clsx from 'clsx'
|
||||
import Image from 'next/image'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
|
||||
React.ChangeEventHandler<HTMLInputElement>
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
|
||||
value: string
|
||||
phoneNumber: string
|
||||
timerRunning: boolean
|
||||
secondsLeft: number
|
||||
pending?: boolean | undefined
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
||||
|
||||
function StepEnterOtp ({
|
||||
onChange,
|
||||
onClick,
|
||||
pending,
|
||||
disabled = false,
|
||||
value,
|
||||
phoneNumber,
|
||||
timerRunning,
|
||||
secondsLeft
|
||||
}: Props) {
|
||||
const [error, setError] = useState('')
|
||||
const { t } = useTranslation('auth')
|
||||
|
||||
const hasError = (e = error) => {
|
||||
return e.trim().length > 0
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = ''
|
||||
if (!/^\d{6}$/.test(value)) {
|
||||
error = t('Errors.OTPFormat')
|
||||
}
|
||||
|
||||
setError(error)
|
||||
}, [t, value])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
|
||||
src={'/assets/images/login-banner.png'}
|
||||
alt='login banner'
|
||||
width={100}
|
||||
height={100}
|
||||
unoptimized
|
||||
priority
|
||||
/>
|
||||
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
|
||||
<div className='pt-4'>
|
||||
{/* // TODO: add persian digits font */}
|
||||
<h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
|
||||
<p className='mt-3 text-[13px]'>
|
||||
{t('OTP.Description').replace('{phoneNumber}', phoneNumber)}
|
||||
</p>
|
||||
</div>
|
||||
<div className='w-full flex justify-center items-center'>
|
||||
<OTPInputField
|
||||
autoFocus
|
||||
autoComplete='one-time-code'
|
||||
type='text'
|
||||
inputMode='numeric'
|
||||
className='mt-10 min-h-14 max-w-[304px]'
|
||||
maxLength={6}
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
|
||||
labelText=''
|
||||
value={value}
|
||||
placeholder=''
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-center w-full pt-6 text-xs'>
|
||||
<div>
|
||||
{timerRunning ? (
|
||||
<div>
|
||||
{t('OTP.TimerRunning').replace(
|
||||
'{seconds}',
|
||||
String(secondsLeft)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{t('OTP.TimerOut')}
|
||||
<button
|
||||
type='button'
|
||||
disabled={pending}
|
||||
id={AUTH_PAGE_ELEMENTS.RESEND_OTP}
|
||||
className={clsx(
|
||||
'px-1 transition-colors duration-200',
|
||||
!pending
|
||||
? 'text-primary cursor-pointer'
|
||||
: 'text-neutral-200 cursor-auto'
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{t('OTP.TimerReset')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
disabled={disabled || hasError() || value.length <= 0}
|
||||
pending={pending}
|
||||
type='submit'
|
||||
>
|
||||
{t('OTP.ButtonSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepEnterOtp
|
||||
@@ -0,0 +1,132 @@
|
||||
'use client'
|
||||
|
||||
import Button from '@/components/button/PrimaryButton'
|
||||
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
|
||||
import InputField from '@/components/input/InputField'
|
||||
import { AUTH_PAGE_ELEMENT } from '@/enums'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
|
||||
React.ChangeEventHandler<HTMLInputElement>
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
|
||||
value: string
|
||||
passwordVisible: boolean
|
||||
rememberMe: boolean
|
||||
pending?: boolean | undefined
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
||||
|
||||
function StepEnterPassword ({
|
||||
onChange,
|
||||
onClick,
|
||||
pending,
|
||||
disabled = false,
|
||||
value,
|
||||
passwordVisible,
|
||||
rememberMe
|
||||
}: Props) {
|
||||
const [error, setError] = useState('')
|
||||
const { t } = useTranslation('auth')
|
||||
|
||||
const hasError = (e = error) => {
|
||||
return e.trim().length > 0
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = ''
|
||||
if (value.length > 0) {
|
||||
if (!/^.{6,}$/.test(value)) {
|
||||
error = t('Errors.PasswordLength')
|
||||
}
|
||||
}
|
||||
|
||||
setError(error)
|
||||
}, [t, value])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
|
||||
src={'/assets/images/login-banner.png'}
|
||||
alt='login banner'
|
||||
width={100}
|
||||
height={100}
|
||||
unoptimized
|
||||
priority
|
||||
/>
|
||||
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
|
||||
<div className='w-full'>
|
||||
<div className='pt-4'>
|
||||
<h6 className='text-lg font-bold'>{t('EnterPass.Heading')}</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('EnterPass.Description')}</p>
|
||||
</div>
|
||||
<InputField
|
||||
valid={!hasError()}
|
||||
aria-errormessage={error}
|
||||
autoFocus
|
||||
autoComplete='current-password'
|
||||
className='mt-10 bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
|
||||
labelText={t('EnterPass.LabelPass')}
|
||||
value={value}
|
||||
placeholder=''
|
||||
onChange={onChange}
|
||||
type={passwordVisible ? 'text' : 'password'}
|
||||
>
|
||||
<button
|
||||
className='ps-3'
|
||||
id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD}
|
||||
type='button'
|
||||
onClick={onClick}
|
||||
>
|
||||
<EyeToggleIcon
|
||||
slash={passwordVisible}
|
||||
className='pointer-events-none'
|
||||
/>
|
||||
</button>
|
||||
</InputField>
|
||||
<div className='inline-flex justify-between items-center w-full pt-3'>
|
||||
<Link
|
||||
href={'/auth/forgot-password'}
|
||||
id={AUTH_PAGE_ELEMENT.RESET_PASSWORD}
|
||||
type='button'
|
||||
className='text-sm2 cursor-pointer'
|
||||
>
|
||||
{t('EnterPass.ButtonRecover')}
|
||||
</Link>
|
||||
|
||||
<div className='inline-flex justify-between items-center'>
|
||||
{/* TODO: customize checkbox */}
|
||||
<label
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
|
||||
className='text-sm2 px-2 py-0.5 mt-0.5'
|
||||
>
|
||||
{t('EnterPass.LabelRememberance')}
|
||||
</label>
|
||||
<input
|
||||
name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
|
||||
id={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME}
|
||||
className='h-4.5 w-4.5 checked:accent-primary'
|
||||
onChange={onChange}
|
||||
type='checkbox'
|
||||
checked={rememberMe}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
disabled={disabled || hasError() || value.length <= 0}
|
||||
pending={pending}
|
||||
type='submit'
|
||||
>
|
||||
{t('EnterPass.ButtonSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepEnterPassword
|
||||
@@ -0,0 +1,150 @@
|
||||
'use client'
|
||||
|
||||
import Button from '@/components/button/PrimaryButton'
|
||||
import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
|
||||
import InputField from '@/components/input/InputField'
|
||||
import { AUTH_PAGE_ELEMENT } from '@/enums'
|
||||
import Image from 'next/image'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) &
|
||||
React.ChangeEventHandler<HTMLInputElement>
|
||||
onClick: React.MouseEventHandler<HTMLButtonElement> | undefined
|
||||
value: string
|
||||
repeatValue: string
|
||||
isReset?: boolean
|
||||
passwordVisible: boolean
|
||||
repeatPasswordVisible: boolean
|
||||
pending?: boolean | undefined
|
||||
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'id'>
|
||||
|
||||
function StepNewPassword ({
|
||||
isReset: reset = false,
|
||||
pending,
|
||||
disabled = false,
|
||||
onChange,
|
||||
onClick,
|
||||
value,
|
||||
repeatValue,
|
||||
passwordVisible,
|
||||
repeatPasswordVisible
|
||||
}: Props) {
|
||||
const [error, setError] = useState('')
|
||||
const [error2, setError2] = useState('')
|
||||
const { t } = useTranslation('auth')
|
||||
|
||||
const hasError = (e = error) => {
|
||||
return e.trim().length > 0
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let error = ''
|
||||
let error2 = ''
|
||||
if (value.length > 0) {
|
||||
if (!/^.{6,}$/.test(value)) {
|
||||
error = t('Errors.PasswordLength')
|
||||
}
|
||||
}
|
||||
if (repeatValue.length > 0) {
|
||||
if (!/^.{6,}$/.test(repeatValue)) {
|
||||
error2 = t('Errors.PasswordLength')
|
||||
} else if (repeatValue !== value) {
|
||||
error2 = t('Errors.PasswordMatch')
|
||||
}
|
||||
}
|
||||
|
||||
setError(error)
|
||||
setError2(error2)
|
||||
}, [value, repeatValue, t])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
|
||||
src={'/assets/images/login-banner.png'}
|
||||
alt='login banner'
|
||||
width={100}
|
||||
height={100}
|
||||
unoptimized
|
||||
priority
|
||||
/>
|
||||
<div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
|
||||
<div className='w-full'>
|
||||
<div className='pt-4'>
|
||||
<h6 className='text-lg font-bold'>
|
||||
{reset
|
||||
? t('NewPassword.HeadingResetPass')
|
||||
: t('NewPassword.HeadingCreatePass')}
|
||||
</h6>
|
||||
<p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
|
||||
</div>
|
||||
<InputField
|
||||
valid={!hasError()}
|
||||
aria-errormessage={error}
|
||||
autoComplete='new-password'
|
||||
className='mt-10 bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
|
||||
labelText={t('NewPassword.LabelPass')}
|
||||
value={value}
|
||||
placeholder=''
|
||||
onChange={onChange}
|
||||
type={passwordVisible ? 'text' : 'password'}
|
||||
>
|
||||
<button
|
||||
className='ps-3'
|
||||
id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD}
|
||||
type='button'
|
||||
onClick={onClick}
|
||||
>
|
||||
<EyeToggleIcon
|
||||
slash={passwordVisible}
|
||||
className='pointer-events-none'
|
||||
/>
|
||||
</button>
|
||||
</InputField>
|
||||
<InputField
|
||||
valid={!hasError(error2)}
|
||||
aria-errormessage={error2}
|
||||
autoComplete='new-password'
|
||||
className='mt-6 bg-container'
|
||||
htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
|
||||
labelText={t('NewPassword.LabelRepeatPass')}
|
||||
value={repeatValue}
|
||||
placeholder=''
|
||||
onChange={onChange}
|
||||
type={repeatPasswordVisible ? 'text' : 'password'}
|
||||
>
|
||||
<button
|
||||
className='ps-3'
|
||||
id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD}
|
||||
type='button'
|
||||
onClick={onClick}
|
||||
>
|
||||
<EyeToggleIcon
|
||||
slash={repeatPasswordVisible}
|
||||
className='pointer-events-none'
|
||||
/>
|
||||
</button>
|
||||
</InputField>
|
||||
</div>
|
||||
<Button
|
||||
disabled={
|
||||
disabled ||
|
||||
hasError() ||
|
||||
hasError(error2) ||
|
||||
value.length <= 0 ||
|
||||
repeatValue.length <= 0
|
||||
}
|
||||
pending={pending}
|
||||
type='submit'
|
||||
>
|
||||
{t('NewPassword.ButtonSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepNewPassword
|
||||
@@ -0,0 +1,123 @@
|
||||
import { LoginVerifyOTPType } from '@/app/auth/login/types/Types'
|
||||
import React from 'react'
|
||||
import OTPInput from 'react-otp-input'
|
||||
import { useFormik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useOtpVerify } from '@/app/auth/login/hooks/useAuthData'
|
||||
import { toast } from '@/components/Toast'
|
||||
import Button from '@/components/button/PrimaryButton'
|
||||
import { extractErrorMessage } from '@/lib/func'
|
||||
import { useReceiptStore } from '@/zustand/receiptStore'
|
||||
import { useBulkCart } from '@/app/[name]/(Dialogs)/cart/hooks/useCartData'
|
||||
import { setRefreshToken, setToken } from '@/lib/api/func'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
|
||||
|
||||
type Props = {
|
||||
phone: string,
|
||||
slug: string
|
||||
}
|
||||
|
||||
const StepOtp = ({ phone, slug }: Props) => {
|
||||
const searchParams = useSearchParams()
|
||||
const redirectUrl = searchParams.get('redirect')
|
||||
const { t } = useTranslation('auth')
|
||||
const { mutate: mutateOtpVerify, isPending } = useOtpVerify()
|
||||
|
||||
const { items, clear } = useReceiptStore()
|
||||
const { mutate: mutateBulkCart, isPending: isBulkCartPending } = useBulkCart()
|
||||
|
||||
const getRedirectPath = () => {
|
||||
if (redirectUrl) {
|
||||
return decodeURIComponent(redirectUrl)
|
||||
}
|
||||
return `/${slug}`
|
||||
}
|
||||
|
||||
const formik = useFormik<LoginVerifyOTPType>({
|
||||
initialValues: {
|
||||
phone: phone,
|
||||
otp: '',
|
||||
slug: slug
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
otp: Yup.string().required(t('Errors.OTPRequired'))
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
mutateOtpVerify(values, {
|
||||
onSuccess: (data) => {
|
||||
toast(t('otp_verified'), 'success')
|
||||
setToken(data?.data?.tokens?.accessToken?.token as string)
|
||||
setRefreshToken(data?.data?.tokens?.refreshToken?.token as string)
|
||||
|
||||
if (Object.keys(items).length > 0) {
|
||||
const bulkCartItems = Object.entries(items).map(([key, value]) => {
|
||||
if (value.quantity > 0) {
|
||||
return {
|
||||
foodId: key,
|
||||
quantity: value.quantity
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}).filter((item): item is { foodId: string; quantity: number } => item !== undefined)
|
||||
if (!!bulkCartItems.length) {
|
||||
mutateBulkCart({ items: bulkCartItems }, {
|
||||
onSuccess: () => {
|
||||
clear()
|
||||
window.location.href = getRedirectPath()
|
||||
},
|
||||
onError: (error) => {
|
||||
clear()
|
||||
window.location.href = getRedirectPath()
|
||||
toast(extractErrorMessage(error), 'error')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
window.location.href = getRedirectPath()
|
||||
}
|
||||
} else {
|
||||
window.location.href = getRedirectPath()
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
onError: (error) => {
|
||||
toast(extractErrorMessage(error), 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
return (
|
||||
<div className='mt-6 sm:mt-8 dltr otp'>
|
||||
<OTPInput
|
||||
shouldAutoFocus
|
||||
value={formik.values.otp}
|
||||
numInputs={5}
|
||||
inputType='tel'
|
||||
containerStyle={{ direction: 'ltr' }}
|
||||
onChange={(otp: string) => formik.setFieldValue('otp', otp)}
|
||||
renderInput={(props) =>
|
||||
<input
|
||||
{...props}
|
||||
type='tel'
|
||||
autoComplete="one-time-code"
|
||||
inputMode="numeric"
|
||||
className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-container border border-border text-foreground outline-0 rounded-[10px] text-center text-sm' />
|
||||
}
|
||||
/>
|
||||
|
||||
<Button
|
||||
className='mt-10 dark:bg-white dark:text-black hover:dark:bg-white'
|
||||
disabled={!formik.isValid}
|
||||
pending={isPending || isBulkCartPending}
|
||||
type='button'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
>
|
||||
{t('OTP.ButtonSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StepOtp
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client';
|
||||
|
||||
import Prompt, { PromptProps } from '@/components/utils/Prompt'
|
||||
import { useAuthStore } from '@/zustand/authStore';
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { removeToken, removeRefreshToken } from '@/lib/api/func';
|
||||
|
||||
export type LogoutPromptProps = Omit<PromptProps, 'onConfirm' | 'onCancel' | 'children'> & {
|
||||
slug?: string;
|
||||
};
|
||||
|
||||
function LogoutPrompt({ slug, ...rest }: LogoutPromptProps) {
|
||||
const { t } = useTranslation('common', {
|
||||
keyPrefix: 'LogoutModal'
|
||||
});
|
||||
const authLogout = useAuthStore((state) => state.logout);
|
||||
|
||||
const onConfirmLogout = async (e: React.MouseEvent) => {
|
||||
if (!e) return;
|
||||
rest.onClick?.(e);
|
||||
authLogout();
|
||||
await removeToken();
|
||||
await removeRefreshToken();
|
||||
const redirectPath = slug ? `/${slug}` : '/';
|
||||
window.location.href = redirectPath;
|
||||
};
|
||||
|
||||
const toggleLogoutModalVisibility = (e: React.MouseEvent) => {
|
||||
e?.preventDefault();
|
||||
e?.stopPropagation();
|
||||
rest.onClick?.(e);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Prompt
|
||||
title={t("Heading")}
|
||||
description={t("Description")}
|
||||
textConfirm={t("ButtonOk")}
|
||||
textCancel={t("ButtonCancel")}
|
||||
onConfirm={onConfirmLogout}
|
||||
onCancel={toggleLogoutModalVisibility}
|
||||
{...rest}>
|
||||
<></>
|
||||
</Prompt>
|
||||
)
|
||||
}
|
||||
|
||||
export default LogoutPrompt
|
||||
@@ -0,0 +1,16 @@
|
||||
'use client'
|
||||
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import { useState } from 'react'
|
||||
|
||||
export function ReactQueryProvider({ children }: { children: React.ReactNode }) {
|
||||
const [queryClient] = useState(() => new QueryClient())
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
{/* <ReactQueryDevtools initialIsOpen={false} /> */}
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user