[B2BP-715] Refactor Form component and add it to Strapi (#383)

* Start refactoring work * Refactor Form component and add it to Strapi --------- Co-authored-by: Simone Salsi <[email protected]>
pagopa · Jul 25, 2024 · 867e79b · 867e79b
1 parent 271a06b
commit 867e79b
Show file tree

Hide file tree

Showing 17 changed files with 443 additions and 342 deletions.
diff --git a/.changeset/chilly-hotels-pull.md b/.changeset/chilly-hotels-pull.md
@@ -0,0 +1,5 @@
+---
+"strapi-cms": patch
+---
+
+Add Form section
diff --git a/.changeset/tricky-weeks-destroy.md b/.changeset/tricky-weeks-destroy.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Refactor Form component and implement call to newsletter service
diff --git a/apps/nextjs-website/package.json b/apps/nextjs-website/package.json
@@ -20,13 +20,15 @@
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.14.14",
     "@pagopa/mui-italia": "^1.0.1",
+    "@types/react-google-recaptcha": "^2.1.9",
     "fp-ts": "^2.16.1",
     "html-react-parser": "^5.0.11",
     "io-ts": "^2.2.20",
     "marked": "^11.1.0",
     "next": "14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1"
   },

diff --git a/apps/nextjs-website/react-components/components/Form/Form.helpers.tsx b/apps/nextjs-website/react-components/components/Form/Form.helpers.tsx
@@ -1,6 +1,4 @@
 import {
-  Checkbox,
-  Divider,
   Grid,
   FormControlLabel,
   Radio,
@@ -9,64 +7,19 @@ import {
 } from '@mui/material';
 import {
   FormCategoryProps,
-  OptionRowProps,
 } from '@react-components/types/Form/Form.types';
 
-export const OptionRow: React.FC<OptionRowProps> = ({
-  label,
-  checked,
-  onChange,
-  name,
-  additionalText,
-  color,
-}) => (
-  <Grid container alignItems='center' justifyContent='space-between'>
-    <Grid item xs={additionalText ? 10 : true}>
-      <Typography variant='body1' fontWeight='bold' sx={{ color }}>
-        {label}
-      </Typography>
-      {additionalText && (
-        <Typography variant='body2' sx={{ color }}>
-          {additionalText}
-        </Typography>
-      )}
-    </Grid>
-    <Grid
-      item
-      xs={additionalText ? 2 : false}
-      sx={{ display: 'flex', justifyContent: 'flex-end' }}
-    >
-      <Checkbox
-        checked={checked}
-        onChange={onChange}
-        name={name}
-        sx={{
-          color: color,
-          '&.Mui-checked': {
-            color: color,
-          },
-        }}
-      />
-    </Grid>
-    <Divider sx={{ width: '100%' }} />
-  </Grid>
-);
-
 export const FormCategories = ({
-  formCategories,
+  categories,
   textColor,
   borderColor,
-  selectedOption,
+  selectedCategory,
   handleRadioChange,
-}: FormCategoryProps & {
-  selectedOption: string;
-  handleRadioChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}) => {
+}: FormCategoryProps) => {
   return (
-    <RadioGroup value={selectedOption} onChange={handleRadioChange}>
-      {formCategories.map(({ key, label, additionalLabel }) => (
+    <RadioGroup value={selectedCategory} onChange={handleRadioChange}>
+      {categories.map(({ categoryID, label, additionalInfo }) => (
         <Grid
-          key={key}
           container
           alignItems='center'
           justifyContent='space-between'
@@ -80,15 +33,15 @@ export const FormCategories = ({
             >
               {label}
             </Typography>
-            {additionalLabel && (
+            {additionalInfo && (
               <Typography variant='body2' sx={{ color: textColor }}>
-                {additionalLabel}
+                {additionalInfo}
               </Typography>
             )}
           </Grid>
           <Grid item sx={{ textAlign: 'right' }}>
             <FormControlLabel
-              value={key}
+              value={categoryID}
               control={
                 <Radio
                   sx={{