feat(kyc): extra kyc form has ben improved o have abiity to entire it…

…em is clickable when checking checkbox or radio button (#5522)
blockchain · Nov 17, 2022 · 9c0ce80 · 9c0ce80
1 parent 023cc22
commit 9c0ce80
Showing 1 changed file with 42 additions and 33 deletions.
diff --git a/...wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx b/...wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/template.success.tsx
@@ -151,6 +151,10 @@ export const CenterField = styled.div`
   justify-content: center;
 `
 
+const LabelItem = styled.label`
+  cursor: pointer;
+`
+
 const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
   const disabled = props.invalid || props.submitting
 
@@ -270,24 +274,26 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
         {node.children &&
           node.children.map((child) => {
             return (
-              <FormItem key={`checkbox-${child.id}`}>
-                <CheckBoxContainer>
-                  <CenterField>
-                    <CheckBoxText>{getFormattedMessageComponent(child.id)}</CheckBoxText>
-                  </CenterField>
-                  <CenterField>
-                    <Field
-                      name={child.id}
-                      id={child.id}
-                      value={child.id}
-                      component={CheckBox}
-                      type='checkbox'
-                      onChange={() => updateItem(node.id, child.id)}
-                      data-testId='text-box-545744'
-                    />
-                  </CenterField>
-                </CheckBoxContainer>
-              </FormItem>
+              <LabelItem htmlFor={child.id} key={`checkbox-${child.id}`}>
+                <FormItem>
+                  <CheckBoxContainer>
+                    <CenterField>
+                      <CheckBoxText>{getFormattedMessageComponent(child.id)}</CheckBoxText>
+                    </CenterField>
+                    <CenterField>
+                      <Field
+                        name={child.id}
+                        id={child.id}
+                        value={child.id}
+                        component={CheckBox}
+                        type='checkbox'
+                        onChange={() => updateItem(node.id, child.id)}
+                        data-testId={`text-box-${node.id}`}
+                      />
+                    </CenterField>
+                  </CheckBoxContainer>
+                </FormItem>
+              </LabelItem>
             )
           })}
       </FormGroup>
@@ -311,21 +317,24 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = (props) => {
             {node.children &&
               node.children.map((child) => {
                 return (
-                  <CheckBoxContainer key={child.id}>
-                    <CenterField>
-                      <CheckBoxText>{getFormattedMessageComponent(child.id)}</CheckBoxText>
-                    </CenterField>
-                    <CenterField>
-                      <Field
-                        component='input'
-                        type='radio'
-                        name={node.id}
-                        value={child.id}
-                        validate={required}
-                        onChange={() => updateItem(node.id, child.id)}
-                      />
-                    </CenterField>
-                  </CheckBoxContainer>
+                  <LabelItem htmlFor={child.id} key={child.id}>
+                    <CheckBoxContainer>
+                      <CenterField>
+                        <CheckBoxText>{getFormattedMessageComponent(child.id)}</CheckBoxText>
+                      </CenterField>
+                      <CenterField>
+                        <Field
+                          component='input'
+                          type='radio'
+                          name={node.id}
+                          id={child.id}
+                          value={child.id}
+                          validate={required}
+                          onChange={() => updateItem(node.id, child.id)}
+                        />
+                      </CenterField>
+                    </CheckBoxContainer>
+                  </LabelItem>
                 )
               })}
           </FormItem>