sanity-plugin-shopify-assets 1.2.0 → 1.2.2

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
@@ -31,29 +29,81 @@ var videojs__default = /*#__PURE__*/_interopDefaultCompat(videojs);
 var PhotoAlbum__default = /*#__PURE__*/_interopDefaultCompat(PhotoAlbum);
 var InfiniteScroll__default = /*#__PURE__*/_interopDefaultCompat(InfiniteScroll);
 var axios__default = /*#__PURE__*/_interopDefaultCompat(axios);
-const Root = styledComponents.styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  background-origin: content-box;\n  background-repeat: no-repeat;\n  background-clip: border-box;\n  background-size: cover;\n  background-color: ", ";\n  position: relative;\n  outline: none !important;\n  border: ", ";\n  box-sizing: content-box;\n  user-drag: none;\n\n  &:hover {\n    opacity: 0.85;\n  }\n\n  &:focus,\n  &:active {\n    border: 1px solid var(--input-border-color-focus);\n    box-shadow: inset 0 0 0 3px var(--input-border-color-focus);\n  }\n"])), _ref => {
+const Root = styledComponents.styled.div`
+  overflow: hidden;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-clip: border-box;
+  background-size: cover;
+  background-color: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.sanity.color.card.enabled.bg2;
-}, _ref2 => {
+}};
+  position: relative;
+  outline: none !important;
+  border: ${_ref2 => {
   let {
     theme
   } = _ref2;
-  return "1px solid ".concat(theme.sanity.color.card.enabled.border);
-});
-const InfoLine = styledComponents.styled(ui.Card)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  user-drag: none;\n  position: absolute;\n  background-color: var(--infoline-bg);\n  top: 0;\n  left: 0;\n  max-width: 65%;\n  overflow-wrap: break-word;\n\n  [data-ui='Text'] {\n    color: var(--infoline-fg);\n  }\n"])), _ref3 => {
+  return `1px solid ${theme.sanity.color.card.enabled.border}`;
+}};
+  box-sizing: content-box;
+  user-drag: none;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:focus,
+  &:active {
+    border: 1px solid var(--input-border-color-focus);
+    box-shadow: inset 0 0 0 3px var(--input-border-color-focus);
+  }
+`;
+const InfoLine = styledComponents.styled(ui.Card)`
+  ${_ref3 => {
   let {
     theme
   } = _ref3;
-  return "\n    --infoline-fg: ".concat(theme.sanity.color.card.enabled.fg, ";\n    --infoline-bg: ").concat(theme.sanity.color.card.enabled.bg, ";\n  ");
-});
-const DurationLine = styledComponents.styled(ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  user-drag: none;\n  position: absolute;\n  background-color: var(--durationline-bg);\n  top: 0;\n  right: 0;\n\n  [data-ui='Text'] {\n    color: var(--durationline-fg);\n  }\n"])), _ref4 => {
+  return `
+    --infoline-fg: ${theme.sanity.color.card.enabled.fg};
+    --infoline-bg: ${theme.sanity.color.card.enabled.bg};
+  `;
+}};
+  user-drag: none;
+  position: absolute;
+  background-color: var(--infoline-bg);
+  top: 0;
+  left: 0;
+  max-width: 65%;
+  overflow-wrap: break-word;
+
+  [data-ui='Text'] {
+    color: var(--infoline-fg);
+  }
+`;
+const DurationLine = styledComponents.styled(ui.Card)`
+  ${_ref4 => {
   let {
     theme
   } = _ref4;
-  return "\n    --durationline-fg: ".concat(theme.sanity.color.card.enabled.bg, ";\n    --durationline-bg: ").concat(theme.sanity.color.card.enabled.fg, ";\n  ");
-});
+  return `
+    --durationline-fg: ${theme.sanity.color.card.enabled.bg};
+    --durationline-bg: ${theme.sanity.color.card.enabled.fg};
+  `;
+}};
+  user-drag: none;
+  position: absolute;
+  background-color: var(--durationline-bg);
+  top: 0;
+  right: 0;
+
+  [data-ui='Text'] {
+    color: var(--durationline-fg);
+  }
+`;
 const VideoPlayer = _ref5 => {
   let {
     src,
@@ -62,8 +112,7 @@ const VideoPlayer = _ref5 => {
   const videoNode = React__default.default.useRef(null);
   const player = React__default.default.useRef();
   React.useEffect(() => {
-    var _a;
-    player.current = videojs__default.default((_a = videoNode.current) != null ? _a : "", {
+    player.current = videojs__default.default(videoNode.current ?? "", {
       sources: [{
         src
       }],
@@ -98,30 +147,34 @@ const VideoPlayer = _ref5 => {
     })]
   });
 };
-const StyledBox = styledComponents.styled(ui.Box)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border: ", ";\n  display: flex;\n  justify-content: center;\n  margin-bottom: ", ";\n  position: relative;\n"])), _ref6 => {
+const StyledBox = styledComponents.styled(ui.Box)`
+  background-color: ${_ref6 => {
   let {
     theme
   } = _ref6;
-  var _a, _b, _c;
-  return (_c = (_b = (_a = theme.sanity.color) == null ? void 0 : _a.card) == null ? void 0 : _b.enabled) == null ? void 0 : _c.bg2;
-}, _ref7 => {
+  return theme.sanity.color?.card?.enabled?.bg2;
+}};
+  border: ${_ref7 => {
   let {
     theme
   } = _ref7;
-  var _a, _b, _c, _d;
-  return "1px solid ".concat((_d = (_c = (_b = (_a = theme.sanity) == null ? void 0 : _a.color) == null ? void 0 : _b.card) == null ? void 0 : _c.enabled) == null ? void 0 : _d.border);
-}, _ref8 => {
+  return `1px solid ${theme.sanity?.color?.card?.enabled?.border}`;
+}};
+  display: flex;
+  justify-content: center;
+  margin-bottom: ${_ref8 => {
   let {
     theme
   } = _ref8;
   return theme.sanity.space[4];
-});
+}};
+  position: relative;
+`;
 const RenderAsset = _ref9 => {
   let {
     value,
     url
   } = _ref9;
-  var _a;
   switch (value.type) {
     case "video":
       return /* @__PURE__ */jsxRuntime.jsx(VideoPlayer, {
@@ -133,7 +186,7 @@ const RenderAsset = _ref9 => {
         justify: "center",
         children: /* @__PURE__ */jsxRuntime.jsx("img", {
           alt: "preview",
-          src: (_a = value == null ? void 0 : value.preview) == null ? void 0 : _a.url,
+          src: value?.preview?.url,
           style: {
             maxWidth: "100%",
             height: "auto",
@@ -144,10 +197,10 @@ const RenderAsset = _ref9 => {
       });
   }
 };
-const AssetPreview = _ref10 => {
+const AssetPreview = _ref0 => {
   let {
     value
-  } = _ref10;
+  } = _ref0;
   const url = value && value.url;
   if (!value || !url) {
     return null;
@@ -171,8 +224,8 @@ const AssetPreview = _ref10 => {
       margin: 2,
       children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
         size: 1,
-        title: "Select ".concat(filename),
-        children: [filename, " ", fileSize && "(".concat(prettyBytes__default.default(fileSize), ")")]
+        title: `Select ${filename}`,
+        children: [filename, " ", fileSize && `(${prettyBytes__default.default(fileSize)})`]
       })
     }), duration && /* @__PURE__ */jsxRuntime.jsx(DurationLine, {
       padding: 2,
@@ -180,7 +233,7 @@ const AssetPreview = _ref10 => {
       margin: 2,
       children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
         size: 1,
-        title: "Video duration: ".concat(filename),
+        title: `Video duration: ${filename}`,
         children: prettyMilliseconds__default.default(duration, {
           colonNotation: true,
           secondsDecimalDigits: 0
@@ -196,12 +249,16 @@ const fetchSearch = props => {
     shop,
     query,
     cursor,
-    resultsPerPage
+    resultsPerPage,
+    token
   } = props;
   return rxjs.defer(() => {
-    return axios__default.default.get("https://".concat(projectId, ".api.sanity.io/v1/shopify/assets/").concat(dataset, "?shop=").concat(shop, "&query=").concat(encodeURIComponent(query)).concat(cursor && "&cursor=".concat(cursor), "&limit=").concat(resultsPerPage), {
+    return axios__default.default.get(`https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}&query=${encodeURIComponent(query)}${cursor && `&cursor=${cursor}`}&limit=${resultsPerPage}`, {
       withCredentials: true,
-      method: "GET"
+      method: "GET",
+      headers: token ? {
+        Authorization: `Bearer ${token}`
+      } : {}
     });
   }).pipe(operators.map(result => result.data));
 };
@@ -211,11 +268,15 @@ const fetchList = props => {
     dataset,
     shop,
     cursor,
-    resultsPerPage
+    resultsPerPage,
+    token
   } = props;
-  return rxjs.defer(() => axios__default.default.get("https://".concat(projectId, ".api.sanity.io/v1/shopify/assets/").concat(dataset, "?shop=").concat(shop).concat(cursor && "&cursor=".concat(cursor), "&limit=").concat(resultsPerPage), {
+  return rxjs.defer(() => axios__default.default.get(`https://${projectId}.api.sanity.io/v1/shopify/assets/${dataset}?shop=${shop}${cursor && `&cursor=${cursor}`}&limit=${resultsPerPage}`, {
     withCredentials: true,
-    method: "GET"
+    method: "GET",
+    headers: token ? {
+      Authorization: `Bearer ${token}`
+    } : {}
   })).pipe(operators.map(result => result.data));
 };
 const search = props => {
@@ -225,10 +286,11 @@ const search = props => {
     shop,
     query,
     cursor,
-    resultsPerPage
+    resultsPerPage,
+    token
   } = props;
-  return rxjs.concat(query.pipe(operators.withLatestFrom(cursor), operators.debounceTime(500), operators.distinctUntilChanged(), operators.switchMap(_ref11 => {
-    let [q, c] = _ref11;
+  return rxjs.concat(query.pipe(operators.withLatestFrom(cursor), operators.debounceTime(500), operators.distinctUntilChanged(), operators.switchMap(_ref1 => {
+    let [q, c] = _ref1;
     if (q) {
       return fetchSearch({
         projectId,
@@ -236,7 +298,8 @@ const search = props => {
         shop,
         query: q,
         cursor: c,
-        resultsPerPage
+        resultsPerPage,
+        token
       }).pipe(operators.distinctUntilChanged());
     }
     return fetchList({
@@ -244,7 +307,8 @@ const search = props => {
       dataset,
       shop,
       cursor: c,
-      resultsPerPage
+      resultsPerPage,
+      token
     });
   })));
 };
@@ -254,7 +318,7 @@ const DialogHeader = props => {
     shopifyDomain
   } = props;
   const handleOpenInNewTab = React.useCallback(() => {
-    window.open("https://".concat(shopifyDomain, "/admin/settings/files"), "_blank");
+    window.open(`https://${shopifyDomain}/admin/settings/files`, "_blank");
   }, [shopifyDomain]);
   return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
     align: "center",
@@ -282,10 +346,7 @@ const DialogHeader = props => {
     })]
   });
 };
-const extractName = name => {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = name == null ? void 0 : name.split("/")) == null ? void 0 : _a.pop()) == null ? void 0 : _b.split("?")[0]) != null ? _c : "";
-};
+const extractName = name => name?.split("/")?.pop()?.split("?")[0] ?? "";
 function File(props) {
   const {
     onClick,
@@ -307,12 +368,12 @@ function File(props) {
   }, [onClick, data, filename]);
   return /* @__PURE__ */jsxRuntime.jsxs(Root, {
     ref: rootElm,
-    title: "".concat(filename),
+    title: `${filename}`,
     tabIndex: 0,
     style: {
-      width: "".concat(width, "px"),
-      height: "".concat(height, "px"),
-      backgroundImage: "url(\"".concat(preview == null ? void 0 : preview.url, "\")")
+      width: `${width}px`,
+      height: `${height}px`,
+      backgroundImage: `url("${preview?.url}")`
     },
     onClick: handleClick,
     children: [/* @__PURE__ */jsxRuntime.jsx(InfoLine, {
@@ -321,8 +382,8 @@ function File(props) {
       margin: 2,
       children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
         size: 1,
-        title: "Select ".concat(filename),
-        children: [filename, " ", meta.fileSize && "(".concat(prettyBytes__default.default(meta.fileSize), ")")]
+        title: `Select ${filename}`,
+        children: [filename, " ", meta.fileSize && `(${prettyBytes__default.default(meta.fileSize)})`]
       })
     }), meta.duration && /* @__PURE__ */jsxRuntime.jsx(DurationLine, {
       padding: 2,
@@ -330,7 +391,7 @@ function File(props) {
       margin: 2,
       children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
         size: 1,
-        title: "Video duration: ".concat(filename),
+        title: `Video duration: ${filename}`,
         children: prettyMilliseconds__default.default(meta.duration, {
           colonNotation: true,
           secondsDecimalDigits: 0
@@ -339,8 +400,15 @@ function File(props) {
     })]
   });
 }
-const Search = styledComponents.styled(ui.Stack)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n"])));
-styledComponents.styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  max-height: 80vh;\n"])));
+const Search = styledComponents.styled(ui.Stack)`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`;
+styledComponents.styled.div`
+  overflow-y: auto;
+  max-height: 80vh;
+`;
 const RESULTS_PER_PAGE = 42;
 const PHOTO_SPACING = 2;
 const PHOTO_PADDING = 1;
@@ -355,6 +423,10 @@ function ShopifyAssetPicker(props) {
   } = props;
   const projectId = sanity.useProjectId();
   const dataset = sanity.useDataset();
+  const client = sanity.useClient({
+    apiVersion: "2021-06-07"
+  });
+  const token = client.config().token;
   const [error, setError] = React.useState("");
   const [query, setQuery] = React.useState("");
   const [searchResults, setSearchResults] = React.useState([]);
@@ -372,7 +444,8 @@ function ShopifyAssetPicker(props) {
       shop: shopifyDomain,
       query: searchSubject$,
       cursor: cursorSubject$,
-      resultsPerPage: RESULTS_PER_PAGE
+      resultsPerPage: RESULTS_PER_PAGE,
+      token
     }).subscribe({
       next: results => {
         setSearchResults(prevResults => [...prevResults, ...results.assets]);
@@ -380,11 +453,11 @@ function ShopifyAssetPicker(props) {
         setIsLoading(false);
       },
       error: err => {
-        setError("".concat(err.response.data.message || err.message || "An error occurred", " - check plugin configuration"));
+        setError(`${err.response?.data?.message || err.message || "An error occurred"} - check plugin configuration`);
       }
     });
     return () => searchSubscription.unsubscribe();
-  }, [searchSubject$, cursorSubject$, shopifyDomain, projectId, dataset]);
+  }, [searchSubject$, cursorSubject$, shopifyDomain, projectId, dataset, token]);
   const handleSearchTermChanged = React.useCallback(event => {
     const newQuery = event.currentTarget.value;
     setQuery(newQuery);
@@ -400,11 +473,11 @@ function ShopifyAssetPicker(props) {
     searchSubject$.next(query);
   }, [cursorSubject$, pageInfo, searchSubject$, query]);
   const handleSelect = React.useCallback(file => {
-    file._key = value == null ? void 0 : value._key;
+    file._key = value?._key;
     file._type = schemaType.name;
     onChange(sanity.PatchEvent.from([sanity.set(file)]));
     onClose();
-  }, [onChange, onClose, schemaType.name, value == null ? void 0 : value._key]);
+  }, [onChange, onClose, schemaType.name, value?._key]);
   const renderFile = React.useCallback(fileProps => {
     const {
       photo,
@@ -475,7 +548,7 @@ function ShopifyAssetPicker(props) {
         }), /* @__PURE__ */jsxRuntime.jsx(InfiniteScroll__default.default, {
           dataLength: searchResults.length,
           next: handleScollerLoadMore,
-          hasMore: pageInfo ? pageInfo == null ? void 0 : pageInfo.hasNextPage : true,
+          hasMore: pageInfo ? pageInfo?.hasNextPage : true,
           scrollThreshold: 0.99,
           height: "60vh",
           loader: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
@@ -501,21 +574,18 @@ function ShopifyAssetPicker(props) {
             spacing: PHOTO_SPACING,
             padding: PHOTO_PADDING,
             targetRowHeight: handleWidth,
-            photos: searchResults.map(file => {
-              var _a, _b, _c;
-              return {
-                src: (_a = file == null ? void 0 : file.preview) == null ? void 0 : _a.url,
-                width: ((_b = file == null ? void 0 : file.preview) == null ? void 0 : _b.width) || 2048,
-                height: ((_c = file == null ? void 0 : file.preview) == null ? void 0 : _c.height) || 2048,
-                key: file.id,
-                data: file
-              };
-            }),
+            photos: searchResults.map(file => ({
+              src: file?.preview?.url,
+              width: file?.preview?.width || 2048,
+              height: file?.preview?.height || 2048,
+              key: file.id,
+              data: file
+            })),
             renderPhoto: renderFile,
             componentsProps: {
               containerProps: {
                 style: {
-                  marginBottom: "".concat(PHOTO_SPACING, "px")
+                  marginBottom: `${PHOTO_SPACING}px`
                 }
               }
             }
@@ -624,15 +694,14 @@ function ShopifyAssetInput(props) {
     })]
   });
 }
-const CloudinaryDiffPreview = _ref12 => {
+const CloudinaryDiffPreview = _ref10 => {
   let {
     value
-  } = _ref12;
-  var _a, _b;
+  } = _ref10;
   if (!value) {
     return null;
   }
-  if ((_a = value == null ? void 0 : value.preview) == null ? void 0 : _a.url) {
+  if (value?.preview?.url) {
     return /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
       justify: "center",
       align: "center",
@@ -642,7 +711,7 @@ const CloudinaryDiffPreview = _ref12 => {
         space: 2,
         children: [/* @__PURE__ */jsxRuntime.jsx("img", {
           alt: "preview",
-          src: (_b = value == null ? void 0 : value.preview) == null ? void 0 : _b.url,
+          src: value?.preview?.url,
           style: {
             objectFit: "contain",
             margin: "auto",
@@ -666,11 +735,11 @@ const CloudinaryDiffPreview = _ref12 => {
     })
   });
 };
-const AssetDiff = _ref13 => {
+const AssetDiff = _ref11 => {
   let {
     diff,
     schemaType
-  } = _ref13;
+  } = _ref11;
   return /* @__PURE__ */jsxRuntime.jsx(sanity.DiffFromTo, {
     diff,
     schemaType,
@@ -729,14 +798,14 @@ const shopifyAssetSchema = config => {
         filename: "filename",
         type: "type"
       },
-      prepare(_ref14) {
+      prepare(_ref12) {
         let {
           url,
           meta,
           preview,
           filename,
           type
-        } = _ref14;
+        } = _ref12;
         return {
           title: filename,
           subtitle: type,