esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/event/additional_input.tsx

@@ -0,0 +1,316 @@
+// withHooks
+import { useEffect, useRef } from 'react';
+
+import { EventButton } from 'esoftplay/cache/event/button/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
+import { LibCollaps } from 'esoftplay/cache/lib/collaps/import';
+import { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/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, { useGlobalReturn } from 'esoftplay/global';
+import useLazyState from 'esoftplay/lazy';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventAdditional_inputArgs {
+
+}
+export interface EventAdditional_inputProps {
+
+}
+
+// export type ItemAddition = {
+//   "each": string,
+//   "title": string,
+//   "additions": Array<{
+//     "id": string,
+//     "question": string,
+//     "type": string,
+//     "is_option": string,
+//     "is_content": string,
+//     "is_required": string,
+//     "options": Array<{
+//       "id": string,
+//       "content": string,
+//     }>,
+//     "value": Array<string>,
+//     "display_value": Array<string>,
+//     "subvalue"?: string,
+//   }>,
+// }
+
+const additionalState = useGlobalState<any>(undefined, { persistKey: 'event/additional_input' })
+
+export function state(): useGlobalReturn<any> {
+  return additionalState
+}
+
+export default function m(props: EventAdditional_inputProps): any {
+  const { data, itemAddition } = LibNavigation.getArgsAll(props)
+  const dialogDatePicker = useRef<LibSlidingup>(null)
+  const dialogDropdown = useRef<LibSlidingup>(null)
+  const [dropdownData, setDropdownData] = useSafeState()
+
+  const [newData, setNewData] = useSafeState()
+  const [, setIdx, getIdx] = useLazyState<number>()
+
+  useEffect(() => {
+    if (Object.keys(itemAddition).length > 0) {
+      setNewData(itemAddition)
+    } else {
+      setNewData(data)
+    }
+
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function save() {
+    let stillEmpty1 = newData?.additions?.filter((item: any) => item.is_required == 1).filter((it: any) => (it.value?.length == 0 && !it.subvalue)).length > 0
+    if (stillEmpty1) {
+      LibToastProperty.show(esp.lang("event/additional_input", "complete_info"))
+      return
+    } else {
+      LibNavigation.sendBackResult(newData, 190)
+    }
+  }
+
+  function renderCatNew(item: any, i: number) {
+    let values = newData?.additions?.[i]?.value
+    let display_values = newData?.additions?.[i]?.display_value
+
+    let show = true /* Object.keys(itemAddition).length > 0 ? true : false */
+
+    return (
+      <View key={i} style={{ backgroundColor: '#fff', borderRadius: 5, margin: 15, marginBottom: 5, marginTop: 10 }}>
+        <LibCollaps key={i} show={show} header={(show) =>
+          <View style={{ padding: 7, borderBottomColor: '#c9c9c9', borderBottomWidth: 0.5, justifyContent: 'space-between', flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <View style={{ flex: 6, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+              <Text allowFontScaling={false} style={{ flexWrap: 'wrap', fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000", }}>{item.question}</Text>
+              {
+                item.is_required == 1 &&
+                <Text allowFontScaling={false} style={{ fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#d0021b" }}> *</Text>
+              }
+            </View>
+            <LibIcon name={show ? 'chevron-up' : 'chevron-down'} color="#4a4a4a" />
+          </View>}>
+          {/* type: 1: text field, 2: textarea, 3: date picker, 4: choice, 5: multichoice, 6: dropdown */}
+          <View style={{ marginHorizontal: 10 }}>
+            {
+              item.type == 1 && // text field
+              <EventInput_rectangle
+                placeholder={item.question}
+                placeholderTextColor='#c9c9c9'
+                style={{ borderRadius: 5, borderColor: '#c9c9c9' }}
+                defaultValue={newData?.additions?.[i]?.value?.[0]}
+                inputStyle={{ marginLeft: 0 }}
+                onChangeText={(text) => {
+                  let t = text?.length == 0 ? [] : [text]
+                  let updateValue = LibObject.set(newData, t)('additions', i, 'value')
+                  let updateDisplayValue = LibObject.set(updateValue, t)('additions', i, 'display_value')
+                  setNewData(updateDisplayValue)
+                }} />
+            }
+
+            {
+              item.type == 2 && // textarea
+              <EventInput_rectangle
+                multiline={true}
+                placeholder={item.question}
+                placeholderTextColor='#c9c9c9'
+                style={{ borderRadius: 5, borderColor: '#c9c9c9', height: 100, justifyContent: 'flex-start' }}
+                defaultValue={newData?.additions?.[i]?.value?.[0]}
+                inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, marginLeft: 0, height: 100 }}
+                onChangeText={(text) => {
+                  let t = text?.length == 0 ? [] : [text]
+                  let updateValue = LibObject.set(newData, t)('additions', i, 'value')
+                  let updateDisplayValue = LibObject.set(updateValue, t)('additions', i, 'display_value')
+                  setNewData(updateDisplayValue)
+                }} />
+            }
+
+            {
+              item.type == 3 && // datepicker
+              <TouchableOpacity onPress={() => {
+                setIdx(i)()
+                dialogDatePicker.current?.show()
+              }} style={{ height: 40, borderRadius: 5, marginTop: 12, backgroundColor: "#ffffff", borderWidth: 1, borderColor: "#c5c5c5", flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 9 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 12, color: values?.length > 0 ? "#000" : "#e5e5e5", marginRight: 15, }}>{values?.length > 0 ? display_values[0] : item.question}</Text>
+                {
+                  values?.length == 0 &&
+                  <LibIcon name='chevron-down' />
+                }
+              </TouchableOpacity>
+            }
+
+            {
+              item.type == 4 && // choice
+              <View style={{ marginTop: 8 }}>
+                {
+                  item?.options?.length > 0 && item?.options?.map((it: any, ii: number) => {
+                    let values = newData?.additions?.[i]?.value?.[0] == it.id
+                    return (
+                      <Pressable
+                        key={ii}
+                        hitSlop={{ top: 10, right: 10 }}
+                        onPress={() => {
+                          let updateValue = LibObject.set(newData, [it.id])('additions', i, 'value')
+                          let updateDisplayValue = LibObject.set(updateValue, [it.content])('additions', i, 'display_value')
+                          let deleteSubvalue = LibObject.set(updateDisplayValue, "")('additions', i, 'subvalue')
+                          setNewData(deleteSubvalue)
+
+                        }}
+                        style={{ flexDirection: 'row', marginBottom: 5, alignContent: 'center', alignItems: 'center' }}>
+                        <LibIcon name={values ? 'circle' : 'circle-outline'} size={20} color={values ? LibStyle.colorPrimary : '#9b9b9b'} />
+                        <Text allowFontScaling={false} style={{ marginLeft: 7, marginRight: 15, color: values ? "#000" : "#9b9b9b" }}>{it.content}</Text>
+                      </Pressable>
+                    )
+                  })
+                }
+              </View>
+            }
+
+            {
+              item.type == 5 && // multichoice
+              <View style={{ marginTop: 8 }}>
+                {
+                  item?.options?.length > 0 && item?.options?.map((it: any, ii: number) => {
+                    return (
+                      <Pressable
+                        key={ii}
+                        hitSlop={{ top: 10, right: 10 }}
+                        onPress={() => {
+                          const out = values.includes(it.id) ? values.filter((id: any) => it.id != id) : [...values, it.id]
+                          const out_content = item?.options?.filter((item: any) => out.includes(item.id)).map((x: any) => x.content)
+
+                          let updateValue = LibObject.set(newData, out)('additions', i, 'value')
+                          let updateDisplayValue = LibObject.set(updateValue, out_content)('additions', i, 'display_value')
+                          setNewData(updateDisplayValue)
+                        }}
+                        style={{ padding: 3, marginBottom: 8, paddingHorizontal: 15, marginRight: 4, borderWidth: 1, borderRadius: 3, borderColor: values?.includes?.(it.id) ? "#fff" : "#9b9b9b", backgroundColor: values?.includes?.(it.id) ? LibStyle.colorPrimary : "#fff", justifyContent: 'center' }} >
+                        <LibTextstyle textStyle='body' text={it.content} style={{ color: values?.includes?.(it.id) ? (esp.isDebug("") ? "#fff" : "#000") : "#9b9b9b" }} />
+                      </Pressable>
+                    )
+                  })
+                }
+              </View>
+            }
+
+            {
+              item.type == 6 && // dropdown
+              <TouchableOpacity onPress={() => {
+                dialogDropdown.current?.show()
+                setDropdownData(item)
+                setIdx(i)
+              }} style={{ height: 40, borderRadius: 5, marginTop: 12, backgroundColor: "#ffffff", borderWidth: 1, borderColor: "#c5c5c5", flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 9 }}>
+                <Text allowFontScaling={false} style={{ fontSize: 12, color: values?.length > 0 ? "#000" : "#e5e5e5", marginRight: 15, }}>{values?.length > 0 ? display_values[0] : item.question}</Text>
+                {
+                  values?.length == 0 &&
+                  <LibIcon name='chevron-down' />
+                }
+              </TouchableOpacity>
+            }
+
+            {
+              item.is_content == 1 &&
+              <EventInput_rectangle
+                placeholder={esp.lang("event/additional_input", "other")}
+                placeholderTextColor='#c9c9c9'
+                style={{ borderRadius: 5, borderColor: '#c9c9c9' }}
+                defaultValue={newData?.additions?.[i]?.subvalue}
+                // value={newData?.additions?.[i]?.subvalue}
+                inputStyle={{ marginLeft: 0 }}
+
+                onChangeText={(text) => {
+                  let fillSubValue = LibObject.set(newData, text)('additions', i, 'subvalue')
+                  if (item.type == 4) {
+                    let emptyValue = LibObject.set(fillSubValue, [])('additions', i, 'value')
+                    let emptyDisplayValue = LibObject.set(emptyValue, [])('additions', i, 'display_value')
+                    setNewData(emptyDisplayValue)
+                  } else {
+                    setNewData(fillSubValue)
+                  }
+                }} />
+            }
+
+          </View>
+        </LibCollaps>
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+      <EventHeader title={esp.lang("event/additional_input", "header_title")} />
+      <LibKeyboard_avoid>
+        <ScrollView>
+          {data?.additions?.length > 0 && data?.additions?.map(renderCatNew)}
+
+        </ScrollView>
+        <View style={{ padding: 10 }} >
+          <EventButton
+            label={esp.lang("event/additional_input", "btn_save")}
+            backgroundColor={LibStyle.colorPrimary}
+            onPress={save}
+          />
+        </View>
+
+        <LibSlidingup ref={dialogDatePicker}>
+          <View style={{ backgroundColor: 'white', paddingBottom: 25, height: 230 }}>
+            <LibDatepicker
+              minDate={LibUtils.moment().add(-90, 'years').localeFormat('YYYY-MM-DD')}
+              maxDate={LibUtils.moment().localeFormat('YYYY-MM-DD')}
+              onDateChange={(dt) => {
+                let updateValue = LibObject.set(newData, [dt])('additions', getIdx(), 'value')
+                let updateDisplayValue = LibObject.set(updateValue, [LibUtils.moment(dt).localeFormat("DD MMMM YYYY")])('additions', getIdx(), 'display_value')
+                setNewData(updateDisplayValue)
+                dialogDatePicker.current?.hide()
+              }}
+              selectedDate={newData?.additions?.[getIdx()]?.value?.[0] || LibUtils.moment().localeFormat('YYYY-MM-DD')}
+            />
+          </View>
+        </LibSlidingup>
+
+        <LibSlidingup ref={dialogDropdown} >
+          <View style={{ width: 40, height: 3, borderRadius: 5, backgroundColor: "#fff", alignSelf: 'center', marginBottom: 10 }} />
+          <View style={{ maxHeight: LibStyle.height - (LibStyle.height / 5), backgroundColor: 'white', borderTopLeftRadius: 15, paddingHorizontal: 25, borderTopRightRadius: 15, padding: 10 }} >
+            <Pressable style={{ marginTop: 10, alignSelf: 'flex-end' }} onPress={() => dialogDropdown.current?.hide()}>
+              <LibIcon name='close' color={"#c9c9c9"} />
+            </Pressable>
+            <Text allowFontScaling={false} style={{ fontWeight: 'bold', fontSize: 16, marginBottom: 15 }}>{dropdownData?.question}</Text>
+
+            <ScrollView>
+              {
+                dropdownData?.options?.map((item: any, i: number) => {
+                  return (
+                    <Pressable onPress={() => {
+                      let updateValue = LibObject.set(newData, [item.id])('additions', getIdx(), 'value')
+                      let updateDisplayValue = LibObject.set(updateValue, [item.content])('additions', getIdx(), 'display_value')
+                      setNewData(updateDisplayValue)
+
+                      dialogDropdown.current?.hide()
+                    }} key={i} style={{ borderBottomWidth: 1, borderColor: '#c5c5c5', padding: 10, flexDirection: 'row', alignItems: "center" }}>
+                      <Text allowFontScaling={false} style={{ flex: 1, fontFamily: 'InterMedium', fontSize: 16, color: '#2C2B2D' }}>{item?.content}</Text>
+                    </Pressable>
+                  )
+                })
+              }
+
+            </ScrollView>
+
+          </View>
+        </LibSlidingup>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}

package/modules/event/alert.tsx

@@ -0,0 +1,32 @@
+// withHooks
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface EventAlertArgs {
+  
+}
+export interface EventAlertProps {
+  color: string
+  useIcon?: boolean
+  iconName?: string
+  msg: string
+  style?: any
+}
+export default function m(props: EventAlertProps): any {
+  return (
+    <View style={[{ margin: 10, backgroundColor: LibUtils.hexToRgba(props.color, 0.1) }, props.style]}>
+      <View style={{ height: 3, backgroundColor: props.color }} />
+      <View style={{ padding: 10, marginRight: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+        {
+          props.useIcon &&
+          <LibIcon name={props.iconName || 'information-outline'} size={18} />
+        }
+        <Text allowFontScaling={false} style={{ marginHorizontal: 10, fontSize: 12, lineHeight: 14, letterSpacing: 0.5, textAlign: 'justify' }}>{props.msg}</Text>
+      </View>
+    </View>
+  )
+}

package/modules/event/artist.tsx

@@ -0,0 +1,165 @@
+// withHooks
+
+import { applyStyle } from 'esoftplay';
+import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
+import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
+import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
+import { EventMessage } from 'esoftplay/cache/event/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+moment().locale('id')
+
+
+export interface BigbangArtistProps {
+
+}
+
+export default function m(props: BigbangArtistProps): any {
+  const [result, setResult] = useSafeState<any>()
+  const [resultEvent, setResultEvent] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>('')
+  const { isInPricingQueueConfig } = EventFirebase_socket()
+
+  const { title, has_addition } = LibNavigation.getArgsAll(props)
+  const url = LibNavigation.getArgs(props, 'url', 'event_artist')
+  const regex = /(\d+)$/;
+  const match = url.match(regex);
+  const [event_id] = useSafeState(match?.[1])
+
+  function loadData(): void {
+    /* get detail event untuk dapat config antrian */
+    new LibCurl(url, null,
+      (res) => {
+        new LibCurl(res?.[0]?.url_event || `event_detail/${event_id}`, null, (res) => {
+          setResultEvent(res)
+          if (res?.id) {
+            EventFirebase_socketProperty.eventIdQueue.set(res?.id)
+          }
+          if (res.allotment) {
+            esp.modProp("event/firebase_socket").userIdKeyReplacer.set({
+              t: Number(res.allotment.t),
+              s: Number(res.allotment.s),
+              priority: 1
+            })
+          }
+        }, (err) => {
+
+        }, 0)
+        setResult(res)
+      }, (err) => {
+        setError(err?.message)
+      })
+  }
+
+  useEffect(() => {
+    loadData?.()
+  }, [])
+
+  const itemWidth = (LibStyle.width - 2)
+  const itemHeight = itemWidth * 9 / 16
+
+  let subs = {
+    is_subscribed: resultEvent?.config?.is_subscribed,
+    is_subscribed_default: resultEvent?.config?.is_subscribed_default,
+    is_subscribed_label: resultEvent?.config?.is_subscribed_label
+  }
+
+  function renderItem(item: any, index: number) {
+    const styleId_Z2g4Hs7: any = { backgroundColor: '#FFC523', width: itemWidth, height: itemHeight, margin: 0.5, justifyContent: 'center', alignItems: 'center' }
+    let isNotAvailable = item?.price_list?.every((v: any) => v.status == 0)
+
+
+    return (
+      <TouchableOpacity key={index} onPress={() => {
+        if (isNotAvailable) {
+          LibToastProperty.show(esp.lang("event/artist", "ticket_not_available"))
+        } else {
+          EventIndexProperty.isLogin(() => {
+            let newItem = {
+              has_addition: has_addition,
+              ...item,
+            }
+            if (item.book_available == 1) {
+              if (isInPricingQueueConfig(result.id)) {
+                LibNavigation.navigateForResult('event/queue_pricing', { event_id: event_id, autoPass: false }).then((v) => {
+                  EventCountdownProperty.countdownTime.set(moment().add(EventFirebase_socketProperty.eventQueueConfig.get(event_id).time, 'seconds').localeFormat('YYYY-MM-DD HH:mm:ss'))
+                  if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
+                    LibNavigation.navigate('event/artist_detail_multi', {
+                      data: newItem,
+                      subscribed: subs
+                    })
+                  } else {
+                    LibNavigation.navigate('event/artist_detail', {
+                      data: newItem,
+                      subscribed: subs
+                    })
+                  }
+                })
+              } else {
+                if (item?.config?.hasOwnProperty('multiprice') && item?.config?.multiprice == 1) {
+                  LibNavigation.navigate('event/artist_detail_multi', {
+                    data: newItem,
+                    subscribed: subs
+                  })
+                } else {
+                  LibNavigation.navigate('event/artist_detail', {
+                    data: newItem,
+                    subscribed: subs
+                  })
+                }
+              }
+            } else {
+              LibToastProperty.show(esp.lang("event/artist_detail", "book_available", moment(item?.start_booking).serverFormat("DD MMMM YYYY HH:mm:ss")))
+            }
+          })
+        }
+      }} >
+        {
+          item && item.image != "" ?
+            <LibPicture style={applyStyle({ opacity: isNotAvailable ? 0.3 : 1, backgroundColor: '#f2f3f4', width: itemWidth, height: itemHeight, margin: 0.5 })} source={{ uri: item.image }} />
+            :
+            <View style={styleId_Z2g4Hs7}>
+              <Text numberOfLines={2} style={styleId_2cYE4h}>{item.title}</Text>
+            </View>
+        }
+      </TouchableOpacity >
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: 'white' }} >
+      <EventHeader title={title ? title : resultEvent?.event_title} iconShare={resultEvent?.url_share_artist && resultEvent?.url_share_artist !== ""}
+        onPressShare={() => {
+          LibUtils.share(resultEvent?.url_share_artist)
+        }} />
+      {
+        !result && !error ? <LibLoading /> :
+          <LibList
+            data={result}
+            keyExtractor={(item) => item.id}
+            onRefresh={loadData}
+            staticHeight={itemHeight + 1}
+            renderItem={renderItem}
+            ListEmptyComponent={
+              <EventMessage message={error} />
+            }
+          />
+      }
+    </View>
+  )
+}
+const styleId_2cYE4h: any = { padding: 15, color: 'white', fontSize: 24 }