From 307ed3b1900b2f6fb54608bcb72ee10b9c3193b8 Mon Sep 17 00:00:00 2001 From: Andi Firwansyah Date: Thu, 1 Dec 2022 09:50:30 +0700 Subject: [PATCH] []merchant register --- App.js | 2 + android/app/src/main/AndroidManifest.xml | 3 + ios/Podfile | 7 +- ios/Podfile.lock | 44 +- ios/ebogaMerchant.xcodeproj/project.pbxproj | 2 + ios/ebogaMerchant/AppDelegate.mm | 3 + ios/ebogaMerchant/Info.plist | 2 +- package.json | 3 + src/components/Header/styles.js | 2 +- src/components/Input/_currency.js | 94 ++++- src/components/Input/_maps.js | 383 ++++++++++++++++++ src/components/Input/_phone.js | 10 +- src/components/Input/_select.js | 158 ++++++++ src/components/Input/_text.js | 13 +- src/components/Input/index.js | 8 +- src/components/Note/index.js | 45 ++ src/components/index.js | 2 + src/constants/translations/en/common.js | 32 ++ src/constants/translations/id/common.js | 32 ++ src/navigations/auth-navigator.js | 14 +- .../BankAccount/index.js | 51 +++ .../BankAccount/styles.js | 18 + .../BusinessSummary/index.js | 79 ++++ .../BusinessSummary/styles.js | 18 + .../OutletSummary/index.js | 120 ++++++ .../OutletSummary/styles.js | 86 ++++ .../BusinessProfileRegistration/index.js | 91 +++++ .../BusinessProfileRegistration/styles.js | 86 ++++ src/scenes/Register/index.js | 26 +- src/scenes/index.js | 13 +- src/styles/Colors.js | 1 + yarn.lock | 22 + 32 files changed, 1445 insertions(+), 25 deletions(-) create mode 100644 src/components/Input/_maps.js create mode 100644 src/components/Input/_select.js create mode 100644 src/components/Note/index.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/BankAccount/index.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/OutletSummary/index.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/OutletSummary/styles.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/index.js create mode 100644 src/scenes/Register/BusinessProfileRegistration/styles.js diff --git a/App.js b/App.js index 8b073fc..1dc12b3 100644 --- a/App.js +++ b/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 ( diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 6b02ed0..405c6cd 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -10,6 +10,9 @@ android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> + 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() diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 528bf7c..03c1b27 100644 --- a/ios/Podfile.lock +++ b/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 diff --git a/ios/ebogaMerchant.xcodeproj/project.pbxproj b/ios/ebogaMerchant.xcodeproj/project.pbxproj index 834443e..cc00f3a 100644 --- a/ios/ebogaMerchant.xcodeproj/project.pbxproj +++ b/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", diff --git a/ios/ebogaMerchant/AppDelegate.mm b/ios/ebogaMerchant/AppDelegate.mm index 18fde7f..436af9d 100644 --- a/ios/ebogaMerchant/AppDelegate.mm +++ b/ios/ebogaMerchant/AppDelegate.mm @@ -4,6 +4,8 @@ #import #import +#import + #import #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]; diff --git a/ios/ebogaMerchant/Info.plist b/ios/ebogaMerchant/Info.plist index 2e30f14..4a687bf 100644 --- a/ios/ebogaMerchant/Info.plist +++ b/ios/ebogaMerchant/Info.plist @@ -36,7 +36,7 @@ NSLocationWhenInUseUsageDescription - + UILaunchStoryboardName LaunchScreen UIRequiredDeviceCapabilities diff --git a/package.json b/package.json index b32191c..c7347cf 100644 --- a/package.json +++ b/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", diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js index cecd95f..2ee1346 100644 --- a/src/components/Header/styles.js +++ b/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, }, diff --git a/src/components/Input/_currency.js b/src/components/Input/_currency.js index 46e1862..98153a1 100644 --- a/src/components/Input/_currency.js +++ b/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 ( + + {label && ( + + {label} + {required && *} + + )} + + setIsFocused(e.nativeEvent.text.length > 0)} + placeholderTextColor={Colors.GREY} + /> + + {note && {note}} + {error && ( + + + {error} + + )} + + ); }; + +_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; diff --git a/src/components/Input/_maps.js b/src/components/Input/_maps.js new file mode 100644 index 0000000..8491e43 --- /dev/null +++ b/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 ( + + {label && ( + + {label} + {required && *} + + )} + setModal(true)} + style={styles.inputSection}> + + Pilih lokasi + + {note && {note}} + {error && ( + + + {error} + + )} + + + + setModal(false)} + style={styles.buttonClose}> + + + + + + {t('select_outlet_location_text')} + + {coordinate?.latitude ? ( + setCoordinate({})} + style={styles.buttonSearch}> + + + ) : ( + + + + + )} + + + {!coordinate?.latitude && ( + + + setCoordinate({ + latitude: 37.78825, + longitude: -122.4324, + latitudeDelta: 0.0922, + longitudeDelta: 0.0421, + }) + } + style={styles.locationSection}> + + + + Warung Sop & Sate Sapi Pak Bayu + + + Jl. Yudistiro No.2, RT.05/RW.11, Palgading, Sinduharjo, + Kec. Ngaglik, Kabupaten Sleman, Daerah Istimewa Yogyakarta + 55581 + + + + + )} + + {coordinate?.latitude && ( + + + + + + + + + setCoordinate({ + latitude: 37.78825, + longitude: -122.4324, + latitudeDelta: 0.0922, + longitudeDelta: 0.0421, + }) + } + style={styles.locationSection}> + + + + Warung Sop & Sate Sapi Pak Bayu + + + Jl. Yudistiro No.2, RT.05/RW.11, Palgading, Sinduharjo, + Kec. Ngaglik, Kabupaten Sleman, Daerah Istimewa + Yogyakarta 55581 + + + + alert('saved')} + style={styles.button}> + {t('save')} + + + + )} + + + + + ); +}; + +_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; diff --git a/src/components/Input/_phone.js b/src/components/Input/_phone.js index 70d4266..314495c 100644 --- a/src/components/Input/_phone.js +++ b/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 ( - {label && {label}} + {label && ( + + {label} {required && *} + + )} 🇮🇩 +62 { + const { + label, + editable, + note, + error, + placeholder, + required, + data, + value, + onChangeValue, + searchable, + } = props; + const [open, setOpen] = useState(false); + const [items, setItems] = useState(data); + return ( + + {label && ( + + {label} {required && *} + + )} + + + + {note && {note}} + {error && ( + + + {error} + + )} + + ); +}; + +_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; diff --git a/src/components/Input/_text.js b/src/components/Input/_text.js index 203dd93..bb546d9 100644 --- a/src/components/Input/_text.js +++ b/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 ( - {label && {label}} + {label && ( + + {label} + {required && *} + + )} 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: { diff --git a/src/components/Input/index.js b/src/components/Input/index.js index a7bb608..4f03ce3 100644 --- a/src/components/Input/index.js +++ b/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 ; case 'currency': return ; + case 'select': + return ; + case 'maps': + return ; } }; Input.propTypes = { - type: PropTypes.oneOf(['text', 'phone', 'currency', 'dropdown']), + type: PropTypes.oneOf(['text', 'phone', 'currency', 'select', 'maps']), }; Input.defaultProps = { diff --git a/src/components/Note/index.js b/src/components/Note/index.js new file mode 100644 index 0000000..1868528 --- /dev/null +++ b/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 ( + + + + {message} + + + ); +}; + +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; diff --git a/src/components/index.js b/src/components/index.js index c8534f5..238f8fc 100644 --- a/src/components/index.js +++ b/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, }; diff --git a/src/constants/translations/en/common.js b/src/constants/translations/en/common.js index ab629dc..93cafd0 100644 --- a/src/constants/translations/en/common.js +++ b/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', }; diff --git a/src/constants/translations/id/common.js b/src/constants/translations/id/common.js index 7888682..1897426 100644 --- a/src/constants/translations/id/common.js +++ b/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', }; diff --git a/src/navigations/auth-navigator.js b/src/navigations/auth-navigator.js index e4bcf25..fabaf9e 100644 --- a/src/navigations/auth-navigator.js +++ b/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 = () => { + + + + ); }; diff --git a/src/scenes/Register/BusinessProfileRegistration/BankAccount/index.js b/src/scenes/Register/BusinessProfileRegistration/BankAccount/index.js new file mode 100644 index 0000000..ef3c3c9 --- /dev/null +++ b/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 ( + +
+ + + + + + setCategorySelected(val)} + /> + + + +