diff --git a/apps/shopify-app/app/routes/app.routes.jsx b/apps/shopify-app/app/routes/app.routes.jsx
index 9e0758e..9b21a3a 100644
--- a/apps/shopify-app/app/routes/app.routes.jsx
+++ b/apps/shopify-app/app/routes/app.routes.jsx
@@ -4,7 +4,6 @@ import { useAppBridge } from "@shopify/app-bridge-react";
import { Outlet, redirect, useFetcher, useLoaderData, useNavigate, useParams, useSearchParams } from "react-router";
import { boundary } from "@shopify/shopify-app-react-router/server";
import { formatRouteStatus } from "../features/delivery/route-helpers";
-import { mapRouteOperationalState } from "../features/delivery/operational-state";
import {
buildRouteRows,
getExpandedRouteDeleteKeys,
@@ -17,7 +16,6 @@ import { deleteDeliveryRouteGroup, deleteDeliveryRouteGroupChildRoutes, fetchDel
import { getServiceErrorNotice } from "../features/service-errors";
import { authenticate } from "../shopify.server";
import { AdminRouteErrorBoundary } from "../ui/admin-route-error-boundary";
-import { OperationalPillGroup } from "../ui/operational-pill-group";
import { logStructuredMetric } from "../features/telemetry/structured-telemetry.server";
const routesTablePageStyle = {
@@ -143,7 +141,7 @@ function getRouteColumnWidths(routeRows) {
"14px",
getRouteNameColumnWidth(routeRows),
"104px",
- "420px",
+ "84px",
"56px",
"1%",
"1%",
@@ -292,6 +290,40 @@ const routeDisabledActionButtonStyle = {
opacity: 0.55,
};
+const routeStatusBadgeStyle = {
+ background: "#f1f1f1",
+ borderRadius: "999px",
+ color: "#616161",
+ display: "inline-flex",
+ fontSize: "12px",
+ fontWeight: 650,
+ padding: "3px 8px",
+};
+
+const routeReadyBadgeStyle = {
+ ...routeStatusBadgeStyle,
+ background: "#f1f1f1",
+ color: "#616161",
+};
+
+const routeInProgressBadgeStyle = {
+ ...routeStatusBadgeStyle,
+ background: "#e0f0ff",
+ color: "#00527c",
+};
+
+const routeCompletedBadgeStyle = {
+ ...routeStatusBadgeStyle,
+ background: "#e3f1df",
+ color: "#205c20",
+};
+
+const routeCancelledBadgeStyle = {
+ ...routeStatusBadgeStyle,
+ background: "#fee9e8",
+ color: "#8e1f0b",
+};
+
const routesErrorStyle = {
background: "#fff4f4",
borderColor: "#ffd6d6",
@@ -543,6 +575,21 @@ function filterRouteRows(routeRows, routeFilters) {
];
}
+function getStatusBadgeStyle(status) {
+ switch (formatRouteStatus(status)) {
+ case "Ready":
+ return routeReadyBadgeStyle;
+ case "In progress":
+ return routeInProgressBadgeStyle;
+ case "Completed":
+ return routeCompletedBadgeStyle;
+ case "Cancelled":
+ return routeCancelledBadgeStyle;
+ default:
+ return routeStatusBadgeStyle;
+ }
+}
+
export default function RoutesPage() {
const navigate = useNavigate();
const { routeId, routeGroupId } = useParams();
@@ -718,7 +765,7 @@ export default function RoutesPage() {
|
Route |
Date |
-
Operational state |
+
Status |
Orders |
Area |
Driver |
@@ -760,13 +807,7 @@ export default function RoutesPage() {
{route.route} |
{route.date} |
-
+ {formatRouteStatus(route.status)}
|
{route.orders} |
{route.deliveryArea} |
diff --git a/apps/shopify-app/app/routes/app.settings.jsx b/apps/shopify-app/app/routes/app.settings.jsx
index 936c09c..1bb17b5 100644
--- a/apps/shopify-app/app/routes/app.settings.jsx
+++ b/apps/shopify-app/app/routes/app.settings.jsx
@@ -33,12 +33,9 @@ import {
} from "../features/settings/settings-layout";
import { SettingsDepartureMap } from "../features/settings/settings-departure-map";
import { clearShopifyOrdersCache } from "../features/orders/shopify-orders.server";
-import { mapSettingsOperationalHealth } from "../features/delivery/operational-state";
-import { getShopifyTokenSyncHealth } from "../features/delivery/shopify-token-sync.server";
import { SUPPORTED_LANGUAGES, translate } from "../i18n/i18n";
import { authenticate } from "../shopify.server";
import { PageShell } from "../ui/page-shell";
-import { OperationalPillGroup } from "../ui/operational-pill-group";
const DELIVERY_CYCLE_WEEKDAY_OPTIONS = [
{ label: "Sunday", value: "SUNDAY" },
@@ -61,9 +58,6 @@ export const loader = async ({ request }) => {
return {
departureLocation: departureResult.departureLocation,
appPreferences: preferencesResult.appPreferences,
- operationalHealth: {
- shopifyToken: getShopifyTokenSyncHealth(shopifyShopCacheKey),
- },
errors: [
...(departureResult.errors ?? []),
...(preferencesResult.errors ?? []),
@@ -213,7 +207,7 @@ function isValidLongitude(longitude) {
}
export default function SettingsPage() {
- const { departureLocation, appPreferences, errors, operationalHealth } = useLoaderData();
+ const { departureLocation, appPreferences, errors } = useLoaderData();
const actionData = useActionData();
const geocodeFetcher = useFetcher();
const submitSettings = useSubmit();
@@ -339,14 +333,6 @@ export default function SettingsPage() {
{activeErrors.length > 0 ? (
{activeErrors[0]?.message ?? copy("settings.errors.unableToSave")}
) : null}
-