update design pin request

package-lock.json

@@ -6806,6 +6806,14 @@
         "lodash.isequal": "^4.5.0"
       }
     },
+    "react-native-pin-view": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-pin-view/-/react-native-pin-view-3.0.0.tgz",
+      "integrity": "sha512-6REScMNTIjhdRs7JUe1wbpz19OM4BcpLRI3w/WIvNCWyLppZlUOE4qne5jsQziUefN5vFlvxyiT4NwrNgQy1Ig==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-ratings": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.5.0.tgz",

package.json

@@ -53,6 +53,7 @@
     "react-native-maps": "^0.26.1",
     "react-native-multiple-select": "^0.5.5",
     "react-native-picker-select": "^6.6.0",
+    "react-native-pin-view": "^3.0.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-render-html": "^4.2.0",
     "react-native-safe-area-context": "^0.6.0",

view/PinRequest.js

+import Icon from "react-native-vector-icons/Ionicons"
+import React, { useEffect, useRef, useState } from "react"
+import { ImageBackground, SafeAreaView, StatusBar, Text, View } from "react-native"
+import ReactNativePinView from "react-native-pin-view"
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+const PinRequest = () => {
+    const pinView = useRef(null)
+    const [showRemoveButton, setShowRemoveButton] = useState(false)
+    const [enteredPin, setEnteredPin] = useState("")
+    const [showCompletedButton, setShowCompletedButton] = useState(false)
+    useEffect(() => {
+        if (enteredPin.length > 0) {
+            setShowRemoveButton(true)
+        } else {
+            setShowRemoveButton(false)
+        }
+        if (enteredPin.length === 6) {
+            setShowCompletedButton(true)
+            alert("Entered Pin: " + enteredPin)
+        } else {
+            setShowCompletedButton(false)
+        }
+    }, [enteredPin])
+    return (
+        <>
+            {/* <StatusBar barStyle="light-content" /> */}
+            <View style={{ flex: 1, backgroundColor: "white", marginHorizontal: 10 }}>
+                <View style={{ flex: 0.2, alignItems: 'center', justifyContent: 'center' }}>
+                    <View>
+                        <Text
+                            style={{
+                                fontFamily: 'Gotham-Black',
+                                color: "#838383",
+                                fontSize: 20,
+                            }}>
+                            INPUT YOUR SECURITY CODE
+                            </Text>
+                    </View>
+                    <View style={{ paddingTop: 10 }}>
+                        <Text
+                            style={{
+                                fontFamily: 'Gotham-Black',
+                                color: "#CFB368",
+                                fontSize: 14,
+                            }}>
+                            FORGOT YOUR SECURITY CODE?
+                            </Text>
+                    </View>
+                </View>
+                <View style={{ flex: 0.8 }}>
+                    <ReactNativePinView
+                        inputSize={30}
+                        ref={pinView}
+                        pinLength={6}
+                        buttonSize={90}
+                        onValueChange={value => setEnteredPin(value)}
+                        buttonAreaStyle={{
+                            marginTop: 24
+                        }}
+                        inputAreaStyle={{
+
+                        }}
+                        inputViewEmptyStyle={{
+                            backgroundColor: "transparent",
+                            borderWidth: 1,
+                            borderColor: "#CFB368",
+                        }}
+                        inputViewFilledStyle={{
+                            backgroundColor: "#CFB368",
+                        }}
+                        buttonViewStyle={{
+
+                        }}
+                        buttonTextStyle={{
+                            fontFamily: 'Gotham-Black',
+                            color: "#838383",
+                            fontSize: 70,
+                        }}
+                        onButtonPress={key => {
+                            // if (key === "custom_left") {
+                            //     pinView.current.clear()
+                            // }
+                            if (key === "custom_right") {
+                                // alert("Entered Pin: " + enteredPin)
+                                pinView.current.clear()
+                            }
+                            // if (key === "three") {
+                            //     alert("You can't use 3")
+                            // }
+                        }}
+                        // customLeftButton={showRemoveButton ? <Icon name={"ios-backspace"} size={36} color={"#838383"} /> : undefined}
+                        customLeftButtonDisabled
+                        customRightButton={<MaterialCommunityIcons name="backspace-outline" size={45} color="#838383" />}
+                    />
+                </View>
+            </View>
+        </>
+    )
+}
+export default PinRequest
\ No newline at end of file

view/UseBalance.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import Axios from 'axios';
 import ActionType from '../redux/globalActionType';
 import Spinner from 'react-native-loading-spinner-overlay';
+import PinRequest from './PinRequest'
 
 class UseBalance extends React.Component {
 
@@ -15,7 +16,7 @@ class UseBalance extends React.Component {
             redeem_balance: 0,
             redeem_point: 0,
             modalVisible: false,
-            pin:''
+            pin: ''
         }
     }
 
@@ -50,17 +51,17 @@ class UseBalance extends React.Component {
         })
     }
 
-    handleBack(){
+    handleBack() {
         this.setState({
             modalVisible: false
         })
     }
 
-    handleSubmit(){
+    handleSubmit() {
         this.redeem()
         this.setState({
             modalVisible: false,
-            pin:'',
+            pin: '',
         })
     }
     modal() {
@@ -87,7 +88,7 @@ class UseBalance extends React.Component {
             }).catch(error => {
                 let response = error.response.data
                 if (response.code === "EMPTY_PIN") {
-                        this.modal()
+                    this.modal()
                 } else {
                     let response = error.response.data;
                     Alert.alert('', response.msg);
@@ -100,15 +101,18 @@ class UseBalance extends React.Component {
     render() {
         return (
             <View style={styles.container}>
-                    <Modal animationType="slide"
-                    transparent={true}
+                <Modal animationType="slide"
+                    transparent={false}
                     visible={this.state.modalVisible}
                     onRequestClose={() => {
                         this.setState({
                             modalVisible: false
                         })
                     }}>
-                    <View style={styles.centerViewModal}>
+
+                    <PinRequest />
+
+                    {/* <View style={styles.centerViewModal}>
                         <View style={styles.modalView}>
                             <Text style={{ fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Black' }}>PIN</Text>
                             <View style={{ margin: 10 }}>
@@ -134,7 +138,7 @@ class UseBalance extends React.Component {
                                 </TouchableOpacity>
                             </View>
                         </View>
-                    </View>
+                    </View> */}
 
                 </Modal>
                 <View style={{ flex: 3 }}>