refactor: move signatures to review/preview section

packages/client/src/components/form/DocumentUploadfield/DocumentUploaderWithOption.tsx

@@ -290,15 +290,15 @@ class DocumentUploaderWithOptionComp extends React.Component<
 
     return (
       <UploadWrapper>
-        <div id="upload-error">
-          {this.state.errorMessage && (
+        {this.state.errorMessage && (
+          <div id="upload-error">
             <ErrorText>
               {(requiredErrorMessage &&
                 intl.formatMessage(requiredErrorMessage)) ||
                 this.state.errorMessage}
             </ErrorText>
-          )}
-        </div>
+          </div>
+        )}
 
         <DocumentListPreview
           processingDocuments={this.state.filesBeingProcessed}
@@ -312,11 +312,13 @@ class DocumentUploaderWithOptionComp extends React.Component<
             .length === 1 ? (
           <FullWidthImageUploader
             id="upload_document"
-            title={intl.formatMessage(formMessages.addFile)}
+            name={this.props.name}
             onClick={(e) => !this.isValid() && e.preventDefault()}
-            handleFileChange={this.handleFileChange}
+            onChange={this.handleFileChange}
             disabled={this.state.filesBeingProcessed.length > 0}
-          />
+          >
+            {intl.formatMessage(formMessages.addFile)}
+          </FullWidthImageUploader>
         ) : (
           <Flex>
             <Select
@@ -331,11 +333,13 @@ class DocumentUploaderWithOptionComp extends React.Component<
             />
             <DocumentUploadButton
               id="upload_document"
-              title={intl.formatMessage(formMessages.addFile)}
+              name={this.props.name}
               onClick={(e) => !this.isValid() && e.preventDefault()}
-              handleFileChange={this.handleFileChange}
+              onChange={this.handleFileChange}
               disabled={this.state.filesBeingProcessed.length > 0}
-            />
+            >
+              {intl.formatMessage(formMessages.addFile)}
+            </DocumentUploadButton>
           </Flex>
         )}
 

packages/client/src/components/form/DocumentUploadfield/SimpleDocumentUploader.tsx

@@ -60,6 +60,7 @@ type IFullProps = {
 
 const SimpleDocumentUploaderComponent = ({
   allowedDocType,
+  name,
   onUploadingStateChanged,
   intl,
   previewTransformer,
@@ -167,9 +168,11 @@ const SimpleDocumentUploaderComponent = ({
       {(!files || !files.data) && (
         <DocumentUploader
           id="upload_document"
-          title={intl.formatMessage(messages.uploadFile)}
-          handleFileChange={handleFileChange}
-        />
+          name={name}
+          onChange={handleFileChange}
+        >
+          {intl.formatMessage(messages.uploadFile)}
+        </DocumentUploader>
       )}
     </>
   )

packages/client/src/components/form/FormFieldGenerator.tsx

@@ -59,7 +59,6 @@ import {
   ISelectFormFieldWithOptions,
   ITextFormField,
   Ii18nTextFormField,
-  Ii18nNumberFormField,
   LINK,
   BULLET_LIST,
   NUMBER,
@@ -78,7 +77,6 @@ import {
   RADIO_GROUP_WITH_NESTED_FIELDS,
   Ii18nRadioGroupWithNestedFieldsFormField,
   LOCATION_SEARCH_INPUT,
-  Ii18nTextareaFormField,
   TEXT,
   DATE_RANGE_PICKER,
   IDateRangePickerValue,
@@ -88,7 +86,8 @@ import {
   DIVIDER,
   HEADING3,
   SUBSECTION_HEADER,
-  HIDDEN
+  HIDDEN,
+  SIGNATURE
 } from '@client/forms'
 import { getValidationErrorsForForm, Errors } from '@client/forms/validation'
 import { InputField } from '@client/components/form/InputField'
@@ -128,9 +127,13 @@ import { UserDetails } from '@client/utils/userUtils'
 import { VerificationButton } from '@opencrvs/components/lib/VerificationButton'
 import { useOnlineStatus } from '@client/utils'
 import { useNidAuthentication } from '@client/views/OIDPVerificationCallback/utils'
-import { BulletList, Divider } from '@opencrvs/components'
+import { BulletList, Divider, InputLabel, Stack } from '@opencrvs/components'
 import { Heading2, Heading3 } from '@opencrvs/components/lib/Headings/Headings'
+import { SignatureUploader } from './SignatureField/SignatureUploader'
 
+const SignatureField = styled(Stack)`
+  margin-top: 8px;
+`
 const fadeIn = keyframes`
   from { opacity: 0; }
   to { opacity: 1; }
@@ -436,7 +439,7 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
         <InputField {...inputFieldProps}>
           <TextArea
             {...inputProps}
-            maxLength={(fieldDefinition as Ii18nTextareaFormField).maxLength}
+            maxLength={fieldDefinition.maxLength}
             value={value.toString()}
           />
         </InputField>
@@ -512,14 +515,13 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
               if (e.key.match(REGEXP_NUMBER_INPUT_NON_NUMERIC)) {
                 e.preventDefault()
               }
-              const maxLength = (fieldDefinition as Ii18nNumberFormField)
-                .maxLength
+              const maxLength = fieldDefinition.maxLength
               if (maxLength && e.currentTarget.value.length >= maxLength) {
                 e.preventDefault()
               }
             }}
             value={inputProps.value as string}
-            maxLength={(fieldDefinition as Ii18nNumberFormField).maxLength}
+            maxLength={fieldDefinition.maxLength}
             onWheel={(event: React.WheelEvent<HTMLInputElement>) => {
               event.currentTarget.blur()
             }}
@@ -629,6 +631,37 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
         />
       )
     }
+    if (fieldDefinition.type === SIGNATURE) {
+      const {
+        name,
+        helperText,
+        required,
+        label,
+        maxSizeMb,
+        allowedFileFormats
+      } = fieldDefinition
+      return (
+        <SignatureField direction="column" gap={8} alignItems="start">
+          <InputLabel
+            {...inputFieldProps}
+            htmlFor={name}
+            inputDescriptor={helperText}
+          >
+            {label}
+          </InputLabel>
+          <SignatureUploader
+            {...inputProps}
+            name={name}
+            modalTitle={label}
+            value={value as string}
+            maxSizeMb={maxSizeMb}
+            allowedFileFormats={allowedFileFormats}
+            required={required}
+            onChange={(sig) => onSetFieldValue(name, sig)}
+          />
+        </SignatureField>
+      )
+    }
     return (
       <InputField {...inputFieldProps}>
         <TextInput
@@ -664,10 +697,7 @@ const GeneratedInputField = React.memo<GeneratedInputFieldProps>(
 
 GeneratedInputField.displayName = 'MemoizedGeneratedInputField'
 
-const mapFieldsToValues = (
-  fields: IFormField[],
-  userDetails: UserDetails | null
-) =>
+const mapFieldsToValues = (fields: IFormField[]) =>
   fields.reduce((memo, field) => {
     let fieldInitialValue = field.initialValue as IFormFieldValue
 
@@ -1184,9 +1214,7 @@ export const FormFieldGenerator: React.FC<IFormSectionProps> = (props) => {
 
   return (
     <Formik<IFormSectionData>
-      initialValues={
-        props.initialValues ?? mapFieldsToValues(props.fields, userDetails)
-      }
+      initialValues={props.initialValues ?? mapFieldsToValues(props.fields)}
       onSubmit={() => {}}
       validate={(values) =>
         getValidationErrorsForForm(