dhre-ui-kit 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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/OutOfOffice/OurOffices.tsx

@@ -0,0 +1,91 @@
+import React, {ReactElement} from 'react';
+import {TouchableOpacity, View, StyleSheet, ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import CustomText from '../customText';
+import {withThemeProvider} from '../../theme/withThemeProvider';
+import {useTheme} from 'src/theme/ThemeContext';
+
+interface OurOfficesButtonProps {
+  leftIcon?: ReactElement<SvgProps>;
+  rightIcon?: ReactElement<SvgProps>;
+  onPress: () => void;
+  title: string;
+  description: string;
+  containerStyle?: ViewStyle;
+  titleVariant?: string;
+  descriptionVariant?: string;
+  titleColor?: string;
+  descriptionColor?: string;
+}
+
+const OurOfficesButton = ({
+  leftIcon,
+  rightIcon,
+  onPress,
+  title,
+  description,
+  containerStyle,
+  titleVariant = 'L1_REGULAR',
+  descriptionVariant = 'L1_REGULAR',
+  titleColor = 'CONTENT_PRIMARY',
+  descriptionColor = 'CONTENT_SECONDARY',
+}: OurOfficesButtonProps) => {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        {backgroundColor: theme['SURFACE_SECONDARY']},
+        containerStyle,
+      ]}
+      onPress={onPress}>
+      {leftIcon && (
+        <View style={styles.iconContainer}>{React.cloneElement(leftIcon)}</View>
+      )}
+      <View style={styles.textContainer}>
+        <CustomText
+          text={title}
+          variant={titleVariant}
+          textColor={titleColor}
+          style={styles.textView}
+        />
+        <CustomText
+          text={description}
+          variant={descriptionVariant}
+          textColor={descriptionColor}
+          style={styles.flexWrap}
+        />
+      </View>
+      {rightIcon && (
+        <View style={styles.rightIconContainer}>
+          {React.cloneElement(rightIcon)}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  iconContainer: {
+    marginHorizontal: 16,
+  },
+  textContainer: {
+    flex: 1,
+    padding: 10,
+    borderRadius: 4,
+  },
+  rightIconContainer: {
+    marginLeft: 10,
+    position: 'absolute',
+    right: 10,
+  },
+  textView: {marginBottom: 4},
+  flexWrap: {flexWrap: 'wrap'},
+});
+
+export default withThemeProvider(OurOfficesButton);

package/src/components/OutOfOffice/index.ts

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

package/src/components/button/Button.tsx

@@ -49,7 +49,7 @@ const CustomButton = ({
       <CustomText
         text={title}
         variant={titleVariant}
-        style={[textStyle, {color: '#A7A7A7'}]}
+        style={[{color: '#A7A7A7'}, textStyle]}
         textColor={titleColor}
       />
 

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,7 @@ 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 {default as OurOfficesButton} from './components/OutOfOffice';
 
 export * from './utils/stylehelper';