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