Merge pull request #330 from near/DEC-1573

Notifications components
near · Sep 18, 2023 · 5aa92e0 · 5aa92e0
2 parents 86cf5d2 + 3338f78
commit 5aa92e0
Show file tree

Hide file tree

Showing 8 changed files with 902 additions and 0 deletions.
diff --git a/src/NearOrg/Notifications/Banner.jsx b/src/NearOrg/Notifications/Banner.jsx
@@ -0,0 +1,78 @@
+const Card = styled.div`
+  display: flex;
+  padding: 24px 16px;
+  align-items: flex-start;
+  align-self: stretch;
+  border-radius: 6px;
+  background: var(--violet-light-9, #8279e2);
+`;
+
+const Component = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex: 1 0 0;
+`;
+
+const Icon = styled.div`
+  & > i {
+    font-size: 24px;
+    color: white;
+  }
+`;
+
+const Close = styled.div`
+  flex-shrink: 0;
+
+  & > i {
+    font-size: 24px;
+    color: white;
+  }
+`;
+
+const Text = styled.div`
+  color: var(--white, #fff);
+  font: var(--text-base);
+  font-weight: 600;
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+`;
+
+return (
+  <Card>
+    <Component>
+      <Icon>
+        <i class="ph ph-bell-ringing" />
+      </Icon>
+      <Text>Don't miss out on updates, turn on desktop notifications.</Text>
+      <Buttons>
+        <Widget
+          src="${REPL_ACCOUNT}/widget/DIG.Button"
+          props={{
+            href: "",
+            label: "Turn on",
+            variant: "primary",
+            size: "default",
+          }}
+        />
+        <Widget
+          src="${REPL_ACCOUNT}/widget/DIG.Button"
+          props={{
+            href: "",
+            label: "No thanks",
+            variant: "secondary",
+            size: "default",
+          }}
+        />
+      </Buttons>
+    </Component>
+    <Close>
+      <i class="ph ph-x" />
+    </Close>
+  </Card>
+);
diff --git a/src/NearOrg/Notifications/Notification.jsx b/src/NearOrg/Notifications/Notification.jsx
@@ -0,0 +1,263 @@
+const Notification = styled.div`
+  display: flex;
+  padding: 16px 24px 16px 16px;
+  align-items: flex-start;
+  gap: 16px;
+  border-top: 1px solid var(--sand-light-6, #e3e3e0);
+
+  &:hover {
+    background: var(--sand-light-2, #f9f9f8);
+
+    & i {
+      color: #604cc8;
+    }
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: inherit;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1 0 0;
+`;
+
+const Icon = styled.div`
+  & > i {
+    color: #868682;
+    font-size: 24px;
+    padding-top: 2px;
+  }
+`;
+
+const Username = styled.span`
+  font: var(--text-s);
+  font-weight: 600;
+  color: var(--sand-light-12, var(--sand-light-12, #1b1b18));
+`;
+
+const Action = styled.span`
+  font: var(--text-s);
+  color: #706f6c;
+`;
+
+const ComponentName = styled.span`
+  font: var(--text-s);
+  font-weight: 600;
+  color: #604cc8;
+`;
+
+const Dot = styled.span`
+  padding: 0 8px 0 10px;
+`;
+
+const Button = styled.a`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  height: 32px;
+  border-radius: 100px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: center;
+  cursor: pointer;
+  background: #fbfcfd;
+  border: 1px solid #d7dbdf;
+  color: #006adc !important;
+  white-space: nowrap;
+
+  &.button--primary {
+    width: 100%;
+    color: #006adc !important;
+
+    @media (max-width: 1024px) {
+      width: auto;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background: #ecedee;
+    text-decoration: none;
+    outline: none;
+  }
+
+  i {
+    color: #7e868c;
+  }
+
+  .bi-16 {
+    font-size: 16px;
+  }
+`;
+
+const Timestamp = styled.div`
+  font: var(--text-s);
+  color: #706f6c;
+  padding-top: 2px;
+`;
+
+const Text = styled.div`
+  display: flex;
+  direction: columns;
+  padding-top: 8px;
+`;
+
+const Desc = styled.span`
+  font: var(--text-s);
+  color: #706f6c;
+  font-style: italic;
+  border-left: 2px solid #e3e3e0;
+  padding: 0 0 0 1rem;
+`;
+
+const Left = styled.div`
+  flex-grow: 1;
+`;
+
+const Right = styled.div``;
+
+const { value } = props;
+const { type } = value;
+const item = value?.item || {};
+const path = item.path || "";
+
+// Build notification
+const isComment = path.indexOf("/post/comment") > 0 || type === "comment";
+const isPost = !isComment && path.indexOf("/post/main") > 0;
+
+const accountId = type === "like" ? path.split("/")[0] : props.accountId;
+const blockHeight = type === "like" ? item.blockHeight : props.blockHeight;
+const urlBlockHeight = isComment ? "commentBlockHeight" : "blockHeight";
+
+const profile = props.profile || Social.get(`${accountId}/profile/**`, "final");
+const profileUrl = `#/near/widget/ProfilePage?accountId=${accountId}`;
+
+let postUrl = "";
+
+if (type !== "custom") {
+  postUrl = `#/near/widget/PostPage?accountId=${accountId}&${urlBlockHeight}=${blockHeight}`;
+} else {
+  postUrl = `#/${value.widget}?${Object.entries(value.params || {})
+    .map(([k, v]) => `${k}=${v}`)
+    .join("&")}`;
+}
+
+const actionable =
+  type === "like" ||
+  type === "comment" ||
+  type === "mention" ||
+  type === "custom";
+
+let notificationMessage = {
+  like: isPost ? "liked your post" : isComment ? "liked your comment" : "",
+  // fork: '',
+  follow: "followed you",
+  unfollow: "unfollowed you",
+  comment: "replied to your post",
+  mention: "mentioned you in their post",
+  poke: "poked you",
+  custom: value.message ?? "",
+};
+
+// DevGov handles their own type
+if (type && type.startsWith("devgovgigs/")) {
+  return (
+    <Widget src="mob.near/widget/Notification.Item.DevGov" props={props} />
+  );
+}
+
+// Assert is a valid type
+if (!(type in notificationMessage) || !notificationMessage[type]) return <></>;
+
+const ProfileOverlay = ({ children }) => (
+  <Widget
+    src="${REPL_ACCOUNT}/widget/AccountProfileOverlay"
+    props={{
+      accountId: props.accountId,
+      profile,
+      children,
+      placement: props.overlayPlacement,
+    }}
+  />
+);
+
+const iconType = {
+  like: <i class="ph ph-heart" />,
+  // fork: <i class="ph ph-git-fork" />,
+  follow: <i class="ph ph-user-plus" />,
+  unfollow: <i class="ph ph-user-minus" />,
+  comment: <i class="ph ph-share-fat" />,
+  mention: <i class="ph ph-at" />,
+  poke: <i class="ph ph-hand-pointing" />,
+  custom: <i class="ph ph-" />,
+};
+
+return (
+  <>
+    <Notification>
+      <Icon>{iconType[type]}</Icon>
+      <Content>
+        <Left>
+          <a href={!props.onClick && profileUrl}>
+            <ProfileOverlay>
+              <Widget
+                src="near/widget/DIG.Avatar"
+                props={{
+                  alt: accountId,
+                  image: profile.image,
+                  size: "small",
+                }}
+              />
+            </ProfileOverlay>
+          </a>
+          <Text>
+            <ProfileOverlay>
+              <a href={!props.onClick && profileUrl}>
+                <Username>
+                  {profile.name || accountId.split(".near")[0]}
+                </Username>
+              </a>
+              <Action>{notificationMessage[type]}</Action>
+            </ProfileOverlay>
+            {/*<ComponentName>{componentName}</ComponentName>*/}
+
+            <Timestamp>
+              <Dot>·</Dot>
+              {/* TODO: add title tag to show full time on hover */}
+              <Widget
+                src="mob.near/widget/TimeAgo@97556750"
+                props={{ blockHeight: props.blockHeight }}
+              />
+            </Timestamp>
+          </Text>
+          {/* <Desc>{desc}</Desc> */}
+        </Left>
+        <Right>
+          {(type === "follow" || type === "unfollow") && (
+            <Widget
+              src="${REPL_ACCOUNT}/widget/FollowButton"
+              props={{ accountId: props.accountId }}
+            />
+          )}
+
+          {type === "poke" && (
+            <Widget
+              src="${REPL_ACCOUNT}/widget/PokeButton"
+              props={{
+                accountId: props.accountId,
+                back: true,
+                primary: true,
+              }}
+            />
+          )}
+
+          {actionable && <Button href={postUrl}>View</Button>}
+        </Right>
+      </Content>
+    </Notification>
+  </>
+);
diff --git a/src/NearOrg/Notifications/Notifications.jsx b/src/NearOrg/Notifications/Notifications.jsx
@@ -0,0 +1,54 @@
+const Header = styled.div`
+  display: flex;
+  padding: 48px 16px 24px 16px;
+  align-items: center;
+  align-self: stretch;
+`;
+
+const Title = styled.div`
+  flex: 1 0 0;
+  font: var(--text-xl);
+  color: var(--sand-light-12, var(--sand-light-12, #1b1b18));
+  font-weight: 500;
+`;
+
+const Settings = styled.a`
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 50px;
+  border: 1px solid var(--sand-light-6, #e3e3e0);
+  background: var(--sand-light-1, #fdfdfc);
+`;
+
+const Card = styled.div`
+  max-width: 592px;
+  margin: 0 auto;
+`;
+
+return (
+  <Card>
+    <Header>
+      <Title>Notifications</Title>
+      <Settings href="#/${REPL_ACCOUNT}/widget/NearOrg.Notifications.Settings">
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.00001 5.34374C8.27687 5.34374 7.56997 5.55818 6.9687 5.95993C6.36743 6.36169 5.8988 6.93271 5.62207 7.60081C5.34534 8.2689 5.27293 9.00405 5.41401 9.71329C5.55509 10.4225 5.90331 11.074 6.41465 11.5854C6.92598 12.0967 7.57746 12.4449 8.28671 12.586C8.99595 12.7271 9.7311 12.6547 10.3992 12.3779C11.0673 12.1012 11.6383 11.6326 12.0401 11.0313C12.4418 10.43 12.6563 9.72313 12.6563 8.99999C12.6551 8.03064 12.2696 7.10131 11.5841 6.41587C10.8987 5.73043 9.96936 5.34486 9.00001 5.34374ZM9.00001 10.9687C8.61062 10.9687 8.22999 10.8533 7.90623 10.6369C7.58247 10.4206 7.33013 10.1131 7.18112 9.7534C7.03211 9.39366 6.99312 8.99781 7.06908 8.61591C7.14505 8.23401 7.33255 7.88321 7.60789 7.60788C7.88322 7.33254 8.23402 7.14504 8.61592 7.06907C8.99782 6.99311 9.39367 7.0321 9.75341 7.18111C10.1132 7.33012 10.4206 7.58246 10.637 7.90621C10.8533 8.22997 10.9688 8.61061 10.9688 8.99999C10.9688 9.52214 10.7613 10.0229 10.3921 10.3921C10.0229 10.7613 9.52215 10.9687 9.00001 10.9687ZM17.0058 7.48335C16.982 7.36451 16.9329 7.25218 16.8618 7.15403C16.7907 7.05587 16.6993 6.97418 16.5938 6.91452L14.6398 5.80007L14.632 3.59859C14.6316 3.47644 14.6047 3.35584 14.5531 3.24513C14.5015 3.13442 14.4265 3.03622 14.3332 2.95734C13.5458 2.29111 12.6391 1.78028 11.6613 1.45195C11.5498 1.41432 11.4316 1.40045 11.3144 1.41123C11.1972 1.42201 11.0835 1.45719 10.9807 1.51452L9.00001 2.62054L7.0193 1.51382C6.91636 1.45618 6.80248 1.42076 6.685 1.40986C6.56752 1.39896 6.44906 1.41282 6.33727 1.45054C5.35919 1.78024 4.45254 2.2925 3.6654 2.96015C3.57245 3.03895 3.49767 3.13694 3.44621 3.2474C3.39474 3.35785 3.36781 3.47814 3.36727 3.59999L3.35743 5.80359L1.40626 6.91523C1.30072 6.97511 1.20935 7.05705 1.13836 7.15546C1.06738 7.25387 1.01845 7.36643 0.994927 7.48546C0.796287 8.48609 0.796287 9.51601 0.994927 10.5166C1.01864 10.6354 1.06765 10.7477 1.13863 10.8459C1.2096 10.944 1.30088 11.0257 1.40626 11.0855L3.36235 12.1999L3.37008 14.4014C3.37051 14.5235 3.39745 14.6441 3.44904 14.7549C3.50064 14.8656 3.57565 14.9638 3.66891 15.0427C4.45634 15.7089 5.36299 16.2197 6.34079 16.548C6.45232 16.5857 6.5705 16.5995 6.68772 16.5888C6.80494 16.578 6.9186 16.5428 7.02141 16.4855L9.00001 15.3794L10.9786 16.4862C11.0815 16.5438 11.1954 16.5792 11.3129 16.5901C11.4304 16.601 11.5488 16.5872 11.6606 16.5494C12.6387 16.2197 13.5454 15.7075 14.3325 15.0398C14.4255 14.961 14.5002 14.863 14.5517 14.7526C14.6032 14.6421 14.6301 14.5218 14.6306 14.4L14.6405 12.1964L16.5959 11.0848C16.7014 11.0249 16.7928 10.9429 16.8638 10.8445C16.9347 10.7461 16.9837 10.6336 17.0072 10.5145C17.2054 9.5138 17.2049 8.48389 17.0058 7.48335ZM15.4146 9.81632L13.5246 10.8907C13.3903 10.9668 13.2796 11.0785 13.2047 11.2134C13.1667 11.2837 13.1266 11.3491 13.0852 11.4159C13.0018 11.549 12.9573 11.7026 12.9565 11.8596L12.9466 13.9922C12.4918 14.3345 11.9936 14.6151 11.4652 14.8268L9.55618 13.7587C9.43029 13.6882 9.28843 13.6512 9.14415 13.6512H9.12375C9.0436 13.6512 8.96204 13.6512 8.88188 13.6512C8.7311 13.6476 8.58209 13.6842 8.45016 13.7573L6.53907 14.8233C6.00972 14.6126 5.51043 14.3332 5.05407 13.9922L5.04633 11.8659C5.04568 11.7087 5.00112 11.5548 4.91766 11.4216C4.87688 11.3555 4.8361 11.2873 4.79813 11.2191C4.72313 11.0849 4.6127 10.974 4.47891 10.8984L2.58751 9.81773C2.51403 9.27552 2.51403 8.72587 2.58751 8.18367L4.47751 7.10929C4.61156 7.03319 4.72221 6.92181 4.79743 6.78726C4.8354 6.71695 4.87547 6.65085 4.91696 6.58406C5.00029 6.45101 5.04485 6.29737 5.04563 6.14038L5.05336 4.00781C5.5084 3.66649 6.00654 3.38681 6.53485 3.17601L8.44383 4.24406C8.5757 4.31803 8.72511 4.35496 8.87626 4.35093C8.95641 4.35093 9.03797 4.35093 9.11813 4.35093C9.26891 4.3545 9.41792 4.31785 9.54985 4.24476L11.4609 3.17671C11.9903 3.38734 12.4896 3.66677 12.9459 4.00781L12.9537 6.13406C12.9543 6.29128 12.9989 6.44519 13.0823 6.57843C13.1231 6.64452 13.1639 6.71273 13.2019 6.78093C13.2769 6.91505 13.3873 7.02597 13.5211 7.10156L15.4125 8.17945C15.4869 8.72249 15.4876 9.27309 15.4146 9.81632Z"
+            fill="#1B1B18"
+          />
+        </svg>
+      </Settings>
+    </Header>
+    <Widget src="${REPL_ACCOUNT}/widget/NearOrg.Notifications.Banner" />
+    <Widget src="${REPL_ACCOUNT}/widget/NearOrg.Notifications.NotificationsList" />
+  </Card>
+);