awal

.expo-shared/assets.json

+{
+  "0cae4d70c6df3e5e96ee8b5c442b59d55c8ab8deb466992ab9abc523822f2a1b": true,
+  "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
+  "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
+  "e7fc0741cc6562975a990e3d9ef820571588dab20aba97032df9f00caa9cd57a": true
+}
\ No newline at end of file

.gitignore

+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/

.watchmanconfig

+{}

App.js

+import * as React from 'react';
+import Auth from './view/Auth';
+import { NavigationContainer } from '@react-navigation/native';
+import { persistStore, persistReducer } from 'redux-persist';
+import { AsyncStorage } from 'react-native';
+import { PersistGate } from "redux-persist/integration/react";
+import rootReducer from './redux/globalReducer';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import * as Localization from 'expo-localization';
+import i18n from 'i18n-js';
+import en from './lib/en';
+import id from './lib/id';
+
+export const lang = i18n.translations = {
+        en:en,
+        id:id
+    }
+
+  export const set_lang  =  i18n.locale = Localization.locale;
+  export const fallbacks = i18n.fallbacks =  true;
+
+
+const persistConfig = {
+  key: 'root',
+  storage: AsyncStorage,
+};
+
+const persistReducers = persistReducer(persistConfig, rootReducer)
+const store = createStore(persistReducers);
+const persistor = persistStore(store)
+i18n.locale = Localization.locale;
+export default function App() {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <NavigationContainer>
+          <Auth />
+        </NavigationContainer>
+      </PersistGate>
+    </Provider>
+  );
+}

app.json

+{
+  "expo": {
+    "name": "Excelso_update",
+    "slug": "excelso-pro",
+    "privacy": "public",
+    "sdkVersion": "36.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/excelso.png",
+    "splash": {
+      "image": "./assets/logo_splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "local.ravExcelso",
+      "buildNumber": "20200327"
+    },
+    "android": {
+      "package": "local.ravExcelso",
+      "versionCode": 20200327
+    },
+    "description": ""
+  }
+}

babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

helper/AsynStorage.js

+import { AsyncStorage, Alert } from 'react-native';
+
+export async function setLogin(email, password) {
+    try {
+        await AsyncStorage.setItem('IS_LOGIN', '1')
+        await AsyncStorage.setItem('EMAIL',email)
+        await AsyncStorage.setItem('PASSWORD',password)
+        
+    } catch (error) {
+        console.log('Gagal Set Login : ' + error)
+    }
+}

lib/Language.js

+import  * as Localization from 'expo-localization';
+import i18n from 'i18n-js';
+import en from './en';
+import id from './id';
+
+export const lang = i18n.translations = {
+        en:en,
+        id:id
+    }
+    
+   export const set_lang  =  i18n.locale = Localization.locale;
+   export const fallbacks = i18n.fallbacks =  true;
+

lib/en.json

+{
+    "welcome": "Hello",
+    "welcome2":"hello2",
+    "password":"Password",
+    "password2":"Confirm Password",
+    "login":"Login",
+    "signin":"Sign in",
+    "register":"Register",
+    "forgotPassword":"Forgot Password",
+    "resetPassword":"Reset Password",
+    "name":"Name",
+    "dob":"Date of Birth",
+    "gender":"Gender",
+    "submit":"Submit",
+    "enterToken":"Enter Token",
+    "delivery":"Delivery",
+    "pickup":"Pickup",
+    "orderInfo" : "You Will Pickup Your Order At",
+    "orderNow" : "Order Now",
+    "yourCardNumber" : "Your Card Number",
+    "balance" : "Balance :",
+    "point" : "Points :",
+    "profile" : "Profile",
+    "upgradePremium" : "Upgrade Premium",
+    "cardActivation" : "Card Activation"
+
+
+
+}
\ No newline at end of file

lib/id.json

+{ 
+
+  "welcome": "Selamat datang",
+  "welcome2":"selamat datang 2",
+  "password":"Kata Sandi",
+  "password2":"Ulang Sandi",
+  "login":"Masuk",
+  "signin":"Masuk",
+  "register":"Daftar",
+  "forgotPassword":"Lupa Kata Sandi",
+  "resetPassword":"Atur Ulang Kata Sandi",
+  "name":"Nama",
+  "dob":"Tanggal Lahir",
+  "gender":"Jenis Kelamin",
+  "submit":"Kirim",
+  "enterToken":"Masukan Token",
+  "delivery":"Antar",
+  "pickup":"Ambil",
+  "orderInfo" : "Kamu Akan Ambil Pesanan Mu Di",
+  "orderNow" : "Pesan Sekarang",
+  "yourCardNumber" : "Nomor Kartu Mu",
+  "balance" : "Saldo :",
+  "point" : "Poin :",
+  "profile" : "Profil",
+  "upgradePremium" : "Tingkatkan Premium",
+  "cardActivation" : "Aktivasi Kartu"
+
+}
+
+
+
+

model/Base_Model.js

+export const BASE_URL_LOGIN = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/login';
+export const BASE_URL_REGISTER = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/register';
+export const BASE_URL_REGISTER_CONFIRM ='https://excelsocrm.ravintoladev.com/crm/v2/auth/register_confirm';
+export const BASE_URL_GET_ENUM = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/register_get_enum';
+export const BASE_URL_GET_CARAOUSEL = 'https://excelsocrm.ravintoladev.com/cms/v2/list/promotions-carousel';
+export const BASE_URL_RESET_PASSWORD = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/forgot_password';
+export const BASE_URL_CHANGE_PASSWORD = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/change_password';
+export const BASE_URL_NEW_PASSWORD = 'https://excelsocrm.ravintoladev.com/crm/v2/auth/reset_password';
+// =======
+// export const BASE_URL_REGISTER = 'http://192.168.2.188:8000/crm/v2/auth/register';
+// export const BASE_URL_REGISTER_CONFIRM ='http://192.168.2.188:8000/crm/v2/auth/register_confirm';
+// export const BASE_URL_GET_ENUM = 'http://192.168.2.188:8000/crm/v2/auth/register_get_enum';
+// export const BASE_URL_GET_CARAOUSEL = 'http://192.168.2.188:8000/cms/v2/list/promotions-carousel';
+// export const BASE_URL_RESET_PASSWORD = 'http://192.168.2.188:8000/crm/v2/auth/forgot_password';
+// export const BASE_URL_CHANGE_PASSWORD = 'http://192.168.2.188:8000/crm/v2/auth/change_password';
+// // export const BASE_URL_NEW_PASSWORD = 'http://192.168.2.188:8000/crm/v2/auth/reset_password';
+// >>>>>>> b5ca15bca6f7d685a79d0bf93fb703568fc68c60
+
+
+// export const BASE_URL_LOGIN = 'https://192.168.2.187:8000/crm/v2/auth/login';
+// export const BASE_URL_REGISTER = 'https://192.168.2.187:8000/crm/v2/auth/register';
+// export const BASE_URL_REGISTER_CONFIRM ='https://192.168.2.187:8000/crm/v2/auth/register_confirm';
+// export const BASE_URL_GET_ENUM = 'https://192.168.2.188:8000/crm/v2/auth/register_get_enum';
+// export const BASE_URL_GET_CARAOUSEL = 'https://192.168.2.187:8000/cms/v2/list/promotions-carousel';
+// export const BASE_URL_RESET_PASSWORD = 'https://192.168.2.187:8000/crm/v2/auth/forgot_password';
+// export const BASE_URL_CHANGE_PASSWORD = 'https://192.168.2.187:8000/crm/v2/auth/change_password';
+// export const BASE_URL_NEW_PASSWORD = 'https://192.168.2.187:8000/crm/v2/auth/reset_password';
\ No newline at end of file

notif/Push_notif.js

+import { Notifications } from 'expo';
+import { connect } from 'redux';
+import * as Permissions from 'expo-permissions';
+import ActionType from '../redux/globalActionType';
+
+async function registerForPushNotificationsAsync() {
+    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
+    if (status !== 'granted') {
+        console.log('No permission');
+        return;
+    }
+
+    let fb_token = await Notifications.getExpoPushTokenAsync();
+    console.log(fb_token);
+
+    let SetPushNotif = {
+        fb_token: fb_token
+    }
+    this.props.setPushProps(SetPushNotif);
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setPushNotif: (setPushProps) => dispatch({
+            type: ActionType.SET_PUSH_NOTIF,
+            data: {
+                fb_token:  setPushProps.fb_token
+            }
+        })
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+        fb_token: state.fb_token,
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(registerForPushNotificationsAsync);
+

package.json

+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@react-native-community/datetimepicker": "^2.2.2",
+    "@react-native-community/masked-view": "^0.1.5",
+    "@react-navigation/bottom-tabs": "^5.0.5",
+    "@react-navigation/native": "^5.0.5",
+    "@react-navigation/stack": "^5.0.5",
+    "@shankarmorwal/rn-viewpager": "^1.2.11",
+    "@valdio/react-native-scrollable-tabview": "^0.8.12",
+    "accordion-collapse-react-native": "^0.2.8",
+    "axios": "^0.19.2",
+    "expo": "~36.0.0",
+    "expo-camera": "~8.0.0",
+    "expo-constants": "^8.0.0",
+    "expo-device": "^2.0.0",
+    "expo-file-system": "~8.0.0",
+    "expo-font": "^8.0.0",
+    "expo-image-picker": "~8.0.1",
+    "expo-localization": "~8.0.0",
+    "expo-location": "^8.0.0",
+    "expo-permissions": "^8.0.0",
+    "i18n-js": "^3.5.1",
+    "native-base": "2.13.8",
+    "react": "~16.9.0",
+    "react-currency-format": "^1.0.0",
+    "react-dom": "~16.9.0",
+    "react-material-ui-form-validator": "^2.0.10",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
+    "react-native-date-picker": "^2.7.7",
+    "react-native-datepicker": "^1.7.2",
+    "react-native-device-info": "^5.5.3",
+    "react-native-elements": "^1.2.7",
+    "react-native-form-select-picker": "0.0.7",
+    "react-native-fs": "^2.16.6",
+    "react-native-geolocation-service": "^4.0.0",
+    "react-native-gesture-handler": "^1.5.6",
+    "react-native-i18n": "^2.0.15",
+    "react-native-image-base64": "^0.1.4",
+    "react-native-image-slider-box": "^1.0.12",
+    "react-native-loading-spinner-overlay": "^1.1.0",
+    "react-native-maps": "^0.26.1",
+    "react-native-multiple-select": "^0.5.5",
+    "react-native-picker-select": "^6.6.0",
+    "react-native-reanimated": "^1.4.0",
+    "react-native-render-html": "^4.2.0",
+    "react-native-safe-area-context": "^0.6.0",
+    "react-native-screens": "^2.2.0",
+    "react-native-scroll-into-view": "^1.0.3",
+    "react-native-scrollable-tab-view": "^1.0.0",
+    "react-native-shadow-cards": "^1.0.2",
+    "react-native-swiper": "^1.5.14",
+    "react-native-view-pager": "^0.2.3",
+    "react-native-view-shot": "3.0.2",
+    "react-native-web": "~0.11.7",
+    "react-native-webview": "^9.0.1",
+    "react-navigation": "^4.2.2",
+    "react-redux": "^7.2.0",
+    "react-redux-i18n": "^1.9.3",
+    "redux": "^4.0.5",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "~8.0.0",
+    "@babel/core": "^7.0.0"
+  },
+  "private": true
+}

redux/globalActionType.js

+//Action
+const ActionType = {
+    SET_LOGIN_INFO: 'SET_LOGIN_INFO',
+    SET_DEVICE_INFO: 'SET_DEVICE_INFO',
+    SET_PUSH_NOTIF: 'SET_PUSH_NOTIF',
+    SET_REGISTRATION:'SET_REGISTRATION',
+    SET_RESET_PASSWORD:'SET_RESET_PASSWORD',
+    SET_CHANGE_EMAIL:'SET_CHANGE_EMAIL',
+    SET_EMAIL_VERIFICATION:'SET_EMAIL_VERIFICATION',
+    SET_PAGE:'SET_PAGE',
+    SET_PROSES:'SET_PROSES',
+    SET_LOGOUT:'SET_LOGUT',
+    // SET_PROFIL:'SET_PROFIL',
+    SET_CARD:'SET_CARD',
+    SET_CHANGE_PROFIL:'SET_CHANGE_PROFIL',
+    SET_CHANGE_LANGUAGE:'SET_CHANGE_LANGUAGE',
+    SET_CHANGE_URI_SELFI:'SET_CHANGE_URI_SELFI',
+    SET_CHANGE_URI_ID:'SET_CHANGE_URI_ID',
+    SET_CHANGE_IMAGE_SELFI:'SET_CHANGE_IMAGE_SELFI',
+    SET_CHANGE_IMAGE_ID:'SET_CHANGE_IMAGE_ID',
+    SET_CHANGE_CAMERA:'SET_CHANGE_CAMERA',
+    SET_CHANGE_CAMERA_ID:'SET_CHANGE_CAMERA_ID',
+    SET_CHANGE_OUTLET:'SET_CHANGE_OUTLET',
+    SET_CHANGE_SHOP:'SET_CHANGE_SHOP',
+    
+}
+
+export default ActionType;
\ No newline at end of file

redux/globalReducer.js

+import ActionType from './globalActionType';
+
+const globalState = {
+
+    //Set login di set ketika init
+    email: '',
+    password: '',
+
+    //set register
+    full_name:'',
+    dob_day:'',
+    dob_month:'',
+    dob_year:'',
+    gender:'',
+
+    //Set device info di set ketika init
+    fb_token: '',
+    device_id: '',
+    os_name: '',
+    os_version: '',
+    app_version: '',
+    session_id:'',
+
+
+    //set change_profile
+    gender_display:'',
+
+    //set registration
+    validation_reg: false,
+
+    registration_id:'',
+    isEmailverif:false,
+    //set position
+    position: 'Home',
+    pageEmailConfirmation:false,
+    proses:'',
+
+    language:'id',
+    set_card: false,
+    URI:'',
+    URI_IDCARD:'',
+    id_card64: false,
+    img64: false,
+    selfie:false,
+    idcard:false,
+
+    BASE64_SELFIE:'',
+    BASE64_ID:'',
+
+    outlet_id:'',
+    name_outlet:'',
+
+    quantity:0,
+    orders :0,
+    cart_shop:[],
+}
+
+const rootReducer = (state = globalState, action) => {
+    switch (action.type) {
+        case ActionType.SET_LOGIN_INFO: {
+            return {
+                ...state,
+                email: action.data.email,
+                password: action.data.password,
+                session_id: action.data.session_id
+            }
+        }
+        case ActionType.SET_EMAIL_VERIFICATION :{
+            return{
+                ...state,
+                isEmailverif: action.data.isEmailverif,
+            }
+        }
+        case ActionType.SET_PAGE :{
+            return{
+                ...state,
+                pageEmailConfirmation: action.data.pageEmailConfirmation
+            }
+        }
+        case ActionType.SET_DEVICE_INFO: {
+            return {
+                ...state,
+
+                fb_token: action.data.fb_token,
+                device_id: action.data.device_id,
+                os_name: action.data.os_name,
+                os_version:action.data.os_version,
+                app_version: action.data.app_version,
+            }
+        }
+       
+        case ActionType.SET_REGISTRATION: {
+            return {
+                ...state,
+                full_name: action.data,
+                dob_day: action.dob_day,
+                dob_month:action.dob_month,
+                dob_year:action.dob_year,
+                gender:action.dob_year,
+                email: action.data.email,
+                validation_reg: action.data.validation_reg,
+                registration_id: action.data.registration_id
+            }
+        }
+
+        case ActionType.SET_CHANGE_LANGUAGE:{
+            return{
+                ...state,
+                language: action.data.language,
+            }
+        }
+        case ActionType.SET_CHANGE_PROFIL:{
+            return{
+                ...state,
+                full_name: action.full_name,
+                gender_display: action.gender_display
+            }
+        }
+        case ActionType.SET_RESET_PASSWORD:{
+            return{
+                ...state,
+                email:action.data.email,
+            }
+        }
+        case ActionType.SET_PROSES:{
+            return{
+                ...state,
+                proses:action.data.proses
+            }
+        }
+        case ActionType.SET_CHANGE_EMAIL:{
+            return{
+                ...state,
+                email:action.data.email,
+            }
+        }
+        case ActionType.SET_CHANGE_URI_SELFI:{
+            return{
+                ...state,
+                URI: action.data.URI,
+                BASE64_SELFIE: action.data.BASE64_SELFIE
+                // id_card64:action.data.id_card64,
+                // img64:action.data.img64
+
+            }
+        }
+
+        case ActionType.SET_CHANGE_URI_ID:{
+            return{
+                ...state,
+                URI_IDCARD: action.data.URI_IDCARD,
+                BASE64_ID: action.data.BASE64_ID
+                // id_card64:action.data.id_card64,
+                // img64:action.data.img64
+
+            }
+        }
+
+        case ActionType.SET_CHANGE_CAMERA:{
+            return{
+                ...state,
+                selfie: action.data.selfie,
+                idcard: false
+            }
+        }
+        case ActionType.SET_CHANGE_IMAGE_ID:{
+            return{
+                ...state,
+                idcard: action.data.idcard,
+                selfie: false
+            }
+        }
+        case ActionType.SET_CHANGE_IMAGE_SELFI:{
+            return{
+                ...state,
+                selfie: action.data.selfie
+            }
+        }
+        case ActionType.SET_CARD:{
+            return{
+                ...state,
+                set_card: action.data.set_card
+                
+            }
+        }
+        case ActionType.SET_CHANGE_OUTLET:{
+            return{
+                ...state,
+                outlet_id: action.data.outlet_id,
+                name_outlet: action.data.name_outlet
+                
+            }
+        }
+        case ActionType.SET_CHANGE_SHOP:{
+            let is_exists = cart_shop.find(item => item.id === action.data.id)
+
+            if (is_exists) {
+                // update
+            } else {
+                // add 
+
+            }
+
+            return{
+            }
+        }
+        case ActionType.SET_LOGOUT:{
+            return{
+                ...state,
+                session_id:action.data.session_id,
+            }
+        }
+        
+        
+        default:
+            return state;
+    }
+}
+
+export default rootReducer;

view/Account.js

+import React from 'react';
+import {
+    View,
+    StyleSheet,
+    Text,
+    StatusBar,
+    Image,
+    ScrollView,
+    TouchableOpacity,
+    Alert,
+    Button
+} from 'react-native';
+
+import { StackActions } from '@react-navigation/native';
+import { connect } from 'react-redux';
+import { Card } from 'react-native-shadow-cards';
+import ActionType from '../redux/globalActionType';
+import { CommonActions } from '@react-navigation/native';
+import { Ionicons, MaterialIcons, AntDesign, FontAwesome } from '@expo/vector-icons';
+import Axios from 'axios';
+
+class Account extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: "",
+            points: "",
+            balance: "",
+            img_card: "",
+            member_since: "",
+            account_number: "",
+            expire_date: "",
+            premium: ""
+        }
+    }
+
+    componentDidMount() {
+        this._getProfile();
+        this.props.navigation
+        console.log(" INI DATANYA " + this.props.set_card);
+    }
+
+    logout() {
+
+        let configProps = {
+            session_id: ''
+        }
+        this.props.setConfig(configProps);
+        console.log(this.props.navigation.replace('Login'));
+    }
+
+    _getProfile() {
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            console.log('ini res ' + JSON.stringify(res.data))
+            const dataCard = res.data
+            let email = dataCard.email
+            let point = dataCard.kaspro_point
+            let balance = dataCard.kaspro_balance
+            let img_card = dataCard.card_series_image
+            let member_since = dataCard.member_since
+            let expire = dataCard.expire_date
+            let premium = dataCard.kaspro_is_premium
+            let kaspro = dataCard.kaspro_account_number
+
+            console.log("AKUN INI : " + premium);
+            console.log("INI CUYYYYYY: " + kaspro)
+            if (kaspro === "") {
+                console.log('Kaspro Kosong')
+
+                let cardProps = {
+                    set_card: false
+
+                }
+
+                this.props.setCardactive(cardProps)
+            } else {
+                console.log('Kaspro Isi')
+                let cardProps = {
+                    set_card: true
+                }
+                this.props.setCardactive(cardProps)
+            }
+
+            let account_number = dataCard.kaspro_account_number
+
+            this.setState({
+                email: email,
+                points: point,
+                img_card: img_card,
+                member_since: member_since,
+                balance: balance,
+                account_number: account_number,
+                img_card: img_card,
+                expire_date: expire,
+                premium: premium,
+            })
+
+            console.log(this.state.expire_date)
+            console.log('SET CARD NOW : ' + this.props.set_card)
+        }).catch(error => {
+            console.log('ini error ' + error)
+        })
+    }
+
+    TransferBalance() {
+
+        if (this.state.premium === false) {
+            Alert.alert(
+                'Akun Belum Premium',
+                'Apakah anda ingin Upgrade Premium ?',
+
+                [{ text: 'Cancel' },
+                { text: 'OK', onPress: () => this.props.navigation.navigate('Upgrade Premium') }
+                ]
+            )
+        } else {
+            this.props.navigation.navigate('Transfer Balance');
+        }
+    }
+
+
+    render() {
+        const navigation = this.props.navigation
+        return (
+            <View style={styles.container}>
+                <ScrollView>
+                    <View style={styles.profil}>
+                        <Image
+                            style={{ height: 70, width: 70, top: 15, }}
+                            source={require('../assets/images/user.png')}
+                        />
+                        <Text style={styles.txtNama}>
+                            {this.props.username}
+                        </Text>
+                        <Text style={styles.txtEmail}>
+                            {this.state.email} {this.props.set_card}
+                        </Text>
+                    </View>
+                    {
+                        this.props.set_card === false ? (
+                            <View>
+                                <View style={styles.Card}>
+                                    {/* <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+
+                                        <Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
+                                        </Text>
+                                        <Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
+
+                                        </Text>
+                                        <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
+
+                                        </Text>
+                                    </Card>
+
+                                    <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+
+                                        <Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
+                                        </Text>
+                                        <Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
+
+                                        </Text>
+                                        <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
+
+                                        </Text>
+                                    </Card> */}
+                                </View>
+                                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
+                                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')} style={{ marginBottom: 10 }}>
+                                        <Card style={{ height: 100, width: 160 }}>
+                                            <View style={{ height: 50, alignItems: 'center' }}>
+                                                <MaterialIcons name="monetization-on" size={30} color="gray" style={{ top: 20 }} />
+                                                <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>PROFIL</Text>
+                                            </View>
+                                        </Card>
+                                    </TouchableOpacity>
+                                    <View style={{ width: 5 }}></View>
+                                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Card Activation')}>
+                                        <Card style={{ height: 100, width: 160 }}>
+                                            <View style={{ height: 50, alignItems: 'center' }}>
+                                                <AntDesign name="shoppingcart" size={30} color="gray" style={{ top: 20 }} />
+                                                <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>ACTIVATION CARD</Text>
+                                            </View>
+                                        </Card>
+                                    </TouchableOpacity>
+                                </View>
+                                <View style={{ flex: 1, margin: 40 }}>
+                                    <Button
+                                        title="Logout"
+                                        onPress={() => this.logout()}
+                                    />
+                                </View>
+                            </View>
+                        ) : (
+                                <View>
+                                    <View style={styles.Card}>
+                                        <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+                                            <Text>
+                                                YOUR CARD NUMBER | {this.state.expire_date}{'\n'}
+                                            </Text>
+                                            <Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
+                                                {this.state.account_number}
+                                            </Text>
+                                            <View style={styles.line}></View>
+                                            <Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
+                                            BALANCE: {this.state.balance}{'\n'}
+                                            </Text>
+                                            <View style={styles.line}></View>
+                                            <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
+                                            POINTS: {this.state.points}
+                                            </Text>
+                                        </Card>
+                                    </View>
+                                    <TouchableOpacity style={styles.submitTopUp} activeOpacity={.5} onPress={() => this.props.navigation.navigate('TopUpInfo')}>
+                                        <Text style={{ color: '#fff', textAlign: 'center' }}>TOP UP BALANCE</Text>
+                                    </TouchableOpacity>
+                                    <View style={{ padding: 10, margin: 10, height: 200 }}>
+                                        <Image style={{ width: '100%', height: '100%', padding: 0, margin: 0 }} resizeMode='stretch' source={this.state.img_card ? { uri: this.state.img_card } : null} />
+                                    </View>
+                                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
+                                        <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => this.TransferBalance()} >
+                                            <Card style={{ height: 100, width: 160 }}>
+
+                                                <View style={{ height: 50, alignItems: 'center' }}>
+                                                    <MaterialIcons name="monetization-on" size={30} color="gray" style={{ top: 20 }} />
+                                                    <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>TRANSFER BALANCE</Text>
+                                                </View>
+                                            </Card>
+                                        </TouchableOpacity>
+                                        <View style={{ width: 5 }}></View>
+                                        <TouchableOpacity>
+                                            <Card style={{ height: 100, width: 160 }}>
+                                                <View style={{ height: 50, alignItems: 'center' }}>
+                                                    <AntDesign name="shoppingcart" size={30} color="gray" style={{ top: 20 }} />
+                                                    <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>USE BALANCE</Text>
+                                                </View>
+                                            </Card>
+                                        </TouchableOpacity>
+                                    </View>
+                                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}>
+                                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Renewal')} style={{ marginBottom: 20 }}>
+                                            <Card style={{ height: 100, width: 160 }}>
+                                                <View style={{ height: 50, alignItems: 'center' }}>
+                                                    <MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 20 }} />
+                                                    <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>RENEWAL</Text>
+                                                </View>
+                                            </Card>
+                                        </TouchableOpacity>
+                                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Transaction History')} style={{ marginBottom: 20, marginRight: 5, marginLeft: 5 }}>
+                                            <Card style={{ height: 100, width: 160 }}>
+                                                <View style={{ height: 50, alignItems: 'center' }}>
+                                                    <MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 20 }} />
+                                                    <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>TRANSACTION HISTORY</Text>
+                                                </View>
+                                            </Card>
+                                        </TouchableOpacity>
+                                    </View>
+                                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 10 }}>
+                                        {this.state.premium === false ? (
+                                             <TouchableOpacity onPress={() => this.props.navigation.navigate('Upgrade Premium')} style={{ marginBottom: 20, marginRight: 5, marginLeft: 5 }}>
+                                             <Card style={{ height: 100, width: 160 }}>
+                                                 <View style={{ height: 50, alignItems: 'center' }}>
+                                                     <MaterialIcons name="autorenew" size={30} color="gray" style={{ top: 20 }} />
+                                                     <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>UPGRADE PREMIUM</Text>
+                                                 </View>
+                                             </Card>
+                                         </TouchableOpacity>
+                                        ):(
+                                            null
+                                        )}
+                                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Profile')} style={{ marginBottom: 10 }}>
+                                            <Card style={{ height: 100, width: 160 }}>
+                                                <View style={{ height: 50, alignItems: 'center' }}>
+                                                    <MaterialIcons name="monetization-on" size={30} color="gray" style={{ top: 20 }} />
+                                                    <Text style={{ textAlign: 'center', top: 30, fontSize: 14 }}>PROFIL</Text>
+                                                </View>
+                                            </Card>
+                                        </TouchableOpacity>
+                                    </View>
+                                    <View style={{ flex: 1, margin: 40 }}>
+                                        <Button
+                                            title="Logout"
+                                            onPress={() => this.logout()}
+                                        />
+                                    </View>
+                                </View>
+                            )
+                    }
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+Account.navigationOptions = {
+    header: null,
+};
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+        alignItems: 'stretch',
+    },
+    profil: {
+        height: 150,
+        backgroundColor: 'white',
+        alignItems: 'center',
+        top: 20,
+    },
+
+    Card: {
+        alignItems: 'center',
+        backgroundColor: 'white',
+        alignContent: 'center',
+    },
+
+    line: {
+        borderBottomColor: "black",
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        alignSelf: 'stretch',
+        width: "100%",
+        height: 3,
+        bottom: 5,
+    },
+
+    imgBackground: {
+        width: '100%',
+        height: '100%',
+        flex: 1
+    },
+    submitTopUp: {
+        marginTop: 10,
+        paddingTop: 15,
+        paddingBottom: 15,
+        marginLeft: 15,
+        marginRight: 15,
+        backgroundColor: '#c9af6d',
+        borderRadius: 10,
+        borderWidth: 0,
+        borderColor: '#fff',
+        textAlign: 'center',
+    },
+})
+
+//subscribe
+const mapStateToProps = (state) => {
+    console.log("INI STATEE NYA" + JSON.stringify(state));
+    return {
+        session_id: state.session_id,
+        set_card: state.set_card,
+    }
+}
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setConfig: (configProps) => dispacth({
+            type: ActionType.SET_LOGOUT,
+            data: {
+                session_id: configProps.session_id
+            }
+        }),
+        setCardactive: (cardProps) => dispacth({
+
+            type: ActionType.SET_CARD,
+            data: {
+                set_card: cardProps.set_card,
+            }
+        }),
+    }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(Account);

view/AddreesDetail.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Platform, Dimensions, Alert, Image } from 'react-native';
+import * as Device from 'expo-device';
+import * as Permissions from 'expo-permissions';
+import * as Location from 'expo-location';
+import MapView, { Marker } from 'react-native-maps';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+ class AddreesDetail extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            latitude: 0,
+            longitude: 0,
+            location: null,
+            error_message: null,
+            name:'',
+            address_id:'',
+            description:'',
+            lat:'',
+            long:'',
+            street: '',
+            city: '',
+            region: '',
+            name: '',
+            postalCode: '',
+            address: '',
+            address_d:'',
+            spinner: false,
+        }
+    }
+
+    componentDidMount() {
+
+        this._getPermissions();
+    }
+
+    //Permission (melakukan izin)
+    _getPermissions = async () => {
+        let { status } = await Permissions.askAsync(Permissions.LOCATION);
+        if (status !== 'granted') {
+            Alert.alert('Akses tidak dizinkan!')
+        } else if (Platform.OS === 'android' && !Device.isDevice) {
+
+            Alert.alert('Silahkan anda coba di real Device')
+        } else {
+            this._getLocationAsync()
+        }
+    }
+
+    //Current location (lokasi saat ini)
+    _getLocationAsync = async () => {
+        this.setState({
+            spinner: true,
+        })
+        let location = await Location.getCurrentPositionAsync({
+            accuracy: Location.Accuracy.Highest
+        })
+
+        let detail = await Location.reverseGeocodeAsync(location.coords)
+        console.log(" INI DETAIL "+ JSON.stringify(detail) )
+        let latitude = location.coords.latitude;
+        let longitude = location.coords.longitude;
+        this.setState({ location, latitude: latitude, longitude: longitude })
+
+        this.setState({
+
+            street: detail[0].street,
+            city: detail[0].city,
+            // name: detail[0].name,
+            region: detail[0].region,
+            postalCode: detail[0].postalCode,
+            
+
+        })
+
+        this.setState({
+            spinner: false,
+        })
+    }
+
+    //searchlocation (mencari lokasi)
+    _searchLocation = async () => {
+
+        let search_location = await Location.geocodeAsync(this.state.address, Location.Accuracy.Balanced)
+        if (search_location.length === 0) {
+            Alert.alert('Alamat tidak di temukan!');
+        } else {
+            let detail = await Location.reverseGeocodeAsync(search_location[0])
+          
+            this.setState({
+                latitude: search_location[0].latitude,
+                longitude: search_location[0].longitude,
+                street: detail[0].street,
+                city: detail[0].city,
+                // name: detail[0].name,
+                region: detail[0].region,
+                postalCode: detail[0].postalCode,
+            })
+        }
+
+        console.log('LATITUDE' + '' + this.state.latitude + '' + 'LONGITUDE' + this.state.longitude)
+    }
+
+    saveAddress() {
+
+        this.setState({
+            spinner: true,
+        })
+        const navigation = this.props.navigation
+       
+        let params = {
+            session_id: this.props.session_id,
+            address_id: '',
+            address: this.state.street + ' ' + this.state.city + ' ' + this.state.region + ' ' + this.state.postalCode ,
+            name: this.state.name,
+            description: this.state.description ,
+            lat: this.state.latitude,
+            long: this.state.longitude
+        }
+        console.log(params)
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/set_address', params).then(res => {
+            Alert.alert(
+                'Berhasil',
+                'Berhasil menambahkan Alamat !'
+                
+            )
+            this.setState({
+                spinner: false,
+            })
+            this.props.navigation.goBack()
+            this.props.route.params.onChangeAddress({ example: 'wakwaw' })
+
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(
+                '',
+                response.msg
+            )
+            this.setState({
+                spinner: false,
+            })
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                 <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <ScrollView>
+                    <View style={styles.header}>
+                        <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Tambah Alamat</Text>
+                    </View>
+                    <View style={styles.content}>
+                        <View style={styles.field_search}>
+                            <View style={{ width: 55, justifyContent: 'center' }}>
+                                <Text>Cari</Text>
+                            </View>
+                            <View style={{ flex: 1 }}>
+                                <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }} onChangeText={(address) => this.setState({ address })} />
+                            </View>
+                            <View style={{ alignSelf: 'center' }}>
+                                <Button title="cari" onPress={() => this._searchLocation()}></Button>
+                            </View>
+                        </View>
+                        <View style={styles.cont_google_map}>
+                            <MapView
+                                region={{
+
+                                    latitude: this.state.latitude,
+                                    longitude: this.state.longitude,
+                                    latitudeDelta: 0.1,
+                                    longitudeDelta: 0.1,
+
+                                }}
+                                zoomEnabled={true}
+                                showsMyLocationButton={true}
+                                loadingEnabled={true}
+                                showsUserLocation={true}
+                                showsScale={true}
+                                style={styles.cont_google_map}
+                            />
+                            <View style={{ position: 'absolute', top: '50%', alignSelf: 'flex-end' }}>
+                                <View style={{ margin: 15 }}>
+                                    <TouchableOpacity style={{ height: 30, width: 30, backgroundColor: '#e6e6e6' }} onPress={() => this._getLocationAsync()}>
+                                        <Image source={require('../assets/icon/gps.png')} style={{ height: 30, width: 30 }} />
+                                    </TouchableOpacity>
+                                </View>
+                            </View>
+                        </View>
+                        <View style={styles.name_addrees_input}>
+                            <View style={styles.field_name_addrees}>
+                                <View style={{ width: 55, justifyContent: 'center' }}>
+                                    <Text>Nama</Text>
+                                </View>
+                                <TextInput style={{ height: 40, borderWidth: 1, padding: 5, flex: 1, margin: 10 }} onChangeText={(name) => this.setState({ name })} />
+                            </View>
+
+                            <View style={styles.field_detail_addrees}>
+                                <View style={{ width: 55, justifyContent: 'center' }}>
+                                    <Text>Detail</Text>
+                                </View>
+                                <TextInput style={{ height: 80, borderWidth: 1, padding: 5, flex: 1, margin: 10 }} onChangeText={(description) => this.setState({ description })} />
+                            </View>
+                            <View style={styles.field_name_addrees}>
+                                <View style={{ width: 55, justifyContent: 'center' }}>
+                                    <Text>Alamat</Text>
+                                </View>
+                                <View style={{ flex: 1, height: 80, borderWidth: 1, padding: 5, margin: 10 }}>
+                                    <View style={{ padding: 5 }}>
+                                    <Text>{this.state.street}</Text>
+                                    <Text>{this.state.city}</Text>
+                                    <Text>{this.state.region}</Text>
+                                    <Text>{this.state.postalCode}</Text>
+                                    </View>
+                                </View>
+                            </View>
+                            <View style={{ margin: 50, justifyContent: 'center' }}>
+                                <Button title="Simpan" onPress={() => this.saveAddress()} />
+                            </View>
+                        </View>
+                    </View>
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 5,
+    },
+
+    content: {
+        flex: 3,
+        margin: 5,
+    },
+
+    field_search: {
+        flexDirection: 'row'
+    },
+
+    cont_google_map: {
+        flex: 1,
+        borderWidth: 1,
+        margin: 5,
+        height: 250,
+    },
+
+    name_addrees_input: {
+        flex: 1,
+        margin: 5,
+    },
+
+    field_name_addrees: {
+        flexDirection: 'row'
+    },
+
+    field_detail_addrees: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 40,
+        margin: 10,
+
+    },
+})
+
+const mapStateToProps = (state) => {
+    return {
+  
+      session_id: state.session_id,
+
+    }
+  }
+  
+  export default connect(mapStateToProps)(AddreesDetail)
\ No newline at end of file

view/Auth.js

+import * as React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { connect } from 'react-redux';
+import { View, Text } from 'react-native';
+import ActionType from '../redux/globalActionType';
+import MenuSelection from './MenuSelection';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import Home from './Home';
+import Login from './Login';
+import Register from './Register';
+import ResetPassword from './ResetPassword';
+import VerifyEmail from './VerifyEmail';
+import NewPassword from './NewPassword';
+import ChangeEmail from './ChangeEmail';
+import CardActivation from './CardActivation';
+import ConfirmMobile from './ConfirmMobile';
+import Balance from './Balance';
+import RedeemCode from './RedeemCode';
+import TransactionHistory from './TransactionHistory'
+import TransactionDetail from './TransactionDetail'
+import EmailConfirmation from './EmailConfirmation';
+import Renewal from './Renewal';
+import NewsDetail from './NewsDetail';
+import DeliveryAddress from './DeliveryAddrees';
+import PickupName from './PickupName';
+import MenuConfirmation from './MenuConfirmation';
+import AddressDetail from './AddreesDetail';
+import ShoppingCart from './ShoppingCart';
+import TransferBalance from './TransferBalance';
+import CardInfo from './CardInfo';
+import ChangeLanguage from './ChangeLanguage';
+import ChangePassword from './ChangePassword';
+import DateTime from './Date';
+import NewRegister from './New_Register';
+import ProfilePage from './ProfilePage';
+import ChangeProfile from './ChangeProfil';
+import i18n from 'i18n-js';
+import TopUpInfo from './TopUpInfo';
+import UpgradePremium from './UpgradePremium';
+import Account from './Account';
+import Cameras from './Camera';
+import OutletDetail from './OutletDetails';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { enableScreens } from 'react-native-screens';
+import MenuDetail from './MenuDetail';
+import OrderHistory from './OrderHistory'
+enableScreens();
+
+function Rewards() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>
+        Rewards !
+      </Text>
+
+    </View>
+  )
+
+}
+
+
+function Outlets() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>
+        Outlets !
+      </Text>
+
+    </View>
+  )
+
+}
+
+const Tab = createBottomTabNavigator();
+
+function HomePage() {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused, color, size }) => {
+          let iconName;
+
+          if (route.name === 'HOME') {
+            iconName = focused ? 'ios-home' : 'ios-home'
+          } else if (route.name === 'MENU') {
+            iconName = focused ? 'ios-paper' : 'ios-paper';
+          } else if (route.name === 'REWARDS') {
+            iconName = focused ? 'ios-gift' : 'ios-gift';
+          } else if (route.name === 'ORDER') {
+            iconName = focused ? 'md-cart' : 'md-cart';
+          } else if (route.name === 'OUTLETS') {
+            iconName = focused ? 'ios-cafe' : 'ios-cafe';
+          } else if (route.name === 'ACCOUNT') {
+            iconName = focused ? 'account' : 'account';
+            return <MaterialCommunityIcons name={iconName} size={size} color={color} />
+          }
+
+          // You can return any component that you like here!
+          return <Ionicons name={iconName} size={size} color={color} />;
+        },
+      })}
+
+      tabBarOptions={{ activeTintColor: 'cornflowerblue', inactiveTintColor: 'gray' }}
+
+    >
+      <Tab.Screen name="HOME" component={Home} />
+      <Tab.Screen name="MENU" component={MenuSelection} />
+      <Tab.Screen name="REWARDS" component={Rewards} />
+      <Tab.Screen name="ORDER" component={OrderHistory} />
+      <Tab.Screen name="OUTLETS" component={Outlets} />
+      <Tab.Screen name="ACCOUNT" component={Account} />
+    </Tab.Navigator>
+
+
+  );
+}
+const Stack = createStackNavigator();
+class Auth extends React.Component {
+  constructor(props) {
+    super(props);
+    i18n.locale = this.props.language;
+  }
+
+  render() {
+
+    return (
+      <Stack.Navigator>
+        {
+          this.props.session_id === '' ? (
+            <>
+              {/* <Stack.Screen name="Change language" component={ChangeLanguage} /> */}
+              <Stack.Screen name="Login" component={Login} />
+              <Stack.Screen name="Home" component={Home} />
+              <Stack.Screen name="Profile" component={ProfilePage} />
+              <Stack.Screen name="Change Profil" component={ChangeProfile} />
+              <Stack.Screen name="Register" component={Register} />
+              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
+            </>
+          ) : this.props.pageEmailConfirmation === true ? (
+            <>
+              <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
+              <Stack.Screen name="Login" component={Login} />
+              <Stack.Screen name="Home" component={Home} options={{headerShown:false}} />
+            </>
+          ) : (
+                <>
+                  <Stack.Screen name="Home" component={HomePage} options={{headerShown:false}}/>
+                  <Stack.Screen name="Profile" component={ProfilePage} />
+                  <Stack.Screen name="Change Profil" component={ChangeProfile} />
+                  <Stack.Screen name="Change language" component={ChangeLanguage} />
+                  <Stack.Screen name="Change password" component={ChangePassword} />
+                  <Stack.Screen name="Card Activation" component={CardActivation} />
+                  <Stack.Screen name="Renewal" component={Renewal} />
+                  <Stack.Screen name="Account" component={Account} />
+                  <Stack.Screen name="Login" component={Login} />
+                  <Stack.Screen name="Transfer Balance" component={TransferBalance} />
+                  <Stack.Screen name="Register" component={Register} />
+                  <Stack.Screen name="Email Confirmation" component={EmailConfirmation} />
+                  <Stack.Screen name="Upgrade Premium" component={UpgradePremium} />
+                  <Stack.Screen name="Camera" component={Cameras} />
+                  <Stack.Screen name="Delivery Address" component={DeliveryAddress}/>
+                  <Stack.Screen name="Address Detail" component={AddressDetail} />
+                  <Stack.Screen name="Menu Detail" component={MenuDetail} />
+                  <Stack.Screen name="Pickup Name" component={PickupName} options={{title:"PICKUP STORE",headerStyle:{backgroundColor:"#ccb46c"},headerTitleAlign:'center',headerTitleStyle:{color:'white',fontWeight:'bold'}}} />
+                  <Stack.Screen name="Outlet Detail" component={OutletDetail}/>
+                  <Stack.Screen name="Menu Select" component={MenuSelection} />
+                  <Stack.Screen name="Card Info" component={CardInfo} />
+                  <Stack.Screen name="Shopping Cart" component={ShoppingCart} />
+                  
+                </>
+              )
+
+
+        }
+
+        <Stack.Screen name="New Password" component={NewPassword} />
+        {/* <Stack.Screen name="Login" component={Login} /> */}
+        <Stack.Screen name="Reset Password" component={ResetPassword} />
+        <Stack.Screen name="Verify Email" component={VerifyEmail} />
+        <Stack.Screen name="Change Email" component={ChangeEmail} />
+        {/* <Stack.Screen name="Card Activation" component={CardActivation} /> */}
+        <Stack.Screen name="Confirm Mobile" component={ConfirmMobile} />
+        <Stack.Screen name="Balance" component={Balance} />
+        <Stack.Screen name="Redeem Code" component={RedeemCode} />
+        <Stack.Screen name="Transaction History" component={TransactionHistory} />
+        <Stack.Screen name="Transaction Detail" component={TransactionDetail} />
+        {/* <Stack.Screen name="Email Confirmation" component={EmailConfirmation} /> */}
+
+        <Stack.Screen name="News Detail" component={NewsDetail} />
+        {/* <Stack.Screen name="Delivery Address" component={DeliveryAddress} /> */}
+        
+        <Stack.Screen name="Menu Confirmation" component={MenuConfirmation} />
+        
+       
+
+        {/* <Stack.Screen name="Card Info" component={CardInfo} /> */}
+        {/* <Stack.Screen name="Change password" component={ChangePassword} /> */}
+        <Stack.Screen name="Date Time" component={DateTime} />
+        <Stack.Screen name="New Register" component={NewRegister} />
+        <Stack.Screen name="TopUpInfo" component={TopUpInfo} />
+      </Stack.Navigator>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    session_id: state.session_id,
+    language: state.language,
+    pageEmailConfirmation: state.pageEmailConfirmation
+  }
+}
+
+export default connect(mapStateToProps)(Auth);
+
+
+
+

view/Balance.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+
+export default class Balance extends React.Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', fontSize: 25 }}>Balance</Text>
+                </View>
+                <View style={styles.body}>
+                    <View style={styles.current_balance}>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }} >Current Balance</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }}>xxxxxxxxxxx</Text>
+                        </View>
+                    </View>
+                    <View style={styles.redeem}>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }} >Redeem</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }}>xxxxxxxxxxx</Text>
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Redeem" />
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    body: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    current_balance: {
+        flexDirection: 'row',
+    },
+
+    redeem: {
+        flexDirection: 'row'
+    },
+
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file

view/Camera.js

+import React from 'react';
+import { StyleSheet, Text, View, TouchableOpacity, Platform, } from 'react-native';
+import { Camera } from 'expo-camera';
+import * as Permissions from 'expo-permissions';
+import { FontAwesome, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import * as ImagePicker from 'expo-image-picker';
+import * as FileSystem from 'expo-file-system';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+
+ class Cameras extends React.Component {
+  state = {
+    hasPermission: null,
+    cameraType: Camera.Constants.Type.back,
+  }
+
+  async componentDidMount() {
+    this.getPermissionAsync()
+  }
+
+  getPermissionAsync = async () => {
+    // Camera roll Permission 
+    if (Platform.OS === 'ios') {
+      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+      if (status !== 'granted') {
+        alert('Sorry, we need camera roll permissions to make this work!');
+      }
+    }
+    // Camera Permission
+    const { status } = await Permissions.askAsync(Permissions.CAMERA);
+    this.setState({ hasPermission: status === 'granted' });
+  }
+
+  handleCameraType = () => {
+    const { cameraType } = this.state
+
+    this.setState({
+      cameraType:
+        cameraType === Camera.Constants.Type.back
+          ? Camera.Constants.Type.front
+          : Camera.Constants.Type.back
+    })
+  }
+
+  capture(){
+    console.log('IS SELFIE : ' + this.props.selfie)
+    console.log('IS IDCARD : ' + this.props.idcard)
+    if (this.props.selfie === true) {
+      this.takePictureSelfie()
+      console.log('ini foto selfie');
+    } else {
+      this.takePictureIdCard()
+      console.log('ini foto ktp');
+    }
+  }
+
+  takePictureSelfie = async () => {
+    if (this.camera) {
+      let photo = await this.camera.takePictureAsync({skipProcessing:true});
+      let photo_img = photo.uri;
+      const base64 = await FileSystem.readAsStringAsync(photo_img, { encoding: 'base64' });
+      // var set_photo = photo.replace('uri','')
+      let UriProps = {
+        URI: photo_img,
+        // BASE64_SELFIE:photo
+      }
+      this.props.setUriSelfi(UriProps);
+      this.props.navigation.navigate("Upgrade Premium")
+      console.log(photo);
+      // console.log("ini sudah di pencet" + photo_img)
+    }
+  }
+
+  takePictureIdCard = async () => {
+    if (this.camera) {
+      let photo = await this.camera.takePictureAsync({skipProcessing:true});
+      let photo_img = photo.uri;
+      const base64 = await FileSystem.readAsStringAsync(photo_img, { encoding: 'base64' });
+      // var set_photo = photo.replace('uri','')
+      let UriPropsID = {
+        URI_IDCARD: photo_img,
+        // BASE64_ID: photo
+      }
+      this.props.setUriID(UriPropsID);
+      this.props.navigation.navigate("Upgrade Premium")
+      // console.log("ini sudah di pencet" + photo_img)
+    }
+  }
+
+  
+
+  pickImage = async () => {
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images
+    });
+  }
+
+  render() {
+    const { hasPermission } = this.state
+    if (hasPermission === null) {
+      return <View />;
+    } else if (hasPermission === false) {
+      return <Text>No access to camera</Text>;
+    } else {
+      return (
+        <View style={{ flex: 1 }}>
+          <Camera style={{ flex: 1 }} type={this.state.cameraType} ref={ref => { this.camera = ref }}>
+            <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between", margin: 30 }}>
+              <TouchableOpacity
+                style={{
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  backgroundColor: 'transparent'
+                }}
+                onPress={() => this.pickImage()}>
+                <Ionicons
+                  name="ios-photos"
+                  style={{ color: "#fff", fontSize: 40 }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  backgroundColor: 'transparent',
+                }}
+                onPress={() => this.capture()}
+              >
+                <FontAwesome
+                  name="camera"
+                  style={{ color: "#fff", fontSize: 40 }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  backgroundColor: 'transparent',
+                }}
+                onPress={() => this.handleCameraType()}
+              >
+                <MaterialCommunityIcons
+                  name="camera-switch"
+                  style={{ color: "#fff", fontSize: 40 }}
+                />
+              </TouchableOpacity>
+            </View>
+          </Camera>
+        </View>
+      );
+    }
+  }
+
+}
+
+const mapDispatchToProps = (dispacth) => {
+  return {
+    setUriSelfi: (UriProps) => dispacth({
+          type: ActionType.SET_CHANGE_URI_SELFI,
+          data: {
+              URI: UriProps.URI,
+              BASE64_SELFIE: UriProps.BASE64_SELFIE
+          }
+      }),
+      setUriID: (UriPropsID) => dispacth({
+        type: ActionType.SET_CHANGE_URI_ID,
+        data: {
+          URI_IDCARD: UriPropsID.URI_IDCARD,
+          BASE64_ID:UriPropsID.BASE64_ID,
+        }
+    }),
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    URI: state.URI,
+    URI_IDCARD: state.URI_IDCARD,
+    img64: state.img64,
+    id_card64: state.id_card64,
+    selfie: state.selfie,
+    idcard: state.id_card
+
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Cameras);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// import React, { useState, useEffect } from 'react';
+// import { Text, View, TouchableOpacity } from 'react-native';
+// import { Camera } from 'expo-camera';
+
+// export default function Cameras() {
+//   const [hasPermission, setHasPermission] = useState(null);
+//   const [type, setType] = useState(Camera.Constants.Type.back);
+
+//   useEffect(() => {
+//     (async () => {
+//       const { status } = await Camera.requestPermissionsAsync();
+//       setHasPermission(status === 'granted');
+//     })();
+//   }, []);
+
+//   if (hasPermission === null) {
+//     return <View />;
+//   }
+//   if (hasPermission === false) {
+//     return <Text>No access to camera</Text>;
+//   }
+//   return (
+//     <View style={{ flex: 1 }}>
+//       <Camera style={{ flex: 1 }} type={type}>
+//         <View
+//           style={{
+//             flex: 1,
+//             backgroundColor: 'transparent',
+//             flexDirection: 'row',
+//           }}>
+//           <TouchableOpacity
+//             style={{
+//               flex: 0.1,
+//               alignSelf: 'flex-end',
+//               alignItems: 'center',
+//             }}
+//             onPress={() => {
+//               setType(
+//                 type === Camera.Constants.Type.back
+//                   ? Camera.Constants.Type.front
+//                   : Camera.Constants.Type.back
+//               );
+//             }}>
+//             <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
+//           </TouchableOpacity>
+//         </View>
+//       </Camera>
+//     </View>
+//   );
+// }
\ No newline at end of file

view/CardActivation.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class CardActivation extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            session_id: "",
+            mobile_phone: "",
+            card_number: "",
+            token: "",
+            timer: 80,
+            onclick: false,
+            spinner: false,
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.state.timer === 0) {
+            clearInterval(this.interval);
+        }
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.interval);
+    }
+
+    handleToken() {
+        let params = {
+            session_id: this.props.session_id,
+            mobile_phone: this.state.mobile_phone
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/get_token', params).then(res => {
+            this.setState({
+                onclick: true
+            })
+            Alert.alert('Kami telah mengirimkan sms otp ke nomor anda!');
+            this.interval = setInterval(
+                () => this.setState((prevState) => ({ timer: prevState.timer - 1 })),
+                1000
+            );
+            this.setState({
+                onclick: true
+            })
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    ResendToken() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            session_id: this.props.session_id,
+            mobile_phone: this.state.mobile_phone
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/resend_token', params).then(res => {
+            this.setState({
+                spinner: false,
+            })
+
+            Alert.alert('Kami telah kembali mengirimkan sms otp ke nomor anda!');
+            this.setState({
+                timer: 80
+            })
+            this.interval = setInterval(
+                () => this.setState((prevState) => ({ timer: prevState.timer - 1 })),
+                1000
+            );
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    handleActivate() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            session_id: this.props.session_id,
+            mobile_phone: this.state.mobile_phone,
+            card_number: this.state.card_number,
+            token: this.state.token
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/card/activate', params).then(res => {
+            Alert.alert("Kartu anda berhasil di aktifkan");
+            this.setState({
+                spinner: false,
+            })
+            this.props.navigation.reset({
+                index: 0,
+                routes: [{ name: 'Home' }],
+            })
+
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            let response = error.response.data;
+            Alert.alert(response.msg);
+
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Activate Card</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_phone}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Phone</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                                onChangeText={mobile_phone => this.setState({ mobile_phone })}
+                                value={this.state.mobile_phone}
+                            />
+                        </View>
+                        <View style={styles.button}>
+                            <Button title="Token" onPress={() => this.handleToken()}></Button>
+                        </View>
+                    </View>
+                    {
+                        this.state.onclick === true ? (<Text style={{ textAlign: 'center' }}> 0:{this.state.timer} </Text>) : (
+                            null
+                        )
+                    }
+                    {
+                        this.state.timer === 0 ? (
+                            <View style={{ width: 90, height: 40, alignSelf: 'center', margin: 20, top: 0 }}>
+
+                                <Button title="Resend Token" onPress={() => this.ResendToken()}></Button>
+                            </View>
+                        ) : (null)}
+
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Card number</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                                onChangeText={card_number => this.setState({ card_number })}
+                                value={this.state.card_number}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Token</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                                onChangeText={token => this.setState({ token })}
+                                value={this.state.token}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Activate" onPress={() => this.handleActivate()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    field_phone: {
+        flexDirection: 'row'
+    },
+
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+        session_id: state.session_id,
+        set_card: state.set_card
+    }
+}
+
+
+export default connect(mapStateToProps)(CardActivation);
\ No newline at end of file

view/CardInfo.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+
+export default function ConfirmMobile({route,navigation}){
+const { DATA } = route.params;
+   return(
+            <View style={styles.container}>
+                <Text>{JSON.stringify(DATA)}</Text>
+            </View>
+   )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    field_phone: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file

view/ChangeEmail.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+
+class ChangeEmail extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: ""
+        }
+    }
+
+    changeEmail() {
+
+        let paramater = {
+            "email": this.state.email,
+            "registration_id": this.props.registration_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/auth/register_change_email', paramater).then(res => {
+            console.log(res);
+            let loginProps = {
+                email: this.state.email
+
+            }
+            let emailConfirmProps = {
+                isEmailverif: false
+            }
+            this.props.setChangeEmail(loginProps)
+            this.props.setEmailConfirm(emailConfirmProps)
+            Alert.alert(
+                '',
+                'Email terkirim, mohon dicek'
+                ,
+            )
+            this.props.navigation.navigate("Email Confirmation");
+        }).catch(error => {
+
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Change Email</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Email</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(email) => this.setState({ email })}
+                                value={this.state.email}
+                            />
+
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Submit" onPress={() => this.changeEmail()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
+
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setChangeEmail: (params) => dispacth({
+            type: ActionType.SET_CHANGE_EMAIL,
+            data: {
+                email: params.email,
+            }
+        }),
+
+        setEmailConfirm:(emailConfirmProps) => dispacth({
+            type: ActionType.SET_EMAIL_VERIFICATION,
+            data:{
+                isEmailverif: emailConfirmProps.isEmailverif,
+            }
+        })
+    }
+}
+const mapStateToProps = (state) => {
+    return {
+        registration_id: state.registration_id
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChangeEmail);
\ No newline at end of file

view/ChangeLanguage.js

+import React, { Component } from 'react';
+import { StyleSheet, Text, View, Button, StatusBar, TouchableOpacity, Image } from 'react-native';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import i18n from 'i18n-js';
+
+class Language extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            language: 'id'
+        }
+    }
+
+    _changLanguage() {
+
+        let languageProps = {
+            language: 'en'
+        }
+        this.props.setLanguage(languageProps);
+        i18n.locale = 'en'
+    }
+
+    _changLanguageId() {
+
+        let languageProps = {
+            language: 'id'
+        }
+        this.props.setLanguage(languageProps);
+        i18n.locale = 'id'
+    }
+
+
+    render() {
+
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <StatusBar barStyle='dark-content' />
+                    <Text style={styles.titleText}> {i18n.t('welcome')}</Text>
+                </View>
+                <View style={styles.body}>
+                    <TouchableOpacity onPress={() => this._changLanguage()}>
+                        <View style={styles.languageBorder}>
+                            <View style={styles.languageSpace}>
+                                {/* <Image style={styles.icon} source={require('../assets/English-Language-icon.png')}></Image> */}
+                            </View>
+                            <View style={styles.languageSpace}>
+                                <Text>ENG</Text>
+                            </View>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={() => this._changLanguageId()}>
+                        <View style={styles.languageBorder}>
+                            <View style={styles.languageSpace}>
+                                {/* <Image style={styles.icon} source={require('../assets/Indonesia-Flag-icon.png')}></Image> */}
+                            </View>
+                            <View style={styles.languageSpace}>
+                                <Text>ID</Text>
+                            </View>
+                        </View>
+                    </TouchableOpacity>
+                  
+                    <View style={styles.button}>
+                        <Button title="save" onPress={()=>this.props.navigation.goBack()}/>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        borderWidth: 1
+    },
+    header: {
+        flex: 0.2,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    body: {
+        flex: 0.6,
+        flexDirection: 'column',
+        borderWidth: 1,
+        marginLeft: 60,
+        marginRight: 60,
+    },
+    titleText: {
+        fontSize: 26,
+        fontWeight: 'bold',
+    },
+    languageBorder: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        marginTop: 50,
+        marginRight: 40,
+        marginLeft: 40
+    },
+    languageSpace: {
+        marginLeft: 20
+    },
+    button: {
+        marginTop: 50,
+        marginLeft: 60,
+        marginRight: 60
+    },
+    icon: {
+        height: 60,
+        width: 60
+    },
+
+
+});
+
+
+const mapStateToProps = (state) => {
+    return {
+        language: state.language,
+    }
+}
+
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+
+        setLanguage: (languageProps) => dispacth({
+            type: ActionType.SET_CHANGE_LANGUAGE,
+            data: {
+                language: languageProps.language
+            }
+        })
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Language);
\ No newline at end of file

view/ChangePassword.js

+import React, { Component, PureComponent } from 'react';
+import { StyleSheet, Text, TextInput, View, Button,Alert } from 'react-native';
+import Axios from 'axios';
+import {BASE_URL_CHANGE_PASSWORD} from '../model/Base_Model';
+import { connect } from 'react-redux';
+
+class ChangePassword extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            session_id: '',
+            old_password: '',
+            Password: '',
+            Password_confirmation: '',
+        }
+    }
+
+    componentDidMount(){
+
+    }
+
+    changePassword() {
+        let params = {
+            "session_id": this.props.session_id,
+            "old_password": this.state.old_password,
+            "password": this.state.Password,
+            "password_confirmation": this.state.Password_confirmation
+        }
+        Axios.post(BASE_URL_CHANGE_PASSWORD, params).then(res => {
+            this.props.navigation.navigate('Profile');
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Change Password</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_token}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Current Password</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 50, borderWidth: 1, padding: 5, margin: 10 }}  
+                            onChangeText={(old_password) => this.setState({ old_password })}
+                            value={this.state.old_password }  
+                            secureTextEntry={true}/>
+                        </View>
+                    </View>
+                    <View style={styles.field_new_password}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>New Password</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 50, borderWidth: 1, padding: 5, margin: 10 }}  
+                            onChangeText={(Password) => this.setState({ Password })}
+                            value={this.state.Password} 
+                            secureTextEntry={true}/>
+                        </View>
+                    </View>
+                    <View style={styles.field_repeat_password}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Repeat Password</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 50, borderWidth: 1, padding: 5, margin: 10 }}  
+                            onChangeText={(Password_confirmation) => this.setState({ Password_confirmation })}
+                            value={this.state.Password_confirmation} 
+                            secureTextEntry={true}/>
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Change Password" onPress={()=>this.changePassword()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_token: {
+        flexDirection: 'row'
+    },
+
+    field_new_password: {
+        flexDirection: 'row'
+    },
+
+    field_repeat_password: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+});
+
+const mapStateToProps = (state) => {
+    return {
+        session_id: state.session_id,
+    }
+}
+
+
+export default connect(mapStateToProps)(ChangePassword);

view/ChangeProfil.js

+import React, { PureComponent } from 'react';
+import { View, Text, button, StyleSheet, Button, TextInput, Picker, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import RNPickerSelect from 'react-native-picker-select';
+import { BASE_URL_GET_ENUM } from '../model/Base_Model';
+import ActionType from '../redux/globalActionType';
+
+class ChangeProfil extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            full_name: '',
+            dob_day: '',
+            dob_month: '',
+            dob_year: '',
+            gender: [],
+            gender_selected: '',
+            email: '',
+            no_tlp: '',
+        }
+        console.log('PROPS : ' + JSON.stringify(props.navigation))
+    }
+
+    componentDidMount() {
+
+        Axios.get(BASE_URL_GET_ENUM).then(res => {
+            // console.log('ENUM :' + JSON.stringify(res.data.gender));
+            let gender = res.data.gender;
+            let gender_list = []
+
+
+            for (const gen in gender) {
+                if (gender.hasOwnProperty(gen)) {
+                    const label = gender[gen];
+                    const value = gen;
+                    gender_list.push({ label: label, value: value })
+                }
+            }
+
+            this.setState({
+                gender: gender_list,
+
+            })
+            console.log('STATE GENDER' + JSON.stringify(this.state.gender))
+            // this.state.gender.map()
+        })
+
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v1/member/get_profile', params).then(res => {
+            let data = res.data
+            this.setState({
+                full_name: data.name,
+                email: data.email,
+                dob_day: data.dob_day,
+                dob_month: data.dob_month,
+                dob_year: data.dob_year,
+                gender_selected: data.gender.toString()
+            })
+
+
+            console.log('AFTER CALL : ' + JSON.stringify(this.state.gender_selected))
+        })
+
+
+    }
+
+    saveData() {
+
+        let params1 = {
+            session_id: this.props.session_id,
+            name: this.state.full_name,
+            gender: this.state.gender_selected,
+            mobile_phone: this.state.no_tlp
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/set_profile', params1).then(res => {
+            this.props.navigation.goBack()
+            this.props.route.params.onChangeProfil({ example: 'wakwaw' })
+            console.log(JSON.stringify('A : ' + JSON.stringify(this.props.route.params)))
+        })
+
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={{ textAlign: "center", margin: 50, fontWeight: 'bold', fontSize: 25 }}> Change Profile </Text>
+                <View style={{ margin: 10, flex: 1, }}>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 1 }}>Name </Text>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, flex: 2 }}
+                            onChangeText={(full_name) => this.setState({ full_name })}
+                            value={this.state.full_name}
+                        />
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 1 }}>Date of {'\n'}Birth </Text>
+                        <Text style={{ fontSize: 15, margin: 5, borderWidth: 1, flex: 2, padding: 5 }}>{this.state.dob_day} - {this.state.dob_month} - {this.state.dob_year} </Text>
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <View style={{ flex: 1 }}>
+                            <Text style={{ fontSize: 20, margin: 5, flex: 1 }}>Gender </Text>
+                        </View>
+                        <View style={{ height: 50, flex: 1 }}>
+                            <RNPickerSelect
+                                value={this.state.gender_selected}
+                                // itemKey="1"
+                                placeholderTextColor='gray'
+                                onValueChange={(value) => this.setState({ gender_selected: value })}
+                                items={this.state.gender} />
+                        </View>
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 1 }}>Email </Text>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, flex: 2 }}
+                            onChangeText={(full_name) => this.setState({ full_name })}
+                            value={this.state.email}
+                        />
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 1 }}>Mobile phone </Text>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, flex: 2, margin: 10 }}
+                            onChangeText={(no_tlp) => this.setState({ no_tlp })}
+                            value={this.state.no_tlp}
+                        />
+                    </View>
+                    <View style={{ flexDirection: 'row', top: 0, margin: 10, }}>
+                        <View style={{ flex: 1, margin: 5 }}>
+                            <Button title="Save" onPress={() => this.saveData()}></Button>
+                        </View>
+                        <View style={{ flex: 1, margin: 5 }}>
+                            <Button title="Cancel"></Button>
+                        </View>
+                    </View>
+                </View>
+
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+
+    }
+})
+
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setChangeProfilProps: (changeProfilProps) => dispacth({
+            type: ActionType.SET_CHANGE_PROFIL,
+            data: {
+                full_name: changeProfilProps.full_name,
+                gender_display: changeProfilProps.gender_display,
+            }
+        }),
+    }
+}
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+        gender_display: state.gender_display,
+        full_name: state.full_name
+
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChangeProfil);
\ No newline at end of file

view/ConfirmMobile.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+
+export default class ConfirmMobile extends React.Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Confirm Mobile</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Token</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 50, borderWidth: 1, padding: 5, margin: 10 }} />
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Verify" onPress={() => this.submit()}></Button>
+                    </View>
+                    <View style={{ alignItems: 'center' }}>
+                        <Text style={{ color: 'red' }}>Send SMS again in 0:30 </Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    field_phone: {
+        flexDirection: 'row'
+    },
+
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file

view/Date.js

+//This is an example code to get DatePicker//
+import React, { useState, Component } from 'react';
+//import react in our code.
+import { View, StyleSheet, Platform, Button } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export default class MyDatePicker extends Component {
+    constructor(props) {
+        super(props);
+    }
+    
+    render() {
+        return (
+            <View>
+                <View style={styles.container}>
+
+                </View>
+            </View>
+            )
+        }
+    }
+    
+    
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: 50,
+            padding: 16,
+        },
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    //import all the components we are going to use.
+    //import DatePicker from the package we installed
+    
+    // function DatePicker() {
+    
+    //     const [date, setDate] = useState(new Date(1598051730000));
+    //     const [mode, setMode] = useState('date');
+    //     const [show, setShow] = useState(false);
+    
+    //     const onChange = (event, selectedDate) => {
+    //         const currentDate = selectedDate || date;
+    
+    //         setDate(currentDate);
+    //         setShow(Platform.OS === 'ios' ? true : false);
+    //     };
+    
+    //     const showMode = currentMode => {
+    //         setShow(true);
+    //         setMode(currentMode);
+    //     };
+    
+    //     const showDatepicker = () => {
+    //         showMode('date');
+    //     };
+    
+    //     const showTimepicker = () => {
+    //         showMode('time');
+    //     };
+    
+    //     return (
+    //         <View>
+    //             <View>
+    //                 <Button onPress={showDatepicker} title="Show date picker!" />
+    //             </View>
+    //             <View>
+    //                 <Button onPress={showTimepicker} title="Show time picker!" />
+    //             </View>
+    //             {show && (
+    //                 <DateTimePicker
+    //                     testID="dateTimePicker"
+    //                     timeZoneOffsetInMinutes={0}
+    //                     value={date}
+    //                     mode={mode}
+    //                     is24Hour={true}
+    //                     display="default"
+    //                     timeZoneOffsetInMinutes={0}
+    //                     onChange={onChange}
+    //                 />
+    //             )}
+    //         </View>
+    
+    //     );
+    // }

view/DeliveryAddrees.js

+import React from 'react';
+import { View, Text, StyleSheet, Button, FlatList } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+
+class DeliveryAddrees extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            data:[]
+        }
+    }
+
+    componentDidMount() {
+       this.getAddreess()
+       console.log(this.props) 
+    }
+
+    onChangeAddress = data => {
+        console.log('DATA FROM CHANGE PROFILE  ' + data);
+        this.getAddreess()
+    }
+
+    getAddreess(){
+        let params = {
+            session_id: this.props.session_id,
+        }
+        // console.log(params)
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_address', params).then(res => {
+            const dataAlamat = res.data.data;
+            let address = []
+            for (let i = 0; i < dataAlamat.length; i++) {
+                const element = dataAlamat[i];
+                address.push(element)
+            }
+
+            this.setState({
+                data: address
+            })
+
+
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(
+                '',
+                response.msg
+            )
+        })
+    }
+
+    addAdreess(){
+        this.props.navigation.navigate('Address Detail', { 'data': 'sample', onChangeAddress: this.onChangeAddress })
+    }
+
+    render() {
+
+        function Item({ name,description,address }) {
+            return (
+                <View style={styles.list_addrees}>
+                    <View style={{ margin: 5, }}>
+                    <Text style={{ fontWeight: 'bold', fontSize: 20 }}>{name}</Text> 
+                    </View>
+                    <Text style={{ margin: 5 }}>
+                        {address}
+                    </Text>
+                    <Text style={{ margin: 5 }}>
+                       Patokan : {description}
+                    </Text>
+                </View>
+            );
+        }
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Delivery Address</Text>
+                </View>
+                <View style={styles.body}>
+                    {/* <ScrollView> */}
+                    <View style={styles.btn_addreess}>
+                        <Button title="Tambah Alamat" onPress={() => this.addAdreess()}></Button>
+                    </View>
+
+                    <FlatList
+                        data={this.state.data}
+                        renderItem={({ item }) => <Item name={item.name} description = {item.description} address = {item.address} /> }
+                        keyExtractor={item => item.id}
+                    />
+                    {/* 
+                        <View style={styles.list_addrees}>
+                            <View style={{ margin: 5, }}>
+                                <Text style={{ fontWeight: 'bold', fontSize: 20 }}>Rumah</Text>
+                            </View>
+                            <Text style={{ margin: 5 }}>
+                                Perkantoran Grenvil Maisonette Blok FB/16,
+                                Tanjung Duren, Duri Kepa, Kebon Jeruk, RT.13/RW.9,
+                                Duri Kepa, DKI Jakarta, Kota Jakarta Barat,
+                                Daerah Khusus Ibukota Jakarta 11510
+                            </Text>
+                        </View> */}
+                    {/* </ScrollView> */}
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+    },
+
+    body: {
+        flex: 3,
+        marginRight: 20,
+        marginLeft: 20,
+        marginBottom: 20,
+        borderWidth: 1,
+    },
+
+    btn_addreess: {
+        margin: 20,
+    },
+
+    list_addrees: {
+        flex: 1,
+        margin: 20,
+
+        borderWidth: 1,
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+
+    }
+}
+
+export default connect(mapStateToProps)(DeliveryAddrees)
+

view/EmailConfirmation.js

+import * as React from 'react';
+import { Button, View, Text, StyleSheet, TextInput, Alert } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import Axios from 'axios';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import { BASE_URL_LOGIN } from '../model/Base_Model';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class EmailConfirmation extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            confirmation_number: "",
+            spinner: false
+        }
+    }
+
+    componentDidMount(){
+        console.log("SESSION   " + this.props.session_id)
+    }
+
+    handleSubmit() {
+        this.setState({
+            spinner: true,
+        })
+        console.log(this.props.isEmailverif)
+        if (this.props.isEmailverif === true) {
+            let pageProps = {
+                pageEmailConfirmation:false
+            }
+            this.props.setPage(pageProps)
+            console.log('hai ini gue kalau ada device yang sama!')
+            
+            let params = {
+                "session_id":this.props.session_id,
+                "email": this.props.email,
+                "password": this.props.password,
+                "fb_token": this.props.fb_token,
+                "device_id": this.props.device_id,
+                "os_name": this.props.os_name,
+                "os_version": this.props.os_version,
+                "app_version": 'uknown',
+                "verification_code": this.state.confirmation_number
+            }
+            Axios.post(BASE_URL_LOGIN, params).then(res => {
+                console.log('EMAIL CONFIRM : ' + JSON.stringify(res))
+                let emailConfirmProps = {
+                    isEmailverif:false
+                }
+                let loginProps = {
+                    email: this.props.email,
+                    password: this.props.password,
+                    session_id: res.data.session_id
+                }
+
+                console.log('LOGIN PROPS : ' + JSON.stringify(loginProps))
+
+                this.props.setLoginInfo(loginProps)
+                this.props.setEmailConfirm(emailConfirmProps)
+                this.setState({
+                    spinner: false,
+                })
+                this.props.navigation.reset({
+                    index: 0,
+                    routes: [
+                      {
+                        name: 'Home',
+                      },
+                    ],
+                  })
+            }).catch(error => {
+                let response = error.response.data;
+                Alert.alert(response.msg);
+                this.setState({
+                    spinner: false,
+                })
+            })
+
+        } else {
+
+            let pageProps = {
+                pageEmailConfirmation:false
+            }
+            this.props.setPage(pageProps)
+            let paramater = {
+                "email": this.props.email,
+                "confirmation_number": this.state.confirmation_number,
+            }
+            Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/auth/register_confirm', paramater).then(res => {
+                this.setState({
+                    spinner: false,
+                })
+                    // this.props.navigation.reset("Login");
+                   this.props.navigation.reset({
+                        index: 0,
+                        routes: [
+                          {
+                            name: 'Login',
+                          },
+                        ],
+                      })
+                      
+            }).catch(error => {
+                this.setState({
+                    spinner: false,
+                })
+                let response = error.response.data;
+                Alert.alert(response.msg);
+            })
+        }
+    }
+
+    handleCancel(){
+        let pageProps = {
+            pageEmailConfirmation:false
+        }
+        this.props.setPage(pageProps)
+        this.props.navigation.navigate('New Register');
+    }
+
+    handleResend() {
+        this.setState({
+            spinner: true,
+        })
+        let paramater = {
+            "email": this.props.email,
+            "registration_id": this.props.registration_id,
+        }
+        let pageProps = {
+            pageEmailConfirmation:false
+        }
+        this.props.setPage(pageProps)
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/auth/register_resend_email', paramater).then(res => {
+            this.setState({
+                spinner: false,
+            })
+            Alert.alert(
+                'Sukses',
+                'Email berhasil di kirimkan! '
+                
+            )
+        }).catch(error => {
+            
+            let response = error.response.data;
+            console.log(response);
+            this.setState({
+                spinner: false,
+            })
+            Alert.alert(response.msg)
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                 <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={{ margin: 10, top: 10 }}>
+                    <TextInput
+                        style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                        onChangeText={(confirmation_number) => this.setState({ confirmation_number })}
+                        value={this.state.confirmation_number}
+                    />
+                </View>
+                <View style={{ margin: 10 }}>
+                    <Button title="Submit" onPress={() => this.handleSubmit()} />
+                </View>
+                <View style={{ margin: 10 }}>
+                    <Button title="Cancel" onPress={() => this.handleCancel()} />
+                </View>
+                <View>
+                    <TouchableOpacity onPress={() => this.handleResend()}>
+                        <Text style={{ color: 'red', textAlign: 'center' }}>Resend email token</Text>
+                    </TouchableOpacity>
+                </View>
+                <View>
+                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Change Email')}>
+                        <Text style={{ color: 'red', textAlign: 'center' }}> Change email</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white'
+    }
+})
+
+const mapStateToProps = (state) => {
+    console.log('EMAIL CONFIRM : ' + JSON.stringify(state))
+    return {
+        isEmailverif: state.isEmailverif,
+        email: state.email,
+        session_id: state.session_id,
+        password: state.password,
+        fb_token: state.fb_token,
+        device_id: state.device_id,
+        os_version: state.os_version,
+        os_name: state.os_name,
+        app_version: state.app_version,
+        page : state.page,
+        registration_id: state.registration_id,
+        pageEmailConfirmation: state.pageEmailConfirmation
+    }
+}
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+
+        setEmailConfirm:(emailConfirmProps) => dispacth({
+            type: ActionType.SET_EMAIL_VERIFICATION,
+            data:{
+                isEmailverif: emailConfirmProps.isEmailverif,
+            }
+        }),
+        setProses: (prosesProps) => dispacth({
+            type: ActionType.SET_PROSES,
+            data: {
+                proses: prosesProps.proses 
+            }
+        }),
+        setLoginInfo: (loginProps) => dispacth({
+            type: ActionType.SET_LOGIN_INFO,
+            data: {
+                email: loginProps.email,
+                password: loginProps.password,
+                session_id: loginProps.session_id
+            }
+        }),
+        setPage: (pageProps) => dispacth({
+            type: ActionType.SET_PAGE,
+            data: {
+                pageEmailConfirmation: pageProps.pageEmailConfirmation
+            }
+        }),
+    }
+}
+
+
+export default connect(mapStateToProps,mapDispatchToProps)(EmailConfirmation);
\ No newline at end of file

view/Home.js

+// import { BASE_URL_GET_CARAOUSEL, BASE_URL_CHANGE_PASSWORD } from '../model/Base_Model';
+// import Swiper from 'react-native-swiper';
+import * as React from 'react';
+import { View, Text, StyleSheet, StatusBar, ScrollView, TouchableOpacity, Alert ,Button} from 'react-native';
+import { SliderBox } from "react-native-image-slider-box";
+import { IndicatorViewPager, PagerDotIndicator, PagerTabIndicator } from '@shankarmorwal/rn-viewpager';
+import { Card } from 'react-native-shadow-cards';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+import Account from './Account';
+import TopUpInfo from './TopUpInfo';
+// import SmsConfirmation from './SmsConfirmation';
+import i18n from 'i18n-js';
+
+class Home extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data_baner: [],
+      images: [],
+      balance:"",
+      point:"",
+      account_number:""
+    }
+  }
+
+  componentDidMount() {
+    this._renderCarousell()
+    this._account()
+    console.log("INI SESSION"+this.props.session_id)
+  }
+
+  _renderCarousell() {
+
+    Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/list/promotions-carousel').then(respon => {
+      // console.log(respon);
+      const dataCarousell = respon.data.contents;
+      // console.log(dataCarousell);
+      // console.log(dataCarousell);
+      let imageLink = []
+
+      for (let i = 0; i < dataCarousell.length; i++) {
+        const element = dataCarousell[i];
+        imageLink.push(element.title_thumb)
+      }
+      this.setState({
+        images: imageLink
+      })
+    })
+  }
+
+  _account(){
+      let params = {
+          session_id: this.props.session_id
+      }
+
+      Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+          console.log('ini res ' + JSON.stringify(res.data))
+          const dataCard = res.data
+          let point = dataCard.kaspro_point
+          let balance = dataCard.kaspro_balance
+          let expire = dataCard.expire_date
+          let account_number = dataCard.kaspro_account_number
+
+          this.setState({
+              point: point,
+              balance: balance,
+              account_number: account_number,
+              expire_date:expire,
+          })
+
+          console.log(this.state.expire_date)
+      }).catch(error => {
+          console.log('ini error ' + error)
+      })
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ScrollView>
+          <View style={{ flex: 1 }}>
+            <SliderBox
+              images={this.state.images}
+              // onCurrentImagePressed={index =>console.warn(`image ${index} pressed`)}
+              autoplay
+              circleLoop
+              dotColor='black'
+              inactiveDotColor='white'
+              sliderBoxHeight={300}
+              // currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
+              paginationBoxVerticalPadding={20}
+              resizeMethod={'resize'}
+              resizeMode={'stretch'}
+              paginationBoxStyle={{
+                position: "absolute",
+                bottom: 0,
+                padding: 0,
+                alignItems: 'center',
+                alignSelf: 'center',
+                justifyContent: 'center',
+                paddingVertical: 10,
+                // backgroundColor : ''
+              }}
+              dotStyle={{
+                width: 10,
+                height: 10,
+                borderRadius: 5,
+                marginHorizontal: 0,
+                padding: 0,
+                margin: 0,
+                // backgroundColor: ''
+              }}
+              ImageComponentStyle={{
+                // borderRadius: 5,
+                width: '100%',
+                // marginTop : 5
+              }}
+              imageLoadingColor='#c7c7c7'
+            />
+          </View>
+          <View style={styles.content}>
+            <View style={styles.card}>
+              <Card>
+                <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
+                  <TouchableOpacity style={styles.buttonDelivery} onPress={() => this.props.navigation.navigate('Delivery Address')}>
+                    <Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>{i18n.t('delivery')}</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={styles.buttonPickup} onPress={() => this.props.navigation.navigate('Pickup Name')}>
+                    <Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
+                  </TouchableOpacity>
+                </View>
+                <Text style={{ textAlign: 'center', fontSize: 12, }}>
+                  {i18n.t('orderInfo')}
+                </Text>
+                <Text style={{ textAlign: "center", fontSize: 12, top: 5 }}>
+                  Excelso Senayan City
+            </Text>
+                <TouchableOpacity style={styles.submitOrder} activeOpacity={.5} onPress={this.onPress}>
+                  <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>{i18n.t('orderNow')}</Text>
+                </TouchableOpacity>
+              </Card>
+              {
+                this.state.account_number === "" ? (
+                  <View style={styles.card}>
+                  
+                <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+                  <Text style={{textAlign:"center"} }> Anda belum aktivasi kartu</Text>
+                  <Text>
+                  {/* {i18n.t('yourCardNumber')} | {this.state.expire_date}{'\n'} */}
+                  </Text>
+                  <Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
+                    {/* {this.state.account_number} */}
+                  </Text>
+                  <View style={styles.line}></View>
+                  <Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
+                  {/* {i18n.t('balance')} {this.state.balance}{'\n'} */}
+                  </Text>
+                  <View style={styles.line}></View>
+                  <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
+                  {/* {i18n.t('point')} {this.state.point} */}
+                  </Text>
+                </Card>
+              </View>
+                ):(
+
+              <View style={styles.card}>
+                <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+                  <Text>
+                  {i18n.t('yourCardNumber')} | {this.state.expire_date}{'\n'}
+                  </Text>
+                  <Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
+                    {this.state.account_number}
+                  </Text>
+                  <View style={styles.line}></View>
+                  <Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
+                  {i18n.t('balance')} {this.state.balance}{'\n'}
+                  </Text>
+                  <View style={styles.line}></View>
+                  <Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
+                  {i18n.t('point')} {this.state.point}
+                  </Text>
+                </Card>
+                {/* <Button title="upgrade premium" onPress={()=>this.props.navigation.navigate("Upgrade Premium")}></Button> */}
+              </View>
+                )
+              }
+              <View style={{height:60}}></View>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+
+  content: {
+    flex: 1,
+  },
+  card: {
+    top: 20,
+    alignSelf: 'center',
+    flex: 1
+  },
+  buttonDelivery: {
+    marginTop: 10,
+    paddingTop: 15,
+    paddingBottom: 15,
+    marginRight: 0,
+    marginLeft: 0,
+    backgroundColor: '#cce8f0',
+    borderRadius: 10,
+    borderWidth: 0,
+    borderColor: '#fff',
+    width: '50%',
+    top: -20,
+  },
+  buttonPickup: {
+    marginTop: 10,
+    paddingTop: 15,
+    paddingBottom: 15,
+    marginRight: 0,
+    marginLeft: -30,
+    backgroundColor: '#354175',
+    borderRadius: 10,
+    borderWidth: 0,
+    borderColor: '#fff',
+    width: '40%',
+    top: -20,
+  },
+
+  submitOrder: {
+    margin: 10,
+    paddingTop: 15,
+    paddingBottom: 5,
+    backgroundColor: '#c9af6d',
+    borderRadius: 20,
+    borderWidth: 0,
+    borderColor: '#fff',
+  },
+
+  line: {
+    borderBottomColor: '#c9af6d',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    alignSelf: 'stretch',
+    width: "100%",
+    height: 10,
+    bottom: 5,
+  },
+})
+
+const mapStateToProps = (state) => {
+  return {
+
+    // login
+    email: state.email,
+    session_id: state.session_id,
+    password: state.password,
+    fb_token: state.fb_token,
+    device_id: state.device_id,
+    os_version: state.os_version,
+    os_name: state.os_name,
+    app_version: state.app_version,
+    isEmailverif: state.isEmailverif,
+    proses: state.proses,
+    pageEmailConfirmation: state.pageEmailConfirmation,
+    language: state.language,
+  }
+}
+
+
+
+export default connect(mapStateToProps)(Home)
\ No newline at end of file

view/Item.js

+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput } from 'react-native';
+
+export default class Item extends React.Component {
+    render() {
+        const { item } = this.props
+        // console.log('ini props nya item : ' + JSON.stringify(item))
+        const { description, name, image, price, qty, } = item
+        return (
+            <View style={{ flex: 1, margin: 10 }}>
+                <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.category.name}</Text>
+                <View style={{ flexDirection: 'row' }}>
+                    <View >
+                        <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
+                    </View>
+                    <View >
+                        <Text style={{ fontSize: 20, margin: 5, marginRight: 10, fontWeight: 'bold' }}>{item.name}</Text>
+                        <Text style={{ fontSize: 15, margin: 5, marginRight: 10 }}>Rp. {item.price}</Text>
+                        <View style={{ flexDirection: 'row', flex: 1 }}>
+                            <View style={styles.shadowEdit}></View>
+                            <View style={styles.shadowAdd}>
+                                <TouchableOpacity>
+                                    <Text style={{ fontSize: 20, margin: 2 }}> - </Text>
+                                </TouchableOpacity>
+                                <TouchableOpacity onPress={() => this.props.handleRemove()}>
+                                    <TextInput
+                                        style={{ height: 25, padding: 2,textAlign:'center',margin:2 }}
+                                        autoCapitalize="none">
+                                            {item.qty}
+                                        </TextInput>
+                                </TouchableOpacity>
+                                <TouchableOpacity onPress={() => this.props.handleAdd()}>
+                                    <Text style={{ fontSize: 20, margin: 2 }}> + </Text>
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    shadowEdit: {
+        height: 30,
+        width: 25,
+        borderWidth: 1,
+        borderRadius: 2,
+        borderColor: '#ddd',
+        borderBottomWidth: 0,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.8,
+        shadowRadius: 2,
+        elevation: 1,
+        marginLeft: 5,
+        marginRight: 5,
+        marginTop: 10,
+    },
+    shadowAdd: {
+        height: 30,
+        width: 75,
+        borderWidth: 1,
+        borderRadius: 2,
+        borderColor: '#ddd',
+        borderBottomWidth: 0,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.8,
+        shadowRadius: 2,
+        elevation: 1,
+        marginLeft: 5,
+        marginRight: 5,
+        marginTop: 10,
+        flexDirection: 'row'
+    },
+    shadowMin: {
+        height: 20,
+        width: 20,
+        borderWidth: 1,
+        borderRadius: 2,
+        borderColor: '#ddd',
+        borderBottomWidth: 0,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.8,
+        shadowRadius: 2,
+        elevation: 1,
+        marginLeft: 5,
+        marginRight: 5,
+        marginTop: 10,
+    }
+})

view/Login.js

+import * as React from 'react';
+import { Button, View, Text, TextInput, StyleSheet, Alert, Platform } from 'react-native';
+import Axios from 'axios';
+import Constants from 'expo-constants';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import { BASE_URL_LOGIN } from '../model/Base_Model';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Notifications } from 'expo';
+import i18n from 'i18n-js';
+import { StackActions } from '@react-navigation/native';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class Login extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = ({
+            email: "",
+            password: "",
+            fb_token: "",
+            device_id: "",
+            os_version: "",
+            os_name: "",
+            app_version: "",
+            device_id: "",
+            session_id: "",
+            language: 'id',
+            spinner: false,
+        })
+    }
+
+    componentDidMount(){
+        console.log(this.props.language)
+    }
+
+    async handleLoggin() {
+        if (/\s/.test(this.state.email)) {
+            Alert.alert('Email tidak boleh mengandung spasi')
+        } else {
+        this.setState({
+            spinner: true,
+        })
+        try {
+            let device_id = Constants.deviceId
+            let os_name = Constants.platform
+            // let fb_token = await Notifications.getExpoPushTokenAsync();
+            let os_version = Platform.Version
+
+            if (this.props.device_id) {
+                this.setState({
+                    device_id: this.props.device_id,
+                    os_name: os_name,
+                    fb_token: fb_token,
+                    os_version: os_version,
+
+                })
+            } else {
+                let deviceInfoProps = {
+                    device_id: device_id,
+                    os_name: os_name,
+                    fb_token: fb_token,
+                    os_version: os_version,
+                }
+                console.log(deviceInfoProps);
+                this.props.setDeviceInfo(deviceInfoProps)
+            }
+
+        } catch (error) {
+
+            let device_id = Constants.deviceId
+            let os_name = Constants.platform
+            let fb_token = await Notifications.getExpoPushTokenAsync();
+            let os_version = Platform.Version
+
+            if (this.props.device_id) {
+                this.setState({
+                    device_id: this.props.device_id,
+                    os_name: os_name,
+                    fb_token: fb_token,
+                    os_version: os_version,
+
+                })
+            } else {
+                let deviceInfoProps = {
+                    device_id: device_id,
+                    os_name: os_name,
+                    os_version: os_version,
+                    fb_token: fb_token,
+
+                }
+                this.props.setDeviceInfo(deviceInfoProps)
+            }
+
+            this.state.os_name = '';
+            this.state.os_version = '';
+            this.state.fb_token = '';
+        }
+
+        if (this.props.app_version) {
+            this.setState({
+                app_version: this.props.app_version
+            })
+        } else {
+            this.setState({
+                app_version: 'Unknown'
+            })
+        }
+
+        //get request
+        let params = {
+            "email": this.state.email,
+            "password": this.state.password,
+            "fb_token": this.state.fb_token,
+            "device_id": this.state.device_id,
+            "os_name": this.state.os_name,
+            "os_version": this.state.os_version,
+            "app_version": this.state.app_version,
+        }
+        console.log(params)
+        Axios.post(BASE_URL_LOGIN, params).then(res => {
+
+            const navigation = this.props.navigation
+
+            let loginProps = {
+                email: this.state.email,
+                password: this.state.password,
+                session_id: res.data.session_id
+            }
+
+            let prosesProps = {
+                proses:'Register'
+            }
+
+            this.props.setProses(prosesProps);
+            this.props.setLoginInfo(loginProps);
+            this.setState({
+                spinner: false,
+            })
+           
+                navigation.reset({
+                  index: 0,
+                  routes: [
+                    {
+                      name: 'Home',
+                      params: { someParam: 'Param1' },
+                    },
+                  ],
+                })
+              
+            // this.props.navigation.navigate('Home');
+
+        }).catch(error => {
+
+            let response = error.response.data;
+            if (response.code === "NEED_VERIFICATION") {
+
+                let loginProps = {
+                    email: this.state.email,
+                    password: this.state.password,  
+                }
+                let emailConfirmProps = {
+                    isEmailverif: true
+                }
+                let pageProps = {
+                    pageEmailConfirmation:true
+                }
+
+                this.props.setLoginInfo(loginProps)
+                this.props.setEmailConfirm(emailConfirmProps)
+                this.props.setPage(pageProps)
+                this.setState({
+                    spinner: false,
+                })
+                this.props.navigation.navigate('Email Confirmation')
+
+            } else {
+                let response = error.response.data;
+                Alert.alert(response.msg);
+                this.setState({
+                    spinner: false,
+                })
+            }
+        })
+    }
+}
+
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={styles.form}>
+                    <View style={{ marginRight: 10, marginLeft: 10, }}>
+                        <Text style={{ top: 5 }}>Email</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                            onChangeText={(email) => this.setState({ email })}
+                            autoCapitalize="none"
+                            value={this.state.email}
+                            keyboardType='email-address'
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>{i18n.t('password')}</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5 }}
+                            onChangeText={password => this.setState({ password })}
+                            value={this.state.password}
+                            secureTextEntry={true}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Button
+                            title={i18n.t('login')}
+                            onPress={() => this.handleLoggin()}
+                        />
+                    </View>
+                </View>
+                <View style={styles.footer}>
+                    <View style={styles.container_register}>
+                        <View style={{ flex: 1 }}>
+                            <TouchableOpacity onPress={() => this.props.navigation.navigate('New Register')}>
+                                <Text style={{ fontSize: 20 }}>{i18n.t('register')}</Text>
+                            </TouchableOpacity>
+                        </View>
+                        <View style={{ flex: 1, }}>
+                            <TouchableOpacity onPress={() => this.props.navigation.navigate('Reset Password')}>
+                                <Text style={{ fontSize: 20, textAlign: 'right' }}>{i18n.t('forgotPassword')}</Text>
+                            </TouchableOpacity>
+                        </View>
+
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    form: {
+
+        flex: 6,
+    },
+    footer: {
+        flex: 1,
+    },
+    container_register: {
+        height: 50,
+        flexDirection: 'row',
+        margin: 10
+    }
+})
+
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setDeviceInfo: (deviceInfoProps) => dispacth({
+            type: ActionType.SET_DEVICE_INFO,
+            data: {
+
+                fb_token: deviceInfoProps.fb_token,
+                device_id: deviceInfoProps.device_id,
+                os_version: deviceInfoProps.os_version,
+                os_name: deviceInfoProps.os_name,
+                app_version: deviceInfoProps.app_version,
+
+            }
+        }),
+        setLoginInfo: (loginProps) => dispacth({
+            type: ActionType.SET_LOGIN_INFO,
+            data: {
+                email: loginProps.email,
+                password: loginProps.password,
+                // isLogin: loginProps.isLogin,
+                session_id: loginProps.session_id
+            }
+        }),
+        setEmailConfirm: (emailConfirmProps) => dispacth({
+            type: ActionType.SET_EMAIL_VERIFICATION,
+            data: {
+                isEmailverif: emailConfirmProps.isEmailverif,
+            }
+        }),
+        setProses: (prosesProps) => dispacth({
+            type: ActionType.SET_PROSES,
+            data: {
+                proses: prosesProps.proses
+            }
+        }),
+        setPage: (pageProps) => dispacth({
+            type: ActionType.SET_PAGE,
+            data: {
+                pageEmailConfirmation: pageProps.pageEmailConfirmation
+            }
+        }),
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+
+        email: state.email,
+        password: state.password,
+        fb_token: state.fb_token,
+        device_id: state.device_id,
+        os_version: state.os_version,
+        os_name: state.os_name,
+        app_version: state.app_version,
+        language: state.language
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);
\ No newline at end of file

view/MenuConfirmation.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+
+export default class MenuConfirmation extends React.Component {
+    submit() {
+        console.log('hai');
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Menu Confirmation</Text>
+                </View>
+                <View style={styles.body}>
+                    <View style={styles.images}>
+
+                    </View>
+                    <View style={styles.content}>
+                        <Text style={{ margin: 20, textAlign: 'justify' }}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </Text>
+                        <Text style={{ textAlign: 'center', fontWeight: 'bold', fontSize: 20 }}>RP.50000</Text>
+                        <View style={{ margin: 20 }}>
+                            <Button title="Tambah" />
+                        </View>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+    },
+    images: {
+        margin: 10,
+        flex: 2,
+        backgroundColor: 'green'
+    },
+    content: {
+        flex: 2,
+    },
+    body: {
+        flex: 3,
+    },
+
+})
\ No newline at end of file

view/MenuDetail.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Image } from 'react-native';
+import Axios from 'axios';
+
+export default function MenuDetail({ route, navigation }) {
+    const { desc } = route.params;
+    const { nama } = route.params;
+    const { Foto } = route.params;
+    return (
+        <View style={styles.container}>
+            <View style={styles.header}>
+                <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>{nama}</Text>
+            </View>
+            <View style={styles.body}>
+                {/* <View style={styles.images}> */}
+                <Image style={{ height: '50%', width: '100%' }}
+                    source={{
+                        uri: Foto
+                    }}
+                />
+                {/* </View> */}
+                <View style={styles.content}>
+                    <Text style={{ margin: 20, textAlign: 'justify' }}>
+                        {desc}
+                    </Text>
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+    },
+    images: {
+        margin: 10,
+        flex: 2,
+
+        justifyContent: 'center',
+    },
+    content: {
+        flex: 2,
+    },
+    body: {
+        flex: 3,
+    },
+
+})
+
+
+
+

view/MenuSelection.js

+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, FlatList, Button, Alert, StatusBar } from 'react-native';
+import Axios from 'axios';
+import Item from './Item';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import CurrencyFormat from 'react-currency-format';
+import { Ionicons, MaterialCommunityIcons, MaterialIcons, AntDesign } from '@expo/vector-icons';
+// import { range } from 'lodash';
+import _ from 'lodash';
+
+class MenuSelection extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      listCategory: [],
+      listMenu: [],
+      list_orders: [],
+      outlet_id: '',
+      qty: 1,
+      order_list:[],
+      list_cart: [],
+    }
+  }
+  componentDidMount() {
+    this.getMenuList()
+    // console.log("INI TOTAL ORDER : " + this.props.orders)
+    // console.log("INI TOTAL QTY :" + this.props.quantity)
+    console.log("INI ORDERAN NYA  :" + JSON.stringify(this.props.cart_shop))
+  }
+
+  getMenuList() {
+    let params = {
+
+      outlet_id: "dec1abbb-95d0-46ae-a6cd-2bf306590f15"
+    }
+    Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/menu/get_list', params).then(res => {
+      let data = res.data.data
+      this.setState({
+        listCategory: data.category,
+        listMenu: data.menu
+      })
+      this.state.listMenu.map((i) => (
+        i.qty = 0
+      ))
+    }).catch(error => {
+      let response = error.response.data;
+    })
+  }
+  renderTabBar = ({ item }) => {
+    return (
+      <View style={{ margin: 10 }}>
+        <ScrollView horizontal={true} ref={'scrollview'}>
+          <TouchableOpacity onPress={() => this.scroll(item)}>
+            <Image style={{ height: 50, width: 50, borderRadius: 25 }} source={{ uri: item.image }} />
+            <Text>{item.name}</Text>
+          </TouchableOpacity>
+        </ScrollView>
+      </View>
+    )
+  }
+  scroll(item) {
+    this.refs._scrollView.scrollTo(0);
+  }
+
+  refresh() {
+
+    this.setState({ isFetching: true }, function () { this.getMenuList() });
+  }
+
+  handleRemove(item, index) {
+    const listMenu = [...this.state.listMenu]
+    if (listMenu[index].qty !== 0) {
+      listMenu[index].qty -= 1
+      this.setState({
+        listMenu
+      })
+    }
+
+  }
+
+  handleAdd(item, index) {
+   
+    // const listMenu = [...this.state.listMenu]
+    // listMenu[index].qty += 1
+    const order = {
+      id: item.id,
+      name: item.name,
+      price: item.price,
+      quantity: 1
+    }
+    this.state.list_orders.push(order);
+    this.setState({
+      listMenu
+    })
+
+    let InsertCart = {
+      cart_shop: this.state.list_orders
+    }
+    this.props.setCartInsert(InsertCart)
+  }
+
+
+  render() {
+    const { list_orders } = this.state;
+    let totalQuantity = 0;
+    let totalPrice = 0;
+
+    list_orders.forEach((item) => {
+      totalQuantity += item.qty;
+      totalPrice += item.qty * item.price;
+    })
+
+    return (
+      <View style={styles.container}>
+        <StatusBar hidden={true} />
+        <View style={{ flex: 0.7, height: 90, flexDirection: 'row', borderWidth: 1, }}>
+          <FlatList style={{ flexDirection: 'row' }}
+            data={this.state.listCategory}
+            renderItem={this.renderTabBar}
+            keyExtractor={item => item.id}
+            numColumns={5}
+          />
+        </View>
+        <View style={{ flex: 3 }}>
+          <FlatList
+            data={this.state.listMenu}
+            renderItem={({ item, index }) => (
+              <Item navigation={this.props.navigation}
+                item={item}
+                handleAdd={() => this.handleAdd(item, index)}
+                handleRemove={() => this.handleRemove(item, index)}
+                refreshing={this.state.isFetching}
+              />
+            )}
+            keyExtractor={item => item.id}
+          />
+        </View>
+        <View style={styles.shadow}>
+          <View style={{ flexDirection: 'row', }}>
+            <Text style={{ fontSize: 12, margin: 10 }}> Price Estimation / Item {this.state.qty}  </Text>
+            <Text style={{ fontSize: 20, margin: 10, marginBottom: 10 }}> Rp. {totalPrice}</Text>
+          </View>
+          <View>
+            <Button title="VIEW CART" onPress={() => this.props.navigation.navigate('Shopping Cart')}></Button>
+          </View>
+          <View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  shadow: {
+    borderWidth: 1,
+    borderRadius: 2,
+    borderColor: '#ddd',
+    borderBottomWidth: 0,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 10,
+    shadowRadius: 5,
+    elevation: 1,
+    marginTop: 10,
+    flex: 0.8,
+    height: 80,
+  }
+})
+
+const mapStateToProps = (state) => {
+  console.log(state)
+  return {
+    session_id: state.session_id,
+    outlet_id: state.outlet_id,
+    qty: state.qty,
+    totalOrder: state.totalOrder,
+    totalQty: state.totalQty,
+    quantity: state.quantity,
+    orders: state.orders,
+    cart_shop: state.cart_shop
+
+  }
+}
+
+const mapDispatchToProps = (dispacth) => {
+  return {
+    setCartInsert: (InsertCart) => dispacth({
+      type: ActionType.SET_CHANGE_SHOP,
+      data: {
+        cart_shop: InsertCart.cart_shop
+      }
+    }),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MenuSelection)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

view/NewPassword.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button,Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import {  BASE_URL_NEW_PASSWORD } from '../model/Base_Model'
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class NewPassword extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            confirmation_number: '',
+            email: this.props.email,
+            password: this.props.password,
+            password_confirmation: '',
+            spinner: false,
+        }
+    }
+
+    componentDidMount(){
+        console.log(this.props)
+    }
+
+    validation(){
+        this.setState({
+            spinner: true,
+        })
+        if (this.state.password !== this.state.password_confirmation) {
+            this.setState({
+                spinner: false,
+            })
+            Alert.alert(
+                '',
+                'Password harus sama!'
+                ,
+            )
+            
+        }else{
+            this.handleResetPassword();
+        }
+    }
+
+    handleResetPassword() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            'confirmation_number': this.state.confirmation_number,
+            'email': this.state.email,
+            'password': this.state.password,
+            'password_confirmation': this.state.password_confirmation
+        }
+        console.log(params);
+        Axios.post(BASE_URL_NEW_PASSWORD,params).then(res => {
+            this.setState({
+                spinner: false,
+            })
+                this.props.navigation.navigate('Login')
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                 <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                {/* <Text>{this.state.email}</Text> */}
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>New Password</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_token}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Token</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(confirmation_number) => this.setState({ confirmation_number })}
+                                value={this.state.confirmation_number} />
+                        </View>
+                    </View>
+                    <View style={styles.field_new_password}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>New Password</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(password) => this.setState({ password })}
+                                value={this.state.password}  
+                                secureTextEntry={true}/>
+                        </View>
+                    </View>
+                    <View style={styles.field_repeat_password}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Repeat Password</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(password_confirmation) => this.setState({ password_confirmation })}
+                                value={this.state.password_confirmation} 
+                                secureTextEntry={true}/>
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Submit" onPress={() => this.validation()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_token: {
+        flexDirection: 'row'
+    },
+
+    field_new_password: {
+        flexDirection: 'row'
+    },
+
+    field_repeat_password: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
+
+const mapStateToProps = (state) => { console.log(JSON.stringify(state))
+    return {
+        email: state.email
+    }
+}
+
+export default connect(mapStateToProps)(NewPassword);
\ No newline at end of file

view/New_Register.js

+import React from 'react';
+import { StyleSheet, View, Text, TextInput, Button, StatusBar, Picker, Alert } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import Axios from 'axios';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import { BASE_URL_GET_ENUM, BASE_URL_REGISTER } from '../model/Base_Model';
+import i18n from 'i18n-js';
+import Spinner from 'react-native-loading-spinner-overlay';
+// import { connect } from 'react-redux';
+
+
+var date = [
+    "Pilih", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21",
+    "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"
+]
+var month = [
+    "Pilih", "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September",
+    "Oktober", "November", "Desember"
+]
+
+var year = [
+    "Pilih", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971",
+    "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987",
+    "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004",
+    "2005", "2006", "2007"
+]
+
+class NewRegister extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = ({
+            email: "",
+            password: "",
+            full_name: "",
+            gender: "",
+            confirm_pass: "",
+            date: [],
+            month: [],
+            year: [],
+            dob_year: "",
+            dob_month: "",
+            dob_day: "",
+            list_gender: [],
+            list_domicilie: [],
+            list_profesion: [],
+            list_dob: [],
+            selected_item: [],
+            language: 'id',
+            spinner: false,
+        })
+    }
+
+    componentDidMount() {
+        this.load_data();
+    }
+
+    load_data() {
+        return Axios.get(BASE_URL_GET_ENUM).then(res => {
+            // console.log('ini res enum nya : ' + JSON.stringify(res));
+            const data_enum = res.data;
+            const list_gender = data_enum.gender
+            const list_profesion = data_enum.profession
+            const list_domicilie = data_enum.domicile
+            this.setState({
+                list_gender: list_gender,
+                list_profesion: list_profesion,
+                list_domicilie: list_domicilie,
+            })
+        })
+    }
+
+    validate() {
+        if (this.state.email === "") {
+            Alert.alert(
+                '',
+                'Email harus di isi!'
+                ,
+            )
+        } else if (this.state.password === "") {
+            Alert.alert(
+                '',
+                'Password harus di isi!'
+                ,
+            )
+        } else if (this.state.confirm_pass === "") {
+            Alert.alert(
+                '',
+                'Konfirmasi password harus di isi!'
+                ,
+            )
+        } else if (this.state.confirm_pass !== this.state.password) {
+            Alert.alert(
+                '',
+                'Password harus sama!'
+                ,
+            )
+        }
+        else if (this.state.full_name === "") {
+            Alert.alert(
+                '',
+                'Nama harus di isi!'
+                ,
+            )
+        } else if (this.state.dob_day === "") {
+            Alert.alert(
+                '',
+                'Hari Lahir harus di isi!'
+                ,
+            )
+        }
+        else if (this.state.dob_day === "Pilih") {
+            Alert.alert(
+                '',
+                'Hari Lahir harus di isi!'
+                ,
+            )
+        } else if (this.state.dob_month === "") {
+            Alert.alert(
+                '',
+                'Bulan lahir harus di isi!'
+                ,
+            )
+        } else if (this.state.dob_month === "Pilih") {
+            Alert.alert(
+                '',
+                'Bulan Lahir harus di isi!'
+                ,
+            )
+        } else if (this.state.dob_year === "") {
+            Alert.alert(
+                '',
+                'Tahun lahir harus di isi!'
+                ,
+            )
+        } else if (this.state.dob_year === "Pilih") {
+            Alert.alert(
+                '',
+                'Tahun Lahir harus di isi!'
+                ,
+            )
+        } else if (this.state.gender === "") {
+            Alert.alert(
+                '',
+                'Gender harus di isi!'
+                ,
+            )
+        } else if (this.state.gender === "Pilih") {
+            Alert.alert(
+                '',
+                'Gender  harus di isi!'
+                ,
+            )
+        } else {
+            this.handleReg()
+        }
+    }
+
+    handleReg() {
+        this.setState({
+            spinner: true,
+        })
+        let parameter = {
+            "email": this.state.email,
+            "password": this.state.password,
+            "name": this.state.full_name,
+            "gender": this.state.gender,
+            "dob_year": this.state.dob_year.toString(),
+            "dob_month": this.state.dob_month.toString(),
+            "dob_day": this.state.dob_day.toString(),
+            // "confirmation_number": this.state.confirmation_number,
+            // "mobile_phone": this.state.no_hp,
+            // "profession": this.state.profession,
+            // "domicile": this.state.domicilie,
+        }
+
+        console.log(parameter);
+        Axios.post(BASE_URL_REGISTER, parameter).then(res => {
+            console.log(res);
+            let registerProps = {
+                email: this.state.email,
+                full_name: this.state.full_name,
+                gender: this.state.gender,
+                dob_day: this.state.dob_day,
+                dob_month: this.state.dob_month,
+                dob_year: this.state.dob_year,
+                password: this.state.password,
+                registration_id: res.data.id
+            }
+            let prosesProps = {
+                proses: 'Register'
+            }
+            let pageProps = {
+                pageEmailConfirmation: true
+            }
+            let emailConfirmProps = {
+                isEmailverif: false
+            }
+            this.props.setPage(pageProps)
+            this.props.setEmailConfirm(emailConfirmProps)
+            this.props.setProses(prosesProps);
+            this.props.setRegistration(registerProps);
+            Alert.alert(
+                '',
+                'Email terkirim, mohon dicek'
+                    ,
+            )
+            this.setState({
+                spinner: false,
+            })
+
+            this.props.navigation.navigate('Email Confirmation')
+
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            console.log(JSON.stringify(error.response));
+            let response = error.response.data;
+            Alert.alert(
+                '',
+                response.msg,
+                [
+                    { text: 'OK' }
+                ]
+            )
+        })
+
+    }
+    render() {
+        return (
+            <View style={styles.container}>
+                <ScrollView>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={styles.header}>
+                    <StatusBar barStyle='dark-content' />
+                    <Text style={styles.titleText}>{i18n.t('register')}</Text>
+                </View>
+                <View style={styles.body}>
+
+                    <View style={styles.itemsRow}>
+                        <View style={styles.items1}>
+                            <Text>Email</Text>
+                        </View>
+                        <View style={styles.items2}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
+                                onChangeText={(email) => this.setState({ email })}
+                                value={this.state.email}
+                                keyboardType='email-address'
+                                autoCapitalize="none"
+                            // autoCompleteType="email"
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.itemsRow}>
+                        <View style={styles.items1}>
+                            <Text>{i18n.t('password')}</Text>
+                        </View>
+                        <View style={styles.items2}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
+                                onChangeText={(password) => this.setState({ password })}
+                                value={this.state.password}
+                                secureTextEntry={true}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.itemsRow}>
+                        <View style={styles.items1}>
+                            <Text>{i18n.t('password2')}</Text>
+                        </View>
+                        <View style={styles.items2}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
+                                onChangeText={(confirm_pass) => this.setState({ confirm_pass })}
+                                value={this.state.confirm_pass}
+                                secureTextEntry={true}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.itemsRow}>
+                        <View style={styles.items1}>
+                            <Text>{i18n.t('name')}</Text>
+                        </View>
+                        <View style={styles.items2}>
+                            <TextInput
+                                style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
+                                onChangeText={(full_name) => this.setState({ full_name })}
+                                value={this.state.full_name}
+                            />
+                        </View>
+                    </View>
+                    <View style={styles.itemsRow}>
+                        <View style={styles.items1}>
+                            <Text>{i18n.t('dob')}</Text>
+                        </View>
+
+                        <View style={styles.itemPicker}>
+
+                            <View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}>
+                                <Picker
+                                    mode="dropdown"
+                                    selectedValue={this.state.dob_day}
+                                    style={{ height: 35, width: 100 }}
+                                    onValueChange={(itemValue, itemIndex) => this.setState({ dob_day: itemValue })}>
+                                    {date.map((itemValue, itemIndex) => {
+                                        return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
+                                    })}
+
+                                </Picker>
+                            </View>
+                            <View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}>
+
+                                <Picker
+                                    mode="dropdown"
+                                    selectedValue={this.state.dob_month}
+                                    style={{ height: 35, width: 100 }}
+                                    onValueChange={(itemValue, itemIndex) =>
+                                        this.setState({ dob_month: itemValue })
+                                    }>
+                                    {month.map((itemValue, itemIndex) => {
+                                        return (<Picker.Item label={itemValue} value={itemIndex} key={itemIndex} />)
+                                    })}
+                                </Picker>
+                            </View>
+                            <View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1, borderRightWidth: 1 }}>
+                                <Picker
+                                    mode="dropdown"
+                                    selectedValue={this.state.dob_year}
+                                    style={{ height: 35, width: 100 }}
+                                    onValueChange={(itemValue, itemIndex) =>
+                                        this.setState({ dob_year: itemValue })
+                                    }>
+                                    {year.map((itemValue, itemIndex) => {
+                                        return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
+                                    })}
+                                </Picker>
+                            </View>
+                        </View>
+                    </View>
+                    <View style={styles.itemsRow}>
+                        <View style={styles.items1}>
+                            <Text>{i18n.t('gender')}</Text>
+                        </View>
+                        <View style={styles.items3}>
+                            <Picker selectedValue={this.state.gender}
+                                onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
+                                <Picker.Item label='Pilih' value='' />
+                                {
+                                    Object.entries(this.state.list_gender).map((item, key) =>
+                                        <Picker.Item label={item[1]} key={key} value={item[0]}>
+                                        </Picker.Item>
+                                    )
+                                }
+                            </Picker>
+
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title={i18n.t('register')} onPress={() => this.validate()} />
+                    </View>
+                    <View style={styles.signin}>
+                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
+                            <Text style={styles.textSignIn}>{i18n.t('signin')}</Text>
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white'
+    },
+    header: {
+        flex: 0.2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    body: {
+        flex: 0.8,
+        flexDirection: 'column',
+    },
+    itemsRow: {
+        flexDirection: 'row',
+        marginTop: 25,
+    },
+    items1: {
+        marginLeft: 15,
+        width: 50,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    items2: {
+        flex: 1,
+        height: 35,
+        marginHorizontal: 15,
+        justifyContent: 'center',
+        alignItems: 'stretch',
+    },
+    items3: {
+        flex: 1,
+        height: 35,
+        marginHorizontal: 15,
+        justifyContent: 'center',
+        alignItems: 'stretch',
+        borderWidth: 1
+    },
+    itemPicker: {
+        flexDirection: 'row',
+        flex: 1,
+        marginHorizontal: 15
+    },
+    titleText: {
+        margin:15,
+        fontSize: 26,
+        fontWeight: 'bold',
+    },
+    textInput: {
+        borderWidth: 1,
+        borderColor: 'black',
+        height: 35,
+        alignItems: 'stretch'
+    },
+    button: {
+        marginTop: 25,
+        marginHorizontal: 60,
+        alignItems: 'stretch'
+    },
+    signin: {
+        marginTop: 25,
+        alignItems: 'center',
+    },
+    textSignIn: {
+        color: 'red'
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+        language: state.language,
+    }
+}
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setRegistration: (registerProps) => dispacth({
+            type: ActionType.SET_REGISTRATION,
+            data: {
+
+                full_name: registerProps.full_name,
+                gender: registerProps.gender,
+                dob_day: registerProps.dob_day,
+                dob_month: registerProps.dob_month,
+                dob_year: registerProps.dob_year,
+                email: registerProps.email,
+                password: registerProps.email,
+                registration_id: registerProps.registration_id
+            }
+        }),
+        setProses: (prosesProps) => dispacth({
+            type: ActionType.SET_PROSES,
+            data: {
+                proses: prosesProps.proses,
+            }
+        }),
+        setPage: (pageProps) => dispacth({
+            type: ActionType.SET_PAGE,
+            data: {
+                pageEmailConfirmation: pageProps.pageEmailConfirmation
+            }
+        }),
+        setEmailConfirm: (emailConfirmProps) => dispacth({
+            type: ActionType.SET_EMAIL_VERIFICATION,
+            data: {
+                isEmailverif: emailConfirmProps.isEmailverif,
+            }
+        }),
+    }
+}
+
+
+export default connect(null, mapDispatchToProps)(NewRegister);
\ No newline at end of file

view/NewsDetail.js

+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+export default class NewsDetail extends React.Component {
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>News Detail</Text>
+                </View>
+                <View style={styles.body}>
+                    <View style={styles.images}>
+
+                    </View>
+                    <View style={styles.content}>
+                        <Text style={{ margin: 10, fontSize: 20 }}>Judul : </Text>
+                        <Text style={{ margin: 10, fontSize: 20 }}>Keterangan :</Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+    },
+    images: {
+        margin: 10,
+        flex: 2,
+        backgroundColor: 'green'
+    },
+    content: {
+        flex: 2,
+    },
+    body: {
+        flex: 3,
+    },
+})
+

view/OrderHistory.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native';
+import { Card } from 'react-native-shadow-cards'
+import { connect } from 'react-redux';
+import Axios from 'axios';
+
+class OrderHistory extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            order_list: []
+        }
+    }
+
+
+    componentDidMount(){
+
+        this.getOrderHistory()
+
+    }
+
+    getOrderHistory() {
+        let params = {
+            session_id: this.props.session_id
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/transaction/history', params).then(res => {
+            let data = res.data.transactions
+            // console.log('ini datanya loh : ' + JSON.stringify(data))
+            this.setState({
+                order_list: data
+            })
+            console.log(this.state.order_list)
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    render(){
+        // console.log(this.state.order_list)
+        return(
+            <View style={styles.container}>
+                <ScrollView style={styles.body}>
+                    {
+                        this.state.order_list.map((item) => (
+
+                            item.transactions.map((i, k) => (
+                                <TouchableOpacity key={k} onPress={() => this.props.navigation.navigate('Transaction Detail', {idTrans:i.id})}>
+                                    <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+                                        <Text>{i.trans_id}</Text>
+                                        <Text>{i.trans_date}</Text>
+                                        <Text>{i.trans_total}</Text>
+                                    </Card>
+                                </TouchableOpacity>
+                            ))
+                        ))
+                    }
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.2,
+    },
+
+    body: {
+        flex: 3,
+        margin: 5,
+    },
+    list_detail_order: {
+        flex: 1,
+        margin: 20,
+        borderWidth: 1,
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+
+    }
+}
+
+export default connect(mapStateToProps)(OrderHistory);
\ No newline at end of file

view/OutletDetails.js

+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, Button, FlatList, TextInput, Dimensions } from 'react-native';
+import { connect } from 'react-redux';
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
+import Axios from 'axios';
+
+import { Card } from 'react-native-shadow-cards';
+class OutletDetail extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            data: [],
+            latitude: 0,
+            longitude: 0,
+            name_outlets: '',
+            name_address: ''
+
+
+        }
+    }
+    componentDidMount() {
+        this.getMaps()
+    }
+
+    getMaps() {
+        const { navigation, route } = this.props;
+        const { id } = route.params
+        console.log(this.props.session_id)
+
+        let params = {
+            session_id: this.props.session_id,
+            outlet_id: id
+        }
+        console.log("INI PARAMETERNYA" + JSON.stringify(params))
+
+        Axios.post("https://excelsocrm.ravintoladev.com/crm/v2/outlet/get_detail", params).then(res => {
+            let data_details = res.data.outlet
+            let lat = data_details.lat
+            let long = data_details.long
+            let name_outlets = data_details.name
+            let name_address = data_details.address
+
+            this.setState({
+                latitude: lat,
+                longitude: long,
+                name_outlets: name_outlets,
+                name_address: name_address
+            })
+
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+            this.setState({
+                spinner: false,
+            })
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={{ flex: 2 }}>
+                    <MapView style={{ flex: 1 }}
+                        region={{
+                            latitude: this.state.latitude,
+                            longitude: this.state.longitude,
+                            latitudeDelta: 0.1,
+                            longitudeDelta: 0.1,
+
+                        }}
+                        zoomEnabled={true}
+                        loadingEnabled={true}
+                        provider={PROVIDER_GOOGLE}
+                    >
+
+                    </MapView>
+                </View>
+                <View style={{ flex: 2 }}>
+                    <Text style={{ textAlign: 'center', fontSize: 20, margin: 5 }}>{this.state.name_outlets}</Text>
+                    <Text style={{ textAlign: 'center', fontSize: 12, margin: 5 }}>{this.state.name_address}</Text>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+    },
+
+    body: {
+        flex: 5,
+        margin: 20,
+    },
+    list_addrees: {
+        flex: 2,
+        margin: 5,
+    },
+
+    searchbar: {
+        flex: 1,
+        justifyContent: 'center',
+        margin: 10,
+    },
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+        outlet_id: state.outlet_id,
+        name_outlet: state.name_outlet,
+    }
+}
+
+export default connect(mapStateToProps)(OutletDetail);
+
+

view/PickupName.js

+import React from 'react';
+import { View, Text, StyleSheet, FlatList, TextInput, Alert } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import Spinner from 'react-native-loading-spinner-overlay';
+import { CheckBox } from 'react-native-elements';
+import ActionType from '../redux/globalActionType';
+import Axios from 'axios';
+import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons';
+import _ from 'lodash';
+import * as Location from 'expo-location';
+import { connect } from 'react-redux';
+
+class PickupName extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            city: [],
+            city_selected: '',
+            dataOutlets: [],
+            my_lat: 0,
+            my_long: 0,
+            distance: [],
+            search: '',
+            data: [], // data yg sedang aktif
+            data_before_search: [],
+            spinner: false,
+        }
+    }
+
+    componentDidMount() {
+        this._getCurrentPosisition()
+    }
+
+
+    _getCurrentPosisition = async () => {
+        this.setState({
+            spinner: true,
+        })
+        let location = await Location.getCurrentPositionAsync({
+            accuracy: Location.Accuracy.Highest
+        })
+
+        let latitude = location.coords.latitude;
+        let longitude = location.coords.longitude;
+
+        this.setState({
+            my_lat: latitude,
+            my_long: longitude
+        })
+        this.getOutlet()
+    }
+
+    getOutletDetail(id) {
+        this.props.navigation.navigate('Outlet Detail',{id:id})
+    }
+
+       
+    
+
+    getOutlet() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post("https://excelsocrm.ravintoladev.com/crm/v2/outlet/get_list", params).then(res => {
+            let dataOutlets = res.data.outlets;
+            for (let i = 0; i < dataOutlets.length; i++) {
+                dataOutlets[i]['distance'] = this.distance(dataOutlets[i]['lat'], dataOutlets[i]['long']);
+                let address = dataOutlets[i]['address'];
+                if (dataOutlets[i]['city'] !== '') {
+                    if (address !== '') {
+                        address = address + ', ' + dataOutlets[i]['city'];
+                    } else {
+                        address = dataOutlets[i]['city'];
+                    }
+                }
+                if (dataOutlets[i]['province']) {
+                    if (address !== '') {
+                        address = address + ', ' + dataOutlets[i]['province'];
+                    } else {
+                        address = dataOutlets[i]['province'];
+                    }
+                }
+                if (dataOutlets[i]['postal_code']) {
+                    if (address !== '') {
+                        address = address + ' ' + dataOutlets[i]['postal_code'];
+                    } else {
+                        address = dataOutlets[i]['postal_code'];
+                    }
+                }
+                dataOutlets[i]['full_address'] = address;
+            }
+            this.setState({
+                dataOutlets: dataOutlets,
+                data_before_search: dataOutlets,
+
+            })
+            this.setState({
+                spinner: false,
+            })
+
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+                this.setState({
+                    spinner: false,
+                })
+        })
+    }
+
+
+    toRad(value) {
+        return value * Math.PI / 180;
+    }
+
+    distance(locationLat, locationLong) {
+
+        let R = 6371;
+        let dLat = this.toRad(locationLat - this.state.my_lat);  // Javascript functions in radians
+        let dLon = this.toRad(locationLong - this.state.my_long);
+        let a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.toRad(this.state.my_lat)) * Math.cos(this.toRad(locationLat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+        let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        let d = R * c;
+        return Math.round(d * 10) / 10;
+
+    }
+
+    clear = () => {
+        this.state.search.clear();
+    };
+
+    filterData(text) {
+        const newData = this.state.data_before_search.filter(function (item) {
+            const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
+            const textData = text.toUpperCase();
+            return itemData.indexOf(textData) > -1;
+        });
+
+        if (text === '') {
+            this.setState({
+                dataOutlets: this.state.data_before_search,
+                search: ''
+            })
+        } else {
+            this.setState({
+                dataOutlets: newData,
+                search: text
+            });
+        }
+    }
+
+    select(item) {
+        let OutletChange = {
+            outlet_id: item.id,
+            name_outlet: item.name,
+        }
+        this.props.setChangeOutletProps(OutletChange)
+        this.props.navigation.navigate('Home', { screen: 'MENU' });
+    }
+
+    RenderItem = ({ item }) => {
+        return (
+            <View style={{ flexDirection: 'row', flex: 1 }}>
+                <View>
+                    <MaterialCommunityIcons name="map-marker" size={32} color="brown" />
+                </View>
+                <View style={styles.list_addrees}>
+                    <View style={{ margin: 5 }}>
+                        <Text style={{ fontWeight: 'bold', fontSize: 20 }}>{item.name}</Text>
+                        <Text style={{ fontWeight: 'bold', fontSize: 15, color: '#ccb46c' }}>OPEN - </Text>
+                    </View>
+                    <Text style={{ margin: 5, color: '#b1b1b2' }}>
+                        {item.full_address}
+                    </Text>
+                    <Text style={{ margin: 5, color: '#aeaead' }}>
+                        {item.distance} KM
+               </Text>
+                </View>
+                <View>
+                    <TouchableOpacity onPress={() => this.getOutletDetail(item.id)}>
+                        <CheckBox
+                            center
+                            checkedIcon='dot-circle-o'
+                            uncheckedIcon='circle-o'
+                            checked={this.state.checked}
+                        />
+                    </TouchableOpacity>
+
+                </View>
+            </View>
+        );
+    }
+    render() {
+
+        return (
+            <View style={styles.container}>
+                 <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={styles.searchbar}>
+                    <View style={{ height: 45, borderRadius: 10, borderColor: '#ccb46c', borderWidth: 1, flexDirection: 'row' }}>
+                        <View style={{ flex: 1 }}>
+                            <MaterialCommunityIcons name="map-marker" size={32} color="brown" />
+                        </View>
+                        <View style={{ flex: 6 }}>
+                            <TextInput style={{ height: 45 }} placeholder="Cari lokasi Pickup Store"
+                                onChangeText={text => this.filterData(text)}
+                                onClear={text => this.filterData('')}
+                                value={this.state.search}></TextInput>
+                        </View>
+                        <View style={{ flex: 1, margin: 5 }}>
+                            <Ionicons name="ios-search" size={32} color="brown" />
+                        </View>
+                    </View>
+
+                </View>
+                <View style={styles.body}>
+                    <FlatList
+                        data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
+                        renderItem={this.RenderItem}
+                        keyExtractor={item => item.id}
+                        windowSize={5}
+                        initialNumToRender={18}
+                        maxToRenderPerBatch={2}
+                        onEndReachedThreshold={0.5}
+                    />
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+    },
+
+    body: {
+        flex: 5,
+        margin: 20,
+    },
+    list_addrees: {
+        flex: 2,
+        margin: 5,
+    },
+
+    searchbar: {
+        flex: 1,
+        justifyContent: 'center',
+        margin: 10,
+    }
+})
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setChangeOutletProps: (OutletChange) => dispacth({
+            type: ActionType.SET_CHANGE_OUTLET,
+            data: {
+
+                outlet_id: OutletChange.outlet_id,
+                name_outlet: OutletChange.name_outlet,
+
+            }
+        }),
+    }
+}
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+        outlet_id: state.outlet_id,
+        name_outlet: state.name_outlet,
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PickupName);
+

view/ProfilePage.js

+import React, { PureComponent } from 'react';
+import { View, Text, button, StyleSheet, Button, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+import ActionType from '../redux/globalActionType';
+import i18n from 'i18n-js';
+import { StackActions } from '@react-navigation/native';
+
+class ProfilePage extends PureComponent {
+    constructor(props) {
+        super(props)
+        this.state = {
+            full_name: '',
+            dob_day: '',
+            dob_month: '',
+            dob_year: '',
+            gender: '',
+            email: '',
+        }
+    }
+
+    componentDidMount() {
+        this.getProfile();
+    }
+
+
+    getProfile() {
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            let data = res.data
+
+            this.setState({
+                full_name: data.name,
+                email: data.email,
+                dob_day: data.dob_day,
+                dob_month: data.dob_month,
+                dob_year: data.dob_year,
+                gender: data.gender_display,
+
+            })
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+
+    onChangeProfil = data => {
+        console.log('DATA FROM CHANGE PROFILE  ' + data);
+        this.getProfile()
+    }
+
+    handleChangeProfil() {
+        this.props.navigation.navigate('Change Profil', { 'data': 'sample', onChangeProfil: this.onChangeProfil })
+    }
+
+    // logout() {
+    //     const navigation = this.props.navigation
+    //     let sessionProps = {
+    //         session_id: ''
+    //     }
+    //     this.props.setSessionid(sessionProps);
+    //     navigation.dispatch(StackActions.replace('Login'))
+    // }
+
+    logout() {
+        const navigation = this.props.navigation
+        let sessionProps = {
+            session_id: ''
+        }
+        this.props.setSessionid(sessionProps);
+        navigation.reset({
+            index: 0,
+            routes: [
+              {
+                name: 'Login',
+                params: { someParam: 'Param1' },
+              },
+            ],
+          })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text style={{ textAlign: "center", margin: 50, fontWeight: 'bold', fontSize: 25 }}> Profil </Text>
+                <View style={{ margin: 10, flex: 1, }}>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>Name : </Text>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>{this.state.full_name} </Text>
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>Date of Birth </Text>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>{this.state.dob_day} / {this.state.dob_month} / {this.state.dob_year} </Text>
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>Gender :</Text>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>{this.state.gender} </Text>
+                    </View>
+                    <View style={{ height: 50, flexDirection: 'row' }}>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>Email :</Text>
+                        <Text style={{ fontSize: 20, margin: 5, flex: 2 }}>{this.state.email} </Text>
+                    </View>
+                </View>
+                <View style={{ flexDirection: 'row', top: 20, margin: 5, }}>
+                    <View style={{ flex: 1, margin: 5 }}>
+                        <Button title="Edit" onPress={() => this.handleChangeProfil()}></Button>
+                    </View>
+                    <View style={{ flex: 1, margin: 5 }}>
+                        <Button title="Change Password" onPress={() => this.props.navigation.navigate('Change password')}></Button>
+                    </View>
+                </View>
+                <View style={{ flex: 1, flexDirection: 'row', top: 20, margin: 5 }}>
+                    <View style={{ flex: 1, margin: 5 }}>
+                        <Button title="Language" onPress={() => this.props.navigation.navigate('Change language')}></Button>
+                    </View>
+                    <View style={{ flex: 1, margin: 5 }}>
+                        <Button title="Logout" onPress={() => this.logout()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+
+    }
+})
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setSessionid: (sessionProps) => dispacth({
+            type: ActionType.SET_LOGOUT,
+            data: {
+                session_id: sessionProps.session_id
+            }
+        }),
+    }
+}
+
+const mapStateToProps = (state) => {
+    console.log('PROFIL PAGE' + JSON.stringify(state))
+    return {
+        session_id: state.session_id,
+        language: state.language,
+        full_name: state.full_name,
+        gender_display: state.gender_display,
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);

view/RedeemCode.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+
+export default class RedeemCode extends React.Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', fontSize: 25 }}>Payment Code</Text>
+                </View>
+                <View>
+                    <Text style={{ fontSize: 25, textAlign: 'center' }}>XY2313</Text>
+                    <View style={{ borderWidth: 1, marginRight: 20, marginLeft: 20 }}></View>
+                </View>
+                <View style={styles.body}>
+                    <View style={styles.current_balance}>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }} >Current Balance</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }}>xxxxxxxxxxx</Text>
+                        </View>
+                    </View>
+                    <View style={styles.redeem}>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }} >Time</Text>
+                        </View>
+                        <View style={{ flex: 1, margin: 10 }}>
+                            <Text style={{ fontSize: 20 }}>0:30</Text>
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Cancel Payment" color="red" />
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    body: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    current_balance: {
+        flexDirection: 'row',
+        margin: 10,
+    },
+
+    redeem: {
+        flexDirection: 'row',
+        margin: 10
+    },
+
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file

view/Register.js

+import React from 'react';
+import { Button, View, Text, StyleSheet, TextInput, Picker, Alert } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
+import Axios from 'axios';
+import { BASE_URL_GET_ENUM, BASE_URL_REGISTER } from '../model/Base_Model';
+
+export default class Register extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = ({
+            email: "wahyu.rav@mailinator.com",
+            no_hp: "083872961997",
+            password: "wahyu123",
+            full_name: "wahyu adjie prasetyo",
+            gender: "1",
+            dob_year: "1997",
+            dob_month: "08",
+            dob_day: "25",
+            profession: "",
+            domicilie: "",
+            list_gender: [],
+            list_domicilie: [],
+            list_profesion: [],
+            list_dob: [],
+            selected_item: [],
+            date:[]
+        })
+        // this.load_data();
+    }
+
+    componentDidMount() {
+
+        this.load_data();
+    }
+
+    load_data() {
+
+
+        return Axios.get(BASE_URL_GET_ENUM).then(res => {
+            const data_enum = res.data;
+            const list_gender = data_enum.gender
+
+            const list_profesion = data_enum.profession
+            const list_domicilie = data_enum.domicile
+
+            this.setState({
+
+                list_gender: list_gender,
+                list_profesion: list_profesion,
+                list_domicilie: list_domicilie,
+            })
+
+            console.log(this.state.list_gender);
+            console.log(this.state.list_domicilie);
+        })
+    }
+
+
+    handleReg() {
+
+        let parameter = {
+            "email": this.state.email,
+            "password": this.state.password,
+            "mobile_phone": this.state.no_hp,
+            "name": this.state.full_name,
+            "gender": this.state.gender,
+            "dob_year": this.state.dob_year,
+            "dob_month": this.state.dob_month,
+            "dob_day": this.state.dob_day,
+            "profession": this.state.profession,
+            "domicile": this.state.domicilie,
+        }
+
+        console.log(parameter);
+        Axios.post(BASE_URL_REGISTER, parameter).then(res => {
+            console.log('sukses');
+        }).catch(error => {
+            console.log(error);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <ScrollView>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Email</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(email) => this.setState({ email })}
+                            value={this.state.email}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>No handphone</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={no_hp => this.setState({ no_hp })}
+                            value={this.state.no_hp}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Password</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={password => this.setState({ password })}
+                            value={this.state.password}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Nama lengkap</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={full_name => this.setState({ full_name })}
+                            value={this.state.full_name}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Jenis Kelamin</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        {/* { Object.entries(this.state.list_gender).map((t,k) => <Text key={k}>{t[0]}.{t[1]}</Text>)} */}
+                        <Picker selectedValue={this.state.gender} onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
+                            {
+                                Object.entries(this.state.list_gender).map((item, key) =>
+                                    <Picker.Item label={item[1]} key={key} value={item[0]}>
+                                    </Picker.Item>
+                                )
+                            }
+                        </Picker>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10, marginBottom: 10 }}>
+                        <Text style={{ top: 5, bottom: 5 }}>Tanggal Lahir</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            onChangeText={dob_day => this.setState({ dob_day })}
+                            value={this.state.dob_day}
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}>
+                        </TextInput>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Profesi</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Picker selectedValue={this.state.profession} onValueChange={(itemValue, itemIndex) => this.setState({ profession: itemValue })}>
+                            {
+                                this.state.list_profesion.map((item) => {
+                                    return (
+                                        <Picker.Item label={item.name} value={item.name} key={item.name} />
+                                    );
+                                })
+                            }
+                        </Picker>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Area Domisili</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <Picker selectedValue={this.state.domicilie} onValueChange={(itemValue, itemIndex) => this.setState({ domicilie: itemValue })}>
+                            {
+                                this.state.list_domicilie.map((item) => {
+                                    return (
+                                        <Picker.Item label={item.name} value={item.name} key={item.name}></Picker.Item>
+                                    )
+                                })
+                            }
+                        </Picker>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10, marginBottom: 15 }}>
+                        <Button
+                            title="Register"
+                            onPress={() => this.handleReg()}
+                        />
+                    </View>
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: 'white'
+
+    }
+})

view/Renewal.js

+import React from 'react';
+import { View, Text, StyleSheet, Button, Alert } from 'react-native';
+import { connect } from 'react-redux';
+import Axios from 'axios';
+
+class Renewal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            current_balance: "",
+            expired: "",
+            card_number: "",
+            biaya_renewal: "100.000",
+            renew_until: "",
+        }
+    }
+
+    componentDidMount() {
+        this._getProfile();
+    }
+
+
+    _renewal() {
+        let params = {
+            session_id: this.props.session_id
+        }
+        console.log(params);
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/card/renewal', params).then(res => {
+            // console.log('ini res ' + JSON.stringify(res.data))
+            this._getProfile();
+            Alert.alert('Renewal Berhasil');
+        }).catch(error => {
+            let response = error.response.data;
+            console.log(response.msg)
+            Alert.alert(response.msg);
+        })
+    }
+
+    _getProfile() {
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            console.log('ini res ' + JSON.stringify(res.data))
+            const dataCard = res.data
+
+            let balance = dataCard.kaspro_balance
+            let expired = dataCard.expire_date
+            let c_renew_until = dataCard.expire_date
+
+            var date_string = c_renew_until
+            var date_arr = date_string.split('-');
+            var date = new Date(date_arr[0], date_arr[1], date_arr[2]);
+            
+            date.setFullYear(date.getFullYear() + 1);
+            let date_nextyear_string = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()
+            
+            this.setState({
+                current_balance: balance,
+                expired: expired,
+                renew_until: date_nextyear_string
+            })
+
+
+
+        }).catch(error => {
+            console.log('ini error ' + error)
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Renewal</Text>
+                </View>
+                <View style={styles.body}>
+                    <View style={styles.cont_curent_balance}>
+                        <View style={styles.current_balance}>
+                            <Text style={{ textAlign: 'center' }}>Current Balance</Text>
+                        </View>
+                        <View style={styles.value_current_balance}>
+                            <Text style={{ textAlign: 'center' }}>{this.state.current_balance}</Text>
+                        </View>
+                    </View>
+                    <View style={styles.cont_biaya_renewal}>
+                        <View style={styles.biaya_renewal}>
+                            <Text style={{ textAlign: 'center' }}>Biaya Renewal</Text>
+                        </View>
+                        <View style={styles.value_biaya_renewal}>
+                            <Text style={{ textAlign: 'center' }}>{this.state.biaya_renewal}</Text>
+                        </View>
+                    </View>
+                    <View style={styles.cont_expired}>
+                        <View style={styles.expired}>
+                            <Text style={{ textAlign: 'center' }}>Expired</Text>
+                        </View>
+                        <View style={styles.value_expired}>
+                            <Text style={{ textAlign: 'center' }}>{this.state.expired}</Text>
+                        </View>
+                    </View>
+
+                    <View style={styles.cont_renew_until}>
+                        <View style={styles.renew_until}>
+                            <Text style={{ textAlign: 'center' }}>Renew Until</Text>
+                        </View>
+                        <View style={styles.value_renew_until}>
+                            <Text style={{ textAlign: 'center' }}>{this.state.renew_until}</Text>
+                        </View>
+                    </View>
+                    <View style={styles.btn_renewal}>
+                        <Button title="Renew" onPress={() => this._renewal()}></Button>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+        flex: 1,
+    },
+    body: {
+        flex: 4,
+    },
+    cont_curent_balance: {
+        flexDirection: 'row',
+        height: 50,
+    },
+    cont_biaya_renewal: {
+        flexDirection: 'row',
+        height: 50,
+    },
+    cont_expired: {
+        flexDirection: 'row',
+        height: 50,
+    },
+    cont_renew_until: {
+        flexDirection: 'row',
+        height: 50,
+
+    },
+    current_balance: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center'
+    },
+
+    biaya_renewal: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center'
+
+    },
+
+    expired: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center'
+
+    },
+
+    renew_until: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center'
+
+    },
+
+    value_current_balance: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center',
+    },
+
+    value_biaya_renewal: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center',
+    },
+
+    value_expired: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center',
+    },
+
+    value_renew_until: {
+        flex: 1,
+        margin: 5,
+        justifyContent: 'center',
+    },
+    btn_renewal: {
+        marginRight: 30,
+        marginLeft: 30,
+        marginTop: 10,
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+        session_id: state.session_id,
+    }
+}
+export default connect(mapStateToProps)(Renewal);

view/ResetPassword.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import Axios from 'axios';
+import { BASE_URL_RESET_PASSWORD } from '../model/Base_Model';
+import ActionType from '../redux/globalActionType';
+import { connect } from 'react-redux';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import i18n from 'i18n-js';
+import Spinner from 'react-native-loading-spinner-overlay';
+
+class ResetPassword extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: '',
+            language: 'id',
+            spinner:false
+        }
+    }
+
+    handleResetPassword() {
+        this.setState({
+            spinner: true,
+        })
+        let params = {
+            'email': this.state.email
+        }
+        console.log(this.state.email)
+        Axios.post(BASE_URL_RESET_PASSWORD, params).then(res => {
+            if (res.status === 200) {
+                let resetProps = {
+                    email: this.state.email
+                }
+                this.props.setResetPassword(resetProps);
+                this.setState({
+                    spinner: false,
+                })
+                Alert.alert(
+                    '',
+                    'Email terkirim, mohon dicek'
+                    ,
+                )
+                
+                this.props.navigation.navigate('New Password');
+            }
+        }).catch(error => {
+            this.setState({
+                spinner: false,
+            })
+            let response = error.response.data;
+            Alert.alert(response.msg);
+
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                 <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>{i18n.t('resetPassword')}</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 40, justifyContent: 'center' }}>
+                            <Text>Email</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                onChangeText={(email) => this.setState({ email })}
+                                autoCapitalize="none"
+                                value={this.state.email} 
+                                keyboardType='email-address'/>
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title={i18n.t('submit')} onPress={() => this.handleResetPassword()}></Button>
+                    </View>
+                    <TouchableOpacity onPress={() => this.handleResetPassword()}>
+                        <Text style={{ fontSize: 20, textAlign: 'center', color: 'red' }}>{i18n.t('enterToken')}</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 40,
+        margin: 10,
+
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+        email: state.email,
+        language: state.language
+    }
+}
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setResetPassword: (registerProps) => dispacth({
+            type: ActionType.SET_RESET_PASSWORD,
+            data: {
+                email: registerProps.email,
+            }
+        }),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ResetPassword);
\ No newline at end of file

view/ShoppingCart.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity, ScrollView, Image,SafeAreaView } from 'react-native';
+import { connect } from 'react-redux'
+import { CheckBox } from 'react-native-elements'
+import i18n from 'i18n-js';
+// import MenuSelection from './MenuSelection'
+import Axios from 'axios'
+import { FlatList } from 'react-native-gesture-handler';
+
+
+function Item({ name, image, qty }) {
+    return (
+        <View>
+            <Text>{name}</Text>
+            <Image source={{ uri: image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
+            <Text>{qty}</Text>
+        </View>
+    )
+}
+
+class ShoppingCart extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            kasproBalance: '',
+            kasproPoint: '',
+            checkedBalance: false,
+            checkedPoint: false,
+            checkedBalancePoint: false
+        }
+    }
+
+    checkedSelection(val) {
+        // console.log(val)
+        if (val == 'balance') {
+            this.setState({
+                checkedBalance: true,
+                checkedPoint: false,
+                checkedBalancePoint: false
+            })
+        } else if (val == 'point') {
+            this.setState({
+                checkedBalance: false,
+                checkedPoint: true,
+                checkedBalancePoint: false
+            })
+        } else {
+            this.setState({
+                checkedBalance: false,
+                checkedPoint: false,
+                checkedBalancePoint: true
+            })
+        }
+    }
+
+    componentDidMount() {
+        this.getBalance()
+    }
+
+    getBalance() {
+        let params = {
+            session_id: this.props.session_id
+        }
+
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            // console.log(res.data)
+            const { kaspro_balance, kaspro_point } = res.data
+            // console.log(kaspro_balance,kaspro_point)
+            this.setState({
+                kasproBalance: kaspro_balance,
+                kasproPoint: kaspro_point
+            })
+
+            // console.log(this.state.kasproBalance, this.state.kasproPoint)
+        }).catch(error => {
+            console.log('ini error ' + error)
+        })
+    }
+
+
+
+    render() {
+
+        return (
+            <ScrollView style={styles.container}>
+
+                <Text style={{ textAlign: 'center', fontSize: 12, }}>
+                    {i18n.t('orderInfo')}
+                </Text>
+                <Text style={{ textAlign: "center", fontSize: 12, top: 5 }}>
+                    Excelso Senayan City
+                </Text>
+
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
+                    <TouchableOpacity>
+                        <Text style={{ textAlign: 'center', fontSize: 15 }}>+ ADD MORE</Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={styles.order}>
+                <SafeAreaView style={styles.container}>
+                <FlatList
+                        data={this.props.cart_shop}
+                        renderItem={({ item }) => (
+                            <Item
+                             
+                                name={item.name}
+                                image={item.image}
+                                qty = {item.qty}
+                            />
+                        )} 
+                        
+                        keyExtractor={item => item.id}/>
+                </SafeAreaView>
+                </View>
+                
+                <View style={styles.payment}>
+                    <Text>PAYMENT METHODS</Text>
+                </View>
+                <CheckBox
+                    title={'EXCELSO BALANCE\nYour Balance : ' + this.state.kasproBalance + '                                    '}
+                    checkedIcon='check-circle-o'
+                    uncheckedIcon='circle-o'
+                    iconRight
+                    onPress={() => this.checkedSelection('balance')}
+                    checked={this.state.checkedBalance}
+                />
+                <CheckBox
+                    title={'EXCELSO POINTS\nYour Points : ' + this.state.kasproPoint + '                                       '}
+                    checkedIcon='check-circle-o'
+                    uncheckedIcon='circle-o'
+                    iconRight
+                    onPress={() => this.checkedSelection('point')}
+                    checked={this.state.checkedPoint}
+                />
+                <CheckBox
+                    title={'EXCELSO BALANCE + EXCELSO POINTS\nYour Balance : ' + this.state.kasproBalance + '\nYour Points : ' + this.state.kasproPoint + '                                       '}
+                    checkedIcon='check-circle-o'
+                    uncheckedIcon='circle-o'
+                    iconRight
+                    onPress={() => this.checkedSelection('balancepoint')}
+                    checked={this.state.checkedBalancePoint}
+                />
+
+                <View style={styles.voucher}>
+                    <TouchableOpacity>
+                        <Text>+ ADD VOUCHER</Text>
+                    </TouchableOpacity>
+                </View>
+
+                <View style={styles.paymentDetails}>
+                    <Text>PAYMENT DETAILS</Text>
+                </View>
+                <View style={{ margin: 10 }}>
+                    <Text>Detail Pembayaran</Text>
+                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+                        <View>
+                            <Text>Harga</Text>
+                        </View>
+                        <View style={{ marginRight: 50 }}>
+                            <Text>undefined</Text>
+                        </View>
+                    </View>
+                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+                        <View>
+                            <Text>Ongkos Kirim</Text>
+                        </View>
+                        <View style={{ marginRight: 50 }}>
+                            <Text>undefined</Text>
+                        </View>
+                    </View>
+                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+                        <View>
+                            <Text>Diskon</Text>
+                        </View>
+                        <View style={{ marginRight: 50 }}>
+                            <Text>undefined</Text>
+                        </View>
+                    </View>
+                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+                        <View style={{ marginTop: 15 }}>
+                            <Text style={{ fontSize: 35 }}>Total</Text>
+                        </View>
+                        <View style={{ marginRight: 50, marginTop: 15 }}>
+                            <Text style={{ fontSize: 35 }}>undefined</Text>
+                        </View>
+                    </View>
+                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+                        <View>
+                            <Text>Tujuan</Text>
+                        </View>
+                        <View style={{ marginRight: 50 }}>
+                            <Text>undefined</Text>
+                        </View>
+                    </View>
+                </View>
+            </ScrollView>
+        )
+    }
+}
+
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.2,
+        margin: 10,
+        // backgroundColor : '',
+        borderBottomWidth: 1,
+        borderTopWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+    },
+
+    order: {
+        flex: 1,
+        margin: 10,
+        backgroundColor: 'gray'
+    },
+
+    payment: {
+        flex: 1,
+        margin: 10,
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        // backgroundColor: 'lightblue'
+    },
+
+    voucher: {
+        flex: 1,
+        margin: 10,
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        // backgroundColor: 'lightblue'
+    },
+
+    paymentDetails: {
+        flex: 1,
+        margin: 10,
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        // backgroundColor: 'lightblue'
+    },
+
+
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+        cart_shop: state.cart_shop
+
+    }
+}
+
+export default connect(mapStateToProps)(ShoppingCart)
\ No newline at end of file

view/SmsConfirmation.js

+import React from 'react';
+import {
+    View,
+    StyleSheet,
+    Text,
+    TextInput,
+    Button
+} from 'react-native';
+
+
+export default class SmsConfirmation extends React.Component {
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={styles.titleText}>SMS CONFIRMATION</Text>
+                </View>
+                <View style={styles.body}>
+                    <View style={{ flex: 0.3, flexDirection: 'row', backgroundColor: 'white', justifyContent : 'center', alignItems: 'center', alignSelf: 'stretch' }}>
+                        <View style={{ backgroundColor: 'white', marginRight : 20 }}>
+                            <Text>TOKEN</Text>
+                        </View>
+                        <View style={{ backgroundColor: 'white' }}>
+                            <TextInput style={{ borderWidth: 1, width : 250 }} />
+                        </View>
+                    </View>
+                    <View style={{flex : 1, backgroundColor : 'white', width : 200}}>
+                        <Button title='verify'/>                     
+                    </View>
+                </View>
+
+            </View>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    header: {
+        flex: 0.4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor : 'white'
+    },
+    titleText: {
+        fontSize: 26,
+        fontWeight: 'bold'
+    },
+    body : {
+        flex: 0.8,
+        backgroundColor: 'white',
+        alignItems: 'center',
+    }
+
+})
\ No newline at end of file

view/TopUpInfo.js

+import React from 'react';
+import {
+    View,
+    StyleSheet,
+    Text,
+    StatusBar,
+    Image,
+    ScrollView,
+    TouchableOpacity,
+    Alert,
+    ImageBackground,
+} from 'react-native';
+import { CheckBox, Separator, Grid, Row, Card, Button, Icon, CardItem, Body } from 'native-base';
+import { Collapse, CollapseHeader, CollapseBody, AccordionList } from 'accordion-collapse-react-native'
+import Axios from 'axios';
+import HTML from 'react-native-render-html';
+
+
+
+
+export default class TopUpInfo extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            content:""
+        }
+    }
+
+    componentDidMount(){
+        Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/detail/topup-info').then(res => {
+
+            let data = res.data
+            let contents = data.content
+
+            this.setState({
+
+                content:contents
+            })
+          
+        }).catch(error => {
+            let response = error.response.data;
+            console.log(response.msg)
+            Alert.alert(response.msg);
+        })
+    }
+    
+   
+
+    render() {
+    const htmlContent = this.state.content;
+        return (
+            <ScrollView style={{ backgroundColor:'white'}}>
+                <View style={{ flex: 1 }}>
+
+                    <Collapse>
+                        <CollapseHeader>
+                            <Separator bordered style={{backgroundColor:'white'}}>
+                                <Text style={{ fontSize: 12, fontWeight: 'bold' }}>Bank BCA</Text>
+                            </Separator>
+                        </CollapseHeader>
+                        <CollapseBody>
+                            <Card style={{ marginLeft: 10, marginRight: 10 }}>
+                                <CardItem>
+                                    <Body style={{ marginLeft: 5 }}>
+                                        <HTML html={this.state.content} />
+                                    </Body>
+                                </CardItem>
+                            </Card>
+                        </CollapseBody>
+                    </Collapse>
+
+                    <Collapse>
+                        <CollapseHeader>
+
+                            <Separator bordered style={{backgroundColor:'white'}}>
+                                <Text style={{ fontSize: 12, fontWeight: 'bold' }}>Bank BNI</Text>
+                            </Separator>
+
+                        </CollapseHeader>
+                        <CollapseBody>
+                        <Card style={{ marginLeft: 10, marginRight: 10 }}>
+                                <CardItem>
+                                <Body style={{ marginLeft: 5 }}>
+                                        <HTML html={this.state.content} />
+                                    </Body>
+                                </CardItem>
+                            </Card>
+                        </CollapseBody>
+                    </Collapse>
+
+                    <Collapse>
+                        <CollapseHeader>
+
+                            <Separator bordered style={{backgroundColor:'white'}}>
+                                <Text style={{ fontSize: 12, fontWeight: 'bold' }}>Bank MANDIRI</Text>
+                            </Separator>
+
+                        </CollapseHeader>
+                        <CollapseBody>
+                        <Card style={{ marginLeft: 10, marginRight: 10 }}>
+                                <CardItem>
+                                <Body style={{ marginLeft: 5 }}>
+                                        <HTML html={this.state.content} />
+                                    </Body>
+                                </CardItem>
+                            </Card>
+                        </CollapseBody>
+                    </Collapse>
+                    </View>
+
+            </ScrollView>
+        )
+    }
+}
\ No newline at end of file

view/TransactionDetail.js

+import React from 'react'
+import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, Button } from 'react-native'
+import { Card } from 'react-native-shadow-cards'
+import { connect } from 'react-redux'
+import Axios from 'axios'
+
+class TransactionDetail extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            transDetail: [],
+            transDate: '',
+            transDiscount: '',
+            transId: '',
+            transTax: '',
+            transTotal: ''
+        }
+    }
+
+    componentDidMount() {
+        this.getDetailTrans()
+    }
+
+    getDetailTrans() {
+        let params = {
+            session_id: this.props.session_id,
+            transaction_id: this.props.route.params.idTrans
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/transaction/detail', params).then(res => {
+            let data = res.data
+            console.log(data)
+            this.setState({
+                transId: data.trans_id,
+                transDate: data.trans_date,
+                transTotal: data.trans_total,
+                transDetail: data.transaction_detail
+            })
+            // console.log(this.state.history_list)
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', margin: 20, fontSize: 25, alignSelf: 'center' }}>Transaction Detail</Text>
+                </View>
+                <View style={styles.body}>
+                    <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+                        <Text> Jenis Transaksi : {this.state.transId}</Text>
+                        <Text> Tanggal : {this.state.transDate}</Text>
+                        <Text> Total : {this.state.transTotal}</Text>
+                        <Text> Detail : {this.state.transDetail}</Text>
+                        <Button title="OK" onPress={() => this.props.navigation.goBack()}/>
+                    </Card>
+
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.5,
+
+    },
+
+    body: {
+        flex: 3,
+        margin: 5,
+
+    },
+    list_detail_order: {
+        flex: 1,
+        margin: 20,
+        borderWidth: 1,
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+
+    }
+}
+
+export default connect(mapStateToProps)(TransactionDetail)
\ No newline at end of file

view/TransactionHistory.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native';
+import { Card } from 'react-native-shadow-cards'
+import { connect } from 'react-redux';
+import Axios from 'axios';
+
+class TransactionHistory extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            history_list: []
+        }
+    }
+
+    componentDidMount() {
+        this.getTransactionHistory()
+    }
+
+    getTransactionHistory() {
+        let params = {
+            session_id: this.props.session_id
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/transaction/history', params).then(res => {
+            let data = res.data.transactions
+            // console.log('ini datanya loh : ' + JSON.stringify(data))
+            this.setState({
+                history_list: data
+            })
+            // console.log(this.state.history_list)
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <ScrollView style={styles.body}>
+                    {
+                        this.state.history_list.map((item) => (
+
+                            item.transactions.map((i, k) => (
+                                <TouchableOpacity key={k} onPress={() => this.props.navigation.navigate('Transaction Detail', {idTrans:i.id})}>
+                                    <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
+                                        <Text>{i.trans_id}</Text>
+                                        <Text>{i.trans_date}</Text>
+                                        <Text>{i.trans_total}</Text>
+                                    </Card>
+                                </TouchableOpacity>
+                            ))
+                        ))
+                    }
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white',
+    },
+    header: {
+
+        flex: 0.2,
+    },
+
+    body: {
+        flex: 3,
+        margin: 5,
+    },
+    list_detail_order: {
+        flex: 1,
+        margin: 20,
+        borderWidth: 1,
+    }
+})
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+
+    }
+}
+
+export default connect(mapStateToProps)(TransactionHistory);
\ No newline at end of file

view/TransferBalance.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Alert } from 'react-native';
+import Axios from 'axios';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+
+class TransferBalance extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            email: "",
+            points: "",
+            balance: "",
+            img_card: "",
+            member_since: "",
+            account_number: "",
+            destination: "",
+            amount: "",
+            reference: ""
+        }
+    }
+
+    componentDidMount() {
+        this.getBalance()
+    }
+
+    getBalance() {
+        let params = {
+            session_id: this.props.session_id
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            let data = res.data
+            console.log('ini res nya : ' + data.kaspro_balance)
+            this.setState({
+                full_name: data.name,
+                email: data.email,
+                dob_day: data.dob_day,
+                dob_month: data.dob_month,
+                dob_year: data.dob_year,
+                gender: data.gender_display,
+                balance: data.kaspro_balance
+            })
+        }).catch(error => {
+            let response = error.response.data;
+            console.log(response.msg);
+        })
+    }
+
+    handleSend() {
+        let params = {
+            "session_id": this.props.session_id,
+            "destination": this.state.destination,
+            "balance": this.state.amount,
+            "reference": this.state.reference
+
+        }
+        console.log(params);
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/card/transfer', params).then(res => {
+            console.log('ini res ' + JSON.stringify(res.data))
+            Alert.alert('Transaksi Berhasil')
+            this.props.navigation.goBack()
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+
+    }
+
+    // handle() {
+
+    //     let cardProps = {
+    //         set_card: false
+
+    //     }
+    //     this.props.setCardactive(cardProps)
+    //     console.log(this.props.set_card)
+    // }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Transfer Balance</Text>
+                </View>
+                <View style={styles.content}>
+                    <View style={styles.name_addrees_input}>
+                        <View style={styles.field_name_addrees}>
+                            <View style={{ width: 55, justifyContent: 'center' }}>
+                                <Text>Phone</Text>
+                            </View>
+                            <View style={{ flex: 1 }}>
+                                <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                    onChangeText={(destination) => this.setState({ destination })}
+                                    value={this.state.destination}
+                                    keyboardType='number-pad' />
+                            </View>
+                        </View>
+                        <View style={styles.field_detail_addrees}>
+                            <View style={{ width: 55, justifyContent: 'center' }}>
+                                <Text>Amount</Text>
+                            </View>
+                            <View style={{ flex: 1 }}>
+                                <TextInput style={{ height: 40, borderWidth: 1, padding: 5, margin: 10 }}
+                                    onChangeText={(amount) => this.setState({ amount })}
+                                    value={this.state.amount}
+                                    keyboardType='number-pad'/>
+                            </View>
+                        </View>
+                        <View style={styles.curent_balance}>
+                            <View style={{ flex: 1, margin: 10 }}>
+                                <Text style={{ fontSize: 20 }} >Current Balance </Text>
+                            </View>
+                            <View style={{ flex: 1, margin: 10 }}>
+                                <Text style={{ fontSize: 20 }}>{this.state.balance}</Text>
+                            </View>
+                        </View>
+                        <View style={styles.field_detail_addrees}>
+                            <View style={{ width: 55, justifyContent: 'center' }}>
+                                <Text>Reference</Text>
+                            </View>
+                            <View style={{ flex: 1 }}>
+                                <TextInput style={{ height: 100, borderWidth: 1, padding: 5, margin: 10 }}
+                                    onChangeText={(reference) => this.setState({ reference })}
+                                    value={this.state.reference} />
+                            </View>
+                        </View>
+                        {/* <View style={{ justifyContent: 'center', margin: 5 }}>
+                            <Button title="Activate" onPress={() => this.handle()}></Button>
+                        </View> */}
+                        <View style={{ justifyContent: 'center' }} >
+                            <Button title="SEND" onPress={() => this.handleSend()}></Button>
+                        </View>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 5,
+    },
+
+    content: {
+        flex: 3,
+        margin: 5,
+    },
+
+    field_search: {
+        flexDirection: 'row'
+    },
+
+    cont_google_map: {
+        flex: 1,
+        borderWidth: 1,
+        margin: 5,
+    },
+
+    name_addrees_input: {
+        flex: 1,
+        margin: 5,
+    },
+
+    field_name_addrees: {
+        flexDirection: 'row'
+    },
+
+    field_detail_addrees: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 40,
+        margin: 10,
+
+    },
+    curent_balance: {
+        flexDirection: 'row',
+        margin: 10,
+    },
+})
+
+const mapStateToProps = (state) => {
+    return {
+        session_id: state.session_id,
+        set_card: state.set_card
+    }
+}
+
+const mapDispatchToProps = (dispacth) => {
+    console.log(dispacth)
+    return {
+        setCardactive: (cardProps) => dispacth({
+            type: ActionType.SET_CARD,
+            data: {
+                set_card: cardProps.set_card,
+            }
+        }),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransferBalance);
\ No newline at end of file

view/UpgradePremium.js

+import React, { useState } from 'react'
+import { Camera } from 'expo-camera';
+import * as Permissions from 'expo-permissions';
+import Axios from 'axios';
+import { connect } from 'react-redux';
+import ActionType from '../redux/globalActionType';
+import * as FileSystem from 'expo-file-system';
+import Spinner from 'react-native-loading-spinner-overlay';
+import RNPickerSelect from 'react-native-picker-select';
+import {
+    View,
+    Text,
+    Picker,
+    TextInput,
+    StyleSheet,
+    ScrollView,
+    Button,
+    Image,
+    TouchableOpacity,
+    Alert
+} from 'react-native'
+
+
+const jobs = ["Pilih", "Siswa", "Mahasiswa", "Karyawan", "Pengusaha", "Lainnya"]
+class UpgradePremium extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            nama_depan: '',
+            nama_belakang: '',
+            Ktp: '',
+            tempat_lahir: '',
+            mother_name: '',
+            gaji: '',
+            pekerjaan: '',
+            alamat_permanent: '',
+            alamat_sekarang: '',
+            birthDate: '',
+            gender: '',
+            region: '',
+            city: '',
+            district: '',
+            village: '',
+            id_type: 'KTP',
+            id_value: '',
+            nationality: '',
+            provinces : [],
+            hasPermissions: null,
+            type: Camera.Constants.Type.back,
+            uri_id : this.props.URI,
+            uri_selfie : this.props.URI_IDCARD,
+            spinner: false
+        }
+    }
+
+
+    async componentDidMount() {
+        // const { status } = await Permissions.askAsync(Permissions.CAMERA);
+        // this.setState({ hasPermissions: status === 'granted' });
+        this.getProfile()
+        this.getProvince()
+        // console.log(this.props)
+    }
+
+    takePictureSelfie = () => {
+        let UriImgProps = {
+            selfie: true
+        }
+
+        this.props.setImageCapture(UriImgProps);
+        this.props.navigation.navigate("Camera")
+    };
+
+    takePictureIdcard = () => {
+        let UriidProps = {
+            idcard: true
+        }
+        this.props.setIDCapture(UriidProps);
+        this.props.navigation.navigate("Camera")
+    };
+
+    getProfile() {
+        let params = {
+            session_id: this.props.session_id
+        }
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
+            let data = res.data
+            this.setState({
+                birthDate: data.dob_day + "-" + data.dob_month + "-" + data.dob_year,
+                gender: data.gender_display
+            })
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(response.msg);
+        })
+    }
+
+    getProvince(){
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_province').then(res => {
+            let dataProv = res.data.data
+            // console.log('ini res nya prov : ' + JSON.stringify(dataProv))
+            let list_prov = []
+            for (const prov in dataProv) {
+                // console.log(dataProv[prov])
+                if (dataProv.hasOwnProperty(prov)) {
+                    const label = dataProv[prov].name
+                    const value = dataProv[prov].name + '-' + dataProv[prov].id
+                    list_prov.push({ label: label, value: value })
+                }
+                // console.log( 'ini isi list prov : ' + JSON.stringify(list_prov))
+            }
+
+            this.setState({
+                provinces : list_prov
+            })
+            // console.log('ini hasilnya : ' + JSON.stringify(this.state.provinces))
+        })
+    }
+
+    async handlePremium() {
+        this.setState({
+            spinner: true,
+        })
+        const URI = await FileSystem.readAsStringAsync(this.state.uri_selfie,{encoding: FileSystem.EncodingType.Base64 });
+        const URI_IDCARD = await FileSystem.readAsStringAsync(this.state.uri_id,{ encoding: FileSystem.EncodingType.Base64 });
+        // const URI = await FileSystem.readAsStringAsync(this.state.uri_selfie,{encoding:'base64'});
+        let params = {
+            session_id: this.props.session_id,
+            first_name: this.state.nama_depan,
+            last_name: this.state.nama_belakang,
+            birth_place: this.state.tempat_lahir,
+            birth_date: this.state.birthDate,
+            gender: this.state.gender,
+            address_permanent: this.state.alamat_permanent,
+            region: this.state.region,
+            city: this.state.city,
+            specific_address: this.state.alamat_permanent,
+            district: this.state.district,
+            village: this.state.village,
+            occupation: this.state.pekerjaan,
+            id_type: this.state.id_type,
+            id_value: this.state.id_value,
+            nationality: this.state.nationality,
+            customer_image: URI_IDCARD,
+            id_card_image: URI
+        }
+
+        // console.log(params.customer_image);
+        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/card/upgrade_premium', params).then(res => {
+            console.log('ini res ' + JSON.stringify(res.data))
+            Alert.alert(
+                '',
+                'Permintaan upgrade premium anda telah kami terima, mohon menunggu 1x24 jam!'
+                ,
+            )
+            this.setState({
+                spinner: false,
+            })
+            navigation.reset({
+                index: 0,
+                routes: [
+                  {
+                    name: 'Home',
+                    params: { someParam: 'Param1' },
+                  },
+                ],
+              })
+        }).catch(error => {
+            let response = error.response.data;
+            Alert.alert(
+                '',
+                response.msg,
+            )
+            this.setState({
+                spinner: false,
+            })
+            this.props.navigation.reset({
+                index: 0,
+                routes: [
+                  {
+                    name: 'Home',
+                  },
+                ],
+              })
+        })
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Spinner
+                    visible={this.state.spinner}
+                    textContent={'Loading...'}
+                    textStyle={styles.spinnerTextStyle}
+                />
+                <ScrollView>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Nama Depan</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(nama_depan) => this.setState({ nama_depan })}
+                            value={this.state.nama_depan}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Nama Belakang</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(nama_belakang) => this.setState({ nama_belakang })}
+                            value={this.state.nama_belakang}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Tempat Lahir</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(tempat_lahir) => this.setState({ tempat_lahir })}
+                            value={this.state.tempat_lahir}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Alamat Permanen</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 90, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(alamat_permanent) => this.setState({ alamat_permanent })}
+                            value={this.state.alamat_permanent}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Provinsi</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(region) => this.setState({ region })}
+                            value={this.state.region}
+                        />
+                        {/* <RNPickerSelect
+                                value={this.state.region}
+                                placeholderTextColor='gray'
+                                onValueChange={(value) => this.setState({ region : value})}
+                                items= {this.state.provinces} /> */}
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Kota</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(city) => this.setState({ city })}
+                            value={this.state.city}
+                        />
+                        {/* <RNPickerSelect
+                                value={this.state.city}
+                                placeholderTextColor='gray'
+                                onValueChange={(value) => this.setState({ city : value})}
+                                items= {this.state.provinces} /> */}
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Kecamatan</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(district) => this.setState({ district })}
+                            value={this.state.district}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Kelurahan</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(village) => this.setState({ village })}
+                            value={this.state.village}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Pekerjaan</Text>
+                    </View>
+                    <View style={{ margin: 10, borderColor: 'gray', borderWidth: 1 }}>
+                        <Picker
+                            mode="dropdown"
+                            selectedValue={this.state.pekerjaan}
+                            style={{ height: 40 }}
+                            onValueChange={(itemValue, itemIndex) => this.setState({ pekerjaan: itemValue })}>
+                            {jobs.map((itemValue, itemIndex) => {
+                                return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
+                            })}
+
+                        </Picker>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>KTP</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(id_value) => this.setState({ id_value })}
+                            value={this.state.id_value}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Kebangsaan</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TextInput
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
+                            onChangeText={(nationality) => this.setState({ nationality })}
+                            value={this.state.nationality}
+                        />
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Upload Foto Diri</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TouchableOpacity onPress={() => this.takePictureSelfie()}>
+                            <View style={{ height: 90, borderColor: 'gray', borderWidth: 1 }}>
+                                {
+                                    this.props.URI === '' ?(
+                                        null
+                                    ):(
+
+                                        <Image
+                                            style={{ width: 90, height: 80, alignSelf: 'center', }}
+                                            source={{ uri: this.props.URI }}
+                                        />
+                                    )
+                                }
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10 }}>
+                        <Text style={{ top: 5 }}>Upload Foto KTP</Text>
+                    </View>
+                    <View style={{ margin: 10 }}>
+                        <TouchableOpacity onPress={() => this.takePictureIdcard()}>
+                            <View style={{ height: 90, borderColor: 'gray', borderWidth: 1 }}>
+                                {
+                                    this.props.URI_IDCARD === '' ? (
+                                        null
+                                    ):(
+                                        <Image
+                                            style={{ width: 90, height: 80, alignSelf: 'center', }}
+                                            source={{ uri: this.props.URI_IDCARD }}
+                                        />
+                                    )
+                                }
+                            </View>
+                        </TouchableOpacity>
+                    </View>
+                    <View style={{ marginRight: 10, marginLeft: 10, marginBottom: 15 }}>
+                        <Button
+                            title="Upgrade Premium"
+                            onPress={() => this.handlePremium()}
+                        />
+                    </View>
+                </ScrollView>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'white'
+
+    }
+})
+
+const mapDispatchToProps = (dispacth) => {
+    return {
+        setImageCapture: (UriImgProps) => dispacth({
+            type: ActionType.SET_CHANGE_IMAGE_SELFI,
+            data: {
+                selfie: UriImgProps.selfie
+            }
+        }),
+        setIDCapture: (UriidProps) => dispacth({
+            type: ActionType.SET_CHANGE_IMAGE_ID,
+            data: {
+                idcard: UriidProps.idcard
+            }
+        })
+    }
+
+
+}
+
+const mapStateToProps = (state) => {
+    return {
+
+        session_id: state.session_id,
+        URI: state.URI,
+        URI_IDCARD: state.URI_IDCARD,
+        BASE64_ID: state.BASE64_ID,
+        BASE64_SELFIE: state.BASE64_SELFIE,
+        img64: state.img64,
+        id_card64: state.id_card64
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(UpgradePremium);

view/VerifyEmail.js

+import React from 'react';
+import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
+export default class VerifyEmail extends React.Component {
+
+    submit() {
+        console.log('hai');
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={{ textAlign: 'center', marginTop: 10, fontSize: 25 }}>Verify Email</Text>
+                </View>
+                <View style={styles.form}>
+                    <View style={styles.field_email}>
+                        <View style={{ width: 55, justifyContent: 'center' }}>
+                            <Text>Email</Text>
+                        </View>
+                        <View style={{ flex: 1 }}>
+                            <TextInput style={{ height: 50, borderWidth: 1, padding: 5, margin: 10 }} />
+                        </View>
+                    </View>
+                    <View style={styles.button}>
+                        <Button title="Submit" onPress={() => this.submit()}></Button>
+                    </View>
+                    <View style={{alignItems:'center'}}>
+                        <Text>Resend email token</Text>
+                        <Text>Change Email</Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        backgroundColor: '#ffff'
+    },
+
+    header: {
+        flex: 0.5,
+        margin: 10,
+    },
+
+    form: {
+        flex: 3,
+        margin: 10,
+        marginTop: 0,
+    },
+
+    field_email: {
+        flexDirection: 'row'
+    },
+
+    button: {
+        height: 50,
+        margin: 10,
+
+    }
+
+})
\ No newline at end of file