esoftplay-event 0.0.0-a → 0.0.0-c

package/event/order.tsx

@@ -0,0 +1,323 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import { EventOrder_item } from 'esoftplay/cache/event/order_item/import';
+import { EventOrder_status } from 'esoftplay/cache/event/order_status/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/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 esp from 'esoftplay/esp';
+
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventSection_menu } from 'esoftplay/cache/event/section_menu/import';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import useGlobalSubscriber, { useGlobalSubscriberReturn } from 'esoftplay/subscribe';
+import { useTimeout } from 'esoftplay/timeout';
+import React, { useEffect, useRef } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventOrderProps {
+
+}
+
+export interface EventOrderArgs {
+  status: any
+}
+
+function Status(props: any) {
+  const tabRef = useRef<LibScroll>(null)
+  const allStatus = EventOrder_status().filter((x) => x.module == 'event/order')
+  const timeout = useTimeout()
+
+  useEffect(() => {
+    if (props.status != 1)
+      timeout(() => {
+        tabRef?.current?.scrollToIndex?.(allStatus.map((s) => s.code).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) => (
+            <TouchableOpacity key={index} onPress={() => {
+              props.onChangeStatus(status.code)
+            }} style={{ marginRight: 10, height: 26, paddingLeft: 10, paddingRight: 10, borderRadius: 13, backgroundColor: props.status == status.code ? "#ecfef8" : "#fff", borderStyle: "solid", borderWidth: 0.5, borderColor: props.status == status.code ? "#51b596" : "#c5c5c5", justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: props.status == status.code ? "#51b596" : "#c5c5c5" }}>{status.text}</Text>
+            </TouchableOpacity>
+          ))
+        }
+      </LibScroll>
+    </View>
+  )
+}
+
+const subs = useGlobalSubscriber()
+export function subscribe(): useGlobalSubscriberReturn {
+  return subs
+}
+
+export default function m(props: EventOrderProps): any {
+  const allStatus = EventOrder_status()
+  const statusCode = LibNavigation.getArgs(props, 'status', esp.isDebug("filter") ? '0,1,2,3,4,5' : '1')
+  const [status, setStatus] = useSafeState(statusCode)
+  const [code, setCode] = useSafeState(statusCode)
+  const [badge, setBadge] = useSafeState<number>(0)
+  const [selectedFilter, setSelectedFilter] = useSafeState({ id: 1, title: esp.lang("event/order", "all_date") })
+  const [selectedDate, setSelectedDate] = useSafeState({ date_start: '', date_end: '', id: 1, title: esp.lang("event/order", "all_date") })
+  const [selectedDateRange, setSelectedDateRange] = useSafeState({ date_start: moment().localeFormat("YYYY-MM-DD"), date_end: moment().localeFormat("YYYY-MM-DD") })
+
+  const statusRef = useRef<LibSlidingup>(null)
+  const dialogFilterDate = useRef<LibSlidingup>(null)
+  const [isExist, setIsExist] = useSafeState(0)
+
+  const url = 'event_order'
+
+  function loadButtonHistoryExist() {
+    new LibCurl('event_order_history_exists', null, (res, msg) => {
+      setIsExist(1)
+    }, (error) => {
+      setIsExist(0)
+    }, 1)
+  }
+
+
+  function loadBadgeWaitingOrder() {
+    new LibCurl('event_order_waiting_notification', null, (res, msg) => {
+      setBadge(res?.waiting)
+    }, (error) => {
+
+    }, 1)
+  }
+
+  useEffect(() => {
+    loadButtonHistoryExist()
+    loadBadgeWaitingOrder()
+  }, [])
+
+  let filterDate = [
+    {
+      id: 1,
+      title: esp.lang("event/order", "all_dates_transaction"),
+    },
+    {
+      id: 2,
+      title: esp.lang("event/order", "last_90_days"),
+    },
+    {
+      id: 3,
+      title: esp.lang("event/order", "last_30_days"),
+    },
+    {
+      id: 4,
+      title: esp.lang("event/order", "choose_date"),
+    },
+  ]
+
+  function renderItem(item: any) {
+    return (
+      <EventOrder_item item={item} onPress={() => {
+        LibNavigation.navigate('event/order_detail', { url: item.url })
+      }} />
+    )
+  }
+
+  function buildUrl(url: string): string {
+    if (status) {
+      url += url.includes('?') ? '&' : '?'
+      url += 'status=' + status
+    }
+    if (selectedDate?.date_start != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'start_date=' + selectedDate?.date_start
+    }
+    if (selectedDate?.date_end != "") {
+      url += url.includes('?') ? '&' : '?'
+      url += 'end_date=' + selectedDate?.date_end
+    }
+    return url
+  }
+
+  subs.useSubscribe(() => {
+    loadBadgeWaitingOrder()
+  })
+
+  return (
+    <View style={{ backgroundColor: LibStyle.colorBgGrey, flex: 1 }}>
+      <EventHeader title={esp.lang("event/order", "my_order")} />
+      {
+        esp.isDebug('filter_order_status') ?
+          <View style={{ minHeight: 50 }} >
+            <LibScroll
+              initialNumToRender={20}
+              horizontal
+            >
+              <View style={{ width: 10 }} />
+              <Pressable
+                onPress={() => { statusRef.current?.show() }}
+                style={applyStyle({ height: 30, marginVertical: 10, marginRight: 10, borderRadius: 12, backgroundColor: 'white', borderColor: '#ccc', borderWidth: 1, paddingHorizontal: 10, justifyContent: 'center', flexDirection: 'row', alignItems: 'center' })} >
+                <LibTextstyle textStyle='footnote' text={allStatus[allStatus.findIndex((x) => String(x.code) == status)]?.text || esp.lang("event/order", "all_statis")} style={applyStyle({ fontSize: 11, color: "#4E4E4E", marginRight: 5 })} />
+                <LibIcon name='chevron-down' style={applyStyle({ color: "#4E4E4E" })} />
+              </Pressable>
+              <Pressable
+                onPress={() => { dialogFilterDate?.current?.show() }}
+                style={applyStyle({ height: 30, marginVertical: 10, marginRight: 10, borderRadius: 12, backgroundColor: 'white', borderColor: '#ccc', borderWidth: 1, paddingHorizontal: 10, justifyContent: 'center', flexDirection: 'row', alignItems: 'center' })} >
+                <LibTextstyle textStyle='footnote' text={selectedDate.id == 4 ? LibUtils.getDateRange(selectedDate?.date_start, selectedDate?.date_end) : selectedDate?.title} style={applyStyle({ fontSize: 11, color: "#4E4E4E", marginRight: 5 })} />
+                <LibIcon name='calendar' size={14} style={applyStyle({ color: "#4E4E4E" })} />
+              </Pressable>
+            </LibScroll>
+            <EventSection_menu size='line' />
+          </View>
+          :
+          <View style={{ margin: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'space-between' }}>
+            <View style={{ flex: 10 }}>
+              <Status status={status} onChangeStatus={setStatus} />
+            </View>
+            <TouchableOpacity onPress={() => {
+              dialogFilterDate.current!.show()
+            }} style={{ flex: 1, marginLeft: 15 }}>
+              <LibIcon name="calendar" />
+            </TouchableOpacity>
+          </View>
+      }
+
+      <LibInfinite
+        url={buildUrl(url) + "&t=" + new Date().getTime()}
+        key={buildUrl(url)}
+        ListHeaderComponent={
+          <Pressable onPress={() => {
+            LibNavigation.navigate('event/order_waiting')
+          }} style={{ padding: 7, margin: 15, backgroundColor: '#fff', marginBottom: 0, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorPrimary, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ marginLeft: 8 }}>{esp.lang("event/order", "wawit")}</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+" : LibUtils.number(badge)}</Text>
+                </View>
+              }
+              <LibIcon name='chevron-right' />
+            </View>
+          </Pressable>
+        }
+        errorView={(err: any) => (
+          <EventMessage message={err} style={{ marginTop: 15 }} />
+        )}
+        renderItem={renderItem}
+        ListEndedComponent={
+          esp.isDebug('') && isExist == 1 &&
+          <TouchableOpacity onPress={() => { LibNavigation.navigate('event/order_history') }}>
+            <View style={applyStyle({ marginBottom: 20, marginTop: 15, justifyContent: 'center', alignSelf: 'center', width: 104, height: 23, borderRadius: 11.5, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 1, borderColor: "#e1e1e1" })}>
+              <Text allowFontScaling={false} style={applyStyle({ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" })}>{esp.lang("event/order", "show")}</Text>
+            </View>
+          </TouchableOpacity>
+        }
+      />
+      <LibSlidingup ref={statusRef} onChangeShow={(s) => { if (!s) setCode(status) }} >
+        <View style={applyStyle({ backgroundColor: 'white', paddingHorizontal: 17, borderTopLeftRadius: 10, borderTopRightRadius: 10, maxHeight: LibStyle.height * 0.9 })}>
+          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 15 })}>
+            <Pressable onPress={() => { statusRef.current?.hide() }} style={applyStyle({ marginRight: 10 })} >
+              <LibIcon name='close' />
+            </Pressable>
+            <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "Transaction_Status")} style={applyStyle({ fontWeight: 'bold', fontSize: 14, color: "#4E4E4E" })} />
+          </View>
+          <ScrollView>
+            <Pressable onPress={() => { setCode('0,1,2,3,4,5') }} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+              <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "All_Transaction_Status")} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+              <LibIcon.Ionicons name={code == '0,1,2,3,4,5' ? 'radio-button-on' : 'radio-button-off'} color={code == '0,1,2,3,4,5' ? LibStyle.colorPrimary : '#4E4E4E'} />
+            </Pressable>
+            {
+              allStatus?.filter((item: any) => item.publish == 1).map((it: any, i: number) => {
+                return (
+                  <Pressable key={i} onPress={() => setCode(it.code)} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+                    <LibTextstyle textStyle='footnote' text={it.text} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+                    <LibIcon.Ionicons name={it.code == code ? 'radio-button-on' : 'radio-button-off'} color={it.code == code ? LibStyle.colorPrimary : '#4E4E4E'} />
+                  </Pressable>
+                )
+              })
+            }
+            {/* {
+              allStatus.map((x: any, i: number) => (
+                <Pressable key={i} onPress={() => setCode(x.code)} style={applyStyle({ flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e6e6e6', paddingVertical: 12 })}>
+                  <LibTextstyle textStyle='footnote' text={x.text} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 10, color: "#4E4E4E" })} />
+                  <LibIcon.Ionicons name={x.code == code ? 'radio-button-on' : 'radio-button-off'} color={x.code == code ? LibStyle.colorPrimary : '#4E4E4E'} />
+                </Pressable>
+              ))
+            } */}
+          </ScrollView>
+          <EventButton label={esp.lang("event/order", "apply")} style={applyStyle({ fontSize: 14, marginVertical: 15 })} backgroundColor={LibStyle.colorPrimary} onPress={() => { setStatus(code); statusRef.current?.hide() }} />
+        </View>
+      </LibSlidingup>
+      <LibSlidingup ref={dialogFilterDate} onChangeShow={(s) => { if (!s) setSelectedFilter(selectedDate) }} >
+        <View style={{ backgroundColor: '#f6f6f6', borderTopRightRadius: 10, borderTopLeftRadius: 10, paddingBottom: 15 }}>
+          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', marginTop: 15, paddingHorizontal: 15 })}>
+            <Pressable onPress={() => { statusRef.current?.hide() }} style={applyStyle({ marginRight: 10 })} >
+              <LibIcon name='close' />
+            </Pressable>
+            <LibTextstyle textStyle='footnote' text={esp.lang("event/order", "select_date")} style={applyStyle({ fontWeight: 'bold', fontSize: 14, color: "#4E4E4E" })} />
+          </View>
+
+          <EventSection_menu size="line" />
+          {
+            filterDate?.map((item: any, i: number) => {
+              return (
+                <Pressable onPress={() => {
+                  setSelectedFilter(item)
+                }} key={i} style={applyStyle({ padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' })}>
+                  <LibTextstyle textStyle='footnote' text={item?.title} style={applyStyle({ flex: 1, fontWeight: 'bold', fontSize: 12, color: "#4E4E4E" })} />
+                  <LibIcon.Ionicons name={selectedFilter?.id == item.id ? 'radio-button-on' : 'radio-button-off'} color={selectedFilter?.id == item.id ? LibStyle.colorPrimary : "#4E4E4E"} />
+                </Pressable>
+              )
+            })
+          }
+          {
+            selectedFilter?.id == 4 &&
+            <Pressable onPress={() => {
+              LibNavigation.navigateForResult('feed/talent_date', { minDate: moment().add(-5, 'years').localeFormat('YYYY-MM-DD'), maxDate: moment().add(1, 'years').localeFormat('YYYY-MM-DD') }).then((item) => {
+                setSelectedDateRange(item)
+              })
+            }} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+              <View style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order", "start_from")}</Text>
+                <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{LibUtils.moment(selectedDateRange?.date_start).localeFormat("DD MMM YYYY")}</Text>
+              </View>
+              <View style={{ flex: 1, padding: 10, paddingHorizontal: 20, borderBottomWidth: 1, borderBottomColor: '#e9ecef', }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order", "until")}</Text>
+                <Text allowFontScaling={false} style={{ marginTop: 4, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{LibUtils.moment(selectedDateRange?.date_end).localeFormat("DD MMM YYYY")}</Text>
+              </View>
+            </Pressable>
+          }
+          <EventButton label={esp.lang("event/order", "apply")} backgroundColor={LibStyle.colorPrimary} style={applyStyle({ marginHorizontal: 15, marginTop: 15, fontSize: 14 })} onPress={() => {
+            if (selectedFilter.id == 1) {
+              setSelectedDate({ date_start: '', date_end: '', ...selectedFilter })
+              dialogFilterDate.current!.hide()
+            } else if (selectedFilter.id == 2) {
+              setSelectedDate({ ...selectedFilter, date_start: moment().add(-90, 'days').localeFormat('YYYY-MM-DD'), date_end: moment().localeFormat("YYYY-MM-DD") })
+              dialogFilterDate.current!.hide()
+            } else if (selectedFilter.id == 3) {
+              setSelectedDate({ date_start: moment().add(-30, 'days').localeFormat("YYYY-MM-DD"), date_end: moment().localeFormat("YYYY-MM-DD"), ...selectedFilter })
+              dialogFilterDate.current!.hide()
+            } else if (selectedFilter.id == 4) {
+              setSelectedDate({ ...selectedDateRange, ...selectedFilter })
+              dialogFilterDate.current!.hide()
+            } else {
+              setSelectedDate({ date_start: moment().localeFormat("YYYY-MM-DD"), date_end: moment().localeFormat("YYYY-MM-DD"), ...selectedFilter })
+              dialogFilterDate.current!.hide()
+            }
+          }} />
+        </View>
+      </LibSlidingup>
+    </View >
+  )
+}