nochill/naise-pos-android-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[]merchant register

Browse Source
This commit is contained in:
Andi Firwansyah 2022-12-01 09:50:30 +07:00
parent 2acb336744
commit 307ed3b190
32 changed files with 1445 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.js
View File

@ -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 (

3
android/app/src/main/AndroidManifest.xml
View File

@ -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"

7
ios/Podfile
View File

@ -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()

44
ios/Podfile.lock
View File

@ -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

2
ios/ebogaMerchant.xcodeproj/project.pbxproj
View File

@ -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",

3
ios/ebogaMerchant/AppDelegate.mm
View File

@ -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];

2
ios/ebogaMerchant/Info.plist
View File

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

3
package.json
View File

@ -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",

2
src/components/Header/styles.js
View File

@ -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,
},

94
src/components/Input/_currency.js
View File

@ -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;

383
src/components/Input/_maps.js Normal file
View File

@ -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;

10
src/components/Input/_phone.js
View File

@ -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({

158
src/components/Input/_select.js Normal file
View File

@ -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;

13
src/components/Input/_text.js
View File

@ -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: {

8
src/components/Input/index.js
View File

@ -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 = {

45
src/components/Note/index.js Normal file
View File

@ -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;

2
src/components/index.js
View File

@ -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,
};

32
src/constants/translations/en/common.js
View File

@ -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',
};

32
src/constants/translations/id/common.js
View File

@ -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',
};

14
src/navigations/auth-navigator.js
View File

@ -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>
);
};

51
src/scenes/Register/BusinessProfileRegistration/BankAccount/index.js Normal file
View File

@ -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;

18
src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js Normal file
View File

@ -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,
},
});

79
src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js Normal file
View File

@ -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;

18
src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js Normal file
View File

@ -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,
},
});

120
src/scenes/Register/BusinessProfileRegistration/OutletSummary/index.js Normal file
View File

@ -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;

86
src/scenes/Register/BusinessProfileRegistration/OutletSummary/styles.js Normal file
View File

@ -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,
},
});

91
src/scenes/Register/BusinessProfileRegistration/index.js Normal file
View File

@ -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;

86
src/scenes/Register/BusinessProfileRegistration/styles.js Normal file
View File

@ -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: {},
});

26
src/scenes/Register/index.js
View File

@ -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"
note="Isi sesuai dengan nama pada kartu identitas."
label={t('full_name_of_business_owner_text')}
note={t('full_name_of_business_owner_note')}
/>
<View style={styles.spacing} />
<Input
type="phone"
label="No.Telepon pemilik usaha"
note="Mohon pastikan nomor yang tertera adalah nomor telepon aktif dan terdaftar di WhatsApp."
label={t('phone_number_business_owner_text')}
note={t('phone_number_business_owner_note')}
/>
<View style={styles.spacing} />
<Input
type="text"
label="Email pemilik usaha"
note="Harap isi dengan alamat email yang aktif dan benar."
label={t('email_business_owner_text')}
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>
);

13
src/scenes/index.js
View File

@ -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,
};

1
src/styles/Colors.js
View File

@ -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';

22
yarn.lock
View File

@ -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"