@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/src/components/Auth/{OTP → Two/OTP}/OTP.tsx

@@ -15,20 +15,21 @@ import {
 } from 'react-native-confirmation-code-field';
 import { scale, verticalScale } from 'react-native-size-matters';
 
-import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import HideKeyboard from '../../Keyboard/HideKeyboard';
-import { useKeyboard } from '../../../hooks/useKeyboard';
-import BackBtn from '../../Button/BackBtn';
-import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
-import { Logo } from '../../Logo/Logo';
-import { Button } from '../../Button';
-import Display from '../../../utils/Display';
-import { Text } from '../../Text';
-import type { ThemeOverride } from '../../../theme/themes';
+import HideKeyboard from '../../../Keyboard/HideKeyboard';
+import { useKeyboard } from '../../../../hooks/useKeyboard';
+import BackBtn from '../../../Button/BackBtn';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import { Button } from '../../../Button';
+import Display from '../../../../utils/Display';
+import { Text } from '../../../Text';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import BackgroundLayoutOne from '../../../BackgroundLayout/BackgroundLayoutOne';
+import { MessageSquare } from 'lucide-react-native';
 
 type OTPProps = {
   title?: string;
+  countryCode?: string;
   onSubmit?: (values: { otp: string }) => Promise<void> | void;
   onTopBackBtnPress?: () => void;
   containerStyle?: ViewStyle;
@@ -42,7 +43,6 @@ type OTPProps = {
     resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
   };
   loading?: boolean;
-  logoUri?: string;
   theme?: ThemeOverride;
   otpDigitCount?: number;
   keyboardType?: KeyboardTypeOptions;
@@ -67,7 +67,6 @@ type OTPProps = {
   resendDisabledTime?: number;
 
   // Render Props
-  renderLogo?: () => React.ReactNode;
   renderSubmitButton?: (props: {
     onPress: () => void;
     disabled: boolean;
@@ -92,38 +91,35 @@ const DEFAULT_TEXT = {
   otpPlaceholder: '••••',
   submitButton: 'Verify OTP',
   loadingSubmitBtnText: 'Verifying...',
-  otpSentText: 'A One-Time OTP has been sent to',
+  otpSentText: 'A OTP has been sent to',
   resendOtpText: 'Resend OTP',
   resendOtpCountdownText: 'Resend OTP in',
 };
 
 const OTP: React.FC<OTPProps> = ({
-  title,
+  // title,
   onSubmit,
   onTopBackBtnPress,
   containerStyle,
-  titleStyle,
+  // titleStyle,
   formStyle,
   backBtnStyle,
-  backgroundImage,
   loading = false,
-  logoUri,
   theme: overrideTheme,
   otpDigitCount = 4,
   keyboardType = 'number-pad',
   phoneNumber,
+  countryCode = '91',
   enableAutoFill = true,
   autoSubmitOnFill = true,
   text = DEFAULT_TEXT,
   onResendOtp,
-  renderResendButton,
   resendDisabledTime = 30,
-  renderLogo,
   renderSubmitButton,
   renderBackButton,
-  renderOtpHeader,
+  // renderOtpHeader,
   renderOtpInput,
-  renderPhoneText,
+  // renderPhoneText,
   cellStyle,
   focusCellStyle,
 }) => {
@@ -149,12 +145,30 @@ const OTP: React.FC<OTPProps> = ({
           justifyContent: 'center',
           alignItems: 'center',
         },
+        header: {
+          alignItems: 'center',
+          gap: scale(8),
+        },
         topBackBtnWrapper: {
           position: 'absolute',
-          top: verticalScale(6),
-          left: 0,
+          top: verticalScale(5),
+          left: scale(10),
+          right: scale(16),
           zIndex: 10,
         },
+        headerRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: verticalScale(12),
+        },
+
+        headerTitle: {
+          fontSize: RFValue(20),
+          fontWeight: '400',
+          marginLeft: scale(55),
+          marginTop: verticalScale(20),
+          color: resolvedTheme.colors.textPrimary,
+        },
 
         centerContent: {
           flex: 1,
@@ -198,7 +212,7 @@ const OTP: React.FC<OTPProps> = ({
           fontSize: RFValue(26),
           fontWeight: '500',
           paddingTop: Platform.OS === 'ios' ? scale(9) : scale(7),
-          borderWidth: scale(1),
+          borderWidth: scale(0.5),
           borderRadius: scale(8),
           justifyContent: 'center',
           alignItems: 'center',
@@ -206,17 +220,40 @@ const OTP: React.FC<OTPProps> = ({
           alignSelf: 'center',
           overflow: 'hidden',
           color: resolvedTheme.colors.textPrimary,
-          borderColor: resolvedTheme.colors.outline,
+          borderColor: resolvedTheme.colors.textPrimary,
         },
         focusCell: {
           borderColor: resolvedTheme.colors.primary,
           backgroundColor: resolvedTheme.colors.surfaceVariant,
         },
+        otpInfoRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginTop: verticalScale(12),
+          flexWrap: 'wrap',
+        },
+        otpInfoText: {
+          fontSize: RFValue(12),
+          color: resolvedTheme.colors.onSurfaceVariant,
+          flexShrink: 0,
+        },
+        otpPhone: {
+          fontSize: RFValue(13),
+          fontWeight: '500',
+          marginLeft: scale(4),
+          color: resolvedTheme.colors.textPrimary,
+          flexShrink: 0,
+        },
+        resendRow: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: scale(6),
+        },
       }),
     [
       isKeyboardOpen,
       resolvedTheme.colors.onSurfaceVariant,
-      resolvedTheme.colors.outline,
       resolvedTheme.colors.primary,
       resolvedTheme.colors.surfaceVariant,
       resolvedTheme.colors.textPrimary,
@@ -290,19 +327,9 @@ const OTP: React.FC<OTPProps> = ({
     []
   );
 
-  // Memoize gradient split background
-  const gradientSplitBackground = useMemo(
-    () => (isKeyboardOpen ? 0.3 : 0.4),
-    [isKeyboardOpen]
-  );
   return (
-    <BackgroundLayout
-      theme={overrideTheme}
-      backgroundImage={backgroundImage?.source}
-      gradientSplitBackground={gradientSplitBackground}
-    >
+    <BackgroundLayoutOne>
       <View style={[styles.container, containerStyle]}>
-        {/* Top Back Button */}
         {shouldRender(renderBackButton || onTopBackBtnPress) && (
           <View style={styles.topBackBtnWrapper}>
             {renderBackButton ? (
@@ -310,47 +337,28 @@ const OTP: React.FC<OTPProps> = ({
                 onPress: onTopBackBtnPress ?? (() => {}),
               })
             ) : (
-              <BackBtn
-                theme={overrideTheme}
-                style={backBtnStyle}
-                onPress={onTopBackBtnPress}
-              />
+              <View style={styles.headerRow}>
+                <BackBtn
+                  theme={overrideTheme}
+                  style={backBtnStyle}
+                  onPress={onTopBackBtnPress}
+                />
+                <Text style={styles.headerTitle}>Verify OTP</Text>
+              </View>
             )}
           </View>
         )}
         <HideKeyboard>
           <View style={styles.centerContent}>
-            {renderLogo ? (
-              renderLogo()
-            ) : logoUri ? (
-              <Logo logoUri={logoUri} />
-            ) : null}
-
-            {renderOtpHeader ? (
-              renderOtpHeader()
-            ) : (
-              <Text style={[styles.title, titleStyle]}>{title}</Text>
+            {phoneNumber && (
+              <View style={styles.otpInfoRow}>
+                <Text style={styles.otpInfoText}>A OTP has been sent to</Text>
+                <Text style={styles.otpPhone}>
+                  +{countryCode} {phoneNumber.replace(/\D/g, '')}
+                </Text>
+              </View>
             )}
 
-            {phoneNumber &&
-              (renderPhoneText ? (
-                renderPhoneText(phoneNumber)
-              ) : (
-                <View style={styles.sentNumberContainer}>
-                  <Text style={styles.sentText}>{text?.otpSentText}</Text>
-                  <Text
-                    style={{
-                      fontWeight: '700',
-                      fontSize: RFValue(13),
-                      marginTop: verticalScale(4),
-                      color: resolvedTheme.colors.primary,
-                    }}
-                  >
-                    {phoneNumber}
-                  </Text>
-                </View>
-              ))}
-
             <View style={[styles.form, formStyle]}>
               {renderOtpInput ? (
                 renderOtpInput({
@@ -419,12 +427,16 @@ const OTP: React.FC<OTPProps> = ({
                 <View
                   style={{ alignItems: 'center', marginTop: verticalScale(10) }}
                 >
-                  {renderResendButton ? (
-                    renderResendButton({
-                      onPress: handleResendOtp,
-                      disabled: resendTimer > 0,
-                    })
-                  ) : (
+                  <View style={styles.resendRow}>
+                    <MessageSquare
+                      size={scale(14)}
+                      color={
+                        resendTimer > 0
+                          ? resolvedTheme.colors.onSurfaceVariant
+                          : resolvedTheme.colors.textPrimary
+                      }
+                    />
+
                     <Text
                       onPress={resendTimer <= 0 ? handleResendOtp : undefined}
                       style={{
@@ -432,22 +444,21 @@ const OTP: React.FC<OTPProps> = ({
                         color:
                           resendTimer > 0
                             ? resolvedTheme.colors.onSurfaceVariant
-                            : resolvedTheme.colors.primary,
-                        textAlign: 'center',
+                            : resolvedTheme.colors.textPrimary,
                       }}
                     >
                       {resendTimer > 0
                         ? `${text?.resendOtpCountdownText || DEFAULT_TEXT.resendOtpCountdownText} ${resendTimer}s`
                         : text?.resendOtpText || DEFAULT_TEXT.resendOtpText}
                     </Text>
-                  )}
+                  </View>
                 </View>
               )}
             </View>
           </View>
         </HideKeyboard>
       </View>
-    </BackgroundLayout>
+    </BackgroundLayoutOne>
   );
 };