esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/feed/talent_detail.tsx

@@ -0,0 +1,688 @@
+// withHooks
+import { ChatChatProperty } from 'esoftplay/cache/chat/chat/import';
+import { CommunityReview_item } from 'esoftplay/cache/community/review_item/import';
+import { CommunityTalentProperty } from 'esoftplay/cache/community/talent/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { ComponentRating_mini } from 'esoftplay/cache/component/rating_mini/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { ComponentTranslate } from 'esoftplay/cache/component/translate/import';
+import { LibCarrousel } from 'esoftplay/cache/lib/carrousel/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 { 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 { LibSkeleton } from 'esoftplay/cache/lib/skeleton/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 React, { useEffect } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+
+export interface CommunityTalent_detailProps {
+  navigation: any
+}
+export default function m(props: CommunityTalent_detailProps): any {
+  const user = UserClass.state().get()
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+  const [like, setLike] = useSafeState<any>(0)
+  const [tab, setTab] = useSafeState<any>(0)
+  const [proffesionItem, setProffesionItem] = useSafeState<any>()
+  const [proffesion, setProffesion] = useSafeState<any>()
+
+  const [reason, setReason] = useSafeState<any>()
+  const [idReason, setIdReason] = useSafeState<any>()
+  const [showReason, setShowReason] = useSafeState<boolean>(true)
+  const [showConfirm, setShowConfirm] = useSafeState<boolean>(false)
+
+  const [urlReview, setUrlReview] = useSafeState<string>('')
+  const [dataReview, setDataReview] = useSafeState<any>()
+
+  let showMore = React.useRef<ComponentSlidingup>(null)
+
+  const url = LibNavigation.getArgs(props, 'url')
+
+
+  useEffect(() => {
+    loadData()
+    loadReasonFlag()
+
+  }, [])
+
+  useEffect(() => {
+    loadDataReview()
+  }, [urlReview])
+
+  function loadData(): void {
+    // urlnya isinya ini : http://api.test.bigbangfest.id/community_talent_detail/52
+    new LibCurl(url, null, (res) => {
+      setResult(res)
+      setUrlReview(res.url_review)
+      setLike(res.is_liked)
+      setProffesionItem(res.community_list[0])
+      setProffesion(res.community_list)
+    }, (error) => {
+      setError(error)
+    }, 1)
+  }
+
+  function loadReasonFlag(): void {
+    new LibCurl('community_flag_reason', null, (result, msg) => {
+      setReason(result)
+    }, (error) => {
+      LibToastProperty.show(error?.message)
+    })
+  }
+
+  function loadDataReview() {
+    new LibCurl(urlReview, null, (result, msg) => {
+      setDataReview(result.list)
+    }, (error) => {
+      LibToastProperty.show(error?.message)
+    }, 1)
+  }
+
+  const bgHeight = LibStyle.width * 23 / 36 + LibStyle.STATUSBAR_HEIGHT
+  const imgGrid = (LibStyle.width - 60) / 3
+
+  if (error) {
+    return (
+      <View style={{ flex: 1 }}>
+        <ComponentHeader title={esp.lang("feed/talent_detail", "header_error")} />
+        <ComponentMessage message={error?.message} />
+      </View>
+    )
+  }
+
+  if (!result && !dataReview) {
+    return (
+      <View style={{ flex: 1 }}>
+        <ComponentHeader
+          title={esp.lang("feed/talent_detail", "header_title")}
+        />
+        <LibSkeleton>
+          <View style={{ height: bgHeight, width: LibStyle.width, backgroundColor: '#fff' }} />
+          <View style={{ margin: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
+            <View style={{ width: '60%' }}>
+              <View style={{ backgroundColor: '#fff', borderRadius: 4, height: 25, width: '60%' }} />
+              <View style={{ marginTop: 10, backgroundColor: '#fff', borderRadius: 4, height: 15, width: '40%' }} />
+            </View>
+            <View style={{ height: 40, width: '30%', borderRadius: 4, backgroundColor: '#fff' }} />
+          </View>
+          <View style={{ marginTop: 0, margin: 15, flexDirection: 'row', justifyContent: 'space-between' }}>
+            <View style={{ backgroundColor: '#fff', borderRadius: 4, height: 15, width: '40%' }} />
+            <View style={{ height: 40, width: '30%', borderRadius: 4, backgroundColor: '#fff' }} />
+          </View>
+
+          <View style={{ marginLeft: 15, height: 20, width: '40%', backgroundColor: '#fff', borderRadius: 4 }} />
+          <View style={{ marginTop: 5, marginLeft: 15, height: 60, width: '92%', backgroundColor: '#fff', borderRadius: 4 }} />
+
+          <View style={{ margin: 15, height: 20, width: '40%', backgroundColor: '#fff', borderRadius: 4 }} />
+
+          <View style={{ margin: 15, marginTop: 0, flexDirection: 'row', justifyContent: 'space-evenly' }}>
+            <View style={{ width: (LibStyle.width - 60) / 3, height: (LibStyle.width - 60) / 3, borderRadius: 10, backgroundColor: '#fff' }} />
+            <View style={{ width: (LibStyle.width - 60) / 3, height: (LibStyle.width - 60) / 3, borderRadius: 10, backgroundColor: '#fff' }} />
+            <View style={{ width: (LibStyle.width - 60) / 3, height: (LibStyle.width - 60) / 3, borderRadius: 10, backgroundColor: '#fff' }} />
+          </View>
+        </LibSkeleton>
+      </View>
+    )
+  }
+
+  function _like(id: number, likes: number): void {
+    var post = {
+      community_id: id,
+      like: likes
+    }
+    new LibCurl('community_like', post, (result, msg) => {
+      loadData()
+    }, (error) => {
+
+    })
+  }
+
+  function showDialog(): void {
+    LibDialog.custom(<View>
+      <ComponentTouchable onPress={() => {
+        UserClass.isLogin((user) => {
+          if (user) {
+            showMore.current!.show()
+            setShowReason(true)
+            setShowConfirm(false)
+          } else {
+            LibNavigation.navigate('user/login')
+          }
+          LibDialog.hide()
+        })
+      }}>
+        <View style={{ paddingBottom: 5, borderBottomWidth: 1, borderBottomColor: '#f3f3f3' }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, textAlign: "center", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("feed/talent_detail", "report_block")}</Text>
+        </View>
+      </ComponentTouchable>
+      <ComponentTouchable onPress={() => {
+        LibDialog.hide()
+      }}>
+        <View style={{ marginTop: 5 }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, textAlign: "center", letterSpacing: 0, color: "#4a4a4a" }}>{esp.lang("feed/talent_detail", "cancel")}</Text>
+        </View>
+      </ComponentTouchable>
+    </View>)
+  }
+
+  function report(): void {
+    if (idReason == undefined) {
+      showMore.current!.hide()
+      LibToastProperty.show(esp.lang("feed/talent_detail", "empty_reason"), 2000)
+      return
+    }
+    if (user && result.user_id == user?.id) {
+      showMore.current!.hide()
+      LibToastProperty.show(esp.lang("feed/talent_detail", "alert_selft_report"))
+      return
+    }
+    const post = {
+      user_id_flag: result.user_id,
+      community_id_flag: result.id,
+      reason_id: idReason,
+    }
+    new LibCurl("community_flag", post, (result, msg) => {
+      showMore.current!.hide()
+      loadData()
+      LibToastProperty.show(result)
+    }, (error) => {
+      showMore.current!.hide()
+      LibToastProperty.show(error?.message)
+    })
+  }
+
+  function doUnblockUser(id: any): void {
+    LibDialog.warningConfirm(esp.lang("feed/talent_detail", "title_unblock"), esp.lang("feed/talent_detail", "unblock_msg"), esp.lang("feed/talent_detail", "unblock_confirm"), () => {
+      LibProgress.show(esp.lang("feed/talent_detail", "unblock_wait"))
+      new LibCurl('community_unblock/' + id, null, (result, msg) => {
+        LibToastProperty.show(result)
+        LibProgress.hide()
+        loadData()
+      }, (error) => {
+        LibProgress.hide()
+        LibToastProperty.show(error?.message)
+      })
+    }, esp.lang("feed/talent_detail", "unblock_cancel"), () => {
+
+    })
+  }
+
+  let images = [{ image: result.image }]
+  if (result && result.images && result.images.length > 0) {
+    images = [...images, ...result.images.filter((item: any) => item.image != result.image)]
+  }
+
+  if (result && result.is_blocked == 1) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#f9f9f9' }}>
+        <ComponentHeader title={result && (result?.name)} />
+        <View style={{ flex: 1, justifyContent: 'center', alignContent: 'center', alignItems: 'center', alignSelf: 'center' }}>
+          <LibPicture style={{ height: 80, width: 80, marginBottom: 20 }} source={esp.assets('icons/ic_checklist.png')} />
+          <Text allowFontScaling={false} style={{ marginBottom: 15, alignSelf: 'center', fontFamily: "Arial", fontSize: 16, fontWeight: 'bold', fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("feed/talent_detail", "report_title")}</Text>
+          <Text allowFontScaling={false} style={{ textAlign: 'center', margin: 15, marginTop: 0, alignSelf: 'center', fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("feed/talent_detail", "report_msg")}</Text>
+          <Text allowFontScaling={false} style={{ textAlign: 'center', margin: 15, marginTop: 0, alignSelf: 'center', fontFamily: "Arial", fontSize: 14, fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("feed/talent_detail", "report_info", (result?.name))}</Text>
+        </View>
+        <ComponentTouchable onPress={() => { doUnblockUser(result.id) }}>
+          <View style={{ height: 48, borderWidth: 2, borderColor: '#f4f4f4', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ alignSelf: 'center', fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: LibStyle.colorBlue }}>{esp.lang("feed/talent_detail", "btn_unblock")}</Text>
+          </View>
+        </ComponentTouchable>
+      </View>
+    )
+  }
+
+  if (result && result.active !== "1") {
+    return (
+      <View style={{ flex: 1 }}>
+        <ComponentHeader title={result && (result?.name)} />
+        <ComponentMessage message={esp.lang("feed/talent_detail", "msg_talent_notactive")} />
+      </View>
+    )
+  }
+
+  let sold = Number(result?.sold)
+  let failed = Number(result.failed)
+
+  // 0 = blm aktif, 1 = aktiv, 2 = dibanned, 3 = sedang direview
+
+  function renderImages(item: any, i: number) {
+    const styleId_Z1ecB7O: any = { height: bgHeight, width: LibStyle.width, resizeMode: 'cover' }
+    return (
+      <ComponentTouchable key={i} onPress={() => LibNavigation.navigate('lib/gallery', { images: images, index: i })}>
+        <LibPicture source={{ uri: item.image }} style={styleId_Z1ecB7O} />
+      </ComponentTouchable>
+    )
+  }
+
+  function renderProffesion(item: any, i: number) {
+    const styleId_1CsXD8: any = { borderWidth: 0.5, borderColor: "#f9f9f9", marginRight: 1, marginTop: 10, paddingBottom: 7, paddingLeft: 14, paddingRight: 14, height: 42, borderTopLeftRadius: 5, borderTopRightRadius: 5, backgroundColor: tab == i ? '#40b4de' : '#fff', borderStyle: "solid", justifyContent: 'center', alignContent: 'center', alignItems: 'center' }
+    const styleId_lRsWM: any = { fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: tab == i ? "#FFF" : "#9b9b9b" }
+    const styleId_mPm3V: any = { fontFamily: "Arial", fontSize: 9, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: tab == i ? "#FFF" : "#9b9b9b", marginTop: 1 }
+
+    return (
+      <ComponentTouchable key={i} onPress={() => {
+        setTab(i)
+        setProffesionItem(item)
+      }}>
+        <View style={styleId_1CsXD8}>
+          <Text allowFontScaling={false} style={styleId_lRsWM}>{item.name || item.profession}</Text>
+          <Text allowFontScaling={false} style={styleId_mPm3V}>{esp.lang("feed/talent_detail", "exp_year", item?.experience)}</Text>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderProffesionPackage(item: any, i: number) {
+    return (
+      <View key={i} style={styleId_Z2c69uV}>
+        <Text allowFontScaling={false} style={styleId_Z1LMGpz}>{item.package_name}</Text>
+        <Text allowFontScaling={false} style={styleId_ZgEkjv}>{LibUtils.money(item.package_price, "IDR")}</Text>
+      </View>
+    )
+  }
+
+  function renderProffesionImages(item: any, i: number) {
+    const styleId_1GECGM: any = { overflow: 'hidden', marginRight: 10, borderRadius: 5, height: imgGrid, width: imgGrid, marginBottom: 10 }
+    const styleId_Z2gTq4s: any = { height: imgGrid, width: imgGrid, resizeMode: 'cover' }
+    const styleId_Z1itW8I: any = { overflow: 'hidden', marginRight: 10, borderRadius: 5, height: imgGrid, width: imgGrid, backgroundColor: '#f1f2f3', alignItems: 'center', justifyContent: 'center', alignContent: 'center' }
+
+    if (i < 5) {
+      return (
+        <View key={i} style={styleId_1GECGM} >
+          <ComponentTouchable onPress={() => { LibNavigation.navigate('lib/gallery', { images: proffesionItem?.images, index: i }) }}>
+            <LibPicture style={styleId_Z2gTq4s} source={{ uri: item.image || item }} />
+          </ComponentTouchable>
+        </View>
+      )
+    } else if (i == 5) {
+      return (
+        <ComponentTouchable key={i} onPress={() => { LibNavigation.navigate('feed/images', { url_images: proffesionItem?.images_more, title: proffesionItem?.name }) }} style={styleId_Z19gyWj} >
+          <View style={styleId_Z1itW8I} >
+            <Text allowFontScaling={false} numberOfLines={2} style={styleId_1GVn6q}>{esp.lang("feed/talent_detail", "show_all_images")}</Text>
+          </View>
+        </ComponentTouchable>
+      )
+    } else {
+      return null
+    }
+  }
+
+  function renderSosmed(item: any, i: number) {
+    let imgSosmed: any = ""
+    if (item.type == 'facebook') {
+      imgSosmed = "icons/fb.png"
+    } else if (item.type == 'instagram') {
+      imgSosmed = "icons/insta.png"
+    } else if (item.type == 'youtube') {
+      imgSosmed = "icons/ty.png"
+    } else {
+      imgSosmed = "icons/ic_twitter.png"
+    }
+    return (
+      <ComponentTouchable key={i} onPress={() => { CommunityTalentProperty.openSosmed(item.type, item.username) }}>
+        <View style={styleId_Z2mJBPC}>
+          <LibPicture source={esp.assets(imgSosmed)} style={styleId_212BFM} />
+          <Text allowFontScaling={false} style={styleId_bVGXg}>{item.username.toLowerCase()}</Text>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderReview(item: any, i: number) {
+    return (
+      <CommunityReview_item
+        key={i.toString()}
+        review={item.review}
+        image={item.user_avatar}
+        rating={item.rating}
+        name={item.buyer_username}
+        created={item.created}
+        images={item.images}
+      />
+    )
+  }
+
+  function renderReason(item: any, i: number) {
+    return (
+      <ComponentTouchable key={i} onPress={() => {
+        setIdReason(item.id)
+        setShowReason(showReason == true ? false : true)
+        setShowConfirm(true)
+      }}>
+        <View style={styleId_Z1fnF53}>
+          <Text allowFontScaling={false} style={styleId_Z1gYeLk}>{item.title}</Text>
+          <LibPicture style={styleId_25VKCd} source={esp.assets('icons/ic_chevron_right.png')} />
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#f9f9f9' }}>
+      <ComponentHeader
+        title={result && (result?.name)}
+        more
+        onPressMore={() => {
+          showDialog()
+        }}
+        iconShare={result?.url_share && result?.url_share !== ""} onPressShare={() => { LibUtils.share(result?.url_share) }}
+      />
+      <LibScroll>
+        {
+          images && images !== null && images.length > 0 ?
+            <LibCarrousel
+              delay={3000}
+              style={{ height: bgHeight, width: LibStyle.width }}
+              autoplay
+              bullets
+              bulletStyle={{ width: 7, height: 7, backgroundColor: "#fff", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+              chosenBulletStyle={{ width: 7, height: 7, backgroundColor: "#f4e31b", borderRadius: 3.5, borderWidth: 0, marginHorizontal: 2 }}
+              bulletsContainerStyle={{ marginBottom: -10 }}>
+              {
+                images && images !== null && images.length > 0 && images.map(renderImages)
+              }
+            </LibCarrousel>
+            :
+            <View>
+              <View style={{ height: bgHeight, width: LibStyle.width, backgroundColor: '#f1f2f3' }} />
+            </View>
+        }
+
+        {/* view 1 */}
+        <View style={{ padding: 15, marginBottom: 10, backgroundColor: '#fff' }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ flexWrap: 'wrap', flex: 5, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a", marginRight: 10 }} >{(result?.name)}</Text>
+            {
+              proffesionItem && proffesionItem?.name &&
+              <TouchableOpacity onPress={() => LibNavigation.push('feed/list', { par_id: result?.cat_id, url: "community_talent?cat_id=" + proffesionItem?.id, title: proffesionItem?.name, titleFrom: "talent" })} >
+                <View style={{ borderRadius: 5, backgroundColor: '#fff', borderStyle: "solid", borderWidth: 0.5, borderColor: "#04b995", paddingTop: 3, paddingBottom: 3, paddingLeft: 12, paddingRight: 12, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#04b995" }}>{proffesionItem && proffesionItem?.name}</Text>
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 9, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#9b9b9b", marginBottom: 3 }}>{esp.lang("feed/talent_detail", "year_exp", proffesionItem?.experience)}</Text>
+                </View>
+              </TouchableOpacity>
+            }
+          </View>
+
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#8b572a" }} >{result.gender.name}</Text>
+            <Text allowFontScaling={false} style={{ marginLeft: 0, marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#8b572a" }} >{result.gender.name == "" ? result.age : (', ' + result.age)}</Text>
+          </View>
+          {
+            result && result.language_list.length > 0 &&
+            <View>
+              <Text allowFontScaling={false} style={{ marginTop: 20, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "lang")}</Text>
+              <View style={{ flexDirection: 'row', marginTop: 5, flexWrap: 'wrap' }}>
+                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#04b995" }} >
+                  {result && result.language_list && result.language_list.length > 0 && result.language_list.map((item: any) => item.name).join(', ')}
+                </Text>
+              </View>
+            </View>
+          }
+
+          {/* <Text allowFontScaling={false} style={{ marginTop: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{result.religion.name} {result.marital.name}</Text> */}
+          <View style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+            {
+              result.weight !== "0" &&
+              <Text allowFontScaling={false} style={{ marginRight: 5, marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("feed/talent_detail", "weight", result?.weight)}</Text>
+            }
+            {
+              result.height !== "0" &&
+              <Text allowFontScaling={false} style={{ marginRight: 5, marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("feed/talent_detail", "height", result?.height)}</Text>
+            }
+          </View>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, flex: 1 }} >
+              <LibIcon name="map-marker" size={18} color={"#9b9b9b"} />
+              <Text allowFontScaling={false} style={{ marginLeft: 5, flex: 1, flexWrap: 'wrap', fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{result.location_name}</Text>
+            </View>
+            <View>
+              {/* <StarRating selectedStar={() => { }} disabled={false} maxStars={5} rating={LibUtils.getRatingCount(result.rating)} starSize={14} emptyStar={'ios-star-outline'} fullStar={'ios-star'} halfStar={'ios-star-half'} iconSet={'Ionicons'} fullStarColor={'#FFC523'} emptyStarColor={'#FFC523'} /> */}
+              <ComponentRating_mini rating={result.rating} />
+              <View style={{ marginTop: 7, flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <LibPicture source={esp.assets('icons/love.png')} style={{ width: 23, height: 23, resizeMode: 'contain' }} />
+                <Text allowFontScaling={false} style={{ marginLeft: 10, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }}>{esp.lang("feed/talent_detail", "total_likes", result?.likes)}</Text>
+              </View>
+            </View>
+          </View>
+
+          {
+            result && result.biography !== "" &&
+            <>
+              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", marginTop: 20 }} >{esp.lang("feed/talent_detail", "text_bio")}</Text>
+              <ComponentTranslate text={result?.biography} />
+            </>
+          }
+        </View>
+
+        {/* view 2 */}
+        {
+          proffesion && proffesion.length > 0 &&
+          <View style={{ padding: 15, marginBottom: 10, backgroundColor: '#fff' }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "text_talent")}</Text>
+            <View style={{ flexDirection: 'row', flex: 1 }}>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                {
+                  proffesion && proffesion.length > 0 && proffesion.map(renderProffesion)
+                }
+              </ScrollView>
+            </View>
+            {
+              proffesionItem &&
+              <View style={{ marginTop: 10 }}>
+                <View style={{ flexWrap: 'wrap', flexDirection: 'row' }}>
+                  {
+                    proffesionItem && proffesionItem?.images && proffesionItem?.images !== null && proffesionItem?.images.length > 0 && proffesionItem?.images.map(renderProffesionImages)
+                  }
+                </View>
+                {
+                  proffesionItem && proffesionItem?.images > 0 &&
+                  <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 10, alignSelf: 'center', marginVertical: 7 }}>
+                    <ComponentButton onPress={() => { LibNavigation.navigate('community/talent_images', { result: proffesionItem?.images, from: 'feed' }) }} style={{ height: 32 }} label={esp.lang("feed/talent_detail", "btn_other", String(proffesionItem?.name))} backgroundColor='#FFF' borderColor={"#e1e1e1"} fontColor={"#e1e1e1"} />
+                  </View>
+                }
+                {
+                  proffesionItem?.packages?.length > 0 && <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a", marginTop: 20 }} >{esp.lang("feed/talent_detail", "text_package_price")}</Text>
+                }
+                {
+                  proffesionItem?.packages?.length > 0 && proffesionItem?.packages?.map(renderProffesionPackage)
+                }
+              </View>
+
+            }
+          </View>
+        }
+
+        {/* view 3 */}
+        <View style={{ padding: 15, marginBottom: 10, backgroundColor: '#fff' }}>
+          <View style={{ borderWidth: 1, borderColor: LibStyle.colorGrey, marginTop: 10 }}>
+            <View style={{ flexDirection: 'row' }}>
+              <View style={{ borderWidth: 1, borderColor: LibStyle.colorGrey, padding: 15, width: LibStyle.width / 2 - 15, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 18, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "justify" }}>{result?.hasOwnProperty("cancellation_fee") && result.cancellation_fee == null ? "0" : result.cancellation_fee}%</Text>
+                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 13, fontWeight: "normal", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#949494" }} >{esp.lang("feed/talent_detail", "cancel_fee")}</Text>
+              </View>
+              <View style={{ borderWidth: 1, borderColor: LibStyle.colorGrey, padding: 15, width: LibStyle.width / 2 - 15, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "justify", color: LibStyle.colorPrimary, }}>{esp.lang("feed/talent_detail", "day_cancel", result?.cancellation_days == null ? "0" : result?.cancellation_days)}</Text>
+                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "max_cancel")}</Text>
+              </View>
+            </View>
+
+            <View style={{ flexDirection: 'row' }}>
+              <View style={{ borderWidth: 1, borderColor: LibStyle.colorGrey, padding: 15, width: LibStyle.width / 3 - 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "justify", color: LibStyle.colorPrimary, }}>{sold}</Text>
+                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "transaction")}</Text>
+              </View>
+              <View style={{ borderWidth: 1, borderColor: LibStyle.colorGrey, padding: 15, width: LibStyle.width / 3 - 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "justify", color: LibStyle.colorPrimary, }}>{sold == 0 ? "0 %" : (100 * (sold - failed) / sold).toFixed(0)}{sold == 0 ? "" : ' %'}</Text>
+                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "success")}</Text>
+              </View>
+              <View style={{ borderWidth: 1, borderColor: LibStyle.colorGrey, padding: 15, width: LibStyle.width / 3 - 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                <Text allowFontScaling={false} style={{ marginBottom: 5, fontFamily: "Arial", fontSize: 18, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "justify", color: LibStyle.colorPrimary, }}>{sold == 0 ? "0 %" : (100 * (failed) / sold).toFixed(0)}{sold == 0 ? "" : ' %'}</Text>
+                <Text allowFontScaling={false} style={{ textAlign: 'center', fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "canceled")}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* view 4 */}
+
+        {
+          result && result.sosmed !== null && result.sosmed.length !== 0 &&
+          <View style={{ padding: 15, marginBottom: 10, backgroundColor: '#fff' }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "media")}</Text>
+            <View style={{ borderTopWidth: 1, borderTopColor: '#f3f3f3', borderBottomWidth: 1, borderBottomColor: '#f3f3f3', paddingBottom: 15, paddingTop: 15, marginTop: 15 }}>
+              {
+                result && result.sosmed.length > 0 && result.sosmed.map(renderSosmed)
+              }
+
+            </View>
+          </View>
+        }
+
+        {/* view for review */}
+        {
+          dataReview && dataReview.length > 0 &&
+          <View style={{ padding: 15, paddingBottom: 0, marginBottom: 10, backgroundColor: '#fff' }}>
+
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("feed/talent_detail", "rating_review")}</Text>
+            {
+              dataReview && dataReview.length > 0 && dataReview.map(renderReview)
+            }
+            <ComponentTouchable onPress={() => {
+              LibNavigation.navigate('feed/talent_list_review', { url: 'community_talent_detail_review/' + result?.id })
+            }}>
+              <View style={{ flex: 1, height: 40, alignContent: 'center', justifyContent: 'center', alignItems: 'center' }}>
+                <Text style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#ED6536" }}>{esp.lang("feed/talent_detail", "show_review")}</Text>
+              </View>
+            </ComponentTouchable>
+          </View>
+        }
+
+      </LibScroll>
+      <View style={{ height: 50, backgroundColor: '#fff', flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+        <View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-around', marginRight: 15, marginLeft: 15 }}>
+          <ComponentTouchable onPress={() => {
+            UserClass.isLogin((user) => {
+              if (user) {
+                setLike(like == 1 ? 0 : 1);
+                _like(result.id, (like == 1 ? 0 : 1));
+              } else {
+                LibNavigation.navigate('user/login')
+              }
+            })
+          }} style={{ marginLeft: 15, width: 56, height: 38, borderWidth: 1, borderRadius: 24, borderColor: '#51B596', marginRight: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+            <LibPicture source={esp.assets(result.is_liked == 1 ? 'icons/love_green.png' : 'icons/heart_green.png')} style={{ width: 23, height: 23, resizeMode: 'contain' }} />
+          </ComponentTouchable>
+          {/* ini tombol jika detail tsb adalah dirinya sendiri */}
+
+          {
+            user && result.user_id == user?.id ?
+              <ComponentTouchable onPress={() => {
+                LibNavigation.navigate('community/talent', { item: result.community_cat })
+              }}>
+                <View style={{ paddingLeft: 15, paddingRight: 20, alignContent: 'center', justifyContent: 'center', width: LibStyle.width * 0.5 - 20, marginRight: 10, borderWidth: 1, borderColor: "#eca92c", height: 40, borderRadius: 20, backgroundColor: "#FFF", flexDirection: 'row', alignItems: 'center', paddingHorizontal: 9 }} >
+                  <LibPicture source={esp.assets('icons/start.png')} style={{ width: 18, height: 18, resizeMode: 'contain' }} />
+                  <Text allowFontScaling={false} ellipsizeMode="middle" numberOfLines={1} style={{ marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#eca92c" }}>{esp.lang("feed/talent_detail", "edit_profile")}</Text>
+                </View>
+              </ComponentTouchable>
+              :
+              <View style={{ flexDirection: 'row' }}>
+                <ComponentTouchable onPress={() => {
+                  UserClass.isLogin((user) => {
+                    if (user)
+                      ChatChatProperty.openChat(result.user_id)
+                    // LibNavigation.navigate('chat/chat', { chat_to: result.user_id })
+                    else {
+                      LibNavigation.navigate('user/login')
+                    }
+                  })
+                }} style={{ width: LibStyle.width / 5, height: 38, borderWidth: 1, borderRadius: 24, borderColor: '#51B596', marginRight: 10, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                  <LibPicture source={esp.assets('icons/ic_chat.png')} style={{ width: 18, height: 18, resizeMode: 'contain' }} />
+                </ComponentTouchable>
+                <ComponentTouchable testID='book_button' onPress={() => {
+                  UserClass.isLogin((user) => {
+                    if (user)
+                      LibNavigation.navigate('feed/booking', {
+                        url: url,
+                        chat_to: result.user_id,
+                        type_community: "talent"
+                      })
+                    else {
+                      LibNavigation.navigate('user/login')
+                    }
+                  })
+                }}>
+                  <View style={{ paddingLeft: 15, paddingRight: 20, alignContent: 'center', justifyContent: 'center', width: LibStyle.width * 0.5 - 20, marginRight: 10, borderWidth: 1, borderColor: "#51B596", height: 40, borderRadius: 20, backgroundColor: "#51B596", flexDirection: 'row', alignItems: 'center', paddingHorizontal: 9 }} >
+                    <Text allowFontScaling={false} ellipsizeMode="middle" numberOfLines={1} style={{ marginLeft: 7, fontFamily: "SFProText", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#fff" }}>Book {result && (result.name)}</Text>
+                  </View>
+                </ComponentTouchable>
+              </View>
+          }
+
+        </View>
+      </View>
+
+      <ComponentSlidingup ref={showMore}>
+        <View style={{ justifyContent: 'center', backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, paddingTop: 18, paddingBottom: 17, maxHeight: LibStyle.height * 0.49 }}>
+          <Text allowFontScaling={false} style={{ marginBottom: 15, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("feed/talent_detail", "text_report")}</Text>
+          {
+            showReason &&
+            <ScrollView showsVerticalScrollIndicator={false} >
+              <Text allowFontScaling={false} style={{ marginLeft: 25, marginRight: 10, marginTop: 0, marginBottom: 0, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("feed/talent_detail", "select_reason", (result?.name))}</Text>
+              {
+                reason && reason.length > 0 && reason.map(renderReason)
+              }
+            </ScrollView>
+          }
+          {
+            showConfirm &&
+            <View>
+              <Text allowFontScaling={false} style={{ marginLeft: 25, marginRight: 25, marginTop: 0, marginBottom: 0, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("feed/talent_detail", "text_block", (result?.name))}</Text>
+              <View style={{ flexDirection: 'row' }}>
+                <View style={{ flex: 1, marginLeft: 15 }} >
+                  <ComponentButton label={esp.lang("feed/talent_detail", "btn_back")} style={{ backgroundColor: LibStyle.colorRed, marginTop: 20, width: LibStyle.width / 2 - 20 }}
+                    onPress={() => {
+                      setShowReason(true)
+                      setShowConfirm(false)
+                    }} />
+                </View>
+
+                <View style={{ flex: 1, marginRight: 15 }} >
+                  <ComponentButton
+                    label={esp.lang("feed/talent_detail", "btn_confirm")}
+                    style={{ marginTop: 20, width: LibStyle.width / 2 - 15, backgroundColor: LibStyle.colorPrimary }}
+                    onPress={report} />
+                </View>
+              </View>
+            </View>
+          }
+        </View>
+      </ComponentSlidingup>
+    </View >
+  )
+}
+const styleId_Z2c69uV: any = { marginTop: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }
+const styleId_Z1LMGpz: any = { flex: 6, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#949494" }
+const styleId_ZgEkjv: any = { flex: 3, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }
+const styleId_Z19gyWj: any = { width: 90 }
+const styleId_1GVn6q: any = { padding: 5, flexWrap: 'wrap', fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#949494", textAlign: 'center', alignSelf: 'center' }
+const styleId_Z2mJBPC: any = { flex: 2, flexDirection: 'row', marginBottom: 10 }
+const styleId_212BFM: any = { width: 15, height: 15, marginRight: 10, resizeMode: 'contain' }
+const styleId_bVGXg: any = { fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }
+const styleId_Z1fnF53: any = { flexDirection: 'row', justifyContent: 'space-between', height: 35, alignContent: 'center', alignItems: 'center', marginRight: 30, margin: 10 }
+const styleId_Z1gYeLk: any = { flex: 8, marginLeft: 15, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }
+const styleId_25VKCd: any = { width: 13, height: 13, alignSelf: 'center' }