esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/user/notification_list.tsx

@@ -0,0 +1,113 @@
+// withHooks
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibNotification } from 'esoftplay/cache/lib/notification/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { NotificationTranslate } from 'esoftplay/cache/notification/translate/import';
+import { UserNotification } from 'esoftplay/cache/user/notification/import';
+import esp from 'esoftplay/esp';
+
+import moment from 'esoftplay/moment';
+import React, { useRef } from 'react';
+import { Animated, Text, TouchableOpacity, View } from 'react-native';
+moment().locale('id')
+//@ts-ignore
+const AnimatedLibList = Animated.createAnimatedComponent(LibList)
+
+
+export interface UserNotification_listProps {
+  tag?: string,
+  ListHeaderComponent?: any,
+  group_id?: string
+}
+export default function m(props: UserNotification_listProps): any {
+  const reverseData = UserNotification.state().useSelector(s => s.data)
+  const lurl = LibNotification.state().useSelector(s => s)
+  let filtered: any = reverseData
+  let unOpenNotif = []
+  let pattern = new RegExp(/^#[A-Za-z]+\s{0,}/, 'g')
+
+  if (!props.tag) {
+    filtered = reverseData?.filter((x: any) => !String(x.title).match(pattern))
+  } else {
+    filtered = reverseData?.filter((x: any) => x.title.includes(props.tag))
+  }
+
+  if (props.group_id) {
+    filtered = filtered?.filter((x: any) => x.group_id == props.group_id)
+  }
+  // untuk menampilkan tombol tandai semua
+  unOpenNotif = filtered?.filter((item: any) => item.status != 2)
+
+  function setAllRead() {
+    LibDialog.warningConfirm(esp.lang("user/notification_list", "title_warning_read_all"), esp.lang("user/notification_list", "warning_read_all"), esp.lang("user/notification_list", "btn_yes_read_all"), () => {
+      const all = filtered?.filter((x: any) => x.status != 2)?.map((item: any) => item.id)
+      LibNotification.markRead(...all)
+    }, esp.lang("user/notification_list", "btn_cancel_read_all"), () => { })
+  }
+
+  let scrollY = useRef(new Animated.Value(0)).current
+  const showAllOpacity = scrollY.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+    extrapolate: "clamp",
+  })
+
+  function renderItem(item: any) {
+    const styleId_2g7dyJ: any = { fontSize: 12, fontWeight: item.status == 2 ? "normal" : "bold", fontStyle: "normal", letterSpacing: 0, color: item.status == 2 ? '#909090' : LibStyle.colorPrimary, fontFamily: item.status == 2 ? "Arial" : "ArialBold", marginBottom: 8 }
+    return (
+      <TouchableOpacity onPress={() => { LibNotification.openNotif(item) }} >
+        <View style={styleId_sBNSs} >
+          <View>
+            <NotificationTranslate
+              title={item.title.replace(pattern, '')}
+              titleStyle={styleId_2g7dyJ}
+              message={item?.message}
+              messageStyle={styleId_Z1q7idY}
+              date={moment(item.created).fromNow()}
+              dateStyle={styleId_1642yu}
+              buttonStyle={{ marginLeft: 10, marginTop: 5 }}
+              buttonTextStyle={{ fontSize: 9, fontFamily: "Arial" }}
+            />
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <AnimatedLibList
+        data={filtered}
+        onScroll={
+          Animated.event(
+            [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+            { useNativeDriver: false }
+          )
+        }
+        onRefresh={() => LibNotification.loadData(true)}
+        onEndReached={() => LibNotification.loadData()}
+        onEndReachedThreshold={1}
+        ListFooterComponent={lurl == -1 ? null : <LibLoading />}
+        ListHeaderComponent={props.ListHeaderComponent}
+        ListEmptyComponent={<ComponentMessage message={esp.lang("user/notification_list", "msg_notif_empty")} />}
+        renderItem={renderItem}
+      />
+
+      {
+        unOpenNotif?.length > 0 &&
+        <Animated.View style={[{ opacity: props.tag == "" ? 1 : showAllOpacity, position: 'absolute', borderRadius: 35, bottom: 0, left: LibStyle.width / 4, right: LibStyle.width / 4, alignContent: 'center', alignItems: 'center', margin: 10, padding: 13, backgroundColor: '#fff' }, LibStyle.elevation(2)]}>
+          <TouchableOpacity onPress={setAllRead}>
+            <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: '#909090', fontFamily: "Arial" }} >{esp.lang("user/notification_list", "mark_read_all")}</Text>
+          </TouchableOpacity>
+        </Animated.View>
+      }
+
+    </View>
+  )
+}
+const styleId_sBNSs: any = { padding: 16, flexDirection: "row", backgroundColor: "white", marginBottom: 3, marginHorizontal: 0, width: LibStyle.width, ...LibStyle.elevation(1.5) }
+const styleId_Z1q7idY: any = { fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, color: "#909090" }
+const styleId_1642yu: any = { fontSize: 9, marginTop: 5, fontFamily: "Arial", fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#acacac" }

package/modules/user/order.tsx

@@ -0,0 +1,22 @@
+// withHooks
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { EventOrder } from 'esoftplay/cache/event/order/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { View } from 'react-native';
+
+
+export interface UserOrderProps {
+
+}
+export default function m(props: UserOrderProps): any {
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("user/order", "header")} />
+      <EventOrder />
+    </View>
+  )
+}

package/modules/user/otp.tsx

@@ -0,0 +1,224 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentOtp } from 'esoftplay/cache/component/otp/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { MarketCountdown } from 'esoftplay/cache/market/countdown/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import { UserRegisterProperty } from 'esoftplay/cache/user/register/import';
+import { UserReminderProperty } from 'esoftplay/cache/user/reminder/import';
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+
+
+export interface UserOtpArgs {
+  phone: string,
+  type: "sms" | "whatsapp",
+  phone_code: string
+  from?: string
+}
+export interface UserOtpProps {
+
+}
+
+export function requestOTP(phone: string, type: "sms" | "whatsapp", cb: () => void): void {
+  const post = { phone, type }
+
+  LibProgress.show(esp.lang("user/otp", "wait_req"))
+  new LibCurl('user_register_otp_request', post, (res, msg) => {
+    LibProgress.hide()
+    cb()
+  }, (err) => {
+    LibProgress.hide()
+    LibDialog.warning(esp.lang("user/otp", "req_error"), err?.message)
+  }, 1)
+}
+
+
+export default function m(props: UserOtpProps): any {
+  const user = UserClass.state().useSelector(t => t)
+  const { phone, phone_code, type, from } = LibNavigation.getArgsAll(props)
+
+  const otpWidth = (LibStyle.width - 61) * 0.15
+  const otpHeight = otpWidth * 107 / 75
+  const [loading, setLoading] = useSafeState(false)
+  const [error, setError] = useSafeState('')
+
+
+  useEffect(() => {
+    if (user) {
+      requestVerificationPhone(phone, type, true)
+    }
+  }, [])
+
+  function countDown() {
+    if (user) {
+      requestVerificationPhone(phone, type, false)
+    } else {
+      requestOTP(phone, type, () => { })
+    }
+  }
+
+  function requestVerificationPhone(phone: string, type: 'sms' | 'whatsapp', isFirst: boolean) {
+    let post = {
+      phone, phone_code, type
+    }
+
+    if (isFirst) {
+      setLoading(true)
+      request((res, msg) => {
+        setLoading(false)
+      }, (err) => {
+        setLoading(false)
+        setError(err?.message)
+      })
+    } else {
+      request((res, msg) => { }, (err) => {
+        LibToastProperty.show(err?.message)
+      })
+    }
+
+    function request(onDone: (res: any, msg: string) => void, onFailed?: (err: any) => void) {
+      new LibCurl('user_phone_request', post,
+        (res, msg) => {
+          esp.log({ msg, res });
+          onDone(res, msg)
+        }, (err) => {
+          onFailed && onFailed(err)
+        }, 1)
+    }
+  }
+
+  function verifOTP(otp: string) {
+    const post = {
+      phone, phone_code, otp: otp
+    }
+
+    const url = user ? 'user_phone_verify' : 'user_register_otp_verify'
+
+    LibProgress.show()
+    new LibCurl(url, post, (res, msg) => {
+      if (user) {
+        UserProfileProperty.update(() => {
+          UserReminderProperty.setReminder()
+        })
+        LibDialog.info(esp.lang("user/otp", "verif_ok"), msg)
+        if (from == "user/bank_add") {
+          LibNavigation.back(2)
+        } else {
+          LibNavigation.backToRoot()
+          LibNavigation.navigate('user/profile')
+        }
+      } else {
+        LibNavigation.navigate('user/register_detail', { phone })
+      }
+      LibProgress.hide()
+    }, (err) => {
+      LibProgress.hide()
+      LibDialog.warning(esp.lang("user/otp", "verif_faild"), err?.message)
+    }, 1)
+
+  }
+
+  function ContainerView(props: any) {
+    const [otp, setOtp] = useSafeState<string | null>(null);
+    const [seconds, setSeconds] = useSafeState<number>(60);
+
+    return (
+      <ScrollView keyboardShouldPersistTaps="handled">
+        <View style={{ marginTop: 10, marginBottom: 15, marginHorizontal: 17 }}>
+          <Text allowFontScaling={false} style={{ marginTop: 22, fontFamily: 'Arial', fontSize: 16, color: '#2C2B2D', textAlign: 'center' }} >{esp.lang("user/otp", "input_otp")}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, color: '#2C2B2D', textAlign: 'center' }} >{esp.lang("user/otp", "input_otp1")}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 15, fontFamily: 'Arial', fontSize: 26, color: LibStyle.colorPrimary, textAlign: 'center' }} >+{UserRegisterProperty.addDash(phone)}</Text>
+        </View>
+        <ComponentOtp
+          length={6}
+          boxStyle={{ backgroundColor: otp ? "white" : '#f1f1f1', borderWidth: 0, borderRadius: 8, width: otpWidth, height: otpHeight, ...LibStyle.elevation(2) }}
+          onChangeOtp={(d) => {
+            if (d.length == 6) {
+              setOtp(d)
+            } else {
+              setOtp(null)
+            }
+          }}
+        />
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 10, marginBottom: 50 }}>
+          {
+            seconds != 0 ?
+              <>
+                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, color: '#2C2B2D', opacity: 0.5 }} >{esp.lang("user/otp", "wait")}</Text>
+                <MarketCountdown
+                  style={{ fontFamily: 'Arial', fontSize: 14, color: "#000" }}
+                  expired={moment().add(seconds, "seconds").format("YYYY-MM-DD HH:mm:ss")}
+                  onExpired={() => {
+                    setSeconds(0)
+                  }}
+                />
+                <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, color: '#484747', opacity: 0.5, }} >{esp.lang("user/otp", "resend")}</Text>
+              </>
+              :
+              <Pressable onPress={() => {
+                setSeconds(60)
+                props?.onRequestAgain()
+              }}>
+                <Text style={{ fontFamily: 'Arial', fontSize: 16, marginTop: 10, color: LibStyle.colorBrown }}>{esp.lang("user/otp", "send_code_again")}</Text>
+              </Pressable>
+          }
+        </View>
+        <ComponentButton label={esp.lang("user/otp", "btn_verif")}
+          style={{ marginHorizontal: 17 }}
+          backgroundColor={otp?.length == 6 ? undefined : LibStyle.colorGrey}
+          onPress={() => {
+            if (otp && otp.length == 6) {
+              props?.onVerifOTP(otp)
+            }
+          }} />
+      </ScrollView>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("user/otp", "title_verif_phone")} notif />
+      {
+        user ?
+          <>
+            {
+              loading ? <LibLoading /> :
+                error != '' ? <ComponentMessage message={error} /> :
+                  <ContainerView
+                    onVerifOTP={(t: any) => {
+                      verifOTP(t)
+                    }}
+                    onRequestAgain={() => {
+                      countDown()
+                    }}
+                  />
+            }
+          </>
+          :
+          <ContainerView
+            onVerifOTP={(t: any) => {
+              verifOTP(t)
+            }}
+            onRequestAgain={() => {
+              countDown()
+            }}
+          />
+      }
+
+    </View>
+  )
+}

package/modules/user/otp_method.tsx

@@ -0,0 +1,90 @@
+// withHooks
+
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/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 { UserOtpProperty } from 'esoftplay/cache/user/otp/import';
+import { UserRegisterProperty } from 'esoftplay/cache/user/register/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+
+export interface UserOtp_methodArgs {
+  phone: string,
+}
+export interface UserOtp_methodProps {
+
+}
+export default function m(props: UserOtp_methodProps): any {
+  const { phone } = LibNavigation.getArgsAll<UserOtp_methodArgs>(props)
+  const _method = [
+    {
+      id: 1,
+      title: 'WhatsApp',
+      type: 'whatsapp'
+    },
+    {
+      id: 2,
+      title: 'SMS',
+      type: 'sms'
+    }
+  ]
+
+  function requestOTP(type: "sms" | "whatsapp") {
+
+    UserOtpProperty.requestOTP(phone, type, () => {
+      LibNavigation.navigate('user/otp', { phone, type })
+    })
+
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("user/otp_method", "header")} notif />
+      <ScrollView>
+        <View style={{ alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>
+          <LibPicture source={esp.assets('icons/ic_devices.png')} style={{ width: 150, height: 150 }} resizeMode="contain" />
+        </View>
+        <View style={{ marginTop: 10, marginBottom: 15, marginHorizontal: 17 }}>
+          <Text allowFontScaling={false} style={{ marginTop: 22, fontFamily: 'Arial', fontSize: 16, color: '#2C2B2D', textAlign: 'center' }} >{esp.lang("user/otp_method", "method")}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: 'Arial', fontSize: 16, color: '#2C2B2D', textAlign: 'center' }} >{esp.lang("user/otp_method", "otp_send_to")}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 15, fontFamily: 'ArialBold', fontSize: 24, color: LibStyle.colorPrimary, textAlign: 'center' }} >+{UserRegisterProperty.addDash(phone)}</Text>
+        </View>
+        {
+          _method.map((item: any, index: number) => (
+            <ComponentButton
+              key={index}
+              style={{ color: '#888788', marginHorizontal: 15, marginTop: 10 }}
+              onPress={() => {
+                LibDialog.custom(
+                  <View style={{ padding: 5 }}>
+                    <View style={{ paddingVertical: 10, paddingHorizontal: 15 }}>
+                      <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 18, fontWeight: "normal", fontStyle: "normal", textAlign: "center", letterSpacing: 0, color: '#4a4a4a' }}>+{UserRegisterProperty.addDash(phone)}</Text>
+                      <Text allowFontScaling={false} style={{ marginTop: 17, fontFamily: "Arial", fontSize: 14, lineHeight: 17, fontWeight: "normal", fontStyle: "normal", textAlign: "center", letterSpacing: 0, color: '#4a4a4a' }}>{esp.lang("user/otp_method", "send_to", item?.title)}</Text>
+                    </View>
+                    <View style={{ marginTop: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }} >
+                      <View style={{ width: LibStyle.width * 0.5 - 60 }}>
+                        <ComponentButton label={esp.lang("user/otp_method", "cancel")} onPress={() => {
+                          LibDialog.hide()
+                        }} backgroundColor="#fff" fontColor="#724225" borderColor="#724225" />
+                      </View>
+                      <View style={{ width: LibStyle.width * 0.5 - 60 }}>
+                        <ComponentButton label={esp.lang("user/otp_method", "send")} onPress={() => {
+                          requestOTP(item?.type)
+                          LibDialog.hide()
+                        }} backgroundColor={LibStyle.colorPrimary} fontColor="#fff" />
+                      </View>
+                    </View>
+                  </View>
+                )
+              }} label={esp.lang("user/otp_method", "btn_send", item?.title)} />
+          ))
+        }
+      </ScrollView>
+    </View>
+  )
+}