added autovests checkbox

src/components/beneficiarySelectionContent/beneficiarySelectionContent.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, FlatList, Text } from 'react-native';
+import { View, FlatList, Text, TouchableOpacity } from 'react-native';
 import { useIntl } from 'react-intl';
 import { isArray, debounce } from 'lodash';
 
@@ -7,11 +7,14 @@ import styles from './styles';
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 import { useAppDispatch, useAppSelector } from '../../hooks';
-import { BeneficiaryModal, FormInput, IconButton, TextButton } from '../../components';
+import { BeneficiaryModal, CheckBox, FormInput, IconButton, TextButton } from '../../components';
 import { Beneficiary } from '../../redux/reducers/editorReducer';
 import { lookupAccounts } from '../../providers/hive/dhive';
 import { TEMP_BENEFICIARIES_ID } from '../../redux/constants/constants';
-import { removeBeneficiaries, setBeneficiaries as setBeneficiariesAction } from '../../redux/actions/editorActions';
+import {
+  removeBeneficiaries,
+  setBeneficiaries as setBeneficiariesAction,
+} from '../../redux/actions/editorActions';
 
 interface BeneficiarySelectionContentProps {
   draftId: string;
@@ -21,16 +24,22 @@ interface BeneficiarySelectionContentProps {
   handleSaveBeneficiary?: (beneficiaries: Beneficiary[]) => void;
 }
 
-const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, powerDownBeneficiaries, handleSaveBeneficiary }:BeneficiarySelectionContentProps) => {
+const BeneficiarySelectionContent = ({
+  draftId,
+  setDisableDone,
+  powerDown,
+  powerDownBeneficiaries,
+  handleSaveBeneficiary,
+}: BeneficiarySelectionContentProps) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const beneficiariesMap = useAppSelector(state => state.editor.beneficiariesMap)
-  const username = useAppSelector(state=>state.account.currentAccount.name)
+  const beneficiariesMap = useAppSelector((state) => state.editor.beneficiariesMap);
+  const username = useAppSelector((state) => state.account.currentAccount.name);
 
-  const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>(
-    [{ account: username, weight: 10000, autoPowerUp: false}]
-  );
+  const [beneficiaries, setBeneficiaries] = useState<Beneficiary[]>([
+    { account: username, weight: 10000, autoPowerUp: false },
+  ]);
 
   const [newUsername, setNewUsername] = useState('');
   const [newWeight, setNewWeight] = useState(0);
@@ -52,13 +61,16 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
   }, [draftId]);
 
   useEffect(() => {
-    setDisableDone(newEditable)
-  }, [newEditable])
+    setDisableDone(newEditable);
+  }, [newEditable]);
 
   console.log('beneficiaries : ', beneficiaries);
 
   const readPowerDownBeneficiaries = () => {
-      const tempBeneficiaries = [{ account: username, weight: 10000, autoPowerUp: false}, ...powerDownBeneficiaries]
+    const tempBeneficiaries = [
+      { account: username, weight: 10000, autoPowerUp: false },
+      ...powerDownBeneficiaries,
+    ];
     console.log('tempBeneficiaries in readPowerDownBeneficiaries: ', tempBeneficiaries);
 
     if (isArray(tempBeneficiaries) && tempBeneficiaries.length > 0) {
@@ -73,7 +85,6 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
 
       setBeneficiaries([...tempBeneficiaries]);
     }
-    
   };
 
   const readTempBeneficiaries = async () => {
@@ -81,12 +92,11 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
       const tempBeneficiaries = beneficiariesMap[draftId || TEMP_BENEFICIARIES_ID];
 
       if (isArray(tempBeneficiaries) && tempBeneficiaries.length > 0) {
-
         //weight correction algorithm.
         let othersWeight = 0;
         tempBeneficiaries.forEach((item, index) => {
           if (index > 0) {
-            othersWeight += item.weight
+            othersWeight += item.weight;
           }
         });
         tempBeneficiaries[0].weight = 10000 - othersWeight;
@@ -96,36 +106,32 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
     }
   };
 
-
   const _saveBeneficiaries = (value: Beneficiary[]) => {
     if (handleSaveBeneficiary) {
-      handleSaveBeneficiary(value)
+      handleSaveBeneficiary(value);
     } else {
       dispatch(setBeneficiariesAction(draftId || TEMP_BENEFICIARIES_ID, value));
     }
-  }
-
+  };
 
   const _onSavePress = () => {
     if (newEditable) {
       beneficiaries.push({
         account: newUsername,
         weight: newWeight,
-        autoPowerUp: newAutoPowerUp
-      })
+        autoPowerUp: newAutoPowerUp,
+      });
     }
     _saveBeneficiaries(beneficiaries);
     _resetInputs(false);
-  }
-
+  };
 
   const _addAccount = () => {
-
     if (isUsernameValid && isWeightValid) {
       beneficiaries.push({
         account: newUsername,
         weight: newWeight,
-      })
+      });
       setBeneficiaries([...beneficiaries]);
     }
 
@@ -136,32 +142,26 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
     setNewEditable(true);
   };
 
-
-
   const _onWeightInputChange = (value: string) => {
     let _value = (parseInt(value, 10) || 0) * 100;
 
     const _diff = _value - newWeight;
     const newAuthorWeight = beneficiaries[0].weight - _diff;
-    beneficiaries[0].weight = newAuthorWeight
+    beneficiaries[0].weight = newAuthorWeight;
 
-    setNewWeight(_value)
+    setNewWeight(_value);
     setIsWeightValid(_value >= 0 && newAuthorWeight >= 0);
     setBeneficiaries([...beneficiaries]);
   };
 
-
   const _lookupAccounts = debounce((username) => {
-   
     lookupAccounts(username).then((res) => {
-      const isValid = res.includes(username)
+      const isValid = res.includes(username);
       //check if username duplicates else lookup contacts, done here to avoid debounce and post call mismatch
       const notExistAlready = !beneficiaries.find((item) => item.account === username);
-      setIsUsernameValid(isValid && notExistAlready)
+      setIsUsernameValid(isValid && notExistAlready);
     });
-  }, 1000) 
-
-
+  }, 1000);
 
   const _onUsernameInputChange = (value) => {
     setNewUsername(value);
@@ -171,7 +171,7 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
   const _resetInputs = (adjustWeight = true) => {
     if (newWeight && adjustWeight) {
       beneficiaries[0].weight = beneficiaries[0].weight + newWeight;
-      setBeneficiaries([...beneficiaries])
+      setBeneficiaries([...beneficiaries]);
     }
 
     setNewWeight(0);
@@ -179,13 +179,18 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
     setIsWeightValid(false);
     setIsUsernameValid(false);
     setNewUsername('');
- 
-  }
-
-
+  };
 
   const _renderHeader = () => (
     <View style={styles.inputWrapper}>
+      {powerDown && (
+        <View style={{ ...styles.checkBoxHeader, marginTop: 4 }}>
+          <Text style={styles.contentLabel}>
+            {intl.formatMessage({ id: 'transfer.vests' })}
+          </Text>
+        </View>
+      )}
+
       <View style={{ ...styles.weightInput, marginTop: 4 }}>
         <Text style={styles.contentLabel}>
           {intl.formatMessage({
@@ -201,14 +206,26 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
         </Text>
       </View>
     </View>
-  )
-
+  );
 
+  const _handleCheckboxClick = (value, isCheck) => {
+    setNewAutoPowerUp(isCheck);
+  };
+  const _renderCheckBox = ({ locked, isChecked }: { locked: boolean; isChecked: boolean }) => (
+    <View style={styles.checkBoxContainer}>
+      <CheckBox
+        locked={locked}
+        isChecked={isChecked}
+        clicked={_handleCheckboxClick}
+        value={newAutoPowerUp}
+      />
+    </View>
+  );
 
   const _renderInput = () => {
-
     return (
       <View style={styles.inputWrapper}>
+        {powerDown && _renderCheckBox({ locked: false, isChecked: false })}
         <View style={styles.weightInput}>
           <FormInput
             isValid={isWeightValid}
@@ -219,7 +236,7 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
             selectTextOnFocus={true}
             autoFocus={true}
             returnKeyType={'next'}
-            keyboardType='numeric'
+            keyboardType="numeric"
           />
         </View>
 
@@ -234,7 +251,7 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
             })}
             type="username"
             isFirstImage
-            returnKeyType='done'
+            returnKeyType="done"
             value={newUsername}
             onSubmitEditing={isWeightValid && isUsernameValid && _onSavePress}
             inputStyle={styles.usernameInput}
@@ -252,23 +269,27 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
             style={styles.doneButton}
             onPress={_onSavePress}
           />
-        ) : <View style={{width:28}}/>}
-
+        ) : (
+          <View style={{ width: 28 }} />
+        )}
       </View>
     );
   };
 
-  
   const _renderFooter = () => (
     <>
       {newEditable && _renderInput()}
       <View style={{ marginTop: 20, marginBottom: 32 }}>
         <TextButton
-            text={newEditable?intl.formatMessage({
-                id: 'beneficiary_modal.cancel'
-              }):intl.formatMessage({
+          text={
+            newEditable
+              ? intl.formatMessage({
+                  id: 'beneficiary_modal.cancel',
+                })
+              : intl.formatMessage({
                   id: 'beneficiary_modal.addAccount',
-              })}
+                })
+          }
           onPress={newEditable ? _resetInputs : _addAccount}
           textStyle={{
             color: EStyleSheet.value('$primaryBlue'),
@@ -276,12 +297,9 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
             textAlign: 'left',
           }}
         />
-        
       </View>
     </>
-
-  )
-
+  );
 
   const _renderItem = ({ item, index }) => {
     const _isCurrentUser = item.account === username;
@@ -291,11 +309,11 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
       beneficiaries.splice(index, 1);
       setBeneficiaries([...beneficiaries]);
       _saveBeneficiaries(beneficiaries);
-    }
-
+    };
 
     return (
       <View style={styles.inputWrapper}>
+        {powerDown && _renderCheckBox({ locked: true, isChecked: item.autoPowerUp })}
         <View style={styles.weightInput}>
           <FormInput
             isValid={true}
@@ -329,7 +347,6 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
         ) : (
           <View style={{ width: 30 }} />
         )}
-        
       </View>
     );
   };

src/components/beneficiarySelectionContent/styles.ts

@@ -55,5 +55,11 @@ export default EStyleSheet.create({
     thumbSelectContainer:{
       marginTop:12,
     },
-    
+    checkBoxHeader: {
+      width: 50,
+    },
+    checkBoxContainer: {
+      width: 50,
+      marginTop:12,
+    }
 });

src/config/locales/en-US.json

@@ -614,6 +614,7 @@
     "stop_information": "Are you sure want to stop?",
     "percent": "Percent",
     "auto_vests": "Auto Vests",
+    "vests": "Vests",
     "save": "SAVE",
     "percent_information": "Percent info",
     "next": "NEXT",