esoftplay-event 0.0.0-n → 0.0.0-p

package/modules/component/camera.live.tsx

@@ -0,0 +1,214 @@
+// withHooks
+
+import { ComponentCamera_error_view } from 'esoftplay/cache/component/camera_error_view/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibImage } from 'esoftplay/cache/lib/image/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 { CameraView, useCameraPermissions } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
+import React, { useEffect, useRef, useState } from 'react';
+import { AppState, AppStateStatus, Image, Pressable, Text, View } from 'react-native';
+
+
+export interface ComponentCameraArgs {
+
+}
+export interface ComponentCameraProps {
+
+}
+
+function getRatio(x: number, y: number) {
+  const gd = (a: number, b: number): number => !b ? a : gd(b, a % b)
+  const cgd = gd(x, y)
+  return (x / cgd) + ':' + (y / cgd)
+}
+
+export default function m(props: ComponentCameraProps): any {
+  const { mask, cameraType }: any = LibNavigation.getArgsAll(props)
+  const [image, setImage] = useSafeState<any>()
+  // const [ratio, setRatio] = useSafeState<string | undefined>(undefined)
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [pictureSize, setPictureSize] = useSafeState<string | undefined>(undefined)
+  const [flash, setFlash] = useSafeState<'on' | 'off'>('off')
+  const [type, setType] = useSafeState<any>(cameraType || "front")
+  const ref = useRef<CameraView>(null)
+  const [status, requestPermission] = useCameraPermissions();
+  const check = useRef(false)
+
+  const request = async () => {
+    try {
+      const response = await requestPermission();
+      const { granted } = response;
+      setHasPermission(granted);
+    } catch (error) { }
+  };
+
+  const handleAppStateChange = (nextAppState: AppStateStatus) => {
+    if (nextAppState === 'active' && !check.current) {
+      check.current = true
+      request().finally(() => {
+        check.current = false
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!status) {
+      request()
+    } else {
+      setHasPermission(status.granted)
+    }
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange)
+    return () => {
+      subscription.remove()
+      LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
+    }
+  }, []);
+
+  // useEffect(() => {
+  //   requestAnimationFrame(() => {
+  //     // ref.current?.getSupportedRatiosAsync().then((ratios) => {
+  //     //   const nrRatio = nearestRatio(ratios, ratio || '16:9')
+  //     //   ref.current?.getAvailablePictureSizesAsync(nrRatio).then((value) => {
+  //     //     setPictureSize(value[value.length - 1])
+  //     //   })
+  //     //   setRatio(nrRatio)
+  //     // })
+  //   })
+  // }, [ratio])
+
+
+  const wh = (ratio: string): number[] => ratio.split(":").map((x) => Number(x))
+  function nearestRatio(ratios: string[], compared: string): string {
+    const cVal = wh(compared)
+    const c = cVal[0] / cVal[1]
+    const cRatios = ratios.map((ratio) => wh(ratio)[0] / wh(ratio)[1])
+    const closest = cRatios.reduce((a, b) => {
+      return Math.abs(b - c) < Math.abs(a - c) ? b : a;
+    });
+    return ratios[cRatios.indexOf(closest)]
+  }
+
+  if (hasPermission === null) {
+    return <View />;
+  }
+  if (hasPermission === false) {
+    return <ComponentCamera_error_view />
+  }
+
+
+  const maskView = <View style={{ position: 'absolute', top: 60, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+    <View style={{ width: LibStyle.width / 2, height: LibStyle.height / 3, borderTopLeftRadius: 108, borderTopRightRadius: 108, borderBottomLeftRadius: 95, borderBottomRightRadius: 95, borderRadius: 100, borderWidth: 3, borderStyle: "dotted", borderColor: '#EAECEB', }} />
+    <View style={{ marginTop: 50, borderWidth: 3, borderStyle: "dotted", borderRadius: 15, borderColor: '#EAECEB', width: LibStyle.width / 2, height: 150 }} />
+  </View>
+
+
+  return (
+    <View
+      // onLayout={(e) => { /* setRatio(getRatio(e.nativeEvent.layout.height, e.nativeEvent.layout.width))  */}}
+      style={{ flex: 1 }}>
+      {
+        !image &&
+        <CameraView
+          ref={ref}
+          ratio={"16:9"}
+          flash={flash}
+          pictureSize={pictureSize}
+          style={{ flex: 1 }}
+          facing={type} />
+      }
+
+      <View style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 }}>
+        <View style={{ flex: 1, backgroundColor: 'transparent' }} >
+          {
+            image ?
+              <LibPicture source={{ uri: image }} resizeMode="contain" style={{ margin: 0, height: LibStyle.height, width: LibStyle.width }} />
+              :
+              mask ? maskView :
+                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.04)' }} >
+                  <View style={{ borderWidth: 2, borderColor: 'white', height: (LibStyle.width - 60) * 43 / 27, width: (LibStyle.width - 60), borderStyle: 'dashed', borderRadius: 13, backgroundColor: 'rgba(255,255,255,0.04)' }} />
+                  <Text style={{ color: 'white', alignItems: 'center', textAlign: 'center', padding: 5 }} >{esp.lang("component/camera", "adjust")}</Text>
+                </View>
+          }
+        </View>
+        {
+          image ?
+            <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', paddingHorizontal: 40, }} >
+              <Pressable onPress={() => { setImage(undefined) }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon name="close-circle" size={50} color={LibStyle.colorRed} />
+              </Pressable>
+              <View style={{ flex: 1, alignItems: 'center', margin: 40, height: 70, width: 70 }} />
+              <Pressable onPress={() => { LibNavigation.sendBackResult(image) }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon name='check-circle-outline' size={50} color={LibStyle.colorBlue} />
+              </Pressable>
+            </View>
+            :
+            <View style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: 'white', paddingHorizontal: 24 }} >
+              <Pressable onPress={() => { setFlash(flash == 'off' ? 'on' : 'off') }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon name={flash == 'off' ? 'flash' : "flash-off"} />
+              </Pressable>
+              <View style={{ flex: 1, alignItems: 'center' }} >
+                <Pressable
+                  onPress={async () => {
+                    await ref.current?._onCameraReady()
+                    ref?.current?.takePictureAsync({ quality: 1 }).then((v) => {
+                      if (!mask) {
+                        forceLandscape(v, (nv) => {
+                          LibImage.processImage(nv, 2600).then((_v) => {
+                            setImage(_v)
+                          })
+                        })
+                      } else {
+                        LibImage.processImage(v, 2600).then((_v) => {
+                          setImage(_v)
+                        })
+                      }
+
+                    })
+                  }}
+                  style={{ margin: 40, ...LibStyle.elevation(10), backgroundColor: 'red', borderWidth: 7, borderColor: 'darkred', height: 70, width: 70, borderRadius: 35 }} >
+                </Pressable>
+              </View>
+              <Pressable onPress={() => { setType(type == "back" ? "front" : "back") }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon.AntDesign name='sync' />
+              </Pressable>
+            </View>
+        }
+
+      </View>
+    </View>
+  )
+
+}
+
+const forceLandscape = (imageUri: any, cb: (landUri: any) => void) => {
+  Image.getSize(
+    imageUri.uri,
+    async (width, height) => {
+      if (width > height) {
+        cb(imageUri)
+      } else {
+        // Portrait orientation, force to landscape
+        try {
+          // Load the image for manipulation
+          const manipResult = await ImageManipulator.manipulateAsync(
+            imageUri.uri,
+            [{ rotate: -90 }], // Rotate the image by 90 degrees (landscape)
+            { compress: 1, format: ImageManipulator.SaveFormat.JPEG, base64: false }
+          );
+          cb(manipResult);
+        } catch (error) {
+          console.error('Error manipulating the image:', error);
+        }
+      }
+    },
+    (error) => {
+      console.error('Error getting image size:', error);
+    }
+  );
+}

package/modules/component/camera.tsx

@@ -0,0 +1,187 @@
+// withHooks
+import { useEffect, useMemo, useRef } from 'react';
+
+import { ComponentCamera_error_view } from 'esoftplay/cache/component/camera_error_view/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/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 * as ImageManipulator from 'expo-image-manipulator';
+import React from 'react';
+import { ActivityIndicator, Image, Pressable, Text, View } from 'react-native';
+import { Camera, useCameraDevices, useCameraFormat, useCameraPermission } from 'react-native-vision-camera';
+
+export interface CompoenentCameraArgs {
+
+}
+export interface CompoenentCameraProps {
+
+}
+export default function m(props: CompoenentCameraProps): any {
+  const { mask, cameraType }: any = esp.mod("lib/navigation").getArgsAll(props)
+  const camera = useRef<Camera>(null)
+
+  const [image, setImage] = useSafeState()
+  const [loading, setLoading] = useSafeState(false)
+  const [flash, setFlash] = useSafeState<'on' | 'off'>('off')
+  const [type, setType] = useSafeState<any>(cameraType || "front")
+  const { hasPermission, requestPermission } = useCameraPermission()
+  const devices = useCameraDevices();
+  const device = useMemo(() => {
+    return devices.find((d) => d.position === type);
+  }, [devices, type]);
+  const format = useCameraFormat(device, [
+    { photoResolution: 'max', "photoAspectRatio": LibStyle.height / LibStyle.width }
+  ])
+
+  useEffect(() => {
+    requestPermission()
+    return () => esp.mod("lib/navigation").cancelBackResult(esp.mod("lib/navigation").getResultKey(props))
+  }, [])
+
+  function handleSwitchCamera() {
+    setType((t: any) => t == "back" ? "front" : "back")
+  }
+
+  if (!hasPermission) return <ComponentCamera_error_view />
+
+  if (device == null)
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        {/* @ts-ignore */}
+        <LibPicture source={esp.assets("icons/ic_camera.png")} style={{ width: 100, height: 100, marginBottom: 30 }} resizeMode='contain' tintColor="#9f9f9f" />
+        <Text style={{ fontFamily: "SFProText", fontSize: 20, color: "#111111" }}>{"No Camera Device Found."}</Text>
+        <Text style={{ fontFamily: "SFProText", fontSize: 16, color: "#767676", marginTop: 8 }}>{"BBO tidak dapat menemukan kamera kamu"}</Text>
+        <View style={{ flexDirection: "row", alignItems: "center", marginTop: 4, marginHorizontal: 20 }}>
+          <Pressable onPress={handleSwitchCamera} style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "row", marginTop: 5 }} >
+            <Text style={{ fontFamily: "SFProText", fontSize: 16, color: LibStyle.colorPrimary, textAlign: 'center', paddingRight: 5 }}>{`Ubah ke Kamera ${type == "back" ? "Depan" : "Belakang"}`}</Text>
+            <LibIcon name="refresh" size={20} color={LibStyle.colorPrimary} />
+          </Pressable>
+        </View>
+      </View>
+    )
+
+  const MaskView = () => {
+    return (
+      <View style={{ position: 'absolute', top: 60, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' }} >
+        <View style={{ width: LibStyle.width / 2, height: LibStyle.height / 3, borderTopLeftRadius: 108, borderTopRightRadius: 108, borderBottomLeftRadius: 95, borderBottomRightRadius: 95, borderRadius: 100, borderWidth: 3, borderStyle: "dotted", borderColor: '#EAECEB', }} />
+        <View style={{ marginTop: 50, borderWidth: 3, borderStyle: "dotted", borderRadius: 15, borderColor: '#EAECEB', width: LibStyle.width / 2, height: 150 }} />
+      </View>
+    )
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      {
+        !image &&
+        <Camera
+          ref={camera}
+          device={device}
+          isActive={!image}
+          photo
+          format={format}
+          torch={flash}
+          style={{ flex: 1, height: LibStyle.width * 16 / 9, width: LibStyle.width }}
+        />
+      }
+
+      <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+        <View style={{ flex: 1, backgroundColor: 'transparent' }} >
+          {
+            image ?
+              <LibPicture source={{ uri: image }} resizeMode="contain" style={{ margin: 0, height: LibStyle.height, width: LibStyle.width }} />
+              :
+              mask ?
+                <MaskView />
+                :
+                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.04)' }} >
+                  <View style={{ borderWidth: 2, borderColor: 'white', height: (LibStyle.width - 60) * 43 / 27, width: (LibStyle.width - 60), borderStyle: 'dashed', borderRadius: 13, backgroundColor: 'rgba(255,255,255,0.04)' }} />
+                  <View style={{ marginHorizontal: 25 }}>
+                    <Text style={{ fontFamily: "Arial", fontSize: 16, lineHeight: 20, color: 'white', alignItems: 'center', textAlign: 'center', padding: 5 }} >{esp.lang("component/camera", "adjust")}</Text>
+                  </View>
+                </View>
+          }
+        </View>
+        {
+          image ?
+            <View style={{ paddingVertical: 25, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 40, backgroundColor: 'white' }} >
+              <Pressable onPress={() => { setImage(undefined) }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon name="close-circle" size={50} color={LibStyle.colorRed} />
+              </Pressable>
+              <View style={{ flex: 1, alignItems: 'center', height: 70, width: 70 }} />
+              <Pressable onPress={() => { esp.mod("lib/navigation").sendBackResult(image, esp.mod("lib/navigation").getResultKey(props)) }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon name='check-circle-outline' size={50} color={LibStyle.colorBlue} />
+              </Pressable>
+            </View>
+            :
+            <View style={{ paddingVertical: 25, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 24, backgroundColor: 'rgba(0,0,0,0.5)' }} >
+              <Pressable onPress={() => { setFlash(flash == 'off' ? 'on' : 'off') }} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon name={flash == 'off' ? 'flash' : "flash-off"} color='#f9f9f9' />
+              </Pressable>
+              <View style={{ flex: 1, alignItems: 'center' }} >
+                <Pressable disabled={loading}
+                  onPress={() => {
+                    setLoading(true)
+                    camera.current?.takePhoto({ enableShutterSound: false }).then((value) => {
+                      const uri = `file://${value.path}`
+                      console.log(uri)
+                      if (!mask) {
+                        forceLandscape({ uri }, (nv) => {
+                          esp.mod("lib/image").processImage(nv, 2600).then((_v) => {
+                            console.log({ _v })
+                            setImage(_v)
+                            setLoading(false)
+                          })
+                        })
+                      } else
+                        esp.mod("lib/image").processImage(uri, 2600).then((_v) => {
+                          console.log({ _v })
+                          setImage(_v)
+                          setLoading(false)
+                        })
+                    })
+                  }}>
+                  <View style={{ alignItems: "center", justifyContent: "center", height: 70, width: 70, borderRadius: 35, backgroundColor: 'red', borderWidth: 7, borderColor: 'darkred', ...LibStyle.elevation(10) }}>
+                    {
+                      loading ? <ActivityIndicator size={'large'} color={'black'} /> : null
+                    }
+                  </View>
+                </Pressable>
+              </View>
+              <Pressable onPress={handleSwitchCamera} style={{ height: 40, width: 40, alignItems: 'center', justifyContent: 'center' }} >
+                <LibIcon.AntDesign name='sync' color='#f9f9f9' />
+              </Pressable>
+            </View>
+        }
+      </View>
+    </View>
+  )
+
+}
+const forceLandscape = (imageUri: any, cb: (landUri: any) => void) => {
+  Image.getSize(
+    imageUri.uri,
+    async (width, height) => {
+      if (width > height) {
+        cb(imageUri)
+      } else {
+        // Portrait orientation, force to landscape
+        try {
+          // Load the image for manipulation
+          const manipResult = await ImageManipulator.manipulateAsync(
+            imageUri.uri,
+            [{ rotate: -90 }], // Rotate the image by 90 degrees (landscape)
+            { compress: 1, format: ImageManipulator.SaveFormat.JPEG, base64: false }
+          );
+          cb(manipResult);
+        } catch (error) {
+          console.error('Error manipulating the image:', error);
+        }
+      }
+    },
+    (error) => {
+      console.error('Error getting image size:', error);
+    }
+  );
+}

package/modules/component/camera_error_view.tsx

@@ -0,0 +1,35 @@
+// withHooks
+// noPage
+
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import React from 'react';
+import { Linking, Pressable, Text, View } from 'react-native';
+
+
+export interface ComponentCamera_error_viewArgs {
+
+}
+export interface ComponentCamera_error_viewProps {
+
+}
+export default function m(props: ComponentCamera_error_viewProps): any {
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      {/* @ts-ignore */}
+      <LibPicture source={esp.assets("icons/ic_camera.png")} style={{ width: 100, height: 100, marginBottom: 30 }} resizeMode='contain' tintColor="#9f9f9f" />
+      <Text style={{ fontFamily: "SFProText", fontSize: 20, color: "#111111" }}>{esp.lang("component/camera", "no_access")}</Text>
+      <Text style={{ fontFamily: "SFProText", fontSize: 16, color: "#767676", marginTop: 8 }}>{esp.lang("component/camera", "no_access_camera")}</Text>
+      <View style={{ flexDirection: "row", alignItems: "center", marginTop: 4, marginHorizontal: 20 }}>
+        <Pressable onPress={() => {
+          Linking.openSettings()
+        }}>
+          <Text style={{ fontFamily: "SFProText", fontSize: 16, color: "#767676", textAlign: 'center' }}>{esp.lang("component/camera", "enable_access")}
+            <Text style={{ fontFamily: "SFProText", fontSize: 16, fontWeight: "bold", color: LibStyle.colorPrimary }}>{esp.lang("component/camera", "enable_access2")}</Text>
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  )
+}

package/modules/component/cancellation.tsx

@@ -0,0 +1,71 @@
+// withHooks
+// noPage
+import { ComponentLabel_input } from 'esoftplay/cache/component/label_input/import';
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+import useSafeState from 'esoftplay/state';
+
+import { BboConfigProperty } from 'esoftplay/cache/bbo/config/import';
+import React, { useEffect } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentCancellationProps {
+  onPress: (value: string) => void
+  defaultValue?: number
+}
+export default function m(props: ComponentCancellationProps): any {
+  const [selected, setSelected] = useSafeState<number>(0)
+  const [bboConfig] = BboConfigProperty.state().useState()
+
+  useEffect(() => {
+    BboConfigProperty.curlConfig('v2/config_community')
+    if (props.defaultValue) {
+      setSelected(props.defaultValue)
+    }
+  }, [])
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignContent: 'center', alignItems: 'center' }}>
+        <ComponentLabel_input label={esp.lang("component/cancellation", "label_cancel")} mandatory />
+        <TouchableOpacity onPress={() => { LibDialog.info(esp.lang("component/cancellation", "cancel_title"), esp.lang("component/cancellation", "cancel_msg")) }}>
+          <LibIcon name={"help-circle-outline"} size={15} style={{ marginTop: 16 }} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={{ marginTop: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+
+        {
+          bboConfig?.community?.cancellation_fee?.length > 0 && bboConfig?.community?.cancellation_fee?.map((item: any, i: number) => {
+            return (
+              <View key={i} style={{ flexDirection: 'row', alignContent: 'center', alignItems: 'center', marginBottom: 7, width: (LibStyle.width - 30) * 0.5 }}>
+                <ComponentTouchable onPress={() => {
+                  props.onPress(item)
+                  setSelected(item)
+                }} style={{ justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: 20, width: 20, borderRadius: 10, borderWidth: 1, borderColor: '#8e8e8e' }} >
+                  {
+                    selected == item &&
+                    <View style={{ height: 15, width: 15, borderRadius: 7.5, backgroundColor: '#51B596' }} />
+                  }
+                </ComponentTouchable>
+                <View style={{ flexDirection: 'row', marginLeft: 15, flex: 1 }}>
+                  <View style={{ backgroundColor: '#F6F6F6', justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRightWidth: 0, height: 30, width: 40, borderWidth: 1, borderTopLeftRadius: 4, borderBottomLeftRadius: 4, borderColor: '#C5C5C5' }}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>%</Text>
+                  </View>
+                  <View style={{ backgroundColor: '#fff', justifyContent: 'center', alignContent: 'center', alignItems: 'center', height: 30, width: 60, borderWidth: 1, borderColor: '#C5C5C5' }}>
+                    <Text allowFontScaling={false} style={{ fontFamily: "SFProText", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, color: "#4b4b4b" }}>{item}</Text>
+                  </View>
+                </View>
+              </View>
+            )
+          })
+        }
+
+      </View>
+    </View>
+  )
+}

package/modules/component/card.tsx

@@ -0,0 +1,61 @@
+// withHooks
+// noPage
+import { ComponentTouchable } from 'esoftplay/cache/component/touchable/import';
+import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import { LibStyle } from 'esoftplay/cache/lib/style/import';
+import esp from 'esoftplay/esp';
+
+import { LibIcon } from 'esoftplay/cache/lib/icon/import';
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentCardProps {
+  image: string,
+  name: string,
+  email: string,
+  onPress?: () => void,
+  qr_value?: any
+}
+export default function m(props: ComponentCardProps): any {
+  return (
+    <TouchableOpacity disabled={props.onPress == undefined} onPress={props.onPress}>
+      <View style={[{ margin: 15, marginVertical: 5, height: ((LibStyle.width - 30) * 912 / 1641), width: LibStyle.width - 30, backgroundColor: '#fff', borderRadius: 30, borderColor: '#eee', borderWidth: 1 }, LibStyle.elevation(0)]}>
+        <View style={{ borderRadius: 30, overflow: 'hidden' }} >
+          <LibPicture source={esp.assets('bg_card.png')} style={{ height: '100%', width: '100%', resizeMode: 'contain', margin: 0 }} />
+          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1, alignItems: 'center' }}>
+              <View style={{ flex: 3, justifyContent: 'center' }} >
+                <ComponentTouchable onPress={() => LibNavigation.navigate('lib/gallery', { image: props.image })} style={{ marginLeft: 15, height: LibStyle.width * 0.28, width: LibStyle.width * 0.28, borderRadius: LibStyle.width * 0.28 * 0.5, overflow: 'hidden' }}>
+                  <LibPicture source={{ uri: props.image }} style={{ height: LibStyle.width * 0.28, width: LibStyle.width * 0.28, resizeMode: 'cover', borderRadius: LibStyle.width * 0.28 * 0.5, alignSelf: 'center' }} />
+                </ComponentTouchable>
+              </View>
+              <View style={{ marginRight: 20, height: ((LibStyle.width - 100) * 912 / 1641), justifyContent: 'flex-start', flex: 4, marginLeft: 25, alignContent: 'center' }}>
+                {
+                  props && props?.qr_value != "" && props.qr_value &&
+                  <View style={{ justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
+                    <LibIcon name='qrcode-scan' style={{ opacity: 0.3 }} size={40} />
+                    <View style={{ bottom: 0, top: 0, left: 0, right: 0, position: 'absolute', justifyContent: 'center', alignContent: 'center', alignItems: 'center', }}>
+                      <View style={{ paddingHorizontal: 10, backgroundColor: 'rgba(255, 255, 255, 0.2)', justifyContent: 'center', alignContent: 'center', alignItems: 'center', alignSelf: 'center', width: 75, height: 20, borderRadius: 20 }}>
+                        <Text allowFontScaling={false} style={{ fontSize: 12, fontWeight: 'bold' }}>Lihat QR</Text>
+                      </View>
+                    </View>
+                  </View>
+                }
+                <View style={{ flexDirection: 'row', marginTop: 10 }} >
+                  <Text allowFontScaling={false} ellipsizeMode={"tail"} numberOfLines={2} style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 13, fontWeight: "bold", fontStyle: "normal", lineHeight: 22, letterSpacing: 0, color: '#6c432c', flex: 1 }}>{props.name}</Text>
+                </View>
+                <View style={{ height: 2, backgroundColor: '#FDC403', marginVertical: 7, }} />
+                <View style={{ justifyContent: 'center', flexDirection: 'row', alignContent: 'center', alignItems: 'center' }}>
+                  <Text allowFontScaling={false} ellipsizeMode="tail" numberOfLines={2} style={{ textAlign: 'center', fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 15, letterSpacing: 0, color: '#6c432c', }}>{props.email}</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+
+  )
+}

package/modules/component/cart_item.tsx

@@ -0,0 +1,24 @@
+// withHooks 
+// noPage
+
+import React from 'react';
+import { Text, View } from 'react-native';
+
+
+export interface ComponentCart_itemProps {
+  name: string,
+  nameColor?: string,
+  price: string,
+  currency?: string
+}
+export default function m(props: ComponentCart_itemProps): any {
+  return (
+    <View>
+      <View style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center' }}>
+        <Text allowFontScaling={false} style={{ flex: 3, fontFamily: "Arial", fontSize: 10, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, color: props.nameColor ? props.nameColor : '#000' }}>{props.name}</Text>
+        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#9b9b9b" }}>{props.currency ? props.currency : 'IDR'}</Text>
+        <Text allowFontScaling={false} style={{ flex: 1, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "right", color: "#4a4a4a" }}>{props.price}</Text>
+      </View>
+    </View>
+  )
+}

package/modules/component/circle.tsx

@@ -0,0 +1,27 @@
+// withHooks 
+// noPage
+import { LibPicture } from 'esoftplay/cache/lib/picture/import';
+import esp from 'esoftplay/esp';
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+
+export interface ComponentCircleProps {
+  image: string
+  color: string
+  title: string
+  onPress: () => void
+}
+export default function m(props: ComponentCircleProps): any {
+  return (
+    <View style={{ flexDirection: 'column', alignContent: 'center', alignItems: 'center' }}>
+      <TouchableOpacity onPress={() => props.onPress()}>
+        <View style={{ alignContent: 'center', alignItems: 'center', justifyContent: 'center', borderRadius: 30, width: 50, height: 50, backgroundColor: props.color }} >
+          <LibPicture source={esp.assets(props.image)} style={{ width: 25.8, height: 29, resizeMode: 'contain' }} />
+        </View>
+      </TouchableOpacity>
+      <Text allowFontScaling={false} style={{ marginTop: 10, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", letterSpacing: 0, textAlign: "center", color: "#4a4a4a" }}>{props.title}</Text>
+    </View>
+  )
+}