@zezosoft/zezo-ott-react-native-ui-kit 1.0.2 → 1.0.3

package/src/components/Account/Account.tsx

@@ -3,8 +3,13 @@
  * @lastModified Mon 21 Jul 2025 at 12:35 PM
  */
 
-import React, { cloneElement, isValidElement, memo, type ReactElement } from 'react';
-import { View, StyleSheet, ScrollView, TouchableOpacity, type TextStyle } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  type TextStyle,
+} from 'react-native';
 import { ChevronRight, Trash2 } from 'lucide-react-native';
 import { useTheme } from '../../theme/hook/useTheme';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
@@ -16,6 +21,7 @@ import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { AppTheme, ITheme } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import { cloneElement, isValidElement, memo, type ReactElement } from 'react';
 
 type CardItem = {
   type: 'card';
@@ -70,17 +76,29 @@ export type AccountProps = {
 };
 
 const isInvalidText = (val?: string | null): boolean =>
-  !val || val.trim() === '' || val.includes('undefined') || val.includes('Invalid');
+  !val ||
+  val.trim() === '' ||
+  val.includes('undefined') ||
+  val.includes('Invalid');
 
-const renderIconWithColor = (icon: React.ReactNode, color: string): React.ReactNode => {
+const renderIconWithColor = (
+  icon: React.ReactNode,
+  color: string
+): React.ReactNode => {
   if (isValidElement(icon)) {
     return cloneElement(icon as ReactElement<any>, { color });
   }
   return icon;
 };
 
-const getValidSectionItems = (items: AccountSectionItem[]): AccountSectionItem[] =>
-  items.filter((item) => (item.type === 'card' ? !isInvalidText(item.title) || !isInvalidText(item.subtitle) : true));
+const getValidSectionItems = (
+  items: AccountSectionItem[]
+): AccountSectionItem[] =>
+  items.filter((item) =>
+    item.type === 'card'
+      ? !isInvalidText(item.title) || !isInvalidText(item.subtitle)
+      : true
+  );
 
 export const Account: React.FC<AccountProps> = ({
   title = 'Account',
@@ -98,17 +116,25 @@ export const Account: React.FC<AccountProps> = ({
   deleteAccountText = 'Delete Account',
   deleteAccountIcon,
   onHelpPress,
-  onDeleteAccountPress
+  onDeleteAccountPress,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const insets = useSafeAreaInsets();
 
   return (
-    <View style={[styles.container, { backgroundColor: appliedTheme.colors.background }]}>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: appliedTheme.colors.background },
+      ]}
+    >
       <AppHeader onBackPress={onBackPress} title={title} theme={appliedTheme} />
 
       <ScrollView
-        contentContainerStyle={[styles.content, { paddingBottom: insets.bottom + verticalScale(40) }]}
+        contentContainerStyle={[
+          styles.content,
+          { paddingBottom: insets.bottom + verticalScale(40) },
+        ]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
       >
@@ -128,13 +154,28 @@ export const Account: React.FC<AccountProps> = ({
 
           return (
             <View key={sectionTitle} style={styles.sectionBlock}>
-              <Text style={[styles.sectionTitle, { color: appliedTheme.colors.textSecondary }]}>{sectionTitle}</Text>
+              <Text
+                style={[
+                  styles.sectionTitle,
+                  { color: appliedTheme.colors.textSecondary },
+                ]}
+              >
+                {sectionTitle}
+              </Text>
 
               {validItems.map((item, index) =>
                 item.type === 'card' ? (
-                  <CardItemView key={`card-${index}`} {...item} theme={appliedTheme} />
+                  <CardItemView
+                    key={`card-${index}`}
+                    {...item}
+                    theme={appliedTheme}
+                  />
                 ) : (
-                  <MenuItemView key={`row-${index}`} {...item} theme={appliedTheme} />
+                  <MenuItemView
+                    key={`row-${index}`}
+                    {...item}
+                    theme={appliedTheme}
+                  />
                 )
               )}
             </View>
@@ -148,13 +189,17 @@ export const Account: React.FC<AccountProps> = ({
                 onPress={onDeleteAccountPress}
                 style={{
                   fontWeight: '500',
-                  color: appliedTheme.colors.error
+                  color: appliedTheme.colors.error,
                 }}
                 title={deleteAccountText}
                 underline
                 leftIcon={
                   deleteAccountIcon ?? (
-                    <Trash2 size={18} color={appliedTheme.colors.error} style={{ marginRight: scale(4) }} />
+                    <Trash2
+                      size={18}
+                      color={appliedTheme.colors.error}
+                      style={{ marginRight: scale(4) }}
+                    />
                   )
                 }
               />
@@ -162,13 +207,20 @@ export const Account: React.FC<AccountProps> = ({
 
             {(helpText || clickableText) && (
               <View style={styles.helpSubContainer}>
-                <Text style={[styles.helpText, { color: appliedTheme.colors.textSecondary }]}>{helpText}</Text>
+                <Text
+                  style={[
+                    styles.helpText,
+                    { color: appliedTheme.colors.textSecondary },
+                  ]}
+                >
+                  {helpText}
+                </Text>
                 {clickableText && (
                   <TextButton
                     onPress={() => onHelpPress?.()}
                     style={{
                       fontWeight: '500',
-                      color: appliedTheme.colors.primary
+                      color: appliedTheme.colors.primary,
                     }}
                     title={clickableText}
                     underline
@@ -183,68 +235,94 @@ export const Account: React.FC<AccountProps> = ({
   );
 };
 
-const CardItemView = memo(({ title, subtitle, theme }: CardItem & { theme: ITheme }) => {
-  if (isInvalidText(title) && isInvalidText(subtitle)) return null;
-
-  return (
-    <View style={[styles.card, { backgroundColor: theme.colors.surfaceDisabled }]}>
-      {!isInvalidText(title) && <Text style={[styles.cardTitle, { color: theme.colors.textPrimary }]}>{title}</Text>}
-      {!isInvalidText(subtitle) && (
-        <Text style={[styles.cardSub, { color: theme.colors.textSecondary }]}>{subtitle}</Text>
-      )}
-    </View>
-  );
-});
+const CardItemView = memo(
+  ({ title, subtitle, theme }: CardItem & { theme: ITheme }) => {
+    if (isInvalidText(title) && isInvalidText(subtitle)) return null;
 
-const MenuItemView = memo(({ label, leftIcon, showRightIcon, onPress, theme }: RowItem & { theme: ITheme }) => {
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      activeOpacity={0.6}
-      style={[
-        styles.row,
-        {
-          backgroundColor: theme.colors.surfaceDisabled,
-          borderColor: theme.colors.border
-        }
-      ]}
-    >
-      <View style={styles.leftRow}>
-        {leftIcon && <View style={styles.menuIcon}>{renderIconWithColor(leftIcon, theme.colors.textPrimary)}</View>}
-        <Text style={[styles.rowText, { color: theme.colors.textPrimary }]}>{label}</Text>
+    return (
+      <View
+        style={[styles.card, { backgroundColor: theme.colors.surfaceDisabled }]}
+      >
+        {!isInvalidText(title) && (
+          <Text style={[styles.cardTitle, { color: theme.colors.textPrimary }]}>
+            {title}
+          </Text>
+        )}
+        {!isInvalidText(subtitle) && (
+          <Text style={[styles.cardSub, { color: theme.colors.textSecondary }]}>
+            {subtitle}
+          </Text>
+        )}
       </View>
+    );
+  }
+);
 
-      {showRightIcon && <ChevronRight color={theme.colors.textSecondary} size={20} />}
-    </TouchableOpacity>
-  );
-});
+const MenuItemView = memo(
+  ({
+    label,
+    leftIcon,
+    showRightIcon,
+    onPress,
+    theme,
+  }: RowItem & { theme: ITheme }) => {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        activeOpacity={0.6}
+        style={[
+          styles.row,
+          {
+            backgroundColor: theme.colors.surfaceDisabled,
+            borderColor: theme.colors.border,
+          },
+        ]}
+      >
+        <View style={styles.leftRow}>
+          {leftIcon && (
+            <View style={styles.menuIcon}>
+              {renderIconWithColor(leftIcon, theme.colors.textPrimary)}
+            </View>
+          )}
+          <Text style={[styles.rowText, { color: theme.colors.textPrimary }]}>
+            {label}
+          </Text>
+        </View>
+
+        {showRightIcon && (
+          <ChevronRight color={theme.colors.textSecondary} size={20} />
+        )}
+      </TouchableOpacity>
+    );
+  }
+);
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
   content: { paddingHorizontal: moderateScale(16) },
 
   sectionBlock: {
-    marginBottom: verticalScale(16)
+    marginBottom: verticalScale(16),
   },
   sectionTitle: {
     fontSize: RFValue(11),
     fontWeight: '500',
     marginBottom: verticalScale(8),
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
   },
 
   card: {
     borderRadius: scale(8),
     padding: moderateScale(16),
-    marginBottom: verticalScale(12)
+    marginBottom: verticalScale(12),
   },
   cardTitle: {
     fontSize: RFValue(12),
     fontWeight: '600',
-    marginBottom: verticalScale(4)
+    marginBottom: verticalScale(4),
   },
   cardSub: {
-    fontSize: RFValue(10)
+    fontSize: RFValue(10),
   },
 
   row: {
@@ -255,35 +333,35 @@ const styles = StyleSheet.create({
     marginBottom: verticalScale(12),
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   leftRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    flexShrink: 1
+    flexShrink: 1,
   },
   menuIcon: {
     marginRight: scale(8),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   rowText: {
     fontSize: RFValue(12),
-    fontWeight: '500'
+    fontWeight: '500',
   },
 
   bottomBlock: {
     marginTop: verticalScale(32),
     alignItems: 'center',
     justifyContent: 'center',
-    gap: verticalScale(8)
+    gap: verticalScale(8),
   },
   helpSubContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: scale(1)
+    gap: scale(1),
   },
   helpText: {
-    fontSize: RFValue(10)
-  }
+    fontSize: RFValue(10),
+  },
 });

package/src/components/Alert/UAAlert.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { Modal, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
+import { scale } from 'react-native-size-matters';
+import type { AppTheme } from '../../theme';
+
+interface IProps {
+  theme: AppTheme;
+  visible: boolean;
+  title?: string;
+  message?: string;
+  confirmationText?: string;
+  rejectText?: string;
+  resolveText?: string;
+  onPress: (e: 'reject' | 'resolve') => void;
+  onRequestClose?: () => void;
+}
+
+export const UAAlert: React.FC<IProps> = ({
+  theme,
+  visible,
+  title = 'Maturity Rating: 18+',
+  message = 'May contain non-explicit sexual behavior, nudity, violence, strong language, substances.',
+  confirmationText = 'I confirm that I am 18 years and above.',
+  rejectText = 'No',
+  resolveText = 'Yes',
+  onPress,
+  onRequestClose,
+}): React.ReactElement => {
+  return (
+    <Modal
+      animationType="fade"
+      transparent
+      visible={visible}
+      onRequestClose={onRequestClose ?? (() => onPress('reject'))}
+    >
+      <View style={styles.overlay}>
+        <View
+          style={[
+            styles.container,
+            { backgroundColor: theme?.colors?.surface ?? '#fff' },
+          ]}
+        >
+          {/* Title */}
+          <Text style={[styles.title, { color: theme?.colors?.textPrimary }]}>
+            {title}
+          </Text>
+
+          {/* Message */}
+          <Text
+            style={[styles.message, { color: theme?.colors?.textSecondary }]}
+          >
+            {message}
+          </Text>
+
+          {/* Confirmation Note */}
+          {confirmationText ? (
+            <Text
+              style={[
+                styles.confirmation,
+                { color: theme?.colors?.textSecondary },
+              ]}
+            >
+              {confirmationText}
+            </Text>
+          ) : null}
+
+          {/* Divider */}
+          <View style={[styles.divider, { backgroundColor: '#ccc' }]} />
+
+          {/* Buttons */}
+          <View style={styles.buttonRow}>
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => onPress('reject')}
+              style={[
+                styles.button,
+                {
+                  backgroundColor: 'rgba(255, 255, 255, 0.97)',
+                },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.buttonText,
+                  { color: theme?.colors?.black ?? '#000' },
+                ]}
+              >
+                {rejectText}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              activeOpacity={0.8}
+              onPress={() => onPress('resolve')}
+              style={[
+                styles.button,
+                { backgroundColor: theme?.colors?.primary },
+              ]}
+            >
+              <Text
+                style={[
+                  styles.buttonText,
+                  { color: theme?.colors?.black ?? '#000' },
+                ]}
+              >
+                {resolveText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.6)', // ✅ lighter backdrop for light mode
+  },
+  container: {
+    width: '80%',
+    padding: scale(20),
+    borderRadius: scale(20),
+    elevation: 5, // ✅ shadow on Android
+    shadowColor: '#000', // ✅ shadow on iOS
+    shadowOpacity: 0.2,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+  },
+  title: {
+    fontSize: scale(18),
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: scale(13),
+    textAlign: 'center',
+    marginTop: scale(20),
+  },
+  confirmation: {
+    fontSize: scale(12.2),
+    textAlign: 'center',
+    marginTop: scale(20),
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    marginVertical: scale(12),
+    marginHorizontal: scale(18),
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: scale(10),
+  },
+  button: {
+    width: scale(100),
+    paddingVertical: scale(10),
+    borderRadius: scale(8),
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: scale(13),
+    fontWeight: '600',
+  },
+});

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export * from './UAAlert';

package/src/components/Auth/ForgotPassword/ForgotPassword.tsx

@@ -3,7 +3,14 @@
  * @lastModified Wed 18 Jun 2025 at 10:45 AM
  **/
 import React, { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, View, Platform, Alert, type ViewStyle, type TextStyle } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Platform,
+  Alert,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Input } from '../../Input/Input';
@@ -52,7 +59,11 @@ type ForgetPasswordProps = {
   text?: TextConfig;
   renderLogo?: () => React.ReactNode;
   renderForgetPasswordHeader?: () => React.ReactNode;
-  renderSubmitButton?: (props: { onPress: () => void; disabled: boolean; loading: boolean }) => React.ReactNode;
+  renderSubmitButton?: (props: {
+    onPress: () => void;
+    disabled: boolean;
+    loading: boolean;
+  }) => React.ReactNode;
   renderTopBackBtn?: (props: { onPress: () => void }) => React.ReactNode;
   renderBottomInfoText?: () => React.ReactNode;
 };
@@ -75,21 +86,21 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
     emailLabel: 'Email',
     emailPlaceholder: 'Enter your email',
     loadingSubmitBtnText: 'Processing...',
-    forgetPasswordButton: 'Send Reset Link'
+    forgetPasswordButton: 'Send Reset Link',
   },
   renderLogo,
   renderForgetPasswordHeader,
   renderSubmitButton,
   renderTopBackBtn,
-  renderBottomInfoText
+  renderBottomInfoText,
 }) => {
   const {
     control,
     handleSubmit,
-    formState: { errors, isValid, touchedFields }
+    formState: { errors, isValid, touchedFields },
   } = useForm<FormValues>({
     defaultValues: { email: '' },
-    mode: 'onChange'
+    mode: 'onChange',
   });
 
   const { theme: resolvedTheme } = useTheme(overrideTheme);
@@ -113,7 +124,8 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
   );
 
   const shouldRender = useMemo(
-    () => (condition?: boolean | unknown) => typeof condition === 'function' || !!condition,
+    () => (condition?: boolean | unknown) =>
+      typeof condition === 'function' || !!condition,
     []
   );
 
@@ -123,7 +135,9 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
     <BackgroundLayout
       backgroundImage={backgroundImage?.source}
       theme={resolvedTheme}
-      gradientSplitBackground={isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3}
+      gradientSplitBackground={
+        isKeyboardOpen ? (Platform.OS === 'ios' ? 0.19 : 0.14) : 0.3
+      }
     >
       <View style={[styles.container, containerStyle]}>
         {/* Top Back Button */}
@@ -131,23 +145,35 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
           <View style={styles.topBackBtnWrapper}>
             {renderTopBackBtn ? (
               renderTopBackBtn({
-                onPress: onTopBackBtnPress ?? (() => {})
+                onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn theme={resolvedTheme} style={topBackBtnStyle} onPress={onTopBackBtnPress} />
+              <BackBtn
+                theme={resolvedTheme}
+                style={topBackBtnStyle}
+                onPress={onTopBackBtnPress}
+              />
             )}
           </View>
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
             {/* Logo */}
-            {renderLogo ? renderLogo() : logoUri ? <Logo logoUri={logoUri} /> : null}
+            {renderLogo ? (
+              renderLogo()
+            ) : logoUri ? (
+              <Logo logoUri={logoUri} />
+            ) : null}
 
             {/* Title */}
             {renderForgetPasswordHeader ? (
               renderForgetPasswordHeader()
             ) : (
-              <Text style={[styles.title, titleStyle]} accessibilityRole="header" testID="title">
+              <Text
+                style={[styles.title, titleStyle]}
+                accessibilityRole="header"
+                testID="title"
+              >
                 {title}
               </Text>
             )}
@@ -161,8 +187,8 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                   required: 'Email is required',
                   pattern: {
                     value: /^\S+@\S+\.\S+$/,
-                    message: 'Enter a valid email address'
-                  }
+                    message: 'Enter a valid email address',
+                  },
                 }}
                 render={({ field: { onChange, onBlur, value } }) => (
                   <Input.One
@@ -193,7 +219,7 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                 renderSubmitButton({
                   onPress: handleSubmit(handleFormSubmit),
                   disabled: isSubmitDisabled || !isValid,
-                  loading: loadingSubmitBtn || isLoading
+                  loading: loadingSubmitBtn || isLoading,
                 })
               ) : (
                 <Button.Primary
@@ -213,7 +239,11 @@ const ForgetPassword: React.FC<ForgetPasswordProps> = ({
                 {renderBottomInfoText ? (
                   renderBottomInfoText()
                 ) : text.bottomInfoText ? (
-                  <Text style={styles.bottomInfo} accessibilityRole="text" testID="bottom-info-text">
+                  <Text
+                    style={styles.bottomInfo}
+                    accessibilityRole="text"
+                    testID="bottom-info-text"
+                  >
                     {text.bottomInfoText}
                   </Text>
                 ) : null}
@@ -236,38 +266,38 @@ const styles = StyleSheet.create({
     paddingTop: verticalScale(24),
     paddingBottom: verticalScale(32),
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   topBackBtnWrapper: {
     position: 'absolute',
     top: verticalScale(6),
     left: 0,
-    zIndex: 10
+    zIndex: 10,
   },
   centerContent: {
     flex: 1,
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: verticalScale(16)
+    gap: verticalScale(16),
   },
   title: {
     fontSize: RFValue(23),
     fontWeight: '700',
     marginTop: verticalScale(12),
     marginBottom: verticalScale(20),
-    textAlign: 'center'
+    textAlign: 'center',
   },
   form: {
     width: '100%',
     gap: verticalScale(14),
-    marginTop: verticalScale(8)
+    marginTop: verticalScale(8),
   },
   bottomInfo: {
     marginTop: verticalScale(15),
     fontSize: RFValue(10),
     fontWeight: '500',
     textAlign: 'center',
-    opacity: 0.7
-  }
+    opacity: 0.7,
+  },
 });