From 6f58cc5fd0d16c7007579698b8a500a78d6bd129 Mon Sep 17 00:00:00 2001
From: Michael Schramm <michael.schramm@gmail.com>
Date: Thu, 11 Jun 2020 09:12:19 +0200
Subject: [PATCH] add translations for field validation and number validation

---
 CHANGELOG.md                            |  2 ++
 components/form/page.module.scss        | 19 +++++++++++++++++++
 components/form/page.tsx                | 22 +++++-----------------
 components/form/types/date.type.tsx     |  4 +++-
 components/form/types/dropdown.type.tsx |  4 +++-
 components/form/types/email.type.tsx    |  7 +++++--
 components/form/types/link.type.tsx     |  7 +++++--
 components/form/types/number.type.tsx   | 11 +++++------
 components/form/types/radio.type.tsx    |  5 ++++-
 components/form/types/rating.type.tsx   |  4 +++-
 components/form/types/text.type.tsx     |  4 +++-
 components/form/types/textarea.type.tsx |  5 ++++-
 components/form/types/yes_no.type.tsx   |  5 ++++-
 locales/en/validation.json              |  1 +
 14 files changed, 66 insertions(+), 34 deletions(-)
 create mode 100644 components/form/page.module.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 763eb29..07f6efb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - prev property error on div
 - rating field default on admin
 - number field defaults
+- translations for field validation
+- number validation
 
 ### Security
  
diff --git a/components/form/page.module.scss b/components/form/page.module.scss
new file mode 100644
index 0000000..1a729ba
--- /dev/null
+++ b/components/form/page.module.scss
@@ -0,0 +1,19 @@
+.main {
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    overflow: auto;
+    padding: 16px;
+
+    @media (max-width: 600px) {
+      display: block;
+    }
+  }
+}
+
diff --git a/components/form/page.tsx b/components/form/page.tsx
index 0f045b6..91b8f24 100644
--- a/components/form/page.tsx
+++ b/components/form/page.tsx
@@ -4,38 +4,26 @@ import { FormDesignFragment, FormPageFragment } from '../../graphql/fragment/for
 import { StyledButton } from '../styled/button'
 import { StyledH1 } from '../styled/h1'
 import { StyledMarkdown } from '../styled/markdown'
+import scss from './page.module.scss'
 
 interface Props {
   type: 'start' | 'end'
   page: FormPageFragment
   design: FormDesignFragment
+  className?: string
 
   next: () => void
   prev: () => void
 }
 
-export const FormPage: React.FC<Props> = ({ page, design, next, prev, ...props }) => {
+export const FormPage: React.FC<Props> = ({ page, design, next, prev, className, ...props }) => {
   if (!page.show) {
     return null
   }
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      {...props}
-    >
-      <div
-        style={{
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
+    <div className={[scss.main, className].filter((c) => !!c).join(' ')} {...props}>
+      <div className={scss.content}>
         <StyledH1 design={design} type={'question'}>
           {page.title}
         </StyledH1>
diff --git a/components/form/types/date.type.tsx b/components/form/types/date.type.tsx
index e8e82de..4bda4eb 100644
--- a/components/form/types/date.type.tsx
+++ b/components/form/types/date.type.tsx
@@ -2,12 +2,14 @@ import { Form } from 'antd'
 import dayjs, { Dayjs } from 'dayjs'
 import moment, { Moment } from 'moment'
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledDateInput } from '../../styled/date.input'
 import { FieldTypeProps } from './type.props'
 
 export const DateType: React.FC<FieldTypeProps> = ({ field, design }) => {
   const [min, setMin] = useState<Dayjs>()
   const [max, setMax] = useState<Dayjs>()
+  const { t } = useTranslation()
 
   useEffect(() => {
     field.options.forEach((option) => {
@@ -24,7 +26,7 @@ export const DateType: React.FC<FieldTypeProps> = ({ field, design }) => {
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         getValueFromEvent={(e: Moment) => e.format('YYYY-MM-DD')}
         getValueProps={(e: string) => ({ value: e ? moment(e) : undefined })}
         initialValue={field.value ? moment(field.value) : undefined}
diff --git a/components/form/types/dropdown.type.tsx b/components/form/types/dropdown.type.tsx
index 9044ec6..55de2a5 100644
--- a/components/form/types/dropdown.type.tsx
+++ b/components/form/types/dropdown.type.tsx
@@ -1,16 +1,18 @@
 import { Form, Select } from 'antd'
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledSelect } from '../../styled/select'
 import { FieldTypeProps } from './type.props'
 
 export const DropdownType: React.FC<FieldTypeProps> = ({ field, design }) => {
   const [open, setOpen] = useState(false)
+  const { t } = useTranslation()
 
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={field.value || null}
       >
         <StyledSelect
diff --git a/components/form/types/email.type.tsx b/components/form/types/email.type.tsx
index 9156740..0262a55 100644
--- a/components/form/types/email.type.tsx
+++ b/components/form/types/email.type.tsx
@@ -1,16 +1,19 @@
 import { Form } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledInput } from '../../styled/input'
 import { FieldTypeProps } from './type.props'
 
 export const EmailType: React.FC<FieldTypeProps> = ({ field, design }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
         rules={[
-          { required: field.required, message: 'Please provide Information' },
-          { type: 'email', message: 'Must be a valid email' },
+          { required: field.required, message: t('validation:valueRequired') },
+          { type: 'email', message: t('validation:invalidEmail') },
         ]}
         initialValue={field.value}
       >
diff --git a/components/form/types/link.type.tsx b/components/form/types/link.type.tsx
index 1cffa14..1a58ede 100644
--- a/components/form/types/link.type.tsx
+++ b/components/form/types/link.type.tsx
@@ -1,16 +1,19 @@
 import { Form } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledInput } from '../../styled/input'
 import { FieldTypeProps } from './type.props'
 
 export const LinkType: React.FC<FieldTypeProps> = ({ field, design }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
         rules={[
-          { required: field.required, message: 'Please provide Information' },
-          { type: 'url', message: 'Must be a valid URL' },
+          { required: field.required, message: t('validation:valueRequired') },
+          { type: 'url', message: t('validation:invalidUrl') },
         ]}
         initialValue={field.value}
       >
diff --git a/components/form/types/number.type.tsx b/components/form/types/number.type.tsx
index e66b9d1..da95719 100644
--- a/components/form/types/number.type.tsx
+++ b/components/form/types/number.type.tsx
@@ -1,22 +1,21 @@
 import { Form } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledNumberInput } from '../../styled/number.input'
 import { FieldTypeProps } from './type.props'
 
 export const NumberType: React.FC<FieldTypeProps> = ({ field, design }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
         rules={[
-          { type: 'number', message: 'Must be a valid URL' },
-          { required: field.required, message: 'Please provide Information' },
+          { type: 'number', message: t('validation:invalidNumber') },
+          { required: field.required, message: t('validation:valueRequired') },
         ]}
         initialValue={typeof field.value === 'number' ? parseFloat(field.value) : undefined}
-        getValueFromEvent={(value: number) =>
-          typeof value === 'number' ? value.toFixed(2) : value
-        }
-        getValueProps={(value: string) => ({ value: value ? parseFloat(value) : undefined })}
       >
         <StyledNumberInput design={design} size={'large'} />
       </Form.Item>
diff --git a/components/form/types/radio.type.tsx b/components/form/types/radio.type.tsx
index e9669c0..cb48203 100644
--- a/components/form/types/radio.type.tsx
+++ b/components/form/types/radio.type.tsx
@@ -1,14 +1,17 @@
 import { Form, Radio } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledRadio } from '../../styled/radio'
 import { FieldTypeProps } from './type.props'
 
 export const RadioType: React.FC<FieldTypeProps> = ({ field, design }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={field.options
           .map((option) => option.value)
           .find((value) => value === field.value)}
diff --git a/components/form/types/rating.type.tsx b/components/form/types/rating.type.tsx
index 4617e74..47de9c1 100644
--- a/components/form/types/rating.type.tsx
+++ b/components/form/types/rating.type.tsx
@@ -1,15 +1,17 @@
 import { Form, Rate } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FieldTypeProps } from './type.props'
 
 export const RatingType: React.FC<FieldTypeProps> = ({ field }) => {
+  const { t } = useTranslation()
   // TODO add ratings
 
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={parseFloat(field.value)}
       >
         <Rate allowHalf />
diff --git a/components/form/types/text.type.tsx b/components/form/types/text.type.tsx
index 0bdfa1f..e8d7c77 100644
--- a/components/form/types/text.type.tsx
+++ b/components/form/types/text.type.tsx
@@ -1,16 +1,18 @@
 import { Form } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledInput } from '../../styled/input'
 import { FieldTypeProps } from './type.props'
 
 export const TextType: React.FC<FieldTypeProps> = ({ field, design }) => {
+  const { t } = useTranslation()
   // TODO focus when becomes visible
 
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={field.value}
       >
         <StyledInput design={design} allowClear size={'large'} />
diff --git a/components/form/types/textarea.type.tsx b/components/form/types/textarea.type.tsx
index 2bab0b7..b2e0370 100644
--- a/components/form/types/textarea.type.tsx
+++ b/components/form/types/textarea.type.tsx
@@ -1,14 +1,17 @@
 import { Form } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyledTextareaInput } from '../../styled/textarea.input'
 import { FieldTypeProps } from './type.props'
 
 export const TextareaType: React.FC<FieldTypeProps> = ({ field, design }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={field.value}
       >
         <StyledTextareaInput design={design} allowClear autoSize />
diff --git a/components/form/types/yes_no.type.tsx b/components/form/types/yes_no.type.tsx
index 9f9a41e..87f9188 100644
--- a/components/form/types/yes_no.type.tsx
+++ b/components/form/types/yes_no.type.tsx
@@ -1,13 +1,16 @@
 import { Form, Switch } from 'antd'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { FieldTypeProps } from './type.props'
 
 export const YesNoType: React.FC<FieldTypeProps> = ({ field }) => {
+  const { t } = useTranslation()
+
   return (
     <div>
       <Form.Item
         name={[field.id, 'value']}
-        rules={[{ required: field.required, message: 'Please provide Information' }]}
+        rules={[{ required: field.required, message: t('validation:valueRequired') }]}
         initialValue={!!field.value}
         valuePropName={'checked'}
         getValueFromEvent={(checked: boolean) => (checked ? '1' : '')}
diff --git a/locales/en/validation.json b/locales/en/validation.json
index 87a8ccc..c109e48 100644
--- a/locales/en/validation.json
+++ b/locales/en/validation.json
@@ -2,6 +2,7 @@
   "emailFieldRequired": "Please select an Email Field",
   "emailRequired": "Please provide an Email",
   "invalidEmail": "Must be a valid email!",
+  "invalidNumber": "Must be a valid number!",
   "invalidUrl": "Must be a valid URL",
   "languageRequired": "Please select a Language",
   "mandatoryFieldsMissing": "Mandatory fields missing",