@developer_tribe/react-native-comnyx 0.3.1 → 0.3.3

package/src/components/CustomAlert.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Modal, View, Image, TouchableOpacity } from 'react-native';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+import type { LocalizationKeys } from '../types/LocalizationKeys';
+import { ScaledSheet } from './ScaledSheet';
+
+interface CustomPopupProps {
+  isVisible: boolean;
+  onClose: () => void;
+  title: string;
+  buttonText?: keyof LocalizationKeys;
+  description?: string;
+  onCancelButton?: () => void;
+  onResendButton?: () => void;
+}
+
+const infoIcon = require('../assets/info-circle.png');
+
+function CustomPopup({
+  isVisible,
+  onClose,
+  title,
+  description,
+  onCancelButton,
+  onResendButton,
+  buttonText,
+}: CustomPopupProps) {
+  const themeColors = useThemeColors();
+
+  return (
+    <Modal visible={isVisible} transparent={true} onRequestClose={onClose}>
+      <View style={styles.overlay}>
+        <View
+          style={[styles.popup, { backgroundColor: themeColors.background }]}
+        >
+          <Image source={infoIcon} height={64} width={64} />
+          <AppText style={styles.title}>{title}</AppText>
+          <AppText style={[styles.description, { color: themeColors.navy }]}>
+            {description}
+          </AppText>
+          {onResendButton && (
+            <TouchableOpacity
+              style={[
+                styles.buttonUp,
+                { backgroundColor: themeColors.dark_background },
+              ]}
+              onPress={onResendButton}
+            >
+              <AppText
+                localization={'customer.form.resend' as keyof LocalizationKeys}
+                style={[styles.buttonText, { color: themeColors.light_text }]}
+              />
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            style={[
+              styles.buttonDown,
+              { borderColor: themeColors.dark_background },
+            ]}
+            onPress={onCancelButton}
+          >
+            <AppText
+              localization={buttonText as keyof LocalizationKeys}
+              style={[styles.buttonText, { color: themeColors.text }]}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = ScaledSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.60)',
+  },
+  popup: {
+    width: '80%',
+    borderRadius: '20@s',
+    overflow: 'hidden',
+    alignItems: 'center',
+    paddingVertical: '20@vs',
+  },
+  title: {
+    marginVertical: '16@vs',
+    fontWeight: 700,
+    fontSize: '16@vs',
+  },
+  description: {
+    marginBottom: '16@vs',
+    alignItems: 'center',
+    textAlign: 'center',
+    width: '85%',
+    fontWeight: 500,
+    fontSize: '16@vs',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: '16@vs',
+    fontWeight: '600',
+  },
+  buttonContainer: {
+    flexDirection: 'column',
+    width: '90%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonUp: {
+    borderRadius: '12@s',
+    width: '256@s',
+    height: '56@vs',
+    marginBottom: '16@vs',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonDown: {
+    backgroundColor: 'transparent',
+    borderRadius: '12@s',
+    width: '256@s',
+    height: '56@vs',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: '12@vs',
+    borderWidth: 1,
+  },
+});
+
+export default React.memo(CustomPopup);