adding little description about the data sync and adding a sync button

package-lock.json

@@ -10911,7 +10911,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#c68c727be5b1076bbb534996a13d5e3285c6ca68",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#8308e3c2a3bbc296d152b2df83246de3d0df4321",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }

src/integrations/LibraCart/LibraCartAccess.tsx

@@ -15,7 +15,7 @@ import {
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { teamScope, User } from "models";
 import { pond } from "protobuf-ts/pond";
-import { useSnackbar, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import { useLibraCartProxyAPI } from "providers/pond/libracartProxyAPI";
 import React, { useEffect, useState } from "react";
 import TeamSearch from "teams/TeamSearch";
@@ -33,7 +33,7 @@ export default function LibraCartAccess() {
   const libracartAPI = useLibraCartProxyAPI();
   //const [dataOps, setDataOps] = useState<pond.DataOption[]>([]);
   const { openSnack } = useSnackbar();
-  //const [{ as }] = useGlobalState();
+  const [{ as }] = useGlobalState();
   // const integration_url = process.env.REACT_APP_LIBRACART_INTEGRATION_URL;
   const integration_url = import.meta.env.VITE_LIBRACART_INTEGRATION_URL;
 
@@ -176,28 +176,45 @@ export default function LibraCartAccess() {
 
   return (
     <Box style={{ padding: 10 }}>
-      <Grid container direction="row" alignContent="center" alignItems="center" wrap="nowrap">
+      <Grid container direction="row" alignContent="center" alignItems="center" wrap="nowrap" width="100%" justifyContent="space-between">
-        <Grid>
+        <Grid container direction="row" alignContent="center" alignItems="center" wrap="nowrap">
-      <Button
+          <Grid>
-        variant="contained"
+            <Button
-        color="primary"
+              variant="contained"
-        onClick={e => {
+              color="primary"
-          e.preventDefault();
+              onClick={e => {
-          window.open(`${integration_url}`, "_blank");
+                e.preventDefault();
-        }}>
+                window.open(`${integration_url}`, "_blank");
-        Link Libra Cart Account
+              }}>
-      </Button>
+              Link Libra Cart Account
+            </Button>
+          </Grid>
+          <Grid>
+            <Tooltip 
+              title='The integration can be found by selecting my account in the corner, 
+              selecting the "Manage Account" option and then selecting integrations in the left side menu'>
+            <Help />
+            </Tooltip>
+          </Grid>
         </Grid>
         <Grid>
-          <Tooltip 
+          <Tooltip title={"This will Sync the data for all LibraCart accounts linked to " + (as ? "this team" : "your account")}>
-            title='The integration can be found by selecting my account in the corner, selecting the "Manage Account" option and then selecting integrations in the left side menu'
+            <Button
-          >
+              variant="contained"
-          <Help />
+              color="primary"
+              onClick={e => {
+                libracartAPI.syncData().then(resp => {}).catch(err => {})
+              }}>
+              Sync
+            </Button>
           </Tooltip>
         </Grid>
-
       </Grid>
-
+      <Box paddingTop={2}>
+        <Typography>
+          LibraCart data will sync every 6 hours, if the data is needed immediately you can select the Sync button. It may take up to 15 minutes for the data to appear in our platform.
+        </Typography>
+      </Box>
 
       {newOrgDialog()}
     </Box>

src/providers/pond/libracartProxyAPI.tsx

@@ -4,6 +4,7 @@ import { pond } from "protobuf-ts/pond";
 import React, { createContext, PropsWithChildren, useContext } from "react";
 //import { or } from "utils";
 import { pondURL } from "./pond";
+import { useGlobalState } from "providers/StateContainer";
 
 export interface ILibraCartProxyAPIContext {
   //add new organization
@@ -33,6 +34,7 @@ export interface ILibraCartProxyAPIContext {
     libracartKey?: string,
     as?: string
   ) => Promise<AxiosResponse<pond.ListLibraCartDestinationsResponse>>;
+  syncData: () => Promise<any>
 }
 
 export const LibraCartProxyAPIContext = createContext<ILibraCartProxyAPIContext>(
@@ -43,6 +45,7 @@ interface Props {}
 
 export default function LibraCartProvider(props: PropsWithChildren<Props>) {
   const { children } = props;
+  const [{as}] = useGlobalState();
   const { post, get, put } = useHTTP();
 
   const addAccount = (
@@ -104,13 +107,18 @@ export default function LibraCartProvider(props: PropsWithChildren<Props>) {
     )
   }
 
+  const syncData = () => {
+    return get(pondURL("/libracartImport" + (as ? "?as=" + as : "")))
+  }
+
   return (
     <LibraCartProxyAPIContext.Provider
       value={{
         addAccount,
         listAccounts,
         updateAccount,
-        listDestinations
+        listDestinations,
+        syncData
       }}>
       {children}
     </LibraCartProxyAPIContext.Provider>