esoftplay-event 0.0.2 → 0.0.3

package/event/order_detail.tsx

@@ -2,7 +2,6 @@
 import { EventButton } from 'esoftplay/cache/event/button/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
-import { EventReviewProperty } from 'esoftplay/cache/event/review/import';
 import { EventReview_addProperty } from 'esoftplay/cache/event/review_add/import';
 import { LibCarrousel_snap } from 'esoftplay/cache/lib/carrousel_snap/import';
 import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
@@ -16,7 +15,6 @@ 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 { UserClass } from 'esoftplay/cache/user/class/import';
 
 import { applyStyle } from 'esoftplay';
 import { EventAlert } from 'esoftplay/cache/event/alert/import';
@@ -24,11 +22,17 @@ import { EventButton_order_detail } from 'esoftplay/cache/event/button_order_det
 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 { EventPopup } from 'esoftplay/cache/event/popup/import';
+import { EventOrder_detail_addons } from 'esoftplay/cache/event/order_detail_addons/import';
+import { EventOrder_detail_addons_booked } from 'esoftplay/cache/event/order_detail_addons_booked/import';
+import { EventOrder_detail_coupon } from 'esoftplay/cache/event/order_detail_coupon/import';
+import { EventOrder_detail_instruction } from 'esoftplay/cache/event/order_detail_instruction/import';
+import { EventOrder_detail_reschedule } from 'esoftplay/cache/event/order_detail_reschedule/import';
+import { EventOrder_detail_review } from 'esoftplay/cache/event/order_detail_review/import';
+import { EventOrder_detail_tnc } from 'esoftplay/cache/event/order_detail_tnc/import';
 import { EventQr_bg } from 'esoftplay/cache/event/qr_bg/import';
-import { EventRating } from 'esoftplay/cache/event/rating/import';
 import { EventSecure_page } from 'esoftplay/cache/event/secure_page/import';
-import { EventStep } from 'esoftplay/cache/event/step/import';
+import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
 import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
 import { UseCondition } from 'esoftplay/cache/use/condition/import';
 import esp from 'esoftplay/esp';
@@ -36,7 +40,8 @@ import moment from 'esoftplay/moment';
 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 { Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import QRCode from 'react-native-qrcode-svg';
 
 
@@ -44,86 +49,34 @@ export interface EventOrder_detailProps {
   navigation: any
 }
 
-
-function renderTermItem(item: any, i: number) {
-  return (
-    <View key={i}>
-      <EventStep text={item} />
-    </View>
-  )
-}
-
-
-let urlsInstruction: any[] = []
-
 const subs = useGlobalSubscriber()
 export function subscribe(): useGlobalSubscriberReturn {
   return subs
 }
 
-function getStringReview(data: any) {
-  const groupedData = data.reduce((acc: any[], obj: any) => {
-    const { survey_id, survey_question, survey_option, content } = obj;
-
-    if (!acc[survey_id]) {
-      acc[survey_id] = {
-        survey_id,
-        survey_question,
-        values: []
-      };
-    }
-
-    if (survey_option) {
-      acc[survey_id].values.push(survey_option);
-    }
-    if (content) {
-      acc[survey_id].values.push(content);
-    }
-
-    return acc;
-  }, {});
-
-  const finalResult = Object.values(groupedData).map((group: any) => {
-    const { survey_question, values } = group;
-    const valuesString = values.join(", ");
-    return `\nQ: ${survey_question}\nA: ${valuesString}`;
-  })
-  return finalResult
-}
-
-
-
 export default function m(props: EventOrder_detailProps): any {
   const LibCurl = esp.mod("lib/curl")
 
   EventSecure_page()
-  const [user] = UserClass.state().useState()
 
   let showQR = useRef<LibSlidingup>(null)
-  const dialogSendBack = useRef<LibSlidingup>(null)
+  let dialogAddonList = useRef<LibSlidingup>(null)
+  let dialogQtyAddons = 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)
-  const [tickets, setTickets] = useSafeState(result?.detail_ticket?.tickets ?? [])
   const useIndividualQr = result?.config?.use_individual_qr_ticket
 
-  const dataTickets = tickets?.filter?.((x: ItemTiket) => x?.email == user?.email && x?.ticket_code != '')
-
-  const [coupons, setCoupons] = useSafeState<any>()
-  const [qty, setQty] = useSafeState<number>(1)
+  const [, setGroupAddon, getGroupAddon] = useSafeState()
+  const [, setSelectedAddon, getSelectedAddon] = useSafeState()
+  const [addonsCacheBooked, setAddOnsCacheBooked] = EventIndexProperty?.stateBookedAddonsCache()?.useState()
+  const [addonsBooked, setAddOnsBooked] = useSafeState(addonsCacheBooked[result?.id])
+  const [errorAddonsBooked, setErrorddOnsBooked] = useSafeState()
 
   const dataOfflineReview = EventReview_addProperty.state().get()
   let availableOfflineReview = dataOfflineReview?.filter((z: any) => z?.booking_id == result?.id)
-
   const [dataReview, setDataReview] = useSafeState<any>(availableOfflineReview?.length == 1 ? availableOfflineReview[0] : result?.detail_review)
 
-  urlsInstruction = []
-  result?.instructions?.map?.((item: any) => {
-    let matches = item.match(/(https?:\/\/[^\s]+)/g);
-    if (matches) {
-      urlsInstruction.push(...matches)
-    }
-  })
-
+  const [dataTicket, setDataTicket] = useSafeState()
 
   moment().locale?.('id')
 
@@ -134,11 +87,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)
-      new LibCurl(res?.url_coupon, null, (ress: any) => {
-        setCoupons(ress)
-      }, (error: any) => {
-        // setEmptyCoupons(error)
-      })
 
       if (res?.review_status != 0) {
         loadDetailReview(res?.url_review)
@@ -149,18 +97,8 @@ export default function m(props: EventOrder_detailProps): any {
         sendReview(availableOfflineReview[0])
       }
 
-      // // load data untuk upgrade tiket
-      // if (res?.is_upgradable == 1) {
-      //   loadDataUpgradeTicket(res?.url_upgrade)
-      // }
-
-      new LibCurl(res?.url_ticket, null,
-        (res: any, msg: string) => {
-          setTickets(res.tickets)
-        }, (err: any) => {
-          LibToastProperty.show(err.message)
-        }
-      )
+      if (res?.url_addons_booked == "") return;
+      loadDataAddonsBooked(res?.url_addons_booked, res.id);
 
     }, (error: any) => {
       const transformedUrl = url?.includes("?id=") ? url?.replace(/\?id=/, '/') : url
@@ -174,6 +112,59 @@ export default function m(props: EventOrder_detailProps): any {
     })
   }
 
+  function syncQty() {
+    let post = {
+      booking_id: result?.id
+    }
+    LibProgress.show(esp.lang("event/order_detail", "please_wait"))
+    new LibCurl(result?.url_sync, post, (ress: any) => {
+      loadData()
+      LibProgress.hide()
+    }, (error: any) => {
+      LibProgress.hide()
+      // setEmptyCoupons(error)
+    })
+  }
+
+  function loadDetailReview(url: any) {
+    new LibCurl(url, null, (ress: any) => {
+      setDataReview(ress)
+    }, (error: any) => {
+      // setEmptyCoupons(error)
+    })
+  }
+
+  function loadDataTicket(id: any, price_id: string, ondate: string) {
+    let param = {
+      booking_id: id, price_id: price_id, ondate: ondate
+    }
+
+    new LibCurl("addons_item" + LibUtils.objectToUrlParam(param), null, (ress: any) => {
+      let data = ress?.length > 0 && ress?.map((item: any, i: number) => {
+        return ({
+          ...item,
+          checked: 0,
+        })
+      })
+      setDataTicket(data)
+      LibUtils.debounce(() => { dialogQtyAddons?.current?.show() }, 100)
+    }, (error: any) => {
+      // setEmptyCoupons(error)
+    }, 1)
+  }
+
+
+  function loadDataAddonsBooked(url: string, bookingId: any) {
+    new LibCurl(url, null, (ress) => {
+      setAddOnsCacheBooked(LibObject.set(EventIndexProperty?.stateBookedAddonsCache().get(), ress)(bookingId))
+      setAddOnsBooked(ress)
+      setErrorddOnsBooked(undefined)
+    }, (error) => {
+      setAddOnsCacheBooked(LibObject.removeKeys(EventIndexProperty?.stateBookedAddonsCache().get(), bookingId)())
+      setErrorddOnsBooked(error)
+    });
+  }
+
   useEffect(() => {
     EventConfigProperty.curlConfig('v2/config_order_type')
     loadData()
@@ -191,52 +182,14 @@ export default function m(props: EventOrder_detailProps): any {
     }, 1)
   }
 
-  function loadDetailReview(url: any) {
-    new LibCurl(url, null, (ress: any) => {
-      setDataReview(ress)
-    }, (error: any) => {
-      // setEmptyCoupons(error)
-    })
-  }
-
   subs.useSubscribe(() => {
     loadData()
-    setDataReview(subs.getValue())
   })
 
-  function addReturn(): void {
-    if (qty < Number(result.qty_returnable)) {
-      setQty(qty + 1)
-    }
-  }
-
-  function minReturn(): void {
-    setQty(qty == 1 ? 1 : qty - 1)
-  }
-
-  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"))
-      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)
-        LibNavigation.back()
-      }, (error: any) => {
-        LibProgress.hide()
-        LibDialog.warning(esp.lang("event/order_detail", "back_err"), error?.message);
-        LibNavigation.back()
-      }, 1)
-    }, 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 });
+      let _bookingMemberId = dataTicket?.filter((item: any) => item.checked == 1).map((it: any) => it.id)
       LibProgress.hide()
       let dataBookingEvent = {
         event_id: res?.event_id,
@@ -256,7 +209,8 @@ export default function m(props: EventOrder_detailProps): any {
             currency: res?.currency,
           }
         },
-        qty: result?.qty
+        qty: dataTicket?.filter((item: any) => item.checked == 1).length,
+        booking_member_ids: JSON.stringify(_bookingMemberId)
       }
       let fee_platform = {
         fee_platform_amount: res?.fee_platform?.fee_platform_amount,
@@ -267,22 +221,65 @@ export default function m(props: EventOrder_detailProps): any {
       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
-      })
+
+      function goToPayment() {
+        let args: any = {
+          order_type: order_type,
+          tax: tax,
+          fee_platform: fee_platform,
+          dataBookingEvent: dataBookingEvent,
+          show_fee_percentage,
+          addons_id,
+          booking_id_ref
+        }
+        curlPriceConfig(res?.url_price_config, res?.price_id, (conf) => {
+          args['tax'] = conf?.tax
+          args['fee_platform'] = conf.hasOwnProperty('fee_platform_amount') ? {
+            fee_platform_amount: conf?.fee_platform_amount || 0,
+            fee_platform_type: conf?.fee_platform_type || "NONE"
+          } : fee_platform
+          args['fee_custom'] = {
+            fee_custom_label: conf?.fee_custom_label || "Custom Fee",
+            fee_custom_amount: conf?.fee_custom_amount || 0,
+            fee_custom_type: conf?.fee_custom_type || "NONE"
+          }
+
+          esp.log(conf, res?.price_id, args);
+          LibNavigation.navigate('payment/ticket', args)
+        })
+      }
+
+      if (res?.hasOwnProperty('alert') && res?.alert != "") {
+        LibDialog.warningConfirm("Informasi", res?.alert, "Lanjutkan", () => {
+          goToPayment()
+        }, esp.lang("event/order_detail", "back"), () => {
+
+        })
+      } else {
+        goToPayment()
+      }
+
+
     }, (err: any) => {
       LibProgress.hide()
-      esp.log({ err });
+      LibDialog.warning("Oops", err?.message)
     }, 1)
   }
 
-  if (result == undefined && !coupons) {
+  function curlPriceConfig(url_price_config: string, price_id: string, onDone: (data: any) => void) {
+    LibProgress.show("Mohon tunggu..")
+    if (url_price_config) {
+      new LibCurl(url_price_config, null, (res, msg) => {
+        onDone(res?.[price_id])
+        LibProgress.hide()
+      }, (err) => {
+        LibProgress.hide()
+        LibToastProperty.show(err?.message)
+      })
+    }
+  }
+
+  if (result == undefined) {
     return (
       <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
         <EventHeader title={esp.lang("event/order_detail", "order_detail")} />
@@ -302,85 +299,12 @@ export default function m(props: EventOrder_detailProps): any {
   let isInvitationDate = result?.ondate == "0000-00-00" && result?.kind_detail?.use_code == 1
   let isOnlineWithoutDate = result?.ondate == "0000-00-00" && result?.kind_detail?.everyday_pass == 0
 
-  if ((result?.status == 1 || (result?.qty == 0 && result?.qty_shared > 0)) && result?.is_reschedule == 1) {
-    return (
-      <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
-        <EventHeader title={esp.lang("event/order_detail", "order_detail")} />
-        <View style={[{ margin: 18, borderTopLeftRadius: 7, borderTopRightRadius: 7, backgroundColor: '#fff', paddingBottom: 10 }, LibStyle.elevation(3)]}>
-
-          <TouchableOpacity onPress={() => {
-            LibNavigation.navigate('lib/gallery', { image: result?.image })
-          }}>
-            <LibPicture source={{ uri: result?.image }} style={{ borderTopLeftRadius: 7, borderTopRightRadius: 7, height: imgHeight, width: imgWidth }} resizeMode="cover" />
-          </TouchableOpacity>
-          <View style={{ flexDirection: 'row', margin: 14, marginTop: 4, justifyContent: 'space-between' }}>
-            <View style={{ marginTop: 14 }}>
-              <EventHtmltext allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("event/order_detail", "ticket")}{result?.price_name}</EventHtmltext>
-              <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>
-              <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", flexWrap: 'wrap', letterSpacing: 0, marginBottom: 12, color: "#484848" }}>
-                  {
-                    result?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used")
-                      :
-                      result.kind_detail?.everyday_pass == 1 ?
-                        "(" + result?.qty_used_today + " " + esp.lang("event/order_detail", "used_today") + ")"
-                        :
-                        "(" + result?.qty_used + " " + esp.lang("event/order_detail", "used") + ")"
-                  }
-                </Text>
-              </UseCondition>
-              <View style={{ 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" }}>{result?.ondate != "0000-00-00" ? moment(result?.ondate).localeFormat("DD MMMM YYYY") : ((isInvitationDate || isOnlineWithoutDate) ? esp.lang("event/order_item", "used_once") : dateRange)}</Text>
-              </View>
-            </View>
-            {
-              result?.status == "1" &&
-              <View style={{ marginTop: 14, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
-                {
-                  result?.qr != "" &&
-                  <TouchableOpacity onPress={() => {
-                    result?.status == "1" && showQR?.current?.show()
-                  }}>
-                    <EventQr_bg>
-                      <QRCode ecl="H" size={80} value={result?.qr} />
-                    </EventQr_bg>
-                  </TouchableOpacity>
-                }
-              </View>
-            }
-          </View>
-
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
-            <View style={{ width: 19, height: 19, borderRadius: 9.5, backgroundColor: "#f6f6f6", 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: "#f6f6f6", marginRight: -9.5 }} />
-          </View>
 
-          <View style={{ margin: 14, flexDirection: 'row' }}>
-            <Text style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }} >{result?.reschedule_notes}</Text>
-          </View>
-          {
-            result?.par_id > 0 ?
-              null
-              :
-              <EventButton onPress={() => {
-                LibNavigation.navigate('event/order_reschedule', { url: result?.url_reschedule })
-              }} label={result?.is_refundable == 1 ? esp.lang("event/order_detail", "refund_rescedule") : esp.lang("event/order_detail", "rescedule")} backgroundColor={LibStyle.colorGreen} style={{ marginLeft: 20, marginRight: 20, marginBottom: 10 }} />
-          }
-        </View>
-      </View>
-    )
+  if ((result?.status == 1 || (result?.qty == 0 && result?.qty_shared > 0)) && result?.is_reschedule == 1) {
+    return <EventOrder_detail_reschedule dataTicket={result} onPressQr={() => { showQR?.current?.show() }} />
   }
 
-  let startEvent = result?.start_date + " " + result?.start_time
-  let dateNow = LibUtils.moment().localeFormat("YYYY-MM-DD HH:mm")
-
-  const termData = result?.term ? Object.values(result?.term) : []
+  let valid = dataTicket?.some((item: any) => item.status == 1 && item.checked == 1);
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
@@ -418,22 +342,45 @@ 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>
+                  }
+                  {
+                    result?.qr == "" && result?.hasOwnProperty("url_sync") && result?.url_sync != "" &&
+                    <TouchableOpacity onPress={syncQty} style={{ marginTop: 20, padding: 5, paddingHorizontal: 10, backgroundColor: LibStyle.colorGreen, borderRadius: 7, ...LibStyle.elevation(2) }}>
+                      <Text allowFontScaling={false} style={{ color: '#fff', fontWeight: 'bold' }}>{esp.lang("event/order_detail", "show_qr")}</Text>
+                    </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" }}>
-                    {
-                      result?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used")
-                        :
-                        result.kind_detail?.everyday_pass == 1 ?
-                          "(" + result?.qty_used_today + " " + esp.lang("event/order_detail", "used_today") + ")"
+                  <View style={{ flex: 1, marginRight: LibStyle.width / 4 }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, marginBottom: 12, color: "#484848" }}>
+                      {
+                        result?.qty_used == 0 ? esp.lang("event/order", "have_not_been_used")
                           :
-                          "(" + result?.qty_used + " " + esp.lang("event/order_detail", "used") + ")"
-                    }
-                  </Text>
+                          result.kind_detail?.everyday_pass == 1 ?
+                            "(" + result?.qty_used_today + " " + esp.lang("event/order_detail", "used_today") + ")"
+                            :
+                            "(" + result?.qty_used + " " + esp.lang("event/order_detail", "used") + ")"
+                      }
+                    </Text>
+                  </View>
                 </UseCondition>
                 {
                   result?.qty_shared > 0 &&
@@ -446,7 +393,7 @@ export default function m(props: EventOrder_detailProps): any {
 
                 {
                   result?.ondate == "0000-00-00" &&
-                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                  <View style={{ marginRight: 85, 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>
@@ -456,55 +403,56 @@ export default function m(props: EventOrder_detailProps): any {
                   <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) => {
+                      {result?.seat_names?.map((item: any, i: number) => {
+                        const [front, end] = item?.split("#") || ["", ""];
+                        if (item?.includes("#")) {
                           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: 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={{ 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}</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>
-
+            {
+              result?.hasOwnProperty('url_addons_booked') && result?.url_addons_booked != "" &&
+              <EventOrder_detail_addons_booked addonsBooked={addonsBooked} errorAddonsBooked={errorAddonsBooked} onPress={loadData} />
+            }
           </View>
+
         }
         {
-          useIndividualQr > 0 && dataTickets.length > 0 ?
+          useIndividualQr > 0 && result?.ticket_codes.length > 0 ?
             <LibCarrousel_snap
-              data={dataTickets}
+              data={result?.ticket_codes}
               style={{ marginVertical: 10, marginBottom: 0, }}
               itemMarginHorizontal={3}
               itemWidth={LibStyle.width - 46}
               maxWidth={LibStyle.width}
               align={"center"}
-              renderItem={(item: ItemTiket, id: any) => {
+              renderItem={(item: any, id: any) => {
                 return (
                   <View pointerEvents='none' style={{ width: LibStyle.width - 52, flexDirection: 'row', padding: 10, backgroundColor: 'white', borderWidth: 2, borderColor: LibStyle.colorPrimary, borderRadius: 5, overflow: 'hidden', alignItems: 'center' }} >
                     <LibTextstyle textStyle='m_h2' style={{ textAlignVertical: 'center', marginHorizontal: 10 }} text={(id + 1).toString()} />
                     <View style={{ marginLeft: 10, marginVertical: 10, flex: 1, justifyContent: 'flex-start' }} >
-                      <LibTextstyle textStyle='headline' numberOfLines={1} text={item.name} ellipsizeMode='tail' />
-                      <LibTextstyle textStyle='caption1' text={item.email} ellipsizeMode='tail' />
+                      <LibTextstyle textStyle='headline' numberOfLines={1} text={result?.params?.buyer?.buyer_name} ellipsizeMode='tail' />
+                      <LibTextstyle textStyle='caption1' text={result?.params?.buyer?.buyer_email} ellipsizeMode='tail' />
                     </View>
                     <EventQr_bg>
-                      <QRCode value={item.ticket_code} size={70} />
+                      <QRCode value={item} size={70} />
                     </EventQr_bg>
                   </View>
                 )
@@ -514,7 +462,7 @@ export default function m(props: EventOrder_detailProps): any {
         }
 
         <EventAlert
-          color="#FFC523"
+          color={LibStyle.colorRed}
           msg={esp.lang("event/order_detail", "not_allowed_ss", esp.appjson().expo.name)}
           useIcon
           style={{ marginBottom: 0, margin: 15 }}
@@ -555,144 +503,97 @@ export default function m(props: EventOrder_detailProps): any {
           />
         </UseCondition>
 
-
-
         {/* tombol add on */}
         {
-          result?.addons?.length > 0 && result?.addons?.map((item: any, i: number) => {
-            return (
-              <EventButton_order_detail
-                color={result?.color}
-                onPress={() => {
-                  loadDataAddons(item?.addons_id, item?.url)
-                }}
-                icon={'plus-circle'}
-                title={item.title}
-                info={item.info}
-              />
-            )
-          })
-        }
-
-        {
-          // jika mau edit view dibawah ini, tekan ctrl + f terus paste prefik dibawah ini
-          // view_reviewed
-          dataReview?.status == 1 ?
-            <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, backgroundColor: 'white', padding: 10 }}>
-              <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 10 }}>
-                <LibPicture source={{ uri: user?.image }} style={{ height: 50, width: 50, borderRadius: 25 }} />
-                <View style={{ marginLeft: 10, flex: 1 }}>
-                  <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='tail' style={{ fontSize: 16, fontWeight: 'bold' }}>{user?.name}</Text>
-                  <Text allowFontScaling={false} style={{ fontSize: 12, color: '#c9c9c9' }}>{LibUtils.moment(dataReview?.review?.created).localeFormat("D MMM YYYY")}</Text>
-                  <View style={{ marginTop: 5 }}>
-                    <EventRating disabled onChangeRating={() => { }} defaultValue={dataReview?.review?.rating} size={18} containerStyle={{ padding: 0, justifyContent: 'flex-start' }} />
-                    {
-                      dataReview?.review?.content != "" &&
-                      <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, color: '#000' }}>{dataReview?.review?.content.replace(/\\n/g, '\n')}</Text>
-                    }
-                    {
-                      dataReview?.surveys?.length > 0 &&
-                      getStringReview(dataReview?.surveys).map((sur) => (
-                        <Text allowFontScaling={false} style={{ fontSize: 12, color: '#000' }}>{sur}</Text>
-                      ))
-                    }
+          result?.hasOwnProperty('url_addons') && result?.url_addons != "" &&
+          <LibCollaps
+            header={(show) => {
+              return (
+                <View style={{ margin: 15, alignContent: 'center', alignItems: 'center', paddingHorizontal: 15, marginBottom: 0, borderRadius: 7, backgroundColor: '#fff', paddingBottom: 10, paddingTop: 10, flexDirection: 'row' }}>
+                  <View style={{ flex: 1 }}>
+                    <Text style={{ fontWeight: 'bold', fontSize: 14, color: "#495057" }}>{esp.lang("event/order_detail", "addons")}</Text>
                   </View>
+                  <LibIcon name={!show ? "chevron-down" : "chevron-up"} />
                 </View>
-              </View>
-              {
-                dataReview?.status == 2 &&
-                <View style={applyStyle({ borderColor: '#FC9722', backgroundColor: '#FDF1DE', borderWidth: 1, borderStyle: 'dashed', borderRadius: 5, padding: 5, marginTop: 15, marginBottom: 0 })} >
-                  <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{esp.lang("event/order_detail", "thanks")}</Text>
-                </View>
-              }
-
-            </View>
-            :
-            dateNow > startEvent ?
-              <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, backgroundColor: '#000', padding: 10 }}>
-                {
-                  dataReview?.review == null ?
-                    <Pressable>
-                      <EventRating onChangeRating={(rate) => {
-                        let type = EventReviewProperty.calculateProb(result?.config?.review)
-                        let urlForm = "event_order_detail_review_form?id=" + result?.id + "&type=" + type?.type
-                        let args = {
-                          url_form: urlForm,
-                          type: type?.type,
-                          booking_id: result?.id,
-                          rate: rate
-                        }
-                        if (result?.review_status != 1) {
-                          LibNavigation.navigate('event/review_add', args)
-                        }
-                      }} defaultValue={5} size={50} containerStyle={{ padding: 0, backgroundColor: 'transparent' }} />
-                      <Text allowFontScaling={false} style={{ alignSelf: 'center', marginTop: 15, fontSize: 18, fontWeight: 'bold', color: '#fff' }}>{esp.lang("event/order_detail", "leave_review")}</Text>
-                      <Text allowFontScaling={false} style={{ alignSelf: 'center', marginTop: 7, fontSize: 14, color: '#fff' }}>{esp.lang("event/order_detail", "review_info")}</Text>
-
-                    </Pressable>
-                    :
-                    // view_reviewed
-                    <View style={{ margin: -10, backgroundColor: '#fff', padding: 10, borderRadius: 7 }}>
-                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
-                        <LibPicture source={{ uri: user?.image }} style={{ height: 50, width: 50, borderRadius: 25 }} />
-                        <View style={{ marginLeft: 10 }}>
-                          <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='tail' style={{ fontSize: 16, fontWeight: 'bold' }}>{user?.name}</Text>
-                          <Text allowFontScaling={false} style={{ fontSize: 12, color: '#c9c9c9' }}>{LibUtils.moment(dataReview?.review?.created).localeFormat("D MMM YYYY")}</Text>
-                          <View style={{ marginTop: 5 }}>
-                            <EventRating disabled onChangeRating={() => { }} defaultValue={dataReview?.review?.rating} size={18} containerStyle={{ padding: 0, backgroundColor: 'transparent' }} />
-                          </View>
-                        </View>
-                      </View>
-
-                      <Text allowFontScaling={false} numberOfLines={5} ellipsizeMode='tail' style={{ marginTop: 10, fontSize: 12, color: '#000' }}>{dataReview?.review?.content}</Text>
-                      {
-                        dataReview?.status == 2 &&
-                        <View style={applyStyle({ borderColor: '#FC9722', backgroundColor: '#FDF1DE', borderWidth: 1, borderStyle: 'dashed', borderRadius: 5, padding: 5, marginTop: 15, marginBottom: 0 })} >
-                          <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{esp.lang("event/order_detail", "thanks")}</Text>
-                        </View>
-                      }
-                    </View>
+              )
+            }} >
+            <EventOrder_detail_addons
+              dataTicket={result}
+              onPress={(item: any) => {
+                const isMultiple = item?.list?.length > 1
+                if (isMultiple) {
+                  setGroupAddon(item)
+                  LibUtils.debounce(() => {
+                    dialogAddonList?.current?.show()
+                  }, 100)
+                } else {
+                  if (item?.status == 1) {
+                    const addon = item?.list?.[0]
+                    setGroupAddon(item)
+                    setSelectedAddon(addon)
+                    loadDataTicket(result?.id, addon?.price_id, addon?.ondate)
+                  }
                 }
-              </View>
-              : null
+
+              }}
+            />
+          </LibCollaps>
         }
 
+        {/* review */}
+        <EventOrder_detail_review dataReview={dataReview} dataTicket={result} />
+
         {/* view for coupon */}
         {
-          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: "#495057" }}>{coupons.title || ''}</Text>
-            </View>
-
-            {
-              coupons?.list?.map((item: any, i: number) => {
-                return (
-                  <TouchableOpacity key={i} onPress={() => {
-                    esp.modProp("event/coupon").getCouponDetail(item?.url_detail_coupon)
-                  }} style={[{ marginBottom: 4, margin: 15, borderRadius: 15, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
-                    <LibPicture source={{ uri: item.image }} resizeMode="cover" style={{ height: (LibStyle.width - 60) * 0.43, width: LibStyle.width - 60, borderRadius: 5 }} />
-                    <View style={{ position: 'absolute', top: (((LibStyle.width - 60) * 0.43) / 2) - 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between' }} >
-                      <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginLeft: -9.5 }} />
-                      <View style={{ flex: 1 }} />
-                      <View style={{ width: 23, height: 23, borderRadius: 11.5, backgroundColor: "white", marginRight: -9.5 }} />
-                    </View>
-                  </TouchableOpacity>
-                )
-              })
+          result?.url_coupon != "" &&
+          <LibCollaps
+            show={Number(result?.show_voucher) == 0 ? false : true}
+            header={(show) =>
+              <View style={{ margin: 15, alignContent: 'center', alignItems: 'center', paddingHorizontal: 15, marginBottom: 0, borderRadius: 7, backgroundColor: '#fff', paddingBottom: 10, paddingTop: 10, flexDirection: 'row' }}>
+                <View style={{ flex: 1 }}>
+                  <Text style={{ fontWeight: 'bold', fontSize: 14, color: "#495057" }}>{esp.lang("event/order_detail", "voucher_or_coupon")}</Text>
+                </View>
+                <LibIcon name={!show ? "chevron-down" : "chevron-up"} />
+              </View>
             }
+          >
+            <EventOrder_detail_coupon dataTicket={result} />
+          </LibCollaps>
+        }
 
-            {
-              coupons?.pages > 1 &&
-              <TouchableOpacity onPress={() => {
-                LibNavigation.navigate("event/coupon")
-              }}>
-                <View style={{ marginTop: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 50 }}>
-                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", textAlign: 'center', fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{esp.lang("event/order_detail", "see_all_coupon")}</Text>
+        {/* how to use ticket */}
+        {
+          result?.status == 1 && result?.url_instructions != "" &&
+          <LibCollaps
+            header={(show) => {
+              return (
+                <View style={{ margin: 15, alignContent: 'center', alignItems: 'center', paddingHorizontal: 15, marginBottom: 0, borderRadius: 7, backgroundColor: '#fff', paddingBottom: 10, paddingTop: 10, flexDirection: 'row' }}>
+                  <View style={{ flex: 1 }}>
+                    <Text style={{ fontWeight: 'bold', fontSize: 14, color: "#495057" }}>{esp.lang("event/order_detail", "how_to_use")}</Text>
+                  </View>
+                  <LibIcon name={!show ? "chevron-down" : "chevron-up"} />
                 </View>
-              </TouchableOpacity>
+              )
+            }}>
+            <EventOrder_detail_instruction dataTicket={result} />
+          </LibCollaps>
+        }
+
+        {/* term n condition */}
+        {
+          result?.url_term != "" &&
+          <LibCollaps
+            header={(show) =>
+              <View style={{ margin: 15, alignContent: 'center', alignItems: 'center', paddingHorizontal: 15, marginBottom: 0, borderRadius: 7, backgroundColor: '#fff', paddingBottom: 10, paddingTop: 10, flexDirection: 'row' }}>
+                <View style={{ flex: 1 }}>
+                  <Text style={{ fontWeight: 'bold', fontSize: 14, color: "#495057" }}>{esp.lang("event/order_detail", "tos")}</Text>
+                </View>
+                <LibIcon name={!show ? "chevron-down" : "chevron-up"} />
+              </View>
             }
-          </View>
+          >
+            <EventOrder_detail_tnc dataTicket={result} />
+          </LibCollaps>
         }
 
         <View style={{ margin: 15, marginBottom: 0, padding: 16, borderRadius: 5, backgroundColor: '#fff' }}>
@@ -711,80 +612,26 @@ export default function m(props: EventOrder_detailProps): any {
               <Text allowFontScaling={false} style={{ alignContent: 'center', alignItems: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }}>{result?.payment_title}</Text>
             </View>
           }
-        </View>
 
-        {
-          result?.status == 1 && result?.instructions?.length > 0 &&
-          <View style={{ margin: 15, marginBottom: 5, padding: 16, borderRadius: 5, backgroundColor: '#fff' }}>
-            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail", "how_to_use")}</Text>
-            {
-              result?.instructions.map((item: any, i: number) => {
-                const urls = item.match(/(https?:\/\/[^\s]+)/g)
-                const text = item.replace(urls?.[0], '~:::~')
-                const texts = text.split('~:::~')
-                return (
-                  <TouchableOpacity key={i + 1} onPress={() => {
-                    if (item.match(/(https?:\/\/[^\s]+)/g)) {
-                      Linking.openURL(urls[0])
-                    }
-                  }}>
-                    <Text allowFontScaling={false} style={{ flexWrap: 'wrap', marginBottom: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, color: "#4a4a4a", marginTop: 4 }}>
-                      {texts?.[0]}
-                      {urls && <Text allowFontScaling={false} style={{ flexWrap: 'wrap', marginBottom: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, color: LibStyle.colorBlue, marginTop: 4 }}>{urls[0]}</Text>}
-                      {texts?.[1]}
-                    </Text>
-                  </TouchableOpacity>
-                )
-              })
-            }
-
-            {
-              urlsInstruction.length > 0 && urlsInstruction.map((item: any, i: number) => {
-                return (
-                  <View key={i + 1} style={{ padding: 10, marginTop: 10, flexDirection: 'row-reverse' }}>
-                    <TouchableOpacity onPress={() => {
-                      LibUtils.share(item)
-                    }} style={{ ...LibStyle.elevation(5), alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 40, width: 40, borderRadius: 20, marginHorizontal: 10 }}>
-                      <LibIcon color="#fff" name="share" />
-                    </TouchableOpacity>
-                    <TouchableOpacity onPress={() => {
-                      LibUtils.copyToClipboard(item)
-                      LibToastProperty.show(esp.lang("event/order_detail", "copied"))
-                    }} style={{ ...LibStyle.elevation(5), alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 40, width: 40, borderRadius: 20, marginHorizontal: 10 }}>
-                      <LibIcon color="#fff" name="content-copy" />
-                    </TouchableOpacity>
-                    <TouchableOpacity onPress={() => {
-                      Linking.openURL(item)
-                    }} style={{ ...LibStyle.elevation(5), alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 40, width: 40, borderRadius: 20, marginHorizontal: 10 }}>
-                      <LibIcon.MaterialIcons color="#fff" name="open-in-browser" />
-                    </TouchableOpacity>
-                  </View>
-                )
-              })
-            }
+          {
+            result?.url_ticket != "" &&
+            <TouchableOpacity
+              onPress={() => {
+                LibNavigation.navigate('event/order_detail_visitor', { url: result?.url_ticket, url_addition: result?.url_addition })
+              }}
+              style={{ ...LibStyle.elevation(2), marginTop: 15, alignContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: LibStyle.colorBgGrey, padding: 10, backgroundColor: '#fff', borderRadius: 5, flexDirection: 'row' }}>
+              <View style={{ flex: 1 }}>
+                <Text style={{ fontWeight: 'bold', fontSize: 14, color: "#495057" }}>{esp.lang("event/order_detail", "buyer_detail")}</Text>
+              </View>
+              <LibIcon name={"chevron-right"} />
+            </TouchableOpacity>
+          }
+        </View>
 
-          </View>
-        }
-        {
-          termData?.length > 0 &&
-          <View style={{ margin: 16, borderRadius: 5, padding: 10, backgroundColor: 'white' }} >
-            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail", "tos")}</Text>
-            {termData?.map(renderTermItem)}
-          </View>
-        }
-        {
-          result?.url_ticket != "" &&
-          <TouchableOpacity onPress={() => {
-            LibNavigation.navigate('event/order_detail_visitor', { url: result?.url_ticket, url_addition: result?.url_addition })
-          }} style={{ ...LibStyle.elevation(3), margin: 15, padding: 16, borderRadius: 5, backgroundColor: '#fff', flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
-            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("event/order_detail", "buyer_detail")}</Text>
-            <LibIcon name='chevron-right-circle-outline' size={30} color={LibStyle.colorBlue} />
-          </TouchableOpacity>
-        }
 
         {
           esp.isDebug("") &&
-          <View style={{ padding: 5 }}>
+          <View style={{ padding: 5, marginTop: 15 }}>
             <EventButton label={esp.lang("event/order_detail", "send_to_email")} onPress={() => {
               LibToastProperty.show("Coming Soon")
             }} backgroundColor={"#FFF"} borderColor={LibStyle.colorGreen} fontColor={LibStyle.colorGreen} />
@@ -800,7 +647,7 @@ export default function m(props: EventOrder_detailProps): any {
           <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.appjson().expo.name), esp.lang("event/order_detail", "share_ok"), () => {
-                LibNavigation.navigate('event/order_share_to', { url: url })
+                LibNavigation.navigate('event/order_detail_share', { url: url })
               }, esp.lang("event/order_detail", "share_no"), () => {
 
               })
@@ -814,7 +661,7 @@ export default function m(props: EventOrder_detailProps): any {
         result?.par_id != 0 && result?.status == 1 && result?.qty_returnable > 0 &&
         <View style={{ padding: 5 }}>
           <EventButton label={esp.lang("event/order_detail", "return_ticket")} onPress={() => {
-            dialogSendBack?.current?.show()
+            LibNavigation.navigate('event/order_detail_return', { url: url })
           }} backgroundColor={LibStyle.colorGreen} />
         </View>
       }
@@ -833,46 +680,130 @@ export default function m(props: EventOrder_detailProps): any {
         </View>
       </LibSlidingup>
 
-      <LibSlidingup ref={dialogSendBack} >
-        <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 }} >
-          <EventPopup email={result?.sharer_email?.trim?.()} redirect={() => {
-            if (result?.use_seat == 1) {
-              let data = {
-                qty: qty
-              }
-              LibNavigation.navigate('event/seat', {
-                url: result?.url_ticket,
-                dataTicket: data,
-                returnTicket: true,
-              })
-            } else {
-              LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
-                if (p) {
-                  sendBack(p)
-                }
+      <LibSlidingup ref={dialogQtyAddons}>
+        <View style={{ backgroundColor: 'white', maxHeight: LibStyle.height - (LibStyle.height / 3), borderTopRightRadius: 20, borderTopLeftRadius: 20, padding: 20 }}>
+          <Text style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", color: "#b7b7b7" }} >{esp.lang("event/order_detail", "addons")}</Text>
+          <Text style={{ fontFamily: "Arial", fontSize: 16, fontWeight: "bold", color: "#4a4a4a" }} >{getSelectedAddon()?.title}</Text>
+          {
+            getSelectedAddon()?.info != "" &&
+            <EventHtmltext style={{ fontFamily: "Arial", marginBottom: 10, fontSize: 12, marginLeft: 10, color: "#b7b7b7" }} >{getSelectedAddon()?.info}</EventHtmltext>
+          }
+
+          <ScrollView>
+            <Text allowFontScaling={false} style={{ marginVertical: 10, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: "#000" }}>{esp.lang("event/order_detail_share", "chose_ticket")}</Text>
+            {
+              dataTicket?.length > 0 && dataTicket?.map((item: any, i: number) => {
+                const [front, end] = item?.seat_name?.split("#") || ["", ""];
+                let colorDisable = item?.status == 0 ? LibStyle.colorBgGrey : "#f1f1f1"
+                let colorAccent = item?.checked == 1 ? LibStyle?.colorGreen : colorDisable
+                return (
+                  <TouchableOpacity key={i} onPress={() => {
+                    if (item?.status == 1) {
+                      let a = LibObject.set(dataTicket, item.checked == 1 ? 0 : 1)(i, 'checked')
+                      setDataTicket(a)
+                    }
+
+                  }} style={{ padding: 10, marginBottom: 10, borderRadius: 4, backgroundColor: item?.status == 1 ? "#fff" : LibStyle.colorBgGrey, borderColor: colorAccent, borderWidth: 1, flexDirection: 'row' }}>
+                    <View style={{ flex: 5 }}>
+                      <Text allowFontScaling={false} style={{ fontSize: 14, fontStyle: "normal", color: "#000", fontWeight: "bold", }}>{result?.price_name}</Text>
+                      {/* seat */}
+                      {
+                        item?.seat_name != "" &&
+                        <View style={{ marginVertical: 10 }}>
+                          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, marginBottom: 5, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#b7b7b7" }}>{esp.lang("event/order_detail", "seat_number")}</Text>
+
+                          <View style={{ marginLeft: 7, flexDirection: 'row' }}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 5, paddingHorizontal: 5, backgroundColor: '#f1f1f1', borderRadius: 5, marginRight: 7 }}>
+                              <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>
+                          </View>
+                        </View>
+                      }
+                      {/* add ons */}
+                      {
+                        item?.addons?.length > 0 &&
+                        <View style={{ marginTop: 5 }}>
+                          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#b7b7b7" }}>{esp.lang("event/order_detail", "addons")}</Text>
+                        </View>
+                      }
+                      {
+                        item?.addons?.length > 0 && item?.addons?.map((x: any, ii: number) => {
+                          return (
+                            <View key={ii} style={{ marginLeft: 7, flexDirection: 'row' }}>
+                              <View style={{}}>
+                                <Text allowFontScaling={false} style={{ color: '#484848', fontSize: 12, fontWeight: 'bold', fontFamily: "Arial" }}>- {
+                                  x?.list?.map((y: any) => y).join(', ')
+                                }</Text>
+                                {
+                                  x?.ondate != "0000-00-00" &&
+                                  <Text allowFontScaling={false} style={{ marginLeft: 7, marginBottom: 3, marginTop: 3, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: '#484848' }}>{
+                                    LibUtils.moment(x?.ondate).localeFormat('DD MMM YYYY')}</Text>
+                                }
+                              </View>
+                            </View>
+                          )
+                        })
+                      }
+
+
+                    </View>
+                    <View style={{ flex: 1, alignContent: 'flex-end', alignItems: 'flex-end' }}>
+                      <LibIcon name={item?.checked == 1 ? 'check-circle' : 'radiobox-blank'} color={colorAccent} />
+                    </View>
+                  </TouchableOpacity>
+                )
               })
             }
-            dialogSendBack.current!.hide()
-          }} cancel={() => {
-            dialogSendBack.current!.hide()
-          }}
-            view={
-              <View style={{ flexDirection: 'row', marginTop: 20, marginBottom: 8, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
-                <TouchableOpacity onPress={() => { minReturn() }}>
-                  <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
-                    <LibIcon name="minus" color="#e74c3c" />
-                  </View>
-                </TouchableOpacity>
-                <Text style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginLeft: 13, marginRight: 13 }}>{qty}</Text>
-                <TouchableOpacity onPress={() => { addReturn() }}>
-                  <View style={{ width: 28, height: 28, borderRadius: 6, backgroundColor: "#ecf0f1", alignContent: 'center', alignItems: 'center' }}>
-                    <LibIcon name="plus" color="#16a085" />
-                  </View>
-                </TouchableOpacity>
-              </View>
+          </ScrollView>
+
+          <EventButton label={esp.lang("event/order_detail", "next")} onPress={() => {
+            if (valid) {
+              dialogQtyAddons?.current?.hide()
+              loadDataAddons(getSelectedAddon()?.addons_id, getSelectedAddon()?.url)
             }
+          }}
+            backgroundColor={!valid ? LibStyle.colorGrey : LibStyle.colorGreen}
           />
+        </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()?.hasOwnProperty("list") ? getGroupAddon()?.title : getGroupAddon()?.group_title}</Text>
+            <TouchableOpacity style={{ flex: 1, alignItems: 'flex-end' }} onPress={() => dialogAddonList?.current?.hide()}>
+              <LibIcon name='close' />
+            </TouchableOpacity>
+          </View>
+          <ScrollView>
+            {/* ini list untuk yang ondate */}
+            {
+              getGroupAddon()?.list?.length > 0 && getGroupAddon()?.list?.map((item: any, i: number) => {
+                return (
+                  <EventButton_order_detail
+                    disable={item?.hasOwnProperty('status') && item.status == 0 ? true : false}
+                    status_message={item?.status_message}
+                    key={i}
+                    color={result?.color}
+                    onPress={() => {
+                      if (item?.hasOwnProperty('status') && item?.status == 1) {
+                        setSelectedAddon(item)
+                        dialogAddonList?.current?.hide()
+                        loadDataTicket(result?.id, item?.price_id, item?.ondate)
+                        // loadDataAddons(getGroupAddon()?.addons_id, item?.url)
+                      }
+                    }}
+                    icon={'plus-circle-outline'}
+                    title={item?.title}
+                    subtitle={item?.ondate != "0000-00-00" ? LibUtils.moment(item.ondate).format("DD MMM YYYY") : ''}
+                    info={item?.info}
+                  />
+                )
+              })
+            }
+          </ScrollView>
         </View>
       </LibSlidingup>