upd: upd version

Deskripsi: - tampilan jika update versi terbaru atau sedang maintenance NO Issues
2026-02-24 15:51:29 +08:00
parent 449f6f96cc
commit 214a243e44
7 changed files with 306 additions and 16 deletions
--- a/components/ModalUpdateMaintenance.tsx
+++ b/components/ModalUpdateMaintenance.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { Modal, View, Image, TouchableOpacity, BackHandler, Platform } from 'react-native';
+import { useTheme } from '@/providers/ThemeProvider';
+import Text from './Text';
+import * as Linking from 'expo-linking';
+import Styles from '@/constants/Styles';
+
+interface ModalUpdateMaintenanceProps {
+   visible: boolean;
+   type: 'update' | 'maintenance';
+   isForceUpdate?: boolean;
+   onDismiss?: () => void;
+   appName?: string;
+   customDescription?: string;
+   androidStoreUrl?: string;
+   iosStoreUrl?: string;
+}
+
+const ModalUpdateMaintenance: React.FC<ModalUpdateMaintenanceProps> = ({
+   visible,
+   type,
+   isForceUpdate = false,
+   onDismiss,
+   appName = 'Desa+',
+   customDescription,
+   androidStoreUrl = 'https://play.google.com/store/apps/details?id=mobiledarmasaba.app',
+   iosStoreUrl = 'https://apps.apple.com/id/app/desa-plus-desa/id6752375538'
+}) => {
+   const { colors } = useTheme();
+
+   const handleUpdate = () => {
+      const storeUrl = Platform.OS === 'ios' ? iosStoreUrl : androidStoreUrl;
+      Linking.openURL(storeUrl);
+   };
+
+   const handleCloseApp = () => {
+      // For maintenance mode, we might want to exit the app or just keep the modal.
+      // React Native doesn't have a built-in "exit" for iOS, but for Android:
+      if (Platform.OS === 'android') {
+         BackHandler.exitApp();
+      }
+   };
+
+   return (
+      <Modal
+         visible={visible}
+         animationType="fade"
+         transparent={false}
+         onRequestClose={() => {
+            if (!isForceUpdate && type === 'update') {
+               onDismiss?.();
+            }
+         }}
+      >
+         <View style={[Styles.modalUpdateContainer, { backgroundColor: colors.primary }]}>
+            {/* Background decorative circles could be added here if we had SVGs or images */}
+            <View style={Styles.modalUpdateDecorativeCircle1} />
+            <View style={Styles.modalUpdateDecorativeCircle2} />
+
+            <View style={Styles.modalUpdateContent}>
+               <Image
+                  source={require('@/assets/images/logo-dark.png')}
+                  style={Styles.modalUpdateLogo}
+                  resizeMode="contain"
+               />
+
+               <View style={Styles.modalUpdateTextContainer}>
+                  <Text style={Styles.modalUpdateTitle}>
+                     {type === 'update' ? 'Update Tersedia' : 'Perbaikan'}
+                  </Text>
+                  <Text style={[Styles.modalUpdateDescription, { opacity: 0.8 }]}>
+                     {customDescription ? customDescription :
+                        (type === 'update'
+                           ? `Versi terbaru dari ${appName} tersedia di Store. Silakan buka Store untuk menginstalnya.`
+                           : 'Aplikasi saat ini sedang dalam pemeliharaan untuk peningkatan sistem. Silakan coba kembali beberapa saat lagi.')}
+                  </Text>
+               </View>
+
+               <View style={Styles.modalUpdateButtonContainer}>
+                  {type === 'update' ? (
+                     <>
+                        <TouchableOpacity
+                           style={[Styles.modalUpdatePrimaryButton, { backgroundColor: 'white' }]}
+                           onPress={handleUpdate}
+                           activeOpacity={0.8}
+                        >
+                           <Text style={[Styles.modalUpdatePrimaryButtonText, { color: colors.primary }]}>
+                              Update
+                           </Text>
+                        </TouchableOpacity>
+
+                        {!isForceUpdate && (
+                           <TouchableOpacity
+                              style={Styles.modalUpdateSecondaryButton}
+                              onPress={onDismiss}
+                              activeOpacity={0.7}
+                           >
+                              <Text style={Styles.modalUpdateSecondaryButtonText}>Nanti</Text>
+                           </TouchableOpacity>
+                        )}
+                     </>
+                  ) : (
+                     <></>
+                     // <TouchableOpacity
+                     //    style={[Styles.modalUpdatePrimaryButton, { backgroundColor: 'white' }]}
+                     //    onPress={handleCloseApp}
+                     //    activeOpacity={0.8}
+                     // >
+                     //    <Text style={[Styles.modalUpdatePrimaryButtonText, { color: colors.primary }]}>
+                     //       {Platform.OS === 'android' ? 'Close App' : 'Please check back later'}
+                     //    </Text>
+                     // </TouchableOpacity>
+                  )}
+               </View>
+            </View>
+         </View>
+      </Modal>
+   );
+};
+
+export default ModalUpdateMaintenance;
--- a/components/auth/viewLogin.tsx
+++ b/components/auth/viewLogin.tsx
@@ -22,7 +22,7 @@ export default function ViewLogin({ onValidate }: Props) {
   const [disableLogin, setDisableLogin] = useState(true)
   const [phone, setPhone] = useState('')
   const { signIn, encryptToken } = useAuthSession();
-   const { colors, theme } = useTheme();
+   const { colors, activeTheme } = useTheme();

   const handleCheckPhone = async () => {
      try {
@@ -52,11 +52,11 @@ export default function ViewLogin({ onValidate }: Props) {

   return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
-         <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
+         <StatusBar style={activeTheme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
         <View style={[Styles.p20, Styles.h100]}>
            <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
               <Image
-                  source={theme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
+                  source={activeTheme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
                  style={[{ width: 300, height: 150 }]}
                  width={270}
                  height={110}
@@ -82,7 +82,7 @@ export default function ViewLogin({ onValidate }: Props) {
            <View style={{ flex: 1 }} />
            <View style={{ alignItems: 'center' }}>
               <Image
-                  source={theme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
+                  source={activeTheme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
                  style={{ width: 86, height: 27 }}
                  resizeMode="contain"
               />
--- a/components/auth/viewVerification.tsx
+++ b/components/auth/viewVerification.tsx
@@ -21,7 +21,7 @@ export default function ViewVerification({ phone, otp }: Props) {
   const [value, setValue] = useState('');
   const [otpFix, setOtpFix] = useState(otp)
   const { signIn, encryptToken } = useAuthSession();
-   const { colors, theme } = useTheme();
+   const { colors, activeTheme } = useTheme();

   const login = async () => {
      const valueUser = await AsyncStorage.getItem('user');
@@ -59,11 +59,11 @@ export default function ViewVerification({ phone, otp }: Props) {

   return (
      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
-         <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
+         <StatusBar style={activeTheme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
         <View style={[Styles.p20, Styles.h100]} >
            <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
               <Image
-                  source={theme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
+                  source={activeTheme === 'dark' ? require("../../assets/images/logo-dark.png") : require("../../assets/images/logo.png")}
                  style={[{ width: 300, height: 150 }]}
                  width={270}
                  height={110}
@@ -101,7 +101,7 @@ export default function ViewVerification({ phone, otp }: Props) {
            <View style={{ flex: 1 }} />
            <View style={[{ alignItems: 'center' }]}>
               <Image
-                  source={theme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
+                  source={activeTheme === 'dark' ? require("../../assets/images/cogniti-dark.png") : require("../../assets/images/cogniti-light.png")}
                  style={{ width: 86, height: 27 }}
                  resizeMode="contain"
               />
--- a/components/eventItem.tsx
+++ b/components/eventItem.tsx
@@ -13,20 +13,20 @@ type Props = {
 }

 export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
-   const { theme, colors } = useTheme();
+   const { activeTheme, colors } = useTheme();

   const getBackgroundColor = (cat: 'purple' | 'orange') => {
-      if (theme === 'dark') {
+      if (activeTheme === 'dark') {
         return cat === 'orange' ? '#547792' : '#1D546D';
      }
      return cat === 'orange' ? '#D6E6F2' : '#A9B5DF';
   };

   const getStickColor = (cat: 'purple' | 'orange') => {
-      if (theme === 'dark') {
+      if (activeTheme === 'dark') {
         return cat === 'orange' ? '#94B4C1' : '#5F9598';
      }
-      return cat === 'orange' ? '#F5F5F5' : '#7886C7' ;
+      return cat === 'orange' ? '#F5F5F5' : '#7886C7';
   };

   return (