term and condition

src/components/Modal/ModalSuccess/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {useRef, useEffect, useState} from 'react';
+import {View, Text, Image, TouchableOpacity} from 'react-native';
+import Modal from 'react-native-modal';
+import {Icon} from 'components';
+import {Colors} from 'global-styles';
+import {useTranslation} from 'react-i18next';
+import styles from './styles';
+
+const ModalSuccess = props => {
+  const {t} = useTranslation();
+  const {isVisible, onClose, message} = props;
+
+  return (
+    <Modal isVisible={isVisible} style={styles.modal}>
+      <View style={styles.container}>
+        <TouchableOpacity onPress={onClose} style={styles.buttonClose}>
+          <Icon name="close" type="AntDesign" style={styles.buttonCloseIcon} />
+        </TouchableOpacity>
+        <View style={styles.content}>
+          <Image
+            source={require('assets/images/leader-pana.png')}
+            style={styles.errorImage}
+          />
+          <Text style={styles.title}>{t('success_text')}</Text>
+          <Text style={styles.message}>{message}</Text>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalSuccess;

src/components/Modal/ModalSuccess/styles.js

@@ -0,0 +1,55 @@
+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,
+  },
+  container: {
+    flex: 1,
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  content: {
+    height: width / 1.4,
+    backgroundColor: Colors.WHITE,
+    paddingVertical: width * 0.04,
+    paddingHorizontal: width * 0.05,
+    borderTopLeftRadius: width * 0.05,
+    borderTopRightRadius: width * 0.05,
+    alignItems: 'center',
+  },
+  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,
+  },
+  errorImage: {
+    width: width * 0.3,
+    height: width * 0.3,
+  },
+  title: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(18),
+    color: Colors.TEXT,
+    marginTop: width * 0.02,
+  },
+  message: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(12),
+    color: Colors.TEXT,
+    marginTop: width * 0.04,
+  },
+});

src/components/Modal/ModalTermsAndConditions/index.js

@@ -0,0 +1,57 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {useRef, useEffect, useState} from 'react';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+import Modal from 'react-native-modal';
+import {Icon, Button} from 'components';
+import {Colors} from 'global-styles';
+import {useTranslation} from 'react-i18next';
+import styles from './styles';
+const {width, height} = Dimensions.get('window');
+
+const ModalTermsAndConditions = props => {
+  const {t} = useTranslation();
+  const {isVisible, onClose, message} = props;
+
+  return (
+    <Modal
+      isVisible={isVisible}
+      style={styles.modal}
+      deviceHeight={height}
+      deviceWidth={width}
+      animationIn="fadeInUp"
+      animationOut="fadeOutDown"
+      useNativeDriver={true}>
+      <View style={styles.container}>
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <TouchableOpacity onPress={onClose}>
+              <Icon
+                name="close"
+                type="AntDesign"
+                style={styles.buttonCloseIcon}
+              />
+            </TouchableOpacity>
+            <Text style={styles.headerTitle}>
+              {t('term_and_condition_text')}
+            </Text>
+          </View>
+          <View style={styles.body}>
+            <ScrollView>
+              <Text style={styles.note}>{t('term_and_condition_note')}</Text>
+            </ScrollView>
+            <Button title={t('verify_now_text')} />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalTermsAndConditions;

src/components/Modal/ModalTermsAndConditions/styles.js

@@ -0,0 +1,53 @@
+import {StyleSheet, Dimensions, Platform} from 'react-native';
+import {RFValue} from 'react-native-responsive-fontsize';
+import {Colors, FONTS} from 'global-styles';
+const {width, height} = Dimensions.get('window');
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flex: 1,
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  content: {
+    height: height,
+    backgroundColor: Colors.WHITE,
+    paddingVertical: width * 0.04,
+  },
+  header: {
+    height: width * 0.2,
+    paddingHorizontal: width * 0.04,
+    backgroundColor: Colors.WHITE,
+    borderBottomWidth: width * 0.002,
+    borderBottomColor: Colors.LINE_STROKE,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: width * 0.06,
+    elevation: 5,
+  },
+  headerTitle: {
+    fontFamily: FONTS.poppins[600],
+    fontSize: RFValue(13),
+    color: Colors.TEXT,
+    marginTop: width * 0.004,
+    paddingLeft: width * 0.03,
+  },
+  buttonCloseIcon: {
+    fontSize: RFValue(20),
+    color: Colors.TEXT,
+  },
+  body: {
+    flex: 1,
+    paddingHorizontal: width * 0.04,
+    paddingVertical: width * 0.03,
+    paddingBottom: width * 0.04,
+  },
+  note: {
+    fontFamily: FONTS.poppins[400],
+    fontSize: RFValue(11),
+    color: Colors.TEXT,
+  },
+});

src/components/index.js

@@ -10,6 +10,8 @@ import Input from './Input';
 import Note from './Note';
 import ModalSetHours from './Modal/ModalSetHours';
 import ProductRaw from './Product/ProductRaw';
+import ModalSuccess from './Modal/ModalSuccess';
+import ModalTermsAndConditions from './Modal/ModalTermsAndConditions';
 
 export {
   Container,
@@ -24,4 +26,6 @@ export {
   Note,
   ModalSetHours,
   ProductRaw,
+  ModalSuccess,
+  ModalTermsAndConditions,
 };

src/constants/translations/en/common.js

@@ -50,7 +50,7 @@ export default {
   add_category_title: 'Add Category',
   update_category_title: 'Change Category',
   category_name_text: 'Category name',
-  change_text: 'Change',
+  change_text: 'Update',
   add_new_menu_title: 'Add Menus',
   update_new_menu_title: 'Update Menus',
   menu_photo_text: 'Menu photo',
@@ -62,4 +62,12 @@ export default {
   name_food_placeholder: 'Ex: Chicken Teriyaki Rice Set',
   description_food_placeholder: 'Ex: Chicken Katsu + Steam Rice + Salad + Katsu Sauce + Spicy Mayonnaise',
   search_placeholder: 'Search . . .',
+  send_data_text: 'Send Data',
+  open_text: 'Open',
+  closed_text: 'Closed',
+  _24_hours_text: '24 Hours',
+  success_text: 'Succeed',
+  term_and_condition_text: 'Term and Conditions',
+  term_and_condition_note: 'Please read carefully, then press the tick icon as a sign that you understand and agree to the MealBox Terms and Conditions.',
+  verify_now_text: 'Verify Now',
 };

src/constants/translations/id/common.js

@@ -62,4 +62,12 @@ export default {
   name_food_placeholder: 'Cth: Chicken Teriyaki Rice Set',
   description_food_placeholder: 'Cth: Chicken Katsu + Steam Rice + Salad + Katsu Sauce + Spicy Mayonnaise',
   search_placeholder: 'Cari . . .',
+  send_data_text: 'Kirim Data',
+  open_text: 'Buka',
+  closed_text: 'Tutup',
+  _24_hours_text: '24 Jam',
+  success_text: 'Berhasil',
+  term_and_condition_text: 'Syarat dan Ketentuan',
+  term_and_condition_note: 'Mohon dibaca dengan seksama, lalu tekan icon centang sebagai tanda Anda telah memahami dan menyetujui Syarat dan Ketentuan MealBox.',
+  verify_now_text: 'Verifikasi Sekarang',
 };

src/scenes/Register/BusinessProfileRegistration/BankAccount/index.js

@@ -42,7 +42,7 @@ const BankAccount = ({navigation}) => {
             label={t('account_number_text')}
           />
         </ScrollView>
-        <Button title="Simpan" onPress={() => navigation.goBack()} />
+        <Button title={t('save')} onPress={() => navigation.goBack()} />
       </View>
     </Container>
   );

src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js

@@ -71,7 +71,7 @@ const BusinessSummary = ({navigation}) => {
             label={t('average_monthly_sales')}
           />
         </ScrollView>
-        <Button title="Simpan" onPress={() => navigation.goBack()} />
+        <Button title={t('save')} onPress={() => navigation.goBack()} />
       </View>
     </Container>
   );

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

@@ -13,6 +13,7 @@ import {Container, Header, ModalSetHours, Button, Icon} from 'components';
 import {Colors} from 'global-styles';
 import {useTranslation} from 'react-i18next';
 import styles from './styles';
+import moment from 'moment';
 
 const DAYS = [
   {
@@ -108,7 +109,7 @@ const OperationalTime = ({navigation}) => {
   const [isEnabled, setIsEnabled] = useState(false);
   const [modal, setModal] = useState(false);
   const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
+  console.log(moment('01-06-2018', 'MM-DD-YYYY').locale('en').format('dddd'));
   return (
     <Container backgroundColor={Colors.WHITE}>
       <Header navigation={navigation} smTitle={t('operational_time_title')} />
@@ -131,7 +132,7 @@ const OperationalTime = ({navigation}) => {
               </Text>
             </TouchableOpacity>
             <View style={styles.is24Hours}>
-              <Text style={styles.is24HoursLabel}>24 Jam</Text>
+              <Text style={styles.is24HoursLabel}>{t('_24_hours_text')}</Text>
               <Switch
                 trackColor={{false: Colors.GREY, true: '#4ed164'}}
                 thumbColor={isEnabled ? Colors.WHITE : '#f4f3f4'}
@@ -148,12 +149,12 @@ const OperationalTime = ({navigation}) => {
             </View>
             <View style={styles.inputHourSection}>
               <RenderInputHours
-                label={'Buka'}
+                label={t('open_text')}
                 editable={isEnabled ? false : checked ? true : false}
               />
               <View style={styles.spacingVertical} />
               <RenderInputHours
-                label={'Tutup'}
+                label={t('closed_text')}
                 editable={isEnabled ? false : checked ? true : false}
               />
             </View>
@@ -165,20 +166,22 @@ const OperationalTime = ({navigation}) => {
                 <View style={styles.dayItemInfo}>
                   <Text style={styles.dayItemInfoTitle}>{item.name}</Text>
                   <Text style={styles.dayItemInfoSubTitlte(item.closed)}>
-                    {item.closed ? 'Tutup' : item.time}
+                    {item.closed ? t('closed_text') : item.time}
                   </Text>
                 </View>
                 <TouchableOpacity
                   disabled={checked}
                   onPress={() => setModal(true)}>
-                  <Text style={styles.dayItemInfoChangeButtonTitle}>Ubah</Text>
+                  <Text style={styles.dayItemInfoChangeButtonTitle}>
+                    {t('change_text')}
+                  </Text>
                 </TouchableOpacity>
               </View>
             </View>
           ))}
         </ScrollView>
         <View style={styles.buttonSection}>
-          <Button title="Simpan" onPress={() => navigation.goBack()} />
+          <Button title={t('save')} onPress={() => navigation.goBack()} />
         </View>
         <ModalSetHours isVisible={modal} onClose={() => setModal(false)} />
       </View>

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

@@ -111,7 +111,7 @@ const OutletSummary = ({navigation}) => {
           </View>
         </ScrollView>
         <View style={styles.spacing} />
-        <Button title="Simpan" onPress={() => navigation.goBack()} />
+        <Button title={t('save')} onPress={() => navigation.goBack()} />
       </View>
     </Container>
   );

src/scenes/Register/BusinessProfileRegistration/index.js

@@ -1,6 +1,13 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View, Text, TouchableOpacity, ScrollView} from 'react-native';
-import {Container, Header, Note, Icon, Button} from 'components';
+import {
+  Container,
+  Header,
+  Note,
+  Icon,
+  Button,
+  ModalTermsAndConditions,
+} from 'components';
 import {Colors} from 'global-styles';
 import {useTranslation} from 'react-i18next';
 import styles from './styles';
@@ -34,6 +41,7 @@ const BUSINESS_PROFILE = [
 ];
 
 const BusinessProfileRegistration = ({navigation}) => {
+  const [modal, setModal] = useState(false);
   const {t} = useTranslation();
   return (
     <Container backgroundColor={Colors.WHITE}>
@@ -78,12 +86,16 @@ const BusinessProfileRegistration = ({navigation}) => {
             style={styles.shieldIcon}
           />
           <Text style={styles.noteSecureText}>
-            Data Anda akan diverifikasi oleh NasiBox. itu akan tetap aman dan
+            Data Anda akan diverifikasi oleh MealBox. itu akan tetap aman dan
             terjamin
           </Text>
         </View>
-        <Button title="Kirim Data" />
+        <Button title={t('send_data_text')} onPress={() => setModal(true)} />
       </View>
+      <ModalTermsAndConditions
+        isVisible={modal}
+        onClose={() => setModal(false)}
+      />
     </Container>
   );
 };