merchant registration

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">ebogaMerchant</string>
+    <string name="app_name">Ola Merchant</string>
 </resources>

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

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,

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 (
+    <Modal isVisible={isVisible} style={styles.modal} avoidKeyboard={true}>
+      <View style={styles.modalContainer}>
+        <TouchableOpacity onPress={onClose} style={styles.modalButtonClose}>
+          <Icon
+            name="close"
+            type="AntDesign"
+            style={styles.modalButtonCloseIcon}
+          />
+        </TouchableOpacity>
+        <View style={styles.modalContent}>
+          <Text style={styles.modalTitle}>{t('set_hours_text')} - Senin</Text>
+          <View style={styles.modalSection}>
+            <View style={styles.inputSection}>
+              <TextInput
+                ref={openRef}
+                style={styles.input}
+                placeholder="00:00"
+                keyboardType="decimal-pad"
+                value={open}
+                onChangeText={val => handleFormatInput(val, 'open')}
+                maxLength={5}
+              />
+            </View>
+            <Text style={styles.inputStrip}>-</Text>
+            <View style={styles.inputSection}>
+              <TextInput
+                ref={closedRef}
+                style={styles.input}
+                placeholder="00:00"
+                keyboardType="decimal-pad"
+                value={closed}
+                onChangeText={val => handleFormatInput(val, 'closed')}
+                maxLength={5}
+              />
+            </View>
+          </View>
+          <TouchableOpacity
+            onPress={() => alert('saved')}
+            style={styles.modalButton}>
+            <Text style={styles.modalButtonTitle}>{t('save')}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalSetHours;

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

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

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

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

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 = () => {
       <AuthStack.Screen name="BusinessSummary" component={BusinessSummary} />
       <AuthStack.Screen name="OutletSummary" component={OutletSummary} />
       <AuthStack.Screen name="BankAccount" component={BankAccount} />
+      <AuthStack.Screen name="OperationalTime" component={OperationalTime} />
     </AuthStack.Navigator>
   );
 };

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,
+    width: width * 0.7,
-    height: width * 0.8,
+    height: width * 0.7,
     alignSelf: 'center',
   },
   boardingContentSection: {
@@ -36,6 +36,7 @@ export default StyleSheet.create({
 
   wrapper: {
     flex: 1,
+    backgroundColor: Colors.WHITE,
   },
 
   //form section

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,

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,

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 (
+    <View style={styles.inputHours}>
+      <Text style={styles.inputHourLabel}>{label}</Text>
+      <TextInput
+        placeholder="00:00"
+        value={editable ? value : ''}
+        maxLength={5}
+        editable={editable}
+        onChangeText={val => handleFormatInput(val)}
+        keyboardType="decimal-pad"
+        style={styles.inputHourItem}
+      />
+    </View>
+  );
+};
+
+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 (
+    <Container backgroundColor={Colors.WHITE}>
+      <Header navigation={navigation} smTitle={t('operational_time_title')} />
+      <View style={styles.container}>
+        <ScrollView contentContainerStyle={styles.scrollview}>
+          <View style={styles.spacing} />
+          <View style={styles.is24HoursSection}>
+            <TouchableOpacity
+              onPress={() => setChecked(!checked)}
+              activeOpacity={0.5}
+              style={styles.checkboxSection}>
+              <View style={styles.checkbox(checked)}>
+                <Icon name="check" type="Feather" style={styles.checkboxIcon} />
+              </View>
+              <Text style={styles.checkboxLabel}>
+                {t('operational_hours_same_every_day_text')}
+              </Text>
+            </TouchableOpacity>
+            <View style={styles.is24Hours}>
+              <Text style={styles.is24HoursLabel}>24 Jam</Text>
+              <Switch
+                trackColor={{false: Colors.GREY, true: '#4ed164'}}
+                thumbColor={isEnabled ? Colors.WHITE : '#f4f3f4'}
+                ios_backgroundColor={Colors.GREY}
+                onValueChange={toggleSwitch}
+                disabled={!checked}
+                value={isEnabled}
+                style={
+                  Platform.OS === 'ios' && {
+                    transform: [{scaleX: 0.8}, {scaleY: 0.8}],
+                  }
+                }
+              />
+            </View>
+            <View style={styles.inputHourSection}>
+              <RenderInputHours
+                label={'Buka'}
+                editable={isEnabled ? false : checked ? true : false}
+              />
+              <View style={styles.spacingVertical} />
+              <RenderInputHours
+                label={'Tutup'}
+                editable={isEnabled ? false : checked ? true : false}
+              />
+            </View>
+          </View>
+          {DAYS.map((item, index) => (
+            <View key={index} style={styles.dayItemSection(checked)}>
+              <Image source={item.icon} style={styles.dayItemImage} />
+              <View style={styles.dayItemInfoSection}>
+                <View style={styles.dayItemInfo}>
+                  <Text style={styles.dayItemInfoTitle}>{item.name}</Text>
+                  <Text style={styles.dayItemInfoSubTitlte(item.closed)}>
+                    {item.closed ? 'Tutup' : item.time}
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  disabled={checked}
+                  onPress={() => setModal(true)}>
+                  <Text style={styles.dayItemInfoChangeButtonTitle}>Ubah</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          ))}
+        </ScrollView>
+        <View style={styles.buttonSection}>
+          <Button title="Simpan" onPress={() => navigation.goBack()} />
+        </View>
+        <ModalSetHours isVisible={modal} onClose={() => setModal(false)} />
+      </View>
+    </Container>
+  );
+};
+
+export default OperationalTime;

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

@@ -0,0 +1,126 @@
+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,
+    paddingBottom: width * 0.04,
+  },
+  scrollview: {
+    paddingBottom: width * 0.1,
+  },
+  spacing: {
+    marginVertical: width * 0.02,
+  },
+  spacingVertical: {
+    marginHorizontal: width * 0.03,
+  },
+  is24HoursSection: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.LINE_STROKE,
+    paddingBottom: width * 0.06,
+    paddingHorizontal: width * 0.05,
+  },
+  checkboxSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkbox: isChecked => ({
+    width: width * 0.055,
+    height: width * 0.055,
+    borderWidth: 1,
+    borderColor: isChecked ? Colors.PRIMARY : Colors.GREY,
+    backgroundColor: isChecked ? Colors.PRIMARY : Colors.WHITE,
+    borderRadius: width * 0.01,
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+  checkboxIcon: {
+    fontSize: RFValue(15),
+    color: Colors.WHITE,
+  },
+  checkboxLabel: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(12),
+    color: Colors.TEXT,
+    marginLeft: width * 0.03,
+  },
+  is24Hours: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: width * 0.04,
+  },
+  is24HoursLabel: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(12),
+    color: Colors.TEXT,
+    marginRight: width * 0.04,
+  },
+  inputHourSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputHours: {
+    width: width * 0.2,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.LINE_STROKE,
+  },
+  inputHourLabel: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11.5),
+    color: Colors.TEXT,
+  },
+  inputHourItem: {
+    marginVertical: width * 0.02,
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(12),
+    color: Colors.TEXT,
+  },
+
+  // day item
+  dayItemSection: is24Hours => ({
+    flexDirection: 'row',
+    paddingLeft: width * 0.05,
+    marginTop: width * 0.05,
+    opacity: is24Hours ? 0.5 : 1,
+  }),
+  dayItemImage: {
+    width: width * 0.1,
+    height: width * 0.1,
+  },
+  dayItemInfoSection: {
+    flex: 1,
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.LINE_STROKE,
+    marginLeft: width * 0.04,
+    paddingRight: width * 0.05,
+    paddingBottom: width * 0.05,
+  },
+  dayItemInfo: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  dayItemInfoTitle: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(12.5),
+    color: Colors.TEXT,
+  },
+  dayItemInfoSubTitlte: isClosed => ({
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11),
+    color: isClosed ? Colors.PRIMARY : Colors.TEXT,
+    marginTop: width * 0.008,
+  }),
+  dayItemInfoChangeButtonTitle: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(11),
+    color: Colors.PRIMARY,
+  },
+
+  buttonSection: {
+    paddingHorizontal: width * 0.05,
+  },
+});

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

@@ -7,6 +7,7 @@ export default StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: width * 0.05,
+    paddingBottom: width * 0.04,
   },
   scrollview: {
     paddingBottom: width * 0.2,

src/scenes/Register/BusinessProfileRegistration/index.js

@@ -24,7 +24,7 @@ const BUSINESS_PROFILE = [
   {
     name: 'Jam operasional',
     completed: false,
-    route: 'BusinessSummary',
+    route: 'OperationalTime',
   },
   {
     name: 'Kategori dan Menu makanan',

src/scenes/Register/BusinessProfileRegistration/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,

src/scenes/Register/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,

src/scenes/index.js

@@ -4,6 +4,7 @@ import BusinessProfileRegistration from './Register/BusinessProfileRegistration'
 import BusinessSummary from './Register/BusinessProfileRegistration/BusinessSummary';
 import OutletSummary from './Register/BusinessProfileRegistration/OutletSummary';
 import BankAccount from './Register/BusinessProfileRegistration/BankAccount';
+import OperationalTime from './Register/BusinessProfileRegistration/OperationalTime';
 
 export {
   Login,
@@ -12,4 +13,5 @@ export {
   BusinessSummary,
   OutletSummary,
   BankAccount,
+  OperationalTime,
 };