esoftplay-event 0.0.0-o → 0.0.0-p

package/modules/community/registrasi_talent.tsx

@@ -0,0 +1,461 @@
+// withHooks
+import { BigbangTermsArgs } from 'esoftplay/cache/bigbang/terms/import';
+import { CommunityConfigProperty } from 'esoftplay/cache/community/config/import';
+import { CommunityTalent_skill_item } from 'esoftplay/cache/community/talent_skill_item/import';
+import { ComponentAccept } from 'esoftplay/cache/component/accept/import';
+import { ComponentCancellation } from 'esoftplay/cache/component/cancellation/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_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/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 { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import moment from 'esoftplay/moment';
+import React, { useEffect } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+moment().locale('id')
+
+export interface CommunityRegistrasi_talentProps {
+  navigation: any
+}
+
+export function handleBackButton() {
+  LibDialog.confirm(esp.lang("community/registrasi_talent", "back_title"), esp.lang("community/registrasi_talent", "back_msg"), esp.lang("community/registrasi_talent", "back_confirm"), () => LibNavigation.back(), esp.lang("community/registrasi_talent", "back_cancel"), () => { })
+  return true;
+}
+
+
+export default function m(props: CommunityRegistrasi_talentProps): any {
+
+  const user = UserClass.state().get()
+  const { data, item }: any = LibNavigation.getArgsAll(props)
+
+  const [images, setImages] = useSafeState<string[]>([])
+  const [langs, setLangs] = useSafeState<any>()
+  const [date, setDate] = useSafeState(moment().add(-20, 'years').localeFormat('YYYY-MM-DD'))
+
+  const [_talentSkill, set_talentSkill] = useSafeState<any>([])
+  const [loc, setLoc] = useSafeState<any>('')
+  const [form, setForm] = useSafeState<any>()
+  const [gender, setGender] = useSafeState<any>()
+  const [agree, setAgree] = useSafeState<boolean>(false)
+  const [cancelFee, setCancelFee] = useSafeState<any>()
+  const [communityConfig] = CommunityConfigProperty.state().useState()
+
+  let inputLanguage = React.useRef<LibInput_rectangle>(null)
+  let inputDescription = React.useRef<LibInput_rectangle>(null)
+  let inputPlaceB = React.useRef<LibInput_rectangle>(null)
+  let inputDateB = React.useRef<LibInput_rectangle>(null)
+  let inputDomisili = React.useRef<LibInput_rectangle>(null)
+  let inputHeight = React.useRef<LibInput_rectangle>(null)
+  let inputWeight = 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 inputCancelDays = React.useRef<LibInput_rectangle>(null)
+
+  let dialogSetBirthdate = React.useRef<ComponentSlidingup>(null)
+
+
+  useEffect(() => {
+    loadForm()
+  }, [])
+
+  function loadForm(): void {
+    new LibCurl('community_form', null,
+      (res) => {
+        setForm(res)
+      },
+      () => {
+        // setMsg(msg)
+      }
+    )
+  }
+
+
+  function openLocation(): void {
+    LibNavigation.navigateForResult('user/location', undefined).then((location) => {
+      inputDomisili.current?.setText(location.detail)
+      setLoc(location);
+    })
+  }
+
+  function next(): void {
+    if (images.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_cover"))
+      return
+    }
+    if (!gender) {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_gender"))
+      return
+    }
+    if (inputPlaceB.current?.getText() == '') {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_birth_place"))
+      return
+    }
+    if (!date) {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_birth_date"))
+      return
+    }
+    if (!langs || langs.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_lang"))
+      return
+    }
+    if (inputWeight.current?.getText() == '') {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_weight"))
+      return
+    }
+    if (inputHeight.current?.getText() == '') {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_height"))
+      return
+    }
+    if (inputDescription.current?.getText() == '') {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_bio"))
+      return
+    }
+
+    if (_talentSkill && _talentSkill.length == 0) {
+      LibToastProperty.show(esp.lang("community/registrasi_talent", "empty_skill"))
+      return
+    }
+
+    var 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 post = {
+      cat_id: item.id,
+      images: JSON.stringify(images),
+      lang_ability: langs.map((item: any) => encodeURIComponent(item.id)).join('|'),
+      biography: encodeURIComponent(inputDescription.current!.getText()),
+      community_cat: JSON.stringify(_talentSkill),
+      gender: gender.id,
+      birthday_location: inputPlaceB.current?.getText(),
+      birthday_date: date,
+      location_id: loc.id,
+      height: inputHeight.current?.getText(),
+      weight: inputWeight.current?.getText(),
+      sosmed: JSON.stringify(sosmed),
+      cancellation_fee: cancelFee,
+      cancellation_days: inputCancelDays.current?.getText()
+    }
+
+
+    LibDialog.confirm(esp.lang("community/registrasi_talent", "next_title"), esp.lang("community/registrasi_talent", "next_msg"), esp.lang("community/registrasi_talent", "next_confirm"), () => {
+      LibProgress.show(esp.lang("community/registrasi_talent", "next_wait"))
+      new LibCurl('community_register', post, (result, msg) => {
+        LibProgress.hide()
+        LibDialog.info(esp.lang("community/registrasi_talent", "next_success"), result);
+        LibNavigation.backToRoot()
+        LibNavigation.navigate('user/profile')
+        // LibNavigation.navigate('community/index')
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("community/registrasi_talent", "next_failed"), error?.message)
+      }, 1)
+    }, esp.lang("community/registrasi_talent", "next_cancel"), () => {
+
+    })
+
+  }
+
+  function getLanguage() {
+    LibNavigation.navigateForResult('community/language', { data: langs }).then((items) => {
+      inputLanguage.current?.setText(items.map((item: any) => item.name).join(', '))
+      setLangs(items)
+    })
+  }
+
+  function setSkill(): void {
+    LibNavigation.navigateForResult('community/talent_skill', { item: item, exclude: _talentSkill.map((item: any) => item.community_cat_id) }, 2).then((item) => {
+      let talentSkills = [..._talentSkill]
+      talentSkills.push(item)
+      set_talentSkill([...talentSkills])
+    })
+  }
+
+  function setEditSkill(_edit: any, index: number): void {
+    LibNavigation.navigateForResult('community/talent_skill', { item: item, edit: _edit, exclude: _talentSkill.map((item: any) => item.community_cat_id) }, 2).then((item) => {
+      let talentSkills: any = [..._talentSkill]
+      talentSkills.splice(index, 1, item)
+      set_talentSkill([...talentSkills])
+      // setCounter(counter + 1)
+    })
+  }
+
+  function setDeleteSkill(index?: number): void {
+    let talentSkills: any = [..._talentSkill]
+    talentSkills.splice(index, 1)
+    set_talentSkill([...talentSkills])
+    // setCounter(counter + 1)
+  }
+
+  function addNewImage() {
+    LibImage.fromGallery({ crop: { ratio: "36:23", forceCrop: true, message: '' } }).then((image: any) => {
+      let _images = [...images]
+      _images.push(image)
+      setImages(_images)
+    })
+  }
+
+  function deleteImage(url: string) {
+    LibDialog.warningConfirm(esp.lang("community/registrasi_talent", "title_delete_image"), esp.lang("community/registrasi_talent", "msg_delete_image"), esp.lang("community/registrasi_talent", "confirm_delete_image"), () => {
+      setImages(images && images.filter((item: string) => item != url))
+
+    }, esp.lang("community/registrasi_talent", "cancel_delete_image"), () => { })
+  }
+
+  function renderImages(item: any, index: number) {
+    return (
+      <ComponentTouchable key={item + index} style={{ width: 90 }} onPress={() => { deleteImage(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 renderGender(item: any, i: number) {
+    return (
+      <ComponentTouchable testID='Gender' key={i} onPress={() => { setGender(item) }}>
+        <View style={{ flexDirection: 'row', height: 35, alignContent: 'center', alignItems: 'center', marginRight: 30 }}>
+          <View style={{ height: 20, width: 20, borderRadius: 10, borderColor: '#8e8e8e', borderWidth: 1, justifyContent: 'center', alignItems: 'center' }} >
+            {item.id === (gender && gender.id) && <View style={{ height: 15, width: 15, borderRadius: 7.5, backgroundColor: '#51B596' }} />}
+          </View>
+          <Text allowFontScaling={false} style={{ marginLeft: 15 }}>{item.name}</Text>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderTalentSkill(item: any, i: number) {
+    let firstSkill = (i == 0 ? esp.lang("community/registrasi_talent", "main_skill") : esp.lang("community/registrasi_talent", "other_skill"))
+    return (
+      <CommunityTalent_skill_item
+        data={item}
+        key={i}
+        edit={true}
+        onPressEdit={() => { setEditSkill(item, i) }}
+        delete={true}
+        onPressDelete={() => { setDeleteSkill(i) }}
+        title={firstSkill}
+        images={item.images}
+        community_cat={item.community_cat}
+        experience={item.experience}
+        package={item?.package}
+      />
+    )
+  }
+
+  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_talent", "placeholder_username")} />
+      </View>
+    )
+  }
+
+  if (!form) {
+    return <LibLoading />
+  }
+
+  let sosmed = communityConfig?.sosmed
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <LibKeyboard_avoid style={{ flex: 1 }} >
+        <ComponentHeader title={esp.lang("community/registrasi_talent", "header_title")} subtitle={esp.lang("community/registrasi_talent", "header_subtitle")} />
+        <ScrollView showsVerticalScrollIndicator={false} >
+          <View style={{ margin: 15, marginBottom: 0, flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("community/registrasi_talent", "hello")}</Text>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", fontWeight: 'bold', letterSpacing: 0 }}>{(user?.name)} </Text>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("community/registrasi_talent", "complete_id")}</Text>
+          </View>
+          <View style={{ margin: 15, backgroundColor: '#fff', borderRadius: 5, borderTopColor: '#eeeeee', borderTopWidth: 1 }}>
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_cover")} mandatory />
+            <LibTextstyle textStyle={'caption2'} style={{ color: '#9b9b9b', fontSize: 10 }} text={esp.lang("community/registrasi_talent", "label_photo")} />
+            <View key={images.length} >
+              <ScrollView key={images.length} horizontal style={{ height: 80, marginTop: 8 }} >
+                {
+                  images?.length < 3 &&
+                  <ComponentTouchable testID='cover_photo' 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>
+            </View>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_gender")} mandatory />
+            <View style={{ marginTop: 8, marginRight: 13, flexDirection: 'row' }}>
+              {
+                form && form.gender && form.gender.length > 0 && form.gender.map(renderGender)
+              }
+            </View>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_place")} mandatory />
+            <View testID='input_placebirth'>
+              <LibInput_rectangle ref={inputPlaceB} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_talent", "placeholder_place")} />
+            </View>
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_date")} mandatory />
+            <ComponentTouchable testID='select_datebirth' onPress={() => dialogSetBirthdate.current?.show()} >
+              <LibInput_rectangle editable={false} ref={inputDateB} onPress={() => dialogSetBirthdate.current?.show()} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_talent", "placeholder_date")} />
+            </ComponentTouchable>
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "domicile")} />
+            <ComponentTouchable testID='domisili' onPress={() => { openLocation() }} >
+              <LibInput_rectangle ref={inputDomisili} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} onPress={() => { openLocation() }} editable={false} placeholder={esp.lang("community/registrasi_talent", "plcaholder_domicile")} defaultValue={loc && loc.detail} />
+            </ComponentTouchable>
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_lang")} mandatory />
+            <ComponentTouchable testID='bahasa' onPress={getLanguage} >
+              <LibInput_rectangle ref={inputLanguage} editable={false} defaultValue={data && langs.map((item: any) => item.name).join(', ')} onPress={getLanguage} returnKeyType="next" style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_talent", "placeholder_lang")} />
+            </ComponentTouchable>
+
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+              <View style={{ flex: 2 }}>
+                <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_heigth")} mandatory />
+                <View testID='tinggi_badan'>
+                  <LibInput_rectangle ref={inputHeight} keyboardType={"numeric"} maxLength={3} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8, marginRight: 13 }} placeholder={esp.lang("community/registrasi_talent", "height")} />
+                </View>
+              </View>
+              <View style={{ flex: 2 }}>
+                <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_weight")} mandatory />
+                <View testID='berat_badan'>
+                  <LibInput_rectangle ref={inputWeight} keyboardType={"numeric"} maxLength={3} style={{ borderRadius: 5, borderColor: '#c4c4c4', height: 35, marginTop: 8 }} placeholder={esp.lang("community/registrasi_talent", "weight")} />
+                </View>
+              </View>
+            </View>
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_bio")} mandatory />
+            <View testID='biografy'>
+              <LibInput_rectangle ref={inputDescription} multiline={true} defaultValue={data && data.biography} placeholder={'Biografi singkat'} inputStyle={{ textAlignVertical: 'top', paddingTop: 10, height: 150 }} style={{ borderRadius: 5, borderColor: '#c4c4c4', marginBottom: 10, marginTop: 8, height: 150, justifyContent: 'flex-start' }} />
+            </View>
+          </View>
+
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginLeft: 15, marginBottom: 15 }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: '#1abc9c' }}>{esp.lang("community/registrasi_talent", "expertise")}</Text>
+            <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginRight: 15 }} />
+          </View>
+
+          {
+            _talentSkill && _talentSkill.length > 0 && _talentSkill.map(renderTalentSkill)
+          }
+
+          <ComponentTouchable testID='tambah_skill' onPress={() => { setSkill() }}>
+            <View style={{ justifyContent: 'center', borderWidth: 1, borderColor: '#3498db', marginTop: 15, alignContent: 'center', alignItems: 'center', flexDirection: 'row', borderRadius: 5, backgroundColor: '#fff', margin: 15, 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_talent", "add_skill")}</Text>
+            </View>
+          </ComponentTouchable>
+
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginLeft: 15, marginBottom: 15 }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}> {esp.lang("community/registrasi_talent", "social_media")} </Text>
+            <View style={{ marginLeft: 12, height: 2, backgroundColor: '#979797', flex: 1, marginRight: 15 }} />
+          </View>
+
+          <View style={{ marginBottom: 0, marginTop: 0, margin: 15, backgroundColor: '#fff', borderRadius: 5, paddingBottom: 20 }}>
+
+            {
+              sosmed && sosmed.length > 0 && sosmed.map(renderSosmed)
+            }
+
+
+            <ComponentLabel_input label={esp.lang("community/registrasi_talent", "label_cancel_days")} />
+            <View style={{ flexDirection: 'row', flex: 1 }}>
+              <LibInput_rectangle ref={inputCancelDays} placeholder={esp.lang("community/registrasi_talent", "placeholder_cancel_days")} style={{ borderTopLeftRadius: 5, borderBottomLeftRadius: 5, width: 100 }} keyboardType="numeric" maxLength={1} />
+              <View style={{ marginTop: 12, backgroundColor: '#F6F6F6', justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderLeftWidth: 0, height: 40, width: 40, borderWidth: 1, borderTopRightRadius: 4, borderBottomRightRadius: 4, borderColor: '#C5C5C5' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{esp.lang("community/registrasi_talent", "day")}</Text>
+              </View>
+            </View>
+
+            <ComponentCancellation onPress={(item) => { setCancelFee(item) }} />
+
+          </View>
+
+          <ComponentAccept
+            agree={agree}
+            testID="accept_term"
+            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 testID='join_now' onPress={() => { agree ? next() : LibToastProperty.show(esp.lang("community/registrasi_talent", "toast_not_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" }} >{data ? esp.lang("community/registrasi_talent", "save") : esp.lang("community/registrasi_talent", "join")}</Text>
+              </View>
+            </ComponentTouchable>
+          </View>
+        </View>
+        <ComponentSlidingup ref={dialogSetBirthdate}>
+          <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)
+                inputDateB.current?.setText(moment(date).localeFormat('DD MMMM YYYY'))
+                dialogSetBirthdate.current?.hide()
+              }}
+              selectedDate={date}
+            />
+          </View>
+        </ComponentSlidingup>
+      </LibKeyboard_avoid>
+    </View >
+  )
+}

package/modules/community/review_form.tsx

@@ -0,0 +1,90 @@
+// noPage
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
+import { LibComponent } from 'esoftplay/cache/lib/component/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibInput_rectangle } from 'esoftplay/cache/lib/input_rectangle/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
+import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { ScrollView, Text, View } from 'react-native';
+
+export interface CommunityReview_formProps {
+}
+export interface CommunityReview_formState {
+  text: string,
+  review: string
+}
+
+export default class m extends LibComponent<CommunityReview_formProps, CommunityReview_formState> {
+
+  dialogReview = React.createRef<LibSlidingup>()
+  text: string = ""
+  url: string = ""
+  callback: any
+
+  constructor(props: CommunityReview_formProps) {
+    super(props);
+    this.doReview = this.doReview.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.state = { text: '', review: '' }
+  }
+
+  show(review: string, url: string, callback: () => void) {
+    this.callback = callback
+    this.url = url
+    this.dialogReview.current?.show()
+    this.setState({ review })
+  }
+
+  hide(): void {
+    this.dialogReview.current?.hide()
+  }
+
+  doReview(): void {
+    if (this.url) {
+      LibProgress.show(esp.lang("community/review_form", "wait_review"))
+      new LibCurl(this.url, { notes: this.state.text },
+        (res, msg) => {
+          this.hide()
+          this.callback()
+          LibProgress.hide()
+        },
+        (msg) => {
+          LibToastProperty.show(msg?.message)
+        }, 1
+      )
+    }
+  }
+
+  render(): any {
+    const { text, review } = this.state
+    return (
+      <LibSlidingup ref={this.dialogReview}>
+        <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingHorizontal: 12, paddingTop: 20, paddingBottom: 20 }}>
+          <LibTextstyle text={esp.lang("community/review_form", "teview")} textStyle={"headline"} style={{ textAlign: "center", marginBottom: 16 }} />
+          <ComponentLabel_input label={esp.lang("community/edit_talent", "label_from_admin")} />
+          <ScrollView showsVerticalScrollIndicator={false} style={{ maxHeight: 200 }} >
+            <Text style={{ marginTop: 10, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#000" }}>{((review && review) || "")}</Text>
+          </ScrollView>
+          <ComponentLabel_input label={esp.lang("community/edit_talent", "review_for_admin")} mandatory mandatoryColor={'#d0021b'} />
+          <LibInput_rectangle
+            onChangeText={(t) => this.setState({ text: t })}
+            multiline={true}
+            defaultValue={""}
+            placeholder={esp.lang("community/edit_talent", "placeholder_review")} inputStyle={{ textAlignVertical: 'top', paddingTop: 10, paddingBottom: 10, height: 150 }} style={{ borderColor: '#c4c4c4', marginBottom: 20, marginTop: 8, height: 150, justifyContent: 'flex-start' }} />
+          <View pointerEvents={text.length < 3 ? "none" : "auto"} >
+            <ComponentButton label={esp.lang("community/review_form", "button_review")} style={{ marginTop: 20, marginBottom: 15 }} onPress={() => {
+              this.doReview()
+            }} />
+          </View>
+        </View>
+      </LibSlidingup>
+    )
+  }
+}

package/modules/community/review_item.tsx

@@ -0,0 +1,73 @@
+// withHooks
+// noPage
+
+import { ComponentRating_mini } from 'esoftplay/cache/component/rating_mini/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 React from 'react';
+import { Text, View } from 'react-native';
+
+export interface CommunityReview_itemProps {
+  review: string,
+  image: string,
+  name: string,
+  created: string,
+  rating: string,
+  images: any
+}
+
+export function toCsv(value: any) {
+  let val = Math.max(0, Math.min(5, parseInt(value)));
+  let pre = '00000';
+  if (val != 0) {
+    let idx = val - 1;
+    pre = pre.substr(0, idx) + '1' + pre.substr(idx + 1);
+  }
+  return pre.split('').join(',');
+}
+
+export default function m(props: CommunityReview_itemProps): any {
+
+  function secureEmail(email: string) {
+    var avg, splitted, part1, part2;
+    splitted = email.split("@");
+    part1 = splitted[0];
+    avg = part1.length - 2;
+    part1 = part1.substring(0, (part1.length - avg));
+    part2 = splitted[1];
+    return part1 + "***@" + part2;
+  }
+
+  function renderImages(item: any, i: number) {
+    return (
+      <ComponentTouchable key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: props.images, index: i })} >
+        <LibPicture source={{ uri: item.image }} style={{ height: 60, width: 60, resizeMode: 'cover', marginTop: 10, marginBottom: 10, marginRight: 7, marginLeft: 0, borderRadius: 10 }} />
+      </ComponentTouchable>
+    )
+  }
+
+  return (
+    <View style={{ flexDirection: 'row', margin: 15, marginLeft: 0, marginBottom: 0, borderBottomColor: '#f5f5f5', borderBottomWidth: 1, paddingBottom: 10 }}>
+      <LibPicture source={{ uri: props.image }} style={{ height: 40, width: 40, borderRadius: 20 }} resizeMode="cover" />
+      <View style={{ marginLeft: 10, flex: 1 }}>
+        <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, color: "#4b4b4b" }}>{secureEmail(props.name)}</Text>
+        <View style={{ width: LibStyle.width * 0.20 }}>
+          <ComponentRating_mini starSize={15} rating={toCsv(props.rating)} />
+        </View>
+        {
+          props.review !== "" &&
+          <Text allowFontScaling={false} style={{ marginTop: 10, fontFamily: "SFProText", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 16, letterSpacing: 0, color: "#000", textAlign: 'justify' }}>{props.review}</Text>
+        }
+
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+          {
+            props.images.length > 0 && props.images.map(renderImages)
+          }
+        </View>
+      </View>
+    </View>
+  )
+}