[]merchant register

App.js

@@ -11,9 +11,11 @@ import AppNavigator from 'navigations';
 import {Provider} from 'react-redux';
 import configureStore from 'store';
 import {PersistGate} from 'redux-persist/integration/react';
+import {enableLatestRenderer} from 'react-native-maps';
 import 'moment/locale/id';
 import 'utilities/i18';
 
+enableLatestRenderer();
 const App = () => {
   const {persistor, store} = configureStore();
   return (

android/app/src/main/AndroidManifest.xml

@@ -10,6 +10,9 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
+      <meta-data
+        android:name="com.google.android.geo.API_KEY"
+        android:value="AIzaSyDQxgkmGEMFgK3quz0dAd4aWH9FiuCUOV4"/>
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

ios/Podfile

@@ -1,12 +1,17 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '12.4'
+platform :ios, '13.0'
 install! 'cocoapods', :deterministic_uuids => false
 
 target 'ebogaMerchant' do
+  # React Native Maps dependencies
+  rn_maps_path = '../node_modules/react-native-maps'
+  pod 'react-native-google-maps', :path => rn_maps_path
+  
   config = use_native_modules!
 
+
   # Flags change depending on the env values.
   flags = get_default_flags()
 

ios/Podfile.lock

@@ -73,6 +73,30 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - fmt (6.2.1)
   - glog (0.3.5)
+  - Google-Maps-iOS-Utils (4.1.0):
+    - Google-Maps-iOS-Utils/Clustering (= 4.1.0)
+    - Google-Maps-iOS-Utils/Geometry (= 4.1.0)
+    - Google-Maps-iOS-Utils/GeometryUtils (= 4.1.0)
+    - Google-Maps-iOS-Utils/Heatmap (= 4.1.0)
+    - Google-Maps-iOS-Utils/QuadTree (= 4.1.0)
+    - GoogleMaps
+  - Google-Maps-iOS-Utils/Clustering (4.1.0):
+    - Google-Maps-iOS-Utils/QuadTree
+    - GoogleMaps
+  - Google-Maps-iOS-Utils/Geometry (4.1.0):
+    - GoogleMaps
+  - Google-Maps-iOS-Utils/GeometryUtils (4.1.0):
+    - GoogleMaps
+  - Google-Maps-iOS-Utils/Heatmap (4.1.0):
+    - Google-Maps-iOS-Utils/QuadTree
+    - GoogleMaps
+  - Google-Maps-iOS-Utils/QuadTree (4.1.0):
+    - GoogleMaps
+  - GoogleMaps (7.0.0):
+    - GoogleMaps/Maps (= 7.0.0)
+  - GoogleMaps/Base (7.0.0)
+  - GoogleMaps/Maps (7.0.0):
+    - GoogleMaps/Base
   - hermes-engine (0.70.6)
   - libevent (2.1.12)
   - OpenSSL-Universal (1.1.1100)
@@ -302,6 +326,12 @@ PODS:
   - React-jsinspector (0.70.6)
   - React-logger (0.70.6):
     - glog
+  - react-native-google-maps (1.3.2):
+    - Google-Maps-iOS-Utils (= 4.1.0)
+    - GoogleMaps (= 7.0.0)
+    - React-Core
+  - react-native-maps (1.3.2):
+    - React-Core
   - react-native-safe-area-context (4.4.1):
     - RCT-Folly
     - RCTRequired
@@ -435,6 +465,8 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-google-maps (from `../node_modules/react-native-maps`)
+  - react-native-maps (from `../node_modules/react-native-maps`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -467,6 +499,8 @@ SPEC REPOS:
     - Flipper-RSocket
     - FlipperKit
     - fmt
+    - Google-Maps-iOS-Utils
+    - GoogleMaps
     - libevent
     - OpenSSL-Universal
     - SocketRocket
@@ -515,6 +549,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-google-maps:
+    :path: "../node_modules/react-native-maps"
+  react-native-maps:
+    :path: "../node_modules/react-native-maps"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   React-perflogger:
@@ -569,6 +607,8 @@ SPEC CHECKSUMS:
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  Google-Maps-iOS-Utils: 3343332b18dfd5be8f1f44edd7d481ace3da4d9a
+  GoogleMaps: 6e9c923ca035989709fcb5771544fda4cc5fa2a4
   hermes-engine: 2af7b7a59128f250adfd86f15aa1d5a2ecd39995
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -587,6 +627,8 @@ SPEC CHECKSUMS:
   React-jsiexecutor: b4a65947391c658450151275aa406f2b8263178f
   React-jsinspector: 60769e5a0a6d4b32294a2456077f59d0266f9a8b
   React-logger: 1623c216abaa88974afce404dc8f479406bbc3a0
+  react-native-google-maps: 035ad2f9b4974f22af3d4d4c6993960a181b0aaf
+  react-native-maps: 085f614cf14d3637b2048bb9752da5b1c27c2886
   react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
   React-perflogger: 8c79399b0500a30ee8152d0f9f11beae7fc36595
   React-RCTActionSheet: 7316773acabb374642b926c19aef1c115df5c466
@@ -608,6 +650,6 @@ SPEC CHECKSUMS:
   Yoga: 99caf8d5ab45e9d637ee6e0174ec16fbbb01bcfc
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: a700021d3d8e9f7f95b629963305cc2bdad8bd83
+PODFILE CHECKSUM: c8cae34a1edb4622be93441776d459ca2bef90a2
 
 COCOAPODS: 1.11.3

ios/ebogaMerchant.xcodeproj/project.pbxproj

@@ -564,6 +564,7 @@
 				CURRENT_PROJECT_VERSION = 1;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = ebogaMerchant/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -589,6 +590,7 @@
 				CLANG_ENABLE_MODULES = YES;
 				CURRENT_PROJECT_VERSION = 1;
 				INFOPLIST_FILE = ebogaMerchant/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",

ios/ebogaMerchant/AppDelegate.mm

@@ -4,6 +4,8 @@
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
+#import <GoogleMaps/GoogleMaps.h>
+
 #import <React/RCTAppSetupUtils.h>
 
 #if RCT_NEW_ARCH_ENABLED
@@ -31,6 +33,7 @@ static NSString *const kRNConcurrentRoot = @"concurrentRoot";
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+  [GMSServices provideAPIKey:@"AIzaSyAsUsHDC4CO5ZuqVllrTAJ-h6pCgY0MrQ8"];
   RCTAppSetupPrepareApp(application);
 
   RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

ios/ebogaMerchant/Info.plist

@@ -36,7 +36,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string/>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>

package.json

@@ -23,7 +23,10 @@
     "react": "18.1.0",
     "react-i18next": "^12.0.0",
     "react-native": "0.70.6",
+    "react-native-currency-input": "^1.1.0",
+    "react-native-dropdown-picker": "^5.4.3",
     "react-native-localize": "^2.2.4",
+    "react-native-maps": "^1.3.2",
     "react-native-modal": "^13.0.1",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^4.4.1",

src/components/Header/styles.js

@@ -35,7 +35,7 @@ export default StyleSheet.create({
   },
   smTitle: {
     fontFamily: FONTS.poppins[600],
-    fontSize: RFValue(14),
+    fontSize: RFValue(13),
     color: Colors.TEXT,
     marginTop: width * 0.005,
   },

src/components/Input/_currency.js

@@ -1,6 +1,96 @@
-import React from 'react';
+import React, {useState} from 'react';
+import {View, TextInput, StyleSheet, Dimensions, Text} from 'react-native';
+import {Colors, FONTS} from 'global-styles';
+import {RFValue} from 'react-native-responsive-fontsize';
+import CurrencyInput from 'react-native-currency-input';
+import {Icon} from 'components';
+const {width} = Dimensions.get('window');
 
 const _Currency = props => {
-  return null;
+  const {label, editable, note, error, required} = props;
+  const [isFocused, setIsFocused] = useState(false);
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={styles.label}>
+          {label}
+          {required && <Text style={{color: Colors.RED}}>*</Text>}
+        </Text>
+      )}
+      <View style={styles.inputSection(editable)}>
+        <CurrencyInput
+          {...props}
+          prefix="Rp"
+          delimiter="."
+          minValue={0}
+          precision={0}
+          style={styles.input(isFocused)}
+          editable={editable}
+          onChange={e => setIsFocused(e.nativeEvent.text.length > 0)}
+          placeholderTextColor={Colors.GREY}
+        />
+      </View>
+      {note && <Text style={styles.note}>{note}</Text>}
+      {error && (
+        <View style={styles.errorSection}>
+          <Icon name="error" type="MaterialIcons" style={styles.errorIcon} />
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+    </View>
+  );
 };
+
+_Currency.defaultProps = {
+  editable: true,
+  note: undefined,
+  error: undefined,
+  required: false,
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  label: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(11.5),
+    color: Colors.TEXT,
+  },
+  inputSection: editable => ({
+    height: width * 0.12,
+    borderWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    borderRadius: width * 0.02,
+    marginVertical: width * 0.023,
+    justifyContent: 'center',
+    paddingHorizontal: width * 0.04,
+    backgroundColor: editable ? Colors.WHITE : Colors.DISABLED,
+  }),
+  input: isFocused => ({
+    fontFamily: FONTS.poppins[isFocused ? 500 : 400],
+    fontSize: RFValue(isFocused ? 13 : 12),
+    color: Colors.TEXT,
+  }),
+  note: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(10),
+    color: Colors.TEXT_LIGHT,
+    marginTop: -width * 0.005,
+  },
+  errorSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: width * 0.002,
+  },
+  errorIcon: {
+    color: Colors.RED,
+  },
+  errorText: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(10),
+    color: Colors.RED,
+    marginTop: -width * 0.001,
+    marginLeft: width * 0.01,
+  },
+});
+
 export default _Currency;

src/components/Input/_maps.js

@@ -0,0 +1,383 @@
+import React, {useState} from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  Text,
+  TouchableOpacity,
+  TextInput,
+} from 'react-native';
+import {Colors, FONTS} from 'global-styles';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Icon} from 'components';
+import Modal from 'react-native-modal';
+import {useTranslation} from 'react-i18next';
+import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';
+const {width, height} = Dimensions.get('window');
+
+let coordinateX = {
+  latitude: 37.78825,
+  longitude: -122.4324,
+  latitudeDelta: 0.0922,
+  longitudeDelta: 0.0421,
+};
+
+const _Maps = props => {
+  const {t} = useTranslation();
+  const [modal, setModal] = useState(false);
+  const [coordinate, setCoordinate] = useState({});
+  const {label, note, error, required} = props;
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={styles.label}>
+          {label}
+          {required && <Text style={{color: Colors.RED}}>*</Text>}
+        </Text>
+      )}
+      <TouchableOpacity
+        activeOpacity={0.5}
+        onPress={() => setModal(true)}
+        style={styles.inputSection}>
+        <Icon
+          name="map-marker-radius"
+          type="MaterialCommunityIcons"
+          style={styles.mapIcon}
+        />
+        <Text style={styles.inputPlaceholder}>Pilih lokasi</Text>
+      </TouchableOpacity>
+      {note && <Text style={styles.note}>{note}</Text>}
+      {error && (
+        <View style={styles.errorSection}>
+          <Icon name="error" type="MaterialIcons" style={styles.errorIcon} />
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      <Modal isVisible={modal} style={styles.modal}>
+        <View style={styles.modalSection}>
+          <TouchableOpacity
+            onPress={() => setModal(false)}
+            style={styles.buttonClose}>
+            <Icon
+              name="close"
+              type="AntDesign"
+              style={styles.buttonCloseIcon}
+            />
+          </TouchableOpacity>
+          <View style={styles.content}>
+            <View style={styles.header}>
+              <Text style={styles.title}>
+                {t('select_outlet_location_text')}
+              </Text>
+              {coordinate?.latitude ? (
+                <TouchableOpacity
+                  onPress={() => setCoordinate({})}
+                  style={styles.buttonSearch}>
+                  <Icon
+                    name="search"
+                    type="Feather"
+                    style={styles.searchIcon}
+                  />
+                </TouchableOpacity>
+              ) : (
+                <View style={styles.inputSearchSection}>
+                  <TextInput style={styles.input} placeholder="Cari" />
+                  <Icon
+                    name="search"
+                    type="Feather"
+                    style={styles.searchIcon}
+                  />
+                </View>
+              )}
+            </View>
+
+            {!coordinate?.latitude && (
+              <View style={styles.locationContainer}>
+                <TouchableOpacity
+                  activeOpacity={0.7}
+                  onPress={() =>
+                    setCoordinate({
+                      latitude: 37.78825,
+                      longitude: -122.4324,
+                      latitudeDelta: 0.0922,
+                      longitudeDelta: 0.0421,
+                    })
+                  }
+                  style={styles.locationSection}>
+                  <Icon
+                    name="my-location"
+                    type="MaterialIcons"
+                    style={styles.myLoationIcon}
+                  />
+                  <View style={styles.locationInfoSection(true)}>
+                    <Text style={styles.locationInfoName}>
+                      Warung Sop & Sate Sapi Pak Bayu
+                    </Text>
+                    <Text numberOfLines={2} style={styles.locationInfoAddress}>
+                      Jl. Yudistiro No.2, RT.05/RW.11, Palgading, Sinduharjo,
+                      Kec. Ngaglik, Kabupaten Sleman, Daerah Istimewa Yogyakarta
+                      55581
+                    </Text>
+                  </View>
+                </TouchableOpacity>
+              </View>
+            )}
+
+            {coordinate?.latitude && (
+              <React.Fragment>
+                <View style={styles.mapSection}>
+                  <MapView
+                    provider={PROVIDER_GOOGLE} // remove if not using Google Maps
+                    style={styles.map}
+                    region={coordinate}>
+                    <Marker
+                      coordinate={coordinate}
+                      title={'title'}
+                      description={'description'}
+                    />
+                  </MapView>
+                </View>
+                <View style={styles.buttonSection}>
+                  <TouchableOpacity
+                    activeOpacity={0.7}
+                    onPress={() =>
+                      setCoordinate({
+                        latitude: 37.78825,
+                        longitude: -122.4324,
+                        latitudeDelta: 0.0922,
+                        longitudeDelta: 0.0421,
+                      })
+                    }
+                    style={styles.locationSection}>
+                    <Icon
+                      name="my-location"
+                      type="MaterialIcons"
+                      style={styles.myLoationIcon}
+                    />
+                    <View style={styles.locationInfoSection(false)}>
+                      <Text style={styles.locationInfoName}>
+                        Warung Sop & Sate Sapi Pak Bayu
+                      </Text>
+                      <Text
+                        numberOfLines={2}
+                        style={styles.locationInfoAddress}>
+                        Jl. Yudistiro No.2, RT.05/RW.11, Palgading, Sinduharjo,
+                        Kec. Ngaglik, Kabupaten Sleman, Daerah Istimewa
+                        Yogyakarta 55581
+                      </Text>
+                    </View>
+                  </TouchableOpacity>
+                  <TouchableOpacity
+                    onPress={() => alert('saved')}
+                    style={styles.button}>
+                    <Text style={styles.buttonTitle}>{t('save')}</Text>
+                  </TouchableOpacity>
+                </View>
+              </React.Fragment>
+            )}
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+_Maps.defaultProps = {
+  note: undefined,
+  error: undefined,
+  required: false,
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  label: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(11.5),
+    color: Colors.TEXT,
+  },
+  inputSection: {
+    height: width * 0.45,
+    borderWidth: 1,
+    borderColor: Colors.DISABLED,
+    borderRadius: width * 0.02,
+    marginVertical: width * 0.023,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: width * 0.04,
+    backgroundColor: Colors.DISABLED,
+    flexDirection: 'row',
+  },
+  mapIcon: {
+    fontSize: RFValue(18),
+    color: Colors.PRIMARY,
+  },
+  inputPlaceholder: {
+    fontFamily: FONTS.poppins[500],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+    marginTop: width * 0.003,
+    marginLeft: width * 0.01,
+  },
+  note: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(10),
+    color: Colors.TEXT_LIGHT,
+    marginTop: -width * 0.005,
+  },
+  errorSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: width * 0.002,
+  },
+  errorIcon: {
+    color: Colors.RED,
+  },
+  errorText: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(10),
+    color: Colors.RED,
+    marginTop: -width * 0.001,
+    marginLeft: width * 0.01,
+  },
+
+  // modal styled
+  modal: {
+    margin: 0,
+  },
+  modalSection: {
+    flex: 1,
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  content: {
+    height: width * 1.9,
+    backgroundColor: Colors.WHITE,
+    // paddingVertical: width * 0.04,
+    // paddingHorizontal: width * 0.05,
+    borderTopLeftRadius: width * 0.05,
+    borderTopRightRadius: width * 0.05,
+  },
+  header: {
+    paddingVertical: width * 0.05,
+    paddingHorizontal: width * 0.05,
+  },
+  title: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(13),
+    color: Colors.TEXT,
+  },
+  inputSearchSection: {
+    height: width * 0.12,
+    borderWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    borderRadius: width * 0.02,
+    marginVertical: width * 0.023,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: width * 0.04,
+    backgroundColor: Colors.DISABLED,
+    flexDirection: 'row',
+  },
+  searchIcon: {
+    fontSize: RFValue(20),
+    color: Colors.GREY,
+  },
+  input: {
+    flex: 1,
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(13),
+    color: Colors.TEXT,
+  },
+  locationContainer: {
+    paddingHorizontal: width * 0.05,
+  },
+  locationSection: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: width * 0.03,
+  },
+  myLoationIcon: {
+    fontSize: RFValue(16),
+    color: Colors.TEXT,
+    marginRight: width * 0.03,
+  },
+  locationInfoSection: isBordered => ({
+    flex: 1,
+    borderBottomWidth: isBordered ? 1 : 0,
+    borderBottomColor: Colors.LINE_STROKE,
+    paddingBottom: width * 0.04,
+  }),
+  locationInfoName: {
+    fontFamily: FONTS.poppins[500],
+    fontSize: RFValue(12),
+    color: Colors.TEXT,
+    marginTop: -width * 0.002,
+    marginBottom: width * 0.008,
+  },
+  locationInfoAddress: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+  },
+
+  buttonSearch: {
+    position: 'absolute',
+    right: width * 0.05,
+    top: width * 0.046,
+  },
+
+  // maps section
+  mapSection: {
+    // height: width * 1.2,
+    height: height,
+    width: width,
+  },
+  map: {
+    flex: 1,
+    height: height - 0.5,
+  },
+  buttonClose: {
+    backgroundColor: Colors.WHITE,
+    width: width * 0.09,
+    height: width * 0.09,
+    borderRadius: width,
+    marginBottom: width * 0.03,
+    alignSelf: 'flex-end',
+    marginRight: width * 0.03,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonCloseIcon: {
+    fontSize: RFValue(20),
+    color: Colors.TEXT,
+  },
+
+  buttonSection: {
+    width: width,
+    backgroundColor: Colors.WHITE,
+    position: 'absolute',
+    bottom: 0,
+    height: width * 0.5,
+    paddingVertical: width * 0.05,
+    paddingHorizontal: width * 0.05,
+    borderTopLeftRadius: width * 0.04,
+    borderTopRightRadius: width * 0.04,
+  },
+  button: {
+    backgroundColor: Colors.PRIMARY,
+    height: width * 0.11,
+    borderRadius: width * 0.015,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: width * 0.05,
+  },
+  buttonTitle: {
+    fontFamily: FONTS.poppins[500],
+    color: Colors.WHITE,
+    fontSize: RFValue(12),
+    marginTop: width * 0.005,
+  },
+});
+
+export default _Maps;

src/components/Input/_phone.js

@@ -6,16 +6,21 @@ import {Icon} from 'components';
 const {width} = Dimensions.get('window');
 
 const _Phone = props => {
-  const {label, editable, note, error} = props;
+  const {label, editable, note, error, required} = props;
   const [isFocused, setIsFocused] = useState(false);
   return (
     <View style={styles.container}>
-      {label && <Text style={styles.label}>{label}</Text>}
+      {label && (
+        <Text style={styles.label}>
+          {label} {required && <Text style={{color: Colors.RED}}>*</Text>}
+        </Text>
+      )}
       <View style={styles.inputSection(editable)}>
         <View style={styles.numberIdSection}>
           <Text style={styles.numberIdText}>🇮🇩 +62</Text>
         </View>
         <TextInput
+          {...props}
           style={styles.input(isFocused)}
           editable={editable}
           keyboardType="decimal-pad"
@@ -38,6 +43,7 @@ _Phone.defaultProps = {
   editable: true,
   note: undefined,
   error: undefined,
+  required: false,
 };
 
 const styles = StyleSheet.create({

src/components/Input/_select.js

@@ -0,0 +1,158 @@
+import React, {useState} from 'react';
+import {View, TextInput, StyleSheet, Dimensions, Text} from 'react-native';
+import {Colors, FONTS} from 'global-styles';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Icon} from 'components';
+import DropDownPicker from 'react-native-dropdown-picker';
+const {width} = Dimensions.get('window');
+
+const _Select = props => {
+  const {
+    label,
+    editable,
+    note,
+    error,
+    placeholder,
+    required,
+    data,
+    value,
+    onChangeValue,
+    searchable,
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState(data);
+  return (
+    <View style={styles.container(open)}>
+      {label && (
+        <Text style={styles.label}>
+          {label} {required && <Text style={{color: Colors.RED}}>*</Text>}
+        </Text>
+      )}
+      <View style={styles.inputSection(editable)}>
+        <DropDownPicker
+          open={open}
+          value={value}
+          items={items}
+          disabled={!editable}
+          setOpen={setOpen}
+          setValue={onChangeValue}
+          setItems={setItems}
+          searchable={searchable}
+          placeholder={placeholder}
+          listMode="SCROLLVIEW"
+          scrollViewProps={{
+            nestedScrollEnabled: true,
+          }}
+          searchContainerStyle={{
+            borderBottomColor: Colors.LINE_STROKE,
+          }}
+          searchTextInputStyle={{
+            borderColor: Colors.LINE_STROKE,
+            fontSize: RFValue(12),
+          }}
+          style={styles.dropdown}
+          placeholderStyle={styles.dropdownPlaceholder}
+          dropDownContainerStyle={styles.dropdownContent}
+          textStyle={styles.dropdownText}
+        />
+      </View>
+      {note && <Text style={styles.note}>{note}</Text>}
+      {error && (
+        <View style={styles.errorSection}>
+          <Icon name="error" type="MaterialIcons" style={styles.errorIcon} />
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+_Select.defaultProps = {
+  editable: true,
+  note: undefined,
+  error: undefined,
+  required: false,
+  placeholder: '',
+  data: [],
+  value: '',
+  onChangeValue: () => {},
+  searchable: false,
+};
+
+const styles = StyleSheet.create({
+  container: isOpen => ({
+    zIndex: isOpen ? 10 : 1,
+  }),
+  label: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(11.5),
+    color: Colors.TEXT,
+  },
+  inputSection: editable => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: width * 0.12,
+    borderWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    borderRadius: width * 0.02,
+    marginVertical: width * 0.023,
+    backgroundColor: editable ? Colors.WHITE : Colors.DISABLED,
+  }),
+  dropdown: {
+    height: width * 0.12,
+    borderWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    borderRadius: width * 0.02,
+    paddingHorizontal: width * 0.04,
+  },
+  dropdownPlaceholder: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(12),
+    color: Colors.GREY,
+  },
+  dropdownContent: {
+    borderWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    backgroundColor: Colors.WHITE,
+  },
+  dropdownText: {
+    fontFamily: FONTS.poppins[500],
+    fontSize: RFValue(13),
+    color: Colors.TEXT,
+  },
+  note: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(10),
+    color: Colors.TEXT_LIGHT,
+    marginTop: -width * 0.005,
+  },
+  errorSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: width * 0.002,
+  },
+  errorIcon: {
+    color: Colors.RED,
+  },
+  errorText: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(10),
+    color: Colors.RED,
+    marginTop: -width * 0.001,
+    marginLeft: width * 0.01,
+  },
+  numberIdSection: {
+    height: width * 0.11,
+    backgroundColor: Colors.DISABLED,
+    borderRightWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    borderTopLeftRadius: width * 0.02,
+    borderBottomLeftRadius: width * 0.02,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: width * 0.02,
+  },
+  numberIdText: {},
+});
+
+export default _Select;

src/components/Input/_text.js

@@ -6,13 +6,19 @@ import {Icon} from 'components';
 const {width} = Dimensions.get('window');
 
 const _Text = props => {
-  const {label, editable, note, error} = props;
+  const {label, editable, note, error, required} = props;
   const [isFocused, setIsFocused] = useState(false);
   return (
     <View style={styles.container}>
-      {label && <Text style={styles.label}>{label}</Text>}
+      {label && (
+        <Text style={styles.label}>
+          {label}
+          {required && <Text style={{color: Colors.RED}}>*</Text>}
+        </Text>
+      )}
       <View style={styles.inputSection(editable)}>
         <TextInput
+          {...props}
           style={styles.input(isFocused)}
           editable={editable}
           onChange={e => setIsFocused(e.nativeEvent.text.length > 0)}
@@ -34,6 +40,7 @@ _Text.defaultProps = {
   editable: true,
   note: undefined,
   error: undefined,
+  required: false,
 };
 
 const styles = StyleSheet.create({
@@ -55,7 +62,7 @@ const styles = StyleSheet.create({
   }),
   input: isFocused => ({
     fontFamily: FONTS.poppins[isFocused ? 500 : 400],
-    fontSize: RFValue(13),
+    fontSize: RFValue(isFocused ? 13 : 12),
     color: Colors.TEXT,
   }),
   note: {

src/components/Input/index.js

@@ -4,6 +4,8 @@ import React from 'react';
 import InputText from './_text';
 import InputPhone from './_phone';
 import InputCurrency from './_currency';
+import InputSelect from './_select';
+import InputMaps from './_maps';
 
 const Input = props => {
   switch (props.type) {
@@ -13,11 +15,15 @@ const Input = props => {
       return <InputPhone {...props} />;
     case 'currency':
       return <InputCurrency {...props} />;
+    case 'select':
+      return <InputSelect {...props} />;
+    case 'maps':
+      return <InputMaps {...props} />;
   }
 };
 
 Input.propTypes = {
-  type: PropTypes.oneOf(['text', 'phone', 'currency', 'dropdown']),
+  type: PropTypes.oneOf(['text', 'phone', 'currency', 'select', 'maps']),
 };
 
 Input.defaultProps = {

src/components/Note/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {View, Text, Dimensions, StyleSheet} from 'react-native';
+import {Icon} from 'components';
+import {Colors, FONTS} from 'global-styles';
+import {RFValue} from 'react-native-responsive-fontsize';
+const {width} = Dimensions.get('window');
+
+const Note = props => {
+  const {message} = props;
+  return (
+    <View style={styles.container}>
+      <Icon name="info" type="Feather" style={styles.icon} />
+      <View style={styles.messageSection}>
+        <Text style={styles.message}>{message}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.BLUE,
+    paddingVertical: width * 0.03,
+    paddingHorizontal: width * 0.04,
+    borderRadius: width * 0.02,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    minHeight: width * 0.17,
+  },
+  messageSection: {
+    paddingLeft: width * 0.02,
+    marginTop: -width * 0.004,
+  },
+  message: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11.5),
+    color: Colors.WHITE,
+  },
+  icon: {
+    fontSize: RFValue(14),
+    color: Colors.WHITE,
+  },
+});
+
+export default Note;

src/components/index.js

@@ -7,6 +7,7 @@ import ProductRegular from './Product/ProductRegular';
 import Button from './Button';
 import Header from './Header';
 import Input from './Input';
+import Note from './Note';
 
 export {
   Container,
@@ -18,4 +19,5 @@ export {
   Button,
   Header,
   Input,
+  Note,
 };

src/constants/translations/en/common.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 export default {
   login: 'Login',
   register: 'Register',
@@ -10,4 +11,35 @@ export default {
   phone_issue: 'Problem Phone Number?',
   or_text: 'Or',
   welcome_text: 'Welcome Again!',
+  register_merchant_title: 'Registration is free of charge.',
+  register_merchant_subtitle: 'Enter the business owner`s information to start joining.',
+  partner_with_us_text: 'Partner with us',
+  full_name_of_business_owner_text: 'Full name of business owner',
+  full_name_of_business_owner_note: 'Fill in according to the name on the identity card.',
+  phone_number_business_owner_text: 'Business owner`s telephone number',
+  phone_number_business_owner_note: 'Please make sure the number listed is an active phone number and registered on WhatsApp.',
+  email_business_owner_text: 'Business owner e-mail',
+  email_business_owner_note: 'Please fill in with an active and correct email address.',
+  join_as_a_partner_text: 'Join as a partner',
+  merchant_registration_title: 'Merchant registration',
+  complete_your_business_data_text: 'Complete your business data.',
+  business_summary_title: 'Business Summary',
+  business_name_text: 'Business name',
+  business_name_note: 'Fill with [Restaurant/Brand Name], [Zone/Street Name].',
+  business_category_text: 'Business category',
+  average_daily_sales: 'Average daily sales',
+  average_monthly_sales: 'Average monthly sales',
+  outlet_summary_title: 'Outlet summary',
+  select_outlet_location_text: 'Select outlet location',
+  outlet_full_address_text: 'Outlet full address',
+  outlet_full_address_note: 'Please fill out the address completely by including your name Roads, sub-districts, districts, regencies/cities',
+  province_text: 'Province',
+  district_text: 'Districts',
+  postal_code_text: 'Postal code',
+  outlet_image_text: 'Outlet image',
+  outlet_image_note: 'Click to take a picture',
+  bank_account_information_title: 'Bank Account Information',
+  account_holder_name_text: 'Account holder name',
+  bank_name_text: 'Bank name',
+  account_number_text: 'Account number',
 };

src/constants/translations/id/common.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 export default {
   login: 'Masuk',
   register: 'Daftar',
@@ -10,4 +11,35 @@ export default {
   phone_issue: 'No.Telepon Bermasalah?',
   or_text: 'Atau',
   welcome_text: 'Selamat Datang!',
+  register_merchant_title: 'Pendaftaran tidak dipungut biaya.',
+  register_merchant_subtitle: 'Masukkan informasi pemilik usaha untuk memulai bergabung.',
+  partner_with_us_text: 'Bermitra dengan kami',
+  full_name_of_business_owner_text: 'Nama lengkap pemilik usaha',
+  full_name_of_business_owner_note: 'Isi sesuai dengan nama pada kartu identitas.',
+  phone_number_business_owner_text: 'No.Telepon pemilik usaha',
+  phone_number_business_owner_note: 'Mohon pastikan nomor yang tertera adalah nomor telepon aktif dan terdaftar di WhatsApp.',
+  email_business_owner_text: 'Email pemilik usaha',
+  email_business_owner_note: 'Harap isi dengan alamat email yang aktif dan benar.',
+  join_as_a_partner_text: 'Gabung sebagai mitra',
+  merchant_registration_title: 'Pendaftaran merchant',
+  complete_your_business_data_text: 'Lengkapi data usaha anda.',
+  business_summary_title: 'Informasi Usaha',
+  business_name_text: 'Nama usaha',
+  business_name_note: 'Isi dengan [Nama Restoran/Merek], [Nama Zona/Jalan].',
+  business_category_text: 'Kategori usaha',
+  average_daily_sales: 'Pendapatan (Rp/Hari)',
+  average_monthly_sales: 'Pendapatan rata-rata (Rp/Tahun)',
+  outlet_summary_title: 'Informasi outlet',
+  select_outlet_location_text: 'Pilih lokasi lokasi outlet',
+  outlet_full_address_text: 'Alamat lengkap outlet',
+  outlet_full_address_note: 'Alamat harap diisi lengkap dengan mencantumkan nama Jalan, Kelurahan, Kecamatan, Kabupaten/Kota',
+  province_text: 'Provinsi',
+  district_text: 'Kabupaten',
+  postal_code_text: 'Kode POS',
+  outlet_image_text: 'Foto outlet',
+  outlet_image_note: 'Klik untuk mengambil gambar',
+  bank_account_information_title: 'Informasi Rekening Bank',
+  account_holder_name_text: 'Nama pemilik rekening',
+  bank_name_text: 'Nama bank',
+  account_number_text: 'No.Rekening',
 };

src/navigations/auth-navigator.js

@@ -1,6 +1,14 @@
+/* eslint-disable prettier/prettier */
 import React from 'react';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {Login, Register} from 'scenes';
+import {
+  Login,
+  Register,
+  BusinessProfileRegistration,
+  BusinessSummary,
+  OutletSummary,
+  BankAccount,
+} from 'scenes';
 
 const AuthStack = createNativeStackNavigator();
 
@@ -9,6 +17,10 @@ const AuthStackScreen = () => {
     <AuthStack.Navigator screenOptions={{headerShown: false}}>
       <AuthStack.Screen name="Login" component={Login} />
       <AuthStack.Screen name="Register" component={Register} />
+      <AuthStack.Screen name="BusinessProfileRegistration" component={BusinessProfileRegistration} />
+      <AuthStack.Screen name="BusinessSummary" component={BusinessSummary} />
+      <AuthStack.Screen name="OutletSummary" component={OutletSummary} />
+      <AuthStack.Screen name="BankAccount" component={BankAccount} />
     </AuthStack.Navigator>
   );
 };

src/scenes/Register/BusinessProfileRegistration/BankAccount/index.js

@@ -0,0 +1,51 @@
+import React, {useState} from 'react';
+import {View, ScrollView, TextInput} from 'react-native';
+import {Container, Header, Note, Button, Input} from 'components';
+import {Colors} from 'global-styles';
+import {useTranslation} from 'react-i18next';
+import styles from './styles';
+
+const BANK = [
+  {label: 'Mandiri', value: 1},
+  {label: 'Bank Central Asia', value: 2},
+  {label: 'Bank Negara Indonesia (BNI)', value: 3},
+];
+
+const BankAccount = ({navigation}) => {
+  const [categorySelected, setCategorySelected] = useState(null);
+  const {t} = useTranslation();
+
+  return (
+    <Container backgroundColor={Colors.WHITE}>
+      <Header
+        navigation={navigation}
+        smTitle={t('bank_account_information_title')}
+      />
+      <View style={styles.container}>
+        <ScrollView>
+          <View style={styles.spacing} />
+          <Input type="text" required label={t('account_holder_name_text')} />
+          <View style={styles.spacing} />
+          <Input
+            type="select"
+            required
+            label={t('bank_name_text')}
+            data={BANK}
+            value={categorySelected}
+            onChangeValue={val => setCategorySelected(val)}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="text"
+            keyboardType="decimal-pad"
+            required
+            label={t('account_number_text')}
+          />
+        </ScrollView>
+        <Button title="Simpan" onPress={() => navigation.goBack()} />
+      </View>
+    </Container>
+  );
+};
+
+export default BankAccount;

src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js

@@ -0,0 +1,18 @@
+import {StyleSheet, Dimensions, Platform} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Colors, FONTS} from 'global-styles';
+const {width} = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: width * 0.05,
+  },
+  infoSection: {
+    marginTop: width * 0.03,
+    marginBottom: width * 0.04,
+  },
+  spacing: {
+    marginVertical: width * 0.02,
+  },
+});

src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js

@@ -0,0 +1,79 @@
+import React, {useState} from 'react';
+import {View, ScrollView, TextInput} from 'react-native';
+import {Container, Header, Note, Button, Input} from 'components';
+import {Colors} from 'global-styles';
+import {useTranslation} from 'react-i18next';
+import styles from './styles';
+
+const BUSINESS_CATEGORY = [
+  {label: 'Makanan dan Minuman', value: 1},
+  {label: 'Kuliner Kue Tradisional', value: 2},
+  {label: 'Gorengan', value: 3},
+  {label: 'Street Food', value: 4},
+  {label: 'Aneka Keripik', value: 5},
+  {label: 'Minuman Dingin Kekinian', value: 6},
+];
+
+const BusinessSummary = ({navigation}) => {
+  const [categorySelected, setCategorySelected] = useState(null);
+  const [currency, setCurrency] = useState({
+    average_daily: null,
+    average_monthly: null,
+  });
+  const {t} = useTranslation();
+
+  return (
+    <Container backgroundColor={Colors.WHITE}>
+      <Header navigation={navigation} smTitle={t('business_summary_title')} />
+      <View style={styles.container}>
+        <ScrollView>
+          <View style={styles.infoSection}>
+            <Note message="Mohon masukkan informasi yang benar agar memudahkan saat verifikasi." />
+          </View>
+          <Input
+            type="text"
+            required
+            placeholder="Cth: Toko Kue ABC, Pasaraya Blok M."
+            label={t('business_name_text')}
+            note={t('business_name_note')}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="select"
+            required
+            placeholder="Makanan dan Minuman"
+            label={t('business_category_text')}
+            data={BUSINESS_CATEGORY}
+            value={categorySelected}
+            onChangeValue={val => setCategorySelected(val)}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="currency"
+            required
+            value={currency.average_daily}
+            onChangeValue={val =>
+              setCurrency({...currency, average_daily: val})
+            }
+            placeholder="1.000.000"
+            label={t('average_daily_sales')}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="currency"
+            required
+            value={currency.average_monthly}
+            onChangeValue={val =>
+              setCurrency({...currency, average_monthly: val})
+            }
+            placeholder="3.000.000"
+            label={t('average_monthly_sales')}
+          />
+        </ScrollView>
+        <Button title="Simpan" onPress={() => navigation.goBack()} />
+      </View>
+    </Container>
+  );
+};
+
+export default BusinessSummary;

src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js

@@ -0,0 +1,18 @@
+import {StyleSheet, Dimensions, Platform} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Colors, FONTS} from 'global-styles';
+const {width} = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: width * 0.05,
+  },
+  infoSection: {
+    marginTop: width * 0.03,
+    marginBottom: width * 0.04,
+  },
+  spacing: {
+    marginVertical: width * 0.02,
+  },
+});

src/scenes/Register/BusinessProfileRegistration/OutletSummary/index.js

@@ -0,0 +1,120 @@
+import React, {useState} from 'react';
+import {View, ScrollView, Text, TouchableOpacity} from 'react-native';
+import {Container, Header, Note, Button, Input, Icon} from 'components';
+import {Colors} from 'global-styles';
+import {useTranslation} from 'react-i18next';
+import styles from './styles';
+
+const PROVINCE = [
+  {label: 'DIY Yogyakarta', value: 1},
+  {label: 'Makassar', value: 2},
+  {label: 'Jakarta', value: 3},
+  {label: 'Bandung', value: 4},
+  {label: 'Surabaya', value: 5},
+];
+const DISTRICT = [
+  {label: 'DIY Yogyakarta', value: 1},
+  {label: 'Makassar', value: 2},
+  {label: 'Jakarta', value: 3},
+  {label: 'Bandung', value: 4},
+  {label: 'Surabaya', value: 5},
+];
+
+const OutletSummary = ({navigation}) => {
+  const [isSamePhone, setIsSamePhone] = useState(false);
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const {t} = useTranslation();
+
+  const handleSelectBoxPhoneNumber = () => {
+    setIsSamePhone(!isSamePhone);
+    setPhoneNumber(isSamePhone ? '' : '089674462657');
+  };
+  return (
+    <Container backgroundColor={Colors.WHITE}>
+      <Header navigation={navigation} smTitle={t('outlet_summary_title')} />
+      <View style={styles.container}>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={styles.scrollview}>
+          <View style={styles.spacing} />
+          <Input
+            type="phone"
+            required
+            editable={!isSamePhone}
+            value={phoneNumber}
+            placeholder="08x xxx xxx"
+            label={t('phone_input')}
+          />
+          <View style={styles.checkboxSection}>
+            <TouchableOpacity
+              onPress={() => handleSelectBoxPhoneNumber()}
+              style={styles.checkIconSection(isSamePhone)}>
+              <Icon name="check" type="Feather" style={styles.checkIcon} />
+            </TouchableOpacity>
+            <Text style={styles.checkboxTitle}>Gunakan No.Telepon pemilik</Text>
+          </View>
+          <View style={styles.spacing} />
+          <Input
+            type="maps"
+            required
+            label={t('select_outlet_location_text')}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="text"
+            required
+            label={t('outlet_full_address_text')}
+            note={t('outlet_full_address_note')}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="select"
+            required
+            data={PROVINCE}
+            label={t('province_text')}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="select"
+            required
+            data={DISTRICT}
+            label={t('district_text')}
+          />
+          <View style={styles.spacing} />
+          <Input
+            type="text"
+            keyboardType="decimal-pad"
+            required
+            label={t('postal_code_text')}
+          />
+          <View style={styles.spacing} />
+          <View style={styles.inputImageContainer}>
+            <Text style={styles.inputImageLabel}>{t('outlet_image_text')}</Text>
+            <View style={styles.inputImageSection}>
+              <View style={styles.inputImageIconSection}>
+                <Icon
+                  name="camera"
+                  type="Feather"
+                  style={styles.inputImageIcon}
+                />
+              </View>
+              <View style={styles.inputImageInfoSection}>
+                <Text style={styles.inputImageInfoLabel}>
+                  {t('outlet_image_text')}
+                  <Text style={{color: Colors.RED}}>*</Text>
+                </Text>
+                <Text style={styles.inputImageInfoSubLabel}>
+                  {t('outlet_image_note')}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </ScrollView>
+        <View style={styles.spacing} />
+        <Button title="Simpan" onPress={() => navigation.goBack()} />
+      </View>
+    </Container>
+  );
+};
+
+export default OutletSummary;

src/scenes/Register/BusinessProfileRegistration/OutletSummary/styles.js

@@ -0,0 +1,86 @@
+import {StyleSheet, Dimensions, Platform} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Colors, FONTS} from 'global-styles';
+const {width} = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: width * 0.05,
+  },
+  scrollview: {
+    paddingBottom: width * 0.2,
+  },
+  spacing: {
+    marginVertical: width * 0.02,
+  },
+  checkboxSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: width * 0.02,
+  },
+  checkIconSection: isChecked => ({
+    width: width * 0.05,
+    height: width * 0.05,
+    borderRadius: width,
+    backgroundColor: isChecked ? Colors.PRIMARY : Colors.GREY,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: width * 0.02,
+    alignSelf: 'flex-start',
+  }),
+  checkIcon: {
+    color: Colors.WHITE,
+    fontSize: RFValue(13),
+  },
+  checkboxTitle: {
+    fontFamily: FONTS.poppins[500],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+  },
+
+  inputImageContainer: {},
+  inputImageLabel: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(11.5),
+    color: Colors.TEXT,
+  },
+  inputImageSection: {
+    height: width * 0.28,
+    borderWidth: 1,
+    borderColor: Colors.LINE_STROKE,
+    borderRadius: width * 0.02,
+    marginVertical: width * 0.023,
+    backgroundColor: Colors.WHITE,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputImageIconSection: {
+    height: '100%',
+    paddingHorizontal: width * 0.12,
+    borderColor: Colors.LINE_STROKE,
+    backgroundColor: Colors.DISABLED,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRightWidth: 1,
+    borderTopLeftRadius: width * 0.02,
+    borderBottomLeftRadius: width * 0.02,
+  },
+  inputImageIcon: {
+    fontSize: RFValue(22),
+    color: Colors.TEXT,
+  },
+  inputImageInfoSection: {
+    paddingHorizontal: width * 0.04,
+  },
+  inputImageInfoLabel: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(11.5),
+    color: Colors.TEXT,
+  },
+  inputImageInfoSubLabel: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+  },
+});

src/scenes/Register/BusinessProfileRegistration/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import {View, Text, TouchableOpacity, ScrollView} from 'react-native';
+import {Container, Header, Note, Icon, Button} from 'components';
+import {Colors} from 'global-styles';
+import {useTranslation} from 'react-i18next';
+import styles from './styles';
+
+const BUSINESS_PROFILE = [
+  {
+    name: 'Informasi usaha',
+    completed: true,
+    route: 'BusinessSummary',
+  },
+  {
+    name: 'Informasi outlet',
+    completed: false,
+    route: 'OutletSummary',
+  },
+  {
+    name: 'Informasi rekening bank',
+    completed: false,
+    route: 'BankAccount',
+  },
+  {
+    name: 'Jam operasional',
+    completed: false,
+    route: 'BusinessSummary',
+  },
+  {
+    name: 'Kategori dan Menu makanan',
+    completed: false,
+    route: 'BusinessSummary',
+  },
+];
+
+const BusinessProfileRegistration = ({navigation}) => {
+  const {t} = useTranslation();
+  return (
+    <Container backgroundColor={Colors.WHITE}>
+      <Header
+        navigation={navigation}
+        smTitle={t('merchant_registration_title')}
+      />
+      <View style={styles.container}>
+        <ScrollView>
+          <View style={styles.infoSection}>
+            <Text style={styles.title}>
+              {t('complete_your_business_data_text')}
+            </Text>
+            <Note message="Anda perlu melengkapi data usaha anda, dan menyetujui syarat & ketentuan yang berlaku." />
+          </View>
+          <View style={styles.profileDataSection}>
+            {BUSINESS_PROFILE.map((item, index) => (
+              <TouchableOpacity
+                activeOpacity={0.7}
+                key={index}
+                onPress={() => navigation.navigate(item.route)}
+                style={styles.itemSection}>
+                <View style={styles.checkIconSection(item.completed)}>
+                  <Icon name="check" type="Feather" style={styles.checkIcon} />
+                </View>
+                <View style={styles.itemTitleSection}>
+                  <Text style={styles.itemTitle}>{item.name}</Text>
+                </View>
+                <Icon
+                  name="chevron-right"
+                  type="Feather"
+                  style={styles.chevronRight}
+                />
+              </TouchableOpacity>
+            ))}
+          </View>
+        </ScrollView>
+        <View style={styles.noteSecureSection}>
+          <Icon
+            name="shield-checkmark"
+            type="Ionicons"
+            style={styles.shieldIcon}
+          />
+          <Text style={styles.noteSecureText}>
+            Data Anda akan diverifikasi oleh NasiBox. itu akan tetap aman dan
+            terjamin
+          </Text>
+        </View>
+        <Button title="Kirim Data" />
+      </View>
+    </Container>
+  );
+};
+
+export default BusinessProfileRegistration;

src/scenes/Register/BusinessProfileRegistration/styles.js

@@ -0,0 +1,86 @@
+import {StyleSheet, Dimensions, Platform} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Colors, FONTS} from 'global-styles';
+const {width} = Dimensions.get('window');
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: width * 0.05,
+  },
+  infoSection: {
+    marginTop: width * 0.03,
+    marginBottom: width * 0.08,
+  },
+  title: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(15),
+    color: Colors.TEXT,
+    marginBottom: width * 0.03,
+  },
+  subTitle: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+    marginTop: width * 0.01,
+  },
+  spacing: {
+    marginVertical: width * 0.03,
+  },
+  profileDataSection: {},
+  itemSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: width * 0.05,
+  },
+  checkIconSection: isChecked => ({
+    width: width * 0.05,
+    height: width * 0.05,
+    borderRadius: width,
+    backgroundColor: isChecked ? Colors.PRIMARY : Colors.GREY,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: width * 0.04,
+    alignSelf: 'flex-start',
+  }),
+  checkIcon: {
+    color: Colors.WHITE,
+    fontSize: RFValue(13),
+  },
+  itemTitleSection: {
+    flex: 1,
+    width: width,
+    marginRight: -width * 0.05,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.LINE_STROKE,
+    height: width * 0.09,
+  },
+  itemTitle: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(12),
+    color: Colors.TEXT,
+  },
+  chevronRight: {
+    fontSize: RFValue(16),
+    color: Colors.GREY,
+    alignSelf: 'flex-start',
+  },
+
+  noteSecureSection: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: width * 0.04,
+  },
+  shieldIcon: {
+    fontSize: RFValue(13),
+    color: Colors.PRIMARY,
+    marginRight: width * 0.02,
+  },
+  noteSecureText: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+    marginTop: -width * 0.002,
+  },
+  buttonSection: {},
+});

src/scenes/Register/index.js

@@ -3,38 +3,42 @@ import {View, Text, ScrollView} from 'react-native';
 import {Container, Header, Input, Button} from 'components';
 import {Colors} from 'global-styles';
 import styles from './styles';
-
+import {useTranslation} from 'react-i18next';
 const Register = ({navigation}) => {
+  const {t} = useTranslation();
   return (
     <Container backgroundColor={Colors.WHITE}>
-      <Header navigation={navigation} smTitle={'Bermitra dengan kami'} />
+      <Header navigation={navigation} smTitle={t('partner_with_us_text')} />
       <View style={styles.container}>
         <ScrollView>
           <View style={styles.infoSection}>
-            <Text style={styles.title}>Pendaftaran tidak dipungut biaya.</Text>
+            <Text style={styles.title}>{t('register_merchant_title')}</Text>
             <Text style={styles.subTitle}>
-              Masukkan informasi pemilik usaha untuk memulai bergabung.
+              {t('register_merchant_subtitle')}
             </Text>
           </View>
           <Input
             type="text"
-            label="Nama lengkap pemilik usaha"
+            label={t('full_name_of_business_owner_text')}
-            note="Isi sesuai dengan nama pada kartu identitas."
+            note={t('full_name_of_business_owner_note')}
           />
           <View style={styles.spacing} />
           <Input
             type="phone"
-            label="No.Telepon pemilik usaha"
+            label={t('phone_number_business_owner_text')}
-            note="Mohon pastikan nomor yang tertera adalah nomor telepon aktif dan terdaftar di WhatsApp."
+            note={t('phone_number_business_owner_note')}
           />
           <View style={styles.spacing} />
           <Input
             type="text"
-            label="Email pemilik usaha"
+            label={t('email_business_owner_text')}
-            note="Harap isi dengan alamat email yang aktif dan benar."
+            note={t('email_business_owner_note')}
           />
         </ScrollView>
-        <Button title="Gabung sebagai mitra" onPress={() => alert('SIP')} />
+        <Button
+          title={t('join_as_a_partner_text')}
+          onPress={() => navigation.navigate('BusinessProfileRegistration')}
+        />
       </View>
     </Container>
   );

src/scenes/index.js

@@ -1,4 +1,15 @@
 import Login from './Login';
 import Register from './Register';
+import BusinessProfileRegistration from './Register/BusinessProfileRegistration';
+import BusinessSummary from './Register/BusinessProfileRegistration/BusinessSummary';
+import OutletSummary from './Register/BusinessProfileRegistration/OutletSummary';
+import BankAccount from './Register/BusinessProfileRegistration/BankAccount';
 
-export {Login, Register};
+export {
+  Login,
+  Register,
+  BusinessProfileRegistration,
+  BusinessSummary,
+  OutletSummary,
+  BankAccount,
+};

src/styles/Colors.js

@@ -12,3 +12,4 @@ export const RED = '#E42E2C';
 export const SHADOW = 'rgba(208, 207, 207, 0.25)';
 export const RED_SHADOW = 'rgba(253, 121, 91, 0.1)';
 export const DISABLED = '#F9F9F9';
+export const BLUE = '#2F89F6';

yarn.lock

@@ -1390,6 +1390,11 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/geojson@^7946.0.8":
+  version "7946.0.10"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
@@ -5755,6 +5760,16 @@ react-native-codegen@^0.70.6:
     jscodeshift "^0.13.1"
     nullthrows "^1.1.1"
 
+react-native-currency-input@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-currency-input/-/react-native-currency-input-1.1.0.tgz#2f86e6ad4d47518df0c5ade06f5e0f5afa0aeb11"
+  integrity sha512-TNyqQ98pB6WdLJiEz5NIZWUT1zpzJNBUCGS+5PGO0QCmbssSA/n4zVC7+msX5Z0Wl+iwhpTPsCckDJeRIlxwKg==
+
+react-native-dropdown-picker@^5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/react-native-dropdown-picker/-/react-native-dropdown-picker-5.4.3.tgz#adc16cfa52e8f3481220b377dd780040c3debf96"
+  integrity sha512-cwZzFcpyx/Stw3lZH2bvXxcsgwkR8c3rRZtOnlvyuN5pAplzA/9AiAxYlnJuspP9VvyU1XMePKOpgcHce6iyhA==
+
 react-native-gradle-plugin@^0.70.3:
   version "0.70.3"
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
@@ -5770,6 +5785,13 @@ react-native-localize@^2.2.4:
   resolved "https://registry.yarnpkg.com/react-native-localize/-/react-native-localize-2.2.4.tgz#3bc46ade48499ab9df61bf17a9b66633a5ba9bb9"
   integrity sha512-gVmbyAEQQnBQ8vKlAQchFfIISeId3qT6Lc7LHmKF39nsYWX9KN4PHuG6Hk+7gduMI6IHKeZGKcLsOdh6wvN6cg==
 
+react-native-maps@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-maps/-/react-native-maps-1.3.2.tgz#8e30bfd9d934de02827253e5cde6c08a04f6356c"
+  integrity sha512-NB7HGRZOgxxXCWzrhIVucx/bsrEWANvk3DLci1ov4P9MQnEVQYQCCkTxsnaEvO191GeBOCRDyYn6jckqbfMtmg==
+  dependencies:
+    "@types/geojson" "^7946.0.8"
+
 react-native-modal@^13.0.1:
   version "13.0.1"
   resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-13.0.1.tgz#691f1e646abb96fa82c1788bf18a16d585da37cd"