esoftplay-event 0.0.0-y → 0.0.1-a

package/event/detail.tsx

@@ -24,6 +24,41 @@ import React, { useEffect } from 'react';
 import { Linking, Pressable, Text, TouchableOpacity, View } from 'react-native';
 import MapView, { Marker } from 'react-native-maps';
 
+function timezoneCorrection(input: string | Date, timezone: string): string {
+  const tzMap: Record<string, string> = {
+    'GMT+7': 'Asia/Jakarta',
+    'GMT+8': 'Asia/Singapore',
+    'GMT+9': 'Asia/Tokyo'
+  };
+
+  const tzString = tzMap[timezone] || 'Asia/Jakarta';
+
+  let date: Date;
+  if (typeof input === 'string') {
+    const iso = input.replace(' ', 'T') + '+07:00';
+    date = new Date(iso);
+  } else {
+    date = input;
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    timeZone: tzString,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  };
+
+  const formatted = date.toLocaleString('en-GB', options)
+  const [datePart, timePart] = formatted.split(', ')
+  const [day, month, year] = datePart.split('/')
+
+  return `${year}-${month}-${day} ${timePart}`
+}
+
 export interface EventDetailProps {
 
 }
@@ -256,7 +291,11 @@ 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'))
+                            esp.lang("event/detail", "text_book_on",
+                              !!result?.timezone ?
+                                moment(timezoneCorrection(result.start_booking, result?.timezone)).format('DD MMMM YYYY H:mm:ss', true)
+                                : moment(result.start_booking).serverFormat('DD MMMM YYYY H:mm:ss')
+                              , result?.timezone_locale || "")
                           }
                         </Text>
                       </View>
@@ -294,7 +333,8 @@ export default function m(props: EventDetailProps): any {
                               is_subscribed: result?.config?.is_subscribed,
                               is_subscribed_default: result?.config?.is_subscribed_default,
                               is_subscribed_label: result?.config?.is_subscribed_label
-                            }
+                            },
+                            show_fee_percentage: result?.config?.show_fee_percentage
                           })
                         })
                       } else {
@@ -310,7 +350,8 @@ export default function m(props: EventDetailProps): any {
                             is_subscribed: result?.config?.is_subscribed,
                             is_subscribed_default: result?.config?.is_subscribed_default,
                             is_subscribed_label: result?.config?.is_subscribed_label
-                          }
+                          },
+                          show_fee_percentage: result?.config?.show_fee_percentage
                         })
                       }
 

package/event/test.tsx

@@ -1,155 +1,155 @@
-// 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';
+// // 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_matrixArgs {
 
-}
-export interface EventSeat_map_matrixProps {
+// }
+// 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
+// }
+// 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;
+//   // 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));
+//   // 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 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]);
+//   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)]))
-    })
-  }, [])
+//   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>
-  )
-}
+//   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]
-}
+// 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

@@ -134,7 +134,7 @@ export default function m(props: EventTicket_listProps): any {
 
   const [pendingData] = EventLoading_pageProperty.state().useState()
 
-  const { url, fee_platform, has_addition, has_addition_global, subscribed }: any = useRef(LibNavigation.getArgsAll(props)).current
+  const { url, fee_platform, has_addition, has_addition_global, subscribed, show_fee_percentage }: any = useRef(LibNavigation.getArgsAll(props)).current
 
   const [deeplinkParams] = UseDeeplinkProperty.params.useState()
   const [timer] = EventCountdownProperty.countdownTime.useState()
@@ -270,6 +270,7 @@ export default function m(props: EventTicket_listProps): any {
           dataBookingEvent: { ...newDataPost, qty: getQty() },
           subscribed: subscribed,
           url_payment: urlPayment,
+          show_fee_percentage
         })
       })
     } else {
@@ -280,6 +281,7 @@ export default function m(props: EventTicket_listProps): any {
         dataBookingEvent: { ...newDataPost, qty: getQty() },
         subscribed: subscribed,
         url_payment: urlPayment,
+        show_fee_percentage
       })
     }
   }
@@ -294,7 +296,8 @@ export default function m(props: EventTicket_listProps): any {
       // tak arahke halaman seng anyar
       LibNavigation.navigate('payment/event_invitation', {
         dataBookingEvent: dataPost,
-        subscribed: subscribed
+        subscribed: subscribed,
+        show_fee_percentage
       })
     } else if (selectedTicket?.use_seat == 1) {
       if (selectedTicket?.config && selectedTicket?.config?.seat_autopick == 1) {

package/event/ticket_list2.tsx

@@ -135,7 +135,7 @@ export default function m(props: EventTicket_list2Props): any {
 
   const [pendingData] = EventLoading_pageProperty.state().useState()
 
-  const { has_addition, has_addition_global, url, fee_platform, subscribed }: any = useRef(LibNavigation.getArgsAll(props)).current
+  const { has_addition, has_addition_global, url, fee_platform, subscribed, show_fee_percentage }: any = useRef(LibNavigation.getArgsAll(props)).current
 
   const [deeplinkParams] = UseDeeplinkProperty.params.useState()
   const [timer] = EventCountdownProperty.countdownTime.useState()
@@ -173,6 +173,7 @@ export default function m(props: EventTicket_list2Props): any {
               }
             }
           },
+          show_fee_percentage
         }, item.list_id)
           .then((value: any) => {
             const merged = { ...item, ...value }
@@ -259,6 +260,7 @@ export default function m(props: EventTicket_list2Props): any {
       dataTicket: getDataPostBooking(),
       subscribed: subscribed,
       url_payment: urlPayment,
+      show_fee_percentage
     })
   })
 

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",
+    "text_book_on": "Booking On %s %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.0-y",
+  "version": "0.0.1-a",
   "description": "event module on esoftplay framework",
   "main": "index.js",
   "scripts": {