diff --git a/app/routes/app._index.jsx b/app/routes/app._index.jsx
index 1b8368c..0dc3ef6 100644
--- a/app/routes/app._index.jsx
+++ b/app/routes/app._index.jsx
@@ -138,6 +138,7 @@ export const action = async ({ request }) => {
/* ─── NavCard ────────────────────────────────────────────────────────────────── */
function NavCard({ icon, title, desc, link, accent }) {
+ const navigate = useNavigate();
const colors = {
blue: { bg: "#eff6ff", border: "#bfdbfe", icon: "#2563eb" },
green: { bg: "#f0fdf4", border: "#bbf7d0", icon: "#16a34a" },
@@ -146,16 +147,16 @@ function NavCard({ icon, title, desc, link, accent }) {
};
const c = colors[accent] || colors.blue;
return (
-
- { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 20px rgba(0,0,0,0.08)"; }}
- onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
- >
-
{icon}
-
{title}
-
{desc}
-
-
+
navigate(link)}
+ style={{ background: c.bg, border: `1px solid ${c.border}`, borderRadius: 12, padding: "18px 20px", cursor: "pointer", transition: "transform 0.15s, box-shadow 0.15s", height: "100%", display: "flex", flexDirection: "column", gap: 10 }}
+ onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 8px 20px rgba(0,0,0,0.08)"; }}
+ onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}
+ >
+
{icon}
+
{title}
+
{desc}
+
);
}
@@ -203,8 +204,8 @@ export default function Index() {
const navItems = [
{ icon: "⚙️", title: "Settings", desc: "Connect Turn14 API & configure pricing", link: `/app/settings`, accent: "purple" },
- { icon: "🏷️", title: "Browse Brands", desc: "Select brands to sync from Turn14", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands`, accent: "blue" },
- { icon: "📦", title: "Manage Brands", desc: "Import products from selected brands", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand`, accent: "green" },
+ { icon: "🏷️", title: "Browse Brands", desc: "Select brands to sync from Turn14", link: `/app/brands`, accent: "blue" },
+ { icon: "📦", title: "Manage Brands", desc: "Import products from selected brands", link: `/app/managebrand`, accent: "green" },
{ icon: "📊", title: "Dashboard", desc: "Track live import progress & stats", link: `/app/dashboard`, accent: "amber" },
];
diff --git a/app/routes/app.brands.jsx b/app/routes/app.brands.jsx
index a197fd9..31b2685 100644
--- a/app/routes/app.brands.jsx
+++ b/app/routes/app.brands.jsx
@@ -120,8 +120,16 @@ export const loader = async ({ request }) => {
let brandJson;
try {
- const brandRes = await fetch("https://turn14.data4autos.com/v1/brands", { headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" } });
+ let brandRes = await fetch("https://turn14.data4autos.com/v1/brands", { headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" } });
brandJson = await brandRes.json();
+ // Token expired on Turn14's side — force refresh and retry once
+ if (!brandRes.ok && (brandRes.status === 401 || brandJson?.error === "internal_error" || brandJson?.error === "invalid_token")) {
+ try {
+ accessToken = await getTurn14AccessTokenFromMetafield(request, true);
+ brandRes = await fetch("https://turn14.data4autos.com/v1/brands", { headers: { Authorization: `Bearer ${accessToken}`, "Content-Type": "application/json" } });
+ brandJson = await brandRes.json();
+ } catch {}
+ }
if (!brandRes.ok) return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop, error: brandJson?.error || "Failed to fetch brands", isSubscribed, subscription });
} catch (err) {
return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop, error: "Turn14 brands fetch crashed", isSubscribed, subscription });
diff --git a/app/utils/turn14Token.server.js b/app/utils/turn14Token.server.js
index cf60f2c..b479736 100644
--- a/app/utils/turn14Token.server.js
+++ b/app/utils/turn14Token.server.js
@@ -1,6 +1,6 @@
import { authenticate } from "../shopify.server";
-export async function getTurn14AccessTokenFromMetafield(request) {
+export async function getTurn14AccessTokenFromMetafield(request, forceRefresh = false) {
const { admin, session } = await authenticate.admin(request);
const shop = session.shop;
@@ -35,7 +35,7 @@ export async function getTurn14AccessTokenFromMetafield(request) {
const expiresAt = new Date(creds.expiresAt);
const isExpired = now > expiresAt;
- if (!isExpired && creds.accessToken) {
+ if (!forceRefresh && !isExpired && creds.accessToken) {
return creds.accessToken;
}