filterrrrrrrrrrr

App/Components/BaseHeader.js

@@ -22,6 +22,9 @@ export default class BaseHeader extends Component {
     withBack: PropTypes.bool,
     complain: PropTypes.bool,
     complainPress: PropTypes.func,
+    filterText: PropTypes.string,
+    filter: PropTypes.bool,
+    filterPress: PropTypes.func,
     notification: PropTypes.bool,
     notificationPress: PropTypes.func,
     onSubmitEditing: PropTypes.func,
@@ -29,7 +32,7 @@ export default class BaseHeader extends Component {
     value: PropTypes.string,
     placeholder: PropTypes.string,
     onClose: PropTypes.func,
-    onCancel: PropTypes.func
+    onCancel: PropTypes.func,
   }
 
   // Defaults for props
@@ -44,7 +47,7 @@ export default class BaseHeader extends Component {
   render() {
     return (
       <View>
-        {!this.props.typeSearch && !this.props.complain && !this.props.notification && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
+        {!this.props.typeSearch && !this.props.complain && !this.props.notification && !this.props.filter && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             {this.props.withBack && <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3 }}>
               <Image source={Images.icon_backwhite} style={{ width: 20, height: 15 }} />
@@ -92,6 +95,16 @@ export default class BaseHeader extends Component {
             <BaseText type={"bold"} text={'Baca Semua'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
           </TouchableOpacity>
         </View>}
+
+        {this.props.filter && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
+          <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3, flexDirection: 'row' }}>
+            <Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} />
+            <BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16, alignSelf: 'center' }} />
+          </TouchableOpacity>
+          <TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginBottom: -3, }} onPress={this.props.filterPress}>
+            <BaseText type={"bold"} text={this.props.filterText} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
+          </TouchableOpacity>
+        </View>}
       </View>
     )
   }

App/Containers/ChatScreen.js

@@ -37,7 +37,8 @@ class ChatScreen extends Component {
       ],
       currency: '',
       intent: '',
-      product: null
+      product: null,
+      varient: null
     }
   }
 
@@ -49,7 +50,10 @@ class ChatScreen extends Component {
         if (this.props.navigation.state.params.intent == 'chat') {
           this.setState({
             intent: 'chat',
-            product: this.props.navigation.state.params.product
+            product: this.props.navigation.state.params.product,
+            varient: this.props.navigation.state.params.varient
+          }, ()=> {
+            console.log(JSON.stringify(this.state.product))
           })
         }
       }
@@ -142,10 +146,10 @@ class ChatScreen extends Component {
         {this.state.intent == 'chat' ?
           <View style={{ alignSelf: 'flex-end', backgroundColor: '#ededed', width: '100%', flexDirection: 'row' }}>
             <View style={{ elevation: 3, borderRadius: 10, margin: 5, backgroundColor: '#fff', padding: 10, flexDirection: 'row', width: '60%', }}>
-              <Image source={{ uri: this.state.product.image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
-              <View style={{ flex: 1 }}>
-                <BaseText text={this.state.product.imageName} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
-                <BaseText text={formatRp(this.state.currency, this.state.product.itemHarga)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
+              <Image source={{ uri: this.state.product.product_image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
+             <View style={{ flex: 1 }}>
+                <BaseText text={this.state.product.product_name} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
+                <BaseText text={formatRp(this.state.currency, this.state.product.price)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
               </View>
             </View>
             <TouchableOpacity style={{ backgroundColor: 'white', borderRadius: 10, width: 20, height: 20, justifyContent: 'center', marginLeft: -20, elevation: 5 }} onPress={()=> this.setState({ intent: ""})}>

App/Containers/DetailProductScreen.js

@@ -264,11 +264,8 @@ class DetailProductScreen extends Component {
             <View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
               <TouchableOpacity style={{width: '10%', alignItems:'center'}} 
               onPress={()=> this.props.navigation.navigate('ChatScreen', {
-                product: {
-                  imageName: this.state.dataProduct.product_name,
-                  itemHarga: this.state.dataProduct.price,
-                  image: this.state.varient[0].varient_image
-                },
+                product: this.state.dataProduct,
+                varient: this.state.varient,
                 intent: 'chat'
               })}>
                 <Image source={Images.icon_chat} style={{width: 50, height: 50}}/>

App/Containers/NotificationScreen.js

@@ -54,14 +54,17 @@ class NotificationScreen extends Component {
   }
 
   readAllNotif(){
-    Api.create().readAllNotification()
+    Api.create().readAllNotification().then(response => {
+      alert(JSON.stringify(response.data))
+      this.getNotif()
+    })
   }
 
   render() {
     return (
       <View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
         <BaseHeader leftText={'Notifikasi'} withBack={false} onBackPress={this.backAction} notification={true} notificationPress={()=> this.readAllNotif()}/>
-        <ScrollView style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, }}>
+        <ScrollView style={{ flex: 1, backgroundColor: '#fff' }}>
           <View style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: 'white' }}>
             {this.state.listNotif.map((item, index) => {
               return (

App/Containers/Styles/FilterScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen,
+  containerView: {
+    flex: 1,
+    backgroundColor: 'white',
+    borderTopLeftRadius: 32,
+    borderTopRightRadius: 32,
+  },
+  collapseView: {
+    marginBottom: 20
+  },
+  body: {
+    padding: 10,
+    paddingTop: 0
+  },
+  collapseConatiner: {
+    backgroundColor: '#fff',
+    margin:10,
+    overflow:'hidden'
+  }
+})

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import FilterScreen from '../Containers/FilterScreen'
 import UseCouponScreen from '../Containers/UseCouponScreen'
 import DetailNotificationScreen from '../Containers/DetailNotificationScreen'
 import ChatScreen from '../Containers/ChatScreen'
@@ -47,6 +48,7 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  FilterScreen: { screen: FilterScreen },
   UseCouponScreen: { screen: UseCouponScreen },
   DetailNotificationScreen: { screen: DetailNotificationScreen },
   ChatScreen: { screen: ChatScreen },

App/Themes/Images.js

@@ -32,12 +32,15 @@ const images = {
   urutan: require('../Images/Icons/urutan.png'),
   radioOff: require('../Images/Icons/radiobutton-off.png'),
   radioOn: require('../Images/Icons/radiobutton-on.png'),
+  radioButtonOff: require('../Images/Icons/radio-off.png'),
+  radioButtonOn: require('../Images/Icons/radio-on.png'),
   berhasil: require('../Images/Icons/berhasil.png'),
   add: require('../Images/Icons/add.png'),
   map: require('../Images/Icons/map.png'),
   read: require('../Images/Icons/read.png'),
   mapgray: require('../Images/Icons/mapgray.png'),
   filter: require('../Images/Icons/filter.png'),
+  dropdown: require('../Images/Icons/dropdown.png'),
   icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
   icon_close: require('../Images/Icons/icon_close.png'),
   map_addpin: require('../Images/Icons/map_addpin.png'),

package.json

@@ -32,6 +32,7 @@
     "@react-native-firebase/messaging": "^7.4.2",
     "@react-navigation/bottom-tabs": "^5.6.1",
     "@react-navigation/native": "^5.6.1",
+    "accordion-collapse-react-native": "^0.3.1",
     "apisauce": "^1.1.1",
     "curved-bottom-navigation-bar": "^1.0.5",
     "format-json": "^1.0.3",
@@ -79,6 +80,7 @@
     "redux-persist": "^5.10.0",
     "redux-saga": "^1.1.3",
     "reduxsauce": "^1.1.1",
+    "rn-range-slider": "1.3.0",
     "rn-wave-bottom-bar": "^1.0.2",
     "seamless-immutable": "^7.1.4"
   },

yarn.lock

@@ -2360,6 +2360,13 @@ accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+accordion-collapse-react-native@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/accordion-collapse-react-native/-/accordion-collapse-react-native-0.3.1.tgz#64307b77c9fbfc93c4eb3458c187918cee5cda95"
+  integrity sha512-aZ1VfA4MHmysiutidIejzWsRS7iWgAHV8OCk6hfHrm0DIOVlGyVmsmVJroXjkpjHpFBxVIn8BoAEMDN2ehkATw==
+  dependencies:
+    lodash.get "4.4.2"
+
 acorn-globals@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -8872,6 +8879,11 @@ lodash.cond@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
   integrity sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=
 
+lodash.get@4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -12080,6 +12092,11 @@ rn-host-detect@1.2.0:
   resolved "https://registry.yarnpkg.com/rn-host-detect/-/rn-host-detect-1.2.0.tgz#8b0396fc05631ec60c1cb8789e5070cdb04d0da0"
   integrity sha512-btNg5kzHcjZZ7t7mvvV/4wNJ9e3MPgrWivkRgWURzXL0JJ0pwWlU4zrbmdlz3HHzHOxhBhHB4D+/dbMFfu4/4A==
 
+rn-range-slider@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rn-range-slider/-/rn-range-slider-1.3.0.tgz#8cebcb26645e8c6e6aff602a7d66ab75a687e75d"
+  integrity sha512-iSrr/jX2igPg7RtU9EbAJ6xklgJ8C+jh58pwwtXqvrGHeO6HUj2QzOTMJDecW9Y6PFI07R9sKKH1oLnh7v7bxA==
+
 rn-wave-bottom-bar@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/rn-wave-bottom-bar/-/rn-wave-bottom-bar-1.0.2.tgz#03acb00a431a7db02be0f1f1cc81e2249c1c90c6"