esoftplay-event 0.0.1-u → 0.0.1-v

package/event/countdown_animated.tsx

@@ -0,0 +1,194 @@
+// withHooks
+import esp from 'esoftplay/esp';
+import moment from 'esoftplay/moment';
+import useSafeState from 'esoftplay/state';
+import React, { useEffect, useRef } from 'react';
+import { Text, View } from 'react-native';
+import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+
+export interface EventCountdown_animatedProps {
+  expired: string,
+  expiredText?: string,
+  style?: any,
+  containerStyle?: any,
+  onlyDay?: boolean,
+  onExpired?: () => void,
+  hideTimeUnit?: boolean
+}
+
+const fixSingleNumber = (number: number) => number < 10 ? '0' + number : number;
+
+type AnimatedDigitProps = {
+  value: number;
+  fontSize?: number;
+  hideIfZero?: boolean;
+  t?: number;
+};
+
+export function AnimatedDigit({
+  value,
+  fontSize = 32,
+  hideIfZero = false,
+  t = 400, // slightly longer for smoother motion
+}: AnimatedDigitProps) {
+  const translateY = useSharedValue(0);
+  const opacity = useSharedValue(1);
+  const animating = useSharedValue(false);
+
+  const [currentValue, setCurrentValue] = useSafeState(value);
+  const [nextValue, setNextValue] = useSafeState<number | null>(null);
+
+  useEffect(() => {
+    if (animating.value || value === currentValue) return;
+
+    animating.value = true;
+    runOnJS(setNextValue)(value);
+
+    // Prepare for transition
+    translateY.value = 0;
+    opacity.value = 1;
+
+    // Animate upward + fade blend for smooth rolling effect
+    translateY.value = withTiming(-fontSize, {
+      duration: t,
+      easing: Easing.out(Easing.cubic),
+    });
+
+    opacity.value = withTiming(0.3, {
+      duration: t * 0.8,
+      easing: Easing.out(Easing.quad),
+    });
+
+    // After animation completes
+    setTimeout(() => {
+      runOnJS(setCurrentValue)(value);
+      runOnJS(setNextValue)(null);
+
+      // Reset instantly below and fade back in smoothly
+      translateY.value = fontSize;
+      translateY.value = withTiming(0, {
+        duration: t * 0.8,
+        easing: Easing.out(Easing.cubic),
+      });
+      opacity.value = withTiming(1, {
+        duration: t * 0.9,
+        easing: Easing.out(Easing.cubic),
+      });
+
+      animating.value = false;
+    }, t);
+  }, [value]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    opacity: opacity.value,
+  }));
+
+  return (
+    <View style={{ height: fontSize + 8, overflow: "hidden", justifyContent: "center" }} >
+      <Animated.View style={animatedStyle}>
+        {/* Current number */}
+        <Text allowFontScaling={false} style={{ fontSize, fontWeight: "bold", textAlign: "center" }}>{currentValue}</Text>
+        {/* Next number rolling from bottom */}
+        {nextValue !== null && (
+          <Text allowFontScaling={false} style={{ fontSize, fontWeight: "bold", textAlign: "center" }}>{nextValue}</Text>
+        )}
+      </Animated.View>
+    </View>
+  );
+}
+
+export default function m(props: EventCountdown_animatedProps): any {
+  const [timeLeft, setTimeLeft] = useSafeState<any>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    startCountdown();
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  function startCountdown() {
+    const loop = () => {
+      const diff = moment(props.expired).duration(moment().toDate());
+
+      if (diff <= 0) {
+        setTimeLeft(null);
+        props.onExpired?.();
+        return;
+      }
+
+      const duration = diff;
+      const newTime = {
+        days: Math.floor(duration.asDays().toString()),
+        hours: parseInt(duration.hours().toString()),
+        minutes: parseInt(duration.minutes().toString()),
+        seconds: parseInt(duration.seconds().toString())
+      };
+
+      setTimeLeft(newTime);
+      timerRef.current = setTimeout(loop, 1000);
+    };
+
+    loop();
+  }
+
+  if (!timeLeft) {
+    return (
+      <Text allowFontScaling={false} style={[props.style]}>
+        {props.expiredText || esp.lang("market/countdown", "expired")}
+      </Text>
+    );
+  }
+
+  const fontSize = props.style?.fontSize || 18;
+
+  const timeKeys = [
+    esp.lang("market/countdown", "day"),
+    esp.lang("market/countdown", "hour"),
+    esp.lang("market/countdown", "minutes"),
+    esp.lang("market/countdown", "second")
+  ];
+
+
+  const values: any = Object.values(timeLeft)
+
+  const renderNumber = (num: number, timeUnit: string, index?: number) => {
+    const str: string = String(fixSingleNumber(num));
+    const hide = index == 0 || index == 1
+
+    return (
+      <View style={{ flexDirection: 'row' }}>
+        {
+          str.length > 0 && [...str].map((d, i) => (
+            <AnimatedDigit key={i} value={Number(d)} fontSize={fontSize} hideIfZero={hide} style={props.style} />
+          ))
+        }
+        {
+          !props.hideTimeUnit && timeUnit && <Text allowFontScaling={false} style={[{ fontSize }, props.style]}> {timeUnit}</Text>
+        }
+      </View>
+    );
+  };
+
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center' }, props.containerStyle]}>
+      {props.onlyDay ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {renderNumber(timeLeft.days, timeKeys[0])}
+        </View>
+      ) : (
+        <View style={{ flexDirection: 'row' }}>
+          {timeKeys.map((key, i) => (
+            <React.Fragment key={key}>
+              {renderNumber(values[i], timeKeys[i].charAt(0) + (i < 3 ? ' : ' : ''), i)}
+            </React.Fragment>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+
+}

package/event/countdown_base.tsx

@@ -17,6 +17,7 @@ export interface EventCountdown_baseProps {
   onlyDay?: boolean
   onExpired?: () => void
   hideTimeUnit?: boolean
+  showDayUnit?: boolean
 }
 
 const fixSingleNumber = (number: number) => number < 10 ? '0' + number : number
@@ -63,6 +64,18 @@ export default function m(props: EventCountdown_baseProps): any {
           }
         }
         ref?.current?.setNativeProps({ text: text.filter((x, i) => !isNaN(Number(x))).map((d, id) => d + (props?.hideTimeUnit ? '' : ' ' + t[id])).join(" : ") })
+      } else if (props?.showDayUnit && props?.hideTimeUnit) {
+        const data = text
+          .filter((x, i) => !isNaN(Number(x)))
+          .map((d, id) => {
+            return (d + (id == 0 ? " " + t[0] + " " : ""))
+          })
+        const firstData = data[0]
+        data.splice(0, 1)
+
+        ref?.current?.setNativeProps({
+          text: firstData + " " + data.join(" : ")
+        })
       } else {
         ref?.current?.setNativeProps({ text: text.filter((x, i) => !isNaN(Number(x))).map((d, id) => d + (props?.hideTimeUnit ? '' : ' ' + t[id])).join(" : ") })
       }

package/event/countdown_event.tsx

@@ -0,0 +1,47 @@
+// withHooks
+// noPage
+
+import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import React, { useEffect } from 'react';
+import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+
+
+export interface EventCountdown_eventArgs {
+
+}
+export interface EventCountdown_eventProps {
+  date: string,
+  containerStyle?: StyleProp<ViewStyle>
+  bulletStyle?: StyleProp<ViewStyle>,
+  style?: StyleProp<TextStyle>
+}
+export default function m(props: EventCountdown_eventProps): any {
+  const opacity = useSharedValue(1)
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(0.2, { duration: 500 }),
+      -1,
+      true
+    )
+  }, [])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }))
+
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center' }, props?.containerStyle]}>
+      <Animated.View style={[{ marginRight: 5, width: 8, height: 8, borderRadius: 5, backgroundColor: LibStyle.colorGreen }, animatedStyle, props?.bulletStyle]} />
+      <Text allowFontScaling={false} style={[{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }, props?.style]}>{esp.lang("event/countdown_event", "ends")}</Text>
+      <EventCountdown_base
+        expired={props.date}
+        showDayUnit
+        hideTimeUnit
+        style={[{ fontFamily: "Arial", fontSize: 11, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }, props?.style]}
+      />
+    </View>
+  )
+}

package/event/detail.tsx

@@ -11,7 +11,7 @@ import { LibVideoProperty } from 'esoftplay/cache/lib/video/import';
 import { LibWebview } from 'esoftplay/cache/lib/webview/import';
 
 import { applyStyle } from 'esoftplay';
-import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
+import { EventCountdown_event } from 'esoftplay/cache/event/countdown_event/import';
 import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
 import { EventIndexProperty } from 'esoftplay/cache/event/index/import';
@@ -139,15 +139,13 @@ export default function m(props: EventDetailProps): any {
           <Text allowFontScaling={false} style={{ marginLeft: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#f39c12" }} >{result.status == 4 ? esp.lang("event/detail", "evn_pending") : LibUtils.getDateRange(result.start_date, result.end_date, esp.lang("event/detail", "until"))}</Text>
         </View>
         {
-          esp.isDebug("countdown") && result?.countdown_booking == 1 && result?.start_date != "0000-00-00" && result.end_date != '0000-00-00' &&
-          <View style={{ flexDirection: 'row', marginBottom: 10, alignItems: 'center', marginHorizontal: 20 }} >
-            <LibPicture source={esp.assets('icons/ic_calendar_grey.png')} style={{ width: 14, height: 14 }} />
-            <Text allowFontScaling={false} style={{ marginLeft: 10, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}>{"Berakhir dalam"} </Text>
-            <EventCountdown_base
-              expired={(result?.end_date + " " + result?.end_time)}
-              style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" }}
-            />
-          </View>
+          esp.isDebug("show_countdown") && result?.countdown_booking == 1 && result?.start_date != "0000-00-00" && result.end_date != '0000-00-00' &&
+          <EventCountdown_event
+            date={(result?.end_date + " " + result?.end_time)}
+            style={{ fontSize: 12 }}
+            bulletStyle={{ width: 14, height: 14, borderRadius: 7, marginRight: 10 }}
+            containerStyle={{ marginHorizontal: 20, marginBottom: 10 }}
+          />
         }
         <View style={{ flexDirection: 'row', marginBottom: 10, alignItems: 'center', marginHorizontal: 20 }} >
           <LibPicture source={esp.assets('icons/ic_tickets_grey.png')} style={{ width: 14, height: 14 }} />

package/event/exchange_ticket_result.tsx

@@ -1,6 +1,7 @@
 // withHooks
 import { EventExchange_ticketProperty } from 'esoftplay/cache/event/exchange_ticket/import';
 import { EventHeader } from 'esoftplay/cache/event/header/import';
+import { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/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';
@@ -9,7 +10,6 @@ import { LibObject } from 'esoftplay/cache/lib/object/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 { EventOrder_itemProperty } from 'esoftplay/cache/event/order_item/import';
 import esp from 'esoftplay/esp';
 import useGlobalState, { useGlobalReturn } from 'esoftplay/global';
 import useSafeState from 'esoftplay/state';

package/event/order_detail.tsx

@@ -529,8 +529,8 @@ export default function m(props: EventOrder_detailProps): any {
               })
             }}
             icon={'dice-multiple'}
-            title={esp.lang("event/order_detail", "join_lucky_draw")}
-            info={esp.lang("event/order_detail", "subtitle_lucky_draw")}
+            title={result?.config_luckydraw != null ? result?.config_luckydraw?.title : esp.lang("event/order_detail", "join_lucky_draw")}
+            info={result?.config_luckydraw != null ? result?.config_luckydraw?.subtitle : esp.lang("event/order_detail", "subtitle_lucky_draw")}
           />
         </UseCondition>
 

package/event/order_lottery.tsx

@@ -44,10 +44,12 @@ export default function m(props: EventOrder_lotteryProps): any {
         })
       })
       let b = {
+        ...res,
         coupon: res?.coupon,
         list: a
       }
       setResult(b)
+      // esp.log(res);
     }, (error: any) => {
       esp.log(error);
       LibDialog.warning("Oops", error?.message)
@@ -143,7 +145,8 @@ export default function m(props: EventOrder_lotteryProps): any {
 
   return (
     <View style={{ flex: 1, backgroundColor: LibStyle.colorBgGrey /* "#FFC523" */ }}>
-      <EventHeader title={esp.lang("event/order_lottery", "follow_lucky_draw")} />
+      <EventHeader title={result?.config != null ? result?.config?.title : esp.lang("event/order_lottery", "follow_lucky_draw")}
+        subtitle={result?.config != null ? result?.config?.subtitle : ""} />
 
       <ScrollView>
         {
@@ -152,7 +155,7 @@ export default function m(props: EventOrder_lotteryProps): any {
 
       </ScrollView>
       <View style={{ backgroundColor: '#fff' }}>
-        <Text style={{ margin: 10, marginBottom: 0 }} >{esp.lang("event/order_lottery", "u_have") + result?.coupon + esp.lang("event/order_lottery", "token_for_luckydraw")}</Text>
+        <Text style={{ margin: 10, marginBottom: 0 }} >{esp.lang("event/order_lottery", "you_have") + result?.coupon + esp.lang("event/order_lottery", "chance_for_exchange")}</Text>
 
         <EventButton
           label={esp.lang("event/order_lottery", "submit")}

package/event/ticket_list.tsx

@@ -20,6 +20,7 @@ import { applyStyle } from 'esoftplay';
 import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
 import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
 import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
+import { EventCountdown_event } from 'esoftplay/cache/event/countdown_event/import';
 import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
 import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
 import { EventLoading_pageProperty } from 'esoftplay/cache/event/loading_page/import';
@@ -55,6 +56,7 @@ export type Result = {
   "status": string,
   "quota_checkout": string,
   "show_price": string,
+  "countdown_booking": string,
   "config_queue": {
     "limit": number,
     "time": number,
@@ -346,6 +348,11 @@ export default function m(props: EventTicket_listProps): any {
     let colorBackground = item.status != 1 ? LibStyle.colorLightGrey : itemT.status != 1 ? LibStyle.colorLightGrey : colorDefault
     let textOpacity = /* item.status == 1 ? 1 :  */itemT?.status == 1 ? 1 : 0.3
 
+    let showCountDown = esp.isDebug("show_countdown") && itemT.status != 0 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00"
+    let dateShowed = item?.price_date == 1 ?
+      moment(item?.date_end).format("YYYY-MM-DD HH:mm:ss") > moment(itemT?.ondate).format("YYYY-MM-DD HH:mm:ss") ? moment(itemT?.ondate).add(1, "days").format("YYYY-MM-DD HH:mm:ss") : item?.date_end
+      : item?.date_end
+
     return (
       <TouchableOpacity key={iT} onPress={() => {
         let itemTicket = {
@@ -396,11 +403,22 @@ export default function m(props: EventTicket_listProps): any {
                       </View>
                     </View>
                   }
-                  <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('dddd')}</Text>
-                  <View style={applyStyle({ flexDirection: 'row' })}>
-                    <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('MMMM')}</Text>
-                    <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, marginLeft: 7, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('YYYY')}</Text>
-                  </View>
+                  {
+                    showCountDown ?
+                      <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('dddd, MMMM YYYY')}</Text>
+                      :
+                      <>
+                        <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('dddd')}</Text>
+                        <View style={applyStyle({ flexDirection: 'row', alignItems: "center" })}>
+                          <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('MMMM')}</Text>
+                          <Text allowFontScaling={false} style={applyStyle({ opacity: textOpacity, marginLeft: 5, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' })}>{LibUtils.moment(itemT.ondate).localeFormat('YYYY')}</Text>
+                        </View>
+                      </>
+                  }
+                  {
+                    showCountDown &&
+                    <EventCountdown_event date={dateShowed} containerStyle={{ marginVertical: -5 }} />
+                  }
                 </View>
               </View>
               :
@@ -419,7 +437,7 @@ export default function m(props: EventTicket_listProps): any {
                   {/* <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.type}</Text> */}
                   {
                     item.info != "" &&
-                    <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }} >{item.info}</Text>
+                    <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.info}</EventHtmltext>
                   }
                 </View>
               </View>
@@ -610,6 +628,10 @@ export default function m(props: EventTicket_listProps): any {
                                   <Text style={{ color: LibStyle.colorRed, fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(item.qty_min) + ")"}</Text>
                                 }
                               </EventHtmltext>
+                              {
+                                availableResult?.countdown_booking == "1" && displayedData?.length == 1 && item?.date_start != "0000-00-00 00:00:00" && item?.date_end != "0000-00-00 00:00:00" &&
+                                <EventCountdown_event date={item?.date_end} containerStyle={{ marginVertical: -5 }} />
+                              }
                               {
                                 deeplinkParams?.type == 'event-voucher' && deeplinkParams?.price_id == item.price_id ?
                                   <Text allowFontScaling={false} style={{ color: "coral", fontSize: 12, fontWeight: 'bold' }}>{esp.lang("event/ticket_list", "applied_code", deeplinkParams?.code)}</Text>

package/event/ticket_list2.tsx

@@ -23,6 +23,7 @@ import { EventConfigProperty } from 'esoftplay/cache/event/config/import';
 import { EventCountdownProperty } from 'esoftplay/cache/event/countdown/import';
 import { EventCountdown_base } from 'esoftplay/cache/event/countdown_base/import';
 import { EventFirebase_socket, EventFirebase_socketProperty } from 'esoftplay/cache/event/firebase_socket/import';
+import { EventHtmltext } from 'esoftplay/cache/event/htmltext/import';
 import { EventLoading_pageProperty } from 'esoftplay/cache/event/loading_page/import';
 import { EventQueue_pricingProperty } from 'esoftplay/cache/event/queue_pricing/import';
 import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
@@ -485,7 +486,7 @@ export default function m(props: EventTicket_list2Props): any {
                   {<Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.type}</Text>}
                   {
                     item.info != "" &&
-                    <Text allowFontScaling={false} numberOfLines={3} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }} >{item.info}</Text>
+                    <EventHtmltext allowFontScaling={false} style={{ flexWrap: 'wrap', fontFamily: "Arial", fontSize: 11, fontStyle: "normal", letterSpacing: 0, color: _selectedTicket ? "#3ea4dc" : '#999' }}>{item.info}</EventHtmltext>
                   }
                 </View>
               </View>
@@ -640,12 +641,12 @@ export default function m(props: EventTicket_list2Props): any {
                         <View style={{ padding: 10, backgroundColor: '#f1f2f3', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                           <View style={{ alignContent: 'center', alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between', }}>
                             <View>
-                              <Text allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}
+                              <EventHtmltext allowFontScaling={false} style={{ opacity: textOpacity, fontWeight: 'bold' }}>{item.type}
                                 {
                                   item.qty_min > 1 &&
                                   <Text style={{ color: LibStyle.colorRed, fontSize: 10, fontWeight: 'normal' }}> {"(" + esp.lang("event/ticket_list", "min_order") + LibUtils.number(item.qty_min) + ")"}</Text>
                                 }
-                              </Text>
+                              </EventHtmltext>
                               {
                                 deeplinkParams?.type == 'event-voucher' && deeplinkParams?.price_id == item.price_id ?
                                   <Text allowFontScaling={false} style={{ color: "coral", fontSize: 12, fontWeight: 'bold' }}>{esp.lang("event/ticket_list", "applied_code", deeplinkParams?.code)}</Text>

package/id.json

@@ -65,6 +65,9 @@
     "visitor_email": "Email Pengunjung",
     "visitor_email_pl": "Email Pengujung"
   },
+  "event/countdown_event": {
+    "ends": "Berakhir dalam"
+  },
   "event/counter_cashier": {
     "add_cancel": "Tidak",
     "add_confirm": "Ya",
@@ -1074,6 +1077,7 @@
     "used_once": "Bisa digunakan sekali selama acara berlangsung"
   },
   "event/order_lottery": {
+    "chance_for_exchange": " kesempatan untuk ditukarkan",
     "confirm": "Konfirmasi",
     "confirm_point": "Apakah kupon yang anda masukkan sudah benar?",
     "follow_lucky_draw": "Ikuti Lucky Draw",
@@ -1085,6 +1089,7 @@
     "token_for_luckydraw": " kupon untuk mengikuti undian Lucky Draw",
     "u_have": "Anda mempunyai ",
     "yes": "Ya",
+    "you_have": "Kamu punya ",
     "your_maks_token_is": "Maksimal kupon anda adalah "
   },
   "event/order_reschedule": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esoftplay-event",
-  "version": "0.0.1-u",
+  "version": "0.0.1-v",
   "description": "event module on esoftplay framework",
   "main": "index.js",
   "scripts": {