esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/community/talent.tsx

@@ -0,0 +1,506 @@
+// withHooks
+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 { ComponentTouchable } from 'esoftplay/cache/component/touchable/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 { 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 useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
+
+import { ComponentAlert } from 'esoftplay/cache/component/alert/import';
+import { MarketSheet } from 'esoftplay/cache/market/sheet/import';
+import React, { useEffect, useRef } from 'react';
+import { Linking, ScrollView, Text, View } from 'react-native';
+export interface CommunityTalentProps {
+
+}
+
+export function openSosmed(sosmed: string, username: string): void {
+  let url: any = {
+    facebook: 'https://www.facebook.com/',
+    instagram: 'https://www.instagram.com/',
+    youtube: 'https://www.youtube.com/channel/',
+    twitter: 'https://twitter.com/'
+  }
+  const _mine = url[sosmed] + username
+  Linking.canOpenURL(_mine).then((v) => v && Linking.openURL(_mine))
+}
+
+const subs = useGlobalSubscriber()
+export function subscribe(): UseSubscribeReturn {
+  return subs
+}
+
+export default function m(props: CommunityTalentProps): any {
+  const user = UserClass.state().get()
+  const [result, setResult] = useSafeState<any>()
+  const [msg, setMsg] = useSafeState()
+  const [tab, setTab] = useSafeState<any>(0)
+  const [proffesionItem, setProffesionItem] = useSafeState<any>()
+  const [proffesion, setProffesion] = useSafeState<any>()
+  const [counter, setCounter] = useSafeState<any>(0)
+  const [resReview, setResReview] = useSafeState<any>()
+  const menuRef = useRef<MarketSheet>(null)
+
+  const { item } = LibNavigation.getArgsAll(props)
+  const url = "community?cat_id=" + item.id
+
+  const bgHeight = LibStyle.width * 23 / 36 + LibStyle.STATUSBAR_HEIGHT
+  const imgGrid = (LibStyle.width - 60) / 3
+
+  function loadData(): void {
+    new LibCurl(url, null, (res) => {
+      setResult(res)
+      setProffesionItem(res.community_list[0])
+      setProffesion(res.community_list)
+      setCounter(counter + 1)
+      setTab(0)
+      if (res?.url_reviewing && res?.url_reviewing !== "") {
+        loadReview(res?.url_reviewing)
+      }
+    }, (error) => {
+      LibNavigation.replace('community/registrasi_talent', { item: item })
+      setMsg(error)
+    })
+  }
+
+  function loadReview(url_reviewing: string) {
+    new LibCurl(url_reviewing, null, (res) => {
+      setResReview(res)
+    }, (error) => {
+
+    })
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  subs.useSubscribe(loadData)
+
+  function deleteProfession(): void {
+    LibDialog.warningConfirm(esp.lang("community/talent", "delete_title"), esp.lang("community/talent", "delete_msg"), esp.lang("community/talent", "delete_confirm"), () => {
+      let _professionItem = [
+        {
+          list_id: proffesionItem.list_id,
+          community_cat_id: proffesionItem.id,
+          community_cat: proffesionItem.name,
+          experience: proffesionItem.experience,
+          package: []
+          // images: images,
+        }
+      ]
+
+      let post = {
+        community_id: result.id,
+        community_cat_delete: JSON.stringify(_professionItem)
+      }
+
+      LibProgress.show(esp.lang("community/talent", "delete_wait"))
+      new LibCurl('community_update', post, () => {
+        LibProgress.hide()
+        loadData()
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("community/talent", "delete_failed"), error?.message)
+      })
+    }, esp.lang("community/talent", "delete_cancel"), () => { })
+  }
+
+  function activeAccountTemporary() {
+
+    let post = {
+      community_id: result.id,
+      active: 1,
+      cat_id: result?.community_cat.id,
+    }
+
+    LibDialog.confirm(esp.lang("community/talent", "activate_rirle"), esp.lang("community/talent", "activate_msg"), esp.lang("community/talent", "activate_confirm"), () => {
+      LibProgress.show(esp.lang("community/talent", "wait"))
+      new LibCurl('community_update', post, (result, msg) => {
+        LibProgress.hide()
+        LibDialog.info(esp.lang("community/edit_talent", "dialog_title"), msg);
+        loadData()
+      }, (error) => {
+        LibProgress.hide()
+        LibDialog.warning(esp.lang("community/edit_talent", "dialog_alert"), error?.message)
+      }, 1)
+    }, esp.lang("community/talent", "activate_cancel"), () => {
+
+    })
+  }
+
+
+  if (!result && !msg) {
+    return (
+      <View style={{ flex: 1 }}>
+        <ComponentHeader title={esp.lang("community/talent", "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>
+    )
+  }
+
+  if (result?.active == 4) {
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <ComponentHeader title={esp.lang("community/talent", "active4_header")} />
+        <View style={{ margin: 15, flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+          <Text allowFontScaling={false} style={{ marginTop: 20, marginBottom: 15, fontFamily: "Arial", fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("community/talent", "active4_title")}</Text>
+          <Text allowFontScaling={false} style={{ marginLeft: 20, marginRight: 20, marginBottom: 30, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("community/talent", "active4_msg")}</Text>
+          <ComponentButton onPress={() => { activeAccountTemporary() }} label={esp.lang("community/talent", "aktivkan")} backgroundColor="#fff" fontColor={LibStyle.colorRed} borderColor={LibStyle.colorRed} />
+        </View>
+      </View>
+    )
+  }
+
+
+  if (result?.active == 5) {
+    let a = LibUtils.moment(result?.date_deleted_account).add(1, 'months').localeFormat("DD MMMM YYYY")
+    return (
+      <View style={{ flex: 1, backgroundColor: '#fff' }}>
+        <ComponentHeader title={esp.lang("community/talent", "active5_header")} />
+        <View style={{ margin: 15, flex: 1, alignContent: 'center', alignItems: 'center', justifyContent: 'center' }}>
+          <Text allowFontScaling={false} style={{ marginTop: 20, marginBottom: 15, fontFamily: "Arial", fontSize: 18, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("community/talent", "active5_title")}</Text>
+          <Text allowFontScaling={false} style={{ marginLeft: 15, marginRight: 15, marginBottom: 30, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, textAlign: "center", color: "#34495e" }}>{esp.lang("community/talent", "active5_msg", a)}</Text>
+          <ComponentButton onPress={() => {
+            LibNavigation.navigate("user/help")
+          }} label={esp.lang("community/talent", "call_admin")} backgroundColor="#fff" fontColor={LibStyle.colorRed} borderColor={LibStyle.colorRed} />
+        </View>
+      </View>
+    )
+  }
+
+  // if (msg)
+  //   return (
+  //     <CommunityRegistrasi_talent navigation item={item} />
+  //   )
+
+  let images = [{ image: result.image }]
+  if (result && result.images && result.images.length > 0) {
+    images = [...images, ...result.images.filter((item: any) => item.image != result.image)]
+  }
+
+  function renderAlert(item: any, i: number) {
+    return (
+      <ComponentAlert
+        key={i}
+        color="#dc143c"
+        msg={item.message}
+        useIcon
+      />
+    )
+  }
+
+  function renderImages(item: any, i: number) {
+    return (
+      <View key={i}>
+        <ComponentTouchable onPress={() => LibNavigation.navigate('lib/gallery', { images: images, index: i })}>
+          <LibPicture source={{ uri: item.image }} style={{ height: bgHeight, width: LibStyle.width, resizeMode: 'cover', backgroundColor: '#f1f2f3' }} />
+        </ComponentTouchable>
+        {
+          result && result.active !== "2" &&
+          <View style={[{ backgroundColor: '#fff', position: 'absolute', top: 15, right: 15, borderWidth: 1, borderColor: "rgba(0, 0, 0, 0.5)", height: 30, width: 30, borderRadius: 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }, LibStyle.elevation(2)]}>
+            <ComponentTouchable onPress={() => { LibNavigation.navigateForResult('community/talent_images', { crop: "rectangle", result: result.images, community_id: result.id, from: 'talent', active: result.active, review: resReview, url_resubmit: result.url_resubmit }).then(() => { loadData(); setTab(0) }) }} >
+              <LibPicture source={esp.assets('icons/ic_pen_blue.png')} style={{ height: 15, width: 15, resizeMode: 'contain' }} />
+            </ComponentTouchable>
+          </View>
+        }
+      </View>
+    )
+  }
+
+  function renderProfession(item: any, i: number) {
+    return (
+      <ComponentTouchable key={i} onPress={() => {
+        setTab(i)
+        setProffesionItem(item)
+      }}>
+        <View style={{ 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' }}>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: tab == i ? "#FFF" : "#9b9b9b" }}>{item.name || item.profession}</Text>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 9, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: tab == i ? "#FFF" : "#9b9b9b", marginTop: 1 }}>{esp.lang("community/talent", "year_exp", item.experience)}</Text>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  function renderProfessionImages(item: any, i: number) {
+    if (i < 6) {
+      return (
+        <View key={i} style={{ overflow: 'hidden', marginRight: 10, borderRadius: 5, height: imgGrid, width: imgGrid, marginBottom: 10 }} >
+          <ComponentTouchable onPress={() => { LibNavigation.navigate('lib/gallery', { images: proffesionItem.images, index: i }) }}>
+            <LibPicture style={{ height: imgGrid, width: imgGrid, resizeMode: 'cover', backgroundColor: '#f1f2f3' }} source={{ uri: item.image || item }} />
+          </ComponentTouchable>
+        </View>
+      )
+    }
+  }
+
+  function renderProfessionPackages(item: any, i: number) {
+    return (
+      <View key={i} style={{ marginTop: 15, flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+        <Text allowFontScaling={false} style={{ flex: 6, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#949494" }}>{item?.package_name}</Text>
+        <Text allowFontScaling={false} style={{ flex: 3, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{LibUtils.money(item?.package_price, "IDR")}</Text>
+      </View>
+    )
+  }
+
+  function renderSosmed(item: any, i: number) {
+    let imgSosmed = ""
+    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={() => { openSosmed(item.type, item.username) }}>
+        <View style={{ flex: 2, flexDirection: 'row', marginBottom: 10 }}>
+          <LibPicture source={esp.assets(imgSosmed)} style={{ width: 15, height: 15, marginRight: 10, resizeMode: 'contain' }} />
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }}>{item.username.toLowerCase()}</Text>
+        </View>
+      </ComponentTouchable>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#f9f9f9' }} >
+      <ComponentHeader title={(result.name)}
+        iconShare={result?.url_share && result?.url_share != ""} onPressShare={() => { LibUtils.share(result?.url_share) }}
+        more onPressMore={() => {
+          menuRef.current?.show()
+        }}
+      />
+      <LibScroll onRefresh={loadData} >
+        {
+          LibUtils.checkUndefined(result, 'alert.0') && result?.alert?.map(renderAlert)
+        }
+        {
+          result && result.images && result.images !== "" && result.images !== null && result.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' }} />
+              {
+                result && result.active !== "2" &&
+                <View style={[{ backgroundColor: '#fff', position: 'absolute', top: 15, right: 15, borderWidth: 1, borderColor: "rgba(0, 0, 0, 0.5)", height: 30, width: 30, borderRadius: 10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }, LibStyle.elevation(2)]}>
+                  <ComponentTouchable onPress={() => { LibNavigation.navigateForResult('community/talent_images', { crop: "rectangle", result: result.images, community_id: result.id, from: 'talent', active: result.active, review: resReview, url_resubmit: result.url_resubmit }).then(() => { loadData(); setTab(0) }) }} >
+                    <LibPicture source={esp.assets('icons/ic_pen_blue.png')} style={{ height: 15, width: 15, resizeMode: 'contain' }} />
+                  </ComponentTouchable>
+                </View>
+              }
+            </View>
+        }
+        <View style={{ padding: 15, marginBottom: 10, backgroundColor: '#fff' }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }} numberOfLines={1} ellipsizeMode="tail" >{user?.name.toUpperCase()}</Text>
+            {
+              result && result.active !== "2" &&
+              <ComponentTouchable
+                onPress={() => {
+                  LibNavigation.navigate('community/edit_talent', { data: result, group: 'data', review: resReview })
+                }} >
+                <LibPicture source={esp.assets('icons/ic_pen_blue.png')} style={{ marginLeft: 15, height: 15, width: 15, resizeMode: 'contain' }} />
+              </ComponentTouchable>
+            }
+          </View>
+
+          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#8b572a" }} >{result.gender.name}, {result.age}</Text>
+
+          <Text allowFontScaling={false} style={{ marginTop: 20, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("community/talent", "language")}</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.length > 0 && result.language_list.map((item: any) => item.name).join(', ')}
+            </Text>
+          </View>
+
+          {/* <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{result.religion.name} {result.marital.name}</Text>
+            <ComponentTouchable onPress={() => { }} >
+              <LibPicture source={esp.assets('icons/ic_pen_blue.png')} style={{ height: 15, width: 15, resizeMode: 'contain' }} />
+            </ComponentTouchable>
+          </View> */}
+
+          <Text allowFontScaling={false} style={{ marginTop: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{esp.lang("community/talent", "wh", result.height, result.weight)}</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }} >
+            <LibIcon name="map-marker" size={18} color={"#9b9b9b"} />
+            <Text allowFontScaling={false} style={{ marginLeft: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#9b9b9b" }}>{result.location_name}</Text>
+          </View>
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", marginTop: 20 }} >{esp.lang("community/talent", "bio")}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 7, fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "justify", color: "#909090", flexWrap: 'wrap' }}>{/* decodeURI( */result.biography/* ) */}</Text>
+        </View>
+
+        <View style={{ padding: 15, marginTop: 0, backgroundColor: '#fff' }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("community/talent", "talent")}</Text>
+            {
+              proffesion && proffesion.length > 0 &&
+              <View style={{ flexDirection: 'row' }}>
+                {
+                  result && result.active != 2 && proffesion && proffesion.length > 1 &&
+                  <ComponentTouchable onPress={deleteProfession} >
+                    <LibPicture source={esp.assets('icons/ic_trash_red.png')} style={{ height: 15, width: 15, paddingHorizontal: 20, resizeMode: 'contain' }} />
+                  </ComponentTouchable>
+                }
+                {
+                  result && result.active !== "2" &&
+                  <ComponentTouchable onPress={() => { LibNavigation.navigate('community/talent_skill_edit', { cat: item, edit: proffesionItem, community_id: result.id }) }} >
+                    <LibPicture source={esp.assets('icons/ic_pen_blue.png')} style={{ marginLeft: 15, height: 15, width: 15, resizeMode: 'contain' }} />
+                  </ComponentTouchable>
+                }
+              </View>
+            }
+          </View>
+
+          <View style={{ flexDirection: 'row', flex: 1 }}>
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              {
+                proffesion && proffesion.length > 0 && proffesion.map(renderProfession)
+              }
+              {
+                result && result.active !== "2" &&
+                <ComponentTouchable onPress={() => LibNavigation.navigate('community/talent_skill', { item: item, communityId: result.id, from: 'talent', exclude: proffesion.map((item: any) => item.id) })}>
+                  <View style={{ flexDirection: 'row', borderWidth: 0.5, borderColor: "#f9f9f9", marginRight: 1, marginTop: 10, paddingBottom: 7, paddingLeft: 14, paddingRight: 14, height: 42, borderTopLeftRadius: 5, borderTopRightRadius: 5, backgroundColor: '#fff', borderStyle: "solid", justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name="plus-circle-outline" color="#3498db" />
+                    <Text allowFontScaling={false} style={{ marginLeft: 5, fontFamily: "Arial", fontSize: 9, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#3498db", marginTop: 1 }}>{esp.lang("community/talent", "add_profession")}</Text>
+                  </View>
+                </ComponentTouchable>
+              }
+            </ScrollView>
+          </View>
+          {
+            proffesionItem &&
+            <View style={{ marginTop: 10 }}>
+              <View style={{ flexWrap: 'wrap', flexDirection: 'row' }}>
+                {
+                  proffesionItem?.images !== null && proffesionItem?.images.length > 0 && proffesionItem?.images.map(renderProfessionImages)
+                }
+              </View>
+
+              {
+                result && result.active != "2" &&
+                <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', marginTop: 10, alignSelf: 'center', marginVertical: 7 }}>
+                  <ComponentButton onPress={() => { LibNavigation.navigateForResult('community/talent_images', { crop: 'square', result: proffesionItem?.images, rule: 'no_edit', from: 'talent', community_cat_id: proffesionItem?.list_id, community_id: result.id, active: result.active, review: resReview, url_resubmit: result.url_resubmit }).then(() => { setTab(0); loadData() }) }} style={{ height: 32 }} label={esp.lang("community/talent", "btn_edit")} 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("community/talent", "package_price")}</Text>
+              }
+              {
+                proffesionItem?.packages?.length > 0 && proffesionItem?.packages?.map(renderProfessionPackages)
+              }
+            </View>
+          }
+          <Text allowFontScaling={false} style={{ marginBottom: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", marginTop: 20 }} >{esp.lang("community/talent", "cancelation")}</Text>
+          <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#949494" }}>{esp.lang("community/talent", "refund", result?.hasOwnProperty("cancellation_fee") && result.cancellation_fee == null ? "0" : result.cancellation_fee)}</Text>
+
+          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a", marginTop: 20 }} >{esp.lang("community/talent", "cancelation_limit")}</Text>
+          <Text allowFontScaling={false} style={{ marginTop: 7, fontFamily: "Arial", fontSize: 11, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, textAlign: "justify", color: "#909090", flexWrap: 'wrap' }}>{result?.hasOwnProperty("cancellation_days") && result.cancellation_days == null ? "0" : result.cancellation_days} {esp.lang("community/talent", "days")}</Text>
+
+
+        </View>
+
+        <View style={{ padding: 15, marginTop: 10, backgroundColor: '#fff', marginBottom: 10 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }} >
+            <Text allowFontScaling={false} style={{ marginBottom: 10, fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: "#4a4a4a" }} >{esp.lang("community/talent", "media")}</Text>
+            {
+              result && result.active !== "2" &&
+              <ComponentTouchable
+                onPress={() => {
+                  LibNavigation.navigate('community/edit_talent', { data: result, group: 'sosmed', review: resReview })
+                }} >
+                <LibPicture source={esp.assets('icons/ic_pen_blue.png')} style={{ marginLeft: 15, height: 15, width: 15, resizeMode: 'contain' }} />
+              </ComponentTouchable>
+            }
+          </View>
+          {
+            result?.sosmed?.length == 0 ?
+              <View>
+                <ComponentMessage message={esp.lang("community/talent", "empty")} />
+              </View>
+              :
+              <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>
+      </LibScroll>
+
+      <MarketSheet
+        _ref={menuRef}
+        title={esp.lang("community/talent", "close_talent")}
+        options={[
+          {
+            text: esp.lang("community/talent", "temp"),
+            textStyle: { color: "red" },
+            onPress: () => {
+              LibNavigation.navigate('community/delete', { active: 4, community_id: result?.id, cat_id: result?.community_cat.id })
+              LibDialog.hide()
+            }
+          },
+          {
+            text: esp.lang("community/talent", "delete"),
+            textStyle: { color: "red" },
+            onPress: () => {
+              LibNavigation.navigate('community/delete', { active: 5, community_id: result?.id, cat_id: result?.community_cat.id })
+              LibDialog.hide()
+            }
+          },
+        ]}
+      />
+
+    </View>
+  )
+}