esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/community/registrasi_eo.tsx

@@ -0,0 +1,594 @@
+// withHooks
+import { BigbangTermsArgs } from 'esoftplay/cache/bigbang/terms/import';
+import { CommunityConfigProperty } from 'esoftplay/cache/community/config/import';
+import { ComponentAccept } from 'esoftplay/cache/component/accept/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentInput_rectangle_icon_right } from 'esoftplay/cache/component/input_rectangle_icon_right/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_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/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 { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+moment().locale('id')
+
+export interface CommunityRegistrasi_eo_Props {
+  navigation: any
+}
+export default function m(props: CommunityRegistrasi_eo_Props): any {
+  const { item }: any = LibNavigation.getArgsAll(props)
+  const [images, setImages] = useSafeState<string[]>([])
+  const [coverPhotos, setCoverPhotos] = useSafeState<string[]>([])
+  const [ktpDocs, setKtpDocs] = useSafeState<any>('')
+  const [npwpDocs, setNpwpDocs] = useSafeState<any>('')
+  const [type, setType] = useSafeState<any>(1)
+  const [_eoCatMain, set_eoCatMain] = useSafeState<any>([])
+  const [_eoCat, set_eoCat] = useSafeState<any>([])
+  const [date, setDate] = useSafeState<any>('2019-12-20')
+  const [loc, setLoc] = useSafeState<any>('')
+  const [agree, setAgree] = useSafeState<boolean>(false)
+  const [communityConfig] = CommunityConfigProperty.state().useState()
+
+
+  let inputName = React.useRef<LibInput_rectangle>(null)
+  let inputSince = React.useRef<LibInput_rectangle>(null)
+  let inputAddress = React.useRef<LibInput_rectangle>(null)
+  let inputFullAddress = React.useRef<LibInput_rectangle>(null)
+  let inputKTP = React.useRef<LibInput_rectangle>(null)
+  let inputNPWP = React.useRef<LibInput_rectangle>(null)
+  let inputWebsite = React.useRef<LibInput_rectangle>(null)
+  let inputBio = React.useRef<LibInput_rectangle>(null)
+  let inputFb = React.useRef<LibInput_rectangle>(null)
+  let inputIg = React.useRef<LibInput_rectangle>(null)
+  let inputYt = React.useRef<LibInput_rectangle>(null)
+  let inputTw = React.useRef<LibInput_rectangle>(null)
+  let inputFeesMin = React.useRef<ComponentInput_rectangle_icon_right>(null)
+  // let inputFeesMax = React.useRef<ComponentInput_rectangle_icon_right>(null)
+
+  let refEoMain = React.useRef<LibInput_rectangle>(null)
+
+  let dialogSetSince = React.useRef<ComponentSlidingup>(null)
+
+  function addNewImage() {
+    LibImage.fromGallery({ crop: { ratio: "1:1", forceCrop: true, message: '' } }).then((image: any) => {
+      let _images = [...images]
+      _images.push(image)
+      setImages(_images)
+    })
+  }
+
+  function addNewCover() {
+    LibImage.fromGallery({ crop: { ratio: "36:23", forceCrop: true, message: '' } }).then((image: any) => {
+      let _coverPhotos = [...coverPhotos]
+      _coverPhotos.push(image)
+      setCoverPhotos(_coverPhotos)
+    })
+  }
+
+  function deleteImage(url: string) {
+    LibDialog.warningConfirm(esp.lang("community/registrasi_eo", "delete_image_title"), esp.lang("community/registrasi_eo", "delete_image_msg"), esp.lang("community/registrasi_eo", "delete_msg_confirm"), () => {
+      setImages(images && images.filter((item: string) => item != url))
+
+    }, esp.lang("community/registrasi_eo", "delete_image_cancel"), () => { })
+  }
+
+  function deleteCover(url: string) {
+    LibDialog.warningConfirm(esp.lang("community/registrasi_eo", "delete_cover_title"), esp.lang("community/registrasi_eo", "delete_cover_msg"), esp.lang("community/registrasi_eo", "delete_cover_confirm"), () => {
+      setCoverPhotos(coverPhotos && coverPhotos.filter((item: string) => item != url))
+
+    }, esp.lang("community/registrasi_eo", "delete_cover_cancel"), () => { })
+  }
+
+  function addEoMain(): void {
+    let exclude = _eoCat.map((item: any) => item.community_cat_id)
+    if (_eoCatMain.length > 0) {
+      exclude.push(_eoCatMain[0].community_cat_id)
+    }
+
+    LibNavigation.navigateForResult('community/category', { item: item, exclude: _eoCat.map((item: any) => item.community_cat_id) }).then((item) => {
+      let eoCatMain = [..._eoCatMain]
+      eoCatMain.push(item)
+      set_eoCatMain([...eoCatMain])
+      refEoMain.current?.setText(item.community_cat)
+    })
+  }
+  function setDeleteEoMain(): void {
+    let eoCatMain = [..._eoCatMain]
+    eoCatMain.splice(0, 1)
+    set_eoCatMain([...eoCatMain])
+  }
+
+  function addOtherEoCategory(): void {
+    let exclude = _eoCat.map((item: any) => item.community_cat_id)
+    if (_eoCatMain.length > 0) {
+      exclude.push(_eoCatMain[0].community_cat_id)
+    }
+    LibNavigation.navigateForResult('community/eo_category', { item: item, exclude: exclude }).then((item) => {
+      let eoCat = [..._eoCat]
+      eoCat.push(item)
+      set_eoCat([...eoCat])
+    })
+  }
+
+  function deleteOtherEoCategory(_edit?: any, index?: number): void {
+    let eoCat: any = [..._eoCat]
+    eoCat.splice(index, 1)
+    set_eoCat([...eoCat])
+  }
+
+  function openLocation(): void {
+    LibNavigation.navigateForResult('user/location', undefined).then((location) => {
+      inputAddress.current?.setText(location.detail)
+      setLoc(location);
+    })
+  }
+
+  function next(): void {
+
+    if (coverPhotos.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "cover_empty"))
+      return
+    }
+
+    if (inputName.current?.getText() == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "name_empty"))
+      return
+    }
+
+    if (inputSince.current?.getText() == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "date_empty"))
+      return
+    }
+
+    if (inputAddress.current?.getText() == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "address_empty"))
+      return
+    }
+
+    if (inputFullAddress.current?.getText() == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "address_full_empty"))
+      return
+    }
+
+    if (inputKTP.current?.getText() == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "ktp_empty"))
+      return
+    }
+
+    if (inputNPWP.current?.getText() == "") {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "npwp_empty"))
+      return
+    }
+
+    if (inputKTP.current!.getText().length < 16) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "ktp_not_valid"))
+      return
+    }
+
+    if (inputKTP.current!.getText().length > 16) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "ktp_not_valid1"))
+      return
+    }
+
+    if (inputNPWP.current!.getText().length < 15) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "npwp_not_valid"))
+      return
+    }
+
+    if (inputNPWP.current!.getText().length > 15) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "npwp_not_valid1"))
+      return
+    }
+
+    if (!ktpDocs) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "upload_ktp"))
+      return
+    }
+
+    if (!npwpDocs) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "upload_npwp"))
+      return
+    }
+    if (_eoCatMain.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "inflience_empty"))
+      return
+    }
+
+    if (images.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "photo_empty"))
+      return
+    }
+
+    if (inputFeesMin.current?.getText() == '') {
+      LibToastProperty.show(esp.lang("community/registrasi_eo", "fee_empty"))
+      return
+    }
+
+    let sosmed = []
+    if (inputFb.current?.getText() !== "") {
+      sosmed.push({ id: 1, username: inputFb.current?.getText() })
+    }
+    if (inputIg.current?.getText() !== "") {
+      sosmed.push({ id: 2, username: inputIg.current?.getText() })
+    }
+    if (inputYt.current?.getText() !== "") {
+      sosmed.push({ id: 3, username: inputYt.current?.getText() })
+    }
+    if (inputTw.current?.getText() !== "") {
+      sosmed.push({ id: 4, username: inputTw.current?.getText() })
+    }
+
+    var eoMain = [{
+      community_cat_id: _eoCatMain && _eoCatMain[0].community_cat_id,
+      community_cat: _eoCatMain && _eoCatMain[0].community_cat,
+      images: images,
+    }]
+
+    var eo: any[] = []
+    _eoCat && _eoCat.length > 0 && _eoCat.map((item: any) => {
+      let eoItem = {
+        community_cat_id: item.community_cat_id,
+        community_cat: item.community_cat,
+        images: item.images,
+      }
+      eo.push(eoItem)
+    })
+
+    let mergeEo = eoMain.concat(eo)
+
+    let since = moment(date).localeFormat('YYYY-MM-DD')
+
+    let post = {
+      cat_id: item.id,
+      name: inputName.current?.getText(),
+      birthday_date: since,
+      location_id: loc.id,
+      address: inputFullAddress.current?.getText(),
+      ktp: inputKTP.current?.getText(),
+      ktp_image: ktpDocs,
+      npwp: inputNPWP.current?.getText(),
+      npwp_image: npwpDocs,
+      website: inputWebsite.current?.getText(),
+      biography: inputBio.current?.getText(),
+      fee: inputFeesMin.current?.getText(),
+      images: JSON.stringify(coverPhotos),
+
+      // sosmed
+      sosmed: JSON.stringify(sosmed),
+      community_cat: JSON.stringify(mergeEo)
+    }
+
+    LibDialog.confirm(esp.lang("community/registrasi_eo", "next_title"), esp.lang("community/registrasi_eo", "next_msg"), esp.lang("community/registrasi_eo", "next_confirm"), () => {
+      LibProgress.show(esp.lang("community/registrasi_eo", "next_wait"))
+      new LibCurl('community_register', post, (result, msg) => {
+        LibProgress.hide()
+        LibDialog.info(esp.lang("community/registrasi_eo", "next_success"), result);
+        LibNavigation.backToRoot()
+        LibNavigation.navigate('user/profile')
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("community/registrasi_eo", "next_failed"), error?.message)
+      })
+    }, esp.lang("community/registrasi_eo", "next_cancel"), () => {
+
+    })
+  }
+
+  function renderCoverImages(item: any, index: number) {
+    return (
+      <ComponentTouchable key={item + index} style={{ width: 90 }} onPress={() => { deleteCover(item) }} >
+        <View style={{ overflow: 'hidden', marginRight: 10, borderRadius: 5, height: 80, width: 80, backgroundColor: '#f1f2f3' }} >
+          <LibPicture style={{ height: 80, width: 80, resizeMode: 'cover', backgroundColor: '#f1f2f3' }} source={{ uri: item }} />
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderImages(item: any, index: number) {
+    return (
+      <ComponentTouchable key={index} style={{ width: 90 }} onPress={() => { deleteImage(item) }} >
+        <View style={{ overflow: 'hidden', marginRight: 10, borderRadius: 5, height: 80, width: 80 }} >
+          <LibPicture style={{ height: 80, width: 80, resizeMode: 'cover' }} source={{ uri: item }} />
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderCategory(item: any, i: number) {
+    return (
+      <View key={i} style={{ marginTop: 15, padding: 10, borderRadius: 3, borderColor: '#979797', borderWidth: 1 }}>
+        <ComponentTouchable onPress={() => { deleteOtherEoCategory(item, i) }} >
+          <View style={{ width: 24, height: 24, borderRadius: 12, position: 'absolute', top: -20, right: -20, backgroundColor: LibStyle.colorRed, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+            <LibPicture source={esp.assets('icons/ic_trash.png')} style={{ height: 14, width: 14, resizeMode: 'contain' }} />
+          </View>
+        </ComponentTouchable>
+
+        <View style={{ flex: 5, height: 35, borderRadius: 3, backgroundColor: "#fff", borderStyle: "solid", borderWidth: 0.5, borderColor: "#c4c4c4", flexDirection: 'row' }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorTextPrimary, marginLeft: 12, alignContent: "center", alignItems: 'center', alignSelf: 'center' }}>{item.community_cat}</Text>
+        </View>
+
+        <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_gallery")} mandatory />
+        <ScrollView horizontal style={{ height: 80, marginTop: 8 }} >
+          {
+            item.images && [...item.images].reverse().map((item: string, index: number) => (
+              <ComponentTouchable key={index} style={{ width: 90 }} onPress={() => { }} >
+                <View style={{ overflow: 'hidden', marginRight: 10, borderRadius: 5, height: 80, width: 80 }} >
+                  <LibPicture style={{ height: 80, width: 80, resizeMode: 'cover' }} source={{ uri: item }} />
+                </View>
+              </ComponentTouchable>
+            ))
+          }
+        </ScrollView>
+      </View>
+    )
+  }
+
+  function renderSosmed(item: any, i: number) {
+    var labelInput = ''
+    var refInput
+    if (item.key == "facebook") {
+      labelInput = "facebook.com/"
+      refInput = inputFb
+    } else if (item.key == "instagram") {
+      labelInput = "instagram.com/"
+      refInput = inputIg
+    } else if (item.key == "youtube") {
+      labelInput = "youtube.com/channel/"
+      refInput = inputYt
+    } else {
+      labelInput = "twitter.com"
+      refInput = inputTw
+    }
+    return (
+      <View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <View style={{ flex: 4 }}>
+          <ComponentLabel_input label={labelInput} />
+        </View>
+        <LibInput_rectangle autoCapitalize="none" defaultValue={item.username} ref={refInput} style={{ borderRadius: 5, flex: 5, marginLeft: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_eo", "placeholder_name")} />
+      </View>
+    )
+  }
+
+  let sosmed = communityConfig?.sosmed
+
+  return (
+
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <LibKeyboard_avoid style={{ flex: 1 }} >
+        <ComponentHeader title={esp.lang("community/registrasi_eo", "header_title")} subtitle={esp.lang("community/registrasi_eo", "header_sub")} />
+        <ScrollView showsVerticalScrollIndicator={false} >
+          <View style={{ flex: 1, flexDirection: 'row', marginTop: 20, marginBottom: 0, margin: 15, height: 35, borderRadius: 17.5, width: LibStyle.width - 30, backgroundColor: '#e9e9e9' }}>
+            <ComponentTouchable onPress={() => {
+              setType(1)
+            }}>
+              <View style={{ justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: 35, borderRadius: 17.5, width: (LibStyle.width - 30) / 2, backgroundColor: type == 1 ? '#e67e22' : '#e9e9e9' }}>
+                <Text allowFontScaling={false} style={{ alignSelf: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: type == 1 ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: type == 1 ? '#fff' : '#4a4a4a' }} >{esp.lang("community/registrasi_eo", "personal_join")}</Text>
+              </View>
+            </ComponentTouchable>
+            <ComponentTouchable onPress={() => {
+              setType(2)
+            }}>
+              <View style={{ justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: 35, borderRadius: 17.5, width: (LibStyle.width - 30) / 2, backgroundColor: type == 2 ? '#e67e22' : '#e9e9e9' }}>
+                <Text allowFontScaling={false} style={{ alignSelf: 'center', fontFamily: "Arial", fontSize: 14, fontWeight: type == 2 ? "bold" : "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: type == 2 ? '#fff' : '#4a4a4a' }} >{esp.lang("community/registrasi_eo", "company_join")}</Text>
+              </View>
+            </ComponentTouchable>
+          </View>
+
+          <View style={{ backgroundColor: '#fff', margin: 15, marginTop: 0 }}>
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_photo")} mandatory />
+            <View key={coverPhotos.length} >
+              <ScrollView key={coverPhotos.length} horizontal style={{ height: 80, marginTop: 8 }} >
+                {
+                  coverPhotos?.length < 3 &&
+                  <ComponentTouchable onPress={addNewCover} style={{ width: 90 }} >
+                    <View style={{ overflow: 'hidden', marginRight: 10, borderRadius: 5, height: 80, width: 80, backgroundColor: '#f1f2f3', alignItems: 'center', justifyContent: 'center' }} >
+                      <LibIcon name={'plus'} color={'#c0c0c0'} />
+                    </View>
+                  </ComponentTouchable>
+                }
+                {
+                  coverPhotos && [...coverPhotos].reverse().map(renderCoverImages)
+                }
+              </ScrollView>
+            </View>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_eo_name")} mandatory />
+            <LibInput_rectangle ref={inputName} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_eo", "placeholder_eo")} />
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_establish")} mandatory />
+            <ComponentTouchable onPress={() => dialogSetSince.current?.show()}>
+              <LibInput_rectangle ref={inputSince} editable={false} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} onPress={() => dialogSetSince.current?.show()} placeholder={esp.lang("community/registrasi_eo", "placeholder_establish")} />
+            </ComponentTouchable>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_address")} mandatory />
+            <ComponentTouchable onPress={openLocation}>
+              <LibInput_rectangle ref={inputAddress} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={'Type your address'} editable={false} onPress={openLocation} defaultValue={loc && loc.detail} />
+            </ComponentTouchable>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_f_address")} mandatory />
+            <LibInput_rectangle ref={inputFullAddress} multiline={true} placeholder={'Type your address'} inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, height: 100 }} style={{ borderColor: '#c4c4c4', marginBottom: 20, marginTop: 8, height: 100, justifyContent: 'flex-start' }} />
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_ktp_number")} mandatory />
+            <View style={{ flexDirection: 'row' }}>
+              <View style={{ flex: 8 }}>
+                <LibInput_rectangle keyboardType='numeric' ref={inputKTP} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_eo", "placeholder_ktp")} />
+                <ComponentTouchable onPress={() => { ktpDocs != '' && LibNavigation.navigate('lib/gallery', { image: ktpDocs }) }}>
+                  <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: ktpDocs != '' ? '#34a2ec' : '#ff0000' }} >{ktpDocs != '' ? esp.lang("community/registrasi_eo", "show_ktp") : esp.lang("community/registrasi_eo", "attach_ktp")} </Text>
+                </ComponentTouchable>
+              </View>
+              <View >
+                <ComponentTouchable onPress={() => {
+                  LibImage.fromGallery().then((image) => {
+                    setKtpDocs(image)
+                  })
+                }}>
+                  <View style={{ marginTop: 8, marginLeft: 10, width: 68, height: 35, borderRadius: 3, backgroundColor: "#9b9b9b", alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#fff' }}>{ktpDocs != '' ? esp.lang("community/registrasi_eo", "ktp_change") : esp.lang("community/registrasi_eo", "ktp_browse")}</Text>
+                  </View>
+                </ComponentTouchable>
+                <Text allowFontScaling={false} style={{ marginLeft: 10, marginTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: ktpDocs != '' ? '#34a2ec' : '#ff0000' }} >{ktpDocs != '' ? esp.lang("community/registrasi_eo", "ktop_attach") : esp.lang("community/registrasi_eo", "ktp_no")} </Text>
+              </View>
+            </View>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_npwp")} mandatory />
+            <View style={{ flexDirection: 'row' }}>
+              <View style={{ flex: 8 }}>
+                <LibInput_rectangle keyboardType='numeric' ref={inputNPWP} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_eo", "placeholder_npwp_no")} />
+                <ComponentTouchable onPress={() => { npwpDocs != '' && LibNavigation.navigate('lib/gallery', { image: npwpDocs }) }}>
+                  <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: npwpDocs != '' ? '#34a2ec' : '#ff0000' }} >{npwpDocs != "" ? esp.lang("community/registrasi_eo", "show_npwp") : esp.lang("community/registrasi_eo", "attach_npwp")}</Text>
+                </ComponentTouchable>
+              </View>
+              <View >
+                <ComponentTouchable onPress={() => {
+                  LibImage.fromGallery().then((image) => {
+                    setNpwpDocs(image)
+                  })
+                }}>
+                  <View style={{ marginTop: 8, marginLeft: 10, width: 68, height: 35, borderRadius: 3, backgroundColor: "#9b9b9b", alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: '#fff' }}>{npwpDocs != "" ? esp.lang("community/registrasi_eo", "npwp_change") : esp.lang("community/registrasi_eo", "npwp_browse")}</Text>
+                  </View>
+                </ComponentTouchable>
+                <Text allowFontScaling={false} style={{ marginLeft: 10, marginTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: npwpDocs != '' ? '#34a2ec' : '#ff0000' }} >{npwpDocs != "" ? esp.lang("community/registrasi_eo", "npwp_attach") : esp.lang("community/registrasi_eo", "npwp_no")}</Text>
+              </View>
+            </View>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_web")} />
+            <LibInput_rectangle ref={inputWebsite} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={'www.eventindo.id'} />
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_bio")} />
+            <LibInput_rectangle ref={inputBio} multiline={true} placeholder={esp.lang("community/registrasi_eo", "placeholder_bio")} inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, height: 150 }} style={{ borderRadius: 5, borderColor: '#c4c4c4', marginTop: 8, height: 150, justifyContent: 'flex-start' }} />
+
+            {/* untuk main E.O */}
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+              <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_main")} labelColor="#1abc9c" />
+              <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_cat")} mandatory />
+              <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginTop: 16 }} />
+            </View>
+
+            <View style={{ flexDirection: 'row', alignContent: "center", alignItems: 'center' }}>
+              <View style={{ flex: 8 }}>
+                <ComponentTouchable onPress={() => { addEoMain() }}>
+                  <LibInput_rectangle
+                    ref={refEoMain}
+                    onPress={() => { addEoMain() }}
+                    placeholder={esp.lang("community/registrasi_eo", "placeholder_cat")}
+                    editable={false}
+                    style={{ borderRadius: 5, borderColor: '#c4c4c4' }}
+                  />
+                </ComponentTouchable>
+              </View>
+              {
+                _eoCatMain.length > 0 &&
+                <ComponentTouchable onPress={() => {
+                  refEoMain.current?.setText("")
+                  setDeleteEoMain()
+                }}>
+                  <View style={{ marginTop: 20, marginLeft: 10, width: 35, height: 35, borderRadius: 3, backgroundColor: LibStyle.colorRed, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name={"close"} size={16} color="#FFF" />
+                  </View>
+                </ComponentTouchable>
+              }
+            </View>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_brand")} mandatory />
+            <ScrollView horizontal style={{ height: 80, marginTop: 8 }} >
+              <ComponentTouchable onPress={addNewImage} style={{ width: 90 }} >
+                <View style={{ overflow: 'hidden', marginRight: 10, borderRadius: 5, height: 80, width: 80, backgroundColor: '#f1f2f3', alignItems: 'center', justifyContent: 'center' }} >
+                  <LibIcon name={'plus'} color={'#c0c0c0'} />
+                </View>
+              </ComponentTouchable>
+              {
+                images && [...images].reverse().map(renderImages)
+              }
+            </ScrollView>
+
+            {/* untuk other category */}
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+              <ComponentLabel_input label={esp.lang("community/registrasi_eo", "other_eo")} labelColor="#34a2ec" />
+              <ComponentLabel_input label={esp.lang("community/registrasi_eo", "category")} />
+              <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginTop: 16 }} />
+            </View>
+
+            {
+              _eoCat && _eoCat.length > 0 && _eoCat.map(renderCategory)
+            }
+
+            <ComponentTouchable onPress={() => { addOtherEoCategory() }}>
+              <View style={{ justifyContent: 'center', borderWidth: 1, borderColor: '#3498db', marginTop: 30, alignContent: 'center', alignItems: 'center', flexDirection: 'row', borderRadius: 5, backgroundColor: '#fff', padding: 10 }}>
+                <LibIcon name="plus-circle-outline" color="#3498db" />
+                <Text allowFontScaling={false} style={{ marginLeft: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#3498db" }}>{esp.lang("community/registrasi_eo", "add_cat")}</Text>
+              </View>
+            </ComponentTouchable>
+
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+              <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_sosmed")} labelColor={"#000"} />
+              <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_account")} />
+              <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginTop: 16 }} />
+            </View>
+
+            {
+              sosmed && sosmed.length > 0 && sosmed.map(renderSosmed)
+            }
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_eo", "label_eo_fee")} mandatory />
+            <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+              <ComponentInput_rectangle_icon_right ref={inputFeesMin} text="%" style={{ flex: 1 }} />
+              {/* <View style={{ marginTop: 30, margin: 10, height: 2, backgroundColor: '#979797', width: 15, alignSelf: 'center' }} />
+              <ComponentInput_rectangle_icon_right ref={inputFeesMax} text="%" style={{ flex: 1 }} /> */}
+            </View>
+          </View>
+
+          <ComponentAccept
+            agree={agree}
+            onPressAgree={() => { setAgree(agree == true ? false : true) }}
+            onPressPrivacy={() => {
+              LibNavigation.navigate<BigbangTermsArgs>('bigbang/terms', { cat: 'community', type: 'privacy' })
+            }}
+            onPressTerm={() => {
+              LibNavigation.navigate<BigbangTermsArgs>('bigbang/terms', { cat: 'community', type: 'term' })
+            }}
+          />
+
+        </ScrollView>
+        <View style={{ flexDirection: 'row', paddingVertical: 10, paddingHorizontal: 20 }} >
+          <View style={{ flex: 1 }} >
+            <ComponentTouchable onPress={() => { agree ? next() : LibToastProperty.show(esp.lang("community/registrasi_eo", "toast_agree")) }} >
+              <View style={{ height: 35, borderRadius: 17.5, backgroundColor: agree ? "#6c432c" : LibStyle.colorTextPrimary, borderStyle: "solid", borderWidth: 0.5, borderColor: "#2980b9", alignItems: 'center', justifyContent: 'center' }} >
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#fff" }} >{esp.lang("community/registrasi_eo", "join_now")}</Text>
+              </View>
+            </ComponentTouchable>
+          </View>
+        </View>
+        <ComponentSlidingup ref={dialogSetSince}>
+          <View style={{ backgroundColor: 'white', paddingBottom: 25, height: 230 }}>
+            <LibDatepicker
+              minDate={moment().add(-100, 'years').localeFormat('YYYY-MM-DD')}
+              maxDate={moment().localeFormat('YYYY-MM-DD')}
+              onDateChange={(date) => {
+                setDate(date)
+                inputSince.current?.setText(moment(date).localeFormat('DD MMMM YYYY'))
+                dialogSetSince.current?.hide()
+              }}
+              selectedDate={date}
+            />
+          </View>
+        </ComponentSlidingup>
+      </LibKeyboard_avoid>
+    </View>
+  )
+}