Logika EULA

Dipindah ke halaman login dan cek dengan modal Fix: Authentication & EULA - context/AuthContext.tsx - screens/Authentication/EULAView.tsx - screens/Authentication/LoginView.tsx Add: - components/Modal/ModalReactNative.tsx - screens/Authentication/EULASection.tsx ### No Issue
2026-01-23 14:45:44 +08:00
parent 5665dc88ba
commit 1aebc9b4e8
5 changed files with 384 additions and 80 deletions
--- a/components/Modal/ModalReactNative.tsx
+++ b/components/Modal/ModalReactNative.tsx
@@ -0,0 +1,33 @@
+import { Modal, View } from "react-native";
+
+export default function ModalReactNative({
+  children,
+  isVisible,
+}: {
+  children: React.ReactNode;
+  isVisible: boolean;
+}) {
+  return (
+    <Modal
+      animationType="slide"
+      backdropColor={"rgba(0, 0, 0, 0.5)"}
+      visible={isVisible}
+    >
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+        //   margin: 10,
+        marginBlock: 30,
+          padding: 10,
+          borderRadius: 10,
+          paddingTop: 30
+        }}
+      >
+        {children}
+      </View>
+    </Modal>
+  );
+}
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -21,7 +21,7 @@ type AuthContextType = {
  isAuthenticated: boolean;
  isAdmin: boolean;
  isUserActive: boolean;
-  loginWithNomor: (nomor: string) => Promise<void>;
+  loginWithNomor: (nomor: string) => Promise<boolean>;
  validateOtp: (nomor: string) => Promise<any>;
  logout: () => Promise<void>;
  registerUser: (userData: {
@@ -30,12 +30,12 @@ type AuthContextType = {
    termsOfServiceAccepted: boolean;
  }) => Promise<void>;
  userData: (token: string) => Promise<any>;
-  acceptedTerms: (nomor: string) => Promise<any>;
+  acceptedTerms: (nomor: string, onSetModalVisible: (visible: boolean) => void) => Promise<any>;
 };

 // --- Create Context ---
 export const AuthContext = createContext<AuthContextType | undefined>(
-  undefined
+  undefined,
 );

 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
@@ -79,31 +79,35 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
      const response = await apiLogin({ nomor: nomor });
      console.log("[RESPONSE AUTH]", JSON.stringify(response, null, 2));

-      if (response.success) {
-        if (response.isAcceptTerms) {
-          Toast.show({
-            type: "success",
-            text1: "Sukses",
-            text2: "Kode OTP berhasil dikirim",
-          });
-
-          await AsyncStorage.setItem("kode_otp", response.kodeId);
-          router.push(`/verification?nomor=${nomor}`);
-          return;
-        } else {
-          router.push(`/eula?nomor=${nomor}`);
-          return;
-        }
+      if (response.success && response.isAcceptTerms) {
+       
+        await AsyncStorage.setItem("kode_otp", response.kodeId);
+        router.push(`/verification?nomor=${nomor}`);
+        return true;
      } else {
-        router.push(`/eula?nomor=${nomor}`);
-
-        // Toast.show({
-        //   type: "info",
-        //   text1: "Info",
-        //   text2: "Silahkan mendaftar",
-        // });
-        return;
+        // router.push(`/eula?nomor=${nomor}`);
+        return false;
      }
+
+      // if (response.success) {
+      //   if (response.isAcceptTerms) {
+      //     Toast.show({
+      //       type: "success",
+      //       text1: "Sukses",
+      //       text2: "Kode OTP berhasil dikirim",
+      //     });
+
+      //     await AsyncStorage.setItem("kode_otp", response.kodeId);
+      //     router.push(`/verification?nomor=${nomor}`);
+      //     return false
+      //   } else {
+      //     // router.push(`/eula?nomor=${nomor}`);
+      //     return true
+      //   }
+      // } else {
+      //   router.push(`/eula?nomor=${nomor}`);
+      //   return true;
+      // }
    } catch (error: any) {
      throw new Error(error.response?.data?.message || "Gagal kirim OTP");
    } finally {
@@ -158,7 +162,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    } catch (error: any) {
      console.log("Error validasi otp >>", (error as Error).message || error);
      throw new Error(
-        error.response?.data?.message || "OTP salah atau user tidak ditemukan"
+        error.response?.data?.message || "OTP salah atau user tidak ditemukan",
      );
    } finally {
      setIsLoading(false);
@@ -187,7 +191,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    } catch (error: any) {
      console.log(
        "[LOAD USER DATA]",
-        error.response?.data?.message + "user" || "Gagal mengambil data user"
+        error.response?.data?.message + "user" || "Gagal mengambil data user",
      );
    } finally {
      setIsLoading(false);
@@ -261,7 +265,8 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
    }
  };

-  const acceptedTerms = async (nomor: string) => {
+  // --- 6. Accept Terms ---
+  const acceptedTerms = async (nomor: string, onSetModalVisible: (visible: boolean) => void) => {
    try {
      setIsLoading(true);
      const response = await apiUpdatedTermCondition({ nomor: nomor });
@@ -283,6 +288,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
      console.log("Error accept terms", error);
    } finally {
      setIsLoading(false);
+      // onSetModalVisible(false);
    }
  };

--- a/screens/Authentication/EULASection.tsx
+++ b/screens/Authentication/EULASection.tsx
@@ -0,0 +1,264 @@
+// app/syarat-dan-ketentuan.tsx
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { useState, useRef } from "react";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+
+
+export default function EULASection({ nomor, onSetModalVisible }: { nomor: string, onSetModalVisible: (visible: boolean) => void }) {
+  const { acceptedTerms } = useAuth();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isAtBottom, setIsAtBottom] = useState(false);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  const handleScroll = (event: any) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+    const isCloseToBottom =
+      layoutMeasurement.height + contentOffset.y >=
+      contentSize.height - paddingToBottom;
+    setIsAtBottom(isCloseToBottom);
+  };
+
+  const handleAccept = async () => {
+    // console.log("Accept terms", nomor);
+    // onSetModalVisible(false);
+    try {
+      if (!isAtBottom) return;
+
+      setIsLoading(true);
+      await acceptedTerms(nomor as string, onSetModalVisible);
+    } catch (error) {
+      console.log("Error accept terms", error);
+    } finally {
+      setIsLoading(false);
+      
+    }
+  };
+
+  return (
+    <SafeAreaView edges={["bottom"]} style={styles.container}>
+      <Text style={styles.title}>
+        Syarat & Ketentuan Penggunaan HIPMI Badung Connect
+      </Text>
+
+      <ScrollView
+        ref={scrollViewRef}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <Text style={styles.paragraph}>
+          Dengan menggunakan aplikasi{" "}
+          <Text style={styles.bold}>HIPMI Badung Connect</Text> (“Aplikasi”),
+          Anda setuju untuk mematuhi dan terikat oleh syarat dan ketentuan
+          berikut. Jika Anda tidak setuju dengan ketentuan ini, harap jangan
+          gunakan Aplikasi.
+        </Text>
+
+        <Text style={styles.heading}>1. Definisi</Text>
+        <Text style={styles.paragraph}>
+          <Text style={styles.bold}>HIPMI Badung Connect</Text> adalah platform
+          digital resmi untuk anggota Himpunan Pengusaha Muda Indonesia (HIPMI)
+          Kabupaten Badung, yang bertujuan memfasilitasi jaringan, kolaborasi,
+          dan pertumbuhan bisnis para pengusaha muda.
+        </Text>
+
+        <Text style={styles.heading}>2. Larangan Konten Tidak Pantas</Text>
+        <Text style={styles.paragraph}>
+          Anda <Text style={styles.bold}>dilarang keras</Text> memposting,
+          mengirim, membagikan, atau mengunggah konten apa pun yang mengandung:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Ujaran kebencian, diskriminasi, atau konten SARA (Suku, Agama,
+            Ras, Antar-golongan)
+          </Text>
+          <Text style={styles.listItem}>
+            • Pornografi, konten seksual eksplisit, atau gambar tidak senonoh
+          </Text>
+          <Text style={styles.listItem}>
+            • Ancaman, pelecehan, bullying, atau perilaku melecehkan
+          </Text>
+          <Text style={styles.listItem}>
+            • Informasi palsu, hoaks, spam, atau konten menyesatkan
+          </Text>
+          <Text style={styles.listItem}>
+            • Konten ilegal, melanggar hukum, atau melanggar hak kekayaan
+            intelektual pihak lain
+          </Text>
+          <Text style={styles.listItem}>
+            • Promosi narkoba, perjudian, atau aktivitas ilegal lainnya
+          </Text>
+        </View>
+
+        <Text style={styles.heading}>3. Tanggung Jawab Pengguna</Text>
+        <Text style={styles.paragraph}>
+          Anda bertanggung jawab penuh atas setiap konten yang Anda unggah atau
+          bagikan melalui fitur-fitur berikut:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>• Profil (bio, foto, portofolio)</Text>
+          <Text style={styles.listItem}>• Forum diskusi</Text>
+          <Text style={styles.listItem}>• Chat pribadi atau grup</Text>
+          <Text style={styles.listItem}>
+            • Lowongan kerja, investasi, dan donasi
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Konten yang melanggar ketentuan ini dapat dihapus kapan saja tanpa
+          pemberitahuan.
+        </Text>
+
+        <Text style={styles.heading}>4. Tindakan terhadap Pelanggaran</Text>
+        <Text style={styles.paragraph}>
+          Jika kami menerima laporan atau menemukan konten yang melanggar
+          ketentuan ini, kami akan:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Segera menghapus konten tersebut
+          </Text>
+          <Text style={styles.listItem}>
+            • Memberikan peringatan atau memblokir akun pengguna
+          </Text>
+          <Text style={styles.listItem}>
+            • Dalam kasus berat, melaporkan ke pihak berwajib sesuai hukum yang
+            berlaku
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Tim kami berkomitmen untuk menanggapi laporan konten tidak pantas{" "}
+          <Text style={styles.bold}>dalam waktu 24 jam</Text>.
+        </Text>
+
+        <Text style={styles.heading}>5. Mekanisme Pelaporan</Text>
+        <Text style={styles.paragraph}>
+          Anda dapat melaporkan konten atau pengguna yang mencurigakan melalui:
+        </Text>
+        <View style={styles.list}>
+          <Text style={styles.listItem}>
+            • Tombol <Text style={styles.bold}>“Laporkan”</Text> di setiap
+            posting forum atau pesan chat
+          </Text>
+          <Text style={styles.listItem}>
+            • Tombol <Text style={styles.bold}>“Blokir Pengguna”</Text> di
+            profil pengguna
+          </Text>
+        </View>
+        <Text style={styles.paragraph}>
+          Setiap laporan akan ditangani secara rahasia dan segera.
+        </Text>
+
+        <Text style={styles.heading}>6. Perubahan Ketentuan</Text>
+        <Text style={styles.paragraph}>
+          Kami berhak memperbarui Syarat & Ketentuan ini sewaktu-waktu. Versi
+          terbaru akan dipublikasikan di halaman ini dengan tanggal revisi yang
+          diperbarui.
+        </Text>
+
+        <Text style={styles.heading}>7. Kontak</Text>
+        <Text style={styles.paragraph}>
+          Jika Anda memiliki pertanyaan tentang ketentuan ini, silakan hubungi
+          kami di:{"\n"}
+          <Text style={[styles.bold, { color: "#1E90FF" }]}>
+            bip.baliinteraktifperkasa@gmail.com
+          </Text>
+        </Text>
+
+        <Text style={styles.footer}>
+          © 2026 Bali Interaktif Perkasa. All rights reserved.
+        </Text>
+      </ScrollView>
+
+      <TouchableOpacity
+        onPress={handleAccept}
+        disabled={!isAtBottom || isLoading}
+        style={[styles.button, { opacity: !isAtBottom || isLoading ? 0.6 : 1 }]}
+      >
+        <Text style={styles.buttonText}>
+          {isLoading ? "Menyimpan..." : "Saya Setuju"}
+        </Text>
+      </TouchableOpacity>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: MainColor.darkblue,
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 16,
+    color: MainColor.white,
+  },
+  scrollView: {
+    flex: 1,
+    marginBottom: 20,
+  },
+  scrollContent: {
+    paddingBottom: 30,
+  },
+  heading: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginTop: 16,
+    marginBottom: 8,
+    color: MainColor.white,
+  },
+  paragraph: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: MainColor.white,
+    marginBottom: 12,
+  },
+  bold: {
+    fontWeight: "600",
+  },
+  list: {
+    marginLeft: 8,
+    marginBottom: 12,
+  },
+  listItem: {
+    fontSize: 14,
+    lineHeight: 22,
+    color: MainColor.white,
+    marginBottom: 6,
+  },
+  footer: {
+    fontSize: 12,
+    color: MainColor.white,
+    textAlign: "center",
+    marginTop: 20,
+    paddingTop: 10,
+    borderTopWidth: 2,
+    borderTopColor: AccentColor.blue,
+  },
+  button: {
+    backgroundColor: MainColor.yellow,
+    paddingVertical: 14,
+    borderRadius: 8,
+    alignItems: "center",
+    width: 200,
+    alignSelf: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});
--- a/screens/Authentication/EULAView.tsx
+++ b/screens/Authentication/EULAView.tsx
@@ -12,25 +12,6 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { AccentColor, MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";

-// Ganti dengan API call ke backend Anda
-// const acceptEula = async (): Promise<boolean> => {
-//   try {
-//     const response = await fetch("/api/user/update-eula", {
-//       method: "PATCH",
-//       headers: { "Content-Type": "application/json" },
-//       credentials: "include",
-//       body: JSON.stringify({
-//         eulaAcceptedAt: new Date().toISOString(),
-//         eulaVersion: "2026-01-v1", // sesuaikan versi Anda
-//       }),
-//     });
-//     return response.ok;
-//   } catch (error) {
-//     console.error("Gagal menyimpan persetujuan EULA:", error);
-//     return false;
-//   }
-// };
-
 export default function EULAView() {
  const { acceptedTerms } = useAuth();
  const { nomor } = useLocalSearchParams();
@@ -52,7 +33,7 @@ export default function EULAView() {
      if (!isAtBottom) return;

      setIsLoading(true);
-      await acceptedTerms(nomor as string);
+      // await acceptedTerms(nomor as string);
    } catch (error) {
      console.log("Error accept terms", error);
    } finally {
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -1,25 +1,31 @@
-import { NewWrapper } from "@/components";
+import { NewWrapper, TextCustom } from "@/components";
 import ButtonCustom from "@/components/Button/ButtonCustom";
+import ModalReactNative from "@/components/Modal/ModalReactNative";
 import Spacing from "@/components/_ShareComponent/Spacing";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
-import { apiVersion } from "@/service/api-config";
+import { apiVersion, BASE_URL } from "@/service/api-config";
 import { GStyles } from "@/styles/global-styles";
+import { openBrowser } from "@/utils/openBrower";
 import versionBadge from "@/utils/viersionBadge";
 import VersionBadge from "@/utils/viersionBadge";
 import { Redirect } from "expo-router";
 import { useEffect, useState } from "react";
-import { RefreshControl, Text, View } from "react-native";
+import { Modal, RefreshControl, Text, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
 import Toast from "react-native-toast-message";
+import EULASection from "./EULASection";

 export default function LoginView() {
+  const url = BASE_URL;
  const [version, setVersion] = useState<string>("");
  const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
  const [inputValue, setInputValue] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [refreshing, setRefreshing] = useState<boolean>(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [numberToEULA, setNumberToEULA] = useState<string>("");

  const { loginWithNomor, token, isAdmin, isUserActive } = useAuth();

@@ -84,10 +90,17 @@ export default function LoginView() {
    let fixNumber = inputValue.replace(/\s+/g, "").replace(/^0+/, "");

    const realNumber = callingCode + fixNumber;
+    

    try {
      setLoading(true);
-      await loginWithNomor(realNumber);
+      const loginRes = await loginWithNomor(realNumber);
+
+      if (!loginRes) {
+        setModalVisible(true);
+      }
+
+      setNumberToEULA(realNumber);
    } catch (error) {
      console.log("Error login", error);
      Toast.show({
@@ -98,30 +111,6 @@ export default function LoginView() {
    } finally {
      setLoading(false);
    }
-
-    // try {
-    //   setLoading(true);
-    //   // const response = await apiLogin({ nomor: realNumber });
-    //  const response =  await loginWithNomor(realNumber);
-    //  console.log("[RESPONSE]", response);
-
-    //   Toast.show({
-    //     type: "success",
-    //     text1: "Sukses",
-    //     text2: "Kode OTP berhasil dikirim",
-    //   });
-
-    //   // router.navigate(`/verification?nomor=${realNumber}`);
-    // } catch (error) {
-    //   console.log("Error login", error);
-    //   Toast.show({
-    //     type: "error",
-    //     text1: "Error",
-    //     text2: error as string,
-    //   });
-    // } finally {
-    //   setLoading(false);
-    // }
  }

  if (token && token !== "" && !isUserActive) {
@@ -148,6 +137,7 @@ export default function LoginView() {
      }
    >
      <View style={GStyles.authContainer}>
+      
        <View>
          <View style={GStyles.authContainerTitle}>
            <Text style={GStyles.authSubTitle}>WELCOME TO</Text>
@@ -185,11 +175,41 @@ export default function LoginView() {
        <ButtonCustom onPress={handleLogin} isLoading={loading}>
          Login
        </ButtonCustom>
-        <Spacing />
-        {/* <ButtonCustom onPress={() => router.navigate("/(application)/coba")}>
-          Coba
+        <Spacing height={50} />
+
+        {/* <ButtonCustom
+          onPress={() => {
+            setModalVisible(true);
+            console.log("Show modal", modalVisible);
+          }}
+        >
+          Show Modal
        </ButtonCustom> */}
+        {/* <CheckboxCustom value={term} onChange={() => setTerm(!term)} /> */}
+
+        <Text
+          style={{ ...GStyles.textLabel, textAlign: "center", fontSize: 12 }}
+        >
+          Dengan menggunakan aplikasi ini, Anda telah menyetujui{" "}
+          <Text
+            style={{
+              color: MainColor.yellow,
+              textDecorationLine: "underline",
+            }}
+            onPress={() => {
+              const toUrl = `${url}/terms-of-service.html`;
+              openBrowser(toUrl);
+            }}
+          >
+            Syarat & Ketentuan
+          </Text>{" "}
+          dan seluruh kebijakan privasi yang berlaku.
+        </Text>
      </View>
+
+      <ModalReactNative isVisible={modalVisible}>
+        <EULASection nomor={numberToEULA || ""} onSetModalVisible={setModalVisible} />
+      </ModalReactNative>
    </NewWrapper>
  );
 }