Add skip button

f2/src/forms/ContactInfoForm.js

@@ -8,6 +8,10 @@ import { TextInput } from '../components/TextInput'
 import { Stack, FormControl } from '@chakra-ui/core'
 import { useStateValue } from '../utils/state'
 import { FormLabel } from '../components/FormLabel'
+import { Button } from '../components/button'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import { Flex, Icon } from '@chakra-ui/core'
+import { P } from '../components/paragraph'
 
 export const ContactInfoForm = ({ onSubmit }) => {
   const [data, dispatch] = useStateValue()
@@ -26,6 +30,25 @@ export const ContactInfoForm = ({ onSubmit }) => {
       onSubmit={onSubmit}
       render={({ handleSubmit }) => (
         <Stack as="form" onSubmit={handleSubmit} shouldWrapChildren spacing={6}>
+          <Flex direction="row" align="center" wrap="wrap" mb={10}>
+            <P w="100%">
+              <Trans id="contactinfoPage.skipInfo" />
+            </P>
+            <Button
+              as={ReactRouterLink}
+              fontSize={{ base: 'lg', md: 'xl' }}
+              color="black"
+              variant="solid"
+              variantColor="gray"
+              bg="gray.400"
+              borderColor="gray.500"
+              to="/confirmation"
+              textAlign="center"
+            >
+              <Trans id="contactinfoPage.skipButton" />
+              <Icon focusable="false" ml={2} mr={-2} name="chevron-right" size="28px" />
+            </Button>
+          </Flex>
           <Field name="fullName">
             {props => (
               <FormControl>

f2/src/forms/LocationInfoForm.js

@@ -9,6 +9,11 @@ import { Stack, FormControl, VisuallyHidden } from '@chakra-ui/core'
 import { FormHelperText } from '../components/FormHelperText'
 import { FormLabel } from '../components/FormLabel'
 import { useStateValue } from '../utils/state'
+import { Link as ReactRouterLink } from 'react-router-dom'
+import { Flex, Icon } from '@chakra-ui/core'
+import { P } from '../components/paragraph'
+import { Button } from '../components/button'
+
 
 export const LocationInfoForm = props => {
   const [data] = useStateValue()
@@ -23,7 +28,26 @@ export const LocationInfoForm = props => {
       onSubmit={props.onSubmit}
       render={({ handleSubmit }) => (
         <Stack as="form" onSubmit={handleSubmit} shouldWrapChildren spacing={6}>
-          <Field name="postalCode">
+          <Flex direction="row" align="center" wrap="wrap" mb={10}>
+            <P w="100%">
+              <Trans id="locationinfoPage.skipInfo" />
+            </P>
+            <Button
+              as={ReactRouterLink}
+              fontSize={{ base: 'lg', md: 'xl' }}
+              color="black"
+              variant="solid"
+              variantColor="gray"
+              bg="gray.400"
+              borderColor="gray.500"
+              to="/contactinfo"
+              textAlign="center"
+            >
+              <Trans id="locationinfoPage.skipButton" />
+              <Icon focusable="false" ml={2} mr={-2} name="chevron-right" size="28px" />
+            </Button>
+          </Flex>
+          < Field name="postalCode" >
             {props => (
               <FormControl>
                 <FormLabel htmlFor="postalCode">
@@ -42,12 +66,12 @@ export const LocationInfoForm = props => {
                 />
               </FormControl>
             )}
-          </Field>
+          </Field >
           <NextAndCancelButtons
             next={<Trans id="locationinfoPage.nextPage" />}
             button={<Trans id="locationinfoPage.nextButton" />}
           />
-        </Stack>
+        </Stack >
       )}
     />
   )

f2/src/locales/en.json

@@ -92,8 +92,10 @@
   "contactinfoPage.fullName": "Full name",
   "contactinfoPage.intro": "We do not follow up with everyone who submits a report. We will only contact you to confirm your report or if we need more information.",
   "contactinfoPage.nextButton": "Continue",
-  "contactinfoPage.nextInfo": "Next: Review your report",
+  "contactinfoPage.nextInfo": "Prochaine étape : Révisez votre rapport",
   "contactinfoPage.phoneNumber": "Phone number",
+  "contactinfoPage.skipButton": "Skip",
+  "contactinfoPage.skipInfo": "You can skip this step to report anonymously.",
   "contactinfoPage.title": "Enter your contact details",
   "default.end": ", and ",
   "default.middle": ", ",
@@ -207,6 +209,8 @@
   "locationinfoPage.nextPage": "Next: Enter your contact details",
   "locationinfoPage.postalCode": "Postal code",
   "locationinfoPage.postalCodeExample": "For example: K1A 0R2",
+  "locationinfoPage.skipButton": "Skip",
+  "locationinfoPage.skipInfo": "If you’d rather not include your location, you can skip this step.",
   "methodPayment.cash": "Cryptocurrency",
   "methodPayment.creditCard": "Credit card",
   "methodPayment.eTransfer": "E-transfer",

f2/src/locales/fr.json

@@ -88,12 +88,14 @@
   "confirmationPage.whatWasAffected.format": "L'incident a affecté",
   "confirmationPage.whenDidItStart": "Début",
   "contactinfoPage.backButton": "Retour",
-  "contactinfoPage.emailAddress": "Adresse courriel.",
+  "contactinfoPage.emailAddress": "Adresse courriel",
   "contactinfoPage.fullName": "Nom complet",
   "contactinfoPage.intro": "Nous ne faisons pas de suivi auprès de toutes les personnes qui font un signalement. Nous communiquerons avec vous uniquement pour confirmer vos informations ou si nous avons besoin d’en savoir plus.",
   "contactinfoPage.nextButton": "Continuer",
   "contactinfoPage.nextInfo": "Prochaine étape : Révisez votre rapport",
-  "contactinfoPage.phoneNumber": "Numéro de téléphone.",
+  "contactinfoPage.phoneNumber": "Numéro de téléphone",
+  "contactinfoPage.skipButton": "Ignorer",
+  "contactinfoPage.skipInfo": "Vous pouvez ignorer cette étape si vous souhaitez signaler de façon anonyme.",
   "contactinfoPage.title": "Vos coordonnées",
   "default.end": " et ",
   "default.middle": ", ",
@@ -207,6 +209,8 @@
   "locationinfoPage.nextPage": "Prochaine étape : Vos coordonnées",
   "locationinfoPage.postalCode": "Code postal",
   "locationinfoPage.postalCodeExample": "Par exemple : K1A 0R2",
+  "locationinfoPage.skipButton": "Ignorer",
+  "locationinfoPage.skipInfo": "Si vous préférez ne pas inclure votre lieu, vous pouvez ignorer cette étape.",
   "methodPayment.cash": "Cryptomonnaie",
   "methodPayment.creditCard": "Carte de crédit",
   "methodPayment.eTransfer": "Transfert électronique",