added autovests checkbox

2024-12-30 00:52:42 +03:00 · 2022-04-17 14:39:34 +05:00 · 2022-04-17 14:39:34 +05:00 · 97d55c57a7
commit 97d55c57a7
parent eccda2af25
3 changed files with 161 additions and 137 deletions
--- a/src/components/beneficiarySelectionContent/beneficiarySelectionContent.tsx
+++ b/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,30 +7,39 @@ 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;
-  setDisableDone:(value:boolean)=>void;
+  draftId: string;
+  setDisableDone: (value: boolean) => void;
  powerDown?: boolean;
  powerDownBeneficiaries?: Beneficiary[];
-  handleSaveBeneficiary?:(beneficiaries: Beneficiary[]) => void;
+  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);
@ -40,53 +49,54 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
  const [newEditable, setNewEditable] = useState(false);

  useEffect(() => {
-    if(powerDown){
+    if (powerDown) {
      readPowerDownBeneficiaries();
    }
-}, [powerDownBeneficiaries]);
+  }, [powerDownBeneficiaries]);

  useEffect(() => {
-      if(draftId){
-        readTempBeneficiaries();
-      }
+    if (draftId) {
+      readTempBeneficiaries();
+    }
  }, [draftId]);

  useEffect(() => {
-    setDisableDone(newEditable)
-  }, [newEditable])
+    setDisableDone(newEditable);
+  }, [newEditable]);

  console.log('beneficiaries : ', beneficiaries);
-  
-  const readPowerDownBeneficiaries =  () => {
-      const tempBeneficiaries = [{ account: username, weight: 10000, autoPowerUp: false}, ...powerDownBeneficiaries]
-      console.log('tempBeneficiaries in readPowerDownBeneficiaries: ', tempBeneficiaries);
-      
-      if (isArray(tempBeneficiaries) && tempBeneficiaries.length > 0) {
-        //weight correction algorithm.
-        let othersWeight = 0;
-        tempBeneficiaries.forEach((item, index) => {
-          if(index > 0){
-            othersWeight += item.weight;
-          }
-        });
-        tempBeneficiaries[0].weight = 10000 - othersWeight;

-        setBeneficiaries([...tempBeneficiaries]);
-      }
-    
+  const readPowerDownBeneficiaries = () => {
+    const tempBeneficiaries = [
+      { account: username, weight: 10000, autoPowerUp: false },
+      ...powerDownBeneficiaries,
+    ];
+    console.log('tempBeneficiaries in readPowerDownBeneficiaries: ', tempBeneficiaries);
+
+    if (isArray(tempBeneficiaries) && tempBeneficiaries.length > 0) {
+      //weight correction algorithm.
+      let othersWeight = 0;
+      tempBeneficiaries.forEach((item, index) => {
+        if (index > 0) {
+          othersWeight += item.weight;
+        }
+      });
+      tempBeneficiaries[0].weight = 10000 - othersWeight;
+
+      setBeneficiaries([...tempBeneficiaries]);
+    }
  };

  const readTempBeneficiaries = async () => {
-    if(beneficiariesMap){
+    if (beneficiariesMap) {
      const tempBeneficiaries = beneficiariesMap[draftId || TEMP_BENEFICIARIES_ID];
-      
-      if (isArray(tempBeneficiaries) && tempBeneficiaries.length > 0) {

+      if (isArray(tempBeneficiaries) && tempBeneficiaries.length > 0) {
        //weight correction algorithm.
        let othersWeight = 0;
        tempBeneficiaries.forEach((item, index) => {
-          if(index > 0){
-            othersWeight += item.weight
+          if (index > 0) {
+            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)
-    }else{
+  const _saveBeneficiaries = (value: Beneficiary[]) => {
+    if (handleSaveBeneficiary) {
+      handleSaveBeneficiary(value);
+    } else {
      dispatch(setBeneficiariesAction(draftId || TEMP_BENEFICIARIES_ID, value));
    }
-  }
-
+  };

  const _onSavePress = () => {
-    if(newEditable){
+    if (newEditable) {
      beneficiaries.push({
-        account:newUsername,
-        weight:newWeight,
-        autoPowerUp: newAutoPowerUp
-      })
+        account: newUsername,
+        weight: newWeight,
+        autoPowerUp: newAutoPowerUp,
+      });
    }
    _saveBeneficiaries(beneficiaries);
    _resetInputs(false);
-  }
-
+  };

  const _addAccount = () => {
-
-    if(isUsernameValid && isWeightValid){
+    if (isUsernameValid && isWeightValid) {
      beneficiaries.push({
-        account:newUsername,
-        weight:newWeight,
-      })
+        account: newUsername,
+        weight: newWeight,
+      });
      setBeneficiaries([...beneficiaries]);
    }

@ -136,32 +142,26 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
    setNewEditable(true);
  };

-
-
-  const _onWeightInputChange = (value:string) => {
+  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
-   
-    setNewWeight(_value)
+    beneficiaries[0].weight = newAuthorWeight;
+
+    setNewWeight(_value);
    setIsWeightValid(_value >= 0 && newAuthorWeight >= 0);
    setBeneficiaries([...beneficiaries]);
  };

-
  const _lookupAccounts = debounce((username) => {
-   
    lookupAccounts(username).then((res) => {
-      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)
+      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);
    });
-  }, 1000) 
-
-
+  }, 1000);

  const _onUsernameInputChange = (value) => {
    setNewUsername(value);
@ -169,9 +169,9 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
  };

  const _resetInputs = (adjustWeight = true) => {
-    if(newWeight && adjustWeight){
+    if (newWeight && adjustWeight) {
      beneficiaries[0].weight = beneficiaries[0].weight + newWeight;
-      setBeneficiaries([...beneficiaries])
+      setBeneficiaries([...beneficiaries]);
    }

    setNewWeight(0);
@ -179,21 +179,26 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
    setIsWeightValid(false);
    setIsUsernameValid(false);
    setNewUsername('');
- 
-  }
-
-
+  };

  const _renderHeader = () => (
    <View style={styles.inputWrapper}>
-      <View style={{...styles.weightInput, marginTop:4}}>
+      {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({
            id: 'beneficiary_modal.percent',
          })}
        </Text>
      </View>
-      <View style={{...styles.usernameInput, marginTop:4, marginLeft:28}}>
+      <View style={{ ...styles.usernameInput, marginTop: 4, marginLeft: 28 }}>
        <Text style={styles.contentLabel}>
          {intl.formatMessage({
            id: 'beneficiary_modal.username',
@ -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,54 +251,55 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
            })}
            type="username"
            isFirstImage
-            returnKeyType='done'
+            returnKeyType="done"
            value={newUsername}
            onSubmitEditing={isWeightValid && isUsernameValid && _onSavePress}
            inputStyle={styles.usernameInput}
            wrapperStyle={styles.usernameFormInputWrapper}
          />
        </View>
-        
-        {isWeightValid && isUsernameValid ? (
-            <IconButton 
-                name="check"
-                iconType="MaterialCommunityIcons"
-                color={EStyleSheet.value('$white')}
-                iconStyle={{marginTop:2}}
-                size={24}
-                style={styles.doneButton}
-                onPress={_onSavePress}
-            />
-        ) : <View style={{width:28}}/>}

+        {isWeightValid && isUsernameValid ? (
+          <IconButton
+            name="check"
+            iconType="MaterialCommunityIcons"
+            color={EStyleSheet.value('$white')}
+            iconStyle={{ marginTop: 2 }}
+            size={24}
+            style={styles.doneButton}
+            onPress={_onSavePress}
+          />
+        ) : (
+          <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({
-                id: 'beneficiary_modal.addAccount',
-              })}
-            onPress={newEditable?_resetInputs:_addAccount}
-            textStyle={{
-                color:EStyleSheet.value('$primaryBlue'),
-                fontWeight:'bold',
-                textAlign:'left',
-            }}
+      {newEditable && _renderInput()}
+      <View style={{ marginTop: 20, marginBottom: 32 }}>
+        <TextButton
+          text={
+            newEditable
+              ? intl.formatMessage({
+                  id: 'beneficiary_modal.cancel',
+                })
+              : intl.formatMessage({
+                  id: 'beneficiary_modal.addAccount',
+                })
+          }
+          onPress={newEditable ? _resetInputs : _addAccount}
+          textStyle={{
+            color: EStyleSheet.value('$primaryBlue'),
+            fontWeight: 'bold',
+            textAlign: 'left',
+          }}
        />
-        
-        </View>
+      </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}
@ -303,7 +321,7 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
            value={`${item.weight / 100}`}
            inputStyle={styles.weightFormInput}
            wrapperStyle={styles.weightFormInputWrapper}
-           />
+          />
        </View>

        <View style={styles.usernameInput}>
@ -318,32 +336,31 @@ const BeneficiarySelectionContent = ({ draftId, setDisableDone, powerDown, power
          />
        </View>
        {!_isCurrentUser ? (
-          <IconButton 
+          <IconButton
            name="close"
            iconType="MaterialCommunityIcons"
            size={24}
            color={EStyleSheet.value('$primaryBlack')}
-            iconStyle={{paddingLeft:8}}
+            iconStyle={{ paddingLeft: 8 }}
            onPress={_onRemovePress}
          />
-        ):(
-          <View style={{width:30}} />
+        ) : (
+          <View style={{ width: 30 }} />
        )}
-        
      </View>
    );
  };

  return (
    <View style={styles.container}>
-        <Text style={styles.settingLabel}>{intl.formatMessage({id:'editor.beneficiaries'})}</Text>
-        <FlatList
-          data={beneficiaries}
-          renderItem={_renderItem}
-          ListHeaderComponent={_renderHeader}
-          showsVerticalScrollIndicator={false}
-        />
-        {_renderFooter()}
+      <Text style={styles.settingLabel}>{intl.formatMessage({ id: 'editor.beneficiaries' })}</Text>
+      <FlatList
+        data={beneficiaries}
+        renderItem={_renderItem}
+        ListHeaderComponent={_renderHeader}
+        showsVerticalScrollIndicator={false}
+      />
+      {_renderFooter()}
    </View>
  );
 };
--- a/src/components/beneficiarySelectionContent/styles.ts
+++ b/src/components/beneficiarySelectionContent/styles.ts
@ -55,5 +55,11 @@ export default EStyleSheet.create({
    thumbSelectContainer:{
      marginTop:12,
    },
-    
+    checkBoxHeader: {
+      width: 50,
+    },
+    checkBoxContainer: {
+      width: 50,
+      marginTop:12,
+    }
 });
--- a/src/config/locales/en-US.json
+++ b/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",