@webiny/app-website-builder 6.3.0 → 6.4.0-beta.0

package/ecommerce/components/ResourcesPicker.js

@@ -1,193 +1,186 @@
-import React, { useEffect } from "react";
-import { runInAction, action } from "mobx";
+import react, { useEffect } from "react";
+import { action, runInAction } from "mobx";
 import { observer, useLocalObservable } from "mobx-react-lite";
 import pluralize from "pluralize";
 import throttle from "lodash/throttle.js";
 import { useDialogs } from "@webiny/app-admin";
-import { Avatar, Button, Loader, List, Input, Text, DelayedOnChange, useToast } from "@webiny/admin-ui";
-export const ResourcePreviewCell = observer(props => {
-  return /*#__PURE__*/React.createElement(List.Item, {
-    onClick: props.onClick,
-    title: props.resource.title !== "untitled" ? /*#__PURE__*/React.createElement("div", null, props.resource.title, " - ", props.resource.id) : props.resource.title,
-    className: props.className,
-    selected: props.selected,
-    icon: props.resource.image ? /*#__PURE__*/React.createElement(Avatar, {
-      variant: "subtle",
-      image: /*#__PURE__*/React.createElement(Avatar.Image, {
-        src: props.resource.image.src,
-        alt: props.resource.title
-      })
-    }) : undefined,
-    actions: props.actions ?? /*#__PURE__*/React.createElement(React.Fragment, null)
-  });
-});
-export const ResourcePicker = observer(props => {
-  const {
-    showToast
-  } = useToast();
-  const store = useLocalObservable(() => ({
-    searchInputText: "",
-    loading: false,
-    resources: [],
-    search: throttle(async () => {
-      runInAction(() => {
-        store.loading = true;
-      });
-      const catchError = err => {
-        console.error("search error:", err);
-        showToast({
-          title: `Failed to load ${props.resourceName}s!`,
-          description: `We were unable to get ${props.resourceName}s from the remote API.`
-        });
-      };
-      const resourcesResponse = await props.api[props.resourceName].search(store.searchInputText).catch(catchError);
-      runInAction(() => {
-        if (Array.isArray(resourcesResponse)) {
-          store.resources = resourcesResponse;
+import { Avatar, Button, DelayedOnChange, Input, List, Loader, Text, useToast } from "@webiny/admin-ui";
+const ResourcePreviewCell = observer((props)=>/*#__PURE__*/ react.createElement(List.Item, {
+        onClick: props.onClick,
+        title: "untitled" !== props.resource.title ? /*#__PURE__*/ react.createElement("div", null, props.resource.title, " - ", props.resource.id) : props.resource.title,
+        className: props.className,
+        selected: props.selected,
+        icon: props.resource.image ? /*#__PURE__*/ react.createElement(Avatar, {
+            variant: "subtle",
+            image: /*#__PURE__*/ react.createElement(Avatar.Image, {
+                src: props.resource.image.src,
+                alt: props.resource.title
+            })
+        }) : void 0,
+        actions: props.actions ?? /*#__PURE__*/ react.createElement(react.Fragment, null)
+    }));
+const ResourcePicker = observer((props)=>{
+    const { showToast } = useToast();
+    const store = useLocalObservable(()=>({
+            searchInputText: "",
+            loading: false,
+            resources: [],
+            search: throttle(async ()=>{
+                runInAction(()=>{
+                    store.loading = true;
+                });
+                const catchError = (err)=>{
+                    console.error("search error:", err);
+                    showToast({
+                        title: `Failed to load ${props.resourceName}s!`,
+                        description: `We were unable to get ${props.resourceName}s from the remote API.`
+                    });
+                };
+                const resourcesResponse = await props.api[props.resourceName].search(store.searchInputText).catch(catchError);
+                runInAction(()=>{
+                    if (Array.isArray(resourcesResponse)) store.resources = resourcesResponse;
+                    store.loading = false;
+                });
+            }, 400)
+        }));
+    useEffect(()=>{
+        store.search();
+    }, [
+        store.searchInputText
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            overflow: "scroll"
+        }
+    }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: store.searchInputText,
+        onChange: action((value)=>store.searchInputText = value)
+    }, /*#__PURE__*/ react.createElement(Input, {
+        placeholder: props.title || `Search ${pluralize.plural(props.resourceName)}...`
+    })), store.loading && /*#__PURE__*/ react.createElement(Loader, {
+        style: {
+            margin: "50px auto"
+        }
+    }), /*#__PURE__*/ react.createElement("div", null, !store.loading && (store.resources.length ? store.resources.map((item)=>/*#__PURE__*/ react.createElement(List, {
+            key: item.id,
+            onClick: ()=>{
+                props.onChange(item);
+            }
+        }, /*#__PURE__*/ react.createElement(ResourcePreviewCell, {
+            selected: String(item.id) === String(props.value?.id),
+            resource: item,
+            key: item.id
+        }))) : /*#__PURE__*/ react.createElement("div", {
+        style: {
+            margin: "40px 20px",
+            textAlign: "center"
         }
-        store.loading = false;
-      });
-    }, 400)
-  }));
-  useEffect(() => {
-    store.search();
-  }, [store.searchInputText]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      overflow: "scroll"
-    }
-  }, /*#__PURE__*/React.createElement(DelayedOnChange, {
-    value: store.searchInputText,
-    onChange: action(value => store.searchInputText = value)
-  }, /*#__PURE__*/React.createElement(Input, {
-    placeholder: props.title || `Search ${pluralize.plural(props.resourceName)}...`
-  })), store.loading && /*#__PURE__*/React.createElement(Loader, {
-    style: {
-      margin: "50px auto"
-    }
-  }), /*#__PURE__*/React.createElement("div", null, !store.loading && (store.resources.length ? store.resources.map(item => /*#__PURE__*/React.createElement(List, {
-    key: item.id,
-    onClick: () => {
-      props.onChange(item);
-    }
-  }, /*#__PURE__*/React.createElement(ResourcePreviewCell, {
-    selected: String(item.id) === String(props.value?.id),
-    resource: item,
-    key: item.id
-  }))) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      margin: "40px 20px",
-      textAlign: "center"
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "md"
-  }, "No ", pluralize.plural(props.resourceName), " found.")))));
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md"
+    }, "No ", pluralize.plural(props.resourceName), " found.")))));
 });
-export const ResourcesPickerButton = observer(props => {
-  const {
-    showToast
-  } = useToast();
-  const dialog = useDialogs();
-  const store = useLocalObservable(() => ({
-    loading: false,
-    error: null,
-    resourceInfo: null,
-    resourceId: props.value,
-    updateResourceId(newProps) {
-      this.resourceId = newProps.value;
-    },
-    async getResource() {
-      runInAction(() => {
-        this.error = null;
-        this.loading = true;
-      });
-      try {
-        const resourceService = props.api[props.resourceName];
-        const value = this.resourceId && (await resourceService.findById(this.resourceId));
-        runInAction(() => {
-          this.resourceInfo = value || null;
-        });
-      } catch (e) {
-        console.error(e);
-        runInAction(() => {
-          this.error = e;
-        });
-        showToast({
-          title: `Failed to load ${props.resourceName}!`,
-          description: `We were unable to get ${props.resourceName} from the remote API.`
-        });
-      }
-      runInAction(() => {
-        this.loading = false;
-      });
-    },
-    async showPickResourceModal(title) {
-      // oxlint-disable-next-line typescript/no-unused-vars
-      const {
-        value,
-        resourcePicker,
-        ...rest
-      } = props;
-      const PickerComponent = resourcePicker || ResourcePicker;
-      const closeDialog = dialog.showDialog({
-        title: `Select a ${props.resourceName}`,
-        acceptLabel: null,
-        cancelLabel: null,
-        content: /*#__PURE__*/React.createElement("div", {
-          className: "h-[500px] overflow-scroll"
-        }, /*#__PURE__*/React.createElement(PickerComponent, Object.assign({}, rest, {
-          resourceName: props.resourceName
-        }, this.resourceInfo && {
-          value: this.resourceInfo
-        }, {
-          title: title,
-          onChange: action(value => {
-            if (value) {
-              this.resourceId = String(value.id);
-              this.getResource();
-              props.onChange(props.api[props.resourceName].getRequestObject(this.resourceId, value));
-              closeDialog();
+const ResourcesPickerButton = observer((props)=>{
+    const { showToast } = useToast();
+    const dialog = useDialogs();
+    const store = useLocalObservable(()=>({
+            loading: false,
+            error: null,
+            resourceInfo: null,
+            resourceId: props.value,
+            updateResourceId (newProps) {
+                this.resourceId = newProps.value;
+            },
+            async getResource () {
+                runInAction(()=>{
+                    this.error = null;
+                    this.loading = true;
+                });
+                try {
+                    const resourceService = props.api[props.resourceName];
+                    const value = this.resourceId && await resourceService.findById(this.resourceId);
+                    runInAction(()=>{
+                        this.resourceInfo = value || null;
+                    });
+                } catch (e) {
+                    console.error(e);
+                    runInAction(()=>{
+                        this.error = e;
+                    });
+                    showToast({
+                        title: `Failed to load ${props.resourceName}!`,
+                        description: `We were unable to get ${props.resourceName} from the remote API.`
+                    });
+                }
+                runInAction(()=>{
+                    this.loading = false;
+                });
+            },
+            async showPickResourceModal (title) {
+                const { value, resourcePicker, ...rest } = props;
+                const PickerComponent = resourcePicker || ResourcePicker;
+                const closeDialog = dialog.showDialog({
+                    title: `Select a ${props.resourceName}`,
+                    acceptLabel: null,
+                    cancelLabel: null,
+                    content: /*#__PURE__*/ react.createElement("div", {
+                        className: "h-[500px] overflow-scroll"
+                    }, /*#__PURE__*/ react.createElement(PickerComponent, {
+                        ...rest,
+                        resourceName: props.resourceName,
+                        ...this.resourceInfo && {
+                            value: this.resourceInfo
+                        },
+                        title: title,
+                        onChange: action((value)=>{
+                            if (value) {
+                                this.resourceId = String(value.id);
+                                this.getResource();
+                                props.onChange(props.api[props.resourceName].getRequestObject(this.resourceId, value));
+                                closeDialog();
+                            }
+                        })
+                    }))
+                });
             }
-          })
-        })))
-      });
-    }
-  }));
-  useEffect(() => {
-    store.updateResourceId(props);
-    store.getResource();
-  }, [props.value]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column",
-      padding: "10px 0"
-    }
-  }, store.loading && /*#__PURE__*/React.createElement(Loader, {
-    size: "md",
-    style: {
-      margin: "30px auto"
-    }
-  }), store.resourceInfo && !store.loading && /*#__PURE__*/React.createElement("div", {
-    className: "relative"
-  }, /*#__PURE__*/React.createElement(ResourcePreviewCell, {
-    style: {
-      paddingRight: "30px"
-    },
-    resource: store.resourceInfo,
-    onClick: () => {
-      store.showPickResourceModal();
-    }
-  })), !store.resourceInfo && !store.loading && /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    variant: "secondary",
-    onClick: () => {
-      store.showPickResourceModal();
-    },
-    text: `Choose ${props.resourceName}`
-  }));
+        }));
+    useEffect(()=>{
+        store.updateResourceId(props);
+        store.getResource();
+    }, [
+        props.value
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+            padding: "10px 0"
+        }
+    }, store.loading && /*#__PURE__*/ react.createElement(Loader, {
+        size: "md",
+        style: {
+            margin: "30px auto"
+        }
+    }), store.resourceInfo && !store.loading && /*#__PURE__*/ react.createElement("div", {
+        className: "relative"
+    }, /*#__PURE__*/ react.createElement(ResourcePreviewCell, {
+        style: {
+            paddingRight: "30px"
+        },
+        resource: store.resourceInfo,
+        onClick: ()=>{
+            store.showPickResourceModal();
+        }
+    })), !store.resourceInfo && !store.loading && /*#__PURE__*/ react.createElement(Button, {
+        color: "primary",
+        variant: "secondary",
+        onClick: ()=>{
+            store.showPickResourceModal();
+        },
+        text: `Choose ${props.resourceName}`
+    }));
 });
+export { ResourcePicker, ResourcePreviewCell, ResourcesPickerButton };
 
 //# sourceMappingURL=ResourcesPicker.js.map

package/ecommerce/components/ResourcesPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","runInAction","action","observer","useLocalObservable","pluralize","throttle","useDialogs","Avatar","Button","Loader","List","Input","Text","DelayedOnChange","useToast","ResourcePreviewCell","props","createElement","Item","onClick","title","resource","id","className","selected","icon","image","variant","Image","src","alt","undefined","actions","Fragment","ResourcePicker","showToast","store","searchInputText","loading","resources","search","catchError","err","console","error","resourceName","description","resourcesResponse","api","catch","Array","isArray","style","display","flexDirection","overflow","value","onChange","placeholder","plural","margin","length","map","item","key","String","textAlign","size","ResourcesPickerButton","dialog","resourceInfo","resourceId","updateResourceId","newProps","getResource","resourceService","findById","e","showPickResourceModal","resourcePicker","rest","PickerComponent","closeDialog","showDialog","acceptLabel","cancelLabel","content","Object","assign","getRequestObject","padding","paddingRight","color","text"],"sources":["ResourcesPicker.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { runInAction, action } from \"mobx\";\nimport { observer, useLocalObservable } from \"mobx-react-lite\";\nimport pluralize from \"pluralize\";\nimport throttle from \"lodash/throttle.js\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport {\n    Avatar,\n    Button,\n    Loader,\n    List,\n    Input,\n    Text,\n    DelayedOnChange,\n    useToast\n} from \"@webiny/admin-ui\";\nimport type { Resource } from \"../types.js\";\nimport type { CustomResourcePickerProps } from \"~/ecommerce/index.js\";\n\nexport interface CommerceAPIOperations {\n    [resourceName: string]: {\n        resourcePicker?: React.FC<ResourcePickerProps>;\n        findById(id: string): Promise<Resource>;\n        findByHandle?(handle: string): Promise<Resource>;\n        search(search: string, offset?: number, limit?: number): Promise<Resource[]>;\n        getRequestObject(id: string, resource?: Resource): string;\n    };\n}\n\nexport interface ResourcesPickerButtonProps extends CustomResourcePickerProps<string> {\n    api: CommerceAPIOperations;\n    resourcePicker?: React.FC<ResourcePickerProps>;\n    pluginName: string;\n    resourceName: string;\n}\n\nexport interface ResourcePreviewCellProps {\n    resource: Resource;\n    actions?: React.ReactNode;\n    selected?: boolean;\n    className?: string;\n    onClick?: () => void;\n    style?: Partial<CSSStyleDeclaration>;\n}\n\nexport const ResourcePreviewCell = observer((props: ResourcePreviewCellProps) => {\n    return (\n        <List.Item\n            onClick={props.onClick}\n            title={\n                props.resource.title !== \"untitled\" ? (\n                    <div>\n                        {props.resource.title} - {props.resource.id}\n                    </div>\n                ) : (\n                    props.resource.title\n                )\n            }\n            className={props.className}\n            selected={props.selected}\n            icon={\n                props.resource.image ? (\n                    <Avatar\n                        variant={\"subtle\"}\n                        image={\n                            <Avatar.Image\n                                src={props.resource.image.src}\n                                alt={props.resource.title}\n                            />\n                        }\n                    />\n                ) : undefined\n            }\n            actions={props.actions ?? <></>}\n        />\n    );\n});\n\nexport type ResourcePickerProps = CustomResourcePickerProps<Resource> & {\n    api: CommerceAPIOperations;\n    resourceName: string;\n    omitIds?: string[];\n    title?: string;\n};\n\nexport const ResourcePicker = observer((props: ResourcePickerProps) => {\n    const { showToast } = useToast();\n\n    const store = useLocalObservable(() => ({\n        searchInputText: \"\",\n        loading: false,\n        resources: [] as Resource[],\n        search: throttle(async () => {\n            runInAction(() => {\n                store.loading = true;\n            });\n            const catchError = (err: any) => {\n                console.error(\"search error:\", err);\n                showToast({\n                    title: `Failed to load ${props.resourceName}s!`,\n                    description: `We were unable to get ${props.resourceName}s from the remote API.`\n                });\n            };\n\n            const resourcesResponse = await props.api[props.resourceName]\n                .search(store.searchInputText)\n                .catch(catchError);\n\n            runInAction(() => {\n                if (Array.isArray(resourcesResponse)) {\n                    store.resources = resourcesResponse;\n                }\n                store.loading = false;\n            });\n        }, 400)\n    }));\n\n    useEffect(() => {\n        store.search();\n    }, [store.searchInputText]);\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", overflow: \"scroll\" }}>\n            <DelayedOnChange<string>\n                value={store.searchInputText}\n                onChange={action(value => (store.searchInputText = value))}\n            >\n                <Input\n                    placeholder={props.title || `Search ${pluralize.plural(props.resourceName)}...`}\n                />\n            </DelayedOnChange>\n            {store.loading && <Loader style={{ margin: \"50px auto\" }} />}\n            <div>\n                {!store.loading &&\n                    (store.resources.length ? (\n                        store.resources.map(item => (\n                            <List\n                                key={item.id}\n                                onClick={() => {\n                                    props.onChange(item);\n                                }}\n                            >\n                                <ResourcePreviewCell\n                                    selected={String(item.id) === String(props.value?.id)}\n                                    resource={item}\n                                    key={item.id}\n                                />\n                            </List>\n                        ))\n                    ) : (\n                        <div style={{ margin: \"40px 20px\", textAlign: \"center\" }}>\n                            <Text size={\"md\"}>\n                                No {pluralize.plural(props.resourceName)} found.\n                            </Text>\n                        </div>\n                    ))}\n            </div>\n        </div>\n    );\n});\n\nexport const ResourcesPickerButton: React.FC<ResourcesPickerButtonProps> = observer(props => {\n    const { showToast } = useToast();\n    const dialog = useDialogs();\n\n    const store = useLocalObservable(() => ({\n        loading: false,\n        error: null,\n        resourceInfo: null as Resource | null,\n        resourceId: props.value,\n        updateResourceId(newProps: ResourcesPickerButtonProps) {\n            this.resourceId = newProps.value;\n        },\n        async getResource() {\n            runInAction(() => {\n                this.error = null;\n                this.loading = true;\n            });\n\n            try {\n                const resourceService = props.api[props.resourceName];\n                const value = this.resourceId && (await resourceService.findById(this.resourceId));\n                runInAction(() => {\n                    this.resourceInfo = value || null;\n                });\n            } catch (e) {\n                console.error(e);\n                runInAction(() => {\n                    this.error = e as any;\n                });\n                showToast({\n                    title: `Failed to load ${props.resourceName}!`,\n                    description: `We were unable to get ${props.resourceName} from the remote API.`\n                });\n            }\n            runInAction(() => {\n                this.loading = false;\n            });\n        },\n        async showPickResourceModal(title?: string) {\n            // oxlint-disable-next-line typescript/no-unused-vars\n            const { value, resourcePicker, ...rest } = props;\n            const PickerComponent = resourcePicker || ResourcePicker;\n\n            const closeDialog = dialog.showDialog({\n                title: `Select a ${props.resourceName}`,\n                acceptLabel: null,\n                cancelLabel: null,\n                content: (\n                    <div className={\"h-[500px] overflow-scroll\"}>\n                        <PickerComponent\n                            {...rest}\n                            resourceName={props.resourceName}\n                            {...(this.resourceInfo && { value: this.resourceInfo })}\n                            title={title}\n                            onChange={action(value => {\n                                if (value) {\n                                    this.resourceId = String(value.id);\n                                    this.getResource();\n                                    props.onChange(\n                                        props.api[props.resourceName].getRequestObject(\n                                            this.resourceId,\n                                            value\n                                        )\n                                    );\n                                    closeDialog();\n                                }\n                            })}\n                        />\n                    </div>\n                )\n            });\n        }\n    }));\n\n    useEffect(() => {\n        store.updateResourceId(props);\n        store.getResource();\n    }, [props.value]);\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", padding: \"10px 0\" }}>\n            {store.loading && <Loader size={\"md\"} style={{ margin: \"30px auto\" }} />}\n            {store.resourceInfo && !store.loading && (\n                <div className={\"relative\"}>\n                    <ResourcePreviewCell\n                        style={{ paddingRight: \"30px\" }}\n                        resource={store.resourceInfo}\n                        onClick={() => {\n                            store.showPickResourceModal();\n                        }}\n                    />\n                </div>\n            )}\n            {!store.resourceInfo && !store.loading && (\n                <Button\n                    color=\"primary\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                        store.showPickResourceModal();\n                    }}\n                    text={`Choose ${props.resourceName}`}\n                />\n            )}\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,WAAW,EAAEC,MAAM,QAAQ,MAAM;AAC1C,SAASC,QAAQ,EAAEC,kBAAkB,QAAQ,iBAAiB;AAC9D,OAAOC,SAAS,MAAM,WAAW;AACjC,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SACIC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,IAAI,EACJC,eAAe,EACfC,QAAQ,QACL,kBAAkB;AA8BzB,OAAO,MAAMC,mBAAmB,GAAGb,QAAQ,CAAEc,KAA+B,IAAK;EAC7E,oBACIlB,KAAA,CAAAmB,aAAA,CAACP,IAAI,CAACQ,IAAI;IACNC,OAAO,EAAEH,KAAK,CAACG,OAAQ;IACvBC,KAAK,EACDJ,KAAK,CAACK,QAAQ,CAACD,KAAK,KAAK,UAAU,gBAC/BtB,KAAA,CAAAmB,aAAA,cACKD,KAAK,CAACK,QAAQ,CAACD,KAAK,EAAC,KAAG,EAACJ,KAAK,CAACK,QAAQ,CAACC,EACxC,CAAC,GAENN,KAAK,CAACK,QAAQ,CAACD,KAEtB;IACDG,SAAS,EAAEP,KAAK,CAACO,SAAU;IAC3BC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,IAAI,EACAT,KAAK,CAACK,QAAQ,CAACK,KAAK,gBAChB5B,KAAA,CAAAmB,aAAA,CAACV,MAAM;MACHoB,OAAO,EAAE,QAAS;MAClBD,KAAK,eACD5B,KAAA,CAAAmB,aAAA,CAACV,MAAM,CAACqB,KAAK;QACTC,GAAG,EAAEb,KAAK,CAACK,QAAQ,CAACK,KAAK,CAACG,GAAI;QAC9BC,GAAG,EAAEd,KAAK,CAACK,QAAQ,CAACD;MAAM,CAC7B;IACJ,CACJ,CAAC,GACFW,SACP;IACDC,OAAO,EAAEhB,KAAK,CAACgB,OAAO,iBAAIlC,KAAA,CAAAmB,aAAA,CAAAnB,KAAA,CAAAmC,QAAA,MAAI;EAAE,CACnC,CAAC;AAEV,CAAC,CAAC;AASF,OAAO,MAAMC,cAAc,GAAGhC,QAAQ,CAAEc,KAA0B,IAAK;EACnE,MAAM;IAAEmB;EAAU,CAAC,GAAGrB,QAAQ,CAAC,CAAC;EAEhC,MAAMsB,KAAK,GAAGjC,kBAAkB,CAAC,OAAO;IACpCkC,eAAe,EAAE,EAAE;IACnBC,OAAO,EAAE,KAAK;IACdC,SAAS,EAAE,EAAgB;IAC3BC,MAAM,EAAEnC,QAAQ,CAAC,YAAY;MACzBL,WAAW,CAAC,MAAM;QACdoC,KAAK,CAACE,OAAO,GAAG,IAAI;MACxB,CAAC,CAAC;MACF,MAAMG,UAAU,GAAIC,GAAQ,IAAK;QAC7BC,OAAO,CAACC,KAAK,CAAC,eAAe,EAAEF,GAAG,CAAC;QACnCP,SAAS,CAAC;UACNf,KAAK,EAAE,kBAAkBJ,KAAK,CAAC6B,YAAY,IAAI;UAC/CC,WAAW,EAAE,yBAAyB9B,KAAK,CAAC6B,YAAY;QAC5D,CAAC,CAAC;MACN,CAAC;MAED,MAAME,iBAAiB,GAAG,MAAM/B,KAAK,CAACgC,GAAG,CAAChC,KAAK,CAAC6B,YAAY,CAAC,CACxDL,MAAM,CAACJ,KAAK,CAACC,eAAe,CAAC,CAC7BY,KAAK,CAACR,UAAU,CAAC;MAEtBzC,WAAW,CAAC,MAAM;QACd,IAAIkD,KAAK,CAACC,OAAO,CAACJ,iBAAiB,CAAC,EAAE;UAClCX,KAAK,CAACG,SAAS,GAAGQ,iBAAiB;QACvC;QACAX,KAAK,CAACE,OAAO,GAAG,KAAK;MACzB,CAAC,CAAC;IACN,CAAC,EAAE,GAAG;EACV,CAAC,CAAC,CAAC;EAEHvC,SAAS,CAAC,MAAM;IACZqC,KAAK,CAACI,MAAM,CAAC,CAAC;EAClB,CAAC,EAAE,CAACJ,KAAK,CAACC,eAAe,CAAC,CAAC;EAE3B,oBACIvC,KAAA,CAAAmB,aAAA;IAAKmC,KAAK,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEC,aAAa,EAAE,QAAQ;MAAEC,QAAQ,EAAE;IAAS;EAAE,gBACzEzD,KAAA,CAAAmB,aAAA,CAACJ,eAAe;IACZ2C,KAAK,EAAEpB,KAAK,CAACC,eAAgB;IAC7BoB,QAAQ,EAAExD,MAAM,CAACuD,KAAK,IAAKpB,KAAK,CAACC,eAAe,GAAGmB,KAAM;EAAE,gBAE3D1D,KAAA,CAAAmB,aAAA,CAACN,KAAK;IACF+C,WAAW,EAAE1C,KAAK,CAACI,KAAK,IAAI,UAAUhB,SAAS,CAACuD,MAAM,CAAC3C,KAAK,CAAC6B,YAAY,CAAC;EAAM,CACnF,CACY,CAAC,EACjBT,KAAK,CAACE,OAAO,iBAAIxC,KAAA,CAAAmB,aAAA,CAACR,MAAM;IAAC2C,KAAK,EAAE;MAAEQ,MAAM,EAAE;IAAY;EAAE,CAAE,CAAC,eAC5D9D,KAAA,CAAAmB,aAAA,cACK,CAACmB,KAAK,CAACE,OAAO,KACVF,KAAK,CAACG,SAAS,CAACsB,MAAM,GACnBzB,KAAK,CAACG,SAAS,CAACuB,GAAG,CAACC,IAAI,iBACpBjE,KAAA,CAAAmB,aAAA,CAACP,IAAI;IACDsD,GAAG,EAAED,IAAI,CAACzC,EAAG;IACbH,OAAO,EAAEA,CAAA,KAAM;MACXH,KAAK,CAACyC,QAAQ,CAACM,IAAI,CAAC;IACxB;EAAE,gBAEFjE,KAAA,CAAAmB,aAAA,CAACF,mBAAmB;IAChBS,QAAQ,EAAEyC,MAAM,CAACF,IAAI,CAACzC,EAAE,CAAC,KAAK2C,MAAM,CAACjD,KAAK,CAACwC,KAAK,EAAElC,EAAE,CAAE;IACtDD,QAAQ,EAAE0C,IAAK;IACfC,GAAG,EAAED,IAAI,CAACzC;EAAG,CAChB,CACC,CACT,CAAC,gBAEFxB,KAAA,CAAAmB,aAAA;IAAKmC,KAAK,EAAE;MAAEQ,MAAM,EAAE,WAAW;MAAEM,SAAS,EAAE;IAAS;EAAE,gBACrDpE,KAAA,CAAAmB,aAAA,CAACL,IAAI;IAACuD,IAAI,EAAE;EAAK,GAAC,KACX,EAAC/D,SAAS,CAACuD,MAAM,CAAC3C,KAAK,CAAC6B,YAAY,CAAC,EAAC,SACvC,CACL,CACR,CACJ,CACJ,CAAC;AAEd,CAAC,CAAC;AAEF,OAAO,MAAMuB,qBAA2D,GAAGlE,QAAQ,CAACc,KAAK,IAAI;EACzF,MAAM;IAAEmB;EAAU,CAAC,GAAGrB,QAAQ,CAAC,CAAC;EAChC,MAAMuD,MAAM,GAAG/D,UAAU,CAAC,CAAC;EAE3B,MAAM8B,KAAK,GAAGjC,kBAAkB,CAAC,OAAO;IACpCmC,OAAO,EAAE,KAAK;IACdM,KAAK,EAAE,IAAI;IACX0B,YAAY,EAAE,IAAuB;IACrCC,UAAU,EAAEvD,KAAK,CAACwC,KAAK;IACvBgB,gBAAgBA,CAACC,QAAoC,EAAE;MACnD,IAAI,CAACF,UAAU,GAAGE,QAAQ,CAACjB,KAAK;IACpC,CAAC;IACD,MAAMkB,WAAWA,CAAA,EAAG;MAChB1E,WAAW,CAAC,MAAM;QACd,IAAI,CAAC4C,KAAK,GAAG,IAAI;QACjB,IAAI,CAACN,OAAO,GAAG,IAAI;MACvB,CAAC,CAAC;MAEF,IAAI;QACA,MAAMqC,eAAe,GAAG3D,KAAK,CAACgC,GAAG,CAAChC,KAAK,CAAC6B,YAAY,CAAC;QACrD,MAAMW,KAAK,GAAG,IAAI,CAACe,UAAU,KAAK,MAAMI,eAAe,CAACC,QAAQ,CAAC,IAAI,CAACL,UAAU,CAAC,CAAC;QAClFvE,WAAW,CAAC,MAAM;UACd,IAAI,CAACsE,YAAY,GAAGd,KAAK,IAAI,IAAI;QACrC,CAAC,CAAC;MACN,CAAC,CAAC,OAAOqB,CAAC,EAAE;QACRlC,OAAO,CAACC,KAAK,CAACiC,CAAC,CAAC;QAChB7E,WAAW,CAAC,MAAM;UACd,IAAI,CAAC4C,KAAK,GAAGiC,CAAQ;QACzB,CAAC,CAAC;QACF1C,SAAS,CAAC;UACNf,KAAK,EAAE,kBAAkBJ,KAAK,CAAC6B,YAAY,GAAG;UAC9CC,WAAW,EAAE,yBAAyB9B,KAAK,CAAC6B,YAAY;QAC5D,CAAC,CAAC;MACN;MACA7C,WAAW,CAAC,MAAM;QACd,IAAI,CAACsC,OAAO,GAAG,KAAK;MACxB,CAAC,CAAC;IACN,CAAC;IACD,MAAMwC,qBAAqBA,CAAC1D,KAAc,EAAE;MACxC;MACA,MAAM;QAAEoC,KAAK;QAAEuB,cAAc;QAAE,GAAGC;MAAK,CAAC,GAAGhE,KAAK;MAChD,MAAMiE,eAAe,GAAGF,cAAc,IAAI7C,cAAc;MAExD,MAAMgD,WAAW,GAAGb,MAAM,CAACc,UAAU,CAAC;QAClC/D,KAAK,EAAE,YAAYJ,KAAK,CAAC6B,YAAY,EAAE;QACvCuC,WAAW,EAAE,IAAI;QACjBC,WAAW,EAAE,IAAI;QACjBC,OAAO,eACHxF,KAAA,CAAAmB,aAAA;UAAKM,SAAS,EAAE;QAA4B,gBACxCzB,KAAA,CAAAmB,aAAA,CAACgE,eAAe,EAAAM,MAAA,CAAAC,MAAA,KACRR,IAAI;UACRnC,YAAY,EAAE7B,KAAK,CAAC6B;QAAa,GAC5B,IAAI,CAACyB,YAAY,IAAI;UAAEd,KAAK,EAAE,IAAI,CAACc;QAAa,CAAC;UACtDlD,KAAK,EAAEA,KAAM;UACbqC,QAAQ,EAAExD,MAAM,CAACuD,KAAK,IAAI;YACtB,IAAIA,KAAK,EAAE;cACP,IAAI,CAACe,UAAU,GAAGN,MAAM,CAACT,KAAK,CAAClC,EAAE,CAAC;cAClC,IAAI,CAACoD,WAAW,CAAC,CAAC;cAClB1D,KAAK,CAACyC,QAAQ,CACVzC,KAAK,CAACgC,GAAG,CAAChC,KAAK,CAAC6B,YAAY,CAAC,CAAC4C,gBAAgB,CAC1C,IAAI,CAAClB,UAAU,EACff,KACJ,CACJ,CAAC;cACD0B,WAAW,CAAC,CAAC;YACjB;UACJ,CAAC;QAAE,EACN,CACA;MAEb,CAAC,CAAC;IACN;EACJ,CAAC,CAAC,CAAC;EAEHnF,SAAS,CAAC,MAAM;IACZqC,KAAK,CAACoC,gBAAgB,CAACxD,KAAK,CAAC;IAC7BoB,KAAK,CAACsC,WAAW,CAAC,CAAC;EACvB,CAAC,EAAE,CAAC1D,KAAK,CAACwC,KAAK,CAAC,CAAC;EAEjB,oBACI1D,KAAA,CAAAmB,aAAA;IAAKmC,KAAK,EAAE;MAAEC,OAAO,EAAE,MAAM;MAAEC,aAAa,EAAE,QAAQ;MAAEoC,OAAO,EAAE;IAAS;EAAE,GACvEtD,KAAK,CAACE,OAAO,iBAAIxC,KAAA,CAAAmB,aAAA,CAACR,MAAM;IAAC0D,IAAI,EAAE,IAAK;IAACf,KAAK,EAAE;MAAEQ,MAAM,EAAE;IAAY;EAAE,CAAE,CAAC,EACvExB,KAAK,CAACkC,YAAY,IAAI,CAAClC,KAAK,CAACE,OAAO,iBACjCxC,KAAA,CAAAmB,aAAA;IAAKM,SAAS,EAAE;EAAW,gBACvBzB,KAAA,CAAAmB,aAAA,CAACF,mBAAmB;IAChBqC,KAAK,EAAE;MAAEuC,YAAY,EAAE;IAAO,CAAE;IAChCtE,QAAQ,EAAEe,KAAK,CAACkC,YAAa;IAC7BnD,OAAO,EAAEA,CAAA,KAAM;MACXiB,KAAK,CAAC0C,qBAAqB,CAAC,CAAC;IACjC;EAAE,CACL,CACA,CACR,EACA,CAAC1C,KAAK,CAACkC,YAAY,IAAI,CAAClC,KAAK,CAACE,OAAO,iBAClCxC,KAAA,CAAAmB,aAAA,CAACT,MAAM;IACHoF,KAAK,EAAC,SAAS;IACfjE,OAAO,EAAC,WAAW;IACnBR,OAAO,EAAEA,CAAA,KAAM;MACXiB,KAAK,CAAC0C,qBAAqB,CAAC,CAAC;IACjC,CAAE;IACFe,IAAI,EAAE,UAAU7E,KAAK,CAAC6B,YAAY;EAAG,CACxC,CAEJ,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"ecommerce/components/ResourcesPicker.js","sources":["../../../src/ecommerce/components/ResourcesPicker.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { runInAction, action } from \"mobx\";\nimport { observer, useLocalObservable } from \"mobx-react-lite\";\nimport pluralize from \"pluralize\";\nimport throttle from \"lodash/throttle.js\";\nimport { useDialogs } from \"@webiny/app-admin\";\nimport {\n    Avatar,\n    Button,\n    Loader,\n    List,\n    Input,\n    Text,\n    DelayedOnChange,\n    useToast\n} from \"@webiny/admin-ui\";\nimport type { Resource } from \"../types.js\";\nimport type { CustomResourcePickerProps } from \"~/ecommerce/index.js\";\n\nexport interface CommerceAPIOperations {\n    [resourceName: string]: {\n        resourcePicker?: React.FC<ResourcePickerProps>;\n        findById(id: string): Promise<Resource>;\n        findByHandle?(handle: string): Promise<Resource>;\n        search(search: string, offset?: number, limit?: number): Promise<Resource[]>;\n        getRequestObject(id: string, resource?: Resource): string;\n    };\n}\n\nexport interface ResourcesPickerButtonProps extends CustomResourcePickerProps<string> {\n    api: CommerceAPIOperations;\n    resourcePicker?: React.FC<ResourcePickerProps>;\n    pluginName: string;\n    resourceName: string;\n}\n\nexport interface ResourcePreviewCellProps {\n    resource: Resource;\n    actions?: React.ReactNode;\n    selected?: boolean;\n    className?: string;\n    onClick?: () => void;\n    style?: Partial<CSSStyleDeclaration>;\n}\n\nexport const ResourcePreviewCell = observer((props: ResourcePreviewCellProps) => {\n    return (\n        <List.Item\n            onClick={props.onClick}\n            title={\n                props.resource.title !== \"untitled\" ? (\n                    <div>\n                        {props.resource.title} - {props.resource.id}\n                    </div>\n                ) : (\n                    props.resource.title\n                )\n            }\n            className={props.className}\n            selected={props.selected}\n            icon={\n                props.resource.image ? (\n                    <Avatar\n                        variant={\"subtle\"}\n                        image={\n                            <Avatar.Image\n                                src={props.resource.image.src}\n                                alt={props.resource.title}\n                            />\n                        }\n                    />\n                ) : undefined\n            }\n            actions={props.actions ?? <></>}\n        />\n    );\n});\n\nexport type ResourcePickerProps = CustomResourcePickerProps<Resource> & {\n    api: CommerceAPIOperations;\n    resourceName: string;\n    omitIds?: string[];\n    title?: string;\n};\n\nexport const ResourcePicker = observer((props: ResourcePickerProps) => {\n    const { showToast } = useToast();\n\n    const store = useLocalObservable(() => ({\n        searchInputText: \"\",\n        loading: false,\n        resources: [] as Resource[],\n        search: throttle(async () => {\n            runInAction(() => {\n                store.loading = true;\n            });\n            const catchError = (err: any) => {\n                console.error(\"search error:\", err);\n                showToast({\n                    title: `Failed to load ${props.resourceName}s!`,\n                    description: `We were unable to get ${props.resourceName}s from the remote API.`\n                });\n            };\n\n            const resourcesResponse = await props.api[props.resourceName]\n                .search(store.searchInputText)\n                .catch(catchError);\n\n            runInAction(() => {\n                if (Array.isArray(resourcesResponse)) {\n                    store.resources = resourcesResponse;\n                }\n                store.loading = false;\n            });\n        }, 400)\n    }));\n\n    useEffect(() => {\n        store.search();\n    }, [store.searchInputText]);\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", overflow: \"scroll\" }}>\n            <DelayedOnChange<string>\n                value={store.searchInputText}\n                onChange={action(value => (store.searchInputText = value))}\n            >\n                <Input\n                    placeholder={props.title || `Search ${pluralize.plural(props.resourceName)}...`}\n                />\n            </DelayedOnChange>\n            {store.loading && <Loader style={{ margin: \"50px auto\" }} />}\n            <div>\n                {!store.loading &&\n                    (store.resources.length ? (\n                        store.resources.map(item => (\n                            <List\n                                key={item.id}\n                                onClick={() => {\n                                    props.onChange(item);\n                                }}\n                            >\n                                <ResourcePreviewCell\n                                    selected={String(item.id) === String(props.value?.id)}\n                                    resource={item}\n                                    key={item.id}\n                                />\n                            </List>\n                        ))\n                    ) : (\n                        <div style={{ margin: \"40px 20px\", textAlign: \"center\" }}>\n                            <Text size={\"md\"}>\n                                No {pluralize.plural(props.resourceName)} found.\n                            </Text>\n                        </div>\n                    ))}\n            </div>\n        </div>\n    );\n});\n\nexport const ResourcesPickerButton: React.FC<ResourcesPickerButtonProps> = observer(props => {\n    const { showToast } = useToast();\n    const dialog = useDialogs();\n\n    const store = useLocalObservable(() => ({\n        loading: false,\n        error: null,\n        resourceInfo: null as Resource | null,\n        resourceId: props.value,\n        updateResourceId(newProps: ResourcesPickerButtonProps) {\n            this.resourceId = newProps.value;\n        },\n        async getResource() {\n            runInAction(() => {\n                this.error = null;\n                this.loading = true;\n            });\n\n            try {\n                const resourceService = props.api[props.resourceName];\n                const value = this.resourceId && (await resourceService.findById(this.resourceId));\n                runInAction(() => {\n                    this.resourceInfo = value || null;\n                });\n            } catch (e) {\n                console.error(e);\n                runInAction(() => {\n                    this.error = e as any;\n                });\n                showToast({\n                    title: `Failed to load ${props.resourceName}!`,\n                    description: `We were unable to get ${props.resourceName} from the remote API.`\n                });\n            }\n            runInAction(() => {\n                this.loading = false;\n            });\n        },\n        async showPickResourceModal(title?: string) {\n            // oxlint-disable-next-line typescript/no-unused-vars\n            const { value, resourcePicker, ...rest } = props;\n            const PickerComponent = resourcePicker || ResourcePicker;\n\n            const closeDialog = dialog.showDialog({\n                title: `Select a ${props.resourceName}`,\n                acceptLabel: null,\n                cancelLabel: null,\n                content: (\n                    <div className={\"h-[500px] overflow-scroll\"}>\n                        <PickerComponent\n                            {...rest}\n                            resourceName={props.resourceName}\n                            {...(this.resourceInfo && { value: this.resourceInfo })}\n                            title={title}\n                            onChange={action(value => {\n                                if (value) {\n                                    this.resourceId = String(value.id);\n                                    this.getResource();\n                                    props.onChange(\n                                        props.api[props.resourceName].getRequestObject(\n                                            this.resourceId,\n                                            value\n                                        )\n                                    );\n                                    closeDialog();\n                                }\n                            })}\n                        />\n                    </div>\n                )\n            });\n        }\n    }));\n\n    useEffect(() => {\n        store.updateResourceId(props);\n        store.getResource();\n    }, [props.value]);\n\n    return (\n        <div style={{ display: \"flex\", flexDirection: \"column\", padding: \"10px 0\" }}>\n            {store.loading && <Loader size={\"md\"} style={{ margin: \"30px auto\" }} />}\n            {store.resourceInfo && !store.loading && (\n                <div className={\"relative\"}>\n                    <ResourcePreviewCell\n                        style={{ paddingRight: \"30px\" }}\n                        resource={store.resourceInfo}\n                        onClick={() => {\n                            store.showPickResourceModal();\n                        }}\n                    />\n                </div>\n            )}\n            {!store.resourceInfo && !store.loading && (\n                <Button\n                    color=\"primary\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                        store.showPickResourceModal();\n                    }}\n                    text={`Choose ${props.resourceName}`}\n                />\n            )}\n        </div>\n    );\n});\n"],"names":["ResourcePreviewCell","observer","props","List","Avatar","undefined","ResourcePicker","showToast","useToast","store","useLocalObservable","throttle","runInAction","catchError","err","console","resourcesResponse","Array","useEffect","DelayedOnChange","action","value","Input","pluralize","Loader","item","String","Text","ResourcesPickerButton","dialog","useDialogs","newProps","resourceService","e","title","resourcePicker","rest","PickerComponent","closeDialog","Button"],"mappings":";;;;;;;AA6CO,MAAMA,sBAAsBC,SAAS,CAACC,QAClC,WAAP,GACI,oBAACC,KAAK,IAAI;QACN,SAASD,MAAM,OAAO;QACtB,OACIA,AAAyB,eAAzBA,MAAM,QAAQ,CAAC,KAAK,GAAkB,WAAb,GACrB,oBAAC,aACIA,MAAM,QAAQ,CAAC,KAAK,EAAC,OAAIA,MAAM,QAAQ,CAAC,EAAE,IAG/CA,MAAM,QAAQ,CAAC,KAAK;QAG5B,WAAWA,MAAM,SAAS;QAC1B,UAAUA,MAAM,QAAQ;QACxB,MACIA,MAAM,QAAQ,CAAC,KAAK,GAAG,WAAH,GAChB,oBAACE,QAAMA;YACH,SAAS;YACT,qBACI,oBAACA,OAAO,KAAK;gBACT,KAAKF,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG;gBAC7B,KAAKA,MAAM,QAAQ,CAAC,KAAK;;aAIrCG;QAER,SAASH,MAAM,OAAO,IAAI,WAAJ,GAAI;;AAY/B,MAAMI,iBAAiBL,SAAS,CAACC;IACpC,MAAM,EAAEK,SAAS,EAAE,GAAGC;IAEtB,MAAMC,QAAQC,mBAAmB,IAAO;YACpC,iBAAiB;YACjB,SAAS;YACT,WAAW,EAAE;YACb,QAAQC,SAAS;gBACbC,YAAY;oBACRH,MAAM,OAAO,GAAG;gBACpB;gBACA,MAAMI,aAAa,CAACC;oBAChBC,QAAQ,KAAK,CAAC,iBAAiBD;oBAC/BP,UAAU;wBACN,OAAO,CAAC,eAAe,EAAEL,MAAM,YAAY,CAAC,EAAE,CAAC;wBAC/C,aAAa,CAAC,sBAAsB,EAAEA,MAAM,YAAY,CAAC,sBAAsB,CAAC;oBACpF;gBACJ;gBAEA,MAAMc,oBAAoB,MAAMd,MAAM,GAAG,CAACA,MAAM,YAAY,CAAC,CACxD,MAAM,CAACO,MAAM,eAAe,EAC5B,KAAK,CAACI;gBAEXD,YAAY;oBACR,IAAIK,MAAM,OAAO,CAACD,oBACdP,MAAM,SAAS,GAAGO;oBAEtBP,MAAM,OAAO,GAAG;gBACpB;YACJ,GAAG;QACP;IAEAS,UAAU;QACNT,MAAM,MAAM;IAChB,GAAG;QAACA,MAAM,eAAe;KAAC;IAE1B,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,eAAe;YAAU,UAAU;QAAS;qBACvE,oBAACU,iBAAeA;QACZ,OAAOV,MAAM,eAAe;QAC5B,UAAUW,OAAOC,CAAAA,QAAUZ,MAAM,eAAe,GAAGY;qBAEnD,oBAACC,OAAKA;QACF,aAAapB,MAAM,KAAK,IAAI,CAAC,OAAO,EAAEqB,UAAU,MAAM,CAACrB,MAAM,YAAY,EAAE,GAAG,CAAC;SAGtFO,MAAM,OAAO,IAAI,WAAJ,GAAI,oBAACe,QAAMA;QAAC,OAAO;YAAE,QAAQ;QAAY;sBACvD,oBAAC,aACI,CAACf,MAAM,OAAO,IACVA,CAAAA,MAAM,SAAS,CAAC,MAAM,GACnBA,MAAM,SAAS,CAAC,GAAG,CAACgB,CAAAA,OAAAA,WAAAA,GAChB,oBAACtB,MAAIA;YACD,KAAKsB,KAAK,EAAE;YACZ,SAAS;gBACLvB,MAAM,QAAQ,CAACuB;YACnB;yBAEA,oBAACzB,qBAAmBA;YAChB,UAAU0B,OAAOD,KAAK,EAAE,MAAMC,OAAOxB,MAAM,KAAK,EAAE;YAClD,UAAUuB;YACV,KAAKA,KAAK,EAAE;6BAKxB,oBAAC;QAAI,OAAO;YAAE,QAAQ;YAAa,WAAW;QAAS;qBACnD,oBAACE,MAAIA;QAAC,MAAM;OAAM,OACVJ,UAAU,MAAM,CAACrB,MAAM,YAAY,GAAE;AAOzE;AAEO,MAAM0B,wBAA8D3B,SAASC,CAAAA;IAChF,MAAM,EAAEK,SAAS,EAAE,GAAGC;IACtB,MAAMqB,SAASC;IAEf,MAAMrB,QAAQC,mBAAmB,IAAO;YACpC,SAAS;YACT,OAAO;YACP,cAAc;YACd,YAAYR,MAAM,KAAK;YACvB,kBAAiB6B,QAAoC;gBACjD,IAAI,CAAC,UAAU,GAAGA,SAAS,KAAK;YACpC;YACA,MAAM;gBACFnB,YAAY;oBACR,IAAI,CAAC,KAAK,GAAG;oBACb,IAAI,CAAC,OAAO,GAAG;gBACnB;gBAEA,IAAI;oBACA,MAAMoB,kBAAkB9B,MAAM,GAAG,CAACA,MAAM,YAAY,CAAC;oBACrD,MAAMmB,QAAQ,IAAI,CAAC,UAAU,IAAK,MAAMW,gBAAgB,QAAQ,CAAC,IAAI,CAAC,UAAU;oBAChFpB,YAAY;wBACR,IAAI,CAAC,YAAY,GAAGS,SAAS;oBACjC;gBACJ,EAAE,OAAOY,GAAG;oBACRlB,QAAQ,KAAK,CAACkB;oBACdrB,YAAY;wBACR,IAAI,CAAC,KAAK,GAAGqB;oBACjB;oBACA1B,UAAU;wBACN,OAAO,CAAC,eAAe,EAAEL,MAAM,YAAY,CAAC,CAAC,CAAC;wBAC9C,aAAa,CAAC,sBAAsB,EAAEA,MAAM,YAAY,CAAC,qBAAqB,CAAC;oBACnF;gBACJ;gBACAU,YAAY;oBACR,IAAI,CAAC,OAAO,GAAG;gBACnB;YACJ;YACA,MAAM,uBAAsBsB,KAAc;gBAEtC,MAAM,EAAEb,KAAK,EAAEc,cAAc,EAAE,GAAGC,MAAM,GAAGlC;gBAC3C,MAAMmC,kBAAkBF,kBAAkB7B;gBAE1C,MAAMgC,cAAcT,OAAO,UAAU,CAAC;oBAClC,OAAO,CAAC,SAAS,EAAE3B,MAAM,YAAY,EAAE;oBACvC,aAAa;oBACb,aAAa;oBACb,SAAS,WAAT,GACI,oBAAC;wBAAI,WAAW;qCACZ,oBAACmC,iBAAAA;wBACI,GAAGD,IAAI;wBACR,cAAclC,MAAM,YAAY;wBAC/B,GAAI,IAAI,CAAC,YAAY,IAAI;4BAAE,OAAO,IAAI,CAAC,YAAY;wBAAC,CAAC;wBACtD,OAAOgC;wBACP,UAAUd,OAAOC,CAAAA;4BACb,IAAIA,OAAO;gCACP,IAAI,CAAC,UAAU,GAAGK,OAAOL,MAAM,EAAE;gCACjC,IAAI,CAAC,WAAW;gCAChBnB,MAAM,QAAQ,CACVA,MAAM,GAAG,CAACA,MAAM,YAAY,CAAC,CAAC,gBAAgB,CAC1C,IAAI,CAAC,UAAU,EACfmB;gCAGRiB;4BACJ;wBACJ;;gBAIhB;YACJ;QACJ;IAEApB,UAAU;QACNT,MAAM,gBAAgB,CAACP;QACvBO,MAAM,WAAW;IACrB,GAAG;QAACP,MAAM,KAAK;KAAC;IAEhB,OAAO,WAAP,GACI,oBAAC;QAAI,OAAO;YAAE,SAAS;YAAQ,eAAe;YAAU,SAAS;QAAS;OACrEO,MAAM,OAAO,IAAI,WAAJ,GAAI,oBAACe,QAAMA;QAAC,MAAM;QAAM,OAAO;YAAE,QAAQ;QAAY;QAClEf,MAAM,YAAY,IAAI,CAACA,MAAM,OAAO,IAAI,WAAJ,GACjC,oBAAC;QAAI,WAAW;qBACZ,oBAACT,qBAAmBA;QAChB,OAAO;YAAE,cAAc;QAAO;QAC9B,UAAUS,MAAM,YAAY;QAC5B,SAAS;YACLA,MAAM,qBAAqB;QAC/B;SAIX,CAACA,MAAM,YAAY,IAAI,CAACA,MAAM,OAAO,IAAI,WAAJ,GAClC,oBAAC8B,QAAMA;QACH,OAAM;QACN,SAAQ;QACR,SAAS;YACL9B,MAAM,qBAAqB;QAC/B;QACA,MAAM,CAAC,OAAO,EAAEP,MAAM,YAAY,EAAE;;AAKxD"}

package/ecommerce/components/adaptInputToBind.js

@@ -1,27 +1,26 @@
-import React from "react";
+import react from "react";
 import { NullMetadata } from "../../BaseEditor/metadata/index.js";
 import { InputValueObject } from "../../BaseEditor/hooks/useInputValue.js";
 const metadata = new NullMetadata();
-const noop = () => void 0;
-export const adaptInputToBind = Component => {
-  return function ElementInputAsFormInput(props) {
-    const onChange = cb => {
-      const value = new InputValueObject(props.value);
-      cb({
-        value,
-        metadata
-      });
-      props.onChange(value.get());
+const noop = ()=>void 0;
+const adaptInputToBind = (Component)=>function(props) {
+        const onChange = (cb)=>{
+            const value = new InputValueObject(props.value);
+            cb({
+                value,
+                metadata: metadata
+            });
+            props.onChange(value.get());
+        };
+        return /*#__PURE__*/ react.createElement(Component, {
+            label: props.label,
+            value: props.value,
+            onChange: onChange,
+            metadata: metadata,
+            onPreviewChange: noop,
+            input: {}
+        });
     };
-    return /*#__PURE__*/React.createElement(Component, {
-      label: props.label,
-      value: props.value,
-      onChange: onChange,
-      metadata: metadata,
-      onPreviewChange: noop,
-      input: {}
-    });
-  };
-};
+export { adaptInputToBind };
 
 //# sourceMappingURL=adaptInputToBind.js.map

package/ecommerce/components/adaptInputToBind.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","NullMetadata","InputValueObject","metadata","noop","adaptInputToBind","Component","ElementInputAsFormInput","props","onChange","cb","value","get","createElement","label","onPreviewChange","input"],"sources":["adaptInputToBind.tsx"],"sourcesContent":["import React from \"react\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { NullMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport { InputValueObject } from \"~/BaseEditor/hooks/useInputValue.js\";\n\nconst metadata = new NullMetadata();\nconst noop = () => void 0;\n\nexport const adaptInputToBind = (Component: React.ComponentType<ElementInputRendererProps>) => {\n    return function ElementInputAsFormInput(props: BindComponentRenderProp & { label: string }) {\n        const onChange: ElementInputRendererProps[\"onChange\"] = cb => {\n            const value = new InputValueObject(props.value);\n            cb({ value, metadata });\n            props.onChange(value.get());\n        };\n\n        return (\n            <Component\n                label={props.label}\n                value={props.value}\n                onChange={onChange}\n                metadata={metadata}\n                onPreviewChange={noop}\n                input={{} as any}\n            />\n        );\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,YAAY;AACrB,SAASC,gBAAgB;AAEzB,MAAMC,QAAQ,GAAG,IAAIF,YAAY,CAAC,CAAC;AACnC,MAAMG,IAAI,GAAGA,CAAA,KAAM,KAAK,CAAC;AAEzB,OAAO,MAAMC,gBAAgB,GAAIC,SAAyD,IAAK;EAC3F,OAAO,SAASC,uBAAuBA,CAACC,KAAkD,EAAE;IACxF,MAAMC,QAA+C,GAAGC,EAAE,IAAI;MAC1D,MAAMC,KAAK,GAAG,IAAIT,gBAAgB,CAACM,KAAK,CAACG,KAAK,CAAC;MAC/CD,EAAE,CAAC;QAAEC,KAAK;QAAER;MAAS,CAAC,CAAC;MACvBK,KAAK,CAACC,QAAQ,CAACE,KAAK,CAACC,GAAG,CAAC,CAAC,CAAC;IAC/B,CAAC;IAED,oBACIZ,KAAA,CAAAa,aAAA,CAACP,SAAS;MACNQ,KAAK,EAAEN,KAAK,CAACM,KAAM;MACnBH,KAAK,EAAEH,KAAK,CAACG,KAAM;MACnBF,QAAQ,EAAEA,QAAS;MACnBN,QAAQ,EAAEA,QAAS;MACnBY,eAAe,EAAEX,IAAK;MACtBY,KAAK,EAAE,CAAC;IAAS,CACpB,CAAC;EAEV,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"ecommerce/components/adaptInputToBind.js","sources":["../../../src/ecommerce/components/adaptInputToBind.tsx"],"sourcesContent":["import React from \"react\";\nimport type { BindComponentRenderProp } from \"@webiny/form\";\nimport type { ElementInputRendererProps } from \"~/BaseEditor/index.js\";\nimport { NullMetadata } from \"~/BaseEditor/metadata/index.js\";\nimport { InputValueObject } from \"~/BaseEditor/hooks/useInputValue.js\";\n\nconst metadata = new NullMetadata();\nconst noop = () => void 0;\n\nexport const adaptInputToBind = (Component: React.ComponentType<ElementInputRendererProps>) => {\n    return function ElementInputAsFormInput(props: BindComponentRenderProp & { label: string }) {\n        const onChange: ElementInputRendererProps[\"onChange\"] = cb => {\n            const value = new InputValueObject(props.value);\n            cb({ value, metadata });\n            props.onChange(value.get());\n        };\n\n        return (\n            <Component\n                label={props.label}\n                value={props.value}\n                onChange={onChange}\n                metadata={metadata}\n                onPreviewChange={noop}\n                input={{} as any}\n            />\n        );\n    };\n};\n"],"names":["metadata","NullMetadata","noop","adaptInputToBind","Component","props","onChange","cb","value","InputValueObject"],"mappings":";;;AAMA,MAAMA,WAAW,IAAIC;AACrB,MAAMC,OAAO,IAAM,KAAK;AAEjB,MAAMC,mBAAmB,CAACC,YACtB,SAAiCC,KAAkD;QACtF,MAAMC,WAAkDC,CAAAA;YACpD,MAAMC,QAAQ,IAAIC,iBAAiBJ,MAAM,KAAK;YAC9CE,GAAG;gBAAEC;gBAAOR,UAAAA;YAAS;YACrBK,MAAM,QAAQ,CAACG,MAAM,GAAG;QAC5B;QAEA,OAAO,WAAP,GACI,oBAACJ,WAAAA;YACG,OAAOC,MAAM,KAAK;YAClB,OAAOA,MAAM,KAAK;YAClB,UAAUC;YACV,UAAUN;YACV,iBAAiBE;YACjB,OAAO,CAAC;;IAGpB"}

package/ecommerce/components/toTitleCaseLabel.js

@@ -1,9 +1,7 @@
-export function toTitleCaseLabel(input) {
-  // Convert camelCase to spaced: "originalSize" → "original Size"
-  const spaced = input.replace(/([a-z])([A-Z])/g, "$1 $2");
-
-  // Split by space, capitalize each word
-  return spaced.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+function toTitleCaseLabel(input) {
+    const spaced = input.replace(/([a-z])([A-Z])/g, "$1 $2");
+    return spaced.split(" ").map((word)=>word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
+export { toTitleCaseLabel };
 
 //# sourceMappingURL=toTitleCaseLabel.js.map

package/ecommerce/components/toTitleCaseLabel.js.map

@@ -1 +1 @@
-{"version":3,"names":["toTitleCaseLabel","input","spaced","replace","split","map","word","charAt","toUpperCase","slice","join"],"sources":["toTitleCaseLabel.ts"],"sourcesContent":["export function toTitleCaseLabel(input: string): string {\n    // Convert camelCase to spaced: \"originalSize\" → \"original Size\"\n    const spaced = input.replace(/([a-z])([A-Z])/g, \"$1 $2\");\n\n    // Split by space, capitalize each word\n    return spaced\n        .split(\" \")\n        .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n        .join(\" \");\n}\n"],"mappings":"AAAA,OAAO,SAASA,gBAAgBA,CAACC,KAAa,EAAU;EACpD;EACA,MAAMC,MAAM,GAAGD,KAAK,CAACE,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC;;EAExD;EACA,OAAOD,MAAM,CACRE,KAAK,CAAC,GAAG,CAAC,CACVC,GAAG,CAACC,IAAI,IAAIA,IAAI,CAACC,MAAM,CAAC,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,GAAGF,IAAI,CAACG,KAAK,CAAC,CAAC,CAAC,CAAC,CACzDC,IAAI,CAAC,GAAG,CAAC;AAClB","ignoreList":[]}
+{"version":3,"file":"ecommerce/components/toTitleCaseLabel.js","sources":["../../../src/ecommerce/components/toTitleCaseLabel.ts"],"sourcesContent":["export function toTitleCaseLabel(input: string): string {\n    // Convert camelCase to spaced: \"originalSize\" → \"original Size\"\n    const spaced = input.replace(/([a-z])([A-Z])/g, \"$1 $2\");\n\n    // Split by space, capitalize each word\n    return spaced\n        .split(\" \")\n        .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n        .join(\" \");\n}\n"],"names":["toTitleCaseLabel","input","spaced","word"],"mappings":"AAAO,SAASA,iBAAiBC,KAAa;IAE1C,MAAMC,SAASD,MAAM,OAAO,CAAC,mBAAmB;IAGhD,OAAOC,OACF,KAAK,CAAC,KACN,GAAG,CAACC,CAAAA,OAAQA,KAAK,MAAM,CAAC,GAAG,WAAW,KAAKA,KAAK,KAAK,CAAC,IACtD,IAAI,CAAC;AACd"}

package/ecommerce/createResourceListPicker.js

@@ -1,29 +1,28 @@
-import React from "react";
+import react from "react";
 import { FormComponentLabel } from "@webiny/admin-ui";
 import { PickResourcesListButton } from "./components/ResourcesList.js";
-export const createResourceListPicker = (pluginName, api, resourceName) => {
-  const ListResourcePicker = props => {
-    const onChange = newValue => {
-      props.onChange(({
-        value
-      }) => {
-        value.set(newValue);
-      });
+const createResourceListPicker = (pluginName, api, resourceName)=>{
+    const ListResourcePicker = (props)=>{
+        const onChange = (newValue)=>{
+            props.onChange(({ value })=>{
+                value.set(newValue);
+            });
+        };
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+            text: props.label
+        }), /*#__PURE__*/ react.createElement(PickResourcesListButton, {
+            api: api,
+            resourceName: resourceName,
+            pluginName: pluginName,
+            value: props.value,
+            onChange: onChange
+        }));
     };
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(FormComponentLabel, {
-      text: props.label
-    }), /*#__PURE__*/React.createElement(PickResourcesListButton, {
-      api: api,
-      resourceName: resourceName,
-      pluginName: pluginName,
-      value: props.value,
-      onChange: onChange
-    }));
-  };
-  ListResourcePicker.displayName = `${pluginName}${resourceName}List`;
-  return ListResourcePicker;
+    ListResourcePicker.displayName = `${pluginName}${resourceName}List`;
+    return ListResourcePicker;
 };
+export { createResourceListPicker };
 
 //# sourceMappingURL=createResourceListPicker.js.map

package/ecommerce/createResourceListPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FormComponentLabel","PickResourcesListButton","createResourceListPicker","pluginName","api","resourceName","ListResourcePicker","props","onChange","newValue","value","set","createElement","className","text","label","displayName"],"sources":["createResourceListPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport type { Editor } from \"~/index.js\";\nimport type { IEcommerceApi } from \"./types.js\";\nimport { PickResourcesListButton } from \"./components/ResourcesList.js\";\n\nexport const createResourceListPicker = (\n    pluginName: string,\n    api: IEcommerceApi,\n    resourceName: string\n) => {\n    const ListResourcePicker = (props: Editor.ElementInputRendererProps) => {\n        const onChange = (newValue: unknown) => {\n            props.onChange(({ value }) => {\n                value.set(newValue);\n            });\n        };\n\n        return (\n            <div className={\"w-full\"}>\n                <FormComponentLabel text={props.label} />\n                <PickResourcesListButton\n                    api={api}\n                    resourceName={resourceName}\n                    pluginName={pluginName}\n                    value={props.value}\n                    onChange={onChange}\n                />\n            </div>\n        );\n    };\n\n    ListResourcePicker.displayName = `${pluginName}${resourceName}List`;\n\n    return ListResourcePicker;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAQ,kBAAkB;AAGrD,SAASC,uBAAuB;AAEhC,OAAO,MAAMC,wBAAwB,GAAGA,CACpCC,UAAkB,EAClBC,GAAkB,EAClBC,YAAoB,KACnB;EACD,MAAMC,kBAAkB,GAAIC,KAAuC,IAAK;IACpE,MAAMC,QAAQ,GAAIC,QAAiB,IAAK;MACpCF,KAAK,CAACC,QAAQ,CAAC,CAAC;QAAEE;MAAM,CAAC,KAAK;QAC1BA,KAAK,CAACC,GAAG,CAACF,QAAQ,CAAC;MACvB,CAAC,CAAC;IACN,CAAC;IAED,oBACIV,KAAA,CAAAa,aAAA;MAAKC,SAAS,EAAE;IAAS,gBACrBd,KAAA,CAAAa,aAAA,CAACZ,kBAAkB;MAACc,IAAI,EAAEP,KAAK,CAACQ;IAAM,CAAE,CAAC,eACzChB,KAAA,CAAAa,aAAA,CAACX,uBAAuB;MACpBG,GAAG,EAAEA,GAAI;MACTC,YAAY,EAAEA,YAAa;MAC3BF,UAAU,EAAEA,UAAW;MACvBO,KAAK,EAAEH,KAAK,CAACG,KAAM;MACnBF,QAAQ,EAAEA;IAAS,CACtB,CACA,CAAC;EAEd,CAAC;EAEDF,kBAAkB,CAACU,WAAW,GAAG,GAAGb,UAAU,GAAGE,YAAY,MAAM;EAEnE,OAAOC,kBAAkB;AAC7B,CAAC","ignoreList":[]}
+{"version":3,"file":"ecommerce/createResourceListPicker.js","sources":["../../src/ecommerce/createResourceListPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentLabel } from \"@webiny/admin-ui\";\nimport type { Editor } from \"~/index.js\";\nimport type { IEcommerceApi } from \"./types.js\";\nimport { PickResourcesListButton } from \"./components/ResourcesList.js\";\n\nexport const createResourceListPicker = (\n    pluginName: string,\n    api: IEcommerceApi,\n    resourceName: string\n) => {\n    const ListResourcePicker = (props: Editor.ElementInputRendererProps) => {\n        const onChange = (newValue: unknown) => {\n            props.onChange(({ value }) => {\n                value.set(newValue);\n            });\n        };\n\n        return (\n            <div className={\"w-full\"}>\n                <FormComponentLabel text={props.label} />\n                <PickResourcesListButton\n                    api={api}\n                    resourceName={resourceName}\n                    pluginName={pluginName}\n                    value={props.value}\n                    onChange={onChange}\n                />\n            </div>\n        );\n    };\n\n    ListResourcePicker.displayName = `${pluginName}${resourceName}List`;\n\n    return ListResourcePicker;\n};\n"],"names":["createResourceListPicker","pluginName","api","resourceName","ListResourcePicker","props","onChange","newValue","value","FormComponentLabel","PickResourcesListButton"],"mappings":";;;AAMO,MAAMA,2BAA2B,CACpCC,YACAC,KACAC;IAEA,MAAMC,qBAAqB,CAACC;QACxB,MAAMC,WAAW,CAACC;YACdF,MAAM,QAAQ,CAAC,CAAC,EAAEG,KAAK,EAAE;gBACrBA,MAAM,GAAG,CAACD;YACd;QACJ;QAEA,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACE,oBAAkBA;YAAC,MAAMJ,MAAM,KAAK;0BACrC,oBAACK,yBAAuBA;YACpB,KAAKR;YACL,cAAcC;YACd,YAAYF;YACZ,OAAOI,MAAM,KAAK;YAClB,UAAUC;;IAI1B;IAEAF,mBAAmB,WAAW,GAAG,GAAGH,aAAaE,aAAa,IAAI,CAAC;IAEnE,OAAOC;AACX"}