reza fixed some page on tablet mode

master
Reza_ashrafi 2 years ago
parent 86cde35622
commit 6730829161
  1. 11
      navigation/index.js
  2. 3
      src/components/AlertModal.js
  3. 16
      src/redux/actions/public.js
  4. 5
      src/redux/reducers/public.js
  5. 1
      src/redux/reducers/userFactor.js
  6. 5
      src/screens/AR/components/Book.js
  7. 2
      src/screens/Home/components/Blogs.js
  8. 14
      src/screens/Home/components/MyBooks.js
  9. 25
      src/screens/Product/components/Book.js
  10. 2
      src/screens/Product/index.js
  11. 13
      src/screens/Products/components/Main.js
  12. 6
      src/screens/ShoppingCart/components/Code.js
  13. 311
      src/screens/ShoppingCart/index.js

@ -1,6 +1,6 @@
import React, { useEffect } from "react";
import { Restart } from "fiction-expo-restart";
import { I18nManager, StatusBar } from "react-native";
import { I18nManager, StatusBar, Dimensions } from "react-native";
import * as Linking from "expo-linking";
import Svg, { G, Path } from "react-native-svg";
import { NavigationContainer } from "@react-navigation/native";
@ -583,11 +583,11 @@ const prefix = Linking.createURL("/");
const Stack = createNativeStackNavigator();
const Navigation = ({
getStatus,
isLogin,
userProducts,
ltr,
setLTR,
theme,
setOrientation,
}) => {
const linking = {
prefixes: [prefix],
@ -610,6 +610,11 @@ const Navigation = ({
);
}, []);
Dimensions.addEventListener("change", () => {
const dim = Dimensions.get("window");
setOrientation(dim.height > dim.width ? "portrait" : "landscape");
});
return (
<NavigationContainer linking={linking}>
<Stack.Navigator
@ -652,7 +657,6 @@ const Navigation = ({
};
const mapStateToProps = (state) => ({
isLogin: state.user.status,
userProducts: state.userProduct.list,
theme: state.publicApi.theme,
ltr: state.publicApi.ltr,
@ -660,6 +664,7 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = {
getStatus: user.getStatus,
setLTR: publicApi.setLTR,
setOrientation: publicApi.setOrientation,
};
export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

@ -97,6 +97,9 @@ const AlertModal = (props) => {
? Colors.theme1.gray20
: Colors.theme1.white,
}}
overlayStyle={{
width : width,
}}
closeOnTouchOutside={alert.closeOnTouchOutside}
closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
showCancelButton={alert.showCancelButton}

@ -1,13 +1,15 @@
import proxy from "../proxy";
const publicApi = {
setOrientation: (data) => async (dispatch) =>
await dispatch({ type: "public/setOrientation", data }),
setLTR: (data) => async (dispatch) =>
await dispatch({ type: "public/setLtr", data: data }),
await dispatch({ type: "public/setLtr", data }),
setIsDark: (data) => async (dispatch) =>
await dispatch({ type: "public/setIsDark", data: data }),
await dispatch({ type: "public/setIsDark", data }),
getHomeData: (data) => async (dispatch) =>
await proxy.get("public/homePage", data, { dispatch }),
setFaqActive: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/activate", data: data }),
await dispatch({ type: "public/faq/activate", data }),
bookInfo:
(data = {}, data2 = {}) =>
async (dispatch) => {
@ -28,7 +30,7 @@ const publicApi = {
getBlogInfo: (data) => async (dispatch) =>
await proxy.get("public/blogInfo", data, { dispatch }),
setSubscribe: (data) => async (dispatch) =>
await dispatch({ type: "public/setSubscribe", data: data }),
await dispatch({ type: "public/setSubscribe", data }),
getProvince:
(data = {}) =>
async (dispatch) =>
@ -38,15 +40,15 @@ const publicApi = {
async (dispatch) =>
await proxy.get("public/city", data, { dispatch }),
selectMenu: (data) => async (dispatch) =>
await dispatch({ type: "public/selectMenu", data: data }),
await dispatch({ type: "public/selectMenu", data }),
getHeader:
(data = {}) =>
async (dispatch) =>
await proxy.get("public/VOD/homePage", data, { dispatch }),
activeCategory: (data) => async (dispatch) =>
await dispatch({ type: "active/category", data: data }),
await dispatch({ type: "active/category", data }),
setVideoActive: (data) => async (dispatch) =>
await dispatch({ type: "active/video", data: data }),
await dispatch({ type: "active/video", data }),
getArList: (data, history) => async (dispatch) =>
await proxy.get("public/ar", data, { history, dispatch }),
};

@ -1,12 +1,13 @@
import { Dimensions } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
const width = Dimensions.get("window").width;
const { width, height } = Dimensions.get("window");
const initialState = {
ltr: false,
theme: null,
mobile: width < 720,
orientation: height > width ? "portrait" : "landscape",
homeData: [],
newProducts: [],
levels: [],
@ -78,6 +79,8 @@ const grades = [
const publicApi = (state = initialState, action) => {
let { type, data } = action;
switch (type) {
case "public/setOrientation":
return { ...state, orientation: data, error: null, loading: false };
case "public/setLtr":
return { ...state, ltr: true };
case "public/setIsDark":

@ -54,7 +54,6 @@ export default function userFactor(state = initialState, action) {
case "userFactor/deleteUserOffCode":
return { ...state, loading: false, error: null };
case "userFactor/payment":
console.log(data);
return { ...state, loading: false, error: null, isVerified: false };
case "userFactor/verifyVOD":
return { ...state, loading: false, error: null, isVerified: true };

@ -10,7 +10,7 @@ import Colors from "../../../constants/Colors";
const { width, height } = Dimensions.get("window");
const Book = ({ book, mobile, theme }) => {
const Book = ({ book, mobile, theme, orientation }) => {
return (
<Pressable
style={[
@ -29,7 +29,7 @@ const Book = ({ book, mobile, theme }) => {
style={[
tw("rounded-sm w-full"),
{
height: mobile ? (width - 32) / 1.5 : 200,
height: mobile ? (width - 32) / 1.5 : height / 4,
flex: 1,
},
]}
@ -55,6 +55,7 @@ const Book = ({ book, mobile, theme }) => {
const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
orientation: state.publicApi.orientation,
});
export default connect(mapStateToProps)(Book);

@ -61,7 +61,7 @@ const Blog = ({ blog, mobile, theme }) => {
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
resizeMode="contain"
resizeMode="cover"
style={[
{
flex: 1,

@ -6,6 +6,7 @@ import {
FlatList,
Platform,
Linking,
Dimensions,
} from "react-native";
import { connect } from "react-redux";
@ -18,8 +19,8 @@ import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
function MyBooks({ books, grades, theme }) {
const { width, height } = Dimensions.get("window");
function MyBooks({ books, grades, theme, mobile }) {
return books?.filter(
(book) =>
(book?.productType === 2 || book?.productType === 3) &&
@ -61,7 +62,7 @@ function MyBooks({ books, grades, theme }) {
inverted={true}
data={books?.filter((book) => book?.condition >= 2)}
renderItem={({ item }) => (
<Book book={item} grades={grades} theme={theme} />
<Book book={item} grades={grades} theme={theme} mobile={mobile} />
)}
keyExtractor={(book) => book?.id}
/>
@ -70,7 +71,7 @@ function MyBooks({ books, grades, theme }) {
) : null;
}
const Book = ({ book, grades, theme }) => {
const Book = ({ book, grades, theme, mobile }) => {
const actions = {
3: () =>
Linking.openURL(`https://ar.dnvn.ir/lunch?id=${book?.product?.ARId}`),
@ -83,7 +84,7 @@ const Book = ({ book, grades, theme }) => {
style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
onPress={actions[book?.productType]}
>
<View style={{ height: 165 }}>
<View style={{ height: mobile ? 165 : height / 5 }}>
<Image
source={{
uri: `https://dnvn.ir/api/v1/file/${book?.product?.book?.fileIds}`,
@ -91,7 +92,7 @@ const Book = ({ book, grades, theme }) => {
resizeMode="contain"
style={[
{
width: 110,
width: mobile ? 110 : height / 5 * 3 / 4,
flex: 1,
},
]}
@ -131,6 +132,7 @@ const Book = ({ book, grades, theme }) => {
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
theme: state.publicApi.theme,
mobile: state.publicApi.mobile,
});
export default connect(mapStateToProps)(MyBooks);

@ -26,7 +26,6 @@ import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
const { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
function Book({
@ -39,7 +38,9 @@ function Book({
mobile,
userProducts,
theme,
orientation,
}) {
const [width, setWidth] = React.useState(Dimensions.get("window").width);
const navigation = useNavigation();
const [type, setType] = useState(1);
const [whichTypeAdded, setWhichTypeAdded] = React.useState(null);
@ -72,8 +73,6 @@ function Book({
)?.length;
}, [userProducts, book]);
console.log(physicalAvailabileInCart);
const digitalAvailabileInCart = React.useMemo(() => {
return userProducts?.filter(
(product) =>
@ -136,7 +135,10 @@ function Book({
}, [userProducts]);
return (
<View style={[tw("flex flex-1 relative")]}>
<View
style={[tw("flex flex-1 relative")]}
onLayout={() => setWidth(Dimensions.get("window").width)}
>
{!mobile ? <View style={tw("mt-5")}></View> : null}
{/* {imageSlider ? <ImageSlider /> : null} */}
<View style={[tw("flex flex-row-reverse")]}>
@ -145,10 +147,20 @@ function Book({
resizeMode="contain"
style={[
tw("rounded-sm"),
{ height: ((width / 3) * 4) / 2.6, width: width / 3 },
{
height: mobile
? ((width / 3) * 4) / 2.6
: orientation === "portrait"
? ((width / 4) * 4) / 2.6
: ((width / 6) * 4) / 2.6,
width: mobile
? width / 3
: orientation === "portrait"
? width / 4
: width / 6,
},
]}
/>
<View
style={[
tw("flex flex-1 justify-between items-end"),
@ -685,6 +697,7 @@ const mapStateToProps = (state) => ({
userProductsLoading: state.userProduct.loading,
userFavoriteLoading: state.userFavorite.loading,
mobile: state.publicApi.mobile,
orientation: state.publicApi.orientation,
theme: state.publicApi.theme,
});

@ -13,6 +13,8 @@ import { book } from "../../redux/actions";
import { connect } from "react-redux";
import Navbar from "../../components/Navbar";
const { height, width } = Dimensions.get("window");
function Product({ route, book, getBook, grades }) {
useEffect(() => {
getBook({ id: route.params.id, vod: true });

@ -18,7 +18,7 @@ import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
const Main = ({ books, filterOptions, grades, mobile, theme }) => {
const Main = ({ books, filterOptions, grades, mobile, theme, orientation }) => {
const [width, setWidth] = React.useState(Dimensions.get("window").width);
const navigation = useNavigation();
const [filterLoading, setFilterLoading] = React.useState(false);
@ -266,7 +266,11 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
key={product?.product[1]?.id}
style={[
{
width: mobile ? width / 2 - 25 : width / 3.2,
width: mobile
? width / 2 - 25
: orientation === "portrait"
? width / 4.2
: width / 5.2,
marginBottom: 15,
borderWidth: 1,
borderColor:
@ -293,7 +297,9 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
flex: 1,
height: mobile
? ((width / 2 - 25) * 4) / 2.9
: ((width / 3.2) * 16) / 11,
: orientation === "portrait"
? ((width / 4.2) * 16) / 11
: ((width / 5.2) * 16) / 11,
},
]}
/>
@ -392,6 +398,7 @@ const mapStateToProps = (state) => ({
filterOptions: state.book.filterOptions,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
orientation: state.publicApi.orientation,
});
const mapDispatchToProps = {};

@ -16,7 +16,7 @@ import fontSize from "../../../constants/fontSize";
import Colors from "../../../constants/Colors";
import tw from "tailwind-rn";
function Code({ codeId, setCodeId, theme, loading }) {
function Code({ codeId, setCodeId, theme, loading, mobile }) {
const [value, setValue] = React.useState(codeId || "");
const [requestFlag, setRequestFlag] = React.useState(false);
@ -62,11 +62,12 @@ function Code({ codeId, setCodeId, theme, loading }) {
<Pressable
onPress={() => setOff()}
style={[
tw("py-3 px-5"),
tw("py-3 px-5 flex justify-center items-center"),
{
backgroundColor: Colors.theme1.greenCF,
borderTopLeftRadius: 1,
borderBottomLeftRadius: 1,
width : mobile ? "auto" : "20%"
},
]}
>
@ -96,6 +97,7 @@ const mapStateToProps = (state) => ({
codeId: state.userFactor.info?.codeId,
loading: state.userFactor.loading,
theme: state.publicApi.theme,
mobile : state.publicApi.mobile
});
const mapDispatchToProps = {

@ -9,6 +9,7 @@ import {
SafeAreaView,
StatusBar,
LayoutAnimation,
KeyboardAvoidingView,
Appearance,
} from "react-native";
import { connect } from "react-redux";
@ -128,89 +129,75 @@ function ShoppingCart({
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
height: height,
flex: 1,
}}
>
<Navbar
setBoxPosition={setBoxPosition}
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "سبد خرید",
bookmark: false,
qr: false,
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
{list?.filter((product) => product?.condition < 2)?.length ? (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
{list
?.sort((a, b) => a?.id - b?.id)
?.map((product, index) =>
product?.condition < 2 ? (
<Product key={index} product={product} loading={loading} />
) : null
)}
<Code />
<View
style={tw(
`flex w-full border-t py-2 border-gray-300 border-b mt-6 ${
theme === "light" ? "" : "border-opacity-20"
}`
)}
>
<PriceStatus
name="مبلغ سبد خرید"
value={
isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
}
type="normal"
theme={theme}
/>
<PriceStatus
name="میزان تخفیف"
value={
isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
}
type="error"
theme={theme}
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={
isEmpty
? 0
: separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
}
type="error"
theme={theme}
/>
</View>
<View
style={tw(
"flex flex-row-reverse justify-between items-center w-full py-3"
)}
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Navbar
setBoxPosition={setBoxPosition}
headerOptions={{
logo: false,
menu: false,
hamburgerMenu: false,
title: "سبد خرید",
bookmark: false,
qr: false,
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
{list?.filter((product) => product?.condition < 2)?.length ? (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={styles.container}
>
<Text
style={[
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.base,
fontFamily: "bold",
},
]}
{list
?.sort((a, b) => a?.id - b?.id)
?.map((product, index) =>
product?.condition < 2 ? (
<Product key={index} product={product} loading={loading} />
) : null
)}
<Code />
<View
style={tw(
`flex w-full border-t py-2 border-gray-300 border-b mt-6 ${
theme === "light" ? "" : "border-opacity-20"
}`
)}
>
<PriceStatus
name="مبلغ سبد خرید"
value={
isEmpty ? 0 : separate(Math.round(factorInfo?.sumPrice || 0))
}
type="normal"
theme={theme}
/>
<PriceStatus
name="میزان تخفیف"
value={
isEmpty ? 0 : separate(Math.round(factorInfo?.offPrice || 0))
}
type="error"
theme={theme}
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={
isEmpty
? 0
: separate(Math.round((factorInfo?.sumPrice || 0) * 0.009))
}
type="error"
theme={theme}
/>
</View>
<View
style={tw(
"flex flex-row-reverse justify-between items-center w-full py-3"
)}
>
جمع کل سبد خرید
</Text>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
@ -218,95 +205,111 @@ function ShoppingCart({
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.xl,
fontSize: fontSize.base,
fontFamily: "bold",
},
]}
>
{isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
</Text>
<Text
style={[
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.sm,
fontFamily: "regular",
marginRight: 4,
},
]}
>
تومان
جمع کل سبد خرید
</Text>
<View style={tw("flex flex-row-reverse items-center")}>
<Text
style={[
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.xl,
fontFamily: "bold",
},
]}
>
{isEmpty ? 0 : separate(factorInfo?.payPrice || "")}
</Text>
<Text
style={[
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.sm,
fontFamily: "regular",
marginRight: 4,
},
]}
>
تومان
</Text>
</View>
</View>
</View>
<View style={tw("w-full")}>
<Pressable
style={[
tw(
"w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
),
{
backgroundColor:
theme === "light"
? Colors.theme1.greenC8 + "1a"
: Colors.theme1.blue90 + "33",
},
]}
>
<Text
<View style={tw("w-full")}>
<Pressable
style={[
tw("mr-1"),
tw(
"w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
),
{
color:
backgroundColor:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.sm,
fontFamily: "regular",
? Colors.theme1.greenC8 + "1a"
: Colors.theme1.blue90 + "33",
},
]}
>
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</Text>
<Ionicons
name="alert-circle-outline"
size={20}
color={
theme === "light"
? Colors.theme1.greenC8
: Colors.theme1.white
<Text
style={[
tw("mr-1"),
{
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontSize: fontSize.sm,
fontFamily: "regular",
},
]}
>
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</Text>
<Ionicons
name="alert-circle-outline"
size={20}
color={
theme === "light"
? Colors.theme1.greenC8
: Colors.theme1.white
}
/>
</Pressable>
<CustomPressable
title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
backgroundColor={Colors.theme1.greenCF}
color={"white"}
border={{ color: "#196EC0", width: 0 }}
width={"100%"}
onPress={() =>
isEmpty
? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", {
showCancelButton: false,
})
: hasPhysical
? navigation.navigate("DeliveryForm")
: payFactor({ userId })
}
/>
</Pressable>
<CustomPressable
title={hasPhysical ? "ادامه فرایند خرید" : "پرداخت"}
backgroundColor={Colors.theme1.greenCF}
color={"white"}
border={{ color: "#196EC0", width: 0 }}
width={"100%"}
onPress={() =>
isEmpty
? asyncAwesomeAlert("خطا", "سبد خرید شما خالی است.", {
showCancelButton: false,
})
: hasPhysical
? navigation.navigate("DeliveryForm")
: payFactor({ userId })
}
/>
</View>
</ScrollView>
) : (
<Empty
text={"سبد خرید شما خالی است"}
buttonText={"فروشگاه"}
buttonAction={() => navigation.navigate("Products")}
/>
)}
</View>
</ScrollView>
) : (
<Empty
text={"سبد خرید شما خالی است"}
buttonText={"فروشگاه"}
buttonAction={() => navigation.navigate("Products")}
/>
)}
</KeyboardAvoidingView>
</SafeAreaView>
);
}

Loading…
Cancel
Save