esoftplay-event 0.0.2-s → 0.0.2-u

package/event/seat_map_new.tsx

@@ -1,8 +1,10 @@
 // withHooks
+import { doc, getFirestore, runTransaction } from '@react-native-firebase/firestore';
 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 { LibBackground_task } from 'esoftplay/cache/lib/background_task/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';
@@ -11,8 +13,9 @@ 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 useLazyState from 'esoftplay/lazy';
 import useSafeState from 'esoftplay/state';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Dimensions, Pressable, ScrollView, View } from 'react-native';
 import { TapGestureHandler, TapGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
 
@@ -23,10 +26,38 @@ export interface EventSeat_map_newArgs {
 export interface EventSeat_map_newProps {
 
 }
+
+function getEventPath() {
+  return "event" + (esp.isDebug("") ? "BBT" : "BBO")
+}
+
+const mainPath = [getEventPath(), "event_seat", "seat_index"]
+export function clearHoldedSeats() {
+  const app: any = esp.mod("firestore/index")().instance()
+  const firestoreUser = esp.mod("firestore/index")().getUserData(app.name)
+  esp.mod("firestore/index")().getCollectionIds(app, mainPath, [["uid", "==", firestoreUser?.uid], ["status", "==", "holding"]], [], (ids) => {
+    if (ids?.length > 0)
+      esp.mod("firestore/index")().deleteBatchDocument(app, mainPath, ids, () => {
+      }, console.log)
+  }, console.log)
+}
+
 export default function m(props: any): any {
   const { dataTicket, url } = LibNavigation.getArgsAll<any>(props)
   const qty = dataTicket?.qty
 
+  const eventData = {
+    event_id: dataTicket?.event_id,
+    price_id: dataTicket?.selected_ticket?.price_id,
+    ondate: dataTicket?.ondate || dataTicket?.selected_ticket?.list?.ondate
+  }
+
+  const app: any = esp.mod("firestore/index")().instance()
+  const firestoreUser = esp.mod("firestore/index")().getUserData(app.name)
+
+  const [, setHoldedSeats, getHoldedSeats] = useLazyState<string[]>([])
+  const [, setLoadingSeats, getLoadingSeats] = useSafeState<string[]>([])
+
   const deviceWidth = Dimensions.get('window').width;
   const [scale, setScale] = useState(1);
   const [boundingBox, setBoundingBox] = useSafeState({ "x1": 1, "x2": 2, "y1": 1, "y2": 2 })
@@ -80,38 +111,161 @@ export default function m(props: any): any {
 
   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);
-          });
+        if (status != 0) return;
+        if (getLoadingSeats().includes(seatName)) return;
+
+        const isSelected = getSelectedSeat().includes(seatName);
+
+        const seat: any = getHoldedSeats().find((x: any) => x.id === seatName);
+        const isHolded = !!seat;
+        const isMine = seat?.uid === firestoreUser?.uid;
+
+        if (isHolded && !isMine) {
+          LibToastProperty.show(esp.lang("event/seat_map_new", "other_user"));
+          return;
         }
+
+        if (!isSelected && getSelectedSeat().length >= qty) {
+          LibToastProperty.show(esp.lang("event/seat_map", "max_seat", qty));
+          return;
+        }
+
+        const action = isSelected ? "release" : "hold";
+        setSelectedSeat((prev: any) => {
+          if (isSelected) {
+            return prev.filter((s: string) => s !== seatName);
+          } else {
+            return [...prev, seatName];
+          }
+        });
+
+        setLoadingSeats(prev => [...prev, seatName]);
+        handleSelectedSeat(seatName, action)
+          .then(() => { })
+          .catch((err: any) => {
+            // setSelectedSeat((prev: any) => {
+            //   if (action === "hold") {
+            //     return prev.filter((s: string) => s !== seatName);
+            //   } else {
+            //     return [...prev, seatName];
+            //   }
+            // });
+            // LibToastProperty.show(err?.message || esp.lang("event/seat_map_new", "failed_sync"));
+          })
+          .finally(() => {
+            setLoadingSeats(prev => prev.filter(s => s !== seatName));
+          });
+
         return;
       }
+    }
+  }, [data, boxSize, scale, firestoreUser]);
 
+  async function handleSelectedSeat(seatName: string, action?: "hold" | "release") {
+    const pathKey = `${eventData?.event_id}_${eventData?.price_id}_${eventData?.ondate}_${seatName}`
+    const path = [...mainPath, pathKey]
+    const fixedPath = esp.mod("firestore/index")().castPathToString(path)
+
+    try {
+      await holdSeat(fixedPath, pathKey, action)
+    } catch (error) {
+      console.warn("Failed to hold seat:", error, firestoreUser.uid);
+      throw error
     }
-  }, [data, boxSize, scale]);
+  }
+
+  const cat_id = `${eventData?.price_id}_${eventData?.ondate}`
+  async function holdSeat(path: string, pathKey: string, action?: "hold" | "release") {
+    const uid = firestoreUser?.uid
+
+    const db = getFirestore(app)
+    const seatRef = doc(db, path);
+
+    await runTransaction(db, async (tx) => {
+      const snap = await tx.get(seatRef);
+      const value = {
+        status: "holding",
+        id: pathKey,
+        cat_id,
+        uid,
+        updated: Date.now(),
+      }
+
+      if (!snap.exists()) {
+        tx.set(seatRef, value);
+        return;
+      }
+
+      const data: any = snap.data();
+      if (data.status === "holding" && data.uid === uid) {
+        if (action === "release") {
+          tx.update(seatRef, {
+            status: "available"
+          });
+          return;
+        } else {
+          return;
+        }
+      }
+      if (data.status === "available") {
+        tx.update(seatRef, value);
+        return;
+      }
+      throw new Error(esp.lang("event/seat_map_new", "seat_not_avail"));
+    });
+  }
 
   useEffect(() => {
     loadDataSeatmapBooked()
     return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
   }, [])
 
+  useEffect(() => {
+    getAllHeldSeats()
+    updateTimestamp()
+    LibBackground_task.set("1", getAllHeldSeats, 2000)
+    LibBackground_task.set("2", updateTimestamp, 3000)
+    return () => {
+      LibBackground_task.clear("1")
+      LibBackground_task.clear("2")
+    }
+  }, [])
+
+  function getAllHeldSeats() {
+    esp.mod("firestore/index")().getCollectionWhere(app, mainPath, [
+      ["cat_id", "==", cat_id],
+      ["uid", "!=", firestoreUser?.uid],
+      ["status", "==", "holding"],
+    ], (docs) => {
+      const seats = docs.map((d: any) => ({ ...d.data, id: d.id.split("_").pop() }));
+      setHoldedSeats(seats)()
+    }, console.warn)
+  }
+
+  function updateTimestamp() {
+    esp.mod("firestore/index")().getCollectionIds(app, mainPath, [
+      ["cat_id", "==", cat_id],
+      ["uid", "==", firestoreUser?.uid],
+      ["status", "==", "holding"],
+    ], [], (ids) => {
+      esp.mod("firestore/index")().updateBatchDocument(app, mainPath, ids,
+        [{ key: "updated", value: Date.now() }],
+        () => { },
+        console.warn)
+    }, console.warn)
+  }
+
   function updateIndexByRes(data: any, res: any) {
     const resArr = res.split(",").map((item: any) => item.trim()); // biar aman dari spasi
     return data.map((row: any) => {
@@ -136,6 +290,14 @@ export default function m(props: any): any {
     })
   }
 
+  const holdedSeatsMap = useMemo(() => {
+    const map: any = {};
+    getHoldedSeats().forEach((x: any) => {
+      map[x.id] = x.uid;
+    });
+    return map;
+  }, [getHoldedSeats()]);
+
   function loadDataSeatmapBooked() {
     new LibCurl("v3/event_seat_booked", {
       event_id: dataTicket?.event_id,
@@ -204,7 +366,10 @@ export default function m(props: any): any {
                     getData()?.map(([x, y, name, status], i) => {
                       let newName = name?.replace(/^.*#/, "")
                       const isSelected = getSelectedSeat()?.includes(name)
-                      const color = isSelected ? "#8EF67B" : getColorByStatus(status)
+                      const uid = holdedSeatsMap[name];
+                      const isHolded = !!uid;
+                      const isMine = uid === firestoreUser?.uid;
+                      const color = isSelected ? "#8EF67B" : (isHolded && !isMine) ? getColorByStatus(9) : getColorByStatus(status)
                       const xSize = (boxSize / 2) + (x * boxSize)
                       const ySize = (boxSize / 2) + (y * boxSize)
 
@@ -290,22 +455,22 @@ export default function m(props: any): any {
 function getLegends() {
   const colors: any = [
     ["#fff", esp.lang("event/seat_map", "available"), 0],
-    ["#8EF67B", esp.lang("event/seat_map", "chosen"), "-1"],
+    // ["#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],
+    // ["#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]
+    ["#7e2a0c", esp.lang("event/seat_map_new", "picked_byother"), 9]
   ]
   return colors
 }
 
 function getColorByStatus(statuses: number) {
   const colors: any = {
-    8: 'purple',
     0: '#fff',
     1: "#9FA1A4",
     2: "#6B71E6",
@@ -313,7 +478,9 @@ function getColorByStatus(statuses: number) {
     4: "#FFA601",
     5: "#fff",
     6: "#FF4866",
-    7: "#6C432C"
+    7: "#6C432C",
+    8: 'purple',
+    9: "#7e2a0c"
   }
   return colors[statuses]
 }

package/event/test.tsx

@@ -142,7 +142,7 @@ export default function m(props: any): any {
                     height: height * scale,
                     padding: 10,
                     backgroundColor: LibStyle.colorBgGrey,
-                    
+
                   }}>
                   {
                     data.map(([x, y, name, status], i) => {
@@ -211,15 +211,15 @@ export default function m(props: any): any {
 function getLegends() {
   const colors: any = [
     ["#fff", esp.lang("event/seat_map", "available"), 0],
-    ["#8EF67B", esp.lang("event/seat_map", "chosen"), "-1"],
+    // ["#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],
+    // ["#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
 }

package/id.json

@@ -1020,6 +1020,9 @@
     "transfer_mbanking_instruction": "Petunjuk Transfer mBanking",
     "virtual_number_account": "No Virtual Account :"
   },
+  "event/order_detail_return": {
+    "send_back_ticket": "Kembalikan Tiket"
+  },
   "event/order_detail_share": {
     "cancel": "Batal",
     "chose_ticket": "PILIH TIKET",
@@ -1369,6 +1372,12 @@
     "zoom_out": "Memperkecil denah..",
     "zoom_out_max": "Tidak dapat memperkecil lagi"
   },
+  "event/seat_map_new": {
+    "failed_sync": "Gagal sinkronisasi kursi",
+    "other_user": "Seat sedang dipilih user lain",
+    "picked_byother": "Dipilih orang lain",
+    "seat_not_avail": "Seat tidak tersedia"
+  },
   "event/seat_map_test": {
     "front": "DEPAN",
     "header_title": "Pilih Kursi"

package/package.json

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