Fixed Language change triggers app reload issue
This commit is contained in:
aliyanlatif
parent
2a75282c18
commit
91a1bb84de
|
|
@ -6,7 +6,7 @@ import * as SplashScreen from "expo-splash-screen";
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { Platform, StatusBar } from "react-native";
|
||||
import FlashMessage from "react-native-flash-message";
|
||||
import i18n from "./i18n";
|
||||
//import i18n from "./i18n";
|
||||
import setupApolloClient from "./src/apollo/index";
|
||||
import { AuthContext } from "./src/context/auth";
|
||||
import { ConfigurationProvider } from "./src/context/configuration";
|
||||
|
|
@ -56,7 +56,7 @@ export default function App() {
|
|||
};
|
||||
|
||||
async function loadData() {
|
||||
await i18n.initAsync();
|
||||
//await i18n.initAsync();
|
||||
await Font.loadAsync({
|
||||
MuseoSans300: require("./assets/font/MuseoSans/MuseoSans300.ttf"),
|
||||
MuseoSans500: require("./assets/font/MuseoSans/MuseoSans500.ttf"),
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
import * as Localization from 'expo-localization'
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { Platform } from 'react-native'
|
||||
import i18n from 'i18n-js'
|
||||
import { en } from './languages/en'
|
||||
import { fr } from './languages/fr'
|
||||
import { km } from './languages/km'
|
||||
import { zh } from './languages/zh'
|
||||
import { de } from './languages/de'
|
||||
import { ar } from './languages/ar'
|
||||
|
||||
i18n.initAsync = async () => {
|
||||
i18n.fallbacks = true
|
||||
i18n.translations = { fr, en, km, zh, de, ar }
|
||||
// i18n.locale = 'km'
|
||||
if (Platform.OS === 'android') {
|
||||
const lang = await AsyncStorage.getItem('enatega-language')
|
||||
i18n.locale = lang || 'en'
|
||||
} else {
|
||||
i18n.locale = Localization.locale
|
||||
}
|
||||
}
|
||||
|
||||
export default i18n
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import i18next from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
import * as Localization from "expo-localization";
|
||||
import { Platform } from "react-native";
|
||||
import { en } from "./languages/en";
|
||||
import { de } from "./languages/de";
|
||||
import { fr } from "./languages/fr";
|
||||
import { km } from "./languages/km";
|
||||
import { zh } from "./languages/zh";
|
||||
import { ar } from "./languages/ar";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
export const languageResources = {
|
||||
en: { translation: en },
|
||||
zh: { translation: zh },
|
||||
de: { translation: de },
|
||||
fr: { translation: fr },
|
||||
km: { translation: km },
|
||||
ar: { translation: ar },
|
||||
};
|
||||
|
||||
const i18n = i18next.createInstance();
|
||||
|
||||
// Configure i18next instance
|
||||
i18n
|
||||
.use(initReactI18next) // Ensure initReactI18next is used
|
||||
.init({
|
||||
compatibilityJSON: "v3",
|
||||
lng: "en", // Default language
|
||||
fallbackLng: "en",
|
||||
resources: languageResources,
|
||||
});
|
||||
|
||||
// Fetch stored language and set i18next instance accordingly
|
||||
const getStoredLanguage = async () => {
|
||||
const lng = await AsyncStorage.getItem("enatega-language");
|
||||
i18n.changeLanguage(lng || "en"); // Change language
|
||||
};
|
||||
|
||||
// Execute language initialization based on platform
|
||||
if (Platform.OS === "android" || Platform.OS === "ios") {
|
||||
getStoredLanguage();
|
||||
}
|
||||
|
||||
export default i18n;
|
||||
|
|
@ -1,154 +1,154 @@
|
|||
export const en = {
|
||||
title0: 'Selected Language',
|
||||
subtitle0: 'English',
|
||||
title0: "Selected Language",
|
||||
subtitle0: "English",
|
||||
description0:
|
||||
'Select any language of your choice to change the content of the app to your required language.',
|
||||
title1: 'Tasty',
|
||||
subtitle1: 'BreakFast',
|
||||
"Select any language of your choice to change the content of the app to your required language.",
|
||||
title1: "Tasty",
|
||||
subtitle1: "BreakFast",
|
||||
description1:
|
||||
'Breakfast is everything. The beginning, the first thing. It is the mouthful that is the commitment to a new day, a continuing life.',
|
||||
title2: 'Refreshing',
|
||||
subtitle2: 'Drinks',
|
||||
"Breakfast is everything. The beginning, the first thing. It is the mouthful that is the commitment to a new day, a continuing life.",
|
||||
title2: "Refreshing",
|
||||
subtitle2: "Drinks",
|
||||
description2:
|
||||
'True silence is the rest of the mind, and is to the spirit what sleep is to the body, nourishment and refreshment.',
|
||||
title3: 'Delicous',
|
||||
subtitle3: 'Icecream',
|
||||
"True silence is the rest of the mind, and is to the spirit what sleep is to the body, nourishment and refreshment.",
|
||||
title3: "Delicous",
|
||||
subtitle3: "Icecream",
|
||||
description3:
|
||||
'Age does not diminish the extreme disappointment of having a scoop of ice cream fall from the cone',
|
||||
getStarted: 'Get Started!',
|
||||
welcome: 'Welcome',
|
||||
loginBtn: 'Login',
|
||||
registerBtn: 'Register',
|
||||
name: 'Name',
|
||||
phone: 'Phone',
|
||||
email: 'Email',
|
||||
emailphone: 'Email or Phone',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
deliveryAddress: 'Delivery Address',
|
||||
registerText: 'Or Register With',
|
||||
forgotPassword: 'Forgot Password?',
|
||||
loginText: 'Or Login With',
|
||||
"Age does not diminish the extreme disappointment of having a scoop of ice cream fall from the cone",
|
||||
getStarted: "Get Started!",
|
||||
welcome: "Welcome",
|
||||
loginBtn: "Login",
|
||||
registerBtn: "Register",
|
||||
name: "Name",
|
||||
phone: "Phone",
|
||||
email: "Email",
|
||||
emailphone: "Email or Phone",
|
||||
username: "Username",
|
||||
password: "Password",
|
||||
deliveryAddress: "Delivery Address",
|
||||
registerText: "Or Register With",
|
||||
forgotPassword: "Forgot Password?",
|
||||
loginText: "Or Login With",
|
||||
deliveryLocation:
|
||||
'Turn on location so we could send you endless taste of delicious food.',
|
||||
locationBtn: 'Turn on Location',
|
||||
locationPermissionDenied: 'Permission to access location was denied',
|
||||
cameraRollPermissionDenied: 'Permission to access Camera Roll was denied',
|
||||
locationOff: 'Turn on location and try again',
|
||||
titleLanguage: 'Change Language',
|
||||
titleMenu: 'Menu',
|
||||
titleOrders: 'My Orders',
|
||||
NewOrders: 'New Orders',
|
||||
titleNotifications: 'Notifications',
|
||||
titleReviews: 'Reviews',
|
||||
titleSettings: 'Settings',
|
||||
titleHelp: 'Help',
|
||||
titleLogout: 'Logout',
|
||||
titleCart: 'My Cart',
|
||||
titlePayment: 'Payment',
|
||||
orderId: 'Order ID',
|
||||
totalOrderAmount: 'Total Order Amount',
|
||||
reOrder: 'Reorder',
|
||||
unReadNotifications: 'No unread notifications',
|
||||
upload: 'Upload',
|
||||
saveBtn: 'Save',
|
||||
emailUs: 'Email us at',
|
||||
question1: 'Where do we find the food?',
|
||||
question2: 'How do we contact?',
|
||||
question3: 'How can I pay the delivery person?',
|
||||
question4: 'Is the service available in my city?',
|
||||
"Turn on location so we could send you endless taste of delicious food.",
|
||||
locationBtn: "Turn on Location",
|
||||
locationPermissionDenied: "Permission to access location was denied",
|
||||
cameraRollPermissionDenied: "Permission to access Camera Roll was denied",
|
||||
locationOff: "Turn on location and try again",
|
||||
titleLanguage: "Change Language",
|
||||
titleMenu: "Menu",
|
||||
titleOrders: "My Orders",
|
||||
NewOrders: "New Orders",
|
||||
titleNotifications: "Notifications",
|
||||
titleReviews: "Reviews",
|
||||
titleSettings: "Settings",
|
||||
titleHelp: "Help",
|
||||
titleLogout: "Logout",
|
||||
titleCart: "My Cart",
|
||||
titlePayment: "Payment",
|
||||
orderId: "Order ID",
|
||||
totalOrderAmount: "Total Order Amount",
|
||||
reOrder: "Reorder",
|
||||
unReadNotifications: "No unread notifications",
|
||||
upload: "Upload",
|
||||
saveBtn: "Save",
|
||||
emailUs: "Email us at",
|
||||
question1: "Where do we find the food?",
|
||||
question2: "How do we contact?",
|
||||
question3: "How can I pay the delivery person?",
|
||||
question4: "Is the service available in my city?",
|
||||
answer1:
|
||||
'You can find the food at your nearest store without paying anything to customer service.Our charges are extremely low as compared to others.',
|
||||
answer2: 'You can contact us through our email, phone number or our website.',
|
||||
"You can find the food at your nearest store without paying anything to customer service.Our charges are extremely low as compared to others.",
|
||||
answer2: "You can contact us through our email, phone number or our website.",
|
||||
answer3:
|
||||
'You can pay the delivery person in person or pay online as well through credit or debit card.',
|
||||
"You can pay the delivery person in person or pay online as well through credit or debit card.",
|
||||
answer4:
|
||||
'Currently this service is available in cities Islamabad and Karachi you can contact us to avail this service in your city.',
|
||||
add: 'ADD',
|
||||
quantity: 'Quantity',
|
||||
size: 'Size',
|
||||
addToCart: 'Add to Cart',
|
||||
orderNow: 'Order Now',
|
||||
addToCartMessage: 'Added to cart',
|
||||
emptyCart: 'No items in cart',
|
||||
itemTotal: 'Item Total',
|
||||
delvieryCharges: 'Delivery Charges',
|
||||
total: 'Total',
|
||||
contactInfo: 'Contact Info',
|
||||
deliveryAddressmessage: 'Set delivery address',
|
||||
proceedCheckout: 'Proceed to Checkout',
|
||||
paymentText: 'How do you wish to pay?',
|
||||
checkout: 'Checkout',
|
||||
header_title1: 'Credit Card/Debit Card',
|
||||
header_subscript1: 'Pay with Credit or Debit Card',
|
||||
header_title2: 'PayPal',
|
||||
header_subscript2: 'Pay online with PayPal',
|
||||
header_title3: 'Cash on delivery',
|
||||
header_subscript3: 'Pay when you recieve the item',
|
||||
thankYou: 'Thank You!',
|
||||
orderConfirmed: 'Your Order is confirmed',
|
||||
orderAmount: 'Your Order Amount',
|
||||
orderDetail: 'Order Detail',
|
||||
paymentMethod: 'Payment Method',
|
||||
trackOrder: 'Track Order',
|
||||
backToMenu: 'Back To Menu',
|
||||
foodItem: 'Food item',
|
||||
deliveredTo: 'Delivered to',
|
||||
writeAReview: 'Write a Review',
|
||||
orderReceived: 'Order Received',
|
||||
cancelled: 'Cancelled',
|
||||
foodPreparing: 'Food is being prepared',
|
||||
Delivered: 'Delivered',
|
||||
rateAndReview: 'Rate and Review',
|
||||
reviewPlaceholder: 'More detailed reviews get more visibility...',
|
||||
submit: 'Submit',
|
||||
noWorriesText: 'No worries, let us help you out!',
|
||||
yourEmail: 'Your Email',
|
||||
send: 'Send',
|
||||
apply: 'Apply',
|
||||
checkEmail: 'Check your email for reset password link',
|
||||
languageText: 'Please select your required language',
|
||||
countryCodePickerTranslation: 'eng',
|
||||
countryCodeSelect: 'Select Country Code',
|
||||
paymentNotSupported: 'This payment method does not support this Currency',
|
||||
Orders: 'Orders',
|
||||
deliveryTime: 'Delivery Time',
|
||||
myOrders: 'My Orders',
|
||||
newOrders: 'New Orders',
|
||||
titleChat: 'Chat',
|
||||
NoNewOrder: 'No New Order',
|
||||
Somethingisworng: 'Something is worng',
|
||||
PENDING: 'PENDING',
|
||||
ACCEPTED: 'ACCEPTED',
|
||||
PICKED: 'PICKED',
|
||||
DELIVERED: 'DELIVERED',
|
||||
COMPLETED: 'COMPLETED',
|
||||
YourOrderID: 'Your Order ID',
|
||||
ProductPage: 'Product Page',
|
||||
Docs: 'Docs',
|
||||
Blog: 'Blog',
|
||||
AboutUs: 'About Us',
|
||||
Done: 'Done',
|
||||
Cancel: 'Cancel',
|
||||
Usernameisrequired: 'Username is required',
|
||||
Passwordisrequired: 'Password is required',
|
||||
Loggedin: 'Logged in',
|
||||
EnteryourEmailandPassword: 'Enter your Email and Password',
|
||||
EmailorPhone: 'Email or Phone',
|
||||
Password: 'Password',
|
||||
NoOrdersAssignedyet: 'No Orders Assigned yet',
|
||||
Loadingorders: 'Loading orders',
|
||||
Orderassginedtootherrider: 'Order assgined to other rider',
|
||||
CustomerDetails: 'Customer Details',
|
||||
Contact: 'Contact',
|
||||
DelvieryLocation: 'Delviery Location',
|
||||
OrderDetails: 'Order Details',
|
||||
Subtotal: 'Subtotal',
|
||||
Assigntome: 'Assign to me',
|
||||
'About Us': 'About Us',
|
||||
'Product Page': 'Product Page',
|
||||
Order: 'Order',
|
||||
OrderMarkedAs: 'Order marked as',
|
||||
titleLogin: 'Login',
|
||||
Picked: 'Picked'
|
||||
}
|
||||
"Currently this service is available in cities Islamabad and Karachi you can contact us to avail this service in your city.",
|
||||
add: "ADD",
|
||||
quantity: "Quantity",
|
||||
size: "Size",
|
||||
addToCart: "Add to Cart",
|
||||
orderNow: "Order Now",
|
||||
addToCartMessage: "Added to cart",
|
||||
emptyCart: "No items in cart",
|
||||
itemTotal: "Item Total",
|
||||
delvieryCharges: "Delivery Charges",
|
||||
total: "Total",
|
||||
contactInfo: "Contact Info",
|
||||
deliveryAddressmessage: "Set delivery address",
|
||||
proceedCheckout: "Proceed to Checkout",
|
||||
paymentText: "How do you wish to pay?",
|
||||
checkout: "Checkout",
|
||||
header_title1: "Credit Card/Debit Card",
|
||||
header_subscript1: "Pay with Credit or Debit Card",
|
||||
header_title2: "PayPal",
|
||||
header_subscript2: "Pay online with PayPal",
|
||||
header_title3: "Cash on delivery",
|
||||
header_subscript3: "Pay when you recieve the item",
|
||||
thankYou: "Thank You!",
|
||||
orderConfirmed: "Your Order is confirmed",
|
||||
orderAmount: "Your Order Amount",
|
||||
orderDetail: "Order Detail",
|
||||
paymentMethod: "Payment Method",
|
||||
trackOrder: "Track Order",
|
||||
backToMenu: "Back To Menu",
|
||||
foodItem: "Food item",
|
||||
deliveredTo: "Delivered to",
|
||||
writeAReview: "Write a Review",
|
||||
orderReceived: "Order Received",
|
||||
cancelled: "Cancelled",
|
||||
foodPreparing: "Food is being prepared",
|
||||
Delivered: "Delivered",
|
||||
rateAndReview: "Rate and Review",
|
||||
reviewPlaceholder: "More detailed reviews get more visibility...",
|
||||
submit: "Submit",
|
||||
noWorriesText: "No worries, let us help you out!",
|
||||
yourEmail: "Your Email",
|
||||
send: "Send",
|
||||
apply: "Apply",
|
||||
checkEmail: "Check your email for reset password link",
|
||||
languageText: "Please select your required language",
|
||||
countryCodePickerTranslation: "eng",
|
||||
countryCodeSelect: "Select Country Code",
|
||||
paymentNotSupported: "This payment method does not support this Currency",
|
||||
Orders: "Orders",
|
||||
deliveryTime: "Delivery Time",
|
||||
myOrders: "My Orders",
|
||||
newOrders: "New Orders",
|
||||
titleChat: "Chat",
|
||||
NoNewOrder: "No New Order",
|
||||
Somethingisworng: "Something is worng",
|
||||
PENDING: "PENDING",
|
||||
ACCEPTED: "ACCEPTED",
|
||||
PICKED: "PICKED",
|
||||
DELIVERED: "DELIVERED",
|
||||
COMPLETED: "COMPLETED",
|
||||
YourOrderID: "Your Order ID",
|
||||
ProductPage: "Product Page",
|
||||
Docs: "Docs",
|
||||
Blog: "Blog",
|
||||
AboutUs: "About Us",
|
||||
Done: "Done",
|
||||
Cancel: "Cancel",
|
||||
Usernameisrequired: "Username is required",
|
||||
Passwordisrequired: "Password is required",
|
||||
Loggedin: "Logged in",
|
||||
EnteryourEmailandPassword: "Enter your Email and Password",
|
||||
EmailorPhone: "Email or Phone",
|
||||
Password: "Password",
|
||||
NoOrdersAssignedyet: "No Orders Assigned yet",
|
||||
Loadingorders: "Loading orders",
|
||||
Orderassginedtootherrider: "Order assgined to other rider",
|
||||
CustomerDetails: "Customer Details",
|
||||
Contact: "Contact",
|
||||
DelvieryLocation: "Delivery Location",
|
||||
OrderDetails: "Order Details",
|
||||
Subtotal: "Subtotal",
|
||||
Assigntome: "Assign to me",
|
||||
"About Us": "About Us",
|
||||
"Product Page": "Product Page",
|
||||
Order: "Order",
|
||||
OrderMarkedAs: "Order marked as",
|
||||
titleLogin: "Login",
|
||||
Picked: "Picked",
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -55,9 +55,11 @@
|
|||
"graphql": "^14.3.1",
|
||||
"graphql-tag": "^2.10.1",
|
||||
"i18n-js": "^3.3.0",
|
||||
"i18next": "^23.8.2",
|
||||
"patch-package": "^6.5.1",
|
||||
"react": "18.1.0",
|
||||
"react-apollo": "^2.5.8",
|
||||
"react-i18next": "^14.0.5",
|
||||
"react-native": "0.70.8",
|
||||
"react-native-animatable": "^1.3.2",
|
||||
"react-native-flash-message": "^0.1.13",
|
||||
|
|
|
|||
|
|
@ -1,35 +1,36 @@
|
|||
import React, { useContext } from 'react'
|
||||
import { FlatList } from 'react-native'
|
||||
import Spinner from '../Spinner/Spinner'
|
||||
import Order from '../Order/Order'
|
||||
import ConfigurationContext from '../../context/configuration'
|
||||
import UserContext from '../../context/user'
|
||||
import TextError from '../Text/TextError/TextError'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { verticalScale } from '../../utilities/scaling'
|
||||
import i18n from '../../../i18n'
|
||||
import React, { useContext } from "react";
|
||||
import { FlatList } from "react-native";
|
||||
import Spinner from "../Spinner/Spinner";
|
||||
import Order from "../Order/Order";
|
||||
import ConfigurationContext from "../../context/configuration";
|
||||
import UserContext from "../../context/user";
|
||||
import TextError from "../Text/TextError/TextError";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { verticalScale } from "../../utilities/scaling";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function Orders() {
|
||||
const navigation = useNavigation()
|
||||
const configuration = useContext(ConfigurationContext)
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation();
|
||||
const configuration = useContext(ConfigurationContext);
|
||||
const {
|
||||
loadingAssigned,
|
||||
errorAssigned,
|
||||
assignedOrders,
|
||||
refetchAssigned,
|
||||
networkStatusAssigned
|
||||
} = useContext(UserContext)
|
||||
networkStatusAssigned,
|
||||
} = useContext(UserContext);
|
||||
|
||||
if (loadingAssigned) return <Spinner />
|
||||
if (errorAssigned) return <TextError text={i18n.t('Somethingisworng')} />
|
||||
if (loadingAssigned) return <Spinner />;
|
||||
if (errorAssigned) return <TextError text={t("Somethingisworng")} />;
|
||||
|
||||
function emptyView() {
|
||||
return <TextError text={i18n.t('NoOrdersAssignedyet')} />
|
||||
return <TextError text={t("NoOrdersAssignedyet")} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
keyExtractor={item => item._id}
|
||||
keyExtractor={(item) => item._id}
|
||||
data={assignedOrders.length > 0 ? assignedOrders.slice().reverse() : []}
|
||||
refreshing={networkStatusAssigned === 4}
|
||||
onRefresh={() => refetchAssigned()}
|
||||
|
|
@ -45,13 +46,13 @@ export default function Orders() {
|
|||
orderDatetime={item.createdAt}
|
||||
paymentMethod={item.payment_method}
|
||||
onPress={() => {
|
||||
navigation.navigate('OrderDetail', {
|
||||
navigation.navigate("OrderDetail", {
|
||||
id: item._id,
|
||||
orderId: item.order_id
|
||||
})
|
||||
orderId: item.order_id,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,10 @@ import UserContext from '../../context/user'
|
|||
import TextError from '../Text/TextError/TextError'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { verticalScale } from '../../utilities/scaling'
|
||||
import i18n from '../../../i18n'
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function Orders() {
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation()
|
||||
const configuration = useContext(ConfigurationContext)
|
||||
const {
|
||||
|
|
@ -21,11 +22,11 @@ export default function Orders() {
|
|||
} = useContext(UserContext)
|
||||
|
||||
function emptyView() {
|
||||
return <TextError text={i18n.t('NoNewOrder')} />
|
||||
return <TextError text={t('NoNewOrder')} />
|
||||
}
|
||||
|
||||
if (loadingUnAssigned) return <Spinner />
|
||||
if (errorUnAssigned) return <TextError text={i18n.t('Somethingisworng')} />
|
||||
if (errorUnAssigned) return <TextError text={t('Somethingisworng')} />
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { View, TouchableOpacity } from 'react-native'
|
|||
import { scale } from '../../utilities/scaling'
|
||||
import colors from '../../utilities/colors'
|
||||
import styles from './style'
|
||||
import i18n from '../../../i18n'
|
||||
import { useTranslation } from "react-i18next";
|
||||
import TextDefault from '../Text/TextDefault/TextDefault'
|
||||
import { alignment } from '../../utilities/alignment'
|
||||
import { AntDesign } from '@expo/vector-icons'
|
||||
|
|
@ -36,7 +36,7 @@ function Order(props) {
|
|||
// const cardHeight = props.height
|
||||
// ? props.height
|
||||
// : PixelRatio.getFontScale() * verticalScale(150)
|
||||
|
||||
const { t } = useTranslation();
|
||||
const checkStatus = status => {
|
||||
const obj = orderStatuses.filter(x => {
|
||||
return x.key === status
|
||||
|
|
@ -60,7 +60,7 @@ function Order(props) {
|
|||
numberOfLines={2}
|
||||
bold
|
||||
textColor={colors.placeHolderColor}>
|
||||
{i18n.t('YourOrderID')}
|
||||
{t('YourOrderID')}
|
||||
</TextDefault>
|
||||
<TextDefault H4 bolder>
|
||||
{props.orderId}
|
||||
|
|
@ -77,7 +77,7 @@ function Order(props) {
|
|||
bold
|
||||
uppercase
|
||||
style={{ ...alignment.PLxSmall, ...alignment.PRxSmall }}>
|
||||
{i18n.t(props.orderStatus)}
|
||||
{t(props.orderStatus)}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={{ paddingLeft: '5%' }}>
|
||||
|
|
@ -100,19 +100,19 @@ function Order(props) {
|
|||
style={alignment.MTmedium}
|
||||
textColor={colors.placeHolderColor}
|
||||
bold>
|
||||
{i18n.t('totalOrderAmount')}
|
||||
{t('totalOrderAmount')}
|
||||
</TextDefault>
|
||||
<TextDefault
|
||||
textColor={colors.placeHolderColor}
|
||||
bold
|
||||
style={{ ...alignment.MTxSmall }}>
|
||||
{i18n.t('paymentMethod')}
|
||||
{t('paymentMethod')}
|
||||
</TextDefault>
|
||||
<TextDefault
|
||||
textColor={colors.placeHolderColor}
|
||||
bold
|
||||
style={{ ...alignment.MTxSmall }}>
|
||||
{i18n.t('deliveryTime')}
|
||||
{t('deliveryTime')}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View>
|
||||
|
|
@ -140,14 +140,14 @@ function Order(props) {
|
|||
{/* <View style={[styles.card_container__left]}>
|
||||
<View style={[styles.left_toptextLine]}>
|
||||
<TextDefault center H5 bold textColor={colors.placeHolderColor}>
|
||||
Your {i18n.t('orderId')}
|
||||
Your {t('orderId')}
|
||||
</TextDefault>
|
||||
<TextDefault H3 bolder>
|
||||
{props.orderId}
|
||||
</TextDefault>
|
||||
</View> */}
|
||||
{/* <TextDefault style={alignment.MTmedium} textColor={colors.placeHolderColor} bold>
|
||||
{i18n.t('totalOrderAmount')} - {props.orderAmount}
|
||||
{t('totalOrderAmount')} - {props.orderAmount}
|
||||
</TextDefault>
|
||||
<TextDefault
|
||||
textColor={colors.placeHolderColor}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
import React from 'react'
|
||||
import { View } from 'react-native'
|
||||
import gql from 'graphql-tag'
|
||||
import Spinner from '../../Spinner/Spinner'
|
||||
import styles from './styles'
|
||||
import { profile } from '../../../apollo/queries'
|
||||
import { useQuery } from '@apollo/react-hooks'
|
||||
import TextDefault from '../../Text/TextDefault/TextDefault'
|
||||
import colors from '../../../utilities/colors'
|
||||
import TextError from '../../Text/TextError/TextError'
|
||||
import i18n from '../../../../i18n'
|
||||
import React from "react";
|
||||
import { View } from "react-native";
|
||||
import gql from "graphql-tag";
|
||||
import Spinner from "../../Spinner/Spinner";
|
||||
import styles from "./styles";
|
||||
import { profile } from "../../../apollo/queries";
|
||||
import { useQuery } from "@apollo/react-hooks";
|
||||
import TextDefault from "../../Text/TextDefault/TextDefault";
|
||||
import colors from "../../../utilities/colors";
|
||||
import TextError from "../../Text/TextError/TextError";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const PROFILE = gql`
|
||||
${profile}
|
||||
`
|
||||
`;
|
||||
|
||||
function Profile() {
|
||||
const { data, loading, error } = useQuery(PROFILE)
|
||||
if (loading) return <Spinner />
|
||||
if (error) return <TextError text="Something is worng" />
|
||||
const { t } = useTranslation();
|
||||
const { data, loading, error } = useQuery(PROFILE);
|
||||
if (loading) return <Spinner />;
|
||||
if (error) return <TextError text="Something is worng" />;
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.leftContainer}>
|
||||
|
|
@ -31,14 +32,14 @@ function Profile() {
|
|||
</View>
|
||||
<View style={styles.rightContainer}>
|
||||
<TextDefault H5 bold textColor={colors.fontSecondColor}>
|
||||
{i18n.t('welcome')}
|
||||
{t("welcome")}
|
||||
</TextDefault>
|
||||
<TextDefault H3 textColor={colors.fontSecondColor} bolder>
|
||||
{data.rider.username}
|
||||
</TextDefault>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Profile
|
||||
export default Profile;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import PropTypes from 'prop-types'
|
||||
import React, { useContext } from 'react'
|
||||
import { Platform, View } from 'react-native'
|
||||
import i18n from '../../../i18n'
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AuthContext } from '../../context/auth'
|
||||
import { NAVIGATION_SCREEN } from '../../utilities/constant'
|
||||
import NavItem from './NavItem/NavItem'
|
||||
|
|
@ -40,6 +40,7 @@ const datas = [
|
|||
]
|
||||
|
||||
function SidebBar({ navigation }) {
|
||||
const { t } = useTranslation();
|
||||
const { logout } = useContext(AuthContext)
|
||||
|
||||
// if (loading) return <Spinner />
|
||||
|
|
@ -64,7 +65,7 @@ function SidebBar({ navigation }) {
|
|||
}
|
||||
}}
|
||||
icon={data.icon}
|
||||
title={i18n.t(data.title)}
|
||||
title={t(data.title)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
|
|
@ -78,7 +79,7 @@ function SidebBar({ navigation }) {
|
|||
navigation.closeDrawer()
|
||||
}}
|
||||
icon={'sign-out'}
|
||||
title={i18n.t('titleLogout')}
|
||||
title={t('titleLogout')}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -1,91 +1,97 @@
|
|||
import { Feather, FontAwesome } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import React, { useCallback, useEffect, useState, useLayoutEffect } from 'react'
|
||||
import { Keyboard, View } from 'react-native'
|
||||
import { Feather, FontAwesome } from "@expo/vector-icons";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useLayoutEffect,
|
||||
} from "react";
|
||||
import { Keyboard, View } from "react-native";
|
||||
import {
|
||||
Bubble,
|
||||
GiftedChat,
|
||||
InputToolbar,
|
||||
Send
|
||||
} from 'react-native-gifted-chat'
|
||||
import { MainWrapper, TextDefault } from '../../components'
|
||||
import { alignment } from '../../utilities/alignment'
|
||||
import colors from '../../utilities/colors'
|
||||
import { scale } from '../../utilities/scaling'
|
||||
import useStyle from './styles'
|
||||
import i18n from '../../../i18n'
|
||||
Send,
|
||||
} from "react-native-gifted-chat";
|
||||
import { MainWrapper, TextDefault } from "../../components";
|
||||
import { alignment } from "../../utilities/alignment";
|
||||
import colors from "../../utilities/colors";
|
||||
import { scale } from "../../utilities/scaling";
|
||||
import useStyle from "./styles";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const UserInfo = {
|
||||
_id: 1,
|
||||
name: 'Jason',
|
||||
active: true
|
||||
}
|
||||
name: "Jason",
|
||||
active: true,
|
||||
};
|
||||
|
||||
function Chat() {
|
||||
const styles = useStyle()
|
||||
const navigation = useNavigation()
|
||||
const [messages, setMessages] = useState([])
|
||||
const [isTyping, setIsTyping] = useState(false)
|
||||
const { t } = useTranslation();
|
||||
const styles = useStyle();
|
||||
const navigation = useNavigation();
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [isTyping, setIsTyping] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
Keyboard.addListener('keyboardDidShow', _keyboardDidShow)
|
||||
Keyboard.addListener('keyboardDidHide', _keyboardDidHide)
|
||||
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
|
||||
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
|
||||
|
||||
// cleanup function
|
||||
return () => {
|
||||
Keyboard.removeListener('keyboardDidShow', _keyboardDidShow)
|
||||
Keyboard.removeListener('keyboardDidHide', _keyboardDidHide)
|
||||
}
|
||||
}, [])
|
||||
Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
|
||||
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const _keyboardDidShow = () => setIsTyping(true)
|
||||
const _keyboardDidHide = () => setIsTyping(false)
|
||||
const _keyboardDidShow = () => setIsTyping(true);
|
||||
const _keyboardDidHide = () => setIsTyping(false);
|
||||
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerTitle: i18n.t('titleChat')
|
||||
})
|
||||
headerTitle: t("titleChat"),
|
||||
});
|
||||
setMessages([
|
||||
{
|
||||
_id: 1,
|
||||
text: 'How can I help you?',
|
||||
text: "How can I help you?",
|
||||
sent: true,
|
||||
received: true,
|
||||
createdAt: new Date(),
|
||||
user: {
|
||||
_id: 2,
|
||||
name: 'React Native',
|
||||
avatar: 'https://placeimg.com/140/140/any'
|
||||
}
|
||||
}
|
||||
])
|
||||
}, [navigation])
|
||||
name: "React Native",
|
||||
avatar: "https://placeimg.com/140/140/any",
|
||||
},
|
||||
},
|
||||
]);
|
||||
}, [navigation]);
|
||||
|
||||
const onSend = useCallback((messages = []) => {
|
||||
setMessages(previousMessages =>
|
||||
setMessages((previousMessages) =>
|
||||
GiftedChat.append(previousMessages, messages)
|
||||
)
|
||||
}, [])
|
||||
);
|
||||
}, []);
|
||||
|
||||
const renderBubble = props => {
|
||||
const renderBubble = (props) => {
|
||||
return (
|
||||
<Bubble
|
||||
{...props}
|
||||
textStyle={{
|
||||
right: {
|
||||
color: colors.fontMainColor
|
||||
color: colors.fontMainColor,
|
||||
},
|
||||
left: {
|
||||
color: colors.fontMainColor
|
||||
}
|
||||
color: colors.fontMainColor,
|
||||
},
|
||||
}}
|
||||
bottomContainerStyle={{
|
||||
right: {
|
||||
...alignment.PTxSmall
|
||||
...alignment.PTxSmall,
|
||||
},
|
||||
left: {
|
||||
...alignment.PTxSmall
|
||||
}
|
||||
...alignment.PTxSmall,
|
||||
},
|
||||
}}
|
||||
wrapperStyle={{
|
||||
right: {
|
||||
|
|
@ -100,11 +106,11 @@ function Chat() {
|
|||
shadowColor: colors.black,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 1
|
||||
height: 1,
|
||||
},
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 2,
|
||||
elevation: 3
|
||||
elevation: 3,
|
||||
},
|
||||
left: {
|
||||
minWidth: 150,
|
||||
|
|
@ -118,36 +124,36 @@ function Chat() {
|
|||
shadowColor: colors.black,
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 1
|
||||
height: 1,
|
||||
},
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 2,
|
||||
elevation: 3
|
||||
}
|
||||
elevation: 3,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const renderSend = props => (
|
||||
const renderSend = (props) => (
|
||||
<Send {...props} containerStyle={styles.sendBtn}>
|
||||
<View style={styles.rightBtn}>
|
||||
<Feather
|
||||
name={'send'}
|
||||
name={"send"}
|
||||
color={colors.buttonText}
|
||||
size={scale(17)}
|
||||
style={{
|
||||
transform: [
|
||||
{ rotateZ: '45deg' },
|
||||
{ rotateZ: "45deg" },
|
||||
{ translateY: 2 },
|
||||
{ translateX: -1 }
|
||||
]
|
||||
{ translateX: -1 },
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</Send>
|
||||
)
|
||||
const customtInputToolbar = props => {
|
||||
);
|
||||
const customtInputToolbar = (props) => {
|
||||
return (
|
||||
<InputToolbar
|
||||
{...props}
|
||||
|
|
@ -155,8 +161,8 @@ function Chat() {
|
|||
renderSend={renderSend}
|
||||
render
|
||||
/>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainWrapper>
|
||||
|
|
@ -167,7 +173,7 @@ function Chat() {
|
|||
color={UserInfo.active ? colors.iconPink : colors.fontSecondColor}
|
||||
/>
|
||||
<TextDefault medium H5 style={alignment.PLsmall}>
|
||||
{UserInfo.active ? UserInfo.name : 'Offline'}
|
||||
{UserInfo.active ? UserInfo.name : "Offline"}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<GiftedChat
|
||||
|
|
@ -176,7 +182,7 @@ function Chat() {
|
|||
user={UserInfo}
|
||||
isTyping={isTyping}
|
||||
messages={messages}
|
||||
onSend={messages => onSend(messages)}
|
||||
onSend={(messages) => onSend(messages)}
|
||||
renderAvatar={() => null}
|
||||
renderBubble={renderBubble}
|
||||
renderInputToolbar={customtInputToolbar}
|
||||
|
|
@ -193,20 +199,20 @@ function Chat() {
|
|||
// }
|
||||
timeTextStyle={{
|
||||
left: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
color: colors.fontMainColor,
|
||||
fontSize: 11,
|
||||
textAlign: 'right'
|
||||
textAlign: "right",
|
||||
},
|
||||
right: {
|
||||
color: colors.fontMainColor,
|
||||
fontSize: 11
|
||||
}
|
||||
fontSize: 11,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</MainWrapper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Chat
|
||||
export default Chat;
|
||||
|
|
|
|||
|
|
@ -1,36 +1,39 @@
|
|||
import { AntDesign } from '@expo/vector-icons'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import React, { useLayoutEffect } from 'react'
|
||||
import { TouchableOpacity, View } from 'react-native'
|
||||
import i18n from '../../../i18n'
|
||||
import { MainWrapper, TextDefault } from '../../components'
|
||||
import colors from '../../utilities/colors'
|
||||
import { scale, verticalScale } from '../../utilities/scaling'
|
||||
import styles from './styles'
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import React, { useLayoutEffect } from "react";
|
||||
import { TouchableOpacity, View } from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { MainWrapper, TextDefault } from "../../components";
|
||||
import colors from "../../utilities/colors";
|
||||
import { scale, verticalScale } from "../../utilities/scaling";
|
||||
import styles from "./styles";
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: 'Product Page',
|
||||
url:
|
||||
'https://enatega.com/enatega-single-vendor/'
|
||||
title: "Product Page",
|
||||
url: "https://enatega.com/enatega-single-vendor/",
|
||||
},
|
||||
{ title: 'Docs', url: 'https://enatega.com/docs/enatega-singlevendor-rider-app-introduction/' },
|
||||
{
|
||||
title: 'Blog',
|
||||
title: "Docs",
|
||||
url:
|
||||
'https://enatega.com/blog/'
|
||||
"https://enatega.com/docs/enatega-singlevendor-rider-app-introduction/",
|
||||
},
|
||||
{ title: 'About Us', url: 'https://ninjascode.com/our-team/' }
|
||||
]
|
||||
{
|
||||
title: "Blog",
|
||||
url: "https://enatega.com/blog/",
|
||||
},
|
||||
{ title: "About Us", url: "https://ninjascode.com/our-team/" },
|
||||
];
|
||||
function Help() {
|
||||
const navigation = useNavigation()
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation();
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: null,
|
||||
headerTitle: i18n.t('titleHelp')
|
||||
})
|
||||
}, [navigation])
|
||||
headerTitle: t("titleHelp"),
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
return (
|
||||
<MainWrapper>
|
||||
|
|
@ -38,17 +41,18 @@ function Help() {
|
|||
{links.map(({ title, url }, index) => (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.8}
|
||||
onPress={() => navigation.navigate('HelpBrowser', { title, url })}
|
||||
onPress={() => navigation.navigate("HelpBrowser", { title, url })}
|
||||
style={styles.itemContainer}
|
||||
key={index}>
|
||||
key={index}
|
||||
>
|
||||
<TextDefault textColor={colors.fontMainColor} H4>
|
||||
{i18n.t(title)}
|
||||
{t(title)}
|
||||
</TextDefault>
|
||||
<AntDesign name="arrowright" size={scale(20)} />
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</MainWrapper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Help
|
||||
export default Help;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
import { useNavigation, useRoute } from '@react-navigation/native'
|
||||
import React, { useLayoutEffect } from 'react'
|
||||
import { WebView } from 'react-native-webview'
|
||||
import { MainWrapper, Spinner } from '../../components'
|
||||
import i18n from '../../../i18n'
|
||||
import { useNavigation, useRoute } from "@react-navigation/native";
|
||||
import React, { useLayoutEffect } from "react";
|
||||
import { WebView } from "react-native-webview";
|
||||
import { MainWrapper, Spinner } from "../../components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function HelpBrowser() {
|
||||
const navigation = useNavigation()
|
||||
const route = useRoute()
|
||||
const { title, url } = route.params
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute();
|
||||
const { title, url } = route.params;
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: null,
|
||||
headerTitle: i18n.t(title)
|
||||
})
|
||||
}, [navigation])
|
||||
headerTitle: t(title),
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
return (
|
||||
<MainWrapper>
|
||||
|
|
@ -24,7 +25,7 @@ function HelpBrowser() {
|
|||
renderLoading={() => <Spinner />}
|
||||
/>
|
||||
</MainWrapper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default HelpBrowser
|
||||
export default HelpBrowser;
|
||||
|
|
|
|||
|
|
@ -1,68 +1,75 @@
|
|||
import AsyncStorage from '@react-native-async-storage/async-storage'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import * as Localization from 'expo-localization'
|
||||
import * as Updates from 'expo-updates'
|
||||
import React, { useEffect, useLayoutEffect, useState } from 'react'
|
||||
import { Platform, TouchableOpacity, View } from 'react-native'
|
||||
import i18n from '../../../i18n'
|
||||
import { MainWrapper } from '../../components'
|
||||
import RadioButton from '../../components/FdRadioBtn/RadioBtn'
|
||||
import TextDefault from '../../components/Text/TextDefault/TextDefault'
|
||||
import { alignment } from '../../utilities/alignment'
|
||||
import colors from '../../utilities/colors'
|
||||
import { scale } from '../../utilities/scaling'
|
||||
import styles from './styles'
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import * as Localization from "expo-localization";
|
||||
import * as Updates from "expo-updates";
|
||||
import React, { useEffect, useLayoutEffect, useState } from "react";
|
||||
import { TouchableOpacity, View, ActivityIndicator } from "react-native";
|
||||
import i18n from "../../../i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { MainWrapper } from "../../components";
|
||||
import RadioButton from "../../components/FdRadioBtn/RadioBtn";
|
||||
import TextDefault from "../../components/Text/TextDefault/TextDefault";
|
||||
import { alignment } from "../../utilities/alignment";
|
||||
import colors from "../../utilities/colors";
|
||||
import { scale } from "../../utilities/scaling";
|
||||
import styles from "./styles";
|
||||
|
||||
const languageTypes = [
|
||||
{ value: 'English', code: 'en', index: 0 },
|
||||
{ value: 'français', code: 'fr', index: 1 },
|
||||
{ value: 'ភាសាខ្មែរ', code: 'km', index: 2 },
|
||||
{ value: '中文', code: 'zh', index: 3 },
|
||||
{ value: 'Deutsche', code: 'de', index: 4 },
|
||||
{ value: 'Arabic', code: 'ar', index: 5 }
|
||||
]
|
||||
{ value: "English", code: "en", index: 0 },
|
||||
{ value: "français", code: "fr", index: 1 },
|
||||
{ value: "ភាសាខ្មែរ", code: "km", index: 2 },
|
||||
{ value: "中文", code: "zh", index: 3 },
|
||||
{ value: "Deutsche", code: "de", index: 4 },
|
||||
{ value: "Arabic", code: "ar", index: 5 },
|
||||
];
|
||||
|
||||
function Language() {
|
||||
const navigation = useNavigation()
|
||||
const [activeRadio, setActiveRadio] = useState(languageTypes[0].index)
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const [languageName, languageNameSetter] = useState('English')
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation();
|
||||
const [activeRadio, setActiveRadio] = useState(languageTypes[0].index);
|
||||
const [languageName, languageNameSetter] = useState("English");
|
||||
const [loadinglang, setLoadingLang] = useState(false);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: i18n.t('titleLanguage')
|
||||
})
|
||||
}, [navigation])
|
||||
title: t("titleLanguage"),
|
||||
});
|
||||
}, [t, navigation]);
|
||||
|
||||
useEffect(() => {
|
||||
selectedLanguageFunc()
|
||||
}, [])
|
||||
selectedLanguageFunc();
|
||||
}, []);
|
||||
|
||||
async function selectedLanguageFunc() {
|
||||
const lang = await AsyncStorage.getItem('enatega-language')
|
||||
const lang = await AsyncStorage.getItem("enatega-language");
|
||||
if (lang) {
|
||||
const defLang = languageTypes.findIndex(el => el.code === lang)
|
||||
const langName = languageTypes[defLang].value
|
||||
setActiveRadio(defLang)
|
||||
languageNameSetter(langName)
|
||||
const defLang = languageTypes.findIndex((el) => el.code === lang);
|
||||
const langName = languageTypes[defLang].value;
|
||||
setActiveRadio(defLang);
|
||||
languageNameSetter(langName);
|
||||
}
|
||||
}
|
||||
|
||||
async function onSelectedLanguage() {
|
||||
const languageInd = activeRadio
|
||||
|
||||
if (Platform.OS === 'android') {
|
||||
const localization = await Localization.getLocalizationAsync()
|
||||
localization.locale = languageTypes[languageInd].code
|
||||
await AsyncStorage.setItem(
|
||||
'enatega-language',
|
||||
languageTypes[languageInd].code
|
||||
)
|
||||
try {
|
||||
Updates.reloadAsync()
|
||||
} catch (error) {
|
||||
console.log('err', error)
|
||||
setLoadingLang(true);
|
||||
const languageInd = activeRadio;
|
||||
await AsyncStorage.setItem(
|
||||
"enatega-language",
|
||||
languageTypes[languageInd].code
|
||||
);
|
||||
var lang = await AsyncStorage.getItem("enatega-language");
|
||||
if (lang) {
|
||||
const defLang = languageTypes.findIndex((el) => el.code === lang);
|
||||
const langName = languageTypes[defLang].value;
|
||||
languageNameSetter(langName);
|
||||
}
|
||||
i18n.changeLanguage(lang);
|
||||
//modalVisibleSetter(false);
|
||||
} catch (error) {
|
||||
console.error("Error during language selection:", error);
|
||||
} finally {
|
||||
setLoadingLang(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +82,8 @@ function Language() {
|
|||
activeOpacity={0.7}
|
||||
key={index}
|
||||
onPress={() => setActiveRadio(item.index)}
|
||||
style={[styles.radioContainer]}>
|
||||
style={[styles.radioContainer]}
|
||||
>
|
||||
<TextDefault
|
||||
numberOfLines={1}
|
||||
textColor={
|
||||
|
|
@ -85,11 +93,12 @@ function Language() {
|
|||
}
|
||||
bold
|
||||
H5
|
||||
style={alignment.MLsmall}>
|
||||
style={alignment.MLsmall}
|
||||
>
|
||||
{item.value}
|
||||
</TextDefault>
|
||||
<RadioButton
|
||||
animation={'bounceIn'}
|
||||
animation={"bounceIn"}
|
||||
size={13}
|
||||
outerColor={colors.tagColor}
|
||||
innerColor={colors.radioColor}
|
||||
|
|
@ -106,35 +115,42 @@ function Language() {
|
|||
onPress={() => onSelectedLanguage()}
|
||||
style={{
|
||||
backgroundColor: colors.tagColor,
|
||||
width: '72%',
|
||||
width: "72%",
|
||||
borderRadius: scale(10),
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: scale(40),
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<TextDefault H5 bold textColor={colors.fontSecondColor}>
|
||||
{i18n.t('Done')}
|
||||
{t("Done")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.8}
|
||||
onPress={() => navigation.goBack()}
|
||||
style={{
|
||||
width: '72%',
|
||||
alignSelf: 'center',
|
||||
alignItems: 'center',
|
||||
width: "72%",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: scale(40),
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<TextDefault H5 bold textColor={colors.fontMainColor}>
|
||||
{i18n.t('Cancel')}
|
||||
{t("Cancel")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{loadinglang && (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</MainWrapper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Language
|
||||
export default Language;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
// LanguageContext.js
|
||||
import React, { createContext, useState, useContext } from 'react';
|
||||
|
||||
const LanguageContext = createContext();
|
||||
|
||||
export const LanguageProvider = ({ children }) => {
|
||||
const [selectedLanguage, setSelectedLanguage] = useState("en");
|
||||
|
||||
return (
|
||||
<LanguageContext.Provider value={{ selectedLanguage, setSelectedLanguage }}>
|
||||
{children}
|
||||
</LanguageContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useLanguage = () => useContext(LanguageContext);
|
||||
|
|
@ -1,114 +1,117 @@
|
|||
import { useMutation } from '@apollo/react-hooks'
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import Constants from 'expo-constants'
|
||||
import * as Notifications from 'expo-notifications'
|
||||
import gql from 'graphql-tag'
|
||||
import React, { useContext, useEffect, useState,useLayoutEffect } from 'react'
|
||||
import { useMutation } from "@apollo/react-hooks";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import Constants from "expo-constants";
|
||||
import * as Notifications from "expo-notifications";
|
||||
import gql from "graphql-tag";
|
||||
import React, { useContext, useEffect, useState, useLayoutEffect } from "react";
|
||||
import {
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { FilledTextField } from 'react-native-material-textfield'
|
||||
import Logo from '../../../assets/images/Svg/Logo'
|
||||
import i18n from '../../../i18n'
|
||||
import { riderLogin } from '../../apollo/mutations'
|
||||
import { Spinner, TextDefault, WrapperView } from '../../components'
|
||||
import { FlashMessage } from '../../components/FlashMessage/FlashMessage'
|
||||
import { AuthContext } from '../../context/auth'
|
||||
import { alignment } from '../../utilities/alignment'
|
||||
import colors from '../../utilities/colors'
|
||||
import { scale } from '../../utilities/scaling'
|
||||
import useStyle from './styles'
|
||||
View,
|
||||
} from "react-native";
|
||||
import { FilledTextField } from "react-native-material-textfield";
|
||||
import Logo from "../../../assets/images/Svg/Logo";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { riderLogin } from "../../apollo/mutations";
|
||||
import { Spinner, TextDefault, WrapperView } from "../../components";
|
||||
import { FlashMessage } from "../../components/FlashMessage/FlashMessage";
|
||||
import { AuthContext } from "../../context/auth";
|
||||
import { alignment } from "../../utilities/alignment";
|
||||
import colors from "../../utilities/colors";
|
||||
import { scale } from "../../utilities/scaling";
|
||||
import useStyle from "./styles";
|
||||
|
||||
const RIDER_LOGIN = gql`
|
||||
${riderLogin}
|
||||
`
|
||||
`;
|
||||
|
||||
export default function Login() {
|
||||
const styles = useStyle()
|
||||
const navigation = useNavigation()
|
||||
const [username, setUsername] = useState('rider')
|
||||
const [password, setPassword] = useState('123123')
|
||||
const [usernameError, setUsernameError] = useState('')
|
||||
const [passwordError, setPasswordError] = useState('')
|
||||
|
||||
const { setTokenAsync } = useContext(AuthContext)
|
||||
const { t } = useTranslation();
|
||||
const styles = useStyle();
|
||||
const navigation = useNavigation();
|
||||
const [username, setUsername] = useState("rider");
|
||||
const [password, setPassword] = useState("123123");
|
||||
const [usernameError, setUsernameError] = useState("");
|
||||
const [passwordError, setPasswordError] = useState("");
|
||||
|
||||
const { setTokenAsync } = useContext(AuthContext);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: null,
|
||||
headerTitle: i18n.t('titleHelp')
|
||||
})
|
||||
}, [navigation])
|
||||
headerTitle: t("titleHelp"),
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
const [mutate, { loading }] = useMutation(RIDER_LOGIN, {
|
||||
onCompleted,
|
||||
onError
|
||||
})
|
||||
onError,
|
||||
});
|
||||
|
||||
function validateForm() {
|
||||
let res = true
|
||||
setUsernameError('')
|
||||
setPasswordError('')
|
||||
let res = true;
|
||||
setUsernameError("");
|
||||
setPasswordError("");
|
||||
|
||||
if (!username) {
|
||||
setUsernameError(i18n.t('Usernameisrequired'))
|
||||
res = false
|
||||
setUsernameError(t("Usernameisrequired"));
|
||||
res = false;
|
||||
}
|
||||
if (!password) {
|
||||
setPasswordError(i18n.t('Passwordisrequired'))
|
||||
res = false
|
||||
setPasswordError(t("Passwordisrequired"));
|
||||
res = false;
|
||||
}
|
||||
return res
|
||||
return res;
|
||||
}
|
||||
|
||||
async function onCompleted(data) {
|
||||
FlashMessage({
|
||||
message: i18n.t('Loggedin')
|
||||
})
|
||||
await AsyncStorage.setItem('rider-id', data.riderLogin.userId)
|
||||
setTokenAsync(data.riderLogin.token)
|
||||
message: t("Loggedin"),
|
||||
});
|
||||
await AsyncStorage.setItem("rider-id", data.riderLogin.userId);
|
||||
setTokenAsync(data.riderLogin.token);
|
||||
}
|
||||
function onError({ networkError, graphQLErrors }) {
|
||||
console.log('errors', networkError, graphQLErrors)
|
||||
let message = ''
|
||||
console.log("errors", networkError, graphQLErrors);
|
||||
let message = "";
|
||||
if (!!graphQLErrors && graphQLErrors.length) {
|
||||
message = graphQLErrors[0].message
|
||||
message = graphQLErrors[0].message;
|
||||
}
|
||||
if (!!networkError) {
|
||||
message = networkError.result.errors[0].message
|
||||
message = networkError.result.errors[0].message;
|
||||
}
|
||||
FlashMessage({
|
||||
message: message
|
||||
})
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<WrapperView>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
style={styles.flex}>
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={styles.flex}
|
||||
>
|
||||
<ScrollView
|
||||
style={styles.flex}
|
||||
contentContainerStyle={styles.scrollContent}>
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
>
|
||||
<View style={[styles.flex, styles.container]}>
|
||||
<Logo width={scale(130)} height={scale(130)} />
|
||||
<View style={styles.width100}>
|
||||
<TextDefault
|
||||
style={alignment.MBmedium}
|
||||
textColor={colors.placeHolderColor}>
|
||||
{i18n.t('EnteryourEmailandPassword')}
|
||||
textColor={colors.placeHolderColor}
|
||||
>
|
||||
{t("EnteryourEmailandPassword")}
|
||||
</TextDefault>
|
||||
<FilledTextField
|
||||
defaultValue={'rider'}
|
||||
defaultValue={"rider"}
|
||||
error={usernameError}
|
||||
keyboardType={'email-address'}
|
||||
label={i18n.t('EmailorPhone')}
|
||||
keyboardType={"email-address"}
|
||||
label={t("EmailorPhone")}
|
||||
labelFontSize={scale(12)}
|
||||
fontSize={scale(12)}
|
||||
activeLineWidth={0}
|
||||
|
|
@ -120,15 +123,15 @@ export default function Login() {
|
|||
tintColor={colors.tagColor}
|
||||
labelTextStyle={styles.labelStyle}
|
||||
inputContainerStyle={styles.textContainer}
|
||||
onChangeText={text => {
|
||||
setUsername(text.toLowerCase().trim())
|
||||
onChangeText={(text) => {
|
||||
setUsername(text.toLowerCase().trim());
|
||||
}}
|
||||
/>
|
||||
<View style={styles.mt15} />
|
||||
<FilledTextField
|
||||
defaultValue={'123123'}
|
||||
defaultValue={"123123"}
|
||||
error={passwordError}
|
||||
label={i18n.t('Password')}
|
||||
label={t("Password")}
|
||||
secureTextEntry
|
||||
labelFontSize={scale(12)}
|
||||
fontSize={scale(12)}
|
||||
|
|
@ -141,8 +144,8 @@ export default function Login() {
|
|||
tintColor={colors.tagColor}
|
||||
labelTextStyle={styles.labelStyle}
|
||||
inputContainerStyle={styles.textContainer}
|
||||
onChangeText={text => {
|
||||
setPassword(text.trim())
|
||||
onChangeText={(text) => {
|
||||
setPassword(text.trim());
|
||||
}}
|
||||
/>
|
||||
<View style={[styles.lower_form]}>
|
||||
|
|
@ -151,30 +154,31 @@ export default function Login() {
|
|||
<TouchableOpacity
|
||||
onPress={async () => {
|
||||
if (validateForm()) {
|
||||
let notificationToken = null
|
||||
let notificationToken = null;
|
||||
if (Constants.isDevice) {
|
||||
const {
|
||||
status: existingStatus
|
||||
} = await Notifications.getPermissionsAsync()
|
||||
if (existingStatus === 'granted') {
|
||||
status: existingStatus,
|
||||
} = await Notifications.getPermissionsAsync();
|
||||
if (existingStatus === "granted") {
|
||||
notificationToken = (
|
||||
await Notifications.getExpoPushTokenAsync()
|
||||
).data
|
||||
).data;
|
||||
}
|
||||
}
|
||||
mutate({
|
||||
variables: {
|
||||
username: username.toLowerCase(),
|
||||
password: password,
|
||||
notificationToken
|
||||
}
|
||||
})
|
||||
notificationToken,
|
||||
},
|
||||
});
|
||||
}
|
||||
}}
|
||||
activeOpacity={0.5}
|
||||
style={[styles.RContainer]}>
|
||||
style={[styles.RContainer]}
|
||||
>
|
||||
<TextDefault textColor={colors.fontMainColor} H5 bold>
|
||||
{i18n.t('loginBtn')}
|
||||
{t("loginBtn")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
|
@ -184,5 +188,5 @@ export default function Login() {
|
|||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</WrapperView>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@ import UserContext from '../../context/user'
|
|||
import styles from './style'
|
||||
import { TextError, Spinner } from '../../components'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import i18n from '../../../i18n'
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function Orders() {
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation()
|
||||
const configuration = useContext(ConfigurationContext)
|
||||
const {
|
||||
|
|
@ -20,11 +21,11 @@ export default function Orders() {
|
|||
} = useContext(UserContext)
|
||||
|
||||
function emptyView() {
|
||||
return <TextError text={i18n.t('NoNewOrder')} />
|
||||
return <TextError text={t('NoNewOrder')} />
|
||||
}
|
||||
|
||||
if (loadingUnAssigned) return <Spinner />
|
||||
if (errorUnAssigned) return <TextError text={i18n.t('Somethingisworng')} />
|
||||
if (errorUnAssigned) return <TextError text={t('Somethingisworng')} />
|
||||
|
||||
return (
|
||||
<View style={styles.flex}>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import colors from "../../utilities/colors";
|
|||
import { linkToMapsApp } from "../../utilities/links";
|
||||
import { scale } from "../../utilities/scaling";
|
||||
import styles from "./styles";
|
||||
import i18n from "../../../i18n";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const CONFIGURATION = gql`
|
||||
${configuration}
|
||||
|
|
@ -38,6 +38,7 @@ const LATITUDE_DELTA = 0.0022;
|
|||
const LONGITUDE_DELTA = 0.0021;
|
||||
|
||||
function OrderDetail() {
|
||||
const { t } = useTranslation();
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute();
|
||||
const {
|
||||
|
|
@ -71,13 +72,15 @@ function OrderDetail() {
|
|||
useLayoutEffect(() => {
|
||||
if (!selectedOrder) return;
|
||||
navigation.setOptions({
|
||||
title: `${i18n.t('Order')} ${selectedOrder.order_id}`,
|
||||
title: `${t("Order")} ${selectedOrder.order_id}`,
|
||||
});
|
||||
}, [selectedOrder]);
|
||||
async function onCompleted({ updateOrderStatusRider, assignOrder }) {
|
||||
if (updateOrderStatusRider) {
|
||||
FlashMessage({
|
||||
message: `${i18n.t('OrderMarkedAs')} ${i18n.t(updateOrderStatusRider.order_status)}`,
|
||||
message: `${t("OrderMarkedAs")} ${t(
|
||||
updateOrderStatusRider.order_status
|
||||
)}`,
|
||||
});
|
||||
if (updateOrderStatusRider.order_status === "DELIVERED") {
|
||||
navigation.goBack();
|
||||
|
|
@ -173,18 +176,16 @@ function OrderDetail() {
|
|||
}
|
||||
|
||||
if (loadingAssigned || loadingUnAssigned) {
|
||||
return <TextError text={i18n.t('Loadingorders')} />;
|
||||
return <TextError text={t("Loadingorders")} />;
|
||||
}
|
||||
if (loadingConfig) {
|
||||
return <Spinner />;
|
||||
}
|
||||
if (errorConfig) {
|
||||
return <TextError text={i18n.t('Somethingisworng')} />;
|
||||
return <TextError text={t("Somethingisworng")} />;
|
||||
}
|
||||
if (!selectedOrder) {
|
||||
return (
|
||||
<TextError text={i18n.t('Orderassginedtootherrider')} />
|
||||
);
|
||||
return <TextError text={t("Orderassginedtootherrider")} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -203,7 +204,7 @@ function OrderDetail() {
|
|||
textColor={colors.tagColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('CustomerDetails')}
|
||||
{t("CustomerDetails")}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={styles.customerContent}>
|
||||
|
|
@ -215,7 +216,7 @@ function OrderDetail() {
|
|||
textColor={colors.placeHolderColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('name')}
|
||||
{t("name")}
|
||||
</TextDefault>
|
||||
<TextDefault bolder style={{ ...alignment.PBxSmall }}>
|
||||
{selectedOrder.user.name}
|
||||
|
|
@ -229,7 +230,7 @@ function OrderDetail() {
|
|||
textColor={colors.placeHolderColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('Contact')}
|
||||
{t("Contact")}
|
||||
</TextDefault>
|
||||
<TextDefault bolder style={{ ...alignment.PBxSmall }}>
|
||||
{selectedOrder.user.phone}
|
||||
|
|
@ -243,7 +244,7 @@ function OrderDetail() {
|
|||
textColor={colors.placeHolderColor}
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('DelvieryLocation')}
|
||||
{t("DelvieryLocation")}
|
||||
</TextDefault>
|
||||
<TextDefault
|
||||
numberOfLines={2}
|
||||
|
|
@ -267,7 +268,7 @@ function OrderDetail() {
|
|||
textColor={colors.tagColor}
|
||||
style={{ ...alignment.PTmedium }}
|
||||
>
|
||||
{i18n.t('OrderDetails')}
|
||||
{t("OrderDetails")}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={styles.orderSpacer} />
|
||||
|
|
@ -285,7 +286,7 @@ function OrderDetail() {
|
|||
bolder
|
||||
style={{ ...alignment.PTmedium, ...alignment.PLmedium }}
|
||||
>
|
||||
{i18n.t('Subtotal')}
|
||||
{t("Subtotal")}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={styles.orderTextRight}>
|
||||
|
|
@ -312,7 +313,7 @@ function OrderDetail() {
|
|||
bolder
|
||||
style={{ ...alignment.PLmedium }}
|
||||
>
|
||||
{i18n.t('delvieryCharges')}
|
||||
{t("delvieryCharges")}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={styles.orderTextRight}>
|
||||
|
|
@ -332,7 +333,7 @@ function OrderDetail() {
|
|||
<View style={styles.orderSubRow}>
|
||||
<View style={styles.orderTextLeft}>
|
||||
<TextDefault H4 bolder>
|
||||
{i18n.t('total')}
|
||||
{t("total")}
|
||||
</TextDefault>
|
||||
</View>
|
||||
<View style={styles.orderTextRight}>
|
||||
|
|
@ -424,7 +425,7 @@ function OrderDetail() {
|
|||
bold
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('Assigntome')}
|
||||
{t("Assigntome")}
|
||||
</TextDefault>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
|
@ -450,7 +451,7 @@ function OrderDetail() {
|
|||
bold
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('Picked')}
|
||||
{t("Picked")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
|
@ -469,7 +470,7 @@ function OrderDetail() {
|
|||
bold
|
||||
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
|
||||
>
|
||||
{i18n.t('Delivered')}
|
||||
{t("Delivered")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,197 +1,198 @@
|
|||
import { Dimensions, StyleSheet } from 'react-native'
|
||||
import { alignment } from '../../utilities/alignment'
|
||||
import colors from '../../utilities/colors'
|
||||
import { scale, verticalScale } from '../../utilities/scaling'
|
||||
const { height } = Dimensions.get('window')
|
||||
import { Dimensions, StyleSheet } from "react-native";
|
||||
import { alignment } from "../../utilities/alignment";
|
||||
import colors from "../../utilities/colors";
|
||||
import { scale, verticalScale } from "../../utilities/scaling";
|
||||
const { height } = Dimensions.get("window");
|
||||
|
||||
export default {
|
||||
flex: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.themeBackground
|
||||
backgroundColor: colors.themeBackground,
|
||||
},
|
||||
line: {
|
||||
width: '80%',
|
||||
width: "80%",
|
||||
height: StyleSheet.hairlineWidth,
|
||||
backgroundColor: colors.horizontalLine,
|
||||
alignSelf: 'center',
|
||||
alignSelf: "center",
|
||||
...alignment.MTmedium,
|
||||
...alignment.MBmedium
|
||||
...alignment.MBmedium,
|
||||
},
|
||||
customerCard: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
height: height * 0.4,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
|
||||
customerSubCard: {
|
||||
width: '85%',
|
||||
height: '90%',
|
||||
width: "85%",
|
||||
height: "90%",
|
||||
borderWidth: 2,
|
||||
borderStyle: 'dashed',
|
||||
backgroundColor: '#F3FAFE',
|
||||
borderStyle: "dashed",
|
||||
backgroundColor: "#F3FAFE",
|
||||
borderRadius: scale(10),
|
||||
borderColor: colors.horizontalLine
|
||||
borderColor: colors.horizontalLine,
|
||||
},
|
||||
customerHeader: {
|
||||
width: '100%',
|
||||
height: '30%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
width: "100%",
|
||||
height: "30%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
customerContent: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-start'
|
||||
justifyContent: "flex-start",
|
||||
},
|
||||
customerSubContent: {
|
||||
width: '80%',
|
||||
height: '95%',
|
||||
justifyContent: 'space-around'
|
||||
width: "80%",
|
||||
height: "95%",
|
||||
justifyContent: "space-around",
|
||||
},
|
||||
customerContentRow: {
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
flexDirection: 'row',
|
||||
paddingLeft: '8%'
|
||||
width: "100%",
|
||||
height: "50%",
|
||||
flexDirection: "row",
|
||||
paddingLeft: "8%",
|
||||
},
|
||||
customerImgContainer: {
|
||||
width: '20%',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
width: "20%",
|
||||
height: "100%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
customerTextContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center'
|
||||
justifyContent: "center",
|
||||
},
|
||||
customerAddContainer: {
|
||||
justifyContent: 'center',
|
||||
width: '90%'
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
width: "90%",
|
||||
},
|
||||
orderContainer: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
...alignment.PTxSmall,
|
||||
...alignment.PBxSmall
|
||||
...alignment.PBxSmall,
|
||||
},
|
||||
orderSubContainer: {
|
||||
width: '85%',
|
||||
width: "85%",
|
||||
minHeight: height * 0.3,
|
||||
borderWidth: 2,
|
||||
borderStyle: 'dashed',
|
||||
borderStyle: "dashed",
|
||||
borderRadius: scale(20),
|
||||
backgroundColor: '#F3FAFE',
|
||||
borderColor: colors.horizontalLine
|
||||
backgroundColor: "#F3FAFE",
|
||||
borderColor: colors.horizontalLine,
|
||||
},
|
||||
orderHeader: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
height: height * 0.08,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
orderContent: {
|
||||
width: '100%',
|
||||
alignItems: 'center'
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
},
|
||||
orderSubContent: {
|
||||
width: '90%',
|
||||
flexDirection: 'row'
|
||||
width: "90%",
|
||||
flexDirection: "row",
|
||||
},
|
||||
orderTextLeftContainer: {
|
||||
width: '10%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
width: "10%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
orderTextCenterContainer: {
|
||||
width: '65%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start'
|
||||
width: "65%",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
orderTextRightContainer: {
|
||||
width: '25%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-end'
|
||||
width: "25%",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
orderSpacer: {
|
||||
width: '100%',
|
||||
height: height * 0.02
|
||||
width: "100%",
|
||||
height: height * 0.02,
|
||||
},
|
||||
orderRow: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
height: height * 0.05,
|
||||
alignItems: 'center'
|
||||
alignItems: "center",
|
||||
},
|
||||
orderRow2: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
height: height * 0.07,
|
||||
alignItems: 'center',
|
||||
...alignment.PBlarge
|
||||
alignItems: "center",
|
||||
...alignment.PBlarge,
|
||||
},
|
||||
orderSubRow: {
|
||||
width: '90%',
|
||||
height: '100%',
|
||||
flexDirection: 'row'
|
||||
width: "90%",
|
||||
height: "100%",
|
||||
flexDirection: "row",
|
||||
},
|
||||
orderTextLeft: {
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
paddingLeft: '5%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start'
|
||||
width: "50%",
|
||||
height: "100%",
|
||||
paddingLeft: "5%",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
orderTextRight: {
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
alignItems: 'flex-end',
|
||||
justifyContent: 'center'
|
||||
width: "50%",
|
||||
height: "100%",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
},
|
||||
actionContainer: {
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
height: height * 0.1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
...alignment.MTmedium,
|
||||
...alignment.MBlarge
|
||||
...alignment.MBlarge,
|
||||
},
|
||||
actionSubContainer: {
|
||||
width: '90%',
|
||||
height: '80%',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
width: "90%",
|
||||
height: "80%",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
borderRadius: scale(10),
|
||||
...alignment.MBlarge
|
||||
...alignment.MBlarge,
|
||||
},
|
||||
cancelBtnStyle: {
|
||||
width: '80%',
|
||||
height: '70%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: scale(10)
|
||||
width: "80%",
|
||||
height: "70%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: scale(10),
|
||||
},
|
||||
acceptBtnStyle: {
|
||||
backgroundColor: colors.tagColor,
|
||||
width: '80%',
|
||||
height: '70%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: scale(10)
|
||||
width: "80%",
|
||||
height: "70%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: scale(10),
|
||||
},
|
||||
removeBtnStyle: {
|
||||
backgroundColor: colors.tagColor,
|
||||
width: '45%',
|
||||
height: '70%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
width: "45%",
|
||||
height: "70%",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
baseSpacer: {
|
||||
marginTop: verticalScale(15)
|
||||
marginTop: verticalScale(15),
|
||||
},
|
||||
mapContainer: {
|
||||
width: '85%',
|
||||
alignSelf: 'center',
|
||||
height: verticalScale(200)
|
||||
}
|
||||
}
|
||||
width: "85%",
|
||||
alignSelf: "center",
|
||||
height: verticalScale(200),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
import React, { useEffect, useState, useLayoutEffect } from 'react'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import React, { useEffect, useState, useLayoutEffect } from "react";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import {
|
||||
ImageBackground,
|
||||
StatusBar,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native'
|
||||
import i18n from '../../../i18n'
|
||||
import { AssignedOrders, NewOrders, TextDefault } from '../../components'
|
||||
import colors from '../../utilities/colors'
|
||||
import useStyle from './style'
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AssignedOrders, NewOrders, TextDefault } from "../../components";
|
||||
import colors from "../../utilities/colors";
|
||||
import useStyle from "./style";
|
||||
|
||||
const BACKGROUND_IMAGE = require('../../../assets/images/ui/BG.png')
|
||||
const BACKGROUND_IMAGE = require("../../../assets/images/ui/BG.png");
|
||||
|
||||
export default function Orders() {
|
||||
const styles = useStyle()
|
||||
const [isNewOrderSelected, setIsNewOrderSelected] = useState(false)
|
||||
const navigation = useNavigation()
|
||||
const { t } = useTranslation();
|
||||
const styles = useStyle();
|
||||
const [isNewOrderSelected, setIsNewOrderSelected] = useState(false);
|
||||
const navigation = useNavigation();
|
||||
|
||||
useEffect(() => {
|
||||
StatusBar.setBarStyle('light-content')
|
||||
}, [isNewOrderSelected])
|
||||
StatusBar.setBarStyle("light-content");
|
||||
}, [isNewOrderSelected]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerRight: null,
|
||||
headerTitle: i18n.t('Orders')
|
||||
})
|
||||
}, [navigation])
|
||||
headerTitle: t("Orders"),
|
||||
});
|
||||
}, [t, navigation]);
|
||||
|
||||
return (
|
||||
<View style={[styles.flex, styles.bottom]}>
|
||||
|
|
@ -41,11 +42,12 @@ export default function Orders() {
|
|||
{
|
||||
backgroundColor: !isNewOrderSelected
|
||||
? colors.buttonBackgroundPink
|
||||
: 'transparent'
|
||||
}
|
||||
]}>
|
||||
: "transparent",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TextDefault bold H5 numberOfLines={1}>
|
||||
{i18n.t('myOrders')}
|
||||
{t("myOrders")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
|
|
@ -56,16 +58,17 @@ export default function Orders() {
|
|||
{
|
||||
backgroundColor: isNewOrderSelected
|
||||
? colors.buttonBackgroundPink
|
||||
: 'transparent'
|
||||
}
|
||||
]}>
|
||||
: "transparent",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TextDefault bold H5 numberOfLines={1}>
|
||||
{i18n.t('newOrders')}
|
||||
{t("newOrders")}
|
||||
</TextDefault>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
{!isNewOrderSelected ? <AssignedOrders /> : <NewOrders />}
|
||||
</View>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,135 +1,135 @@
|
|||
import { scale } from './scaling'
|
||||
import { scale } from "./scaling";
|
||||
|
||||
const XSMALL = 5
|
||||
const SMALL = 10
|
||||
const MEDIUM = 15
|
||||
const LARGE = 20
|
||||
const XSMALL = 5;
|
||||
const SMALL = 10;
|
||||
const MEDIUM = 15;
|
||||
const LARGE = 20;
|
||||
export const alignment = {
|
||||
MxSmall: {
|
||||
margin: scale(XSMALL)
|
||||
margin: scale(XSMALL),
|
||||
},
|
||||
MBxSmall: {
|
||||
marginBottom: scale(XSMALL)
|
||||
marginBottom: scale(XSMALL),
|
||||
},
|
||||
MTxSmall: {
|
||||
marginTop: scale(XSMALL)
|
||||
marginTop: scale(XSMALL),
|
||||
},
|
||||
MRxSmall: {
|
||||
marginRight: scale(XSMALL)
|
||||
marginRight: scale(XSMALL),
|
||||
},
|
||||
MLxSmall: {
|
||||
marginLeft: scale(XSMALL)
|
||||
marginLeft: scale(XSMALL),
|
||||
},
|
||||
|
||||
Msmall: {
|
||||
margin: scale(SMALL)
|
||||
margin: scale(SMALL),
|
||||
},
|
||||
MBsmall: {
|
||||
marginBottom: scale(SMALL)
|
||||
marginBottom: scale(SMALL),
|
||||
},
|
||||
MTsmall: {
|
||||
marginTop: scale(SMALL)
|
||||
marginTop: scale(SMALL),
|
||||
},
|
||||
MRsmall: {
|
||||
marginRight: scale(SMALL)
|
||||
marginRight: scale(SMALL),
|
||||
},
|
||||
MLsmall: {
|
||||
marginLeft: scale(SMALL)
|
||||
marginLeft: scale(SMALL),
|
||||
},
|
||||
|
||||
Mmedium: {
|
||||
margin: scale(MEDIUM)
|
||||
margin: scale(MEDIUM),
|
||||
},
|
||||
MBmedium: {
|
||||
marginBottom: scale(MEDIUM)
|
||||
marginBottom: scale(MEDIUM),
|
||||
},
|
||||
MTmedium: {
|
||||
marginTop: scale(MEDIUM)
|
||||
marginTop: scale(MEDIUM),
|
||||
},
|
||||
MRmedium: {
|
||||
marginRight: scale(MEDIUM)
|
||||
marginRight: scale(MEDIUM),
|
||||
},
|
||||
MLmedium: {
|
||||
marginLeft: scale(MEDIUM)
|
||||
marginLeft: scale(MEDIUM),
|
||||
},
|
||||
Mlarge: {
|
||||
margin: scale(LARGE)
|
||||
margin: scale(LARGE),
|
||||
},
|
||||
MBlarge: {
|
||||
marginBottom: scale(LARGE)
|
||||
marginBottom: scale(LARGE),
|
||||
},
|
||||
MTlarge: {
|
||||
marginTop: scale(LARGE)
|
||||
marginTop: scale(LARGE),
|
||||
},
|
||||
MRlarge: {
|
||||
marginRight: scale(LARGE)
|
||||
marginRight: scale(LARGE),
|
||||
},
|
||||
MLlarge: {
|
||||
marginLeft: scale(LARGE)
|
||||
marginLeft: scale(LARGE),
|
||||
},
|
||||
|
||||
// Padding
|
||||
PxSmall: {
|
||||
padding: scale(XSMALL)
|
||||
padding: scale(XSMALL),
|
||||
},
|
||||
PBxSmall: {
|
||||
paddingBottom: scale(XSMALL)
|
||||
paddingBottom: scale(XSMALL),
|
||||
},
|
||||
PTxSmall: {
|
||||
paddingTop: scale(XSMALL)
|
||||
paddingTop: scale(XSMALL),
|
||||
},
|
||||
PRxSmall: {
|
||||
paddingRight: scale(XSMALL)
|
||||
paddingRight: scale(XSMALL),
|
||||
},
|
||||
PLxSmall: {
|
||||
paddingLeft: scale(XSMALL)
|
||||
paddingLeft: scale(XSMALL),
|
||||
},
|
||||
|
||||
Psmall: {
|
||||
padding: scale(SMALL)
|
||||
padding: scale(SMALL),
|
||||
},
|
||||
PBsmall: {
|
||||
paddingBottom: scale(SMALL)
|
||||
paddingBottom: scale(SMALL),
|
||||
},
|
||||
PTsmall: {
|
||||
paddingTop: scale(SMALL)
|
||||
paddingTop: scale(SMALL),
|
||||
},
|
||||
PRsmall: {
|
||||
paddingRight: scale(SMALL)
|
||||
paddingRight: scale(SMALL),
|
||||
},
|
||||
PLsmall: {
|
||||
paddingLeft: scale(SMALL)
|
||||
paddingLeft: scale(SMALL),
|
||||
},
|
||||
|
||||
Pmedium: {
|
||||
padding: scale(MEDIUM)
|
||||
padding: scale(MEDIUM),
|
||||
},
|
||||
PBmedium: {
|
||||
paddingBottom: scale(MEDIUM)
|
||||
paddingBottom: scale(MEDIUM),
|
||||
},
|
||||
PTmedium: {
|
||||
paddingTop: scale(MEDIUM)
|
||||
paddingTop: scale(MEDIUM),
|
||||
},
|
||||
PRmedium: {
|
||||
paddingRight: scale(MEDIUM)
|
||||
paddingRight: scale(MEDIUM),
|
||||
},
|
||||
PLmedium: {
|
||||
paddingLeft: scale(MEDIUM)
|
||||
paddingLeft: scale(MEDIUM),
|
||||
},
|
||||
|
||||
Plarge: {
|
||||
padding: scale(LARGE)
|
||||
padding: scale(LARGE),
|
||||
},
|
||||
PBlarge: {
|
||||
paddingBottom: scale(LARGE)
|
||||
paddingBottom: scale(LARGE),
|
||||
},
|
||||
PTlarge: {
|
||||
paddingTop: scale(LARGE)
|
||||
paddingTop: scale(LARGE),
|
||||
},
|
||||
PRlarge: {
|
||||
paddingRight: scale(LARGE)
|
||||
paddingRight: scale(LARGE),
|
||||
},
|
||||
PLlarge: {
|
||||
paddingLeft: scale(LARGE)
|
||||
}
|
||||
}
|
||||
paddingLeft: scale(LARGE),
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue