@blerp/design 1.2.74 → 1.2.76

package/dist/cjs/NewCollectionModal.js

@@ -0,0 +1,403 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
+var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
+var React = require('react');
+var styled = require('styled-components');
+var ImageUploadModal = require('./ImageUploadModal.js');
+var index = require('./index.js');
+var ScreenSizeHook = require('./ScreenSizeHook.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
+var FileUploadRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileUploadRoundedIcon);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject;
+styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default']([""])));
+const NewCollectionModal = _ref => {
+  var _collectionToBeEdited, _collectionToBeEdited2, _collectionToBeEdited3;
+
+  let {
+    handleCollection,
+    deleteCollectionModal,
+    trigger,
+    collectionToBeEdited,
+    handleChangePremium,
+    onClose,
+    children,
+    isAdmin
+  } = _ref;
+  const [open, setopen] = React.useState(false);
+  const [imageFile, setImageFile] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original);
+  const [imageURL, setImageURL] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited2 = collectionToBeEdited.image) === null || _collectionToBeEdited2 === void 0 ? void 0 : (_collectionToBeEdited3 = _collectionToBeEdited2.original) === null || _collectionToBeEdited3 === void 0 ? void 0 : _collectionToBeEdited3.url);
+  const [titleInput, setTitleInput] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title);
+  const [descriptionInput, setDescriptionInput] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description);
+  const [visibility, setVisibility] = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility) || "PUBLIC");
+  const [price, setPrice] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price);
+  const triggerRef = React.useRef();
+  const [editImage, setEditImage] = React.useState(false);
+  React.useState(false);
+  const size = ScreenSizeHook.useWindowSize();
+
+  const handleClose = () => {
+    setopen(false);
+
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, trigger ? /*#__PURE__*/React.cloneElement(trigger, {
+    ref: triggerRef,
+    onClick: () => setopen(true)
+  }) : /*#__PURE__*/React__default['default'].createElement(index.Button, {
+    onClick: () => setopen(true),
+    color: "grey4",
+    sx: {
+      fontSize: "10px"
+    }
+  }, "Organize Collection"), /*#__PURE__*/React__default['default'].createElement(index.Modal, {
+    "aria-labelledby": "transition-modal-title",
+    "aria-describedby": "transition-modal-description",
+    open: open,
+    onClose: () => handleClose(),
+    closeAfterTransition: true
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: 600,
+      height: 520,
+      overflowY: "auto",
+      bgcolor: "white.main",
+      border: "none",
+      boxShadow: 24,
+      borderRadius: "8px",
+      pt: 2,
+      px: 6,
+      pb: 3,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      "@media(max-width: 600px)": {
+        height: "100vh",
+        width: "98vw"
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Modal, {
+    sx: {
+      backdropFilter: "blur(8px)",
+      overflow: "scroll"
+    },
+    open: editImage,
+    onClose: () => setEditImage(false),
+    "aria-labelledby": "image-update-modal",
+    "aria-describedby": "image-update-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "absolute",
+      height: size.width > 600 ? 600 : "100%",
+      overflowY: "auto",
+      top: size.width > 600 ? "48%" : "0",
+      left: size.width > 600 ? "50%" : "0",
+      transform: size.width > 600 ? "translate(-50%, -50%)" : "0",
+      width: size.width > 600 ? 275 : "100vw",
+      minWidth: "320px",
+      bgcolor: "white.main",
+      boxShadow: 24,
+      borderRadius: size.width > 600 ? "8px" : "0",
+      p: size.width > 600 ? 4 : 0,
+      padding: size.width > 600 ? "16px 32px 32px" : "16px 0",
+      ":focus": {
+        border: "none",
+        outline: "none"
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(ImageUploadModal, {
+    prevImage: collectionToBeEdited ? imageURL : undefined,
+    updateImage: newImage => {
+      setImageURL(URL.createObjectURL(newImage));
+      setImageFile(newImage);
+    },
+    width: "150px",
+    open: editImage,
+    onClose: () => setEditImage(false),
+    title: "Collection Image",
+    sizeInfo: "Minimum size is 64px X 64px",
+    isSquareImage: true
+  }))), /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
+    sx: {
+      color: "notBlack.main",
+      position: "absolute",
+      right: 10,
+      top: 10,
+      cursor: "pointer",
+      "@media(max-width: 600px)": {
+        right: 50,
+        top: 30
+      }
+    },
+    onClick: () => handleClose()
+  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      minWidth: "320px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    sx: {
+      alignSelf: size.width > 600 ? "flex-start" : "center"
+    },
+    fontSize: "40px",
+    margin: size.width > 600 ? "9px 0" : "24px 0 9px"
+  }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: size.width > 600 ? "row" : "column",
+    sx: {
+      width: "100%",
+      marginTop: "8px",
+      minHeight: size.width > 600 ? "272px" : "470px",
+      justifyContent: size.width > 600 ? "center" : "space-between"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    alignItems: "center",
+    justifyContent: "flex-start",
+    marginRight: size.width > 600 ? size.width > 700 ? "48px" : "32px" : "0"
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      width: "180px",
+      position: "relative",
+      justifyContent: "flex-start",
+      "&:hover": {
+        width: "180px",
+        background: "notBlack.main"
+      }
+    }
+  }, imageURL ? /*#__PURE__*/React__default['default'].createElement("img", {
+    style: {
+      objectFit: "cover",
+      width: "100%",
+      minWidth: "75px",
+      height: "auto",
+      borderRadius: "8px"
+    },
+    alt: "uploaded img",
+    src: imageURL
+  }) : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      justifyContent: "center",
+      width: "calc(100% - 2px)",
+      minWidth: "75px",
+      height: "176px",
+      borderRadius: "8px",
+      border: "1px solid",
+      color: "grey3.main"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    sx: {
+      textAlign: "center"
+    }
+  }, "Click here to upload a photo for this collection")), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      position: "absolute",
+      justifyContent: "flex-end",
+      alignItems: "flex-end",
+      top: "0",
+      right: "0",
+      width: "100%",
+      height: "100%",
+      backgroundColor: "transparent",
+      transition: "0.2s",
+      "&:hover div": {
+        transition: "0.2s",
+        opacity: "1"
+      }
+    },
+    style: {
+      borderRadius: "50%",
+      zIndex: "6"
+    },
+    onClick: () => setEditImage(true)
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    alignItems: "center",
+    justifyContent: "center",
+    sx: {
+      opacity: "0",
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      cursor: "pointer",
+      width: "100%",
+      transition: "opacity .2s",
+      background: "black",
+      borderRadius: "8px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(FileUploadRoundedIcon__default['default'], {
+    sx: {
+      color: "white.main",
+      fontSize: "40px",
+      height: "120px",
+      width: "120px"
+    }
+  }))))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    justifyContent: "space-between",
+    sx: {
+      // height: "220px",
+      width: "64%",
+      minWidth: "320px",
+      position: "relative",
+      top: size.width > 600 ? "-20px" : "0",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Input, {
+    disabled: !isAdmin && (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium),
+    color: "notBlack",
+    label: "Collection Name",
+    value: titleInput,
+    onChange: e => setTitleInput(e.target.value),
+    variant: "standard",
+    sx: {
+      margin: "0"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(index.Input, {
+    disabled: !isAdmin && (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium),
+    label: "Add a description",
+    variant: "filled",
+    color: "notBlack",
+    value: descriptionInput,
+    onChange: e => setDescriptionInput(e.target.value),
+    multiline: true,
+    rows: 4,
+    sx: {
+      fontSize: "16px",
+      paddingBottom: "12px",
+      marginTop: "18px"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      width: "40%"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    marginBottom: "4px",
+    fontSize: "18px"
+  }, "Visibility:"), /*#__PURE__*/React__default['default'].createElement(index.Dropdown, {
+    sx: {
+      height: "40px"
+    },
+    buttonTitle: visibility,
+    handleOptionClicked: option => setVisibility(option.name),
+    options: [{
+      name: "PUBLIC"
+    }, {
+      name: "PRIVATE"
+    }, {
+      name: "UNLISTED"
+    }]
+  })), isAdmin && /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      width: "40%"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    marginBottom: "4px",
+    fontSize: "18px"
+  }, "Premium:"), /*#__PURE__*/React__default['default'].createElement(index.Toggle, {
+    checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
+    onClick: () => {
+      setVisibility("PUBLIC");
+      handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
+    }
+  })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    sx: {
+      width: "40%"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    marginBottom: "4px",
+    fontSize: "18px"
+  }, "Price:"), /*#__PURE__*/React__default['default'].createElement(index.Input, {
+    error: !(price > 0),
+    size: "small",
+    startAdornment: "$",
+    variant: "standard",
+    color: "grey6",
+    value: price,
+    onChange: e => {
+      setPrice(e.target.value);
+    }
+  })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))), /*#__PURE__*/React__default['default'].createElement(index.Button, {
+    color: "primary",
+    variant: "contained",
+    fontSize: "32px",
+    sx: {
+      width: "40%",
+      minWidth: "200px",
+      height: "48px",
+      fontWeight: "16px",
+      margin: size.width > 600 ? "0px auto 0" : "40px auto 0"
+    },
+    disableElevation: true,
+    onClick: () => {
+      // what to do if this modal is being used to edit a collection
+      if (collectionToBeEdited) {
+        if (!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium) || collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium && price > 0) {
+          handleCollection({
+            _id: collectionToBeEdited._id,
+            image: imageFile,
+            title: titleInput,
+            description: descriptionInput,
+            visibility: visibility,
+            price: price
+          });
+          handleClose();
+        } else {
+          console.log("price must be set higher than 0");
+        } // what to do if this modal is being used to create a new collection
+
+      } else {
+        if (!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium) || collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium && price > 0) {
+          handleCollection({
+            image: imageFile,
+            title: titleInput,
+            description: descriptionInput,
+            visibility: visibility,
+            price: collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? price : 0
+          });
+          handleClose();
+        } else {
+          console.log("price must be set higher than 0");
+        }
+      }
+    }
+  }, collectionToBeEdited ? "Save Changes" : "Create Collection"), collectionToBeEdited && deleteCollectionModal ? deleteCollectionModal : /*#__PURE__*/React__default['default'].createElement(index.Button, {
+    color: "primary",
+    variant: "text",
+    fontSize: "16px",
+    disableElevation: true,
+    sx: {
+      margin: "10px auto"
+    },
+    onClick: () => {
+      handleClose();
+    }
+  }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    fontSize: "14px",
+    textAlign: "center",
+    fontWeight: "lighter",
+    sx: {
+      width: "95%"
+    }
+  }, "By proceeding, you agree to allow Blerp access to the image you choose to upload. Please make sure you have the right to upload the image.")))));
+};
+
+exports.NewCollectionModal = NewCollectionModal;
+exports.default = NewCollectionModal;