sc-8837 Extend Background Color to bottom of Overview page (#754)

* sc-8408 Add min/max to date of incorporation field (#743) * Handle multiple registered directories in BFF * sc-8408 Add min/max to date of incorporation field Co-authored-by: Benjamin Bengfort <[email protected]> * sc-8837 Extend Background Color to bottom of Overview page Co-authored-by: Benjamin Bengfort <[email protected]> Co-authored-by: Cletus Razakou <[email protected]>
trisacrypto · Sep 1, 2022 · 8d7bf3b · 8d7bf3b
1 parent 1ca5d5d
commit 8d7bf3b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/web/gds-user-ui/src/components/BasicDetailsForm/index.tsx b/web/gds-user-ui/src/components/BasicDetailsForm/index.tsx
@@ -1,4 +1,4 @@
-import { VStack, Text, FormErrorMessage } from '@chakra-ui/react';
+import { VStack } from '@chakra-ui/react';
 import InputFormControl from 'components/ui/InputFormControl';
 import SelectFormControl from 'components/ui/SelectFormControl';
 import { getBusinessCategoryOptions, vaspCategories } from 'constants/basic-details';
@@ -7,6 +7,8 @@ import { t } from '@lingui/macro';
 import { useLanguageProvider } from 'contexts/LanguageContext';
 import { useEffect } from 'react';
 import FormLayout from 'layouts/FormLayout';
+import formatDate from 'utils/formate-date';
+
 const BasicDetailsForm: React.FC = () => {
   const options = getBusinessCategoryOptions();
   const {
@@ -50,7 +52,13 @@ const BasicDetailsForm: React.FC = () => {
           label={t`Date of Incorporation / Establishment`}
           formHelperText={errors.established_on?.message}
           isInvalid={!!errors.established_on}
-          inputProps={{ placeholder: '21/01/2021', type: 'date', pattern: 'd{4}-d{2}-d{2}' }}
+          inputProps={{
+            placeholder: '21/01/2021',
+            type: 'date',
+            pattern: 'd{4}-d{2}-d{2}',
+            min: '1800-01-01',
+            max: formatDate()
+          }}
           {...register('established_on')}
         />
 

diff --git a/web/gds-user-ui/src/components/Sidebar/index.tsx b/web/gds-user-ui/src/components/Sidebar/index.tsx
@@ -29,7 +29,13 @@ const Sidebar: React.FC<SidebarProps> = ({ children }) => {
         </DrawerContent>
       </Drawer>
       <MobileNav onOpen={onOpen} />
-      <Box ml={{ base: 0, md: 274 }} pt={10} px="10" height="100%" background="#F7F8FC">
+      <Box
+        ml={{ base: 0, md: 274 }}
+        pt={10}
+        px="10"
+        height="100%"
+        background="#F7F8FC"
+        overflow="scroll">
         {children}
       </Box>
     </Box>

diff --git a/web/gds-user-ui/src/modules/dashboard/certificate/lib/validationSchema.ts b/web/gds-user-ui/src/modules/dashboard/certificate/lib/validationSchema.ts
@@ -19,20 +19,7 @@ export const validationSchema = [
       .date()
       .nullable()
       .transform((curr, orig) => (orig === '' ? null : curr))
-      .required(_i18n._(t`Invalid date`))
-      .test('is-invalidate-date', _i18n._(t`Invalid date / year must be 4 digit`), (value) => {
-        if (value) {
-          // console.log('value', value);
-          const getYear = value.getFullYear();
-          if (getYear.toString().length !== 4) {
-            return false;
-          } else {
-            return true;
-          }
-        }
-        return false;
-      })
-      .required(),
+      .required(_i18n._(t`Invalid date`)),
     organization_name: yup
       .string()
       .trim()

diff --git a/web/gds-user-ui/src/utils/formate-date.ts b/web/gds-user-ui/src/utils/formate-date.ts
@@ -0,0 +1,13 @@
+export default function formatDate() {
+  const dtToday = new Date();
+
+  let month: any = dtToday.getMonth() + 1;
+  let day: any = dtToday.getDate();
+  const year = dtToday.getFullYear();
+  if (month < 10) month = '0' + month.toString();
+  if (day < 10) day = '0' + day.toString();
+
+  const maxDate = year + '-' + month + '-' + day;
+
+  return maxDate;
+}