esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/user/profile_edit.tsx

@@ -0,0 +1,472 @@
+// withHooks
+
+import { useAsyncStorage } from '@react-native-async-storage/async-storage';
+import { BigbangIndexProperty } from 'esoftplay/cache/bigbang/index/import';
+import { ChattingLib } from 'esoftplay/cache/chatting/lib/import';
+import { ComponentAvatar } from 'esoftplay/cache/component/avatar/import';
+import { ComponentCircle } from 'esoftplay/cache/component/circle/import';
+import { ComponentGender } from 'esoftplay/cache/component/gender/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 { LibDatepicker } from 'esoftplay/cache/lib/datepicker/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibImage } from 'esoftplay/cache/lib/image/import';
+import { LibInput } from 'esoftplay/cache/lib/input/import';
+import { LibInput_rectangle2 } from 'esoftplay/cache/lib/input_rectangle2/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/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 { UserDevicesProperty } from 'esoftplay/cache/user/devices/import';
+import { UserProfileProperty } from 'esoftplay/cache/user/profile/import';
+import { UserReminderProperty } from 'esoftplay/cache/user/reminder/import';
+import esp from 'esoftplay/esp';
+import useLazyState from 'esoftplay/lazy';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import { useTimeout } from 'esoftplay/timeout';
+
+import { ComponentDialog_otp } from 'esoftplay/cache/component/dialog_otp/import';
+import { UserRegisterProperty } from 'esoftplay/cache/user/register/import';
+import React, { useEffect, useRef } from 'react';
+import { Keyboard, KeyboardAvoidingView, Pressable, Text, TouchableOpacity, View } from 'react-native';
+
+export interface UserProfile_editProps {
+  onFilterChange?: (location: any) => void,
+  location?: any,
+  from?: string
+}
+
+
+export default function m(props: UserProfile_editProps): any {
+  const user = UserClass.state().useSelector(x => x)
+  
+  const initCountry = {
+    "title": "Indonesia",
+    "code": "ID",
+    "currency": "IDR",
+    "phone": user?.phone_code != 0 ? user?.phone_code : "62"
+  }
+
+  const phoneToShow = exludeCountryCodes(user?.phone || '', initCountry?.phone) || user?.phone
+  const timeout = useTimeout()
+  const { setItem } = useAsyncStorage('bigbang_index_skip_image')
+  const { phoneVerifPointer } = LibNavigation.getArgsAll(props)
+  const [selectedCountry, setSelectedCountry] = useSafeState<any>(initCountry)
+  
+  useEffect(() => {
+    if (!user) {
+      UserReminderProperty?.mute?.()
+      LibNavigation.reset()
+      LibNavigation.navigate('user/login')
+    }
+    
+    if (phoneVerifPointer) {
+      inputPhoneEdit.current?.focus()
+    }
+  }, [])
+  
+
+  function exludeCountryCodes(phn: string, cc?: string) {
+    let countryCode = cc || "62"
+    let phone = phn
+    if (phone?.slice(0, 2) == countryCode) {
+      phone = phone.substring(2)
+    }
+    return phone
+  }
+
+  let verifMethod = user?.phone_verified == 0 ?
+    [
+      {
+        id: 1,
+        type: 'sms',
+        name: esp.lang("user/profile_edit", "msg_to"),
+        subtitle: user?.phone,
+        icon: 'message-text-outline',
+        active: selectedCountry?.phone == 62 ? 1 : 0
+      },
+      {
+        id: 3,
+        type: 'whatsapp',
+        name: esp.lang("user/profile_edit", "whatsapp"),
+        subtitle: user?.phone,
+        icon: 'whatsapp',
+        active: 1
+      },
+    ]
+    :
+    [
+      {
+        id: 1,
+        type: 'sms',
+        name: esp.lang("user/profile_edit", "msg_to"),
+        subtitle: user?.phone,
+        icon: 'message-text-outline',
+        active: user?.phone_code == 62 ? 1 : 0
+      },
+      {
+        id: 2,
+        type: 'email',
+        name: esp.lang("user/profile_edit", "mail_to"),
+        subtitle: user?.email,
+        icon: 'email-fast-outline',
+        active: 1
+      },
+      {
+        id: 3,
+        type: 'whatsapp',
+        name: esp.lang("user/profile_edit", "whatsapp"),
+        subtitle: user?.phone,
+        icon: 'whatsapp',
+        active: 1
+      },
+    ]
+
+  
+  const [phone, setPhone] = useSafeState(phoneToShow)
+  const [loc, setLoc] = useSafeState<any>({ id: user?.location_id, detail: user?.location_name })
+  const [image, setImage] = useSafeState<any>(user?.image)
+  const [date, setDate, getDate] = useLazyState<any>(moment(user?.birth_date).format("YYYY-MM-DD"))
+  const [genderId, setGenderId, getGender] = useLazyState<any>()
+  let from = LibNavigation.getArgs(props, "from")
+
+  let inputName = useRef<LibInput_rectangle2>(null)
+  let inputBirthDate = useRef<LibInput_rectangle2>(null)
+  let inputGender = useRef<LibInput_rectangle2>(null)
+  let inputPhone = useRef<LibInput_rectangle2>(null)
+  let inputPhoneEdit = useRef<LibInput>(null)
+  let inputPassword = useRef<LibInput_rectangle2>(null)
+  let dialogEditImage = useRef<ComponentSlidingup>(null)
+  let dialogVerifMethod = useRef<ComponentSlidingup>(null)
+  let dialogSetBirthdate = useRef<ComponentSlidingup>(null)
+  let dialogSetGender = useRef<ComponentSlidingup>(null)
+
+
+  function doEdit(): void {
+    if (inputName?.current?.getText?.() == null) {
+      LibToastProperty.show(esp.lang("user/profile_edit", "error_msg_input_name"))
+      inputName.current?.focus()
+      return
+    }
+    if (inputName?.current?.getText?.() == "") {
+      LibToastProperty.show(esp.lang("user/profile_edit", "error_msg_input_name"))
+      inputName.current?.focus()
+      return
+    }
+
+    if (loc == '') {
+      LibToastProperty.show(esp.lang("user/profile_edit", "error_msg_input_location"))
+      inputPassword.current?.focus()
+      return
+    }
+
+    let post = {
+      name: encodeURIComponent(inputName.current?.getText() || user?.name),
+      phone: encodeURIComponent(user?.phone_verified == 0 ? selectedCountry.phone + inputPhoneEdit?.current?.getText?.() : user?.phone),
+      phone_code: user?.phone_verified == 0 ? selectedCountry?.phone : user?.phone_code,
+      location_id: loc?.id,
+      image: image,
+      gender: getGender(),
+      birth_date: moment(getDate()).format('YYYY-MM-DD')
+    }
+
+    LibProgress.show(esp.lang("user/profile_edit", "wait_msg"))
+    new LibCurl('user_edit', post,
+      (res, msg) => {
+        UserClass.create(res).then(() => {
+          if (from == "visitor") {
+            LibProgress.hide();
+            LibDialog.info(esp.lang("user/profile_edit", "success_msg"), msg);
+            LibNavigation.back(2);
+          } else if (from == "community_profile" || from == "ticket_list") {
+            LibProgress.hide();
+            LibDialog.info(esp.lang("user/profile_edit", "success_msg"), msg);
+            LibNavigation.back();
+          } else {
+            LibProgress.hide();
+            ChattingLib().setUser()
+            LibDialog.info(esp.lang("user/profile_edit", "success_msg"), msg);
+            LibNavigation.reset()
+            BigbangIndexProperty.setTab(0)
+            LibNavigation.navigate('user/profile')
+          }
+        })
+      }, (error) => {
+        LibProgress.hide();
+        LibDialog.warning(esp.lang("user/profile_edit", "user_edit_err"), error?.message);
+      }, 1)
+
+  }
+
+  async function setNewValue(value: string) {
+    await setItem(value)
+    LibNavigation.reset()
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
+      <ComponentHeader title={esp.lang("user/profile_edit", "title_change_profile")}
+        logout={user?.image == ''}
+        onPressLogout={() => {
+          LibDialog.warningConfirm(esp.lang("user/profile_edit", "title_alert_logout"), esp.lang("user/profile_edit", "body_alert_logout"), esp.lang("user/profile_edit", "btn_ok_logout"), () => {
+            UserDevicesProperty.terminSession()
+            UserClass.delete().then(() => {
+              setNewValue('1')
+              timeout(() => {
+                ChattingLib().setUser()
+              }, 400);
+            })
+            LibNavigation.reset()
+          }, esp.lang("user/profile_edit", "btn_cancel_logout"), () => { })
+        }}
+      />
+      <LibScroll onRefresh={UserProfileProperty.update} style={{ flex: 1 }}>
+        <KeyboardAvoidingView behavior='position' style={{ flex: 1 }}>
+          {
+            image == '' &&
+            <Text allowFontScaling={false} style={{ margin: 15, marginBottom: 0, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("user/profile_edit", "complete_data_for_continue")}</Text>
+          }
+          <View style={[{ paddingTop: 0, padding: 15, margin: 15, backgroundColor: '#fff', borderRadius: 5, paddingBottom: 30 }, LibStyle.elevation(2)]}>
+            <ComponentTouchable onPress={() => { dialogEditImage.current!.show() }} >
+              {
+                image == '' ?
+                  <View style={{ alignSelf: 'center', }}>
+                    <LibPicture source={esp.assets('icons/avatar-default-circle.png')} style={{ marginTop: 28, height: 90, width: 90, resizeMode: 'center', backgroundColor: 'white' }} />
+                    <View style={{ width: 25, height: 25, borderRadius: 14.5, backgroundColor: LibStyle.colorGreen, position: 'absolute', right: 0, bottom: 0, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                      <LibIcon size={15} name="plus" color="#fff" />
+                    </View>
+                  </View>
+                  :
+                  <View style={{ alignSelf: 'center' }}>
+                    <ComponentAvatar uri={image} style={{ alignSelf: 'center', marginTop: 28 }} />
+                    <View style={{ width: 25, height: 25, borderRadius: 14.5, backgroundColor: LibStyle.colorRed, position: 'absolute', right: 0, bottom: 0, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                      <LibIcon size={15} name="pencil" color="#fff" />
+                    </View>
+                  </View>
+              }
+            </ComponentTouchable>
+            <ComponentLabel_input label={esp.lang("user/profile_edit", "label_input_email")} mandatory={false} />
+            <LibInput_rectangle2
+              editable={false}
+              inactive={false}
+              style={{ borderRadius: 4, borderColor: '#c4c4c4', height: 35, marginTop: 8, backgroundColor: '#f6f6f6' }}
+              defaultValue={user?.email}
+              placeholder={esp.lang("user/profile_edit", "placeholder_input_email")}
+            />
+            <ComponentLabel_input label={esp.lang("user/profile_edit", "label_input_name")} mandatory={false} />
+            <LibInput_rectangle2
+              ref={inputName}
+              style={{ borderRadius: 4, borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+              defaultValue={user?.name}
+              onSubmitEditing={() => inputPhone.current?.focus()}
+              placeholder={esp.lang("user/profile_edit", "placeholder_input_name")}
+            />
+            <ComponentLabel_input label={esp.lang("user/profile_edit", "gender")} mandatory={false} />
+            <Pressable onPress={() => {
+              dialogSetGender.current?.show()
+            }}>
+              <LibInput_rectangle2
+                ref={inputGender}
+                editable={false}
+                style={{ borderRadius: 4, borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+                placeholder={esp.lang("user/profile_edit", "gender_placeholder")}
+                defaultValue={user?.gender == "0" ? "" : user?.gender == 2 ? esp.lang("user/profile_edit", "female") : esp.lang("user/profile_edit", "male")}
+              />
+              <View style={{ position: 'absolute', right: 5, top: 13 }}>
+                <LibIcon name="chevron-right" />
+              </View>
+            </Pressable>
+            <ComponentLabel_input label={esp.lang("user/profile_edit", "birthdate")} mandatory={false} />
+            <Pressable onPress={() => {
+              dialogSetBirthdate.current?.show()
+            }}>
+              <LibInput_rectangle2
+                ref={inputBirthDate}
+                editable={false}
+                style={{ borderRadius: 4, borderColor: '#c4c4c4', height: 35, marginTop: 8 }}
+                placeholder={"DD/MM/YYYY"}
+                defaultValue={user?.birth_date == "0000-00-00" ? "" : moment(user?.birth_date).format("DD MMMM YYYY")}
+              />
+            </Pressable>
+            <ComponentLabel_input label={esp.lang("user/profile_edit", "label_input_phone")} mandatory={false} />
+            {
+              user?.phone_verified == 0 ?
+                <View style={{ borderRadius: 4, borderColor: '#c4c4c4', height: 35, marginTop: 8, borderWidth: 1, flexDirection: 'row', alignItems: 'center', paddingRight: 5 }} >
+                  <Pressable onPress={() => {
+                    LibNavigation.navigateForResult('user/location_country', { selected: selectedCountry }, 954).then(setSelectedCountry)
+                  }} style={{ paddingLeft: 10, paddingRight: 5, flexDirection: 'row', alignItems: 'center' }}>
+                    <Text allowFontScaling={false} style={{ fontSize: 12, color: '#707070', fontFamily: 'ArialBold' }} >+{selectedCountry?.phone}</Text>
+                    <LibIcon name='chevron-down' size={14} color='#707070' style={{ marginLeft: 3 }} />
+                    <View style={{ height: 16, width: 1, marginLeft: 5, backgroundColor: '#e6e6e6' }} />
+                  </Pressable>
+                  <LibInput
+                    base
+                    ref={inputPhoneEdit}
+                    defaultValue={phone}
+                    placeholder='Nomor HP'
+                    keyboardType="phone-pad"
+                    mask={'#### #### #### ####'}
+                    style={{ flex: 1 }}
+                    onChangeText={(t) => {
+                      LibUtils.debounce(() => {
+                        const newPhone = t.replace(/[^0-9]/g, "")
+                        inputPhoneEdit.current?.setText?.(newPhone)
+                        const phoneToShow = newPhone.substring(0, 2) == selectedCountry?.phone ? newPhone.replace(selectedCountry?.phone, "") : newPhone
+                        setPhone(phoneToShow)
+                      }, 100)
+                    }}
+                  />
+                  {
+                    user?.phone != "" && user?.phone_verified == 0 &&
+                    <Pressable onPress={() => dialogVerifMethod.current!.show()}>
+                      <LibIcon name="information" color={"#eed202"} />
+                    </Pressable>
+                  }
+
+                </View>
+                :
+                <View style={{ borderRadius: 4, borderColor: '#c4c4c4', backgroundColor: '#f6f6f6', height: 35, marginTop: 8, borderWidth: 1, flexDirection: 'row', alignItems: 'center', paddingRight: 5 }} >
+                  <Text style={{ flex: 1, fontFamily: "SFProText", fontSize: 12, marginRight: 15, marginLeft: 8 }}>{user?.phone}</Text>
+                  <Pressable hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }} onPress={() => {
+                    dialogVerifMethod.current!.show()
+                  }}>
+                    <LibIcon name="pencil-circle" color={LibStyle.colorGreen} />
+                  </Pressable>
+                </View>
+            }
+            {
+              user?.phone != "" && user?.phone_verified == 0 &&
+              <Pressable onPress={() => {
+                dialogVerifMethod.current!.show()
+              }} style={{ marginTop: 3 }}>
+                <Text style={{ fontFamily: "SFProText", fontSize: 13, color: "#D0342C", lineHeight: 18 }}>{esp.lang("user/profile_edit", "info")}</Text>
+              </Pressable>
+            }
+
+            <ComponentLabel_input label={esp.lang("user/profile_edit", "label_input_address")} mandatory={false} />
+            <ComponentTouchable onPress={() => {
+              LibNavigation.navigateForResult('market/address', null, 7722).then((t) => {
+                setLoc({ id: t?.location_id, detail: t?.location_name })
+              })
+            }}>
+              <View style={{ borderRadius: 4, borderColor: '#c4c4c4', height: 35, marginTop: 8, borderWidth: 1, flexDirection: 'row', alignItems: 'center', paddingRight: 5 }} >
+                <Text style={{ flex: 1, fontFamily: "SFProText", fontSize: 12, marginRight: 15, marginLeft: 8 }}>{loc?.detail}</Text>
+                <LibIcon name="chevron-right" />
+              </View>
+            </ComponentTouchable>
+
+            <Pressable onPress={() => {
+              // if (esp.isDebug('refine_register') && user?.phone_verified == 0) {
+              //   dialogVerifMethod.current!.show()
+              // } else {
+              if (image == '') {
+                LibToastProperty.show(esp.lang("user/profile_edit", "alert_no_picture"))
+              } else if (loc && loc.id == 0) {
+                LibToastProperty.show(esp.lang("user/profile_edit", "alert_no_address"))
+              } else {
+                doEdit()
+              }
+              // }
+
+            }} style={{ marginTop: 30, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0)', height: 40, borderRadius: 17, backgroundColor: "#6c432c", justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9 }}>
+              <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: 'white' }} >{esp.lang("user/profile_edit", "save")}</Text>
+            </Pressable>
+
+            {
+              props.from == "bigbang/index" &&
+              <TouchableOpacity onPress={() => {
+                setNewValue('2')
+              }} style={{ margin: 15, marginRight: 0, flexDirection: 'row', alignContent: 'center', justifyContent: 'space-between', alignItems: 'center', alignSelf: 'flex-end', paddingHorizontal: 15, paddingVertical: 5, borderWidth: 1, borderColor: '#45C9AF', borderRadius: 20 }}>
+                <Text allowFontScaling={false} style={{ color: "#45C9AF", fontFamily: "SFProText", fontStyle: "normal", fontWeight: "bold", fontSize: 16, }}>{esp.lang("user/profile_edit", "skip")}</Text>
+                <LibIcon name="chevron-right" color="#45C9AF" />
+              </TouchableOpacity>
+            }
+          </View>
+
+        </KeyboardAvoidingView>
+        <View />
+      </LibScroll>
+
+      <ComponentSlidingup ref={dialogEditImage}>
+        <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingBottom: 35, paddingHorizontal: 19, }}>
+          <Text allowFontScaling={false} style={{ marginTop: 26, marginBottom: 23, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("user/profile_edit", "title_dialog_change_picture")}</Text>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginBottom: 27 }}>
+            <ComponentCircle image={'icons/ic_camera.png'} color="#f39c12" title={esp.lang("user/profile_edit", "camera")} onPress={() =>
+              LibImage.fromCamera({ crop: { ratio: "1:1", forceCrop: true } }).then((url) => {
+                dialogEditImage.current!.hide()
+                setImage(url)
+              })} />
+            <ComponentCircle image={'icons/ic_galery.png'} color="#3498db" title={esp.lang("user/profile_edit", "gallery")} onPress={() =>
+              LibImage.fromGallery({ crop: { ratio: "1:1", forceCrop: true } }).then((url) => {
+                dialogEditImage.current!.hide()
+                setImage(url)
+              })} />
+          </View>
+        </View>
+      </ComponentSlidingup>
+
+      <ComponentSlidingup ref={dialogVerifMethod}>
+        <View style={{ backgroundColor: '#fff', /* height: LibStyle.height / 3, */ width: LibStyle.width, borderTopLeftRadius: 10, borderTopRightRadius: 10, paddingTop: 15, paddingBottom: 10 }}>
+          <Pressable onPress={() => dialogVerifMethod.current!.hide()} style={{ marginLeft: 20, marginBottom: 10 }}>
+            <LibIcon name='close' />
+          </Pressable>
+
+          <ComponentDialog_otp
+            data={verifMethod?.filter((x: any) => x.active == 1)}
+            onPress={(item) => {
+              dialogVerifMethod.current!.hide()
+              Keyboard.dismiss()
+
+              if (user?.phone_verified == 0) {
+                LibNavigation.navigate('user/otp', { phone: UserRegisterProperty.combineNumber(phone, selectedCountry?.phone), phone_code: selectedCountry?.phone, type: item?.type })
+              } else {
+                let post = {
+                  type: item?.type,
+
+                }
+                LibNavigation.navigate('user/edit_phone_otp', {
+                  item: item,
+                  url: 'user_phone_old_request',
+                  post: post,
+                  urlVerifOtp: 'user_phone_old_verify',
+                })
+              }
+            }}
+            initCountry={initCountry}
+          />
+        </View>
+      </ComponentSlidingup>
+
+      <ComponentSlidingup ref={dialogSetBirthdate}>
+        <View style={{ backgroundColor: 'white', paddingBottom: 25, height: 230 }}>
+          <LibDatepicker
+            minDate={moment().add(-90, 'years').format('YYYY-MM-DD')}
+            maxDate={moment().format('YYYY-MM-DD')}
+            onDateChange={(date) => {
+              inputBirthDate.current?.setText(moment(date).format('DD MMMM YYYY'))
+              dialogSetBirthdate.current?.hide()
+              setDate(date)()
+            }}
+            selectedDate={date || moment().add(-20, 'years').format('YYYY-MM-DD')}
+          />
+        </View>
+      </ComponentSlidingup>
+      <ComponentSlidingup ref={dialogSetGender}>
+        <ComponentGender genderId={genderId} onSelectGender={(item: any) => {
+          setGenderId(item.id)
+          inputGender.current?.setText(item?.text)
+          dialogSetGender.current?.hide()
+        }} />
+      </ComponentSlidingup>
+    </View>
+  )
+}

package/modules/user/profile_item.tsx

@@ -0,0 +1,38 @@
+// withHooks
+// noPage
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface UserProfile_itemProps {
+  icon: string,
+  title: string,
+  subtitle?: string,
+  onPress: () => void
+}
+export default function m(props: UserProfile_itemProps): any {
+
+  return (
+    <ComponentTouchable onPress={props.onPress} >
+      <View style={styleId_DP4GV} >
+        <LibPicture source={esp.assets(props.icon)} style={styleId_2qWFQz} />
+        <View style={styleId_ZcMJmd} >
+          <Text allowFontScaling={false} style={styleId_Z14O3V7} >{props.title}</Text>
+          {props.subtitle && <Text allowFontScaling={false} style={styleId_Z1GSIbI} numberOfLines={2}  >{props.subtitle}</Text>}
+        </View>
+        <LibPicture source={esp.assets('icons/ic_chevron_right.png')} style={styleId_Z2wiCwJ} />
+      </View>
+    </ComponentTouchable>
+  )
+}
+const styleId_DP4GV: any = { flexDirection: 'row', alignItems: "center", backgroundColor: 'white', borderRadius: 5, marginHorizontal: 16, marginVertical: 3, padding: 12, ...LibStyle.elevation(2) }
+const styleId_2qWFQz: any = { height: 30, width: 30, resizeMode: 'contain', marginLeft: 7, marginRight: 20 }
+const styleId_ZcMJmd: any = { flex: 1 }
+const styleId_Z14O3V7: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }
+const styleId_Z1GSIbI: any = { marginTop: 2, fontFamily: "Arial", fontSize: 8, fontWeight: "normal", fontStyle: "normal", lineHeight: 12, letterSpacing: 0, color: "#909090" }
+const styleId_Z2wiCwJ: any = { marginLeft: 6, height: 13, width: 13, resizeMode: 'contain' }

package/modules/user/profile_tms_list.tsx

@@ -0,0 +1,69 @@
+// withHooks
+import { applyStyle } from 'esoftplay';
+import { ComponentHeader } from 'esoftplay/cache/component/header/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 { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibUtils } from 'esoftplay/cache/lib/utils/import';
+import esp from 'esoftplay/esp';
+import { useEffect } from 'react';
+
+import React from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface EventTms_event_listProps {
+
+}
+export default function m(props: EventTms_event_listProps): any {
+  const { data } = LibNavigation.getArgsAll(props)
+
+  useEffect(() => {
+    if (data?.length == 1) {
+      LibNavigation.sendBackResult(data[0])
+    }
+    return () => LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+  }, [])
+
+  function renderItem(item: any, i: number) {
+    const widthImg = LibStyle?.width - 20
+    const sliderHeight = widthImg / 1920 * 1080
+
+    return (
+      <TouchableOpacity onPress={() => {
+        LibNavigation.sendBackResult(item)
+      }} key={i} style={{ margin: 10, marginBottom: 0, backgroundColor: '#fff', borderRadius: 10 }}>
+        <View style={{ ...LibStyle.elevation(2), backgroundColor: '#fff', borderRadius: 10 }}>
+          <LibPicture source={{ uri: item.image }} style={{ width: widthImg, height: sliderHeight, borderRadius: 10 }} />
+        </View>
+        <View style={{ padding: 10 }}>
+          <Text allowFontScaling={false} numberOfLines={2} ellipsizeMode='tail' style={applyStyle({ fontSize: 18 })}>{item.name || ""}</Text>
+          <Text allowFontScaling={false} style={applyStyle({ fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#f39c12" })} >{LibUtils.getDateRange(item.start_date, item.end_date, esp.lang("event/tms_event_list", "until"))}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  if (data?.length == 0) {
+    LibDialog.warning("Oops", "Daftar event kosong.")
+    LibNavigation.back()
+  } else if (data?.length == 1) {
+    return (
+      <LibLoading />
+    )
+  } else {
+    return (
+      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+        <ComponentHeader title={esp.lang("event/tms_event_list", "title_list_event")} />
+        <ScrollView showsVerticalScrollIndicator={false} >
+          {/* untuk scanner */}
+          {
+            data?.map(renderItem)
+          }
+        </ScrollView>
+      </View>
+    )
+  }
+}

package/modules/user/register.tsx

@@ -0,0 +1,36 @@
+// noPage
+// withHooks
+
+
+export interface UserRegisterProps {
+  navigation: any
+}
+
+export function combineNumber(phn: string, cc?: string): string {
+  let _countryCode = cc || '62'
+  let phone = phn
+  let countryCode = _countryCode.match(/([0-9]+)/g) || []
+
+  if (phone?.[0] == '0') {
+    phone = countryCode.join('') + phone?.substring(1)
+  } else {
+    phone = countryCode.join('') + phone
+  }
+  return phone
+}
+
+export function addDash(str: string): string {
+  let phone = str
+  if (phone[0] == '0') {
+    phone = phone.substring(1)
+  }
+  let ele = phone.split('-').join(''); // Remove dash (-) if mistakenly entered.
+  let val = ele.match(/.{1,4}/g) || []
+  let finalVal = val.join('-')
+
+  return finalVal
+}
+
+export default function m(props: UserRegisterProps): any {
+  return null
+}