@deenruv/merchant-plugin 1.0.0

package/dist/plugin-server/ui/pages/FacebookPage.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useState } from "react";
+import {
+  PageDetailLayout,
+  useLazyQuery,
+  useMutation,
+  useInjector,
+} from "@deenruv/admin-ui/react";
+import { NotificationService } from "@deenruv/admin-ui/core";
+import {
+  getMerchantPlatformInfo,
+  getMerchantPlatformSettings,
+} from "../graphql/queries";
+import {
+  saveMerchantPlatformSettings,
+  removeOrphanItems,
+} from "../graphql/mutations";
+
+export const FacebookPage = () => {
+  const toast = useInjector(NotificationService);
+  const [fetchMerchantPlatformSettings] = useLazyQuery(
+    getMerchantPlatformSettings,
+  );
+  const [fetchMerchantPlatformInfo] = useLazyQuery(getMerchantPlatformInfo);
+  const [mutate] = useMutation(saveMerchantPlatformSettings);
+  const [removeOldItems] = useMutation(removeOrphanItems);
+  const [serviceInfo, setServiceInfo] = useState({
+    productsCount: 0,
+    connectionStatus: false,
+  });
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [settingsForm, setSettingsForm] = useState({
+    brand: "",
+    merchantId: "",
+    credentials: "",
+    autoUpdate: true,
+    firstSync: true,
+  });
+
+  const refetch = async () => {
+    try {
+      setIsLoading(true);
+      const [settingsData, infoData] = await Promise.all([
+        fetchMerchantPlatformSettings({ platform: "facebook" }),
+        fetchMerchantPlatformInfo({ platform: "facebook" }),
+      ]);
+      const settings =
+        settingsData?.getMerchantPlatformSettings?.entries?.reduce(
+          (acc, { key, value }) => {
+            if (key === "brand") {
+              acc.brand = value;
+            }
+            if (key === "merchantId") {
+              acc.merchantId = value;
+            }
+            if (key === "credentials") {
+              acc.credentials = value;
+            }
+            if (key === "autoUpdate") {
+              acc.autoUpdate = value === "true";
+            }
+            if (key === "firstSync") {
+              acc.firstSync = value === "true";
+            }
+            return acc;
+          },
+          {} as {
+            brand: string;
+            merchantId: string;
+            credentials: string;
+            autoUpdate: boolean;
+            firstSync: boolean;
+          },
+        );
+      setSettingsForm((prev) => ({ ...prev, ...settings }));
+      setServiceInfo({
+        productsCount:
+          infoData?.getMerchantPlatformInfo?.[0]?.productsCount || 0,
+        connectionStatus:
+          infoData?.getMerchantPlatformInfo?.[0]?.isValidConnection || false,
+      });
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    refetch();
+  }, []);
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      const { saveMerchantPlatformSettings } = await mutate({
+        input: {
+          platform: "facebook",
+          entries: Object.entries(settingsForm).map(([key, value]) => ({
+            key,
+            value: (value as string).toString(),
+          })),
+        },
+      });
+      if (saveMerchantPlatformSettings) {
+        toast.success("Settings saved successfully");
+        refetch();
+      } else {
+        toast.error("Failed to save settings");
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to save settings");
+    }
+  };
+
+  return (
+    <PageDetailLayout>
+      <div style={{ position: "relative" }} className="flex flex-col p-4">
+        {isLoading && (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              zIndex: 10,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              borderBottomRightRadius: "10px",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: "42px",
+                height: "42px",
+              }}
+              className="spinner"
+            />
+          </div>
+        )}{" "}
+        <form className="flex flex-col gap-4" onSubmit={onSubmit}>
+          <div className="flex justify-between gap-4">
+            <div className="w-full flex flex-col gap-2">
+              <label>Brand</label>
+              <input
+                className="w-full"
+                value={settingsForm.brand}
+                onChange={(e) =>
+                  setSettingsForm({ ...settingsForm, brand: e.target.value })
+                }
+              />
+            </div>
+            <div className="w-full flex flex-col gap-2">
+              <label>Catalog ID</label>
+              <input
+                className="w-full"
+                value={settingsForm.merchantId}
+                onChange={(e) =>
+                  setSettingsForm({
+                    ...settingsForm,
+                    merchantId: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col">
+              <label>Facebook Access Token</label>
+              <input
+                className="w-full"
+                value={settingsForm.credentials}
+                onChange={(e) =>
+                  setSettingsForm({
+                    ...settingsForm,
+                    credentials: e.target.value,
+                  })
+                }
+              />
+            </div>
+            <div className="flex gap-2 items-center">
+              <input
+                type="checkbox"
+                id="facebook-account-credentials"
+                checked={settingsForm.autoUpdate}
+                onChange={(e) =>
+                  setSettingsForm({
+                    ...settingsForm,
+                    autoUpdate: e.target.checked,
+                  })
+                }
+              />
+              <label htmlFor="facebook-account-credentials">
+                Auto update on Product's change
+              </label>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <div className="flex items-center gap-4">
+              <div className="flex gap-2">
+                <label htmlFor="auto-update-on-products-change">
+                  Update ALL products with saving
+                </label>
+                <input
+                  type="checkbox"
+                  id="auto-update-on-products-change"
+                  checked={settingsForm.firstSync}
+                  onChange={(e) =>
+                    setSettingsForm({
+                      ...settingsForm,
+                      firstSync: e.target.checked,
+                    })
+                  }
+                />
+              </div>
+              <button type="submit" className="btn btn-primary">
+                Save
+              </button>
+            </div>
+          </div>
+        </form>
+        <div className="flex gap-2">
+          <span>Connection status</span>
+          {serviceInfo.connectionStatus ? <div>💚</div> : <div>💔</div>}
+        </div>
+        {serviceInfo.connectionStatus ? (
+          <div style={{ marginTop: "12px" }}>
+            <button
+              className="btn btn-secondary"
+              onClick={async () => {
+                try {
+                  await removeOldItems({ platform: "facebook" });
+                  toast.success("Old items removed successfully");
+                  refetch();
+                } catch (error) {
+                  console.error(error);
+                  toast.error("Failed to remove old items");
+                }
+              }}
+            >
+              Remove old items
+            </button>
+          </div>
+        ) : null}
+        {/* <div className="flex gap-2">
+          <span>Products count</span>
+          <span>{serviceInfo.productsCount}</span>
+        </div> */}
+      </div>
+    </PageDetailLayout>
+  );
+};

package/dist/plugin-server/ui/pages/GooglePage.tsx

@@ -0,0 +1,281 @@
+import React, { useEffect, useState } from "react";
+import {
+  PageDetailLayout,
+  useLazyQuery,
+  useMutation,
+  useInjector,
+} from "@deenruv/admin-ui/react";
+import { NotificationService } from "@deenruv/admin-ui/core";
+import {
+  removeOrphanItems,
+  saveMerchantPlatformSettings,
+} from "../graphql/mutations";
+import {
+  getMerchantPlatformInfo,
+  getMerchantPlatformSettings,
+} from "../graphql/queries";
+
+export const GooglePage = () => {
+  const toast = useInjector(NotificationService);
+  const [fetchMerchantPlatformSettings] = useLazyQuery(
+    getMerchantPlatformSettings,
+  );
+  const [fetchMerchantPlatformInfo] = useLazyQuery(getMerchantPlatformInfo);
+  const [mutate] = useMutation(saveMerchantPlatformSettings);
+  const [removeOldItems] = useMutation(removeOrphanItems);
+  const [serviceInfo, setServiceInfo] = useState({
+    productsCount: 0,
+    connectionStatus: false,
+  });
+
+  const handleSelectedFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        try {
+          const jsonObject = JSON.parse(result);
+          setSettingsForm({
+            ...settingsForm,
+            credentials: JSON.stringify(jsonObject),
+          });
+        } catch (error) {
+          console.error("Invalid JSON file:", error);
+        }
+      };
+      reader.onerror = (e) => {
+        console.error("Error reading file", e);
+      };
+      if (file) reader.readAsText(file);
+    }
+  };
+  const [isLoading, setIsLoading] = useState(true);
+  const [settingsForm, setSettingsForm] = useState({
+    brand: "",
+    merchantId: "",
+    credentials: "",
+    autoUpdate: true,
+    firstSync: true,
+  });
+
+  const refetch = async () => {
+    try {
+      setIsLoading(true);
+      const [settingsData, infoData] = await Promise.all([
+        fetchMerchantPlatformSettings({ platform: "google" }),
+        fetchMerchantPlatformInfo({ platform: "google" }),
+      ]);
+      const settings =
+        settingsData?.getMerchantPlatformSettings?.entries?.reduce(
+          (acc, { key, value }) => {
+            if (key === "brand") {
+              acc.brand = value;
+            }
+            if (key === "merchantId") {
+              acc.merchantId = value;
+            }
+            if (key === "credentials") {
+              acc.credentials = value;
+            }
+            if (key === "autoUpdate") {
+              acc.autoUpdate = value === "true";
+            }
+            if (key === "firstSync") {
+              acc.firstSync = value === "true";
+            }
+            return acc;
+          },
+          {} as {
+            brand: string;
+            merchantId: string;
+            credentials: string;
+            autoUpdate: boolean;
+            firstSync: boolean;
+          },
+        );
+      setSettingsForm((prev) => ({ ...prev, ...settings }));
+      setServiceInfo({
+        productsCount:
+          infoData?.getMerchantPlatformInfo?.[0]?.productsCount || 0,
+        connectionStatus:
+          infoData?.getMerchantPlatformInfo?.[0]?.isValidConnection || false,
+      });
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    refetch();
+  }, []);
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      const { saveMerchantPlatformSettings } = await mutate({
+        input: {
+          platform: "google",
+          entries: Object.entries(settingsForm).map(([key, value]) => ({
+            key,
+            value: (value as string).toString(),
+          })),
+        },
+      });
+      if (saveMerchantPlatformSettings) {
+        toast.success("Settings saved successfully");
+        refetch();
+      } else {
+        toast.error("Failed to save settings");
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to save settings");
+    }
+  };
+
+  return (
+    <PageDetailLayout>
+      <div style={{ position: "relative" }} className="flex flex-col p-4">
+        {isLoading && (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              zIndex: 10,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              borderBottomRightRadius: "10px",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: "42px",
+                height: "42px",
+              }}
+              className="spinner"
+            />
+          </div>
+        )}
+        <form className="flex flex-col gap-4" onSubmit={onSubmit}>
+          <div className="flex justify-between gap-4">
+            <div className="w-full flex flex-col gap-2">
+              <label>Brand</label>
+              <input
+                className="w-full"
+                value={settingsForm.brand}
+                onChange={(e) =>
+                  setSettingsForm({ ...settingsForm, brand: e.target.value })
+                }
+              />
+            </div>
+            <div className="w-full flex flex-col gap-2">
+              <label>Merchant ID</label>
+              <input
+                className="w-full"
+                value={settingsForm.merchantId}
+                onChange={(e) =>
+                  setSettingsForm({
+                    ...settingsForm,
+                    merchantId: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col">
+              <label>Google Account Credentials</label>
+              <input
+                style={{
+                  border: "none",
+                  backgroundColor: "transparent",
+                  background: "none",
+                }}
+                type="file"
+                accept=".json"
+                onChange={handleSelectedFile}
+              />
+            </div>
+            <div className="flex gap-2 items-center">
+              <input
+                type="checkbox"
+                id="google-account-credentials"
+                checked={settingsForm.autoUpdate}
+                onChange={(e) =>
+                  setSettingsForm({
+                    ...settingsForm,
+                    autoUpdate: e.target.checked,
+                  })
+                }
+              />
+              <label htmlFor="google-account-credentials">
+                Auto update on Product's change
+              </label>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <div className="flex items-center gap-4">
+              <div className="flex gap-2">
+                <label htmlFor="auto-update-on-products-change">
+                  Update ALL products with saving
+                </label>
+                <input
+                  type="checkbox"
+                  id="auto-update-on-products-change"
+                  checked={settingsForm.firstSync}
+                  onChange={(e) =>
+                    setSettingsForm({
+                      ...settingsForm,
+                      firstSync: e.target.checked,
+                    })
+                  }
+                />
+              </div>
+              <button type="submit" className="btn btn-primary">
+                Save
+              </button>
+            </div>
+          </div>
+        </form>
+        <div className="flex gap-2">
+          <span>Connection status</span>
+          {serviceInfo.connectionStatus ? <div>💚</div> : <div>💔</div>}
+        </div>
+        {serviceInfo.connectionStatus ? (
+          <div style={{ marginTop: "12px" }}>
+            <button
+              className="btn btn-secondary"
+              onClick={async () => {
+                try {
+                  await removeOldItems({ platform: "google" });
+                  toast.success("Old items removed successfully");
+                  refetch();
+                } catch (error) {
+                  console.error(error);
+                  toast.error("Failed to remove old items");
+                }
+              }}
+            >
+              Remove old items
+            </button>
+          </div>
+        ) : null}
+        {/* <div className="flex gap-2">
+          <span>Products count</span>
+          <span>{serviceInfo.productsCount}</span>
+        </div> */}
+      </div>
+    </PageDetailLayout>
+  );
+};

package/dist/plugin-server/ui/providers.ts

@@ -0,0 +1,42 @@
+import { addNavMenuSection, addNavMenuItem } from "@deenruv/admin-ui/core";
+
+export default [
+  addNavMenuSection(
+    {
+      id: "merchant-platform-integration",
+      label: "Merchant Platform Integration",
+      displayMode: "settings",
+      collapsible: true,
+      collapsedByDefault: true,
+      requiresPermission: (permissions) => permissions.includes("SuperAdmin"),
+      items: [],
+    },
+    "settings",
+  ),
+  addNavMenuItem(
+    {
+      id: "google-merchant",
+      label: "Google Merchant",
+      routerLink: [
+        "extensions",
+        "merchant-platform-integration",
+        "google-merchant",
+      ],
+      requiresPermission: (permissions) => permissions.includes("SuperAdmin"),
+    },
+    "merchant-platform-integration",
+  ),
+  addNavMenuItem(
+    {
+      id: "facebook-commerce",
+      label: "Facebook Commerce",
+      routerLink: [
+        "extensions",
+        "merchant-platform-integration",
+        "facebook-commerce",
+      ],
+      requiresPermission: (permissions) => permissions.includes("SuperAdmin"),
+    },
+    "merchant-platform-integration",
+  ),
+];

package/dist/plugin-server/ui/routes.ts

@@ -0,0 +1,18 @@
+import { registerReactRouteComponent } from "@deenruv/admin-ui/react";
+import { GooglePage } from "./pages/GooglePage";
+import { FacebookPage } from "./pages/FacebookPage";
+
+export default [
+  registerReactRouteComponent({
+    component: GooglePage,
+    path: "google-merchant",
+    title: "Google Merchant Platform Integration Dashboard",
+    breadcrumb: "Google Merchant Platform Integration Dashboard",
+  }),
+  registerReactRouteComponent({
+    component: FacebookPage,
+    path: "facebook-commerce",
+    title: "Facebook Commerce Platform Integration Dashboard",
+    breadcrumb: "Facebook Commerce Platform Integration Dashboard",
+  }),
+];

package/dist/plugin-server/ui/styles/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;