connect-x-reactnative-livechat-sdk 0.2.0

package/src/ChatScreen.tsx

@@ -0,0 +1,914 @@
+// src/ChatScreen.tsx
+import { useState, useEffect, useRef, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  SectionList,
+  StyleSheet,
+  SafeAreaView,
+  KeyboardAvoidingView,
+  Platform,
+  Image,
+  ActivityIndicator,
+  Alert,
+  Linking,
+  Dimensions,
+} from 'react-native';
+import io from 'socket.io-client';
+import type { Socket } from 'socket.io-client';
+import {
+  pick,
+  types,
+  type DocumentPickerResponse,
+} from '@react-native-documents/picker';
+import { ConnectXMobileSdk } from 'connect-x-react-native-sdk';
+import { apiGet, uploadFile, BASE_URL_LIVE_CHAT, apiPost } from './api';
+import Svg, { Path } from 'react-native-svg';
+import hexToRgba from 'hex-to-rgba';
+
+interface Message {
+  id?: string;
+  text?: string;
+  sender: 'user' | 'agent';
+  timestamp: number;
+  type: 'text' | 'image' | 'file' | 'liveChatButtons';
+  url?: string;
+  fileName?: string;
+  buttons?: any[];
+  [key: string]: any; // for other properties
+}
+
+const SendIcon = ({ color, size }: { color: string; size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M22 2L15 22L11 13L2 9L22 2Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// Component หลักของหน้าแชท
+export const ChatScreen = ({
+  onClose,
+  token,
+  orgId,
+  channelId,
+}: {
+  onClose: () => void;
+  token: string;
+  orgId: string;
+  channelId: string;
+}) => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputText, setInputText] = useState('');
+  const [loading, setLoading] = useState(true);
+  const socketRef = useRef<typeof Socket | null>(null);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] =
+    useState<DocumentPickerResponse | null>(null);
+  const [styleSettings, setStyleSettings] = useState<any>(null);
+  const [styles, setStyles] = useState<any>({});
+  const sectionListRef = useRef<SectionList<Message>>(null);
+  const [chatPhase, setChatPhase] = useState<'pre-chat' | 'chatting'>(
+    'chatting'
+  );
+
+  useEffect(() => {
+    const findCustomer = async (unknownId: String) => {
+      try {
+        const res = await apiPost(
+          `liveChat/${orgId}/${channelId}/setLiveChatConnector`,
+          {
+            externalValue: "Siwakorn'", //'ปุ้นซู่ซ่า', //sdf0001111111111  //78e839c38397b8cac97437d17b1c91b568a5adb4
+            userId: unknownId,
+          },
+          token
+        );
+        console.log('Found customer:', res);
+        if (res) {
+          setUserId(res?.userId);
+        } else {
+          // initializeUserId();
+        }
+      } catch (error) {
+        // initializeUserId();
+        console.log('Error finding customer:', error);
+      }
+    };
+
+    const initializeUserId = async () => {
+      try {
+        const res = await ConnectXMobileSdk.getUnknownId();
+        console.log('Generated userId:', res);
+        // setUserId(res);
+        findCustomer(res);
+      } catch (error) {
+        console.log('Error generating userId:', error);
+      }
+    };
+    if (!userId) {
+      initializeUserId();
+    }
+  });
+
+  useEffect(() => {
+    const initializeChat = async () => {
+      if (!userId) return;
+      try {
+        console.log('Checking domain/app permissions...');
+
+        const settings = await apiGet(
+          `liveChat/${orgId}/${channelId}/getSettingConnector`,
+          token
+        );
+        setStyleSettings(settings);
+        setStyles(getDynamicStyles(settings.styles));
+
+        const history = await apiGet(
+          `liveChat/${orgId}/${channelId}/getChatHistory/${userId}`,
+          token
+        );
+        console.log('Chat history:', history);
+        setMessages(history);
+
+        const socket = io(`${BASE_URL_LIVE_CHAT}/liveChat`, {
+          transports: ['websocket'],
+        });
+        socketRef.current = socket;
+
+        socket.on('connect', () => {
+          console.log('Socket connected!');
+          socket.emit('joinRoom', { userId, socketId: socket.id });
+        });
+
+        socket.on('receiveMessage', (payload: { message: Message }) => {
+          console.log('Received message:', payload.message);
+          setMessages((prev) => [...prev, payload.message]);
+        });
+
+        socket.on('disconnect', (reason: any) => {
+          console.log(`Socket disconnected: ${reason}`);
+        });
+      } catch (error) {
+        console.log('Initialization failed:', error);
+        // Alert.alert('Error', 'Could not initialize chat.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    initializeChat();
+
+    return () => {
+      socketRef.current?.disconnect();
+    };
+  }, [userId, orgId, channelId, token]);
+
+  const messageSections = useMemo(() => {
+    if (!messages || messages.length === 0) return [];
+
+    const groupedMessages = messages.reduce(
+      (acc, message) => {
+        const dateKey = new Date(message.timestamp).toLocaleDateString('en-CA'); // YYYY-MM-DD format for reliable sorting
+        if (!acc[dateKey]) {
+          acc[dateKey] = [];
+        }
+        acc[dateKey].push(message);
+        return acc;
+      },
+      {} as { [key: string]: Message[] }
+    );
+
+    return Object.keys(groupedMessages)
+      .sort()
+      .map((date) => ({
+        title: new Date(date).toLocaleDateString('en-GB', {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        }),
+        data: groupedMessages[date] ?? [],
+      }));
+  }, [messages]);
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const PreChatForm = ({
+    onSubmit,
+    headerColor,
+  }: {
+    onSubmit: (data: any) => void;
+    // agentProfile: any;
+    // styles: any;
+    headerColor: string;
+  }) => {
+    const [formData, setFormData] = useState<any>({});
+    const [consentChecked, setConsentChecked] = useState(false);
+
+    const handleInputChange = (field: string, value: string) => {
+      setFormData((prev: any) => ({ ...prev, [field]: value }));
+    };
+
+    const handleStartChat = () => {
+      if (!consentChecked) {
+        Alert.alert(
+          'Consent Required',
+          'Please click the consent checkbox to continue.'
+        );
+        return;
+      }
+      onSubmit(formData);
+    };
+
+    return (
+      <SafeAreaView style={styles.safeArea}>
+        <View style={styles.formContainer}>
+          <Text style={styles.formWelcomeText}>
+            Hello there! Are you looking for an automation program in branding
+            for your product?
+          </Text>
+
+          <View style={styles.formInputContainer}>
+            <Text style={styles.formLabel}>First Name</Text>
+            <TextInput
+              style={styles.formInput}
+              placeholder="First Name"
+              placeholderTextColor={'#BBC1C3'}
+              onChangeText={(text) => handleInputChange('firstName', text)}
+            />
+          </View>
+
+          <View style={styles.formInputContainer}>
+            <Text style={styles.formLabel}>Lorem</Text>
+            <TextInput
+              style={styles.formInput}
+              placeholder="Lorem"
+              placeholderTextColor={'#BBC1C3'}
+              onChangeText={(text) => handleInputChange('lorem', text)}
+            />
+          </View>
+        </View>
+
+        <View style={styles.consentContainer}>
+          <TouchableOpacity
+            onPress={() => setConsentChecked(!consentChecked)}
+            style={[
+              styles.checkboxBase,
+              { backgroundColor: consentChecked ? '#3761DF' : '#fff' },
+            ]}
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: consentChecked }}
+          >
+            {consentChecked && <Text style={styles.checkmark}>✓</Text>}
+          </TouchableOpacity>
+
+          <Text style={styles.consentText}>
+            <Text style={{ color: 'red' }}>*</Text> Click{' '}
+            <Text style={styles.consentLink}>Consent</Text>
+          </Text>
+        </View>
+
+        <View style={styles.formFooter}>
+          <TouchableOpacity
+            style={[styles.startButton, { backgroundColor: headerColor }]}
+            onPress={handleStartChat}
+          >
+            <Text style={styles.startButtonText}>Start Chat</Text>
+          </TouchableOpacity>
+        </View>
+      </SafeAreaView>
+    );
+  };
+
+  useEffect(() => {
+    console.log('Message sections updated:', messageSections);
+    try {
+      if (sectionListRef.current && messageSections.length > 0) {
+        setTimeout(() => {
+          const lastSectionIndex = messageSections.length - 1;
+          const lastSection = messageSections[lastSectionIndex];
+          console.log(
+            'Scrolling to last section:',
+            lastSectionIndex,
+            lastSection
+          );
+          if (
+            lastSection &&
+            lastSection?.data &&
+            lastSection?.data?.length > 0
+          ) {
+            sectionListRef.current?.scrollToLocation({
+              sectionIndex: lastSectionIndex,
+              itemIndex: lastSection?.data?.length - 1,
+              viewPosition: 0,
+              animated: true,
+            });
+          }
+        }, 400);
+      }
+    } catch (error) {
+      console.error('Error scrolling to last section:', error);
+    }
+  }, [messageSections]);
+
+  const handleScrollToIndexFailed = (info: {
+    index: number;
+    highestMeasuredFrameIndex: number;
+    averageItemLength: number;
+  }) => {
+    console.warn('Scroll to index failed:', info);
+    // As a fallback, scroll to the last rendered item, which is a safer option.
+    try {
+      sectionListRef.current?.scrollToLocation({
+        sectionIndex: info.highestMeasuredFrameIndex,
+        itemIndex: 0,
+        viewPosition: 0,
+        animated: false,
+      });
+    } catch (error) {
+      console.log('Fallback scroll failed:', error);
+    }
+  };
+
+  const sendMessage = (messageBody: Omit<Message, 'sender' | 'timestamp'>) => {
+    if (!socketRef.current) return;
+    const fullMessage: Message = {
+      ...messageBody,
+      sender: 'user',
+      timestamp: Date.now(),
+      type: messageBody.type || 'text',
+    };
+    socketRef.current.emit(
+      'sendMessage',
+      {
+        organizeId: orgId,
+        channelId: channelId,
+        userId: userId,
+        message: fullMessage,
+      },
+      () => {
+        if (fullMessage.type === 'text') {
+          setInputText('');
+        }
+      }
+    );
+  };
+
+  const handleSendText = () => {
+    if (inputText.trim()) {
+      sendMessage({ type: 'text', text: inputText.trim() });
+    }
+  };
+
+  const handleSelectFile = async () => {
+    try {
+      const result = await pick({
+        type: [types.images, types.doc, types.pdf],
+        allowMultiSelection: false,
+      });
+      setSelectedFile(result[0]);
+    } catch (err) {
+      if ((err as any)?.code !== 'DOCUMENT_PICKER_CANCELED') {
+        Alert.alert(
+          'File-Picker Error',
+          'An error occurred during file selection.'
+        );
+      }
+    }
+  };
+
+  const handleCancelUpload = () => {
+    setSelectedFile(null);
+  };
+
+  const handleConfirmUpload = async () => {
+    if (!selectedFile) return;
+    try {
+      const fileUrl = await uploadFile(selectedFile, orgId, channelId);
+      const type = selectedFile.type?.startsWith('image/') ? 'image' : 'file';
+      sendMessage({
+        type,
+        fileName: selectedFile.name || 'file',
+        url: fileUrl,
+      });
+    } catch (error) {
+      Alert.alert('Upload Error', 'Failed to upload the file.');
+      console.error('Upload failed', error);
+    } finally {
+      setSelectedFile(null);
+    }
+  };
+
+  const formatTimestamp = (timestamp: number) => {
+    const now = Date.now();
+    const messageTime = new Date(timestamp).getTime();
+    const differenceInSeconds = (now - messageTime) / 1000;
+
+    if (differenceInSeconds < 60) {
+      return 'Just now';
+    }
+
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+  };
+
+  const renderMessage = ({ item }: { item: Message }) => {
+    const handleFilePress = () => {
+      if (item.url) {
+        Linking.openURL(item.url).catch((err) => {
+          console.log('Failed to open URL:', err);
+          // Alert.alert('Cannot open file');
+        });
+      }
+    };
+
+    return (
+      <View
+        style={[
+          styles.messageRow,
+          item.sender === 'user' ? styles.userRow : styles.agentRow,
+        ]}
+      >
+        {item.sender === 'agent' && styleSettings?.styles?.styleLogoUrl && (
+          <Image
+            source={{ uri: styleSettings.styles.styleLogoUrl }}
+            style={styles.avatar}
+          />
+        )}
+        <View
+          style={
+            item.sender === 'agent'
+              ? styles.messageAgentContainer
+              : styles.messageContainer
+          }
+        >
+          <Text style={styles.timestampText}>
+            {formatTimestamp(item.timestamp)}
+          </Text>
+          <View
+            style={[
+              styles.messageBubble,
+              item.sender === 'user' ? styles.userBubble : styles.agentBubble,
+            ]}
+          >
+            {item.type === 'text' && (
+              <Text
+                style={
+                  item.sender === 'user'
+                    ? styles.customerChatText
+                    : styles.agentChatText
+                }
+              >
+                {item.text}
+              </Text>
+            )}
+            {item.type === 'image' && (
+              <Image
+                source={{ uri: item.url }}
+                style={styles.imageMessage}
+                resizeMode="cover"
+              />
+            )}
+            {item.type === 'file' && (
+              <TouchableOpacity onPress={handleFilePress}>
+                <Text
+                  style={[
+                    styles.fileLink,
+                    item.sender === 'user'
+                      ? styles.customerChatText
+                      : styles.agentChatText,
+                  ]}
+                >
+                  {item.fileName}
+                </Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  if (loading) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size="large" color={'#3761DF'} />
+      </View>
+    );
+  }
+
+  // const agentProfile = {
+  //   name: styleSettings?.name,
+  //   avatarUrl: styleSettings?.styleLogoUrl,
+  // };
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.header}>
+        <View style={styles.headerProfile}>
+          {styleSettings?.styles?.styleLogoUrl && (
+            <Image
+              source={{ uri: styleSettings.styles.styleLogoUrl }}
+              style={styles.headerAvatar}
+            />
+          )}
+          <Text style={styles.headerTitle}>
+            {styleSettings?.styles.name || 'Live Chat'}
+          </Text>
+        </View>
+        <TouchableOpacity onPress={onClose}>
+          <Text style={styles.closeButtonText}>✕</Text>
+        </TouchableOpacity>
+      </View>
+      <KeyboardAvoidingView style={styles.container}>
+        {chatPhase === 'pre-chat' ? (
+          <PreChatForm
+            onSubmit={() => setChatPhase('chatting')}
+            // agentProfile={agentProfile}
+            // styles={styles}
+            headerColor={styleSettings?.styles?.styleHeadColor}
+          />
+        ) : (
+          <>
+            <SectionList
+              ref={sectionListRef}
+              sections={messageSections}
+              renderItem={renderMessage}
+              renderSectionHeader={({ section: { title } }) => (
+                <View style={styles.datePartition}>
+                  <Text style={styles.datePartitionText}>{title}</Text>
+                </View>
+              )}
+              keyExtractor={(item) => item.timestamp.toString()}
+              style={styles.messageList}
+              onScrollToIndexFailed={handleScrollToIndexFailed}
+            />
+            <View style={styles.inputContainer}>
+              {selectedFile ? (
+                <View style={styles.uploadPreviewContainer}>
+                  <View style={styles.fileInfoContainer}>
+                    <Text style={{ fontSize: 20 }}>📎</Text>
+                    <Text style={styles.fileNameText} numberOfLines={1}>
+                      {selectedFile.name}
+                    </Text>
+                  </View>
+                  <View style={styles.buttonRow}>
+                    <TouchableOpacity
+                      style={[styles.actionButton, styles.uploadButton]}
+                      onPress={handleConfirmUpload}
+                    >
+                      <Text style={styles.uploadButtonText}>Upload a file</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      style={[styles.actionButton, styles.cancelButton]}
+                      onPress={handleCancelUpload}
+                    >
+                      <Text style={styles.cancelButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              ) : (
+                <View style={styles.normalInputContainer}>
+                  <TouchableOpacity
+                    onPress={handleSelectFile}
+                    style={styles.attachmentButton}
+                  >
+                    <View style={styles.plusIconContainer}>
+                      <View
+                        style={[
+                          styles.plusIconBar,
+                          styles.plusIconBarHorizontal,
+                        ]}
+                      />
+                      <View
+                        style={[styles.plusIconBar, styles.plusIconBarVertical]}
+                      />
+                    </View>
+                  </TouchableOpacity>
+                  <TextInput
+                    style={styles.input}
+                    value={inputText}
+                    onChangeText={setInputText}
+                    placeholder="Enter a message..."
+                    placeholderTextColor="#9E9E9E"
+                  />
+                  <TouchableOpacity
+                    onPress={handleSendText}
+                    style={styles.sendButton}
+                  >
+                    <SendIcon
+                      size={22}
+                      color={styleSettings?.styles?.styleTextColor || '#FFFFFF'}
+                    />
+                  </TouchableOpacity>
+                </View>
+              )}
+            </View>
+          </>
+        )}
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const getDynamicStyles = (settingStyle: any = {}) => {
+  const screenWidth = Dimensions.get('window').width;
+  // const screenHeight = Dimensions.get('window').height;
+  return StyleSheet.create({
+    safeArea: {
+      flex: 1,
+      backgroundColor: '#FFFFFF',
+      // padding: 12,
+    },
+    container: { flex: 1, backgroundColor: '#F4F7FC' },
+    centered: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+      paddingTop: Platform.OS === 'android' ? 15 : 15,
+    },
+    headerProfile: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    headerAvatar: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      marginRight: 10,
+    },
+    headerTitle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: settingStyle?.styleTextColor || '#FFFFFF',
+    },
+    closeButtonText: {
+      fontSize: 20,
+      color: settingStyle?.styleTextColor || '#FFFFFF',
+      fontWeight: 'bold',
+    },
+    messageList: { flex: 1, paddingHorizontal: 10 },
+    messageRow: {
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      marginVertical: 5,
+    },
+    agentRow: { justifyContent: 'flex-start' },
+    userRow: { justifyContent: 'flex-end' },
+    messageContainer: {
+      maxWidth: '80%',
+      alignItems: 'flex-start',
+      flexDirection: 'row',
+      // marginBottom: 10,
+    },
+    messageAgentContainer: {
+      maxWidth: '80%',
+      alignItems: 'flex-start',
+      flexDirection: 'row-reverse',
+      marginVertical: 0,
+    },
+    avatar: { width: 36, height: 36, borderRadius: 20, marginRight: 8 },
+    messageBubble: {
+      paddingHorizontal: 8,
+      paddingVertical: 8,
+      borderRadius: 12,
+      // width: '80%',
+    },
+    agentBubble: {
+      backgroundColor: settingStyle.styleAgentColor || '#E0E0E0',
+    },
+    userBubble: {
+      backgroundColor: settingStyle.styleCustomerColor || '#E0E0E0',
+    },
+    customerChatText: {
+      color: settingStyle.styleCustomerTextColor || '#000000',
+    },
+    agentChatText: {
+      color: settingStyle.styleAgentTextColor || '#000000',
+    },
+    fileLink: {
+      textDecorationLine: 'underline',
+      elevation: 4,
+      width: screenWidth * 0.6,
+    },
+    timestampText: {
+      fontSize: 12,
+      color: '#888',
+      marginTop: 5,
+      alignSelf: 'flex-end',
+      marginHorizontal: 8,
+    },
+    datePartition: {
+      alignSelf: 'center',
+      backgroundColor: 'rgb(244, 243, 244)',
+      borderRadius: 16,
+      paddingVertical: 5,
+      paddingHorizontal: 12,
+      marginVertical: 15,
+    },
+    datePartitionText: {
+      color: 'rgb(130, 135, 143)',
+      fontSize: 12,
+      fontWeight: '600',
+    },
+    inputContainer: {
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+      borderTopWidth: 1,
+      borderTopColor: '#E0E0E0',
+      backgroundColor: 'white',
+    },
+    normalInputContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    input: {
+      flex: 1,
+      height: 42,
+      backgroundColor: '#F0F0F0',
+      borderRadius: 22.5,
+      paddingHorizontal: 15,
+      fontSize: 16,
+      marginHorizontal: 10,
+    },
+    attachmentButton: { padding: 5 },
+    sendButton: {
+      paddingRight: 3,
+      paddingTop: 2,
+      width: 42,
+      height: 42,
+      borderRadius: 24,
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    uploadPreviewContainer: {
+      alignItems: 'center',
+    },
+    fileInfoContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#F0F0F0',
+      borderRadius: 22.5,
+      paddingHorizontal: 15,
+      paddingVertical: 12,
+      width: '100%',
+    },
+    fileNameText: {
+      flex: 1,
+      marginLeft: 10,
+      fontSize: 16,
+      color: '#333',
+    },
+    buttonRow: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      marginTop: 10,
+      width: '100%',
+    },
+    actionButton: {
+      flex: 1,
+      paddingVertical: 10,
+      borderRadius: 8,
+      alignItems: 'center',
+      marginHorizontal: 5,
+    },
+    uploadButton: {
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
+    },
+    uploadButtonText: {
+      color: settingStyle?.styleTextColor || '#FFFFFF',
+      fontWeight: 'bold',
+      fontSize: 16,
+    },
+    cancelButton: {
+      backgroundColor: '#E0E0E0',
+    },
+    cancelButtonText: {
+      color: '#333',
+      fontWeight: 'bold',
+      fontSize: 16,
+    },
+    plusIconContainer: {
+      width: 24,
+      height: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    plusIconBar: {
+      position: 'absolute',
+      backgroundColor: '#8A8A8A',
+    },
+    plusIconBarHorizontal: {
+      width: 20,
+      height: 2,
+      borderRadius: 1,
+    },
+    plusIconBarVertical: {
+      width: 2,
+      height: 20,
+      borderRadius: 1,
+    },
+    imageMessage: {
+      width: 200,
+      height: 200,
+      borderRadius: 10,
+    },
+    formContainer: {
+      // flex: 1,
+      backgroundColor:
+        hexToRgba(settingStyle?.styleHeadColor, '0.5') ||
+        hexToRgba('#3761DF', '0.5'),
+      // opacity: 0.5,
+      padding: 14,
+      margin: 14,
+      borderRadius: 6,
+    },
+    formWelcomeText: {
+      fontSize: 16,
+      color: '#2D3335',
+      marginBottom: 20,
+      borderRadius: 10,
+    },
+    formInputContainer: {
+      marginBottom: 15,
+    },
+    formLabel: {
+      fontSize: 14,
+      color: '#2D3335',
+      marginBottom: 5,
+      fontWeight: '600',
+    },
+    formInput: {
+      borderWidth: 1,
+      borderColor: '#ccc',
+      backgroundColor: '#fff',
+      color: '#2D3335',
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 16,
+    },
+    consentContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginHorizontal: 14,
+    },
+    consentText: {
+      marginLeft: 2,
+      fontSize: 14,
+      color: '#333',
+    },
+    consentLink: {
+      color: '#3761DF',
+      textDecorationLine: 'underline',
+    },
+
+    checkboxChecked: {
+      width: 14,
+      height: 14,
+      backgroundColor: settingStyle?.styleHeadColor || '#3761DF',
+    },
+    formFooter: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      padding: 16,
+      backgroundColor: 'white',
+    },
+    startButton: {
+      padding: 12,
+      borderRadius: 12,
+      alignItems: 'center',
+    },
+    startButtonText: {
+      color: 'white',
+      fontSize: 16,
+      // fontWeight: 'bold',
+    },
+    checkboxBase: {
+      width: 20,
+      height: 20,
+      borderWidth: 2,
+      borderColor: '#3761DF',
+      borderRadius: 4,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 3,
+    },
+    checkmark: {
+      color: '#fff',
+      fontSize: 12,
+      fontWeight: 'bold',
+    },
+  });
+};