steve
/
grocery-app
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

map issue resolve on android

This commit is contained in:
Ninjas Code - 4 2023-03-24 14:26:45 +05:00
parent 481b9f1a94
commit 7caec6e3a3
11 changed files with 294 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
RiderApp/.expo/README.md Normal file
View File

@ -0,0 +1,8 @@
> Why do I have a folder named ".expo" in my project?
The ".expo" folder is created when an Expo project is started using "expo start" command.
> What do the files contain?
- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
- "settings.json": contains the server configuration that is used to serve the application manifest.
> Should I commit the ".expo" folder?
No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

3
RiderApp/.expo/devices.json Normal file
View File

@ -0,0 +1,3 @@
{
"devices": []
}

9
RiderApp/.expo/packager-info.json Normal file
View File

@ -0,0 +1,9 @@
{
"expoServerPort": null,
"packagerPort": null,
"packagerPid": null,
"expoServerNgrokUrl": null,
"packagerNgrokUrl": null,
"ngrokPid": null,
"webpackServerPort": null
}

10
RiderApp/.expo/settings.json Normal file
View File

@ -0,0 +1,10 @@
{
"hostType": "lan",
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": null,
"https": false,
"scheme": null,
"devClient": false
}

14
RiderApp/app.json
View File

@ -2,10 +2,9 @@
"expo": { "expo": {
"name": "Enatega Rider", "name": "Enatega Rider",
"description": "Enatega is a starter kit food ordering app built in React Native using Expo for IOS and Android. It's made keeping good aesthetics in mind as well keeping the best coding practices in mind. Its fully customisable to easily help you in your next food delivery project. https://market.nativebase.io/view/react-native-food-delivery-backend-app", "description": "Enatega is a starter kit food ordering app built in React Native using Expo for IOS and Android. It's made keeping good aesthetics in mind as well keeping the best coding practices in mind. Its fully customisable to easily help you in your next food delivery project. https://market.nativebase.io/view/react-native-food-delivery-backend-app",
"version": "4.2.3", "version": "4.2.4",
"slug": "food-delivery-rider", "slug": "food-delivery-rider",
"privacy": "public", "privacy": "public",
"androidStatusBar": { "androidStatusBar": {
"backgroundColor": "#000" "backgroundColor": "#000"
}, },
@ -21,7 +20,8 @@
"backgroundColor": "#ffffff" "backgroundColor": "#ffffff"
}, },
"updates": { "updates": {
"fallbackToCacheTimeout": 0 "fallbackToCacheTimeout": 0,
"url": "https://u.expo.dev/e3fb49ee-7c4f-4e4a-91fe-8f4f93662dde"
}, },
"assetBundlePatterns": [ "assetBundlePatterns": [
"**/*" "**/*"
@ -37,7 +37,6 @@
"bitcode": false, "bitcode": false,
"supportsTablet": true, "supportsTablet": true,
"bundleIdentifier": "com.enatega.driver", "bundleIdentifier": "com.enatega.driver",
"config": { "config": {
"googleMapsApiKey": "" "googleMapsApiKey": ""
}, },
@ -52,7 +51,7 @@
} }
}, },
"android": { "android": {
"versionCode": 13, "versionCode": 14,
"googleServicesFile": "./google-services.json", "googleServicesFile": "./google-services.json",
"permissions": [ "permissions": [
"ACCESS_COARSE_LOCATION", "ACCESS_COARSE_LOCATION",
@ -60,7 +59,7 @@
], ],
"config": { "config": {
"googleMaps": { "googleMaps": {
"apiKey": "" "apiKey": "AIzaSyCzNP5qQql2a5y8lOoO-1yj1lj_tzjVImA"
} }
}, },
"package": "com.enatega.rider" "package": "com.enatega.rider"
@ -69,6 +68,9 @@
"eas": { "eas": {
"projectId": "e3fb49ee-7c4f-4e4a-91fe-8f4f93662dde" "projectId": "e3fb49ee-7c4f-4e4a-91fe-8f4f93662dde"
} }
},
"runtimeVersion": {
"policy": "sdkVersion"
} }
} }
} }

9
RiderApp/eas.json
View File

@ -6,9 +6,6 @@
"development": { "development": {
"developmentClient": true, "developmentClient": true,
"distribution": "internal", "distribution": "internal",
"android": {
"buildType": "apk"
},
"ios": { "ios": {
"resourceClass": "m-medium" "resourceClass": "m-medium"
} }
@ -20,10 +17,8 @@
} }
}, },
"production": { "production": {
"developmentClient": false, "ios": {
"releaseChannel": "production", "resourceClass": "m-medium"
"android": {
"buildType": "apk"
} }
} }
}, },

3
RiderApp/environment.js
View File

@ -2,7 +2,6 @@
* environment.js * environment.js
* path: '/environment.js' (root of your project) * path: '/environment.js' (root of your project)
******************************/ ******************************/
import Constants from "expo-constants"; import Constants from "expo-constants";
const ENV = { const ENV = {
@ -22,7 +21,7 @@ const ENV = {
}, },
}; };
const getEnvVars = (env = Constants.manifest.releaseChannel) => { const getEnvVars = (env = Constants.manifest) => {
// What is __DEV__ ? // What is __DEV__ ?
// This variable is set to true when react-native is running in Dev mode. // This variable is set to true when react-native is running in Dev mode.
// __DEV__ is true when run locally, but false when published. // __DEV__ is true when run locally, but false when published.

74
RiderApp/package-lock.json generated
View File

@ -31,8 +31,10 @@
"expo-font": "~11.0.1", "expo-font": "~11.0.1",
"expo-localization": "~14.0.0", "expo-localization": "~14.0.0",
"expo-location": "~15.0.1", "expo-location": "~15.0.1",
"expo-navigation-bar": "~2.0.1",
"expo-notifications": "~0.17.0", "expo-notifications": "~0.17.0",
"expo-splash-screen": "~0.17.5", "expo-splash-screen": "~0.17.5",
"expo-system-ui": "~2.0.1",
"expo-task-manager": "~11.0.1", "expo-task-manager": "~11.0.1",
"expo-updates": "~0.15.6", "expo-updates": "~0.15.6",
"graphql": "^14.3.1", "graphql": "^14.3.1",
@ -3350,9 +3352,9 @@
"integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==" "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
}, },
"node_modules/@graphql-typed-document-node/core": { "node_modules/@graphql-typed-document-node/core": {
"version": "3.1.2", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
"integrity": "sha512-9anpBMM9mEgZN4wr2v8wHJI2/u5TnnggewRN6OlvXTTnuVyoY19X6rOv9XTqKRw6dcGKwZsBi8n0kDE2I5i4VA==", "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
"peerDependencies": { "peerDependencies": {
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
} }
@ -3423,9 +3425,9 @@
} }
}, },
"node_modules/@jest/create-cache-key-function/node_modules/@types/yargs": { "node_modules/@jest/create-cache-key-function/node_modules/@types/yargs": {
"version": "17.0.22", "version": "17.0.23",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.22.tgz", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.23.tgz",
"integrity": "sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==", "integrity": "sha512-yuogunc04OnzGQCrfHx+Kk883Q4X0aSwmYZhKjI21m+SVYzjIbrWl8dOOwSv5hf2Um2pdCOXWo9isteZTNXUZQ==",
"dependencies": { "dependencies": {
"@types/yargs-parser": "*" "@types/yargs-parser": "*"
} }
@ -4917,9 +4919,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.15.3", "version": "18.15.6",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.6.tgz",
"integrity": "sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==" "integrity": "sha512-YErOafCZpK4g+Rp3Q/PBgZNAsWKGunQTm9FA3/Pbcm0VCriTEzcrutQ/SxSc0rytAp0NoFWue669jmKhEtd0sA=="
}, },
"node_modules/@types/parse-json": { "node_modules/@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
@ -4943,9 +4945,9 @@
} }
}, },
"node_modules/@types/scheduler": { "node_modules/@types/scheduler": {
"version": "0.16.2", "version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
}, },
"node_modules/@types/yargs": { "node_modules/@types/yargs": {
"version": "15.0.15", "version": "15.0.15",
@ -6201,9 +6203,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001467", "version": "1.0.30001469",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001467.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001469.tgz",
"integrity": "sha512-cEdN/5e+RPikvl9AHm4uuLXxeCNq8rFsQ+lPHTfe/OtypP3WwnVVbjn+6uBV7PaFL6xUFzTh+sSCOz1rKhcO+Q==", "integrity": "sha512-Rcp7221ScNqQPP3W+lVOYDyjdR6dC+neEQCttoNr5bAyz54AboB4iwpnWgyi8P4YUsPybVzT4LgWiBbI3drL4g==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -7103,9 +7105,9 @@
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.333", "version": "1.4.339",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.333.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.339.tgz",
"integrity": "sha512-YyE8+GKyGtPEP1/kpvqsdhD6rA/TP1DUFDN4uiU/YI52NzDxmwHkEb3qjId8hLBa5siJvG0sfC3O66501jMruQ==" "integrity": "sha512-MSXHBJGcbBydq/DQDlpBeUKnJ6C7aTiNCTRpfDV5Iz0sNr/Ng6RJFloq82AAicp/SrmDq4zF6XsKG0B8Xwn1UQ=="
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
"version": "8.0.0", "version": "8.0.0",
@ -8389,6 +8391,18 @@
"invariant": "^2.2.4" "invariant": "^2.2.4"
} }
}, },
"node_modules/expo-navigation-bar": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/expo-navigation-bar/-/expo-navigation-bar-2.0.1.tgz",
"integrity": "sha512-lR+77eOJ4unrDVtrOHRK95c2QGsbRlYt2PmAST9Y+AFEiqVsYWg2JZTp2f2XZxe/10i8jqgSHBMRm7I7w2DcBA==",
"dependencies": {
"@react-native/normalize-color": "^2.0.0",
"debug": "^4.3.2"
},
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-notifications": { "node_modules/expo-notifications": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/expo-notifications/-/expo-notifications-0.17.0.tgz", "resolved": "https://registry.npmjs.org/expo-notifications/-/expo-notifications-0.17.0.tgz",
@ -8458,6 +8472,18 @@
"resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-3.0.1.tgz", "resolved": "https://registry.npmjs.org/expo-structured-headers/-/expo-structured-headers-3.0.1.tgz",
"integrity": "sha512-x6hkzuQL5HJoyB+xQyBf9M04ZUmrjFWqEW7gzIYWN/6LA+dgyaV4fF6U9++Re+GgGjF03vHJFqR1xYaosKKZYQ==" "integrity": "sha512-x6hkzuQL5HJoyB+xQyBf9M04ZUmrjFWqEW7gzIYWN/6LA+dgyaV4fF6U9++Re+GgGjF03vHJFqR1xYaosKKZYQ=="
}, },
"node_modules/expo-system-ui": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/expo-system-ui/-/expo-system-ui-2.0.1.tgz",
"integrity": "sha512-lspSKU71G2+6y3kI/p/sZUFSBvzd5HdnKuSX0J6b4yqOEAhMIA4JtmkU/0as1FY1Fnz+48fLs2ZL9gzbr7+njA==",
"dependencies": {
"@react-native/normalize-color": "^2.0.0",
"debug": "^4.3.2"
},
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-task-manager": { "node_modules/expo-task-manager": {
"version": "11.0.1", "version": "11.0.1",
"resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz", "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-11.0.1.tgz",
@ -10655,9 +10681,9 @@
"integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww==" "integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww=="
}, },
"node_modules/joi": { "node_modules/joi": {
"version": "17.8.4", "version": "17.9.1",
"resolved": "https://registry.npmjs.org/joi/-/joi-17.8.4.tgz", "resolved": "https://registry.npmjs.org/joi/-/joi-17.9.1.tgz",
"integrity": "sha512-jjdRHb5WtL+KgSHvOULQEPPv4kcl+ixd1ybOFQq3rWLgEEqc03QMmilodL0GVJE14U/SQDXkUhQUSZANGDH/AA==", "integrity": "sha512-FariIi9j6QODKATGBrEX7HZcja8Bsh3rfdGYy/Sb65sGlZWK/QWesU1ghk7aJWDj95knjXlQfSmzFSPPkLVsfw==",
"dependencies": { "dependencies": {
"@hapi/hoek": "^9.0.0", "@hapi/hoek": "^9.0.0",
"@hapi/topo": "^5.0.0", "@hapi/topo": "^5.0.0",
@ -15618,9 +15644,9 @@
} }
}, },
"node_modules/sucrase": { "node_modules/sucrase": {
"version": "3.29.0", "version": "3.30.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.29.0.tgz", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.30.0.tgz",
"integrity": "sha512-bZPAuGA5SdFHuzqIhTAqt9fvNEo9rESqXIG3oiKdF8K4UmkQxC4KlNL3lVyAErXp+mPvUqZ5l13qx6TrDIGf3A==", "integrity": "sha512-7d37d3vLF0IeH2dzvHpzDNDxUqpbDHJXTJOAnQ8jvMW04o2Czps6mxtaSnKWpE+hUS/eczqfWPUgQTrazKZPnQ==",
"dependencies": { "dependencies": {
"commander": "^4.0.0", "commander": "^4.0.0",
"glob": "7.1.6", "glob": "7.1.6",

4
RiderApp/package.json
View File

@ -69,7 +69,9 @@
"react-native-screens": "~3.18.0", "react-native-screens": "~3.18.0",
"react-native-svg": "13.4.0", "react-native-svg": "13.4.0",
"react-native-webview": "11.23.1", "react-native-webview": "11.23.1",
"subscriptions-transport-ws": "^0.9.16" "subscriptions-transport-ws": "^0.9.16",
"expo-system-ui": "~2.0.1",
"expo-navigation-bar": "~2.0.1"
}, },
"devDependencies": { "devDependencies": {
"babel-preset-expo": "~9.2.1", "babel-preset-expo": "~9.2.1",

78
RiderApp/src/apollo/index.js
View File

@ -1,84 +1,84 @@
import AsyncStorage from '@react-native-async-storage/async-storage' import AsyncStorage from "@react-native-async-storage/async-storage";
import { ApolloClient } from 'apollo-client' import { ApolloClient } from "apollo-client";
import { ApolloLink, split, concat, Observable } from 'apollo-link' import { ApolloLink, split, concat, Observable } from "apollo-link";
import { createHttpLink } from 'apollo-link-http' import { createHttpLink } from "apollo-link-http";
import { WebSocketLink } from 'apollo-link-ws' import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from 'apollo-utilities' import { getMainDefinition } from "apollo-utilities";
import { InMemoryCache } from 'apollo-cache-inmemory' import { InMemoryCache } from "apollo-cache-inmemory";
// import { withClientState } from 'apollo-link-state' // import { withClientState } from 'apollo-link-state'
import getEnvVars from '../../environment' import getEnvVars from "../../environment";
const { GRAPHQL_URL, WS_GRAPHQL_URL } = getEnvVars() const { GRAPHQL_URL, WS_GRAPHQL_URL } = getEnvVars();
export let clientRef = null export let clientRef = null;
function setupApolloClient() { function setupApolloClient() {
const cache = new InMemoryCache() const cache = new InMemoryCache();
const httpLink = createHttpLink({ const httpLink = createHttpLink({
uri: GRAPHQL_URL uri: GRAPHQL_URL,
}) });
const wsLink = new WebSocketLink({ const wsLink = new WebSocketLink({
uri: WS_GRAPHQL_URL, uri: WS_GRAPHQL_URL,
options: { options: {
reconnect: true reconnect: true,
} },
}) });
// const stateLink = withClientState({ // const stateLink = withClientState({
// cache // cache
// }) // })
const request = async operation => { const request = async (operation) => {
const token = await AsyncStorage.getItem('rider-token') const token = await AsyncStorage.getItem("rider-token");
operation.setContext({ operation.setContext({
// get the authentication token from local storage if it exists // get the authentication token from local storage if it exists
// return the headers to the context so httpLink can read them // return the headers to the context so httpLink can read them
headers: { headers: {
authorization: token ? `Bearer ${token}` : '' authorization: token ? `Bearer ${token}` : "",
} },
}) });
} };
const requestLink = new ApolloLink( const requestLink = new ApolloLink(
(operation, forward) => (operation, forward) =>
new Observable(observer => { new Observable((observer) => {
// console.log(observer) // console.log(observer)
let handle let handle;
Promise.resolve(operation) Promise.resolve(operation)
.then(oper => request(oper)) .then((oper) => request(oper))
.then(() => { .then(() => {
handle = forward(operation).subscribe({ handle = forward(operation).subscribe({
next: observer.next.bind(observer), next: observer.next.bind(observer),
error: observer.error.bind(observer), error: observer.error.bind(observer),
complete: observer.complete.bind(observer) complete: observer.complete.bind(observer),
});
}) })
}) .catch(observer.error.bind(observer));
.catch(observer.error.bind(observer))
return () => { return () => {
if (handle) handle.unsubscribe() if (handle) handle.unsubscribe();
} };
}) })
) );
const terminatingLink = split( const terminatingLink = split(
({ query }) => { ({ query }) => {
const { kind, operation } = getMainDefinition(query) const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription' return kind === "OperationDefinition" && operation === "subscription";
}, },
wsLink wsLink
// httpLink, // httpLink,
) );
const client = new ApolloClient({ const client = new ApolloClient({
// link: ApolloLink.from([stateLink, authLink.concat(httpLink)]), // link: ApolloLink.from([stateLink, authLink.concat(httpLink)]),
link: concat(ApolloLink.from([terminatingLink, requestLink]), httpLink), link: concat(ApolloLink.from([terminatingLink, requestLink]), httpLink),
cache, cache,
resolvers: {} resolvers: {},
}) });
clientRef = client clientRef = client;
return client return client;
} }
export default setupApolloClient export default setupApolloClient;

231
RiderApp/src/screens/OrderDetail/OrderDetail.js
View File

@ -1,86 +1,86 @@
import { useMutation, useQuery } from '@apollo/react-hooks' import { useMutation, useQuery } from "@apollo/react-hooks";
import { useNavigation, useRoute } from '@react-navigation/native' import { useNavigation, useRoute } from "@react-navigation/native";
import gql from 'graphql-tag' import gql from "graphql-tag";
import React, { useContext, useLayoutEffect } from 'react' import React, { useContext, useLayoutEffect } from "react";
import { import {
Image, Image,
Linking, Linking,
ScrollView, ScrollView,
TouchableOpacity, TouchableOpacity,
View View,
} from 'react-native' } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps' import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import { assignOrder, updateOrderStatusRider } from '../../apollo/mutations' import { assignOrder, updateOrderStatusRider } from "../../apollo/mutations";
import { assignedOrders, configuration } from '../../apollo/queries' import { assignedOrders, configuration } from "../../apollo/queries";
import { MainWrapper, Spinner, TextDefault, TextError } from '../../components' import { MainWrapper, Spinner, TextDefault, TextError } from "../../components";
import { FlashMessage } from '../../components//FlashMessage/FlashMessage' import { FlashMessage } from "../../components//FlashMessage/FlashMessage";
import UserContext from '../../context/user' import UserContext from "../../context/user";
import { alignment } from '../../utilities/alignment' import { alignment } from "../../utilities/alignment";
import colors from '../../utilities/colors' 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";
const CONFIGURATION = gql` const CONFIGURATION = gql`
${configuration} ${configuration}
` `;
const UPDATE_ORDER_STATUS = gql` const UPDATE_ORDER_STATUS = gql`
${updateOrderStatusRider} ${updateOrderStatusRider}
` `;
const ASSIGN_ORDER = gql` const ASSIGN_ORDER = gql`
${assignOrder} ${assignOrder}
` `;
const ORDERS = gql` const ORDERS = gql`
${assignedOrders} ${assignedOrders}
` `;
const LATITUDE_DELTA = 0.0022 const LATITUDE_DELTA = 0.0022;
const LONGITUDE_DELTA = 0.0021 const LONGITUDE_DELTA = 0.0021;
function OrderDetail() { function OrderDetail() {
const navigation = useNavigation() const navigation = useNavigation();
const route = useRoute() const route = useRoute();
const { const {
unAssignedOrders, unAssignedOrders,
assignedOrders, assignedOrders,
loadingAssigned, loadingAssigned,
loadingUnAssigned loadingUnAssigned,
} = useContext(UserContext) } = useContext(UserContext);
// const [selectedOrder, setOrder] = useState(selectedOrder) // const [selectedOrder, setOrder] = useState(selectedOrder)
const selectedOrder = const selectedOrder =
unAssignedOrders.find(o => o._id === route.params?.id) || unAssignedOrders.find((o) => o._id === route.params?.id) ||
assignedOrders.find(o => o._id === route.params?.id) || assignedOrders.find((o) => o._id === route.params?.id) ||
null null;
const { data, loading: loadingConfig, error: errorConfig } = useQuery( const { data, loading: loadingConfig, error: errorConfig } = useQuery(
CONFIGURATION CONFIGURATION
) );
const [mutate, { loading: loadingMutation }] = useMutation( const [mutate, { loading: loadingMutation }] = useMutation(
UPDATE_ORDER_STATUS, UPDATE_ORDER_STATUS,
{ {
onCompleted, onCompleted,
onError, onError,
refetchQueries: [{ query: ORDERS }] refetchQueries: [{ query: ORDERS }],
} }
) );
const [mutateAssignOrder, { loading }] = useMutation(ASSIGN_ORDER, { const [mutateAssignOrder, { loading }] = useMutation(ASSIGN_ORDER, {
onCompleted, onCompleted,
onError onError,
}) });
useLayoutEffect(() => { useLayoutEffect(() => {
if (!selectedOrder) return if (!selectedOrder) return;
navigation.setOptions({ navigation.setOptions({
title: `Order ${selectedOrder.order_id}` title: `Order ${selectedOrder.order_id}`,
}) });
}, [selectedOrder]) }, [selectedOrder]);
async function onCompleted({ updateOrderStatusRider, assignOrder }) { async function onCompleted({ updateOrderStatusRider, assignOrder }) {
if (updateOrderStatusRider) { if (updateOrderStatusRider) {
FlashMessage({ FlashMessage({
message: `Order marked as ${updateOrderStatusRider.order_status}` message: `Order marked as ${updateOrderStatusRider.order_status}`,
}) });
if (updateOrderStatusRider.order_status === 'DELIVERED') { if (updateOrderStatusRider.order_status === "DELIVERED") {
navigation.goBack() navigation.goBack();
return return;
} }
// setOrder({ ...order, order_status: updateOrderStatusRider.order_status }) // setOrder({ ...order, order_status: updateOrderStatusRider.order_status })
} }
@ -90,13 +90,13 @@ function OrderDetail() {
} }
function onError({ graphQLErrors, networkError }) { function onError({ graphQLErrors, networkError }) {
let message = 'Unknown error occured' let message = "Unknown error occured";
if (networkError) message = 'Internal Server Error' if (networkError) message = "Internal Server Error";
if (graphQLErrors) message = graphQLErrors.map(o => o.message).join(', ') if (graphQLErrors) message = graphQLErrors.map((o) => o.message).join(", ");
FlashMessage({ FlashMessage({
message: message message: message,
}) });
} }
function getAddons(addons, currencySymbol) { function getAddons(addons, currencySymbol) {
@ -108,7 +108,8 @@ function OrderDetail() {
<View style={styles.orderTextCenterContainer}> <View style={styles.orderTextCenterContainer}>
<TextDefault <TextDefault
bolder bolder
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
{addon.title}:{option.title} {addon.title}:{option.title}
</TextDefault> </TextDefault>
</View> </View>
@ -116,15 +117,16 @@ function OrderDetail() {
<TextDefault <TextDefault
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bolder bolder
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
{currencySymbol} {currencySymbol}
{option.price.toFixed(2)} {option.price.toFixed(2)}
</TextDefault> </TextDefault>
</View> </View>
</View> </View>
</View> </View>
)) ));
}) });
} }
function getOrderItems(items, currencySymbol) { function getOrderItems(items, currencySymbol) {
@ -137,14 +139,16 @@ function OrderDetail() {
<TextDefault <TextDefault
textColor={colors.fontMainColor} textColor={colors.fontMainColor}
bolder bolder
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
{item.quantity}x {item.quantity}x
</TextDefault> </TextDefault>
</View> </View>
<View style={styles.orderTextCenterContainer}> <View style={styles.orderTextCenterContainer}>
<TextDefault <TextDefault
bolder bolder
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
{item.food.title}({item.variation.title}) {item.food.title}({item.variation.title})
</TextDefault> </TextDefault>
</View> </View>
@ -153,7 +157,8 @@ function OrderDetail() {
numberOfLines={1} numberOfLines={1}
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bolder bolder
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
{currencySymbol} {currencySymbol}
{(item.variation.price * item.quantity).toFixed(2)} {(item.variation.price * item.quantity).toFixed(2)}
</TextDefault> </TextDefault>
@ -162,23 +167,23 @@ function OrderDetail() {
</View> </View>
{!item.addons ? null : getAddons(item.addons, currencySymbol)} {!item.addons ? null : getAddons(item.addons, currencySymbol)}
</View> </View>
) );
}) });
} }
if (loadingAssigned || loadingUnAssigned) { if (loadingAssigned || loadingUnAssigned) {
return <TextError text="Loading orders" /> return <TextError text="Loading orders" />;
} }
if (loadingConfig) { if (loadingConfig) {
return <Spinner /> return <Spinner />;
} }
if (errorConfig) { if (errorConfig) {
return <TextError text="Something is worng" /> return <TextError text="Something is worng" />;
} }
if (!selectedOrder) { if (!selectedOrder) {
return ( return (
<TextError text="Order assgined to other rider,(something like that)" /> <TextError text="Order assgined to other rider,(something like that)" />
) );
} }
return ( return (
@ -186,7 +191,8 @@ function OrderDetail() {
<ScrollView <ScrollView
style={styles.flex} style={styles.flex}
contentContainerStyle={{ flexGrow: 1 }} contentContainerStyle={{ flexGrow: 1 }}
showsVerticalScrollIndicator={false}> showsVerticalScrollIndicator={false}
>
<View style={styles.customerCard}> <View style={styles.customerCard}>
<View style={styles.customerSubCard}> <View style={styles.customerSubCard}>
<View style={styles.customerHeader}> <View style={styles.customerHeader}>
@ -194,7 +200,8 @@ function OrderDetail() {
H3 H3
bolder bolder
textColor={colors.tagColor} textColor={colors.tagColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Customer Details Customer Details
</TextDefault> </TextDefault>
</View> </View>
@ -205,7 +212,8 @@ function OrderDetail() {
<TextDefault <TextDefault
bolder bolder
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Name Name
</TextDefault> </TextDefault>
<TextDefault bolder style={{ ...alignment.PBxSmall }}> <TextDefault bolder style={{ ...alignment.PBxSmall }}>
@ -218,7 +226,8 @@ function OrderDetail() {
<TextDefault <TextDefault
bolder bolder
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Contact Contact
</TextDefault> </TextDefault>
<TextDefault bolder style={{ ...alignment.PBxSmall }}> <TextDefault bolder style={{ ...alignment.PBxSmall }}>
@ -231,13 +240,15 @@ function OrderDetail() {
<TextDefault <TextDefault
bolder bolder
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Delviery Location Delviery Location
</TextDefault> </TextDefault>
<TextDefault <TextDefault
numberOfLines={2} numberOfLines={2}
bolder bolder
style={{ ...alignment.PBxSmall }}> style={{ ...alignment.PBxSmall }}
>
{`${selectedOrder.delivery_address.delivery_address}`} {`${selectedOrder.delivery_address.delivery_address}`}
</TextDefault> </TextDefault>
</View> </View>
@ -253,7 +264,8 @@ function OrderDetail() {
H3 H3
bolder bolder
textColor={colors.tagColor} textColor={colors.tagColor}
style={{ ...alignment.PTmedium }}> style={{ ...alignment.PTmedium }}
>
Order Details Order Details
</TextDefault> </TextDefault>
</View> </View>
@ -270,7 +282,8 @@ function OrderDetail() {
<TextDefault <TextDefault
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bolder bolder
style={{ ...alignment.PTmedium, ...alignment.PLmedium }}> style={{ ...alignment.PTmedium, ...alignment.PLmedium }}
>
Subtotal Subtotal
</TextDefault> </TextDefault>
</View> </View>
@ -279,7 +292,8 @@ function OrderDetail() {
numberOfLines={1} numberOfLines={1}
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bolder bolder
style={{ ...alignment.PTxSmall, ...alignment.PTmedium }}> style={{ ...alignment.PTxSmall, ...alignment.PTmedium }}
>
{data.configuration.currency_symbol} {data.configuration.currency_symbol}
{( {(
selectedOrder.order_amount - selectedOrder.order_amount -
@ -295,7 +309,8 @@ function OrderDetail() {
<TextDefault <TextDefault
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bolder bolder
style={{ ...alignment.PLmedium }}> style={{ ...alignment.PLmedium }}
>
Delivery Charges Delivery Charges
</TextDefault> </TextDefault>
</View> </View>
@ -303,7 +318,8 @@ function OrderDetail() {
<TextDefault <TextDefault
numberOfLines={1} numberOfLines={1}
textColor={colors.placeHolderColor} textColor={colors.placeHolderColor}
bolder> bolder
>
{data.configuration.currency_symbol} {data.configuration.currency_symbol}
{selectedOrder.delivery_charges.toFixed(2)} {selectedOrder.delivery_charges.toFixed(2)}
</TextDefault> </TextDefault>
@ -323,7 +339,8 @@ function OrderDetail() {
numberOfLines={1} numberOfLines={1}
textColor={colors.fontMainColor} textColor={colors.fontMainColor}
H4 H4
bolder> bolder
>
{data.configuration.currency_symbol} {data.configuration.currency_symbol}
{selectedOrder.order_amount.toFixed(2)} {selectedOrder.order_amount.toFixed(2)}
</TextDefault> </TextDefault>
@ -335,35 +352,39 @@ function OrderDetail() {
</View> </View>
<View style={styles.baseSpacer} /> <View style={styles.baseSpacer} />
<View style={styles.mapContainer}> <View style={styles.mapContainer}>
{selectedOrder.delivery_address && (
<MapView <MapView
style={styles.flex} style={styles.flex}
scrollEnabled={false} scrollEnabled={false}
zoomEnabled={false}
loadingBackgroundColor={colors.tagColor} loadingBackgroundColor={colors.tagColor}
zoomControlEnabled={false} zoomControlEnabled={false}
rotateEnabled={false} rotateEnabled={false}
cacheEnabled={true} cacheEnabled={true}
googleMapsApiKey="AIzaSyCzNP5qQql2a5y8lOoO-1yj1lj_tzjVImA"
initialRegion={{ initialRegion={{
latitude: parseFloat(selectedOrder.delivery_address.latitude), latitude: parseFloat(selectedOrder.delivery_address.latitude),
latitudeDelta: LATITUDE_DELTA, latitudeDelta: LATITUDE_DELTA,
longitude: parseFloat(selectedOrder.delivery_address.longitude), longitude: parseFloat(selectedOrder.delivery_address.longitude),
longitudeDelta: LONGITUDE_DELTA longitudeDelta: LONGITUDE_DELTA,
}} }}
provider={PROVIDER_GOOGLE} provider={PROVIDER_GOOGLE}
onPress={() => { onPress={() => {
linkToMapsApp( linkToMapsApp(
{ {
latitude: selectedOrder.delivery_address.latitude, latitude: selectedOrder.delivery_address.latitude,
longitude: selectedOrder.delivery_address.longitude longitude: selectedOrder.delivery_address.longitude,
}, },
'Destination' "Destination"
) );
}}> }}
>
<Marker <Marker
title="Delivery Address" title="Delivery Address"
coordinate={{ coordinate={{
latitude: parseFloat(selectedOrder.delivery_address.latitude), latitude: parseFloat(selectedOrder.delivery_address.latitude),
longitude: parseFloat(selectedOrder.delivery_address.longitude) longitude: parseFloat(
selectedOrder.delivery_address.longitude
),
}} }}
onPress={() => onPress={() =>
Linking.openURL( Linking.openURL(
@ -371,25 +392,28 @@ function OrderDetail() {
selectedOrder.delivery_address.longitude selectedOrder.delivery_address.longitude
)}+${parseFloat(selectedOrder.delivery_address.longitude)}` )}+${parseFloat(selectedOrder.delivery_address.longitude)}`
) )
}> }
>
<Image <Image
source={require('../../../assets/images/ui/markerEnatega.png')} source={require("../../../assets/images/ui/markerEnatega.png")}
style={{ width: scale(40), height: scale(40) }} style={{ width: scale(40), height: scale(40) }}
/> />
</Marker> </Marker>
</MapView> </MapView>
)}
</View> </View>
<View style={styles.actionContainer}> <View style={styles.actionContainer}>
{selectedOrder.order_status === 'ACCEPTED' && !selectedOrder.rider && ( {selectedOrder.order_status === "ACCEPTED" && !selectedOrder.rider && (
<TouchableOpacity <TouchableOpacity
disabled={loading} disabled={loading}
style={[ style={[
styles.cancelBtnStyle, styles.cancelBtnStyle,
{ backgroundColor: colors.buttonBackground } { backgroundColor: colors.buttonBackground },
]} ]}
onPress={() => { onPress={() => {
mutateAssignOrder({ variables: { id: selectedOrder._id } }) mutateAssignOrder({ variables: { id: selectedOrder._id } });
}}> }}
>
{loading ? ( {loading ? (
<Spinner spinnerColor={colors.buttonText} /> <Spinner spinnerColor={colors.buttonText} />
) : ( ) : (
@ -397,7 +421,8 @@ function OrderDetail() {
textColor={colors.fontMainColor} textColor={colors.fontMainColor}
H4 H4
bold bold
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Assign to me Assign to me
</TextDefault> </TextDefault>
)} )}
@ -406,39 +431,43 @@ function OrderDetail() {
{loadingMutation && <Spinner />} {loadingMutation && <Spinner />}
{!loadingMutation && selectedOrder.rider && ( {!loadingMutation && selectedOrder.rider && (
<View style={styles.actionSubContainer}> <View style={styles.actionSubContainer}>
{selectedOrder.order_status === 'ACCEPTED' && ( {selectedOrder.order_status === "ACCEPTED" && (
<TouchableOpacity <TouchableOpacity
style={[ style={[
styles.cancelBtnStyle, styles.cancelBtnStyle,
{ backgroundColor: colors.tagColor } { backgroundColor: colors.tagColor },
]} ]}
onPress={() => { onPress={() => {
mutate({ mutate({
variables: { id: selectedOrder._id, status: 'PICKED' } variables: { id: selectedOrder._id, status: "PICKED" },
}) });
}}> }}
>
<TextDefault <TextDefault
textColor={colors.fontMainColor} textColor={colors.fontMainColor}
H4 H4
bold bold
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Picked Picked
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
)} )}
{selectedOrder.order_status === 'PICKED' && ( {selectedOrder.order_status === "PICKED" && (
<TouchableOpacity <TouchableOpacity
style={styles.acceptBtnStyle} style={styles.acceptBtnStyle}
onPress={() => { onPress={() => {
mutate({ mutate({
variables: { id: selectedOrder._id, status: 'DELIVERED' } variables: { id: selectedOrder._id, status: "DELIVERED" },
}) });
}}> }}
>
<TextDefault <TextDefault
textColor={colors.fontMainColor} textColor={colors.fontMainColor}
H4 H4
bold bold
style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}> style={{ ...alignment.PTxSmall, ...alignment.PBxSmall }}
>
Delivered Delivered
</TextDefault> </TextDefault>
</TouchableOpacity> </TouchableOpacity>
@ -448,7 +477,7 @@ function OrderDetail() {
</View> </View>
</ScrollView> </ScrollView>
</MainWrapper> </MainWrapper>
) );
} }
export default OrderDetail export default OrderDetail;