esoftplay-event 0.0.2 → 0.0.3

package/event/seat.tsx

@@ -1,7 +1,6 @@
 // withHooks
 import { EventButton } from 'esoftplay/cache/event/button/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
-import { EventOrder_detailProperty } from 'esoftplay/cache/event/order_detail/import';
 import { LibCurl } from 'esoftplay/cache/lib/curl/import';
 import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
 import { LibIcon } from 'esoftplay/cache/lib/icon/import';
@@ -9,17 +8,15 @@ import { LibLoading } from 'esoftplay/cache/lib/loading/import';
 import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
 import { LibObject } from 'esoftplay/cache/lib/object/import';
 import { LibPicture } from 'esoftplay/cache/lib/picture/import';
-import { LibProgress } from 'esoftplay/cache/lib/progress/import';
 import { LibStyle } from 'esoftplay/cache/lib/style/import';
 import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
 import { LibUtils } from 'esoftplay/cache/lib/utils/import';
 import esp from 'esoftplay/esp';
 import useSafeState from 'esoftplay/state';
 
-import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
-import { EventTransaction } from 'esoftplay/cache/event/transaction/import';
+import { applyStyle } from 'esoftplay';
 import React, { useEffect } from 'react';
-import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
 import Animated, { Extrapolate, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 
@@ -30,8 +27,7 @@ export interface EventSeatProps {
 
 }
 export default function m(props: EventSeatProps): any {
-  const { url, dataTicket, receiver_email, shared, booking_id, returnTicket } = LibNavigation.getArgsAll(props)
-  const [trxId] = useSafeState(EventTransaction().getTrxId())
+  const { url, dataTicket } = LibNavigation.getArgsAll(props)
 
   const [result, setResult] = useSafeState<any>(undefined)
   const [counter, setCounter] = useSafeState<any>(0)
@@ -103,33 +99,9 @@ export default function m(props: EventSeatProps): any {
   ]
 
   useEffect(() => {
-    if (shared) {
-      loadSeatShared()
-    } else if (returnTicket) {
-      loadSeatReturn()
-    } else {
-      loadDataSize()
-    }
+    loadDataSize()
   }, [])
 
-  function loadSeatShared() {
-    let post = {
-      event_id: dataTicket?.event_id,
-      booking_id: booking_id,
-      price_id: dataTicket?.selected_ticket?.list?.price_id || dataTicket?.selected_ticket?.price_id,
-      ondate: dataTicket?.selected_ticket?.list?.ondate,
-    }
-    new LibCurl(url, post, (res, msg) => { // event_seat_shared
-      for (let i = 0; i < res.list.length; i++) {
-        res.list[i].check = false
-      }
-      setResult(res)
-    }, (error) => {
-      LibDialog.warning(esp.lang("event/seat", "load_shared_failed"), error?.message)
-      LibNavigation.back()
-    })
-  }
-
   function loadDataSize() {
     let post = {
       event_id: dataTicket?.event_id,
@@ -185,18 +157,6 @@ export default function m(props: EventSeatProps): any {
     }, 1)
   }
 
-  function loadSeatReturn() {
-    new LibCurl(url, null, (res) => {
-      for (let i = 0; i < res.tickets.length; i++) {
-        res.tickets[i].check = false
-      }
-      setResult(res)
-    }, (error) => {
-      LibDialog.warning(esp.lang("event/seat", "load_return_failed"), error?.message);
-      LibNavigation.back()
-    }, 1)
-  }
-
   function next() {
     if (dataTicket?.qty != counter) {
       LibToastProperty.show(esp.lang("event/seat", "select_seat"))
@@ -221,75 +181,6 @@ export default function m(props: EventSeatProps): any {
     LibNavigation.sendBackResult(value)
   }
 
-  function shareTicket(p: any) {
-    if (dataTicket?.qty != counter) {
-      LibToastProperty.show(esp.lang("event/seat", "select_seat1"))
-      return
-    }
-
-    let seatName = result?.list?.filter((item: any) => item.check).map((it: any) => it.seat_name)
-    let _bookingMemberId = result?.list?.filter((item: any) => item.check).map((it: any) => it.id)
-
-    LibDialog.confirm(esp.lang("event/seat", "share_title"), esp.lang("event/seat", "share_msg"), esp.lang("event/seat", "share_confirm"), () => {
-      let post = {
-        receiver_email: receiver_email,
-        booking_id: result?.booking_id,
-        qty_shared: dataTicket?.qty,
-        seat_name: seatName.join('|'),
-        booking_member_id: _bookingMemberId.join('|'),
-        trx_id: trxId,
-        pin: p
-      }
-
-      LibProgress.show(esp.lang("event/seat", "share_wait"))
-      new LibCurl('event_booking_shared?id=' + dataTicket?.event_id, post, (res, msg) => {
-        EventOrder_detailProperty.subscribe().trigger()
-        EventIndexProperty.reload.trigger() //reload data order
-        // LibNotify(res)
-        LibProgress.hide()
-        LibDialog.info(esp.lang("event/seat", "share_ok"), msg)
-        LibNavigation.back()
-        LibNavigation.back()
-      }, (error) => {
-        LibProgress.hide()
-        LibDialog.warning(esp.lang("event/seat", "share_no"), error?.message);
-        // LibNavigation.back()
-      })
-    }, esp.lang("event/seat", "share_cancel"), () => {
-
-    })
-  }
-
-  function sendBackTicket(p: any) {
-    if (dataTicket?.qty != counter) {
-      LibToastProperty.show(esp.lang("event/seat", "select_seat2"))
-      return
-    }
-
-    LibDialog.confirm(esp.lang("event/seat", "ticket_title"), esp.lang("event/seat", "ticket_msg"), esp.lang("event/seat", "ticket_confirm"), () => {
-      LibProgress.show(esp.lang("event/seat", "ticket_wait"))
-
-      let _bookingMemberId = result?.tickets?.filter((item: any) => item.check).map((it: any) => it.id)
-
-      let post = {
-        booking_member_id: _bookingMemberId.join('|'),
-        pin: p
-      }
-      new LibCurl('event_booking_shared_return?booking_id=' + result?.booking_id + '&qty_shared=' + dataTicket?.qty, post, (res, msg) => {
-        // LibNotify(res)
-        EventOrder_detailProperty.subscribe().trigger()
-        LibProgress.hide()
-        LibDialog.info(esp.lang("event/seat", "ticket_ok"), msg)
-        LibNavigation.back()
-        LibNavigation.back()
-      }, (error) => {
-        LibProgress.hide()
-        LibDialog.warning(esp.lang("event/seat", "ticket_failed"), error?.message);
-        // LibNavigation.back()
-      }, 1)
-    }, esp.lang("event/seat", "ticket_cancel"), () => { })
-  }
-
   const viewImageMap = (image: string) => {
     return (
       <View>
@@ -334,17 +225,14 @@ export default function m(props: EventSeatProps): any {
   const margin = sizeBox / 9
   const fontSize = sizeBox / 3
   function renderRow(row: any, i: number) {
-    const styleId_2sAMKr: any = { marginLeft: 5, marginRight: 5, flexDirection: 'row' }
     return (
-      <View key={i} style={styleId_2sAMKr}>
+      <View key={i} style={applyStyle({ marginLeft: 5, marginRight: 5, flexDirection: 'row' })}>
         {
           row?.map((col: any, i1: number) => {
             const { colorBackground, colorBorder, fontColor } = renderStyleSeat(col)
-            const styleId_Z11LKot: any = { margin: margin, marginBottom: 0, marginRight: sizeBox / 9, marginLeft: margin, height: sizeBox, width: sizeBox, backgroundColor: colorBackground, borderWidth: 1, borderColor: colorBorder, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
-            const styleId_Z6RdsD: any = { fontFamily: "Arial", fontSize: fontSize, fontWeight: "normal", textAlign: 'center', fontStyle: "normal", letterSpacing: 0, color: fontColor }
             return (
-              <TouchableOpacity onPress={toggleSeat(col, i, i1)} key={i1} style={styleId_Z11LKot}>
-                <Text allowFontScaling={false} style={styleId_Z6RdsD}>{col.name}</Text>
+              <TouchableOpacity onPress={toggleSeat(col, i, i1)} key={i1} style={applyStyle({ margin: margin, marginBottom: 0, marginRight: sizeBox / 9, marginLeft: margin, height: sizeBox, width: sizeBox, backgroundColor: colorBackground, borderWidth: 1, borderColor: colorBorder, borderRadius: 4, justifyContent: 'center', alignContent: 'center', alignItems: 'center' })}>
+                <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: fontSize, fontWeight: "normal", textAlign: 'center', fontStyle: "normal", letterSpacing: 0, color: fontColor })}>{col.name}</Text>
               </TouchableOpacity>
             )
           })
@@ -353,283 +241,156 @@ export default function m(props: EventSeatProps): any {
     )
   }
 
-  function renderTicketShare(item: any, i: number) {
-    let _selectTicket = item.hasOwnProperty('check') && item.check
-    return (
-      <TouchableOpacity onPress={() => {
-        if (counter + 1 > dataTicket?.qty && !item.check) {
-          alertSelectSeat()
-        } else {
-          let a = LibObject.set(result, item.check == false ? true : false)('list', i, 'check')
-          setResult(a)
-          setCounter(item.check ? counter - 1 : counter + 1)
-        }
-      }} key={i} style={styleId_Z1ppFKw}>
-        <Text allowFontScaling={false}>{item.seat_name}</Text>
-        <TouchableOpacity onPress={() => {
-          if (!item.check && counter + 1 > dataTicket?.qty) {
-            alertSelectSeat()
-          } else {
-            let a = LibObject.set(result, item.check == false ? true : false)('list', i, 'check')
-            setResult(a)
-            setCounter(!item.check ? counter + 1 : counter - 1)
-          }
-        }} style={styleId_ZE3xEb} >
-          <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} color={_selectTicket ? "#3ea4dc" : "#434343"} />
-        </TouchableOpacity>
-      </TouchableOpacity>
-    )
-  }
-
-  function renderTicketReturn(item: any, i: number) {
-    let _selectTicket = item.hasOwnProperty('check') && item.check
-    return (
-      <TouchableOpacity onPress={() => {
-        if (counter + 1 > dataTicket?.qty && !item.check) {
-          alertSelectSeat()
-        } else {
-          let a = LibObject.set(result, item.check == false ? true : false)('tickets', i, 'check')
-          setResult(a)
-          setCounter(item.check ? counter - 1 : counter + 1)
-        }
-      }} key={i} style={styleId_Z1ppFKw}>
-        <Text allowFontScaling={false}>{item.seat_name}</Text>
-        <TouchableOpacity onPress={() => {
-          if (!item.check && counter + 1 > dataTicket?.qty) {
-            alertSelectSeat()
-          } else {
-            let a = LibObject.set(result, item.check == false ? true : false)('tickets', i, 'check')
-            setResult(a)
-            setCounter(!item.check ? counter + 1 : counter - 1)
-          }
-        }} style={styleId_ZE3xEb} >
-          <LibIcon name={_selectTicket ? "checkbox-marked-circle" : "radiobox-blank"} size={22} color={_selectTicket ? "#3ea4dc" : "#434343"} />
-        </TouchableOpacity>
-      </TouchableOpacity>
-    )
-  }
-
   useEffect(() => {
     return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
   }, [])
 
-
-
-
-  // view untuk share tiket
-  if (shared) {
-    return (
-      <View style={{ flex: 1, backgroundColor: '#fff' }}>
-        <EventHeader title={esp.lang("event/seat", "header_title")} />
-        {
-          !result ?
-            <LibLoading />
-            :
-            <>
-              <ScrollView>
-                <Text allowFontScaling={false} style={{ margin: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{esp.lang("event/seat", "seat_qty", LibUtils.number(dataTicket?.qty - counter))}</Text>
-                <View style={{ margin: 15, marginTop: 0 }}>
-                  {
-                    result?.list?.length > 0 && result?.list?.map?.(renderTicketShare)
-                  }
-                </View>
-
-              </ScrollView>
-              <View style={{ paddingVertical: 10, paddingHorizontal: 20 }} >
-                <EventButton label={esp.lang("event/seat", "next")} onPress={() => {
-                  LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
-                    if (p) {
-                      shareTicket(p)
-                    }
-                  })
-                }} style={{ backgroundColor: dataTicket?.qty != counter ? LibStyle.colorGrey : LibStyle.colorPrimary }} />
-              </View>
-            </>
-        }
-      </View>
-    )
-  } else if (returnTicket) {
-    return (
-      <View style={{ flex: 1, backgroundColor: '#fff' }}>
-        <EventHeader title={esp.lang("event/seat", "header_title_return")} subtitle={esp.lang("event/seat", "header_subtitle_return")} />
-        {
-          !result ?
-            <LibLoading />
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <EventHeader title={esp.lang("event/seat", "header_title_select")} subtitle={dataTicket?.selected_ticket?.type} />
+      {
+        !result ?
+          <LibLoading />
+          :
+          result == "none" ?
+            <View style={{ flex: 1, margin: 10, marginBottom: 0, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+              <TouchableOpacity onPress={() => {
+                LibNavigation.navigateForResult('event/seat_map', {
+                  x: resultDataSize.seat_column,
+                  y: resultDataSize.seat_row,
+                  url: url,
+                  event_id: dataTicket?.event_id,
+                  price_id: dataTicket?.selected_ticket?.list?.price_id || dataTicket?.selected_ticket?.price_id,
+                  ondate: dataTicket?.selected_ticket?.list?.ondate,
+                }, 345).then((item: any) => {
+                  setResult(undefined)
+                  loadSeat(item)
+                })
+              }} style={{ alignContent: 'center', alignItems: 'center', padding: 10, borderRadius: 5, backgroundColor: LibStyle.colorPrimary }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: '#000' }}>{esp.lang("event/seat", "reselect")}</Text>
+              </TouchableOpacity>
+            </View>
             :
             <>
-              <ScrollView>
-                <Text allowFontScaling={false} style={{ margin: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{esp.lang("event/seat", "return_seat", LibUtils.number(dataTicket?.qty - counter))}</Text>
-                <View style={{ margin: 15, marginTop: 0 }}>
-                  {
-                    result?.tickets?.length > 0 && result?.tickets?.map?.(renderTicketReturn)
-                  }
-                </View>
-              </ScrollView>
-              <View style={{ paddingVertical: 10, paddingHorizontal: 20 }} >
-                <EventButton label={esp.lang("event/seat", "next")} onPress={() => {
-                  LibNavigation.navigateForResult("bigbang/payment_pin", undefined, 1132).then((p) => {
-                    if (p) {
-                      sendBackTicket(p)
-                    }
-                  })
-
-                }} style={{ backgroundColor: dataTicket?.qty != counter ? LibStyle.colorGrey : LibStyle.colorPrimary }} />
-              </View>
-            </>
-        }
-      </View>
-    )
-  } else {
-    return (
-      <View style={{ flex: 1, backgroundColor: '#fff' }}>
-        <EventHeader title={esp.lang("event/seat", "header_title_select")} subtitle={dataTicket?.selected_ticket?.type} />
-        {
-          !result ?
-            <LibLoading />
-            :
-            result == "none" ?
-              <View style={{ flex: 1, margin: 10, marginBottom: 0, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
-                <TouchableOpacity onPress={() => {
-                  LibNavigation.navigateForResult('event/seat_map', {
-                    x: resultDataSize.seat_column,
-                    y: resultDataSize.seat_row,
-                    url: url,
-                    event_id: dataTicket?.event_id,
-                    price_id: dataTicket?.selected_ticket?.list?.price_id || dataTicket?.selected_ticket?.price_id,
-                    ondate: dataTicket?.selected_ticket?.list?.ondate,
-                  }, 345).then((item: any) => {
-                    setResult(undefined)
-                    loadSeat(item)
-                  })
-                }} style={{ alignContent: 'center', alignItems: 'center', padding: 10, borderRadius: 5, backgroundColor: LibStyle.colorPrimary }}>
-                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: '#000' }}>{esp.lang("event/seat", "reselect")}</Text>
-                </TouchableOpacity>
-              </View>
-              :
-              <>
-                <View style={{ margin: 10, marginBottom: 0, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
-                  <View style={{ flex: 1 }}>
-                    {/* {
-                        Number(resultDataSize.seat_column) * Number(resultDataSize.seat_row) > 100 &&
-                        <TouchableOpacity onPress={() => {
-                          LibNavigation.navigateForResult('event/seat_map', {
-                            x: resultDataSize.seat_column,
-                            y: resultDataSize.seat_row,
-                            url: url,
-                            event_id: event_id,
-                            price_id: price_id,
-                            on_date: on_date,
-                          }, 345).then((item: any) => {
-                            setResult(undefined)
-                            loadSeat(item)
-                          })
-                        }} style={{ marginRight: 20, alignContent: 'center', alignItems: 'center', padding: 5, borderRadius: 5, backgroundColor: LibStyle.colorPrimary }}>
-                          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: '#000' }}>Pilih Ulang</Text>
-                        </TouchableOpacity>
-                      } */}
-                  </View>
-                  <View style={{ flex: 1, alignContent: 'center', alignItems: 'center' }}>
-                    <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }}>{dataTicket?.selected_ticket?.type}</Text>
-                  </View>
-                  {
-                    result?.image_map != "" ?
+              <View style={{ margin: 10, marginBottom: 0, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                <View style={{ flex: 1 }}>
+                  {/* {
+                      Number(resultDataSize.seat_column) * Number(resultDataSize.seat_row) > 100 &&
                       <TouchableOpacity onPress={() => {
-                        if (result?.image_map == "") {
-                          LibToastProperty.show(esp.lang("event/seat", "empty_image"))
-                        } else {
-                          LibDialog.custom(viewImageMap(result?.image_map))
-                        }
-                      }} style={{ flex: 1, justifyContent: 'flex-end', alignContent: 'flex-end', alignItems: 'flex-end' }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
-                        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("event/seat", "show_map")}</Text>
+                        LibNavigation.navigateForResult('event/seat_map', {
+                          x: resultDataSize.seat_column,
+                          y: resultDataSize.seat_row,
+                          url: url,
+                          event_id: event_id,
+                          price_id: price_id,
+                          on_date: on_date,
+                        }, 345).then((item: any) => {
+                          setResult(undefined)
+                          loadSeat(item)
+                        })
+                      }} style={{ marginRight: 20, alignContent: 'center', alignItems: 'center', padding: 5, borderRadius: 5, backgroundColor: LibStyle.colorPrimary }}>
+                        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: '#000' }}>Pilih Ulang</Text>
                       </TouchableOpacity>
-                      :
-                      <View style={{ flex: 1 }} />
-                  }
+                    } */}
                 </View>
-
-                <View style={{ margin: 30, marginTop: 10, marginBottom: 10, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, padding: 5, justifyContent: 'center', alignItems: 'center', alignContent: 'center', backgroundColor: LibStyle.colorGreen }}>
-                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#fff' }}>{esp.lang("event/seat", "front")}</Text>
+                <View style={{ flex: 1, alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#000' }}>{dataTicket?.selected_ticket?.type}</Text>
                 </View>
+                {
+                  result?.image_map != "" ?
+                    <TouchableOpacity onPress={() => {
+                      if (result?.image_map == "") {
+                        LibToastProperty.show(esp.lang("event/seat", "empty_image"))
+                      } else {
+                        LibDialog.custom(viewImageMap(result?.image_map))
+                      }
+                    }} style={{ flex: 1, justifyContent: 'flex-end', alignContent: 'flex-end', alignItems: 'flex-end' }} hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }}>
+                      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("event/seat", "show_map")}</Text>
+                    </TouchableOpacity>
+                    :
+                    <View style={{ flex: 1 }} />
+                }
+              </View>
+
+              <View style={{ margin: 30, marginTop: 10, marginBottom: 10, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, padding: 5, justifyContent: 'center', alignItems: 'center', alignContent: 'center', backgroundColor: LibStyle.colorGreen }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#fff' }}>{esp.lang("event/seat", "front")}</Text>
+              </View>
 
-                <View key={sizeBox} style={{ flex: 3, marginVertical: 10 }}>
-                  <View style={{ flex: 1, flexDirection: 'row', margin: 10, marginVertical: 0 }} >
+              <View key={sizeBox} style={{ flex: 3, marginVertical: 10 }}>
+                <View style={{ flex: 1, flexDirection: 'row', margin: 10, marginVertical: 0 }} >
+                  <Animated.ScrollView
+                    horizontal
+                    scrollEventThrottle={16}
+                    overScrollMode="never"
+                    showsHorizontalScrollIndicator={false}
+                    onContentSizeChange={(width, height) => {
+                      setCompleteScrollBarWidth(width)
+                    }}
+                    onLayout={(x) => {
+                      setVisibleScrollBarWidth(x.nativeEvent.layout.width)
+                    }}
+                    onScroll={scrollHandlerX}>
                     <Animated.ScrollView
-                      horizontal
                       scrollEventThrottle={16}
                       overScrollMode="never"
-                      showsHorizontalScrollIndicator={false}
+                      showsVerticalScrollIndicator={false}
                       onContentSizeChange={(width, height) => {
-                        setCompleteScrollBarWidth(width)
+                        setCompleteScrollBarHeight(height)
                       }}
                       onLayout={(x) => {
-                        setVisibleScrollBarWidth(x.nativeEvent.layout.width)
+                        setVisibleScrollBarHeight(x.nativeEvent.layout.height)
                       }}
-                      onScroll={scrollHandlerX}>
-                      <Animated.ScrollView
-                        scrollEventThrottle={16}
-                        overScrollMode="never"
-                        showsVerticalScrollIndicator={false}
-                        onContentSizeChange={(width, height) => {
-                          setCompleteScrollBarHeight(height)
-                        }}
-                        onLayout={(x) => {
-                          setVisibleScrollBarHeight(x.nativeEvent.layout.height)
-                        }}
-                        onScroll={scrollHandlerY}>
-                        <View>
-                          {result?.list?.map?.(renderRow)}
-                        </View>
-                      </Animated.ScrollView>
+                      onScroll={scrollHandlerY}>
+                      <View>
+                        {result?.list?.map?.(renderRow)}
+                      </View>
                     </Animated.ScrollView>
-                    <View style={{ width: 8, height: "100%", backgroundColor: "#c9c9c9", borderRadius: 4 }}>
-                      <Animated.View style={[{ width: 8, height: scrollIndicatorHeightSize, backgroundColor: LibStyle.colorPrimary, borderRadius: 4 }, styleY]} />
-                    </View>
-                  </View>
-                  <View style={{ width: LibStyle.width - 28, margin: 10, height: 8, backgroundColor: "#c9c9c9", borderRadius: 4 }}>
-                    <Animated.View style={[{ width: scrollIndicatorWidthSize, height: 8, backgroundColor: LibStyle.colorPrimary, borderRadius: 4 }, styleX]} />
+                  </Animated.ScrollView>
+                  <View style={{ width: 8, height: "100%", backgroundColor: "#c9c9c9", borderRadius: 4 }}>
+                    <Animated.View style={[{ width: 8, height: scrollIndicatorHeightSize, backgroundColor: LibStyle.colorPrimary, borderRadius: 4 }, styleY]} />
                   </View>
                 </View>
-                <View style={{ flexDirection: 'row', justifyContent: 'space-around' }} >
-                  <Pressable
-                    style={{ opacity: sizeBox == 10 ? 0.2 : 1, height: 60, borderRadius: 30, ...LibStyle.elevation(3), backgroundColor: 'white', width: 60, justifyContent: 'center', alignItems: 'center' }}
-                    onPress={() => setSizeBox(sizeBox >= 20 ? sizeBox - 10 : 10)} >
-                    <LibIcon.MaterialIcons name='zoom-out' size={24} />
-                  </Pressable>
-                  <Pressable
-                    style={{ opacity: sizeBox == 40 ? 0.2 : 1, height: 60, borderRadius: 30, ...LibStyle.elevation(3), backgroundColor: 'white', width: 60, justifyContent: 'center', alignItems: 'center' }}
-                    onPress={() => setSizeBox(sizeBox <= 30 ? sizeBox + 10 : 40)} >
-                    <LibIcon.MaterialIcons name='zoom-in' size={24} />
-                  </Pressable>
+                <View style={{ width: LibStyle.width - 28, margin: 10, height: 8, backgroundColor: "#c9c9c9", borderRadius: 4 }}>
+                  <Animated.View style={[{ width: scrollIndicatorWidthSize, height: 8, backgroundColor: LibStyle.colorPrimary, borderRadius: 4 }, styleX]} />
                 </View>
+              </View>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-around' }} >
+                <Pressable
+                  style={{ opacity: sizeBox == 10 ? 0.2 : 1, height: 60, borderRadius: 30, ...LibStyle.elevation(3), backgroundColor: 'white', width: 60, justifyContent: 'center', alignItems: 'center' }}
+                  onPress={() => setSizeBox(sizeBox >= 20 ? sizeBox - 10 : 10)} >
+                  <LibIcon.MaterialIcons name='zoom-out' size={24} />
+                </Pressable>
+                <Pressable
+                  style={{ opacity: sizeBox == 40 ? 0.2 : 1, height: 60, borderRadius: 30, ...LibStyle.elevation(3), backgroundColor: 'white', width: 60, justifyContent: 'center', alignItems: 'center' }}
+                  onPress={() => setSizeBox(sizeBox <= 30 ? sizeBox + 10 : 40)} >
+                  <LibIcon.MaterialIcons name='zoom-in' size={24} />
+                </Pressable>
+              </View>
 
-                <View style={{ flex: 0.1 }} />
-
-                <View style={{ paddingVertical: 10, paddingHorizontal: 10 }} >
-                  <View style={{ marginHorizontal: 0, margin: 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
-                    <Text allowFontScaling={false} style={{ marginLeft: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{esp.lang("event/seat", "select_seat_1", LibUtils.number(dataTicket?.qty - counter))}</Text>
-                    <View style={{ flexDirection: 'row' }}>
-                      {
-                        explanation.map((item, i) => {
-                          return (
-                            <View key={i} style={{ flexDirection: 'row', alignContent: 'center', justifyContent: 'center', alignItems: 'center', marginRight: 5 }}>
-                              <View key={i} style={{ height: 20, width: 20, borderRadius: 4, borderWidth: 1, borderColor: item.borderColor, backgroundColor: item.backgroundColor }} />
-                              <Text allowFontScaling={false} style={{ marginLeft: 5, fontFamily: "Arial", fontSize: 8, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{item.text}</Text>
-                            </View>
-                          )
-                        })
-                      }
-                    </View>
+              <View style={{ flex: 0.1 }} />
+
+              <View style={{ paddingVertical: 10, paddingHorizontal: 10 }} >
+                <View style={{ marginHorizontal: 0, margin: 10, marginBottom: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ marginLeft: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{esp.lang("event/seat", "select_seat_1", LibUtils.number(dataTicket?.qty - counter))}</Text>
+                  <View style={{ flexDirection: 'row' }}>
+                    {
+                      explanation.map((item, i) => {
+                        return (
+                          <View key={i} style={{ flexDirection: 'row', alignContent: 'center', justifyContent: 'center', alignItems: 'center', marginRight: 5 }}>
+                            <View key={i} style={{ height: 20, width: 20, borderRadius: 4, borderWidth: 1, borderColor: item.borderColor, backgroundColor: item.backgroundColor }} />
+                            <Text allowFontScaling={false} style={{ marginLeft: 5, fontFamily: "Arial", fontSize: 8, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#999' }}>{item.text}</Text>
+                          </View>
+                        )
+                      })
+                    }
                   </View>
-                  <EventButton label={esp.lang("event/seat", "next")} onPress={() => {
-                    next()
-                  }} style={{ backgroundColor: dataTicket?.qty != counter ? LibStyle.colorGrey : LibStyle.colorPrimary }} />
                 </View>
-              </>
-        }
-      </View>
-    )
-  }
-
-}
-const styleId_Z1ppFKw: any = { borderRadius: 4, alignContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', marginBottom: 5, padding: 10, flexDirection: 'row', justifyContent: 'space-between', flex: 1 }
-const styleId_ZE3xEb: any = { padding: 8, opacity: 1 }
+                <EventButton label={esp.lang("event/seat", "next")} onPress={() => {
+                  next()
+                }} style={{ backgroundColor: dataTicket?.qty != counter ? LibStyle.colorGrey : LibStyle.colorPrimary }} />
+              </View>
+            </>
+      }
+    </View>
+  )
+}

package/event/seat_map.tsx

@@ -386,16 +386,16 @@ function toBase26(num: number) {
 
 function getLegends() {
   const colors: any = [
-    ["#F1F1F1", esp.lang("event/seat_map", "available"), 0],
-    ["#8EF67B", esp.lang("event/seat_map", "chosen"), "-1"],
+    ["#fff", esp.lang("event/seat_map", "available"), 0],
+    // ["#8EF67B", esp.lang("event/seat_map", "chosen"), "-1"],
     ["#2EBBE8", esp.lang("event/seat_map", "reserved"), 3],
-    ["#6C432C", esp.lang("event/seat_map", "chosen_by"), 7],
-    ["#fff", esp.lang("event/seat_map", "way"), 5],
-    ["#9FA1A4", esp.lang("event/seat_map", "not_sold"), 1],
+    // ["#6C432C", esp.lang("event/seat_map", "chosen_by"), 7],
+    // ["#f1f2f3", esp.lang("event/seat_map", "way"), 5],
+    // ["#9FA1A4", esp.lang("event/seat_map", "not_sold"), 1],
     ["#6B71E6", esp.lang("event/seat_map", "seat_hold"), 2],
-    ["#FF4866", esp.lang("event/seat_map", "wall"), 6],
-    ["#FFA601", esp.lang("event/seat_map", "other_type"), 4],
-    ["purple", esp.lang("event/seat_map", "stage"), 8]
+    // ["#FF4866", esp.lang("event/seat_map", "wall"), 6],
+    // ["#FFA601", esp.lang("event/seat_map", "other_type"), 4],
+    // ["purple", esp.lang("event/seat_map", "stage"), 8]
   ]
   return colors
 }