esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/user/block.tsx

@@ -0,0 +1,128 @@
+// withHooks
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibLoading } from 'esoftplay/cache/lib/loading/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibProgress } from 'esoftplay/cache/lib/progress/import';
+import { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface UserBlockProps {
+
+}
+export default function m(props: UserBlockProps): any {
+  const [result, setResult] = useSafeState<any>()
+  const [error, setError] = useSafeState<any>()
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+
+  function loadData(): void {
+    new LibCurl('community_blocked', null, (result, msg) => {
+      setResult(result)
+    }, (error) => {
+      setError(error?.message)
+    })
+  }
+
+  function doUnblockUser(url: string): void {
+    LibDialog.warningConfirm(esp.lang("user/block", "title_warning_unblock_user"), esp.lang("user/block", "msg_warning_unblock_user"), esp.lang("user/block", "btn_yes_warning_unblock_user"), () => {
+      LibProgress.show(esp.lang("user/block", "msg_wait"))
+      new LibCurl(url, null, (result, msg) => {
+        LibToastProperty.show(result)
+        LibProgress.hide()
+        loadData()
+      }, (error) => {
+        LibProgress.hide()
+        LibToastProperty.show(error?.message)
+      })
+    }, esp.lang("user/block", "btn_cancel_warning_unblock_user"), () => {
+
+    })
+  }
+
+  if (error) {
+    return (
+      <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey }}>
+        <ComponentHeader title={esp.lang("user/block", "title_block_user")} notif />
+        {/* <View style={{ flex: 1, backgroundColor: '#3b8b7bf', justifyContent: 'center', alignContent: 'center', alignItems: 'center', alignSelf: 'center' }}>
+          <Text allowFontScaling={false} style={{ alignSelf: 'center', fontFamily: "Arial", fontSize: 16, fontWeight: 'bold', fontStyle: "normal", letterSpacing: 0 }}>{error}</Text>
+        </View> */}
+        <ComponentMessage message={error} />
+      </View>
+    )
+  }
+
+  if (!result) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  function renderItemTalent(item1: any, i: number) {
+    return (
+      <View key={i} style={styleId_Z261947} >
+        <LibPicture source={{ uri: item1.image }} style={styleId_2tyXYQ} />
+        <Text style={styleId_2GVKL} >{item1.name}</Text>
+        <TouchableOpacity onPress={() => { doUnblockUser(item1.url_unblock) }} >
+          <View style={styleId_283WYl} >
+            <Text style={styleId_Znot2H} >{esp.lang("user/block", "unblock")}</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  function renderItemInfluencer(item1: any, i: number) {
+    return (
+      <View key={i} style={{ marginBottom: 20, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, paddingVertical: 13, paddingHorizontal: 19, borderLeftWidth: 2, borderLeftColor: LibStyle.colorRed, ...LibStyle.elevation(2) }} >
+        <LibPicture source={{ uri: item1.image }} style={styleId_2tyXYQ} />
+        <Text style={styleId_2GVKL} >{item1.name}</Text>
+        <TouchableOpacity onPress={() => { doUnblockUser(item1.url_unblock) }} >
+          <View style={styleId_283WYl} >
+            <Text style={styleId_Znot2H} >{esp.lang("user/block", "unblock")}</Text>
+          </View>
+        </TouchableOpacity>
+      </View >
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#f9f9f9' }}>
+      <ComponentHeader title={esp.lang("user/block", "title_block_user")} notif />
+      <LibScroll style={{ flex: 1 }} onRefresh={loadData}>
+        {
+          result && result.filter((item: any) => item.cat_name == "Talents").length > 0 &&
+          <Text allowFontScaling={false} style={{ margin: 15, marginBottom: 0, fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("user/block", "talent")}</Text>
+        }
+        {
+          result && result.filter((item: any) => item.cat_name == "Talents").map(renderItemTalent)
+        }
+
+        {
+          result && result.filter((item: any) => item.cat_name == "Influencer").length > 0 &&
+          <Text allowFontScaling={false} style={{ marginTop: 20, margin: 15, marginBottom: 0, fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0 }}>{esp.lang("user/block", "influencer")}</Text>
+        }
+        {
+          result && result.filter((item: any) => item.cat_name == "Influencer").map(renderItemInfluencer)
+        }
+      </LibScroll>
+    </View>
+  )
+}
+const styleId_Z261947: any = { marginBottom: 20, flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', borderRadius: 4, marginHorizontal: 10, marginTop: 10, paddingVertical: 13, paddingHorizontal: 19, borderLeftWidth: 2, borderLeftColor: LibStyle.colorGreen, ...LibStyle.elevation(2) }
+const styleId_2tyXYQ: any = { height: 26, width: 26, borderRadius: 13, backgroundColor: LibStyle.colorLightGrey }
+const styleId_2GVKL: any = { fontFamily: 'Arial', fontSize: 13, fontWeight: "600", color: "#4a4a4a", marginLeft: 10, flex: 1 }
+const styleId_283WYl: any = { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 5, borderWidth: 1, borderColor: LibStyle.colorBlue }
+const styleId_Znot2H: any = { fontFamily: 'Arial', fontSize: 13, fontWeight: "400", color: LibStyle.colorBlue }

package/modules/user/class.ts

@@ -0,0 +1,142 @@
+// noPage
+// withObject
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import messaging from '@react-native-firebase/messaging';
+import { LibObject } from 'esoftplay/cache/lib/object/import';
+import esp from 'esoftplay/esp';
+import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
+import moment from "esoftplay/moment";
+import Constants from 'expo-constants';
+import * as Notifications from 'expo-notifications';
+import { Platform } from 'react-native';
+
+
+const state = useGlobalState(null, { persistKey: "user", loadOnInit: true })
+const topics = useGlobalState([], { persistKey: "user_topics", loadOnInit: true })
+
+export default {
+  state(): useGlobalReturn<any> {
+    return state
+  },
+  create(user: any): Promise<void> {
+    return new Promise((r, j) => {
+      const oldDt = state.get()
+      state?.set?.(user)
+      const isEqual = require('react-fast-compare');
+      if (!isEqual(oldDt, user) && esp.config().notification == 1) {
+        esp.mod("user/class").pushToken()
+      }
+      r(user)
+    })
+  },
+  load(callback?: (user?: any | null) => void): Promise<any> {
+    return new Promise(async (r, j) => {
+      AsyncStorage.getItem('user').then((user) => {
+        if (user) {
+          try {
+            let juser = JSON.parse(user)
+            if (callback) callback(state?.get?.() || juser)
+            r((state?.get?.() || juser))
+          } catch (error) {
+            if (callback) callback(null)
+              r(null)
+          }
+        } else {
+          if (callback) callback(null)
+          r(null)
+        }
+      })
+
+    })
+  },
+  isLogin(callback: (user?: any | null) => void): Promise<any> {
+    return new Promise((r, j) => {
+      this.load().then((user) => {
+        r(user);
+        if (callback) callback(user);
+      }).catch((nouser) => {
+        r(null);
+        if (callback) callback(null);
+      })
+    })
+  },
+  delete(): Promise<void> {
+    return new Promise(async (r) => {
+      topics.get().forEach((topic) => {
+        if (topic != 'userAll')
+          messaging().unsubscribeFromTopic(topic)
+      })
+      Notifications.setBadgeCountAsync(0)
+      state.reset()
+      await AsyncStorage.removeItem("user_notification");
+      esp.mod("user/data").deleteAll()
+      if (esp.config('notification') == 1) {
+        esp.mod("user/class").pushToken()
+      }
+      r()
+    })
+  },
+  async sendToken(token: string) {
+    if (token) {
+      const config = esp.config();
+      const LibCrypt = esp.mod("lib/crypt")
+      var post: any = {
+        user_id: 0,
+        group_id: esp.config('group_id'),
+        username: "",
+        token: token,
+        push_id: "",
+        is_app: Constants.appOwnership == 'expo' ? 0 : 1,
+        os: Platform.OS,
+        installation_id: await esp.mod("lib/utils").getInstallationID(),
+        device: Constants.deviceName,
+        secretkey: new LibCrypt().encode(config.salt + "|" + moment().format("YYYY-MM-DD hh:mm:ss"))
+      }
+      esp.mod("user/class").load(async (_user) => {
+        let user = LibObject.assign({}, _user)()
+        if (user) {
+          user["user_id"] = user.id
+          Object.keys(user).forEach((userfield) => {
+            Object.keys(post).forEach((postfield) => {
+              if (postfield == userfield && postfield != "os" && postfield != "token" && postfield != "secretkey" && postfield != "push_id" && postfield != "device") {
+                post[postfield] = user[userfield]
+              }
+            })
+          })
+        } else {
+          topics.get().forEach((topic) => {
+            if (topic != 'userAll')
+              messaging().unsubscribeFromTopic(topic)
+          })
+        }
+        var push_id = await AsyncStorage.getItem("push_id");
+        if (push_id) post["push_id"] = push_id
+        const LibCurl = esp.mod("lib/curl")
+        AsyncStorage.setItem("token", String(token))
+        new LibCurl(config.protocol + "://" + config.domain + config.uri + "user/push-token", post,
+          (res, msg) => {
+            AsyncStorage.setItem("push_id", String(res.push_id));
+            topics.set(res.topics)
+            AsyncStorage.setItem("token", String(token))
+            topics.get().forEach((topic) => {
+              messaging().subscribeToTopic(topic)
+            })
+            return (res)
+          }, (msg) => {
+            return (msg.message)
+          })
+      })
+    }
+  },
+  pushToken(): Promise<any> {
+    return new Promise((resolve, reject) => {
+      if (Constants.appOwnership == 'expo' && !esp.isDebug('')) {
+        resolve(undefined)
+        return
+      }
+      esp.mod("lib/notification").requestPermission(async (token) => {
+        resolve(await this.sendToken(token))
+      })
+    })
+  }
+}

package/modules/user/confirm.tsx

@@ -0,0 +1,52 @@
+// withHooks
+import { BigbangIndexProperty } from 'esoftplay/cache/bigbang/index/import';
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibNotification } from 'esoftplay/cache/lib/notification/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 { UserClass } from 'esoftplay/cache/user/class/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { ImageBackground, Text, View } from 'react-native';
+
+
+export interface UserConfirmProps {
+
+}
+export default function m(props: UserConfirmProps): any {
+  const data = UserClass.state().get()
+  let message = LibNavigation.getArgs(props, 'message', esp.lang("user/confirm", "msg"))
+  let result = LibNavigation.getArgs(props, 'result', {})
+  const checkUserValidate = data && data?.config?.user_validate || 1
+
+  return (
+    <View style={{ flex: 1 }} >
+      <ImageBackground source={esp.assets('bg_register.png')} style={{ height: LibStyle.height + LibStyle.STATUSBAR_HEIGHT }} >
+        <View style={{ flex: 1, justifyContent: 'center', marginBottom: -150, padding: 10 }}>
+          <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', padding: 15, borderRadius: 10 }}>
+            <LibPicture source={esp.assets('icons/ic_information.png')} style={{ width: 40, height: 40, marginTop: -35, marginBottom: 10 }} />
+            <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, fontWeight: "bold", marginBottom: 5, color: "#4a4a4a", textAlign: "center" }}>{message}</Text>
+          </View>
+        </View>
+        <ComponentButton
+          icon={'icons/ic_register_check.png'} label={checkUserValidate == 1 ? esp.lang("user/confirm", "back_to_homepage") : esp.lang("user/confirm", "complete_profile")}
+          style={{ marginBottom: 70, margin: 10, backgroundColor: checkUserValidate == 1 ? LibStyle.colorRed : LibStyle.colorGreen }} onPress={() => {
+            if (checkUserValidate == 1) {
+              LibNavigation.reset()
+              BigbangIndexProperty.setTab(0)
+            } else {
+              UserClass.create(result).then(() => {
+                LibProgress.hide()
+                LibNotification.drop()
+                LibNavigation.reset()
+                BigbangIndexProperty.setTab(0)
+              })
+            }
+          }} />
+      </ImageBackground>
+    </View>
+  )
+}

package/modules/user/confirm_with.tsx

@@ -0,0 +1,45 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/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 esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React, { useEffect } from 'react';
+import { ImageBackground, Linking, Text, View } from 'react-native';
+
+
+export interface UserConfirmProps {
+
+}
+export default function m(props: UserConfirmProps): any {
+  const [link, setLink] = useSafeState<any>()
+  let message = LibNavigation.getArgs(props, 'message', esp.lang("user/confirm_with", "msg"))
+  let result = LibNavigation.getArgs(props, 'result', '')
+
+  useEffect(() => {
+    Linking.canOpenURL(result).then((isValid) => {
+      if (isValid) {
+        setLink(result)
+      }
+    })
+  }, [])
+
+  return (
+    <View style={{ flex: 1 }} >
+      <ImageBackground source={esp.assets('bg_register.png')} style={{ height: LibStyle.height + LibStyle.STATUSBAR_HEIGHT }} >
+        <View style={{ flex: 1, justifyContent: 'center', marginBottom: -150, padding: 10 }}>
+          <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', padding: 15, borderRadius: 10 }}>
+            <LibPicture source={esp.assets('icons/ic_information.png')} style={{ width: 40, height: 40, marginTop: -35, marginBottom: 10 }} />
+            <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 16, fontWeight: "bold", marginBottom: 50, color: "#4a4a4a", textAlign: "center" }}>{message}</Text>
+            {
+              link &&
+              <ComponentButton label={esp.lang("user/confirm_with", "phone_verif")} onPress={() => Linking.openURL(link)} />
+            }
+          </View>
+        </View>
+      </ImageBackground>
+    </View>
+  )
+}

package/modules/user/coupon.tsx

@@ -0,0 +1,64 @@
+// withHooks
+import { ComponentCoupon } from 'esoftplay/cache/component/coupon/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentMessage } from 'esoftplay/cache/component/message/import';
+import { LibInfinite } from 'esoftplay/cache/lib/infinite/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface UserCouponProps {
+
+}
+export default function m(props: UserCouponProps): any {
+
+  let [counter, setCounter] = useSafeState<any>(1)
+  let [title, setTitle] = useSafeState<any>("")
+  // http://api.test.bigbangfest.id/merchant_coupon?event_id=5
+  let from = LibNavigation.getArgs(props, 'from')
+  let url = LibNavigation.getArgs(props, 'url')
+
+  function renderItem(item: any, index: number) {
+    let showBadge = item.has_coupon == 1 && (item.total > 0) && item.total == item.total_used && true
+    return (
+      <ComponentCoupon key={index}
+        badge={showBadge}
+        countTicket={esp.lang("user/coupon", "sold")}
+        bgBadge="#988F97"
+        onPress={() => { LibNavigation.navigate('user/coupon_detail', { url: item.url_detail }) }}
+        image={item.image}
+        amount={item.amount}
+        event_name={item.event_name}
+        view
+        expired={showBadge}
+      />
+    )
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("user/coupon", "my_coupon")} />
+
+      <LibInfinite
+        key={counter}
+        url={from == "OrderDetail" ? url : 'merchant_coupon_member'}
+        onResult={(data) => setTitle(data.title)}
+        ListHeaderComponent={
+          <View style={{ marginHorizontal: 20, marginTop: 10 }}>
+            <Text style={{ fontFamily: 'Arial', fontWeight: 'bold', fontSize: 18, color: LibStyle.colorBrown }}>{title}</Text>
+          </View>
+        }
+        errorView={(e: any) => (
+          <ComponentMessage message={e} />
+        )}
+        renderItem={renderItem}
+      />
+
+    </View>
+  )
+}

package/modules/user/coupon_detail.tsx

@@ -0,0 +1,195 @@
+// withHooks
+import { ComponentButton } from 'esoftplay/cache/component/button/import';
+import { ComponentHeader } from 'esoftplay/cache/component/header/import';
+import { ComponentQr_bg } from 'esoftplay/cache/component/qr_bg/import';
+import { ComponentSlidingup } from 'esoftplay/cache/component/slidingup/import';
+import { LibCurl } from 'esoftplay/cache/lib/curl/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/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 useGlobalSubscriber, { UseSubscribeReturn } from 'esoftplay/subscribe';
+
+import React, { useEffect } from 'react';
+import { Text, View } from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+
+
+export interface UserCoupon_detailProps {
+
+}
+const subs = useGlobalSubscriber()
+export function subscribe(): UseSubscribeReturn {
+  return subs
+}
+export default function m(props: UserCoupon_detailProps): any {
+
+  const url = LibNavigation.getArgs(props, 'url')
+  const user = UserClass.state().get()
+  const imgHeight = (LibStyle.width) * 450 / 1000
+  const [result, setResult] = useSafeState<any>()
+
+  let showQR = React.useRef<ComponentSlidingup>(null)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  function loadData(): void {
+    new LibCurl(url, null, (result, msg) => {
+      setResult(result)
+    }, (error) => {
+      LibToastProperty.show(error?.message, 2000)
+      LibNavigation.back()
+    }, 1)
+  }
+
+  if (!result) {
+    return (
+      <LibLoading />
+    )
+  }
+
+  esp.log(result);
+
+  function shouldShowButton(coupon: any) {
+    if (coupon.total === 0) {
+      return true;
+    }
+    if (coupon?.total_left > 0) {
+      return true;
+    }
+    return false;
+  }
+
+  return (
+    <View style={{ flex: 1, backgroundColor: '#fff' }}>
+      <ComponentHeader title={esp.lang("user/coupon_detail", "detail_coupon")} subtitle={esp.lang("user/coupon_detail", "header_sub", result?.merchant_name)} />
+      <LibScroll onRefresh={loadData}>
+        <LibPicture source={{ uri: result?.image }} style={{ height: imgHeight, width: LibStyle.width }} />
+        <View style={{ margin: 15 }}>
+          {
+            result?.code != "" &&
+            <Text allowFontScaling={false} style={{ textAlign: 'center', marginBottom: 15, fontFamily: "Arial", fontSize: 20, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>Code : {result?.code}</Text>
+          }
+
+          <Text allowFontScaling={false} style={{ marginBottom: 15, fontFamily: "Arial", fontSize: 16, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.title}</Text>
+
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            {
+              result?.has_coupon == 0 ?
+                <View style={{ flex: 1, justifyContent: 'center', marginRight: 15, alignSelf: 'center' }}>
+                  <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("user/coupon_detail", "how_to_get_coupon")}</Text>
+                </View>
+                :
+                result?.has_coupon == 1 && result?.total == 0 ?
+                  <View style={{ flex: 1, justifyContent: 'center', marginRight: 15, alignSelf: 'center' }}>
+                    <View style={{ marginLeft: 8, marginBottom: 5, marginRight: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                      <LibIcon name="ticket-outline" size={20} />
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                        <Text allowFontScaling={false} style={{ flex: 3, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("user/coupon_detail", "total_coupon")}</Text>
+                        <Text allowFontScaling={false} style={{ flex: 2, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("user/coupon_detail", "unlimited")}</Text>
+                      </View>
+                    </View>
+                    {/* iki metu nek kupon wes tau di nggo */}
+                    <View style={{ marginLeft: 8, marginBottom: 5, marginRight: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                      <LibIcon name="ticket-confirmation" size={20} color={LibStyle.colorRed} />
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                        <Text allowFontScaling={false} style={{ flex: 3, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("user/coupon_detail", "coupon_used")}</Text>
+                        <Text allowFontScaling={false} style={{ flex: 2, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{result?.total_used}</Text>
+                      </View>
+                    </View>
+                  </View>
+                  :
+                  <View style={{ flex: 1, justifyContent: 'center' }}>
+                    <View style={{ marginLeft: 8, marginBottom: 5, marginRight: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                      <LibIcon name="ticket-outline" size={20} />
+                      <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                        <Text allowFontScaling={false} style={{ flex: 2, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{esp.lang("user/coupon_detail", "total_coupon")}</Text>
+                        <Text allowFontScaling={false} style={{ flex: 3, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.total}</Text>
+                      </View>
+                    </View>
+                    {
+                      result?.total_used != 0 &&
+                      <View>
+                        <View style={{ marginLeft: 8, marginBottom: 5, marginRight: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                          <LibIcon name="ticket-confirmation" size={20} color={LibStyle.colorRed} />
+                          <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                            <Text allowFontScaling={false} style={{ flex: 2, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("user/coupon_detail", "coupon_used")}</Text>
+                            <Text allowFontScaling={false} style={{ flex: 3, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{result?.total_used}</Text>
+                          </View>
+                        </View>
+
+                        <View style={{ marginLeft: 8, marginBottom: 5, marginRight: 8, flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                          <LibIcon name="ticket-account" size={20} color={LibStyle.colorBlue} />
+                          <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
+                            <Text allowFontScaling={false} style={{ flex: 2, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{esp.lang("user/coupon_detail", "coupon_left")}</Text>
+                            <Text allowFontScaling={false} style={{ flex: 3, marginLeft: 9, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorBlue }}>{result?.total_left}</Text>
+                          </View>
+                        </View>
+                      </View>
+                    }
+                  </View>
+
+            }
+
+            {/* {
+              result?.total_left != 0 &&
+              <View style={{ justifyContent: 'flex-end', alignContent: 'flex-end', alignItems: 'flex-end' }}>
+                <TouchableOpacity onPress={() => { showQR.current!.show() }}>
+                  <ComponentQr_bg>
+                    <QRCode ecl="H" size={80} value={user?.qr_name} />
+                  </ComponentQr_bg>
+                </TouchableOpacity>
+              </View>
+            }
+            {
+              result?.has_coupon == 1 && result?.total == 0 &&
+              <View style={{ justifyContent: 'flex-end', alignContent: 'flex-end', alignItems: 'flex-end' }}>
+                <TouchableOpacity onPress={() => { showQR.current!.show() }}>
+                  <ComponentQr_bg>
+                    <QRCode ecl="H" size={80} value={user?.qr_name} />
+                  </ComponentQr_bg>
+                </TouchableOpacity>
+              </View>
+            } */}
+
+          </View>
+          <Text allowFontScaling={false} style={{ marginTop: 30, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#484848" }}>{result?.description}</Text>
+        </View>
+        <View />
+      </LibScroll>
+      {
+        shouldShowButton(result) ?
+          <ComponentButton label={esp.lang("user/coupon_detail", "redeem")} backgroundColor={LibStyle.colorPrimary} onPress={() => {
+            LibNavigation.navigate('component/scanner', {
+              fromPage: 'home', //kenapa gini, biar sama seperti scanner yang di homepage
+              is_free: result?.is_free,
+              urlCoupon: url
+            })
+          }} style={{ margin: 15 }} />
+          :
+          <View style={{ alignSelf: 'center', width: LibStyle.width - 30, marginBottom: 5, height: 40, borderRadius: 17, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 9, padding: 10, backgroundColor: LibStyle.colorBgGrey, ...LibStyle.elevation(2) }}>
+            <Text allowFontScaling={false} style={{ fontFamily: "ArialBold", fontSize: 14, textAlign: "center", textAlignVertical: 'center', color: 'white', marginRight: 10, marginLeft: 10 }} >{esp.lang("user/coupon_detail", "exchange")}</Text>
+          </View>
+      }
+
+      <ComponentSlidingup ref={showQR}>
+        <View style={{ backgroundColor: 'white', borderTopRightRadius: 20, borderTopLeftRadius: 20, padding: 10, paddingTop: 20 }}>
+          <View style={{ alignSelf: 'center' }}>
+            <ComponentQr_bg>
+              <QRCode ecl="H" size={200} value={user?.qr_name} />
+            </ComponentQr_bg>
+          </View>
+        </View>
+      </ComponentSlidingup>
+
+    </View>
+  )
+}