@propel-nsl/propel-react-native-sdk 1.0.0

package/src/screens/MyProfile/styles.ts

@@ -0,0 +1,47 @@
+import {StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { VSCALE, SCALE, MSCALE } from '../../../src-app/constants/Scaling'; 
+import { Dimensions } from 'react-native';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  main: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  content: {
+    padding: SCALE(20),
+    flex: 1,
+  },
+  text: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: MSCALE(12),
+    fontWeight: '400',
+    color: '#6B7280',
+    width: '90%',
+  },
+  i_icon: {
+    height: VSCALE(16.5),
+    width: SCALE(16.5),
+    bottom: VSCALE(5),
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(10),
+  },
+  customButtonContainerStyle: {
+    paddingHorizontal: SCALE(20),
+    marginTop: VSCALE(80), 
+  },
+  footer: {
+  },
+  contentContainer: {
+    paddingBottom: screenHeight > 700 ? VSCALE(40) : VSCALE(50), 
+  }
+  
+});
+
+export default styles;
+

package/src/screens/NewDeliveryAddress/index.tsx

@@ -0,0 +1,360 @@
+import { View, Text, TextInput } from 'react-native';
+import React, { useEffect, useMemo } from 'react';
+import styles, { EXTRA_SCROLL_HEIGHT } from './styles';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { AppStackParamList } from '../../../src-app/types/navigation';
+import { RouteProp, useIsFocused, useRoute } from '@react-navigation/native';
+import { CustomButton } from '../../../src-app/components';
+import {
+  createAddressRequest,
+  updateAddressRequest,
+} from '../../../src-app/redux/authSlice';
+import { useAppDispatch } from '../../../src-app/hooks/useAppDispatch';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import { ADD_NEW_DELIVERY_ADDRESS, ADDRESS, CITY, EDIT_DELIVERY_ADDRESS, EMAIL_ID, FULL_NAME, LANDMARK, MOBILE_NUMBER, PINCODE, SAVE_AND_PROCEED, STATE, UPDATE_AND_PROCEED, FULL_NAME_LABEL, MOBILE_NUMBER_LABEL, EMAIL_ID_LABEL, ADDRESS_LABEL, LANDMARK_LABEL, CITY_LABEL, STATE_LABEL, PINCODE_LABEL, COUNTRY_INDIA, ADDRESS_LINE_PREFIX, ADDRESS_LANDMARK_PREFIX, BILLING_ADDRESS } from '../../../src-app/constants/Messages';
+import { extractLineAndLandmark, formSchema } from '../../../src-app/utils/Validation';
+import { Formik } from 'formik';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { RootState } from '../../../src-app/redux/store';
+
+interface Props {
+  navigation: StackNavigationProp<AppStackParamList, 'NewDeliveryAddress'>;
+  route: RouteProp<AppStackParamList, 'NewDeliveryAddress'>;
+}
+
+interface CustomFieldProps {
+  label: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  error?: string;
+  onBlur?: () => void;
+  onFocus?: () => void;
+}
+
+const CustomField: React.FC<CustomFieldProps> = ({
+  label,
+  value,
+  onChangeText,
+  error,
+  onBlur,
+  onFocus,
+}) => {
+  return (
+    <View>
+      <View style={styles.inputContainer}>
+        <Text style={styles.label}>{label}</Text>
+        <TextInput
+          editable
+          multiline
+          numberOfLines={4}
+          onChangeText={onChangeText}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          value={value}
+          style={styles.input}
+          keyboardType={
+            label === MOBILE_NUMBER_LABEL || label === PINCODE_LABEL ? 'number-pad' : 'default'
+          }
+          maxLength={
+            label === MOBILE_NUMBER_LABEL ? 10 : label === PINCODE_LABEL ? 6 : undefined
+          }
+        />
+      </View>
+      {error ? <Text style={styles.error}>{error}</Text> : null}
+    </View>
+  );
+};
+
+
+const NewDeliveryAddress: React.FC<Props> = ({ navigation }) => {
+  const dispatch = useAppDispatch();
+  const route = useRoute<RouteProp<AppStackParamList, 'NewDeliveryAddress'>>();
+  const item = route.params?.item;
+  const createAddressError = useAppSelector(
+    (state: RootState) => state.auth.createAddressError
+  );
+
+  const isEditing = !!item;
+  const isFocused = useIsFocused();
+  const [currentFocusedField, setCurrentFocusedField] = React.useState<string | null>(null);
+  const [fieldsToValidate, setFieldsToValidate] = React.useState<Set<string>>(new Set());
+  const [formKey, setFormKey] = React.useState(0);
+
+  useEffect(() => {
+    if (isFocused) {
+      setFieldsToValidate(new Set());
+      setCurrentFocusedField(null);
+      setFormKey(prev => prev + 1);
+    }
+  }, [isFocused, item]);
+
+  const initialValues = useMemo(() => {
+    const { line, landmark } = extractLineAndLandmark(item?.line);
+    return {
+      fullName: item?.name || '',
+      mobileNumber: item?.phone_numbers?.[0] || '',
+      email: item?.email || '',
+      address: line || item?.line || '',
+      landmark: landmark || '',
+      city: item?.city || '',
+      state: item?.state || '',
+      pincode: item?.zip_code || '',
+    };
+  }, [item]);
+
+  const handleSave = async (values: typeof initialValues, setErrors: any) => {
+    try {
+      if (isEditing) {
+        dispatch(
+          updateAddressRequest({
+            id: item?.id,
+            address: {
+              city: values?.city,
+              country: { id: '', name: COUNTRY_INDIA },
+              email: values?.email.trim(),
+              landmark: values?.landmark,
+              line: `${ADDRESS_LINE_PREFIX}${values?.address}\n${ADDRESS_LANDMARK_PREFIX}${values?.landmark}`,
+              name: values?.fullName,
+              phone_numbers: [values?.mobileNumber],
+              state: values?.state,
+              zip_code: values?.pincode,
+            },
+            address_type: BILLING_ADDRESS,
+          }),
+        );
+      } else {
+        dispatch(
+          createAddressRequest({
+            address: {
+              city: values?.city,
+              country: { id: '', name: COUNTRY_INDIA },
+              email: values?.email.trim(),
+              landmark: values?.landmark,
+              line: `${ADDRESS_LINE_PREFIX}${values?.address}\n${ADDRESS_LANDMARK_PREFIX}${values?.landmark}`,
+              name: values?.fullName,
+              phone_numbers: [values?.mobileNumber],
+              state: values?.state,
+              zip_code: values?.pincode,
+            },
+            address_type: BILLING_ADDRESS,
+          }),
+        );
+      }
+      navigation.goBack();
+    } catch (err: any) {
+      if (err.response?.data?.errors) {
+        setErrors(err.response.data.errors);
+      }
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title={isEditing ? EDIT_DELIVERY_ADDRESS : ADD_NEW_DELIVERY_ADDRESS}
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('DeliveryAddress' as never);
+          }
+        }}
+        disableSafeAreaPadding
+      />
+      <KeyboardAwareScrollView
+        style={styles.keyboardAwareScrollView}
+        contentContainerStyle={styles.keyboardAwareScrollViewContent}
+        enableOnAndroid
+        enableAutomaticScroll
+        extraScrollHeight={EXTRA_SCROLL_HEIGHT}
+        keyboardShouldPersistTaps="handled"
+        enableResetScrollToCoords={false}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.content}>
+          <Formik
+            key={formKey}
+            initialValues={initialValues}
+            enableReinitialize
+            validationSchema={formSchema}
+            validateOnChange
+            validateOnBlur
+            validateOnMount={true}
+            onSubmit={(values, { setErrors }) => handleSave(values, setErrors)}
+          >
+
+            {({
+              handleChange,
+              handleSubmit,
+              values,
+              errors,
+              touched,
+              setFieldTouched,
+              setFieldError,
+              validateField,
+              isSubmitting,
+              isValid,
+            }) => {
+              const handleFieldFocus = async (fieldName: string) => {
+
+                if (currentFocusedField && currentFocusedField !== fieldName) {
+                  await validateField(currentFocusedField);
+                  setFieldTouched(currentFocusedField, true, false);
+                  setFieldsToValidate(prev => new Set([...prev, currentFocusedField]));
+                }
+
+
+                try {
+                  await formSchema.validateAt(fieldName, values);
+                  setFieldError(fieldName, '');
+                } catch (e) {
+
+                }
+
+                setCurrentFocusedField(fieldName);
+              };
+
+              const handleFieldChange = (fieldName: string) => (text: string) => {
+                handleChange(fieldName)(text);
+
+                if (fieldsToValidate.has(fieldName)) {
+                  try {
+                    formSchema.validateSyncAt(fieldName, { ...values, [fieldName]: text });
+                    setFieldError(fieldName, '');
+                  } catch (e) {
+                    console.log(e);
+                  }
+                }
+              };
+
+
+              const handleFieldBlur = (fieldName: string) => {
+                validateField(fieldName);
+                setFieldTouched(fieldName, true, false);
+                setFieldsToValidate(prev => new Set([...prev, fieldName]));
+                setCurrentFocusedField(null);
+              };
+
+
+              const shouldShowError = (fieldName: string) => {
+                return fieldsToValidate.has(fieldName) && typeof errors[fieldName as keyof typeof errors] === 'string';
+              };
+
+              return (
+                <>
+                  <CustomField
+                    label={FULL_NAME_LABEL}
+                    value={values.fullName}
+                    onChangeText={handleFieldChange(FULL_NAME)}
+                    onFocus={() => handleFieldFocus(FULL_NAME)}
+                    onBlur={() => handleFieldBlur(FULL_NAME)}
+                    error={
+                      shouldShowError(FULL_NAME) && errors.fullName
+                        ? (errors.fullName as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={MOBILE_NUMBER_LABEL}
+                    value={values.mobileNumber}
+                    onChangeText={handleFieldChange(MOBILE_NUMBER)}
+                    onFocus={() => handleFieldFocus(MOBILE_NUMBER)}
+                    onBlur={() => handleFieldBlur(MOBILE_NUMBER)}
+                    error={
+                      shouldShowError(MOBILE_NUMBER) && errors.mobileNumber
+                        ? (errors.mobileNumber as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={EMAIL_ID_LABEL}
+                    value={values.email}
+                    onChangeText={handleFieldChange(EMAIL_ID)}
+                    onFocus={() => handleFieldFocus(EMAIL_ID)}
+                    onBlur={() => handleFieldBlur(EMAIL_ID)}
+                    error={
+                      shouldShowError(EMAIL_ID) && errors.email
+                        ? (errors.email as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={ADDRESS_LABEL}
+                    value={values.address}
+                    onChangeText={handleFieldChange(ADDRESS)}
+                    onFocus={() => handleFieldFocus(ADDRESS)}
+                    onBlur={() => handleFieldBlur(ADDRESS)}
+                    error={
+                      shouldShowError(ADDRESS) && errors.address
+                        ? (errors.address as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={LANDMARK_LABEL}
+                    value={values.landmark}
+                    onChangeText={handleFieldChange(LANDMARK)}
+                    onFocus={() => handleFieldFocus(LANDMARK)}
+                    onBlur={() => handleFieldBlur(LANDMARK)}
+                    error={
+                      shouldShowError(LANDMARK) && errors.landmark
+                        ? (errors.landmark as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={CITY_LABEL}
+                    value={values.city}
+                    onChangeText={handleFieldChange(CITY)}
+                    onFocus={() => handleFieldFocus(CITY)}
+                    onBlur={() => handleFieldBlur(CITY)}
+                    error={
+                      shouldShowError(CITY) && errors.city
+                        ? (errors.city as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={STATE_LABEL}
+                    value={values.state}
+                    onChangeText={handleFieldChange(STATE)}
+                    onFocus={() => handleFieldFocus(STATE)}
+                    onBlur={() => handleFieldBlur(STATE)}
+                    error={
+                      shouldShowError(STATE) && errors.state
+                        ? (errors.state as string)
+                        : ''
+                    }
+                  />
+                  <CustomField
+                    label={PINCODE_LABEL}
+                    value={values.pincode}
+                    onChangeText={handleFieldChange(PINCODE)}
+                    onFocus={() => handleFieldFocus(PINCODE)}
+                    onBlur={() => handleFieldBlur(PINCODE)}
+                    error={
+                      shouldShowError(PINCODE) && errors.pincode
+                        ? (errors.pincode as string)
+                        : ''
+                    }
+                  />
+
+                  <CustomButton
+                    title={isEditing ? UPDATE_AND_PROCEED : SAVE_AND_PROCEED}
+                    onPress={() => handleSubmit()}
+                    disabled={!isValid || isSubmitting}
+                  />
+                </>
+              );
+            }}
+          </Formik>
+        </View>
+      </KeyboardAwareScrollView>
+    </View>
+  );
+};
+
+export default NewDeliveryAddress;
+

package/src/screens/NewDeliveryAddress/styles.ts

@@ -0,0 +1,68 @@
+import { Platform, StyleSheet } from "react-native";
+import FontFamily from "../../../src-app/constants/Fonts";
+import { SCALE, VSCALE } from "../../../src-app/constants/Scaling";
+import { colors } from "../../../src-app/styles/colors";
+
+export const EXTRA_SCROLL_HEIGHT =
+  Platform.OS === "ios" ? VSCALE(200) : VSCALE(150);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  icon: {
+    height: VSCALE(24),
+    width: VSCALE(24),
+    resizeMode: "contain",
+  },
+  content: {
+    padding: 20,
+  },
+  scrollContent: {
+    paddingBottom: 80,
+  },
+  inputContainer: {
+    borderWidth: 1,
+    borderColor: colors.outline,
+    borderRadius: 12,
+    backgroundColor: colors.white,
+    paddingHorizontal: 20,
+    marginBottom: "7%",
+  },
+  label: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: 400,
+    color: colors.onSurfaceVariant,
+    paddingVertical: 7,
+    paddingBottom: 0,
+  },
+  input: {
+    fontSize: 14,
+    color: colors.onSurface,
+    borderRadius: 8,
+    backgroundColor: colors.white,
+    textAlignVertical: "top",
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontWeight: 400,
+    paddingVertical: 7,
+    right: Platform.OS === "ios" ? 0 : VSCALE(3),
+  },
+  keyboardAwareScrollView: {
+    flex: 1,
+  },
+  keyboardAwareScrollViewContent: {
+    flexGrow: 1,
+    paddingBottom: VSCALE(40),
+  },
+  error: {
+    color: colors.red,
+    fontSize: SCALE(12),
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    marginBottom: VSCALE(4),
+    bottom: VSCALE(15),
+  },
+});
+
+export default styles;

package/src/screens/Onboarding/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../../../src-app/types/navigation';
+import Button from '../../../src-app/components/Button';
+import styles from './styles';
+import ENV from '../../../src-app/config/env';
+console.log("Config API_URL:", ENV.apiUrl);
+
+type OnboardingNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'Onboarding'
+>;
+
+interface Props {
+  navigation: OnboardingNavigationProp;
+}
+
+const Onboarding: React.FC<Props> = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <Text style={styles.title}>APNA Club Mobile App</Text>
+          <Text style={styles.subtitle}>
+            Experience the mobile loyalty app interface
+          </Text>
+        </View>
+
+        <View style={styles.buttonContainer}>
+          <Button
+            title="Start Login Flow"
+            onPress={() => navigation.navigate('Login')}
+            fullWidth
+            style={styles.primaryButton}
+          />
+          <Button
+            title="View Dashboard"
+            variant="outline"
+            onPress={() => navigation.navigate('MainTabs')}
+            fullWidth
+            style={styles.outlineButton}
+          />
+        </View>
+
+        <View style={styles.footer}>
+          <Text style={styles.footerText}>Mobile-first responsive design</Text>
+          <Text style={styles.footerText}>
+            Best viewed on mobile or narrow screen
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Onboarding;

package/src/screens/Onboarding/styles.ts

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+import { borderRadius, spacing, typography } from '../../../src-app/styles/shared';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.surface,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: spacing.lg,
+  },
+  content: {
+    width: '100%',
+    maxWidth: 400,
+    backgroundColor: colors.background,
+    borderRadius: borderRadius.xl,
+    padding: spacing.xl,
+    alignItems: 'center',
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: spacing.xl,
+  },
+  title: {
+    ...typography.h1,
+    color: colors.onSurface,
+    textAlign: 'center',
+    marginBottom: spacing.sm,
+  },
+  subtitle: {
+    ...typography.bodySmall,
+    color: colors.onSurfaceVariant,
+    textAlign: 'center',
+  },
+  buttonContainer: {
+    width: '100%',
+    gap: spacing.md,
+    marginBottom: spacing.xl,
+  },
+  primaryButton: {
+    backgroundColor: colors.primary,
+  },
+  outlineButton: {
+    borderColor: colors.outline,
+  },
+  footer: {
+    alignItems: 'center',
+    paddingTop: spacing.lg,
+    borderTopWidth: 1,
+    borderTopColor: colors.outlineVariant,
+  },
+  footerText: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    textAlign: 'center',
+  },
+});
+
+export default styles;