[Bug] You can click Next if you are both not logged and not anonymous (…

…#1134)

* 1133 - disable next button when not logged in

* 1133 - fix anonymous submit value when mutating

* 1133 - add option to be able to donate anonymous even if you are logged in

* 1133 - remove console.logs

* 1133 - add enum for auth step tabs

* 1133 - change Tabs to strings

README.md

@@ -70,7 +70,9 @@ Read more at [End-2-End Testing](https://github.com/podkrepi-bg/frontend/blob/ma
 ## Contributors ✨
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-57-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Please check [contributors guide](https://github.com/podkrepi-bg/frontend/blob/master/CONTRIBUTING.md) for:

src/components/one-time-donation/AnonymousForm.tsx

@@ -1,16 +1,10 @@
 import * as React from 'react'
 import { useTranslation } from 'next-i18next'
-import { useSession } from 'next-auth/react'
 import { Grid, Typography } from '@mui/material'
 import FormTextField from 'components/common/form/FormTextField'
-import CheckboxField from 'components/common/form/CheckboxField'
 
 export default function AnonymousForm() {
   const { t } = useTranslation('one-time-donation')
-  const { data: session } = useSession()
-  function isLogged() {
-    return session && session.accessToken ? true : false
-  }
   return (
     <>
       <Typography variant="subtitle2" fontWeight="bold">
@@ -21,16 +15,6 @@ export default function AnonymousForm() {
         <Grid item xs={12} color="#343434" sx={{ opacity: 0.9 }}>
           <Typography>{t('anonymous-menu.info-start')}</Typography>
         </Grid>
-        {isLogged() ? (
-          <Grid item xs={12}>
-            <CheckboxField
-              name="isAnonymous"
-              label={t('anonymous-menu.want-anonymous-donation').toString()}
-            />
-          </Grid>
-        ) : (
-          ''
-        )}
         <Grid item xs={12} md={12}>
           <FormTextField name="personsEmail" type="text" label="Email" fullWidth />
         </Grid>

src/components/one-time-donation/FormikStepper.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useContext, useEffect } from 'react'
+import React, { PropsWithChildren, useCallback, useContext, useEffect } from 'react'
 import { styled } from '@mui/material/styles'
 import { useTranslation } from 'next-i18next'
 import { useRouter } from 'next/router'
@@ -44,6 +44,10 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
   const currentChild = childrenArray[step]
   const { data: session } = useSession()
 
+  function isLoginStep() {
+    return step === childrenArray.length - 3
+  }
+
   function isLastStep() {
     return step === childrenArray.length - 2
   }
@@ -56,7 +60,15 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
     return true
   }
   const { t } = useTranslation('one-time-donation')
-
+  const hideNextButton = useCallback(
+    (isAnonymous: boolean) => {
+      if (isLoginStep() && !isLogged() && !isAnonymous) {
+        return true
+      }
+      return false
+    },
+    [step],
+  )
   return (
     <Formik
       {...props}
@@ -72,7 +84,7 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
       }}
       validateOnMount
       validateOnBlur>
-      {({ isSubmitting, handleSubmit, isValid }) => (
+      {({ isSubmitting, handleSubmit, isValid, values: { isAnonymous } }) => (
         <Form
           onSubmit={handleSubmit}
           style={{
@@ -112,7 +124,7 @@ export function FormikStepper({ children, ...props }: GenericFormProps<OneTimeDo
               </Grid>
               <Grid item xs={12} md={6}>
                 <LoadingButton
-                  disabled={!isValid}
+                  disabled={!isValid || isSubmitting || hideNextButton(isAnonymous)}
                   fullWidth
                   type="submit"
                   variant="contained"

src/components/one-time-donation/LoginForm.tsx

@@ -35,7 +35,7 @@ function LoginForm() {
       }
       if (resp?.ok) {
         setLoading(false)
-        formik.values.isAnonymous = false
+        formik.setFieldValue('isAnonymous', false)
         setStep(2)
         AlertStore.show(t('auth:alerts.welcome'), 'success')
       }

src/components/one-time-donation/RegisterDialog.tsx

@@ -46,7 +46,7 @@ export default function RegisterForm() {
       if (resp?.ok) {
         setLoading(false)
         AlertStore.show(t('auth:alerts.welcome'), 'success')
-        formik.values.isAnonymous = false
+        formik.setFieldValue('isAnonymous', false)
         setStep(2)
       }
     } catch (error) {

src/components/one-time-donation/Steps.tsx

@@ -25,7 +25,7 @@ import { useCurrentPerson } from 'common/util/useCurrentPerson'
 
 const initialValues: OneTimeDonation = {
   message: '',
-  isAnonymous: true,
+  isAnonymous: false,
   amount: '',
   amountWithFees: 0,
   cardIncludeFees: false,
@@ -64,7 +64,6 @@ export default function DonationStepper({ onStepChange }: DonationStepperProps)
     return session && session.accessToken ? true : false
   }
 
-  initialValues.isAnonymous = !isLogged()
   const userEmail = session?.user?.email
 
   const donate = React.useCallback(
@@ -76,7 +75,7 @@ export default function DonationStepper({ onStepChange }: DonationStepperProps)
         firstName: values?.personsFirstName ? values.personsFirstName : 'Anonymous',
         lastName: values?.personsLastName ? values.personsLastName : 'Donor',
         personEmail: values?.personsEmail ? values.personsEmail : userEmail,
-        isAnonymous: values?.isAnonymous ?? !isLogged(),
+        isAnonymous: values?.isAnonymous !== undefined ? values.isAnonymous : true,
         phone: values?.personsPhone ? values.personsPhone : null,
         successUrl: `${baseUrl}${routes.campaigns.oneTimeDonation(campaign.slug)}?success=true`,
         cancelUrl: `${baseUrl}${routes.campaigns.oneTimeDonation(campaign.slug)}?success=false`,

src/components/one-time-donation/steps/SecondStep.tsx

@@ -1,6 +1,8 @@
 import { TabContext, TabList } from '@mui/lab'
 import TabPanel from '@mui/lab/TabPanel'
 import { Box, Tab, Typography, useMediaQuery } from '@mui/material'
+import { useFormikContext } from 'formik'
+import { OneTimeDonation } from 'gql/donations'
 import { useSession } from 'next-auth/react'
 import { useTranslation } from 'next-i18next'
 import React, { useState } from 'react'
@@ -9,15 +11,25 @@ import LoggedUserDialog from '../LoggedUserDialog'
 import LoginForm from '../LoginForm'
 import RegisterForm from '../RegisterDialog'
 
+enum Tabs {
+  Login = '1',
+  Register = '2',
+  Anonymous = '3',
+}
 export default function SecondStep() {
   const { t } = useTranslation('one-time-donation')
   const mobile = useMediaQuery('(max-width:575px)')
   const { data: session } = useSession()
 
   const [value, setValue] = useState('1')
-
-  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue)
+  const formik = useFormikContext<OneTimeDonation>()
+  const handleChange = (event: React.SyntheticEvent, newTab: string) => {
+    if (newTab === Tabs.Anonymous) {
+      formik.setFieldValue('isAnonymous', true)
+    } else {
+      formik.setFieldValue('isAnonymous', false)
+    }
+    setValue(newTab)
   }
 
   return (