esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/ticket/order_status.tsx

@@ -0,0 +1,66 @@
+// useLibs
+// noPage
+import esp from 'esoftplay/esp';
+
+
+
+export interface EventOrder_status {
+  text: string,
+  code: string,
+  module: string,
+  icon: string,
+  publish: number
+}
+
+export default function m(): EventOrder_status[] {
+  return [
+    // {
+    //   code: '0',
+    //   text: esp.lang("event/order_status", "waiting_payment"),
+    //   icon: 'icons/event/ic_notification_event_waiting.png',
+    //   publish: esp.isDebug('') ? 0 : 1
+    // },
+    {
+      code: '1',
+      text: esp.lang("event/order_status", "already_paid"),
+      module: 'event/order',
+      icon: 'icons/event/ic_notification_event_payed.png',
+      publish: 1
+    },
+    {
+      code: '3',
+      text: esp.lang("event/order_status", "done"),
+      module: 'event/order',
+      icon: 'icons/event/ic_notification_event_done.png',
+      publish: 1
+    },
+    {
+      code: '7',
+      text: esp.lang("event/order_status", "expired"),
+      module: 'event/order',
+      icon: 'icons/event/ic_notification_event_done.png',
+      publish: 1
+    },
+    {
+      code: '2,4,10',
+      text: esp.lang("event/order_status", "cancel"),
+      module: 'event/order',
+      icon: 'icons/event/ic_notification_event_cancel.png',
+      publish: 1
+    },
+    {
+      code: '5',
+      text: esp.lang("event/order_status", "refund"),
+      module: 'event/order',
+      icon: 'icons/event/ic_notification_event_done.png',
+      publish: 1
+    },
+    {
+      code: '6',
+      text: esp.lang("event/order_status", "review"),
+      module: 'event/review',
+      icon: 'icons/event/ic_notification_event_done.png',
+      publish: esp.isDebug("review") ? 1 : 0
+    }
+  ]
+}

package/modules/ticket/order_waiting.tsx

@@ -0,0 +1,143 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/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 { 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 { EventOrder_item } from 'esoftplay/cache/event/order_item/import';
+import esp from 'esoftplay/esp';
+import useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
+import { useEffect } from 'react';
+
+import { LibAutoreload } from 'esoftplay/cache/lib/autoreload/import';
+import useSafeState from 'esoftplay/state';
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+import Pressable from '../lib/pressable';
+
+
+export interface EventOrder_waitingArgs {
+
+}
+export interface EventOrder_waitingProps {
+
+}
+const subs = useGlobalSubscriber()
+export function subscribe(): UseSubscribeReturn {
+  return subs
+}
+
+export default function m(props: EventOrder_waitingProps): any {
+  const ref = useRef<LibInfinite>(null)
+  const [counter, setCounter] = useSafeState(1)
+
+  useEffect(() => {
+    return () => LibAutoreload.clear()
+  }, [])
+
+  function renderItem(item: any, i: number) {
+    if (item?.is_multi == 1) {
+      return (
+        <Pressable onPress={() => {
+          LibNavigation.navigate('event/order_detail_waiting', { url: item.url })
+        }} style={{ margin: 15, marginBottom: 5, marginTop: 10 }}>
+          <View style={{ ...LibStyle.elevation(2), overflow: 'hidden', borderRadius: 10, backgroundColor: '#fff' }}>
+            <View style={{ padding: 10, backgroundColor: '#fff', flex: 1 }}>
+              <Text allowFontScaling={false} style={applyStyle({ marginHorizontal: 15, fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{item?.event_name}</Text>
+
+              <View style={applyStyle({ marginHorizontal: 15, marginTop: 15 })}>
+                <View style={{ flexDirection: 'row', marginBottom: 10 }}>
+                  <View style={applyStyle({ width: 60, height: 60, borderRadius: 5, backgroundColor: LibStyle.colorBgGrey, ...LibStyle.elevation(2) })}>
+                    <LibPicture style={applyStyle({ width: 60, height: 60, resizeMode: 'cover', borderRadius: 5, })} source={{ uri: item?.image }} />
+                  </View>
+                  <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between', marginLeft: 14, flex: 1 })}>
+                    <View style={{ flex: 2, marginRight: 5, }}>
+                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
+                        <LibIcon name='ticket' size={20} color="#9b9b9b" />
+                        {
+                          Number(item?.qty) == 0 ?
+                            <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{esp.lang("event/order_item", "ticket_run_out")}</Text>
+                            : <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{esp.lang("event/order_item", "ticket", LibUtils.number(item?.prices?.reduce((total: any, ticket: any) => total + parseInt(ticket.qty, 10), 0)))}</Text>
+                        }
+                      </View>
+                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 4 }}>
+                        <LibIcon name='cash' size={20} color="#9b9b9b" />
+                        <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{item?.total != "0" ? LibUtils.money(Number(item?.total), item.currency) : esp.lang("event/order_item", "free")}</Text>
+                      </View>
+
+                    </View>
+                  </View>
+                </View>
+
+                {
+                  item?.address != "" &&
+                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 10 }}>
+                    <LibIcon name='map-marker' size={18} color="#9b9b9b" />
+                    <Text allowFontScaling={false} style={applyStyle({ marginLeft: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" })}>{item?.address}</Text>
+                  </View>
+                }
+              </View>
+            </View>
+            {
+              item?.status == 0 ?
+                <View style={applyStyle({ marginHorizontal: 25, marginBottom: 10, flex: 1, borderTopColor: "#000", borderTopWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', alignContent: 'center' })}>
+                  <View style={{ flex: 1 }}>
+                    <MarketCountdown expired={LibUtils.moment(item?.exp_payment).serverFormat('YYYY-MM-DD HH:mm:ss')} style={applyStyle({ fontSize: 12, color: LibStyle.colorRed, fontFamily: "ArialBold", fontWeight: "normal", fontStyle: "normal" })} />
+                  </View>
+                  {
+                    !!item?.booking_code &&
+                    <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>
+                :
+                <Text allowFontScaling={false} style={applyStyle({ padding: 10, paddingBottom: 0, textAlign: 'center', textAlignVertical: 'center', fontFamily: "ArialBold", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 4, color: item?.status == 1 ? '#70472b' : LibStyle.colorRed })}>{item?.booking_code}</Text>
+            }
+          </View>
+          <>
+            <View style={{ ...LibStyle.elevation(2), marginHorizontal: 15, opacity: 0.7, backgroundColor: '#f1f1f1', height: 7, borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }} />
+            {
+              item?.list?.length > 2 &&
+              <View style={{ ...LibStyle.elevation(2), marginHorizontal: 30, opacity: 0.7, backgroundColor: '#f5f5f5', height: 7, borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }} />
+            }
+          </>
+        </Pressable>
+      )
+    } else {
+      return (
+        <EventOrder_item key={i} item={item} onPress={() => {
+          LibNavigation.navigate('event/order_detail_waiting', { url: item.url })
+        }} />
+      )
+    }
+
+  }
+
+  subs.useSubscribe(() => {
+    ref.current?.loadData?.()
+  })
+
+  LibAutoreload.set(() => {
+    setCounter(counter + 1)
+  }, 6000)
+  
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("event/order_waiting", "title")} />
+      <LibInfinite
+        ref={ref}
+        // isDebug={1}
+        key={counter}
+        url={'event_order_waiting'}
+        errorView={(err: any) => (
+          <ComponentMessage message={err} />
+        )}
+        renderItem={renderItem}
+      />
+    </View>
+  )
+}

package/modules/ticket/reschedule.tsx

@@ -0,0 +1,439 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { EventOrder_detailProperty } from 'esoftplay/cache/event/order_detail/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventOrder_rescheduleArgs {
+
+}
+export interface EventOrder_rescheduleProps {
+
+}
+export default function m(props: EventOrder_rescheduleProps): any {
+  let { url } = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+
+  const imgWidth = LibStyle.width - 30
+  const imgHeight = imgWidth / 1080 * 647
+
+  let defaultTabs = [
+    {
+      id: 1,
+      title: /*reschedule*/esp.lang("event/order_reschedule", "reschedule")
+    },
+    {
+      id: 2,
+      title: /*refund*/esp.lang("event/order_reschedule", "refund")
+    },
+  ]
+  const [activeTab, setActiveTab] = useSafeState<any>(1)
+
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, null, (res, msg) => {
+      setResult(res)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/order_reschedule", "load_err"), error?.message)
+    }, 1)
+  }
+
+  function rescheduleTicket() {
+    let a = result.booking_list?.map?.((item: any) => item.price_type?.filter?.((item1: any) => item1.check == 1))
+    let _booking_ids = result.booking_list?.map?.((item: any) => {
+      if (item.price_type?.some((x: any) => x.check == 1)) {
+        return item.id
+      }
+    })
+
+    let _date_ids = []
+    for (let i = 0; i < a.length; i++) {
+      const element = a[i];
+      if (element)
+        for (let j = 0; j < element.length; j++) {
+          const element1 = element[j];
+          _date_ids.push(element1.date_id)
+        }
+    }
+
+    let filter_booking_ids = _booking_ids.filter((item: any) => item != null)
+
+    let post = {
+      booking_ids: JSON.stringify(filter_booking_ids),
+      date_ids: JSON.stringify(_date_ids)
+    }
+
+    if (_date_ids.length == 0) {
+      LibToastProperty.show(esp.lang("event/order_reschedule", "msg_error_choose_date_ticket"))
+      return
+    }
+
+    LibDialog.warningConfirm(esp.lang("event/order_reschedule", "title_alert_reschedule"), esp.lang("event/order_reschedule", "msg_confirm_want_change_date_ticket"), esp.lang("event/order_reschedule", "btn_yes_alert_reschedule"), () => {
+      LibProgress.show(esp.lang("event/order_reschedule", "msg_wait"))
+      new LibCurl('event_booking_reschedule_process', post, (res, msg) => {
+        LibProgress.hide()
+        LibNavigation.backToRoot()
+        LibNavigation.navigate('event/order')
+        LibNavigation.navigate('event/order_detail', { url: res.url })
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/order_reschedule", "process_er"), error?.message)
+      }, 1)
+    }, esp.lang("event/order_reschedule", "btn_cancel_alert_reschedule"), () => {
+
+    })
+  }
+
+  function rescheduleSeat(booking_id: any, row_id: any, column_id: any, qty: any, ondate: string) {
+    let ondates = new Array(Number(qty)).fill(ondate).join('|')
+
+    let post = {
+      booking_id: booking_id,
+      row_id: row_id,
+      column_id: column_id,
+      ondate: ondates
+    }
+    LibProgress.show(esp.lang("event/order_reschedule", "msg_wait"))
+    new LibCurl("event_booking_reschedule_seat", post, (res, msg) => {
+      LibProgress.hide()
+      // setMsgReseat(res)
+      EventOrder_detailProperty.subscribe().trigger()
+      LibDialog.info(esp.lang("event/order_reschedule", "title_success_reschedule_seat"), res)
+    }, (error) => {
+      LibDialog.warning(esp.lang("event/order_reschedule", "seat_err"), error?.message)
+      LibProgress.hide()
+    }, 1)
+  }
+
+  function refundTicket() {
+    let a = result.booking_list?.filter?.((item: any) => item.check == 1)
+    let _booking_ids: any[] = []
+
+    for (let i = 0; i < a.length; i++) {
+      const element = a[i];
+      _booking_ids.push(element.id)
+    }
+
+    if (_booking_ids.length == 0) {
+      LibToastProperty.show(esp.lang("event/order_reschedule", "msg_error_choose_ticket"))
+      return
+    }
+
+
+    let post = {
+      booking_ids: JSON.stringify(_booking_ids),
+    }
+
+    LibDialog.warningConfirm(esp.lang("event/order_reschedule", "warning"), esp.lang("event/order_reschedule", "refund_ticket_purchased"), esp.lang("event/order_reschedule", "btn_yes_refund_ticket"), () => {
+      LibProgress.show(esp.lang("event/order_reschedule", "msg_wait"))
+      new LibCurl('event_booking_reschedule_refund', post, (res, msg) => {
+        LibProgress.hide()
+        LibDialog.confirm(esp.lang("event/order_reschedule", "title_success_msg"), res, esp.lang("event/order_reschedule", "ok"), () => {
+          LibNavigation.backToRoot()
+        }, "", () => { })
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("event/order_reschedule", "refunc_err"), error?.message)
+      }, 1)
+    }, esp.lang("event/order_reschedule", "no"), () => {
+
+    })
+  }
+
+  if (!result) {
+    return <LibLoading />
+  }
+
+  if (!result?.booking_list?.length) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <ComponentHeader title={esp.lang("event/order_reschedule", "reschedule_or_refund_ticket")} />
+        <ComponentMessage message={esp.lang("event/order_reschedule", "no_ticket_need_reschedule_or_refund")} />
+      </View>
+    )
+  }
+
+  function updateResult(item: any, i: number, item1: any, i1: number) {
+    setResult(
+      LibObject.update(result, (data) => {
+        for (let j = 0; j < data.price_type.length; j++) {
+          data.price_type[j].check = i1 == j ? data.price_type[j].hasOwnProperty("check") && data.price_type[j].check == 1 ? 0 : 1 : 0
+        }
+        return { ...data }
+      })('booking_list', i)
+    )
+
+
+    if (item.reseat == 1) {
+      let data = {
+        event_id: result.id,
+        qty: item.qty,
+        // kenapa seperti ini, biar objeknya sama dengan di event/ticket_list
+        selected_ticket: {
+          list: {
+            price_id: item.price_id,
+            on_date: item.on_date
+          }
+        }
+      }
+
+      LibNavigation.navigateForResult('event/seat', {
+        url: 'event_seat',
+        dataTicket: data,
+      }).then((value) => {
+        rescheduleSeat(item.id, value.row_id, value.column_id, item.qty, item1.ondate)
+      })
+    }
+  }
+
+  function renderRescheduleList(item: any, i: number) {
+    return (
+      <View key={i}>
+        <View style={applyStyle({ backgroundColor: '#f1f2f3', padding: 14, borderTopWidth: 3, borderTopColor: '#999', marginTop: 20 })}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
+            <Text style={applyStyle({ fontFamily: "Arial", fontSize: 12, lineHeight: 20, fontStyle: "normal", letterSpacing: 0 })} >{(item.price_name) + " (" + item.qty + " " + esp.lang("event/order_reschedule", "ticket_text")}<Text style={{ color: "orange" }} >{item.qty_shared > 0 ? esp.lang("event/order_reschedule", "shared", item?.qty_shared) : ""}</Text>{")"}</Text>
+
+            <Text style={applyStyle({ fontFamily: "Arial", fontSize: 12, lineHeight: 20, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 })} >{LibUtils.money(item.price)}</Text>
+          </View>
+          {
+            item.ondate != "0000-00-00" &&
+            <Text style={applyStyle({ fontFamily: "Arial", fontSize: 12, lineHeight: 20, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 })} >{esp.lang("event/order_reschedule", "date", moment(item.ondate).format("DD MMMM YYYY"))}</Text>
+          }
+          <Text style={applyStyle({ fontFamily: "Arial", fontSize: 12, lineHeight: 20, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 })} >{esp.lang("event/order_reschedule", "select_new_date")}</Text>
+        </View>
+
+        {
+          item?.price_type?.length > 0 && item.price_type.map((item1: any, i1: number) => {
+            // let _selectTicket = selectedTicket == item1.date_id
+            let _selectTicket = item1.hasOwnProperty('check') && item1.check == 1
+            let bgDatePassed = item1.is_passed == 1 ? LibStyle.colorLightGrey : _selectTicket ? "#f6f6f6" : '#fff'
+            let opacityPassed = item1.is_passed == 1 ? 0.5 : 1
+
+            if (item1.date_id == "") {
+              return (
+                <TouchableOpacity onPress={() => {
+                  if (item1.is_passed == 0) {
+                    updateResult(item, i, item1, i1)
+                  }
+                }} key={i1} style={applyStyle({ overflow: 'hidden', flex: 1, backgroundColor: bgDatePassed, flexDirection: 'row', justifyContent: 'space-between', padding: 10 })}>
+                  <View style={applyStyle({ flex: 1 })}>
+                    <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, color: _selectTicket ? "#3ea4dc" : '#999' })}>{item1.title}</Text>
+                    <Text allowFontScaling={false} style={applyStyle({ marginTop: 4, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{item1.subtitle}</Text>
+                  </View>
+                  <TouchableOpacity onPress={() => {
+                    if (item1.is_passed == 0) {
+                      updateResult(item, i, item1, i1)
+                    }
+                  }} style={applyStyle({ padding: 8, opacity: 1 })} >
+                    <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} style={{ opacity: opacityPassed }} color={_selectTicket ? "#3ea4dc" : "#434343"} />
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              )
+            } else {
+              let ticketLeft: any = Number(item1.quota) - Number(item1.quota_used)
+              return (
+                <TouchableOpacity key={i1} onPress={() => {
+                  if (item1.is_passed == 0) {
+                    updateResult(item, i, item1, i1)
+                  }
+                }} >
+                  <View style={applyStyle({ overflow: 'hidden', opacity: 1, flex: 1, flexDirection: 'row', paddingLeft: 0, padding: 10, alignItems: 'center', backgroundColor: bgDatePassed })}>
+                    <View style={applyStyle({ marginLeft: 14, marginHorizontal: 20, width: 42, height: 42, borderRadius: 5, backgroundColor: bgDatePassed, borderStyle: "solid", borderWidth: 1, borderColor: _selectTicket ? "#3ea4dc" : '#999', alignContent: 'center', alignItems: 'center', justifyContent: 'center' })}>
+                      <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, textAlign: "center", color: _selectTicket ? "#3ea4dc" : '#999', opacity: opacityPassed })}>{LibUtils.moment(item1.ondate).format('DD')}</Text>
+                    </View>
+                    <View style={applyStyle({ flexDirection: 'column', flex: 1 })}>
+                      {
+                        item.quota > 0 && ticketLeft <= 10 &&
+                        <Text allowFontScaling={false} style={{ opacity: item.is_refundable == 1 ? 1 : 0.5, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0.23, color: LibStyle.colorRed }}>{esp.lang("event/order_reschedule", "qty_left", ticketLeft)}</Text>
+                      }
+                      <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999', opacity: opacityPassed })}>{LibUtils.moment(item1.ondate).format('dddd')}</Text>
+                      <View style={applyStyle({ flexDirection: 'row' })}>
+                        <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999', opacity: opacityPassed })}>{LibUtils.moment(item1.ondate).format('MMMM')}</Text>
+                        <Text allowFontScaling={false} style={applyStyle({ marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999', opacity: opacityPassed })}>{LibUtils.moment(item1.ondate).format('YYYY')}</Text>
+                      </View>
+                    </View>
+                    <View style={applyStyle({ marginLeft: 10, flexDirection: 'column', marginRight: 6 })} >
+                      <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: _selectTicket ? "#3ea4dc" : '#999', opacity: opacityPassed })} >{LibUtils.money(item1.price)}</Text>
+                    </View>
+
+                    <TouchableOpacity onPress={() => {
+                      if (item1.is_passed == 0) {
+                        updateResult(item, i, item1, i1)
+                      }
+                    }} style={applyStyle({ padding: 8, opacity: 1 })} >
+                      <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} style={{ opacity: opacityPassed }} color={_selectTicket ? "#3ea4dc" : "#434343"} />
+                    </TouchableOpacity>
+
+                  </View>
+                </TouchableOpacity>
+              )
+            }
+          })
+        }
+
+      </View>
+    )
+  }
+
+  function renderRefundList(item: any, i: number) {
+    let _selectTicket = item.hasOwnProperty('check') && item.check == 1
+    const styleID_12nkjf: any = { marginLeft: 10, textDecorationLine: 'line-through', textDecorationStyle: 'solid', opacity: item.is_refundable == 1 ? 1 : 0.5, marginTop: 4, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' }
+    return (
+      <View key={i}>
+        <TouchableOpacity onPress={() => {
+          if (item.is_refundable == 1) {
+            setResult(
+              LibObject.set(result, item.hasOwnProperty('check') && item.check == 1 ? 0 : 1)('booking_list', i, "check")
+            )
+          }
+        }} style={{ flex: 1, backgroundColor: item.is_refundable == 1 ? '#fff' : LibStyle.colorLightGrey, flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
+          <View style={applyStyle({ flex: 1 })}>
+            <Text style={applyStyle({ fontFamily: "Arial", fontSize: 12, lineHeight: 20, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 })} >{esp.lang("event/order_reschedule", "ticket_date", moment(item.ondate).format("DD MMMM YYYY"))}</Text>
+            {item.qty_shared > 0 &&
+              <LibTextstyle textStyle='caption1' text={esp.lang("event/order_reschedule", "chared", item.qty_shared)} style={{ color: 'orange' }} />
+            }
+            <Text allowFontScaling={false} style={{ opacity: item.is_refundable == 1 ? 1 : 0.5, fontFamily: "Arial", fontSize: 10, marginBottom: 4, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0.23, color: LibStyle.colorRed }}>{item.refund == "0.00" ? esp.lang("event/order_reschedule", "cant_refund") : esp.lang("event/order_reschedule", "refundable", LibUtils.numberAbsolute(item.refund).toString())}</Text>
+            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{esp.lang("ticket/refund", "ticket")} {item.price_name + " (" + item.qty + " " + esp.lang("ticket/refund", "ticket") + ") "}</Text>
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={applyStyle({ marginTop: 4, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: _selectTicket ? "#3ea4dc" : '#999' })}>{LibUtils.money(item.refund == "0.00" ? item.price : item.price_cancellable)}</Text>
+              {
+                item.refund != "0.00" && item.refund != "100.00" &&
+                <Text allowFontScaling={false} style={styleID_12nkjf}>{LibUtils.money(item.price)}</Text>
+              }
+            </View>
+          </View>
+          <TouchableOpacity onPress={() => {
+            if (item.is_refundable == 1) {
+              setResult(
+                LibObject.set(result, item.hasOwnProperty('check') && item.check == 1 ? 0 : 1)('booking_list', i, "check")
+              )
+            }
+          }} style={applyStyle({ padding: 8, opacity: 1 })} >
+            <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} style={{ opacity: item.is_refundable == 1 ? 1 : 0.5 }} color={_selectTicket ? "#3ea4dc" : "#434343"} />
+          </TouchableOpacity>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  function renderImageCarousel(item1: any, i: number) {
+    return (
+      <LibPicture key={i} source={{ uri: item1.image }} style={applyStyle({ borderTopLeftRadius: 0, borderTopRightRadius: 0, height: imgHeight, width: imgWidth, resizeMode: 'cover' })} />
+    )
+  }
+
+
+  const dateRange = LibUtils.getDateRange(result?.start_date, result?.end_date, " - ")
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={result?.global_refundable == 1 ? esp.lang("event/order_reschedule", "refund_rescedule") : esp.lang("event/order_reschedule", "rescedule")} />
+      {
+        result?.global_refundable == 1 &&
+        <View style={{ margin: 15, marginBottom: 0, flexDirection: 'row' }}>
+          {
+            defaultTabs.map((item: any, i: number) => {
+              return (
+                <Pressable onPress={() => {
+                  setActiveTab(item.id)
+                }} key={i} style={{ flex: 1, padding: 10, borderTopLeftRadius: 10, borderTopRightRadius: 10, backgroundColor: item.id == activeTab ? "#fff" : LibStyle.colorBgGrey }}>
+                  <Text allowFontScaling={false} style={{ opacity: item.id == activeTab ? 1 : 0.7, alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: item.id == activeTab ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == activeTab ? "#000" : "#aab0b7" }} >{item.title}</Text>
+                </Pressable>
+              )
+            })
+          }
+        </View>
+      }
+
+      <ScrollView>
+        <View style={{ marginTop: result?.global_refundable == 1 ? 0 : 10, margin: 15, borderTopLeftRadius: 0, borderTopRightRadius: 0, borderRadius: 10, backgroundColor: '#fff', paddingBottom: activeTab == 2 ? 10 : 0 }}>
+          <LibCarrousel
+            delay={4000}
+            style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, height: imgHeight, width: imgWidth }}
+            autoplay
+            bullets
+            bulletStyle={{ width: 7, height: 7, backgroundColor: "#7e7e7e", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+            chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "white", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+            bulletsContainerStyle={{ marginBottom: -15 }} >
+            {
+              result?.images.map(renderImageCarousel)
+            }
+          </LibCarrousel>
+          <View style={{ flexDirection: 'row', margin: 14, marginTop: 4, justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={{ marginTop: 14, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.title}</Text>
+          </View>
+
+          <View style={{ margin: 14, marginTop: 0, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <LibIcon name="calendar-blank-outline" size={20} />
+            <Text allowFontScaling={false} style={{ marginLeft: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{dateRange}</Text>
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
+            <View style={{ width: 19, height: 19, borderRadius: 9.5, backgroundColor: LibStyle.colorBgGrey, marginLeft: -9.5 }} />
+            <Text style={{ marginTop: 5, alignSelf: 'center', fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#f39c12" }} ></Text>
+            <View style={{ width: 19, height: 19, borderRadius: 9.5, backgroundColor: LibStyle.colorBgGrey, marginRight: -9.5 }} />
+          </View>
+
+          {/* <Text style={{ margin: 14, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }} >{esp.lang("event/order_reschedule", "schedule_ticket_new")}</Text> */}
+
+          {
+            activeTab == 2 &&
+            <View style={{ padding: 14, backgroundColor: '#f1f2f3' }}>
+              <Text style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }} >{esp.lang("event/order_reschedule", "ready_ticket")}</Text>
+            </View>
+          }
+
+          {
+            result?.booking_list?.length > 0 && result?.booking_list.map(activeTab == 1 ? renderRescheduleList : renderRefundList)
+          }
+        </View>
+      </ScrollView>
+
+      {
+        result?.is_reschedule == "1" &&
+        <View style={{ padding: 10, flexDirection: 'row', justifyContent: 'center' }}>
+          {
+            activeTab == 1 ?
+              <View style={{ width: LibStyle.width - 15 }}>
+                <ComponentButton label={esp.lang("event/order_reschedule", "reschedule_ticket")} onPress={() => {
+                  rescheduleTicket()
+                }} backgroundColor="#e67e22" fontColor="#fff" />
+              </View>
+              :
+              <View style={{ width: LibStyle.width - 15 }}>
+                <ComponentButton label={esp.lang("event/order_reschedule", "refund_ticket")} onPress={() => {
+                  refundTicket()
+                }} backgroundColor={LibStyle.colorRed} fontColor="#fff" />
+              </View>
+          }
+        </View>
+      }
+
+    </View >
+  )
+}