@networkinternational/ni-card-management-sdk 2.0.0 → 2.1.0

package/src/components/FeedbackPopup/FeedbackPopup.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { themeType } from '../../interfaces/NiInputInterfaces';
+import type { NIErrorResponse } from '../../interfaces/NiCardManagementInterfaces';
+import { themeColors } from '../../config/themeColors';
+import localLabels from '../../utils/localization';
+
+interface FeedbackPopupProps {
+  error?: NIErrorResponse | null;
+  isLoading: boolean;
+  isSuccess: boolean;
+  successMessage: string;
+  theme: themeType;
+  language: string;
+}
+
+export function FeedbackPopup({
+  error,
+  isLoading,
+  isSuccess,
+  successMessage,
+  theme,
+  language,
+}: FeedbackPopupProps): JSX.Element {
+  const [isVisible, setIsVisible] = useState(false);
+  const labels = localLabels(language);
+  const isError = !!error;
+
+  useEffect(() => {
+    if (isLoading) {
+      setIsVisible(false);
+    } else if (error || isSuccess) {
+      setIsVisible(true);
+    }
+  }, [error, isLoading, isSuccess]);
+
+  const colors = themeColors[theme];
+
+  return (
+    <Modal
+      animationType="fade"
+      onRequestClose={() => setIsVisible(false)}
+      transparent={true}
+      visible={isVisible}
+    >
+      <View style={styles.backdrop}>
+        <View
+          accessibilityRole="alert"
+          style={[styles.popup, { backgroundColor: colors.background }]}
+        >
+          <Text style={[styles.title, isError ? styles.error : styles.success]}>
+            {isError ? labels.errorTitle : labels.successTitle}
+          </Text>
+          <Text style={[styles.message, { color: colors.color }]}>
+            {error?.message || successMessage}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setIsVisible(false)}
+            style={styles.button}
+          >
+            <Text style={styles.buttonText}>{labels.ok}</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.45)',
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+  },
+  popup: {
+    borderRadius: 8,
+    maxWidth: 420,
+    padding: 24,
+    width: '100%',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  error: {
+    color: '#C62828',
+  },
+  success: {
+    color: '#2E7D32',
+  },
+  message: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginBottom: 24,
+    textAlign: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: '#202124',
+    borderRadius: 6,
+    minWidth: 96,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/config/localization.ts

@@ -12,6 +12,11 @@ const english = {
   setPinButtonLabel: 'Set PIN',
   changePinButtonLabel: 'Change PIN',
   copiedToClipboard: 'Copied to clipboard',
+  successTitle: 'Success',
+  errorTitle: 'Error',
+  ok: 'OK',
+  cardDetailsSuccess: 'Card details retrieved successfully.',
+  viewPinSuccess: 'PIN retrieved successfully.',
   viewPinCountdownLabel: (count: number) =>
     'PIN will be hidden in ' + count + ' seconds',
   show: 'Show',
@@ -33,6 +38,11 @@ const arabic = {
   setPinButtonLabel: 'تعيين الرقم السري',
   changePinButtonLabel: '\u200Eتغيير الرقم السري (PIN)',
   copiedToClipboard: 'تم النسخ إلى الحافظة',
+  successTitle: 'تم بنجاح',
+  errorTitle: 'خطأ',
+  ok: 'حسنًا',
+  cardDetailsSuccess: 'تم استرداد تفاصيل البطاقة بنجاح.',
+  viewPinSuccess: 'تم استرداد الرقم السري بنجاح.',
   viewPinCountdownLabel: (count: number) =>
     '\u200Eثواني\u200E ' + count + '\u200E سيتم إخفاء الرقم السري للبطاقة خلال',
   show: '\u200Eعرض',