fix: switchable OTP email validation (#784)

* fix: switchable OTP in volto-form-block * chore: updated volto-form-block
RedTurtle · Oct 3, 2024 · 610ed6f · 610ed6f
1 parent 790dad7
commit 610ed6f
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -204,7 +204,7 @@
     "volto-customer-satisfaction": "1.0.0",
     "volto-dropdownmenu": "4.0.0",
     "volto-editablefooter": "5.0.1",
-    "volto-form-block": "3.9.3",
+    "volto-form-block": "3.10.0",
     "volto-gdpr-privacy": "2.1.0",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",

diff --git a/src/customizations/volto-form-block/components/FormView.jsx b/src/customizations/volto-form-block/components/FormView.jsx
@@ -216,47 +216,51 @@ const FormView = ({
                   })}
 
                   {/*OTP*/}
-                  {data.subblocks
-                    .filter((subblock) => subblock.use_as_bcc)
-                    .map((subblock, index) => {
-                      const fieldName = getFieldName(
-                        subblock.label,
-                        subblock.id,
-                      );
-                      const name = fieldName + OTP_FIELDNAME_EXTENDER;
-                      const fieldValue = formData[fieldName]?.value;
-                      const value = formData[fieldName]?.otp;
-                      const fields_to_send_with_value =
-                        getFieldsToSendWithValue(subblock);
+                  {data.email_otp_verification ? (
+                    data.subblocks
+                      .filter((subblock) => subblock.use_as_bcc)
+                      .map((subblock, index) => {
+                        const fieldName = getFieldName(
+                          subblock.label,
+                          subblock.id,
+                        );
+                        const name = fieldName + OTP_FIELDNAME_EXTENDER;
+                        const fieldValue = formData[fieldName]?.value;
+                        const value = formData[fieldName]?.otp;
+                        const fields_to_send_with_value =
+                          getFieldsToSendWithValue(subblock);
 
-                      return (
-                        <Row key={'row_otp' + index}>
-                          <Col className="py-2">
-                            <OTPWidget
-                              {...subblock}
-                              fieldValue={fieldValue}
-                              onChange={(field, value) => {
-                                onChangeFormData(
-                                  subblock.id,
-                                  fieldName,
-                                  fieldValue,
-                                  {
-                                    ...fields_to_send_with_value,
-                                    otp: value,
-                                  },
-                                );
-                              }}
-                              value={value}
-                              valid={isValidField(name)}
-                              errorMessage={getErrorMessage(name)}
-                              formHasErrors={formErrors?.length > 0}
-                              path={path}
-                              block_id={block_id}
-                            />
-                          </Col>
-                        </Row>
-                      );
-                    })}
+                        return (
+                          <Row key={'row_otp' + index}>
+                            <Col className="py-2">
+                              <OTPWidget
+                                {...subblock}
+                                fieldValue={fieldValue}
+                                onChange={(field, value) => {
+                                  onChangeFormData(
+                                    subblock.id,
+                                    fieldName,
+                                    fieldValue,
+                                    {
+                                      ...fields_to_send_with_value,
+                                      otp: value,
+                                    },
+                                  );
+                                }}
+                                value={value}
+                                valid={isValidField(name)}
+                                errorMessage={getErrorMessage(name)}
+                                formHasErrors={formErrors?.length > 0}
+                                path={path}
+                                block_id={block_id}
+                              />
+                            </Col>
+                          </Row>
+                        );
+                      })
+                  ) : (
+                    <></>
+                  )}
 
                   {enableCaptcha && <>{captcha.render()}</>}
 

diff --git a/yarn.lock b/yarn.lock
@@ -10916,7 +10916,7 @@ __metadata:
     volto-customer-satisfaction: 1.0.0
     volto-dropdownmenu: 4.0.0
     volto-editablefooter: 5.0.1
-    volto-form-block: 3.9.3
+    volto-form-block: 3.10.0
     volto-gdpr-privacy: 2.1.0
     volto-google-analytics: 2.0.0
     volto-multilingual-widget: 3.0.0
@@ -27516,9 +27516,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-form-block@npm:3.9.3":
-  version: 3.9.3
-  resolution: "volto-form-block@npm:3.9.3"
+"volto-form-block@npm:3.10.0":
+  version: 3.10.0
+  resolution: "volto-form-block@npm:3.10.0"
   dependencies:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     file-saver: ^2.0.5
@@ -27527,7 +27527,7 @@ __metadata:
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
     volto-subblocks: ^2.1.0
-  checksum: a9821974abcd48a3a9ff5d0fb6693f9262cae8d08a136265dc6f247cd2e216d229b24e7597033ff492ac27f9d316d59b9c464e50bf13cb6ad34f83b381958ec7
+  checksum: 8ddce2c624cf329f446a63772ce8dd643aed957b8d967463e76f3f83383704ca9b3d1fe0669390c5a965d9a2568123fdbb3408cf831cadb9e5cebfd164ca0aa9
   languageName: node
   linkType: hard