feat(ShareModal): add collection preview

components/core/CollectionPreviewBlock/components/ShareButton.js

@@ -27,7 +27,7 @@ const STYLES_BUTTON = (theme) => css`
   }
 `;
 
-export default function ShareButton({ user, collection, ...props }) {
+export default function ShareButton({ user, collection, preview, ...props }) {
   const { openModal } = useCollectionSharingModal();
   const handleOnClick = (e) => {
     e.preventDefault();
@@ -35,6 +35,7 @@ export default function ShareButton({ user, collection, ...props }) {
     openModal({
       user,
       collection,
+      preview,
     });
   };
 

components/core/ShareModals/CollectionSharingModal.js

@@ -35,7 +35,7 @@ const formatDataSafely = ({ collection, user }) => {
 
 export const CollectionSharingModal = () => {
   const [state, handlers] = useModalState();
-  const { open, user, collection, view } = state;
+  const { open, user, collection, view, preview } = state;
   const { closeModal, changeView, handleModalVisibility } = handlers;
 
   const { id, title, link } = React.useMemo(
@@ -50,10 +50,14 @@ export const CollectionSharingModal = () => {
     window.open(`https://twitter.com/intent/tweet?text=${title}:%0D&url=${link}`, "_blank");
 
   const handleEmailSharing = () => {
-    const email = prompt("Please enter your email");
+    let { email } = user;
+    if (!email) {
+      email = prompt("Please enter your email");
+    }
     if (!email) return;
+
     //TODO(amine): change email copy
-    window.open(`mailto:${email}?subject=Check out this collection&body=${link}`, "_b");
+    window.open(`mailfrom: ?subject=Check out this collection&body=${link}`, "_b");
   };
 
   const handleLinkCopy = () => (Utilities.copyToClipboard(link), changeView("LINK_COPIED"));
@@ -64,7 +68,7 @@ export const CollectionSharingModal = () => {
       isOpen={open}
       closeModal={closeModal}
       title={title}
-      user={user}
+      preview={preview}
       description={`Collection @${user.username}`}
       onEmailSharing={handleEmailSharing}
       includeSocialSharing={!(view === "LINK_COPIED" || view === "ID_COPIED")}
@@ -120,6 +124,7 @@ const useModalState = () => {
     view: "initial",
     user: {},
     data: {},
+    preview: {},
   });
 
   const handlers = React.useMemo(
@@ -132,6 +137,7 @@ const useModalState = () => {
           open: e.detail.open,
           user: e.detail.user,
           collection: e.detail.collection,
+          preview: e.detail.preview,
         })),
     }),
     []
@@ -140,10 +146,10 @@ const useModalState = () => {
 };
 
 export const useCollectionSharingModal = () => {
-  const openModal = ({ user, collection }) =>
+  const openModal = ({ user, collection, preview }) =>
     Events.dispatchCustomEvent({
       name: "collection-sharing-modal",
-      detail: { open: true, user, collection },
+      detail: { open: true, user, collection, preview },
     });
   const closeModal = () =>
     Events.dispatchCustomEvent({

components/core/ShareModals/ShareModalPrimitive.js

@@ -1,13 +1,14 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
 import * as SVG from "~/common/svg";
+import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
 import { H5, P3 } from "~/components/system/components/Typography";
 import { AnimatePresence, motion } from "framer-motion";
 import { useEscapeKey, useLockScroll } from "~/common/hooks";
-
-import ProfilePhoto from "~/components/core/ProfilePhoto";
+import { Preview } from "~/components/core/CollectionPreviewBlock/components";
+import { Symbol } from "~/common/logo";
 
 const STYLES_OVERLAY = (theme) => css`
   position: fixed;
@@ -68,6 +69,23 @@ const STYLES_TEXT_CENTER = css`
   text-align: center;
 `;
 
+const STYLES_PREVIEW = (theme) => css`
+  width: 48px;
+  max-width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background-color: ${theme.semantic.bgLight};
+  ${Styles.CONTAINER_CENTERED}
+`;
+
+const EmptyFallbackPreview = () => {
+  return (
+    <div css={STYLES_PREVIEW}>
+      <Symbol style={{ height: 24, color: Constants.system.grayLight2 }} />
+    </div>
+  );
+};
+
 // NOTE(amine): This modal will be a building block for both Object and Collection sharing modals
 export const ShareModalPrimitive = ({
   isOpen,
@@ -77,7 +95,7 @@ export const ShareModalPrimitive = ({
   includeSocialSharing = true,
   onTwitterSharing,
   onEmailSharing,
-  user,
+  preview,
   children,
 }) => {
   useEscapeKey(closeModal);
@@ -102,7 +120,13 @@ export const ShareModalPrimitive = ({
             onClick={handleModalClick}
           >
             <motion.div layout css={STYLES_PROFILE} style={{ alignItems: "flex-start" }}>
-              <ProfilePhoto user={user} size={48} />
+              <Preview
+                file={preview.object}
+                type={preview.type}
+                EmptyFallback={EmptyFallbackPreview}
+                css={STYLES_PREVIEW}
+                placeholderRatio={2}
+              />
               <div style={{ marginLeft: 12, flexGrow: 1 }}>
                 <H5 color="textBlack" nbrOflines={1}>
                   {title}