esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/cashier/list_queue.tsx

@@ -0,0 +1,299 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { CashierList_queue_item } from 'esoftplay/cache/cashier/list_queue_item/import';
+import { CashierList_queue_item_countdown } from 'esoftplay/cache/cashier/list_queue_item_countdown/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { EventFirebase_socket } from 'esoftplay/cache/event/firebase_socket/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';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibInput_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import useGlobalState from 'esoftplay/global';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import { useKeepAwake } from 'expo-keep-awake';
+import React, { useEffect } from 'react';
+import { Keyboard, Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface CashierList_queueArgs {
+
+}
+export interface CashierList_queueProps {
+
+}
+
+const counterState = useGlobalState<number>(1)
+const delayState = useGlobalState<boolean>(false)
+const delayedCounterState = useGlobalState<number>(1)
+function debouncer() {
+  let timeout: any
+  return (func: () => any, delay: number): Function => {
+    clearTimeout(timeout)
+    timeout = setTimeout(func, delay);
+    return () => clearTimeout(timeout)
+  }
+}
+
+export function registerDelayCounter() {
+  delayState.set(true)
+  LibUtils.debounce(() => {
+    if (delayedCounterState.get() != counterState.get()) {
+      delayState.set(false)
+      counterState.set(delayedCounterState.get())
+    }
+  }, 8000)
+}
+
+const serveDebouncer = debouncer()
+export default function m(props: CashierList_queueProps): any {
+  useKeepAwake()
+  const { cashier_id, merchant_id } = LibNavigation.getArgsAll(props)
+  const [query, setQuery] = useSafeState<any>()
+  const [counter, setCounter] = counterState.useState()
+  const [showReset, setShowReset] = useSafeState<boolean>(false)
+  const { listenChangeTime } = EventFirebase_socket()
+  const [showCounterTime, setShowCounterTime] = useSafeState(0)
+  const [execServe, setExecServe] = useSafeState<string>("")
+  const [isServe, setIsServe] = useSafeState(0) // 0=menunggu  1=dilayani
+
+  let url = query ? 'merchant_cashier_line?is_served=' + isServe + '&sort=' + (isServe == 0 ? "asc" : "desc") + '&keyword=' + query : 'merchant_cashier_line?is_served=' + isServe + '&sort=' + (isServe == 0 ? "asc" : "desc")
+
+  let post = {
+    cashier_id: cashier_id
+  }
+
+  useEffect(() => {
+    listenChangeTime(merchant_id, (value) => {
+      if (delayState.get()) {
+        delayedCounterState.set(value)
+      } else {
+        counterState.set(value)
+        delayedCounterState.set(value)
+      }
+    })
+  }, [])
+
+  function onServe(url: any) {
+    new LibCurl(url, { "cashier_id": cashier_id },
+      (res, msg) => {
+        LibToastProperty.show(res)
+      },
+      (error) => {
+
+      }, 1
+    )
+  }
+
+  function cancelServe(url: any) {
+    LibProgress.show(esp.lang("cashier/list_queue", "progress"))
+    new LibCurl(url, { "cashier_id": cashier_id },
+      (res, msg) => {
+
+        LibProgress.hide()
+        LibToastProperty.show(res)
+        setCounter(counter + 1)
+      },
+      (error) => {
+        LibProgress.hide()
+
+      }, 1
+    )
+  }
+
+
+  function renderItem(item: any, i: number) {
+    return (
+      <CashierList_queue_item
+        key={i}
+        item={item}
+        onSwipeComplete={() => {
+          if (execServe) {
+            onServe(execServe)
+          }
+          setShowCounterTime(5)
+          setExecServe(item.url_serve)
+          serveDebouncer(() => {
+            onServe(item.url_serve)
+            setShowCounterTime(0)
+            setExecServe('')
+          }, 5000)
+        }}
+      />
+    )
+  }
+
+  function renderServed(item: any, i: number) {
+    return (
+      <View style={{ backgroundColor: '#fff', margin: 7, marginBottom: 0, ...LibStyle.elevation(2), borderRadius: 10, padding: 10 }} >
+        <View style={{ flexDirection: 'row' }}>
+          <View style={{ flex: 3 }}>
+            {
+              item?.coupon_total_shown == 1 ?
+                <View>
+                  <LibTextstyle textStyle="title1" style={{ marginVertical: 5 }} text={LibUtils.money(item.amount)} />
+                  <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                    <View style={{ padding: 3, borderRadius: 2, backgroundColor: '#ffdeeb' }}>
+                      <LibTextstyle textStyle="subhead" text={LibUtils.money(item.coupon_total)} style={applyStyle({ color: LibStyle.colorRed })} />
+                    </View>
+                    <LibTextstyle textStyle="subhead" text={LibUtils.money(Number(item.amount) + Number(item.coupon_total))} style={applyStyle({ marginLeft: 7, color: "#adb5bd", textDecorationLine: 'line-through', textDecorationStyle: 'solid' })} />
+                  </View>
+                </View>
+                :
+                <LibTextstyle textStyle="title1" style={{ marginVertical: 5 }} text={item?.amount == 0 ? item?.type?.label : LibUtils.money(item.amount)} />
+            }
+
+            {/* <LibTextstyle textStyle="title2" style={{ marginVertical: 5 }} text={LibUtils.money(item.amount)} /> */}
+            <LibTextstyle textStyle="title2" ellipsizeMode='tail' numberOfLines={2} style={{ marginTop: 5, marginVertical: 5, flex: 1, fontWeight: "bold" }} text={item.buyer_name} />
+            <LibTextstyle textStyle="subhead" text={item.code} style={{ color: LibStyle.colorBlue }} />
+          </View>
+          <View style={{ flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+            <TouchableOpacity onPress={() => {
+              LibDialog.warningConfirm(esp.lang("cashier/list_queue", "warn_title"), esp.lang("cashier/list_queue", "warn_msg"), esp.lang("cashier/list_queue", "warn_ok"), () => {
+                cancelServe(item.url_refuse)
+              }, esp.lang("cashier/list_queue", "warn_cancel"), () => { })
+            }} style={{ ...LibStyle.elevation(2), flex: 1, padding: 10, paddingVertical: 5, borderRadius: 10, backgroundColor: LibStyle.colorRed, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+              <LibIcon name='close-circle-outline' style={{}} size={30} color="#fff" />
+              <LibTextstyle textStyle="caption1" text={esp.lang("cashier/list_queue", "back_to_que")} style={{ textAlign: 'center', color: '#fff' }} />
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  let tabs = [
+    {
+      id: 0,
+      title: esp.lang("cashier/list_queue", "waiting")
+    },
+    {
+      id: 1,
+      title: esp.lang("cashier/list_queue", "done")
+    },
+  ]
+
+  function renderTabs(item: any, i: number) {
+    return (
+      <Pressable key={i} onPress={() => {
+        setIsServe(item.id)
+        setCounter(counter + 1)
+      }} style={{ ...LibStyle.elevation(item.id == isServe ? 3 : 0), flex: 1, padding: 7, backgroundColor: item.id == isServe ? "#fff" : "#EEF1F8", borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}>
+        <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontWeight: item.id == isServe ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, color: item.id == isServe ? "#000" : "#aab0b7" }}>{item.title}</Text>
+      </Pressable>
+    )
+  }
+
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <ComponentHeader title={esp.lang("cashier/list_queue", "header")} />
+      <View style={{ flexDirection: 'row', borderRadius: 10, padding: 3, overflow: 'hidden', backgroundColor: LibStyle.colorBgGrey }}>
+        {
+          tabs.map(renderTabs)
+        }
+      </View>
+
+      
+        <LibInfinite
+          url={url}
+          // isDebug={1}
+          key={counter}
+          post={post}
+          // style={{ backgoundColor: '#fff' }}
+          errorView={(e: any) => (
+            <View style={{ flex: 1, margin: 10, borderRadius: 5, overflow: 'hidden' }}>
+              <ComponentMessage message={e} />
+            </View>
+          )}
+          ListHeaderComponent={
+            <View style={{ flex: 1, padding: 10, paddingTop: 0 }}>
+              <LibInput_rectangle
+                style={{ flex: 1, borderRadius: 5 }}
+                placeholder={esp.lang("cashier/list_queue", "placeholder_input")}
+                onChangeText={(e) => {
+                  LibUtils.debounce(() => {
+                    setQuery(e)
+                  }, 200)
+                }}
+                blurOnSubmit
+                returnKeyType='go'
+                onSubmitEditing={() => {
+                  if (query?.trim()) {
+                    setShowReset(true)
+                    setCounter(counter + 1)
+                  }
+                }}
+              />
+              <TouchableOpacity onPress={() => {
+                if (query?.trim()) {
+                  setShowReset(true)
+                  setCounter(counter + 1)
+                  Keyboard.dismiss()
+                }
+              }} style={{ position: 'absolute', top: 10, right: 10, padding: 10 }}>
+                <LibIcon.AntDesign name='search1' color='#b9b9b9' />
+              </TouchableOpacity>
+              {
+                showReset &&
+                <TouchableOpacity onPress={() => {
+                  setQuery(undefined)
+                  setCounter(counter + 1)
+                  setShowReset(false)
+                }} style={{ flexDirection: 'row' }}>
+                  <View style={{ marginTop: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center', backgroundColor: LibStyle.colorRed, paddingVertical: 4, padding: 7, borderRadius: 5 }} >
+                    <LibTextstyle textStyle="caption1" text={query} style={{ color: 'white' }} />
+                    <LibIcon name='close-circle' style={{ marginLeft: 8 }} color="#fff" size={15} />
+                  </View>
+                </TouchableOpacity>
+              }
+
+              {
+                isServe == 0 &&
+                <View style={{ flexDirection: 'row', borderRadius: 5, backgroundColor: '#FEFBEB', borderColor: "#FFCC29", borderWidth: 1, borderStyle: 'dashed', alignContent: 'center', alignItems: 'center', flex: 1, marginTop: 15, padding: 10 }}>
+                  <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 16, fontStyle: "normal", letterSpacing: 1 }} >{esp.lang("cashier/list_queue", "swipe")}</Text>
+                </View>
+              }
+            </View>
+          }
+          renderItem={isServe == 0 ? renderItem : renderServed}
+        />
+        {
+          !!execServe &&
+          <TouchableOpacity
+            onPress={() => {
+              serveDebouncer(() => { }, 1)
+              setCounter(counter + 1)
+              setExecServe('')
+            }}
+            style={{ position: 'absolute', flexDirection: 'row', bottom: 20, left: 20, right: 20, backgroundColor: "#595959", padding: 10, borderRadius: 10, alignItems: 'center', justifyContent: 'space-between' }} >
+            <View style={{ marginLeft: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <CashierList_queue_item_countdown
+                key={execServe}
+                expired={moment().add(showCounterTime, 'seconds').serverFormat("YYYY-MM-DD HH:mm:ss")}
+                style={{ color: 'white', fontWeight: 'bold' }}
+              />
+              <LibTextstyle text={esp.lang("cashier/list_queue", "process_transaction")} textStyle='callout' style={{ marginLeft: 10, color: '#fff' }} />
+            </View>
+            <TouchableOpacity onPress={() => {
+              serveDebouncer(() => { }, 1)
+              setCounter(counter + 1)
+              setExecServe('')
+            }}>
+              <LibTextstyle text={esp.lang("cashier/list_queue", "text_undo")} textStyle='m_body1' style={{ color: LibStyle.colorBlue, fontWeight: 'bold' }} />
+            </TouchableOpacity>
+          </TouchableOpacity>
+        }
+    </View>
+  )
+}

package/modules/cashier/list_queue_item.tsx

@@ -0,0 +1,92 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { CashierList_queueProperty } from 'esoftplay/cache/cashier/list_queue/import';
+import { LibAnimation } from 'esoftplay/cache/lib/animation/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibSwipe } from 'esoftplay/cache/lib/swipe/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+
+
+export interface CashierList_queue_itemArgs {
+
+}
+export interface CashierList_queue_itemProps {
+  item: any
+  // onPress: () => void
+  onSwipeComplete: () => void
+}
+
+export default function m(props: CashierList_queue_itemProps): any {
+  const autoanimation = useRef<LibAnimation>(null)
+  const { item } = props
+
+  return (
+    <LibSwipe
+      animate={() => { autoanimation?.current?.animateNextTransition() }}
+      delay={1}
+      leftSide={{
+        renderView: (close) => {
+          return (
+            <View style={{ ...LibStyle.elevation(2), flex: 1, borderRadius: 10, margin: 7, backgroundColor: LibStyle.colorRed, justifyContent: 'flex-start', alignItems: 'center', flexDirection: 'row', paddingHorizontal: 10 }}>
+              <LibIcon name='arrow-right' color='white' />
+            </View>
+          )
+        },
+        onSwipeComplete: () => {
+          CashierList_queueProperty.registerDelayCounter()
+          props.onSwipeComplete()
+        }
+      }}
+      rightSide={{
+        renderView: (close) => {
+          return (
+            <View style={{ ...LibStyle.elevation(2), flex: 1, borderRadius: 10, margin: 7, backgroundColor: LibStyle.colorRed, justifyContent: 'flex-end', alignItems: 'center', flexDirection: 'row', paddingHorizontal: 10 }}>
+              <LibIcon name='arrow-left' color='white' />
+            </View>
+          )
+        },
+        onSwipeComplete: () => {
+          CashierList_queueProperty.registerDelayCounter()
+          props.onSwipeComplete()
+        }
+      }} >
+      <View style={{ backgroundColor: '#fff', margin: 7, ...LibStyle.elevation(2), borderRadius: 10, overflow:'hidden' }} >
+        <View style={{ flexDirection: "row", paddingHorizontal: 17, paddingTop: 10, paddingBottom: 8 }} >
+          <View style={{ flex: 1, marginRight: 15 }} >
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
+              <View style={{ flex: 1, marginRight: 10 }}>
+                <LibTextstyle textStyle="title1" ellipsizeMode='tail' numberOfLines={2} style={{ marginVertical: 5, fontWeight: "bold" }} text={item.buyer_name} />
+              </View>
+              <View style={{ flex: 1 }}>
+
+                {
+                  item?.coupon_total_shown == 1 ?
+                    <View>
+                      <LibTextstyle ellipsizeMode='tail' numberOfLines={2} textStyle="title1" style={{ marginVertical: 5 }} text={LibUtils.money(item.amount)} />
+                      <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                        <View style={{ padding: 3, borderRadius: 2, backgroundColor: '#ffdeeb' }}>
+                          <LibTextstyle textStyle="subhead" text={LibUtils.money(item.coupon_total)} style={applyStyle({ color: LibStyle.colorRed })} />
+                        </View>
+                        <LibTextstyle textStyle="subhead" text={LibUtils.money(Number(item.amount) + Number(item.coupon_total))} style={applyStyle({ flex: 1, marginLeft: 7, color: "#adb5bd", textDecorationLine: 'line-through', textDecorationStyle: 'solid' })} />
+                      </View>
+                    </View>
+                    :
+
+                    <LibTextstyle ellipsizeMode='tail' numberOfLines={2} textStyle={item?.amount == 0 ? "headline" : "title1"} style={{ marginVertical: 5 }} text={item?.amount == 0 ? "(" + item?.coupon_qty + ")   " + item?.type?.label : LibUtils.money(item.amount)} />
+                }
+              </View>
+            </View>
+            <LibTextstyle textStyle="headline" text={item.code} style={{ color: LibStyle.colorBlue }} />
+          </View>
+        </View>
+        <MarketSection_menu size="line" />
+      </View>
+    </LibSwipe>
+  )
+}

package/modules/cashier/list_queue_item_countdown.tsx

@@ -0,0 +1,81 @@
+// withHooks
+// noPage
+import esp from 'esoftplay/esp';
+
+
+import moment from 'esoftplay/moment';
+import { createTimeout } from 'esoftplay/timeout';
+import React, { useEffect, useRef } from 'react';
+import { TextInput, View } from 'react-native';
+
+export interface CashierList_queue_item_countdownProps {
+  expired: string,
+  style?: any,
+  containerStyle?: any,
+  onlyDay?: boolean
+  onExpired?: () => void
+}
+
+const fixSingleNumber = (number: number) => number < 10 ? '0' + number : number
+
+export default function m(props: CashierList_queue_item_countdownProps): any {
+  const ref = useRef<TextInput>(null)
+  let timmer = useRef<any>(undefined).current
+  useEffect(() => {
+    countDown()
+    return () => {
+      clearTimeout(timmer)
+      timmer = undefined
+    }
+  }, [])
+
+  function countDown(): any {
+    let expired = false
+    function loop() {
+      const t = ["", "", "", ""]
+      const diffr = moment(props.expired).duration(moment().toDate());
+      const text = [
+        parseInt(diffr.asDays().toString()),
+        fixSingleNumber(parseInt(diffr.hours().toString())),
+        fixSingleNumber(parseInt(diffr.minutes().toString())),
+        fixSingleNumber(parseInt(diffr.seconds().toString()))
+      ]
+
+      if (text.every((x) => (Number(x) < 1 || isNaN(Number(x))))) {
+        expired = true
+        props.onExpired && props.onExpired()
+        ref?.current?.setNativeProps({ text: "" })
+      } else if (text.length == 4 && text[0] != 0 && props.onlyDay) {
+        ref?.current?.setNativeProps({ text: text[0] + esp.lang("market/countdown", "days") })
+      } else if (text[0] == 0) {
+        text.splice(0, 1)
+        t.splice(0, 1)
+        if (text[0].toString() == '00') {
+          text.splice(0, 1)
+          t.splice(0, 1)
+          if (text[0].toString() == '00') {
+            text.splice(0, 1)
+            t.splice(0, 1)
+          }
+        }
+        ref?.current?.setNativeProps({ text: Number(text.filter((x, i) => !isNaN(Number(x))).map((d, id) => d + ' ' + t[id]).join(" : ")).toString() })
+      } else {
+        ref?.current?.setNativeProps({ text: Number(text.filter((x, i) => !isNaN(Number(x))).map((d, id) => d + ' ' + t[id]).join(" : ")).toString() })
+      }
+      if (!expired) {
+        const timeout = createTimeout()
+        timmer = timeout.set(() => {
+          loop()
+          timeout.clear()
+        }, 1000);
+      }
+    };
+    loop()
+  }
+
+  return (
+    <View style={props.containerStyle} >
+      <TextInput ref={ref} editable={false} style={props.style} />
+    </View>
+  )
+}

package/modules/cashier/product.tsx

@@ -0,0 +1,52 @@
+// withHooks
+
+import { CashierInvoice } from 'esoftplay/cache/cashier/invoice/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import useGlobalState from 'esoftplay/global';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+
+
+export interface CashierProductProps {
+
+}
+
+const initState = {
+  products: []
+}
+
+const state = useGlobalState(initState)
+
+export function set(products: any): void {
+  state.set({ products })
+}
+
+
+export default function m(props: CashierProductProps): any {
+
+  const _products = state.useSelector(s => s.products)
+
+  const [products, setProducts] = useSafeState(_products.map((_p: any) => ({ ..._p, qty: 0 })))
+  const url = LibNavigation.getArgs(props, 'url', 'merchant_cashier_product')
+
+  useEffect(() => {
+    new LibCurl(url, null,
+      (res, msg) => {
+        set(res)
+      },
+      (msg) => {
+
+      }
+    )
+  }, [])
+
+
+  useEffect(() => {
+    setProducts(_products.map((_p: any) => ({ ..._p, qty: 0 })))
+  }, [_products])
+
+  return <CashierInvoice />
+
+}

package/modules/cashier/product_item.tsx

@@ -0,0 +1,34 @@
+// withHooks 
+// noPage
+
+import { ComponentNumber_picker } from 'esoftplay/cache/component/number_picker/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface CashierProduct_itemProps {
+  id: string,
+  name: string,
+  image: string,
+  sale: string,
+  sold: string,
+  onChangeQty: (item: any, qty: number) => void,
+  qty: number
+}
+
+export default function m(props: CashierProduct_itemProps): any {
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, paddingVertical: 13, paddingHorizontal: 19 }, LibStyle.elevation(2)]} >
+      <LibPicture source={{ uri: props.image }} style={{ height: 30, width: 30, backgroundColor: LibStyle.colorLightGrey }} />
+      <View style={{ marginLeft: 10, flex: 1 }} >
+        <Text style={{ fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a" }} >{props.name}</Text>
+        <Text style={{ fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#999" }} >{LibUtils.money(props.sale)}</Text>
+      </View>
+      <ComponentNumber_picker value={props.qty} defaultValue={props.qty} minValue={0} onChangeValue={(qty) => props.onChangeQty(props, qty)} />
+    </View>
+  )
+}