esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/user/bank.tsx

@@ -0,0 +1,138 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { applyStyle } from 'esoftplay';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibList } from 'esoftplay/cache/lib/list/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import React, { useEffect } from 'react';
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+
+
+export interface UserBankProps {
+
+}
+export default function m(props: UserBankProps): any {
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+  const { send_back } = LibNavigation.getArgsAll(props)
+
+  const sendBackResult = LibNavigation.useBackResult(props)
+
+  function loadData(): void {
+    new LibCurl('user_bank', null, (res, msg) => {
+      setResult(res)
+      setError(undefined)
+    }, (error) => {
+      setResult(undefined)
+      setError(error?.message)
+    }, 1)
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function deleteBank(url: string): void {
+    new LibCurl(url, null, (result, msg) => {
+      LibToastProperty.show(msg)
+      loadData()
+    }, (error) => {
+      LibDialog.warning(esp.lang("user/bank_add", "del_err"), error?.message)
+    })
+  }
+
+  function checkValidateBank(item: any) {
+    new LibCurl("user_bank_check?id=" + item?.id, null, (result, msg) => {
+      sendBackResult(item)
+    }, (error) => {
+      LibDialog.warning(esp.lang("user/bank_add", "del_err"), error?.message)
+    })
+  }
+
+
+  function renderItem(item: any, i: number) {
+    return (
+      <Pressable onPress={() => {
+        if (send_back) {
+          if (item.status == 0) {
+            checkValidateBank(item)
+          } else {
+            sendBackResult(item)
+          }
+        }
+      }} key={i} style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center', margin: 10, padding: 10, backgroundColor: '#fff', borderRadius: 5, ...LibStyle.elevation(2) })}>
+        <View style={applyStyle({ flex: 1, marginRight: 20 })}>
+          {
+            item.bank_owner != "" ?
+              <Text allowFontScaling={false} style={applyStyle({ marginTop: 6, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "rgba(0, 0, 0, 0.9)" })}>{item.bank_owner} {item.bank_display == "" ? "" : "(" + item.bank_display + ")"}</Text>
+              :
+              <Text allowFontScaling={false} style={applyStyle({ marginTop: 6, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "rgba(0, 0, 0, 0.9)" })}>{"(" + item.bank_display + ")"}</Text>
+          }
+          <View style={applyStyle({ flexDirection: 'row', justifyContent: 'space-between' })}>
+            <Text allowFontScaling={false} style={applyStyle({ marginTop: 6, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#b8b8b8" })}>{item.bank_name}</Text>
+            <Text allowFontScaling={false} style={applyStyle({ marginTop: 7, fontFamily: "DecoNumbers", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "rgba(0, 0, 0, 0.9)" })}>*{item?.bank_number?.substr(item.bank_number.length - 4)}</Text>
+          </View>
+        </View>
+        <TouchableOpacity onPress={() => {
+          LibDialog.warningConfirm(esp.lang("user/bank", "warning_title"), esp.lang("user/bank", "warning_msg"), esp.lang("user/bank", "warning_ok"), () => {
+            deleteBank(item.url_delete)
+          }, esp.lang("user/bank", "warning_no"), () => {
+
+          })
+
+        }}>
+          <LibIcon name='trash-can-outline' color={LibStyle.colorRed} />
+        </TouchableOpacity>
+        {/* <LibPicture style={applyStyle({ width: 13, height: 13, alignSelf: 'center', marginLeft: 15, marginRight: 15 })} source={esp.assets('icons/ic_chevron_right.png')} /> */}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("user/bank", "bank_list")} />
+      {
+        result && !error &&
+        <View style={{ margin: 10, }}>
+          <Text allowFontScaling={false} style={{ fontWeight: 'bold' }}>{esp.lang("user/bank", "max_bank", result?.config?.max_bank)}</Text>
+          <Text allowFontScaling={false} style={{ fontSize: 14, marginTop: 4, color: '#b8b8b8' }}>{esp.lang("user/bank", "notes")}</Text>
+        </View>
+      }
+      <LibList
+        data={result?.list}
+        onRefresh={loadData}
+        renderItem={renderItem}
+        ListEmptyComponent={
+          <ComponentMessage message={error} />
+        }
+      />
+      <View style={{ padding: 10, backgroundColor: '#fff' }}>
+        <ComponentButton
+          label={esp.lang("user/bank", "add_bank")}
+          backgroundColor={(Number(result?.list?.length) > Number(result?.config?.max_bank) ? LibStyle.colorBgGrey : LibStyle.colorPrimary)}
+          onPress={() => {
+            if (Number(result?.list?.length) > Number(result?.config?.max_bank)) {
+              LibDialog.warning(esp.lang("user/bank", "oops"), esp.lang("user/bank", "max_limit"))
+            } else {
+              LibNavigation.navigateForResult('user/bank_add', { useOtp: result?.config?.otp /* 0 tidak pake otp, 1 pake otp */ }, 989).then((value) => {
+                if (value) {
+                  loadData()
+                }
+              })
+            }
+          }}
+        />
+      </View>
+    </View>
+  )
+}

package/modules/user/bank_add.tsx

@@ -0,0 +1,286 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { LibInput_rectangle2 } from 'esoftplay/cache/lib/input_rectangle2/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/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 { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { ComponentAlert } from 'esoftplay/cache/component/alert/import';
+import { ComponentDialog_otp } from 'esoftplay/cache/component/dialog_otp/import';
+import React, { useRef } from 'react';
+import { Keyboard, Pressable, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface UserBankAddProps {
+  navigation: any,
+}
+
+export default function m(props: UserBankAddProps): any {
+  const { useOtp } = LibNavigation.getArgsAll(props)
+  const [bank, setBank] = useSafeState<any>('')
+  let inputBankNumber = useRef<LibInput_rectangle2>(null)
+  let inputBankId = useRef<LibInput_rectangle2>(null)
+  let inputBankName = useRef<LibInput_rectangle2>(null)
+
+  let dialogMethod = React.useRef<ComponentSlidingup>(null)
+
+  const [bankAccount, setBankAccount] = useSafeState()
+  const user = UserClass.state().useSelector(t => t)
+  const sendBackResult = LibNavigation.useBackResult(props)
+
+  let verifMethod = [
+    {
+      id: 1,
+      type: 'sms',
+      name: 'SMS ke',
+      subtitle: user?.phone,
+      icon: 'message-text-outline',
+    },
+    {
+      id: 2,
+      type: 'whatsapp',
+      name: 'Whatsapp ke',
+      subtitle: user?.phone,
+      icon: 'whatsapp',
+    },
+  ]
+
+  function removeSpace(text: any) {
+    inputBankNumber?.current?.setText(text.replace(/\D/g, ''))
+    return;
+  }
+
+
+  function checkBankOwner() {
+    if (inputBankId.current!.getText() == '') {
+      LibToastProperty.show(esp.lang("user/bank_add", "msg_error_input_bank"))
+      // inputBankId.focus()
+      return
+    }
+
+    if (inputBankName.current!.getText() == '') {
+      LibToastProperty.show(esp.lang("user/bank_add", "no_name_rek"))
+      inputBankName?.current?.focus()
+      return
+    }
+
+    if (inputBankNumber.current!.getText() == '') {
+      LibToastProperty.show(esp.lang("user/bank_add", "msg_error_input_no_bank_account"))
+      inputBankNumber?.current?.focus()
+      return
+    }
+
+    LibProgress.show(esp.lang("user/bank_add", "wait"))
+    let post = {
+      account: inputBankNumber.current!.getText(),
+      bank_id: bank.id
+    }
+    new LibCurl('bank_check', post, (res, msg) => {
+      LibProgress.hide()
+      esp.log(res);
+      setBankAccount(res)
+    }, (err) => {
+      LibProgress.hide()
+      LibToastProperty.show(err?.message)
+    }, 1)
+  }
+
+
+  function addBank(otp?: any) {
+    let post: any = {
+      bank_owner: bankAccount?.name,
+      bank_display: inputBankName?.current?.getText().trim(),
+      bank_number: inputBankNumber.current!.getText(),
+      bank_id: bank.id,
+    }
+
+    if (useOtp == 1) {
+      post.otp = otp
+    }
+
+    LibProgress.show(esp.lang("user/bank_add", "msg_wait"))
+    new LibCurl('user_bank_add', post, (result, msg) => {
+      esp.log({ result, post });
+      LibProgress.hide()
+      LibDialog.info(esp.lang("user/bank_add", "title_success_add_bank"), msg);
+      sendBackResult(result)
+    }, (error) => {
+      LibDialog.warning(esp.lang("user/bank_add", "err"), error?.message)
+      LibProgress.hide()
+    }, 1)
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader title={esp.lang("user/bank_add", "add_bank_account")} />
+      <LibKeyboard_avoid style={{ flex: 1 }} >
+
+        <ScrollView style={[{ borderRadius: 5, margin: 10, padding: 10, backgroundColor: '#fff' }, LibStyle.elevation(3)]}>
+          <ComponentLabel_input label={esp.lang("user/bank_add", "label_input_name")} mandatory />
+          <ComponentTouchable onPress={() => {
+            LibNavigation.navigateForResult('user/bank_list', null, 230815).then((bank) => {
+              inputBankId.current?.setText(bank.name)
+              setBank(bank);
+            })
+          }}>
+            <View pointerEvents="none" >
+              <LibInput_rectangle2
+                ref={inputBankId}
+
+                style={{ borderColor: '#c4c4c4', borderRadius: 4, height: 35, marginTop: 8 }}
+                onPress={() => {
+                  LibNavigation.navigateForResult('user/bank_list', null, 231549).then((bank) => {
+                    inputBankId.current?.setText(bank.name)
+                    setBank(bank);
+                  })
+                }}
+                editable={false}
+                defaultValue={bank?.name}
+                placeholder={esp.lang("user/bank_add", "placeholder_input_name")}
+              />
+            </View>
+          </ComponentTouchable>
+
+          <ComponentLabel_input label={esp.lang("user/bank_add", "name_rek")} mandatory />
+          <LibInput_rectangle2
+            ref={inputBankName}
+            style={{ borderColor: '#c4c4c4', borderRadius: 4, height: 35, marginTop: 8 }}
+            placeholder={esp.lang("user/bank_add", "input_rek_name")}
+          />
+
+          <ComponentLabel_input label={esp.lang("user/bank_add", "label_input_no_bank_account")} mandatory />
+          <View style={{ flexDirection: 'row' }}>
+            <LibInput_rectangle2
+              ref={inputBankNumber}
+              style={{ flex: 2, borderColor: '#c4c4c4', borderRadius: 4, height: 35, marginTop: 8 }}
+              keyboardType="numeric"
+              placeholder={esp.lang("user/bank_add", "placeholder_input_no_bank_account")}
+              onBlur={() => {
+                removeSpace(inputBankNumber?.current?.getText())
+              }}
+            />
+            <TouchableOpacity onPress={() => {
+              checkBankOwner()
+            }} style={{ flex: 1, borderRadius: 5, marginTop: 10, marginLeft: 10, height: 32, justifyContent: 'center', alignContent: 'center', alignItems: 'center', backgroundColor: LibStyle.colorGreen }}>
+              <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: 'bold', color: '#fff' }}>{esp.lang("user/bank_add", "check_bank_name")}</Text>
+            </TouchableOpacity>
+          </View>
+
+          {
+            bankAccount &&
+            <View style={{ padding: 10, borderRadius: 5, marginTop: 25, margin: 3, backgroundColor: '#fff', ...LibStyle.elevation(3) }}>
+              <Text allowFontScaling={false} style={{ fontSize: 12, color: '#9b9b9b', marginBottom: 3 }}>{esp.lang("user/bank_add", "bank_name")}</Text>
+              <Text allowFontScaling={false} style={{}}>{bankAccount?.name == "" ? inputBankName?.current?.getText() : bankAccount?.name}</Text>
+            </View>
+          }
+
+        </ScrollView>
+      </LibKeyboard_avoid>
+      <ComponentButton label={esp.lang("user/bank_add", "add_rek")} backgroundColor={bankAccount ? LibStyle.colorGreen : '#aaa'} style={{ margin: 10 }} onPress={() => {
+        if (bankAccount) {
+
+          if (useOtp == 1) {
+            dialogMethod.current?.show()
+          } else {
+            LibDialog.confirm(esp.lang("user/bank_add", "confirm"), esp.lang("user/bank_add", "confirm_msg", bank.name, inputBankNumber?.current?.getText() || '', bankAccount?.name), esp.lang("user/bank_add", "confirm_ok"), () => {
+              addBank()
+            }, esp.lang("user/bank_add", "confirm_cancel"), () => { })
+          }
+
+        } else {
+          LibToastProperty.show(esp.lang("user/bank_add", "check_name"))
+        }
+      }} />
+
+      <ComponentSlidingup ref={dialogMethod}>
+        <View style={{ backgroundColor: '#fff', /* height: LibStyle.height / 3, */ width: LibStyle.width, borderTopLeftRadius: 10, borderTopRightRadius: 10, paddingTop: 15, paddingBottom: 30 }}>
+          <Pressable onPress={() => dialogMethod.current!.hide()} style={{ marginLeft: 20, marginBottom: 10 }}>
+            <LibIcon name='close' />
+          </Pressable>
+
+          {
+            user?.phone_verified == 1 ?
+              <>
+                {
+                  user?.phone != "" ?
+                    <>
+                      <ComponentDialog_otp
+                        data={verifMethod}
+                        onPress={(item: any) => {
+                          dialogMethod.current!.hide()
+                          Keyboard.dismiss()
+
+                          let postOtp = {
+                            type: item?.type
+                          }
+
+                          LibNavigation.navigateForResult('user/bank_otp', {
+                            itemVerif: item,
+                            url: bankAccount?.url_next,
+                            postOtp: postOtp,
+                          }, 78273648).then((value) => {
+                            addBank(value)
+                          })
+                        }}
+                      />
+                    </>
+                    :
+                    <View style={{ marginTop: 30 }}>
+                      <View style={{ marginHorizontal: 20, backgroundColor: LibUtils.hexToRgba("#dc143c", 0.1) }}>
+                        <View style={{ height: 3, backgroundColor: "#dc143c" }} />
+                        <View style={{ padding: 10, marginRight: 10, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                          <LibIcon name='information-outline' size={18} />
+                          <Text allowFontScaling={false} style={{ marginHorizontal: 10, fontSize: 12, lineHeight: 14, letterSpacing: 0.5, }}>{"Anda perlu melakukan verifikasi No.HP untuk menambahkan rekening bank baru."}</Text>
+                        </View>
+                      </View>
+                      <TouchableOpacity onPress={() => {
+                        LibNavigation.navigate('user/profile_edit', { phoneVerifPointer: true })
+                        dialogMethod.current!.hide()
+                      }}>
+                        <Text allowFontScaling={false} style={{ marginTop: 20, fontFamily: "ArialBold", textDecorationLine: 'underline', fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: LibStyle.colorPrimary }} >{"Verifikasi No.HP sekarang"}</Text>
+                      </TouchableOpacity>
+                    </View>
+                }
+              </>
+              :
+              <View>
+                <ComponentAlert
+                  style={{ margin: 15 }}
+                  color='#FFC523'
+                  msg={esp.lang("user/phone_check", "no.hp_not_valid")}
+                  useIcon
+                />
+                <ComponentButton
+                  label='Verifikasi Sekarang'
+                  style={{ margin: 15 }}
+                  onPress={() => {
+                    dialogMethod.current?.hide()
+                    LibNavigation.navigate('user/phone_check', {
+                      from: 'user/bank_add'
+                    })
+                  }}
+                />
+              </View>
+          }
+
+        </View>
+      </ComponentSlidingup>
+
+
+
+    </View>
+  )
+}

package/modules/user/bank_list.tsx

@@ -0,0 +1,82 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+
+
+
+export interface UserBankListProps {
+
+}
+export default function m(props: UserBankListProps): any {
+
+  const [banks, setBanks] = useSafeState<any>([])
+  const [query, setQuery] = useSafeState<string>('')
+
+
+
+  function loadData(): void {
+    new LibCurl('bank', null,
+      (res) => {
+        setBanks(res.list)
+      },
+      () => {
+
+      }
+    )
+  }
+
+  useEffect(() => {
+    loadData()
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  let _bank = banks.filter((value: any) => (value.name).toLowerCase().includes((query).toLowerCase()))
+
+  function renderItem(item: any) {
+    return (
+      <ComponentTouchable onPress={() => {
+        LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props))
+      }}>
+        <View style={styleId_Z2lCK5O}>
+          <View style={styleId_Z1IS0fI}>
+            <LibPicture style={styleId_10jPnO} source={{ uri: item.image }} />
+            <Text allowFontScaling={false} style={styleId_Z1rEUS2}>{item.name}</Text>
+          </View>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <ComponentHeader
+        onChangeText={(q) => { setQuery(q) }}
+        searchPlaceholder={esp.lang("user/bank_list", "placeholder_search_bank")} />
+      {
+        !banks ?
+          <LibLoading />
+          :
+          <LibList
+            key={query}
+            data={_bank}
+            renderItem={renderItem}
+          />
+      }
+    </View>
+  )
+}
+const styleId_Z2lCK5O: any = { padding: 10, width: LibStyle.width, borderBottomColor: '#cdcdcd', borderBottomWidth: 1 }
+const styleId_Z1IS0fI: any = { flexDirection: 'row' }
+const styleId_10jPnO: any = { height: 30, width: 30, resizeMode: 'contain' }
+const styleId_Z1rEUS2: any = { marginLeft: 15, marginTop: 6, fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0, color: "rgba(0, 0, 0, 0.9)" }

package/modules/user/bank_otp.tsx

@@ -0,0 +1,141 @@
+// withHooks
+import { useEffect } from 'react';
+
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPin } from 'esoftplay/cache/lib/pin/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+import React from 'react';
+import { ImageBackground, Pressable, RefreshControl, ScrollView, Text, View } from 'react-native';
+
+
+export interface UserBank_otpArgs {
+
+}
+export interface UserBank_otpProps {
+
+}
+export default function m(props: UserBank_otpProps): any {
+
+  const { url, postOtp, itemVerif }: any = LibNavigation.getArgsAll(props)
+  const [result, setResult] = useSafeState<any>()
+  const [refreshing, setRefreshing] = useSafeState<boolean>(false);
+  const [seconds, setSeconds] = useSafeState<any>(300)
+  const sendBackResult = LibNavigation.useBackResult(props)
+
+  function onRefresh() {
+    setRefreshing(true)
+    loadData()
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData() {
+    new LibCurl(url, postOtp, (res, msg) => {
+      setRefreshing(false)
+
+      setResult(res)
+    }, (error) => {
+      LibDialog.warningConfirm(esp.lang("user/edit_phone_otp", "load_err"), error?.message, esp.lang("user/edit_phone_otp", "load_ok"), () => {
+        LibNavigation.back()
+      }, "", () => { })
+      setRefreshing(false)
+    }, 1)
+  }
+
+  useEffect(() => {
+    let myInterval = setInterval(() => {
+      if (seconds > 0) {
+        setSeconds(seconds - 1);
+      }
+      if (seconds === 0) {
+        clearInterval(myInterval)
+      }
+    }, 1000)
+    return () => {
+      clearInterval(myInterval);
+    }
+  }, [seconds])
+
+  function countDown() {
+    setSeconds(300)
+    loadData()
+  }
+
+  function format(time?: any) {
+    // Hours, minutes and seconds
+    var hrs = ~~(time / 3600);
+    var mins = ~~((time % 3600) / 60);
+    var secs = ~~time % 60;
+
+    // Output like "1:01" or "4:03:59" or "123:03:59"
+    var ret = "";
+    if (hrs > 0) {
+      ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
+    }
+    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
+    ret += "" + secs;
+    return ret;
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("user/bank_otp", "header_title")} />
+
+      <ImageBackground source={esp.assets('bg_login.png')} style={{ flex: 1, justifyContent: 'center' }} resizeMode={'cover'} >
+
+        {
+          __DEV__ && esp.isDebug("") && result &&
+          <View style={{ position: 'absolute', flexDirection: 'row', top: 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' }}>
+              <LibTextstyle text={esp.lang("user/edit_phone_otp", "otp", result?.otp)} textStyle='callout' style={{ marginLeft: 10, color: '#fff' }} />
+            </View>
+          </View>
+        }
+
+        <ScrollView style={{ flex: 1 }} refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }>
+          <View style={{ marginTop: LibStyle.height / 3.5, padding: 20, margin: 20, borderWidth: esp.isDebug("") ? 1 : 0, borderStyle: 'dashed', borderRadius: 20, borderColor: '#000' }}>
+            {
+              <View style={{ justifyContent: 'center', alignSelf: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 18, textAlign: "center", textAlignVertical: 'center', color: '#000' }} >{esp.lang("user/edit_phone_otp", "input")}</Text>
+                <Text allowFontScaling={false} style={{ marginTop: 10, letterSpacing: 1, marginHorizontal: 10, fontFamily: "Arial", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: '#000', lineHeight: 20, }} >{esp.lang("user/edit_phone_otp", "code_send", itemVerif?.name, itemVerif?.subtitle)}</Text>
+                <LibPin length={6} onChangePin={(p) => {
+                  if (p.length == 6) {
+                    sendBackResult(p)
+                  }
+                }} />
+              </View>
+            }
+
+            <View style={{ alignItems: 'center' }}>
+              {
+                seconds != 0 &&
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("user/edit_phone_otp", "wait")}</Text>
+                  <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "ArialBold", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}>{format(seconds) + (seconds > 60 ? esp.lang("user/edit_phone_otp", "minute") : esp.lang("user/edit_phone_otp", "second"))}</Text>
+                  <Text allowFontScaling={false} style={{ alignSelf: 'center', textAlign: 'center', fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("user/edit_phone_otp", "resend")}</Text>
+                </View>
+              }
+              {
+                seconds == 0 &&
+                <Pressable onPress={() => { countDown() }}>
+                  <Text style={{ fontFamily: 'Arial', fontSize: 14, marginTop: 10, color: LibStyle.colorBrown }}>{esp.lang("user/otp", "send_code_again")}</Text>
+                </Pressable>
+              }
+            </View>
+          </View>
+        </ScrollView>
+      </ImageBackground>
+
+    </View>
+  )
+}

package/modules/user/bbopay.ts

@@ -0,0 +1,13 @@
+// useLibs
+
+import useGlobalState from 'esoftplay/global';
+
+
+export interface UserBbopayProps {
+
+}
+export const config = useGlobalState<any>(undefined)
+
+export default function m(): any {
+  return null
+}