diff --git a/app/routes/app.brands_060925.jsx b/app/routes/app.brands_060925.jsx
new file mode 100644
index 0000000..c3b589c
--- /dev/null
+++ b/app/routes/app.brands_060925.jsx
@@ -0,0 +1,457 @@
+import { json } from "@remix-run/node";
+import { useLoaderData, Form, useActionData } from "@remix-run/react";
+import {
+ Page,
+ Layout,
+ Card,
+ TextField,
+ Checkbox,
+ Button,
+ Thumbnail,
+ Spinner,
+ Toast,
+ Frame,
+ Text,
+} from "@shopify/polaris";
+import { useEffect, useState } from "react";
+import { TitleBar } from "@shopify/app-bridge-react";
+//import { getTurn14AccessTokenFromMetafield } from "../utils/turn14Token.server";
+import { authenticate } from "../shopify.server";
+
+
+
+
+
+
+
+async function checkShopExists(shop) {
+ try {
+ const resp = await fetch(
+ `https://backend.data4autos.com/checkisshopdataexists/${shop}`
+ );
+ const data = await resp.json();
+ return data.status === 1; // β
true if shop exists, false otherwise
+ } catch (err) {
+ console.error("Error checking shop:", err);
+ return false; // default to false if error
+ }
+}
+
+export const loader = async ({ request }) => {
+ // const accessToken = await getTurn14AccessTokenFromMetafield(request);
+ const { admin } = await authenticate.admin(request);
+
+ // // fetch brands
+ // const brandRes = await fetch("https://turn14.data4autos.com/v1/brands", {
+ // headers: {
+ // Authorization: `Bearer ${accessToken}`,
+ // "Content-Type": "application/json",
+ // },
+ // });
+ // const brandJson = await brandRes.json();
+ // if (!brandRes.ok) {
+ // return json({ error: brandJson.error || "Failed to fetch brands" }, { status: 500 });
+ // }
+
+ // // fetch Shopify collections
+ // const gqlRaw = await admin.graphql(`
+ // {
+ // collections(first: 100) {
+ // edges {
+ // node {
+ // id
+ // title
+ // }
+ // }
+ // }
+ // }
+ // `);
+ // const gql = await gqlRaw.json();
+ // const collections = gql?.data?.collections?.edges.map(e => e.node) || [];
+
+
+
+
+
+
+
+ // const res = await admin.graphql(`{
+ // shop {
+ // metafield(namespace: "turn14", key: "selected_brands") {
+ // value
+ // }
+ // }
+ // }`);
+ // const data = await res.json();
+ // const rawValue = data?.data?.shop?.metafield?.value;
+
+ // let brands = [];
+ // try {
+ // brands = JSON.parse(rawValue);
+
+ // } catch (err) {
+ // console.error("β Failed to parse metafield value:", err);
+ // }
+
+
+
+
+ const { session } = await authenticate.admin(request);
+ const shop = session.shop;
+
+ return json({ brands: [], collections : [], selectedBrandsFromShopify: [], shop });
+};
+
+export const action = async ({ request }) => {
+ const formData = await request.formData();
+ const selectedBrands = JSON.parse(formData.get("selectedBrands") || "[]");
+ const selectedOldBrands = JSON.parse(formData.get("selectedOldBrands") || "[]");
+ const { session } = await authenticate.admin(request);
+ const shop = session.shop; // "veloxautomotive.myshopify.com"
+
+ selectedBrands.forEach(brand => {
+ delete brand.pricegroups;
+ });
+
+ selectedOldBrands.forEach(brand => {
+ delete brand.pricegroups;
+ });
+
+
+ const resp = await fetch("https://backend.data4autos.com/managebrands", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "shop-domain": shop,
+ },
+ body: JSON.stringify({ shop, selectedBrands, selectedOldBrands }),
+ });
+
+ if (!resp.ok) {
+ const err = await resp.text();
+ return json({ error: err }, { status: resp.status });
+ }
+
+ const { processId, status } = await resp.json();
+ return json({ processId, status });
+};
+
+export default function BrandsPage() {
+ const { brands, collections, selectedBrandsFromShopify, shop } = useLoaderData();
+ // console.log(`selectedBrandsFromShopify: ${JSON.stringify(selectedBrandsFromShopify)}`);
+ const actionData = useActionData() || {};
+ const [selectedIdsold, setSelectedIdsold] = useState([])
+ // const [selectedIds, setSelectedIds] = useState(() => {
+ // const titles = new Set(collections.map(c => c.title.toLowerCase()));
+ // return brands
+ // .filter(b => titles.has(b.name.toLowerCase()))
+ // .map(b => b.id);
+ // });
+
+ const [selectedIds, setSelectedIds] = useState(() => {
+ return selectedBrandsFromShopify.map(b => b.id);
+ });
+ // console.log("Selected IDS : ", selectedIds)
+ const [search, setSearch] = useState("");
+ const [filteredBrands, setFilteredBrands] = useState(brands);
+ const [toastActive, setToastActive] = useState(false);
+ const [polling, setPolling] = useState(false);
+ const [status, setStatus] = useState(actionData.status || "");
+
+
+
+
+
+
+
+ const [Turn14Enabled, setTurn14Enabled] = useState(null); // null | true | false
+
+ useEffect(() => {
+ if (!shop) {
+ console.log("β οΈ shop is undefined or empty");
+ return;
+ }
+
+ (async () => {
+ const result = await checkShopExists(shop);
+ console.log("β
API status result:", result, "| shop:", shop);
+ setTurn14Enabled(result);
+ })();
+ }, [shop]);
+
+
+
+
+
+ useEffect(() => {
+ const selids = selectedIds
+ // console.log("Selected IDS : ", selids)
+ setSelectedIdsold(selids)
+ }, [toastActive]);
+
+
+ useEffect(() => {
+ const term = search.toLowerCase();
+ setFilteredBrands(brands.filter(b => b.name.toLowerCase().includes(term)));
+ }, [search, brands]);
+
+ useEffect(() => {
+ if (actionData.status) {
+ setStatus(actionData.status);
+ setToastActive(true);
+ }
+ }, [actionData.status]);
+
+ const checkStatus = async () => {
+ if (!actionData.processId) return;
+ setPolling(true);
+ const resp = await fetch(
+ `https://backend.data4autos.com/managebrands/status/${actionData.processId}`,
+ { headers: { "shop-domain": window.shopify.shop || "" } }
+ );
+ const jsonBody = await resp.json();
+ setStatus(
+ jsonBody.status + (jsonBody.detail ? ` (${jsonBody.detail})` : "")
+ );
+ setPolling(false);
+ };
+
+ const toggleSelect = id =>
+ setSelectedIds(prev =>
+ prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+ );
+
+ const allFilteredSelected =
+ filteredBrands.length > 0 &&
+ filteredBrands.every(b => selectedIds.includes(b.id));
+
+ const toggleSelectAll = () => {
+ const ids = filteredBrands.map(b => b.id);
+ if (allFilteredSelected) {
+ setSelectedIds(prev => prev.filter(id => !ids.includes(id)));
+ } else {
+ setSelectedIds(prev => Array.from(new Set([...prev, ...ids])));
+ }
+ };
+
+ var isSubmitting;
+ // console.log("actionData", actionData);
+ if (actionData.status) {
+ isSubmitting = !actionData.status && !actionData.error && !actionData.processId;
+ } else {
+ isSubmitting = false;
+ }
+ // console.log("isSubmitting", isSubmitting);
+
+ const toastMarkup = toastActive ? (
+ setToastActive(false)}
+ />
+ ) : null;
+
+ const selectedBrands = brands.filter(b => selectedIds.includes(b.id));
+ const selectedOldBrands = brands.filter(b => selectedIdsold.includes(b.id));
+
+
+
+ const shopDomain = (shop || "").split(".")[0];
+
+ const items = [
+ { icon: "βοΈ", text: "Manage API settings", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/settings` },
+ { icon: "π·οΈ", text: "Browse and import available brands", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands` },
+ { icon: "π¦", text: "Sync brand collections to Shopify", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand` },
+ { icon: "π", text: "Handle secure Turn14 login credentials", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help` },
+ ];
+
+ // If Turn14 is explicitly NOT connected, show a lightweight call-to-action screen
+if (Turn14Enabled === false) {
+ return (
+
+
+
+
+
+
+
+
+ Turn14 isnβt connected yet
+
+
+
+ This shop hasnβt been configured with Turn14 / Data4Autos. To get started, open Settings and complete the connection.
+
+
+
+ {/* Primary actions */}
+
+
+
+
+ Once connected, youβll be able to browse brands and sync collections.
+
+
+
+ {/* Secondary links */}
+
+
+
+
+
+
+
+ );
+}
+
+
+
+
+ // console.log("Selected Brands:", selectedBrands)
+ return (
+
+
+
+
+
+ Data4Autos Turn14 Brands List
+
+
+
+
+ {/*
+
+ Turn 14 Status: {" "}
+ {Turn14Enabled === true
+ ? "β
Turn14 x Shopify Connected!"
+ : Turn14Enabled === false
+ ? "β Turn14 x Shopify Connection Doesn't Exists"
+ : "Checking..."}
+
+
*/}
+
+
+
+
+
+
+
+ {/* Left side - Search + Select All */}
+
+ {(actionData?.processId || false) && (
+
+
+ Process ID: {actionData.processId}
+
+
+ Status: {status || "β"}
+
+
+ Check Status
+
+
+ )}
+
+
+
+
+ {/* Right side - Save Button */}
+
+
+
+
+
+
+ {filteredBrands.map((brand) => (
+
+
+ {/* Checkbox in top-right corner */}
+
+ toggleSelect(brand.id)}
+ />
+
+
+ {/* Brand image */}
+
+
+
+ {/* Brand name */}
+
+ {brand.name}
+
+
+
+ ))}
+
+
+
+
+ {toastMarkup}
+
+
+ );
+}
diff --git a/app/routes/app.brands_2808 copy.jsx b/app/routes/app.brands_2808 copy.jsx
new file mode 100644
index 0000000..e95979e
--- /dev/null
+++ b/app/routes/app.brands_2808 copy.jsx
@@ -0,0 +1,457 @@
+import { json } from "@remix-run/node";
+import { useLoaderData, Form, useActionData } from "@remix-run/react";
+import {
+ Page,
+ Layout,
+ Card,
+ TextField,
+ Checkbox,
+ Button,
+ Thumbnail,
+ Spinner,
+ Toast,
+ Frame,
+ Text,
+} from "@shopify/polaris";
+import { useEffect, useState } from "react";
+import { TitleBar } from "@shopify/app-bridge-react";
+import { getTurn14AccessTokenFromMetafield } from "../utils/turn14Token.server";
+import { authenticate } from "../shopify.server";
+
+
+
+
+
+
+
+async function checkShopExists(shop) {
+ try {
+ const resp = await fetch(
+ `https://backend.data4autos.com/checkisshopdataexists/${shop}`
+ );
+ const data = await resp.json();
+ return data.status === 1; // β
true if shop exists, false otherwise
+ } catch (err) {
+ console.error("Error checking shop:", err);
+ return false; // default to false if error
+ }
+}
+
+export const loader = async ({ request }) => {
+ const accessToken = await getTurn14AccessTokenFromMetafield(request);
+ const { admin } = await authenticate.admin(request);
+
+ // fetch brands
+ const brandRes = await fetch("https://turn14.data4autos.com/v1/brands", {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ "Content-Type": "application/json",
+ },
+ });
+ const brandJson = await brandRes.json();
+ if (!brandRes.ok) {
+ return json({ error: brandJson.error || "Failed to fetch brands" }, { status: 500 });
+ }
+
+ // fetch Shopify collections
+ const gqlRaw = await admin.graphql(`
+ {
+ collections(first: 100) {
+ edges {
+ node {
+ id
+ title
+ }
+ }
+ }
+ }
+ `);
+ const gql = await gqlRaw.json();
+ const collections = gql?.data?.collections?.edges.map(e => e.node) || [];
+
+
+
+
+
+
+
+ const res = await admin.graphql(`{
+ shop {
+ metafield(namespace: "turn14", key: "selected_brands") {
+ value
+ }
+ }
+ }`);
+ const data = await res.json();
+ const rawValue = data?.data?.shop?.metafield?.value;
+
+ let brands = [];
+ try {
+ brands = JSON.parse(rawValue);
+
+ } catch (err) {
+ console.error("β Failed to parse metafield value:", err);
+ }
+
+
+
+
+ const { session } = await authenticate.admin(request);
+ const shop = session.shop;
+
+ return json({ brands: brandJson.data, collections, selectedBrandsFromShopify: brands || [], shop });
+};
+
+export const action = async ({ request }) => {
+ const formData = await request.formData();
+ const selectedBrands = JSON.parse(formData.get("selectedBrands") || "[]");
+ const selectedOldBrands = JSON.parse(formData.get("selectedOldBrands") || "[]");
+ const { session } = await authenticate.admin(request);
+ const shop = session.shop; // "veloxautomotive.myshopify.com"
+
+ selectedBrands.forEach(brand => {
+ delete brand.pricegroups;
+ });
+
+ selectedOldBrands.forEach(brand => {
+ delete brand.pricegroups;
+ });
+
+
+ const resp = await fetch("https://backend.data4autos.com/managebrands", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "shop-domain": shop,
+ },
+ body: JSON.stringify({ shop, selectedBrands, selectedOldBrands }),
+ });
+
+ if (!resp.ok) {
+ const err = await resp.text();
+ return json({ error: err }, { status: resp.status });
+ }
+
+ const { processId, status } = await resp.json();
+ return json({ processId, status });
+};
+
+export default function BrandsPage() {
+ const { brands, collections, selectedBrandsFromShopify, shop } = useLoaderData();
+ // console.log(`selectedBrandsFromShopify: ${JSON.stringify(selectedBrandsFromShopify)}`);
+ const actionData = useActionData() || {};
+ const [selectedIdsold, setSelectedIdsold] = useState([])
+ // const [selectedIds, setSelectedIds] = useState(() => {
+ // const titles = new Set(collections.map(c => c.title.toLowerCase()));
+ // return brands
+ // .filter(b => titles.has(b.name.toLowerCase()))
+ // .map(b => b.id);
+ // });
+
+ const [selectedIds, setSelectedIds] = useState(() => {
+ return selectedBrandsFromShopify.map(b => b.id);
+ });
+ // console.log("Selected IDS : ", selectedIds)
+ const [search, setSearch] = useState("");
+ const [filteredBrands, setFilteredBrands] = useState(brands);
+ const [toastActive, setToastActive] = useState(false);
+ const [polling, setPolling] = useState(false);
+ const [status, setStatus] = useState(actionData.status || "");
+
+
+
+
+
+
+
+ const [Turn14Enabled, setTurn14Enabled] = useState(null); // null | true | false
+
+ useEffect(() => {
+ if (!shop) {
+ console.log("β οΈ shop is undefined or empty");
+ return;
+ }
+
+ (async () => {
+ const result = await checkShopExists(shop);
+ console.log("β
API status result:", result, "| shop:", shop);
+ setTurn14Enabled(result);
+ })();
+ }, [shop]);
+
+
+
+
+
+ useEffect(() => {
+ const selids = selectedIds
+ // console.log("Selected IDS : ", selids)
+ setSelectedIdsold(selids)
+ }, [toastActive]);
+
+
+ useEffect(() => {
+ const term = search.toLowerCase();
+ setFilteredBrands(brands.filter(b => b.name.toLowerCase().includes(term)));
+ }, [search, brands]);
+
+ useEffect(() => {
+ if (actionData.status) {
+ setStatus(actionData.status);
+ setToastActive(true);
+ }
+ }, [actionData.status]);
+
+ const checkStatus = async () => {
+ if (!actionData.processId) return;
+ setPolling(true);
+ const resp = await fetch(
+ `https://backend.data4autos.com/managebrands/status/${actionData.processId}`,
+ { headers: { "shop-domain": window.shopify.shop || "" } }
+ );
+ const jsonBody = await resp.json();
+ setStatus(
+ jsonBody.status + (jsonBody.detail ? ` (${jsonBody.detail})` : "")
+ );
+ setPolling(false);
+ };
+
+ const toggleSelect = id =>
+ setSelectedIds(prev =>
+ prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+ );
+
+ const allFilteredSelected =
+ filteredBrands.length > 0 &&
+ filteredBrands.every(b => selectedIds.includes(b.id));
+
+ const toggleSelectAll = () => {
+ const ids = filteredBrands.map(b => b.id);
+ if (allFilteredSelected) {
+ setSelectedIds(prev => prev.filter(id => !ids.includes(id)));
+ } else {
+ setSelectedIds(prev => Array.from(new Set([...prev, ...ids])));
+ }
+ };
+
+ var isSubmitting;
+ // console.log("actionData", actionData);
+ if (actionData.status) {
+ isSubmitting = !actionData.status && !actionData.error && !actionData.processId;
+ } else {
+ isSubmitting = false;
+ }
+ // console.log("isSubmitting", isSubmitting);
+
+ const toastMarkup = toastActive ? (
+ setToastActive(false)}
+ />
+ ) : null;
+
+ const selectedBrands = brands.filter(b => selectedIds.includes(b.id));
+ const selectedOldBrands = brands.filter(b => selectedIdsold.includes(b.id));
+
+
+
+ const shopDomain = (shop || "").split(".")[0];
+
+ const items = [
+ { icon: "βοΈ", text: "Manage API settings", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/settings` },
+ { icon: "π·οΈ", text: "Browse and import available brands", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands` },
+ { icon: "π¦", text: "Sync brand collections to Shopify", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand` },
+ { icon: "π", text: "Handle secure Turn14 login credentials", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help` },
+ ];
+
+ // If Turn14 is explicitly NOT connected, show a lightweight call-to-action screen
+if (Turn14Enabled === false) {
+ return (
+
+
+
+
+
+
+
+
+ Turn14 isnβt connected yet
+
+
+
+ This shop hasnβt been configured with Turn14 / Data4Autos. To get started, open Settings and complete the connection.
+
+
+
+ {/* Primary actions */}
+
+
+
+
+ Once connected, youβll be able to browse brands and sync collections.
+
+
+
+ {/* Secondary links */}
+
+
+
+
+
+
+
+ );
+}
+
+
+
+
+ // console.log("Selected Brands:", selectedBrands)
+ return (
+
+
+
+
+
+ Data4Autos Turn14 Brands List
+
+
+
+
+ {/*
+
+ Turn 14 Status: {" "}
+ {Turn14Enabled === true
+ ? "β
Turn14 x Shopify Connected!"
+ : Turn14Enabled === false
+ ? "β Turn14 x Shopify Connection Doesn't Exists"
+ : "Checking..."}
+
+
*/}
+
+
+
+
+
+
+
+ {/* Left side - Search + Select All */}
+
+ {(actionData?.processId || false) && (
+
+
+ Process ID: {actionData.processId}
+
+
+ Status: {status || "β"}
+
+
+ Check Status
+
+
+ )}
+
+
+
+
+ {/* Right side - Save Button */}
+
+
+
+
+
+
+ {filteredBrands.map((brand) => (
+
+
+ {/* Checkbox in top-right corner */}
+
+ toggleSelect(brand.id)}
+ />
+
+
+ {/* Brand image */}
+
+
+
+ {/* Brand name */}
+
+ {brand.name}
+
+
+
+ ))}
+
+
+
+
+ {toastMarkup}
+
+
+ );
+}
diff --git a/app/routes/app.managebrand.jsx b/app/routes/app.managebrand.jsx
index 4622fd0..8d25160 100644
--- a/app/routes/app.managebrand.jsx
+++ b/app/routes/app.managebrand.jsx
@@ -19,10 +19,30 @@ import {
ProgressBar,
Checkbox,
Text,
+ ChoiceList,
+ Popover,
+ OptionList,
} from "@shopify/polaris";
import { authenticate } from "../shopify.server";
import { TitleBar } from "@shopify/app-bridge-react";
+const styles = {
+ gridContainer: {
+ display: 'grid',
+ gridTemplateColumns: '1fr 1fr', // Two equal columns
+ gap: '10px', // Space between items
+ },
+ gridItem: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ gridFullWidthItem: {
+ gridColumn: 'span 2', // This takes up the full width (for Description)
+ display: 'flex',
+ flexDirection: 'column',
+ },
+};
+
async function checkShopExists(shop) {
try {
@@ -40,9 +60,29 @@ async function checkShopExists(shop) {
export const loader = async ({ request }) => {
- const { admin } = await authenticate.admin(request);
+
+
const { getTurn14AccessTokenFromMetafield } = await import("../utils/turn14Token.server");
- const accessToken = await getTurn14AccessTokenFromMetafield(request);
+
+
+
+ const { admin } = await authenticate.admin(request);
+ const { session } = await authenticate.admin(request);
+ const shop = session.shop;
+
+ var accessToken = ""
+ try {
+ accessToken = await getTurn14AccessTokenFromMetafield(request);
+ } catch (err) {
+ return json({ brands: [], collections: [], selectedBrandsFromShopify: [], shop });
+ console.error("Error getting Turn14 access token:", err);
+ // Proceeding with empty accessToken
+ }
+
+
+
+
+
const res = await admin.graphql(`{
shop {
@@ -62,8 +102,7 @@ export const loader = async ({ request }) => {
}
- const { session } = await authenticate.admin(request);
- const shop = session.shop;
+
return json({ brands, accessToken, shop });
};
@@ -280,7 +319,6 @@ export default function ManageBrandProducts() {
const [results, setResults] = useState([]);
const [detail, setDetail] = useState("");
- const [filterregulatstock, setfilterregulatstock] = useState(false)
@@ -409,6 +447,13 @@ export default function ManageBrandProducts() {
const [filters, setFilters] = useState({ make: '', model: '', year: '', drive: '', baseModel: '' });
+ const [filterregulatstock, setfilterregulatstock] = useState(false)
+
+ const [isFilter_EnableZeroStock, set_isFilter_EnableZeroStock] = useState(true)
+ const [isFilter_IncludeLtlFreightRequired, setisFilter_IncludeLtlFreightRequired] = useState(true)
+ const [isFilter_Excludeclearance_item, setisFilter_Excludeclearance_item] = useState(false)
+ const [isFilter_Excludeair_freight_prohibited, setisFilter_Excludeair_freight_prohibited] = useState(false)
+ const [isFilter_IncludeProductWithNoImages, setisFilter_IncludeProductWithNoImages] = useState(true)
const handleFilterChange = (field) => (value) => {
setFilters((prev) => ({ ...prev, [field]: value }));
@@ -445,6 +490,26 @@ export default function ManageBrandProducts() {
isMatch = isMatch && item?.attributes?.regular_stock
}
+
+ if (!isFilter_EnableZeroStock) {
+ isMatch = isMatch && item?.inventoryQuantity > 0;
+ }
+ if (!isFilter_IncludeLtlFreightRequired) {
+ isMatch = isMatch && item?.attributes?.ltl_freight_required !== true;
+ }
+
+ if (isFilter_Excludeclearance_item) {
+ isMatch = isMatch && item?.attributes?.clearance_item !== true;
+ }
+ if (isFilter_Excludeair_freight_prohibited) {
+ isMatch = isMatch && item?.attributes?.air_freight_prohibited !== true;
+ }
+
+ if (!isFilter_IncludeProductWithNoImages) {
+ isMatch = isMatch && item?.attributes?.files && item?.attributes?.files.length > 0;
+ }
+
+
return isMatch;
});
};
@@ -456,17 +521,38 @@ export default function ManageBrandProducts() {
- const shopDomain = (shop || "").split(".")[0];
-
- const items = [
- { icon: "βοΈ", text: "Manage API settings", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/settings` },
- { icon: "π·οΈ", text: "Browse and import available brands", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands` },
- { icon: "π¦", text: "Sync brand collections to Shopify", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand` },
- { icon: "π", text: "Handle secure Turn14 login credentials", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help` },
- ];
-
- // If Turn14 is explicitly NOT connected, show a lightweight call-to-action screen
+ const shopDomain = (shop || "").split(".")[0];
+
+ const items = [
+ { icon: "βοΈ", text: "Manage API settings", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/settings` },
+ { icon: "π·οΈ", text: "Browse and import available brands", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/brands` },
+ { icon: "π¦", text: "Sync brand collections to Shopify", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/managebrand` },
+ { icon: "π", text: "Handle secure Turn14 login credentials", link: `https://admin.shopify.com/store/${shopDomain}/apps/d4a-turn14/app/help` },
+ ];
+
+
+
+ const [popoverActive, setPopoverActive] = useState(false);
+
+ const togglePopover = () => setPopoverActive((active) => !active);
+
+
+ const activator = (
+
+ {filters.make.length > 0
+ ? `Selected (${filters.make.length})`
+ : "Select Makes"}
+
+ );
+ // If Turn14 is explicitly NOT connected, show a lightweight call-to-action screen
if (Turn14Enabled === false) {
+ // Fallback if items array is not loaded yet
+ const safeItems = Array.isArray(items) && items.length >= 4 ? items : [
+ { link: "#", icon: "π", text: "Connect Turn14" },
+ { link: "#", icon: "βοΈ", text: "Settings" },
+ { link: "#", icon: "β", text: "Help" },
+ { link: "#", icon: "π", text: "Documentation" }
+ ];
return (
@@ -483,7 +569,7 @@ export default function ManageBrandProducts() {
This shop hasnβt been configured with Turn14 / Data4Autos. To get started, open Settings and complete the connection.
-
+
{/* Primary actions */}