esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/notification/event.tsx

@@ -0,0 +1,116 @@
+// withHooks
+
+import { ComponentSection_notif } from 'esoftplay/cache/component/section_notif/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import { NotificationItem } from 'esoftplay/cache/notification/item/import';
+import { EventOrder_status } from 'esoftplay/cache/event/order_status/import';
+import { UserNotification_list } from 'esoftplay/cache/user/notification_list/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface NotificationEventArgs {
+
+}
+export interface NotificationEventProps {
+
+}
+
+const state = useGlobalState<any>(undefined, { persistKey: 'notification_event_data', inFile: true })
+
+export default function m(props: NotificationEventProps): any {
+  const [data, setData] = state.useState()
+  const [error, setError] = useSafeState<any>('')
+  const [badge, setBadge] = useSafeState<number>(0)
+
+  let menu = EventOrder_status()
+
+
+  function loadBadgeWaitingOrder() {
+    new LibCurl('event_order_waiting_notification', null, (res, msg) => {
+      setBadge(res?.waiting)
+      // setIsExist(1)
+    }, (error) => {
+    }, 1)
+  }
+
+  useEffect(() => {
+    new LibCurl('event_booking_notification', null,
+      (res, msg) => {
+        setData(res)
+      }, msg => {
+        setError(msg?.message)
+      }, 1
+    )
+    loadBadgeWaitingOrder()
+  }, [])
+
+  function renderMenu(item: any, i: number) {
+    return (
+      <NotificationItem key={i} icon={item.icon} badge={data?.member?.[item.code]} onPress={() => {
+        LibNavigation.navigate(item.module, { status: item.code })
+      }} title={item.text} />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <UserNotification_list
+        tag='#event'
+        ListHeaderComponent={
+          !data && error == '' ?
+            <LibLoading /> :
+            <>
+              <View style={{ marginTop: 15 }} />
+              <ComponentSection_notif title={esp.lang("notification/event", "Ticket_Purchase")} onPress={() => {
+                LibNavigation.navigate('event/order')
+              }} />
+
+              <TouchableOpacity
+                onPress={() => {
+                  LibNavigation.navigate('event/order_waiting')
+                }}
+                style={{ margin: 15, flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b", flex: 1 }}>{esp.lang("notification/event", "waiting_payment")}</Text>
+
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  {
+                    badge != 0 &&
+                    <View style={{ backgroundColor: LibStyle.colorRed, height: 17, padding: 5, paddingVertical: 2, borderRadius: 10, alignContent: 'center', alignItems: 'center' }}>
+                      <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, letterSpacing: 0, color: "#ffffff" }}>{badge > 99 ? "99+" : String(badge)}</Text>
+                    </View>
+                  }
+                  <LibIcon name='chevron-right' />
+                </View>
+              </TouchableOpacity>
+
+              <View style={{ marginLeft: 5, marginTop: 15, flexDirection: 'row', flexWrap: 'wrap' }}>
+                {
+                  menu.filter((it: any) => it.publish == 1).map(renderMenu)
+                }
+              </View>
+
+              <TouchableOpacity onPress={() => {
+                LibNavigation.navigate('event/visitor_index')
+              }} style={{ flexDirection: 'row', borderRadius: 10, backgroundColor: '#FEFBEB', borderColor: "#FFCC29", borderWidth: 1, borderStyle: 'dashed', alignContent: 'center', alignItems: 'center', flex: 1, margin: 15, marginTop: 0, padding: 10 }}>
+                <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }} >{esp.lang("notification/event", "history_staff_pic_exhibitor")}</Text>
+                <LibPicture source={esp.assets('icons/ic_chevron_right.png')} style={{ marginLeft: 6, height: 13, width: 13, resizeMode: 'contain' }} />
+              </TouchableOpacity>
+
+              <MarketSection_menu title={esp.lang("notification/event", "notification")} />
+            </>
+        }
+      />
+    </View>
+  )
+}

package/modules/notification/index.tsx

@@ -0,0 +1,312 @@
+// withHooks
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { NotificationCommunity } from 'esoftplay/cache/notification/community/import';
+import { NotificationDc } from 'esoftplay/cache/notification/dc/import';
+import { NotificationEvent } from 'esoftplay/cache/notification/event/import';
+import { NotificationMarketplace } from 'esoftplay/cache/notification/marketplace/import';
+import { NotificationMitra } from 'esoftplay/cache/notification/mitra/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserNotification } from 'esoftplay/cache/user/notification/import';
+import { UserNotification_list } from 'esoftplay/cache/user/notification_list/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect, useRef } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface NorificationIndexProps {
+
+}
+
+const cacheTabsNotification = useGlobalState(undefined, { persistKey: 'notif_cache' })
+
+export default function m(props: NorificationIndexProps): any {
+  const user = UserClass.state().useSelector(x => x)
+  const slidertab = useRef<ScrollView>(null)
+  let _tabsOrigin: any = {
+    umum: {
+      id: 1,
+      tag: '',
+      title: esp.lang("notification/index", "general"),
+      total: 0,
+      icon: 'icons/ic_notification.png',
+      view: UserNotification_list,
+      publish: 1
+    },
+    event: {
+      id: 5,
+      tag: '#event',
+      title: esp.lang("notification/index", "event"),
+      total: 0,
+      icon: 'menu/ic_event.png',
+      view: NotificationEvent,
+      publish: 1
+    },
+    jobs: {
+      id: 2,
+      tag: '#community',
+      title: esp.lang("notification/index", "job"),
+      total: 0,
+      icon: 'menu/ic_jobs.png',
+      view: NotificationCommunity,
+      publish: 1
+    },
+    market: {
+      id: 3,
+      tag: '#marketplace',
+      title: esp.lang("notification/index", "toko_bbo"),
+      total: 0,
+      icon: 'menu/ic_toko_bbo2.png',
+      view: NotificationMarketplace,
+      publish: 1
+    },
+    mitra: {
+      id: 4,
+      tag: '#mitra',
+      title: esp.lang("notification/index", "toserba"),
+      total: 0,
+      icon: 'menu/ic_business.jpg',
+      view: NotificationMitra,
+      publish: 1
+    },
+    dc: {
+      id: 6,
+      tag: '#dc',
+      title: esp.lang("notification/index", "dc"),
+      total: 0,
+      icon: 'menu/ic_business.jpg',
+      view: NotificationDc,
+      publish: esp.isDebug('dc_debug') && user?.mitra_id != 0
+    }
+  }
+
+  let _def = !esp.isDebug('') ? ['umum', 'event', 'jobs', 'market', 'mitra'] :
+    (esp.isDebug('mitra_debug,dc_debug') && user?.mitra_id != 0) ? ['umum', 'event', 'jobs', 'market', 'mitra', 'dc'] :
+      ['umum', 'event', 'jobs', 'market', 'mitra']
+  const def: any = cacheTabsNotification.get() || _def
+
+  const _tabs: any = def.map((key: any) => (_tabsOrigin[key])).filter((x: any) => x.publish == 1)
+
+  const { stab } = LibNavigation.getArgsAll(props, { stab: 0 })
+
+  const [tab, setTab] = useSafeState<any>(stab)
+  const [tabs, setTabs] = useSafeState<any>(esp.isDebug('mitra_debug,dc_debug') ? _tabs.slice(0, 3) : _tabs)
+  const [selectTabs, setSelecTabs] = useSafeState<any>(_tabs[stab])
+
+  // const TView = esp.isDebug() ? [UserNotification_list, NotificationCommunity, NotificationMarketplace, /* EventVisitor_history */NotificationMitra, NotificationEvent][tab]
+  //   : [UserNotification_list, NotificationCommunity, NotificationMarketplace, NotificationEvent][tab]
+  const TView = _tabsOrigin?.[def[tab]]?.view
+  const reverseData = UserNotification.state().useSelector(s => s.data)
+
+  let filtered: any = reverseData
+  let pattern = new RegExp(/^#[A-Za-z]+\s{0,}/, 'g')
+
+  useEffect(() => {
+    if (_def?.length != def?.length) {
+      AsyncStorage.removeItem('notif_cache')
+    }
+    // if (stab != 0) {
+    //   InteractionManager.runAfterInteractions(() => {
+    //     slidertab.current?.scrollTo?.({ x: 0, y: stab * 100, animated: false })
+    //   })
+    // }
+  }, [])
+
+  useEffect(() => {
+    let a: any = []
+    tabs.map((item: any) => {
+      if (!item.tag) {
+        filtered = reverseData?.filter?.((x: any) => !String(x.title).match(pattern))
+        filtered = filtered?.filter((item: any) => item.status != 2)
+        item.total = filtered?.length
+        a.push(item)
+      } else {
+        filtered = reverseData?.filter?.((x: any) => x.title.includes(item.tag))
+        filtered = filtered?.filter((item: any) => item.status != 2)
+        item.total = filtered?.length
+        a.push(item)
+      }
+    })
+
+    setTabs(a)
+  }, [reverseData])
+
+  function renderTabs(item: any, i: number) {
+    let tabsLength = 4
+    return (
+      <ComponentTouchable key={i} onPress={() => {
+        setTab(i)
+        setSelecTabs(item)
+      }}>
+        <View style={applyStyle({ height: 43, width: LibStyle.width / tabsLength, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' })}>
+          <Text allowFontScaling={false} style={{
+            width: LibStyle.width / tabsLength, fontFamily: "Arial", fontSize: tab == i ? 13 : 12,
+            fontWeight: tab == i ? "bold" : "normal",
+            fontStyle: "normal", letterSpacing: 0, textAlign: "center",
+            color: tab == i ? "#51b596" : "#c5c5c5"
+          }}>{item.title}</Text>
+          <View style={{ marginTop: 2, width: 5, height: 5, borderRadius: 2.5, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorRed, opacity: item.total > 0 ? 1 : 0 }} />
+          <View style={{ width: (LibStyle.width / tabsLength) - 20, height: 3, backgroundColor: tab == i ? "#51b596" : "#fff", position: 'absolute', bottom: 0 }} />
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderMainTab(item: any, i: number) {
+    return (
+      <TouchableOpacity key={i} onPress={() => {
+        if (editable) {
+          setMainTab(LibObject.splice(mainTab, i, 1)())
+          setArrKey(LibObject.splice(arrKey, i, 1)())
+        } else {
+          setTab(i)
+          setSelecTabs(item)
+          sliding.current?.hide()
+        }
+      }} activeOpacity={1} style={{ marginRight: 10, alignItems: 'center' }} >
+        <View style={{ width: itemWidth, alignItems: "center", padding: 15, borderRadius: 5 }} >
+          <LibPicture source={esp.assets(item?.icon)} style={{ width: 45, height: 45 }} resizeMode="contain" />
+          {
+            editable &&
+            <View style={{ position: 'absolute', top: 7, right: 10, height: 18, width: 18, borderRadius: 9, borderWidth: 0.8, borderColor: 'white', padding: 5, paddingVertical: 2, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+              <LibIcon name="minus" size={14} color="white" />
+            </View>
+          }
+        </View>
+        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12, alignItems: 'center' }} >{item.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+  function renderTabsOrigin(item: any, i: number) {
+    return (
+      <TouchableOpacity key={i} disabled={editable && mainTab.length == 3} onPress={() => {
+        if (mainTab.length < 3 && !mainTab.map((x: any) => x.id).includes(item.id)) {
+          setMainTab(LibObject.push(mainTab, item)())
+          setArrKey(LibObject.push(arrKey, _def[i])())
+        } else if (!editable) {
+          setTab(_tabs.findIndex((it: any) => it.id == item.id))
+          setSelecTabs(item)
+          sliding.current?.hide()
+        }
+      }} activeOpacity={1} style={{ marginRight: 10, alignItems: 'center', paddingBottom: 5 }} >
+        <View style={{ width: itemWidth, alignItems: "center", padding: 15, paddingBottom: 10, borderRadius: 5 }} >
+          <LibPicture source={esp.assets(item?.icon)} style={{ width: 45, height: 45 }} resizeMode="contain" />
+          {
+            mainTab.length < 3 && !mainTab.map((x: any) => x.id).includes(item.id) &&
+            <View style={{ position: 'absolute', top: 7, right: 10, height: 18, width: 18, borderRadius: 9, borderWidth: 0.8, borderColor: 'white', padding: 5, paddingVertical: 2, backgroundColor: mainTab.map((x: any) => x.id).includes(item.id) ? '#707070' : LibStyle.colorGreen, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+              <LibIcon name="plus" size={14} color="white" />
+            </View>
+          }
+        </View>
+        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 12, alignItems: 'center' }} >{item.title}</Text>
+      </TouchableOpacity>
+    )
+  }
+
+  const sliding = useRef<LibSlidingup>(null)
+  const itemWidth = (LibStyle.width - 70) / 4
+
+  const [mainTab, setMainTab] = useSafeState(_tabs.slice(0, 3))
+  const [editable, setEditable] = useSafeState(false)
+  const [arrKey, setArrKey] = useSafeState(def.slice(0, 3))
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("notification/index", "notification")} notif />
+      <View style={{ height: 43, marginBottom: 2, flexDirection: 'row', backgroundColor: '#fff', borderBottomWidth: 1, borderBottomColor: '#f2f2f2', /* ...LibStyle.elevation(2) */ }} >
+        {
+          !esp.isDebug('live_only') &&
+          <Pressable style={{ justifyContent: 'center' }} >
+            <LibIcon.SimpleLineIcons name='arrow-left' size={14} color={"#999"} />
+          </Pressable>
+        }
+        <ScrollView
+          ref={slidertab}
+          horizontal
+          showsHorizontalScrollIndicator={false} >
+          {
+            tabs.map(renderTabs)
+          }
+          {
+            esp.isDebug('') &&
+            <ComponentTouchable onPress={() => { sliding.current?.show() }}>
+              <View style={{ height: 43, width: LibStyle.width / 4, alignItems: 'center', overflow: 'visible', justifyContent: 'center', backgroundColor: '#fff' }}>
+                <Text allowFontScaling={false} style={{
+                  width: LibStyle.width / 4, fontFamily: "Arial", fontSize: 13,
+                  fontWeight: "normal",
+                  fontStyle: "normal", letterSpacing: 0, textAlign: "center",
+                  color: "#c5c5c5"
+                }}>{esp.lang("notification/index", "others")}</Text>
+                <View style={{ marginTop: 2, width: 5, height: 5, borderRadius: 2.5, alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorRed, opacity: 0 }} />
+              </View>
+
+            </ComponentTouchable>
+          }
+        </ScrollView>
+        {
+          !esp.isDebug('live_only') &&
+          <Pressable style={{ justifyContent: 'center' }} >
+            <LibIcon.SimpleLineIcons name='arrow-right' size={14} color={"#999"} />
+          </Pressable>
+        }
+      </View>
+      <TView tag={selectTabs?.tag} />
+      <LibSlidingup ref={sliding} onChangeShow={(s) => {
+        if (!s) {
+          setEditable(false)
+          setMainTab(_tabs.slice(0, 3))
+        }
+      }} >
+        <View style={{ backgroundColor: "white", borderTopLeftRadius: 20, borderTopRightRadius: 20 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingTop: 15, paddingHorizontal: 17 }} >
+            <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 16 }} >{esp.lang("notification/index", "favorite")}</Text>
+            <TouchableOpacity disabled={mainTab.length < 3} onPress={() => {
+              if (editable) {
+                let a = arrKey.concat(def.filter((item: any) => arrKey.indexOf(item) < 0))
+                cacheTabsNotification.set(a)
+                sliding?.current?.hide()
+                LibNavigation.backToRoot()
+                LibNavigation.navigate('notification/index')
+              } else {
+                setEditable(!editable)
+              }
+            }} style={{ backgroundColor: mainTab.length < 3 ? '#e6e6e6' : 'white', alignItems: 'center', paddingHorizontal: 10, paddingVertical: 6, borderWidth: 1, borderRadius: 20, borderColor: LibStyle.colorPrimary }} >
+              <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 12 }} >{editable ? esp.lang("notification/index", "save") : esp.lang("notification/index", "change")}</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginLeft: 15, marginTop: 5, minHeight: itemWidth }}>
+            {
+              mainTab?.map?.(renderMainTab)
+            }
+            {
+              new Array(Math.abs(mainTab.length - 3)).fill(' ').map((x: any, i: number) => (
+                <View key={i} style={{ width: itemWidth, alignItems: "center", padding: 15, borderRadius: 5 }} >
+                  <View style={{ backgroundColor: '#f1f1f1', width: 50, height: 50, borderRadius: 25 }} />
+                </View>
+              ))
+            }
+          </View>
+          <Text allowFontScaling={false} style={{ fontFamily: 'ArialBold', fontSize: 16, paddingHorizontal: 17, paddingTop: 15 }} >{esp.lang("notification/index", "all")}</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginLeft: 15, marginTop: 5 }}>
+            {
+              Object.values(_tabsOrigin)?.filter((t: any) => t.publish == 1).map(renderTabsOrigin)
+            }
+          </View>
+        </View>
+      </LibSlidingup>
+    </View >
+  )
+}

package/modules/notification/item.tsx

@@ -0,0 +1,47 @@
+// withHooks
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface NotificationItemProps {
+  title: string,
+  badge: number,
+  icon: string,
+  onPress: () => void,
+  imgStyle?: any,
+  imgContainerStyle?: any,
+  containerStyle?: any,
+  badgeContainerStyle?: any
+}
+export default function m(props: NotificationItemProps): any {
+
+  const width = (LibStyle.width / 4) - 25
+  const height = (LibStyle.width / 4) - 25
+  const badge = props.badge > 99 ? '99+' : props.badge
+
+  const styleId_Z3GUVS: any = { width: width, height: height, marginRight: 5, marginLeft: 15, marginBottom: 52, marginTop: 10, ...props.containerStyle }
+  const styleId_Z25pSJF: any = { width: width, height: height, borderRadius: 8, /* backgroundColor: "#c4c4c4" */...props.imgStyle, ...props.imgContainerStyle }
+  const styleId_DRl54: any = { width: width, height: height, ...props.imgStyle }
+  const styleId_Z2gRRWj: any = { position: 'absolute', top: -10, right: -10, height: 24, width: 24, borderRadius: 12, padding: 5, paddingVertical: 2, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center', ...props.badgeContainerStyle }
+  const styleId_wKxLf: any = { fontFamily: "ArialBold", fontSize: props.badge > 99 ? 8 : 10, letterSpacing: 0, color: "#ffffff" }
+
+  return (
+    <TouchableOpacity onPress={props.onPress} style={styleId_Z3GUVS}>
+      <View style={styleId_Z25pSJF}>
+        <LibPicture source={esp.assets(props.icon)} style={styleId_DRl54} resizeMode="contain" />
+      </View>
+      {
+        props.badge > 0 &&
+        <View style={styleId_Z2gRRWj} >
+          <Text allowFontScaling={false} style={styleId_wKxLf} >{badge || 0}</Text>
+        </View>
+      }
+      <Text allowFontScaling={false} numberOfLines={2} style={styleId_Z28MHjK}>{props.title}</Text>
+    </TouchableOpacity>
+  )
+}
+const styleId_Z28MHjK: any = { marginTop: 8, fontFamily: "SFProText", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, color: "#4b4b4b", flexWrap: 'wrap', textAlign: 'center' }

package/modules/notification/marketplace.tsx

@@ -0,0 +1,175 @@
+// withHooks
+import { ComponentSection_notif } from 'esoftplay/cache/component/section_notif/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibFocus } from 'esoftplay/cache/lib/focus/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketMerchant_orderArgs } from 'esoftplay/cache/market/merchant_order/import';
+import { MarketOrderArgs } from 'esoftplay/cache/market/order/import';
+import { MarketOrder_status } from 'esoftplay/cache/market/order_status/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import { NotificationItem } from 'esoftplay/cache/notification/item/import';
+import { NotificationMarketplaceProperty } from 'esoftplay/cache/notification/marketplace/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserNotification_list } from 'esoftplay/cache/user/notification_list/import';
+import esp from 'esoftplay/esp';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+import { useTimeout } from 'esoftplay/timeout';
+
+import React, { useEffect, useRef } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface NotificationMarketplaceProps {
+
+}
+
+function Status(props: any) {
+  // const tabRef = useRef<LibList>(null)
+  const tabRef = useRef<LibScroll>(null)
+  const allStatus = [esp.lang("notification/marketplace", "all"), esp.lang("notification/marketplace", "buyer"), esp.lang("notification/marketplace", "seller")]
+  const group_ids = [undefined, '4', '3']
+  const user = UserClass.state().get()
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    if (props.status)
+      timeout(() => {
+        tabRef?.current?.scrollToIndex?.(group_ids.indexOf(props.status))
+      }, 500);
+  }, [])
+
+  return (
+    <View style={{ minHeight: 50 }} >
+      <LibScroll ref={tabRef} horizontal initialNumToRender={20} >
+        <View style={{ width: 10 }} />
+        {
+          allStatus.map((status: any, index: number) => {
+            if (user?.merchant_id == 0 && status == esp.lang("notification/marketplace", "seller")) {
+              return null
+            } else {
+              return (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => props.onChangeStatus(group_ids[index])}
+                  style={{ height: 32, marginVertical: 10, marginRight: 10, borderRadius: 20, backgroundColor: props.status == group_ids[index] ? LibStyle.colorPrimaryMarket : 'transparent', borderColor: props.status == group_ids[index] ? 'transparent' : '#ccc', borderWidth: 1, paddingHorizontal: 17, justifyContent: 'center' }} >
+                  <LibTextstyle textStyle='footnote' text={status} style={{ color: props.status == group_ids[index] ? 'white' : '#4E4E4E' }} />
+                </TouchableOpacity>
+              )
+            }
+          })
+        }
+      </LibScroll>
+      <MarketSection_menu size='line' />
+    </View>
+  )
+}
+
+const _state = useGlobalState<any>(undefined, { persistKey: 'notification_marketplace_data', inFile: true })
+
+export function state(): useGlobalReturn<any> {
+  return _state
+}
+
+export default function m(props: NotificationMarketplaceProps): any {
+
+  const user = UserClass.state().get()
+  const [data, setData] = NotificationMarketplaceProperty.state().useState()
+  const [error, setError] = useSafeState<any>('')
+  const [byGroup_id, setByGroup_id] = useSafeState<any>(undefined)
+  let arr = MarketOrder_status()
+  const height = (LibStyle.width / 4) - 50
+
+  function getData() {
+    new LibCurl('shop/order_notification', null,
+      (res, msg) => {
+        setData(res)
+      }, msg => {
+        setError(msg?.message)
+      }, 1
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <LibFocus onFocus={getData} />
+      <UserNotification_list
+        tag='#marketplace'
+        key={data}
+        group_id={byGroup_id}
+        ListHeaderComponent={
+          !data && error == '' ?
+            <LibLoading /> :
+            // esp.isDebug() && // #publish_market
+            <>
+              <View style={{ marginTop: 15 }} />
+              <ComponentSection_notif title={esp.lang("notification/marketplace", "purchase")} onPress={() => { LibNavigation.navigate('market/order') }} />
+              <TouchableOpacity
+                onPress={() => LibNavigation.navigate<MarketOrderArgs>('market/order', { status: 1 })}
+                style={{ margin: 15, flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b", flex: 1 }}>{esp.lang("notification/marketplace", "waiting_payment")}</Text>
+                {
+                  data?.member?.[1] > 0 &&
+                  <View style={{ height: 25, width: 25, borderRadius: 12.5, padding: 5, marginRight: 10, paddingVertical: 2, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }} >
+                    <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", textAlign: "center", fontSize: 10, letterSpacing: 0, color: "#ffffff" }} >{data?.member?.[1]}</Text>
+                  </View>
+                }
+                <LibIcon name="chevron-right" color='#4b4b4b' />
+              </TouchableOpacity>
+              <View style={{ height: 1, backgroundColor: '#e3e3e3', marginLeft: 15, marginRight: 15, marginBottom: 20 }} />
+              <View style={{ marginRight: 5, flexDirection: 'row', flexWrap: 'wrap' }}>
+                {
+                  arr.map((item, i) => {
+                    if (item.code != 1)
+                      return (
+                        <NotificationItem
+                          key={i}
+                          icon={item.icon}
+                          badge={data?.member?.[item.code]}
+                          badgeContainerStyle={{ top: -15, right: 0 }}
+                          imgContainerStyle={{ width: 30, height: 30, alignSelf: 'center' }}
+                          imgStyle={{ width: 30, height: 30, alignSelf: 'center' }}
+                          containerStyle={{ height: height }} onPress={() => { LibNavigation.navigate<MarketOrderArgs>('market/order', { status: item.code }) }} title={item.text} />
+                      )
+                    return null
+                  })
+                }
+              </View>
+              {
+                user?.merchant_id != 0 &&
+                <>
+                  <View style={{ height: 1, backgroundColor: '#e3e3e3', marginLeft: 15, marginRight: 15, marginTop: 20, marginBottom: 20 }} />
+                  <ComponentSection_notif title={esp.lang("notification/marketplace", "selling")} onPress={() => { LibNavigation.navigate('market/merchant_order') }} />
+                  <View style={{ marginTop: 20, marginRight: 5, flexDirection: 'row', flexWrap: 'wrap' }}>
+                    {
+                      arr.map((item, i) => {
+                        return (
+                          <NotificationItem
+                            key={i}
+                            icon={item.icon}
+                            badge={data?.merchant?.[item.code]}
+                            badgeContainerStyle={{ top: -15, right: 0 }}
+                            imgContainerStyle={{ width: 37, height: 37, alignSelf: 'center', justifyContent: 'center', backgroundColor: LibUtils.hexToRgba(LibStyle.colorPrimaryMarket, 0.1), borderRadius: 8 }}
+                            imgStyle={{ width: 30, height: 30, alignSelf: 'center' }}
+                            containerStyle={{ height: height }}
+                            onPress={() => { LibNavigation.navigate<MarketMerchant_orderArgs>('market/merchant_order', { status: item.code }) }} title={item.text} />
+                        )
+                      })
+                    }
+                  </View>
+                </>
+              }
+              <MarketSection_menu title={esp.lang("notification/marketplace", "notification")} />
+              <Status status={byGroup_id} onChangeStatus={setByGroup_id} />
+            </>
+        }
+      />
+    </View >
+  )
+}