diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml index 991f1f1..79ebb77 100644 --- a/android/app/src/main/res/values/strings.xml +++ b/android/app/src/main/res/values/strings.xml @@ -1,3 +1,3 @@ - ebogaMerchant + Ola Merchant diff --git a/src/assets/images/days/jumat.png b/src/assets/images/days/jumat.png new file mode 100644 index 0000000..c97d79b Binary files /dev/null and b/src/assets/images/days/jumat.png differ diff --git a/src/assets/images/days/kamis.png b/src/assets/images/days/kamis.png new file mode 100644 index 0000000..1185218 Binary files /dev/null and b/src/assets/images/days/kamis.png differ diff --git a/src/assets/images/days/minggu.png b/src/assets/images/days/minggu.png new file mode 100644 index 0000000..f12d62e Binary files /dev/null and b/src/assets/images/days/minggu.png differ diff --git a/src/assets/images/days/rabu.png b/src/assets/images/days/rabu.png new file mode 100644 index 0000000..6f30636 Binary files /dev/null and b/src/assets/images/days/rabu.png differ diff --git a/src/assets/images/days/sabtu.png b/src/assets/images/days/sabtu.png new file mode 100644 index 0000000..a9538ae Binary files /dev/null and b/src/assets/images/days/sabtu.png differ diff --git a/src/assets/images/days/selasa.png b/src/assets/images/days/selasa.png new file mode 100644 index 0000000..a9538ae Binary files /dev/null and b/src/assets/images/days/selasa.png differ diff --git a/src/assets/images/days/senin.png b/src/assets/images/days/senin.png new file mode 100644 index 0000000..a9538ae Binary files /dev/null and b/src/assets/images/days/senin.png differ diff --git a/src/components/Button/index.js b/src/components/Button/index.js index 49385b2..63ccf61 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -5,6 +5,7 @@ import { ActivityIndicator, StyleSheet, Dimensions, + Platform, } from 'react-native'; import {Colors, FONTS} from 'global-styles'; import {RFValue} from 'react-native-responsive-fontsize'; @@ -52,6 +53,7 @@ const styles = (isOutline, disabled) => fontFamily: FONTS.poppins[600], fontSize: RFValue(12.5), color: isOutline ? Colors.PRIMARY : Colors.WHITE, + marginTop: Platform.OS === 'android' ? width * 0.008 : 0, }, }); diff --git a/src/components/Input/_maps.js b/src/components/Input/_maps.js index 8491e43..3d9322c 100644 --- a/src/components/Input/_maps.js +++ b/src/components/Input/_maps.js @@ -251,7 +251,7 @@ const styles = StyleSheet.create({ justifyContent: 'flex-end', }, content: { - height: width * 1.9, + height: height / 1.2, backgroundColor: Colors.WHITE, // paddingVertical: width * 0.04, // paddingHorizontal: width * 0.05, @@ -363,6 +363,7 @@ const styles = StyleSheet.create({ paddingHorizontal: width * 0.05, borderTopLeftRadius: width * 0.04, borderTopRightRadius: width * 0.04, + justifyContent: 'flex-end', }, button: { backgroundColor: Colors.PRIMARY, diff --git a/src/components/Modal/ModalSetHours/index.js b/src/components/Modal/ModalSetHours/index.js new file mode 100644 index 0000000..526ddb6 --- /dev/null +++ b/src/components/Modal/ModalSetHours/index.js @@ -0,0 +1,98 @@ +import React, {useRef, useState} from 'react'; +import {View, Text, TouchableOpacity, TextInput} from 'react-native'; +import {Icon} from 'components'; +import Modal from 'react-native-modal'; +import {useTranslation} from 'react-i18next'; +import styles from './styles'; + +const ModalSetHours = props => { + const {t} = useTranslation(); + const {isVisible, onClose} = props; + const openRef = useRef(); + const closedRef = useRef(); + const [open, setOpen] = useState(''); + const [closed, setClosed] = useState(''); + + const handleFormatInput = (val, type) => { + const formattedValue = formatInput(val.replace(/[^0-9]/g, '')); + if (formattedValue.length < 6) { + if (type === 'open') { + setOpen(formattedValue); + if (formattedValue.length === 5) { + closedRef.current.focus(); + } + } else { + setClosed(formattedValue); + if (formattedValue.length === 0) { + openRef.current.focus(); + } + } + } + }; + + const formatInput = input => { + if (input.length === 2) { + if (input > 24) { + return ''; + } + } + if (input.length === 5) { + let inputX = input.split(':'); + if (inputX[1] > 60) { + return inputX[0]; + } + } + if (input.length > 2 && input[2] !== ':') { + return input.substring(0, 2) + ':' + input.slice(2); + } + return input; + }; + return ( + + + + + + + {t('set_hours_text')} - Senin + + + handleFormatInput(val, 'open')} + maxLength={5} + /> + + - + + handleFormatInput(val, 'closed')} + maxLength={5} + /> + + + alert('saved')} + style={styles.modalButton}> + {t('save')} + + + + + ); +}; + +export default ModalSetHours; diff --git a/src/components/Modal/ModalSetHours/styles.js b/src/components/Modal/ModalSetHours/styles.js new file mode 100644 index 0000000..fe6ee81 --- /dev/null +++ b/src/components/Modal/ModalSetHours/styles.js @@ -0,0 +1,83 @@ +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({ + modal: { + margin: 0, + }, + modalContainer: { + flex: 1, + margin: 0, + justifyContent: 'flex-end', + }, + modalContent: { + height: width / 1.4, + backgroundColor: Colors.WHITE, + paddingVertical: width * 0.04, + paddingHorizontal: width * 0.05, + borderTopLeftRadius: width * 0.05, + borderTopRightRadius: width * 0.05, + }, + modalButtonClose: { + 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', + }, + modalButtonCloseIcon: { + fontSize: RFValue(20), + color: Colors.TEXT, + }, + modalTitle: { + fontFamily: FONTS.poppins[600], + fontSize: RFValue(13), + color: Colors.TEXT, + }, + modalSection: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + }, + inputStrip: { + fontSize: RFValue(20), + color: Colors.TEXT, + marginHorizontal: width * 0.02, + }, + inputSection: { + width: width * 0.23, + // borderWidth: 1, + // borderColor: Colors.LINE_STROKE, + alignItems: 'center', + justifyContent: 'center', + }, + input: { + width: '100%', + flex: 1, + fontSize: RFValue(30), + fontFamily: FONTS.poppins[600], + color: Colors.TEXT, + }, + modalButton: { + backgroundColor: Colors.PRIMARY, + height: width * 0.11, + borderRadius: width * 0.015, + alignItems: 'center', + justifyContent: 'center', + marginBottom: width * 0.05, + }, + modalButtonTitle: { + fontFamily: FONTS.poppins[500], + color: Colors.WHITE, + fontSize: RFValue(12), + marginTop: width * 0.005, + }, +}); diff --git a/src/components/index.js b/src/components/index.js index 238f8fc..30f322d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -8,6 +8,7 @@ import Button from './Button'; import Header from './Header'; import Input from './Input'; import Note from './Note'; +import ModalSetHours from './Modal/ModalSetHours'; export { Container, @@ -20,4 +21,5 @@ export { Header, Input, Note, + ModalSetHours, }; diff --git a/src/constants/translations/en/common.js b/src/constants/translations/en/common.js index 93cafd0..7ae52ec 100644 --- a/src/constants/translations/en/common.js +++ b/src/constants/translations/en/common.js @@ -42,4 +42,7 @@ export default { account_holder_name_text: 'Account holder name', bank_name_text: 'Bank name', account_number_text: 'Account number', + operational_time_title: 'Operational Time', + operational_hours_same_every_day_text: 'The operating hours are the same every day', + set_hours_text: 'Set Hours', }; diff --git a/src/constants/translations/id/common.js b/src/constants/translations/id/common.js index 1897426..b35f9b0 100644 --- a/src/constants/translations/id/common.js +++ b/src/constants/translations/id/common.js @@ -42,4 +42,7 @@ export default { account_holder_name_text: 'Nama pemilik rekening', bank_name_text: 'Nama bank', account_number_text: 'No.Rekening', + operational_time_title: 'Jam Operasional', + operational_hours_same_every_day_text: 'Jam operasional yang sama setiap hari', + set_hours_text: 'Atur Jam', }; diff --git a/src/navigations/auth-navigator.js b/src/navigations/auth-navigator.js index fabaf9e..08a40d9 100644 --- a/src/navigations/auth-navigator.js +++ b/src/navigations/auth-navigator.js @@ -8,6 +8,7 @@ import { BusinessSummary, OutletSummary, BankAccount, + OperationalTime, } from 'scenes'; const AuthStack = createNativeStackNavigator(); @@ -21,6 +22,7 @@ const AuthStackScreen = () => { + ); }; diff --git a/src/scenes/Login/styles.js b/src/scenes/Login/styles.js index 8602b5f..106646d 100644 --- a/src/scenes/Login/styles.js +++ b/src/scenes/Login/styles.js @@ -10,12 +10,12 @@ export default StyleSheet.create({ }, boardingSection: { - flex: 1.5, + flex: 1.2, justifyContent: 'space-between', }, boardingImage: { - width: width * 0.8, - height: width * 0.8, + width: width * 0.7, + height: width * 0.7, alignSelf: 'center', }, boardingContentSection: { @@ -36,6 +36,7 @@ export default StyleSheet.create({ wrapper: { flex: 1, + backgroundColor: Colors.WHITE, }, //form section diff --git a/src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js b/src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js index 0360f73..4bba8b3 100644 --- a/src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js +++ b/src/scenes/Register/BusinessProfileRegistration/BankAccount/styles.js @@ -7,6 +7,7 @@ export default StyleSheet.create({ container: { flex: 1, paddingHorizontal: width * 0.05, + paddingBottom: width * 0.04, }, infoSection: { marginTop: width * 0.03, diff --git a/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js b/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js index 0360f73..4bba8b3 100644 --- a/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js +++ b/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/styles.js @@ -7,6 +7,7 @@ export default StyleSheet.create({ container: { flex: 1, paddingHorizontal: width * 0.05, + paddingBottom: width * 0.04, }, infoSection: { marginTop: width * 0.03, diff --git a/src/scenes/Register/BusinessProfileRegistration/OperationalTime/index.js b/src/scenes/Register/BusinessProfileRegistration/OperationalTime/index.js new file mode 100644 index 0000000..6d2f5f6 --- /dev/null +++ b/src/scenes/Register/BusinessProfileRegistration/OperationalTime/index.js @@ -0,0 +1,186 @@ +import React, {useState} from 'react'; +import { + View, + Text, + ScrollView, + Switch, + TouchableOpacity, + TextInput, + Image, + Platform, +} from 'react-native'; +import {Container, Header, ModalSetHours, Button, Icon} from 'components'; +import {Colors} from 'global-styles'; +import {useTranslation} from 'react-i18next'; +import styles from './styles'; + +const DAYS = [ + { + name: 'Senin', + time: '06:00 - 12:00', + closed: false, + icon: require('assets/images/days/senin.png'), + }, + { + name: 'Selasa', + time: '06:00 - 12:00', + closed: false, + icon: require('assets/images/days/selasa.png'), + }, + { + name: 'Rabu', + time: '06:00 - 12:00', + closed: false, + icon: require('assets/images/days/rabu.png'), + }, + { + name: 'Kamis', + time: '00:00', + closed: true, + icon: require('assets/images/days/kamis.png'), + }, + { + name: 'Jumat', + time: '00:00', + closed: true, + icon: require('assets/images/days/jumat.png'), + }, + { + name: 'Sabtu', + time: '06:00 - 12:00', + closed: false, + icon: require('assets/images/days/sabtu.png'), + }, + { + name: 'Minggu', + time: '06:00 - 12:00', + closed: true, + icon: require('assets/images/days/minggu.png'), + }, +]; + +const RenderInputHours = ({label, editable}) => { + const [value, setValue] = useState(''); + const handleFormatInput = val => { + const formattedValue = formatInput(val); + if (formattedValue.length < 6) { + setValue(formattedValue); + } + }; + + const formatInput = input => { + if (input.length === 2) { + if (input > 24) { + return ''; + } + } + if (input.length === 5) { + let inputX = input.split(':'); + if (inputX[1] > 60) { + return inputX[0]; + } + } + if (input.length > 2 && input[2] !== ':') { + return input.substring(0, 2) + ':' + input.slice(2); + } + return input; + }; + + return ( + + {label} + handleFormatInput(val)} + keyboardType="decimal-pad" + style={styles.inputHourItem} + /> + + ); +}; + +const OperationalTime = ({navigation}) => { + const {t} = useTranslation(); + const [checked, setChecked] = useState(false); + const [isEnabled, setIsEnabled] = useState(false); + const [modal, setModal] = useState(false); + const toggleSwitch = () => setIsEnabled(previousState => !previousState); + + return ( + +
+ + + + + setChecked(!checked)} + activeOpacity={0.5} + style={styles.checkboxSection}> + + + + + {t('operational_hours_same_every_day_text')} + + + + 24 Jam + + + + + + + + + {DAYS.map((item, index) => ( + + + + + {item.name} + + {item.closed ? 'Tutup' : item.time} + + + setModal(true)}> + Ubah + + + + ))} + + +