esoftplay-event 0.0.1-d → 0.0.1

package/event/detail.tsx

@@ -113,6 +113,15 @@ export default function m(props: EventDetailProps): any {
   }
 
   const date = moment().localeFormat('YYYY-MM-DD HH:mm:ss')
+  const startBooking = result?.start_booking;
+  const startDate: any = new Date(startBooking);
+  const currentDate: any = new Date();
+
+  // Hitung selisih hari antara tanggal sekarang dan startBooking
+  const diffTime = startDate - currentDate;
+  const diffDays = diffTime / (1000 * 60 * 60 * 24);
+
+  esp.log(result);
 
   return (
     <View style={{ flex: 1, backgroundColor: '#fff' }} >
@@ -247,7 +256,7 @@ export default function m(props: EventDetailProps): any {
                       <View style={{ height: 35, borderRadius: 17, backgroundColor: LibStyle.colorLightGrey, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }} >
                         <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 12, textAlign: "center", textAlignVertical: 'center', color: 'black', marginHorizontal: 10 }} >
                           {
-                            esp.lang("event/detail", "text_book_on", moment(result.start_booking).serverFormat('DD MMMM YYYY H:mm:ss', result?.timezone), result?.timezone_locale || "")
+                            esp.lang("event/detail", "text_book_on", moment(result.start_booking).serverFormat('DD MMMM YYYY H:mm:ss'))
                           }
                         </Text>
                       </View>

package/event/order.tsx

@@ -128,9 +128,7 @@ export default function m(props: EventOrderProps): any {
   function renderItem(item: any) {
     return (
       <EventOrder_item item={item} onPress={() => {
-        esp.log(item);
-        // 7 pembayaran kadaluarsa
-        LibNavigation.navigate(status == "7" ? 'event/order_detail_waiting' : 'event/order_detail', { url: item.url })
+        LibNavigation.navigate('event/order_detail', { url: item.url })
       }} />
     )
   }

package/event/order_detail.tsx

@@ -133,7 +133,7 @@ export default function m(props: EventOrder_detailProps): any {
   function loadData(): void {
     new LibCurl(url + ((url.includes("?") ? "&" : "?") + 't=' + new Date().getTime()), null, (res: any) => {
       setResult(res)
-      esp.log(res);
+      // esp.log(res);
 
       new LibCurl(res?.url_coupon, null, (ress: any) => {
         setCoupons(ress)

package/event/order_detail_waiting.tsx

@@ -63,13 +63,10 @@ export default function m(props: EventOrder_waitingProps): any {
   function loadData() {
     EventOrderProperty.subscribe().trigger()
     new LibCurl(url + ((url.includes("?") ? "&" : "?") + 't=' + new Date().getTime()), null, (res) => {
-      esp.log(res);
+      // esp.log(res);
       setResult(res)
-      if (res?.status != 0) {
-        LibAutoreload.clear()
-      }
-
       if (res?.status == 1) {
+        // LibAutoreload.clear()
         LibNavigation.backToRoot()
         LibNavigation.navigate('user/profile')
         LibNavigation.navigate('event/order')
@@ -384,7 +381,7 @@ export default function m(props: EventOrder_waitingProps): any {
           }
 
           {
-            result?.status == 0 && result?.payment?.payment_type != 3 && result?.payment?.payment_type != 4 && result?.payment?.payment_type != 11 && result?.payment?.payment_type != 13 && result?.payment?.payment_type != 14 &&
+            result?.payment?.payment_type != 3 && result?.payment?.payment_type != 4 && result?.payment?.payment_type != 11 && result?.payment?.payment_type != 13 && result?.payment?.payment_type != 14 &&
             <>
               <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />
 
@@ -428,24 +425,18 @@ export default function m(props: EventOrder_waitingProps): any {
             result?.payment?.payment_type == 13 &&
             <>
               <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />
+
               <TouchableOpacity
                 onPress={() => {
-                  if (result?.params?.url_mobile != null) {
-                    Linking.openURL(result?.params?.url_mobile)
-                  } else if (result?.params?.url_web != null) {
-                    Linking.openURL(result?.params?.url_web)
-                  }
+                  Linking.openURL(result?.params?.url_mobile)
                 }}
                 style={{ marginTop: 15, borderRadius: 10, borderWidth: 2, overflow: 'hidden', borderColor: "#f6f6f6" }}>
                 <View style={{ padding: 15, backgroundColor: '#000', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
                   <Text allowFontScaling={false} style={{ flex: 1, alignContent: 'center', alignItems: 'center', fontWeight: 'bold', fontSize: 16, fontStyle: "normal", letterSpacing: 0, color: "#fff" }}>{esp.lang("event/order_detail_waiting", "scan_or_tap")}</Text>
                 </View>
-                {
-                  result?.params?.qr != null &&
-                  <View style={{ margin: 15, alignSelf: 'center' }}>
-                    <QRCode ecl="H" size={250} value={result?.params?.qr} />
-                  </View>
-                }
+                <View style={{ margin: 15, alignSelf: 'center' }}>
+                  <QRCode ecl="H" size={250} value={result?.params?.qr} />
+                </View>
 
               </TouchableOpacity>
 
@@ -453,10 +444,7 @@ export default function m(props: EventOrder_waitingProps): any {
           }
 
           <View style={{ height: 3, backgroundColor: "#f6f6f6" }} />
-          {
-            result?.status == 0 &&
-            <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 14 }}>{esp.lang("event/order_detail", "Checked_within_10_minutes_after_payment_is_made")}</Text>
-          }
+          <Text allowFontScaling={false} style={{ fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b", marginTop: 14 }}>{esp.lang("event/order_detail", "Checked_within_10_minutes_after_payment_is_made")}</Text>
           {
             result?.payment?.description != null &&
             <TouchableOpacity onPress={() => {

package/event/test.tsx

@@ -1,240 +1,155 @@
-// withHooks
-import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
-import { EventButton } from 'esoftplay/cache/event/button/import';
-import { EventHeader } from 'esoftplay/cache/event/header/import';
-import { LibCurl } from 'esoftplay/cache/lib/curl/import';
-import { LibIcon } from 'esoftplay/cache/lib/icon/import';
-import { LibStyle } from 'esoftplay/cache/lib/style/import';
-import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
-import { UseMap } from 'esoftplay/cache/use/map/import';
-import esp from 'esoftplay/esp';
-import useLazyState from 'esoftplay/lazy';
-import useSafeState from 'esoftplay/state';
-import React, { useCallback, useEffect, useState } from 'react';
-import { Dimensions, Pressable, ScrollView, View } from 'react-native';
-import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-
-
-export interface EventSeat_map_matrixArgs {
-
-}
-export interface EventSeat_map_matrixProps {
-
-}
-export default function m(props: any): any {
-  const deviceWidth = Dimensions.get('window').width;
-  const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
-  const [scale, setScale] = useState(1);
-  const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
-  const [data, setData, getData] = useSafeState<[number, number, string, number][]>([])
-  const initialBoxSize = 30;
-  const contentWidth = (boundingBox.x2 - (boundingBox.x1 - 1.1)) * initialBoxSize
-  const [stage, setStage] = useLazyState('')
-
-  // Scale boxSize so that contentWidth fits deviceWidth
-  const scaleToFit = deviceWidth / contentWidth;
-  const boxSize = initialBoxSize * scaleToFit;
-
-  // Recalculate xs, ys, width, height with scaled boxSize
-  const xsScaled = data.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
-  const ysScaled = data.map(([_, y]) => isNaN(y) ? 0 : (boxSize) + (y * boxSize));
-
-  const width = Math.max(deviceWidth, xsScaled.length && xsScaled.every(v => !isNaN(v)) ? Math.max(...xsScaled) + boxSize : boxSize * 2);
-  const height = ysScaled.length && ysScaled.every(v => !isNaN(v)) ? Math.max(...ysScaled) + boxSize : boxSize * 2;
-
-  const size: any = {
-    1: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.3),
-    2: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.3),
-    3: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.25),
-    4: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.2),
-    5: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.2),
-    6: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.15),
-  }
-  const handleTap = useCallback((event: TapGestureHandlerStateChangeEvent) => {
-    if (event.nativeEvent.state !== 5) return;
-    // Adjust tap coordinates for scale
-    const x = event.nativeEvent.x / scale;
-    const y = event.nativeEvent.y / scale;
-    for (let i = 0; i < data.length; i++) {
-      const [sx, sy, seatName, status] = data[i];
-      const xSize = (boxSize / 2) + (sx * boxSize);
-      const ySize = (boxSize / 2) + (sy * boxSize);
-
-      if (x >= xSize && x <= xSize + boxSize && y >= ySize && y <= ySize + boxSize) {
-        if (status == 0) {
-          setSelectedIdx(i);
-        } /* else {
-          setSelectedIdx(null);
-        } */
-        return;
-      }
-
-    }
-  }, [data, boxSize, scale]);
-
-  useEffect(() => {
-    new LibCurl("v3/event_seat", {
-      event_id: 398,
-      price_id: 1922,
-      ondate: "0000-00-00"
-    }, (res, msg) => {
-      setBoundingBox(res.metadata.bounding_box)
-      setData(res.layout.split(';').map((item: any) => item.split(',')).map(([x, y, seatName, status]: any) => [Number(x), Number(y), seatName, Number(status)]))
-    })
-
-    loadDataSeatmapBooked()
-
-  }, [])
-
-  function updateIndexByRes(data: any, res: any) {
-    const resArr = res.split(",").map((item: any) => item.trim()); // biar aman dari spasi
-    return data.map((row: any) => {
-      if (resArr.includes(row[2])) {
-        return [row[0], row[1], row[2], 3];
-      }
-      return row;
-    });
-  }
-
-  function loadDataSeatmapBooked() {
-    new LibCurl("v3/event_seat_booked", {
-      event_id: 398,
-      price_id: 1922,
-      ondate: "0000-00-00"
-    }, (res, msg) => {
-      let updated = updateIndexByRes(getData(), res)
-      setData(updated)
-      // esp.log({ updated, res });
-    }, (err) => {
-      esp.log({ err });
-    })
-
-  }
-
-  return (
-    <View key={scale} style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }} >
-      <EventHeader title={esp.lang("event/seat_map", "header_title")} />
-      <View style={{ flex: 1 }}>
-        <View style={{ marginBottom: 5, }}>
-          <ScrollView style={{ padding: 10, paddingLeft: 0, }} horizontal>
-            <UseMap
-              data={getLegends()}
-              renderItem={(item) => (
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15, marginRight: 5 }} >
-                  <View style={{ height: 20, width: 20, borderRadius: 2, borderWidth: 0.5, backgroundColor: item[0], marginRight: 8 }} />
-                  <LibTextstyle textStyle='caption1' text={item[1]} />
-                </View>
-              )}
-            />
-          </ScrollView>
-        </View>
-        <View style={{ height: 40, marginLeft: 20, marginRight: 20, backgroundColor: LibStyle.colorPrimary, marginBottom: 10, borderRadius: 2, justifyContent: 'center', alignItems: 'center' }} >
-          <LibTextstyle textStyle='body' style={{ color: 'white', fontWeight: 'bold' }} >{stage || esp.lang("event/seat_map", "front")}</LibTextstyle>
-        </View>
-
-        <ScrollView horizontal >
-          <ScrollView >
-            <TapGestureHandler onHandlerStateChange={handleTap}>
-              <View>
-                <Canvas
-                  style={{
-                    width: width * scale,
-                    height: height * scale,
-                    padding: 10,
-                    backgroundColor: LibStyle.colorBgGrey,
-                    
-                  }}>
-                  {
-                    data.map(([x, y, name, status], i) => {
-                      const color = selectedIdx == i ? "#8EF67B" : getColorByStatus(status)
-                      const xSize = (boxSize / 2) + (x * boxSize)
-                      const ySize = (boxSize / 2) + (y * boxSize)
-                      return (
-                        <Group key={i}>
-                          <RoundedRect
-                            x={xSize - 1}
-                            r={(boxSize + 2) * 0.1}
-                            y={ySize - 1}
-                            width={boxSize + 2}
-                            transform={[{ scale }]}
-                            height={boxSize + 2}
-                            color={"#999"} />
-                          <RoundedRect
-                            x={xSize}
-                            r={boxSize * 0.1}
-                            y={ySize}
-                            width={boxSize}
-                            transform={[{ scale }]}
-                            height={boxSize}
-                            color={color} />
-                          {name && size[name.length] && (
-                            <Text
-                              x={(xSize) + boxSize * (5 - name.length) * 0.1}
-                              y={(ySize) + boxSize * 0.60}
-                              color={"#020202"}
-                              text={name}
-                              transform={[{ scale }]}
-                              font={size[name.length]} />
-                          )}
-                        </Group>
-                      )
-                    })
-                  }
-                </Canvas>
-              </View>
-            </TapGestureHandler>
-          </ScrollView>
-        </ScrollView>
-        <View style={{ flexDirection: 'row', marginHorizontal: 12, height: 40, borderColor: '#060606', borderWidth: 1, borderRadius: 5, alignItems: 'center' }} >
-          <Pressable onPress={() => setScale((x) => x - 0.3)} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon.SimpleLineIcons name='magnifier-remove' />
-          </Pressable>
-          <Pressable onPress={() => setScale((x) => x + 0.3)} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon.SimpleLineIcons name='magnifier-add' />
-          </Pressable>
-          <View style={{ height: 40, width: 1, backgroundColor: '#060606', marginRight: 12 }} />
-          {/* <Text style={{}} >{esp.lang("event/seat_map", "selected", String(data.filter((x) => x == -1).length), qty)}</Text> */}
-          <LibTextstyle textStyle='callout'>{"Kursi terpilih"}</LibTextstyle>
-        </View>
-        <EventButton
-          backgroundColor={LibStyle.colorPrimary}
-          testID={"save_btn"}
-          style={{ margin: 7 }}
-          label={esp.lang("event/seat_map", "save")}
-          onPress={() => { }}
-        />
-      </View>
-    </View>
-  )
-}
-
-function getLegends() {
-  const colors: any = [
-    ["#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],
-    ["#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]
-  ]
-  return colors
-}
-
-function getColorByStatus(statuses: number) {
-  const colors: any = {
-    8: 'purple',
-    0: '#fff',
-    1: "#9FA1A4",
-    2: "#6B71E6",
-    3: "#2EBBE8",
-    4: "#FFA601",
-    5: "#fff",
-    6: "#FF4866",
-    7: "#6C432C"
-  }
-  return colors[statuses]
-}
+// // withHooks
+// import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
+// import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+// import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+// import useSafeState from 'esoftplay/state';
+// import React, { useCallback, useEffect, useState } from 'react';
+// import { Dimensions, Pressable, ScrollView, View } from 'react-native';
+// import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+
+
+// export interface EventSeat_map_matrixArgs {
+
+// }
+// export interface EventSeat_map_matrixProps {
+
+// }
+// export default function m(props: any): any {
+//   const deviceWidth = Dimensions.get('window').width;
+//   const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+//   const [scale, setScale] = useState(1);
+//   const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
+//   const [data, setData] = useSafeState<[number, number, string, number][]>([])
+//   const initialBoxSize = 30;
+//   const contentWidth = (boundingBox.x2 - (boundingBox.x1 - 1.1)) * initialBoxSize
+
+//   // Scale boxSize so that contentWidth fits deviceWidth
+//   const scaleToFit = deviceWidth / contentWidth;
+//   const boxSize = initialBoxSize * scaleToFit;
+
+//   // Recalculate xs, ys, width, height with scaled boxSize
+//   const xsScaled = data.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
+//   const ysScaled = data.map(([_, y]) => isNaN(y) ? 0 : (boxSize) + (y * boxSize));
+
+//   const width = Math.max(deviceWidth, xsScaled.length && xsScaled.every(v => !isNaN(v)) ? Math.max(...xsScaled) + boxSize : boxSize * 2);
+//   const height = ysScaled.length && ysScaled.every(v => !isNaN(v)) ? Math.max(...ysScaled) + boxSize : boxSize * 2;
+
+//   const fontSize: any = {
+//     1: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.3),
+//     2: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.3),
+//     3: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.25),
+//     4: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.2),
+//     5: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.2),
+//     6: useFont(require('../../assets/fonts/MonoSpace.ttf'), boxSize * 0.15),
+//   }
+//   const handleTap = useCallback((event: TapGestureHandlerStateChangeEvent) => {
+//     if (event.nativeEvent.state !== 5) return;
+//     // Adjust tap coordinates for scale
+//     const x = event.nativeEvent.x / scale;
+//     const y = event.nativeEvent.y / scale;
+//     for (let i = 0; i < data.length; i++) {
+//       const [sx, sy, seatName] = data[i];
+//       const xSize = (boxSize / 2) + (sx * boxSize);
+//       const ySize = (boxSize / 2) + (sy * boxSize);
+//       if (x >= xSize && x <= xSize + boxSize && y >= ySize && y <= ySize + boxSize) {
+//         setSelectedIdx(i);
+//         return;
+//       }
+//     }
+//     setSelectedIdx(null);
+//   }, [data, boxSize, scale]);
+
+
+//   useEffect(() => {
+//     new LibCurl("v3/event_seat", {
+//       event_id: 398,
+//       price_id: 1922,
+//       ondate: "0000-00-00"
+//     }, (res, msg) => {
+//       setBoundingBox(res.metadata.bounding_box)
+//       console.log(JSON.stringify(res, undefined, 2))
+//       setData(res.layout.split(';').map((item) => item.split(',')).map(([x, y, seatName, status]) => [Number(x), Number(y), seatName, Number(status)]))
+//     })
+//   }, [])
+
+//   return (
+//     <View key={scale} style={{ flex: 1 }} >
+//       <ScrollView horizontal style={{ flex: 1 }}>
+//         <ScrollView style={{ flex: 1 }}>
+//           <TapGestureHandler onHandlerStateChange={handleTap}>
+//             <View>
+//               <Canvas
+//                 style={{
+//                   width: width * scale,
+//                   height: height * scale,
+//                   padding: 10,
+//                   backgroundColor: "#f1f2f3",
+//                 }}>
+//                 {
+//                   data.map(([x, y, name, status], i) => {
+//                     const color = selectedIdx == i ? "lime" : getColorByStatus(status)
+//                     const xSize = (boxSize / 2) + (x * boxSize)
+//                     const ySize = (boxSize / 2) + (y * boxSize)
+//                     return (
+//                       <Group key={i}>
+//                         <RoundedRect
+//                           x={xSize - 1}
+//                           r={(boxSize + 2) * 0.34}
+//                           y={ySize - 1}
+//                           width={boxSize + 2}
+//                           transform={[{ scale }]}
+//                           height={boxSize + 2}
+//                           color={"#999"} />
+//                         <RoundedRect
+//                           x={xSize}
+//                           r={boxSize * 0.32}
+//                           y={ySize}
+//                           width={boxSize}
+//                           transform={[{ scale }]}
+//                           height={boxSize}
+//                           color={color} />
+//                         {name && fontSize[name.length] && (
+//                           <Text
+//                             x={(xSize) + boxSize * (5 - name.length) * 0.1}
+//                             y={(ySize) + boxSize * 0.60}
+//                             color="#020202"
+//                             text={name}
+//                             transform={[{ scale }]}
+//                             font={fontSize[name.length]} />
+//                         )}
+//                       </Group>
+//                     )
+//                   })
+//                 }
+//               </Canvas>
+//             </View>
+//           </TapGestureHandler>
+//         </ScrollView>
+//       </ScrollView>
+//       <View style={{ flexDirection: "row" }} >
+//         <Pressable onPress={() => setScale((x) => x - 0.3)} >
+//           <LibIcon.AntDesign name='minuscircleo' />
+//         </Pressable>
+//         <Pressable onPress={() => setScale((x) => x + 0.3)} >
+//           <LibIcon.AntDesign name='pluscircleo' />
+//         </Pressable>
+//       </View>
+//     </View>
+//   )
+// }
+
+
+// function getColorByStatus(statuses: number) {
+//   const colors: any = {
+//     8: 'purple',
+//     0: "white",
+//     1: "#9FA1A4",
+//     2: "#6B71E6",
+//     3: "#2EBBE8",
+//     4: "#FFA601",
+//     5: "#fff",
+//     6: "#FF4866",
+//     7: "#6C432C"
+//   }
+//   return colors[statuses]
+// }

package/event/ticket_list.tsx

@@ -303,17 +303,14 @@ export default function m(props: EventTicket_listProps): any {
       if (selectedTicket?.config && selectedTicket?.config?.seat_autopick == 1) {
         checkAddition(dataPost)
       } else {
-        LibNavigation.navigateForResult(esp.isDebug("") ? 'event/seat_map_new' : 'event/seat_map', {
+        LibNavigation.navigateForResult('event/seat_map', {
           url: 'event_seat',
           dataTicket: dataPost,
         }).then((value) => {
-          if (esp.isDebug("")) {
-            dataPost.seat_label = value.seat_label
-          } else {
-            dataPost.row_id = value.row_id
-            dataPost.column_id = value.column_id
-            dataPost.seat_name = value.seat_name
-          }
+          dataPost.row_id = value.row_id
+          dataPost.column_id = value.column_id
+          dataPost.seat_name = value.seat_name
+
           checkAddition(dataPost)
         })
       }

package/event/ticket_list2.tsx

@@ -160,7 +160,7 @@ export default function m(props: EventTicket_list2Props): any {
   const [ticketSeat, resetTicketSeat] = taskSeat((item: any) => new Promise((next) => {
     if (item.use_seat == 1) {
       if (item.adjacent_seats == 0) {
-        LibNavigation.navigateForResult(esp.isDebug("") ? 'event/seat_map_new' : 'event/seat_map', {
+        LibNavigation.navigateForResult('event/seat_map', {
           url: 'event_seat',
           dataTicket: {
             ...dataEvent,

package/id.json

@@ -533,7 +533,7 @@
     "start_from": "mulai dari %s",
     "tb_announce": "To Be Announced",
     "text_about_event": "Tentang Acara",
-    "text_book_on": "Booking On %s %s",
+    "text_book_on": "Booking On %s",
     "text_booking_end": "Booking Tiket Telah Berakhir",
     "text_buy_ticket": "Beli Tiket",
     "text_event_cat": "Kategori Event",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay-event",
-  "version": "0.0.1-d",
+  "version": "0.0.1",
   "description": "event module on esoftplay framework",
   "main": "index.js",
   "scripts": {

package/event/seat_map_new.tsx

@@ -1,313 +0,0 @@
-// withHooks
-import { Canvas, Group, RoundedRect, Text, useFont } from '@shopify/react-native-skia';
-import { EventButton } from 'esoftplay/cache/event/button/import';
-import { EventHeader } from 'esoftplay/cache/event/header/import';
-import { EventMessage } from 'esoftplay/cache/event/message/import';
-import { LibCurl } from 'esoftplay/cache/lib/curl/import';
-import { LibIcon } from 'esoftplay/cache/lib/icon/import';
-import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
-import { LibStyle } from 'esoftplay/cache/lib/style/import';
-import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
-import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
-import { UseMap } from 'esoftplay/cache/use/map/import';
-import esp from 'esoftplay/esp';
-import useSafeState from 'esoftplay/state';
-import React, { useCallback, useEffect, useState } from 'react';
-import { Dimensions, Pressable, ScrollView, View } from 'react-native';
-import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
-
-
-export interface EventSeat_map_newArgs {
-
-}
-export interface EventSeat_map_newProps {
-
-}
-export default function m(props: any): any {
-  const { dataTicket, url } = LibNavigation.getArgsAll<any>(props)
-  const qty = dataTicket?.qty
-
-  const deviceWidth = Dimensions.get('window').width;
-  const [scale, setScale] = useState(1);
-  const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
-  const [data, setData, getData] = useSafeState<[number, number, string, number][]>([])
-  const initialBoxSize = 30;
-  const contentWidth = (boundingBox.x2 - (boundingBox.x1 - 1.1)) * initialBoxSize
-  const [, setSelectedSeat, getSelectedSeat] = useSafeState<any>([])
-  const [errBookedSeat, setErrBookedSeat] = useSafeState()
-
-  // Scale boxSize so that contentWidth fits deviceWidth
-  const scaleToFit = deviceWidth / contentWidth;
-  const boxSize = initialBoxSize * scaleToFit;
-
-  // Recalculate xs, ys, width, height with scaled boxSize
-  const xsScaled = getData()?.map(([x]) => isNaN(x) ? 0 : (boxSize) + (x * boxSize));
-  const ysScaled = getData()?.map(([_, y]) => isNaN(y) ? 0 : (boxSize) + (y * boxSize));
-
-  const width = Math.max(deviceWidth, xsScaled.length && xsScaled.every(v => !isNaN(v)) ? Math.max(...xsScaled) + boxSize : boxSize * 2);
-  const height = ysScaled.length && ysScaled.every(v => !isNaN(v)) ? Math.max(...ysScaled) + boxSize : boxSize * 2;
-
-
-  // Preload all possible fonts at top level (to avoid render hook errors)
-  const fontSizes = [boxSize * 0.35, boxSize * 0.30, boxSize * 0.27, boxSize * 0.25, boxSize * 0.20];
-  const fonts = fontSizes.map(size => useFont(esp.assets('fonts/MonoSpace.ttf'), size));
-
-  const getFontByLength = (length: number) => {
-    if (length <= 2) return fonts[0];
-    if (length == 3) return fonts[1];
-    if (length == 4) return fonts[2];
-    if (length == 5) return fonts[3];
-    return fonts[4];
-  };
-
-  const getFontSizeByLength = (length: number) => {
-    if (length <= 2) return fontSizes[0];
-    if (length == 3) return fontSizes[1];
-    if (length == 4) return fontSizes[2];
-    if (length == 5) return fontSizes[3];
-    return fontSizes[4];
-  };
-
-
-  // const size: any = {
-  //   1: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.3),
-  //   2: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.3),
-  //   3: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.25),
-  //   4: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.27),
-  //   5: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.25),
-  //   6: useFont(esp.assets('fonts/MonoSpace.ttf'), boxSize * 0.15),
-  // }
-
-  const handleTap = useCallback((event: TapGestureHandlerStateChangeEvent) => {
-    if (event.nativeEvent.state !== 5) return;
-    // Adjust tap coordinates for scale
-    const x = event.nativeEvent.x / scale;
-    const y = event.nativeEvent.y / scale;
-    for (let i = 0; i < getData()?.length; i++) {
-      const [sx, sy, seatName, status] = getData()?.[i];
-      const xSize = (boxSize / 2) + (sx * boxSize);
-      const ySize = (boxSize / 2) + (sy * boxSize);
-
-      if (x >= xSize && x <= xSize + boxSize && y >= ySize && y <= ySize + boxSize) {
-        if (status == 0) {
-          setSelectedSeat((prev: any) => {
-            if (!prev?.includes(seatName)) {
-              if (prev?.length < qty) {
-                return [...prev, seatName];
-              }
-              LibToastProperty.show(esp.lang("event/seat_map", "max_seat", qty))
-              return prev;
-            }
-            return prev.filter((s: string) => s != seatName);
-          });
-        }
-        return;
-      }
-
-    }
-  }, [data, boxSize, scale]);
-
-  useEffect(() => {
-    loadDataSeatmapBooked()
-    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
-  }, [])
-
-  function updateIndexByRes(data: any, res: any) {
-    const resArr = res.split(",").map((item: any) => item.trim()); // biar aman dari spasi
-    return data.map((row: any) => {
-      if (resArr.includes(row[2])) {
-        return [row[0], row[1], row[2], 3];
-      }
-      return row;
-    });
-  }
-
-  function loadDataSeatmap(seatBooked: any) {
-    new LibCurl("v3/event_seat", {
-      event_id: dataTicket?.event_id,
-      price_id: dataTicket?.selected_ticket?.price_id,
-      ondate: dataTicket?.selected_ticket?.list?.ondate
-    }, (res, msg) => {
-      // esp.log(res);
-      setBoundingBox(res.metadata.bounding_box)
-      let x = res.layout.split(';').map((item: any) => item.split(',')).map(([x, y, seatName, status]: any) => [Number(x), Number(y), seatName, Number(status)])
-      let updated = updateIndexByRes(x, seatBooked)
-      setData(updated)
-    })
-  }
-
-  function loadDataSeatmapBooked() {
-    new LibCurl("v3/event_seat_booked", {
-      event_id: dataTicket?.event_id,
-      price_id: dataTicket?.selected_ticket?.price_id,
-      ondate: dataTicket?.selected_ticket?.list?.ondate
-    }, (res, msg) => {
-      loadDataSeatmap(res)
-      setErrBookedSeat(undefined)
-    }, (err) => {
-      setErrBookedSeat(err?.message)
-    })
-  }
-
-  if (errBookedSeat) {
-    return (
-      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
-        <EventHeader title={esp.lang("event/seat_map", "header_title")} />
-        <View style={{ flex: 1 }}>
-          <EventMessage
-            message={errBookedSeat}
-            children={
-              <EventButton
-                label='Coba lagi'
-                style={{ marginHorizontal: 15 }}
-                onPress={() => {
-                  loadDataSeatmapBooked()
-                }}
-              />
-            }
-          />
-        </View>
-      </View>
-    )
-  }
-
-  return (
-    <View key={scale} style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }} >
-      <EventHeader title={esp.lang("event/seat_map", "header_title")} />
-      <View style={{ flex: 1 }}>
-        <View style={{ marginBottom: 5, }}>
-          <ScrollView style={{ padding: 10, paddingLeft: 0, }} horizontal>
-            <UseMap
-              data={getLegends()}
-              renderItem={(item) => (
-                <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15, marginRight: 5 }} >
-                  <View style={{ height: 20, width: 20, borderRadius: 2, borderWidth: 0.5, backgroundColor: item[0], marginRight: 8 }} />
-                  <LibTextstyle textStyle='caption1' text={item[1]} />
-                </View>
-              )}
-            />
-          </ScrollView>
-        </View>
-        <ScrollView horizontal >
-          <ScrollView >
-            <TapGestureHandler onHandlerStateChange={handleTap}>
-              <View>
-                <Canvas
-                  style={{
-                    width: width * scale,
-                    height: height * scale,
-                    padding: 10,
-                    backgroundColor: LibStyle.colorBgGrey,
-
-                  }}>
-                  {
-                    getData()?.map(([x, y, name, status], i) => {
-                      const isSelected = getSelectedSeat()?.includes(name)
-                      const color = isSelected ? "#8EF67B" : getColorByStatus(status)
-                      const xSize = (boxSize / 2) + (x * boxSize)
-                      const ySize = (boxSize / 2) + (y * boxSize)
-
-                      const fontSize = getFontSizeByLength(name?.length);
-                      const font = getFontByLength(name?.length);
-
-                      const textWidthApprox = fontSize * name?.length * 0.6;
-                      const textX = xSize + (boxSize - textWidthApprox) / 2;
-
-                      return (
-                        <Group key={i}>
-                          <RoundedRect
-                            x={xSize - 1}
-                            r={(boxSize + 2) * 0.1}
-                            y={ySize - 1}
-                            width={boxSize + 2}
-                            transform={[{ scale }]}
-                            height={boxSize + 2}
-                            color={"#999"} />
-                          <RoundedRect
-                            x={xSize}
-                            r={boxSize * 0.1}
-                            y={ySize}
-                            width={boxSize}
-                            transform={[{ scale }]}
-                            height={boxSize}
-                            color={color} />
-                          {name && font && (
-                            <Text
-                              x={textX}
-                              y={(ySize) + boxSize * 0.60}
-                              color={"#020202"}
-                              text={name}
-                              transform={[{ scale }]}
-                              font={font} />
-                          )}
-                        </Group>
-                      )
-                    })
-                  }
-                </Canvas>
-              </View>
-            </TapGestureHandler>
-          </ScrollView>
-        </ScrollView>
-        <View style={{ flexDirection: 'row', marginHorizontal: 12, height: 40, borderColor: '#060606', borderWidth: 1, borderRadius: 5, alignItems: 'center' }} >
-          <Pressable onPress={() => setScale((x) => x - 0.3)} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon.SimpleLineIcons name='magnifier-remove' />
-          </Pressable>
-          <Pressable onPress={() => setScale((x) => x + 0.3)} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
-            <LibIcon.SimpleLineIcons name='magnifier-add' />
-          </Pressable>
-          <View style={{ height: 40, width: 1, backgroundColor: '#060606', marginRight: 12 }} />
-          {/* <Text style={{}} >{esp.lang("event/seat_map", "selected", String(data.filter((x) => x == -1).length), qty)}</Text> */}
-          <LibTextstyle textStyle='callout'>{esp.lang("event/seat_map", "selected", String(getSelectedSeat().length), qty)}</LibTextstyle>
-        </View>
-        <EventButton
-          backgroundColor={getSelectedSeat()?.length < qty ? "#999" : LibStyle.colorPrimary}
-          testID={"save_btn"}
-          style={{ margin: 7 }}
-          label={esp.lang("event/seat_map", "save")}
-          onPress={() => {
-            let value = {
-              seat_label: getSelectedSeat()
-            }
-            if (getSelectedSeat()?.length < qty) {
-              LibToastProperty.show(esp.lang("event/seat_map", "seat_more", (qty - (getSelectedSeat()?.length)).toString()))
-            } else {
-              LibNavigation.sendBackResult(value, LibNavigation.getResultKey(props))
-            }
-          }}
-        />
-      </View>
-    </View>
-  )
-}
-
-function getLegends() {
-  const colors: any = [
-    ["#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],
-    ["#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]
-  ]
-  return colors
-}
-
-function getColorByStatus(statuses: number) {
-  const colors: any = {
-    8: 'purple',
-    0: '#fff',
-    1: "#9FA1A4",
-    2: "#6B71E6",
-    3: "#2EBBE8",
-    4: "#FFA601",
-    5: "#fff",
-    6: "#FF4866",
-    7: "#6C432C"
-  }
-  return colors[statuses]
-}