fix: reset otp on formdata reset (#116)

src/actions/index.js

@@ -95,7 +95,7 @@ export const SEND_OTP = 'SEND_OTP';
 export function sendOTP(path, block_id, email) {
   return {
     type: SEND_OTP,
-    subrequest: block_id + '_' + email,
+    subrequest: 'otp_' + block_id + '_' + email,
     request: {
       op: 'post',
       path: path + '/@validate-email-address',
@@ -106,3 +106,16 @@ export function sendOTP(path, block_id, email) {
     },
   };
 }
+
+/**
+ * resetOTP action
+ * @module actions/resetOTP
+ */
+export const RESET_OTP = 'RESET_OTP';
+
+export function resetOTP(block_id) {
+  return {
+    type: RESET_OTP,
+    block_id,
+  };
+}

src/components/View.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useReducer, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
-import { submitForm } from 'volto-form-block/actions';
+import { submitForm, resetOTP } from 'volto-form-block/actions';
 import { getFieldName } from 'volto-form-block/components/utils';
 import FormView from 'volto-form-block/components/FormView';
 import { formatDate } from '@plone/volto/helpers/Utils/Date';
@@ -104,6 +104,7 @@ const View = ({ data, id, path }) => {
 
   const [formData, setFormData] = useReducer((state, action) => {
     if (action.reset) {
+      dispatch(resetOTP(id));
       return getInitialData(data);
     }
 

src/components/Widget/OTPWidget.jsx

@@ -66,7 +66,8 @@ const OTPWidget = (props) => {
   const dispatch = useDispatch();
   const _id = id + OTP_FIELDNAME_EXTENDER;
   const sendOTPResponse = useSelector(
-    (state) => state.sendOTP?.subrequests?.[block_id + '_' + fieldValue],
+    (state) =>
+      state.sendOTP?.subrequests?.['otp_' + block_id + '_' + fieldValue],
   );
   const [countDownEnd, setCountDownEnd] = useState(null);
   const [countDown, setCountDown] = useState(null);

src/reducers/index.js

@@ -8,6 +8,7 @@ import {
   GET_FORM_DATA,
   CLEAR_FORM_DATA,
   SEND_OTP,
+  RESET_OTP,
 } from 'volto-form-block/actions';
 
 function download(filename, text) {
@@ -302,7 +303,27 @@ export const sendOTP = (state = initialState, action = {}) => {
             loading: false,
             loaded: false,
           };
+    case RESET_OTP:
+      let new_subrequests = { ...state.subrequests };
 
+      if (action.block_id) {
+        Object.keys(new_subrequests)
+          .filter((k) => k.indexOf('otp_' + action.block_id) === 0)
+          .forEach((k) => {
+            delete new_subrequests[k];
+          });
+      }
+      return action.block_id
+        ? {
+            ...state,
+            subrequests: new_subrequests,
+          }
+        : {
+            ...state,
+            error: null,
+            loading: true,
+            loaded: false,
+          };
     default:
       return state;
   }