esoftplay-event 0.0.1 → 0.0.2-b

package/event/exchange_ticket_list.tsx

@@ -5,11 +5,11 @@ import { EventButton } from 'esoftplay/cache/event/button/import';
 import { EventExchange_ticketProperty } from 'esoftplay/cache/event/exchange_ticket/import';
 import { EventExchange_ticket_resultProperty } from 'esoftplay/cache/event/exchange_ticket_result/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventTms_dashboardProperty } from 'esoftplay/cache/event/tms_dashboard/import';
 import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
 import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
 import { LibIcon } from 'esoftplay/cache/lib/icon/import';
 import { LibList } from 'esoftplay/cache/lib/list/import';
-import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
 import { LibProgress } from 'esoftplay/cache/lib/progress/import';
 import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
@@ -32,7 +32,6 @@ export interface EventExchange_ticket_listProps {
 }
 
 export default function m(props: EventExchange_ticket_listProps): any {
-  const { dataEvent } = LibNavigation.getArgsAll(props)
   const log = EventExchange_ticketProperty.stateExchangeLog.useSelector(s => s)
   const backup = EventExchange_ticket_resultProperty.stateListConfirm().useSelector(s => s)
   const selectedRef = useRef<LibSlidingup>(null)
@@ -163,7 +162,7 @@ export default function m(props: EventExchange_ticket_listProps): any {
               domain: esp.config('domain'),
               tms_name: UserClass.state().get('name'),
               email: UserClass.state().get('email'),
-              event_name: dataEvent?.name,
+              event_name: EventTms_dashboardProperty.closingDataState()?.get()?.event_name,
               data: EventExchange_ticketProperty.stateExchangeLog.get()
             }, undefined, 2), '-1001737180019', undefined, () => {
               EventExchange_ticketProperty.stateExchangeLog.reset()

package/event/exchange_ticket_result.tsx

@@ -1,6 +1,7 @@
 // withHooks
 import { EventExchange_ticketProperty } from 'esoftplay/cache/event/exchange_ticket/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
 import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
 import { LibLoading } from 'esoftplay/cache/lib/loading/import';
@@ -9,7 +10,6 @@ import { LibObject } from 'esoftplay/cache/lib/object/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
 import { LibUtils } from 'esoftplay/cache/lib/utils/import';
-import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
 import esp from 'esoftplay/esp';
 import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
 import useSafeState from 'esoftplay/state';

package/event/firebase_socket.ts

@@ -26,6 +26,10 @@ const state = useGlobalState(0)
 export const lastKeyInPages = useGlobalState<string[]>([])
 export const userIdKeyReplacer = useGlobalState<any>({})
 
+function isValidEventId(event_id: string): boolean {
+  return !!event_id && event_id !== "undefined"
+}
+
 export default function useFirebaseSocket() {
   const [status] = state.useState()
   const isDirect = EventTms_homeProperty.state()
@@ -109,7 +113,11 @@ export default function useFirebaseSocket() {
     const instance: any = esp.mod("firestore/index")().instance()
     const db = getFirestore(instance)
 
-    if (userIdKeyReplacer.get()?.priority == 1) {
+    if (!isValidEventId(event_id)) {
+      return
+    }
+
+    if (userIdKeyReplacer.get()?.priority == 1 && userIdKeyReplacer.get()?.t) {
       const coll = collection(db, [getEventPath(), path, event_id].join('/'));
       const q = query(coll, orderBy('t', 'asc'), where("t", "==", userIdKeyReplacer.get().t));
       getDocs(q).then((doc) => {
@@ -160,17 +168,19 @@ export default function useFirebaseSocket() {
   // get weather function
 
   function getQueue(path: string, event_id: string, _limit: number, cb: (idx: number, key: string) => void) {
-    const instance: any = esp.mod("firestore/index")().instance()
-    const db = getFirestore(instance)
-    const coll = collection(db, [getEventPath(), path, event_id].join('/'));
-    const q = query(coll, orderBy('s', 'asc'), where("s", "<", userIdKeyReplacer.get().s));
+    if (userIdKeyReplacer.get()?.s) {
+      const instance: any = esp.mod("firestore/index")().instance()
+      const db = getFirestore(instance)
+      const coll = collection(db, [getEventPath(), path, event_id].join('/'));
+      const q = query(coll, orderBy('s', 'asc'), where("s", "<", userIdKeyReplacer.get().s));
+      getCountFromServer(q).then((v) => {
+        cb(v.data().count, userIdKeyReplacer.get().id)
+      }).catch((e) => {
+        getQueue(path, event_id, _limit, cb)
+        console.log({ e })
+      })
+    }
 
-    getCountFromServer(q).then((v) => {
-      cb(v.data().count, userIdKeyReplacer.get().id)
-    }).catch((e) => {
-      getQueue(path, event_id, _limit, cb)
-      console.log({ e })
-    })
     // /* cleanup */
     // const cdate = getDateTimebyGmt7().getTime()
     // if (!cdate) {

package/event/loading_page.tsx

@@ -100,7 +100,8 @@ export default function m(props: EventLoading_pageProps): any {
         loadingState.set(LibObject.unset(loadingState.get(), post.trx_id)())
         const ticketNotAvailableCodes = ['EV034', 'EV036', 'EV038', 'EV039', 'EV040']
         if (ticketNotAvailableCodes.includes(error.status_code)) {
-          LibNavigation.navigate(post?.is_multi == 1 ? 'event/ticket_list2' : 'event/ticket_list')
+          LibNavigation.back()
+          // LibNavigation.navigate(post?.is_multi == 1 ? 'event/ticket_list2' : 'event/ticket_list')
         }
         if (error.status_code == 'EV033') {
           LibDialog.custom(
@@ -153,7 +154,8 @@ export default function m(props: EventLoading_pageProps): any {
         loadingState.set(LibObject.unset(loadingState.get(), post.trx_id)())
         const ticketNotAvailableCodes = ['EV034', 'EV036', 'EV038', 'EV039', 'EV040']
         if (ticketNotAvailableCodes.includes(error.status_code)) {
-          LibNavigation.navigate(post?.is_multi == 1 ? 'event/ticket_list2' : 'event/ticket_list')
+          LibNavigation.back()
+          // LibNavigation.navigate(post?.is_multi == 1 ? 'event/ticket_list2' : 'event/ticket_list')
         }
         if (error.status_code == 'EV033') {
           LibDialog.custom(

package/event/order.tsx

@@ -128,7 +128,8 @@ export default function m(props: EventOrderProps): any {
   function renderItem(item: any) {
     return (
       <EventOrder_item item={item} onPress={() => {
-        LibNavigation.navigate('event/order_detail', { url: item.url })
+        // 7 pembayaran kadaluarsa
+        LibNavigation.navigate(status == "7" ? 'event/order_detail_waiting' : 'event/order_detail', { url: item.url })
       }} />
     )
   }
@@ -156,41 +157,27 @@ export default function m(props: EventOrderProps): any {
   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>
-      }
+      <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>
 
       <LibInfinite
         url={buildUrl(url) + "&t=" + new Date().getTime()}

package/event/order_detail.tsx

@@ -20,9 +20,10 @@ import { UserClass } from 'esoftplay/cache/user/class/import';
 
 import { applyStyle } from 'esoftplay';
 import { EventAlert } from 'esoftplay/cache/event/alert/import';
+import { EventButton_order_detail } from 'esoftplay/cache/event/button_order_detail/import';
+import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
 import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
-import { EventOrder_detail_upgrade_button } from 'esoftplay/cache/event/order_detail_upgrade_button/import';
 import { EventPopup } from 'esoftplay/cache/event/popup/import';
 import { EventQr_bg } from 'esoftplay/cache/event/qr_bg/import';
 import { EventRating } from 'esoftplay/cache/event/rating/import';
@@ -36,6 +37,7 @@ import useSafeState from 'esoftplay/state';
 import useGlobalSubscriber, { useGlobalSubscriberReturn } from 'esoftplay/subscribe';
 import React, { useEffect, useRef } from 'react';
 import { Linking, Pressable, Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import QRCode from 'react-native-qrcode-svg';
 
 
@@ -99,6 +101,7 @@ export default function m(props: EventOrder_detailProps): any {
   const [user] = UserClass.state().useState()
 
   let showQR = useRef<LibSlidingup>(null)
+  let dialogAddonList = useRef<LibSlidingup>(null)
   const dialogSendBack = useRef<LibSlidingup>(null)
   const url = LibNavigation.getArgs(props, 'url')
   const [result, setResult] = useSafeState<any>(EventIndexProperty?.stateTicketCache()?.get()?.filter?.((x: any) => x.url?.replace?.('?id=', '/') == url?.replace?.('?id=', '/'))?.[0]?.detail)
@@ -109,6 +112,7 @@ export default function m(props: EventOrder_detailProps): any {
 
   const [coupons, setCoupons] = useSafeState<any>()
   const [qty, setQty] = useSafeState<number>(1)
+  const [, setGroupAddon, getGroupAddon] = useSafeState()
 
   const dataOfflineReview = EventReview_addProperty.state().get()
   let availableOfflineReview = dataOfflineReview?.filter((z: any) => z?.booking_id == result?.id)
@@ -133,8 +137,6 @@ export default function m(props: EventOrder_detailProps): any {
   function loadData(): void {
     new LibCurl(url + ((url.includes("?") ? "&" : "?") + 't=' + new Date().getTime()), null, (res: any) => {
       setResult(res)
-      // esp.log(res);
-
       new LibCurl(res?.url_coupon, null, (ress: any) => {
         setCoupons(ress)
       }, (error: any) => {
@@ -176,6 +178,7 @@ export default function m(props: EventOrder_detailProps): any {
   }
 
   useEffect(() => {
+    EventConfigProperty.curlConfig('v2/config_order_type')
     loadData()
   }, [])
 
@@ -204,21 +207,6 @@ export default function m(props: EventOrder_detailProps): any {
     setDataReview(subs.getValue())
   })
 
-  function doCancel(url: string): void {
-    LibDialog.warningConfirm(esp.lang("event/order_detail", "confirm"), esp.lang("event/order_detail", "cancel_this_order"), esp.lang("event/order_detail", "btn_yes"), () => {
-      LibProgress.show(esp.lang("event/order_detail", "please_wait"))
-      new LibCurl(url, null, (result: any, msg: any) => {
-        LibProgress.hide()
-        LibNavigation.back()
-      }, (error: any) => {
-        LibDialog.warning(esp.lang("event/order_detail", "cancel_err"), error?.message);
-        LibProgress.hide()
-      }, 1)
-    }, esp.lang("event/order_detail", "btn_cancel"), () => {
-
-    })
-  }
-
   function addReturn(): void {
     if (qty < Number(result.qty_returnable)) {
       setQty(qty + 1)
@@ -229,10 +217,13 @@ export default function m(props: EventOrder_detailProps): any {
     setQty(qty == 1 ? 1 : qty - 1)
   }
 
-  function sendBack() {
+  function sendBack(p: any) {
     LibDialog.confirm(esp.lang("event/order_detail", "warning"), esp.lang("event/order_detail", "return_this_ticket"), esp.lang("event/order_detail", "btn_yes"), () => {
       LibProgress.show(esp.lang("event/order_detail", "please_wait"))
-      new LibCurl('event_booking_shared_return?booking_id=' + result?.id + '&qty_shared=' + qty, null, (res: any, msg: any) => {
+      let post = {
+        pin: p
+      }
+      new LibCurl('event_booking_shared_return?booking_id=' + result?.id + '&qty_shared=' + qty, post, (res: any, msg: any) => {
         // LibNotify(res)
         LibProgress.hide()
         LibDialog.info(esp.lang("event/order_detail", "information"), msg)
@@ -245,6 +236,55 @@ export default function m(props: EventOrder_detailProps): any {
     }, esp.lang("event/order_detail", "btn_cancel"), () => { })
   }
 
+  function loadDataAddons(id: any, url: string) {
+    LibProgress.show(esp.lang("event/order_detail", "wait"))
+    new LibCurl(url, null, (res: any, msg: any) => {
+      esp.log({ res });
+      LibProgress.hide()
+      let dataBookingEvent = {
+        event_id: res?.event_id,
+        event_title: res?.event_name,
+        selected_ticket: {
+          price_id: res?.price_id,
+          currency: res?.currency,
+          tax: res?.tax,
+          fee: res?.fee,
+          fee_percent: res?.fee_percent,
+          term: res?.term,
+          has_addition: res?.has_addition,
+          list: {
+            ondate: res?.ondate,
+            price: res?.price,
+            price_id: res?.price_id,
+            currency: res?.currency,
+          }
+        },
+        qty: result?.qty
+      }
+      let fee_platform = {
+        fee_platform_amount: res?.fee_platform?.fee_platform_amount,
+        fee_platform_type: res?.fee_platform?.fee_platform_type
+      }
+      let show_fee_percentage = res?.show_fee_percentage
+      let tax = res?.tax
+      let order_type = EventConfigProperty.state().get()?.order_type?.ticket
+      let addons_id = id
+      let booking_id_ref = result?.id
+      LibNavigation.navigate('payment/ticket', {
+        order_type: order_type,
+        tax: tax,
+        fee_platform: fee_platform,
+        dataBookingEvent: dataBookingEvent,
+        show_fee_percentage,
+        addons_id,
+        booking_id_ref
+      })
+    }, (err: any) => {
+      LibProgress.hide()
+      esp.log({ err });
+    }, 1)
+  }
+
   if (result == undefined && !coupons) {
     return (
       <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
@@ -345,6 +385,8 @@ export default function m(props: EventOrder_detailProps): any {
 
   const termData = result?.term ? Object.values(result?.term) : []
 
+  // esp.log(getGroupAddon());
+
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
       <EventHeader title={esp.lang("event/order_detail", "order_detail")} />
@@ -365,6 +407,11 @@ export default function m(props: EventOrder_detailProps): any {
             <View testID='price_name' style={{ marginTop: 10, borderWidth: 5, padding: 3, borderColor: result?.color, backgroundColor: EventOrder_itemProperty.textColor(result?.color) }}>
               <View style={{ padding: 10, backgroundColor: result?.color, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
                 <EventHtmltext allowFontScaling={false} numberOfLines={3} ellipsizeMode="tail" style={{ color: EventOrder_itemProperty.textColor(result?.color), alignSelf: 'center', textAlign: 'center', fontSize: 20, fontWeight: 'bold' }}> {result?.price_name}</EventHtmltext>
+                {
+                  result?.ondate != "0000-00-00" &&
+                  <Text allowFontScaling={false} style={{ flex: 1, marginRight: 10, marginLeft: 6, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: EventOrder_itemProperty.textColor(result?.color) }}>{moment(result?.ondate).localeFormat("DD MMMM YYYY")}</Text>
+                }
+
               </View>
             </View>
 
@@ -376,11 +423,26 @@ export default function m(props: EventOrder_detailProps): any {
 
             <View style={{ flexDirection: 'row', margin: 16, justifyContent: 'space-between', marginTop: 0 }}>
               <View style={{ flex: 1 }}>
+                {/* <View style={{ flexDirection: 'row' }}> */}
                 <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
                   <LibIcon name="ticket-outline" size={20} />
                   <Text allowFontScaling={false} style={{ marginLeft: 6, fontFamily: "Arial", fontSize: 30, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.qty}</Text>
                   <Text allowFontScaling={false} style={{ marginLeft: 4, fontFamily: "Arial", fontSize: 16, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("event/order_detail", "ticket")}</Text>
                 </View>
+
+                <View style={{ position: 'absolute', right: 0, justifyContent: 'flex-end', alignContent: 'center', alignItems: 'flex-end' }}>
+                  {
+                    result?.qr != "" && useIndividualQr == 0 &&
+                    <TouchableOpacity onPress={() => {
+                      showQR?.current?.show()
+                    }}>
+                      <EventQr_bg>
+                        <QRCode ecl="H" size={80} value={result?.qr} />
+                      </EventQr_bg>
+                    </TouchableOpacity>
+                  }
+                </View>
+                {/* </View> */}
                 <UseCondition if={result?.show_ticket_status == 1 && result?.status == 1 || result?.status == 3 || result?.status == 6}>
                   <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, marginBottom: 12, color: "#484848" }}>
                     {
@@ -402,44 +464,44 @@ export default function m(props: EventOrder_detailProps): any {
                   </View>
                 }
 
-                <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
-                  <LibIcon name="calendar-blank-outline" size={20} />
-                  <Text allowFontScaling={false} style={{ flex: 1, marginRight: 10, marginLeft: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.ondate != "0000-00-00" ? moment(result?.ondate).localeFormat("DD MMMM YYYY") : ((isInvitationDate || isOnlineWithoutDate) ? esp.lang("event/order_item", "used_once") : dateRange)}</Text>
-                </View>
+                {
+                  result?.ondate == "0000-00-00" &&
+                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name="calendar-blank-outline" size={20} />
+                    <Text allowFontScaling={false} style={{ flex: 1, marginRight: 10, marginLeft: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{((isInvitationDate || isOnlineWithoutDate) ? esp.lang("event/order_item", "used_once") : dateRange)}</Text>
+                  </View>
+                }
                 {
                   result?.use_seat == 1 &&
                   <View style={{ marginTop: 15, marginRight: 10 }}>
                     <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, marginBottom: 5, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail", "seat_number")}</Text>
                     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
-                      {
-                        tickets?.map((item: any, i: number) => {
+                      {tickets?.map((item: any, i: number) => {
+                        const [front, end] = item?.seat_name?.split("#") || ["", ""];
+                        if (item?.seat_name?.includes("#")) {
+                          return (
+                            <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
+                              <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, color: "#000" }}> {front} </Text>
+                              <Text allowFontScaling={false} style={{ marginLeft: 3, fontWeight: 'bold', fontSize: 16, color: '#000', }}> {end} </Text>
+                            </View>
+                          );
+                        } else {
                           return (
-                            <View key={i} style={{ paddingVertical: 5, marginBottom: 7, paddingHorizontal: 7, borderWidth: 1, borderColor: '#000', backgroundColor: '#fff', borderRadius: 5, marginRight: 7 }}>
-                              <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: '#000' }}>{item.seat_name}</Text>
+                            <View key={i} style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, marginBottom: 7, paddingHorizontal: 5, backgroundColor: '#fff', borderRadius: 5, marginRight: 7, ...LibStyle.elevation(5), }}>
+                              <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 20, color: "#000" }}>{item?.seat_name}</Text>
                             </View>
                           )
-                        })
-                      }
+                        }
+                      })}
                     </View>
                   </View>
                 }
 
-              </View>
-              <View style={{ marginTop: 14, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
-                {
-                  result?.qr != "" && useIndividualQr == 0 &&
-                  <TouchableOpacity onPress={() => {
-                    showQR?.current?.show()
-                  }}>
-                    <EventQr_bg>
-                      <QRCode ecl="H" size={80} value={result?.qr} />
-                    </EventQr_bg>
-                  </TouchableOpacity>
-                }
+
               </View>
             </View>
-
           </View>
+
         }
         {
           useIndividualQr > 0 && dataTickets.length > 0 ?
@@ -470,19 +532,23 @@ export default function m(props: EventOrder_detailProps): any {
 
         <EventAlert
           color="#FFC523"
-          msg={esp.lang("event/order_detail", "not_allowed_ss")}
+          msg={esp.lang("event/order_detail", "not_allowed_ss", esp.appjson().expo.name)}
           useIcon
           style={{ marginBottom: 0, margin: 15 }}
         />
 
         <UseCondition if={result?.is_luckydraw && result?.is_luckydraw == 1}>
-          <TouchableOpacity onPress={() => {
-            LibNavigation.navigateForResult('event/order_lottery', { id: result?.id }).then(() => {
-              loadData()
-            })
-          }} style={{ margin: 15, padding: 10, marginBottom: 0, justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRadius: 7, backgroundColor: LibStyle.colorGreen, paddingBottom: 10 }}>
-            <LibTextstyle textStyle='headline' text={esp.lang("event/order_detail", "join_lucky_draw")} style={{ color: '#fff', fontWeight: 'bold' }} />
-          </TouchableOpacity>
+          <EventButton_order_detail
+            color={"#FF6F61"}
+            onPress={() => {
+              LibNavigation.navigateForResult('event/order_lottery', { id: result?.id }).then(() => {
+                loadData()
+              })
+            }}
+            icon={'dice-multiple'}
+            title={result?.config_luckydraw != null ? result?.config_luckydraw?.title : esp.lang("event/order_detail", "join_lucky_draw")}
+            info={result?.config_luckydraw != null ? result?.config_luckydraw?.subtitle : esp.lang("event/order_detail", "subtitle_lucky_draw")}
+          />
         </UseCondition>
 
         <UseCondition if={result?.is_luckydraw && result?.is_luckydraw == 2}>
@@ -492,14 +558,58 @@ export default function m(props: EventOrder_detailProps): any {
         </UseCondition>
 
         <UseCondition if={result?.is_upgradable == 1} >
-          <EventOrder_detail_upgrade_button onPress={() => {
-            LibNavigation.navigate('event/order_detail_upgrade', {
-              url: result?.url_upgrade,
-              dataTicket: result,
-            })
-          }} />
+          <EventButton_order_detail
+            color={LibStyle.colorPrimary}
+            onPress={() => {
+              LibNavigation.navigate('event/order_detail_upgrade', {
+                url: result?.url_upgrade,
+                dataTicket: result,
+              })
+            }}
+            icon={'chevron-up-circle'}
+            title={esp.lang("event/order_detail_upgrade_button", "upgrade")}
+            info={esp.lang("event/order_detail_upgrade_button", "eays")}
+          />
         </UseCondition>
 
+
+
+        {/* tombol add on */}
+        {
+          result?.addons?.length > 0 && result?.addons?.map((item: any, i: number) => {
+            if (item?.hasOwnProperty("group_id")) {
+              return (
+                <EventButton_order_detail
+                  color={result?.color}
+                  onPress={() => {
+                    setGroupAddon(item)
+                    LibUtils.debounce(() => {
+                      dialogAddonList?.current?.show()
+                    }, 100)
+                    // loadDataAddons(item?.addons_id, item?.url)
+                  }}
+                  icon={'chevron-down'}
+                  title={item.group_title}
+                  info={""}
+                />
+              )
+            } else {
+              return (
+                <EventButton_order_detail
+                  key={i}
+                  color={result?.color}
+                  onPress={() => {
+                    loadDataAddons(item?.addons_id, item?.url)
+                  }}
+                  icon={'plus-circle-outline'}
+                  title={item.title}
+                  info={item.info}
+                />
+              )
+            }
+          })
+        }
+
         {
           // jika mau edit view dibawah ini, tekan ctrl + f terus paste prefik dibawah ini
           // view_reviewed
@@ -588,7 +698,7 @@ export default function m(props: EventOrder_detailProps): any {
           result?.status != "2" && coupons &&
           <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, backgroundColor: '#fff', paddingBottom: 10, paddingTop: 10 }}>
             <View style={{ marginHorizontal: 20 }}>
-              <Text style={{ fontWeight: 'bold', fontSize: 14, color: LibStyle.colorPrimary }}>{coupons.title || ''}</Text>
+              <Text style={{ fontWeight: 'bold', fontSize: 14, color: "#495057" }}>{coupons.title || ''}</Text>
             </View>
 
             {
@@ -725,7 +835,7 @@ export default function m(props: EventOrder_detailProps): any {
         <View style={{ padding: 5, }}>
           <EventButton label={Number(result.is_shareable) ? /*share_ticket*/esp.lang("event/order_detail", "share_ticket") : esp.lang("event/order_detail", "shared")} onPress={() => {
             if (Number(result.is_shareable)) {
-              LibDialog.confirm(esp.lang("event/order_detail", "share_title"), esp.lang("event/order_detail", "share_msg"), esp.lang("event/order_detail", "share_ok"), () => {
+              LibDialog.confirm(esp.lang("event/order_detail", "share_title"), esp.lang("event/order_detail", "share_msg", esp.appjson().expo.name), esp.lang("event/order_detail", "share_ok"), () => {
                 LibNavigation.navigate('event/order_share_to', { url: url })
               }, esp.lang("event/order_detail", "share_no"), () => {
 
@@ -759,6 +869,36 @@ export default function m(props: EventOrder_detailProps): any {
         </View>
       </LibSlidingup>
 
+      {/* add on list */}
+      <LibSlidingup ref={dialogAddonList}>
+        <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, maxHeight: LibStyle.height / 2, borderTopLeftRadius: 20, paddingBottom: 20 }}>
+          <View style={{ margin: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ flex: 1, fontSize: 16, fontWeight: 'bold' }}>{getGroupAddon()?.group_title}</Text>
+            <TouchableOpacity style={{ flex: 1, alignItems: 'flex-end' }} onPress={() => dialogAddonList?.current?.hide()}>
+              <LibIcon name='close' />
+            </TouchableOpacity>
+          </View>
+          <ScrollView>
+            {
+              getGroupAddon()?.addons?.length > 0 && getGroupAddon()?.addons?.map((item: any, i: number) => {
+                return (
+                  <EventButton_order_detail
+                    key={i}
+                    color={result?.color}
+                    onPress={() => {
+                      loadDataAddons(item?.addons_id, item?.url)
+                    }}
+                    icon={'plus-circle-outline'}
+                    title={item.title}
+                    info={item.info}
+                  />
+                )
+              })
+            }
+          </ScrollView>
+        </View>
+      </LibSlidingup>
+
       <LibSlidingup ref={dialogSendBack} >
         <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 }} >
           <EventPopup email={result?.sharer_email?.trim?.()} redirect={() => {
@@ -772,7 +912,11 @@ export default function m(props: EventOrder_detailProps): any {
                 returnTicket: true,
               })
             } else {
-              sendBack()
+              LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
+                if (p) {
+                  sendBack(p)
+                }
+              })
             }
             dialogSendBack.current!.hide()
           }} cancel={() => {
@@ -794,7 +938,6 @@ export default function m(props: EventOrder_detailProps): any {
               </View>
             }
           />
-
         </View>
       </LibSlidingup>