diff --git a/src/assets/images/product-1.png b/src/assets/images/product-1.png new file mode 100644 index 0000000..05968f1 Binary files /dev/null and b/src/assets/images/product-1.png differ diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 70e5bd1..76cfde7 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,10 +1,12 @@ import React from 'react'; import {View, Text, TouchableOpacity} from 'react-native'; import {Icon} from 'components'; +import {useTranslation} from 'react-i18next'; import styles from './styles'; const Header = props => { - const {navigation, smTitle, lgTitle, subTitle} = props; + const {t} = useTranslation(); + const {navigation, smTitle, lgTitle, subTitle, onButtonPress} = props; return ( @@ -36,6 +38,11 @@ const Header = props => { )} + {onButtonPress && ( + + {t('change_text')} + + )} ); @@ -43,6 +50,7 @@ const Header = props => { Header.defaultProps = { subTitle: undefined, + onButtonPress: undefined, }; export default Header; diff --git a/src/components/Header/styles.js b/src/components/Header/styles.js index 2ee1346..abc158f 100644 --- a/src/components/Header/styles.js +++ b/src/components/Header/styles.js @@ -51,4 +51,18 @@ export default StyleSheet.create({ color: Colors.TEXT, marginTop: width * 0.005, }, + button: { + borderWidth: 1, + borderColor: Colors.PRIMARY, + paddingHorizontal: width * 0.04, + paddingVertical: width * 0.015, + borderRadius: width * 0.015, + alignItems: 'center', + justifyContent: 'center', + }, + buttonTitle: { + fontFamily: FONTS.poppins[600], + fontSize: RFValue(12), + color: Colors.PRIMARY, + }, }); diff --git a/src/components/Input/_currency.js b/src/components/Input/_currency.js index 98153a1..3f324e4 100644 --- a/src/components/Input/_currency.js +++ b/src/components/Input/_currency.js @@ -20,7 +20,7 @@ const _Currency = props => { { - const {label, editable, note, error, required} = props; + const {label, editable, note, error, required, counter} = props; const [isFocused, setIsFocused] = useState(false); return ( @@ -21,10 +21,15 @@ const _Text = props => { {...props} style={styles.input(isFocused)} editable={editable} + maxLength={counter ? counter : undefined} onChange={e => setIsFocused(e.nativeEvent.text.length > 0)} placeholderTextColor={Colors.GREY} /> + {counter && ( + {`${props.value.length}/${counter}`} + )} {note && {note}} {error && ( @@ -41,6 +46,8 @@ _Text.defaultProps = { note: undefined, error: undefined, required: false, + counter: false, + value: '', }; const styles = StyleSheet.create({ @@ -86,6 +93,12 @@ const styles = StyleSheet.create({ marginTop: -width * 0.001, marginLeft: width * 0.01, }, + counterText: { + fontFamily: FONTS.poppins[400], + fontSize: RFValue(10), + color: Colors.TEXT_LIGHT, + alignSelf: 'flex-end', + }, }); export default _Text; diff --git a/src/components/Modal/ModalSetHours/styles.js b/src/components/Modal/ModalSetHours/styles.js index fe6ee81..90c975e 100644 --- a/src/components/Modal/ModalSetHours/styles.js +++ b/src/components/Modal/ModalSetHours/styles.js @@ -53,7 +53,7 @@ export default StyleSheet.create({ marginHorizontal: width * 0.02, }, inputSection: { - width: width * 0.23, + width: Platform.OS === 'ios' ? undefined : width * 0.23, // borderWidth: 1, // borderColor: Colors.LINE_STROKE, alignItems: 'center', diff --git a/src/components/Note/index.js b/src/components/Note/index.js index 1868528..bd843f1 100644 --- a/src/components/Note/index.js +++ b/src/components/Note/index.js @@ -29,6 +29,7 @@ const styles = StyleSheet.create({ }, messageSection: { paddingLeft: width * 0.02, + marginRight: width * 0.02, marginTop: -width * 0.004, }, message: { diff --git a/src/components/Product/ProductRaw/index.js b/src/components/Product/ProductRaw/index.js new file mode 100644 index 0000000..a890b6c --- /dev/null +++ b/src/components/Product/ProductRaw/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import {View, Text, Image} from 'react-native'; +import styles from './styles'; + +const ProductRaw = props => { + return ( + + + + Mie Ayam Yamin + + Mie ayam dengan kecap manis khas Jawa + + Rp15.000 + + + ); +}; + +export default ProductRaw; diff --git a/src/components/Product/ProductRaw/styles.js b/src/components/Product/ProductRaw/styles.js new file mode 100644 index 0000000..3a8e33d --- /dev/null +++ b/src/components/Product/ProductRaw/styles.js @@ -0,0 +1,36 @@ +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: { + flexDirection: 'row', + }, + image: { + width: width * 0.2, + height: width * 0.2, + borderRadius: width * 0.02, + }, + section: { + flex: 1, + paddingLeft: width * 0.04, + justifyContent: 'space-between', + }, + title: { + fontFamily: FONTS.poppins[600], + fontSize: RFValue(13), + color: Colors.TEXT, + }, + description: { + fontFamily: FONTS.poppins[400], + fontSize: RFValue(11.5), + color: Colors.TEXT, + flexWrap: 'wrap', + }, + price: { + fontFamily: FONTS.poppins[600], + fontSize: RFValue(12), + color: Colors.TEXT, + }, +}); diff --git a/src/components/index.js b/src/components/index.js index 30f322d..5730b9e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -9,6 +9,7 @@ import Header from './Header'; import Input from './Input'; import Note from './Note'; import ModalSetHours from './Modal/ModalSetHours'; +import ProductRaw from './Product/ProductRaw'; export { Container, @@ -22,4 +23,5 @@ export { Input, Note, ModalSetHours, + ProductRaw, }; diff --git a/src/constants/translations/en/common.js b/src/constants/translations/en/common.js index 7ae52ec..de414fe 100644 --- a/src/constants/translations/en/common.js +++ b/src/constants/translations/en/common.js @@ -45,4 +45,18 @@ export default { operational_time_title: 'Operational Time', operational_hours_same_every_day_text: 'The operating hours are the same every day', set_hours_text: 'Set Hours', + menu_category_title: 'Menu Category', + category_list_text: 'Category list', + add_category_title: 'Add Category', + category_name_text: 'Category name', + change_text: 'Change', + add_new_menu_title: 'Add Menus', + menu_photo_text: 'Menu photo', + menu_photo_note: 'Upload attractive photos to make potential customers more interested.', + upload_image_text: 'Upload photos', + name_text: 'Name', + description_text: 'Description', + price_text: 'Price (Rp)', + name_food_placeholder: 'Ex: Chicken Teriyaki Rice Set', + description_food_placeholder: 'Ex: Chicken Katsu + Steam Rice + Salad + Katsu Sauce + Spicy Mayonnaise', }; diff --git a/src/constants/translations/id/common.js b/src/constants/translations/id/common.js index b35f9b0..e5488d6 100644 --- a/src/constants/translations/id/common.js +++ b/src/constants/translations/id/common.js @@ -45,4 +45,18 @@ export default { operational_time_title: 'Jam Operasional', operational_hours_same_every_day_text: 'Jam operasional yang sama setiap hari', set_hours_text: 'Atur Jam', + menu_category_title: 'Kategori Menu', + category_list_text: 'Daftar kategori', + add_category_title: 'Tambah Kategori', + category_name_text: 'Nama kategori', + change_text: 'Ubah', + add_new_menu_title: 'Tambah Menu', + menu_photo_text: 'Foto menu', + menu_photo_note: 'Upload foto yang menarik agar calon pelangganmu makin tertarik.', + upload_image_text: 'Upload foto', + name_text: 'Nama', + description_text: 'Deskripsi', + price_text: 'Harga (Rp)', + name_food_placeholder: 'Cth: Chicken Teriyaki Rice Set', + description_food_placeholder: 'Cth: Chicken Katsu + Steam Rice + Salad + Katsu Sauce + Spicy Mayonnaise', }; diff --git a/src/navigations/auth-navigator.js b/src/navigations/auth-navigator.js index 08a40d9..369915f 100644 --- a/src/navigations/auth-navigator.js +++ b/src/navigations/auth-navigator.js @@ -9,6 +9,10 @@ import { OutletSummary, BankAccount, OperationalTime, + MenuCategory, + AddMenuCategory, + ProductList, + AddProduct, } from 'scenes'; const AuthStack = createNativeStackNavigator(); @@ -23,6 +27,10 @@ const AuthStackScreen = () => { + + + + ); }; diff --git a/src/scenes/Products/MenuCategory/AddMenuCategory/index.js b/src/scenes/Products/MenuCategory/AddMenuCategory/index.js new file mode 100644 index 0000000..745cc47 --- /dev/null +++ b/src/scenes/Products/MenuCategory/AddMenuCategory/index.js @@ -0,0 +1,33 @@ +import React, {useState} from 'react'; +import {View, ScrollView} from 'react-native'; +import {Container, Header, Button, Input} from 'components'; +import {Colors} from 'global-styles'; +import {useTranslation} from 'react-i18next'; +import styles from './styles'; + +const AddMenuCategory = ({navigation}) => { + const {t} = useTranslation(); + const [category, setCategory] = useState(''); + return ( + +
+ + + + setCategory(val)} + /> + +