Onboarding Flow (#128)

* Fix post colors to match figma * Add stroke to compose for more coherent UI * Profile in progress, some fixes * rename * fix href * Fix post colors to match figma * Add stroke to compose for more coherent UI * Profile in progress, some fixes * rename * fix href * Profile Page * Style updates * Style updates to profile page * Fix projects page * Fix projects page * Clear compose draft when post * Resolve comments * Fix more hrefs * Change more href * Remove layout loading text * Try to fix all VM requires * Fix flashes on home page * Replace all VM.require fallbacks to correct object * Run prettier * Use correct fallback for DaoSDK * Remove un needed tag from compose * Fix compose rerender on commit * Remove unneeded css * Remove pinned comment as it is duplicate of bio * Fix bookmark button hover * Login/Onboarding flow update (#125) * updated navbar, deleted join page * Clean up (#121) * Fix post colors to match figma * Add stroke to compose for more coherent UI * Profile in progress, some fixes * rename * fix href * Fix post colors to match figma * Add stroke to compose for more coherent UI * Profile in progress, some fixes * rename * fix href * Profile Page * Style updates * Style updates to profile page * Fix projects page * Fix projects page * Clear compose draft when post * Resolve comments * Fix more hrefs * Change more href * Remove layout loading text * Try to fix all VM requires * Fix flashes on home page * Replace all VM.require fallbacks to correct object * Run prettier * Use correct fallback for DaoSDK * Remove un needed tag from compose * Fix compose rerender on commit * Remove unneeded css --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> * added onboarding flow screens * finish setup * rename files * minor bug fix * add following logic * fix the visibility issue * suggestive changes --------- Co-authored-by: Elliot Braem <16282460+elliotBraem@users.noreply.github.com> Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> --------- Co-authored-by: Zeeshan Ahmad <itexpert120@outlook.com> Co-authored-by: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
NEARBuilders · Feb 7, 2024 · daca7f2 · daca7f2
1 parent 8811e46
commit daca7f2
Show file tree

Hide file tree

Showing 19 changed files with 430 additions and 158 deletions.
diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
@@ -5,7 +5,7 @@ const { User, Button } = VM.require("buildhub.near/widget/components") || {
 
 const draftKey = props.draftKey || "draft";
 const draft = Storage.privateGet(draftKey);
-
+const postBtnText = props.postBtnText;
 if (draft === null) {
   return "";
 }
@@ -30,7 +30,7 @@ function tagsFromLabels(labels) {
   return labels.reduce(
     (newLabels, label) => ({
       ...newLabels,
-      [label]: "",
+      [label]: ""
     }),
     {}
   );
@@ -76,8 +76,8 @@ const extractMentionNotifications = (text, item) =>
       key: accountId,
       value: {
         type: "mention",
-        item,
-      },
+        item
+      }
     }));
 
 function checkAndAppendHashtag(input, target) {
@@ -113,20 +113,20 @@ const postToCustomFeed = ({ feed, text }) => {
     post: {
       main: JSON.stringify({
         type: "md",
-        text,
+        text
         // tags: tagsFromLabels(labels),
         // postType: feed.name,
-      }),
+      })
     },
     index: {
-      post: JSON.stringify({ key: "main", value: { type: "md" } }),
+      post: JSON.stringify({ key: "main", value: { type: "md" } })
       // every: JSON.stringify({ key: feed.name, value: { type: "md" } }),
-    },
+    }
   };
 
   const item = {
     type: "social",
-    path: `${context.accountId}/post/main`,
+    path: `${context.accountId}/post/main`
   };
 
   const notifications = extractMentionNotifications(text, item);
@@ -143,7 +143,7 @@ const postToCustomFeed = ({ feed, text }) => {
     data.index.hashtag = JSON.stringify(
       hashtags.map((hashtag) => ({
         key: hashtag,
-        value: item,
+        value: item
       }))
     );
   }
@@ -158,7 +158,7 @@ const postToCustomFeed = ({ feed, text }) => {
     },
     onCancel: () => {
       // console.log(`Cancelled ${feed}: #${postId}`);
-    },
+    }
   });
 };
 
@@ -393,7 +393,7 @@ return (
               onChange: (v) => {
                 setPostContent(v);
                 Storage.privateSet(draftKey, v || "");
-              },
+              }
             }}
           />
         </TextareaWrapper>
@@ -430,11 +430,11 @@ return (
           postToCustomFeed({
             feed: props.feed,
             text: postContent,
-            labels,
+            labels
           })
         }
       >
-        Post {props.feed.name}
+        {postBtnText ?? "Post" + props.feed.name}
       </Button>
     </div>
   </PostCreator>

diff --git a/apps/builddao/widget/Feed.jsx b/apps/builddao/widget/Feed.jsx
@@ -1,10 +1,31 @@
 const { Feed } = VM.require("devs.near/widget/Feed") || {
-  Feed: () => <></>,
+  Feed: () => <></>
 };
 const { Post } = VM.require("buildhub.near/widget/components") || {
-  Post: () => <></>,
+  Post: () => <></>
 };
 
+const { Button } = VM.require("buildhub.near/widget/components") || {
+  Button: () => <></>
+};
+
+const LoginContainer = styled.div`
+  background-color: #23242b;
+  color: #fff;
+
+  width: 100%;
+  height: 16rem;
+  border-radius: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+
+  margin-bottom: 1rem;
+`;
+
 const { name: feedName, template, requiredHashtags, customActions } = props;
 
 // for modals
@@ -14,7 +35,7 @@ const toggleProposeModal = () => {
   setShowProposeModal(!showProposeModal);
 };
 const modalToggles = {
-  propose: toggleProposeModal,
+  propose: toggleProposeModal
 };
 
 return (
@@ -27,17 +48,18 @@ return (
           props={{
             showModal: showProposeModal,
             toggleModal: toggleProposeModal,
-            item: item,
+            item: item
           }}
         />
       </>
     )}
     {!context.accountId ? ( // if not logged in
-      <Widget
-        loading=""
-        src="buildhub.near/widget/components.login-now"
-        props={props}
-      />
+      <LoginContainer>
+        <p>Please login in order to post.</p>
+        <Link to={"/join"}>
+          <Button variant="primary">Login</Button>
+        </Link>
+      </LoginContainer>
     ) : (
       <Widget
         loading={
@@ -51,7 +73,7 @@ return (
           draftKey: feedName,
           template: template,
           requiredHashtags: requiredHashtags,
-          feed: { ...props },
+          feed: { ...props }
         }}
       />
     )}
@@ -61,12 +83,12 @@ return (
         key: it,
         options: {
           limit: 10,
-          order: "desc",
+          order: "desc"
         },
         cacheOptions: {
-          ignoreCache: true,
+          ignoreCache: true
         },
-        required: true,
+        required: true
       }))}
       Item={(p) => (
         <Post