creator toggle on submit/edit tool form

components/icons/index.js

@@ -727,3 +727,47 @@ export const HandEye = ({ size, className, color }) => {
     </svg>
   );
 };
+export const PenLineSimple = ({ size, className, color }) => {
+  return (
+    <svg
+      className={className}
+      width={size ? size : "32"}
+      height={size ? size : "32"}
+      fill={color ? color : "currentColor"}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 256"
+    >
+      <rect width="256" height="256" fill="none" />
+      <path
+        d="M96,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31Z"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <line
+        x1="216"
+        y1="216"
+        x2="96"
+        y2="216"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+      <line
+        x1="136"
+        y1="64"
+        x2="192"
+        y2="120"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="16"
+      />
+    </svg>
+  );
+};

components/toolbox/forms/DescriptionExcerptForm.js

@@ -11,6 +11,7 @@ import MiniEditor from "@/components/MiniEditor/MiniEditor";
 import useLoad from "../hooks/useLoad";
 import { useWizardContext } from "react-sweet-wizard";
 import Editor from "@/components/Editor/Editor";
+import { ToggleSwitch } from "@/components/atom/Switch/switch";
 const Spinner = dynamic(() => import("@/components/atom/Spinner/Spinner"));
 const axios = require("axios");
 
@@ -22,33 +23,32 @@ function isEmptyObject(obj) {
   );
 }
 
-const DescriptionExcerptForm = ({ user, isEditMode,postObject, loading }) => {
+const DescriptionExcerptForm = ({ user, isEditMode, postObject, loading }) => {
   // const { loading, postObject, isOwner } = useLoad(user);
 
-
   return !user && loading ? (
     <Spinner />
   ) : postObject ? (
     <Form postObject={postObject} user={user} isEditMode={isEditMode} />
   ) : (
     <div>
-    <div className="px-6 md:px-0 max-w-2xl w-full">
-    <div className="mb-6 ">
-      <h1 className="text-xl font-semibold mx-auto mb-2">
-        Add your description
-      </h1>
-      <p className="text-gray-600">
-        Write a longer description, and a short excerpt. The description can
-        be like a blog post, highlighting benefits of the product.
-      </p>
-    </div>
-    </div>
-    <div className="text-center flex flex-col h-full w-full justify-center">
-      <div className="mx-auto text-gray-600">
-        <Spinner  />
+      <div className="px-6 md:px-0 max-w-2xl w-full">
+        <div className="mb-6 ">
+          <h1 className="text-xl font-semibold mx-auto mb-2">
+            Tell us about your product
+          </h1>
+          <p className="text-gray-600">
+            Write a longer description, and a short excerpt. The description can
+            be like a blog post, highlighting benefits of the product.
+          </p>
+        </div>
+      </div>
+      <div className="text-center flex flex-col h-full w-full justify-center">
+        <div className="mx-auto text-gray-600">
+          <Spinner />
+        </div>
       </div>
     </div>
-  </div>
   );
 };
 
@@ -83,6 +83,24 @@ const Form = ({ user, postObject, isEditMode }) => {
         values.excerpt = exc;
       }
 
+      if (values.isCreator) {
+        //turn postObject.creators array into an array of ids (from each element.id)
+
+        let creatorIds = [];
+        if (postObject?.creators?.length) {
+          creatorIds = postObject?.creators?.map(creator => creator.id);
+        }
+
+        //add user id to the array of creator ids if it's not already there
+        if (!creatorIds.includes(user.id)) {
+          creatorIds.push(user.id);
+        }
+        if(creatorIds.length>0){
+          values.creators = creatorIds
+        }
+      }
+      delete values.isCreator;
+
       async function submit() {
         setIsSubmitting(true);
         let publishPostEndpointConfig = {
@@ -135,22 +153,54 @@ const Form = ({ user, postObject, isEditMode }) => {
 
   const [content, setContent] = useState(postObject?.content);
   const [excerpt, setExcerpt] = useState(postObject?.excerpt);
+  const [isCreator, setIsCreator] = useState(
+    postObject?.creators?.length &&
+      postObject.creators.find(creator => creator.id === user.id) !== undefined
+  );
+
   useEffect(() => {
-    setContent(postObject?.content);
-    setExcerpt(postObject?.excerpt);
-  }, [postObject]);
+    if (!content) {
+      setContent(postObject?.content);
+    }
+    if (!excerpt) {
+      setExcerpt(postObject?.excerpt);
+    }
+    setIsCreator(
+      postObject?.creators?.length &&
+        postObject.creators.find(creator => creator.id === user.id) !==
+          undefined
+    );
+  }, [postObject, user]);
 
   return (
     <div className="px-6 md:px-0 max-w-2xl w-full">
       <div className="mb-6 ">
         <h1 className="text-xl font-semibold mx-auto mb-2">
-          Add your description
+          Tell us about your product
         </h1>
         <p className="text-gray-600">
-          Write a longer description, and a short excerpt. The description can
-          be like a blog post, highlighting benefits of the product.
+          Share a tagline, and an in-depth product description. For best
+          results, highlight benefits and key features in your description.
         </p>
       </div>
+
+      <div className="mb-2">
+        <label className="text-md font-medium ">Did you make it?</label>
+        <p className="text-sm text-gray-500">
+          Add yourself as the creator of this tool.
+        </p>
+        <div className="mt-2">
+          <ToggleSwitch
+            size="small"
+            checked={isCreator}
+            onToggle={() => {
+              setIsCreator(!isCreator);
+              formik.setFieldValue("isCreator", !isCreator);
+            }}
+          />
+        </div>
+      </div>
+
       <form
         className="mt-6"
         onSubmit={e => {

lib/addSupportScript.js

@@ -3,8 +3,18 @@ export const addSupportScript = () => {
     if(window.$chatwoot) return;
 
   if (document && !document.getElementById("support-script")) {
+   addScript()
+  }else{
+    let supportScript = document.getElementById("support-script")
+    supportScript.remove()
+    addScript()
+  }
+};
+
+
+const addScript = () =>{
+    console.log('adding script')
     const s = document.createElement("script");
-    s.setAttribute("src", "https://platform.twitter.com/widgets.js");
     s.setAttribute("id", "support-script");
     s.setAttribute("async", "true");
 
@@ -26,5 +36,4 @@ export const addSupportScript = () => {
       })(document, "script");
     `
     document.head.appendChild(s);
-  }
-};
+}

lib/queries/singlePostQuery.js

@@ -105,6 +105,7 @@ export default `
             }
             author: user {
               data {
+                id
                 attributes {
                   paymentPointer
                   name: username

lib/queries/userArticle.js

@@ -22,6 +22,7 @@ query UserArticle($id:ID!) {
     legacyLogo
     gallery
     deal
+    creators
   }
 }
 `;

pages/post/[slug].js

@@ -36,6 +36,7 @@ import { createB64WithFallback } from "@/lib/utils/blurHashToDataURL";
 import getSponsors from "@/lib/utils/getSponsors";
 
 import AdCard from "@/components/v4/card/AdCard";
+import { PenLineSimple } from "@/components/icons";
 
 // import ToolBackgroundCard from "@/components/v4/card/ToolBackgroundCard";
 const StickyFooterCTA = dynamic(() => import("@/components/StickyFooterCTA"), {
@@ -144,13 +145,29 @@ export default function Post({
       >
         <div className="w-full h-full grid grid-cols-12 gap-1 mx-auto mx-auto bg-gray-100/20">
           {user?.isAdmin && (
-            <div className="fixed bottom-0 mb-16 z-50 border border-gray-100 bg-white mr-16 right-0 p-4 rounded shadow">
-              <p className="text-sm">Hi, Admin 👩‍✈️</p>
-              <button className="p-1 mt-3 px-3 text-sm text-white bg-purple-600 shadow rounded">
-                <Link href={`/p/${post?.id}`}>Edit</Link>
-              </button>
-            </div>
+            <div className="fixed bottom-0 mb-6 z-50 border border-gray-200 bg-white mr-20 right-0 p-2 px-3 rounded-full shadow-sm">
+            {/* <button className="p-1 px-3 text-sm text-white bg-purple-600 shadow rounded"> */}
+            <Link href={`/p/${post?.id}`}>
+              <div className="flex text-gray-700">
+                <PenLineSimple className="w-4 h-4 my-auto mr-2" />
+                <div className="my-auto text-sm">Edit</div>
+              </div>
+            </Link>
+            {/* </button> */}
+          </div>
           )}
+          {!user?.isAdmin && (user?.id == post?.attributes?.author?.data?.id) ? (
+            <div className="fixed bottom-0 mb-6 z-50 border border-gray-200 bg-white mr-20 right-0 p-2 px-3 rounded-full shadow-sm">
+              {/* <button className="p-1 px-3 text-sm text-white bg-purple-600 shadow rounded"> */}
+              <Link href={`/p/${post?.id}`}>
+                <div className="flex text-gray-700">
+                  <PenLineSimple className="w-4 h-4 my-auto mr-2" />
+                  <div className="my-auto text-sm">Edit</div>
+                </div>
+              </Link>
+              {/* </button> */}
+            </div>
+          ) : null}
 
           {/* <Alert preview={preview} /> */}
           <main className="pb-20 gap-2 col-span-12 lg:col-span-12 overflow-x-hidden px-0 ">

pages/toolbox/post/[id]/claim.js

@@ -121,37 +121,31 @@ export default function ClaimToolPage({ data }) {
           ) : claimedByUser ? (
             <>
               <p className="text-gray-800 mt-6">
-              ✅ You have claimed this page. You will be notified once the claim
-                is approved.
+                ✅ You have claimed this page. You will be notified once the
+                claim is approved.
               </p>
               <p className="text-gray-800 mt-1">
-              💬 Please contact support if you need any more help.
+                💬 Please contact support if you need any more help.
               </p>
-                <Button
-                  className="mt-6 rounded-full"
-                  onClick={() => {
-                     // console.log(user)
-                      // pop up chat
-                      // window.$chatwoot?.setUser(user?.id, {
-                      //   claimId: post?.id,
-                      //   claimName: post?.attributes?.title,
-                      // });
-                      if (!window?.$chatwoot) {
-                        addSupportScript();
-                        setTimeout(() => {
-                          window?.$chatwoot?.toggle();
-                        }, 1000);
-                      } else {
-                        window?.$chatwoot?.toggle();
-                      }
-                      // window.$chatwoot.popoutChatWindow();
+              <Button
+                className="mt-6 rounded-full"
+                onClick={() => {
+                  // console.log(user)
+                  // pop up chat
+                  // window.$chatwoot?.setUser(user?.id, {
+                  //   claimId: post?.id,
+                  //   claimName: post?.attributes?.title,
+                  // });
 
-                      // woot-widget-bubble
-                  }}
-                  type="button"
-                >
-                  Ask support
-                </Button>
+                  window.$chatwoot?.toggle();
+                  // window.$chatwoot.popoutChatWindow();
+
+                  // woot-widget-bubble
+                }}
+                type="button"
+              >
+                Ask support
+              </Button>
             </>
           ) : (
             ""

pages/toolbox/post/[id]/index.js

@@ -358,7 +358,7 @@ const ToolSteps = ({ user, postObject, refetchPost, loading }) => {
                     : postObject.status == "pending"
                       ? "Pending review"
                       : postObject.status == "publish"
-                        ? "Your post is live!"
+                        ? "Your post is live 🎉"
                         : "Thanks for your submission!"}
                 </h1>
                 <p className="text-lg mt-4 text-gray-600">
@@ -368,14 +368,7 @@ const ToolSteps = ({ user, postObject, refetchPost, loading }) => {
                     "Thanks for your submission, your post is awaiting review. We will notify you when it is live. You can still make changes."
                   ) : postObject.status == "publish" ? (
                     <>
-                      Your tool has been published.{" "}
-                      <a
-                        href={`/toolbox/${postObject.slug}`}
-                        target="_blank"
-                        className="text-primary-500 underline"
-                      >
-                        View it here
-                      </a>
+                      Your tool has been published. Thank you for contributing!
                     </>
                   ) : (
                     "Your tool is saved as a draft. You can edit it anytime."
@@ -429,23 +422,24 @@ const ToolSteps = ({ user, postObject, refetchPost, loading }) => {
                 </div>
               ) : (
                 <>
-                  <p className="text-gray-800 mt-6">
+                  <p className="text-gray-700 mt-8">
                     Any questions? Please contact support.
                   </p>
                   <Button
-                    className="mt-6 rounded-full"
+                    className="mt-3 rounded-full"
                     onClick={() => {
                       // console.log(user)
                       // pop up chat
                       // window.$chatwoot?.setUser(user?.id, {
                       //   claimId: post?.id,
                       //   claimName: post?.attributes?.title,
                       // });
+                      console.log(window.$chat)
                       if (!window?.$chatwoot) {
                         addSupportScript();
                         setTimeout(() => {
                           window?.$chatwoot?.toggle();
-                        }, 3000);
+                        }, 1000);
                       } else {
                         window?.$chatwoot?.toggle();
                       }