esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/ticket/lottery.tsx

@@ -0,0 +1,172 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import { useEffect } from 'react';
+
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import React from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventOrder_lotteryArgs {
+
+}
+export interface EventOrder_lotteryProps {
+
+}
+export default function m(props: EventOrder_lotteryProps): any {
+  const { id } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+
+  useEffect(() => {
+    loadData()
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function loadData(): void {
+    new LibCurl("event_order_detail_luckydraw?id=" + id, null, (res: any) => {
+      let a = res?.list?.map((item: any) => {
+        return ({
+          ...item,
+          qty: 0
+        })
+      })
+      let b = {
+        coupon: res?.coupon,
+        list: a
+      }
+      setResult(b)
+    }, (error: any) => {
+      esp.log(error);
+      LibDialog.warning("Oops", error?.message)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  function sendSubmit() {
+    let filterData = result?.list?.filter((x: any) => x.qty > 0).map((item: any) => {
+      return ({
+        id: item.id,
+        qty: item.qty
+      })
+    })
+
+    let post = {
+      prize_list: JSON.stringify(filterData)
+    }
+
+    LibDialog.confirm(esp.lang("event/order_lottery", "confirm"), esp.lang("event/order_lottery", "confirm_point"), esp.lang("event/order_lottery", "yes"), () => {
+      LibProgress.show("Mohon tunggu")
+      new LibCurl("event_order_detail_luckydraw_claim?id=" + id, post, (res: any) => {
+        LibProgress.hide()
+        esp.log(res);
+        LibDialog.info(esp.lang("event/order_lottery", "information"), res)
+        LibNavigation.sendBackResult(res)
+      }, (error: any) => {
+        LibProgress.hide()
+        esp.log(error);
+        LibDialog.warning(esp.lang("event/order_lottery", "oops"), error?.message)
+      }, 1)
+    }, esp.lang("event/order_lottery", "no"), () => {
+
+    })
+  }
+
+  function getTotalQty() {
+    return result.list.reduce((x: any, current: any) => x + current.qty, 0);
+  };
+
+  function renderItem(item: any, i: number) {
+
+    return (
+      <View key={i} style={{ flexDirection: 'row', margin: 15 }}>
+        <Pressable onPress={() => { }} style={{ flex: 1, flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center', paddingLeft: 50, marginLeft: 35, borderRadius: 5, padding: 10, backgroundColor: '#fff' }}>
+          <View style={{ flex: 1, marginRight: 5, }}>
+            <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='tail' style={{ fontWeight: 'bold', fontSize: 16 }} >{item.title}</Text>
+            <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={{ fontSize: 12, color: 'grey' }}>{item.description}</Text>
+
+            <View style={applyStyle({ marginTop: 10, alignSelf: 'flex-end', flexDirection: 'row', alignContent: 'center', alignItems: 'center' })}>
+              <TouchableOpacity onPressIn={() => {
+                if (item.qty > 0) {
+                  let updatedList = LibObject.set(result, item.qty - 1)('list', i, 'qty');
+                  setResult(updatedList);
+                }
+              }} hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} testID='minus_btn' onPress={() => { }}>
+                <View style={applyStyle({ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
+                  <LibIcon name="minus" color="#e74c3c" />
+                </View>
+              </TouchableOpacity>
+              <Text style={applyStyle({ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 })}>{item.qty}</Text>
+              <TouchableOpacity onPressIn={() => {
+                const currentTotalQty = getTotalQty();
+                if (currentTotalQty < result.coupon) {
+                  let updatedQty = item.qty + 1;
+                  if (currentTotalQty + 1 > result.coupon) {
+                    updatedQty = item.qty + (result.coupon - currentTotalQty);
+                  }
+                  let updatedList = LibObject.set(result, updatedQty)('list', i, 'qty');
+                  setResult(updatedList);
+                } else {
+                  LibToastProperty.show(esp.lang("event/order_lottery", "your_maks_token_is") + result?.coupon)
+                }
+              }} hitSlop={{ top: 15, left: 15, right: 15, bottom: 15 }} testID='plus_btn' onPress={() => { }}>
+                <View style={applyStyle({ padding: 1, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' })}>
+                  <LibIcon name="plus" color="#16a085" />
+                </View>
+              </TouchableOpacity>
+            </View>
+
+          </View>
+        </Pressable>
+        <View style={{ position: 'absolute', top: 15, height: 80, width: 80, borderRadius: 40, alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
+          <LibPicture style={{ height: 70, width: 70, borderRadius: 35, backgroundColor: '#000' }} resizeMode='cover' source={{ uri: item.image }} />
+        </View>
+      </View>
+    )
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey /* "#FFC523" */ }}>
+      <ComponentHeader title={esp.lang("event/order_lottery", "follow_lucky_draw")} />
+
+      <ScrollView>
+        {
+          result?.list?.map(renderItem)
+        }
+
+      </ScrollView>
+      <View style={{ backgroundColor: '#fff' }}>
+        <Text style={{ margin: 10, marginBottom: 0 }} >{esp.lang("event/order_lottery", "u_have") + result?.coupon + esp.lang("event/order_lottery", "token_for_luckydraw")}</Text>
+
+        <ComponentButton
+          label={esp.lang("event/order_lottery", "submit")}
+          onPress={() => {
+            if (getTotalQty() == result?.coupon) {
+              sendSubmit()
+            } else {
+              LibToastProperty.show(esp.lang("event/order_lottery", "please_enter_all_point"))
+            }
+          }}
+          style={{ margin: 10, borderRadius: 5 }}
+          backgroundColor={getTotalQty() == result?.coupon ? LibStyle.colorGreen : LibStyle.colorBgGrey}
+        />
+      </View>
+    </View>
+  )
+}

package/modules/ticket/order.tsx

@@ -0,0 +1,324 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { MarketButton } from 'esoftplay/cache/market/button/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import { EventOrder_item } from 'esoftplay/cache/event/order_item/import';
+import { EventOrder_status } from 'esoftplay/cache/event/order_status/import';
+import esp from 'esoftplay/esp';
+
+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 }}>
+      <ComponentHeader 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>
+            <MarketSection_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) => (
+          <ComponentMessage message={err} style={{ marginTop: 15 }} />
+        )}
+        renderItem={renderItem}
+        ListEndedComponent={
+          esp.isDebug('') && isExist == 1 &&
+          <ComponentTouchable 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>
+          </ComponentTouchable>
+        }
+      />
+      <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>
+          <MarketButton text={esp.lang("event/order", "apply")} buttonStyle={applyStyle({ marginVertical: 15 })} colorBackground={LibStyle.colorPrimary} textStyle={applyStyle({ fontSize: 14 })} 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>
+
+          <MarketSection_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>
+          }
+          <MarketButton text={esp.lang("event/order", "apply")} colorBackground={LibStyle.colorPrimary} buttonStyle={applyStyle({ marginHorizontal: 15, marginTop: 15 })} textStyle={applyStyle({ 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 >
+  )
+}

package/modules/ticket/order_history.tsx

@@ -0,0 +1,102 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import moment from 'esoftplay/moment';
+
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventOrder_historyArgs {
+
+}
+export interface EventOrder_historyProps {
+
+}
+export default function m(props: EventOrder_historyProps): any {
+
+  function renderItem(item: any) {
+    let diffDay = LibUtils.moment(item.ondate).fromNow()
+
+
+    return (
+      <ComponentTouchable onPress={() => { LibNavigation.navigate('event/order_detail', { url: item.url }) }}>
+        <View style={applyStyle({ width: LibStyle.width - 30, marginTop: 15, marginLeft: 15, marginRight: 15, borderRadius: 5, backgroundColor: '#fff', ...LibStyle.elevation(2) })}>
+          <Text allowFontScaling={false} style={applyStyle({ paddingLeft: 15, paddingTop: 10, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, })}>{item.event_name}</Text>
+          <View style={applyStyle({ paddingHorizontal: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' })}>
+            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, marginTop: 4 })}>{item.ondate != "0000-00-00" ? LibUtils.moment(item.ondate).localeFormat('DD MMMM YYYY') : esp.lang("event/order", "ticket") + item.type_name}</Text>
+            {
+              item?.status == 1 &&
+              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "ArialBold", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{
+                item.ondate == LibUtils.moment().localeFormat("YYYY-MM-DD") ? esp.lang("event/order", "now_show") : item?.ondate != "0000-00-00" ? (diffDay) : ''
+              }</Text>
+            }
+          </View>
+
+          <View style={{ marginLeft: 15, marginTop: 4, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{item?.qty}</Text>
+            <Text allowFontScaling={false} style={{ marginLeft: 4, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("event/order_history", "ticket_qty")}</Text>
+          </View>
+
+          {/* garis atas */}
+          <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' })}>
+            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: '#f6f6f6', marginLeft: -12.5 })} />
+            <View style={applyStyle({ borderBottomWidth: 1, borderBottomColor: '#9b9b9b', flex: 1 })} />
+            <View style={applyStyle({ width: 25, height: 25, borderRadius: 12.5, backgroundColor: '#f6f6f6', marginRight: -12.5 })} />
+          </View>
+
+          <View style={applyStyle({ flexDirection: 'row', borderBottomWidth: 1, paddingBottom: 10, borderBottomColor: '#9b9b9b' })}>
+            <LibPicture style={applyStyle({ width: 60, height: 60, resizeMode: 'cover', borderRadius: 5, marginLeft: 15 })} source={{ uri: item.image }} />
+            <View style={applyStyle({ flex: 1 })}>
+              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894" })}>{item.type_name}</Text>
+              {
+                item.total != "0" &&
+                <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 4 })}>{LibUtils.money(item.total)}</Text>
+              }
+              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#00b894", marginTop: 7 })}>{esp.lang("event/order", "event_period")}</Text>
+              <Text allowFontScaling={false} style={applyStyle({ marginLeft: 14, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 4 })}>{LibUtils.getDateRange(item.start_date, item.end_date)}</Text>
+            </View>
+          </View>
+          {
+            item.status == 0 ?
+              <View style={applyStyle({ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', alignContent: 'center', paddingHorizontal: 15 })}>
+                <MarketCountdown expired={moment(item.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss')} style={applyStyle({ flex: 1, fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
+                <Text allowFontScaling={false} style={applyStyle({ flex: 1, flexWrap: 'wrap', padding: 10, paddingHorizontal: 0, textAlign: 'right', fontFamily: "ArialBold", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed })}>{item.booking_code}</Text>
+              </View>
+              :
+              item.status == 1 ?
+                <Text allowFontScaling={false} style={applyStyle({ padding: 10, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: '#70472b' })}>{item.booking_code}</Text>
+                :
+                <Text allowFontScaling={false} style={applyStyle({ padding: 10, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: LibStyle.colorRed })}>{item.booking_code}</Text>
+          }
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/order_history", "header")} />
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <LibInfinite
+          url={'event_order_history'}
+
+          // key={status + counter + selectedDate}
+          errorView={(err: any) => (
+            <ComponentMessage message={err} />
+          )}
+          renderItem={renderItem}
+        />
+      </View>
+    </View>
+  )
+}