feat: 新增用户条例内容

app/(auth)/(tabs)/(account)/accountUserTermsPage.tsx

@@ -6,7 +6,7 @@ import UserTermsPageComponent from '../../../../component/accountPages/userTerms
 const UserTermsPage = () => {
     return (
         <View className="flex-1">
-          <UserTermsPageComponent></UserTermsPageComponent>
+          <UserTermsPageComponent ></UserTermsPageComponent>
         </View>
         );
 };

component/accountPages/userTermsPageComponent.tsx

@@ -1,28 +1,159 @@
-import { View, Text, ScrollView, Pressable, Button, Alert } from 'react-native';
+import { View, Text, ScrollView, Pressable, Button, Alert, StyleSheet } from 'react-native';
 import React, { useContext } from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { router } from 'expo-router';
 import { CrossLogoSvg, RightArrowIconSvg } from '../global/SVG';
-const UserTermsPageComponent = () => {
-    return (
-            <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
-                <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
-                    <View style={{ marginTop: 25 }}>
-                        <Pressable
-                            onPress={() => {
-                                router.back();
-                            }}
-                        >
-                            <CrossLogoSvg />
-                        </Pressable>
-                        <Text style={{ fontSize: 45, marginVertical: 25 }}>用戶條款</Text>
-                    </View>
-                    <View>
-                      
-                    </View>
-                </ScrollView>
-            </SafeAreaView>
-        );
+import NormalButton from '../global/normal_button';
+
+type TermsSectionProps = {
+  title: string| undefined;
+  clauses: string[];
+};
+
+const TermsSection: React.FC<TermsSectionProps> = ({ title, clauses }) => (
+  <View className="mb-3">
+    {title && (
+      <Text style={styles.sectionTitle}>{title}</Text>
+    )}
+    {clauses.map((clause, index) => (
+      <Text key={index} style={styles.clause}>
+        {clause}
+      </Text>
+    ))}
+  </View>
+);
+const UserTermsPageComponent: React.FC<{ onAgree: () => void }> = ({ onAgree }) => {
+  const sections = [
+    {
+      clauses: [
+        '歡迎使用 Crazy Charge（以下簡稱「本公司」或「我們」）提供的電動車充電服務（以下簡稱「服務」）。請仔細閱讀以下條款及細則（以下簡稱「本條款」），使用 Crazy Charge 此應用程式即表示您同意遵守本條款的所有內容。'
+      ]
+    },
+    {
+      title: '1. 服務使用',
+      clauses: [
+        '1.1 賬戶與服務接入：用戶須透過本公司APP進行充值、付款及啓動充電服務。',
+        '1.2 賬戶資料責任：用戶須確保所提供的資料真實、準確及完整，並對其帳戶的一切活動負責。',
+        '1.3 服務變更權限：本公司保留隨時修改、暫停或終止服務的權利，而無須事先通知用戶。'
+      ]
+    },
+    {
+      title: '2. 充值及付款',
+      clauses: [
+        '2.1 充值與餘額：用戶可透過APP進行充值，充值金額將存入用戶帳戶。',
+        '2.2 充值金額有效期：充值金額沒有使用期限。',
+        '2.3 優惠政策：本公司可能不時提供優惠，相關優惠受特定條款約束。'
+      ]
+    },
+    {
+      title: '3. 退款政策',
+      clauses: [
+        '3.1 退款申請方式：如用戶要求退款，須透過WhatsApp提交申請。',
+        '3.2 退款優惠扣除：退款金額將扣除該次充值所涉及的所有優惠。',
+        '3.3 退款行政費用：每筆退款將收取港幣150元作為行政費用。',
+        '3.4 退款建議：建議用戶將未使用的充值金額留作日後使用。',
+        '3.5 退款處理時間：退款處理時間由本公司決定。'
+      ]
+    },
+    {
+      title: '4. 責任限制',
+      clauses: [
+        '4.1 服務穩定性承諾：本公司將盡力確保服務的穩定性及準確性。',
+        '4.2 用戶損失責任：因使用本服務而導致的任何損失，本公司概不負責。',
+        '4.3 不可抗力責任：如因不可抗力導致服務中斷，本公司不承擔責任。'
+      ]
+    }
+  ];
+
+  const handleAgree = () => {
+    router.back()
+    // onAgree();
+  };
+
+  return (
+    <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
+    <View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        <Text style={styles.header}>Crazy Charge 用戶條款及細則</Text>
+        <View style={styles.section}>
+          {sections.map((section, index) => (
+            <TermsSection 
+              key={index}
+              title={section.title}
+              clauses={section.clauses}
+            />
+          ))}
+        </View>
+      </ScrollView>
+      <NormalButton
+        extendedStyle={styles.agreeButton}
+        onPress={() => handleAgree()}
+        title={<Text
+            style={{
+                fontWeight: '600',
+                fontSize: 18,
+                color: '#fff'
+            }}
+        >
+            同意並繼續
+        </Text>}
+        >
+
+        </NormalButton>
+    </View>
+    </SafeAreaView>
+  );
 };
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 8,
+    backgroundColor: '#f8f9fa'
+  },
+  scrollContainer: {
+    paddingBottom: 70
+  },
+  header: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 15,
+    color: '#2c3e50',
+    textAlign: 'center'
+  },
+  description: {
+    fontSize: 14, 
+    color: '#2c3e50',
+    paddingLeft: 20,
+    paddingRight: 20,
+    marginBottom: 10,
+  },
+  section: {
+    marginBottom: 10,
+    backgroundColor: 'white',
+    borderRadius: 8,
+    padding: 16,
+    elevation: 2
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12,
+    color: '#025c72'
+  },
+  clause: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 5,
+    color: '#34495e'
+  },
+  agreeButton: {
+    position: 'absolute',
+    bottom: 10,
+    left: 20,
+    right: 20,
+    padding: 16,
+    alignItems: 'center'
+  },
+});
 
 export default UserTermsPageComponent;