diff --git a/.expo/README.md b/.expo/README.md new file mode 100644 index 0000000..f7eb5fe --- /dev/null +++ b/.expo/README.md @@ -0,0 +1,8 @@ +> Why do I have a folder named ".expo" in my project? +The ".expo" folder is created when an Expo project is started using "expo start" command. +> What do the files contain? +- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds. +- "settings.json": contains the server configuration that is used to serve the application manifest. +> Should I commit the ".expo" folder? +No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine. +Upon project creation, the ".expo" folder is already added to your ".gitignore" file. diff --git a/.expo/devices.json b/.expo/devices.json new file mode 100644 index 0000000..5efff6c --- /dev/null +++ b/.expo/devices.json @@ -0,0 +1,3 @@ +{ + "devices": [] +} diff --git a/apps/user-ui/app/(drawer)/(tabs)/me/addresses/index.tsx b/apps/user-ui/app/(drawer)/(tabs)/me/addresses/index.tsx index 1c889b3..cb53e50 100644 --- a/apps/user-ui/app/(drawer)/(tabs)/me/addresses/index.tsx +++ b/apps/user-ui/app/(drawer)/(tabs)/me/addresses/index.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { View, Alert } from 'react-native'; import { useRouter } from 'expo-router'; -import { AppContainer, MyText, tw, useMarkDataFetchers, MyFlatList, MyTouchableOpacity, BottomDialog } from 'common-ui'; +import { AppContainer, MyText, tw, useMarkDataFetchers, MyFlatList, MyTouchableOpacity, BottomDialog, RawBottomDialog } from 'common-ui'; import { trpc } from '@/src/trpc-client'; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; import AddressForm from '@/src/components/AddressForm'; @@ -242,20 +242,7 @@ export default function Addresses() { showsVerticalScrollIndicator={false} /> - setModalVisible(false)}> - - - - {editingAddress ? 'Edit Address' : 'Add Address'} - - setModalVisible(false)} - style={tw`p-1`} - > - - - - + setModalVisible(false)}> - - - + ); } \ No newline at end of file diff --git a/apps/user-ui/components/CheckoutAddressSelector.tsx b/apps/user-ui/components/CheckoutAddressSelector.tsx index d162c3b..5d5b456 100644 --- a/apps/user-ui/components/CheckoutAddressSelector.tsx +++ b/apps/user-ui/components/CheckoutAddressSelector.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import { View, Text, TouchableOpacity, ScrollView } from 'react-native'; -import { tw, BottomDialog } from 'common-ui'; +import { tw, BottomDialog, RawBottomDialog } from 'common-ui'; import { useQueryClient } from '@tanstack/react-query'; import AddressForm from '@/src/components/AddressForm'; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; @@ -128,7 +128,9 @@ const CheckoutAddressSelector: React.FC = ({ )} - setShowAddAddress(false)}> + {/* setShowAddAddress(false)}> */} + setShowAddAddress(false)}> + { setShowAddAddress(false); @@ -138,8 +140,9 @@ const CheckoutAddressSelector: React.FC = ({ } queryClient.invalidateQueries(); }} - /> - + /> + + {/* */} ); }; diff --git a/apps/user-ui/components/PaymentAndOrderComponent.tsx b/apps/user-ui/components/PaymentAndOrderComponent.tsx index 3dcf5de..7059a1f 100644 --- a/apps/user-ui/components/PaymentAndOrderComponent.tsx +++ b/apps/user-ui/components/PaymentAndOrderComponent.tsx @@ -370,6 +370,14 @@ const PaymentAndOrderComponent: React.FC = ({ {/* Bottom Action Bar */} + {!selectedAddress && ( + + + + Please select a delivery address to place order + + + )} { setSelectedCouponId(value ? Number(value) : null); }} diff --git a/apps/user-ui/components/checkout-page.tsx b/apps/user-ui/components/checkout-page.tsx index ca56559..8a0b392 100644 --- a/apps/user-ui/components/checkout-page.tsx +++ b/apps/user-ui/components/checkout-page.tsx @@ -1,7 +1,7 @@ import React, { useState, useMemo } from 'react'; import { View, ScrollView } from 'react-native'; import { useLocalSearchParams, useRouter } from 'expo-router'; -import { tw, useMarkDataFetchers , BottomDialog, MyText, MyTouchableOpacity } from 'common-ui'; +import { tw, useMarkDataFetchers , BottomDialog, MyText, MyTouchableOpacity, RawBottomDialog } from 'common-ui'; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; import { useQueryClient } from '@tanstack/react-query'; import AddressForm from '@/src/components/AddressForm'; @@ -256,7 +256,7 @@ const CheckoutPage: React.FC = ({ isFlashDelivery = false }) - setShowAddAddress(false)}> + setShowAddAddress(false)}> { setShowAddAddress(false); @@ -267,7 +267,7 @@ const CheckoutPage: React.FC = ({ isFlashDelivery = false }) queryClient.invalidateQueries(); }} /> - + ); diff --git a/apps/user-ui/src/components/AddressForm.tsx b/apps/user-ui/src/components/AddressForm.tsx index 2166b1e..b58a664 100644 --- a/apps/user-ui/src/components/AddressForm.tsx +++ b/apps/user-ui/src/components/AddressForm.tsx @@ -1,11 +1,12 @@ import React, { useState } from 'react'; -import { View, ScrollView } from 'react-native'; +import { View, ScrollView, Dimensions } from 'react-native'; import { useMutation } from '@tanstack/react-query'; import { Formik } from 'formik'; import * as Yup from 'yup'; import { tw, MyText, MyTouchableOpacity , Checkbox , MyTextInput , LoadingDialog } from 'common-ui'; import { trpc } from '../trpc-client'; import LocationAttacher from './LocationAttacher'; +import KeyBoardAwareScrollView from 'react-native-keyboard-aware-scroll-view'; interface AddressFormProps { onSuccess: (addressId?: number) => void; @@ -74,8 +75,8 @@ const AddressForm: React.FC = ({ onSuccess, initialValues, isE return ( {isEdit ? 'Edit Address' : 'Add Address'} @@ -252,6 +253,7 @@ const AddressForm: React.FC = ({ onSuccess, initialValues, isE {isSubmitting ? (isEdit ? 'Updating...' : 'Adding...') : (isEdit ? 'Update Address' : 'Add Address')} + )} diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 97b5828..8dac1bf 100755 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -14,7 +14,7 @@ import { theme } from "./src/theme"; import MyButton, { MyTextButton } from "./src/components/button"; import { useTheme, Theme } from "./hooks/theme-context"; import MyTextInput from "./src/components/textinput"; -import BottomDialog, { ConfirmationDialog } from "./src/components/dialog"; +import BottomDialog, { ConfirmationDialog, RawBottomDialog } from "./src/components/dialog"; import LoadingDialog from "./src/components/loading-dialog"; import DatePicker from "./src/components/date-picker"; import MyText from "./src/components/text"; @@ -91,6 +91,7 @@ export { MyText, MyTouchableOpacity, ConfirmationDialog, + RawBottomDialog, DatePicker, BottomDropdown, ImageViewerURI, diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx index ac58985..f801ee4 100755 --- a/packages/ui/src/components/dialog.tsx +++ b/packages/ui/src/components/dialog.tsx @@ -2,6 +2,7 @@ import React, { ReactNode, useState } from 'react'; import { Modal, View, TouchableOpacity, StyleSheet, Animated, Easing, Dimensions, TextInput, KeyboardAvoidingView, Platform, ScrollView } from 'react-native'; import MyText from './text'; import { MyButton } from 'common-ui'; +import tw from "../lib/tailwind"; interface DialogProps { open: boolean; @@ -72,6 +73,60 @@ export const BottomDialog: React.FC = ({ open, onClose, children, e ); }; +export const RawBottomDialog: React.FC = ({ open, onClose, children, enableDismiss = true }) => { + const [slideAnim] = useState(new Animated.Value(SCREEN_HEIGHT)); + + React.useEffect(() => { + if (open) { + Animated.timing(slideAnim, { + toValue: 0, + duration: 300, + easing: Easing.out(Easing.cubic), + useNativeDriver: true, + }).start(); + } else { + Animated.timing(slideAnim, { + toValue: SCREEN_HEIGHT, + duration: 200, + useNativeDriver: true, + }).start(); + } + }, [open]); + + return ( + + {enableDismiss ? ( + + ) : ( + + )} + + {children} + {/* + {children} + */} + + ); +}; + const styles = StyleSheet.create({ backdrop: { flex: 1, @@ -204,4 +259,4 @@ export const ConfirmationDialog: React.FC = (props) => ); -} \ No newline at end of file +}