dhre-ui-kit 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/ContactModel/ContactModel.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  Modal,
+  Linking,
+  Platform,
+  Alert,
+} from 'react-native';
+import CustomText from '../customText';
+import Line from '../horizontalLine/Line';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+
+interface ContactModalProps {
+  phoneNumber: string;
+  visible: boolean;
+  onClose: () => void;
+  isMailOpen: boolean;
+}
+
+const ContactModal: React.FC<ContactModalProps> = ({
+  phoneNumber,
+  visible,
+  onClose,
+  isMailOpen,
+}) => {
+  const handleCall = () => {
+    if (Platform.OS === 'ios') {
+      Alert.alert('Phone calls are not supported on the iOS simulator.');
+    } else {
+      Linking.openURL(`tel:${phoneNumber}`);
+    }
+    onClose();
+  };
+
+  const handleOptionPress = (appName: string) => {
+    console.log(`Opening ${appName}`);
+    onClose();
+  };
+
+  const emailOptions = ['Mail', 'Gmail', 'Outlook'];
+  const renderEmailOptions = () => (
+    <>
+      <CustomText
+        style={styles.title}
+        text="Open email app"
+        variant="L2_REGULAR"
+      />
+      <CustomText
+        style={styles.subtitle}
+        text="Which app would you like to open?"
+        variant="L2_REGULAR"
+      />
+      {emailOptions.map(option => (
+        <React.Fragment key={option}>
+          <Line />
+          <Pressable
+            onPress={() => handleOptionPress(option)}
+            style={styles.optionButton}>
+            <CustomText
+              style={styles.optionText}
+              text={option}
+              variant="B3_BOLD"
+            />
+          </Pressable>
+        </React.Fragment>
+      ))}
+    </>
+  );
+
+  const renderContent = () => (
+    <>
+      <View style={styles.viewContainer}>
+        {isMailOpen ? (
+          renderEmailOptions()
+        ) : (
+          <Pressable onPress={handleCall} style={styles.optionButton}>
+            <CustomText
+              style={styles.optionText}
+              text={`Call ${phoneNumber}`}
+              variant="B3_BOLD"
+            />
+          </Pressable>
+        )}
+      </View>
+      <Pressable onPress={onClose} style={styles.cancelButton}>
+        <CustomText
+          style={styles.cancelText}
+          text="Cancel"
+          variant="B2_REGULAR"
+        />
+      </Pressable>
+    </>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Modal
+        animationType="slide"
+        transparent
+        visible={visible}
+        onRequestClose={onClose}>
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>{renderContent()}</View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, .7)',
+  },
+  modalContent: {
+    padding: 20,
+    width: '100%',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    borderRadius: 10,
+  },
+  viewContainer: {
+    width: '100%',
+    backgroundColor: '#1C1C1E',
+    borderRadius: 10,
+  },
+  cancelText: {
+    color: '#007AFF',
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 13,
+  },
+  subtitle: {
+    textAlign: 'center',
+    marginTop: 2,
+    marginBottom: 13,
+  },
+  optionButton: {
+    padding: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: 16,
+    color: '#007AFF',
+  },
+  cancelButton: {
+    marginTop: 10,
+    paddingVertical: 15,
+    alignItems: 'center',
+    borderRadius: 8,
+    backgroundColor: '#1C1C1E',
+    width: '100%',
+  },
+});
+
+export default withThemeProvider(ContactModal);

package/src/components/ContactModel/index.ts

@@ -0,0 +1 @@
+export {default} from './ContactModel';

package/src/components/horizontalLine/Line.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, StyleSheet, ViewStyle} from 'react-native';
 import {useTheme} from '../../theme/ThemeContext';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 const HorizontalLine = ({style}: {style?: ViewStyle}) => {
   const {theme} = useTheme();
@@ -22,4 +23,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default HorizontalLine;
+export default withThemeProvider(HorizontalLine);

package/src/components/topic/Topic.tsx

@@ -3,6 +3,7 @@ import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import {useTheme} from '../../theme/ThemeContext';
 import CustomText from '../customText';
+import {withThemeProvider} from '../../theme/withThemeProvider';
 
 interface OurOfficesButtonProps {
   rightIcon?: ReactElement<SvgProps>;
@@ -81,4 +82,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Topic;
+export default withThemeProvider(Topic);

package/src/index.ts

@@ -27,5 +27,6 @@ export {default as CustomIcon} from './components/customIcon';
 export {default as CustomLoader} from './components/customLoader';
 export {default as Line} from './components/horizontalLine';
 export {default as Topic} from './components/topic';
+export {default as ContactModel} from './components/ContactModel';
 
 export * from './utils/stylehelper';